/* ===== Denim Store 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:#f7f8fa;
  --foreground:#121f34;
  --card:#ffffff;
  --muted:#f1f3f7;
  --muted-foreground:#68718a;
  --border:#e2e6ed;
  --primary:#d21c3e;
  --primary-hover:#b21634;
  --primary-foreground:#ffffff;
  --destructive:#dc2626;
  --accent:#f5a524;
  --accent-foreground:#121f34;
  /* Single source of truth for page width. */
  --page-max:1400px;
  --page-pad:24px;
  /* 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%;
  overflow-x:hidden;
}
body{
  margin:0;
  overflow-x:hidden;
  font-family:'Poppins','Roboto',system-ui,-apple-system,'Segoe UI','Noto Sans Bengali',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:var(--foreground);color:#fff;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .18s ease,transform .18s ease
}
.hx-ico-btn:hover::after,.hx-ico-btn:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media (hover:none){ .hx-ico-btn::after{display:none} }

/* Labelled buttons, always visible — the feature slot has the room for them. */
.hx-full-actions{display:flex;gap:8px;margin-top:16px}
/* Grid cards: one primary bar plus a compact cart square. Two stacked
   full-width buttons made every card bottom-heavy and turned the grid into
   a wall of red. */
.hx-full-actions.is-compact{gap:6px;margin-top:12px}
.hx-full-actions.is-compact .hx-full-order{flex:1;height:38px;font-size:12.5px;padding:0 10px}
.hx-full-actions.is-compact .hx-full-cart{
  position:relative;flex:0 0 38px;width:38px;height:38px;padding:0;gap:0
}
.hx-full-actions.is-compact .hx-full-cart span{display:none}
/* Label moves into a tooltip since the button is icon-only here. */
.hx-full-actions.is-compact .hx-full-cart::after{
  content:attr(aria-label);
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:5px 10px;border-radius:6px;
  background:var(--foreground);color:#fff;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:5;
  transition:opacity .18s ease,transform .18s ease
}
.hx-full-actions.is-compact .hx-full-cart:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media (hover:none){ .hx-full-actions.is-compact .hx-full-cart::after{display:none} }
.hx-full-btn{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 12px;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .18s ease
}
.hx-full-btn svg{flex-shrink:0}
.hx-full-order{background:var(--primary);color:#fff;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--primary) 85%,transparent)}
.hx-full-order:hover:not([disabled]){background:var(--primary-hover);transform:translateY(-2px)}
.hx-full-order[disabled]{background:var(--muted);color:var(--muted-foreground);box-shadow:none;cursor:not-allowed}
.hx-full-cart{background:var(--card);color:var(--foreground);border-color:var(--border)}
.hx-full-cart:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.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}
/* Labels are the first thing to go when the column gets tight. */
@media (max-width:1100px) and (min-width:900px){ .hx-full-btn span{display:none} .hx-full-btn{padding:0 8px} }

/* ===== 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 18px}
.sp-sizes-label{display:block;font-size:13px;font-weight:700;color:var(--foreground);margin:0 0 8px;transition:color .15s}
.sp-size-pills{display:flex;flex-wrap:wrap;gap:8px}
.sp-size-pill{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:38px;padding:0 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);font-size:14px;font-weight:700;color:var(--foreground);cursor:pointer;font-family:inherit;transition:all .15s;-webkit-tap-highlight-color:transparent}
.sp-size-pill:hover{border-color:var(--primary);color:var(--primary)}
.sp-size-pill.selected{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 10px -3px color-mix(in srgb,var(--primary) 50%,transparent)}
/* 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}

/* 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 ===== */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(253,250,245,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-around;align-items:center;
  padding:6px 0;
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted-foreground);padding:4px 10px;flex:1;text-align:center}
.bottom-nav a:hover,.bottom-nav a.active{color:var(--primary)}
.bottom-nav svg{width:22px;height:22px}
@media (min-width:768px){ .bottom-nav{display:none} }

