/* =========================================================================
   Rapid Axe Workshop — Storefront stylesheet
   Niche: tool storage / workshop gear  ·  Industrial, rugged, professional
   Palette: charcoal + safety orange + steel gray
   Mobile-first. Breakpoints: 640 / 768 / 1024 / 1280
   ========================================================================= */

:root {
  --color-bg: #f7f6f3; --color-surface: #ffffff; --color-surface-alt: #f0ede8;
  --color-ink: #1a1815; --color-border: #ccc7be;
  --color-text-primary: #1a1815; --color-text-secondary: #4a453d; --color-text-muted: #6b655c;
  --color-accent: #5b7553; --color-accent-hover: #4a6144; --color-accent-fg: #0a0a0a;
  --color-deep: #2d2a26; --color-success: #16a34a; --color-warning: #ca8a04; --color-error: #dc2626;
  --color-star: #f59e0b;
  --font-heading: "Archivo", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,.08); --shadow-md: 0 4px 12px rgba(28,25,23,.12); --shadow-lg: 0 16px 40px rgba(28,25,23,.18);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; } * { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; padding: 0; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; color: var(--color-ink); letter-spacing: .02em; text-transform: uppercase; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md); }
@media (min-width: 768px){ .container { padding-inline: var(--space-lg); } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 13px 28px; border-radius: var(--radius-sm); transition: all var(--transition-fast); border: 1.5px solid transparent; text-align: center; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-fg); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--color-ink); color: #fff; } .btn-secondary:hover { background: #292524; }
.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-ink); } .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.7); color:#fff; } .btn-outline:hover { background: #fff; color: var(--color-ink); }
.btn-sm { padding: 8px 18px; font-size: .82rem; } .btn-lg { padding: 16px 36px; font-size: 1.02rem; } .btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.badge { display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius: var(--radius-sm); }
.badge-sale { background: var(--color-error); color:#fff; } .badge-new { background: var(--color-success); color:#fff; }
.badge-out { background: var(--color-text-muted); color:#fff; }
.badge-count { background: var(--color-accent); color:#fff; min-width:20px; height:20px; padding:0 6px; font-size:.72rem; border-radius: var(--radius-full); }

.announcement-bar { background: var(--color-deep); color: #f5f3f0; text-align:center; font-size: .8rem; letter-spacing:.08em; padding: 9px 16px; font-weight:500; }
.announcement-bar strong { color: var(--color-accent); }

.site-header { position: sticky; top:0; z-index: 60; background: rgba(245,245,244,.95); backdrop-filter: blur(10px); border-bottom:1px solid var(--color-border); }
.nav-inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: var(--space-md); height: 72px; }
.nav-logo { display:flex; flex-direction:column; line-height:1; justify-self:start; }
.nav-logo .logo-mark { font-family: var(--font-heading); font-size: 1.35rem; font-weight:700; color: var(--color-ink); letter-spacing:.02em; text-transform: uppercase; }
.nav-logo .logo-sub { font-size:.58rem; letter-spacing:.2em; color: var(--color-accent); margin-top:3px; font-weight:600; }
.nav-links { display:none; gap: var(--space-lg); align-items:center; justify-self:center; justify-content:center; }
.nav-links a { font-size:.88rem; font-weight:600; color: var(--color-text-primary); position:relative; padding: 6px 0; transition: color var(--transition-fast);  }
.nav-links a:hover, .nav-links a.active { color: var(--color-ink); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--color-accent); transition: width var(--transition-base); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap: 6px; justify-self:end; }
.icon-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); color: var(--color-ink); position:relative; transition: background var(--transition-fast); }
.icon-btn:hover { background: var(--color-surface-alt); } .icon-btn svg { width:22px; height:22px; }
.cart-btn .badge-count { position:absolute; top:4px; right:2px; } .hamburger { display:flex; }
@media (min-width: 1024px){ .nav-links { display:flex; } .hamburger { display:none; } .nav-inner { grid-template-columns: 1fr auto 1fr; } }
@media (max-width: 1023px){ .nav-inner { grid-template-columns: auto 1fr auto; } .nav-links { display:none; } }

