/* ===== Nestware Theme — main.css =====
   --background / --foreground / --primary / --accent are re-declared inline in
   wp_head from the Customizer palette; the values here are only the fallback
   used before that block lands. The neutrals below are the real source. */
:root{
  --background:#f8fafc;
  --foreground:#182232;
  --card:#ffffff;
  --muted:#f1f5f9;
  --muted-foreground:#64748b;
  --border:#e2e8f0;
  --primary:#1668b8;
  --primary-hover:#104f8c;
  --primary-foreground:#ffffff;
  --destructive:#dc2626;
  --accent:#6db33f;
  --accent-hover:#569622;
  --accent-foreground:#ffffff;
  /* Single source of truth for page width. Header, hero and every home
     section read this so their left/right edges line up exactly. */
  --page-max:1280px;
  --page-pad:16px;
  /* Vertical rhythm between top-level sections. Sections carry top spacing
     only, so adjacent gaps never stack into an uneven double gap. */
  --section-gap:clamp(48px, 5vw, 84px);
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 6px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 28px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Taps register the moment the finger lifts. Without this a browser holds
   every tap briefly in case it turns into a double-tap zoom, which reads as
   the whole site being slightly slow to respond. */
a,button,summary,label,select,[role="button"],input[type="submit"]{touch-action:manipulation}
body{
  margin:0;
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--background);
  color:var(--foreground);
  line-height:1.55;
  padding-bottom:64px; /* room for mobile bottom nav */
}
@media (min-width:768px){ body{padding-bottom:0} }

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* Single family throughout — Roboto. */
h1,h2,h3,h4,h5,h6,.site-brand-text{font-family:inherit;letter-spacing:-.005em}

/* Prices line up column-to-column with tabular figures. */
.hx-bs-price,.hx-deal-price,.hx-dual-price,.price,.price-old,
.woocommerce-Price-amount{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

.container{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}

/* Header styles moved to assets/css/header.css */

/* ===== Hero ===== */
.hero{padding-top:16px}
.hero a{display:block;overflow:hidden;border-radius:12px;box-shadow:var(--shadow-sm);transition:box-shadow .4s,transform .4s}
.hero a:hover{box-shadow:var(--shadow-lg)}
.hero img{width:100%;height:auto;transition:transform .6s ease}
.hero a:hover img{transform:scale(1.02)}

/* ===== Hero ===== */
.hero{padding-top:16px}
.hero a{display:block;overflow:hidden;border-radius:12px;box-shadow:var(--shadow-sm);transition:box-shadow .4s,transform .4s}
.hero a:hover{box-shadow:var(--shadow-lg)}
.hero img{width:100%;height:auto;transition:transform .6s ease}
.hero a:hover img{transform:scale(1.02)}

/* ===== Section title ===== */
.section{padding-top:var(--section-gap);padding-bottom:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.section-head h2{margin:0;font-size:22px;font-weight:600}
.section-head a{font-size:14px;color:var(--primary);font-weight:500}
.section-head a:hover{text-decoration:underline}

/* Featured section: force 2/3/5 columns */
.home-featured .products.product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (min-width:768px){ .home-featured .products.product-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (min-width:1024px){ .home-featured .products.product-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important} }
/* Cap to exactly 2 rows — mutually-exclusive ranges so only one rule is ever active (2/3/5 cols → 4/6/10) */
@media (max-width:767px){ .home-featured .products.product-grid > .product-card:nth-child(n+5){display:none} }
@media (min-width:768px) and (max-width:1023px){ .home-featured .products.product-grid > .product-card:nth-child(n+7){display:none} }
@media (min-width:1024px){ .home-featured .products.product-grid > .product-card:nth-child(n+11){display:none} }

/* All Products section: force 2/3/5 columns (no row cap) to match featured */
.home-allproducts .products.product-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (min-width:768px){ .home-allproducts .products.product-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
@media (min-width:1024px){ .home-allproducts .products.product-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important} }
/* Hide the result-count text and the sort/ordering filter in All Products */
.home-allproducts .woocommerce-result-count,
.home-allproducts .woocommerce-ordering{display:none !important}

/* ===== Home promo banners ===== */
.promo-banners{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){ .promo-banners{grid-template-columns:1fr;gap:12px} }
.promo-banner{display:block;border-radius:12px;overflow:hidden;line-height:0}
.promo-banner img{width:100%;height:auto;display:block;transition:transform .4s ease}
.promo-banner:hover img{transform:scale(1.03)}

/* ===== Categories grid ===== */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:640px){ .cat-grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:768px){ .cat-grid{grid-template-columns:repeat(6,1fr)} }
.cat-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;transition:transform .3s,border-color .3s,box-shadow .3s}
.cat-card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 8px 20px rgba(192,57,43,.18)}
.cat-card .thumb{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--muted)}
.cat-card .thumb img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform .5s}
.cat-card:hover .thumb img{transform:scale(1.1)}
/* Stand-in tile for departments with no thumbnail set — the initial on a
   hue derived from the slug, so each category reads as its own. */
.cat-card .thumb .cat-initial{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;aspect-ratio:1/1;
  background:hsl(var(--tint,200) 62% 94%);color:hsl(var(--tint,200) 55% 34%);
  font-size:clamp(20px,42%,40px);font-weight:700;line-height:1;letter-spacing:-.02em;
  border-radius:8px;transition:transform .5s
}
.cat-card:hover .thumb .cat-initial{transform:scale(1.06)}
.cat-card span{font-size:12px;font-weight:600;text-align:center;line-height:1.2;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cat-card:hover span{color:var(--primary)}
/* Category section: show only 1 row (3/4/6 cols); the rest open in the SEE MORE popup */
@media (max-width:639px){ .so-cat-section .cat-grid > .cat-card:nth-child(n+7){display:none} } /* mobile: 3 cols × 2 rows = 6 */
@media (min-width:640px) and (max-width:767px){ .so-cat-section .cat-grid > .cat-card:nth-child(n+9){display:none} } /* 4 cols × 2 rows = 8 */
@media (min-width:768px){ .so-cat-section .cat-grid > .cat-card:nth-child(n+7){display:none} } /* desktop: 6 cols × 1 row = 6 */
.cat-see-more{background:none;border:0;padding:0;cursor:pointer;font-size:14px;font-weight:500;color:var(--primary);font-family:inherit;white-space:nowrap}
.cat-see-more:hover{text-decoration:underline}

/* ===== Product grid ===== */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:768px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .product-grid{grid-template-columns:repeat(4,1fr)} }

.product-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.product-card .thumb{position:relative;aspect-ratio:1/1;background:#fff;padding:12px;overflow:hidden}
.product-card .thumb img{width:100%;height:100%;object-fit:contain;transition:transform .5s;border-radius:8px}
.product-card:hover .thumb img{transform:scale(1.05)}
/* Text colour is derived from the chosen accent in PHP, so a light accent
   (amber, yellow) still reads instead of turning into white-on-white. */
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--accent-foreground,#fff);font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;box-shadow:var(--shadow-sm);z-index:2}
.badge.out{left:auto;right:10px;background:rgba(27,36,34,.85);color:#fff}
.product-info{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-info h3{margin:0;font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em}
.price-row{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.price{font-size:16px;font-weight:700;color:var(--primary)}
.price-old{font-size:12px;color:var(--muted-foreground);text-decoration:line-through}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;border:0;transition:background .2s,transform .1s}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{transform:scale(.98)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--muted)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}


/* ===== Product action buttons =====
   Shared by the home blocks, the shop and category archives, and the
   single product page — so they belong here, not in the home-only
   stylesheet that archive pages never load. */

/* ---------- Hover actions on a product row ---------- */
.hx-row-actions{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:3;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease
}
.hx-deal-item:hover .hx-row-actions,
.hx-deal-item:focus-within .hx-row-actions{opacity:1;pointer-events:auto}
/* Touch devices have no hover, so keep the buttons permanently visible. */
@media (hover:none){ .hx-row-actions{opacity:1;pointer-events:auto} }

.hx-ico-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;
  background:var(--card);color:var(--foreground);cursor:pointer;
  box-shadow:0 3px 10px rgba(27,36,34,.14);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease
}
.hx-ico-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.08)}
/* Order Now is the primary action — filled by default so the two buttons are
   distinguishable at a glance, not just by their glyph. */
.hx-ico-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px -3px color-mix(in srgb,var(--primary) 75%,transparent)}
.hx-ico-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.hx-ico-primary[disabled]{background:var(--muted);border-color:var(--border);color:var(--muted-foreground);box-shadow:none}
.hx-ico-primary[disabled]:hover{background:var(--muted);border-color:var(--border);color:var(--muted-foreground)}
.hx-ico-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hx-ico-btn[disabled]{opacity:.45;cursor:not-allowed}
.hx-ico-btn[disabled]:hover{background:var(--card);border-color:var(--border);color:var(--foreground);transform:none}
/* WooCommerce injects these classes during AJAX add-to-cart. */
.hx-ico-btn.loading{opacity:.6;pointer-events:none}
.hx-ico-btn.added{background:#16a34a;border-color:#16a34a;color:#fff}
.hx-ico-btn + .added_to_cart{display:none}

/* Tooltip, same pattern as the header actions */
.hx-ico-btn::after{
  content:attr(data-tip);
  position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%) translateX(4px);
  padding:5px 10px;border-radius:6px;
  background:#18181b;color:#fff;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:20;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:opacity .18s ease,transform .18s ease
}
.hx-ico-btn::before{
  content:'';
  position:absolute;right:calc(100% + 3px);top:50%;transform:translateY(-50%) translateX(4px);
  border:5px solid transparent;border-left-color:#18181b;
  opacity:0;pointer-events:none;z-index:20;
  transition:opacity .18s ease,transform .18s ease
}
.hx-ico-btn:hover::after,.hx-ico-btn:focus-visible::after,
.hx-ico-btn:hover::before,.hx-ico-btn:focus-visible::before{opacity:1;transform:translateY(-50%) translateX(0)}
@media (hover:none){ .hx-ico-btn::after,.hx-ico-btn::before{display:none} }

/* Labelled buttons, always visible — the feature slot has the room for them. */
.hx-full-actions{display:flex;align-items:center;gap:6px;margin-top:12px;width:100%}
.hx-full-actions.is-compact{gap:6px;margin-top:10px}
.hx-full-actions .hx-full-order{flex:1;min-width:0;height:38px;font-size:12.5px;padding:0 8px;border-radius:10px}

/* Compact Plus Cart Button with sleek Tooltip */
.hx-full-cart{
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  gap:0;
  border-radius:10px;
  background:#f8fafc;
  color:#1e293b;
  border:1.5px solid #e2e8f0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.hx-full-cart:hover{
  background:var(--primary, #1668b8);
  border-color:var(--primary, #1668b8);
  color:#ffffff !important;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(22,104,184,.25);
}
.hx-full-cart span{display:none}

/* Tooltip on hover */
.hx-full-cart::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 9px);
  right:50%;
  transform:translateX(50%) translateY(4px);
  padding:6px 11px;
  border-radius:8px;
  background:#0f172a;
  color:#ffffff;
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  z-index:30;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  transition:opacity .2s ease, transform .2s ease;
}
.hx-full-cart::before{
  content:'';
  position:absolute;
  bottom:calc(100% + 3px);
  right:50%;
  transform:translateX(50%) translateY(4px);
  border:6px solid transparent;
  border-top-color:#0f172a;
  opacity:0;
  pointer-events:none;
  z-index:30;
  transition:opacity .2s ease, transform .2s ease;
}
.hx-full-cart:hover::after,
.hx-full-cart:focus-visible::after,
.hx-full-cart:hover::before,
.hx-full-cart:focus-visible::before{
  opacity:1;
  transform:translateX(50%) translateY(0);
}
@media (hover:none){
  .hx-full-cart::after,
  .hx-full-cart::before{display:none}
}