/* 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 — navy ground, matching the top bar and enquiry section =====
   Five zones: brand, two menu-driven link columns, departments, contact.
   The link columns are <details> so they collapse on phones (main.js forces
   them open above 768px); everything else is a plain grid cell. */
footer.site-footer{
  margin-top:0;background:var(--foreground);color:rgba(255,255,255,.72);
  border-top:0;
  /* A hairline of brand colour so the footer reads as a deliberate edge
     rather than the page simply running out. */
  border-top:3px solid var(--primary)
}
footer.site-footer .ft-main{
  max-width:var(--page-max);margin:0 auto;padding:48px var(--page-pad) 40px
}
footer.site-footer .ft-grid{display:grid;grid-template-columns:1fr;gap:8px}
/* Multi-column only from the width where the columns stop collapsing (768px).
   Splitting sooner puts a collapsed accordion beside a tall contact block, and
   its divider then stretches the full height of the grid row. */
@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:1000px){
  footer.site-footer .ft-grid{grid-template-columns:1.7fr 1fr 1fr 1fr 1.4fr;gap:40px 32px}
  footer.site-footer .ft-brand{grid-column:auto}
}

footer.site-footer h4,
footer.site-footer .ft-col>summary{
  margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff
}
footer.site-footer p,footer.site-footer span,footer.site-footer li{color:rgba(255,255,255,.72)}
footer.site-footer a{
  color:rgba(255,255,255,.72);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:19px;font-weight:700;
  letter-spacing:-.01em;text-transform:none;color:#fff
}
footer.site-footer .footer-tag{
  margin:0 0 18px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.6);
  max-width:34ch
}
footer.site-footer .site-logo img,
footer.site-footer .custom-logo,
footer.site-footer .custom-logo-link img{max-height:52px;width:auto;margin-bottom:12px;display:block}
footer.site-footer .ft-social{display:flex;flex-wrap:wrap;gap:8px}
footer.site-footer .social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .2s ease,transform .2s ease
}
footer.site-footer .social-btn:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}

/* --- link columns --- */
/* align-self keeps a short column's divider from being stretched to the
   height of the tallest cell in the row. */
footer.site-footer .ft-col{border:0;align-self:start}
footer.site-footer .ft-col>summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;list-style:none;padding:0
}
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}
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}
footer.site-footer .ft-col-body a,
footer.site-footer .link-btn{
  display:block;padding:5px 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,.72);transition:color .2s ease,transform .2s ease
}
footer.site-footer .ft-col-body a:hover,
footer.site-footer .link-btn:hover{color:#fff;transform:translateX(3px)}

/* --- contact column --- */
footer.site-footer .ft-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer.site-footer .ft-contact-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5}
footer.site-footer .ft-contact-ico{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;margin-top:-3px;
  background:rgba(255,255,255,.08);color:var(--accent)
}
footer.site-footer .ft-contact-list a,
footer.site-footer .ft-contact-static{display:block;min-width:0;overflow-wrap:anywhere}
footer.site-footer .ft-contact-list a:hover{color:#fff}

/* --- payment strip --- */
footer.site-footer .ft-pay{border-top:1px solid rgba(255,255,255,.1)}
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;gap:10px 14px
}
footer.site-footer .ft-pay-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5)
}
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{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8)
}

