/*
Theme Name: Sharma Army Store
Theme URI: https://sharmaarmystore.in
Author: Sharma Army Store
Description: Premium editorial e-commerce theme for tactical, outdoor and utility apparel. Dark, confident, conversion-focused, with restrained motion.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sharma-army-store
Tags: e-commerce, woocommerce, dark, custom-menu, custom-logo, one-column

WooCommerce is required for shop/product/cart/checkout templates to render.
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
  --sas-primary: #111111;
  --sas-secondary: #1C241D;
  --sas-army: #394331;
  --sas-olive: #59624B;
  --sas-sand: #C8B99A;
  --sas-offwhite: #F2F0E9;
  --sas-accent: #D4FF3F;

  --sas-text: #F2F0E9;
  --sas-text-dim: #B8B6AD;
  --sas-line: rgba(242, 240, 233, 0.12);
  --sas-line-strong: rgba(242, 240, 233, 0.22);
  --sas-danger: #C1440E;
  --sas-mobile-nav-h: 66px;

  --sas-font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --sas-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sas-max-width: 1360px;
  --sas-radius: 3px;
  --sas-header-h: 76px;
  --sas-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
/* Flex/grid items default to min-width:auto (shrink-to-content), which can
   force a row wider than its container even with flex-wrap set, if a single
   child's un-wrappable content is wide enough. This is the most common,
   least-obvious cause of an overflow that appears intermittently (only at
   certain zoom levels or window widths) rather than consistently. Costs
   nothing to pin explicitly across every flex/grid row on the product page. */
.sas-variant-row > *,
.sas-bulk-grid > *,
.woocommerce div.product form.cart > *,
.sas-fbt-item,
.sas-product-page > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--sas-primary);
  color: var(--sas-text);
  font-family: var(--sas-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--sas-accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--sas-font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--sas-text);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: 1.3rem; }

.sas-eyebrow {
  font-family: var(--sas-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sas-sand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sas-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sas-accent); display: inline-block; }

.sas-container { max-width: var(--sas-max-width); margin: 0 auto; padding: 0 28px; }
.sas-section { padding: 96px 0; }
.sas-section-tight { padding: 56px 0; }
@media (max-width: 782px) {
  .sas-section { padding: 60px 0; }
  .sas-container { padding: 0 20px; }
}

.sas-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.sas-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sas-font-body); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 16px 30px; border: 1px solid var(--sas-text);
  background: transparent; color: var(--sas-text); border-radius: var(--sas-radius);
  transition: background 0.3s var(--sas-ease), color 0.3s var(--sas-ease), transform 0.2s var(--sas-ease);
  cursor: pointer;
}
.sas-btn:hover { background: var(--sas-text); color: var(--sas-primary); }
.sas-btn--accent { background: var(--sas-accent); border-color: var(--sas-accent); color: var(--sas-primary); }
.sas-btn--accent:hover { background: var(--sas-offwhite); border-color: var(--sas-offwhite); }
.sas-btn--ghost { border-color: var(--sas-line-strong); color: var(--sas-text-dim); }
.sas-btn--ghost:hover { border-color: var(--sas-text); color: var(--sas-text); background: transparent; }
.sas-btn--sm { padding: 11px 20px; font-size: 0.72rem; }
.sas-btn--block { width: 100%; }
.sas-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

a.button, button.button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce input.button {
  font-family: var(--sas-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  background: var(--sas-accent) !important;
  color: var(--sas-primary) !important;
  border: 1px solid var(--sas-accent) !important;
  border-radius: var(--sas-radius) !important;
  padding: 13px 24px !important;
  transition: background 0.25s var(--sas-ease) !important;
}
a.button:hover, button.button:hover, .woocommerce a.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover {
  background: var(--sas-offwhite) !important;
  border-color: var(--sas-offwhite) !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--sas-accent) !important; }

/* ==========================================================================
   3. Announcement bar + Header
   ========================================================================== */
.sas-announce {
  background: var(--sas-secondary);
  border-bottom: 1px solid var(--sas-line);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sas-sand); text-align: center; padding: 9px 12px;
}

.sas-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--sas-ease), border-color 0.3s var(--sas-ease);
}
.sas-header.is-solid, .sas-header.is-scrolled {
  background: rgba(17,17,17,0.94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--sas-line);
}
body.home .sas-header:not(.is-scrolled) { background: transparent; }
body:not(.home) .sas-header { background: rgba(17,17,17,0.94); backdrop-filter: blur(10px); border-bottom-color: var(--sas-line); }

.sas-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--sas-header-h);
  max-width: var(--sas-max-width); margin: 0 auto; padding: 0 28px;
}
/* A long text logo (no uploaded image logo set) with no cap on its own
   width was pushing the cart/menu icons past the edge of the screen on
   every common phone width once the actual site name ("SHARMAARMYSTORE.IN",
   18 characters) replaced the shorter placeholder used while building this.
   flex-shrink alone doesn't fix this — flex items default to
   min-width:auto, which stops them shrinking below their own text's
   intrinsic width. min-width:0 here is what actually lets the ellipsis
   truncation engage instead of just overflowing. */
.sas-logo {
  font-family: var(--sas-font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 52vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sas-logo a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sas-logo img { max-height: 50px; width: auto; display: block; }
@media (max-width: 480px) {
  .sas-logo { font-size: 1rem; max-width: 44vw; }
  .sas-header-actions { gap: 14px; }
  .sas-header-inner { padding: 0 16px; }
}
@media (max-width: 360px) {
  .sas-logo { font-size: 0.86rem; max-width: 38vw; }
  .sas-header-actions { gap: 10px; }
  .sas-header-inner { padding: 0 12px; }
}

.sas-nav { display: flex; }
.sas-nav > ul { display: flex; gap: 34px; }
.sas-nav > ul > li { position: relative; }
.sas-nav > ul > li > a {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sas-text-dim); padding: 28px 0; display: inline-block;
  border-bottom: 2px solid transparent;
}
.sas-nav > ul > li > a:hover, .sas-nav > ul > li.current-menu-item > a { color: var(--sas-text); border-bottom-color: var(--sas-accent); }

.sas-header-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.sas-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--sas-text); }
.sas-icon-btn svg { width: 20px; height: 20px; }
.sas-badge-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--sas-accent); color: var(--sas-primary);
  font-size: 0.62rem; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.sas-menu-toggle { display: none; }

