/* Purpose: WooCommerce styling on the Biji Pathfinders design system.
   Stock Woo styling is dequeued - everything here is BEM-ish and token driven. */

/* ============================================================
   SHOP SHELL
   ============================================================ */
.shop{padding-top:calc(var(--header-offset) + var(--space-48));padding-bottom:var(--space-96)}
@media (min-width:1024px){ .shop{padding-top:calc(var(--header-offset) + var(--space-64))} }
@media (max-width:767px){ .shop{padding-bottom:48px} }
@media (min-width:768px){ .shop{padding-bottom:80px} }
/* The Shop/category archive always has .shop-hero right above it now, which
   already clears the fixed header - .shop's own header-offset padding was
   for when it sat directly under the header and would otherwise double up
   into a huge gap. Figma node 213:6506's own pt-[60px] instead. */
.shop-hero + .shop{padding-top:var(--space-60)}
@media (min-width:1024px){ .shop-hero + .shop{padding-top:var(--space-60)} }
@media (max-width:767px){ .shop-hero + .shop{padding-top:32px} }
.shop__inner{
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-max));
  margin-inline:auto;
}
.shop__head{margin-bottom:var(--space-48)}
@media (max-width:767px){ .shop__head{margin-bottom:32px} }
.shop__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
@media (min-width:1024px){
  /* Figma node 213:6506 - 264px sidebar, 40px gutter, exactly filling the
     1280px container at desktop (264 + 40 + 976 content). */
  .shop__layout{grid-template-columns:264px minmax(0,1fr);gap:var(--space-40)}
  .shop__layout--wide{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px) and (max-width:1279px){
  .shop__layout{gap:32px}
}
@media (min-width:1280px){
  .shop__layout{grid-template-columns:280px minmax(0,1fr);gap:32px}
  /* Without this, the --wide (no-sidebar) modifier set in the 1024px block
     above gets overridden back to the 280px-sidebar track here, since a
     later media query wins an equal-specificity tie regardless of which one
     is conditional - same bug shape as the footer/post-card ones this
     session. Wishlist page (no filters aside) needs this at every desktop
     tier, not just 1024-1279. */
  .shop__layout--wide{grid-template-columns:minmax(0,1fr)}
}

.woocommerce-result-count{
  margin:0;
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:16px;line-height:24px;color:var(--c-text);
}
.woocommerce-ordering{
  border:1px solid var(--c-text);border-radius:var(--r-sm);
  display:inline-flex;align-items:center;
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.woocommerce-ordering:hover{border-color:var(--c-crimson-light)}
.woocommerce-ordering:has(select:focus-visible){border-color:var(--c-crimson-light)}
.woocommerce-ordering select{
  appearance:none;-webkit-appearance:none;
  min-height:0;margin:0;border:0;background:transparent;
  padding:var(--space-8) 40px var(--space-8) var(--space-16);
  background-image:url('../figma/icon-select-chevron.svg');
  background-repeat:no-repeat;background-position:right var(--space-16) center;background-size:10px 8px;
  color:var(--c-text);font-family:var(--font-body);font-weight:var(--weight-regular);
  font-size:14px;line-height:22px;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;outline:none;
}
.woocommerce-ordering select option{background:var(--c-bg);color:var(--c-text)}
.shop__toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-16);margin-bottom:var(--space-24);
}
/* margin-left:auto, not justify-content:space-between on the parent alone -
   .shop__toolbar wraps, and once the result-count text and this group land
   on separate lines each becomes the only item on its own line, which
   space-between can't push right (it needs 2+ items on the same line).
   auto margin keeps this pinned to the row's right edge either way. */
.shop__toolbar-controls{display:flex;align-items:center;gap:var(--space-16);margin-left:auto}
@media (min-width:768px) and (max-width:1279px){
  .shop__toolbar-controls{margin-left:0;width:100%;justify-content:space-between}
}

/* View-density switcher, Figma node 213:6526 - the glyphs are hand-built
   from squares in the design itself (not an exported asset). Real, working
   column toggle: assets/js/shop-view.js swaps a .products--cols-N class on
   ul.products and moves the is-active/pink state between these buttons. */
.shop__view-icons{display:none;align-items:center;gap:var(--space-16)}
@media (min-width:768px){ .shop__view-icons{display:flex} }
.shop__view-icon{
  position:relative;display:grid;padding:0;border:0;background:none;cursor:pointer;
}
/* Hover background as an absolutely-positioned pseudo, not padding - padding
   would eat into the grid content box (box-sizing:border-box) and starve the
   list icon's 1fr bar rows down to 0px. */
.shop__view-icon::before{
  content:"";position:absolute;inset:-4px;z-index:-1;
  border-radius:var(--r-sm);background:transparent;
  transition:background var(--dur-base) var(--ease-out);
}
.shop__view-icon:hover::before{background:rgba(255,255,255,.1)}
.shop__view-icon:focus-visible{outline:2px solid var(--c-accent-high);outline-offset:2px}
.shop__view-icon i{display:block;background:#A1A1A1;transition:background var(--dur-base) var(--ease-out)}
.shop__view-icon.is-active i{background:var(--c-crimson)}
.shop__view-icon--grid2{grid-template-columns:repeat(2,11.111px);gap:1.778px}
.shop__view-icon--grid2 i{width:11.111px;height:11.111px}
.shop__view-icon--grid3{grid-template-columns:repeat(3,7.229px);gap:1.157px}
.shop__view-icon--grid3 i{width:7.229px;height:7.229px}
.shop__view-icon--grid4{grid-template-columns:repeat(4,5.357px);gap:.857px}
.shop__view-icon--grid4 i{width:5.357px;height:5.357px}
@media (min-width:768px) and (max-width:1279px){
  .shop__view-icon--grid4{display:none}
}
.shop__view-icon--list{width:24px;height:24px;grid-template-columns:24px;grid-template-rows:repeat(3,1fr);gap:var(--space-8)}
.shop__view-icon--list i{width:100%;height:100%}

/* ============================================================
   PRODUCT GRID - Figma node 213:6506
   ============================================================ */
ul.products{
  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));
  gap:20px;margin:0;padding:0;list-style:none;
}
@media (min-width:1280px){ ul.products{gap:var(--space-24)} }
@media (min-width:768px){ ul.products{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ ul.products{grid-template-columns:repeat(3,minmax(0,1fr))} }
ul.products.columns-3{grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:768px){ ul.products.columns-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* User-picked column count (assets/js/shop-view.js) overrides the responsive
   default above, desktop only - the mobile single column stays put. */
@media (min-width:768px){
  ul.products.products--cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  ul.products.products--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.products.products--cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.products.products--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  ul.products.products--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  ul.products.products--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  ul.products.products--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* List view - one compact row per product: a small fixed-size thumbnail,
   not a full-height stretch, with the whole row evenly padded. */
ul.products.products--list{display:flex;flex-direction:column;gap:24px}
.products--list .product-card{
  flex-direction:row;align-items:center;gap:var(--space-20);
  padding:var(--space-12);
}
.products--list .product-card__media{
  flex:0 0 150px;width:150px;height:150px;
  border-radius:var(--r-md);
}
.products--list .product-card__media img{padding:var(--space-8)}
/* The heart sits over the media everywhere else, but in a row layout its
   parent (.product-card, position:relative) spans the full row - anchor it
   to the thumbnail's own corner instead of the row's. */
.products--list .product-card__wishlist{
  top:calc(var(--space-12) + var(--space-8));
  left:calc(var(--space-12) + var(--space-8));
  right:auto;
}
.products--list .product-card__body{
  width:auto;padding:0;
  flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-20);
}
.products--list .product-card__intro{flex:1;min-width:0}
.products--list .product-card__actions{margin-top:0;flex:0 0 auto}
.products--list .product-card__actions .btn{
  width:auto;padding:var(--space-8) var(--space-20);
  font-size:12px;letter-spacing:1px;
}
@media (max-width:767px){
  .products--list .product-card{flex-direction:column;align-items:stretch;padding:0}
  .products--list .product-card__media{flex-basis:auto;width:100%;height:160px;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .products--list .product-card__body{padding:0 var(--space-16) var(--space-16);flex-direction:column;align-items:flex-start}
  .products--list .product-card__actions .btn{width:100%}
}

.product-card{
  position:relative;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-16);height:100%;
  padding-bottom:24px;
  transition:transform var(--dur-base) var(--ease-out);
}
.product-card:hover{transform:translateY(-4px)}
@media (max-width:767px){
  .product-card{
    gap:20px;padding-bottom:20px;
    font-size:18px;line-height:26px;
  }
}
.product-card__media{
  position:relative;display:block;width:100%;height:240px;overflow:hidden;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:radial-gradient(70% 70% at 50% 50%, #4F4F4F 0%, #393939 50%, #232323 100%);
}
.product-card__media img{width:100%;height:100%;object-fit:contain;padding:var(--space-16)}
.product-card__media svg{position:absolute;inset:0;margin:auto}
.product-card__body{
  width:100%;padding:0 var(--space-20);
  display:flex;flex-direction:column;gap:var(--space-12);flex:1;
}
@media (max-width:767px){ .product-card__body{gap:16px} }
.product-card__intro{display:flex;flex-direction:column;gap:var(--space-8)}
.product-card__title{
  margin:0;
  font-family:var(--font-heading);font-weight:var(--weight-regular);
  font-size:16px;line-height:24px;letter-spacing:.15px;color:var(--c-text);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.product-card__title a{color:inherit}
@media (max-width:767px){ .product-card__title{font-size:18px;line-height:26px;white-space:normal;text-overflow:clip} }
.product-card__price{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);
  font-family:var(--font-heading);font-size:15px;line-height:20px;letter-spacing:.15px;
}
@media (max-width:767px){ .product-card__price{font-size:16px;line-height:24px} }
.product-card__price ins{order:1;text-decoration:none;color:#FF6195}
.product-card__price del{
  order:2;color:var(--c-text-dim);font-weight:var(--weight-light);
  font-size:12px;line-height:18px;letter-spacing:.12px;
}
.product-card__price > .amount,
.product-card__price > .woocommerce-Price-amount{order:1;color:#FF6195}
/* Legal MRP/GST disclosure (inc/woocommerce/setup.php) - real and required
   elsewhere, but Figma's card never shows it, so it's hidden here only. */
.product-card__tax{display:none}
.product-card__actions{margin-top:auto}
.product-card__actions .btn{
  width:100%;min-height:0;
  padding:var(--space-12) var(--space-24);
  font-size:13px;font-weight:var(--weight-medium);
  letter-spacing:1.5px;white-space:nowrap;
}
/* 4-up cards are the narrowest the grid gets - shrink the button further so
   longer labels ("Request a quote") never wrap to a second line. */
.products--cols-4 .product-card__actions .btn{
  font-size:11px;letter-spacing:1px;
  padding:var(--space-8) var(--space-12);
}
.product-card__badge{
  position:absolute;top:var(--space-12);left:var(--space-12);z-index:var(--z-raised);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  background:var(--c-crimson);color:var(--c-text-on-brand);
  padding:var(--space-4) var(--space-8);
}
.product-card__badge--out{background:var(--c-surface-raised);color:var(--c-text-muted);border:1px solid var(--c-border)}
/* The sale/"Offer" badge (plain .product-card__badge, no modifier) - hidden
   per explicit request, not removed from the template, so a real on-sale
   product still gets ready-made markup the day this comes back on. Scoped
   away from --out so "Made to order" keeps showing. */
.product-card__badge:not(.product-card__badge--out){display:none}

/* Wishlist heart - YITH 4.x's JS-hydrated button, reset down to a plain
   icon-btn circle over the top-right of the media, mirroring the badge on
   the left. The button carries its own "Add to wishlist" text label for
   screen readers/no-JS fallback; visually hidden here since the icon reads
   fine on its own at this size. */
.product-card__wishlist{position:absolute;top:var(--space-12);right:var(--space-12);z-index:var(--z-raised)}
.product-card__wishlist .yith-add-to-wishlist-button-block{display:block}
.product-card__wishlist .yith-wcwl-add-to-wishlist-button{
  display:flex;align-items:center;justify-content:center !important;gap:0 !important;
  width:32px;height:32px;border-radius:var(--r-full);
  background:rgba(255,255,255,.14);color:var(--c-text);
  border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.product-card__wishlist .yith-wcwl-add-to-wishlist-button:hover{background:var(--c-crimson);border-color:var(--c-crimson);color:var(--c-text-on-brand)}

/* PDP wishlist - moved onto the gallery image, same icon-button treatment as
   the shop card's. YITH's own default instance in the summary column
   (.yith-add-to-wishlist-button-block--single) is hidden outright. */
.pdp__summary .yith-add-to-wishlist-button-block--single{display:none}
/* left, not right - the gallery plugin's own zoom/lightbox icon
   (.wcgs-lightbox.top_right) already sits top-right, and was overlapping it. */
.pdp__gallery-wishlist{position:absolute;top:var(--space-16);left:var(--space-16);z-index:var(--z-raised)}
.pdp__gallery-wishlist .yith-add-to-wishlist-button-block{display:block}
.pdp__gallery-wishlist .yith-wcwl-add-to-wishlist-button{
  display:flex;align-items:center;justify-content:center !important;gap:0 !important;
  width:40px;height:40px;border-radius:var(--r-full);
  background:rgba(255,255,255,.14);color:var(--c-text);
  border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.pdp__gallery-wishlist .yith-wcwl-add-to-wishlist-button:hover{background:var(--c-crimson);border-color:var(--c-crimson);color:var(--c-text-on-brand)}
.pdp__gallery-wishlist .yith-wcwl-add-to-wishlist-button--added{color:var(--c-crimson)}
/* Same two overrides as .product-card__wishlist above - the plugin's own
   stylesheet sets a hardcoded size/colour directly on the <svg>, and the
   button prints an "Add to wishlist" text label alongside the icon by
   default (visually hidden, not removed, so it's still announced). */
.pdp__gallery-wishlist svg{
  width:18px !important;height:18px !important;
  max-width:none !important;
  color:currentColor !important;
}
.pdp__gallery-wishlist .yith-wcwl-add-to-wishlist-button__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.product-card__wishlist .yith-wcwl-add-to-wishlist-button--added{color:var(--c-crimson)}
/* YITH's own plugin CSS (add-to-wishlist.css) sets a hardcoded 30px size and
   #000 colour directly on the <svg>, which beats a colour set on the parent
   <a> since it's not relying on inheritance - override the same element,
   !important because the plugin stylesheet can reorder itself on update. */
.product-card__wishlist svg{
  width:16px !important;height:16px !important;
  max-width:none !important;
  color:currentColor !important;
}
.product-card__wishlist .yith-wcwl-add-to-wishlist-button__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   FILTERS - spec-based, per the client's brief
   ============================================================ */
.shop-filters{
  background:rgba(255,255,255,.1);border-radius:var(--r-lg);
  padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-24);
}
@media (min-width:1024px){
  /* Grid rows stretch to the tallest column by default - without this the
     264px-wide card inflates to match the full product grid's height
     instead of sizing to its own content, and sticky never has room to
     actually move. */
  .shop-filters{position:sticky;top:calc(var(--header-offset) + var(--space-24));align-self:start}
}
.shop-filters__group{display:flex;flex-direction:column;gap:var(--space-16)}
.shop-filters__group + .shop-filters__group{border-top:1px solid #373737;padding-top:var(--space-24)}
.shop-filters__title{
  margin:0;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:14px;line-height:22px;letter-spacing:2px;text-transform:uppercase;
  color:#FF4A8A;
}
.shop-filters__note{
  margin:0;
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:14px;line-height:22px;color:var(--c-text);
}
.shop-filters ul{display:flex;flex-direction:column;gap:var(--space-12);margin:0;padding:0;list-style:none}
.shop-filters li + li{margin:0}
.shop-filters a{
  display:block;
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:14px;line-height:22px;color:var(--c-text);
}
.shop-filters a:hover{color:var(--c-crimson-light)}
@media (max-width:767px){
  .shop-filters__title,
  .shop-filters a,
  .shop-filters__note{font-size:16px;line-height:24px}
}
.shop-filters .current-cat > a{font-weight:var(--weight-semibold)}
.shop-filters__cta.btn{font-size:14px;font-weight:var(--weight-medium);line-height:22px;padding:var(--space-16);min-height:0;white-space:nowrap}

/* ------------------------------------------------------------
   MOBILE FILTER PANEL - below 768px the sidebar leaves the flow entirely
   and becomes an off-canvas panel, opened from the floating trigger near
   Back To Top instead of sitting inline above the grid. Desktop/tablet
   (>=768px, where .shop-filters already sits inline in .shop__layout)
   are completely untouched by this block.
   ------------------------------------------------------------ */
.shop-filters__head{display:none}
@media (max-width:767px){
  .shop-filters{
    position:fixed;inset:0 0 0 auto;z-index:var(--z-drawer);
    width:min(85vw,360px);height:100%;
    border-radius:0;background:var(--c-bg);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-out);
    box-shadow:var(--shadow-xl);
  }
  .shop-filters.is-open{transform:translateX(0)}
  .shop-filters__head{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:var(--space-16);border-bottom:1px solid #373737;
  }
  .shop-filters__heading{
    margin:0;font-family:var(--font-heading);font-weight:var(--weight-medium);
    font-size:18px;line-height:26px;color:var(--c-text);
  }
  .shop-filters__close{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;flex:none;background:none;border:0;cursor:pointer;
    position:relative;
  }
  .shop-filters__close span,
  .shop-filters__close span::before{
    position:absolute;top:50%;left:50%;
    display:block;width:18px;height:1px;
    background:var(--c-text);border-radius:1px;content:'';
  }
  .shop-filters__close span{transform:translate(-50%,-50%) rotate(45deg)}
  .shop-filters__close span::before{transform:translate(-50%,-50%) rotate(-90deg)}
  /* The sort dropdown moves in here (assets/js/shop-filters-mobile.js) as
     its own group, matching the category/attribute groups either side of it. */
  .shop-filters__sort{display:flex;flex-direction:column;gap:var(--space-16)}
  .shop-filters__sort .woocommerce-ordering{width:100%}
  .shop-filters__sort .woocommerce-ordering select{width:100%}
}

.shop-filters-backdrop{
  position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);
  background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);
}
.shop-filters-backdrop.is-open{
  opacity:1;visibility:visible;
  transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear 0s;
}
@media (min-width:768px){ .shop-filters-backdrop{display:none} }

.shop-filter-toggle{
  display:none;
  position:fixed;right:var(--space-16);bottom:calc(54px + var(--space-16) + var(--space-12));
  z-index:var(--z-overlay);
  width:54px;height:54px;min-width:54px;min-height:54px;aspect-ratio:1/1;flex:none;
  align-items:center;justify-content:center;
  border-radius:var(--r-full);
  background:var(--c-crimson);color:var(--c-text-on-brand);
  border:none;cursor:pointer;padding:0;line-height:0;
  box-shadow:var(--shadow-lg);
  transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-out);
}
.shop-filter-toggle svg{width:22px;height:22px;flex:none}
.shop-filter-toggle:hover,.shop-filter-toggle:focus-visible{
  box-shadow:var(--shadow-crimson);transform:scale(1.06);
}
@media (max-width:767px){ .shop-filter-toggle{display:inline-flex} }

/* ============================================================
   SINGLE PRODUCT (PDP) - the highest-leverage page on the site
   ============================================================ */
/* Figma's own section padding is a tight 24px (node 213:6295, pt-[24px]) -
   the shop shell's usual header-offset + 64px is right for the catalogue
   grid but too airy here, so the product page trims it back on its own. */
body.single-product .shop{padding-top:calc(var(--header-offset) + var(--space-24))}

.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:1024px){ .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start} }
@media (min-width:1024px) and (max-width:1099px){ .pdp{gap:36px} }

.pdp__gallery{position:relative}
@media (min-width:1024px){ .pdp__gallery{position:sticky;top:calc(var(--header-offset) + var(--space-32))} }
.pdp__gallery .onsale{
  position:absolute;top:var(--space-12);right:var(--space-12);left:auto;z-index:var(--z-raised);
  margin:0;min-height:0;border-radius:var(--r-sm);
  background:var(--c-crimson);color:var(--c-text-on-brand);
  padding:var(--space-4) var(--space-12);
  font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  line-height:1.6;
}

/* ============================================================
   PRODUCT GALLERY (Reno Product Gallery / WooGallery plugin) - the
   plugin's own icon font ships broken (empty ::before content on both
   the slide arrows and the lightbox trigger, on this build), so the
   glyphs are replaced with plain SVG chevrons rather than depend on it.
   Figma node 213:6295 sets the main image at a flat 610x610 square
   (h-[610px] against a 610px column) - the plugin's own height control
   is a PRO field, so it's set directly here instead.
   ============================================================ */
.pdp__gallery .wcgs-slider-image{
  /* aspect-ratio, not a flat 610px - 610x610 is square, and the gallery
     column IS ~610px wide at desktop so a fixed height happened to look
     square there, but on a ~358px-wide mobile column the same 610px height
     left a tall box around a square (object-fit:contain) hero photo -
     visible empty letterboxing top and bottom. Square at every width. */
  /* Corner radius is NOT set here - the Gallery Slider for WooCommerce plugin
     injects its own #wpgs-gallery-scoped CSS (ID selector) for this exact
     element, from its own settings (wcgs_settings option -> image_border_radius,
     currently 8px, matching Figma node 213:6306), which always wins over any
     class-based radius written here regardless of value. Change it in the
     plugin's own Gallery settings, not here. */
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:var(--c-bg-alt);
}
/* Every real photo fills the box edge to edge - cover, not contain, so no
   gallery slide ever shows an invented backdrop behind it. */
.pdp__gallery .wcgs-slider-image img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;
}
/* The one exception: the hero slide's own source file (node 213:6306) is a
   transparent cutout, not a photo with its own background - Figma composites
   it over a soft radial gradient rather than cropping it, so only this first
   slide gets that treatment, and only because the asset itself is transparent. */