/* --- bottom bar --- */
footer.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  max-width:var(--page-max);margin:0 auto;
  padding:16px var(--page-pad);font-size:12.5px;color:rgba(255,255,255,.55)
}
footer.site-footer .footer-bottom span{color:rgba(255,255,255,.55)}
footer.site-footer .ft-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
footer.site-footer .ft-legal a{font-size:12.5px;color:rgba(255,255,255,.6)}
footer.site-footer .ft-legal a:hover{color:#fff}
.cart-pill{background:var(--primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:2px}

/* ===== Bottom Nav ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--border);box-shadow:0 -2px 8px rgba(0,0,0,.06)}
@media (min-width:768px){ .bottom-nav{display:none} }
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:10px;color:var(--muted-foreground)}
.bottom-nav a svg{width:20px;height:20px}
.bottom-nav a.active{color:var(--primary)}

/* ===== 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: 8px; justify-content: center; }
.so-size {
  min-width: 46px;
  padding: 10px 16px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
}
.so-size:hover { border-color: var(--primary); transform: translateY(-1px); }
.so-size.active {
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  border-color: var(--primary);
  box-shadow: 0 5px 14px -4px color-mix(in srgb, var(--primary) 65%, 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: 13.5px;
  font-weight: 600;
  color: var(--foreground, #0F172A);
  line-height: 1.3;
}
.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 ===== */
#soDetailsModal .so-modal-panel{
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  width:calc(100% - 32px);max-width:920px;max-height:90vh;border-radius:18px
}
/* 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:6;
  width:36px;height:36px;border:0;border-radius:50%;
  background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--foreground);
  font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background .2s,color .2s
}
#soDetailsModal .so-modal-close:hover{background:var(--primary);color:#fff}

.sd-back-trigger{
  position:absolute;top:12px;left:12px;z-index:6;
  display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px 0 10px;border:0;border-radius:999px;
  background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--foreground);
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background .2s,color .2s
}
.sd-back-trigger[hidden]{display:none}
.sd-back-trigger:hover{background:var(--primary);color:#fff}

/* ---------- Front face ---------- */
/* On mobile the whole body scrolls as one column. On desktop only the info
   side scrolls: previously the grid itself scrolled, so a long right column
   stretched the row and left the vertically-centred image stranded in a large
   empty band. Holding the media column also keeps the product in view while
   the customer reads down the rates. */
.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,.92fr) minmax(0,1.08fr);overflow:hidden}
}
.sd-body[hidden]{display:none}

.sd-media{
  background:linear-gradient(160deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 55%,#fff) 100%);
  padding:22px;display:flex;align-items:center;justify-content:center;min-width:0
}
/* Column packs from the top and holds image + thumbnails as one stack. The
   column's height is set by the info side, and a square image can never fill
   it — centring one on its own is what left the large empty band. The
   thumbnail strip now occupies that space with something useful. */
@media (min-width:760px){
  .sd-media{
    padding:26px;min-height:0;overflow:hidden;
    flex-direction:column;align-items:stretch;justify-content:center;gap:12px
  }
}
.sd-carousel{
  position:relative;width:100%;max-width:100%;aspect-ratio:1;
  overflow:hidden;border-radius:14px;background:#fff;touch-action:pan-y;
  box-shadow:0 10px 30px -14px rgba(18,31,52,.28)
}
/* Stay square and hug the photo, sized to whichever of the column's width or
   height runs out first. Stretching the card to the full column height instead
   left white bands above and below the image, since product shots are square
   and object-fit:contain letterboxes them. */
@media (min-width:760px){
  .sd-carousel{width:100%;height:auto;max-width:100%;flex:0 0 auto}
}
.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}
.sd-slide img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.sd-badge{position:absolute;top:12px;left:12px;z-index:3}
.sd-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--foreground);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.16);transition:background .2s,color .2s,transform .18s
}
.sd-nav:hover{background:var(--primary);color:#fff;transform:translateY(-50%) scale(1.06)}
.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,.24);cursor:pointer;padding:0;transition:all .2s}
.sd-dot.active{background:var(--primary);width:22px;border-radius:4px}

.sd-info{display:flex;flex-direction:column;padding:22px;min-width:0}
@media (min-width:760px){
  .sd-info{padding:30px 28px 0;overflow-y:auto;min-height:0;overscroll-behavior:contain}
  .sd-info::-webkit-scrollbar{width:6px}
  .sd-info::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted-foreground) 32%,transparent);border-radius:99px}
}
/* clamp() rather than a value per breakpoint: the panel width is fluid between
   760px and its 920px cap, so fixed sizes jumped at the breakpoint and then
   stopped responding. */