.header-search { display:none; align-items:center; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 8px 6px 16px; min-width: 220px; position:relative; }
.header-search input { border:none; background:transparent; outline:none; width:100%; font-size:.88rem; }
.header-search button { color: var(--color-accent); display:flex; padding:6px; }
@media (min-width:1280px){ .header-search { display:flex; } }

.mobile-menu { position:fixed; inset:0 0 0 auto; width:min(86%,360px); background:var(--color-surface); z-index:100; transform:translateX(100%); transition: transform var(--transition-base); box-shadow: var(--shadow-lg); display:flex; flex-direction:column; padding: var(--space-lg); overflow-y:auto; }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-lg); }
.mobile-menu a { display:block; padding: 14px 0; font-size:1.05rem; border-bottom:1px solid var(--color-border); color: var(--color-ink); font-weight:600;  }
.mobile-menu .mm-search { display:flex; align-items:center; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px 14px; margin-bottom: var(--space-md); }
.mobile-menu .mm-search input { border:none; background:transparent; outline:none; width:100%; }
.menu-overlay { position:fixed; inset:0; background:rgba(28,25,23,.5); z-index:90; opacity:0; visibility:hidden; transition: opacity var(--transition-base); }
.menu-overlay.open { opacity:1; visibility:visible; }

.hero { position:relative; min-height: 78vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; } .hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,25,23,.2) 0%, rgba(28,25,23,.4) 45%, rgba(28,25,23,.85) 100%); z-index:1; }
.hero-content { position:relative; z-index:2; padding-block: var(--space-2xl); max-width: 640px; }
.hero-eyebrow { font-size:.72rem; letter-spacing:.2em; color:var(--color-accent); font-weight:600; margin-bottom: var(--space-md); }
.hero-title { font-size: clamp(2.2rem, 6vw, 4.2rem); color:#fff; line-height:1.05; }
.hero-title em { font-style: normal; color:var(--color-accent); }
.hero-subtitle { font-size: clamp(1rem,2.2vw,1.15rem); color: rgba(255,255,255,.95); font-weight:500; margin-top: var(--space-md); max-width: 46ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--space-md); margin-top: var(--space-xl); }

.section { padding-block: var(--space-2xl); } @media (min-width:768px){ .section { padding-block: var(--space-3xl); } }
.section-alt { background: var(--color-surface-alt); } .section-deep { background: var(--color-deep); color:#e7e5e4; }
.section-deep h2, .section-deep h3 { color:#fff; }
.section-header { text-align:center; max-width: 640px; margin: 0 auto var(--space-xl); }
.section-eyebrow { font-size:.72rem; letter-spacing:.28em; color: var(--color-accent); font-weight:700; margin-bottom: var(--space-sm); }
.section-title { font-size: clamp(1.7rem, 3.8vw, 2.5rem); font-weight: 700; } .section-subtitle { color: var(--color-text-primary); margin-top: var(--space-sm); font-size:1.05rem; font-weight:500; line-height: 1.6; }
.section-flush-head { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-md); margin-bottom: var(--space-xl); flex-wrap:wrap; }
.link-arrow { color: var(--color-accent); font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:6px; } .link-arrow:hover { gap:10px; transition: gap var(--transition-fast); }

.grid { display:grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); }
@media (min-width:640px){ .grid-2 { grid-template-columns: repeat(2,1fr);} }
@media (min-width:768px){ .grid-3 { grid-template-columns: repeat(3,1fr);} .grid-4 { grid-template-columns: repeat(3,1fr);} }
@media (min-width:1024px){ .grid-4 { grid-template-columns: repeat(4,1fr);} }