.hx-full-btn{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:38px;padding:0 8px;border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;transition:all .2s ease;
}
.hx-full-btn svg{flex-shrink:0;width:14px;height:14px}
.hx-full-btn span{white-space:nowrap;overflow:visible;text-overflow:clip}
.hx-full-order{background:var(--primary, #1668b8);color:#fff;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--primary, #1668b8) 85%,transparent)}
.hx-full-order:hover:not([disabled]){background:var(--primary-hover, #125599);transform:translateY(-2px);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--primary, #1668b8) 90%,transparent)}
.hx-full-order[disabled]{background:var(--muted);color:var(--muted-foreground);box-shadow:none;cursor:not-allowed}
.hx-full-btn.loading{opacity:.6;pointer-events:none}
.hx-full-cart.added{background:#16a34a;border-color:#16a34a;color:#fff}
.hx-full-btn + .added_to_cart{display:none}

@media (max-width: 640px) {
  .hx-full-actions{gap:4px;margin-top:8px}
  .hx-full-actions .hx-full-order,
  .product-card .hx-full-actions .so-order-btn,
  .products .product .hx-full-actions .so-order-btn{
    height:36px;min-height:36px;font-size:12px;padding:0 6px !important;border-radius:8px;gap:4px
  }
  .hx-full-btn{height:36px;min-height:36px;font-size:12px;padding:0 6px !important;gap:4px;border-radius:8px}
  .hx-full-btn svg{width:13px;height:13px}
  .hx-full-cart{flex:0 0 34px;width:34px;height:34px;border-radius:8px}
  .product-card .product-info{padding:10px 8px}
}

@media (max-width: 380px) {
  .hx-full-actions{gap:3px}
  .hx-full-actions .hx-full-order,
  .product-card .hx-full-actions .so-order-btn,
  .products .product .hx-full-actions .so-order-btn{
    height:34px;min-height:34px;font-size:11.5px;padding:0 4px !important;border-radius:7px;gap:3px
  }
  .hx-full-btn{height:34px;min-height:34px;font-size:11.5px;padding:0 4px !important;gap:3px;border-radius:7px}
  .hx-full-btn svg{width:12px;height:12px}
  .hx-full-cart{flex:0 0 30px;width:30px;height:30px;border-radius:7px}
  .product-card .product-info{padding:8px 6px}
}

/* ===== WooCommerce loop grid (covers [products] shortcode + archive) ===== */
ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (min-width:768px){ ul.products{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ ul.products{grid-template-columns:repeat(4,1fr)} }
ul.products li.product{margin:0;padding:0;list-style:none;width:auto !important;float:none !important;clear:none !important}
ul.products li.product::before,ul.products li.product::after{display:none}

/* ===== Single product ===== */
/* ===== Single product — boxed layout (home-page parity) ===== */
.single-product-page > .container{padding:24px 16px 56px}
.single-product-layout{
  display:grid;grid-template-columns:1fr;gap:20px;
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-md);
  padding:16px;margin:8px 0 0;
}
@media (min-width:900px){
  .single-product-layout{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;padding:24px}
}
.single-product-layout > *{min-width:0}

/* Gallery */
.product-gallery{position:relative;align-self:start;background:var(--muted);border:1px solid var(--border);border-radius:14px;padding:14px}
.product-gallery .sp-badge{position:absolute;top:22px;left:22px;z-index:4;background:var(--primary);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:8px;box-shadow:var(--shadow-sm)}
.product-gallery .sp-badge-out{left:auto;right:22px;background:rgba(35,23,18,.86)}
.product-gallery .woocommerce-product-gallery{margin:0!important;position:relative;width:100%!important;float:none!important}
.product-gallery .woocommerce-product-gallery__wrapper{margin:0!important}
.product-gallery .flex-viewport{border-radius:12px;overflow:hidden;background:#fff;width:100%}
.product-gallery .woocommerce-product-gallery__image a{display:block}
.product-gallery .woocommerce-product-gallery__image img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:12px;display:block}
.product-gallery .woocommerce-product-gallery__trigger{top:16px;right:16px;z-index:4}
.product-gallery .flex-control-thumbs{display:flex!important;flex-wrap:wrap;gap:8px;margin:18px 0 0!important;padding:2px;list-style:none;width:100%!important}
.product-gallery .flex-control-thumbs li{width:auto!important;height:auto!important;margin:0!important;padding:0!important;list-style:none;float:none!important;flex:0 0 auto}
.product-gallery .flex-control-thumbs li img{width:58px!important;height:58px!important;object-fit:cover;border-radius:9px;border:2px solid transparent;opacity:.55;cursor:pointer;transition:.2s;background:#fff}
.product-gallery .flex-control-thumbs li img:hover{opacity:1}
.product-gallery .flex-control-thumbs li img.flex-active{opacity:1;border-color:var(--primary)}

/* Summary */
.product-summary{align-self:start}
.product-summary .product_title{margin:0 0 12px;font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
@media (min-width:900px){ .product-summary .product_title{font-size:30px} }
.product-summary p.price{margin:0 0 12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;line-height:1}
.product-summary p.price ins{text-decoration:none;color:var(--primary);font-weight:700}
.product-summary p.price ins .woocommerce-Price-amount{font-size:30px}
.product-summary p.price del{color:var(--muted-foreground);opacity:.85}
.product-summary p.price del .woocommerce-Price-amount{font-size:18px}
.product-summary p.price > .woocommerce-Price-amount{font-size:30px;font-weight:700;color:var(--primary)}

/* Savings / free-delivery pills */
.sp-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.sp-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}
.sp-pill-save{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.sp-pill-save .woocommerce-Price-amount{color:inherit;font-weight:700}
.sp-pill-free{background:#dcfce7;color:#15803d}

/* Available sizes */
.sp-sizes{margin:0 0 20px}
.sp-sizes-label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--foreground);margin:0 0 10px;text-transform:capitalize}
.sp-size-pills{display:flex;flex-wrap:wrap;gap:10px}
.sp-size-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:40px;padding:0 16px;border:1.5px solid var(--border,#e2e8f0);border-radius:10px;background:var(--card,#fff);font-size:13.5px;font-weight:600;color:var(--foreground,#1e293b);cursor:pointer;font-family:inherit;transition:all .2s cubic-bezier(0.4,0,0.2,1);-webkit-tap-highlight-color:transparent;user-select:none;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.sp-size-pill:hover:not(:disabled):not(.is-oos):not(.selected){border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,#fff);transform:translateY(-1.5px);box-shadow:0 4px 12px -2px color-mix(in srgb,var(--primary) 25%,transparent)}
.sp-size-pill.selected,
.sp-size-pill.selected:hover,
.sp-size-pill.selected:focus{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;font-weight:700;transform:translateY(-1px);box-shadow:0 4px 14px -2px color-mix(in srgb,var(--primary) 50%,transparent)}

/* Out of stock decorated state with clean diagonal slash line */
.sp-size-pill.is-oos,
.sp-size-pill:disabled,
.so-size.is-oos,
.so-size:disabled,
.sd-size-chip.is-oos,
.sd-size-chip:disabled {
  position: relative !important;
  overflow: hidden !important;
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: var(--muted, #f8fafc) !important;
  color: var(--muted-foreground, #94a3b8) !important;
  border: 1.5px dashed var(--border, #cbd5e1) !important;
  box-shadow: none !important;
  transform: none !important;
  user-select: none;
}

.sp-size-pill.is-oos::after,
.sp-size-pill:disabled::after,
.so-size.is-oos::after,
.so-size:disabled::after,
.sd-size-chip.is-oos::after,
.sd-size-chip:disabled::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: -20% !important;
  width: 140% !important;
  height: 2px !important;
  background: #ef4444 !important;
  transform: translateY(-50%) rotate(-25deg) !important;
  transform-origin: center !important;
  opacity: .9 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Missing-selection hint */
.sp-sizes-hint .sp-sizes-label{color:var(--destructive)}
.sp-sizes-hint .sp-size-pills{animation:sp-shake .4s ease}
.sp-sizes-hint .sp-size-pill{border-color:var(--destructive)}
@keyframes sp-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* Order button */
.product-summary .so-order-btn{margin-top:2px!important;height:52px;font-size:16px;border-radius:12px;box-shadow:0 10px 22px -8px color-mix(in srgb,var(--primary) 60%,transparent);transition:transform .15s,box-shadow .2s,background .2s}
.product-summary .so-order-btn:hover:not(:disabled){transform:translateY(-2px)}

/* Single page action row */
.sp-actions{display:flex;gap:10px;margin-top:18px}
.sp-actions .btn{flex:1 1 0;min-width:0;height:52px;border-radius:12px;font-size:15px;white-space:nowrap}
.sp-cart{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card);color:var(--foreground);border:1.5px solid var(--border);
  font-weight:700;text-decoration:none;transition:border-color .2s,color .2s,transform .18s
}
.sp-cart:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.sp-cart.loading{opacity:.6;pointer-events:none}
.sp-cart.added{background:#16a34a;border-color:#16a34a;color:#fff}
.sp-cart + .added_to_cart{display:none}
@media (max-width:520px){ .sp-actions{flex-direction:column} }

/* Product meta */
.product-summary .product_meta{margin:18px 0 0;padding-top:16px;border-top:1px dashed var(--border);font-size:13px;color:var(--muted-foreground)}
.product-summary .product_meta > span{display:block;margin:0 0 6px}
.product-summary .product_meta > span:last-child{margin-bottom:0}
.product-summary .product_meta a{color:var(--foreground);font-weight:600}
.product-summary .product_meta a:hover{color:var(--primary)}

/* Trust badges */
.sp-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.sp-trust-item{display:flex;align-items:center;gap:10px;background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:11px 12px;font-size:13px;font-weight:600;line-height:1.25}
.sp-trust-item svg{flex-shrink:0;color:var(--primary)}

/* Full product description — full-width row inside the boxed card */
.sp-description{grid-column:1/-1;margin-top:6px;padding-top:22px;border-top:1px solid var(--border)}
.sp-description > h3{margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.sp-description-body{font-size:14px;line-height:1.75;color:var(--muted-foreground)}
.sp-description-body > *:last-child{margin-bottom:0}
.sp-description-body p{margin:0 0 12px}
.sp-description-body h1,.sp-description-body h2,.sp-description-body h3,.sp-description-body h4{color:var(--foreground);margin:16px 0 8px;font-weight:700;line-height:1.3}
.sp-description-body a{color:var(--primary);text-decoration:underline}
.sp-description-body img{border-radius:10px;margin:8px 0}
.sp-description-body ul,.sp-description-body ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}
@media (min-width:600px){ .sp-description-body ul,.sp-description-body ol{grid-template-columns:1fr 1fr;gap:10px 24px} }
.sp-description-body li{position:relative;padding-left:26px;font-size:14px;color:var(--foreground);line-height:1.5}
.sp-description-body li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border-radius:50%;font-size:11px;font-weight:700}

/* Size chart + care — full-width row inside the boxed card */
/* Two columns previously, because this grid held a spec card beside a care
   card. Both are gone; the rate table and the spec table stack instead, and
   each gets the full width its numbers want. */
.sp-details{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:22px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);align-items:start}
.sp-detail-card{min-width:0}
.sp-detail-card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em}

/* Related products */
.single-product-page .related.products{margin-top:40px}
.single-product-page .related.products > h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0 0 18px;text-transform:uppercase}
@media (min-width:768px){ .single-product-page .related.products > h2{font-size:26px} }
.single-product-page .related.products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){ .single-product-page .related.products .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .single-product-page .related.products .product-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* ===== Cart & checkout ===== */
.wc-page{padding:32px 0;min-height:60vh}
.wc-page h1{font-size:24px;margin:0 0 20px}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:12px;border-bottom:1px solid var(--border);font-size:14px;text-align:left}
.woocommerce-info,.woocommerce-message,.woocommerce-error{background:var(--accent);border-left:4px solid var(--primary);padding:12px 16px;border-radius:8px;margin:0 0 16px;font-size:14px}
.woocommerce-error{background:#fde2e2;border-color:var(--destructive)}
.woocommerce form .form-row input,.woocommerce form .form-row select,.woocommerce form .form-row textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:14px;font-family:inherit
}
.woocommerce form .form-row label{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.woocommerce #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 16px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.woocommerce #payment ul.payment_methods li{padding:12px;border-bottom:1px solid var(--border)}
.woocommerce #payment ul.payment_methods li:last-child{border-bottom:0}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  background:var(--primary);color:var(--primary-foreground);border:0;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s
}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--primary-hover)}

/* ===== Footer (legacy block removed — see "Footer redesign" below) ===== */

/* ===== Mobile bottom nav (see "Bottom nav" near the end of this file) ===== */

/* Utility */
.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}
.loader{display:flex;justify-content:center;padding:48px 0;color:var(--muted-foreground);font-size:14px}

/* ===== Footer — modern deep-navy ground with perks bar & rich typography ===== */
footer.site-footer{
  margin-top:40px;
  background:linear-gradient(180deg, #091b30 0%, #040c17 100%);
  color:rgba(255,255,255,.78);
  border-top:3px solid var(--primary, #1668b8);
  position:relative;
}

/* --- Footer Top Trust Perks --- */
.ft-perks{
  background:linear-gradient(135deg, #0d233e 0%, #081729 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:26px 0;
}
.ft-perks-inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 var(--page-pad);
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:600px){
  .ft-perks-inner{grid-template-columns:repeat(2, 1fr);gap:20px 24px;}
}
@media (min-width:1024px){
  .ft-perks-inner{grid-template-columns:repeat(4, 1fr);gap:24px;}
}
.ft-perk-item{
  display:flex;
  align-items:center;
  gap:14px;
}
.ft-perk-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
  color:#38bdf8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:all .25s ease;
}
.ft-perk-item:hover .ft-perk-icon{
  background:var(--primary, #1668b8);
  border-color:var(--primary, #1668b8);
  color:#fff;
  transform:translateY(-2px) scale(1.05);
}
.ft-perk-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.ft-perk-info strong{
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  line-height:1.25;
}
.ft-perk-info span{
  font-size:12px;
  color:rgba(255,255,255,.68);
  line-height:1.35;
}

/* --- Main Footer Grid --- */
footer.site-footer .ft-main{
  max-width:var(--page-max);
  margin:0 auto;
  padding:44px var(--page-pad) 36px;
}
footer.site-footer .ft-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:768px){
  footer.site-footer .ft-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px;}
  footer.site-footer .ft-brand{grid-column:1/-1;}
}
@media (min-width:1024px){
  footer.site-footer .ft-grid{grid-template-columns:1.6fr 1fr 1.1fr 1fr 1.5fr;gap:36px 28px;}
  footer.site-footer .ft-brand{grid-column:auto;}
}

footer.site-footer h4,
footer.site-footer .ft-heading,
footer.site-footer .ft-col>summary{
  margin:0 0 16px;
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.02em;
  color:#ffffff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
footer.site-footer p,footer.site-footer span,footer.site-footer li{color:rgba(255,255,255,.76)}
footer.site-footer a{
  color:rgba(255,255,255,.76);
  text-decoration:none;
  transition:color .2s ease,transform .2s ease;
}

/* --- Brand Column --- */
footer.site-footer .footer-brand-text{
  display:block;
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
  color:#ffffff;
  letter-spacing:-.01em;
}
footer.site-footer .footer-tag{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.68);
  max-width:36ch;
}
footer.site-footer .site-logo img,
footer.site-footer .custom-logo,
footer.site-footer .custom-logo-link img{
  max-height:50px;
  width:auto;
  margin-bottom:14px;
  display:block;
}

.ft-hotline-box{
  margin:0 0 18px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  max-width:100%;
}
.ft-hotline-label{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.6);
}
.ft-hotline-num{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:16px;
  font-weight:800;
  color:#38bdf8 !important;
  transition:all .2s ease;
}
.ft-hotline-num:hover{
  color:#fff !important;
  transform:translateX(3px);
}

footer.site-footer .ft-social{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
footer.site-footer .social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:#fff;
  transition:all .22s ease;
}
footer.site-footer .social-btn:hover{
  background:var(--primary, #1668b8);
  border-color:var(--primary, #1668b8);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(22,104,184,.4);
}
footer.site-footer .ft-social-facebook:hover{background:#1877f2;border-color:#1877f2;}
footer.site-footer .ft-social-whatsapp:hover{background:#25d366;border-color:#25d366;}
footer.site-footer .ft-social-youtube:hover{background:#ff0000;border-color:#ff0000;}
footer.site-footer .ft-social-instagram:hover{background:#e1306c;border-color:#e1306c;}

/* --- Link Columns --- */
footer.site-footer .ft-col{border:0;align-self:start;}
footer.site-footer .ft-col>summary{
  cursor:pointer;
  list-style:none;
  padding:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:8px;
}
@media (min-width:768px){
  footer.site-footer .ft-col>summary{border-bottom:0;padding-bottom:0;cursor:default;}
}
footer.site-footer .ft-col>summary::-webkit-details-marker{display:none;}
footer.site-footer .ft-col-caret{display:none;color:rgba(255,255,255,.5);transition:transform .2s ease;}
@media (max-width:767px){
  footer.site-footer .ft-col-caret{display:inline-flex;}
}
footer.site-footer .ft-col[open]>summary .ft-col-caret{transform:rotate(180deg);}
footer.site-footer .ft-col-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding-top:6px;
}
footer.site-footer .ft-col-body a,
footer.site-footer .link-btn{
  display:inline-flex;
  align-items:center;
  padding:4px 0;
  font-size:13.5px;
  line-height:1.5;
  border:0;
  background:none;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  color:rgba(255,255,255,.76);
  transition:all .2s ease;
}
footer.site-footer .ft-col-body a:hover,
footer.site-footer .link-btn:hover{
  color:#38bdf8;
  transform:translateX(4px);
}

/* --- Contact Column --- */
footer.site-footer .ft-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
footer.site-footer .ft-contact-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.45;
}
footer.site-footer .ft-contact-ico{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:9px;
  margin-top:1px;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.2);
  color:#38bdf8;
}
.ft-contact-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ft-contact-sub{
  font-size:10.5px;
  font-weight:700;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  letter-spacing:.04em;
}
footer.site-footer .ft-contact-list a,
footer.site-footer .ft-contact-static{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  color:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:500;
}
footer.site-footer .ft-contact-list a:hover{
  color:#38bdf8;
}

/* --- Payment Strip --- */
footer.site-footer .ft-pay{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.2);
}
footer.site-footer .ft-pay-inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:16px var(--page-pad);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
}
footer.site-footer .ft-pay-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.7);
}
footer.site-footer .ft-pay-label svg{
  color:#38bdf8;
}
footer.site-footer .ft-pay-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}
footer.site-footer .ft-pay-list li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:all .2s ease;
}
footer.site-footer .ft-pay-list li:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.ft-pay-bullet{
  color:#22c55e;
  font-size:11px;
}