.pdp__gallery .wcgs-carousel > .spswiper-wrapper > .spswiper-slide:first-child .wcgs-slider-image{
  background:radial-gradient(70% 70% at 50% 50%, rgba(var(--rgb-navy),.40) 0%, rgba(var(--rgb-void),0) 74%), var(--c-bg-alt);
}
.pdp__gallery .wcgs-carousel > .spswiper-wrapper > .spswiper-slide:first-child .wcgs-slider-image img{
  object-fit:contain;object-position:50% 40%;
}

.pdp__gallery .wcgs-spswiper-arrow{background:rgba(255,255,255,.5) !important}
.pdp__gallery .wcgs-spswiper-arrow::before{content:none !important}
.pdp__gallery .wcgs-spswiper-arrow::after{
  content:"" !important;display:block;width:16px;height:16px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.pdp__gallery .wcgs-spswiper-button-prev::after{background-image:url('../figma/icon-chevron-left.svg')}
.pdp__gallery .wcgs-spswiper-button-next::after{background-image:url('../figma/icon-chevron-right.svg')}

.pdp__gallery .sp_wgs-icon-search::before{content:none !important}
.pdp__gallery .sp_wgs-icon-search{
  display:block;width:16px;height:16px;
  background:url('../figma/icon-zoom-search.svg') center/contain no-repeat;
}

/* Thumbnail corner radius: same story as the main image above - the plugin's
   own injected CSS (id #wpgs-gallery, thumbnail_style "border_around") governs
   it via wcgs_settings -> border_normal_width_for_thumbnail.radius, now 4px to
   match Figma. No active-state radius field exists in the plugin (only border
   color/width change on select), so all four thumbs share one radius value. */
.pdp__gallery .wcgs-thumb,
.pdp__gallery .wcgs-thumb .wcgs-slider-image,
.pdp__gallery .wcgs-thumb img{
  border-color:var(--c-border) !important;
  transition:border-color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
  opacity:.6;
}
.pdp__gallery .wcgs-thumb:hover{opacity:1}
.pdp__gallery .wcgs-thumb.spswiper-slide-thumb-active,
.pdp__gallery .wcgs-thumb.spswiper-slide-thumb-active .wcgs-slider-image,
.pdp__gallery .wcgs-thumb.spswiper-slide-thumb-active img{
  opacity:1;border-color:var(--c-crimson) !important;
}

/* Eyebrow + SKU + title, Figma node 213:6295 - literal values throughout. */
.pdp__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold);
  line-height:22px;letter-spacing:2px;text-transform:uppercase;
  color:#FF4A8A;
}
.pdp__eyebrow-dot{width:6px;height:6px;border-radius:3px;background:#FF4A8A;flex:none}
@media (max-width:767px){
  .pdp__eyebrow{font-size:12px;line-height:20px}
}
.pdp__sku{
  margin:24px 0 0;
  font-family:var(--font-heading);font-weight:var(--weight-extralight);
  font-size:14px;line-height:22px;letter-spacing:0.14px;color:var(--c-text);
  text-transform:none;
}
.pdp__summary .product_title{
  margin-top:12px;text-transform:capitalize;
  font-family:var(--font-heading);font-weight:var(--weight-medium);
  /* H1 banner - fluid 28px (mobile) -> 42px (desktop), floor pinned
     site-wide; was a static 42px with no mobile scaling at all before. */
  font-size:clamp(28px, 2.16vw + 1.24rem, 42px);
  line-height:1.2;letter-spacing:0.42px;
}
/* WooCommerce emits <p class="price"> straight into the summary column. */
.pdp__summary .price{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);
  margin-top:24px;
  font-family:var(--font-heading);
  font-weight:var(--weight-medium);
  /* Was a flat 42px with no scaling at all - fine at desktop's own width,
     but noticeably oversized once the summary column narrows through
     tablet. Same fluid curve as .product_title just above, so both scale
     down together instead of the price staying pinned at its full size. */
  font-size:clamp(28px, 2.16vw + 1.24rem, 42px);
  line-height:1.2;letter-spacing:0.42px;
}
.pdp__summary .price del{
  order:2;
  color:var(--c-text);font-weight:var(--weight-light);
  font-size:24px;line-height:30px;letter-spacing:0.24px;
  text-decoration-skip-ink:none;
}
.pdp__summary .price ins{order:1;text-decoration:none;color:#FF4A8A}
.pdp__summary .price:not(:has(del)) ins{color:#FF4A8A}
.pdp__savings{
  order:3;
  display:inline-flex;align-items:center;
  padding:4px 16px;border-radius:50px;background:var(--c-crimson);
  font-family:var(--font-heading);font-weight:var(--weight-light);
  font-size:14px;line-height:22px;letter-spacing:0.14px;color:var(--c-text);
  text-transform:capitalize;
}
/* The clamp() above (shared with .product_title) is a sitewide, viewport-
   width-based curve - it saturates at its 42px cap by ~1026px, so the whole
   1024-1099px tablet-landscape range (the .pdp two-col breakpoint's own
   narrow end, see the matching 36px gap override above) was rendering at
   full desktop size with no scaling at all. Pinned smaller explicitly for
   just that range instead of trying to reshape the shared curve. */
@media (min-width:1024px) and (max-width:1099px){
  .pdp__summary .product_title,
  .pdp__summary .price{font-size:28px}
  .pdp__summary .price del{font-size:18px;line-height:24px}
  .pdp__savings{font-size:12px;line-height:20px;padding:4px 14px}
}
.pdp__summary .price .product-card__tax{
  order:4;
  flex-basis:100%;margin-top:12px;
  font-family:var(--font-heading);font-size:16px;line-height:24px;
  font-weight:var(--weight-extralight);letter-spacing:0.16px;
  color:var(--c-text);text-transform:capitalize;
}
.pdp__short{
  margin-top:var(--space-24);width:100%;
  color:var(--c-text);font-family:var(--font-body);font-weight:var(--weight-regular);
  font-size:16px;line-height:24px;max-width:none;
}
.stock{
  display:block;margin-top:var(--space-24);
  font-family:var(--font-heading);font-weight:var(--weight-regular);
  font-size:20px;line-height:30px;letter-spacing:0.2px;color:var(--c-text);
  text-transform:capitalize;
}
.stock__num{font-weight:var(--weight-medium)}
.stock.out-of-stock{color:var(--c-text-dim)}
.woocommerce-product-details__short-description{
  margin-top:var(--space-16);
  color:var(--c-text-muted);
  line-height:var(--lh-loose);
  max-width:64ch;
}
.woocommerce-product-details__short-description p + p{margin-top:var(--space-16)}
.woocommerce-product-details__short-description p{
  color:#FFF;
  font-family:Montserrat;
  font-size:16px;
  font-style:normal;
  font-weight:400;
  line-height:24px; /* 150% */
}

.pdp__form{margin-top:var(--space-32);border-top:1px solid var(--c-border);padding-top:var(--space-32)}
.pdp__summary form.cart{margin-top:24px}
.pdp__summary form.cart{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:stretch}
.pdp__summary form.cart .single_add_to_cart_button{flex:1 1 200px;background:var(--c-crimson)}
.pdp__summary form.cart .single_add_to_cart_button:hover{box-shadow:var(--shadow-crimson)}
/* Whatsapp wraps onto its own line inside the same flex-wrap row as the qty
   stepper and add-to-cart button - it needs 16px of daylight above it where
   its siblings only need 12px, so the extra 4px rides on top of the shared
   flex gap rather than replacing it. */
.pdp__summary form.cart .pdp__whatsapp{flex:1 1 100%;margin:4px 0 0}
.pdp__summary .product_meta{
  margin-top:var(--space-24);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  color:var(--c-text-dim);display:grid;gap:var(--space-8);
}
.variations{width:100%;margin-bottom:var(--space-24)}
.variations td,.variations th{padding-block:var(--space-8);vertical-align:middle;text-align:left}
.variations label{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-muted);
}
.variations select{
  width:100%;min-height:var(--space-48);
  padding:var(--space-8) var(--space-16);
  background:var(--c-bg-alt);border:1px solid var(--c-border);
  color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);
  border-radius:var(--r-hairline);
}
.pdp__buy{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:stretch}
.quantity{display:inline-flex;align-items:stretch;border:1px solid var(--c-text);border-radius:var(--r-sm)}
.quantity__btn{
  width:var(--space-48);display:inline-flex;align-items:center;justify-content:center;
  color:var(--c-text-muted);font-size:var(--fs-lead);
  transition:color var(--dur-base) var(--ease-out);
}
@media (max-width:767px){ .quantity__btn{font-size:24px} }
.quantity__btn:hover{color:var(--c-text)}
.quantity input[type="number"]{
  width:var(--space-56);min-height:var(--space-48);
  background:transparent;border:0;text-align:center;
  color:var(--c-text);font-family:var(--font-mono);font-size:var(--fs-body);
  -moz-appearance:textfield;
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__buy .btn{flex:1 1 200px}

.pdp__trust{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-16);margin-top:24px;
  border-top:1px solid #373737;padding-top:var(--space-24);
}
.pdp-trust{display:flex;gap:var(--space-16);align-items:flex-start}
.pdp-trust__icon{width:24px;height:24px;flex:none}
/* The title+description pair shares one wrapper <span> (title <b> + a second,
   inner <span> for the copy) - ".pdp-trust span" alone matched BOTH of them,
   so the margin-top meant only for the description also landed on the outer
   wrapper and pushed the whole text block 8px below the icon. Scoped to the
   direct wrapper (flex-col, gap instead of margin) and the inner span only. */
