/* ============================================================
   WooCommerce styling — The Hat Store by Cypress
   Self-contained (Woo's own CSS is dequeued). Mobile-first.
   ============================================================ */

/* ---- shared shells ---- */
.woocommerce, .woocommerce-page { color: var(--ink); }
.woocommerce-breadcrumb{font-size:.85rem;color:var(--muted);padding-block:1.4rem .2rem;
  letter-spacing:.02em}
.woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce-breadcrumb a:hover{color:var(--navy-700)}
.woocommerce-breadcrumb .bc-sep{opacity:.5;margin:0 .2em}

/* page width wrapper for woo pages */
.woocommerce, .woocommerce-page,
.woocommerce > .woocommerce-notices-wrapper { }
body.woocommerce main.site-main,
body.woocommerce-page main.site-main{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  padding-top:1rem;padding-bottom:4rem}
body.single-product main.site-main{max-width:var(--maxw)}

/* archive header */
.woocommerce-products-header{padding:2.5rem 0 1rem;text-align:center}
.woocommerce-products-header__title,
.woocommerce-products-header h1,
h1.woocommerce-products-header__title{font-size:clamp(2rem,4.5vw,3rem);text-transform:uppercase}
.term-description{max-width:60ch;margin:.5rem auto 0;color:var(--muted)}
.hs-shop-intro{max-width:640px;margin:.6rem auto 0;text-align:center}
.hs-shop-tagline{color:var(--ink-soft);font-size:1.05rem;line-height:1.55;margin:0 0 1.2rem}
.hs-shop-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.hs-badge{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid #f1ebdf;
  box-shadow:0 3px 12px rgba(20,24,30,.05);border-radius:999px;padding:.5rem 1rem;
  font-size:.82rem;font-weight:700;color:var(--navy-700)}
.hs-badge::before{content:"\2713";color:var(--gold);font-weight:800;font-size:.95em}

.woocommerce-result-count{color:var(--muted);font-size:.9rem}
.woocommerce-ordering select{font-family:var(--font-body);border:1px solid var(--line);
  border-radius:999px;padding:.55em 1.1em;background:#fff;color:var(--ink);font-size:.9rem}

/* ============================================================ PRODUCT GRID */
ul.products{display:grid !important;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  list-style:none;margin:2rem 0 0;padding:0}
ul.products.columns-4,.hs-featured-grid{grid-template-columns:repeat(4,1fr)}
/* The homepage "Featured products" grid (a [products] shortcode) lives in a
   full-width Elementor section, so without a cap it stretched edge-to-edge and the
   square cards ballooned on wide screens. Box it to the site content width so it
   aligns with the (already-boxed) section title and the cards stay a sane size. */
.hs-featured-grid{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);box-sizing:border-box}
/* Carousel mode — main.js adds `.is-carousel` to the inner ul.products and appends
   the prev/next arrows to the .hs-featured-grid wrapper. Horizontal scroll-snap
   track; native swipe on touch. Falls back to the boxed grid above when JS is off.
   NOTE: the [products] shortcode puts `hs-featured-grid` on the wrapping DIV; the
   real grid is the ul.products inside it — hence these selectors target the ul. */
ul.products.is-carousel{display:flex!important;grid-template-columns:none!important;
  margin:0;padding:0;gap:1.6rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
ul.products.is-carousel::-webkit-scrollbar{display:none}
ul.products.is-carousel > li.product{flex:0 0 calc((100% - 3 * 1.6rem) / 4);scroll-snap-align:start}
@media(max-width:1024px){ul.products.is-carousel > li.product{flex-basis:calc((100% - 2 * 1.6rem) / 3)}}
@media(max-width:760px){ul.products.is-carousel{gap:1rem}
  /* Phone: shrink the featured cards so the next card clearly peeks (scroll hint)
     and the contain-fit image stops eating the viewport — title/price/Customize
     land above the fold. Scoped to the homepage featured carousel; the shop and
     category grids keep their square cards. */
  ul.products.is-carousel > li.product{flex-basis:62%}
  .hs-featured-grid ul.products.is-carousel > li.product img{aspect-ratio:4/3;padding:.7rem}}
/* arrows (mirror .hs-car-arrow); vertically centred on the card image via --fcarY (set in JS) */
.hs-fcar-arrow{position:absolute;top:var(--fcarY,38%);transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;border:0;background:rgba(19,40,63,.85);color:#fff;font-size:1.6rem;line-height:1;
  cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background .15s,color .15s,opacity .2s;touch-action:manipulation}
.hs-fcar-arrow:hover{background:var(--gold);color:#1c1407}
.hs-fcar-prev{left:2px}.hs-fcar-next{right:2px}
.hs-fcar-arrow.is-disabled{opacity:0;pointer-events:none}
.hs-fcar--static .hs-fcar-arrow{display:none}
@media(max-width:760px){.hs-fcar-arrow{width:36px;height:36px;font-size:1.3rem}}
ul.products li.product{margin:0 !important;width:auto !important;float:none !important;
  text-align:left;position:relative}
ul.products li.product .hs-card,
ul.products li.product > a:first-of-type{display:block}
ul.products li.product{background:#fff;border:1px solid #f1ebdf;border-radius:var(--radius);
  overflow:hidden;transition:all var(--t);display:flex;flex-direction:column;box-shadow:0 5px 18px rgba(20,24,30,.06)}
ul.products li.product:hover{transform:translateY(-5px);box-shadow:var(--shadow);
  border-color:transparent}
ul.products li.product a img,
ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:contain;
  background:#fff;margin:0;padding:1rem;transition:transform var(--t)}
ul.products li.product:hover img{transform:scale(1.04)}
/* Apparel cards (2026-07-09, operator): on-model shots are framed to the 0.757-height
 * catalog spec, so figures floated small in the tile. Drop the padding and scale the
 * image up — 0.757 x 1.22 = 0.92 of the tile, still inside the canvas margins, so
 * nothing crops (.hs-loop-thumb clips). Headwear keeps the standard framing. */
ul.products li.product.product_cat-apparel img,
ul.products li.product.product_cat-tshirts img,
ul.products li.product.product_cat-polos img,
ul.products li.product.product_cat-button-downs img,
ul.products li.product.product_cat-henleys img,
ul.products li.product.product_cat-jackets img,
ul.products li.product.product_cat-jackets-fleece img,
ul.products li.product.product_cat-sweatshirts-hoodies img,
ul.products li.product.product_cat-medical-scrubs img,
ul.products li.product.product_cat-tank-tops img,
ul.products li.product.product_cat-vests img{padding:0;transform:scale(1.22)}
ul.products li.product.product_cat-apparel:hover img,
ul.products li.product.product_cat-tshirts:hover img,
ul.products li.product.product_cat-polos:hover img,
ul.products li.product.product_cat-button-downs:hover img,
ul.products li.product.product_cat-henleys:hover img,
ul.products li.product.product_cat-jackets:hover img,
ul.products li.product.product_cat-jackets-fleece:hover img,
ul.products li.product.product_cat-sweatshirts-hoodies:hover img,
ul.products li.product.product_cat-medical-scrubs:hover img,
ul.products li.product.product_cat-tank-tops:hover img,
ul.products li.product.product_cat-vests:hover img{transform:scale(1.26)}
ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-body);
  font-weight:600;font-size:1rem;line-height:1.35;color:var(--navy-900);
  padding:1rem 1.1rem .2rem;margin:0}
ul.products li.product .price{display:block;padding:.1rem 1.1rem .2rem;color:var(--navy-700);
  font-weight:700;font-size:1.02rem;font-family:var(--font-body)}
ul.products li.product .price del{color:var(--muted);font-weight:400;margin-right:.4em}
ul.products li.product .price ins{text-decoration:none}
ul.products li.product .price .from{color:var(--muted);font-weight:500;font-size:.82em}

/* swatch dots on cards */
.loop-swatches{display:flex;gap:.35rem;align-items:center;padding:.4rem 1.1rem .2rem;flex-wrap:wrap}
.loop-swatch{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
  display:inline-block}
.loop-swatch-more{font-size:.72rem;color:var(--muted);font-weight:600}

/* add to cart button on cards */
ul.products li.product .button,
ul.products li.product .added_to_cart{margin:auto 1.1rem 1.1rem;display:inline-flex;
  align-items:center;justify-content:center;font-family:var(--font-body);font-weight:700;
  font-size:.88rem;padding:.7em 1.2em;border-radius:999px;background:var(--navy-700);color:#fff;
  border:0;transition:all var(--t);text-align:center}
ul.products li.product .button:hover{background:var(--navy-800);color:#fff}
ul.products li.product .added_to_cart{background:var(--gold);color:var(--navy-900);margin-top:.2rem}

/* onsale flag */
.woocommerce span.onsale{position:absolute;top:.8rem;left:.8rem;z-index:3;background:var(--gold);
  color:var(--navy-900);font-family:var(--font-body);font-weight:800;font-size:.72rem;
  letter-spacing:.05em;padding:.35em .8em;border-radius:999px;min-height:0;line-height:1.4;margin:0}

/* shop pagination — horizontal row of brand page buttons (was an unstyled bullet list) */
.woocommerce-pagination{margin:2.5rem 0 1rem;text-align:center}
.woocommerce-pagination ul.page-numbers{display:inline-flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem;list-style:none;margin:0 auto;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.woocommerce-pagination ul.page-numbers li{list-style:none;margin:0;padding:0;border:0}
.woocommerce-pagination ul.page-numbers li::marker{content:""}
.woocommerce-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.6rem;height:2.6rem;padding:0 .6rem;border-radius:999px;border:1px solid #ededed;
  background:#fff;color:var(--navy-700);font-family:var(--font-body);font-weight:700;font-size:.95rem;
  line-height:1;text-decoration:none;transition:all var(--t)}
.woocommerce-pagination a.page-numbers:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.woocommerce-pagination .page-numbers.current{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.woocommerce-pagination .page-numbers.dots{border-color:transparent;background:transparent;color:var(--muted)}

/* ============================================================ SHOP FILTER RAIL */
.hs-shop-layout{display:flex;gap:1.6rem;align-items:flex-start;margin-top:1.4rem}
.hs-shop-main{flex:1 1 auto;min-width:0}
.hs-shop-main ul.products{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.hs-rail{flex:0 0 234px;width:234px;background:#fff;border:1px solid #f1ebdf;border-radius:14px;
  padding:2px 0;position:sticky;top:100px;font-family:var(--font-body);align-self:flex-start;
  max-height:calc(100vh - 120px);overflow-y:auto;box-shadow:0 5px 18px rgba(20,24,30,.06)}
.hs-rail-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid #f0ece2;font-weight:800;font-size:.8rem;letter-spacing:.05em;color:var(--navy-700);text-transform:uppercase}
.hs-rail-clear{font-size:.72rem;font-weight:600;color:var(--gold);text-decoration:none;letter-spacing:0;text-transform:none}
.hs-rail-clear:hover{color:var(--navy-700)}
.hs-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:12px 16px;border-bottom:1px solid #f0ece2}
.hs-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--cream);color:var(--navy-800);
  font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);text-decoration:none}