.product-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-accent); }
.product-card-media { position:relative; aspect-ratio: 1/1; overflow:hidden; background: var(--color-surface-alt); }
.product-card-media img { width:100%; height:100%; object-fit:cover; transition: transform 600ms ease; }
.product-card:hover .product-card-media img { transform: scale(1.06); }
.product-card-badges { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.product-card-body { padding: var(--space-md); display:flex; flex-direction:column; gap:6px; flex:1; }
.product-card-vendor { font-size:.68rem; letter-spacing:.14em;  color: var(--color-text-muted); font-weight:600; }
.product-card-title { font-family: var(--font-body); font-weight:600; font-size:.9rem; line-height:1.35; color: var(--color-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card-price { display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px; }
.price { font-family: var(--font-mono); font-weight:700; font-size:1.05rem; color: var(--color-ink); }
.price-compare { font-family: var(--font-mono); font-size:.85rem; color: var(--color-text-secondary); font-weight:600; text-decoration: line-through; }
.product-card-actions { padding: 0 var(--space-md) var(--space-md); }
.rating-inline { display:flex; align-items:center; gap:5px; font-size:.78rem; color: var(--color-text-secondary); font-weight:500; }
.stars { color: var(--color-star); letter-spacing:1px; font-size:.85rem; }

.collection-card { position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/5; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow-sm); }
.collection-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 700ms ease; z-index:0; }
.collection-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(28,25,23,0) 30%, rgba(28,25,23,.85) 100%); z-index:1; }
.collection-card:hover img { transform: scale(1.06); }
.collection-card-body { position:relative; z-index:2; padding: var(--space-lg); width:100%; }
.collection-card-body h3 { color:#fff; font-size:1.25rem; }
.collection-card-body .count { font-size:.78rem; color: rgba(255,255,255,.9); font-weight:600; margin-top:4px; }

.trust-badges { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
@media (min-width:768px){ .trust-badges { grid-template-columns: repeat(4,1fr);} }
.trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding: var(--space-lg) var(--space-md); background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); }
.trust-item svg { width:30px; height:30px; color: var(--color-accent); } .trust-item h4 { font-family: var(--font-body); font-size:.92rem; font-weight:700; }
.trust-item p { font-size:.8rem; color: var(--color-text-secondary); font-weight:500; }

.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.82rem; color: var(--color-text-secondary); font-weight:500; padding-block: var(--space-md); }
.breadcrumb a:hover { color: var(--color-accent); } .breadcrumb .sep { opacity:.5; } .breadcrumb .current { color: var(--color-text-secondary); font-weight:500; }

.product-layout { display:grid; grid-template-columns:1fr; gap: var(--space-xl); padding-block: var(--space-lg) var(--space-2xl); }
@media (min-width:1024px){ .product-layout { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--space-2xl); align-items:start; } }
.product-gallery { display:flex; flex-direction:column; gap: var(--space-md); position:sticky; top: 88px; }
@media (max-width:1023px){ .product-gallery { position:static; } }
.gallery-main-wrap { border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; background: var(--color-surface); aspect-ratio:1/1; }
.gallery-main-wrap img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap: var(--space-sm); flex-wrap:wrap; }
.gallery-thumb { width:72px; height:72px; border-radius: var(--radius-sm); overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--color-surface-alt); }
.gallery-thumb.active { border-color: var(--color-accent); } .gallery-thumb img { width:100%; height:100%; object-fit:cover; }

.product-info { display:flex; flex-direction:column; gap: var(--space-md); }
.product-vendor { font-size:.72rem; letter-spacing:.16em; color: var(--color-accent); font-weight:700; }
.product-title { font-size: clamp(1.4rem,3vw,2rem); line-height:1.1; font-weight: 700; }
.product-price-wrap { display:flex; align-items:baseline; gap: var(--space-md); flex-wrap:wrap; }
.product-price { font-family: var(--font-mono); font-size:1.6rem; font-weight:700; color: var(--color-ink); }
.product-compare-price { font-family:var(--font-mono); font-size:1rem; color: var(--color-text-secondary); font-weight:600; text-decoration: line-through; }
.product-save { font-size:.8rem; font-weight:700; color: var(--color-error); }
.product-review-line { display:flex; align-items:center; gap:8px; font-size:.85rem; color: var(--color-text-primary); font-weight:500; }