@media (max-width: 980px) {
  .sas-nav { display: none; }
  .sas-nav.sas-nav--open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sas-primary); border-bottom: 1px solid var(--sas-line);
    padding: 20px 28px; max-height: 70vh; overflow-y: auto;
  }
  .sas-nav.sas-nav--open > ul { flex-direction: column; gap: 4px; }
  .sas-nav.sas-nav--open > ul > li > a { padding: 14px 0; border-bottom: 1px solid var(--sas-line); width: 100%; }
  .sas-nav.sas-nav--open .sas-megamenu { position: static; transform: none; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; display: none; grid-template-columns: 1fr; box-shadow: none; margin-bottom: 12px; }
  .sas-nav.sas-nav--open .menu-item-mega.is-open .sas-megamenu { display: grid; }
  .sas-menu-toggle { display: inline-flex; }
}

/* Mega menu */
.sas-megamenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(760px, 90vw);
  background: var(--sas-secondary); border: 1px solid var(--sas-line);
  border-radius: var(--sas-radius); padding: 32px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--sas-ease), transform 0.22s var(--sas-ease);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.sas-nav > ul > li:hover .sas-megamenu,
.sas-nav > ul > li.is-open .sas-megamenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.sas-megamenu h4 { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--sas-sand); margin-bottom: 14px; }
.sas-megamenu ul li { margin-bottom: 10px; }
.sas-megamenu ul li a { font-size: 0.92rem; color: var(--sas-text-dim); }
.sas-megamenu ul li a:hover { color: var(--sas-accent); }
.sas-megamenu-promo { border-radius: var(--sas-radius); overflow: hidden; position: relative; background: var(--sas-army); min-height: 160px; display: flex; align-items: flex-end; padding: 18px; }
.sas-megamenu-promo span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sas-offwhite); }

/* ==========================================================================
   4. Hero
   ========================================================================== */
.sas-hero {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--sas-primary);
  margin-top: calc(-1 * var(--sas-header-h));
}
.sas-hero-media { position: absolute; inset: 0; z-index: 0; }
.sas-hero-media img, .sas-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.sas-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.35) 0%, rgba(17,17,17,0.15) 40%, rgba(17,17,17,0.92) 100%);
}
.sas-hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; }
.sas-hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--sas-max-width); margin: 0 auto; padding: 0 28px 96px;
}
.sas-hero-content h1 { max-width: 16ch; margin-bottom: 20px; }
.sas-hero-content p { color: var(--sas-text-dim); font-size: 1.05rem; max-width: 46ch; margin-bottom: 34px; }
.sas-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.sas-scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sas-text-dim);
}
.sas-scroll-cue .line { width: 1px; height: 26px; background: var(--sas-line-strong); position: relative; overflow: hidden; }
.sas-scroll-cue .line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--sas-accent); animation: sas-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes sas-scroll-cue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .sas-scroll-cue .line::after { animation: none; top: 0; } }

@media (max-width: 782px) {
  .sas-hero { min-height: 82vh; align-items: flex-end; }
  .sas-hero-content { padding-bottom: 64px; }
}

/* ==========================================================================
   5. Category grid ("Mission Ready")
   ========================================================================== */
.sas-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px; background: var(--sas-line); border: 1px solid var(--sas-line);
}
.sas-cat-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--sas-secondary);
  display: flex; align-items: flex-end;
}
.sas-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--sas-ease); }
.sas-cat-card:hover img { transform: scale(1.06); }
.sas-cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 40%, rgba(17,17,17,0.88) 100%); }
.sas-cat-card-body { position: relative; z-index: 1; padding: 26px; width: 100%; }
.sas-cat-card-body p { color: var(--sas-text-dim); font-size: 0.88rem; margin: 6px 0 14px; }
.sas-cat-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sas-accent); }
.sas-cat-card-link .arrow { transition: transform 0.25s var(--sas-ease); }
.sas-cat-card:hover .sas-cat-card-link .arrow { transform: translateX(5px); }

/* ==========================================================================
   6. Product grid / cards
   ========================================================================== */
.sas-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.sas-section-head h2 { margin-bottom: 0; }

.woocommerce ul.products, .sas-product-grid {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 32px !important; margin: 0 !important; padding: 0 !important;
}
/* WooCommerce's stylesheet adds ::before/::after clearfix pseudo-elements to
   ul.products. In a float layout they're invisible, but in a grid container
   they become real anonymous grid items and occupy the first and last cells,
   shifting every product one column over. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product, .sas-product-grid .product {
  width: 100% !important; float: none !important; margin: 0 !important;
  position: relative; list-style: none;
}
.sas-product-card { position: relative; }
.sas-product-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--sas-secondary); border-radius: var(--sas-radius); }
.sas-product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--sas-ease), transform 0.5s var(--sas-ease); }
.sas-product-media img.sas-img-secondary { opacity: 0; }
.sas-product-card:hover .sas-product-media img.sas-img-primary { opacity: 0; transform: scale(1.04); }
.sas-product-card:hover .sas-product-media img.sas-img-secondary { opacity: 1; }
.sas-product-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.sas-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; }
.sas-badge--sale { background: var(--sas-danger); color: var(--sas-offwhite); }
.sas-badge--new { background: var(--sas-accent); color: var(--sas-primary); }
.sas-product-quick-actions {
  position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(6px); transition: opacity 0.25s var(--sas-ease), transform 0.25s var(--sas-ease);
}
.sas-product-card:hover .sas-product-quick-actions { opacity: 1; transform: translateX(0); }
.sas-icon-circle {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(17,17,17,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; color: var(--sas-text);
  border: 1px solid var(--sas-line-strong);
}
.sas-icon-circle:hover { background: var(--sas-accent); color: var(--sas-primary); border-color: var(--sas-accent); }
.sas-icon-circle svg { width: 16px; height: 16px; }
.sas-icon-circle.is-active { background: var(--sas-accent); color: var(--sas-primary); }

.sas-product-info { padding: 16px 2px 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.sas-product-info .sas-product-title {
  font-family: var(--sas-font-body); text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: 0.96rem; color: var(--sas-text); margin: 0 0 6px;
}
.woocommerce ul.products li.product .price, .sas-product-info .price {
  font-family: var(--sas-font-body); font-weight: 700; font-size: 0.94rem; color: var(--sas-text);
}
.woocommerce ul.products li.product .price del { color: var(--sas-text-dim); opacity: 0.6; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--sas-accent); }
.woocommerce ul.products li.product .star-rating { font-size: 0.8rem; margin-bottom: 4px; }
.woocommerce span.onsale { display: none; } /* replaced by .sas-badge--sale */
.woocommerce ul.products li.product a.button, .sas-add-to-cart {
  margin-top: 12px !important; width: 100%;
}

/* Cart drawer trigger row on card (mobile-first add to cart already covered by WC button) */

/* ==========================================================================
   7. Cart drawer
   ========================================================================== */