/* --- Bottom Bar --- */
footer.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.35);
}
.footer-bottom-inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:18px var(--page-pad);
  font-size:12.5px;
  color:rgba(255,255,255,.6);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
}
footer.site-footer .footer-bottom span{color:rgba(255,255,255,.6);}
.ft-secure-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:600;
  color:#4ade80 !important;
  background:rgba(34,197,94,.1);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.2);
}
.ft-secure-badge span{
  color:#4ade80 !important;
}
footer.site-footer .ft-legal{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  justify-content:center;
}
footer.site-footer .ft-legal a{
  font-size:12px;
  color:rgba(255,255,255,.65);
}
footer.site-footer .ft-legal a:hover{
  color:#38bdf8;
}
footer.site-footer .footer-credit a{
  color:#38bdf8;
  font-weight:700;
}
footer.site-footer .footer-credit a:hover{
  color:#fff;
  text-decoration:underline;
}

.cart-pill{background:var(--primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:2px}


/* ===== Order Modal ===== */
.so-modal{position:fixed;inset:0;z-index:1000;display:none}
.so-modal.open{display:block}
.so-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.so-modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 32px);max-width:480px;max-height:90vh;overflow-y:auto;background:var(--card);border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.so-modal-sm{max-width:420px}
.so-modal-close{position:absolute;right:10px;top:10px;background:transparent;border:0;font-size:26px;line-height:1;width:36px;height:36px;border-radius:8px;color:var(--muted-foreground)}
.so-modal-close:hover{background:var(--muted);color:var(--foreground)}

.so-title{margin:0 0 14px;font-size:17px;font-weight:700}

/* Order popup header — persistent across both steps */
#soOrderModal .so-modal-panel {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  width: 94%;
  max-width: 520px;
  border-radius: 20px;
  box-shadow: 0 25px 65px -10px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.1);
}

.so-header {
  background: linear-gradient(135deg, var(--popup-header, #0F172A) 0%, color-mix(in srgb, var(--popup-header, #0F172A) 82%, #fff) 100%);
  padding: 13px 44px 13px 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.so-header::before {
  content: "";
  position: absolute;
  top: -60%;
  right: 6%;
  width: 140px;
  height: 160%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 48%, transparent), transparent 70%);
  pointer-events: none;
}
.so-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 45%, transparent), transparent);
}
.so-header .so-modal-close {
  color: var(--popup-header-fg, #fff);
  opacity: .85;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.so-header .so-modal-close:hover {
  background: rgba(255,255,255,0.18);
  opacity: 1;
}
.so-body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 22px;
  min-height: 0;
}

.so-prod-head {
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}
.so-prod-img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 1.5px solid rgba(255,255,255,.5);
}
.so-prod-info {
  min-width: 0;
}
.so-prod-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--popup-header-fg, #fff);
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-prod-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.so-prod-price {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 70%, #000);
  border: 1px solid color-mix(in srgb, var(--primary) 85%, #fff);
  padding: 2px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.so-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* Step indicator */
.so-steps-indicator[hidden] { display: none; }
.so-steps-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  position: relative;
}
.so-step-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .6;
  transition: opacity .2s;
}
.so-step-dot.active { opacity: 1; }
.so-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: var(--popup-header-fg, #fff);
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.so-step-dot.active .so-step-num {
  background: #fff;
  color: var(--popup-header, #0F172A);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 55%, transparent);
}
.so-step-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--popup-header-fg, #fff);
  white-space: nowrap;
}
.so-step-line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  max-width: 45px;
}

.so-field { margin-bottom: 16px; }
.so-field-row { display: flex; gap: 12px; }
.so-field-row .so-field { flex: 1; min-width: 0; }

/* Shipping area section is ALWAYS visible and styled prominently */
.so-area-field { display: block !important; margin-bottom: 18px; }

.so-field > label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground, #1E293B);
  margin-bottom: 7px;
}
.so-field > label svg {
  color: var(--primary);
  flex-shrink: 0;
}
.so-field input[type=text],
.so-field input[type=tel],
.so-field input[type=email],
.so-field input[type=number],
.so-field select,
.so-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: #F8FAFC;
  font-family: inherit;
  font-size: 14px;
  color: var(--foreground, #0F172A);
  transition: all 0.2s ease;
}
.so-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.so-field input:focus, .so-field textarea:focus, .so-field select:focus {
  outline: none;
  border-color: var(--primary);
  background: #FFF;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent);
}

.so-sizes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.so-size {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--foreground, #1e293b);
  cursor: pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.so-size:hover:not(:disabled):not(.is-oos):not(.active) {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.so-size.active,
.so-size.active:hover,
.so-size.active:focus {
  background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;
  border-color: var(--primary) !important;
  font-weight: 700;
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--primary) 60%, transparent);
  transform: translateY(-1px);
}

.so-qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--border, #E2E8F0); border-radius: 10px; overflow: hidden; }
.so-qty button { width: 40px; height: 40px; border: 0; background: #F1F5F9; font-size: 18px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.so-qty button:hover { background: #E2E8F0; }
.so-qty-input { width: 60px; height: 40px; text-align: center; border: 0; border-left: 1.5px solid var(--border, #E2E8F0); border-right: 1.5px solid var(--border, #E2E8F0); font-size: 14.5px; font-weight: 700; background: #FFF; }

/* Shipping Option Radio Cards */
/* Sized to match the shipping cards in the checkout modal
   (.ds-shipping-card in cart.css) — the popup's rows used to be noticeably
   taller than the same options on the real checkout, which made the two
   screens look like different stores. Keep the two in step if either moves. */
.so-area {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.so-area-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 12px;
  background: #FFF;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}
.so-area-opt input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.so-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.so-radio-inner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.2s ease;
}
.so-area-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--muted, #F1F5F9);
  color: var(--muted-foreground, #64748B);
  transition: all 0.2s ease;
}
.so-area-opt.active .so-area-icon {
  background: color-mix(in srgb, var(--primary) 12%, #FFF);
  color: var(--primary);
}
.so-area-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-area-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground, #0F172A);
  line-height: 1.35;
}
.so-area-cost {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: #F1F5F9;
  padding: 4px 11px;
  border-radius: 20px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.so-area-cost.free {
  background: #DCFCE7;
  color: #15803D;
}
.so-area-opt:hover {
  border-color: color-mix(in srgb, var(--primary) 60%, #E2E8F0);
  background: #F8FAFC;
  transform: translateY(-1px);
}
.so-area-opt.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, #FFF);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 14%, transparent);
}
.so-area-opt.active .so-radio-dot {
  border-color: var(--primary);
}
.so-area-opt.active .so-radio-inner {
  transform: scale(1);
}
.so-area-opt.active .so-area-cost {
  background: var(--primary);
  color: #FFF;
}
.so-area-opt.active .so-area-cost.free {
  background: #16A34A;
  color: #FFF;
}
.so-free-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #15803D;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

/* Order Summary Box */
.so-summary {
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 13.5px;
}
.so-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  color: #64748B;
}
.so-summary-row.so-discount-row[hidden] { display: none !important; }
.so-discount-row { color: #059669 !important; font-weight: 600; }
.so-discount { color: #059669; }
.so-total-row {
  border-top: 1.5px dashed #CBD5E1;
  margin-top: 8px;
  padding-top: 10px !important;
  font-weight: 700;
  color: var(--foreground, #0F172A) !important;
  font-size: 15px;
}
.so-total { color: var(--primary); font-size: 18px; font-weight: 800; }

/* Trust Badges */
.so-modal-trust {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  background: #F1F5F9;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
}
.so-trust-badge {
  display: flex;
  align-items: center;
  gap: 5px;
}
.so-trust-badge svg { color: var(--primary); flex-shrink: 0; }

.so-actions { display: flex; gap: 10px; }
.so-actions .btn { flex: 1; }

#soOrderModal .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px -3px color-mix(in srgb, var(--primary) 50%, transparent);
  transition: all 0.2s ease;
}
#soOrderModal .btn-primary:hover {
  box-shadow: 0 12px 26px -3px color-mix(in srgb, var(--primary) 60%, transparent);
  transform: translateY(-1.5px);
}
#soOrderModal .btn-outline {
  border-radius: 12px;
  font-weight: 600;
  border: 1.5px solid #CBD5E1;
}

/* Inline field error */
.so-field-err[hidden] { display: none !important; }
.so-field-err { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: #c0392b; }
.so-form input.is-invalid { border-color: #e5484d !important; background: #fff6f6; }
.so-form input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important; }
.so-err { margin: 10px 0 0; padding: 10px; background: #fde2e2; border-left: 3px solid var(--destructive); border-radius: 6px; font-size: 13px; color: #7a1d1d; }

/* Confirmation view: hide the product header entirely for a clean success screen. */
.so-view-done .so-header{display:none}

.so-step-done{position:relative;padding:4px 2px 2px}
.so-done-close{position:absolute;right:2px;top:0;z-index:2;background:transparent;border:0;font-size:26px;line-height:1;width:34px;height:34px;border-radius:8px;color:var(--muted-foreground);cursor:pointer}
.so-done-close:hover{background:var(--muted);color:var(--foreground)}

.so-done{text-align:center;padding:12px 6px 6px}
.so-done-check{width:78px;height:78px;margin:8px auto 2px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#dcfce7,#bbf7d0);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -4px rgba(22,163,74,.35);animation:so-pop .45s cubic-bezier(.16,1,.3,1)}
.so-done-check svg{width:40px;height:40px;color:#16a34a;animation:so-check-in .5s .15s both}
@keyframes so-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes so-check-in{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.so-done-check,.so-done-check svg{animation:none}}

.so-done h3{margin:14px 0 4px;font-size:19px;font-weight:700;color:var(--foreground)}
.so-done-sub{margin:0 0 16px;font-size:13.5px;color:var(--muted-foreground)}

.so-done-oid{display:inline-flex;flex-direction:column;gap:2px;align-items:center;background:var(--muted,#f6f4ef);border:1.5px dashed var(--border);border-radius:12px;padding:9px 22px;margin:0 auto 16px}
.so-done-oid-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600}
.so-done-oid .so-oid{font-size:19px;font-weight:700;color:var(--primary);line-height:1.1}

.so-done-note{display:flex;align-items:center;gap:9px;text-align:left;background:#eff6ff;border:1px solid #dbeafe;border-radius:10px;padding:10px 12px;margin-bottom:16px}
.so-done-note svg{width:20px;height:20px;color:#2563eb;flex-shrink:0}
.so-done-note span{font-size:12.5px;color:#1e40af;line-height:1.5}

.so-next{margin-top:6px}

/* ===== Product details popup ===== */
/* ===== Product details popup ===== */
#soDetailsModal .so-modal-panel{
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  width:calc(100% - 24px);max-width:870px;max-height:86vh;border-radius:18px;
  background:#fff;border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 25px 60px -15px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
}
/* Card-title links that open the popup keep the plain card look. */
.so-details-btn{background:transparent;border:0;cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left}

#soDetailsModal .so-modal-close{
  position:absolute;top:12px;right:12px;z-index:10;
  width:34px;height:34px;border:1px solid var(--border);border-radius:50%;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);color:var(--foreground);
  font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
#soDetailsModal .so-modal-close:hover{background:#ef4444;border-color:#ef4444;color:#fff;transform:rotate(90deg) scale(1.06)}

.sd-back-trigger{
  position:absolute;top:12px;left:12px;z-index:10;
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);color:var(--foreground);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all .2s ease;
}
.sd-back-trigger[hidden]{display:none}
.sd-back-trigger:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateX(-2px)}

/* ---------- Front face ---------- */
.sd-body{display:grid;grid-template-columns:1fr;overflow-y:auto;min-height:0}
@media (min-width:760px){
  .sd-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);overflow:hidden;align-items:stretch}
}
.sd-body[hidden]{display:none}

.sd-media{
  background:#f8fafc;padding:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;min-width:0;
  border-bottom:1px solid var(--border);gap:10px;
}
@media (min-width:760px){
  .sd-media{
    padding:22px 20px 20px;min-height:0;overflow-y:auto;
    border-bottom:0;border-right:1px solid var(--border);
    justify-content:flex-start;align-items:stretch;
  }
}
.sd-carousel{
  position:relative;width:100%;aspect-ratio:1;
  overflow:hidden;border-radius:14px;background:#ffffff;touch-action:pan-y;
  border:1px solid rgba(0,0,0,0.08);box-shadow:0 4px 16px rgba(0,0,0,0.04);
  display:flex;align-items:center;justify-content:center;
}
@media (min-width:760px){
  .sd-carousel{width:100%;max-width:320px;height:auto;margin:0 auto;flex-shrink:0}
}
.sd-track{display:flex;width:100%;height:100%;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.sd-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;padding:12px}
.sd-slide img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:6px}
.sd-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;
  box-shadow:0 3px 10px rgba(220,38,38,.3);
}
.sd-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.95);backdrop-filter:blur(4px);color:var(--foreground);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.15);transition:all .2s ease;
}
.sd-nav:hover{background:var(--primary);color:#fff;transform:translateY(-50%) scale(1.08)}
.sd-nav[hidden],.sd-dots[hidden]{display:none!important}
.sd-prev{left:10px} .sd-next{right:10px}
.sd-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:6px}
.sd-dot{width:8px;height:8px;border:0;border-radius:50%;background:rgba(0,0,0,.22);cursor:pointer;padding:0;transition:all .2s}
.sd-dot.active{background:var(--primary);width:20px;border-radius:999px}

/* Thumbnail strip */
.sd-thumbs{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto;width:100%;
  overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin;flex-shrink:0;
}
.sd-thumbs[hidden]{display:none!important}
.sd-thumbs::-webkit-scrollbar{height:4px}
.sd-thumbs::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.sd-thumb{
  flex:0 0 48px;width:48px;height:48px;padding:2px;border-radius:8px;
  border:2px solid var(--border);background:#fff;cursor:pointer;overflow:hidden;
  transition:all .2s ease;display:flex;align-items:center;justify-content:center;
}
.sd-thumb img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.sd-thumb:hover{border-color:color-mix(in srgb,var(--primary) 60%,transparent);transform:translateY(-2px)}
.sd-thumb.active{
  border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 30%,transparent);
  transform:scale(1.04);
}