.option-group { display:flex; flex-direction:column; gap: var(--space-sm); }
.option-label { font-size:.82rem; font-weight:700; letter-spacing:.04em;  color: var(--color-text-secondary); }
.option-label span { color: var(--color-ink); font-weight:600; text-transform:none; letter-spacing:0; }
.option-btns { display:flex; flex-wrap:wrap; gap: var(--space-sm); }
.option-btn { padding: 9px 18px; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size:.88rem; font-weight:500; transition: all var(--transition-fast); }
.option-btn:hover { border-color: var(--color-accent); } .option-btn.active { background: var(--color-ink); color:#fff; border-color: var(--color-ink); }
.option-btn.unavailable { opacity:.5; text-decoration: line-through; cursor:not-allowed; }

.qty-control { display:inline-flex; align-items:center; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; width:fit-content; }
.qty-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color: var(--color-ink); transition: background var(--transition-fast); }
.qty-btn:hover { background: var(--color-surface-alt); } .qty-input { width:48px; text-align:center; border:none; outline:none; background:transparent; font-weight:600; font-family: var(--font-mono); }

.atc-row { display:flex; flex-direction:column; gap: var(--space-sm); margin-top: var(--space-xs); }
.atc-buttons { display:flex; gap: var(--space-sm); flex-wrap:wrap; } .atc-buttons .qty-control { flex:0 0 auto; } .atc-buttons .btn { flex:1; min-width:140px; }
.availability-msg { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; }
.availability-msg.in-stock { color: var(--color-success); } .availability-msg.out { color: var(--color-error); }
.avail-dot { width:9px; height:9px; border-radius:50%; background: currentColor; }

.product-accordions { border-top:1px solid var(--color-border); margin-top: var(--space-md); }
.accordion { border-bottom:1px solid var(--color-border); }
.accordion-head { display:flex; justify-content:space-between; align-items:center; width:100%; padding: var(--space-md) 0; font-family:var(--font-heading); font-size:1.05rem; font-weight:600; color: var(--color-ink); text-align:left;  }
.accordion-head .plus { font-size:1.3rem; color: var(--color-accent); transition: transform var(--transition-base); }
.accordion.open .plus { transform: rotate(45deg); }
.accordion-body { max-height:0; overflow:hidden; transition: max-height var(--transition-base); }
.accordion.open .accordion-body { max-height: 1600px; }
.accordion-body-inner { padding-bottom: var(--space-lg); color: var(--color-text-primary); line-height: 1.7; }
.accordion-body-inner h3 { font-size:1rem; margin: var(--space-md) 0 var(--space-xs); color: var(--color-ink); }
.accordion-body-inner ul { list-style: disc; padding-left: 1.2em; display:flex; flex-direction:column; gap:6px; }
.accordion-body-inner p { margin-bottom: var(--space-sm); }

.mini-trust { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.mini-trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding: var(--space-sm); font-size:.72rem; color: var(--color-text-primary); font-weight:600; }
.mini-trust-item svg { width:22px; height:22px; color: var(--color-accent); }

.sticky-atc { position:fixed; left:0; right:0; bottom:0; z-index:70; background: var(--color-surface); border-top:1px solid var(--color-border); box-shadow: 0 -6px 24px rgba(28,25,23,.12); transform: translateY(110%); transition: transform var(--transition-base); }
.sticky-atc.visible { transform: translateY(0); }
.sticky-atc-inner { display:flex; align-items:center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); max-width: var(--container); margin-inline:auto; }
.sticky-atc-product { display:flex; align-items:center; gap: var(--space-sm); min-width:0; flex:1; }
.sticky-atc-product img { width:46px; height:46px; border-radius: var(--radius-sm); object-fit:cover; }
.sticky-atc-info { min-width:0; } .sticky-atc-info .t { font-weight:700; font-size:.86rem; color: var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-atc-info .p { font-family:var(--font-mono); font-size:.82rem; color:var(--color-accent); } .sticky-atc .btn { flex:0 0 auto; }

.reviews-summary { display:grid; grid-template-columns:1fr; gap: var(--space-lg); background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-xl); }
@media (min-width:768px){ .reviews-summary { grid-template-columns: 200px 1fr; align-items:center; } }
.reviews-avg { text-align:center; } .reviews-score { font-family:var(--font-heading); font-size:3rem; font-weight:600; color: var(--color-ink); line-height:1; }
.reviews-count { font-size:.82rem; color: var(--color-text-secondary); font-weight:500; margin-top:6px; }
.reviews-bars { display:flex; flex-direction:column; gap:8px; }
.rating-bar { display:flex; align-items:center; gap:10px; font-size:.8rem; color: var(--color-text-secondary); font-weight:500; }
.rating-bar .track { flex:1; height:7px; background: var(--color-surface-alt); border-radius: var(--radius-full); overflow:hidden; }
.rating-bar .fill { height:100%; background: var(--color-star); border-radius: var(--radius-full); }
.reviews-grid { display:grid; grid-template-columns:1fr; gap: var(--space-md); }
@media (min-width:768px){ .reviews-grid { grid-template-columns: repeat(2,1fr);} }
.review-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.review-header { display:flex; justify-content:space-between; align-items:flex-start; gap: var(--space-sm); margin-bottom:8px; }
.review-author { font-weight:700; font-size:.92rem; color: var(--color-text-primary); }
.review-verified { font-size:.7rem; color: var(--color-success); font-weight:700; display:flex; align-items:center; gap:4px; }
.review-title { font-family:var(--font-heading); font-size:1.05rem; margin:6px 0; color: var(--color-ink); font-weight:600; }
.review-body { font-size:.9rem; color: var(--color-text-primary); line-height: 1.6; } .review-date { font-size:.74rem; color: var(--color-text-secondary); font-weight:500; margin-top:8px; }