.pdp-trust > span{display:flex;flex-direction:column;gap:var(--space-8)}
.pdp-trust b{
  display:block;font-family:var(--font-heading);font-weight:var(--weight-regular);
  font-size:16px;line-height:24px;letter-spacing:0.16px;color:var(--c-text);
  text-transform:capitalize;
}
.pdp-trust > span > span{
  display:block;
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:12px;line-height:20px;color:var(--c-text);
}

.pdp__meta{
  display:flex;align-items:center;gap:var(--space-12);
  margin-top:var(--space-24);
}
.pdp__meta img{flex:none}
.pdp__meta span{
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:14px;line-height:22px;color:var(--c-text);
}
.pdp__notice{
  display:flex;align-items:center;
  margin-top:var(--space-24);
  background:#242424;border-left:10px solid var(--c-crimson);
  border-radius:16px;padding:var(--space-16);
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:14px;line-height:22px;color:var(--c-text);
}
.pdp__whatsapp{margin-top:var(--space-16)}

/* PDP tabs - Figma node 213:6382. WooCommerce ships zero CSS of its own for
   these (just a bare <ul><li><a>), which is what made them read as a broken,
   left-stranded "Description / Reviews (0)" list instead of a real tab row -
   the show/hide switching in wc-single-product.js was already working underneath. */
.woocommerce-tabs.wc-tabs-wrapper{margin-top:80px}
.woocommerce-tabs ul.tabs.wc-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:34px;
  list-style:none;margin:0;padding:0;
}
.woocommerce-tabs ul.tabs.wc-tabs li{
  font-family:var(--font-heading);font-weight:var(--weight-extralight);
  font-size:18px;line-height:30px;letter-spacing:2px;text-transform:uppercase;
  color:var(--c-text-muted);
}
.woocommerce-tabs ul.tabs.wc-tabs li a{
  color:inherit;text-decoration:none;
  transition:color var(--dur-base) var(--ease-out);
}
.woocommerce-tabs ul.tabs.wc-tabs li:hover{color:var(--c-text)}
.woocommerce-tabs ul.tabs.wc-tabs li.active{
  font-weight:var(--weight-medium);color:var(--c-text);
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a{text-decoration:underline;text-underline-offset:4px}
/* Mobile AND tablet (<1024px) - four uppercase, 2px-tracked labels (one of
   them "WHAT'S IN THE BOX") don't fit one row at the desktop size below the
   .pdp two-column breakpoint (1024px); at 768px specifically, wrapping put
   "REVIEWS (0)" alone on an orphaned, still-centered second line instead of
   reading as tabs. A horizontal scroll strip keeps every label on one line
   at every width the wrap would otherwise kick in at. */
@media (max-width:1023px){
  .woocommerce-tabs ul.tabs.wc-tabs{
    flex-wrap:nowrap;justify-content:flex-start;gap:24px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:var(--space-8);
  }
  .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar{display:none}
  .woocommerce-tabs ul.tabs.wc-tabs li{font-size:14px;line-height:24px;white-space:nowrap;flex:none}
}
/* Tablet-landscape (1024-1099px, the .pdp two-col breakpoint's own narrow
   end - see the matching 36px gap / 32px title-price overrides above): all
   4 tabs already fit one line here (unlike <1024px), just at the full
   18px desktop size, which reads slightly large against the narrower
   column. */
@media (min-width:1024px) and (max-width:1099px){
  .woocommerce-tabs ul.tabs.wc-tabs li{font-size:15px}
}
.woocommerce-Tabs-panel{
  margin-top:40px;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text);
}
@media (min-width:1024px) and (max-width:1099px){
  .woocommerce-Tabs-panel{margin-top:32px}
}
.woocommerce-Tabs-panel p + p{margin-top:var(--space-16)}

/* The 4-up USP checkmark row, inside the Description panel. */
.pdp-usps{display:flex;flex-wrap:wrap;gap:var(--space-40);margin-top:var(--space-40)}
.pdp-usp{display:flex;flex:1 1 200px;gap:var(--space-16);align-items:flex-start}
.pdp-usp__icon{flex:none;width:24px;height:24px;color:var(--c-crimson)}
.pdp-usp__body{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.pdp-usp__title{
  margin:0;font-family:var(--font-heading);font-weight:var(--weight-regular);
  font-size:var(--fs-body);line-height:24px;letter-spacing:0.16px;color:var(--c-text);
}
.pdp-usp__text{
  margin:0;font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:12px;line-height:20px;color:var(--c-text-muted);
}
/* ".woocommerce-Tabs-panel p + p" (above) also matches this pair - both are
   <p> - and its margin-top:16px beats this rule's own margin:0 on specificity
   (class+element+element outranks a single class), stacking on top of the
   8px flex gap .pdp-usp__body already sets for a ~24px gap instead of
   Figma's 8px. Killed here, more specific than the generic rule. */
.pdp-usp__title + .pdp-usp__text{margin-top:0}

/* What's in the box */
.pdp-box-contents{
  display:flex;flex-direction:column;gap:var(--space-12);
  margin:0;padding:0;list-style:none;
}
.pdp-box-contents li{
  padding-left:var(--space-20);position:relative;
}
.pdp-box-contents li::before{
  content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:var(--r-full);background:var(--c-crimson);
}

/* PDP content blocks (ACF flexible content on the product CPT) */
.pdp-blocks{margin-top:var(--space-96)}
.pdp-block + .pdp-block{margin-top:var(--space-64)}
.pdp-specs{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--c-border)}
@media (min-width:768px){ .pdp-specs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-48)} }
.pdp-spec{display:flex;justify-content:space-between;gap:var(--space-16);padding:var(--space-16) 0;border-bottom:1px solid var(--c-border)}
.pdp-spec dt{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-dim)}
.pdp-spec dd{margin:0;font-size:var(--fs-body);text-align:right}

/* ============================================================
   REVIEWS - entirely unstyled WooCommerce default markup otherwise (raw
   <select> rating field, browser-default text inputs, no card around each
   review). Two states to cover: zero reviews (heading + empty copy + form)
   and one-or-more (+ the comment list above the form).
   ============================================================ */
.woocommerce-Reviews{margin-top:var(--space-64)}
.woocommerce-Reviews-title{
  margin:0 0 var(--space-8);
  font-family:var(--font-heading);font-weight:var(--weight-medium);
  font-size:var(--fs-h4);color:var(--c-text);
}
.woocommerce-noreviews{
  margin:0 0 var(--space-32);
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-text-muted);
}

/* Existing reviews - one card per comment, avatar + meta + read-only stars + text */
.commentlist{list-style:none;margin:0 0 var(--space-48);padding:0;display:grid;gap:var(--space-16)}
.commentlist .comment_container{
  display:flex;gap:var(--space-16);
  padding:var(--space-20);border-radius:var(--r-lg);
  background:var(--c-bg-alt);border:1px solid var(--c-border);
}
.commentlist .comment_container img.avatar{
  width:48px;height:48px;flex:none;border-radius:var(--r-full);
}
.commentlist .comment-text{flex:1;min-width:0}
.commentlist .meta{
  margin:0 0 var(--space-8);
  font-family:var(--font-body);font-size:13px;line-height:20px;color:var(--c-text-muted);
}
.commentlist .woocommerce-review__author{color:var(--c-text);font-weight:var(--weight-medium)}
.commentlist .woocommerce-review__verified{color:var(--c-crimson-light);font-style:normal}
.commentlist .description p{margin:var(--space-8) 0 0;font-size:14px;line-height:22px;color:var(--c-text)}
.commentlist .description p:first-child{margin-top:0}

/* Read-only star rating (existing reviews) and the clickable rating input
   (the review form) share the same 5-star, ★-glyph rendering technique:
   a full row of muted stars, with a crimson row overlaid/masked to the
   rated width - no icon font or sprite dependency. */
.star-rating{
  position:relative;width:88px;height:16px;
  font-size:0;line-height:1;
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:2px;
}
.star-rating::before{
  content:"★★★★★";position:absolute;inset:0;
  font-size:16px;letter-spacing:2px;color:var(--c-border-strong);
}
.star-rating span{
  position:absolute;inset:0 auto 0 0;overflow:hidden;
  height:100%;
}
.star-rating span::before{
  content:"★★★★★";display:block;
  font-size:16px;letter-spacing:2px;color:var(--c-crimson-light);
  white-space:nowrap;
}