.sd-info{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:20px 22px;min-width:0;background:#fff;
}
@media (min-width:760px){
  .sd-info{padding:24px 28px 24px 24px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
  .sd-info::-webkit-scrollbar{width:5px}
  .sd-info::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted-foreground) 30%,transparent);border-radius:99px}
}
.sd-name{
  margin:0 0 8px;font-size:clamp(18px,2vw,22px);font-weight:800;line-height:1.3;
  letter-spacing:-.02em;color:#0f172a;text-wrap:balance;
}
@media (min-width:760px){ .sd-name{padding-right:44px} }

.nw-meta-row{margin:0 0 10px;gap:8px;font-size:12px;display:flex;align-items:center;flex-wrap:wrap}
.nw-rating.is-popup{background:#fffbeb;border:1px solid #fef3c7;color:#b45309;padding:3px 8px;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.nw-sold.is-popup{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;padding:3px 8px;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.nw-viewing.is-popup{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;padding:3px 8px;border-radius:999px;font-weight:700;display:inline-flex;align-items:center;gap:4px}

.sd-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px}
.sd-price{font-size:clamp(22px,2.6vw,28px);font-weight:800;color:var(--primary);line-height:1;letter-spacing:-.02em}
.sd-price-old{font-size:15px;color:#94a3b8;text-decoration:line-through;font-weight:600}
.sd-price-old[hidden]{display:none}
.sd-save-badge{
  background:linear-gradient(135deg,#10b981,#059669);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 6px rgba(16,185,129,.25)
}
.sd-stock{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;
  padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
}
.sd-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,.25)}
.sd-stock[hidden]{display:none}
.sd-stock.is-out{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.sd-stock.is-out::before{background:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.25)}