.cart-overlay { position:fixed; inset:0; background:rgba(28,25,23,.5); z-index:110; opacity:0; visibility:hidden; transition: opacity var(--transition-base); }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; height:100%; width:min(92%,420px); background: var(--color-surface); z-index:120; transform: translateX(100%); transition: transform var(--transition-base); display:flex; flex-direction:column; box-shadow: var(--shadow-lg); }
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-header { display:flex; justify-content:space-between; align-items:center; padding: var(--space-lg); border-bottom:1px solid var(--color-border); }
.cart-drawer-header h2 { font-size:1.25rem; display:flex; align-items:center; gap:10px; font-weight:700; color: var(--color-text-primary); }
.cart-lines { flex:1; overflow-y:auto; padding: var(--space-md) var(--space-lg); display:flex; flex-direction:column; gap: var(--space-md); }
.cart-item { display:grid; grid-template-columns: 72px 1fr auto; gap: var(--space-md); align-items:start; }
.cart-item img { width:72px; height:72px; object-fit:cover; border-radius: var(--radius-sm); background:var(--color-surface-alt); }
.cart-item-title { font-weight:600; font-size:.9rem; line-height:1.3; }
.cart-item-variant { font-size:.78rem; color: var(--color-text-secondary); font-weight:500; margin-top:2px; }
.cart-item-price { font-family:var(--font-mono); font-size:.9rem; margin-top:6px; color: var(--color-ink); }
.cart-item-controls { display:flex; align-items:center; gap:6px; margin-top:8px; }
.qty-mini { display:inline-flex; align-items:center; border:1px solid var(--color-border); border-radius:var(--radius-sm); }
.qty-mini button { width:28px; height:28px; font-size:1rem; } .qty-mini span { min-width:26px; text-align:center; font-size:.82rem; font-family:var(--font-mono); }
.cart-item-remove { font-size:.76rem; color: var(--color-text-secondary); font-weight:600; text-decoration:underline; } .cart-item-remove:hover { color: var(--color-error); }
.cart-empty { text-align:center; padding: var(--space-2xl) var(--space-md); color: var(--color-text-muted); display:flex; flex-direction:column; align-items:center; gap: var(--space-md); }
.cart-empty svg { width:56px; height:56px; opacity:.5; }
.cart-footer { border-top:1px solid var(--color-border); padding: var(--space-lg); display:flex; flex-direction:column; gap: var(--space-sm); }
.cart-subtotal { display:flex; justify-content:space-between; align-items:baseline; font-size:1rem; font-weight:600; color: var(--color-text-primary); }
.cart-subtotal strong { font-family:var(--font-mono); font-size:1.3rem; }
.cart-tax-note { font-size:.76rem; color: var(--color-text-secondary); font-weight:500; text-align:center; }
.cart-free-ship { font-size:.8rem; color: var(--color-success); text-align:center; font-weight:700; }