.hs-chip:hover{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.hs-chip .hs-x{font-size:.95rem;line-height:1}
.hs-sec{border-bottom:1px solid #f0ece2}
.hs-sec:last-of-type{border-bottom:0}
.hs-sec-h{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;
  cursor:pointer;padding:13px 16px;font-family:var(--font-body);font-weight:700;font-size:.82rem;color:var(--ink)}
.hs-chev{width:8px;height:8px;border-right:2px solid #9aa3af;border-bottom:2px solid #9aa3af;
  transform:rotate(45deg);transition:transform var(--t);display:inline-block;margin-top:-3px}
.hs-sec.is-collapsed .hs-chev{transform:rotate(-45deg);margin-top:2px}
.hs-sec-b{padding:0 16px 14px}
.hs-sec.is-collapsed .hs-sec-b{display:none}
.hs-cat{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.84rem;
  color:var(--ink-soft);text-decoration:none}
.hs-cat span{color:#9aa3af;font-size:.78rem}
.hs-cat:hover{color:var(--navy-700)}
.hs-cat.is-active{color:var(--navy-700);font-weight:700}
.hs-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.hs-sw{display:flex;justify-content:center}
.hs-sw span{display:block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:transform .15s}
.hs-sw:hover span{transform:scale(1.16)}
.hs-sw.is-sel span{outline:2px solid var(--navy-700);outline-offset:2px}
.hs-swatches.hs-swatches-fam{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.hs-swatches.hs-swatches-fam .hs-sw{display:inline-flex;justify-content:flex-start;align-items:center;gap:8px;text-decoration:none}
.hs-swatches.hs-swatches-fam .hs-sw span{width:18px;height:18px;flex:0 0 18px}
.hs-swatches.hs-swatches-fam .hs-sw em{font-style:normal;font-size:.79rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-swatches.hs-swatches-fam .hs-sw:hover em{color:var(--navy-700)}
.hs-swatches.hs-swatches-fam .hs-sw.is-sel em{color:var(--navy-700);font-weight:700}
.hs-price{display:block;padding:5px 0;font-size:.84rem;color:var(--ink-soft);text-decoration:none}
.hs-price:hover{color:var(--navy-700)}
.hs-price.is-active{color:var(--navy-700);font-weight:700}
.hs-filter-toggle{display:none}
@media(max-width:900px){
  .hs-shop-layout{display:block}
  .hs-filter-toggle{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 .2rem;background:var(--navy-700);
    color:#fff;border:0;border-radius:999px;padding:.6rem 1.15rem;font-weight:700;font-size:.85rem;cursor:pointer}
  .hs-filter-toggle .hs-chev{border-color:#fff}
  .hs-rail{width:100%;flex-basis:auto;position:static;display:none;margin-bottom:1.2rem}
  .hs-rail.is-open{display:block}
}
/* Phone shop/category grid: the `auto-fill,minmax(230px,1fr)` rule (specificity
   0,2,1) otherwise outranks the generic responsive ul.products rules and collapses
   to ONE 230px column below ~460px (giant one-per-row cards). Force a clean 2-up. */
@media(max-width:560px){
  .hs-shop-main ul.products{grid-template-columns:repeat(2,1fr);gap:.75rem}
}

/* ============================================================ SINGLE PRODUCT */
.single-product div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem) clamp(2rem,5vw,4rem);margin-top:1.5rem;align-items:start}
/* (PDP) Sticky media: main.js wraps carousel + summary in .hs-pdp-top and adds
   .hs-has-sticky, so the media can pin while the taller summary scrolls — bounded
   to the top section so it never overlaps the tabs/related (which stay outside the
   wrapper). Desktop only; collapses with the grid on smaller screens. */
.single-product div.product.hs-has-sticky{display:block;margin-top:1.5rem}
.single-product .hs-pdp-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem) clamp(2rem,5vw,4rem);align-items:start}
@media(min-width:1025px){
  .single-product .hs-pdp-top .hs-carousel{position:sticky;top:96px;align-self:start}
}
@media(max-width:1024px){
  .single-product .hs-pdp-top{grid-template-columns:1fr;gap:2rem}
}
/* gallery: static (no sticky — it was scrolling/overlapping the tabs) */
.single-product div.product .woocommerce-product-gallery{margin:0;
  min-width:0;max-width:100%;overflow:hidden;align-self:start}
.single-product .woocommerce-product-gallery__wrapper{max-width:100%}
.single-product div.product .summary{min-width:0;align-self:start}
.single-product .woocommerce-product-gallery__wrapper{border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.single-product .woocommerce-product-gallery img{background:var(--cream)}
.single-product .flex-control-thumbs{display:flex;gap:.5rem;margin-top:.8rem;padding:0;flex-wrap:wrap}
.single-product .flex-control-thumbs li{width:64px !important;list-style:none}
.single-product .flex-control-thumbs img{border:1px solid var(--line);border-radius:8px;opacity:.6;
  transition:opacity var(--t)}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--gold)}

.single-product div.product .summary{margin:0}
.single-product .product_meta{font-size:.85rem;color:var(--muted);margin-top:1.5rem;
  border-top:1px solid var(--line);padding-top:1rem}
.single-product .product_meta>span{display:block;margin-bottom:.3rem}
.single-product .product_title{font-size:clamp(1.8rem,4vw,2.6rem);text-transform:none;
  line-height:1.1;margin-bottom:.6rem}
.single-product .woocommerce-product-rating{margin-bottom:1rem}
.single-product .price{font-family:var(--font-body);font-size:1.6rem;font-weight:800;
  color:var(--navy-800);margin-bottom:1.2rem}
.single-product .price del{color:var(--muted);font-weight:400;font-size:.7em;margin-right:.4em}
.single-product .price ins{text-decoration:none}
.single-product .woocommerce-product-details__short-description{color:var(--ink-soft);
  font-size:1.02rem;margin-bottom:1.5rem}
.single-product .woocommerce-product-details__short-description ul{padding-left:1.1rem}

/* brand pill above title (added via hook or meta) */
.hs-brand-pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);background:var(--cream);border:1px solid var(--line);
  padding:.35em .8em;border-radius:999px;margin-bottom:1rem}

/* ============================================================ VARIATION / SWATCHES */
/* block-flow rows so the COLOR/SIZE label stacks ABOVE its control (no overlap) */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations td,
.single-product table.variations th{display:block;width:auto;border:0;background:none;text-align:left;vertical-align:top}
.single-product table.variations{margin:0 0 1.2rem}
.single-product table.variations tr{margin-bottom:1.1rem}
.single-product table.variations td{padding:0}
.single-product table.variations th.label{font-family:var(--font-body);font-weight:700;
  color:var(--navy-900);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;
  padding:0 0 .5rem;margin:0}
.single-product table.variations .label .hs-swatch-current{color:var(--muted);font-weight:500;
  text-transform:none;letter-spacing:0;margin-left:.5em}
.single-product .reset_variations{font-size:.82rem;color:var(--muted);margin-left:.6rem}

/* selected-colour name label (under the swatch strip; populated by syncActive) */
.hs-swatch-current{font-size:.86rem;color:var(--muted);font-weight:500;margin:.2rem 0 .15rem;
  letter-spacing:0;text-transform:none;line-height:1.3}
.hs-swatch-current .hs-cc-label{color:var(--muted);font-weight:600}
.hs-swatch-current .hs-cc-name{color:var(--navy-700);font-weight:700}

/* decoration-method selector (apparel only) — segmented pill */
.hs-decoration{margin:.5rem 0 1rem}
.hs-decoration-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
.hs-decoration-opts{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:#fff;max-width:100%;flex-wrap:wrap}
.hs-decoration-opt{display:inline-flex;align-items:center;margin:0;padding:.45rem 1rem;border-radius:999px;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--ink);transition:all var(--t);white-space:nowrap}
.hs-decoration-opt input{position:absolute;opacity:0;width:0;height:0}
.hs-decoration-opt.is-active{background:var(--navy-700);color:#fff}
.hs-decoration-opt:not(.is-active):hover{background:var(--cream)}
.hs-decoration-opt:focus-within{box-shadow:0 0 0 2px var(--gold)}

/* size/placement pricing pilot — PDP decoration builder (scoped) */
.hs-decor-pilot{margin:.6rem 0 1.1rem}
.hs-decor-pilot .lab{font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.hs-decor-pilot .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.hs-decor-pilot .chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.5rem .95rem;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink);transition:all var(--t);font-family:inherit}
.hs-decor-pilot .chip:hover{border-color:var(--gold)}
.hs-decor-pilot .chip.on{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.hs-decor-pilot .chip .pp{opacity:.8;font-size:.78rem;margin-left:.2rem}
.hs-decor-pilot .btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.5rem 1.05rem;font-weight:700;cursor:pointer;font-size:.88rem;font-family:inherit;background:var(--gold);color:var(--navy-900);border:none}
.hs-decor-pilot .btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.hs-decor-pilot .btn.ghost:hover{border-color:var(--gold);color:var(--gold-ink)}
.hs-decor-pilot .hs-decor-add{margin:.25rem 0 .3rem}
.hs-decor-pilot .row{border:1px solid var(--line);border-radius:12px;padding:.75rem;margin:.55rem 0;background:var(--cream)}
.hs-decor-pilot .rr{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:.55rem}
@media(max-width:430px){.hs-decor-pilot .rr{grid-template-columns:1fr}}
.hs-decor-pilot .rr label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem}
.hs-decor-pilot select{width:100%;max-width:100%;padding:.5rem .6rem;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-size:.92rem;color:var(--ink);font-family:inherit}
.hs-decor-pilot .rowfoot{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}
.hs-decor-pilot .rowfoot .rp{font-weight:700;font-family:var(--font-display)}
.hs-decor-pilot .del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;text-decoration:underline;padding:0;font-family:inherit}
.hs-decor-pilot .note6{font-size:.8rem;color:var(--gold-ink);background:var(--cream);border:1px dashed var(--gold);border-radius:8px;padding:.5rem .65rem;margin:.5rem 0 0}
.hs-decor-pilot .hs-decor-bd{margin-top:.75rem;border-top:1px dashed var(--line);padding-top:.6rem}
.hs-decor-pilot .hs-decor-bd .li{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding:.2rem 0;color:var(--ink-soft)}
.hs-decor-pilot .hs-decor-bd .li .amt{font-weight:600;color:var(--ink);white-space:nowrap}
.hs-decor-pilot .hs-decor-none{color:var(--muted);font-size:.88rem;margin:.2rem 0}
.hs-decor-pilot .hs-decor-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5rem;padding-top:.55rem;border-top:2px solid var(--navy-800);font-family:var(--font-display);font-weight:800}
.hs-decor-pilot .hs-decor-total .amt{font-size:1.3rem;color:var(--navy-800);white-space:nowrap}

/* swatch row */
.hs-swatches{display:flex;flex-wrap:wrap;gap:.55rem;margin:.35rem 0 .55rem}
.hs-swatch{width:38px;height:38px;border-radius:50%;border:2px solid #fff;cursor:pointer;
  box-shadow:0 0 0 1px var(--line);transition:all var(--t);padding:0;position:relative;
  font-size:.6rem;font-weight:700;color:var(--ink);display:grid;place-items:center}