/* Short Description & Flip Trigger */
.sd-desc-row{
  cursor:pointer;border-radius:12px;padding:10px 12px;margin:0 auto;
  width:100%;max-width:320px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  transition:all .2s ease;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.sd-desc-row:hover{
  background:color-mix(in srgb,var(--primary) 6%,#fff);
  border-color:color-mix(in srgb,var(--primary) 40%,transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(22,104,184,.08);
}
.sd-desc-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sd-desc-content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.sd-desc{
  font-size:12.5px;line-height:1.45;color:#475569;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;
}
.sd-desc-row:hover .sd-desc{color:var(--foreground)}
.sd-readmore-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;color:var(--primary);
  margin-top:4px;align-self:flex-start;
  background:color-mix(in srgb,var(--primary) 10%,#fff);
  padding:3px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);
  transition:all .2s ease;
}
.sd-readmore-badge svg{transition:transform .2s ease}
.sd-desc-row:hover .sd-readmore-badge{
  background:var(--primary);color:#fff;border-color:var(--primary);
  transform:translateX(2px);box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 40%,transparent);
}
.sd-desc-row:hover .sd-readmore-badge svg{transform:translateX(2px);stroke:#fff}

.sd-label{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--foreground)}
.sd-sizes-wrap,.sd-back-sizes-wrap{margin:0 0 12px}
.sd-sizes-wrap[hidden],.sd-back-sizes-wrap[hidden]{display:none}
.sd-sizes,.sd-back-sizes{display:flex;flex-wrap:wrap;gap:6px}
.sd-size-chip{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:6px 14px;border:1.5px solid var(--border,#e2e8f0);border-radius:8px;
  background:var(--card,#fff);font-family:inherit;font-size:13px;font-weight:600;
  color:var(--foreground,#1e293b);cursor:pointer;transition:all .18s ease;user-select:none;
}
.sd-size-chip:hover:not(:disabled):not(.is-oos):not(.active){border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,#fff);transform:translateY(-1px)}
.sd-size-chip.active,
.sd-size-chip.active:hover,
.sd-size-chip.active:focus{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;font-weight:700;box-shadow:0 3px 8px -2px color-mix(in srgb,var(--primary) 50%,transparent)}
.sd-needs-pick .sd-label{color:var(--destructive)}
.sd-needs-pick .sd-sizes,.sd-needs-pick .sd-back-sizes{animation:sp-shake .4s ease}

/* Buy controls row */
.sd-buy-row{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.sd-qty-wrap{display:flex;align-items:center;flex-shrink:0}
.sd-qty-label{display:none}
.sd-qty{
  display:inline-flex;align-items:center;height:44px;
  border:1.5px solid #cbd5e1;border-radius:10px;background:#fff;overflow:hidden;
}
.sd-qty button{
  width:32px;height:100%;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;color:#1e293b;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.sd-qty button:hover{background:#f1f5f9;color:var(--primary)}
.sd-qty-input{
  width:38px;height:100%;border:0;background:transparent;text-align:center;
  font-family:inherit;font-size:14px;font-weight:800;color:#0f172a;padding:0;
  -moz-appearance:textfield;
}
.sd-qty-input::-webkit-outer-spin-button,
.sd-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.sd-actions{display:flex;gap:8px;flex:1;min-width:0}
.sd-actions .btn{
  flex:1 1 0;min-width:0;height:44px;border-radius:10px;font-size:13.5px;font-weight:700;
  white-space:nowrap;padding:0 12px;gap:6px;display:inline-flex;align-items:center;justify-content:center;
}
#soDetailsModal .sd-order,
#soDetailsModal .sd-order-back{
  background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 85%,#000));
  color:#fff;border:0;
  box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 40%,transparent);
  transition:all .2s ease;
}
#soDetailsModal .sd-order:hover:not(:disabled),
#soDetailsModal .sd-order-back:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 50%,transparent);
}
.sd-cart{
  background:#fff;color:#1e293b;border:1.5px solid #cbd5e1;
  transition:all .2s ease;
}
.sd-cart:hover{
  border-color:var(--primary);color:var(--primary);background:#f0f7ff;
  transform:translateY(-1px);
}
.sd-cart[hidden]{display:none}
.sd-cart.loading{opacity:.6;pointer-events:none}
.sd-cart.added{background:#16a34a;border-color:#16a34a;color:#fff}
.sd-cart + .added_to_cart{display:none}

/* Share & Copy Link Section */
.sd-share-row{
  margin:0 0 12px;padding:8px 12px;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;
}
.sd-share-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:#334155;
}
.sd-share-label svg{color:var(--primary)}
.sd-share-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sd-share-pill{
  display:inline-flex;align-items:center;gap:5px;
  height:30px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;font-family:inherit;
  border:1px solid #cbd5e1;background:#fff;color:#1e293b;
  cursor:pointer;text-decoration:none;transition:all .18s ease;
  user-select:none;
}
.sd-share-pill svg{flex-shrink:0;transition:transform .18s ease}
.sd-copy-btn{
  border-color:color-mix(in srgb,var(--primary) 40%,#cbd5e1);
  color:#0f172a;
}
.sd-copy-btn:hover{
  border-color:var(--primary);color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,#fff);
  transform:translateY(-1px);
}
.sd-copy-btn.copied{
  background:#10b981!important;border-color:#10b981!important;color:#fff!important;
  box-shadow:0 2px 8px rgba(16,185,129,.35);
}
.sd-copy-btn.copied svg{stroke:#fff}
.sd-share-wa{
  background:#f0fdf4;border-color:#bbf7d0;color:#15803d;
}
.sd-share-wa:hover{
  background:#25d366;border-color:#25d366;color:#fff;
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,211,102,.3);
}
.sd-share-wa:hover svg{fill:#fff}
.sd-share-fb{
  background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;
}
.sd-share-fb:hover{
  background:#1877f2;border-color:#1877f2;color:#fff;
  transform:translateY(-1px);box-shadow:0 2px 8px rgba(24,119,242,.3);
}
.sd-share-fb:hover svg{fill:#fff}

.sd-trust{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
  margin:0;padding:10px 0 0;border-top:1px dashed #e2e8f0;
}
.sd-trust:empty{display:none}
.sd-trust-item{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;
  background:#f8fafc;border:1px solid #f1f5f9;transition:all .18s ease;
}
.sd-trust-item:hover{
  background:#ffffff;border-color:#e2e8f0;box-shadow:0 2px 6px rgba(0,0,0,0.04);transform:translateY(-1px);
}
.sd-trust-ico{
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:6px;flex-shrink:0;
}
.sd-trust--delivery .sd-trust-ico{background:#eff6ff;color:#2563eb}
.sd-trust--cod .sd-trust-ico{background:#ecfdf5;color:#059669}
.sd-trust--returns .sd-trust-ico{background:#fff7ed;color:#ea580c}
.sd-trust--genuine .sd-trust-ico{background:#f5f3ff;color:#7c3aed}
.sd-trust-text{font-size:11.5px;font-weight:600;color:#334155;line-height:1.25}

/* ---------- Back face ---------- */
.sd-back-face{display:flex;flex-direction:column;flex:1;min-height:0}
.sd-back-face[hidden]{display:none}
.sd-back-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;background:#f8fafc;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;
}
.sd-back-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:32px;padding:0 14px;border:1px solid var(--border);border-radius:999px;
  background:#fff;color:var(--foreground);font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;transition:all .18s ease;flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.sd-back-btn:hover{
  background:var(--primary);border-color:var(--primary);color:#fff;
  transform:translateX(-2px);
}
.sd-back-btn svg{transition:transform .18s ease}
.sd-back-btn:hover svg{transform:translateX(-2px)}
.sd-back-thumb{width:38px;height:38px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--border);flex-shrink:0}
.sd-back-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.sd-back-name{font-size:13.5px;font-weight:700;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-back-price{font-size:13px;font-weight:800;color:var(--primary)}
.sd-back-scroll{flex:1;overflow-y:auto;min-height:0;padding:18px 22px;scrollbar-width:thin}
@media (min-width:760px){ .sd-back-scroll{padding:22px 26px} }
.sd-full-desc,.sd-spec{font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.sd-full-desc:empty,.sd-spec:empty{display:none}
.sd-full-desc,.sd-spec{margin-bottom:16px}
.sd-full-desc h3,.sd-spec h3{
  display:flex;align-items:center;gap:6px;
  margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--foreground)
}
.sd-full-desc h3::before,.sd-spec h3::before{
  content:"";width:4px;height:14px;border-radius:2px;background:var(--primary)
}
.sd-full-desc p{margin:0 0 8px}
.sd-full-desc ul{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
@media (min-width:640px){ .sd-full-desc ul{grid-template-columns:1fr 1fr;gap:6px 16px} }
.sd-full-desc li{position:relative;padding-left:20px;color:var(--foreground);font-size:12.5px;line-height:1.5}
.sd-full-desc li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 14%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231668b8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/8px 8px no-repeat
}
.sd-full-desc table,.sd-spec table{
  width:100%;border-collapse:collapse;font-size:12.5px;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:6px 0 0
}
.sd-full-desc th,.sd-spec th,.sd-spec tbody th{background:var(--muted);color:var(--foreground);font-weight:700;padding:8px 10px;text-align:left}
.sd-full-desc td,.sd-spec td{border-top:1px solid var(--border);padding:8px 10px;color:var(--foreground)}
.sd-full-desc tr:nth-child(even) td,.sd-spec tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--muted) 45%,transparent)}

.sd-back-sticky{flex-shrink:0;padding:12px 20px 16px;border-top:1px solid var(--border);background:#fff}
@media (min-width:760px){ .sd-back-sticky{padding:14px 24px 18px} }

@media (max-width:759px){
  #soDetailsModal .so-modal-panel{
    width:calc(100% - 20px);max-height:90vh;border-radius:16px;
    box-shadow:0 16px 40px rgba(0,0,0,0.3)
  }
  .sd-body{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sd-media{
    display:contents;
  }
  .sd-carousel{
    order:1;width:100%;max-width:260px;margin:14px auto 6px;
    aspect-ratio:1;border-radius:12px;background:#ffffff;
  }
  .sd-slide{padding:8px}
  .sd-slide img{max-height:230px}
  .sd-thumbs{order:2;margin:4px auto;gap:5px}
  .sd-thumb{width:42px;height:42px;flex:0 0 42px;border-radius:6px}
  .sd-info{order:3;padding:12px 16px 6px}
  .sd-name{font-size:17px;line-height:1.3;padding-right:36px;margin-bottom:6px}
  .sd-price-row{gap:8px;margin-bottom:10px}
  .sd-price{font-size:21px;font-weight:800}
  .sd-save-badge,.sd-stock{font-size:11px;padding:2px 8px}
  .sd-buy-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .sd-qty{height:40px;border-radius:8px}
  .sd-qty button{width:28px;font-size:15px}
  .sd-qty input{width:32px;font-size:13.5px}
  .sd-actions{display:flex;gap:6px;flex:1}
  .sd-actions .btn{height:40px;font-size:12.5px;padding:0 8px;border-radius:8px}
  .sd-share-row{
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    padding:6px 10px;margin-bottom:10px;border-radius:8px;gap:6px;
  }
  .sd-share-label{font-size:11.5px}
  .sd-share-actions{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
  .sd-share-pill{height:28px;padding:0 8px;font-size:11px;gap:4px}
  .sd-trust{
    grid-template-columns:1fr 1fr;gap:5px 8px;margin:0;padding:8px 0 0
  }
  .sd-trust-item{padding:5px 8px;border-radius:6px;gap:6px}
  .sd-trust-ico{width:20px;height:20px;border-radius:5px}
  .sd-trust-ico svg{width:12px;height:12px}
  .sd-trust-text{font-size:10.5px;line-height:1.2}

  /* Description & বিস্তারিত দেখুন at the very bottom on mobile */
  .sd-desc-row{
    order:4;
    width:auto;max-width:none;
    margin:6px 16px 18px;
    padding:10px 12px;
    border-radius:10px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
  }
  .sd-desc{font-size:12.5px;line-height:1.45}
  .sd-readmore-badge{font-size:11.5px}
}

@media (max-width:380px){
  .sd-actions .btn span{font-size:11.5px}
  .sd-share-pill span{display:none}
  .sd-share-pill{width:30px;padding:0;justify-content:center}
}

/* ===== Shop / archive header polish ===== */
.wc-page{padding:24px 16px 64px;max-width:var(--page-max);margin:0 auto}
.woocommerce-products-header{margin-bottom:24px}
.woocommerce-result-count{color:var(--muted-foreground);font-size:13px;margin:0 0 12px}
.woocommerce-ordering{margin:0 0 16px}
.woocommerce-ordering select{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-family:inherit;font-size:13px}
.term-description{color:var(--muted-foreground);font-size:14px;margin:0 0 16px;line-height:1.6}

/* (Old pagination block removed — see "Pagination polish" below) */

/* ===== Category sheet ===== */
.so-sheet{position:fixed;inset:0;z-index:1000;display:none}
.so-sheet.open{display:block}
.so-sheet-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.so-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--background);border-radius:18px 18px 0 0;padding:8px 16px 24px;max-height:75vh;overflow-y:auto;box-shadow:0 -12px 30px rgba(0,0,0,.18);animation:soSlideUp .22s ease}
@keyframes soSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.so-sheet-handle{width:42px;height:4px;background:var(--border);border-radius:99px;margin:8px auto 12px}
.so-sheet-title{margin:0 0 12px;font-size:16px;font-weight:700}
.so-sheet-empty{padding:24px 0;text-align:center;color:var(--muted-foreground);font-size:14px}
/* Desktop: show the category popup as a centered modal instead of a bottom sheet */
@media (min-width:768px){
  .so-sheet-panel{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(680px,92vw);max-height:80vh;border-radius:16px;padding:20px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:soFadeIn .2s ease}
  .so-sheet-handle{display:none}
}
@keyframes soFadeIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
/* Category modal grid: 3 cols on mobile sheet, 5 cols on desktop modal */
.so-sheet .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (min-width:768px){ .so-sheet .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important} }

/* ===== Toast ===== */
.so-toast-wrap{position:fixed;left:0;right:0;top:16px;z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.so-toast{display:inline-flex;align-items:center;gap:10px;background:var(--foreground);color:#fff;font-size:14px;font-weight:500;padding:10px 16px;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.22);opacity:0;transform:translateY(-12px);transition:opacity .22s,transform .22s;pointer-events:auto;max-width:90vw}
.so-toast.in{opacity:1;transform:translateY(0)}
.so-toast.warn{background:linear-gradient(135deg,var(--primary),#e26159);color:#fff}
.so-toast.ok{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.so-toast svg{flex-shrink:0}

/* ===== Shop / archive layout — keep within container ===== */
.wc-page{padding:24px 16px 64px;max-width:var(--page-max);margin:0 auto}
.woocommerce-products-header h1{font-size:24px;font-weight:700;margin:0 0 14px}
.shop-cat-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.shop-cat-pills a{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;text-decoration:none;transition:.15s}
.shop-cat-pills a:hover,.shop-cat-pills a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.shop-breadcrumb{font-size:12px;color:var(--muted-foreground);margin:0 0 10px}
.shop-breadcrumb a{color:var(--muted-foreground)}
.shop-breadcrumb a:hover{color:var(--primary)}

/* ===== v1.2.5 — Dynamic delivery options + polished archive ===== */
.so-area{display:flex;flex-direction:column;gap:8px}
.so-area-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.15s;background:var(--card)}
.so-area-opt:hover{border-color:var(--primary)}
.so-area-opt.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.so-area-opt input[type=radio]{accent-color:var(--primary);margin:0 8px 0 0}
.so-area-opt .so-area-name{flex:1;font-size:12px;font-weight:500;line-height:1.35}
.so-area-opt .so-area-cost{font-weight:700;color:var(--primary);font-size:14px}
.so-free-pill{display:flex;align-items:center;justify-content:center;gap:8px;background:#dcfce7;color:#15803d;border:1px solid #86efac;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14px}
.so-area-field.is-free label{display:none}

/* ===== v1.2.5 — Shop / category page polish (frontend parity) ===== */
.wc-page{padding:28px 16px 80px}
.shop-breadcrumb{font-size:13px;color:var(--muted-foreground);margin:0 0 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.shop-breadcrumb a{color:var(--muted-foreground);text-decoration:none}
.shop-breadcrumb a:hover{color:var(--primary)}
.shop-breadcrumb span{color:var(--foreground);font-weight:600}
.woocommerce-products-header{margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.woocommerce-products-header h1{font-size:28px;font-weight:700;margin:0;letter-spacing:-.01em}
@media (min-width:768px){ .woocommerce-products-header h1{font-size:34px} }
.shop-cat-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:4px 0}
.shop-cat-pills a{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;text-decoration:none;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.shop-cat-pills a:hover{border-color:var(--primary);color:var(--primary)}
.shop-cat-pills a.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 10px rgba(192,57,43,.25)}
.woocommerce-result-count,.woocommerce-ordering{margin:0 0 16px;font-size:13px;color:var(--muted-foreground)}
.woocommerce-ordering select{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);font-size:13px}

/* Home category section spacing */
.so-cat-section{margin-top:0;margin-bottom:0}
.so-cat-section .section-head h2{font-size:22px;font-weight:600;margin:0 0 14px}

/* v1.2.5 — Kill WooCommerce default first/last clear that creates empty first cell */
ul.products{grid-auto-flow:row dense}
ul.products li.product.first,ul.products li.product.last{margin-left:0 !important;clear:none !important}
ul.products li.product{grid-column:auto !important}
ul.products > li:not(.product){display:none}

/* v1.2.5b — Kill WooCommerce grid pseudo-elements that create empty first cell */
ul.products::before,
ul.products::after,
ul.products li.product::before,
ul.products li.product::after{content:none !important;display:none !important;background:none !important}

/* v1.2.6 — Shop / category archive boxed layout (home page parity) */
.wc-page{background:transparent;padding:0;max-width:none;margin:0}
.wc-page > .container{padding:24px 16px 64px}
.wc-page .so-shop-section{background:transparent;padding:0;margin:0 0 24px}
.wc-page .section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.wc-page .section-head h2{font-size:24px;font-weight:700;margin:0;letter-spacing:-.01em;line-height:1.2}
@media (min-width:768px){ .wc-page .section-head h2{font-size:30px} }
.wc-page .section-head a{font-size:13px;font-weight:600;color:var(--primary);text-decoration:none;white-space:nowrap}
.wc-page .section-head a:hover{text-decoration:underline}
.woocommerce-products-header{display:none}
.shop-breadcrumb{font-size:13px;color:var(--muted-foreground);margin:0 0 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-breadcrumb a{color:var(--muted-foreground);text-decoration:none;transition:color .15s}
.shop-breadcrumb a:hover{color:var(--primary)}
.shop-breadcrumb .sep{color:var(--muted-foreground);opacity:.6}
.shop-breadcrumb > span:last-child{color:var(--foreground);font-weight:700}
.shop-cat-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0}
.shop-cat-pills a{display:inline-flex;align-items:center;border:1.5px solid var(--border);background:var(--card);color:var(--foreground);font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;text-decoration:none;transition:all .2s ease}
.shop-cat-pills a:hover{background:var(--primary)!important;color:#fff!important;border-color:var(--primary);transform:translateY(-1px)}
.shop-cat-pills a:hover *{color:#fff!important}
.shop-cat-pills a.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 14px -4px rgba(192,57,43,.45)}
/* Shop / category page: uppercase breadcrumb, category pills, and page title.
   The heading is an h1 since the SEO pass — matched here so it keeps its caps. */
.shop-breadcrumb,
.shop-cat-pills a,
.wc-page .section-head h1,
.wc-page .section-head h2{text-transform:uppercase}
.woocommerce-result-count{margin:0 0 14px;font-size:13px;color:var(--muted-foreground);font-weight:500}
.woocommerce-ordering{margin:0 0 16px}
.woocommerce-ordering select{padding:8px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);font-size:13px;font-weight:500;cursor:pointer}
.term-description{font-size:14px;color:var(--muted-foreground);margin:0 0 16px;line-height:1.6}

/* Pagination polish */
.woocommerce-pagination{margin:40px 0 8px;text-align:center}
.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers{display:inline-flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;border:0;justify-content:center}
.woocommerce-pagination ul li{margin:0;border:0;display:inline-flex}
.woocommerce-pagination .page-numbers,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--foreground);font-weight:600;font-size:14px;text-decoration:none;transition:all .15s ease;line-height:1}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination ul li a:hover{border-color:var(--primary)!important;background:var(--primary)!important;color:#fff!important}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination ul li span.current{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:0 2px 8px color-mix(in oklab, var(--primary) 30%, transparent)}
.woocommerce-pagination .page-numbers.dots{border:0;background:transparent;color:var(--muted-foreground);min-width:24px;padding:0 4px}
.woocommerce-pagination .page-numbers.prev,
.woocommerce-pagination .page-numbers.next{font-weight:700;gap:4px}
@media (max-width:480px){
  .woocommerce-pagination .page-numbers{min-width:36px;height:36px;padding:0 10px;font-size:13px}
}

/* v1.2.7 — hard fix: no empty first catalogue cell from Woo clearfix */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after{content:none !important;display:none !important}
.products.product-grid{list-style:none;margin:0;padding:0;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;clear:none !important}
.products.product-grid > *{min-width:0;float:none !important;clear:none !important;margin:0 !important;width:auto !important}
@media (min-width:640px){.products.product-grid{gap:14px}}
@media (min-width:768px){.products.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.products.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.products.product-grid.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Mobile: smaller add-to-cart button text */
@media (max-width:767px){
  .woocommerce a.button,.woocommerce button.button,.woocommerce ul.products li.product .button,.products.product-grid .button{font-size:11px !important;padding:7px 10px !important;line-height:1.2 !important;border-radius:6px !important;letter-spacing:0}
  .products.product-grid li.product .price{font-size:13px}
  .products.product-grid li.product .woocommerce-loop-product__title{font-size:12px !important;line-height:1.3}
}

/* v1.0.2 — taller order button on product cards */
.product-card .so-order-btn:not(.hx-full-order),
.products .product .so-order-btn:not(.hx-full-order){padding:10px 12px;font-size:13px;min-height:40px;line-height:1.2;border-radius:8px;gap:6px}
.product-card .so-order-btn:not(.hx-full-order) svg,
.products .product .so-order-btn:not(.hx-full-order) svg{width:14px;height:14px}
@media (max-width:480px){
  .product-card .so-order-btn:not(.hx-full-order),
  .products .product .so-order-btn:not(.hx-full-order){padding:9px 10px;font-size:12px;min-height:38px}
}

/* v1.1.2 — stronger mobile side spacing for home category + product sections */
@media (max-width:640px){
  :root{--page-pad:18px}
  .container{padding-left:var(--page-pad);padding-right:var(--page-pad)}
  .hero.container{padding:12px 18px 0}
  .section.container{padding:var(--section-gap) var(--page-pad) 0}
  .so-cat-section{margin-top:0}
  .cat-grid{gap:10px}
  .product-grid,
  .products.product-grid{gap:10px}
}
/* Product card button subtle hover animation */
.product-card .so-order-btn,
.products .product .so-order-btn {
  transition: background .2s, transform .2s, box-shadow .2s;
}
.product-card .so-order-btn:hover,
.products .product .so-order-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.bottom-nav .bn-wa{color:#25D366}
.bottom-nav .bn-wa svg{width:22px;height:22px}
.bottom-nav .bn-call{color:var(--primary)}

/* Footer credit line — kept on one row, readable on the navy ground. */
footer.site-footer .footer-bottom{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between
}
footer.site-footer .footer-bottom > span{min-width:0}
footer.site-footer .footer-bottom .footer-credit{
  text-transform:uppercase;letter-spacing:.05em;font-size:11px;
  color:rgba(255,255,255,.45);flex-shrink:0
}
footer.site-footer .footer-bottom .footer-credit a{
  display:inline;color:rgba(255,255,255,.8);font-weight:600;text-decoration:none;padding:0
}
footer.site-footer .footer-bottom .footer-credit a:hover{color:#fff;text-decoration:underline;transform:none}
@media (max-width:600px){
  footer.site-footer .footer-bottom{flex-direction:column;text-align:center;gap:8px}
}

/* Collapsed link columns on phones. main.js strips the `open` attribute below
   768px, so the caret and the divider only make sense at that width — above
   it the columns are permanently open and the summary is just a heading. */
@media (max-width:767px){
  footer.site-footer .ft-main{padding:32px var(--page-pad) 28px}
  footer.site-footer .ft-brand{padding-bottom:20px}
  footer.site-footer .ft-col{border-bottom:1px solid rgba(255,255,255,.1)}
  footer.site-footer .ft-col>summary{margin:0;padding:14px 0}
  footer.site-footer .ft-col-caret{display:inline-flex}
  footer.site-footer .ft-col-body{padding:0 0 12px}
  footer.site-footer .ft-contact{padding-top:22px}
  footer.site-footer .ft-pay-inner{justify-content:center}
}
@media (min-width:768px){
  /* Never let a stray toggle collapse a column on desktop. */
  footer.site-footer .ft-col>summary{cursor:default;pointer-events:none}
}

/* v1.0.3 — infinite scroll loader */
.so-infinite{display:flex;justify-content:center;padding:24px 0 8px;min-height:60px}
.so-infinite-loader{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:so-spin .8s linear infinite}
.so-infinite.done{display:none}
@keyframes so-spin{to{transform:rotate(360deg)}}
.woocommerce-pagination,.woocommerce nav.woocommerce-pagination{display:none!important}

/* ========================================================================
   Bottom nav — the only place this bar is styled.

   Four generations of this block used to sit in three different parts of this
   file, each partly overriding the last, so changing anything meant working
   out which rule was actually winning. This is now the single source of truth.

   Shape: each tab is a column of [icon tile] over [label]. The tile — not the
   whole tab — is what fills in for the current page, so the icon and the label
   never move and switching tabs animates one small shape instead of a
   full-height slab of colour.
   ======================================================================== */
.bottom-nav{display:none}

@media (max-width:767px){
  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;align-items:stretch;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    /* Opaque on purpose. A blurred backdrop on a bar that is fixed over
       scrolling content makes the compositor redraw the strip behind it every
       frame — on a mid-range phone that is the one bit of this page you can
       feel. A solid card colour is indistinguishable here and free. */
    background:var(--card);
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px -14px rgba(18,31,52,.30);
  }

  .bottom-nav .bn-item{
    /* A flex item's min-width is auto, so without this the widest label
       ("Categories") sets the floor for every tab and the bar cannot shrink
       below the sum of its labels. Comfortable at 390px today; this is what
       keeps a fifth tab from pushing the whole page sideways. */
    flex:1;min-width:0;
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:5px;
    min-height:56px;
    padding:9px 2px 8px;
    border:0;background:transparent;
    font-family:inherit;
    font-size:9.5px;font-weight:700;line-height:1;
    letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted-foreground);
    text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    /* Drops the browser's wait-for-double-tap delay, so taps register at once. */
    touch-action:manipulation;
    transition:color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
  }

  /* The tile behind the icon. Sized and placed to sit exactly around the 24px
     icon, which is why the numbers below are tied to the padding above. */
  .bottom-nav .bn-item::before{
    content:"";
    position:absolute;
    top:5px;left:50%;
    width:50px;height:32px;
    border-radius:999px;
    background:color-mix(in oklab, currentColor 14%, transparent);
    opacity:0;
    transform:translateX(-50%) scale(.72);
    transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .bottom-nav .bn-item > svg,
  .bottom-nav .bn-item > span{position:relative;z-index:1}
  .bottom-nav .bn-item > span{
    max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .bottom-nav .bn-item svg{
    width:24px;height:24px;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  /* Duotone: a soft wash of the icon's own colour under the crisp outline. */
  .bottom-nav .bn-ico-fill{fill:currentColor;stroke:none;opacity:.14;transition:opacity .25s ease}

  /* ---- current page ---- */
  .bottom-nav .bn-item.active{color:var(--primary)}
  .bottom-nav .bn-item.active::before{opacity:1;transform:translateX(-50%) scale(1)}
  .bottom-nav .bn-item.active .bn-ico-fill{opacity:.3}
  .bottom-nav .bn-item.active svg{transform:translateY(-1px)}

  /* ---- pressed ---- */
  /* The tile flashes in under the finger even on a tab that is not current,
     so every tap acknowledges itself before the next page starts loading. */
  .bottom-nav .bn-item:active{transform:scale(.94)}
  .bottom-nav .bn-item:active::before{opacity:.7;transform:translateX(-50%) scale(1)}

  .bottom-nav .bn-item:focus-visible{outline:none}
  .bottom-nav .bn-item:focus-visible::before{
    opacity:1;transform:translateX(-50%) scale(1);
    box-shadow:0 0 0 2px var(--card),0 0 0 4px currentColor;
  }

  /* ---- contact tabs ---- */
  /* These are standing actions rather than destinations, so they carry their
     own colour and a permanent, quieter tile — quieter so that "you are here"
     stays the loudest thing on the bar. */
  .bottom-nav .bn-wa{color:#1faa53}
  .bottom-nav .bn-call{color:var(--primary)}
  .bottom-nav .bn-wa::before,
  .bottom-nav .bn-call::before{opacity:.5;transform:translateX(-50%) scale(1)}
  .bottom-nav .bn-wa svg,
  .bottom-nav .bn-call svg{width:23px;height:23px}

  /* Clear the bar: its own height plus the phone's home indicator. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* Five tabs on a 320px phone leaves ~62px each, which is not enough for
   "CATEGORIES" at the tracked-out size — it ellipsised. Tightening the label
   rather than dropping a tab or truncating a word. */
@media (max-width:340px){
  .bottom-nav .bn-item{font-size:8.5px;letter-spacing:.2px;padding-left:0;padding-right:0}
  .bottom-nav .bn-item::before{width:44px}
}

@media (prefers-reduced-motion:reduce){
  .bottom-nav .bn-item,
  .bottom-nav .bn-item::before,
  .bottom-nav .bn-item svg{transition:none !important}
  .bottom-nav .bn-item:active{transform:none}
}

/* ========================================================
   Wholesale rate table (single product + details popup)
   ======================================================== */
.ds-ws { margin: 0 0 4px; }

.ds-ws-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ds-ws-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
}
.ds-ws-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  padding: 3px 9px;
  border-radius: 999px;
}

.ds-ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.ds-ws-table th {
  padding: 8px 12px;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
}
.ds-ws-table th:last-child,
.ds-ws-table td:last-child { text-align: right; }
.ds-ws-table td {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  color: var(--foreground);
}
.ds-ws-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-ws-save {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 700;
}
.ds-ws-dash { color: var(--muted-foreground); }

/* The row the current quantity actually falls into. */
.ds-ws-row.is-active td {
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  font-weight: 700;
}
.ds-ws-row.is-active td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Upsell nudge — a button, because tapping it applies the quantity it names. */
.ds-ws-nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 0;
  /* Kept deliberately shallow. It sits between the stepper and the two CTAs,
     and at full card padding it read as a third button and pushed Order Now
     down the panel. A strip, not a block. */
  padding: 5px 6px 5px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ds-ws-nudge:hover {
  background: color-mix(in srgb, var(--accent) 20%, #fff);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.ds-ws-nudge strong { font-weight: 700; }
.ds-ws-nudge-ico { flex-shrink: 0; }
.ds-ws-nudge-text { flex: 1 1 auto; min-width: 0; }

/* Names the action rather than drawing a bare chevron — at this size an arrow
   alone reads as decoration and the row looks like a notice, not a control. */
.ds-ws-nudge-go {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #1c1400;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}
.ds-ws-nudge-ico { font-size: 12px; line-height: 1; }

/* Details popup placement */
.sd-ws { margin: 14px 0 0; }
.sd-ws-nudge { margin-top: 10px; }

/* Cart line tag */
.ds-ws-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: middle;
}

@media (max-width: 520px) {
  .ds-ws-table th, .ds-ws-table td { padding: 8px 9px; font-size: 12.5px; }
  .ds-ws-title { font-size: 14px; }
}
/* Order Now popup placement */
.so-ws { margin: 14px 0 4px; }
.so-ws-nudge { margin: 0 0 14px; }

/* Details popup — quantity stepper */
.sd-qty-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}
.sd-qty-label { font-size: 13px; font-weight: 600; color: var(--foreground); }
.sd-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.sd-qty button {
  width: 34px;
  height: 36px;
  border: 0;
  background: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
  transition: background .18s, color .18s;
}
.sd-qty button:hover { background: var(--primary); color: #fff; }
.sd-qty-input {
  width: 52px;
  height: 36px;
  border: 0;
  text-align: center;
  background: var(--card);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  -moz-appearance: textfield;
}
.sd-qty-input::-webkit-outer-spin-button,
.sd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sd-qty-input:focus { outline: none; }

.sd-line-total {
  font-size: 13px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.sd-line-total strong { color: var(--foreground); font-weight: 700; }
.sd-line-save {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}

/* Wholesale badge on product cards */
.badge-wholesale{
  top:auto;bottom:10px;left:10px;right:auto;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#15803d,#0f6b32);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;
  padding:4px 8px;border-radius:6px;
  box-shadow:0 4px 10px -4px rgba(21,128,61,.7)
}
@media (max-width:520px){ .badge-wholesale{font-size:9px;padding:3px 7px;bottom:8px;left:8px} }

/* ===== Details popup — responsive refinements ===== */

/* Tablet band (760–1000px): the panel is at its widest relative to the screen
   here, so the two columns are tightest. Trim the padding rather than let the
   copy and the rate table crush against the edges. */
/* Back face styling */

/* Back face — match the front's rhythm and give the sticky footer the same
   lift as the front's buy bar, so flipping doesn't feel like a different UI. */
.sd-back-sticky{
  box-shadow:0 -10px 18px -14px rgba(18,31,52,.5)
}
.sd-full-desc h3,.sd-spec h3{
  letter-spacing:.07em
}
.sd-back-scroll::-webkit-scrollbar{width:6px}
.sd-back-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted-foreground) 32%,transparent);border-radius:99px
}

/* Long product titles on the back face were running under the close button. */
.sd-back-scroll > :first-child{padding-right:8px}

/* ===== Details popup — back face header ===== */
.sd-back-head{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:14px 26px 14px 116px;          /* clears the Back pill on the left */
  border-bottom:1px solid var(--border);background:var(--card)
}
@media (min-width:760px){ .sd-back-head{padding:16px 70px 16px 124px} }
.sd-back-thumb{
  width:46px;height:46px;flex-shrink:0;object-fit:cover;
  border-radius:9px;border:1px solid var(--border);background:var(--muted);
  font-size:0;color:transparent
}
.sd-back-name{
  flex:1 1 auto;min-width:0;
  font-size:14px;font-weight:700;line-height:1.3;color:var(--foreground);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.sd-back-price{
  flex-shrink:0;font-size:17px;font-weight:800;color:var(--primary);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums
}
@media (max-width:560px){
  .sd-back-head{padding:12px 16px 12px 104px;gap:10px}
  .sd-back-thumb{width:38px;height:38px}
  .sd-back-name{font-size:13px}
  .sd-back-price{font-size:15px}
}

/* The header now clears the top controls, so the scroll area no longer needs
   to reserve room for them. */
.sd-back-scroll{padding-top:22px!important}

/* Cap the *paragraphs* only. Across the full 920px panel prose ran to well over
   120 characters a line, which is tiring to read — but capping the whole block
   also squeezed the two-up feature grid into that width, forcing every item
   onto two lines and leaving a dead column beside it. */
.sd-back-scroll .sd-full-desc > p,
.sd-back-scroll > .sd-spec{max-width:660px}
.sd-back-scroll .sd-full-desc ul{max-width:none}
@media (min-width:900px){
  .sd-back-scroll .sd-full-desc ul{grid-template-columns:1fr 1fr;gap:8px 32px}
}


/* ===== Details popup — 2-line description + flip arrow ===== */
.sd-desc-row{
  display:flex;align-items:flex-start;gap:12px;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--border)
}
.sd-desc-row:has(.sd-desc:empty){display:none}
.sd-desc p{margin:0}

.sd-flip-arrow{
  flex:0 0 auto;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;background:var(--card);
  color:var(--primary);
  transition:background .18s,border-color .18s,transform .18s,color .18s
}

/* ===== Wholesale rate table — collapsible ===== */
/* Row 1 is retail, row 2 the entry tier. Anything past that is hidden until
   asked for, so the table stops pushing the buy buttons down the panel. */
.ds-ws.is-collapsed .ds-ws-table tbody tr:nth-child(n+3){display:none}

.ds-ws-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:8px;padding:8px 12px;
  border:1px solid var(--border);border-radius:9px;background:transparent;
  color:var(--primary);font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;transition:background .18s,border-color .18s
}
.ds-ws-toggle:hover{
  border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent)
}
.ds-ws-toggle svg{transition:transform .22s}
.ds-ws:not(.is-collapsed) .ds-ws-toggle svg{transform:rotate(180deg)}
.ds-ws-toggle-less{display:none}
.ds-ws:not(.is-collapsed) .ds-ws-toggle-more{display:none}
.ds-ws:not(.is-collapsed) .ds-ws-toggle-less{display:inline}

/* ===== Details popup — trust badges under the image (desktop) =====
   They were the last block in the scrolling info column, which made that column
   longer while the image column sat half empty. Moving them into the image
   column on desktop shortens the info side and fills the space beside a square
   photo. They are a sibling of both columns now, so this is pure grid
   placement — no duplicated markup. */
@media (min-width:760px){
  .sd-body{grid-template-rows:1fr auto}

  .sd-media{grid-column:1;grid-row:1}
  /* auto row: the media row absorbs the leftover height, so the badges sit on
     the floor of the column rather than floating mid-way up it. */
  .sd-trust{grid-column:1;grid-row:2}
  .sd-info{grid-column:2;grid-row:1 / span 2}

  .sd-trust{
    margin:0;padding:16px 26px 24px;border-top:0;
    background:linear-gradient(160deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 55%,#fff) 100%);
    grid-template-columns:1fr 1fr;gap:10px 14px;align-content:end
  }
}

/* Tablet band shares the media column's tighter padding. */
@media (min-width:760px) and (max-width:1000px){
  .sd-trust{padding:14px 18px 20px;gap:8px 10px}
}

/* Below 760px everything is one column and the badges stay last in the DOM,
   which is where they belong on mobile too — nothing to place. */

/* ===== Details popup — buy row ===== */
/* Quantity and both CTAs on one tinted surface directly under the price. */
.sd-buy-row{
  margin:0 0 12px;padding:14px;border-radius:14px;
  background:color-mix(in srgb,var(--muted) 55%,#fff);
  border:1px solid var(--border)
}
.sd-buy-row .sd-qty-wrap{margin:0 0 11px}
.sd-buy-row .sd-actions{margin:0}

/* Stock pill — sits where the save badge goes, so the price row is never
   half-empty on a product that isn't discounted. */
.sd-stock{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  background:#dcfce7;color:#15803d;font-size:11.5px;font-weight:800;letter-spacing:.01em
}
.sd-stock::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)
}
.sd-stock.is-out{background:#fee2e2;color:#b42318}
/* A sale badge already fills that slot; don't stack two pills. */
.sd-price-row:has(.sd-save-badge) .sd-stock{display:none}

@media (max-width:520px){
  .sd-buy-row{padding:12px;border-radius:12px}
}

/* WooCommerce injects a "View cart" link after any successful ajax add. On a
   product card it lands beside the icon button and breaks the row — the cart
   drawer already opens with the item, so the link has nothing to offer.
   Scoped to our own action containers rather than hidden globally, so a plain
   WooCommerce loop elsewhere still behaves normally. */
.hx-full-actions .added_to_cart,
.hx-row-actions .added_to_cart,
.product-card .added_to_cart,
.sd-actions .added_to_cart,
.sp-actions .added_to_cart{display:none!important}

/* ========================================================
   Shop filters
   ======================================================== */
.ds-filters{margin:0 0 22px}

.ds-filters-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);
  box-shadow:0 1px 2px rgba(18,31,52,.04)
}

/* Search */
.ds-filter-search{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:9px;
  padding:0 6px 0 13px;height:44px;
  border:1.5px solid var(--border);border-radius:11px;background:var(--muted);
  transition:border-color .18s,background .18s
}
.ds-filter-search:focus-within{border-color:var(--primary);background:var(--card)}
.ds-filter-search svg{flex-shrink:0;color:var(--muted-foreground)}
.ds-filter-search input{
  flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:14px;color:var(--foreground)
}
.ds-filter-search input::-webkit-search-cancel-button{cursor:pointer}
.ds-filter-search button{
  flex-shrink:0;height:32px;padding:0 15px;border:0;border-radius:8px;cursor:pointer;
  background:var(--primary);color:#fff;font-family:inherit;font-size:13px;font-weight:700;
  transition:background .18s
}
.ds-filter-search button:hover{background:var(--primary-hover)}

.ds-filter-tools{display:flex;align-items:center;gap:9px;flex-shrink:0}


.ds-filter-toggle{
  display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;
  border:1.5px solid var(--border);border-radius:11px;background:var(--card);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--foreground);
  transition:border-color .18s,background .18s
}
.ds-filter-toggle:hover,.ds-filter-toggle[aria-expanded="true"]{
  border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent)
}
.ds-filter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--primary);color:#fff;font-size:11px;font-weight:800
}

/* Active filter chips */
.ds-filter-active{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.ds-filter-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;text-decoration:none;
  background:color-mix(in srgb,var(--primary) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);
  color:var(--primary);font-size:12.5px;font-weight:700;
  transition:background .18s
}
.ds-filter-chip:hover{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.ds-filter-clear{
  font-size:12.5px;font-weight:700;color:var(--muted-foreground);text-decoration:underline
}
.ds-filter-clear:hover{color:var(--primary)}

/* Panel */
.ds-filter-panel{
  display:grid;grid-template-columns:1fr;gap:20px;
  margin-top:11px;padding:20px;
  border:1px solid var(--border);border-radius:14px;background:var(--card);
  box-shadow:0 1px 2px rgba(18,31,52,.04),0 12px 28px -22px rgba(18,31,52,.35);
  animation:dsFilterIn .24s cubic-bezier(.2,.9,.3,1.05) both
}
@keyframes dsFilterIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* A rule between the two groups reads better than relying on the gap alone,
   which left them looking like one long list on wide screens. */
@media (min-width:1040px){
  /* Categories | rule | Price | rule | Sort */
  .ds-filter-panel{grid-template-columns:1.5fr 1px .95fr 1px .8fr;gap:0 24px;padding:22px 24px}
  /* Every child is placed by hand. The two rules are the grid's ::before and
     ::after, and pseudo-elements come first in the auto-placement order — left
     to flow, they pushed each group one column right and spilled the last one
     onto a second row. */
  .ds-filter-panel > .ds-filter-group:nth-of-type(1){grid-column:1;grid-row:1}
  .ds-filter-panel > .ds-filter-group:nth-of-type(2){grid-column:3;grid-row:1}
  .ds-filter-panel > .ds-filter-group:nth-of-type(3){grid-column:5;grid-row:1}
  .ds-filter-panel::before{grid-column:2;grid-row:1}
  .ds-filter-panel::after {grid-column:4;grid-row:1}
  .ds-filter-panel::before,
  .ds-filter-panel::after{
    content:"";align-self:stretch;
    background:linear-gradient(180deg,transparent,var(--border) 12%,var(--border) 88%,transparent)
  }
}

/* Tablet: two columns, sort drops beneath price rather than being squeezed. */
@media (min-width:760px) and (max-width:1039px){
  .ds-filter-panel{grid-template-columns:1.4fr 1fr;gap:22px 26px;padding:20px 22px}
  .ds-filter-panel > .ds-filter-group:nth-of-type(1){grid-column:1;grid-row:1 / span 2}
  .ds-filter-panel > .ds-filter-group:nth-of-type(2){grid-column:2;grid-row:1}
  .ds-filter-panel > .ds-filter-group:nth-of-type(3){grid-column:2;grid-row:2}
}
.ds-filter-panel[hidden]{display:none}

.ds-filter-group h4{
  display:flex;align-items:center;gap:7px;
  margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-foreground)
}
.ds-filter-group h4::before{
  content:"";width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--accent))
}

/* Categories */
.ds-filter-cats{display:flex;flex-wrap:wrap;gap:7px}
.ds-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;text-decoration:none;
  border:1.5px solid var(--border);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--foreground);
  transition:border-color .18s,background .18s,color .18s
}
.ds-cat:hover{border-color:var(--primary);color:var(--primary)}
.ds-cat.active{background:var(--primary);border-color:var(--primary);color:#fff}
.ds-cat-n{
  font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:99px;
  background:var(--muted);color:var(--muted-foreground)
}
.ds-cat.active .ds-cat-n{background:rgba(255,255,255,.24);color:#fff}
/* Hidden until "Show N more" — 30+ categories at once was the original problem. */
.ds-filter-cats .is-extra{display:none}
.ds-filter-group.is-expanded .ds-filter-cats .is-extra{display:inline-flex}

.ds-cat-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;
  border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:var(--primary)
}
.ds-cat-more svg{transition:transform .22s}
.ds-filter-group.is-expanded .ds-cat-more svg{transform:rotate(180deg)}
.ds-cat-less-txt{display:none}
.ds-filter-group.is-expanded .ds-cat-more-txt{display:none}
.ds-filter-group.is-expanded .ds-cat-less-txt{display:inline}

/* Price */
.ds-price-inputs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-price-field{
  display:inline-flex;align-items:center;gap:4px;flex:1 1 92px;min-width:0;
  height:42px;padding:0 11px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);
  transition:border-color .18s
}
.ds-price-field:focus-within{border-color:var(--primary)}
.ds-price-sym{font-size:13px;font-weight:700;color:var(--muted-foreground)}
.ds-price-field input{
  flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--foreground);
  -moz-appearance:textfield
}
.ds-price-field input::-webkit-outer-spin-button,
.ds-price-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ds-price-dash{color:var(--muted-foreground);flex-shrink:0}
.ds-price-go{
  flex-shrink:0;height:42px;padding:0 18px;border:0;border-radius:10px;cursor:pointer;
  background:var(--foreground);color:#fff;font-family:inherit;font-size:13px;font-weight:700;
  transition:background .18s
}
.ds-price-go:hover{background:var(--primary)}

@media (max-width:560px){
  .ds-filters-bar{padding:10px}
  .ds-filter-search{flex:1 1 100%}
  .ds-filter-tools{width:100%}
}

/* Price bands — one tap instead of typing two numbers. */
.ds-price-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.ds-price-band{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:999px;text-decoration:none;
  border:1.5px solid var(--border);background:var(--card);
  font-size:12.5px;font-weight:600;color:var(--foreground);white-space:nowrap;
  transition:border-color .18s,background .18s,color .18s
}
.ds-price-band:hover{border-color:var(--primary);color:var(--primary)}
.ds-price-band.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* The manual range reads as the fallback it is. */
.ds-filter-price::before{
  content:attr(data-label);display:block;margin-bottom:7px;
  font-size:11.5px;font-weight:600;color:var(--muted-foreground)
}

/* Cap a long category list so the panel can't become a wall of chips; the
   list scrolls inside its own box instead of growing the whole panel. */
.ds-filter-cats{max-height:230px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.ds-filter-cats::-webkit-scrollbar{width:5px}
.ds-filter-cats::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted-foreground) 28%,transparent);border-radius:99px
}