.sd-name{
  margin:0 0 10px;font-size:clamp(18px,2.1vw,23px);font-weight:800;line-height:1.25;
  letter-spacing:-.02em;color:var(--foreground);text-wrap:balance
}
@media (min-width:760px){ .sd-name{padding-right:48px} }
.sd-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.sd-price{font-size:clamp(25px,3vw,31px);font-weight:800;color:var(--primary);line-height:1;letter-spacing:-.02em}
.sd-price-old{font-size:15px;color:var(--muted-foreground);text-decoration:line-through}
.sd-price-old[hidden]{display:none}
.sd-save-badge{
  margin-left:auto;background:#dcfce7;color:#15803d;
  font-size:11.5px;font-weight:800;letter-spacing:.01em;
  padding:4px 11px;border-radius:999px;white-space:nowrap
}
.sd-desc{
  font-size:13.5px;line-height:1.6;color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;flex:1 1 auto;min-width:0
}
.sd-desc:empty{display:none}
.sd-desc p{margin:0 0 8px}
.sd-desc ul{margin:0;padding-left:18px}
.sd-desc li{margin:0 0 5px}

.sd-label{margin:0 0 9px;font-size:12.5px;font-weight:700;color:var(--foreground)}
.sd-sizes-wrap,.sd-back-sizes-wrap{margin:0 0 18px}
.sd-sizes-wrap[hidden],.sd-back-sizes-wrap[hidden]{display:none}
.sd-sizes,.sd-back-sizes{display:flex;flex-wrap:wrap;gap:7px}
.sd-size-chip{
  min-width:42px;padding:8px 13px;border:1.5px solid var(--border);border-radius:9px;
  background:var(--card);font-family:inherit;font-size:13px;font-weight:700;
  color:var(--foreground);cursor:pointer;transition:all .15s
}
.sd-size-chip:hover{border-color:var(--primary);color:var(--primary)}
.sd-size-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.sd-size-chip.is-oos{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sd-size-chip.is-oos:hover{border-color:var(--border);color:var(--foreground)}
.sd-needs-pick .sd-label{color:var(--destructive)}
.sd-needs-pick .sd-sizes,.sd-needs-pick .sd-back-sizes{animation:sp-shake .4s ease}

/* No longer sticky: the CTAs now sit near the top of the column, so pinning
   them produced a white band that broke out of the buy row's tinted panel. */
.sd-actions{display:flex;gap:9px}
.sd-actions .btn{flex:1 1 0;min-width:0;height:50px;border-radius:10px;font-size:14px;white-space:nowrap}
#soDetailsModal .sd-order,
#soDetailsModal .sd-order-back{
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--primary) 80%,transparent)
}
.sd-cart{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--card);color:var(--foreground);
  border:1.5px solid var(--border);font-weight:700;text-decoration:none;
  transition:border-color .2s,color .2s,background .2s,transform .18s
}
.sd-cart:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.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}
@media (max-width:420px){ .sd-actions{flex-direction:column} .sd-actions .btn{height:46px} }
#soDetailsModal .sd-order:hover:not(:disabled),
#soDetailsModal .sd-order-back:hover:not(:disabled){transform:translateY(-2px)}

/* The description row is the only way into the back face now, so it has to
   look tappable — the clamped text plus a hover state is the "read more" cue. */
.sd-desc-row{cursor:pointer;border-radius:11px;padding:6px 8px;margin-left:-8px;margin-right:-8px;
  transition:background .18s}
.sd-desc-row:hover{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.sd-desc-row:hover .sd-flip-arrow{
  background:var(--primary);border-color:var(--primary);color:#fff;transform:translateX(2px)
}
.sd-desc-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sd-desc-row:hover .sd-desc{color:var(--foreground)}

.sd-trust{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--border)
}
.sd-trust:empty{display:none}
.sd-trust li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted-foreground);line-height:1.3}
.sd-trust svg{flex-shrink:0;color:var(--primary)}