/* Review form */
#review_form_wrapper{
  margin-top:var(--space-48);padding-top:var(--space-32);
  border-top:1px solid var(--c-border);
}
#reply-title{
  display:block;margin:0 0 var(--space-24);
  font-family:var(--font-heading);font-weight:var(--weight-medium);
  font-size:var(--fs-h5);color:var(--c-text);
}
.comment-form-rating,.comment-form-comment,.comment-form-author,.comment-form-email{
  display:flex;flex-direction:column;gap:var(--space-8);
  margin-bottom:var(--space-20);
}
.comment-form-rating label,.comment-form-comment label,
.comment-form-author label,.comment-form-email label{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-muted);
}
.comment-form-rating .required,.comment-form-comment .required,
.comment-form-author .required,.comment-form-email .required{color:var(--c-crimson-light);text-decoration:none}
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input{
  width:100%;min-height:var(--space-48);
  padding:var(--space-12) var(--space-16);
  background:var(--c-bg-alt);border:1px solid var(--c-border);
  color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);
  border-radius:var(--r-hairline);
}
.comment-form-comment textarea{min-height:140px;resize:vertical}
.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus{border-color:var(--c-accent);outline:none}

/* Clickable star-rating widget wc-single-product.js swaps the <select> for -
   a row of 5 <a class="star-N"> links, DOM order 1→5. Flipping the row
   visually (row-reverse) lets the ~ general-sibling combinator, which only
   reaches LATER dom siblings, light up every star before the hovered/active
   one - the standard CSS-only star-rating fill trick. */
.comment-form-rating p.stars{margin:0}
.comment-form-rating p.stars span{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.comment-form-rating p.stars a{
  font-size:0;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-border-strong);
  transition:color var(--dur-fast) var(--ease-out);
}
.comment-form-rating p.stars a::before{content:"★";font-size:22px;color:inherit}
.comment-form-rating p.stars a:hover,
.comment-form-rating p.stars a:hover ~ a,
.comment-form-rating p.stars a.active,
.comment-form-rating p.stars a.active ~ a{color:var(--c-crimson-light)}

.comment-form-cookies-consent{
  display:flex;align-items:center;gap:var(--space-8);
  margin-bottom:var(--space-24);
}
.comment-form-cookies-consent input{accent-color:var(--c-crimson);width:16px;height:16px;flex:none}
.comment-form-cookies-consent label{font-size:13px;color:var(--c-text-muted)}
.form-submit{margin:0}
.must-log-in,.woocommerce-verification-required{
  color:var(--c-text-muted);font-family:var(--font-body);font-size:var(--fs-body);
}
.must-log-in a{color:var(--c-crimson-light)}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);
  visibility:hidden;pointer-events:none;
}
.cart-drawer.is-open{visibility:visible;pointer-events:auto}
.cart-drawer__overlay{
  position:absolute;inset:0;
  background:rgba(var(--rgb-void),.72);backdrop-filter:blur(4px);
  opacity:0;transition:opacity var(--dur-slow) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__overlay{opacity:1}
.cart-drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(100%, 448px);
  background:var(--c-bg);
  border-left:1px solid var(--c-border);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__panel{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .cart-drawer__overlay,.cart-drawer__panel{transition:none}
}
.cart-drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);
  padding:var(--space-20) var(--space-24);
  border-bottom:1px solid var(--c-border);
}
.cart-drawer__title{font-size:var(--fs-h5)}
.cart-drawer__close{
  width:var(--space-40);height:var(--space-40);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--c-text-muted);
}
.cart-drawer__close:hover{color:var(--c-text)}
.cart-drawer__items{flex:1;overflow-y:auto;padding:var(--space-24)}
.cart-drawer__foot{border-top:1px solid var(--c-border);padding:var(--space-24);display:grid;gap:var(--space-12)}
.cart-drawer__subtotal{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-heading);font-size:var(--fs-h6);font-weight:var(--weight-semibold);
}
.cart-drawer__note{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim);text-align:center}
.cart-drawer__viewcart{text-align:center;font-size:var(--fs-body);color:var(--c-text-muted)}
.cart-drawer__viewcart:hover{color:var(--c-accent)}

/* Free-shipping progress bar - --pct carries data, not style */
.ship-bar{padding:var(--space-16) var(--space-24);border-bottom:1px solid var(--c-border);background:var(--c-bg-alt)}
.ship-bar__text{font-size:var(--fs-caption);color:var(--c-text-muted);line-height:var(--lh-normal)}
.ship-bar__text b{color:var(--c-accent-high)}
.ship-bar__track{height:var(--space-4);background:var(--c-surface);margin-top:var(--space-12);overflow:hidden}
.ship-bar__fill{
  height:100%;width:calc(var(--pct, 0) * 1%);
  background:linear-gradient(to right, var(--c-primary), var(--c-accent-high));
  transition:width var(--dur-slow) var(--ease-out);
}

/* Mini cart lines */
.woocommerce-mini-cart{display:grid;gap:var(--space-16)}
.woocommerce-mini-cart__empty-message{color:var(--c-text-muted);text-align:center;padding-block:var(--space-48)}
.mini-line{display:grid;grid-template-columns:var(--space-64) minmax(0,1fr) auto;gap:var(--space-12);align-items:start;padding-bottom:var(--space-16);border-bottom:1px solid var(--c-border)}
.mini-line__thumb{border:1px solid var(--c-border);background:var(--c-bg-alt)}
.mini-line__title{font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-medium);line-height:var(--lh-snug)}
.mini-line__price{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-muted);margin-top:var(--space-4)}
.mini-line__qty{display:inline-flex;align-items:center;border:1px solid var(--c-border);margin-top:var(--space-8)}
.mini-line__qty button{width:var(--space-32);height:var(--space-32);display:inline-flex;align-items:center;justify-content:center;color:var(--c-text-muted)}
.mini-line__qty button:hover{color:var(--c-text)}
.mini-line__qty span{min-width:var(--space-32);text-align:center;font-family:var(--font-mono);font-size:var(--fs-caption)}
.mini-line__remove{color:var(--c-text-dim);width:var(--space-32);height:var(--space-32);display:inline-flex;align-items:center;justify-content:center}
.mini-line__remove:hover{color:var(--c-error)}

/* Cross-sell strip in drawer */
.cart-crosssell{padding:var(--space-16) var(--space-24);border-top:1px solid var(--c-border);background:var(--c-bg-alt)}
.cart-crosssell__title{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--space-12)}
.cart-crosssell__list{display:grid;gap:var(--space-8)}
.cart-crosssell__item{display:grid;grid-template-columns:var(--space-40) minmax(0,1fr) auto;gap:var(--space-8);align-items:center}
.cart-crosssell__item b{font-size:var(--fs-caption);font-weight:var(--weight-medium);line-height:var(--lh-snug)}

/* ============================================================
   CART & CHECKOUT PAGES
   ============================================================ */
.cart-page__layout,.checkout__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
@media (min-width:1024px){
  .cart-page__layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-48);align-items:start}
  /* 70/30 - the form column against the order-summary sidebar. */
  .checkout__layout{grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:var(--space-48);align-items:start}
}
/* Tablet (768-1099, iPad Pro's own tier) - narrower gap than the 48px desktop uses. */
@media (min-width:768px) and (max-width:1099px){
  .checkout__layout{gap:40px}
}
@media (max-width:767px){ .checkout__layout{gap:10px} }
.cart-summary{
  border:1px solid var(--c-border-strong);background:var(--c-bg-alt);padding:var(--space-24);
}
@media (min-width:1024px){
  .cart-summary{position:sticky;top:calc(var(--header-offset) + var(--space-32));padding:var(--space-32)}
}
/* Its own box, split off .cart-summary - a light card with a crimson top edge
   rather than a flat grey outline, so the order sidebar reads as the page's
   one clear focal point next to the long form beside it. */
.checkout__summary{
  border:1px solid var(--c-border-strong);border-top:3px solid var(--c-crimson);
  background:var(--c-bg-alt);border-radius:var(--r-md);
  padding:var(--space-20);
}
@media (min-width:1024px){
  .checkout__summary{position:sticky;top:calc(var(--header-offset) + var(--space-32))}
}
.checkout__summary #order_review_heading{
  font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:18px;
  margin:0 0 var(--space-16);padding-bottom:var(--space-12);
  border-bottom:1px solid var(--c-border);
}
.shop_table{width:100%;border-collapse:collapse}
.shop_table th,.shop_table td{
  text-align:left;padding:var(--space-16) var(--space-8);
  border-bottom:1px solid var(--c-border);font-size:var(--fs-body);
}
.shop_table th{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-dim);
  font-weight:var(--weight-regular);
}
.cart_totals table,.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse}
.cart_totals th,.cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:var(--space-12) 0;border-bottom:1px solid var(--c-border);
  font-size:var(--fs-body);text-align:left;
}
.cart_totals td,.woocommerce-checkout-review-order-table td{text-align:right;font-family:var(--font-mono)}
.order-total th,.order-total td{font-size:var(--fs-h6);font-family:var(--font-heading);font-weight:var(--weight-semibold);border-bottom:0;padding-top:var(--space-20)}

/* Checkout's own order-review table - kept deliberately minimal: a small
   thumbnail and name, a quiet quantity, price right in mono. Nothing here
   is bigger or louder than it needs to be in a ~30% sidebar column. */
.woocommerce-checkout-review-order-table{font-size:13px}
.woocommerce-checkout-review-order-table thead th{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-dim);
  font-weight:var(--weight-regular);padding:0 0 var(--space-8);
}
.woocommerce-checkout-review-order-table .cart_item td{vertical-align:middle;padding:var(--space-8) 0}
.woocommerce-checkout-review-order-table .product-name{
  font-family:var(--font-body);font-weight:var(--weight-regular);font-size:13px;color:var(--c-text);
  /* The shared .woocommerce-checkout-review-order-table td rule right-aligns every
     cell - meant for the price column, but this one was catching the name cell too,
     right-aligning the whole thing (thumbnail, wrapped name, quantity - all of it). */
  text-align:left;
}
.woocommerce-checkout-review-order-table .product-total{font-size:13px}
.checkout-item{display:flex;align-items:flex-start;gap:var(--space-8);text-align:left}
.checkout-item__media{
  flex:none;width:40px;height:40px;overflow:hidden;
  border-radius:var(--r-sm);background:var(--c-bg-alt);
}
.checkout-item__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Column, not inline - the quantity is a real child of this block now (see
   bpp_checkout_item_thumbnail()), so it always lands on its own line directly
   under the name, at the name's own left edge, whether the name wrapped or not -
   never under the thumbnail, never chasing the last word of a two-line name. */
.checkout-item__name{min-width:0;display:flex;flex-direction:column;gap:2px}
.checkout-item__qty{
  color:var(--c-text-muted);font-family:var(--font-mono);font-size:12px;font-weight:var(--weight-regular);
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td{padding:var(--space-8) 0;font-size:13px}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  font-size:16px;font-weight:var(--weight-semibold);color:var(--c-crimson-light);
  padding-top:var(--space-12);
}

/* Coupon field, styled to match every other checkout input instead of
   WooCommerce's own unstyled default. */
.woocommerce-checkout .checkout_coupon{
  display:flex;flex-wrap:wrap;gap:var(--space-12);
  padding:var(--space-16);margin-bottom:var(--space-24);
  border:1px solid var(--c-border);background:var(--c-bg-alt);
}
.woocommerce-checkout .checkout_coupon .form-row-first{flex:1 1 220px}
.woocommerce-checkout .checkout_coupon .form-row-last{flex:none}
.woocommerce-checkout .checkout_coupon .form-row-last .button{width:auto}

/* Payment methods - each gateway a bordered row, the active one picked out
   in crimson, instead of a bare list of radio buttons. */
.woocommerce-checkout #payment{background:transparent;border:0;padding:0;margin-top:var(--space-24)}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:var(--space-12) var(--space-16);margin-bottom:var(--space-8);
  transition:border-color var(--dur-base) var(--ease-out);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){border-color:var(--c-crimson)}
.woocommerce-checkout #payment ul.payment_methods li input{accent-color:var(--c-crimson);margin-right:var(--space-8)}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family:var(--font-heading);font-size:14px;color:var(--c-text);cursor:pointer;
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--c-bg-deep);border-radius:var(--r-sm);
  padding:var(--space-12) var(--space-16);margin-top:var(--space-12);
  font-size:var(--fs-caption);color:var(--c-text-muted);
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #place_order{margin-top:var(--space-20)}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:var(--space-16);font-size:var(--fs-caption)}
.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:var(--fs-caption);color:var(--c-text-muted)}

.woocommerce form .form-row{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-20)}
.woocommerce form .form-row label{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-muted);
}
.woocommerce form .form-row .required{color:var(--c-crimson-light);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  width:100%;min-height:var(--space-48);
  padding:var(--space-12) var(--space-16);
  background:var(--c-bg-alt);border:1px solid var(--c-border);
  color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);
  border-radius:var(--r-hairline);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus{border-color:var(--c-accent);outline:none}
.woocommerce-invalid input.input-text{border-color:var(--c-error)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
@media (min-width:640px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - var(--space-8));display:inline-flex;vertical-align:top}
  .woocommerce form .form-row-first{margin-right:var(--space-16)}
}

.checkout__section + .checkout__section{margin-top:var(--space-48);border-top:1px solid var(--c-border);padding-top:var(--space-32)}
.checkout__section-title{font-size:var(--fs-h5);margin-bottom:var(--space-24)}