/* Sort options — a list rather than a <select>, so the choices are visible at
   a glance and match the chips beside them. */
.ds-sort-list{display:flex;flex-direction:column;gap:2px}
.ds-sort-opt{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:9px;text-decoration:none;
  font-size:13px;font-weight:600;color:var(--foreground);
  transition:background .16s,color .16s
}
.ds-sort-opt:hover{background:var(--muted);color:var(--primary)}
.ds-sort-dot{
  width:15px;height:15px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--border);background:var(--card);
  transition:border-color .16s,box-shadow .16s
}
.ds-sort-opt.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.ds-sort-opt.active .ds-sort-dot{
  border-color:var(--primary);
  box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 9px var(--primary)
}

/* Sort options wrap into a row on narrow screens — a 6-item vertical list is a
   lot of height on a phone. */
@media (max-width:759px){
  .ds-sort-list{flex-direction:row;flex-wrap:wrap;gap:7px}
  .ds-sort-opt{
    padding:7px 12px;border:1.5px solid var(--border);border-radius:999px;font-size:12.5px
  }
  .ds-sort-opt.active{border-color:var(--primary)}
  .ds-sort-dot{display:none}
}

/* ===== Order success receipt =====
   The popup replaces WooCommerce's order-received page, so this block is the
   customer's only confirmation — and the thing Print / Save PDF captures. */