.sas-cart-drawer-overlay {
  position: fixed; inset: 0; background: rgba(17,17,17,0.6); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--sas-ease);
}
.sas-cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.sas-cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); z-index: 91;
  background: var(--sas-secondary); border-left: 1px solid var(--sas-line);
  transform: translateX(100%); transition: transform 0.35s var(--sas-ease);
  display: flex; flex-direction: column;
}
.sas-cart-drawer.is-open { transform: translateX(0); }
.sas-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--sas-line); }
.sas-cart-drawer-head h3 { margin: 0; font-size: 1rem; }
.sas-cart-shipping-bar { padding: 16px 24px; border-bottom: 1px solid var(--sas-line); }
.sas-cart-shipping-bar p { font-size: 0.78rem; color: var(--sas-text-dim); margin: 0 0 8px; }
.sas-progress { height: 4px; background: var(--sas-line); border-radius: 4px; overflow: hidden; }
.sas-progress-fill { height: 100%; background: var(--sas-accent); transition: width 0.4s var(--sas-ease); }
.sas-cart-drawer-items { flex: 1; overflow-y: auto; padding: 12px 24px; }
.sas-cart-drawer-foot { padding: 20px 24px 26px; border-top: 1px solid var(--sas-line); }
.sas-cart-line-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--sas-line); }
.sas-cart-line-item img { width: 68px; height: 84px; object-fit: cover; border-radius: 2px; }
.sas-cart-line-item .name { font-size: 0.88rem; margin: 0 0 4px; }
.sas-cart-line-item .meta { font-size: 0.76rem; color: var(--sas-text-dim); }
.sas-cart-subtotal-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 16px; }
.sas-cart-added-toast {
  position: fixed; top: 20px; right: 20px; z-index: 99; background: var(--sas-accent); color: var(--sas-primary);
  padding: 14px 20px; border-radius: var(--sas-radius); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; transform: translateY(-12px); opacity: 0;
  transition: transform 0.3s var(--sas-ease), opacity 0.3s var(--sas-ease); pointer-events: none;
}
.sas-cart-added-toast.is-visible { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   8. Search overlay
   ========================================================================== */
.sas-search-overlay {
  position: fixed; inset: 0; z-index: 95; background: rgba(17,17,17,0.98);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--sas-ease);
  display: flex; flex-direction: column;
}
.sas-search-overlay.is-open { opacity: 1; visibility: visible; }
.sas-search-overlay-head { max-width: 900px; width: 100%; margin: 0 auto; padding: 100px 28px 24px; }
.sas-search-overlay-head input {
  width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--sas-line-strong);
  color: var(--sas-text); font-family: var(--sas-font-display); font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-transform: uppercase; padding: 12px 0;
}
.sas-search-overlay-head input:focus { outline: none; border-bottom-color: var(--sas-accent); }
.sas-search-close { position: absolute; top: 28px; right: 28px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sas-text-dim); }
.sas-search-results { max-width: 900px; width: 100%; margin: 0 auto; padding: 0 28px 60px; overflow-y: auto; }
.sas-search-result-item { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--sas-line); }
.sas-search-result-item img { width: 56px; height: 70px; object-fit: cover; border-radius: 2px; }
.sas-search-result-item .name { font-size: 0.95rem; margin: 0 0 4px; }
.sas-search-result-item .cat { font-size: 0.72rem; color: var(--sas-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.sas-search-result-item .price { margin-left: auto; font-weight: 700; font-size: 0.9rem; }
.sas-search-empty { color: var(--sas-text-dim); font-size: 0.9rem; padding: 20px 0; }

/* ==========================================================================
   9. Field-tested story section
   ========================================================================== */
.sas-story { position: relative; }
.sas-story-block { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.sas-story-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sas-story-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.25) 60%); }
.sas-story-block-content { position: relative; z-index: 1; max-width: 520px; padding: 0 28px; margin: 0 auto 0 0; }
.sas-story-block-content h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.sas-story-block-content p { color: var(--sas-text-dim); font-size: 1.02rem; }

/* ==========================================================================
   10. Product finder
   ========================================================================== */
.sas-finder-options { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.sas-finder-chip {
  padding: 12px 22px; border: 1px solid var(--sas-line-strong); border-radius: 40px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim);
  transition: border-color 0.2s var(--sas-ease), color 0.2s var(--sas-ease), background 0.2s var(--sas-ease);
}
.sas-finder-chip:hover { border-color: var(--sas-text); color: var(--sas-text); }
.sas-finder-chip.is-active { background: var(--sas-accent); border-color: var(--sas-accent); color: var(--sas-primary); }
.sas-finder-results { min-height: 200px; }
.sas-finder-loading { color: var(--sas-text-dim); font-size: 0.85rem; }

/* ==========================================================================
   11. Promo banners
   ========================================================================== */
.sas-promo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2px; background: var(--sas-line); }
.sas-promo-card { position: relative; min-height: 320px; display: flex; align-items: flex-end; padding: 32px; overflow: hidden; background: var(--sas-secondary); }
.sas-promo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sas-promo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0.1), rgba(17,17,17,0.85)); }
.sas-promo-card-body { position: relative; z-index: 1; }
.sas-promo-card-body .sas-eyebrow { color: var(--sas-accent); }
.sas-promo-card-body h3 { font-size: 1.6rem; margin: 8px 0 16px; }

/* ==========================================================================
   12. Horizontal carousel (New Arrivals)
   ========================================================================== */
.sas-carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.sas-carousel-track::-webkit-scrollbar { height: 6px; }
.sas-carousel-track::-webkit-scrollbar-thumb { background: var(--sas-line-strong); border-radius: 4px; }
.sas-carousel-track .sas-product-card { min-width: 260px; scroll-snap-align: start; }
.sas-carousel-controls { display: flex; gap: 10px; }
.sas-carousel-arrow { width: 42px; height: 42px; border: 1px solid var(--sas-line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sas-carousel-arrow:hover { border-color: var(--sas-text); }

/* ==========================================================================
   13. Stats / social proof
   ========================================================================== */
.sas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; border-top: 1px solid var(--sas-line); border-bottom: 1px solid var(--sas-line); padding: 48px 0; }
.sas-stat-num { font-family: var(--sas-font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--sas-accent); }
.sas-stat-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sas-text-dim); margin-top: 6px; }

.sas-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 44px; }
.sas-review-card { border: 1px solid var(--sas-line); border-radius: var(--sas-radius); padding: 26px; }
.sas-review-stars { color: var(--sas-accent); font-size: 0.9rem; margin-bottom: 12px; }
.sas-review-card p { color: var(--sas-text-dim); font-size: 0.92rem; }
.sas-review-author { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.sas-review-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sas-review-author .verified { font-size: 0.68rem; color: var(--sas-accent); text-transform: uppercase; letter-spacing: 0.06em; }

/* ==========================================================================
   14. Instagram-style grid
   ========================================================================== */
.sas-social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; }
.sas-social-item { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.sas-social-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--sas-ease); }
.sas-social-item:hover img { transform: scale(1.06); }
.sas-social-item-overlay {
  position: absolute; inset: 0; background: rgba(17,17,17,0.55); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s var(--sas-ease);
}
.sas-social-item:hover .sas-social-item-overlay { opacity: 1; }
.sas-social-item-overlay span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--sas-offwhite); padding: 8px 16px; }

