/* ============================================================
   Method & Log · Zane Foliofield — shared stylesheet
   Design system: Academic Precision (warm paper / slate navy ink)
   Loaded by every page. Page-specific markup lives in each HTML.
   ============================================================ */

:root { --paper:#FDFCF8; --ink:#1B263B; --line:#E0E0E0; }
html { scroll-behavior:smooth; }
body { background-color:var(--paper); color:var(--ink); }
html.dark body { background-color:#0d121c; color:#e2e8f0; }

header, footer, section, div, button, a, input, select, textarea {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; user-select:none; }
.container-custom { max-width:1280px; margin:0 auto; padding:0 24px; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- Dark-mode fix for native <select> (Collection page) ---------- */
select { color-scheme: light; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; background-image:none !important; }
select option { background-color:#ffffff; color:#1B263B; }
html.dark select { color-scheme: dark; background-color:#16202f; color:#e2e8f0; border-color:#2a3441; }
html.dark select option { background-color:#16202f; color:#e2e8f0; }
html.dark select:focus { border-color:#94a3b8; }

/* ---------- Scroll reveals ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0ms); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* ---------- Page entrance ---------- */
@keyframes pageEnter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.page-enter { animation:pageEnter .55s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- Header elevation ---------- */
#site-header.elevated, .mobile-topbar.elevated { box-shadow:0 10px 30px rgba(27,38,59,.08); }

/* ---------- Hero carousel (Home) ---------- */
.hero-track { position:absolute; inset:0; display:flex; transform:translateX(0); transition:transform .95s cubic-bezier(.22,.61,.21,1); will-change:transform; }
.hero-slide { position:relative; flex:0 0 100%; height:100%; }
.hero-slide img { width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: reduce) { .hero-track { transition:none; } }
.hero-dot { position:relative; width:9px; height:9px; border-radius:9999px; overflow:hidden; background:currentColor; opacity:.25; cursor:pointer; transition:opacity .3s ease, transform .3s ease; }
.hero-dot.is-active { opacity:1; transform:scale(1.2); }
.hero-dot .hero-progress { position:absolute; inset:0; width:0%; background:currentColor; border-radius:inherit; }
@keyframes heroProgress { from { width:0%; } to { width:100%; } }

/* ---------- Nav underline ---------- */
.nav-link-hover { position:relative; padding-bottom:4px; }
.nav-link-hover::after { content:''; position:absolute; width:0; height:2px; bottom:0; left:50%; transform:translateX(-50%); background-color:#1b263b; transition:width .3s cubic-bezier(.2,.8,.2,1); }
html.dark .nav-link-hover::after { background-color:#f8fafc; }
.nav-link-hover:hover::after, .nav-link-hover.active::after { width:100%; }

/* ---------- Product cards ---------- */
.product-card-hover:hover { transform:translateY(-4px); }
.product-card-hover:hover .card-media { box-shadow:0 14px 30px rgba(27,38,59,.10); }
html.dark .product-card-hover:hover .card-media { box-shadow:0 14px 30px rgba(0,0,0,.45); }
.card-media { transition:box-shadow .4s cubic-bezier(.2,.8,.2,1); }

/* ---------- Tactile press ---------- */
.pressable:active { transform:scale(.97); }

/* ---------- Accordion ---------- */
.accordion-content-wrapper { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.accordion-content-wrapper.is-open { grid-template-rows:1fr; }
.accordion-inner { overflow:hidden; }
.accordion-icon { transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.accordion-icon.is-open { transform:rotate(180deg); }

/* ---------- Favorites ---------- */
.fav-btn.fav-on { background:#fdf1f1; border-color:#f2cdcd; }
html.dark .fav-btn.fav-on { background:rgba(127,29,29,.25); border-color:#7f1d1d; }
@keyframes heartPop { 0% { transform:scale(.6); } 55% { transform:scale(1.25); } 100% { transform:scale(1); } }
.fav-btn.fav-on .material-symbols-outlined { animation:heartPop .4s cubic-bezier(.2,.8,.2,1); }

/* ---------- Shimmer (Subscribe) ---------- */
@keyframes shimmer { 0% { transform:translateX(-150%); } 100% { transform:translateX(150%); } }
.shimmer-effect { position:relative; overflow:hidden; }
.shimmer-effect::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform:translateX(-150%); animation:shimmer 3.2s infinite; }

/* ---------- Typewriter cursor ---------- */
.typewriter-cursor { display:inline-block; width:2px; height:1.1em; background-color:currentColor; vertical-align:middle; animation:blink 1s step-end infinite; margin-left:2px; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ---------- Digital / fallback cover ---------- */
.digital-cover { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:18px; color:#1B263B;
  background:linear-gradient(rgba(27,38,59,.05) 1px, transparent 1px) 0 0/100% 26px, #FBF9F1; }
html.dark .digital-cover { color:#dbe3ee; background:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 26px, #151c2a; }
.dc-edition { font-family:Inter,sans-serif; font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#75777d; }
.dc-title { font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(15px,1.5vw,20px); line-height:1.3; }
.digital-cover-lg .dc-title { font-size:clamp(24px,3vw,36px); }
.dc-rule { width:30px; height:2px; background:currentColor; opacity:.75; }
.dc-sub { font-family:Inter,sans-serif; font-size:11px; font-weight:500; color:#75777d; }

/* ---------- Breadcrumbs (Product page) ---------- */
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-family:Inter,sans-serif; font-size:13px; letter-spacing:.02em; }
.breadcrumb a { color:#45474d; text-decoration:none; }
.breadcrumb a:hover { color:#1B263B; text-decoration:underline; text-underline-offset:4px; }
html.dark .breadcrumb a { color:#94a3b8; }
html.dark .breadcrumb a:hover { color:#f8fafc; }
.breadcrumb .bc-sep { color:#c5c6cd; }
.breadcrumb .bc-current { color:#1B263B; font-weight:600; }
html.dark .breadcrumb .bc-current { color:#f8fafc; }

/* ---------- Product detail: gallery previews ---------- */
.page-preview { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); color:#1B263B;
  background:linear-gradient(rgba(27,38,59,.045) 1px, transparent 1px) 0 0/100% 22px, #FBF9F1; }
html.dark .page-preview { color:#dbe3ee; background:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/100% 22px, #151c2a; }
.pp-book { display:grid; grid-template-columns:1fr 1fr; width:min(420px,100%); border:1px solid rgba(27,38,59,.25); box-shadow:0 18px 40px rgba(27,38,59,.12); background:#FFFDF6; }
html.dark .pp-book { background:#1a2333; border-color:rgba(255,255,255,.18); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.pp-page { padding:22px 18px; min-height:250px; display:flex; flex-direction:column; gap:8px; }
.pp-page + .pp-page { border-left:1px solid rgba(27,38,59,.18); }
html.dark .pp-page + .pp-page { border-left-color:rgba(255,255,255,.12); }
.pp-kicker { font-family:Inter,sans-serif; font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#75777d; }
.pp-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:600; color:#1B263B; }
html.dark .pp-title { color:#f1f5f9; }
.pp-lines { display:flex; flex-direction:column; gap:11px; margin-top:6px; }
.pp-lines i { display:block; height:1px; background:rgba(27,38,59,.28); }
html.dark .pp-lines i { background:rgba(255,255,255,.2); }
.pp-cells { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.pp-cells i { display:block; height:26px; border:1px solid rgba(27,38,59,.25); }
html.dark .pp-cells i { border-color:rgba(255,255,255,.18); }
.pp-cells i.done { background:#c8f17a55; border-color:#364e0066; }
.pp-tracker { width:min(380px,100%); background:#FFFDF6; border:1px solid rgba(27,38,59,.25); box-shadow:0 18px 40px rgba(27,38,59,.12); padding:22px 18px; }
html.dark .pp-tracker { background:#1a2333; border-color:rgba(255,255,255,.18); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.pp-rows { display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.pp-rows i { display:grid; grid-template-columns:14px 1fr 40px; gap:8px; align-items:center; }
.pp-rows i::before { content:''; width:12px; height:12px; border:1px solid rgba(27,38,59,.4); }
.pp-rows i:nth-child(3n)::before { background:#c8f17a66; border-color:#364e0066; }
.pp-rows i::after { content:''; height:1px; background:rgba(27,38,59,.22); }
html.dark .pp-rows i::after { background:rgba(255,255,255,.18); }
html.dark .pp-rows i::before { border-color:rgba(255,255,255,.3); }
.pp-caption { margin-top:14px; font-family:Inter,sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#75777d; text-align:center; }

/* Gallery main viewer */
.gv-slide { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.gv-slide.is-active { opacity:1; }
.gv-slide video, .gv-slide iframe { width:100%; height:100%; object-fit:cover; border:0; background:#000; }
.gallery-thumb { position:relative; flex-shrink:0; width:72px; aspect-ratio:3/4; overflow:hidden; border:1px solid #c5c6cd; background:#eeeeee; cursor:pointer; transition:border-color .2s ease, transform .2s ease; }
html.dark .gallery-thumb { border-color:#2a3441; background:#151c2a; }
.gallery-thumb:hover { transform:translateY(-2px); }
.gallery-thumb.is-active { border-color:#1B263B; box-shadow:0 0 0 1px #1B263B; }
html.dark .gallery-thumb.is-active { border-color:#94a3b8; box-shadow:0 0 0 1px #94a3b8; }
.gallery-thumb .material-symbols-outlined { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:#45474d; background:rgba(253,252,248,.75); }
html.dark .gallery-thumb .material-symbols-outlined { color:#94a3b8; background:rgba(13,18,28,.6); }

/* ---------- Format switcher (Product page) ---------- */
.fmt-switch { display:grid; grid-template-columns:1fr 1fr; border:1px solid #c5c6cd; border-radius:2px; overflow:hidden; }
html.dark .fmt-switch { border-color:#2a3441; }
.fmt-tab { padding:12px 10px; text-align:center; font-family:Inter,sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; color:#45474d; background:transparent; border:0; cursor:pointer; }
html.dark .fmt-tab { color:#94a3b8; }
.fmt-tab + .fmt-tab { border-left:1px solid #c5c6cd; }
html.dark .fmt-tab + .fmt-tab { border-left-color:#2a3441; }
.fmt-tab.is-active { background:#1B263B; color:#ffffff; }
html.dark .fmt-tab.is-active { background:#f8fafc; color:#0f172a; }
.fmt-tab small { display:block; font-size:11px; font-weight:500; opacity:.75; margin-top:2px; }

/* Spec definition rows */
.spec-row { display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid #E0E0E0; font-size:14px; }
.spec-row:last-child { border-bottom:0; }
.spec-row dt { color:#75777d; font-family:Inter,sans-serif; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding-top:2px; }
.spec-row dd { color:#1B263B; }
html.dark .spec-row { border-bottom-color:#2a3441; }
html.dark .spec-row dd { color:#e2e8f0; }

/* ---------- Drawers ---------- */
.drawer { position:fixed; top:0; right:0; height:100dvh; width:min(420px,100%); transform:translateX(102%); transition:transform .5s cubic-bezier(.2,.8,.2,1); z-index:1200; display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
#drawer-backdrop { position:fixed; inset:0; background:rgba(13,18,28,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s ease, visibility .35s; z-index:1100; }
#drawer-backdrop.open { opacity:1; pointer-events:auto; visibility:visible; }

/* ---------- Modal ---------- */
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; z-index:1300; opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.modal.open { opacity:1; pointer-events:auto; visibility:visible; }
.modal .modal-backdrop { position:absolute; inset:0; background:rgba(13,18,28,.5); backdrop-filter:blur(3px); }
.modal-panel { position:relative; transform:translateY(18px) scale(.985); transition:transform .4s cubic-bezier(.2,.8,.2,1); max-height:calc(100dvh - 40px); overflow:auto; }
.modal.open .modal-panel { transform:translateY(0) scale(1); }

/* ---------- Search overlay ---------- */
#search-overlay { position:fixed; inset:0; z-index:1250; pointer-events:none; visibility:hidden; transition:visibility .3s; }
#search-overlay .search-backdrop { position:absolute; inset:0; background:rgba(13,18,28,.45); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease; }
#search-overlay .search-panel { position:relative; transform:translateY(-14px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
#search-overlay.open { pointer-events:auto; visibility:visible; }
#search-overlay.open .search-backdrop { opacity:1; }
#search-overlay.open .search-panel { transform:translateY(0); opacity:1; }

/* ---------- Navbar dropdown (Products) ---------- */
.nav-dropdown-wrap { position:relative; }
.nav-dropdown { position:absolute; top:100%; left:-14px; min-width:215px; background:#FDFCF8; border:1px solid #E0E0E0; border-radius:4px; box-shadow:0 16px 36px rgba(27,38,59,.14); padding:6px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:950; }
html.dark .nav-dropdown { background:#151c2a; border-color:#2a3441; box-shadow:0 16px 36px rgba(0,0,0,.5); }
.nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 18px; font-family:Inter,sans-serif; font-size:14px; color:#45474d; text-decoration:none; border-bottom:1px solid rgba(27,38,59,.07); }
.nav-dropdown-item:last-child { border-bottom:0; }
.nav-dropdown-item:hover { background:#f4f3f3; color:#1B263B; }
html.dark .nav-dropdown-item { color:#94a3b8; border-bottom-color:rgba(255,255,255,.07); }
html.dark .nav-dropdown-item:hover { background:#1e293b; color:#f8fafc; }
.nav-dropdown-item .dd-count { font-size:12px; font-weight:500; color:#75777d; }
html.dark .nav-dropdown-item .dd-count { color:#64748b; }
.nav-dropdown-wrap:hover > a, .nav-dropdown-wrap:focus-within > a { font-weight:700; }
/* ---------- Mobile top navbar & menu ---------- */
.mobile-menu { position:absolute; top:100%; left:0; right:0; display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1), visibility .4s; background:#FDFCF8; border-bottom:1px solid #E0E0E0; box-shadow:0 18px 30px rgba(27,38,59,.10); visibility:hidden; }
html.dark .mobile-menu { background:#0d121c; border-bottom-color:#2a3441; box-shadow:0 18px 30px rgba(0,0,0,.5); }
.mobile-menu.open { grid-template-rows:1fr; visibility:visible; }
.mobile-menu > div { overflow:hidden; }
.menu-link { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 0; border:0; background:transparent; cursor:pointer; text-align:left; border-bottom:1px solid #E0E0E0; font-family:Inter,sans-serif; font-size:14px; font-weight:600; letter-spacing:.05em; color:#45474d; text-decoration:none; }
.menu-link:last-of-type { border-bottom:0; }
html.dark .menu-link { border-bottom-color:#2a3441; color:#94a3b8; }
.menu-link.active { color:#1B263B; }
html.dark .menu-link.active { color:#f8fafc; }
.menu-sub { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.menu-sub.open { grid-template-rows:1fr; }
.menu-sub > div { overflow:hidden; display:flex; flex-direction:column; padding-bottom:4px; }
.menu-sublink { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-left:14px; padding:11px 12px; border-left:2px solid #E0E0E0; font-family:Inter,sans-serif; font-size:13px; font-weight:500; letter-spacing:.04em; color:#75777d; text-decoration:none; }
.menu-sublink:hover { color:#1B263B; border-left-color:#1B263B; }
html.dark .menu-sublink { border-left-color:#2a3441; color:#94a3b8; }
html.dark .menu-sublink:hover { color:#f8fafc; border-left-color:#94a3b8; }
.menu-sub-count { font-family:Inter,sans-serif; font-size:11px; color:#a5a7ad; }
html.dark .menu-sub-count { color:#64748b; }
.menu-toggle-rot { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
[data-menu-sub][aria-expanded="true"] [data-menu-sub-icon] { transform:rotate(180deg); }

/* ---------- Search panel ---------- */
.drawer-wide { width:min(640px,100%); }
.search-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:9999px; background:#eeeeee; color:#45474d; font-family:Inter,sans-serif; font-size:13px; font-weight:500; border:1px solid transparent; }
.search-chip:hover { border-color:#1B263B; color:#1B263B; }
html.dark .search-chip { background:#1e293b; color:#94a3b8; }
html.dark .search-chip:hover { border-color:#94a3b8; color:#f8fafc; }

/* ---------- Social brand icons ---------- */
.social-svg { width:20px; height:20px; display:block; }

/* ---------- Cover style swatches ---------- */
.swatch-dot { width:22px; height:30px; border-radius:4px; overflow:hidden; border:1px solid rgba(27,38,59,.25); cursor:pointer; padding:0; transition:transform .2s ease, box-shadow .2s ease; }
.swatch-dot img, .style-chip img { display:block; width:100%; height:100%; object-fit:cover; }
.swatch-dot:hover { transform:scale(1.18); }
.swatch-dot.active { box-shadow:0 0 0 2px #FDFCF8, 0 0 0 3.5px #1B263B; }
html.dark .swatch-dot.active { box-shadow:0 0 0 2px #0d121c, 0 0 0 3.5px #94a3b8; }
.style-chip { width:34px; height:46px; border-radius:6px; overflow:hidden; border:2px solid #FDFCF8; box-shadow:0 0 0 1px #c5c6cd; cursor:pointer; padding:0; transition:transform .2s ease, box-shadow .2s ease; }
.style-chip:hover { transform:scale(1.08); }
.style-chip.active { box-shadow:0 0 0 2px #FDFCF8, 0 0 0 4px #1B263B; }
html.dark .style-chip { border-color:#0d121c; box-shadow:0 0 0 1px #475569; }
html.dark .style-chip.active { box-shadow:0 0 0 2px #0d121c, 0 0 0 4px #94a3b8; }
.filter-sub { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.filter-sub.open { grid-template-rows:1fr; }
.filter-sub > div { overflow:hidden; }
.pp-index-rows { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pp-index-rows > div { display:flex; align-items:baseline; gap:6px; font-family:Inter,sans-serif; font-size:11px; color:#45474d; }
html.dark .pp-index-rows > div { color:#94a3b8; }
.pp-index-rows i { flex:1; border-bottom:1px dotted rgba(27,38,59,.4); }
html.dark .pp-index-rows i { border-bottom-color:rgba(255,255,255,.25); }
.pp-index-rows span:last-child { font-weight:600; }

/* ---------- Collection: accordion filter panel ---------- */
.filter-group-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.filter-group-panel.open { grid-template-rows:1fr; }
.filter-group-panel > div { overflow:hidden; }
.filter-check { width:16px; height:16px; accent-color:#1B263B; cursor:pointer; flex-shrink:0; }
html.dark .filter-check { accent-color:#c8f17a; }
#filter-panel { display:none; }
.filters-open #filter-panel { display:block; animation:pageEnter .35s ease both; }
@media (min-width:1024px) {
  .filters-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:48px; align-items:start; }
  #filter-panel { display:block !important; position:sticky; top:104px; max-height:calc(100dvh - 128px); overflow-y:auto; padding-right:6px; }
}
/* Dual price range */
.price-range { -webkit-appearance:none; appearance:none; position:absolute; top:50%; transform:translateY(-50%); width:100%; height:24px; margin:0; background:transparent; pointer-events:none; outline:none; }
.price-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; width:17px; height:17px; border-radius:9999px; background:#1B263B; border:2px solid #FDFCF8; box-shadow:0 0 0 1px #1B263B; cursor:pointer; }
.price-range::-moz-range-thumb { pointer-events:auto; width:13px; height:13px; border-radius:9999px; background:#1B263B; border:2px solid #FDFCF8; box-shadow:0 0 0 1px #1B263B; cursor:pointer; }
.price-range::-moz-range-track { background:transparent; border:none; }
html.dark .price-range::-webkit-slider-thumb { background:#c8f17a; border-color:#0d121c; box-shadow:0 0 0 1px #c8f17a; }
html.dark .price-range::-moz-range-thumb { background:#c8f17a; border-color:#0d121c; box-shadow:0 0 0 1px #c8f17a; }
/* Applied filter chips */
.applied-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9999px; border:1px solid #c5c6cd; background:#ffffff; font-family:Inter,sans-serif; font-size:13px; font-weight:500; color:#1B263B; cursor:pointer; }
.applied-chip:hover { border-color:#1B263B; }
html.dark .applied-chip { border-color:#2a3441; background:#151c2a; color:#e2e8f0; }
html.dark .applied-chip:hover { border-color:#94a3b8; }
.applied-dot { width:12px; height:12px; border-radius:9999px; border:1px solid rgba(0,0,0,.18); display:inline-block; }
html.dark .applied-dot { border-color:rgba(255,255,255,.25); }

/* ---------- Toast ---------- */
#toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,16px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease; z-index:1400; pointer-events:none; }
#toast.toast-show { transform:translate(-50%,0); opacity:1; }
@media (min-width:768px){ #toast { bottom:32px; } }

/* ---------- Badges ---------- */
.count-badge { position:absolute; top:-5px; right:-7px; min-width:16px; height:16px; padding:0 4px; border-radius:9999px; background:#051125; color:#fff; font:600 10px/16px Inter,sans-serif; text-align:center; }
html.dark .count-badge { background:#c8f17a; color:#131f00; }
@keyframes badgePop { 0% { transform:scale(.5); } 60% { transform:scale(1.2); } 100% { transform:scale(1); } }
.badge-pop { animation:badgePop .35s cubic-bezier(.2,.8,.2,1); }

/* ---------- Focus ---------- */
:focus-visible { outline:2px solid #1B263B; outline-offset:2px; border-radius:2px; }
html.dark :focus-visible { outline-color:#94a3b8; }

/* ---------- Qty stepper ---------- */
.qty-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #c5c6cd; }
.qty-btn:hover { border-color:#1B263B; }
html.dark .qty-btn { border-color:#2a3441; }
html.dark .qty-btn:hover { border-color:#94a3b8; }

.pb-safe { padding-bottom:env(safe-area-inset-bottom); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* Disabled (not-yet-available) controls */
.fmt-tab:disabled, .fmt-tab.fmt-disabled { color:#75777d; opacity:.7; cursor:not-allowed; }
html.dark .fmt-tab:disabled, html.dark .fmt-tab.fmt-disabled { color:#64748b; }
.spec-disabled .accordion-btn { cursor:not-allowed; }
.gallery-thumb img { display:block; width:100%; height:100%; object-fit:cover; }

/* Social icons: muted at rest, brand color on hover */
.social-link { transition:color .2s ease; }
.social-link:hover { color:var(--brand, #1B263B); }
html.dark .social-link:hover { color:var(--brand, #f8fafc); }