.cart-page-grid { display:grid; grid-template-columns:1fr; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width:1024px){ .cart-page-grid { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items:start; } }
.cart-table { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; }
.cart-row { display:grid; grid-template-columns: 100px 1fr auto; gap: var(--space-md); padding: var(--space-lg); border-bottom:1px solid var(--color-border); align-items:center; }
.cart-row:last-child { border-bottom:none; }
.cart-row img { width:100px; height:100px; object-fit:cover; border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.cart-row-title { font-weight:600; } .cart-row-variant { font-size:.82rem; color: var(--color-text-secondary); font-weight:500; }
.cart-row-price { font-family:var(--font-mono); }
.cart-row-right { text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.summary-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); position:sticky; top:88px; display:flex; flex-direction:column; gap: var(--space-md); }
.summary-line { display:flex; justify-content:space-between; font-size:.95rem; color: var(--color-text-primary); font-weight:500; }
.summary-total { display:flex; justify-content:space-between; align-items:baseline; padding-top: var(--space-md); border-top:2px solid var(--color-border); font-weight:700; color: var(--color-text-primary); }
.summary-total strong { font-family:var(--font-mono); font-size:1.4rem; color: var(--color-ink); }

.checkout-grid { display:grid; grid-template-columns:1fr; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width:1024px){ .checkout-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items:start; } }
.checkout-form { display:flex; flex-direction:column; gap: var(--space-xl); }
.form-section { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.form-section h2 { font-size:1.2rem; margin-bottom: var(--space-md); display:flex; align-items:center; gap:10px; font-weight:700; }
.form-section .step-num { width:28px; height:28px; border-radius:var(--radius-full); background: var(--color-accent); color:#fff; font-family:var(--font-body); font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: var(--space-md); }
.field label { font-size:.82rem; font-weight:700; color: var(--color-text-primary); }
.field input, .field select, .field textarea { padding: 12px 14px; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); transition: border-color var(--transition-fast); width:100%; color: var(--color-text-primary); font-weight:500; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--color-accent); background: var(--color-surface); }
.field input.invalid { border-color: var(--color-error); }
.field .err { font-size:.74rem; color: var(--color-error); display:none; } .field.show-err .err { display:block; }
.field-row { display:grid; grid-template-columns:1fr; gap: var(--space-md); }
@media (min-width:640px){ .field-row.cols-2 { grid-template-columns:1fr 1fr;} .field-row.cols-3 { grid-template-columns: 2fr 1fr 1fr;} }
.card-input-wrap { position:relative; }
.card-input-wrap .card-icons { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:4px; }
.card-input-wrap .card-icons svg { width:30px; height:20px; }
.secure-note { display:flex; align-items:center; gap:8px; font-size:.8rem; color: var(--color-success); font-weight:700; margin-top: var(--space-sm); }
.secure-note svg { width:16px; height:16px; }
.checkout-summary { position:sticky; top:88px; }
.checkout-line { display:grid; grid-template-columns: 56px 1fr auto; gap: var(--space-sm); align-items:center; padding: var(--space-sm) 0; border-bottom:1px solid var(--color-border); }
.checkout-line img { width:56px; height:56px; object-fit:cover; border-radius: var(--radius-sm); }
.checkout-line .t { font-size:.85rem; font-weight:700; color: var(--color-text-primary); } .checkout-line .v { font-size:.74rem; color: var(--color-text-secondary); font-weight:500; }
.checkout-line .p { font-family:var(--font-mono); font-size:.85rem; }
.pay-badges { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top: var(--space-md); opacity:.95; }
.pay-badges svg { height:26px; width:auto; }