/* ==========================================================================
   15. Newsletter
   ========================================================================== */
.sas-newsletter { background: var(--sas-secondary); text-align: center; }
.sas-newsletter h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.sas-newsletter p { color: var(--sas-text-dim); max-width: 50ch; margin: 0 auto 32px; }
.sas-newsletter-form { display: flex; gap: 12px; justify-content: center; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.sas-newsletter-form input { flex: 1; min-width: 220px; background: var(--sas-primary); border: 1px solid var(--sas-line-strong); color: var(--sas-text); padding: 14px 16px; border-radius: var(--sas-radius); }

/* ==========================================================================
   16. Trust badges
   ========================================================================== */
.sas-trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.sas-trust-item svg { width: 28px; height: 28px; color: var(--sas-accent); margin-bottom: 10px; }
.sas-trust-item span { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim); }

/* ==========================================================================
   17. Footer
   ========================================================================== */
.sas-footer { background: var(--sas-secondary); border-top: 1px solid var(--sas-line); padding: 72px 0 28px; }
.sas-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px; }
.sas-footer h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sas-sand); margin-bottom: 18px; }
.sas-footer ul li { margin-bottom: 11px; }
.sas-footer a { color: var(--sas-text-dim); font-size: 0.9rem; }
.sas-footer a:hover { color: var(--sas-text); }
.sas-footer-brand p { color: var(--sas-text-dim); max-width: 34ch; font-size: 0.9rem; }
.sas-social-links { display: flex; gap: 14px; margin-top: 18px; }
.sas-social-links a { width: 36px; height: 36px; border: 1px solid var(--sas-line-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sas-footer-bottom { border-top: 1px solid var(--sas-line); padding-top: 22px; display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sas-text-dim); flex-wrap: wrap; gap: 10px; }
@media (max-width: 782px) { .sas-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   18. Mobile bottom nav
   ========================================================================== */
.sas-mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  background: rgba(17,17,17,0.97); backdrop-filter: blur(10px); border-top: 1px solid var(--sas-line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.sas-mobile-nav ul { display: flex; justify-content: space-around; }
/* Search and Cart are <button> elements (they open overlays rather than
   navigate), so both tags need the same stacked icon-over-label layout. */
.sas-mobile-nav a,
.sas-mobile-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sas-text-dim); position: relative; padding: 4px 8px; background: none; border: none; font-family: inherit; }
.sas-mobile-nav a.is-active { color: var(--sas-accent); }
.sas-mobile-nav li { flex: 1; display: flex; justify-content: center; }
.sas-mobile-nav svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 782px) {
  .sas-mobile-nav { display: block; }
  body { padding-bottom: calc(var(--sas-mobile-nav-h) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   19. Custom cursor (desktop only)
   ========================================================================== */
.sas-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sas-accent); pointer-events: none; z-index: 999; transform: translate(-50%,-50%); transition: width 0.2s var(--sas-ease), height 0.2s var(--sas-ease), background 0.2s var(--sas-ease); mix-blend-mode: difference; }
.sas-cursor.is-hover { width: 46px; height: 46px; background: var(--sas-offwhite); display: flex; align-items: center; justify-content: center; }
.sas-cursor-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sas-primary); opacity: 0; }
.sas-cursor.is-hover .sas-cursor-label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .sas-cursor, .sas-cursor-label { display: none !important; } }

/* ==========================================================================
   20. Page transition overlay
   ========================================================================== */
.sas-page-transition {
  position: fixed; inset: 0; z-index: 999; background: var(--sas-primary);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%); transition: transform 0.45s var(--sas-ease);
  pointer-events: none;
}
.sas-page-transition.is-active { transform: translateY(0); pointer-events: auto; }
.sas-page-transition span { font-family: var(--sas-font-display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sas-text); font-size: 1.4rem; }
@media (prefers-reduced-motion: reduce) { .sas-page-transition { display: none; } }

/* ==========================================================================
   21. Scroll reveal
   ========================================================================== */
.sas-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--sas-ease), transform 0.7s var(--sas-ease); }
.sas-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sas-reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   22. WooCommerce page-level (archive header, single product, cart, checkout)
   ========================================================================== */
#primary.content-area { max-width: var(--sas-max-width); margin: 0 auto; padding: 48px 28px 96px; }
.woocommerce-breadcrumb { font-size: 0.78rem; color: var(--sas-text-dim); margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--sas-text-dim); }
.woocommerce-products-header__title { margin-bottom: 8px; }
.woocommerce-result-count, .woocommerce-ordering select {
  font-size: 0.82rem; color: var(--sas-text-dim); background: transparent;
}
.woocommerce-ordering select { border: 1px solid var(--sas-line-strong); background: var(--sas-secondary); color: var(--sas-text); padding: 8px 10px; border-radius: var(--sas-radius); }

.sas-shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.sas-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.sas-filter-chip { padding: 9px 16px; border: 1px solid var(--sas-line-strong); border-radius: 30px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sas-text-dim); }
.sas-filter-chip.is-active { border-color: var(--sas-accent); color: var(--sas-accent); }