/* ---------- Back face ---------- */
.sd-back-face{display:flex;flex-direction:column;flex:1;min-height:0}
.sd-back-face[hidden]{display:none}
.sd-back-scroll{flex:1;overflow-y:auto;min-height:0;padding:58px 26px 22px;scrollbar-width:thin}
@media (min-width:760px){ .sd-back-scroll{padding:62px 34px 26px} }
.sd-full-desc{font-size:13.5px;line-height:1.65;color:var(--muted-foreground)}
.sd-full-desc:empty{display:none}
.sd-full-desc{margin-bottom:22px}
.sd-full-desc h3{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--foreground)
}
.sd-full-desc h3::before{
  content:"";width:4px;height:15px;border-radius:2px;background:var(--primary)
}
.sd-full-desc p{margin:0 0 10px}
.sd-full-desc ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:7px}
@media (min-width:640px){ .sd-full-desc ul{grid-template-columns:1fr 1fr;gap:7px 20px} }
.sd-full-desc li{position:relative;padding-left:22px;color:var(--foreground);font-size:13px;line-height:1.55}
.sd-full-desc li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;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='%23d21c3e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px 9px no-repeat
}
.sd-full-desc table{
  width:100%;border-collapse:collapse;font-size:13px;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:6px 0 0
}
.sd-full-desc th{background:var(--muted);color:var(--foreground);font-weight:700;padding:9px 13px;text-align:left}
.sd-full-desc td{border-top:1px solid var(--border);padding:9px 13px;color:var(--foreground)}
.sd-full-desc tr:nth-child(even) td{background:color-mix(in srgb,var(--muted) 45%,transparent)}

.sd-back-sticky{flex-shrink:0;padding:16px 26px 22px;border-top:1px solid var(--border);background:var(--card)}
@media (min-width:760px){ .sd-back-sticky{padding:18px 34px 24px} }

@media (max-width:759px){
  #soDetailsModal .so-modal-panel{max-height:92vh}
  .sd-media{padding:16px 16px 0;background:transparent}
  .sd-info{padding:18px}
  .sd-name{font-size:17px;padding-right:44px}
  .sd-price{font-size:24px}
  .sd-desc{max-height:120px}
  .sd-trust{grid-template-columns:1fr}
}

/* ===== 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) */

/* ===== Bottom nav v2 (Home, Shop, Category, Call) ===== */
.bottom-nav{display:none}
@media (max-width:767px){
  .bottom-nav{display:flex;grid-template-columns:none;padding:4px 0 calc(4px + env(safe-area-inset-bottom));backdrop-filter:saturate(180%) blur(10px);background:rgba(255,255,255,.95)}
  .bottom-nav .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:500;color:var(--muted-foreground);background:transparent;border:0;padding:8px 4px;font-family:inherit;cursor:pointer;text-decoration:none}
  .bottom-nav .bn-item svg{width:22px;height:22px}
  .bottom-nav .bn-item.active,.bottom-nav .bn-item:hover{color:var(--primary)}
}

/* ===== 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)}

/* Mobile: bigger room above sticky bottom-nav */
@media (max-width:767px){ body{padding-bottom:72px} }

/* ===== 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:14px;font-weight:500}
.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 */
.shop-breadcrumb,
.shop-cat-pills a,
.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 */
/* Pagination styling lives in brand.css, on the token scale. */
@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,
.products .product .so-order-btn{padding:10px 12px;font-size:13px;min-height:40px;line-height:1.2;border-radius:8px;gap:6px}
.product-card .so-order-btn svg,
.products .product .so-order-btn svg{width:14px;height:14px}
@media (max-width:480px){
  .product-card .so-order-btn,
  .products .product .so-order-btn{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)}}
/* Pagination is hidden by the infinite-scroll script once it takes over
   (main.js sets display:none on it directly). Hiding it from CSS instead
   left a visitor with JS disabled looking at 12 products and no way to
   reach the other 111. */