.confirm-hero { text-align:center; padding-block: var(--space-2xl); }
.confirm-check { width:88px; height:88px; border-radius:var(--radius-full); background: var(--color-success); color:#fff; display:flex; align-items:center; justify-content:center; margin: 0 auto var(--space-lg); animation: pop 500ms ease; }
.confirm-check svg { width:44px; height:44px; }
@keyframes pop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;} }
.confirm-order-box { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); max-width: 620px; margin: var(--space-xl) auto; text-align:left; }
.confirm-meta { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
.confirm-meta .lbl { font-size:.72rem; letter-spacing:.1em;  color: var(--color-text-muted); }
.confirm-meta .val { font-weight:600; }
.confirm-steps { display:grid; grid-template-columns:1fr; gap: var(--space-md); max-width: 620px; margin: var(--space-xl) auto; }
@media (min-width:640px){ .confirm-steps { grid-template-columns: repeat(3,1fr);} }
.confirm-step { text-align:center; padding: var(--space-md); }
.confirm-step svg { width:32px; height:32px; color: var(--color-accent); margin:0 auto var(--space-sm); }

.toast { position:fixed; bottom: 24px; left:50%; transform: translate(-50%, 140%); background: var(--color-ink); color:#fff; padding: 14px 22px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index:200; font-size:.9rem; font-weight:500; display:flex; align-items:center; gap:10px; transition: transform var(--transition-base); max-width: 90vw; }
.toast.show { transform: translate(-50%, 0); }
.toast-success { background: var(--color-success); } .toast-error { background: var(--color-error); }
.toast svg { width:18px; height:18px; flex:0 0 auto; }

.pagination { display:flex; gap:6px; justify-content:center; margin-top: var(--space-xl); }
.pagination-btn { min-width:42px; height:42px; padding:0 12px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--color-border); border-radius:var(--radius-sm); font-weight:600; font-size:.9rem; transition: all var(--transition-fast); }
.pagination-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination-btn.active { background: var(--color-ink); color:#fff; border-color: var(--color-ink); }
.pagination-btn:disabled { opacity:.5; cursor:not-allowed; }

.collection-toolbar { display:flex; flex-wrap:wrap; gap: var(--space-md); justify-content:space-between; align-items:center; padding-block: var(--space-md); border-bottom:1px solid var(--color-border); margin-bottom: var(--space-lg); }
.result-count { font-size:.88rem; color: var(--color-text-secondary); font-weight:500; }
.sort-select { padding:9px 14px; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size:.85rem; font-weight:600; color: var(--color-text-primary); }

.collection-hero { position:relative; min-height:320px; display:flex; align-items:center; color:#fff; border-radius: var(--radius-md); overflow:hidden; margin-top: var(--space-md); }
.collection-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.collection-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(28,25,23,.85) 0%, rgba(28,25,23,.35) 100%); z-index:1; }
.collection-hero-body { position:relative; z-index:2; padding: var(--space-xl); }
.collection-hero-body h1 { color:#fff; font-size: clamp(1.7rem,3.8vw,2.6rem); }
.collection-hero-body p { color: rgba(255,255,255,.95); font-weight:500; max-width:52ch; margin-top: var(--space-sm); }

.search-hero { padding-block: var(--space-xl); }
.search-big { display:flex; align-items:center; background: var(--color-surface); border:1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 8px 8px 22px; max-width:620px; margin-top: var(--space-md); }
.search-big input { border:none; background:transparent; outline:none; width:100%; font-size:1.05rem; }
.search-dropdown { position:absolute; top:calc(100% + 8px); left:0; right:0; background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow:hidden; z-index:80; display:none; max-height:400px; overflow-y:auto; }
.search-dropdown.open { display:block; }
.search-item { display:flex; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); align-items:center; border-bottom:1px solid var(--color-border); transition: background var(--transition-fast); }
.search-item:hover { background: var(--color-surface-alt); }
.search-item img { width:44px; height:44px; object-fit:cover; border-radius: var(--radius-sm); }
.search-item .t { font-size:.86rem; font-weight:600; } .search-item .p { font-family:var(--font-mono); font-size:.8rem; color: var(--color-accent); font-weight:600; }
.empty-state { text-align:center; padding: var(--space-3xl) var(--space-md); }
.empty-state svg { width:60px; height:60px; color: var(--color-text-muted); opacity:.5; margin:0 auto var(--space-md); }

.rich { max-width: 760px; margin-inline:auto; }
.rich h1 { font-size: clamp(1.8rem,3.8vw,2.4rem); margin-bottom: var(--space-md); }
.rich h2 { font-size:1.4rem; margin: var(--space-xl) 0 var(--space-sm); }
.rich h3 { font-size:1.15rem; margin: var(--space-lg) 0 var(--space-xs); }
.rich p { margin-bottom: var(--space-md); color: var(--color-text-primary); line-height: 1.7; }
.rich ul, .rich ol { margin: 0 0 var(--space-md) 1.3em; color: var(--color-text-secondary); display:flex; flex-direction:column; gap:8px; }
.rich ul { list-style: disc; } .rich ol { list-style: decimal; }
.rich a { color: var(--color-accent); text-decoration: underline; } .rich strong { color: var(--color-ink); }
.policy-layout { display:grid; grid-template-columns:1fr; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width:1024px){ .policy-layout { grid-template-columns: 240px 1fr; } }
.policy-nav { position:sticky; top:88px; align-self:start; display:flex; flex-direction:column; gap:4px; }
.policy-nav a { padding:10px 14px; border-radius: var(--radius-sm); font-size:.9rem; color: var(--color-text-primary); font-weight:600; }
.policy-nav a:hover { background: var(--color-surface-alt); } .policy-nav a.active { background: var(--color-ink); color:#fff; }

.contact-grid { display:grid; grid-template-columns:1fr; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width:1024px){ .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info-item { display:flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
.contact-info-item svg { width:24px; height:24px; color: var(--color-accent); flex:0 0 auto; }
.contact-info-item .lbl { font-size:.74rem; letter-spacing:.1em;  color: var(--color-text-muted); }
.contact-info-item .val { font-weight:600; }

.footer { background: var(--color-deep); color:#b8b2a8; padding-block: var(--space-2xl) var(--space-lg); margin-top: var(--space-2xl); }
.footer-grid { display:grid; grid-template-columns:1fr; gap: var(--space-xl); }
@media (min-width:640px){ .footer-grid { grid-template-columns: repeat(2,1fr);} }
@media (min-width:1024px){ .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr;} }
.footer-logo { font-family: var(--font-heading); font-size:1.35rem; color:#fff; font-weight:700; margin-bottom: var(--space-sm);  }
.footer-about { font-size:.9rem; color:#b8b2a8; font-weight:500; max-width:34ch; }
.footer-col h4 { font-family:var(--font-body); font-size:.78rem; color:#8fa687; margin-bottom: var(--space-md); }
.footer-col a { display:block; padding:6px 0; font-size:.9rem; color:#c4beb4; font-weight:500; transition: color var(--transition-fast); } .footer-col a:hover { color:#fff; }
.social-links { display:flex; gap: var(--space-sm); margin-top: var(--space-md); }
.social-links a { width:38px; height:38px; border:1px solid rgba(255,255,255,.25); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; transition: all var(--transition-fast); }
.social-links a:hover { background: var(--color-accent); border-color: var(--color-accent); } .social-links svg { width:18px; height:18px; }
.footer-newsletter input { width:100%; padding:12px 14px; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color:#fff; margin-bottom: var(--space-sm); }
.footer-newsletter input::placeholder { color: #9a948a; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top: var(--space-2xl); padding-top: var(--space-lg); display:flex; flex-wrap:wrap; gap: var(--space-md); justify-content:space-between; align-items:center; font-size:.82rem; color:#b8b2a8; font-weight:500; }
.footer-bottom .fb-links { display:flex; gap: var(--space-md); flex-wrap:wrap; } .footer-bottom a:hover { color:#fff; }

@keyframes fadeUp { from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:none;} }
.reveal { opacity:0; } .reveal.in { animation: fadeUp 600ms ease forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; display:inline-block; }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal { opacity:1; } }

.text-center { text-align:center; } .mt-lg { margin-top: var(--space-lg);} .mt-xl { margin-top: var(--space-xl);}
.hidden { display:none !important; }
.brand-story-grid { display:grid; grid-template-columns:1fr; gap: var(--space-xl); align-items:center; }
@media (min-width:768px){ .brand-story-grid { grid-template-columns: 1fr 1fr; } }
.brand-story-img { border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-md); }
.brand-story-img img { width:100%; height:100%; object-fit:cover; }
.stat-row { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.stat-row .n { font-family:var(--font-heading); font-size:1.8rem; color: var(--color-accent); }
.stat-row .l { font-size:.78rem; color: var(--color-text-secondary); font-weight:600; letter-spacing:.06em;  }