/* Single product */
.sas-product-page { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; }
@media (max-width: 980px) { .sas-product-page { grid-template-columns: 1fr; gap: 32px; } }
.sas-gallery-main { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--sas-radius); background: var(--sas-secondary); position: relative; }
.sas-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.sas-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.sas-gallery-thumbs img { width: 74px; height: 92px; object-fit: cover; border-radius: 2px; opacity: 0.55; border: 1px solid transparent; }
.sas-gallery-thumbs img.is-active { opacity: 1; border-color: var(--sas-accent); }
.sas-product-panel { position: sticky; top: calc(var(--sas-header-h) + 24px); align-self: start; }
.sas-product-panel .price { font-size: 1.6rem; font-weight: 700; margin: 10px 0 6px; }
.sas-product-panel .stock-msg { font-size: 0.82rem; color: var(--sas-accent); margin-bottom: 20px; }
.sas-variation-group { margin-bottom: 22px; }
.sas-variation-group label { display: block; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim); margin-bottom: 10px; }
.sas-swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sas-swatch { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--sas-line-strong); border-radius: var(--sas-radius); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.sas-swatch.is-selected { border-color: var(--sas-accent); color: var(--sas-accent); }
.sas-qty-row { display: flex; align-items: center; border: 1px solid var(--sas-line-strong); border-radius: var(--sas-radius); width: fit-content; }
.sas-qty-row button { width: 40px; height: 44px; }
.sas-qty-row input { width: 44px; height: 44px; background: transparent; border: none; color: var(--sas-text); text-align: center; }
.sas-product-cta-row { display: flex; gap: 12px; margin: 24px 0; }
.sas-product-cta-row .sas-btn { flex: 1; }
.sas-product-tabs { margin-top: 28px; border-top: 1px solid var(--sas-line); }
.sas-product-tab { border-bottom: 1px solid var(--sas-line); }
.sas-product-tab summary { padding: 18px 0; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.sas-product-tab div { padding-bottom: 18px; color: var(--sas-text-dim); font-size: 0.92rem; line-height: 1.7; }
/* Both this bar and .sas-mobile-nav are fixed to the bottom of the screen
   on mobile. Anchoring both at bottom:0 meant the sticky bar rendered
   completely hidden behind the nav (which has a higher z-index) — visible
   in the DOM and computed as display:flex, but 100% covered on screen.
   Positioning this one *above* the nav (offset by the nav's own height +
   safe-area inset) stacks them instead of overlapping. */
.sas-sticky-atc {
  position: fixed; bottom: calc(var(--sas-mobile-nav-h) + env(safe-area-inset-bottom));
  left: 0; right: 0; z-index: 70; background: var(--sas-secondary);
  border-top: 1px solid var(--sas-line); padding: 12px 20px;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
}
/* Was gated at 782px, but the product page itself only collapses to a
   single column at 980px (.sas-product-page). Between 782-980px the layout
   already looks mobile (stacked gallery/panel) but the sticky bar stayed
   hidden — aligning the two breakpoints closes that gap. !important
   guarantees this wins regardless of any other rule ordering. */
@media (max-width: 980px) {
  .sas-sticky-atc.is-visible { display: flex !important; }
  body.single-product { padding-bottom: 0; }
  /* When the bar is showing, it stacks on top of the mobile nav, so the
     page needs extra bottom padding for that combined height too — otherwise
     the very end of the page (e.g. the footer) can still end up covered. */
  body.single-product:has(.sas-sticky-atc.is-visible) {
    padding-bottom: calc(var(--sas-mobile-nav-h) + env(safe-area-inset-bottom) + 66px);
  }
}

.sas-3d-viewer { position: relative; width: 100%; height: 100%; }
.sas-3d-viewer canvas { width: 100% !important; height: 100% !important; }
.sas-3d-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sas-text-dim); background: rgba(17,17,17,0.6); padding: 6px 12px; border-radius: 20px; }

/* Cart / Checkout */
.woocommerce table.shop_table, .woocommerce-cart table.cart, .woocommerce-checkout table.shop_table { border: 1px solid var(--sas-line); color: var(--sas-text); }
.woocommerce table.shop_table th { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid var(--sas-line); }
.woocommerce table.shop_table td { border-bottom: 1px solid var(--sas-line); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-checkout textarea {
  background: var(--sas-secondary); border: 1px solid var(--sas-line-strong); color: var(--sas-text);
  border-radius: var(--sas-radius); padding: 11px 12px;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--sas-secondary) !important; border-top-color: var(--sas-accent) !important; color: var(--sas-text) !important; }
.woocommerce-checkout-review-order-table { background: var(--sas-secondary); }

/* My account */
.woocommerce-MyAccount-navigation ul li a { font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sas-text-dim); }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--sas-accent); }

/* Wishlist page */
.sas-wishlist-empty { color: var(--sas-text-dim); }

/* ==========================================================================
   23. Single product refinements
   (found while testing the rendered product page: core h1 sizing is tuned
   for editorial headlines and is far too large for a product name; and
   WooCommerce's default quantity input / price markup needs theming.)
   ========================================================================== */
.woocommerce div.product .product_title,
.single-product .sas-product-panel h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  margin-bottom: 14px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--sas-font-body);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--sas-text);
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: var(--sas-text-dim); opacity: 0.6; font-weight: 400; margin-right: 8px;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none; color: var(--sas-accent); background: transparent;
}
.woocommerce div.product .stock { color: var(--sas-accent); font-size: 0.85rem; }
.woocommerce div.product .stock.out-of-stock { color: var(--sas-danger); }

.woocommerce div.product form.cart { margin: 22px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce .quantity input.qty {
  width: 72px; height: 48px; text-align: center;
  background: var(--sas-secondary); border: 1px solid var(--sas-line-strong);
  color: var(--sas-text); border-radius: var(--sas-radius); font-weight: 600;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  height: 48px; flex: 1; min-width: 200px;
}
.woocommerce div.product .product_meta {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sas-line);
  font-size: 0.8rem; color: var(--sas-text-dim); display: flex; flex-direction: column; gap: 6px;
}
.woocommerce div.product .product_meta a { color: var(--sas-text-dim); text-decoration: underline; }

.sas-wishlist-inline { margin-top: 16px; }
.sas-wishlist-inline.is-active { border-color: var(--sas-accent); color: var(--sas-accent); }

/* Variation selects */
.woocommerce div.product form.cart .variations { width: 100%; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 8px 0; }
.woocommerce div.product form.cart .variations select {
  background: var(--sas-secondary); border: 1px solid var(--sas-line-strong);
  color: var(--sas-text); padding: 10px 12px; border-radius: var(--sas-radius); min-width: 180px;
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 12px; }

/* Tabs / related */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--sas-line); padding: 0; margin: 0 0 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: none; border-radius: 0; margin: 0 22px 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sas-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 14px 0; display: inline-block; color: var(--sas-text-dim); }
.woocommerce div.product .woocommerce-tabs .panel { color: var(--sas-text-dim); }
.woocommerce .related > h2, .woocommerce .upsells > h2 { margin: 56px 0 28px; }

/* Gallery */
/* WooCommerce's own stylesheet floats div.images/div.summary at 48% width
   for its classic two-column layout. This theme uses CSS Grid instead
   (.sas-product-page), but never neutralized that default — so the gallery
   was shrinking to 48% of its own grid cell instead of filling it, leaving
   a large empty margin around a much-smaller-than-intended product photo. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product div.images { margin-bottom: 0; }

/* WooCommerce's built-in hover-to-magnify zoom (the .zoomImg overlay, shown
   at the image's full natural size — e.g. 1500x1500 — positioned over the
   normal photo) is a desktop-only interaction. It has no hover state to key
   off on a touchscreen, so a touch-scroll or drag gesture can trigger and
   leave it visible, which looks exactly like the image suddenly "zooming
   in" and getting cropped/oversized. Disabling it below the tablet
   breakpoint removes the possibility outright, regardless of what triggers
   it. Desktop hover-zoom is untouched. */