.so-receipt{
  text-align:left;border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;margin:0 0 14px;background:var(--card)
}
.so-receipt-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--border)
}
.so-receipt-shop{font-size:13.5px;font-weight:700;color:var(--foreground)}
.so-receipt-logo{display:block;width:auto;height:30px;max-width:180px;object-fit:contain}
.so-receipt-date{font-size:12px;color:var(--muted-foreground)}

/* Order number + copy, now a row rather than a centred stack */
.so-done .so-done-oid{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  width:100%;margin:0 0 12px;padding:9px 12px;text-align:left
}
.so-done .so-done-oid-label{flex:0 0 auto}
.so-done .so-done-oid .so-oid{flex:1 1 auto;font-size:16px}

.so-copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--muted-foreground);
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s
}
.so-copy:hover{border-color:var(--primary);color:var(--primary)}
.so-copy.is-copied{border-color:#0f7b3f;color:#0f7b3f;background:#eafaf0}

/* Items */
.so-receipt-items{list-style:none;margin:0;padding:0}
.so-receipt-items li{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px
}
.so-receipt-items li:last-child{border-bottom:0}
.so-r-item-name{min-width:0;color:var(--foreground);line-height:1.4}
.so-r-item-qty{color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.so-r-item-total{font-weight:600;color:var(--foreground);font-variant-numeric:tabular-nums}

/* Totals */
.so-receipt-totals{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size:13px}
.so-receipt-totals > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.so-receipt-totals dt{color:var(--muted-foreground);margin:0}
.so-receipt-totals dd{margin:0;font-variant-numeric:tabular-nums;color:var(--foreground)}
.so-receipt-grand{
  margin-top:6px;padding-top:8px !important;border-top:1px solid var(--border);
  font-size:15px;font-weight:700
}
.so-receipt-grand dt{color:var(--foreground) !important}
.so-receipt-grand dd{color:var(--primary)}
.so-receipt-pay dd{font-weight:600}

/* Delivery address */
.so-receipt-to{
  display:flex;flex-direction:column;gap:2px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--foreground);line-height:1.5
}
.so-receipt-to-label{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-foreground);font-weight:600;margin-bottom:2px
}

.so-done-actions{display:flex;gap:9px;margin-top:4px}
.so-done-actions .btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px}

@media (max-width:420px){
  .so-done-actions{flex-direction:column-reverse}
  .so-receipt-items li{grid-template-columns:1fr auto}
  .so-r-item-total{grid-column:2}
  .so-r-item-qty{grid-column:1;justify-self:start;font-size:12px}
}

/* ===== Print / Save as PDF =====
   main.js clones the receipt into #soPrintArea, a direct child of <body>, so
   printing only has to hide body's other children — no fighting the popup's
   fixed positioning or scroll clipping. */
#soPrintArea{display:none}

@media print{
  body.so-printing > *{display:none !important}
  body.so-printing > #soPrintArea{display:block !important}

  body.so-printing #soPrintArea .so-receipt{
    border:0;padding:0;margin:0;background:#fff;color:#000;font-size:12pt
  }
  body.so-printing #soPrintArea .so-receipt-shop{font-size:16pt}
  body.so-printing #soPrintArea .so-receipt-logo{
    height:auto;width:auto;max-height:18mm;max-width:60mm;
    /* Keep the brand colours instead of letting the printer wash them out. */
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  body.so-printing #soPrintArea .so-receipt-grand dd{color:#000}
  /* Copying a number off paper is not a thing. */
  body.so-printing #soPrintArea .so-copy{display:none !important}

  @page{margin:14mm}
}
/* ===== Footer: uppercase links and copyright =====
   Uppercase loses the word-shape cues people read by, so each rule adds a
   little letter-spacing and trims the size to keep the lines legible. */
footer.site-footer .ft-col-body a,
footer.site-footer .link-btn,
footer.site-footer .ft-contact-list a,
footer.site-footer .ft-contact-static,
footer.site-footer .ft-legal a,
footer.site-footer .ft-copy{
  text-transform:uppercase;
  letter-spacing:.04em
}

footer.site-footer .ft-col-body a,
footer.site-footer .link-btn{font-size:12.5px}
footer.site-footer .ft-contact-list a,
footer.site-footer .ft-contact-static{font-size:12px;line-height:1.55}
footer.site-footer .ft-legal a{font-size:11.5px}
footer.site-footer .ft-copy{font-size:11.5px}

/* An email in caps reads as shouting and gets mistaken for literal casing, so
   it keeps its own. Addresses stay uppercase — they are place names. */
footer.site-footer .ft-contact-list a[href^="mailto:"]{text-transform:none;letter-spacing:0}

/* The shop/category page heading is an h1 now; it should look exactly as it did
   when it was an h2 in the same slot. */
.section-head h1{margin:0;font-size:22px;font-weight:600}

/* Visually hidden but read by screen readers and indexed normally. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* ===================== Blog ===================== */

.nw-blog{padding:var(--section-gap) var(--page-pad) 0}
.nw-blog-head{max-width:62ch;margin:0 0 28px}
.nw-blog-head h1{margin:0 0 8px;font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.nw-blog-intro{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted-foreground)}
.nw-blog-empty{padding:40px 0;color:var(--muted-foreground)}

/* ---- post cards ---- */
.nw-post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

.nw-post-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease
}
.nw-post-card:hover{
  border-color:var(--primary);
  box-shadow:0 14px 30px -18px rgba(18,31,52,.45);
  transform:translateY(-3px)
}

.nw-post-media{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--muted);border-bottom:1px solid var(--border)
}
.nw-post-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.nw-post-card:hover .nw-post-media img{transform:scale(1.04)}
.nw-post-media-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted-foreground);opacity:.5
}

.nw-post-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 18px 18px}

.nw-post-cat{
  align-self:flex-start;display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--muted);color:var(--primary);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;transition:background .18s,color .18s
}
.nw-post-cat:hover{background:var(--primary);color:#fff}

.nw-post-title{margin:0;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.nw-post-title a{color:var(--foreground);text-decoration:none;transition:color .2s}
.nw-post-title a:hover{color:var(--primary)}

.nw-post-excerpt{
  margin:0;font-size:14px;line-height:1.6;color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.nw-post-meta{
  margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--muted-foreground)
}
.nw-post-dot{opacity:.6}

/* The newest post spans the row and shows its image beside the text. */
@media (min-width:820px){
  .nw-post-card.is-lead{grid-column:1/-1;flex-direction:row}
  /* A fixed ratio, not auto: letting a portrait photo set the height made the
     lead card twice as tall as it needed to be, with dead space beside the text. */
  .nw-post-card.is-lead .nw-post-media{flex:0 0 46%;aspect-ratio:16/9;border-bottom:0;border-right:1px solid var(--border)}
  .nw-post-card.is-lead .nw-post-body{justify-content:center;padding:28px 32px;gap:12px}
  .nw-post-card.is-lead .nw-post-title{font-size:26px;line-height:1.2}
  .nw-post-card.is-lead .nw-post-excerpt{font-size:15.5px;-webkit-line-clamp:4}
}

/* ---- single post ---- */
.nw-single{padding:0 0 var(--section-gap)}
.nw-crumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-top:20px;font-size:13px;color:var(--muted-foreground)
}
.nw-crumbs a{color:var(--muted-foreground);text-decoration:none}
.nw-crumbs a:hover{color:var(--primary);text-decoration:underline}
.nw-crumbs-current{color:var(--foreground);font-weight:500}

.nw-article-head{max-width:72ch;padding-top:22px}
.nw-article-head h1{
  margin:12px 0 10px;font-size:clamp(27px,4vw,42px);font-weight:700;
  line-height:1.15;letter-spacing:-.022em;color:var(--foreground)
}
.nw-article-meta{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted-foreground)}

.nw-article-hero{margin:26px auto 0;max-width:900px}
.nw-article-hero img{width:100%;height:auto;border-radius:14px;display:block}
.nw-article-hero figcaption{margin-top:8px;font-size:12.5px;color:var(--muted-foreground);text-align:center}

/* One comfortable reading measure, whatever the editor produced. */
.nw-article-body{max-width:72ch;margin-top:30px;font-size:17px;line-height:1.75;color:var(--foreground)}

/* Reset before the flow rule, for the reason spelled out on .nw-page-body. */
.nw-article-body :where(p,ul,ol,figure,blockquote){margin:0}
.nw-article-body :where(ul,ol){padding-left:1.35em}

.nw-article-body > * + *{margin-top:1.15em}
.nw-article-body h2{margin-top:1.9em;font-size:25px;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.nw-article-body h3{margin-top:1.6em;font-size:20px;font-weight:700;line-height:1.3}
.nw-article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.nw-article-body li + li{margin-top:.45em}
.nw-article-body img{border-radius:12px;height:auto}
.nw-article-body blockquote{
  margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--primary);
  font-size:19px;line-height:1.6;color:var(--foreground)
}
.nw-article-body blockquote p{margin:0}
.nw-article-body code{
  background:var(--muted);padding:2px 6px;border-radius:5px;font-size:.9em
}
.nw-article-body hr{margin:2em 0;border:0;border-top:1px solid var(--border)}
.nw-article-body table{width:100%;border-collapse:collapse;font-size:15px}
.nw-article-body th,.nw-article-body td{padding:9px 12px;border:1px solid var(--border);text-align:left}
.nw-article-body th{background:var(--muted);font-weight:700}