/* Order bump */
.order-bump{
  border:1px dashed var(--c-crimson-light);background:rgba(var(--rgb-crimson),.08);
  padding:var(--space-16);margin-block:var(--space-24);
  display:flex;gap:var(--space-12);align-items:flex-start;
}
.order-bump input[type="checkbox"]{width:var(--space-20);height:var(--space-20);flex:none;margin-top:var(--space-4);accent-color:var(--c-crimson)}
.order-bump b{display:block;font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-semibold)}
.order-bump span{display:block;margin-top:var(--space-4);font-size:var(--fs-caption);color:var(--c-text-muted);line-height:var(--lh-normal)}

.wc_payment_methods{list-style:none;padding:0;margin-bottom:var(--space-24)}
.wc_payment_method{border:1px solid var(--c-border);padding:var(--space-16);margin-bottom:var(--space-8)}
.wc_payment_method label{display:inline-flex;align-items:center;gap:var(--space-8);cursor:pointer}
.payment_box{margin-top:var(--space-12);font-size:var(--fs-caption);color:var(--c-text-muted);line-height:var(--lh-normal)}

/* Woo notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border:1px solid var(--c-border-strong);background:var(--c-bg-alt);
  padding:var(--space-16);margin-bottom:var(--space-24);
  font-size:14px;line-height:22px;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8);
}
.woocommerce-error{border-color:var(--c-error)}
.woocommerce-message{border-color:var(--c-success)}
@media (max-width:767px){ .woocommerce-info{gap:16px} }
/* order:2 (not margin-left:auto) - "Browse products" already comes after
   its text in the markup and just fell in line naturally, but "Confirm
   email address" (WooCommerce core's own email-verification notice) puts
   its button BEFORE the text, and an auto margin on a genuinely first
   flex child never got the free space it needed to push off. Forcing the
   button to the last flex position works regardless of which way round
   the notice text happens to write it. */
.woocommerce-message .button,.woocommerce-info .button{order:2;margin-left:0}

/* Woo default button mapped onto our system - same lift + light-sweep hover
   as .btn everywhere else on the site (product cards etc), not a flatter
   one-off, so every button anywhere reads as the same control. */
/* Byte-for-byte the real .btn.btn--primary (components.css) under a
   .woocommerce-scoped selector instead - a WC-rendered <a class="button">
   (Browse products, Confirm email address, etc.) can't carry the theme's
   own btn classes, so this reproduces every value that component sets
   rather than approximating it: font-weight was semibold not regular,
   uppercase/letter-spacing were missing entirely, padding/min-height were
   smaller, radius was --r-hairline not --r-sm, and the hover glow was
   --shadow-primary (blue) instead of --shadow-crimson. */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #respond input#submit{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  font-family:var(--font-body);font-weight:var(--weight-medium);font-size:13px;
  line-height:24px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;
  padding:var(--space-12) var(--space-24);min-height:0;
  background:var(--c-crimson);color:var(--c-text-on-brand);
  border:1px solid transparent;border-radius:var(--r-sm);
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease-out);
}
.woocommerce a.button:hover,.woocommerce a.button:focus{text-decoration:none}
.woocommerce .button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-140%) skewX(-12deg);
  transition:transform .85s var(--ease-out);
  pointer-events:none;
}
.woocommerce .button > *{position:relative}
.woocommerce .button:hover{background:var(--c-primary-hover);box-shadow:var(--shadow-crimson);transform:translateY(-3px)}
.woocommerce .button:hover::before{transform:translateX(140%) skewX(-12deg)}
.woocommerce .button:active{transform:translateY(-1px) scale(.98);transition-duration:var(--dur-fast)}
.woocommerce .button:focus-visible{outline:2px solid var(--c-accent-high);outline-offset:3px}
.woocommerce .button.alt,.woocommerce #place_order{background:var(--c-crimson);width:100%}
.woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:var(--c-primary-hover);box-shadow:var(--shadow-crimson)}
@media (prefers-reduced-motion:reduce){
  .woocommerce .button{transition:background var(--dur-fast) linear}
  .woocommerce .button::before{display:none}
  .woocommerce .button:hover,.woocommerce .button:active{transform:none}
}

/* Related / upsell */
.related,.upsells,.cross-sells{margin-top:80px;border-top:1px solid var(--c-border);padding-top:0}
.upsells > h2,.cross-sells > h2{font-size:var(--fs-h3);margin-bottom:var(--space-40)}
/* Figma node 213:6383 - "You may also like", the sitewide centred-h2 pattern
   (matches Home's brand-statement/eco/faq headings), not the smaller h3 the
   generic rule above uses for the upsell/cross-sell variants. Figma draws no
   divider above this section at all - straight black into the heading - so
   the shared .related/.upsells/.cross-sells top border is switched off here,
   scoped to .related only. */
.related{border-top:0}
.related > h2{
  font-size:var(--fs-h2);font-weight:var(--weight-medium);line-height:1.25;
  letter-spacing:0.48px;text-transform:capitalize;text-align:center;
  margin-bottom:var(--space-40);
}
/* Figma's "feature product" card (node 213:6386) reads larger than the
   standard shop-grid card the .product-card system defaults to - taller
   media, bigger title/price. Scoped to .related only, so the archive/shop
   grid keeps its own smaller card untouched. */
.related .product-card{gap:var(--space-24)}
.related .product-card__media{height:410px}
.related .product-card__body{padding:0 var(--space-24);gap:var(--space-16)}
.related .product-card__intro{gap:var(--space-12)}
.related .product-card__title{font-size:20px;line-height:28px;letter-spacing:0.2px;white-space:normal}
.related .product-card__price{font-size:20px;line-height:28px}
.related .product-card__price del{font-size:14px;line-height:22px}
/* 410px is Figma's own value for the 3-column desktop row (1024px+) - at
   the 1 and 2-column layouts below that (ul.products.columns-3 collapses at
   768/1024, see the base ul.products rules) it makes each card's image box
   disproportionately tall against the narrower card, turning 3 related
   products into a very long scroll on tablet/mobile for no visual gain. */
@media (max-width:1023px){ .related .product-card__media{height:280px} }

/* ============================================================
   MY ACCOUNT - every subpage (dashboard, orders, downloads, addresses,
   account details, lost/reset password). page-my-account.php wraps the
   real [woocommerce_my_account] shortcode output in a plain .container +
   .my-account-shell - this is what actually fixes "no layout" on pages
   like lost-password, which the shortcode renders with zero wrapper of
   its own. Everything below styles real WooCommerce markup only.
   ============================================================ */
.my-account-shell{padding-block:0 80px}
@media (max-width:767px){ .my-account-shell{padding-bottom:48px} }
.checkout-shell{padding-block:0 80px}
@media (max-width:767px){ .checkout-shell{padding-bottom:48px} }

/* ============================================================
   ORDER RECEIVED (thank-you page) - entirely unstyled WooCommerce default
   markup otherwise: raw <h2>/<ul>/<table>/<address>, no card, no spacing
   rhythm, no responsive behaviour. Scoped to .order-received-shell (set on
   the wrapper in page-checkout.php only when is_order_received_page()) so
   none of it reaches the real checkout form on the same page template.
   ============================================================ */
.order-received-shell .woocommerce-order{max-width:900px;margin-inline:auto}

.order-received-shell .woocommerce-notice{
  display:flex;align-items:center;gap:var(--space-12);
  background:var(--c-surface-raised);border:1px solid var(--c-border);border-left:3px solid var(--c-crimson);
  border-radius:var(--r-md);padding:var(--space-16) var(--space-20);
  font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-text);
  margin:0 0 var(--space-32);
}
.order-received-shell .woocommerce-notice::before{
  content:"";flex:none;width:20px;height:20px;border-radius:var(--r-full);
  background:var(--c-crimson);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}

.order-received-shell .woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:var(--space-24);
  list-style:none;margin:0 0 var(--space-40);padding:var(--space-20) 0;
  border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
}
.order-received-shell .woocommerce-order-overview li{
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--font-body);font-size:var(--fs-caption);color:var(--c-text-muted);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);
}
.order-received-shell .woocommerce-order-overview li strong{
  font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-medium);
  color:var(--c-text);text-transform:none;letter-spacing:normal;
}

.order-received-shell .woocommerce-order-details__title,
.order-received-shell .woocommerce-column__title{
  font-size:var(--fs-h5);font-weight:var(--weight-medium);margin:0 0 var(--space-20);
}
.order-received-shell .woocommerce-order-details{margin-bottom:var(--space-48)}
.order-received-shell .shop_table.order_details tfoot th{font-family:var(--font-heading);font-weight:var(--weight-regular)}
/* Targets the row via .order-details-total (bpp_checkout_item_thumbnail's
   neighbour filter on woocommerce_get_order_item_totals) - not position,
   since payment method can print after the total or before it. */
.order-received-shell .shop_table.order_details tr:has(.order-details-total) th,
.order-received-shell .shop_table.order_details tr:has(.order-details-total) td{
  font-size:var(--fs-h6);font-weight:var(--weight-semibold);color:var(--c-crimson-light);border-bottom:0;
}

.order-received-shell .woocommerce-customer-details address{
  font-style:normal;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.7;color:var(--c-text);
}
.order-received-shell .woocommerce-customer-details address p{margin:var(--space-8) 0 0}
.order-received-shell .woocommerce-columns--addresses{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);
  list-style:none;padding:0;margin:0;
}
@media (min-width:640px){
  .order-received-shell .woocommerce-columns--addresses{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.order-received-shell .woocommerce-column{
  background:var(--c-surface-raised);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:var(--space-24);
}

@media (max-width:767px){
  .order-received-shell .woocommerce-order-overview{gap:var(--space-16) var(--space-24);margin-bottom:24px}
  .order-received-shell .woocommerce-order-details__title,
  .order-received-shell .woocommerce-column__title{font-size:18px}
  .order-received-shell .woocommerce-column{padding:var(--space-16)}
  .order-received-shell .woocommerce-order-details{margin-bottom:28px}
  .order-received-shell .woocommerce-columns--addresses{gap:20px}
}

/* Logged-in view: nav is a real sibling of .woocommerce-MyAccount-content,
   both direct children of the shortcode's own .woocommerce wrapper - grid
   them side by side only when that nav actually exists (logged out, this
   div holds a single child - the login/register card or the lost-password
   form - which must stay full width, not squeezed into a sidebar column). */
.my-account-shell .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:260px 1fr;gap:var(--space-24);align-items:start;
}
@media (max-width:900px){
  .my-account-shell .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr}
}