@media (max-width: 782px) {
  .woocommerce div.product div.images .zoomImg,
  .woocommerce div.product div.images .zoomImg-wrap { display: none !important; }
}
.woocommerce div.product div.images img { border-radius: var(--sas-radius); }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img { width: 74px; height: 92px; object-fit: cover; opacity: 0.55; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--sas-line); border-radius: var(--sas-radius); padding: 20px; }
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type=text],
.woocommerce #review_form #respond input[type=email] {
  background: var(--sas-secondary); border: 1px solid var(--sas-line-strong);
  color: var(--sas-text); border-radius: var(--sas-radius); padding: 10px 12px; width: 100%;
}

/* Price <ins> carries a browser-default underline that survived the earlier
   rule; kill it wherever prices render. */
.woocommerce ins, .woocommerce .price ins, .woocommerce div.product ins { text-decoration: none !important; }

/* WooCommerce tab list items are floated by core CSS; with the float reset
   they stack vertically, so lay them out explicitly. */
/* WooCommerce's own stylesheet can load after the theme's, so these layout
   overrides need !important to win rather than relying on source order. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex !important; flex-wrap: wrap; gap: 0 26px; list-style: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { display: inline-block !important; float: none !important; }

/* Tab panel headings ("Description", "Reviews") inherit the editorial h2
   scale, which is far too large inside a product tab. */
.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { font-size: 1.15rem; margin-bottom: 14px; }
.woocommerce #reviews h2 { font-size: 1.15rem; }

/* ==========================================================================
   24. Product page enhancements (v1.1.0)
   ========================================================================== */

/* --- 24a. Tab visibility fix -------------------------------------------
   WooCommerce gives the ACTIVE tab a white background, which on this dark
   theme rendered the "Description" label as lime-on-white and made the
   tab strip look broken. Force the tab strip transparent throughout. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--sas-text-dim) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sas-accent) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--sas-accent) !important; }
/* Panel text needs to be readable on the dark panel, not WooCommerce's default */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li {
  color: var(--sas-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { color: var(--sas-text) !important; }

/* Safety net: if a product description was entered as a "Preformatted" or
   "Code" block in the editor, it renders as <pre>/<code>, which defaults to
   white-space:pre (no wrapping) — the text then runs straight off the edge
   of the panel on mobile instead of wrapping. Force it to wrap like normal
   text, and add the same wrap guard to the whole panel so no single long
   unbroken string (a URL, a SKU) can do the same thing. */
.woocommerce div.product .woocommerce-tabs .panel {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.woocommerce div.product .woocommerce-tabs .panel pre,
.woocommerce div.product .woocommerce-tabs .panel code {
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: var(--sas-font-body);
  background: var(--sas-secondary);
  padding: 14px;
  border-radius: var(--sas-radius);
  overflow-x: auto;
  max-width: 100%;
  display: block;
}

/* --- 24b. Related / upsell product grid -------------------------------
   These loops reuse ul.products, but with only 1-3 items auto-fit stretched
   a single card across the full row. Lock explicit column counts instead. */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 1024px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products,
  .woocommerce .cross-sells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 782px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products,
  .woocommerce .cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
/* Main shop grid: 2 columns on mobile rather than 1, matching the ask */
@media (max-width: 782px) {
  .woocommerce ul.products, .sas-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .sas-product-info .sas-product-title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.85rem; }
  .woocommerce ul.products li.product .price { font-size: 0.85rem; }
  .woocommerce ul.products li.product a.button { font-size: 0.68rem !important; padding: 10px 8px !important; }
}

/* --- 24c. Shop by variant --------------------------------------------- */
.sas-variant-picker { margin: 22px 0; }
.sas-variant-title,
.sas-bulk-title {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sas-text-dim); margin: 0 0 12px;
}
.sas-variant-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sas-variant-thumb {
  width: 84px; border: 2px solid var(--sas-line); border-radius: var(--sas-radius);
  overflow: hidden; display: block; background: var(--sas-secondary);
  transition: border-color 0.2s var(--sas-ease), transform 0.2s var(--sas-ease);
}
.sas-variant-thumb:hover { border-color: var(--sas-text-dim); transform: translateY(-2px); }
.sas-variant-thumb.is-current { border-color: var(--sas-accent); }
.sas-variant-thumb img { width: 100%; height: 84px; object-fit: cover; display: block; }
.sas-variant-label {
  display: block; font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; padding: 5px 3px; color: var(--sas-text-dim);
}
.sas-variant-thumb.is-current .sas-variant-label { color: var(--sas-accent); }

/* --- 24d. Bulk buy tiers ---------------------------------------------- */
.sas-bulk-tiers { margin: 22px 0; }
.sas-bulk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sas-bulk-tier {
  border: 1px solid var(--sas-line-strong); border-radius: var(--sas-radius);
  background: var(--sas-secondary); padding: 12px 10px; text-align: center;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer;
  transition: border-color 0.2s var(--sas-ease), background 0.2s var(--sas-ease);
}
.sas-bulk-tier:hover { border-color: var(--sas-text-dim); }
.sas-bulk-tier.is-selected { border-color: var(--sas-accent); background: rgba(212,255,63,0.07); }
.sas-bulk-qty { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim); }
.sas-bulk-price { font-size: 0.98rem; font-weight: 700; color: var(--sas-text); }
.sas-bulk-price small { font-size: 0.66rem; font-weight: 400; color: var(--sas-text-dim); }
.sas-bulk-save { font-size: 0.68rem; font-weight: 700; color: var(--sas-accent); }

/* --- 24e. Buy Now (with attention shake) ------------------------------- */
.sas-buy-now {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; min-width: 170px; flex: 1;
  font-family: var(--sas-font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: transparent; color: var(--sas-text);
  border: 1px solid var(--sas-text); border-radius: var(--sas-radius);
  cursor: pointer; transition: background 0.25s var(--sas-ease), color 0.25s var(--sas-ease);
}
.sas-buy-now:hover { background: var(--sas-text); color: var(--sas-primary); }

@keyframes sas-shake {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-4px); }
  92% { transform: translateX(4px); }
  94% { transform: translateX(-3px); }
  96% { transform: translateX(3px); }
  98% { transform: translateX(-1px); }
}
.sas-buy-now.sas-shake { animation: sas-shake 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sas-buy-now.sas-shake { animation: none; }
}
form.cart.sas-needs-variation .variations select { border-color: var(--sas-danger); }

/* --- 24f. Wishlist button --------------------------------------------- */
/* Was rendering as a cramped circle with overflowing text; make it a proper
   inline button that matches the rest of the panel. */