.hs-swatch:hover{transform:scale(1.08)}
.hs-swatch.is-active{box-shadow:0 0 0 2px var(--gold);border-color:#fff;transform:scale(1.06)}
.hs-swatch.is-active::after{content:"";position:absolute;inset:-7px;border:1px solid var(--gold);
  border-radius:50%}
.hs-swatch--noimg{background:var(--cream)}
/* real per-colour garment photo as the swatch (shows actual fabric colour, not a
   silhouette). Override the category cap/beanie mask so the real photo shows clean. */
/* Swatch photos have white backgrounds baked into the PNGs. mix-blend-mode:multiply
   drops the white against the cream page so ONLY the product shows — no tile, border
   or box. (Accepted trade-off: very light caps wash out on the cream background.)
   Because the images are opaque rectangles, a drop-shadow/box-shadow ring would be a
   rectangle — so the active state is a centred gold underline, not a ring. */
.hs-swatch--img{background-color:transparent!important;background-size:contain;background-position:center;background-repeat:no-repeat;
  -webkit-mask:none!important;mask:none!important;border-radius:0!important;
  width:50px!important;height:50px!important;border:0!important;
  mix-blend-mode:multiply;filter:none!important;box-shadow:none!important}
.hs-swatch--img.is-active{box-shadow:none!important;filter:none!important;transform:scale(1.08)}
.hs-swatch--img.is-active::after{content:"";display:block!important;position:absolute;
  top:auto;left:20%;right:20%;bottom:-7px;height:3px;width:auto;border:0;border-radius:3px;background:var(--gold)}
/* Criterion 6 colour-name tooltip = the native `title` on each swatch (set in
   main.js, shows the now-formatted colour name on desktop hover; aria-label gives
   the accessible name; degrades to nothing on touch). A styled DOM/pseudo tooltip
   was tried but <button> clips descendant + pseudo content in Chromium. */
.hs-select-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ===== FPD design studio page (?start_customizing → body.hs-designing) =====
 * FPD runs in "page-customize" mode: the product page shows a gold Customize
 * button; clicking opens the designer on its own page. There the designer gets
 * the FULL content width at studio height; the purchase column (variations,
 * bulk grid, add-to-cart) drops below it. */
body.hs-designing.single-product div.product{display:block}
/* NB: scope to .fpd-wrapper — FPD reuses the fpd-container class on its
 * body-level <fpd-element-toolbar> and dialogs; sizing those caused the
 * full-screen white sheet when selecting an element (white-page bug). */
body.hs-designing .fpd-container.fpd-wrapper{width:100%!important;max-width:none!important;
  min-height:74vh;margin-bottom:2.2rem}
body.hs-designing .fpd-container .fpd-product-stage,
body.hs-designing .fpd-container .fpd-main-wrapper{min-height:68vh}
body.hs-designing.single-product div.product .summary{max-width:780px}
/* ===== (Designer studio) chrome polish =====
 * Lead with the customer's task, not export tools: hide Download/Print from the
 * studio toolbar (design-export actions). Preview + undo/redo + Info stay. */
body.hs-designing fpd-actions-bar .fpd-btn:has(.fpd-icon-download),
body.hs-designing fpd-actions-bar .fpd-btn:has(.fpd-icon-print){display:none !important}
/* Branded intro above the studio (injected by main.js initStudioHeader). */
body.hs-designing .hs-studio-head{margin:.2rem 0 1rem}
body.hs-designing .hs-studio-head__t{font-family:var(--font-display);font-size:clamp(1.3rem,2.5vw,1.7rem);
  font-weight:800;color:var(--navy-900);line-height:1.1}
body.hs-designing .hs-studio-head__s{color:var(--ink-soft);font-size:.95rem;margin-top:.3rem;max-width:64ch}
/* Options are chosen on the PDP before designing; lock them in the studio (round 52).
 * Only hidden once a variation has resolved (body.hs-opts-locked) so a param-less
 * /?start_customizing never traps the customer. Add-to-cart (.single_variation_wrap)
 * is a sibling of this table and stays visible. */
body.hs-designing.hs-opts-locked form.variations_form table.variations{display:none!important}
body.hs-designing .hs-locked-opts{margin:0 0 1rem;padding:.65rem .85rem;background:var(--cream);
  border:1px solid var(--line);border-radius:10px;font-size:.93rem;line-height:1.3}
body.hs-designing .hs-locked-opts .hs-lo-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
body.hs-designing .hs-locked-opts .hs-lo-lab{font-weight:700;color:var(--navy-900)}
body.hs-designing .hs-locked-opts .hs-lo-val{color:var(--navy-900)}
body.hs-designing .hs-locked-opts .hs-lo-edit{margin-left:auto;color:var(--navy-900);text-decoration:underline;font-weight:600;font-size:.85rem;white-space:nowrap}
body.hs-designing .hs-locked-opts .hs-lo-list{list-style:none;margin:.5rem 0 0;padding:.5rem 0 0;border-top:1px solid var(--line)}
body.hs-designing .hs-locked-opts .hs-lo-list:empty{display:none}
body.hs-designing .hs-locked-opts .hs-lo-list li{position:relative;padding:.12rem 0 .12rem 1rem;color:var(--navy-900);font-size:.88rem}
body.hs-designing .hs-locked-opts .hs-lo-list li::before{content:"\203A";position:absolute;left:.15rem;color:var(--gold,#c8a24a);font-weight:700}
@media(max-width:860px){
  body.hs-designing .fpd-container.fpd-wrapper{min-height:80vh}
}
/* the gold Customize button FPD prints on the product page */
#fpd-start-customizing-button{margin:.4rem 0 1.2rem;display:inline-flex}

/* ===== FPD brand skin (CSS variables — FPD 6 is fully var-themed) =====
 * Navy + brass-gold + cream, matching the storefront. Scoped to the designer
 * container so nothing else inherits it. */
.fpd-container{
  --fpd-primary-color:#c8a24a;
  --fpd-primary-fg-color:#13283f;
  --fpd-btn-primary-color:#c8a24a;
  --fpd-btn-primary-text-color:#13283f;
  --fpd-secondary-color:#13283f;
  --fpd-secondary-fg-color:#ffffff;
  --fpd-mainbar-nav-color:#f8f4ec; /* module labels/icons sit on the navy sidebar */
  --fpd-actions-bar-bg-color:#13283f;
  --fpd-list-bg-color-active:#f3ead6;
  --fpd-light-bg-color:#faf7f0;
  --fpd-canvas-bg:#ffffff;
  --fpd-border-color:#e7e1d6;
  --fpd-border-radius:12px;
  --fpd-text-color:#2c333d;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
/* Card chrome ONLY on the main designer (.fpd-wrapper). FPD also puts
 * .fpd-container on its body-level element toolbar + dialogs; painting those
 * white/bordered turned the toolbar's fixed positioning layer into a
 * full-screen white sheet that hid the design (the white-page bug). */
.fpd-container.fpd-wrapper{
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;background:#fff;
}
/* belt-and-braces: the FLOATING (smart) toolbar must stay a transparent layer.
 * (round 45) scoped to .fpd-smart — the desktop toolbar is now DOCKED in the
 * sidebar (toolbarPlacement 'sidebar', set in functions.php) and needs the
 * opposite: an opaque panel. FPD adds .fpd-smart / .fpd-sidebar itself. */
fpd-element-toolbar.fpd-container.fpd-smart{background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;overflow:visible!important;
  min-height:0!important;margin:0!important}
/* (round 45) docked desktop toolbar: white panel over the main bar; its own
 * tool rail + sub-panels use FPD's dark text (--fpd-text-color), so white is
 * the only background that keeps them legible. */
fpd-element-toolbar.fpd-container.fpd-sidebar{background:#fff!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;margin:0!important}
/* module nav sits on the navy rail — cream items, gold active */
.fpd-container .fpd-nav-item{color:#e7eef7!important}
.fpd-container .fpd-nav-item:hover{color:#fff!important}
.fpd-container .fpd-nav-item.fpd-active{color:#c8a24a!important}
/* (round 45) the ACTIVE module's icon glyph is drawn by FPD's stylesheet in
 * --fpd-primary-fg-color (navy) — invisible on the navy rail. Gold, like its label. */
.fpd-container .fpd-nav-item.fpd-active .fpd-nav-icon::before{color:#c8a24a!important}
/* top actions bar (Download/Print/Preview/undo/redo/Info) is navy — its
 * icons+labels inherited navy too and vanished; force cream */
.fpd-container fpd-actions-bar, .fpd-container fpd-actions-bar *{color:#f8f4ec!important}
.fpd-container fpd-actions-bar .fpd-btn:hover{color:#c8a24a!important}
/* module source tabs (upload / QR …): active tab was navy-on-navy */
.fpd-container .fpd-module-tabs > div{color:#6b7280!important;background:transparent}
.fpd-container .fpd-module-tabs > div.fpd-active{color:#13283f!important;background:#f3ead6!important}

/* ===== FPD mobile fixes (round 21) =====
 * (a) Dropdowns / 3-dot menus render on a WHITE list (.fpd-dropdown-list{background:#fff});
 *     our navy actions-bar override (fpd-actions-bar *{color:cream}) bled cream text into
 *     menus opened from it = cream-on-white, barely legible. Force dark text on FPD popup
 *     surfaces, winning by specificity + source order. Fixed-position lists stay DOM-nested
 *     so the scoped selectors still match; unscoped ones catch any body-root menu. */
.fpd-container .fpd-dropdown-list,
.fpd-container .fpd-dropdown-list .fpd-item,
.fpd-container .fpd-dropdown .fpd-dropdown-current,
.fpd-container fpd-actions-bar .fpd-dropdown-list .fpd-item,
.fpd-dropdown-list,
.fpd-dropdown-list .fpd-item{color:#2c333d!important}
.fpd-dropdown-list .fpd-item:hover{background:rgba(19,40,63,.08)!important;color:#13283f!important}

/* (b) Right-side crop on phones: FPD ships ZERO media queries (it reflows by container
 *     width via JS). On a sub-400px column its desktop sidebar (--fpd-sidebar-width:400px)
 *     overflows and is clipped by the container overflow:hidden. Cap the designer chrome
 *     to the viewport so it reflows instead of being cut. Canvas/stage untouched (FPD maps
 *     touch coordinates to it). */
@media(max-width:600px){
  body.hs-designing .fpd-container.fpd-wrapper{--fpd-sidebar-width:100%;max-width:100vw}
  body.hs-designing .fpd-container fpd-main-bar,
  body.hs-designing .fpd-container .fpd-main-bar,
  body.hs-designing .fpd-container .fpd-sidebar,
  body.hs-designing .fpd-container .fpd-module-content{max-width:100%!important;box-sizing:border-box}
}

/* (c) The actions-bar 3-dot (collapsed) overflow menu drops open as a WHITE popover,
 *     but the navy-bar rule `.fpd-container fpd-actions-bar *{color:cream}` painted its
 *     items cream too - so "Info" etc came out cream-on-white = barely legible. Pin this
 *     popover to white bg + dark text (beats the cream rule by specificity). The inline
 *     navy bar + uncollapsed menu stay cream. Confirmed on a real fpd-layout-small render. */
.fpd-container fpd-actions-bar .fpd-collapsed-menu{background:#fff!important}
.fpd-container fpd-actions-bar .fpd-collapsed-menu,
.fpd-container fpd-actions-bar .fpd-collapsed-menu *{color:#2c333d!important}

/* ===== FPD round 28 — designer refinements (mobile/touch UX) ===== */

/* (1) Bottom toolbar must NOT overlap the cap on the small/medium (mobile) layout.
 *     FPD docks two bars along the bottom: the module bar (Images/Add Text/Designs —
 *     absolute, bottom of the wrapper, space already reserved by fpd-main-wrapper's
 *     margin) AND the element toolbar (Color/Edit Text/size/font — position:fixed;
 *     bottom:0, pinned to the viewport). Our round-14b studio rule forced the stage to
 *     min-height:68vh/80vh, which made the (width-bound) canvas tall and centred it DOWN
 *     under that fixed toolbar. Fix: drop the forced heights so the designer is compact and
 *     the cap sits high, and bound the SQUARE stage so the cap always fits in the room above
 *     the toolbar — capped by viewport width on tall phones, by remaining height on short
 *     ones (one max-width bounds both axes since the cap is square). FPD sizes the canvas to
 *     the stage width on load + resize (main.js adds a resetSize nudge for orientation).
 *     Large (desktop) layout is untouched. */
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-small,
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-medium{
  min-height:0!important;height:auto!important;max-height:none!important}
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-small fpd-main-wrapper,
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-medium fpd-main-wrapper{min-height:0!important}
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-small .fpd-product-stage,
body.hs-designing .fpd-container.fpd-wrapper.fpd-layout-medium .fpd-product-stage{
  min-height:0!important;
  max-width:min(86vw, calc(100vh - 320px))!important;   /* fallback for no-dvh browsers */
  max-width:min(86vw, calc(100dvh - 320px))!important;  /* tracks mobile URL-bar show/hide */
  margin-left:auto!important;margin-right:auto!important}

/* (2) Element edit UI (toolbar + handles) only on DOUBLE tap / DOUBLE click.
 *     A single tap/click felt too intrusive — it popped the toolbar + resize handles on the
 *     lightest touch. main.js gates it: a single tap still SELECTS and lets you DRAG the
 *     element (handles stay hidden), and only a dblclick / double-tap adds .hs-edit-armed and
 *     turns the active element's handles on. Here we simply keep FPD's element toolbar hidden
 *     until armed (covers both the mobile bottom sheet and the desktop smart toolbar).
 *     Presentation only — the design JSON, pricing and save flow are untouched.
 *     (round 45) scoped to .fpd-smart: the double-tap gate is the MOBILE flow. The desktop
 *     toolbar is docked in the sidebar (.fpd-sidebar) and follows FPD's native show/hide
 *     (base display:none + .fpd-show{display:flex!important} in FPD's own stylesheet). */
body.hs-designing fpd-element-toolbar.fpd-smart{display:none!important}
body.hs-designing.hs-edit-armed fpd-element-toolbar.fpd-smart{display:flex!important}

/* ===== FPD round 46 (amended rounds 47/48) — mobile coach mark: "double tap to edit" =====
 * The round-28 gate means a single tap only selects; nothing tells the customer that
 * editing needs a DOUBLE tap. main.js floats this toast on the small/medium layout EVERY
 * time a customer element (text / logo / design) is added and on every tap-select —
 * uncapped per client direction; it hides on arm/deselect/5s. Sized up + gold-bordered +
 * a nudge bounce so it can't be missed. (round 48) MOUNTED INSIDE THE STUDIO WRAPPER
 * (.fpd-wrapper is position:relative): position:fixed on a phone ended up off-screen /
 * under the keyboard ("hidden, scrolls with the site"), and an absolute body child did
 * not track this page's scroll. As a wrapper child it is CSS-anchored just above the
 * bottom module bar, scrolls with the designer, and sits right under the cap.
 * pointer-events:none so it never eats a tap. */
#hs-edit-hint{position:absolute;bottom:92px;left:50%;transform:translateX(-50%) translateY(10px);
  display:flex;align-items:center;gap:.55em;width:max-content;max-width:94vw;z-index:9999;
  background:#13283f;color:#f8f4ec;border:2px solid #c8a24a;
  font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.3;
  padding:.8em 1.25em;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
#hs-edit-hint.is-on{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible;
  transition:opacity .25s ease,transform .25s ease;
  animation:hsHintNudge .55s ease 1.6s 2}
#hs-edit-hint .hs-edit-hint-icon{font-size:1.2em;letter-spacing:-.35em;margin-right:.35em}
@keyframes hsHintNudge{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-7px)}
}
@media (prefers-reduced-motion: reduce){#hs-edit-hint.is-on{animation:none}}

/* ===== FPD round 29 — dock the element toolbar inside the studio (mobile) =====
 * Round 28 stopped the toolbar overlapping the CAP, but on a tall phone the toolbar was still
 * position:fixed to the VIEWPORT bottom, so it floated over the product title / page content
 * below the designer. main.js (dockToolbar) now switches the small/medium toolbar to
 * page-absolute, anchored to the studio's own bottom (just above the 80px module bar), so it
 * scrolls with the designer and never covers the title. The <fpd-element-toolbar> node is NOT
 * moved (moving the custom element re-inits it and drops its translated labels). Here we only
 * reserve room below the cap, while armed, so the docked toolbar clears it. */
body.hs-designing.hs-edit-armed .fpd-layout-small fpd-main-wrapper,
body.hs-designing.hs-edit-armed .fpd-layout-medium fpd-main-wrapper{margin-bottom:250px!important}

/* ===== FPD round 33 — three designer bug fixes (mobile) ===== */

/* (Bug 1) DISABLE Curved Text. FPD's curved-text rendering is broken in this build — it
 * garbles/overlaps the letters (client screenshot), and it was already flagged known-buggy.
 * It is NOT fixable from our side (FPD's internal curve algorithm), so we remove the control
 * so a customer can't break their design with it. main.js also sets per-text curvable:false. */
.fpd-container .fpd-tool-curved-text,
fpd-element-toolbar .fpd-tool-curved-text{display:none!important}

/* (Bug 2) Front/back view pager vs. the edit toolbar. The pager (`fpd-views-nav`) floats at the
 * stage's bottom-right; on small/medium the bottom-anchored toolbar grows UPWARD when a sub-panel
 * (Color/Font/…) opens and its tabs collided with the pager arrows. Move the pager to the TOP of
 * the stage on mobile so it's always reachable and never overlaps the toolbar. Desktop (large)
 * keeps the default placement. */
body.hs-designing .fpd-layout-small fpd-views-nav,
body.hs-designing .fpd-layout-medium fpd-views-nav{top:8px!important;bottom:auto!important}

/* (Bug 3) The "Add Text" input inherited the navy module theming (transparent background + dark
 * text rgba(0,0,0,.7)) and was unreadable while typing. Give it a high-contrast white field. */
body.hs-designing .fpd-add-text textarea,
body.hs-designing fpd-module-text textarea{
  background:#ffffff!important;color:#13283f!important;caret-color:#13283f!important;
  border:1px solid #e7e1d6!important;border-radius:8px!important}

/* (Bug 4) Let a swipe over the canvas SCROLL the page instead of being swallowed by the
 * designer. fabric sets the canvas `touch-action:none` (inline), which blocks all browser
 * scrolling. Override it to `manipulation` so the browser can pan/scroll when a swipe starts on
 * empty canvas; main.js turns off the selection marquee and preventDefaults touchmove only while
 * an element is actually being dragged, so element manipulation still works and the page scrolls
 * the rest of the time. (touch-action only affects touch devices, so desktop is unaffected.) */
body.hs-designing .fpd-product-stage canvas.upper-canvas,
body.hs-designing .fpd-product-stage canvas.lower-canvas,
body.hs-designing .fpd-product-stage .canvas-container{touch-action:manipulation!important}

/* (Bug 5) Toolbar buttons were dead to finger touch on iOS after Bug 4. Cause: Bug 4 made the
 * page scrollable; iOS Safari then treats a tap on a `touch-action:auto` element as a possible
 * scroll/zoom and DROPS the synthesized click — so the (auto) FPD chrome stopped responding to
 * taps while the canvas (now `manipulation`) was fine. Before Bug 4 the page was scroll-locked so
 * taps fired. Fix: set explicit touch-action on the designer chrome. Containers stay `manipulation`
 * (sub-panels / font list still scroll); the actual tap-target controls are `none` (pure tap, zero
 * gesture ambiguity → the click always fires). touch-action only affects touch devices. */
body.hs-designing fpd-element-toolbar, body.hs-designing fpd-element-toolbar *,
body.hs-designing fpd-main-bar, body.hs-designing fpd-main-bar *,
body.hs-designing fpd-actions-bar, body.hs-designing fpd-actions-bar *,
body.hs-designing fpd-views-nav, body.hs-designing fpd-views-nav *{touch-action:manipulation!important}
body.hs-designing fpd-element-toolbar [class*="fpd-tool-"],
body.hs-designing fpd-element-toolbar .fpd-close,
body.hs-designing fpd-element-toolbar .fpd-close-sub-panel,
body.hs-designing fpd-main-bar .fpd-nav-item,
body.hs-designing fpd-actions-bar .fpd-btn,
body.hs-designing fpd-views-nav .fpd-view-prev,
body.hs-designing fpd-views-nav .fpd-view-next{touch-action:none!important}

/* (Bug 6) The round-(Bug 5) fix put touch-action:none on the simple tool BUTTONS, which fixed the
 * bottom row + Edit Text. But the TOP-ROW controls have nested INTERACTIVE tap-targets that the
 * blanket `* → manipulation` rule above left ambiguous, so iOS kept dropping their taps on the now-
 * scrollable page: the Color swatch (.fpd-current-fill), the font-name dropdown's <input>
 * (.fpd-dropdown-current) + its arrow, and the size <input> (.fpd-input). Put touch-action:none on
 * those trigger elements too — `none` does NOT block focus/typing or opening a control, it only
 * removes the pan/zoom gesture ambiguity, so the tap reliably registers. The font-name dropdown
 * LIST is NOT targeted here, so it keeps `manipulation` and still scrolls; a size slider in the
 * sub-panel likewise keeps `manipulation` and stays draggable. Back/close icons hardened too. */
body.hs-designing fpd-element-toolbar .fpd-tool-color .fpd-current-fill,
body.hs-designing fpd-element-toolbar .fpd-tool-text-size .fpd-input,
body.hs-designing fpd-element-toolbar .fpd-tool-font-family .fpd-dropdown-current,
body.hs-designing fpd-element-toolbar .fpd-tool-font-family .fpd-dropdown-arrow,
body.hs-designing fpd-element-toolbar .fpd-tool-font-family .fpd-dropdown-arrow *,
body.hs-designing fpd-element-toolbar .fpd-close-sub-panel > *,
body.hs-designing fpd-element-toolbar .fpd-close > *{touch-action:none!important}

/* (round 36) Pin the docked element toolbar via CSS custom properties that main.js sets on arm.
 * `!important` here beats FPD's NON-important inline styles, so FPD can no longer reposition the
 * toolbar when it rewrites those styles on sub-panel open — that mid-tap shift was dropping taps on
 * the top-row controls ("needs several taps"). The top is anchored to a fixed base height (main.js),
 * so a sub-panel grows the toolbar DOWNWARD instead of shifting the controls up under the finger.
 * The selector stacks THREE body classes on purpose: FPD's own bottom-sheet rule is
 * `top:auto!important` at specificity (0,2,1); we need (0,3,2) to outrank it, otherwise FPD wins the
 * !important tie and flings the toolbar to top:auto (off-screen) the moment a sub-panel opens. */
body.hs-designing.hs-edit-armed.hs-tb-docked fpd-element-toolbar{
  position:absolute!important;
  top:var(--hs-tb-top)!important;
  left:var(--hs-tb-left)!important;
  width:var(--hs-tb-width)!important;
  height:var(--hs-tb-h)!important; /* FPD sub-panels are flex:1 → need a defined host height to fill */
  bottom:auto!important;
  /* overflow MUST stay visible: when a sub-panel is open FPD positions the Back button (the
   * .fpd-close-sub-panel "drawer handle") ABSOLUTELY ~25px ABOVE the box's top edge. overflow:hidden
   * clipped it, so Back vanished and the user couldn't get out of a panel. The panels fill the box
   * exactly (flex:1) and scroll internally, and dropdowns are position:fixed, so nothing else spills. */
  overflow:visible!important;
}

/* (round 40) Remove the STROKE + SHADOW text effects from the designer — embroidery output must be
 * flat (no web outline/shadow baked into a customer's text). Hide the Stroke and Shadow tabs in
 * FPD's text colour panel plus their controls, so a customer can only set the Fill (thread) colour.
 * The Fill colour picker stays fully functional. FPD class names are unique, so this is safe. */
.fpd-tool-text-stroke,
.fpd-tool-text-shadow,
.fpd-stroke-color-wrapper,
.fpd-tool-stroke-width,
.fpd-shadow-color-wrapper,
.fpd-tool-shadow-blur,
.fpd-tool-shadow-offsetX,
.fpd-tool-shadow-offsetY,
.fpd-remove-shadow{display:none!important}

/* ===== (round 44) Product-image carousel — site-wide, generic =====
 * Replaces the single gallery image with a multi-image + video carousel on every
 * product (image set built from the product's own media in functions.php). Sits in
 * the gallery (left) grid column; hidden while the designer is open. main.js builds
 * the DOM. Single-image products render just the framed image (no arrows/thumbs). */
.single-product div.product .hs-carousel{grid-column:1;align-self:start;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.hs-carousel--single{gap:0}   /* one image: no thumb strip, so kill the gap */
body.hs-designing .hs-carousel{display:none!important}   /* designer takes over the stage (beat the column rule) */
/* White stage: every product photo is shot on white, so a white stage lets the
 * product sit seamlessly (no white-box-on-cream seam). Cream border = brand accent. */
.hs-car-frame{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hs-car-stage{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.hs-car-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.hs-car-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.hs-car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(19,40,63,.82);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:background .15s,color .15s;touch-action:manipulation}
.hs-car-arrow:hover{background:var(--gold);color:#1c1407}
.hs-car-prev{left:10px}.hs-car-next{right:10px}
.hs-car-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hs-car-thumb{flex:0 0 auto;width:64px;height:64px;padding:0;border:2px solid var(--line);border-radius:9px;
  background:#fff;cursor:pointer;overflow:hidden;position:relative;transition:border-color .15s;touch-action:manipulation}
.hs-car-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.hs-car-thumb.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.hs-car-thumb--video::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.hs-car-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;z-index:2;
  border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
@media(max-width:600px){
  .hs-car-arrow{width:34px;height:34px;font-size:1.25rem}
  .hs-car-thumb{width:54px;height:54px}
}

/* ===== (round 44b) Shop/category grid — hover-to-play video thumbnail =====
 * Cards whose product has a video get a clip overlaid on the thumbnail; main.js
 * fades it in on hover (desktop). Touch devices just see the "Video" badge and
 * tap straight through (video + badge are pointer-events:none). */
.hs-loop-thumb{position:relative;overflow:hidden;line-height:0;background:#fff}   /* white card stage — matches carousel; transparent areas never show a dark parent */
.hs-loop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease;pointer-events:none;background:#fff;z-index:1}
.hs-loop-thumb.is-playing .hs-loop-video{opacity:1}
.hs-loop-vbadge{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:rgba(19,40,63,.85);color:#fff;font-size:.7rem;font-weight:600;line-height:1;
  padding:4px 9px 4px 8px;border-radius:999px;letter-spacing:.02em;pointer-events:none;
  box-shadow:0 1px 4px rgba(0,0,0,.25);transition:opacity .2s}
.hs-loop-vtri{width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent #fff}
.hs-loop-thumb.is-playing .hs-loop-vbadge{opacity:0}   /* badge cedes to the playing clip */

/* ===== (Product cards) No Customize button on cards =====
 * Options must be chosen on the PDP first, so cards don't carry FPD's catalog
 * Customize button (or the gate hint) — the whole card links through to the PDP.
 * (Customizable badge removed per Aramis 2026-06-24.) */
ul.products li.product .fpd-catalog-customize,
ul.products li.product .hs-cz-hint{display:none !important}

/* ===== (round 44d) Embroidery logo preview on shop/category thumbnails =====
 * A transparent "Your Logo" embroidery graphic sits on the product card image so
 * customers see what custom embroidery looks like. Colour (gold/navy) is chosen
 * per product by functions.php (gold default; navy on light garments). Position
 * is by product category (cap front, garment chest, etc.). pointer-events:none so
 * the card link still works; hidden while a card video is playing. */
/* High specificity (and resets) needed to beat the generic `ul.products li.product
 * img` rule that otherwise forces the logo to width:100% + padding + 1/1 ratio. */
ul.products li.product .hs-loop-logo{position:absolute;z-index:1;pointer-events:none;
  left:50%;top:40%;width:38%;height:auto;transform:translate(-50%,-50%);
  margin:0;padding:0;background:none;aspect-ratio:auto;border-radius:0;
  opacity:.96;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
/* keep the logo centred (and lightly scaled) on the card hover, not the img-scale */
ul.products li.product:hover .hs-loop-logo{transform:translate(-50%,-50%) scale(1.04)}
.hs-loop-thumb.is-playing .hs-loop-logo{opacity:0}
/* caps: a touch higher on the crown front */
ul.products li.product.product_cat-caps-hats .hs-loop-logo,
ul.products li.product.product_cat-fitted-flexfit-caps .hs-loop-logo,
ul.products li.product.product_cat-trucker-snapback .hs-loop-logo{top:40%;width:38%}
ul.products li.product.product_cat-beanies .hs-loop-logo{top:47%;width:36%}
ul.products li.product.product_cat-visors-bucket .hs-loop-logo{top:43%;width:32%}
/* garments: left chest, smaller */
ul.products li.product.product_cat-apparel .hs-loop-logo,
ul.products li.product.product_cat-collection .hs-loop-logo,
ul.products li.product.product_cat-jackets-fleece .hs-loop-logo{left:36%;top:38%;width:25%}

/* "logo on file" checkbox on the cart page */
.hs-logo-onfile{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 1rem;
  font-size:.92rem;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:.8rem 1rem;cursor:pointer}
.hs-logo-onfile input{margin-top:.2em;accent-color:var(--gold)}

/* ===== Bulk Variations grid (WCBV) — brand styling =====
 * The add-multiple-variations panel on designer/bulk products. Carded in cream,
 * brand inputs, gold add-row pill, navy running total. */
.wcbv-wrapper{margin:.4rem 0 1.1rem;padding:1rem 1.1rem;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius)}
.wcbv-wrapper .wcbv-attributes-head{font-weight:700;font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--navy-900);margin-bottom:.35rem}
.wcbv-wrapper select,.wcbv-wrapper input{border:1px solid var(--line);border-radius:10px;
  padding:.5em .7em;font:inherit;background:#fff;max-width:100%}
.wcbv-wrapper .wcbv-row{margin:.45rem 0}
.wcbv-wrapper .wcbv-quantity input{width:74px}
.wcbv-wrapper .wcbv-btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--navy-900);font-weight:700;font-size:.9rem;
  border-radius:999px;padding:.55em 1.3em;cursor:pointer;transition:all var(--t);border:0;margin-top:.4rem}
.wcbv-wrapper .wcbv-btn:hover{background:var(--gold-bright)}
.wcbv-wrapper .wcbv-remove-row{color:var(--muted);cursor:pointer}
.wcbv-wrapper .wcbv-total-price{font-size:1.05rem;font-weight:700;color:var(--navy-900);
  margin:.6rem 0 0;border-top:1px dashed var(--line);padding-top:.6rem}
@media(max-width:560px){
  .wcbv-wrapper .wcbv-fields{display:flex;flex-wrap:wrap;gap:.5rem}
  .wcbv-wrapper select{flex:1 1 100%}
}

/* ===== Product-silhouette swatches (PDP) =====
 * Colour swatches take the shape of the product, scoped by the product_cat-*
 * class WooCommerce puts on the single-product wrapper. The shape is an SVG
 * mask, so the gold selection ring can't be a border/box-shadow (those stay
 * rectangular) — instead active = gold drop-shadow halo + scale, because
 * filter:drop-shadow() follows the masked silhouette. A soft dark drop-shadow
 * gives light colours (white/stone caps) edge definition on the cream bg.
 * Category → shape: caps (incl. parent caps-hats) → cap · beanies → beanie ·
 * visors-bucket → bucket hat · apparel(+collection) → tee · jackets-fleece →
 * jacket. Later rules override earlier ones for products in multiple cats. */

/* shared geometry + states for all shaped swatches */
.product_cat-caps-hats .hs-swatch:not(.hs-swatch--noimg),
.product_cat-fitted-flexfit-caps .hs-swatch:not(.hs-swatch--noimg),
.product_cat-trucker-snapback .hs-swatch:not(.hs-swatch--noimg),
.product_cat-beanies .hs-swatch:not(.hs-swatch--noimg),
.product_cat-visors-bucket .hs-swatch:not(.hs-swatch--noimg),
.product_cat-apparel .hs-swatch:not(.hs-swatch--noimg),
.product_cat-apparel-collection .hs-swatch:not(.hs-swatch--noimg),
.product_cat-jackets-fleece .hs-swatch:not(.hs-swatch--noimg){
  width:44px;height:40px;border:0;border-radius:0;box-shadow:none;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  filter:drop-shadow(0 1px 1.5px rgba(8,16,28,.35));
}
.product_cat-caps-hats .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-fitted-flexfit-caps .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-trucker-snapback .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-beanies .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-visors-bucket .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-apparel .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-apparel-collection .hs-swatch.is-active:not(.hs-swatch--noimg),
.product_cat-jackets-fleece .hs-swatch.is-active:not(.hs-swatch--noimg){
  box-shadow:none;transform:scale(1.12);
  filter:drop-shadow(0 1px 1.5px rgba(8,16,28,.35)) drop-shadow(0 0 2px var(--gold)) drop-shadow(0 0 5px var(--gold));
}
.product_cat-caps-hats .hs-swatch.is-active::after,
.product_cat-fitted-flexfit-caps .hs-swatch.is-active::after,
.product_cat-trucker-snapback .hs-swatch.is-active::after,
.product_cat-beanies .hs-swatch.is-active::after,
.product_cat-visors-bucket .hs-swatch.is-active::after,
.product_cat-apparel .hs-swatch.is-active::after,
.product_cat-apparel-collection .hs-swatch.is-active::after,
.product_cat-jackets-fleece .hs-swatch.is-active::after{display:none}

/* cap (side profile, brim right) — all hat cats by default */
.product_cat-caps-hats .hs-swatch:not(.hs-swatch--noimg),
.product_cat-fitted-flexfit-caps .hs-swatch:not(.hs-swatch--noimg),
.product_cat-trucker-snapback .hs-swatch:not(.hs-swatch--noimg){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 38C8 20 18 10 30 10 42 10 50 21 50 36L50 37C57 37.5 62 39.5 62 43 62 46 56 47 49 46L13 42C9.5 41.5 8 40 8 38Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 38C8 20 18 10 30 10 42 10 50 21 50 36L50 37C57 37.5 62 39.5 62 43 62 46 56 47 49 46L13 42C9.5 41.5 8 40 8 38Z'/%3E%3C/svg%3E");
}
/* tee — apparel + parent collection */
.product_cat-apparel .hs-swatch:not(.hs-swatch--noimg),
.product_cat-apparel-collection .hs-swatch:not(.hs-swatch--noimg){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 10 14 4 26 14 31 17 26 17 56 47 56 47 26 50 31 60 26 54 14 40 8C38 12 26 12 24 8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 10 14 4 26 14 31 17 26 17 56 47 56 47 26 50 31 60 26 54 14 40 8C38 12 26 12 24 8Z'/%3E%3C/svg%3E");
}
/* beanie (pom + dome + cuff) — overrides cap */
.product_cat-beanies .hs-swatch:not(.hs-swatch--noimg){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='10' r='6'/%3E%3Cpath d='M12 44C12 26 20 16 32 16 44 16 52 26 52 44Z'/%3E%3Crect x='10' y='42' width='44' height='12' rx='4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='10' r='6'/%3E%3Cpath d='M12 44C12 26 20 16 32 16 44 16 52 26 52 44Z'/%3E%3Crect x='10' y='42' width='44' height='12' rx='4'/%3E%3C/svg%3E");
}
/* bucket hat — overrides cap for visors-bucket */
.product_cat-visors-bucket .hs-swatch:not(.hs-swatch--noimg){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 12 42 12 46 34 18 34Z'/%3E%3Cpath d='M10 34 54 34C58 34 60 37 59 40 57 45 45 48 32 48 19 48 7 45 5 40 4 37 6 34 10 34Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 12 42 12 46 34 18 34Z'/%3E%3Cpath d='M10 34 54 34C58 34 60 37 59 40 57 45 45 48 32 48 19 48 7 45 5 40 4 37 6 34 10 34Z'/%3E%3C/svg%3E");
}
/* jacket (open front + V collar) — overrides tee for jackets-fleece */
.product_cat-jackets-fleece .hs-swatch:not(.hs-swatch--noimg){
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 10 14 4 26 14 31 17 26 17 56 31 56 31 18 24 8Z'/%3E%3Cpath d='M40 8 54 14 60 26 50 31 47 26 47 56 33 56 33 18 40 8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 8 10 14 4 26 14 31 17 26 17 56 31 56 31 18 24 8Z'/%3E%3Cpath d='M40 8 54 14 60 26 50 31 47 26 47 56 33 56 33 18 40 8Z'/%3E%3C/svg%3E");
}
/* size as pill buttons: keep native select styled nicely for non-color attrs */
.single-product table.variations select{font-family:var(--font-body);border:1px solid var(--line);
  border-radius:10px;padding:.7em 1em;background:#fff;color:var(--ink);font-size:.95rem;min-width:200px}

/* qty + add to cart */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;margin:1.2rem 0}
.single-product .quantity input.qty{width:58px;height:54px;border:1px solid var(--line);
  border-radius:10px;text-align:center;font-family:var(--font-body);font-size:1.05rem;font-weight:600}
.single-product form.cart .button[type="submit"],
.single-product .single_add_to_cart_button{background:var(--navy-700);color:#fff;border:0;
  border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  padding:0 2.2rem;min-height:54px;transition:all var(--t);letter-spacing:.01em}
.single-product .single_add_to_cart_button:hover{background:var(--gold);color:var(--navy-900);
  transform:translateY(-2px);box-shadow:var(--shadow)}
.single-product .woocommerce-variation-price{flex-basis:100%;font-size:1.4rem;font-weight:800;
  color:var(--navy-800);font-family:var(--font-body)}
.single-product .woocommerce-variation-availability{flex-basis:100%;color:var(--ok);font-size:.9rem}
/* ===== (PDP buy-box cleanup) =====
 * The variation form was a wrapping flexbox, which floated the variation price +
 * quantity to the RIGHT of the colour/size options (looked disjointed). Stack it on
 * the PDP so options read top-to-bottom; the designer view keeps its flex add-to-cart
 * row. Quantity isn't chosen before customizing (flow is Customize -> design -> cart),
 * so it's hidden on the PDP to declutter — it stays available in the designer + cart. */
.single-product:not(.hs-designing) form.variations_form.cart{display:block;margin:1.1rem 0 0}
.single-product:not(.hs-designing) form.variations_form.cart .quantity{display:none !important}
.single-product:not(.hs-designing) .woocommerce-variation-add-to-cart{margin:.2rem 0 0}
.single-product:not(.hs-designing) .woocommerce-variation-price{margin:.4rem 0 0}

/* ============================================================ DESIGNER PLACEHOLDER */
.hs-designer{margin:0 0 1.4rem}
.hs-designer-ph{display:flex;align-items:center;gap:1rem;border:2px dashed var(--gold);
  background:linear-gradient(135deg,var(--cream),#fff);border-radius:var(--radius);
  padding:1.1rem 1.3rem;position:relative}
.hs-designer-ph__ico{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--navy-800);
  color:var(--gold-bright);display:grid;place-items:center}
.hs-designer-ph__ico svg{width:24px;height:24px}
.hs-designer-ph__body{display:flex;flex-direction:column;gap:.15rem}
.hs-designer-ph__body b{font-family:var(--font-display);font-size:1.05rem;color:var(--navy-900)}
.hs-designer-ph__body span{font-size:.86rem;color:var(--muted);line-height:1.45}
.hs-designer-ph__tag{position:absolute;top:.7rem;right:.8rem;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:.3em .7em}

/* ============================================================ TABS / RELATED */
.woocommerce-tabs{grid-column:1/-1;margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem}
.woocommerce-tabs ul.tabs{display:flex;gap:.4rem;list-style:none;padding:0;margin:0 0 1.5rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:block;padding:.7em 1.2em;font-family:var(--font-body);
  font-weight:700;color:var(--muted);border-bottom:2px solid transparent;font-size:.95rem}
.woocommerce-tabs ul.tabs li.active a{color:var(--navy-900);border-bottom-color:var(--gold)}
/* --- Tab panel content design (2026-07-08) ---
 * The supplier-migrated content (bullet lists, spec lists, measurement tables) rendered
 * at browser defaults: cramped lists, borderless tables, duplicate headings. Rhythm:
 * readable measure, checklist-styled lists, branded tables, gold-underlined h3 sections. */
.woocommerce-tabs .panel{font-size:1rem;color:var(--ink-soft);line-height:1.65;max-width:900px;padding-top:.3rem}
.woocommerce-tabs .panel h2{font-size:1.4rem}
/* The panel's first h2 ("Description" / "Additional information") repeats the active
 * tab label directly above it — pure noise, hide it. */
.woocommerce-tabs .panel>h2:first-child{display:none}
.woocommerce-tabs .panel p{margin:0 0 1rem}
/* Lists → checklists: gold check, breathing room, hairline dividers */
.woocommerce-tabs .panel ul{list-style:none;margin:.2rem 0 1.6rem;padding:0}
.woocommerce-tabs .panel ul li{position:relative;padding:.6rem 0 .6rem 1.9rem;border-bottom:1px solid var(--line)}
.woocommerce-tabs .panel ul li:last-child{border-bottom:0}
.woocommerce-tabs .panel ul li::before{content:"\2713";position:absolute;left:.15rem;top:.55rem;
  color:var(--gold-deep);font-weight:800}
.woocommerce-tabs .panel ul li b,.woocommerce-tabs .panel ul li strong{color:var(--navy-900)}
/* Description tab: the short bullet set fills the measure as a 2-col grid */
.woocommerce-Tabs-panel--description ul{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}
@media(max-width:760px){.woocommerce-Tabs-panel--description ul{grid-template-columns:1fr}}
/* Additional-info h3 sections ("Specifications", "Measurements") — small-caps label
 * with a short gold rule; clear space between sections */
.hs-additional-info-specs h3{font-size:1.02rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--navy-900);margin:1.9rem 0 .9rem;padding-bottom:.45rem;position:relative}
.hs-additional-info-specs h3::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;
  background:var(--gold);border-radius:2px}
.hs-additional-info-specs h3:first-child{margin-top:.4rem}
/* Measurements table — match the attributes-table branding; numbers centred */
.hs-additional-info-specs table{width:auto;min-width:min(520px,100%);max-width:100%;border-collapse:separate;
  border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin:.4rem 0 1.6rem;font-size:.95rem;background:#fff}
.hs-additional-info-specs table th,.hs-additional-info-specs table td{padding:.65em 1.2em;
  border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.hs-additional-info-specs thead th{background:var(--cream);color:var(--navy-900);font-weight:700;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.hs-additional-info-specs table th:not(:first-child),
.hs-additional-info-specs table td:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}
.hs-additional-info-specs table td:first-child{font-weight:600;color:var(--navy-900)}
.hs-additional-info-specs tbody tr:last-child td{border-bottom:0}
.hs-additional-info-specs tbody tr:nth-child(even) td{background:#fbf8f1}
/* Wide apparel size tables scroll sideways on phones instead of crushing */
@media(max-width:640px){.hs-additional-info-specs table{display:block;width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;white-space:nowrap}}
/* Additional information attribute table — align label + value rows */
.woocommerce-product-attributes,.shop_attributes{width:100%;border-collapse:collapse;margin:1.2rem 0 0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.98rem}
.woocommerce-product-attributes th,.woocommerce-product-attributes td,
.shop_attributes th,.shop_attributes td{text-align:left;vertical-align:middle;padding:.8em 1.1em;
  border-bottom:1px solid var(--line)}
.woocommerce-product-attributes th,.shop_attributes th{font-weight:700;color:var(--navy-900);
  background:var(--cream);white-space:nowrap;width:150px}
.woocommerce-product-attributes td,.shop_attributes td{color:var(--ink-soft)}
.woocommerce-product-attributes td p,.shop_attributes td p{margin:0}
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td,
.shop_attributes tr:last-child th,.shop_attributes tr:last-child td{border-bottom:0}
.related.products,.upsells.products{grid-column:1/-1;margin-top:3rem}
.related.products>h2,.upsells.products>h2{font-size:1.7rem;text-transform:uppercase;margin-bottom:1.5rem}

/* ============================================================ PDP REVIEWS (2026-07-08)
 * Woo's base styles are dequeued, so the reviews tab rendered raw: dropdown rating,
 * unstyled fields, invisible stars. Full treatment: 2-col layout (list | form card),
 * pure-CSS star display, star-button rating input (main.js enhances the select). */
.woocommerce-Reviews{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:start}
@media(max-width:900px){.woocommerce-Reviews{grid-template-columns:1fr}}
.woocommerce-Reviews-title{font-size:1.25rem;margin-bottom:1rem}
.woocommerce-noreviews{color:var(--muted);background:var(--cream);border:1px dashed var(--line);
  border-radius:var(--radius);padding:1rem 1.2rem;font-size:.95rem}
/* star display (list + summaries) — width-clipped overlay, no Woo font needed */
.woocommerce .star-rating{position:relative;display:inline-block;line-height:1;font-size:.95rem;
  width:5.6em;height:1.1em;vertical-align:middle}
.woocommerce .star-rating::before{content:"\2605\2605\2605\2605\2605";color:var(--line);letter-spacing:.14em}
.woocommerce .star-rating>span{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  height:100%;font-size:0;color:var(--gold-deep)}
.woocommerce .star-rating>span::before{content:"\2605\2605\2605\2605\2605";font-size:.95rem;letter-spacing:.14em}
/* review list: card per review */
.woocommerce-Reviews .commentlist{list-style:none;margin:0;padding:0}
.woocommerce-Reviews .commentlist li{margin:0 0 .9rem}
.woocommerce-Reviews .comment_container{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem;display:flex;gap:.9rem}
.woocommerce-Reviews .comment_container>img.avatar{width:44px;height:44px;border-radius:50%;flex:none}
.woocommerce-Reviews .comment-text{flex:1;min-width:0}
.woocommerce-Reviews .comment-text .meta{margin:.25rem 0 .5rem;font-size:.88rem;color:var(--muted)}
.woocommerce-Reviews .comment-text .meta strong{color:var(--navy-900);font-size:1rem}
.woocommerce-Reviews .comment-text .description{font-size:.95rem;color:var(--ink-soft);line-height:1.6}
.woocommerce-Reviews .comment-text .description p{margin:0 0 .5rem}
/* form card */
#review_form_wrapper #respond{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.7rem}
#respond .comment-reply-title{display:block;font-family:var(--font-display);font-weight:700;
  color:var(--navy-900);font-size:1.15rem;margin-bottom:.4rem;line-height:1.35}
#respond .comment-notes{font-size:.85rem;color:var(--muted);margin:0 0 1rem}
#respond .comment-form-rating{margin:0 0 1rem}
#respond .comment-form-rating label{display:block;font-weight:600;font-size:.88rem;color:var(--navy-900);margin-bottom:.4rem}
/* star-button input built by main.js; the select stays for no-JS + a11y fallback */
.hs-star-input{display:inline-flex;gap:.15rem}
.hs-star-input button{background:none;border:0;padding:.05em;font-size:1.7rem;line-height:1;cursor:pointer;
  color:var(--line);transition:color .12s,transform .12s}
.hs-star-input button.is-on{color:var(--gold-deep)}
.hs-star-input button:hover{transform:scale(1.12)}
.hs-star-input:has(button:hover) button{color:var(--line)}
.hs-star-input:has(button:hover) button.is-hover{color:var(--gold)}
#respond p.comment-form-comment,#respond p.comment-form-author,#respond p.comment-form-email{margin:0 0 1rem}
#respond label{display:block;font-weight:600;font-size:.88rem;color:var(--navy-900);margin-bottom:.35rem}
#respond input[type="text"],#respond input[type="email"],#respond textarea{width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:10px;padding:.8em 1em;font-family:var(--font-body);font-size:.98rem}
#respond textarea{min-height:110px;resize:vertical}
#respond .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;
  color:var(--muted);margin:0 0 1.1rem}
#respond .comment-form-cookies-consent label{display:inline;font-weight:400;color:var(--muted);margin:0}
#respond .form-submit{margin:0}
#respond .form-submit .submit{background:var(--gold);color:var(--navy-900);border:0;border-radius:999px;
  font-family:var(--font-body);font-weight:800;font-size:.98rem;padding:.85em 2em;cursor:pointer;
  transition:background var(--t)}
#respond .form-submit .submit:hover{background:var(--gold-bright)}
/* honest shop-level credibility line above the form (theme outputs .hs-review-cred) */
.hs-review-cred{background:var(--cream);border:1px solid var(--line);border-radius:10px;
  padding:.7rem 1rem;font-size:.9rem;color:var(--ink-soft);margin:0 0 1rem}
.hs-review-cred a{color:var(--gold-ink);font-weight:700;text-decoration:underline}

/* ============================================================ CART */
/* line-items table */
.woocommerce-cart .woocommerce-cart-form table.shop_table{border:1px solid var(--line);
  border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff;font-size:.94rem}
.woocommerce-cart .woocommerce-cart-form table.shop_table th{background:var(--cream);font-family:var(--font-body);
  font-weight:700;color:var(--navy-900);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;padding:.7rem 1rem}
.woocommerce-cart .woocommerce-cart-form table.shop_table td{padding:.8rem 1rem;border-top:1px solid var(--line);vertical-align:middle}
.woocommerce-cart .product-thumbnail img{width:96px;border-radius:8px;background:var(--cream)}
.woocommerce-cart .product-name a{font-weight:600;color:var(--navy-900)}
/* Cart/checkout item breakdown — tidy two-column mini-table (label left, price right)
 * instead of stacked/indented rows. dl.variation = WC's per-item meta list. */
.woocommerce-cart .product-name .variation,
.woocommerce-checkout .variation{
  display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;row-gap:.18rem;
  align-items:baseline;margin:.5rem 0 0;max-width:430px;font-size:.82rem;line-height:1.4}
.woocommerce-cart .product-name .variation dt,
.woocommerce-checkout .variation dt{font-weight:600;color:var(--ink-soft);margin:0;font-style:normal}
.woocommerce-cart .product-name .variation dd,
.woocommerce-checkout .variation dd{margin:0;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.woocommerce-cart .product-name .variation dd p,
.woocommerce-checkout .variation dd p{margin:0}
@media(max-width:560px){
  .woocommerce-cart .product-name .variation,.woocommerce-checkout .variation{column-gap:.6rem;font-size:.78rem;max-width:none}
}
.woocommerce-cart td.product-quantity .qty{width:62px;padding:.45em;font-size:.92rem;min-height:0;height:auto}
.woocommerce a.remove{color:var(--navy-700) !important;font-weight:700;border-radius:50%;
  width:22px;height:22px;line-height:20px;text-align:center;font-size:.95rem}
.woocommerce a.remove:hover{background:var(--navy-700);color:#fff !important}

/* cart totals — clean label | value (no duplicate, proportional) */
.cart_totals{font-size:.94rem}
.cart_totals h2{font-size:1.25rem;text-transform:uppercase;margin-bottom:.8rem}
.cart_totals table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cart_totals table th{width:58%}
.cart_totals table th,.cart_totals table td{padding:.7rem 1rem;border-top:1px solid var(--line);
  vertical-align:middle;text-align:left;font-size:.94rem;overflow-wrap:anywhere}
.cart_totals table tr:first-child th,.cart_totals table tr:first-child td{border-top:0}
.cart_totals table th{font-weight:600;color:var(--ink-soft);background:#fff;white-space:normal;
  text-transform:none;letter-spacing:0;line-height:1.3}
.cart_totals table td{text-align:right;color:var(--ink-soft)}
.cart_totals .order-total th{font-weight:800;color:var(--navy-900)}
.cart_totals .order-total td .amount,.cart_totals .order-total td{color:var(--navy-800);font-weight:800;font-size:1.02rem}
.cart-collaterals .cart_totals{float:none;width:100%}

/* the bulk callout — block flow so the inline text doesn't split into flex columns */
.hs-bulk-callout{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;
  border-radius:var(--radius);padding:.9rem 1.2rem;margin:0 0 1.4rem;font-size:.92rem;line-height:1.5;
  display:block;position:relative;overflow:hidden}
.hs-bulk-callout::before{content:"✦";color:var(--gold-bright);font-weight:700;margin-right:.45em}
.hs-bulk-callout strong{color:var(--gold-bright)}

/* coupon + buttons — proportional */
.woocommerce .button,.woocommerce input.button,.woocommerce a.button,
.woocommerce button.button{background:var(--navy-700);color:#fff;border:0;border-radius:999px;
  font-family:var(--font-body);font-weight:700;padding:.72em 1.4em;transition:all var(--t);
  font-size:.92rem;line-height:1.2}
.woocommerce .button:hover,.woocommerce input.button:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover{background:var(--navy-800);color:#fff}
.woocommerce .button.alt,.woocommerce button.button.alt,
.wc-proceed-to-checkout .checkout-button{background:var(--gold) !important;color:var(--navy-900) !important}
.woocommerce .button.alt:hover,.wc-proceed-to-checkout .checkout-button:hover{
  background:var(--gold-bright) !important;color:var(--navy-900) !important}
.wc-proceed-to-checkout{margin-top:1rem}
.wc-proceed-to-checkout .checkout-button{display:block;text-align:center;font-size:.98rem !important;padding:.85em 1.6em !important}
.woocommerce-cart .coupon{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.woocommerce-cart .coupon .input-text{flex:1 1 140px;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.6em 1.1em;font-size:.92rem}
.woocommerce-cart .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* desktop cart polish — tighten the left columns so the remove × + thumbnail sit
   beside the product instead of across a wide empty gap */
@media(min-width:761px){
  .woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove{width:44px;text-align:center;padding-left:.5rem;padding-right:0}
  .woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail{width:90px;padding-right:0}
  .woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name,
  .woocommerce-cart .woocommerce-cart-form table.shop_table th.product-name{padding-left:1rem}
}

/* ============================================================ CART DRAWER */
.hs-cartd{position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none}
.hs-cartd.is-open{visibility:visible;pointer-events:auto}
.hs-cartd__scrim{position:absolute;inset:0;background:rgba(13,26,43,.5);opacity:0;transition:opacity .35s ease}
.hs-cartd.is-open .hs-cartd__scrim{opacity:1}
.hs-cartd__panel{position:absolute;top:0;right:0;height:100%;width:min(400px,92vw);background:var(--cream);
  box-shadow:-14px 0 44px rgba(13,26,43,.24);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.1,1)}
.hs-cartd.is-open .hs-cartd__panel{transform:none}
.hs-cartd__head{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.25rem;background:var(--navy-900);color:#fff;flex:none}
.hs-cartd__title{font-family:var(--font-display);font-weight:800;font-size:1.18rem}
.hs-cartd__close{background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.hs-cartd__close:hover{background:rgba(255,255,255,.24)}
.hs-cartd__close svg{width:17px;height:17px}
.hs-cartd__body{flex:1;display:flex;flex-direction:column;padding:1rem 1.2rem 1.2rem;overflow:hidden}
.hs-cartd__nudge{display:flex;gap:.5rem;align-items:flex-start;flex:none;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  color:#fff;border-radius:10px;padding:.7rem .85rem;margin:0 0 .9rem;font-size:.85rem;line-height:1.4}
.hs-cartd__nudge b{color:var(--gold-bright)}
.hs-cartd__nudge-ic{color:var(--gold-bright);flex:none;font-size:.9rem;line-height:1.55}
.hs-cartd .woocommerce-mini-cart{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0}
.hs-cartd .woocommerce-mini-cart__empty-message{color:var(--muted);text-align:center;margin:2.5rem 0}
.hs-cartd li.woocommerce-mini-cart-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem;margin:0 0 .7rem;position:relative;list-style:none}
.hs-cartd li.woocommerce-mini-cart-item>a:not(.remove){display:flex;gap:.7rem;align-items:flex-start;text-decoration:none;color:var(--navy-900);font-weight:600;font-size:.87rem;line-height:1.3;padding-right:1.2rem}
.hs-cartd li.woocommerce-mini-cart-item img{width:52px !important;height:auto !important;flex:none;margin:0;border-radius:8px;float:none !important;background:var(--cream)}
.hs-cartd li.woocommerce-mini-cart-item a.remove{position:absolute;top:.45rem;right:.5rem;width:20px;height:20px;line-height:18px;font-size:.85rem}
.hs-cartd li.woocommerce-mini-cart-item .variation{margin:.45rem 0 0;font-size:.76rem;color:var(--muted)}
.hs-cartd li.woocommerce-mini-cart-item .variation dt,.hs-cartd li.woocommerce-mini-cart-item .variation dd{margin:0;display:inline}
.hs-cartd li.woocommerce-mini-cart-item .quantity{display:block;margin:.4rem 0 0;color:var(--ink-soft);font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.hs-cartd .woocommerce-mini-cart__total{display:flex;justify-content:space-between;align-items:baseline;flex:none;border-top:1px solid var(--line);margin:.3rem 0 0;padding:.9rem 0 0;font-weight:700;color:var(--navy-900);font-size:.98rem}
.hs-cartd .woocommerce-mini-cart__total .amount{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--navy-800)}
.hs-cartd .woocommerce-mini-cart__buttons{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.85rem 0 0;flex:none;padding:0}
.hs-cartd .woocommerce-mini-cart__buttons a{display:block;text-align:center;border-radius:999px;padding:.82em 1em;font-weight:700;font-size:.92rem;margin:0;text-decoration:none;transition:all var(--t)}
.hs-cartd .woocommerce-mini-cart__buttons a.button{background:#fff;border:1.5px solid var(--line);color:var(--navy-900)}
.hs-cartd .woocommerce-mini-cart__buttons a.button:hover{border-color:var(--navy-700)}
.hs-cartd .woocommerce-mini-cart__buttons a.checkout{background:var(--gold);color:var(--navy-900);border:0}
.hs-cartd .woocommerce-mini-cart__buttons a.checkout:hover{background:var(--gold-bright)}
body.hs-cartd-open{overflow:hidden}

/* PDP FAQ accordion (native <details>) */
/* Sits directly under the info tabs (hook priority 12) — full content width, items in
 * a 2-col grid on desktop so six questions stay compact instead of a long single stack. */
.hs-faq{grid-column:1/-1;margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;
  gap:.7rem 1.6rem;align-items:start}
.hs-faq__h{grid-column:1/-1;font-size:1.7rem;text-transform:uppercase;margin-bottom:.8rem;color:var(--navy-900)}
@media(max-width:900px){.hs-faq{grid-template-columns:1fr}}
.hs-faq__item{border:1px solid var(--line);border-radius:12px;margin:0;background:#fff;overflow:hidden}
.hs-faq__item summary{list-style:none;cursor:pointer;padding:.95rem 1.1rem;font-weight:700;color:var(--navy-900);
  font-size:.98rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hs-faq__item summary::-webkit-details-marker{display:none}
.hs-faq__item summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--gold-deep);line-height:1;flex:none}
.hs-faq__item[open] summary::after{content:"\2212"}
.hs-faq__item summary:hover{color:var(--gold-ink)}
.hs-faq__a{padding:0 1.1rem 1.05rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55}

/* PDP recently-viewed strip (client-rendered)
 * Mirrors the Related-products row exactly (heading, 4-col grid, card chrome) —
 * the two sections sit adjacent on the PDP, so any size mismatch reads as a bug. */
.hs-recent{grid-column:1/-1;margin-top:3rem}
.hs-recent__h{font-size:1.7rem;color:var(--navy-900);margin-bottom:1.5rem;text-transform:uppercase}
.hs-recent__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.hs-recent__card{display:flex;flex-direction:column;border:1px solid #f1ebdf;border-radius:var(--radius);background:#fff;
  overflow:hidden;text-decoration:none;box-shadow:0 5px 18px rgba(20,24,30,.06);transition:all var(--t)}
.hs-recent__card:hover{box-shadow:var(--shadow);transform:translateY(-5px);border-color:transparent}
.hs-recent__imgwrap{background:#fff;aspect-ratio:1/1;display:grid;place-items:center;padding:1rem;overflow:hidden}
.hs-recent__imgwrap img{max-width:100%;max-height:100%;object-fit:contain;transition:transform var(--t)}
.hs-recent__card:hover .hs-recent__imgwrap img{transform:scale(1.04)}
.hs-recent__name{font-size:1rem;font-weight:600;color:var(--navy-900);padding:1rem 1.1rem .2rem;line-height:1.35}
.hs-recent__price{font-weight:700;color:var(--navy-700);padding:.1rem 1.1rem 1.1rem;font-size:1.02rem}
@media(max-width:560px){.hs-recent__grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}

/* PDP social proof badge (under title) */
.hs-social{display:flex;align-items:center;gap:.5rem;margin:.1rem 0 1.1rem;font-size:.9rem;color:var(--ink-soft);flex-wrap:wrap}
.hs-social__stars{color:var(--gold-deep);letter-spacing:.04em;font-size:.95rem;white-space:nowrap}
.hs-social__txt b{color:var(--navy-900);font-weight:700}

/* ============================================================ PDP STICKY BUY BAR */
.hs-stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:900;transform:translateY(115%);
  transition:transform .32s cubic-bezier(.4,0,.1,1);background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(13,26,43,.12)}
body.hs-sb-on .hs-stickybuy{transform:none}
body.hs-designing .hs-stickybuy{display:none !important}
.hs-stickybuy__in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:.8rem;
  padding:.6rem clamp(.85rem,3vw,1.5rem);padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
.hs-stickybuy__name{font-weight:700;color:var(--navy-900);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.hs-stickybuy__price{font-family:var(--font-display);font-weight:800;color:var(--navy-800);font-size:1.05rem;white-space:nowrap}
.hs-stickybuy__cta{background:var(--gold);color:var(--navy-900);border:0;border-radius:999px;font-weight:700;
  padding:.7em 1.5em;font-size:.95rem;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background var(--t)}
.hs-stickybuy__cta:hover{background:var(--gold-bright)}
@media(max-width:520px){
  .hs-stickybuy__name{font-size:.84rem}
  .hs-stickybuy__cta{padding:.65em 1.15em;font-size:.9rem}
}

/* ============================================================ CHECKOUT */
.woocommerce-checkout h3{font-size:1.3rem;text-transform:uppercase;border-bottom:1px solid var(--line);
  padding-bottom:.6rem;margin-bottom:1.2rem}
.woocommerce form .form-row label{font-weight:600;font-size:.88rem;color:var(--navy-900)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection{border:1px solid var(--line) !important;border-radius:10px;
  padding:.8em 1em;font-family:var(--font-body);font-size:.98rem;min-height:48px}
.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
/* WooPayments card field was squished to ~half width — a <fieldset> defaults to min-width:min-content
 * and never stretched to fill its parent, cramping the card number/expiry/CVC. Force full width. (2026-06-30) */
.woocommerce-checkout #payment .wc-payment-form{width:100%;min-width:0;box-sizing:border-box;margin:0}
.woocommerce-checkout #payment .wcpay-upe-form,
.woocommerce-checkout #payment .payment_box{width:100%;box-sizing:border-box}
.woocommerce-checkout #payment .wcpay-upe-element,
.woocommerce-checkout #payment .StripeElement{width:100% !important;max-width:100% !important;box-sizing:border-box}
#order_review .shop_table{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;border-collapse:separate;border-spacing:0}
#order_review th{background:transparent}
/* uniform white order card (Aramis 2026-06-30): no cream bands; separate sections with lines */
.woocommerce-checkout #order_review thead th{border-bottom:1px solid var(--line)}
.woocommerce-checkout #order_review .cart-subtotal th,
.woocommerce-checkout #order_review .cart-subtotal td{border-top:1px solid var(--line);padding-top:.7rem}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{padding-bottom:.2rem}

/* ---- Checkout redesign (2026-06-30): billing/shipping/notes as soft cards, 2-col names,
 * full-width notes. Groups the sparse full-width form into scannable sections. ---- */
.woocommerce-checkout #order_review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.woocommerce-checkout #order_review .shop_table{border:0;background:transparent}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem 1.6rem .7rem;margin-bottom:1.4rem}
.woocommerce-checkout .woocommerce-additional-fields{padding-bottom:1.4rem}
.woocommerce-checkout #customer_details h3{margin-top:0}
.woocommerce-checkout .form-row-first{float:left;width:calc(50% - .55rem)}
.woocommerce-checkout .form-row-last{float:right;width:calc(50% - .55rem)}
.woocommerce-checkout .form-row-wide{clear:both}
.woocommerce-checkout .woocommerce-billing-fields .form-row,
.woocommerce-checkout .woocommerce-shipping-fields .form-row{margin:0 0 1rem}
.woocommerce-checkout #order_comments{width:100%;min-height:90px;box-sizing:border-box}
@media(max-width:480px){/* stack first/last name on small phones so they don't cramp */
  .woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{float:none;width:100%}
  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields{padding:1.2rem 1.1rem .5rem}
}

/* ---- Checkout form fundamentals (2026-07-02): Woo's base stylesheets are dequeued
 * (functions.php woocommerce_enqueue_styles → []), and the theme never replicated the
 * form-layout rules they provided — so labels rendered inline beside browser-default-width
 * inputs and the shipping list kept its bullets. Restore the essentials. ---- */
.woocommerce form .form-row label{display:block;margin:0 0 .35rem}
.woocommerce form .form-row .woocommerce-input-wrapper{display:block;width:100%}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{width:100%;box-sizing:border-box;display:block}
.woocommerce form .form-row .select2-container{width:100% !important;display:block}
/* checkbox rows stay inline (ship-to-different, save-payment-info, terms) */
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox{
  display:inline-flex;align-items:center;gap:.5rem;margin:0}
.woocommerce form .form-row input[type="checkbox"]{width:auto;display:inline-block}
/* "Ship to a different address?" — a toggle, not a shouting banner */
.woocommerce-checkout h3#ship-to-different-address{font-size:1.02rem;text-transform:none;
  letter-spacing:0;border-bottom:0;padding-bottom:0;margin-bottom:.4rem}
.woocommerce-checkout h3#ship-to-different-address label{display:inline-flex;align-items:center;
  gap:.55rem;font-weight:700;cursor:pointer;margin:0}
/* Shipping options: full-width stacked rows under the "Shipment" heading — never a
 * bulleted list squeezed into the price column */
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td{display:block;width:100%;
  text-align:left;box-sizing:border-box;padding-left:0;padding-right:0}

/* ---- Checkout simplification (2026-07-08, operator design pass) ----
 * The page carried two info banners, the ENTIRE terms document inline, undifferentiated
 * sections and plain radio payment rows. Calm it down: numbered steps, quiet utility
 * links, card-style payment methods, an airy order summary, one unmissable gold CTA. */
/* Returning-customer + coupon banners → single quiet lines above the form */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 .45rem;
  font-size:.9rem;color:var(--muted)}
/* gold-ink, not gold-deep: #a07a28 on white is 3.96:1 (fails AA for body-size text) */
.woocommerce-checkout .woocommerce-form-login-toggle a,
.woocommerce-checkout .woocommerce-form-coupon-toggle a{color:var(--gold-ink);font-weight:600;text-decoration:underline}
/* Step chips: 1 = contact/billing (left column), 2 = order review + payment (right) */
.woocommerce-checkout .woocommerce-billing-fields>h3,
.woocommerce-checkout #order_review_heading{display:flex;align-items:center;gap:.65rem}
.woocommerce-checkout .woocommerce-billing-fields>h3::before,
.woocommerce-checkout #order_review_heading::before{
  display:inline-grid;place-items:center;flex:none;width:1.7em;height:1.7em;border-radius:50%;
  background:var(--navy-700);color:#fff;font-size:.78em;font-weight:800;letter-spacing:0}
.woocommerce-checkout .woocommerce-billing-fields>h3::before{content:"1"}
.woocommerce-checkout #order_review_heading::before{content:"2"}
/* The full Terms & Conditions document rendered inline above the button — the single
 * biggest crowding offender. The checkbox + link to the page carry the requirement. */
.woocommerce-checkout .woocommerce-terms-and-conditions{display:none !important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:0 0 1rem;font-size:.9rem}
/* Field helper text (e.g. under email) */
.woocommerce form .form-row .description{display:block;margin:.35rem 0 0;font-size:.8rem;
  color:var(--muted);font-style:normal}
/* Payment methods → selectable cards */
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 1rem;padding:0;
  border:0;display:flex;flex-direction:column;gap:.6rem}
.woocommerce-checkout #payment ul.payment_methods li{margin:0;border:1px solid var(--line);
  border-radius:12px;padding:.9rem 1.05rem;background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.woocommerce-checkout #payment ul.payment_methods li:has(input.input-radio:checked){
  border-color:var(--navy-700);box-shadow:0 0 0 1px var(--navy-700)}
.woocommerce-checkout #payment ul.payment_methods li>label{font-weight:700;color:var(--navy-900);
  cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;margin:0}
.woocommerce-checkout #payment ul.payment_methods li img{max-height:22px;width:auto}
.woocommerce-checkout #payment div.payment_box{background:transparent;padding:.85rem 0 0;margin:0;
  font-size:.92rem;color:var(--ink-soft)}
.woocommerce-checkout #payment div.payment_box::before{display:none}
/* Order summary table — open, airy rows instead of a cramped data table */
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td{padding:.55rem 0;text-align:left;vertical-align:top;background:transparent}
.woocommerce-checkout #order_review thead th{font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);font-weight:700;padding:0 0 .55rem}
.woocommerce-checkout #order_review .cart_item td{border-bottom:1px solid var(--line);padding:.75rem 0}
.woocommerce-checkout #order_review .product-name{font-weight:600;color:var(--navy-900);
  font-size:.95rem;padding-right:.9rem;line-height:1.4}
.woocommerce-checkout #order_review td.product-total,
.woocommerce-checkout #order_review thead th.product-total{text-align:right}
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td .amount,
.woocommerce-checkout #order_review .fee td,.woocommerce-checkout #order_review .tax-total td{text-align:right}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{font-size:1.12rem;color:var(--navy-900);
  font-weight:800;padding-top:.9rem;border-top:2px solid var(--navy-900);text-align:left}
.woocommerce-checkout #order_review .order-total td{text-align:right}
/* Place order — full-width, gold, unmistakable */
.woocommerce-checkout #payment #place_order{width:100%;background:var(--gold);color:var(--navy-900);
  border:0;border-radius:999px;font-family:var(--font-body);font-weight:800;font-size:1.05rem;
  padding:1em 1.5em;cursor:pointer;transition:background var(--t),transform var(--t)}
.woocommerce-checkout #payment #place_order:hover{background:var(--gold-bright);transform:translateY(-1px)}
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th{padding-bottom:.35rem}
#order_review ul#shipping_method{list-style:none;margin:0;padding:0}
#order_review ul#shipping_method li{display:flex;align-items:baseline;gap:.55rem;margin:0 0 .5rem;padding:0}
#order_review ul#shipping_method li input[type="radio"]{flex:none;margin:0;position:relative;top:2px}
#order_review ul#shipping_method li label{display:flex;flex:1;justify-content:space-between;
  gap:.8rem;margin:0;font-weight:500;font-size:.92rem;line-height:1.4}
#order_review ul#shipping_method li label .woocommerce-Price-amount{font-weight:700;white-space:nowrap}
/* Payment methods: radio + name + brand icons on one tidy row; boxes below */
#payment ul.payment_methods{list-style:none;margin:0;padding:0}
#payment ul.payment_methods li{margin:0;padding:.55rem 0;display:flex;align-items:center;
  gap:.55rem;flex-wrap:wrap}
#payment ul.payment_methods li>label{display:inline-flex;align-items:center;gap:.55rem;
  margin:0;font-weight:700;cursor:pointer;flex:1;min-width:0}
#payment ul.payment_methods li>label img{max-height:24px;width:auto;display:inline-block;
  margin-left:auto;float:none}
#payment ul.payment_methods li input[type="radio"]{margin:0 .1rem 0 0;flex:none}
#payment ul.payment_methods li .payment_box{flex:1 1 100%}
#payment .payment_box{margin:.7rem 0 .3rem;padding:.9rem 1rem;background:var(--cream);
  border-radius:10px;font-size:.92rem}
/* keep the place-order area clean */
#payment .form-row.place-order{margin:1rem 0 0;padding:0}
#payment .woocommerce-terms-and-conditions-wrapper{margin-bottom:.9rem;font-size:.9rem}

/* ============================================================ ORDER RECEIVED (2026-07-02)
 * The thank-you page was raw defaults (bulleted overview list, bare tables, italic
 * addresses). Bring it up to storefront quality. */
.woocommerce-order .woocommerce-notice--success{font-family:var(--font-head,inherit);
  font-size:1.45rem;font-weight:800;color:var(--navy-900);margin:0 0 1.6rem}
.woocommerce-order .woocommerce-notice--success::before{content:"✓";display:inline-flex;
  align-items:center;justify-content:center;width:1.7em;height:1.7em;margin-right:.55em;
  border-radius:50%;background:var(--gold);color:var(--navy-900);font-size:.75em;vertical-align:.15em}
ul.woocommerce-order-overview{list-style:none;margin:0 0 1.8rem;padding:1.3rem 1.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem}
ul.woocommerce-order-overview li{margin:0;padding:0 2.2rem 0 0;border-right:1px solid var(--line);
  font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
ul.woocommerce-order-overview li:last-child{border-right:0;padding-right:0}
ul.woocommerce-order-overview li strong{display:block;margin-top:.25rem;font-size:1.06rem;
  color:var(--navy-900);text-transform:none;letter-spacing:0}
ul.woocommerce-order-overview li .wc-payment-gateway-method-logo,
ul.woocommerce-order-overview li img{vertical-align:middle}
.woocommerce-order-details,.woocommerce-customer-details{margin-bottom:1.8rem}
.woocommerce-order-details__title,.woocommerce-customer-details h2,
.woocommerce-column__title{font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;
  color:var(--navy-900);border-bottom:1px solid var(--line);padding-bottom:.55rem;margin:0 0 1rem}
table.woocommerce-table--order-details{width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);border-collapse:separate;border-spacing:0;overflow:hidden}
table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td{padding:.85rem 1.1rem;text-align:left;vertical-align:top}
table.woocommerce-table--order-details thead th{border-bottom:1px solid var(--line);
  font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.woocommerce-table--order-details thead th:last-child,
table.woocommerce-table--order-details td:last-child{text-align:right}
table.woocommerce-table--order-details tbody td{border-bottom:1px solid var(--line)}
table.woocommerce-table--order-details tfoot th{font-weight:600;color:var(--muted);
  text-align:right;padding:.5rem 1.1rem}
table.woocommerce-table--order-details tfoot td{text-align:right;font-weight:700;
  color:var(--navy-800);padding:.5rem 1.1rem}
table.woocommerce-table--order-details tfoot tr:first-child th,
table.woocommerce-table--order-details tfoot tr:first-child td{padding-top:.9rem}
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td{border-top:1px solid var(--line);
  font-size:1.06rem;padding:.8rem 1.1rem .95rem;color:var(--navy-900)}
/* line item internals: product link, qty, FPD proof + decoration meta */
.woocommerce-table--order-details td.product-name>a{font-weight:700;color:var(--navy-800)}
.woocommerce-table--order-details td.product-name .product-quantity{font-weight:600;color:var(--muted)}
.woocommerce-table--order-details td.product-name img{width:76px;height:auto;display:block;
  border:1px solid var(--line);border-radius:10px;margin:.55rem 0;background:#fff}
.woocommerce-table--order-details .wc-item-meta{list-style:none;margin:.55rem 0 0;padding:0;
  font-size:.88rem}
.woocommerce-table--order-details .wc-item-meta li{display:flex;gap:.45rem;margin:0 0 .2rem}
.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label{flex:none;font-weight:600;
  color:var(--ink-soft,var(--navy-800))}
.woocommerce-table--order-details .wc-item-meta p{margin:0;color:var(--muted)}
.woocommerce-table--order-details td.product-name>a:not(:first-child){display:inline-block;
  margin-top:.45rem;font-size:.85rem;font-weight:600;color:var(--gold-dark,#8a6d2f);
  text-decoration:underline}
/* customer/addresses: side-by-side cards, no italics */
.woocommerce-customer-details address{font-style:normal;line-height:1.7;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem}
.woocommerce-columns--addresses{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:640px){.woocommerce-columns--addresses{grid-template-columns:1fr}
  ul.woocommerce-order-overview{flex-direction:column;gap:.9rem}
  ul.woocommerce-order-overview li{border-right:0;padding-right:0}}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border-radius:10px;border-top:3px solid var(--gold);background:var(--cream);
  font-size:.95rem;padding:1em 1.4em;list-style:none}
.woocommerce-message{border-top-color:var(--ok)}
.woocommerce-error{border-top-color:#c0392b}
.woocommerce-message .button,.woocommerce-info .button{float:right}

/* ============================================================ MY ACCOUNT */
.woocommerce-account form.login,.woocommerce-account form.register,
.woocommerce-account form.woocommerce-form-login{max-width:480px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)}
.woocommerce-account form.login .form-row,.woocommerce-account form.register .form-row{display:block;margin-bottom:1rem}
.woocommerce-account form.login label,.woocommerce-account form.register label{display:block;margin-bottom:.35rem}
.woocommerce-account form.login input.input-text,
.woocommerce-account form.register input.input-text{width:100%}
.woocommerce-account form.login .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:.4em;margin-right:1rem}
/* logged-in dashboard nav as tabs */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;
  flex-wrap:wrap;gap:.3rem;border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a{display:block;padding:.65em 1.1em;font-family:var(--font-body);
  font-weight:700;color:var(--muted);border-bottom:2px solid transparent;font-size:.95rem}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{
  color:var(--navy-900);border-bottom-color:var(--gold)}
@media(min-width:861px){
  .woocommerce-account .woocommerce{display:grid;grid-template-columns:230px 1fr;gap:2.5rem;align-items:start}
  .woocommerce-MyAccount-navigation ul{flex-direction:column;border-bottom:0;border-right:1px solid var(--line);
    padding-right:1rem;margin-bottom:0}
  .woocommerce-MyAccount-navigation li a{border-bottom:0;border-left:2px solid transparent;border-radius:0}
  .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{
    border-bottom:0;border-left-color:var(--gold)}
  /* login (logged-out) has no nav → keep single column */
  .woocommerce-account:not(.logged-in) .woocommerce{display:block}
}

/* ============================================================ CHECKOUT 2-COLUMN (desktop) */
@media(min-width:861px){
  /* Fixed row-1 height keeps the "Your order" heading tight to the summary card — a
   * row-spanning #customer_details inflates an auto/min-content track, which stranded the
   * heading ~250px above the card. row-gap:0 keeps them adjacent; column-gap stays wide. */
  .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.15fr .85fr;
    grid-template-rows:3.6rem auto;column-gap:clamp(2rem,4vw,3.5rem);row-gap:0;align-items:start}
  .woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 2}
  .woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 1rem}
  .woocommerce-checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:96px}
}

/* ============================================================ RESPONSIVE */
@media(max-width:1024px){
  ul.products,ul.products.columns-4,.hs-featured-grid{grid-template-columns:repeat(3,1fr)}
  .single-product div.product{grid-template-columns:1fr;gap:2rem}
  .single-product div.product .woocommerce-product-gallery{position:static}
}
@media(max-width:760px){
  ul.products,ul.products.columns-4,.hs-featured-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  /* stack ONLY the line-items table on mobile (NOT the totals table — that caused
     duplicate labels because totals already have a <th> label) */
  /* Mobile cart: each line-item becomes a clean card instead of cramped label/value
     rows. Top row: thumbnail · name+options · remove. Bottom row: qty · line total. */
  .woocommerce-cart .woocommerce-cart-form table.shop_table{border:0;background:none;overflow:visible;font-size:.92rem}
  .woocommerce-cart .woocommerce-cart-form table.shop_table thead{display:none}
  .woocommerce-cart .woocommerce-cart-form .cart_item{display:grid;grid-template-columns:58px 1fr auto;
    grid-template-areas:"thumb name remove" "qty qty subtotal";column-gap:.85rem;row-gap:.7rem;align-items:start;
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem;margin:0 0 .8rem;position:relative}
  .woocommerce-cart .woocommerce-cart-form .cart_item td{display:block;padding:0;border:0;text-align:left}
  .woocommerce-cart .woocommerce-cart-form .cart_item td::before{display:none !important}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-thumbnail{grid-area:thumb;display:block !important}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-thumbnail img{width:58px;margin:0}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-name{grid-area:name;font-size:.95rem;line-height:1.3}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-name .variation{margin-top:.4rem}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-price{display:none}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-quantity{grid-area:qty;justify-self:start;align-self:center}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-subtotal{grid-area:subtotal;justify-self:end;align-self:center;
    text-align:right;font-weight:800;color:var(--navy-800);font-size:1.05rem}
  .woocommerce-cart .woocommerce-cart-form .cart_item .product-remove{grid-area:remove;justify-self:end}
  /* coupon + update-cart actions stay full-width (not a card) */
  .woocommerce-cart .woocommerce-cart-form td.actions{display:block;padding:.4rem 0 0;border:0}
  .woocommerce-cart .woocommerce-cart-form td.actions::before{display:none}
  /* totals: keep a tidy 2-col label|value table on mobile */
  .cart_totals table th{width:55%}
  .cart_totals h2{font-size:1.15rem}
}
@media(max-width:480px){
  ul.products,ul.products.columns-4,.hs-featured-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  ul.products li.product .woocommerce-loop-product__title{font-size:.9rem}
  .single-product form.cart .button[type="submit"],.single-product .single_add_to_cart_button{
    flex:1 1 auto}
}

/* PDP pricing-transparency panel (Phase 6 — 2026-06-18) */
.hs-pricepanel{margin:14px 0 18px;padding:14px 16px;border:1px solid #e7dfce;background:#faf7f0;border-radius:12px;font-size:14px;line-height:1.5;color:#1c3e60}
.hs-pricepanel .hs-pp-row{display:flex;gap:8px;align-items:flex-start;margin:2px 0}
.hs-pricepanel .hs-pp-ic{color:#c8a24a;font-size:12px;line-height:1.7;flex:none}
.hs-pricepanel .hs-pp-row b{font-weight:700}
.hs-pricepanel .hs-pp-row em{font-style:normal;color:#8a6d2f;font-weight:600}
.hs-pp-bulk{margin-top:10px;padding-top:10px;border-top:1px dashed #e0d6bf}
.hs-pp-bulk-h{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#6b7585;margin-bottom:6px;font-weight:600}
.hs-pp-tiers{display:flex;gap:8px;flex-wrap:wrap}
.hs-pp-tier{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:6px 8px;background:#fff;border:1px solid #e7dfce;border-radius:9px}
.hs-pp-tier b{color:#1c3e60;font-size:15px;font-weight:800;line-height:1}
.hs-pp-tier i{font-style:normal;color:#8893a3;font-size:11px;margin-top:2px}

/* PDP carousel zoom affordance (overnight pass 12) */
.hs-car-img{cursor:zoom-in}

/* Guarantee strip (PDP + checkout), 2026-07-02 */
.hs-guarantee{display:flex;align-items:flex-start;gap:.55rem;margin:.9rem 0;padding:.7rem .95rem;
  background:#f4f9f4;border:1px solid #d6e8d6;border-radius:10px;font-size:.92rem;color:var(--navy-900)}
.hs-guarantee__ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.45em;height:1.45em;border-radius:50%;background:var(--ok,#2e7d32);color:#fff;font-size:.8em;margin-top:.1em}
.hs-guarantee b{font-weight:800}
.hs-guarantee--checkout{margin:.2rem 0 .9rem;font-size:.88rem}

/* ---- FPD thread palette (2026-07-02; reworked 2026-07-03 operator directive):
 * the palette itself scrolls on desktop AND mobile (the outer panel scroll-area
 * proved unreliable); every swatch carries its colour number only. ---- */
.fpd-color-palette{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));
  gap:6px;max-height:190px !important;overflow-y:auto !important;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:4px 6px 4px 2px}
@media (max-width:768px){.fpd-color-palette{max-height:150px !important}}
.fpd-color-palette .fpd-item{width:26px;height:26px;min-width:26px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);margin:0}
.hs-thread-label{margin:.65rem 0 .2rem;font-size:.86rem;font-weight:700;color:var(--navy-900,#1c3e60);
  min-height:1.25em}
/* The colour tab clamps its swatch area to 100px (3.5 rows of 141): let the inner wrappers
 * grow to natural height; the panel's OUTER .fpd-panel-tabs-content scroll-area handles
 * any remaining overflow. Fills the dead space under Transparency (Aramis issue #6). */
.fpd-panel-color .fpd-color-wrapper,
.fpd-panel-color .fpd-color-panel,
.fpd-panel-color .fpd-color-panel .fpd-scroll-area{height:auto !important;max-height:none !important}
.fpd-panel-color .fpd-color-wrapper>div.fpd-active{height:auto !important}