.woocommerce-MyAccount-navigation{background:var(--c-border);border-radius:var(--r-md);padding:var(--space-16)}
.woocommerce-MyAccount-navigation ul{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation a{
  display:block;padding:var(--space-12) var(--space-16);border-radius:4px;
  color:var(--c-text-muted);font-size:16px;line-height:24px;
  font-family:var(--font-heading);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.woocommerce-MyAccount-navigation a:hover{color:var(--c-text);background:rgba(255,255,255,.08)}
.woocommerce-MyAccount-navigation .is-active a{color:var(--c-crimson-light);background:rgba(255,255,255,.08);font-weight:600}

.woocommerce-MyAccount-content{
  background:var(--c-border);border-radius:var(--r-md);padding:var(--space-32);color:var(--c-text);font-size:14px;
}
@media (max-width:767px){ .woocommerce-MyAccount-content{padding:16px} }
.woocommerce-MyAccount-content > p{margin:0 0 var(--space-12)}
.woocommerce-MyAccount-content h2{margin:0 0 var(--space-16);font-size:var(--fs-h6);font-weight:var(--weight-semibold)}
.woocommerce-MyAccount-content a{color:var(--c-crimson-light);text-decoration:underline}
.woocommerce-MyAccount-content a:hover{color:var(--c-crimson)}
/* The generic link-hover colour above was also winning on a.button (higher
   specificity than the button's own base colour rule), turning its white
   label near-invisible against the same-family hover background - buttons
   keep their own on-brand text colour on hover, same as everywhere else. */
.woocommerce-MyAccount-content a.button:hover{color:var(--c-text-on-brand)}
.woocommerce-MyAccount-content .shop_table{margin-top:var(--space-8);font-size:13px}

/* Logged-out lost/reset-password: the shortcode renders this form with no
   wrapper at all - give it the same centred frosted card as login/register.
   Flex/gap live in the shared rule below (one source of truth for both),
   not here, so the two never disagree on flex-direction again. */
.my-account-shell .woocommerce > form.woocommerce-ResetPassword{
  width:min(100%,480px);margin-inline:auto;
  background:var(--c-border);border-radius:var(--r-card);padding:var(--space-32);
  color:var(--c-text);
}
form.woocommerce-ResetPassword > p:not(.form-row){color:var(--c-text-muted);font-size:13px}

/* Field look shared with the login/register card, applied to every other
   real account form (edit-account, edit-address, lost/reset-password).
   The form itself is a wrapping flex row so form-row-first/last (First
   name / Last name, New password / Confirm password) sit side by side -
   inline-flex + width leaves this one whitespace-node short of fitting,
   so flexbox does the pairing instead of chasing that with math. */
.woocommerce-MyAccount-content form,
form.woocommerce-ResetPassword{display:flex;flex-wrap:wrap;flex-direction:row;gap:var(--space-16);}
.woocommerce-MyAccount-content form .clear,
form.woocommerce-ResetPassword .clear{display:none}
.woocommerce-MyAccount-content form .form-row,
form.woocommerce-ResetPassword .form-row{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;width:auto;margin:0}
.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last,
form.woocommerce-ResetPassword .form-row-first,
form.woocommerce-ResetPassword .form-row-last{flex:1 1 220px}
/* Everything else that's a direct child of the form (the message text
   paragraph, the submit-button paragraph, the fieldset) takes the full row. */
.woocommerce-MyAccount-content form > :not(.form-row),
form.woocommerce-ResetPassword > :not(.form-row){flex:1 1 100%;margin:0}
.woocommerce-MyAccount-content form .form-row label,
form.woocommerce-ResetPassword .form-row label{
  font-family:var(--font-heading);font-weight:400;font-size:14px;line-height:1.3;
  color:var(--c-text);text-transform:none;letter-spacing:normal;
}
.woocommerce-MyAccount-content form .form-row input.woocommerce-Input,
form.woocommerce-ResetPassword .form-row input.woocommerce-Input{
  width:100%;min-height:0;padding:10px 12px;border:1px solid #aaa;background:rgba(0,0,0,.2);
  color:var(--c-text);font-family:var(--font-body);font-weight:200;font-size:13px;line-height:1.4;
  border-radius:0;
}
.woocommerce-MyAccount-content form .form-row input.woocommerce-Input::placeholder,
form.woocommerce-ResetPassword .form-row input.woocommerce-Input::placeholder{color:var(--c-text);opacity:.6;font-weight:200}

/* Edit-address specifically nests every .form-row two levels deeper, inside
   .woocommerce-address-fields > .woocommerce-address-fields__field-wrapper -
   neither is a direct child of the form, so the flex/gap above never reaches
   them and rows had zero space between them. This wrapper gets its own. */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper{
  display:flex;flex-wrap:wrap;gap:var(--space-16);width:100%;
}
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row{flex:1 1 100%}
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-first,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-last{flex:1 1 220px}
.woocommerce-MyAccount-content .woocommerce-address-fields > p{margin-top:var(--space-16)}
.woocommerce-MyAccount-content .select2-container{width:100% !important}
.woocommerce-MyAccount-content .select2-selection{
  height:auto !important;padding:10px 12px;border:1px solid #aaa !important;background:rgba(0,0,0,.2) !important;
  border-radius:0 !important;
}
.woocommerce-MyAccount-content .select2-selection__rendered{color:var(--c-text) !important;padding:0 !important;line-height:1.3 !important;font-size:13px}
.woocommerce-MyAccount-content .select2-selection__arrow{height:100% !important}
/* Billing/shipping edit-address were still landing on the generic
   .woocommerce form .form-row input.input-text rule (taller, --c-bg-alt
   fill, --c-border outline) instead of this page's own field look above -
   same tie in specificity, but something about this page's markup wasn't
   letting the more specific rule win it. Forced directly, scoped to the
   address wrapper itself so it can't miss regardless of the exact ancestor
   chain. */
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields input.woocommerce-Input{
  width:100% !important;min-height:0 !important;padding:10px 12px !important;
  border:1px solid #aaa !important;background:rgba(0,0,0,.2) !important;
  color:var(--c-text) !important;font-family:var(--font-body) !important;font-weight:200 !important;
  font-size:13px !important;line-height:1.4 !important;border-radius:0 !important;
}
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields input.woocommerce-Input:focus{border-color:var(--c-crimson) !important;outline:none !important}
.woocommerce-address-fields input::placeholder{color:var(--c-text) !important;opacity:.6 !important;font-weight:200 !important}
.woocommerce-address-fields .select2-selection{
  height:auto !important;padding:10px 12px !important;border:1px solid #aaa !important;
  background:rgba(0,0,0,.2) !important;border-radius:0 !important;
}
.woocommerce-MyAccount-content form .form-row input.woocommerce-Input:focus,
form.woocommerce-ResetPassword .form-row input.woocommerce-Input:focus{border-color:var(--c-crimson);outline:none}

/* ------------------------------------------------------------
   Checkout billing/shipping/order-notes fields - the exact same field look
   as the account/address forms above, so nothing on the site reads as a
   plainer, unstyled version of another page's inputs. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{
  display:flex;flex-wrap:wrap;gap:var(--space-16);width:100%;
}
.woocommerce-checkout .form-row{flex:1 1 100%;width:auto;margin:0;display:flex;flex-direction:column;gap:16px}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{flex:1 1 220px}
/* !important - ".woocommerce form .form-row label" (base woocommerce.css) carries
   the form element too, out-specificing this two-class selector regardless of
   source order. */
.woocommerce-checkout .form-row label{
  font-family:var(--font-heading) !important;font-weight:400 !important;font-size:13px !important;line-height:1.3 !important;
  color:var(--c-text) !important;text-transform:none !important;letter-spacing:normal !important;
}
.woocommerce-checkout .form-row .required{color:var(--c-crimson-light);text-decoration:none}
/* !important, same reason as .woocommerce-address-fields above: the generic
   ".woocommerce form .form-row input.input-text" rule (48px min-height, --c-bg-alt
   fill, --r-hairline radius) ties this on specificity and was winning regardless
   of source order - login/register's own fields dodge this only because they
   match on .woocommerce-Input, a class checkout's markup doesn't carry. */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea{
  width:100% !important;min-height:0 !important;padding:10px 12px !important;
  border:1px solid #aaa !important;background:rgba(0,0,0,.2) !important;
  color:var(--c-text) !important;font-family:var(--font-body) !important;font-weight:200 !important;
  font-size:13px !important;line-height:1.4 !important;border-radius:0 !important;
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder{color:var(--c-text) !important;opacity:.6 !important;font-weight:200 !important}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus{border-color:var(--c-crimson) !important;outline:none !important}
.woocommerce-checkout .select2-container{width:100% !important}
.woocommerce-checkout .select2-selection{
  height:auto !important;padding:10px 12px;border:1px solid #aaa !important;background:rgba(0,0,0,.2) !important;
  border-radius:0 !important;
}
.woocommerce-checkout .select2-selection__rendered{color:var(--c-text) !important;padding:0 !important;line-height:1.3 !important;font-size:13px}
.woocommerce-checkout .select2-selection__arrow{height:100% !important}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3{
  font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:var(--fs-h5);
  margin:0 0 var(--space-24);
}
/* The "Ship to a different address?" toggle - a checkbox its own generic browser
   size away from the rest of the form otherwise. */
.woocommerce-checkout #ship-to-different-address{margin:0 0 var(--space-16)}
.woocommerce-checkout #ship-to-different-address label{
  display:flex;align-items:center;gap:var(--space-8);cursor:pointer;
  font-family:var(--font-heading);font-size:14px;color:var(--c-text);
}
.woocommerce-checkout #ship-to-different-address-checkbox{
  width:18px;height:18px;flex:none;accent-color:var(--c-crimson);cursor:pointer;
}

.woocommerce-EditAccountForm.edit-account fieldset{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--space-12);border:1px solid var(--c-border-strong);padding:var(--space-16);margin:4px 0 var(--space-12);border-radius:var(--r-md)}
.woocommerce-EditAccountForm legend{padding:0 var(--space-8);font-family:var(--font-heading);font-size:13px;color:var(--c-text)}

/* Just the full-width layout - everything else (colour, padding, uppercase,
   hover lift+glow) comes from the real .woocommerce .button rule already;
   a second background/padding/hover set here was quietly re-declaring the
   same properties with different values and winning on specificity,
   losing the lift transform and swapping the hover glow for a flat colour
   change. */
.woocommerce-MyAccount-content form button.button,
form.woocommerce-ResetPassword button.button{width:100%}

/* Addresses */
.woocommerce-Addresses.col2-set{display:grid;grid-template-columns:1fr;gap:var(--space-12)}
@media (min-width:640px){.woocommerce-Addresses.col2-set{grid-template-columns:1fr 1fr}}
.woocommerce-Address{background:rgba(255,255,255,.05);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--space-16)}
.woocommerce-Address-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-8)}
.woocommerce-Address-title h2{font-size:14px;margin:0}
.woocommerce-Address-title .edit{color:var(--c-crimson-light);font-size:12px}
.woocommerce-Address-title .edit:hover{color:var(--c-crimson)}
.woocommerce-Address address{font-style:normal;font-size:13px;color:var(--c-text-muted);line-height:1.5}

/* ============================================================
   CART DRAWER (Side Cart WooCommerce plugin) - the colours and copy come
   from the plugin's own settings (xoo-wsc-sy-options / xoo-wsc-av-options),
   this only brings its motion and button states in line with the rest of
   the site: the same lift + light-sweep + glow every .btn already carries,
   and a slide speed that matches --dur-slow instead of the plugin default.
   ============================================================ */
/* The plugin's own open/close animation slides the panel by animating
   `right` (-100% -> 0), a layout property - every frame of that forces a
   full reflow, which is the actual jank on first open (the browser is
   also busy with first-paint work at that exact moment). Pinning `right`
   at its open value and sliding on `transform` instead only ever costs
   compositing, so the same animation is free regardless of what else the
   main thread is doing. */
.xoo-wsc-container,.xoo-wsc-slider{
  right:0 !important;
  transform:translateX(100%);
  transition:transform .35s var(--ease-out) !important;
}
body.xoo-wsc-cart-active .xoo-wsc-container,
body.xoo-wsc-cart-active .xoo-wsc-slider{transform:translateX(0)}

.xoo-wsc-footer-txt{
  font-size:12px !important;line-height:1.5 !important;
  display:block;margin-top:var(--space-12) !important;padding-top:var(--space-12);
  border-top:1px solid rgba(255,255,255,.12);
}

.xoo-wsc-ft-buttons-cont{gap:var(--space-12)}
a.xoo-wsc-ft-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease-out) !important;
}
a.xoo-wsc-ft-btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-140%) skewX(-12deg);
  transition:transform .85s var(--ease-out);
  pointer-events:none;
}
a.xoo-wsc-ft-btn:hover{transform:translateY(-3px)}
a.xoo-wsc-ft-btn:hover::before{transform:translateX(140%) skewX(-12deg)}
a.xoo-wsc-ft-btn:active{transform:translateY(-1px) scale(.98)}
a.xoo-wsc-ft-btn > *{position:relative}

/* View cart - outline, the .btn--ghost treatment. */
a.xoo-wsc-ft-btn-cart{
  background:transparent !important;color:var(--c-text) !important;
  border:1px solid var(--c-text) !important;
}
a.xoo-wsc-ft-btn-cart:hover{
  background:var(--c-text) !important;color:var(--c-bg) !important;
  box-shadow:var(--shadow-md);
}

/* Checkout - filled crimson, the .btn--primary treatment. */
a.xoo-wsc-ft-btn-checkout{
  background:var(--c-crimson) !important;color:var(--c-text-on-brand) !important;
  border:1px solid var(--c-crimson) !important;
}
a.xoo-wsc-ft-btn-checkout:hover{
  background:var(--c-primary-hover) !important;
  box-shadow:var(--shadow-crimson);
}
/* The plugin's own CSS inserts a literal "-" before the price (xoo-wsc-style.css,
   a.xoo-wsc-ft-btn-checkout .amount:before) as an inline separator - at mobile
   drawer width "Checkout - ₹18,000" doesn't fit one line, so it wraps at the
   space before the dash and strands it alone on its own line. Stacked on two
   clean centred lines instead, dash dropped since it's not doing anything once
   the price already reads as its own line. */
@media (max-width:767px){
  a.xoo-wsc-ft-btn-checkout{
    display:flex !important;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:13px;line-height:1.3;
  }
  a.xoo-wsc-ft-btn-checkout .amount:before{content:none}
}

@media (prefers-reduced-motion:reduce){
  a.xoo-wsc-ft-btn{transition:background var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear !important}
  a.xoo-wsc-ft-btn::before{display:none}
  a.xoo-wsc-ft-btn:hover,a.xoo-wsc-ft-btn:active{transform:none}
}

/* Empty-cart "Return to Shop" - same lift + light-sweep + glow hover every
   other .btn/xoo-wsc-ft-btn already carries, not the plugin's flat
   default. Same crimson treatment as checkout, since it's the drawer's
   one and only action in that state.
   :not(.xoo-wsc-ft-btn) matters - the footer's View Cart/Checkout buttons
   also carry the plain .xoo-wsc-btn class the plugin gives every button,
   and without this scope these rules collided with their own (different)
   ft-btn-cart/ft-btn-checkout treatment above, at the same specificity. */
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn){
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--c-crimson) !important;color:var(--c-text-on-brand) !important;
  border:1px solid var(--c-crimson) !important;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease-out) !important;
}
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn)::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-140%) skewX(-12deg);
  transition:transform .85s var(--ease-out);
  pointer-events:none;
}
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn):hover{
  background:var(--c-primary-hover) !important;
  box-shadow:var(--shadow-crimson);
  transform:translateY(-3px);
}
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn):hover::before{transform:translateX(140%) skewX(-12deg)}
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn):active{transform:translateY(-1px) scale(.98)}
a.xoo-wsc-btn:not(.xoo-wsc-ft-btn) > *{position:relative}

@media (prefers-reduced-motion:reduce){
  a.xoo-wsc-btn:not(.xoo-wsc-ft-btn){transition:background var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear !important}
  a.xoo-wsc-btn:not(.xoo-wsc-ft-btn)::before{display:none}
  a.xoo-wsc-btn:not(.xoo-wsc-ft-btn):hover,a.xoo-wsc-btn:not(.xoo-wsc-ft-btn):active{transform:none}
}