.sas-wishlist-inline {
  display: inline-flex !important; align-items: center; gap: 9px;
  width: auto; height: auto; min-height: 44px;
  padding: 12px 20px; border-radius: var(--sas-radius);
  border: 1px solid var(--sas-line-strong); background: transparent;
  color: var(--sas-text-dim); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.2s var(--sas-ease), color 0.2s var(--sas-ease);
}
.sas-wishlist-inline svg { width: 15px; height: 15px; flex-shrink: 0; }
.sas-wishlist-inline:hover { border-color: var(--sas-text); color: var(--sas-text); }
.sas-wishlist-inline.is-active { border-color: var(--sas-accent); color: var(--sas-accent); background: rgba(212,255,63,0.07); }
.sas-wishlist-inline.is-active .sas-wishlist-label-off { display: none; }
.sas-wishlist-inline:not(.is-active) .sas-wishlist-label-on { display: none; }

/* --- 24g. Frequently bought together ----------------------------------- */
.sas-fbt { margin: 56px 0 0; padding-top: 40px; border-top: 1px solid var(--sas-line); }
.sas-fbt > h2 { font-size: 1.3rem; margin-bottom: 24px; }
.sas-fbt-inner { display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; }
.sas-fbt-items { display: flex; flex-direction: column; gap: 10px; }
.sas-fbt-item {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  border: 1px solid var(--sas-line); border-radius: var(--sas-radius);
  padding: 10px 14px; background: var(--sas-secondary);
}
.sas-fbt-item input { width: 17px; height: 17px; accent-color: var(--sas-accent); flex-shrink: 0; cursor: pointer; }
.sas-fbt-thumb { width: 58px; flex-shrink: 0; }
.sas-fbt-thumb img { width: 58px; height: 72px; object-fit: cover; border-radius: 2px; display: block; }
.sas-fbt-meta { display: flex; flex-direction: column; gap: 3px; }
.sas-fbt-name { font-size: 0.9rem; color: var(--sas-text); }
.sas-fbt-name em { color: var(--sas-text-dim); font-style: normal; font-size: 0.78rem; }
.sas-fbt-price { font-size: 0.86rem; font-weight: 700; color: var(--sas-text-dim); }
.sas-fbt-summary {
  border: 1px solid var(--sas-line); border-radius: var(--sas-radius);
  padding: 22px; background: var(--sas-secondary); position: sticky; top: 100px;
}
.sas-fbt-total-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sas-text-dim); margin: 0 0 6px; }
.sas-fbt-total { font-size: 1.5rem; font-weight: 700; color: var(--sas-text); margin: 0 0 16px; }
.sas-fbt-add { width: 100%; }
@media (max-width: 900px) {
  .sas-fbt-inner { grid-template-columns: 1fr; }
  .sas-fbt-summary { position: static; }
}

/* --- 24h. Add-to-cart row layout ---------------------------------------
   Quantity + Add to Cart share one row (Add to Cart narrows to fill the
   remaining space); Buy Now gets its own full-width row below. Flex-wrap
   does this automatically once Add to Cart is allowed to shrink instead of
   being forced to 100% width. */
.woocommerce div.product form.cart .sas-atc-row { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; }
@media (max-width: 600px) {
  .woocommerce div.product form.cart { row-gap: 10px; }
  .woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .sas-buy-now {
    flex: 1 1 100%;
    min-width: 100%;
    width: 100%;
  }
}

/* ==========================================================================
   25. Floating WhatsApp button
   Positioned to stack above the mobile bottom nav (and, on product pages,
   above the sticky Add to Cart bar too) rather than overlap them — the
   exact overlap bug found and fixed earlier for the sticky ATC bar.
   ========================================================================== */
.sas-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 75;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.2s var(--sas-ease);
}
.sas-whatsapp-float:hover { transform: scale(1.06); color: #fff; }

@media (max-width: 782px) {
  .sas-whatsapp-float {
    width: 50px; height: 50px; right: 16px;
    bottom: calc(var(--sas-mobile-nav-h) + env(safe-area-inset-bottom) + 14px);
  }
  body.single-product:has(.sas-sticky-atc.is-visible) .sas-whatsapp-float {
    bottom: calc(var(--sas-mobile-nav-h) + env(safe-area-inset-bottom) + 80px);
  }
}

/* ==========================================================================
   26. Pincode delivery checker
   ========================================================================== */
.sas-pincode-check { margin: 20px 0; }
.sas-pincode-check label {
  display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sas-text-dim); margin-bottom: 10px;
}
.sas-pincode-row { display: flex; gap: 10px; max-width: 320px; }
.sas-pincode-row input {
  flex: 1; min-width: 0; background: var(--sas-secondary); border: 1px solid var(--sas-line-strong);
  color: var(--sas-text); padding: 11px 12px; border-radius: var(--sas-radius);
}
.sas-pincode-result { margin-top: 10px; font-size: 0.86rem; min-height: 1.2em; }
.sas-pincode-result.is-success { color: var(--sas-accent); }
.sas-pincode-result.is-error { color: var(--sas-danger); }

/* ==========================================================================
   27. Contact page
   ========================================================================== */
.sas-contact-intro { color: var(--sas-text-dim); max-width: 65ch; margin: 20px 0 40px; line-height: 1.8; }
.sas-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; margin-bottom: 48px; }
@media (max-width: 900px) { .sas-contact-grid { grid-template-columns: 1fr; gap: 36px; } }

.sas-contact-row { margin-bottom: 28px; }
.sas-contact-row h4 { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sas-sand); margin-bottom: 8px; }
.sas-contact-row a { font-size: 1.05rem; color: var(--sas-text); }
.sas-contact-row a:hover { color: var(--sas-accent); }
.sas-contact-row p { color: var(--sas-text-dim); line-height: 1.7; margin: 0; }
.sas-hours-table { width: 100%; border-collapse: collapse; }
.sas-hours-table td { padding: 6px 0; border-bottom: 1px solid var(--sas-line); font-size: 0.92rem; color: var(--sas-text-dim); }
.sas-hours-table td:first-child { color: var(--sas-text); font-weight: 600; width: 40%; }

