:root{ --ink:#12181B; --ink-soft:#556065; --paper:#F7FAFB; --line:rgba(18,24,27,0.08); }
html{ background:var(--paper); }
body{ font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); overflow-x:hidden; }
h1,h2,h3,.font-display{ font-family:'Sora',sans-serif; }
h1,h2{ text-wrap:balance; }
::selection{ background:#2856F2; color:#fff; }
#smooth-wrapper{ overflow:hidden; }
#smooth-content{ overflow:visible; }
.word{ display:inline-block; will-change:transform; }
.clip-reveal{ clip-path: inset(0 0 100% 0); }
.star{ color:#F5A524; letter-spacing:1px; }
.tabular{ font-variant-numeric: tabular-nums; }
#site-nav{ transition: background-color .4s ease, box-shadow .4s ease; }
#site-nav.scrolled{ background:rgba(247,250,251,0.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.magnetic{ display:inline-flex; will-change:transform; }

.marquee-track{ display:flex; width:max-content; animation: marquee 26s linear infinite; }
.marquee-track:hover{ animation-play-state: paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.bento{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; }
  .bento .t-feature{ grid-column:span 2; grid-row:span 2; }
}
.tile{ position:relative; overflow:hidden; border-radius:1.1rem; }
.tile-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.tile:hover .tile-img{ transform:scale(1.06); }
.tile-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,24,27,0) 30%, rgba(18,24,27,0.82) 100%); }

.product-card{ background:#fff; border:1px solid var(--line); border-radius:1.1rem; overflow:hidden; display:flex; flex-direction:column; }
.product-img-wrap{ aspect-ratio:1/1; overflow:hidden; background:#EEF3F4; }
.product-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-img-wrap img{ transform:scale(1.08); }

.qty-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9999px; }

#cart-drawer{ transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.9,.2,1); }
#cart-drawer.open{ transform:translateX(0); }
#cart-overlay{ opacity:0; pointer-events:none; transition:opacity .35s ease; }
#cart-overlay.open{ opacity:1; pointer-events:auto; }

#checkout-section{ display:none; }
#checkout-section.active{ display:block; }

#quickview-overlay.open-qv, #quickview-modal.open-qv{ opacity:1; pointer-events:auto; }
.spec-row{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line); }
.spec-row span:first-child{ color:var(--ink-soft); }
.badge-pill{ background:var(--paper); border:1px solid var(--line); border-radius:9999px; padding:.3rem .7rem; }
.compat-pill{ background:#EEF2FF; color:var(--ink); border-radius:9999px; padding:.3rem .7rem; }
.stock-badge{ position:absolute; top:.6rem; left:.6rem; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.2rem .55rem; border-radius:9999px; background:#F97316; color:#fff; }
.rating-badge{ position:absolute; top:.6rem; right:.6rem; background:rgba(255,255,255,0.92); border-radius:9999px; padding:.2rem .55rem; font-size:11px; font-weight:700; display:flex; align-items:center; gap:.2rem; }
.quick-add-btn{ position:absolute; bottom:.6rem; right:.6rem; width:34px; height:34px; border-radius:9999px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease; }
.quick-add-btn:hover{ background:#2856F2; }
.category-pill{ border:1px solid var(--line); border-radius:9999px; padding:.5rem 1.1rem; font-size:.875rem; font-weight:600; background:#fff; transition:background-color .2s ease, color .2s ease; }
.category-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.category-cell{ padding:1.75rem; }
.category-icon{ width:44px; height:44px; border-radius:.9rem; background:#EEF2FF; color:#2856F2; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }

.pay-option{ border:1px solid var(--line); border-radius:.9rem; padding:.9rem 1rem; cursor:pointer; }
.pay-option.selected{ border-color:#2856F2; box-shadow:0 0 0 3px #2856F21a; }

/* WhatsApp sticky button */
.wa-sticky{ position:fixed; right:1.35rem; bottom:1.35rem; z-index:65; width:58px; height:58px; border-radius:9999px; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.65); }
.wa-sticky-ring{ position:absolute; inset:0; border-radius:9999px; background:#25D366; opacity:.55; animation:wa-pulse 2.4s ease-out infinite; z-index:-1; }
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.8); opacity:0; } }

/* Currency selector */
.currency-select{ appearance:none; -webkit-appearance:none; background:#fff; border:1px solid var(--line); border-radius:9999px; padding:.55rem 1.9rem .55rem 1rem; font-size:.78rem; font-weight:700; letter-spacing:.02em; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23556065' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right .8rem center; }
.currency-select:focus{ outline:none; border-color:#2856F2; }

/* Account dropdown */
.account-dropdown{ position:absolute; top:calc(100% + 12px); right:0; width:240px; background:#fff; border:1px solid var(--line); border-radius:1.1rem; box-shadow:0 24px 48px -14px rgba(18,24,27,.22); padding:1.25rem; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease; z-index:80; }
.account-dropdown.open{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Toast */
#toast{ position:fixed; left:50%; bottom:2rem; transform:translate(-50%,16px); background:var(--ink); color:#fff; font-size:.85rem; font-weight:600; padding:.85rem 1.5rem; border-radius:9999px; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:100; box-shadow:0 14px 34px -10px rgba(0,0,0,.4); max-width:88vw; text-align:center; }
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* Footer (dark, Base44-style) */
.site-footer{ background:#0B0F12; color:#9AA6AB; }
.site-footer a{ color:#9AA6AB; transition:color .2s ease; }
.site-footer a:hover{ color:#fff; }
.footer-heading{ color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:1.15rem; }

/* Shop filter sidebar */
.filter-group{ border-bottom:1px solid var(--line); padding:1.5rem 0; }
.filter-group:first-child{ padding-top:0; }
.filter-check{ display:flex; align-items:center; gap:.6rem; font-size:.875rem; padding:.4rem 0; cursor:pointer; }
.filter-check input{ accent-color:#2856F2; }
#filters-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90; opacity:0; pointer-events:none; transition:opacity .3s ease; }
#filters-overlay.open{ opacity:1; pointer-events:auto; }
@media (max-width:1023px){
  #filters-sidebar{ position:fixed; top:0; left:0; height:100%; width:85%; max-width:340px; background:#fff; z-index:95; padding:2rem 1.5rem; overflow-y:auto; transform:translateX(-100%); transition:transform .35s cubic-bezier(.2,.9,.2,1); display:block !important; }
  #filters-sidebar.mobile-open{ transform:translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .marquee-track{ animation:none !important; }
}