/* ===== v1.8.0 — Bottom nav v3: duotone icons, active pill + indicator ===== */
@media (max-width:767px){
  .bottom-nav{
    display:flex;
    gap:2px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in oklab, var(--card) 92%, transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid color-mix(in oklab, var(--border) 65%, transparent);
    box-shadow:0 -6px 24px rgba(35,23,18,.10);
  }
  .bottom-nav .bn-item{
    position:relative;
    gap:3px;
    padding:7px 2px 5px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.2px;
    border-radius:14px;
    color:var(--muted-foreground);
    -webkit-tap-highlight-color:transparent;
    transition:color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  }
  /* soft tinted pill behind the item */
  .bottom-nav .bn-item::before{
    content:"";
    position:absolute;
    inset:2px 5px;
    border-radius:14px;
    background:color-mix(in oklab, currentColor 13%, transparent);
    opacity:0;
    transform:scale(.75);
    transition:opacity .25s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  /* thin indicator bar riding the top edge of the active tab */
  .bottom-nav .bn-item::after{
    content:"";
    position:absolute;
    top:-6px;
    left:50%;
    width:0;
    height:3px;
    border-radius:0 0 4px 4px;
    background:currentColor;
    transform:translateX(-50%);
    transition:width .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 svg{
    width:23px;height:23px;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  /* duotone: soft fill under the crisp outline */
  .bottom-nav .bn-ico-fill{fill:currentColor;stroke:none;opacity:.15;transition:opacity .25s ease}
  .bottom-nav .bn-item.active .bn-ico-fill{opacity:.28}

  .bottom-nav .bn-item.active{color:var(--primary)}
  .bottom-nav .bn-item.active::before{opacity:1;transform:scale(1)}
  .bottom-nav .bn-item.active::after{width:20px}
  .bottom-nav .bn-item.active svg{transform:translateY(-1px) scale(1.08)}
  .bottom-nav .bn-item:active{transform:scale(.93)}

  /* contact tabs read as standing action chips, not nav destinations */
  .bottom-nav .bn-wa{color:#25D366}
  .bottom-nav .bn-call{color:var(--primary)}
  /* weaker than the active pill so "current page" stays the loudest signal */
  .bottom-nav .bn-wa::before,
  .bottom-nav .bn-call::before{opacity:.55;transform:scale(1)}
  .bottom-nav .bn-wa svg,
  .bottom-nav .bn-call svg{width:22px;height:22px}

  /* clear the taller bar */
  body{padding-bottom:78px}
}
@media (prefers-reduced-motion:reduce){
  .bottom-nav .bn-item,
  .bottom-nav .bn-item::before,
  .bottom-nav .bn-item::after,
  .bottom-nav .bn-item svg{transition:none !important}
}

/* 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. */
@media (min-width:760px) and (max-width:1000px){
  #soDetailsModal .so-modal-panel{width:calc(100% - 24px)}
  .sd-body{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .sd-media{padding:18px}
  .sd-info{padding:24px 20px 0}
  .sd-back-scroll{padding:56px 22px 20px}
  .sd-back-sticky{padding:14px 22px 18px}
  .sd-qty-wrap{gap:10px}
}

/* The quantity row wraps to two lines on narrow panels; keep the stepper and
   its line total from colliding when it does. */
@media (max-width:520px){
  .sd-qty-wrap{gap:10px 12px}
  .sd-line-total{flex-basis:100%;margin-top:-2px}
}

/* 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{
  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-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. */

/* ===== 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}
}

/* ===== Details popup — compact quantity ===== */
.sd-buy-row .sd-qty button{width:30px;height:32px;font-size:15px}
.sd-buy-row .sd-qty-input{width:44px;height:32px;font-size:13.5px}
.sd-buy-row .sd-qty-label{font-size:12.5px}
.sd-buy-row .sd-line-total{font-size:12.5px}
#soDetailsModal .sd-actions .btn{height:46px;font-size:13.5px}

/* ===== Rates popup ===== */
/* Above the details modal (z-index 1000), which opens it. */

/* ===== Modal borders / definition ===== */
#soDetailsModal .so-modal-panel{border:1px solid var(--border);box-shadow:0 34px 80px rgba(18,31,52,.4)}
.sd-media{border-right:1px solid var(--border)}
@media (max-width:759px){ .sd-media{border-right:0;border-bottom:1px solid var(--border)} }
.sd-trust{border-top:1px solid var(--border)}