.sas-contact-form { display: flex; flex-direction: column; gap: 6px; }
.sas-contact-form label { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim); margin-top: 12px; }
.sas-contact-form input, .sas-contact-form textarea {
  background: var(--sas-secondary); border: 1px solid var(--sas-line-strong); color: var(--sas-text);
  padding: 12px 14px; border-radius: var(--sas-radius); font-family: inherit; font-size: 0.95rem;
}
.sas-contact-form input.has-error, .sas-contact-form textarea.has-error { border-color: var(--sas-danger); }
.sas-contact-form button { margin-top: 20px; align-self: flex-start; }
.sas-form-error { color: var(--sas-danger); font-size: 0.85rem; margin: 10px 0 0; }
.sas-contact-thankyou {
  border: 1px solid var(--sas-accent); border-radius: var(--sas-radius); padding: 32px;
  background: rgba(212,255,63,0.06);
}
.sas-contact-thankyou h3 { color: var(--sas-accent); margin-bottom: 10px; }
.sas-contact-thankyou p { color: var(--sas-text-dim); margin: 0; }
.sas-contact-map { border-radius: var(--sas-radius); overflow: hidden; border: 1px solid var(--sas-line); filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.sas-contact-map:hover { filter: none; }

/* ==========================================================================
   28. About page
   ========================================================================== */
.sas-about-content { color: var(--sas-text-dim); max-width: 70ch; line-height: 1.85; margin-top: 20px; font-size: 1.02rem; }
.sas-about-content p { margin-bottom: 1.2em; }
.sas-about-tagline {
  background: var(--sas-secondary); border-top: 1px solid var(--sas-line); border-bottom: 1px solid var(--sas-line);
  padding: 64px 0; text-align: center;
}
.sas-about-tagline h2 { color: var(--sas-accent); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.sas-founder-block { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center; }
@media (max-width: 700px) { .sas-founder-block { grid-template-columns: 1fr; text-align: center; } }
.sas-founder-photo { border-radius: var(--sas-radius); overflow: hidden; aspect-ratio: 4/5; background: var(--sas-secondary); }
.sas-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.sas-founder-copy h3 { margin: 6px 0 4px; font-size: 1.6rem; }
.sas-founder-title { color: var(--sas-sand); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; }
.sas-founder-copy p:not(.sas-founder-title):not(.sas-eyebrow) { color: var(--sas-text-dim); max-width: 55ch; line-height: 1.8; }

/* ==========================================================================
   29. Content prose (any the_content() output: pages, posts, policy pages)
   The global reset strips list-style and link underlines everywhere by
   design (nav, product grids, etc.) — but that also strips them from
   ordinary page content, e.g. a return policy page's bullet lists render
   as plain unstyled lines with no bullet and no indent. Scoping proper
   list/heading/link styling to actual content areas fixes this without
   undoing the reset anywhere else.
   ========================================================================== */
.sas-prose ul, .sas-prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.sas-prose ul { list-style: disc; }
.sas-prose ol { list-style: decimal; }
.sas-prose li { list-style: revert; margin-bottom: 0.5em; }
.sas-prose h2 { font-size: 1.5rem; margin-top: 1.4em; }
.sas-prose h3 { font-size: 1.2rem; margin-top: 1.2em; }
.sas-prose a { color: var(--sas-accent); text-decoration: underline; }
.sas-prose strong { color: var(--sas-text); }
.sas-prose blockquote { border-left: 3px solid var(--sas-accent); padding-left: 20px; color: var(--sas-text-dim); font-style: italic; margin: 1.5em 0; }

/* ==========================================================================
   30. Partial payment notice
   ========================================================================== */
.sas-partial-payment-notice {
  background: rgba(212,255,63,0.08); border: 1px solid var(--sas-accent);
  border-radius: var(--sas-radius); padding: 14px 18px; margin-bottom: 24px;
  font-size: 0.92rem; color: var(--sas-text);
}
.sas-partial-payment-notice strong { color: var(--sas-accent); }

/* ==========================================================================
   31. Footer social icons — real brand colors instead of the neutral
   currentColor default (background circle stays the theme's dark style,
   only the glyph itself picks up its own brand color).
   ========================================================================== */
.sas-social-links a.sas-social-instagram { color: #E1306C; }
.sas-social-links a.sas-social-facebook  { color: #1877F2; }
.sas-social-links a.sas-social-youtube   { color: #FF0000; }
.sas-social-links a.sas-social-twitter   { color: #1DA1F2; }
.sas-social-links a.sas-social-telegram  { color: #26A5E4; }
.sas-social-links a.sas-social-instagram:hover,
.sas-social-links a.sas-social-facebook:hover,
.sas-social-links a.sas-social-youtube:hover,
.sas-social-links a.sas-social-twitter:hover,
.sas-social-links a.sas-social-telegram:hover { opacity: 0.85; }

/* ==========================================================================
   32. Track Order page
   ========================================================================== */
.sas-track-form { max-width: 620px; margin-bottom: 12px; }
.sas-track-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
@media (max-width: 600px) { .sas-track-form-row { grid-template-columns: 1fr; } }
.sas-track-form label { display: block; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sas-text-dim); margin-bottom: 8px; }
.sas-track-form input {
  width: 100%; background: var(--sas-secondary); border: 1px solid var(--sas-line-strong);
  color: var(--sas-text); padding: 12px 14px; border-radius: var(--sas-radius); font-family: inherit;
}
.sas-track-notfound {
  margin-top: 28px; padding: 18px 20px; border: 1px solid var(--sas-danger); border-radius: var(--sas-radius);
  color: var(--sas-text); background: rgba(193,68,14,0.08); max-width: 620px;
}
.sas-track-result { margin-top: 40px; max-width: 680px; border: 1px solid var(--sas-line); border-radius: var(--sas-radius); padding: 28px; background: var(--sas-secondary); }
.sas-track-result-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.sas-track-order-num { font-size: 1.2rem; font-weight: 700; color: var(--sas-text); margin: 0 0 4px; }
.sas-track-order-date { color: var(--sas-text-dim); font-size: 0.86rem; margin: 0; }
.sas-track-status-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--sas-accent); color: var(--sas-accent); white-space: nowrap; }
.sas-track-status--cancelled, .sas-track-status--refunded, .sas-track-status--failed { border-color: var(--sas-danger); color: var(--sas-danger); }

.sas-track-stages { display: flex; justify-content: space-between; margin: 24px 0 28px; position: relative; }
.sas-track-stages::before { content: ''; position: absolute; top: 6px; left: 6px; right: 6px; height: 1px; background: var(--sas-line-strong); z-index: 0; }
.sas-track-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; flex: 1; }
.sas-track-stage-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--sas-primary); border: 2px solid var(--sas-line-strong); }
.sas-track-stage.is-done .sas-track-stage-dot { background: var(--sas-accent); border-color: var(--sas-accent); }
.sas-track-stage-label { font-size: 0.68rem; text-align: center; color: var(--sas-text-dim); letter-spacing: 0.02em; }
.sas-track-stage.is-done .sas-track-stage-label { color: var(--sas-text); }

.sas-track-shipment { border-top: 1px solid var(--sas-line); padding-top: 18px; margin-top: 4px; margin-bottom: 20px; }
.sas-track-shipment p { color: var(--sas-text-dim); margin: 4px 0; }
.sas-track-shipment strong { color: var(--sas-text); }

.sas-track-items { border-top: 1px solid var(--sas-line); padding-top: 18px; }
.sas-track-item { display: flex; justify-content: space-between; padding: 6px 0; color: var(--sas-text-dim); font-size: 0.92rem; }
.sas-track-item--total { border-top: 1px solid var(--sas-line); margin-top: 8px; padding-top: 12px; font-weight: 700; color: var(--sas-text); }