/* Qty stepper + remove icon inside each cart line - same hover language as
   the rest of the site: colour firms up, nothing jumps.
   Was a bare "- [input] +" scaled down uniformly with transform:scale(.9)
   (a blur-prone hack, not a real redesign) - rebuilt as one bordered pill
   with a divider between each segment, sized directly instead of scaled. */
.xoo-wsc-qty-box{
  transform:none !important;
  max-width:100px !important;
  border:1px solid var(--c-border) !important;
  border-radius:var(--r-full) !important;
  overflow:hidden;
  background:transparent !important;
}
.xoo-wsc-minus,.xoo-wsc-plus{
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:28px !important;height:28px !important;
  font-size:14px !important;font-weight:var(--weight-semibold);
  background:transparent !important;color:var(--c-text) !important;
  transition:color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
  opacity:1;
}
.xoo-wsc-minus:hover,.xoo-wsc-plus:hover{
  background:var(--c-surface-raised) !important;color:var(--c-crimson) !important;
}
.xoo-wsc-qty-box input[type="number"].xoo-wsc-qty{
  height:28px !important;line-height:28px !important;
  padding:0 4px !important;
  min-width:32px;flex-grow:1;
  font-family:var(--font-body) !important;
  font-size:13px !important;font-weight:var(--weight-semibold) !important;
  color:var(--c-text) !important;
  border-left:1px solid var(--c-border) !important;
  border-right:1px solid var(--c-border) !important;
}

.xoo-wsc-smr-del{
  cursor:pointer;opacity:.6;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring);
}
.xoo-wsc-smr-del:hover{opacity:1;transform:scale(1.1)}

/* Cart line layout - the plugin leaves <ins>/<del> at their raw browser
   defaults (underline/strike) and sizes everything for a wider drawer than
   this one actually is; tightened up and realigned into two clean columns:
   name/price/qty on the left, delete + savings + line total stacked and
   right-aligned to match it. */
.xoo-wsc-sm-info{display:flex;justify-content:space-between;gap:var(--space-12)}
.xoo-wsc-sm-left{display:flex;flex-direction:column;gap:6px;min-width:0}
/* The delete icon sits at the top corner; everything else (savings pill +
   line total) groups tight at the bottom, level with the qty stepper on
   the left - not stretched across the row's full height, which is what
   left it floating in dead space before. */
.xoo-wsc-sm-right{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:6px;flex:none;text-align:right;
}
.xoo-wsc-smr-del{margin-bottom:auto}

.xoo-wsc-img-col,.xoo-wsc-img-col img{width:76px !important;height:76px !important}

/* The plugin's own inline-style.php sets a bigger font-size directly on
   the inner <a> (product name link) and every span.amount (WooCommerce's
   own price markup) via a more specific selector
   (.xoo-wsc-products:not(.xoo-wsc-pattern-card) a / span.amount) than a
   plain .xoo-wsc-pname/.xoo-wsc-pprice rule - sizing only the outer
   wrapper here had no visible effect since the actual text lives one
   level deeper and was still winning on that more specific rule. */
.xoo-wsc-pname{font-weight:var(--weight-semibold);line-height:1.35}
.xoo-wsc-pname a{color:inherit;font-size:13px !important}

.xoo-wsc-pprice{font-size:11px !important;line-height:1.4}
.xoo-wsc-pprice .amount{font-size:10px !important}
.xoo-wsc-pprice ins{text-decoration:none;font-weight:var(--weight-medium)}
.xoo-wsc-pprice del{text-decoration:line-through;opacity:.55}
.xoo-wsc-pprice .product-card__tax{display:block;font-size:10px;opacity:.6;margin-top:2px}

.xoo-wsc-psavings{
  font-size:11px;padding:2px 8px;border-radius:var(--r-full);
  border:1px solid #1f8a4c;color:#4ade80;white-space:nowrap;
}
.xoo-wsc-psavings .amount{font-size:11px !important;color:inherit !important}
.xoo-wsc-psavlabel{text-transform:uppercase;letter-spacing:.5px}

.xoo-wsc-smr-ptotal{font-weight:var(--weight-semibold);color:var(--c-text)}
.xoo-wsc-smr-ptotal .amount{font-size:14px !important;font-weight:var(--weight-semibold) !important}

/* The card had margin AND padding stacked (15px + 15px = 30px), so its own
   content sat noticeably deeper than the header/footer text beside it -
   dropping the margin lines its left edge up with them at the same 15px. */
.xoo-wsc-product{margin:0 !important;border-bottom:1px solid rgba(255,255,255,.08)}

.xoo-wsc-ft-amt-label,.xoo-wsc-ft-amt-value{font-size:12px !important}
.xoo-wsc-ft-totals{padding:0 !important}

/* A clean rule between the totals text and the action buttons, instead of
   them running straight into each other. */
.xoo-wsc-footer{position:relative}
.xoo-wsc-ft-buttons-cont{
  margin-top:var(--space-16) !important;padding-top:var(--space-16);
  border-top:1px solid rgba(255,255,255,.12);
}

/* "Item added to cart" toast - dark card matching the rest of the drawer,
   not the plugin's default light-green box, plus a real close button. */
.xoo-wsc-notice-container{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;z-index:20 !important}
.xoo-wsc-notice-success{
  position:relative;
  color:var(--c-text) !important;background:#0F1F14 !important;
  border:1px solid #1f8a4c !important;border-left:3px solid #4ade80 !important;
}
.xoo-wsc-notice-error{
  position:relative;
  color:var(--c-text) !important;background:#241014 !important;
  border:1px solid #7a2030 !important;border-left:3px solid var(--c-crimson) !important;
}
ul.xoo-wsc-notices li{padding:14px 40px 14px 16px !important;font-size:13px}
.xoo-wsc-notice-close{
  position:absolute;top:8px;right:8px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:inherit;font-size:18px;line-height:1;
  cursor:pointer;opacity:.6;transition:opacity var(--dur-base) var(--ease-out);
}
.xoo-wsc-notice-close:hover{opacity:1}

/* ============================================================
   MY ACCOUNT - login/register (Figma node 326:26325)
   The hero above this (breadcrumb/H1/lede, node 326:26319) is the
   sitewide page-hero section, fed via ACF on the My Account page -
   nothing page-specific needed there.
   ============================================================ */
.account-auth{padding-bottom:0}
.account-auth__panel{width:min(100%, 640px);margin-inline:auto}

.account-auth__tabs{display:flex}
.account-auth__tab{
  flex:1 0 0;display:flex;align-items:center;justify-content:center;
  padding:24px 20px;height:unset;
  background:var(--c-border);border:0;border-bottom:3px solid transparent;
  font-family:var(--font-heading);font-weight:500;font-size:16px;line-height:24px;
  letter-spacing:.2px;text-transform:capitalize;color:var(--c-text);cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out);
}
.account-auth__tab:first-child{border-top-left-radius:var(--r-card)}
.account-auth__tab:last-child{border-top-right-radius:var(--r-card)}
.account-auth__tab.is-active{border-bottom-color:var(--c-crimson)}

.account-auth__body{position:relative;background:var(--c-border);border-radius:0 0 var(--r-card) var(--r-card);padding:var(--space-24)}
.account-auth__pane{display:none}
.account-auth__pane.is-active{display:block;animation:bpp-account-pane-in var(--dur-slow) var(--ease-out)}
@keyframes bpp-account-pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .account-auth__pane.is-active{animation:none}
}

.account-auth__pane form{display:flex;flex-direction:column;gap:20px}

/* Every selector below is deliberately as specific as the generic
   ".woocommerce form .form-row ..." rules above (same class/element count),
   so this - the later block in the cascade - wins without !important. */
.account-auth__pane form .form-row{display:flex;flex-direction:column;gap:16px;margin:0}
.account-auth__pane form .form-row label{
  font-family:var(--font-heading);font-weight:400;font-size:13px;line-height:1.3;
  letter-spacing:normal;text-transform:none;color:var(--c-text);
}
.account-auth__pane form .form-row .required{color:var(--c-text);text-decoration:none}
/* WooCommerce core's own JS-injected eye toggle on password fields - no
   equivalent in the design, hidden per explicit request. */
.account-auth__pane .show-password-input{display:none}
.account-auth__pane form .form-row input.woocommerce-Input{
  width:100%;min-height:0;padding:10px 12px;border:1px solid #aaa;background:rgba(0,0,0,.2);
  color:var(--c-text);font-family:var(--font-body);font-weight:200;font-size:13px;line-height:1.4;
  border-radius:0;
}
.account-auth__pane form .form-row input.woocommerce-Input::placeholder{color:var(--c-text);opacity:.6;font-weight:200}
.account-auth__pane form .form-row input.woocommerce-Input:focus{border-color:var(--c-crimson);outline:none}

/* Terms row and the login row's remember-me/lost-password line both carry
   .form-row too (for the generic gap/margin reset above) but need their own
   row layout, not the stacked label-over-input one - one class added to the
   selector is enough to outrank the generic column rule. */
.account-auth__pane form .form-row.account-auth__login-row{
  flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);
}
.account-auth__pane form .form-row.account-auth__terms{
  flex-direction:row;align-items:center;gap:var(--space-8);
}
/* The checkbox and its text sit inside one shared <label> (so a click
   anywhere lands on the input) - align-items:center on the row above only
   centres that whole label as a single flex item, not the checkbox against
   the text inside it, which was left to default inline baseline alignment.
   The "Remember me" row doesn't have this problem because it gets its own
   dedicated flex wrapper already. */
.account-auth__terms label{display:flex;align-items:center;gap:var(--space-8)}
/* WC's own empty order-attribution tag sits between the terms row and the
   privacy text as a real (if invisible) child of this flex form - it was
   still claiming its own share of the form's gap on both sides, doubling
   the visible space between the two rows either side of it. */
.account-auth__pane wc-order-attribution-inputs{display:none}
.account-auth__pane .woocommerce-privacy-policy-text p{
  margin:0;font-family:var(--font-body);font-size:14px;line-height:22px;color:var(--c-text);
}
.account-auth__login-row .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:6px}

.account-auth__pane input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;flex:none;position:relative;
  border:1px solid #aaa;border-radius:0;background:transparent;cursor:pointer;
}
.account-auth__pane input[type="checkbox"]:checked{background:var(--c-crimson);border-color:var(--c-crimson)}
.account-auth__pane input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.account-auth__pane input[type="checkbox"]:focus-visible{outline:2px solid var(--c-crimson);outline-offset:2px}

.account-auth__terms span{font-family:var(--font-heading);font-weight:300;font-size:12px;line-height:20px;color:var(--c-text)}
/* WooCommerce's own JS-injected password strength message and hint, both
   previously unstyled (inheriting the browser's own div/small defaults, so
   they never matched each other or shared a consistent gap). */
.account-auth__pane .woocommerce-password-strength,
.account-auth__pane .woocommerce-password-hint{
  display:block;margin:var(--space-8) 0 0;
  font-family:var(--font-body);font-size:12px;line-height:20px;color:var(--c-text-muted);
}
.account-auth__login-row .woocommerce-form-login__rememberme span{font-family:var(--font-body);font-size:12px;line-height:20px;color:var(--c-text-muted)}
.account-auth__lost-link{font-family:var(--font-body);font-size:12px;color:var(--c-text-muted);transition:color var(--dur-base) var(--ease-out)}
.account-auth__lost-link:hover{color:var(--c-crimson-light)}

/* The submit button - same lift + light-sweep hover as .btn sitewide (identical
   values), not a re-invented hover. Selector is bumped to ".woocommerce button.X"
   to outrank the generic ".woocommerce button.button" reset above it. */
.woocommerce button.account-auth__submit{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:4px;background:var(--c-crimson);color:#fff;cursor:pointer;
  padding:11px var(--space-24);min-height:0;margin-top:4px;
  font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.4;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-slow) var(--ease-out);
}
.woocommerce button.account-auth__submit::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-140%) skewX(-12deg);
  transition:transform .85s var(--ease-out);
  pointer-events:none;
}
.woocommerce button.account-auth__submit:hover{background:var(--c-primary-hover);box-shadow:var(--shadow-crimson);transform:translateY(-3px)}
.woocommerce button.account-auth__submit:hover::before{transform:translateX(140%) skewX(-12deg)}
.woocommerce button.account-auth__submit:active{transform:translateY(-1px) scale(.98);transition-duration:var(--dur-fast)}
.woocommerce button.account-auth__submit:focus-visible{outline:2px solid var(--c-accent-high);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .woocommerce button.account-auth__submit{transition:background var(--dur-fast) linear}
  .woocommerce button.account-auth__submit::before{display:none}
  .woocommerce button.account-auth__submit:hover,
  .woocommerce button.account-auth__submit:active{transform:none}
}

@media (max-width:600px){
  .account-auth__tab{font-size:14px;line-height:22px;padding:16px 8px}
  .account-auth__body{padding:var(--space-24)}
}

/* ============================================================
   WISHLIST - empty state. Was a bare <h2>, inheriting the sitewide
   48px section-heading size - way too large for what's really just a
   one-line status message. Sized down to match the shop-hero banner's
   own restrained scale, and centred (the icon-less text-only layout
   reads odd left-aligned with nothing to anchor it on the left).
   ============================================================ */
