/* Theme 2 ("Modern") — base stylesheet. Design tokens (colors) are injected as CSS variables from web_settings in the of theme2/layout.blade.php; this file only reads them. */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Work Sans', sans-serif; background: var(--t2-ivory); color: var(--t2-ink); font-size: 15px; line-height: 1.5; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } ul { list-style: none; margin: 0; padding: 0; } .h-font { font-family: 'Fraunces', serif; } .t2-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ---------- Buttons ---------- */ .t2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; } .t2-btn-primary { background: var(--t2-button); color: var(--t2-secondary); } .t2-btn-primary:hover { background: var(--t2-button-hover); color: var(--t2-secondary); } .t2-btn-outline { background: transparent; border: 1px solid rgba(247, 245, 240, 0.35); color: var(--t2-ivory); } .t2-btn-secondary { background: var(--t2-primary); color: #fff; } .t2-btn-secondary:hover { background: var(--t2-primary); filter: brightness(1.1); color: #fff; } .t2-btn-free-delivery { background: var(--t2-free-delivery); color: #fff; } .t2-btn-free-delivery:hover { background: var(--t2-free-delivery-hover); color: #fff; } .t2-btn-outline-cart { border: 1px solid var(--t2-border); } .t2-btn-outline-cart:hover { border-color: var(--t2-primary); color: var(--t2-primary); } .t2-btn-sm { padding: 8px 14px; font-size: 13px; } .t2-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 8px; flex-shrink: 0; } /* Primary call-to-action (Buy Now on the product page, Confirm Order at checkout): a slow light sweep, a soft pulse ring, a lift + sliding arrow on hover, a press-down on click and a spinner once submitted. Everything moving is switched off for reduced-motion users. */ .t2-btn-cta { --t2-cta-glow: var(--t2-button); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 12px 24px -14px var(--t2-cta-glow); transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.25s ease, background 0.2s ease; animation: t2-cta-pulse 3.4s ease-out infinite; } .t2-btn-cta.t2-btn-free-delivery { --t2-cta-glow: var(--t2-free-delivery); } .t2-btn-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-160%) skewX(-20deg); animation: t2-cta-sheen 3.4s ease-in-out infinite; pointer-events: none; } .t2-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px var(--t2-cta-glow); } .t2-btn-cta:active { transform: translateY(0) scale(0.985); box-shadow: 0 6px 14px -8px var(--t2-cta-glow); } .t2-btn-cta:focus-visible { outline: 3px solid var(--t2-ink); outline-offset: 3px; } .t2-btn-cta-icon { animation: t2-cta-bolt 3.4s ease-in-out infinite; } .t2-btn-cta-arrow { transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.24, 1); } .t2-btn-cta:hover .t2-btn-cta-arrow { transform: translateX(4px); } .t2-btn-cta.is-loading { pointer-events: none; animation: none; transform: none; } .t2-btn-cta.is-loading::after, .t2-btn-cta.is-loading .t2-btn-cta-icon, .t2-btn-cta.is-loading .t2-btn-cta-arrow { display: none; } .t2-btn-cta.is-loading::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: t2-cta-spin 0.7s linear infinite; } @keyframes t2-cta-sheen { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 90%, 100% { transform: translateX(420%) skewX(-20deg); } } @keyframes t2-cta-pulse { 0% { box-shadow: 0 12px 24px -14px var(--t2-cta-glow), 0 0 0 0 color-mix(in srgb, var(--t2-cta-glow) 55%, transparent); } 60%, 100% { box-shadow: 0 12px 24px -14px var(--t2-cta-glow), 0 0 0 14px transparent; } } @keyframes t2-cta-bolt { 0%, 60%, 100% { transform: none; } 68% { transform: rotate(-14deg) scale(1.15); } 76% { transform: rotate(10deg) scale(1.15); } 84% { transform: none; } } @keyframes t2-cta-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .t2-btn-cta, .t2-btn-cta::after, .t2-btn-cta-icon { animation: none; } .t2-btn-cta::after { display: none; } .t2-btn-cta, .t2-btn-cta-arrow { transition: none; } .t2-btn-cta.is-loading::before { animation-duration: 1.6s; } } /* ---------- Announcement / top bar ---------- */ .t2-topbar { background: var(--t2-header-top); color: #F1EEE4; } .t2-topbar .t2-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; font-size: 13px; } .t2-topbar .t2-container>div:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .t2-topbar a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } .t2-topbar a:hover { color: var(--t2-button); } .t2-topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .t2-lang-switch { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } .t2-lang-switch span { opacity: 0.5; } .t2-lang-switch a { opacity: 0.65; font-weight: 600; } .t2-lang-switch a.is-active { opacity: 1; color: var(--t2-button); } .t2-lang-switch a:hover { opacity: 1; } /* ---------- Header ---------- */ .t2-header { background: var(--t2-header); border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 0; z-index: 500; } .t2-header .t2-container { display: flex; align-items: center; gap: 32px; height: 84px; } .t2-logo { font-size: 24px; font-weight: 700; color: var(--t2-ivory); flex-shrink: 0; display: flex; align-items: center; height: 100%; padding: 12px 0; } .t2-logo img { display: block; width: auto; height: auto; max-width: 160px; max-height: 100%; object-fit: contain; } @media (max-width: 991.98px) { .t2-logo img { max-width: 130px; } } /* Live search */ .t2-search { flex: 1; max-width: 520px; position: relative; } .t2-search-form { display: flex; } .t2-search-form select, .t2-search-form input { border: none; height: 44px; font-size: 13px; padding: 0 14px; background: #fff; color: var(--t2-ink); } .t2-search-form select { border-radius: 6px 0 0 6px; max-width: 140px; border-right: 1px solid var(--t2-border); } .t2-search-form input { flex: 1; min-width: 0; } .t2-search-form button { width: 48px; height: 44px; border: none; border-radius: 0 6px 6px 0; background: var(--t2-button); color: var(--t2-secondary); cursor: pointer; flex-shrink: 0; } .t2-search-suggestions { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 10px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); overflow: hidden; z-index: 600; max-height: 420px; overflow-y: auto; } .t2-search-suggestions.is-open { display: block; } .t2-search-suggestions a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--t2-ink); } .t2-search-suggestions a:hover { background: var(--t2-ivory); } .t2-search-suggestions img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--t2-ivory); flex-shrink: 0; } .t2-search-suggestions .t2-sg-name { font-size: 13px; font-weight: 500; flex: 1; } .t2-search-suggestions .t2-sg-price { font-size: 13px; font-weight: 700; color: var(--t2-primary); } .t2-search-suggestions .t2-sg-empty { padding: 16px; font-size: 13px; color: var(--t2-muted); text-align: center; } .t2-header-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; flex-shrink: 0; } .t2-header-actions>a, .t2-header-actions>button { color: var(--t2-ivory); display: flex; align-items: center; gap: 6px; font-size: 14px; background: none; border: none; cursor: pointer; padding: 0; position: relative; } .t2-icon-badge { position: relative; } .t2-icon-count { position: absolute; top: -6px; right: -10px; width: 17px; height: 17px; border-radius: 50%; background: var(--t2-button); color: var(--t2-secondary); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .t2-nav-toggle { display: none; background: none; border: none; color: var(--t2-ivory); padding: 4px; cursor: pointer; } .t2-header-actions .t2-mobile-search-toggle { display: none; } .t2-mobile-search-row { display: none; background: var(--t2-header); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .t2-mobile-search-row.is-open { display: block; } .t2-mobile-search-row .t2-container { position: relative; padding: 12px 16px; } .t2-mobile-search-row .t2-search-form { display: flex; } .t2-mobile-search-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: none; border-radius: 6px 0 0 6px; font-size: 14px; } .t2-mobile-search-row button { width: 48px; height: 44px; border: none; border-radius: 0 6px 6px 0; background: var(--t2-button); color: var(--t2-secondary); cursor: pointer; flex-shrink: 0; } .t2-mobile-search-row .t2-search-suggestions { left: 16px; right: 16px; } /* ---------- Category nav strip ---------- */ .t2-nav { background: var(--t2-header-bottom); } .t2-nav-row { display: flex; align-items: stretch; } /* Mega-menu trigger + panel — a store can have 20-30+ top-level categories, so the nav never lists them inline (it wraps into an unreadable multi-line mess); everything lives behind one trigger. */ .t2-megamenu { position: relative; } .t2-megamenu-trigger { display: flex; align-items: center; gap: 8px; height: 100%; padding: 14px 20px; background: rgba(0, 0, 0, 0.15); border: none; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; } .t2-megamenu-trigger:hover { background: rgba(0, 0, 0, 0.25); } .t2-megamenu-panel { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); border-radius: 0 0 12px 12px; z-index: 60; width: min(920px, 90vw); max-height: 70vh; overflow-y: auto; padding: 24px; } .t2-megamenu.is-open .t2-megamenu-panel { display: block; } .t2-megamenu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; } .t2-megamenu-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .t2-megamenu-col a { color: var(--t2-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t2-megamenu-col a:hover { color: var(--t2-primary); } .t2-megamenu-title { color: var(--t2-secondary) !important; font-weight: 700; font-size: 14px !important; margin-bottom: 4px; } .t2-megamenu-more { font-style: italic; } .t2-nav-links { display: flex; } .t2-nav-links li>a { display: block; padding: 14px 18px; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; } .t2-nav-links li>a:hover { background: rgba(0, 0, 0, 0.12); } @media (max-width: 1199.98px) { .t2-megamenu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Mobile nav drawer ---------- */ .t2-mobile-nav { display: none; position: fixed; inset: 0; z-index: 900; } .t2-mobile-nav.is-open { display: block; } .t2-mobile-nav-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .t2-mobile-nav-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: var(--t2-header); padding: 24px 20px; overflow-y: auto; } .t2-mobile-nav-panel .t2-close { background: none; border: none; color: var(--t2-ivory); font-size: 22px; margin-bottom: 16px; cursor: pointer; } .t2-mobile-nav-panel a { display: block; padding: 12px 0; color: var(--t2-ivory); font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .t2-mobile-nav-panel .t2-mobile-children a { padding-left: 16px; font-size: 13px; color: #B9C2BC; border-bottom: none; } .t2-mobile-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .t2-mobile-cat-row a { flex: 1; min-width: 0; border-bottom: none; } .t2-mobile-cat-toggle { flex: none; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background: none; color: var(--t2-ivory); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; } .t2-mobile-children { display: none; } .t2-mobile-cat-item.is-open .t2-mobile-children { display: block; } /* ---------- Mini-cart drawer ---------- */ .t2-cart-drawer { position: fixed; inset: 0; z-index: 950; visibility: hidden; transition: visibility 0s linear .35s; } .t2-cart-drawer.is-open { visibility: visible; transition-delay: 0s; } .t2-cart-drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .3s ease; } .t2-cart-drawer.is-open .t2-cart-drawer-overlay { opacity: 1; } .t2-cart-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 92%; max-width: 400px; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .t2-cart-drawer.is-open .t2-cart-drawer-panel { transform: translateX(0); } .t2-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--t2-border); } .t2-cart-drawer-head h3 { margin: 0; font-size: 17px; } .t2-cart-drawer-head button { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--t2-muted); } .t2-cart-drawer-body { flex: 1; overflow-y: auto; padding: 12px 20px; } .t2-cart-drawer-footer { padding: 16px 20px 20px; border-top: 1px solid var(--t2-border); } @media (max-width: 575.98px) { .t2-cart-drawer-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 85vh; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18); transform: translateY(100%); } .t2-cart-drawer.is-open .t2-cart-drawer-panel { transform: translateY(0); } } .t2-cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t2-border); } .t2-cart-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--t2-ivory); flex-shrink: 0; } .t2-cart-line .t2-cart-line-body { flex: 1; min-width: 0; } .t2-cart-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .t2-cart-line .t2-cart-line-name { font-size: 13px; font-weight: 500; line-height: 1.4; } .t2-cart-line .t2-cart-line-meta { font-size: 12px; color: var(--t2-muted); display: flex; justify-content: space-between; align-items: center; } .t2-cart-line .t2-cart-line-price { font-weight: 600; color: var(--t2-ink); } .t2-cart-line .t2-cart-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--t2-border); border-radius: 6px; } .t2-cart-line .t2-cart-qty-stepper button { width: 26px; height: 26px; border: none; background: none; cursor: pointer; font-size: 14px; transition: color .15s ease; } .t2-cart-line .t2-cart-qty-stepper button:hover:not(:disabled) { color: var(--t2-primary); } .t2-cart-line .t2-cart-qty-stepper button:disabled { color: var(--t2-border); cursor: not-allowed; } .t2-cart-line .t2-cart-qty-stepper span { min-width: 22px; text-align: center; font-size: 12px; } .t2-cart-line .t2-cart-remove { color: var(--t2-muted); flex-shrink: 0; padding: 2px; border-radius: 4px; transition: color .15s ease, background .15s ease; } .t2-cart-line .t2-cart-remove:hover { color: #c0392b; background: #fdecea; } .t2-cart-empty { padding: 40px 0; text-align: center; color: var(--t2-muted); font-size: 14px; } .t2-cart-summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .t2-cart-summary-row.total { font-size: 16px; font-weight: 700; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--t2-border); } /* ---------- Quick-view modal ---------- */ .t2-quickview { display: none; position: fixed; inset: 0; z-index: 970; align-items: center; justify-content: center; padding: 20px; } .t2-quickview.is-open { display: flex; } .t2-quickview-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .t2-quickview-panel { position: relative; background: #fff; border-radius: 14px; max-width: 860px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px; } .t2-quickview-close { position: absolute; top: 14px; right: 14px; background: var(--t2-ivory); border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 2; } .t2-quickview-loading { padding: 80px 0; text-align: center; color: var(--t2-muted); } /* ---------- Footer ---------- */ .t2-footer { background: var(--t2-footer-bg, #0F1D17); color: #B9C2BC; padding: 56px 0 24px; } .t2-footer .t2-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .t2-footer h3 { font-size: 14px; font-weight: 600; color: var(--t2-ivory); margin: 0 0 14px; } .t2-footer p, .t2-footer li { font-size: 13px; line-height: 1.9; } .t2-footer .t2-social { display: flex; gap: 10px; margin-top: 14px; } .t2-footer .t2-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; } .t2-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .t2-text-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 600; color: #D7E7DF; letter-spacing: .2px; } .t2-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 40px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #6B7C74; flex-wrap: wrap; gap: 12px; } /* ---------- Back to top ---------- */ .t2-back-to-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--t2-primary); color: #fff; display: none; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); z-index: 400; } .t2-back-to-top.show { display: flex; } @media (max-width: 991.98px) { .t2-search, .t2-nav { display: none; } .t2-header-actions .t2-phone-link { display: none; } .t2-nav-toggle { display: inline-flex; } .t2-header-actions .t2-mobile-search-toggle { display: inline-flex; } .t2-header .t2-container { height: 68px; } .t2-footer .t2-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } @media (max-width: 575.98px) { .t2-footer .t2-footer-grid { grid-template-columns: 1fr; } .t2-topbar .t2-container { font-size: 11px; } .t2-quickview-panel { padding: 20px; } } /* ================= Homepage ================= */ .t2-section { padding: 48px 0; } .t2-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .t2-section-head h2 { margin: 0; font-size: 26px; font-weight: 600; color: var(--t2-secondary); } .t2-section-head .t2-view-all { font-size: 14px; font-weight: 600; color: var(--t2-button-hover); white-space: nowrap; } .t2-section-head .t2-view-all:hover { color: var(--t2-primary); } /* "View all": in the section header on wide screens; on phones it moves to a full-width button under the products. */ .t2-section-foot { display: none; margin-top: 18px; } .t2-view-all-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border: 1.5px solid var(--t2-primary); border-radius: 12px; background: #fff; color: var(--t2-primary); font-size: 14px; font-weight: 600; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .t2-view-all-btn:hover, .t2-view-all-btn:active { background: var(--t2-primary); color: #fff; } .t2-view-all-btn:active { transform: scale(0.985); } @media (max-width: 767.98px) { .t2-section-head .t2-view-all { display: none; } .t2-section-foot { display: block; } } /* Banner slider Native scroll-snap does the sliding (touch swipe + momentum for free); theme2.js only adds arrows, dots and autoplay. The autoplay timer is the fill animation on the active dot: its animationend advances the slide, so pausing that animation (hover, keyboard focus, hidden tab, off-screen, the pause button) is all it takes to pause autoplay. */ .t2-slider { /* The admin asks for banners of at least 1445x365px. */ --t2-slider-ratio: 1445 / 365; position: relative; width: 100%; overflow: hidden; isolation: isolate; background: var(--t2-secondary); } .t2-slider-viewport { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; } .t2-slider-viewport::-webkit-scrollbar { display: none; } .t2-slider-viewport:focus-visible { outline: 3px solid var(--t2-button); outline-offset: -3px; } .t2-slide { position: relative; flex: 0 0 100%; aspect-ratio: var(--t2-slider-ratio); max-height: 640px; scroll-snap-align: start; scroll-snap-stop: always; } .t2-slide-link { position: absolute; inset: 0; display: block; overflow: hidden; } /* A blurred copy of the banner fills the frame behind the sharp one, so a banner of any shape shows whole (its text is never cropped) without leaving empty bars. */ .t2-slide-bg { position: absolute; inset: -24px; width: calc(100% + 48px); max-width: none; height: calc(100% + 48px); object-fit: cover; filter: blur(22px) saturate(1.15) brightness(0.85); } .t2-slide-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0.9; transform: scale(1.03); transition: transform 1.1s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.7s ease; } .t2-slide.is-active .t2-slide-img { opacity: 1; transform: none; } .t2-slider-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--t2-ink); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35); cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease; } .t2-slider-prev { left: 16px; } .t2-slider-next { right: 16px; } .t2-slider:hover .t2-slider-arrow, .t2-slider-arrow:focus-visible { opacity: 1; transform: none; } .t2-slider-arrow:hover { background: var(--t2-button); } /* Touch screens swipe instead. */ @media (hover: none) { .t2-slider-arrow { display: none; } } .t2-slider-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 29, 23, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 600; } .t2-slider-dots { display: flex; align-items: center; gap: 2px; } /* The button is a tall, transparent tap target; the visible track and its fill are the pseudo-element and the inner span. */ .t2-slider-dot { position: relative; width: 20px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width 0.4s cubic-bezier(0.22, 0.8, 0.24, 1); } .t2-slider-dot::before, .t2-slider-dot-fill { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px; } .t2-slider-dot::before { background: rgba(255, 255, 255, 0.35); transition: background 0.2s ease; } .t2-slider-dot:hover::before { background: rgba(255, 255, 255, 0.55); } .t2-slider-dot.is-active { width: 46px; } .t2-slider-dot-fill { background: var(--t2-button); transform: scaleX(0); transform-origin: left center; } .t2-slider-dot.is-active .t2-slider-dot-fill { animation: t2-slider-fill var(--t2-slider-delay, 5500ms) linear forwards; } @keyframes t2-slider-fill { to { transform: scaleX(1); } } .t2-slider-count { min-width: 34px; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; } .t2-slider-toggle { width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; transition: background 0.2s ease; } .t2-slider-toggle:hover { background: rgba(255, 255, 255, 0.34); } .t2-slider-toggle .t2-icon-play, .t2-slider.is-static .t2-slider-toggle .t2-icon-pause { display: none; } .t2-slider.is-static .t2-slider-toggle .t2-icon-play { display: block; } /* Paused: hidden tab / off-screen (is-paused), keyboard focus, mouse hover. */ .t2-slider.is-paused .t2-slider-dot-fill, .t2-slider:has(:focus-visible) .t2-slider-dot-fill { animation-play-state: paused; } @media (hover: hover) { .t2-slider:hover .t2-slider-dot-fill { animation-play-state: paused; } } /* Stopped for good: the pause button, or a reduced-motion preference. */ .t2-slider.is-static .t2-slider-dot.is-active .t2-slider-dot-fill { animation: none; transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .t2-slider-dot.is-active .t2-slider-dot-fill { animation: none; transform: scaleX(1); } .t2-slide-img { opacity: 1; transform: none; transition: none; } .t2-slider-dot, .t2-slider-arrow { transition: none; } } @media (min-width: 1200px) { .t2-slider-prev { left: 28px; } .t2-slider-next { right: 28px; } } /* The banner always spans the full width; on smaller screens the frame gets a little taller than the banner so the controls sit on the blurred backdrop instead of over the picture. */ @media (max-width: 991.98px) { .t2-slider { --t2-slider-ratio: 3 / 1; } } @media (max-width: 575.98px) { .t2-slider { --t2-slider-ratio: 2.2 / 1; } .t2-slider-bar { bottom: 10px; gap: 8px; padding: 4px 10px; } .t2-slider-count { display: none; } .t2-slider-dot.is-active { width: 34px; } } /* Promo banner */ .t2-promo-banner { background: var(--t2-primary); color: #fff; padding: 20px 0; text-align: center; } .t2-promo-banner strong { color: var(--t2-button); } /* Product grid + card */ .t2-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .t2-product-card { position: relative; background: #fff; border: 1px solid var(--t2-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.3s ease, border-color 0.3s ease; } @media (hover: hover) { .t2-product-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 22px 36px -22px rgba(20, 38, 31, 0.45); } } .t2-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: #E43D3D; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 12px -6px rgba(228, 61, 61, 0.7); } .t2-badge-new { top: 10px; left: auto; right: 10px; background: var(--t2-primary); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5); } .t2-badge-free { top: 40px; background: var(--t2-free-delivery); color: #fff; } .t2-product-card-icons { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; } .t2-product-card:has(.t2-badge-new) .t2-product-card-icons { top: 40px; } .t2-icon-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); color: var(--t2-ink); } .t2-icon-btn:hover { color: var(--t2-primary); } /* Card icons (wishlist / quick view): on hover-capable screens they slide in with the card hover; a wishlisted heart stays visible. Touch screens show them all the time. */ @media (hover: hover) { .t2-product-card-icons .t2-icon-btn { opacity: 0; transform: translateX(10px); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.8, 0.24, 1), color 0.2s ease; } .t2-product-card-icons .t2-icon-btn:nth-child(2) { transition-delay: 0.05s; } .t2-product-card:hover .t2-product-card-icons .t2-icon-btn, .t2-product-card:focus-within .t2-product-card-icons .t2-icon-btn, .t2-product-card-icons .t2-icon-btn.is-active { opacity: 1; transform: none; } } .t2-icon-btn.is-active { color: #E43D3D; } /* A wishlisted heart is filled in and pops when it is added. */ .t2-icon-btn.is-active svg path { fill: currentColor; } .t2-icon-btn.is-pop svg { animation: t2-heart-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .t2-icon-count.is-bump { animation: t2-heart-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes t2-heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .t2-icon-btn.is-pop svg, .t2-icon-count.is-bump { animation: none; } } /* Touch screens (no hover): cards rise into place as they scroll into view (theme2.js adds .t2-reveal-ready, then .is-in per card) and press down while tapped. The photo zooms and the foot gradient fades in, as they do on hover. */ @media (hover: none) { .t2-product-card { transition: opacity 0.5s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .t2-reveal-ready .t2-product-card:not(.is-in) { opacity: 0; transform: translateY(28px) scale(0.97); } .t2-product-card:active { transform: scale(0.975); border-color: transparent; box-shadow: 0 16px 28px -20px rgba(20, 38, 31, 0.55); transition-duration: 0.12s; } .t2-product-card:active .t2-product-img img { transform: scale(1.06); } .t2-product-card:active .t2-product-img::after { opacity: 1; } } @media (hover: none) and (prefers-reduced-motion: reduce) { .t2-product-card:active { transform: none; } } .t2-product-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(160deg, #F6F3EA, #EAE5D6); } .t2-product-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1); } /* Soft dark fade at the foot of the photo, only while the card is hovered. */ .t2-product-img::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(15, 29, 23, 0.3), transparent); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } @media (hover: hover) { .t2-product-card:hover .t2-product-img img { transform: scale(1.07); } .t2-product-card:hover .t2-product-img::after { opacity: 1; } } .t2-product-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; } .t2-product-name { font-size: 13px; font-weight: 500; color: var(--t2-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .t2-product-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2-muted); } .t2-product-rating .t2-stars { color: var(--t2-button); letter-spacing: 1px; } .t2-product-price { display: flex; align-items: baseline; gap: 8px; } .t2-price-old { font-size: 12px; color: var(--t2-muted); text-decoration: line-through; } .t2-price-new { font-size: 16px; font-weight: 700; color: var(--t2-primary); } .t2-product-card form { margin: 0; } .t2-product-actions { display: flex; gap: 6px; padding: 0 14px 14px; } .t2-product-actions form { flex: 1; } .t2-product-actions .t2-btn { width: 100%; padding: 10px 12px; font-size: 13px; border-radius: 10px; gap: 6px; white-space: nowrap; } .t2-product-actions .t2-btn svg { flex: none; } /* Trust badges */ .t2-trust-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; } .t2-trust-item { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; } .t2-trust-item .t2-trust-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--t2-ivory); display: flex; align-items: center; justify-content: center; color: var(--t2-primary); flex-shrink: 0; } .t2-trust-item strong { display: block; font-size: 14px; } .t2-trust-item span { font-size: 12px; color: var(--t2-muted); } /* Testimonials */ .t2-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .t2-testimonial-card { background: #fff; border: 1px solid var(--t2-border); border-radius: 12px; padding: 22px; } .t2-testimonial-card .t2-stars { color: var(--t2-button); margin-bottom: 10px; display: block; } .t2-testimonial-card p { font-size: 14px; color: var(--t2-ink); line-height: 1.6; margin: 0 0 14px; } .t2-testimonial-author { display: flex; align-items: center; gap: 10px; } .t2-testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--t2-ivory); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--t2-primary); font-size: 13px; flex-shrink: 0; } .t2-testimonial-author strong { display: block; font-size: 13px; } .t2-testimonial-author span { font-size: 12px; color: var(--t2-muted); } @media (max-width: 991.98px) { .t2-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t2-testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .t2-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .t2-testimonial-grid { grid-template-columns: 1fr; } .t2-section { padding: 32px 0; } .t2-section-head h2 { font-size: 20px; } } /* ================= Listing pages (category / hot deals / search) ================= */ .t2-breadcrumb { background: #fff; border-bottom: 1px solid var(--t2-border); padding: 14px 0; font-size: 13px; color: var(--t2-muted); } .t2-breadcrumb a { color: var(--t2-primary); } .t2-breadcrumb a:hover { color: var(--t2-button-hover); } .t2-empty-state { text-align: center; padding: 80px 20px; } .t2-empty-state h2 { font-size: 20px; color: var(--t2-secondary); margin-bottom: 20px; } .t2-pagination-wrap { margin-top: 12px; } /* Pager (frontend/theme2/partials/pagination.blade.php) */ .t2-pager { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; } .t2-pager-summary { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t2-muted); font-size: 13px; } .t2-pager-progress { display: block; width: 160px; height: 4px; overflow: hidden; border-radius: 999px; background: #E9E4D6; } .t2-pager-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t2-primary), var(--t2-button)); } .t2-pager-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .t2-pager-link, .t2-pager-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; border: 1.5px solid var(--t2-border); border-radius: 12px; background: #fff; color: var(--t2-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .t2-pager-link { min-width: 42px; padding: 0 8px; } .t2-pager-btn { gap: 6px; padding: 0 16px; } a.t2-pager-link:hover, a.t2-pager-btn:hover { border-color: var(--t2-primary); color: var(--t2-primary); transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(20, 38, 31, 0.5); } a.t2-pager-link:active, a.t2-pager-btn:active { transform: scale(0.96); } .t2-pager-link:focus-visible, .t2-pager-btn:focus-visible { outline: 3px solid var(--t2-ink); outline-offset: 2px; } .t2-pager-link.is-current { border-color: transparent; background: var(--t2-primary); color: #fff; box-shadow: 0 10px 20px -10px var(--t2-primary); cursor: default; } .t2-pager-btn.is-disabled { opacity: 0.45; cursor: not-allowed; } .t2-pager-gap { padding: 0 2px; color: var(--t2-muted); letter-spacing: 2px; } .t2-pager-status { display: none; min-width: 64px; text-align: center; color: var(--t2-ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Phones: Previous, "3 / 31", Next — the two buttons share the row. */ @media (max-width: 575.98px) { .t2-pager { gap: 14px; margin-top: 28px; } .t2-pager-list { flex-wrap: nowrap; width: 100%; gap: 10px; } .t2-pager-list > li:first-child, .t2-pager-list > li:last-child { flex: 1; } .t2-pager-list > li:first-child .t2-pager-btn, .t2-pager-list > li:last-child .t2-pager-btn { width: 100%; height: 46px; } .t2-pager-num, .t2-pager-gap { display: none; } .t2-pager-status { display: block; } } @media (prefers-reduced-motion: reduce) { .t2-pager-link, .t2-pager-btn { transition: none; } a.t2-pager-link:hover, a.t2-pager-btn:hover { transform: none; } } /* ================= Checkout page ================= */ .t2-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: start; } .t2-checkout-panel { background: #fff; border: 1px solid var(--t2-border); border-radius: 12px; padding: 24px; } .t2-oit-table { font-size: 13px; } /* Delivery options: radio cards. The real covers the card (so the whole card is the click target and it stays keyboard-focusable); the card next to it draws the state. */ .t2-ship { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } .t2-ship legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; } /* Side by side on one line; a third method or a very narrow screen wraps. */ .t2-ship-options { display: flex; flex-wrap: wrap; gap: 10px; } .t2-ship-option { position: relative; display: block; flex: 1 1 110px; min-width: 0; cursor: pointer; } .t2-ship-option input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .t2-ship-card { display: flex; align-items: center; gap: 10px; height: 100%; padding: 14px; border: 1.5px solid var(--t2-border); border-radius: 12px; background: #fff; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .t2-ship-option:hover .t2-ship-card { border-color: var(--t2-primary); } .t2-ship-radio { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #C9C4B6; border-radius: 50%; transition: border-color 0.2s ease, background 0.2s ease; } .t2-ship-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .t2-ship-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .t2-ship-title { font-size: 14px; font-weight: 600; } .t2-ship-price { font-size: 13px; font-weight: 700; color: var(--t2-primary); white-space: nowrap; } .t2-ship-option input:checked + .t2-ship-card { border-color: var(--t2-primary); background: #EEF6F2; background: color-mix(in srgb, var(--t2-primary) 7%, #fff); box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.16); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t2-primary) 18%, transparent); } .t2-ship-option input:checked + .t2-ship-card .t2-ship-radio { border-color: var(--t2-primary); background: var(--t2-primary); } .t2-ship-option input:checked + .t2-ship-card .t2-ship-radio::after { transform: scale(1); } .t2-ship-option input:focus-visible + .t2-ship-card { outline: 3px solid var(--t2-ink); outline-offset: 2px; } .t2-checkout-cta { width: 100%; margin-top: 4px; padding: 16px 20px; font-size: 16px; border-radius: 10px; } /* Two copies of the button: side-by-side layout uses the one under the form; once the panels stack (same breakpoint as .t2-checkout-layout) it moves into the order card. */ .t2-checkout-cta--summary { display: none; margin-top: 16px; } @media (max-width: 991.98px) { .t2-checkout-cta--form { display: none; } .t2-checkout-cta--summary { display: inline-flex; } } /* Coupon: only the "have a coupon?" link shows until it is clicked. */ .t2-coupon { margin-top: 16px; } .t2-coupon-toggle { padding: 0; border: 0; background: none; color: var(--t2-primary); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; } .t2-coupon-toggle[hidden] { display: none; } .t2-coupon-box, .t2-coupon-applied { display: none; margin-top: 10px; } .t2-coupon-box.is-open { display: flex; gap: 8px; animation: t2-drop-in 0.25s ease; } .t2-coupon-box input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--t2-border); border-radius: 6px; font-size: 13px; text-transform: uppercase; } .t2-coupon-applied.is-open { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: var(--t2-ivory); font-size: 13px; animation: t2-drop-in 0.25s ease; } .t2-coupon-remove { padding: 0; border: 0; background: none; color: #c0392b; font-size: 12px; cursor: pointer; } #t2-coupon-message { margin-top: 6px; font-size: 12px; } @keyframes t2-drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 380px) { .t2-ship-card { gap: 8px; padding: 12px 10px; } } @media (prefers-reduced-motion: reduce) { .t2-coupon-box.is-open, .t2-coupon-applied.is-open { animation: none; } .t2-ship-card, .t2-ship-radio, .t2-ship-radio::after { transition: none; } } @media (max-width: 991.98px) { .t2-checkout-layout { grid-template-columns: 1fr; } .t2-checkout-panel { padding: 18px; } } @media (max-width: 575.98px) { .t2-checkout-panel { padding: 14px; } #t2-order-info-table table { font-size: 12px; } } /* ================= Shop page (sidebar filters) ================= */ .t2-shop-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; } /* Wide screens: a sticky card. It sits below the sticky site header and scrolls inside itself when it is taller than the space left. */ .t2-shop-sidebar { position: sticky; top: 188px; } .t2-shop-panel { display: flex; flex-direction: column; max-height: calc(100vh - 208px); overflow: hidden; background: #fff; border: 1px solid var(--t2-border); border-radius: 18px; box-shadow: 0 16px 34px -24px rgba(20, 38, 31, 0.4); } .t2-shop-sheet-overlay, .t2-shop-panel-close, .t2-shop-panel-foot, .t2-shop-filter-open { display: none; } .t2-shop-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: linear-gradient(180deg, #FBFAF6, #fff); border-bottom: 1px solid var(--t2-border); } .t2-shop-panel-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--t2-secondary); } .t2-shop-panel-title svg { color: var(--t2-primary); } .t2-shop-active-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--t2-button); color: var(--t2-secondary); font-size: 11px; font-weight: 700; line-height: 1; } .t2-shop-clear { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--t2-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .t2-shop-filters { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .t2-shop-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 20px; scrollbar-width: thin; scrollbar-color: #D9D4C5 transparent; } .t2-shop-filter-group { padding: 18px 0; border-bottom: 1px solid var(--t2-border); } .t2-shop-filter-group:last-child { padding-bottom: 0; border-bottom: 0; } .t2-shop-filter-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--t2-ink); } .t2-shop-filter-group h4::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--t2-button); } /* Category tree */ .t2-shop-cat-tree, .t2-shop-cat-children { list-style: none; margin: 0; padding: 0; } .t2-shop-cat-tree { max-height: 300px; margin: 0 -6px; padding: 0 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D9D4C5 transparent; } .t2-shop-cat-children { display: none; margin: 2px 0 6px 17px; padding-left: 10px; border-left: 2px solid #EEEAE0; } .t2-shop-cat-item.is-open > .t2-shop-cat-children { display: block; } .t2-shop-cat-item { margin-bottom: 2px; } .t2-shop-cat-row { display: flex; align-items: center; gap: 6px; } .t2-shop-cat-row .t2-shop-check { flex: 1; } .t2-shop-cat-toggle { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #F1EEE4; color: var(--t2-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .t2-shop-cat-toggle:hover, .t2-shop-cat-item.is-open > .t2-shop-cat-row .t2-shop-cat-toggle { background: var(--t2-primary); color: #fff; } /* Checkboxes (categories) and switches (quick filters) */ .t2-shop-check { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--t2-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .t2-shop-check:hover { background: #F6F3EA; color: var(--t2-ink); } .t2-shop-check span { overflow: hidden; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .t2-shop-check input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid #C9C4B6; border-radius: 5px; background: #fff; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .t2-shop-check input::after { content: ''; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.15s ease; } .t2-shop-check input:checked { border-color: var(--t2-primary); background: var(--t2-primary); } .t2-shop-check input:checked::after { transform: scale(1); } .t2-shop-check input:checked + span { font-weight: 600; color: var(--t2-ink); } .t2-shop-check input:focus-visible { outline: 2px solid var(--t2-ink); outline-offset: 2px; } .t2-shop-check--switch { justify-content: space-between; padding: 10px 2px; } .t2-shop-check--switch:hover { background: transparent; } .t2-shop-check--switch span { flex: 1; order: 1; color: var(--t2-ink); } .t2-shop-check--switch input { position: relative; display: block; order: 2; width: 40px; height: 24px; border: 0; border-radius: 999px; background: #D9D4C5; transition: background 0.2s ease; } .t2-shop-check--switch input::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); clip-path: none; transform: none; transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.24, 1); } .t2-shop-check--switch input:checked { background: var(--t2-primary); } .t2-shop-check--switch input:checked::after { transform: translateX(16px); } /* Price range */ .t2-shop-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .t2-shop-price-inputs i { flex: none; width: 10px; height: 2px; border-radius: 1px; background: #C9C4B6; } .t2-shop-price-field { display: flex; align-items: center; flex: 1; gap: 6px; min-width: 0; padding: 0 12px; border: 1.5px solid var(--t2-border); border-radius: 10px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .t2-shop-price-field:focus-within { border-color: var(--t2-primary); box-shadow: 0 0 0 3px rgba(31, 111, 84, 0.12); } .t2-shop-price-field span { font-weight: 600; color: var(--t2-muted); } .t2-shop-price-field input { width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; font-size: 14px; -moz-appearance: textfield; } .t2-shop-price-field input::-webkit-outer-spin-button, .t2-shop-price-field input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .t2-shop-apply-btn { width: 100%; padding: 10px 14px; border: 1.5px solid var(--t2-primary); border-radius: 10px; background: transparent; color: var(--t2-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .t2-shop-apply-btn:hover { background: var(--t2-primary); color: #fff; } /* Toolbar above the products */ .t2-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .t2-shop-count { color: var(--t2-muted); font-size: 14px; } .t2-shop-sort { -webkit-appearance: none; appearance: none; padding: 9px 38px 9px 14px; border: 1.5px solid var(--t2-border); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B675F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--t2-ink); font-size: 14px; cursor: pointer; } .t2-shop-sort:focus-visible { outline: 2px solid var(--t2-primary); outline-offset: 2px; } @media (max-width: 991.98px) { .t2-shop-sidebar { top: 104px; } .t2-shop-panel { max-height: calc(100vh - 124px); } } /* Phones and small tablets: the sidebar becomes a sheet that slides up from the bottom when the Filters button is tapped. */ @media (max-width: 900px) { .t2-shop-layout { grid-template-columns: 1fr; } html.t2-scroll-lock, html.t2-scroll-lock body { overflow: hidden; } .t2-shop-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .t2-shop-filter-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--t2-primary); border-radius: 10px; background: #fff; color: var(--t2-primary); font-size: 14px; font-weight: 600; cursor: pointer; } .t2-shop-count { grid-column: 1 / -1; order: 3; font-size: 13px; } .t2-shop-sort { width: 100%; } .t2-shop-sidebar { position: fixed; inset: 0; z-index: 10050; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.35s; } .t2-shop-sidebar.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .t2-shop-sheet-overlay { display: block; position: absolute; inset: 0; background: rgba(15, 29, 23, 0.55); opacity: 0; transition: opacity 0.3s ease; } .t2-shop-sidebar.is-open .t2-shop-sheet-overlay { opacity: 1; } .t2-shop-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.45); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1); } .t2-shop-sidebar.is-open .t2-shop-panel { transform: none; } .t2-shop-panel-head { position: relative; padding: 22px 18px 14px; } /* The little grab handle at the top of the sheet. */ .t2-shop-panel-head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #D9D4C5; } .t2-shop-panel-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #F1EEE4; color: var(--t2-ink); font-size: 22px; line-height: 1; cursor: pointer; } .t2-shop-panel-body { padding: 0 18px 12px; } .t2-shop-cat-tree { max-height: none; overflow: visible; } .t2-shop-check { padding: 10px 8px; } /* The footer button applies everything at once. */ .t2-shop-apply-btn { display: none; } .t2-shop-panel-foot { display: block; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--t2-border); background: #fff; } .t2-shop-show-results { width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .t2-shop-sidebar, .t2-shop-sheet-overlay, .t2-shop-panel, .t2-shop-check, .t2-shop-check input, .t2-shop-check input::after { transition: none; } } /* ================= Single product page ================= */ .t2-pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; } .t2-pd-gallery-main { position: relative; border-radius: 12px; overflow: hidden; background: var(--t2-ivory); aspect-ratio: 1 / 1; cursor: zoom-in; } .t2-pd-gallery-main img { width: 100%; height: 100%; object-fit: contain; } .t2-pd-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .t2-pd-gallery-thumbs button { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--t2-border); background: var(--t2-ivory); padding: 0; cursor: pointer; overflow: hidden; } .t2-pd-gallery-thumbs button.is-active { border-color: var(--t2-primary); border-width: 2px; } .t2-pd-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; } .t2-pd-lightbox { display: none; position: fixed; inset: 0; z-index: 980; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 30px; } .t2-pd-lightbox.is-open { display: flex; } .t2-pd-lightbox img { max-width: 100%; max-height: 100%; } .t2-pd-lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255, 255, 255, 0.15); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; } .t2-pd-title { font-size: 24px; margin: 0; } .t2-pd-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2-muted); margin-top: 8px; } .t2-pd-rating .t2-stars { color: var(--t2-button); font-size: 15px; } .t2-pd-price { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .t2-pd-price .t2-price-old { font-size: 15px; } .t2-pd-price .t2-price-new { font-size: 28px; } .t2-pd-save-badge { font-size: 13px; font-weight: 600; color: var(--t2-primary); border: 1px dashed var(--t2-primary); border-radius: 6px; padding: 2px 8px; } .t2-pd-exclusive-badge { font-size: 13px; font-weight: 600; color: #28a745; border: 1px dashed #28a745; border-radius: 6px; padding: 2px 8px; } .t2-pd-exclusive-alert { background: #fff8e6; border: 1px solid #f4d888; color: #7a5c00; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-top: 12px; } .t2-attr-group { margin-top: 20px; } .t2-attr-group label.t2-attr-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; } .t2-attr-options { display: flex; flex-wrap: wrap; gap: 8px; } .t2-attr-options input { display: none; } .t2-attr-options span { display: inline-block; padding: 8px 16px; border: 1px solid var(--t2-border); border-radius: 20px; font-size: 13px; cursor: pointer; } .t2-attr-options input:checked+span { border-color: var(--t2-primary); background: var(--t2-primary); color: #fff; } .t2-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--t2-border); border-radius: 8px; margin-top: 20px; } .t2-qty-stepper button { width: 40px; height: 40px; border: none; background: none; font-size: 16px; cursor: pointer; } .t2-qty-stepper input { width: 44px; text-align: center; border: none; font-size: 14px; } .t2-pd-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .t2-pd-actions .t2-btn { width: 100%; padding: 14px 20px; white-space: nowrap; } .t2-pd-actions .t2-btn-cta { padding: 17px 20px; font-size: 16px; border-radius: 10px; } @media (max-width: 480px) { .t2-pd-actions .t2-btn { font-size: 14px; padding: 13px 16px; white-space: normal; } .t2-pd-actions .t2-btn-cta { font-size: 15px; padding: 16px; } } .t2-pd-contact-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .t2-pd-contact-ctas a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; } .t2-pd-delivery-table { margin-top: 20px; border: 1px solid var(--t2-border); border-radius: 10px; overflow: hidden; } .t2-pd-delivery-table table { width: 100%; border-collapse: collapse; font-size: 13px; } .t2-pd-delivery-table td { padding: 10px 14px; border-bottom: 1px solid var(--t2-border); } .t2-pd-delivery-table tr:last-child td { border-bottom: none; } .t2-pd-features { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .t2-pd-features div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t2-muted); } /* Tabs */ .t2-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--t2-border); margin-top: 48px; } .t2-tabs-nav button { padding: 12px 20px; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--t2-muted); cursor: pointer; border-bottom: 2px solid transparent; } .t2-tabs-nav button.is-active { color: var(--t2-primary); border-color: var(--t2-primary); } .t2-tab-panel { display: none; padding: 24px 0; } .t2-tab-panel.is-active { display: block; } .t2-review-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .t2-review-summary .t2-stars { color: var(--t2-button); font-size: 22px; } .t2-review-form { background: var(--t2-ivory); border-radius: 10px; padding: 20px; margin-bottom: 24px; } .t2-review-form .t2-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .t2-review-form input, .t2-review-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--t2-border); border-radius: 6px; font-size: 13px; font-family: inherit; } .t2-rating-stars { font-size: 20px; color: var(--t2-border); cursor: pointer; } .t2-rating-stars span.is-active { color: var(--t2-button); } .t2-review-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--t2-border); } .t2-review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--t2-ivory); color: var(--t2-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } @media (max-width: 991.98px) { .t2-pd-layout { grid-template-columns: 1fr; } .t2-review-form .t2-form-row { grid-template-columns: 1fr; } } /* ================= SPA navigation progress bar ================= */ #t2-progress-bar { position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: linear-gradient(90deg, var(--t2-primary), var(--t2-button)); box-shadow: 0 0 6px var(--t2-button), 0 0 16px var(--t2-button), 0 1px 3px rgba(0, 0, 0, 0.25); z-index: 9999; opacity: 0; pointer-events: none; overflow: hidden; } #t2-progress-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%); animation: t2-progress-shimmer 1.1s ease-in-out infinite; } @keyframes t2-progress-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } #t2-app-content.t2-nav-loading { opacity: 0.45; filter: saturate(0.85); pointer-events: none; cursor: progress; transition: opacity .2s ease; }