.nw-article-tags{max-width:72ch;margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.nw-article-tags a{
  padding:4px 11px;border-radius:999px;background:var(--muted);
  font-size:12.5px;color:var(--muted-foreground);text-decoration:none
}
.nw-article-tags a:hover{background:var(--primary);color:#fff}

.nw-related{margin-top:var(--section-gap);padding-top:32px;border-top:1px solid var(--border)}
.nw-related > h2{margin:0 0 20px;font-size:21px;font-weight:700;letter-spacing:-.01em}

/* Pagination shared by the archive */
.nw-blog .navigation.pagination{margin-top:32px}
.nw-blog .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.nw-blog .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--card);
  color:var(--foreground);text-decoration:none;font-size:14px;font-weight:600
}
.nw-blog .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.nw-blog .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.nw-blog .page-numbers.dots{border:0;background:none}

@media (max-width:600px){
  .nw-article-body{font-size:16px}
  .nw-post-grid{gap:18px}
}

/* ===== Space above the footer =====
   The home page and single posts already end with a section that carries
   --section-gap of bottom padding. The blog archive and the WooCommerce
   archives did not, so the footer butted straight against the last card.
   Fixed at the source rather than by giving the footer a top margin, which
   would have doubled the gap on the two page types that were already right. */
.nw-blog{padding-bottom:var(--section-gap)}
.wc-page{padding-bottom:var(--section-gap)}

/* The checkout modal reuses .wc-page in a tight panel and sets its own. */
.ds-modal-checkout .wc-page{padding-bottom:16px}

/* Breathing room under the header. The blog archive already had it; the
   WooCommerce archives started flush against the nav, and a single post's
   breadcrumb sat almost on top of it. */
.wc-page{padding-top:var(--section-gap)}
.nw-single .nw-crumbs{padding-top:28px}

/* The checkout modal reuses .wc-page and must stay compact. */
.ds-modal-checkout .wc-page{padding-top:10px}

/* ===================== About / Contact pages ===================== */

.nw-page{padding:var(--section-gap) 0}
/* These elements ARE the .container, so overriding max-width here would let
   its auto margins centre a narrow block away from the sections below it.
   The line length is constrained on the children instead. */
.nw-page-head{margin-bottom:34px}
.nw-page-head > *{max-width:64ch}
.nw-page-eyebrow{
  display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;
  background:var(--muted);color:var(--primary);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase
}
.nw-page-head h1{
  margin:0 0 12px;font-size:clamp(28px,4vw,42px);font-weight:700;
  line-height:1.13;letter-spacing:-.022em
}
.nw-page-intro{margin:0;font-size:17px;line-height:1.65;color:var(--muted-foreground)}

.nw-page-body{font-size:16.5px;line-height:1.75}
.nw-page-body > *{max-width:72ch}

/* Clear the browser's own margins first, then let one rule own the rhythm.
   Order matters as much as specificity here: :where() drops these to the same
   weight as the flow rule below, so whichever is written last wins — and a
   reset that lands last silently deletes the spacing it was meant to hand over. */
.nw-page-body :where(p,ul,ol,figure,blockquote){margin:0}
.nw-page-body :where(ul,ol){padding-left:1.35em}

.nw-page-body > * + *{margin-top:1.1em}
.nw-page-body h2{margin-top:1.8em;font-size:24px;font-weight:700;letter-spacing:-.015em}
.nw-page-body h3{margin-top:1.5em;font-size:19px;font-weight:700}
.nw-page-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.nw-page-body li + li{margin-top:.4em}

/* ---- stats ---- */
.nw-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-bottom:44px;background:var(--border);
  border:1px solid var(--border);border-radius:14px;overflow:hidden
}
.nw-stat{display:flex;flex-direction:column;gap:4px;padding:22px 20px;background:var(--card);text-align:center}
.nw-stat-value{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1;color:var(--primary);letter-spacing:-.02em}
.nw-stat-label{font-size:13px;color:var(--muted-foreground)}

/* ---- values ---- */
.nw-values{margin-top:52px}
.nw-values > h2{margin:0 0 22px;font-size:24px;font-weight:700;letter-spacing:-.015em}
.nw-value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.nw-value{
  padding:22px;background:var(--card);border:1px solid var(--border);border-radius:14px;
  transition:border-color .25s,box-shadow .25s
}
.nw-value:hover{border-color:var(--primary);box-shadow:0 12px 26px -18px rgba(18,31,52,.4)}
.nw-value-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:12px;
  background:var(--muted);color:var(--primary)
}
.nw-value h3{margin:0 0 7px;font-size:16.5px;font-weight:700;line-height:1.3}
.nw-value p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted-foreground)}

/* ---- closing banner ---- */
.nw-page-cta{margin-top:56px}
.nw-page-cta-inner{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:30px 32px;border-radius:16px;background:var(--foreground);color:#fff
}
.nw-page-cta h2{margin:0 0 6px;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.015em}
.nw-page-cta p{margin:0;font-size:14.5px;color:rgba(255,255,255,.75);max-width:52ch}
.nw-page-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.nw-page-cta-actions .btn{display:inline-flex;align-items:center;gap:8px}
.nw-page-cta-actions .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.nw-page-cta-actions .btn-outline:hover{background:rgba(255,255,255,.12)}

/* ---- contact methods ---- */
.nw-contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.nw-method{
  display:flex;flex-direction:column;gap:3px;padding:22px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s
}
.nw-method:hover{border-color:var(--primary);box-shadow:0 12px 26px -18px rgba(18,31,52,.4);transform:translateY(-2px)}
.nw-method-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;margin-bottom:10px;
  background:var(--muted);color:var(--primary)
}
.nw-method.is-wa .nw-method-ico{background:#e7f8ee;color:#128C7E}
.nw-method-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-foreground)}
.nw-method-value{font-size:15.5px;font-weight:700;color:var(--foreground);line-height:1.35;overflow-wrap:anywhere}
.nw-method-note{margin-top:4px;font-size:13px;color:var(--muted-foreground);line-height:1.5}

/* ---- hours / social ---- */
.nw-contact-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.nw-contact-card{padding:22px;background:var(--card);border:1px solid var(--border);border-radius:14px}
.nw-contact-card h2{margin:0 0 12px;font-size:16.5px;font-weight:700}
.nw-contact-hours{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:15px;font-weight:600;color:var(--foreground)}
.nw-contact-hours svg{color:var(--primary);flex:none}
.nw-contact-fine{margin:0;font-size:13px;line-height:1.55;color:var(--muted-foreground)}
.nw-contact-social{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:10px}
.nw-contact-social a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--muted);color:var(--foreground);transition:background .2s,color .2s
}
.nw-contact-social a:hover{background:var(--primary);color:#fff}

/* ---- map ---- */
.nw-contact-map{margin-top:26px}
.nw-contact-map iframe{width:100%;height:380px;border:0;border-radius:14px;display:block}
.nw-map-link{
  display:inline-flex;align-items:center;gap:9px;padding:14px 20px;
  border:1px solid var(--border);border-radius:12px;background:var(--card);
  color:var(--foreground);text-decoration:none;font-size:14.5px;font-weight:600;
  transition:border-color .2s,color .2s
}
.nw-map-link svg{color:var(--primary)}
.nw-map-link:hover{border-color:var(--primary);color:var(--primary)}

@media (max-width:600px){
  .nw-page-cta-inner{padding:24px 20px}
  .nw-page-cta-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ===================== Page titles ===================== */

/* Every page-level heading is set in caps. Article titles are deliberately
   left out: a headline-length sentence in caps is measurably slower to read,
   and these are the one place on the site that carries running prose.

   The negative tracking on these headings is tuned for lowercase — it exists
   to close the gaps under ascenders and descenders. Caps have neither, so the
   same value jams the letters together. They get a hair of positive tracking
   back instead. */
.nw-page-head h1,
.nw-blog-head h1,
.nw-basic-title,
.error-title{
  text-transform:uppercase;
  letter-spacing:.008em
}

/* Cart, Wishlist, Compare and any other page on the default template. These
   values were inline on the element until now, which put them out of reach of
   the rule above. */
.nw-basic-title{font-size:28px;font-weight:700;margin:0 0 16px}

/* ===================== Sold counter ===================== */

/* Deliberately quiet. This sits next to the price on three different surfaces,
   and a loud pill competing with the price for attention makes the card harder
   to scan, not more persuasive. */
.nw-sold{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;line-height:1;
  color:var(--muted-foreground);
  white-space:nowrap
}
.nw-sold svg{color:var(--primary);flex:none}

/* Card: its own line under the price. The price row already carries a
   struck-through original on sale items and has no room to spare. */
.nw-sold.is-card{margin-top:6px}

/* Product page: sits under the price block, which is why it needs its own
   top margin rather than inheriting the summary's flow spacing. The right
   margin is the gap to the viewer count, which shares this line — the two are
   printed by separate hooks and have no common parent to space them. */
.nw-sold.is-single{margin:-4px 16px 14px 0;font-size:13px}

.nw-sold.is-popup{margin:2px 0 10px;font-size:12.5px}

@media (max-width:480px){
  .nw-sold.is-card{font-size:11.5px;margin-top:5px}
}

/* ===================== Star rating & viewers ===================== */

/* Moved here from home.css: stars used to appear only in the homepage blocks,
   and home.css is enqueued on the front page alone. They now render on the
   shop, the product page and the details popup, so they belong in the
   stylesheet that loads everywhere. */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E")}
.hx-stars{display:inline-flex;gap:2px}
.hx-star{
  position:relative;width:13px;height:13px;background:var(--border);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat
}
.hx-star i{display:block;height:100%;background:var(--accent)}
.hx-star-count{font-size:11.5px;color:var(--muted-foreground)}

.nw-rating{display:inline-flex;align-items:center;gap:6px;line-height:1}
.nw-rating-value{font-size:12.5px;font-weight:700;color:var(--foreground)}

.nw-rating.is-card{margin:0 0 8px}
.nw-rating.is-single{margin:0 0 10px}
.nw-rating.is-single .hx-star{width:15px;height:15px}
.nw-rating.is-single .nw-rating-value{font-size:14px}
.nw-rating.is-popup{margin:0 0 8px}

/* Viewer count. Green rather than the brand red: it is a live signal, not an
   offer, and red here competes with the price and the discount badge. */
.nw-viewing{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;line-height:1.2;
  color:var(--muted-foreground)
}
.nw-viewing svg{color:#1a9a5f;flex:none}
.nw-viewing b{font-weight:700;color:var(--foreground);font-variant-numeric:tabular-nums}
.nw-viewing.is-single{margin:0 0 14px;font-size:13px}
.nw-viewing.is-popup{margin:0 0 10px}

@media (max-width:480px){
  .nw-rating.is-card{margin-bottom:6px}
  .nw-rating.is-card .hx-star{width:12px;height:12px}
  .nw-rating.is-card .nw-rating-value{font-size:12px}
}

/* ===================== Details popup: signal row & buy block ===================== */

/* Rating, sold count and viewers on one line. They answer the same question —
   what other people made of this — and were previously split either side of
   the price, which read as three unrelated notes. */
.nw-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 14px;margin:0 0 10px
}
.nw-meta-row > *{margin:0 !important}

/* The nudge lives inside the buy card now, directly under the stepper it acts
   on. It has to span the card rather than sit in the CTA row beside it. */
.sd-buy-row .ds-ws-nudge{flex:1 0 100%;order:5}

@media (max-width:560px){
  .nw-meta-row{gap:4px 10px}
  .ds-ws-nudge{font-size:12px;padding:5px 5px 5px 9px;gap:6px}
  .ds-ws-nudge-go{padding:2px 8px;font-size:10.5px}
}

/* ===================== Specification table ===================== */

/* Replaces the fixed size chart. Column count is whatever the shop entered, so
   nothing here may assume three of anything. */
.nw-spec-title{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em}

/* A narrow table on a wide screen looks unfinished, but stretching two columns
   across 1200px puts the value a long way from the label. Capped instead. */
.nw-spec{max-width:760px}
.nw-spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}

.nw-spec-table{
  width:100%;border-collapse:collapse;font-size:14px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden
}
.nw-spec-table th,
.nw-spec-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.nw-spec-table thead th{background:var(--muted);font-weight:700;color:var(--foreground);white-space:nowrap}
.nw-spec-table tbody tr:last-child > *{border-bottom:0}
.nw-spec-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--muted) 45%,transparent)}

/* The first cell of each row is a <th scope="row"> for screen readers; it must
   still read as a label rather than inherit the thead's filled style. */
.nw-spec-table tbody th{font-weight:700;color:var(--primary);background:none}

@media (max-width:560px){
  .nw-spec-table{font-size:13px}
  .nw-spec-table th,.nw-spec-table td{padding:9px 11px}
}

/* ===================== Category grid page ===================== */

.nw-cats .nw-page-head{margin-bottom:26px}

.nw-cat-grid{
  display:grid;
  /* auto-fill, not auto-fit: with a handful of departments auto-fit stretches
     each tile across the whole row and the images go billboard-sized. */
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;
  margin-bottom:44px
}

/* One shape for every tile. The card is the link — there is nothing inside it
   that goes anywhere else, so a nested anchor would only be a second target for
   the same destination. */
.nw-cat-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s
}
.nw-cat-card:hover{
  border-color:var(--primary);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.22);
  transform:translateY(-3px)
}
.nw-cat-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.nw-cat-thumb{
  display:block;position:relative;
  aspect-ratio:4/3;overflow:hidden;background:var(--muted)
}
.nw-cat-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.nw-cat-card:hover .nw-cat-thumb img{transform:scale(1.06)}

/* Categories without an image fall back to a tinted initial — 18 of the
   catalogue's terms have no thumbnail, so this is the common case, not the
   exception, and it has to look deliberate. */
.nw-cat-thumb .cat-initial{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-size:clamp(34px,6vw,52px);font-weight:700;
  color:hsl(var(--tint) 55% 42%);
  background:hsl(var(--tint) 60% 95%)
}

.nw-cat-text{display:block;padding:13px 15px 14px}

/* Two lines, always. A long department name is clamped rather than allowed to
   push the meta line down and make one tile taller than its neighbours. */
.nw-cat-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
  font-size:15px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;text-transform:uppercase
}
.nw-cat-count{
  display:block;margin-top:4px;font-size:12.5px;color:var(--muted-foreground);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

.nw-cats-empty{color:var(--muted-foreground);margin:0 0 40px}

@media (max-width:560px){
  .nw-cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .nw-cat-text{padding:11px 12px 12px}
  .nw-cat-name{font-size:13.5px}
  .nw-cat-count{font-size:11.5px}
}

/* Labels ride inside their own track now, so a long one ellipses instead of
   widening the bar. */
@media (max-width:767px){
  .bottom-nav .bn-item > span{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
}