.wishlist-empty{max-width:520px;margin-inline:auto;text-align:center}
.wishlist-empty__heading{
  font-family:var(--font-heading);font-weight:var(--weight-medium);
  font-size:24px;line-height:1.3;letter-spacing:0.24px;
}
.wishlist-empty .row{justify-content:center}

/* ============================================================
   CART PAGE - page-cart.php. Same shop-hero banner as the Shop archive
   (see page-cart.php); everything below is WooCommerce's own
   [woocommerce_cart] shortcode markup, previously completely unstyled
   (bare table, no card system, the "x" remove link floating with no
   sizing, coupon/cart-totals with no real layout). Desktop/tablet keep
   the real <table> (shop_table_responsive already puts each cell's
   label in data-title, ready for the mobile card collapse below).
   ============================================================ */
.cart-page{padding-top:calc(var(--header-offset) + var(--space-48));padding-bottom:80px}
@media (max-width:767px){ .cart-page{padding-bottom:48px} }
.shop-hero + .cart-page{padding-top:var(--space-60)}
@media (max-width:767px){ .shop-hero + .cart-page{padding-top:32px} }
@media (min-width:1024px){ .shop-hero + .cart-page{padding-top:var(--space-60)} }

.cart-page__inner{
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-max));
  margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40);
  position:relative;
}
/* Loading state while a qty change or remove-item AJAX request is in
   flight (cart-page-ajax.js toggles aria-busy on this element). Dims the
   table/totals and blocks further clicks so a second click mid-request
   can't fire a duplicate update, plus a real spinner instead of nothing
   visibly happening while the price recalculates. */
.cart-page__inner[aria-busy="true"]{pointer-events:none}
.cart-page__inner[aria-busy="true"] .woocommerce-cart-form,
.cart-page__inner[aria-busy="true"] .cart_totals{
  opacity:.4;transition:opacity var(--dur-base) var(--ease-out);
}
.cart-page__inner[aria-busy="true"]::after{
  content:"";position:absolute;top:120px;left:50%;z-index:5;
  width:32px;height:32px;margin-left:-16px;
  border:3px solid var(--c-border);border-top-color:var(--c-crimson);
  border-radius:50%;
  animation:bpp-cart-spin .7s linear infinite;
}
@keyframes bpp-cart-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .cart-page__inner[aria-busy="true"]::after{animation-duration:1.4s}
}
/* 1280px, not 1024px - at 1024 the table (Product/Quantity/Subtotal) only
   had 544px left after the 360px sidebar + 40px gap, and the subtotal
   figure crowded right into the qty stepper's + button. Same class of
   bug as the footer/shop-layout ones elsewhere on this site: a sidebar
   layout's own math needs more room than the breakpoint it switches on
   actually provides. Single-column (with the full-width table) up to
   1279px instead. */
@media (min-width:1280px){
  .cart-page__inner{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
  /* Promotes cross-sells and cart_totals to be direct grid children of
     .cart-page__inner (instead of trapped inside the wrapper WooCommerce
     puts around both) so cart_totals can sit in its own sidebar column
     while cross-sells stays full width in the main column below the
     table - the two were never meant to share one column on desktop.
     Two levels need flattening: the_content()'s own .woocommerce wrapper,
     then .cart-collaterals inside it. */
  .cart-page__inner > .woocommerce{display:contents}
  .cart-collaterals{display:contents}
  .woocommerce-cart-form{grid-column:1}
  .cross-sells{grid-column:1}
  .cart_totals{grid-column:2;position:sticky;top:calc(var(--header-offset) + var(--space-24))}
}

/* ---------- Cart table -> card system ---------- */
/* Real card background for the item list - same surface-raised card
   treatment as the Order Summary sidebar, so the two visually read as
   one matched pair instead of the list floating with no boundary on
   the page's own black background. */
.woocommerce-cart-form{
  background:var(--c-surface-raised);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:var(--space-24);
}
@media (max-width:767px){ .woocommerce-cart-form{padding:var(--space-16)} }

.woocommerce-cart-form__contents{width:100%;border-collapse:collapse}
.woocommerce-cart-form__contents thead{display:none}
@media (min-width:768px){
  .woocommerce-cart-form__contents thead{display:table-header-group}
  .woocommerce-cart-form__contents thead th{
    text-align:left;padding-bottom:var(--space-16);
    font-family:var(--font-body);font-size:12px;font-weight:var(--weight-semibold);
    letter-spacing:1.5px;text-transform:uppercase;color:var(--c-text-muted);
    border-bottom:1px solid var(--c-border);
  }
  .woocommerce-cart-form__contents thead th.product-quantity{text-align:center}
  .woocommerce-cart-form__contents thead th.product-subtotal{text-align:right}
}

/* Explicit ask: minimal Item/Quantity/Total layout, no separate Price
   column - the line subtotal already carries the price information. */
.product-price,
.woocommerce-cart-form__contents thead th.product-price{display:none !important}

.cart_item{border-bottom:1px solid var(--c-border)}
.cart_item td{padding:var(--space-16) 0;vertical-align:middle}

/* Mobile: each row becomes its own stacked card - table/row/cell
   semantics kept (accessibility, no JS needed) but displayed as blocks. */
/* Scoped to the cart page's own table - .cart_item is WooCommerce's shared row
   class, also used (unscoped) in checkout's review-order-table, which has no
   .product-thumbnail column of its own. Unscoped, this turned that table's rows
   into the same 2-column grid and auto-placed its price into the empty first
   column, off on its own to the left instead of following the row. */
@media (max-width:767px){
  .woocommerce-cart-form__contents .cart_item{
    display:grid;grid-template-columns:auto 1fr;gap:var(--space-16);
    padding:var(--space-16) 0;position:relative;
  }
  .woocommerce-cart-form__contents .cart_item td{padding:0;border:0}
  .woocommerce-cart-form__contents .product-remove{position:absolute;top:var(--space-16);right:0;grid-row:1}
  .woocommerce-cart-form__contents .product-thumbnail{grid-row:1 / span 3}
  .woocommerce-cart-form__contents .product-name{grid-column:2;padding-right:var(--space-32) !important}
  .woocommerce-cart-form__contents .product-quantity{grid-column:2;margin-top:var(--space-8)}
  .woocommerce-cart-form__contents .product-subtotal{grid-column:2;margin-top:var(--space-8);text-align:left !important;font-weight:var(--weight-semibold)}
}

.product-remove{width:32px}
.product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-full);
  font-size:20px;line-height:1;color:var(--c-text-muted);
  text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.product-remove a.remove:hover{background:var(--c-surface-raised);color:var(--c-crimson)}
@media (max-width:767px){ .product-remove a.remove{width:34px;height:34px;font-size:24px} }

.product-thumbnail{width:80px}
.product-thumbnail img{
  width:64px;height:64px;object-fit:cover;border-radius:var(--r-md);
  background:var(--c-bg-alt);display:block;
}

.product-name a{
  font-family:var(--font-heading);font-weight:var(--weight-medium);font-size:15px;
  color:var(--c-text);text-decoration:none;
  transition:color var(--dur-base) var(--ease-out);
}
.product-name a:hover{color:var(--c-crimson)}
.product-name > a[href]:not(.remove){display:inline-block;margin-top:0}
.product-name dl.variation{margin-top:var(--space-8);font-size:13px;color:var(--c-text-muted)}

.product-subtotal{
  /* No font-size here on purpose - .shop_table td (var(--fs-body), 16px)
     has higher specificity than a bare class and was winning regardless,
     so the 14px this used to say was never actually rendering. 16px also
     matches the quantity input right next to it, which is the more
     correct outcome anyway. */
  font-family:var(--font-mono);color:var(--c-text);
}
@media (min-width:768px){
  .product-quantity{text-align:center}
  .product-subtotal{text-align:right;font-weight:var(--weight-semibold)}
  .product-quantity .quantity{margin-inline:auto}
}

/* ---------- Coupon + update-cart actions row ---------- */
tr.actions td{padding-top:var(--space-32) !important;border:0}
tr.actions{border-bottom:none}
@media (min-width:768px){
  tr.actions td{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:var(--space-16);
  }
}
.coupon{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:center}
/* WC's own inline client-side coupon-field validation message - was
   plain unstyled paragraph text at the full 16px body size with no
   colour distinction, reading as an oddly large stray line rather than
   a small inline field hint. Same treatment as the CF7 field-error tip
   elsewhere on the site. */
.coupon-error-notice{
  width:100%;margin:var(--space-4) 0 0;
  font-size:var(--fs-caption);color:var(--c-error);
}
.coupon .input-text{
  height:48px;padding:0 var(--space-16);min-width:200px;
  background:transparent;border:1px solid var(--c-border);border-radius:var(--r-sm);
  color:var(--c-text);font-family:var(--font-body);font-size:14px;
  transition:border-color var(--dur-base) var(--ease-out);
}
.coupon .input-text::placeholder{color:var(--c-text-dim)}
.coupon .input-text:focus{outline:none;border-color:var(--c-accent)}
/* No "Update cart" button on this page at all - quantity changes and
   removals each fire their own AJAX request immediately
   (cart-page-ajax.js), so there is nothing left for it to do. */
button[name="update_cart"]{display:none !important}
button[name="apply_coupon"],button[name="update_cart"]{
  height:48px;padding:0 var(--space-24);
  background:transparent;border:1px solid var(--c-text);border-radius:var(--r-sm);
  color:var(--c-text);font-family:var(--font-body);font-size:13px;font-weight:var(--weight-medium);
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
/* No hover rule here on purpose - .woocommerce .button (higher specificity,
   sitewide) already owns background/color for every real WC button
   including these two, crimson fill + white text at rest and on hover.
   A color override here previously flipped the hover text to near-black
   with nothing to change the background back, since only this rule
   touched color - unreadable black-on-crimson. */
button[name="update_cart"]:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:767px){
  .coupon{flex-direction:column;align-items:stretch}
  .coupon .input-text{width:100%}
  button[name="update_cart"]{margin-top:var(--space-12);width:100%}
}

/* ---------- Cross-sells ---------- */
/* Explicit ask: no cross-sell upsell block on the cart page - left column
   is just the item list, right column is only the totals card. */
.cart-page .cross-sells{display:none !important}

/* ---------- Cart totals sidebar ---------- */
.cart_totals{
  background:var(--c-surface-raised);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:var(--space-24);
  margin-top:var(--space-40);
  /* Flex + explicit order on every child - the only way to put the
     progress bar after the heading without a template override, since
     woocommerce_before_cart_totals (the one hook available without one)
     fires before the <h2> in WooCommerce's own markup, not after it. */
  display:flex;flex-direction:column;
}
@media (min-width:1280px){ .cart_totals{margin-top:0} }
@media (max-width:767px){ .cart_totals{margin-top:24px;padding:16px} }
/* Explicit ask: keep the bar itself, drop the message text above it. */
.cart_totals .ship-bar__text{display:none}
.cart_totals .ship-bar{
  order:2;
  padding:0;border-bottom:0;background:transparent;
  margin:0 0 var(--space-16);
}
.cart_totals > h2{
  order:1;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-text-muted);
  margin:0 0 var(--space-8);
}
.cart_totals table{order:3;width:100%;border-collapse:collapse}
.cart_totals tr{border-bottom:1px solid var(--c-border)}
.cart_totals tr:last-child{border-bottom:none}
.cart_totals th,.cart_totals td{
  padding:var(--space-12) 0;text-align:right;vertical-align:top;
  font-family:var(--font-body);font-size:14px;color:var(--c-text);
}
.cart_totals th{text-align:left;font-weight:var(--weight-regular);color:var(--c-text-muted)}
.cart_totals .order-total th,.cart_totals .order-total td{
  font-weight:var(--weight-semibold);font-size:18px;color:var(--c-text);
  border-top:1px solid var(--c-border);
}
.cart_totals .amount{font-family:var(--font-mono)}
.wc-proceed-to-checkout{order:4;margin-top:var(--space-24)}
.wc-proceed-to-checkout a.checkout-button{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;border-radius:var(--r-sm);
  background:var(--c-crimson);color:var(--c-text-on-brand) !important;
  font-family:var(--font-body);font-weight:var(--weight-regular);font-size:14px;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-base) var(--ease-spring);
}
.wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--c-primary-hover);box-shadow:var(--shadow-crimson);transform:translateY(-3px);
}

/* ============================================================
   PDP - mobile-only spacing pass (<768px). Tightening the desktop-sized
   vertical rhythm down for the narrow single-column layout.
   ============================================================ */
@media (max-width:767px){
  .u-mb-32{margin-bottom:20px}
  #wpgs-gallery.wcgs-woocommerce-product-gallery{margin-bottom:0}
  .pdp{gap:20px}

  /* Everything in the summary column - SKU, price, short description
     (via the shared .lede class), stock, buy form's own next-sibling
     spacing is untouched; this is the read-only info stack around it. */
  .pdp__sku,
  .pdp__summary .price,
  .stock,
  .pdp__meta,
  .pdp__notice{margin-top:20px}

  .stock{font-size:18px;line-height:26px}

  .woocommerce-tabs.wc-tabs-wrapper{margin-top:48px}
  .woocommerce-Tabs-panel{margin-top:20px}
  .woocommerce-Reviews{margin-top:20px}

  .pdp__trust{margin-top:20px;padding-top:20px}

  .pdp-usps{margin-top:24px;gap:20px}

  .related > h2{margin-bottom:24px}
  .related,.upsells,.cross-sells{margin-top:48px}
}