/* OMNI Research Labs — Storefront 3.1.0
 *
 * Loaded after peak.css. Everything here is either a fix for a measured defect
 * or the floating-vial presentation. No colour, type or layout decision from
 * the approved OMNI design is changed.
 */

/* ==========================================================================
   1. BOTTOM CUT-OFF
   The floating layer is now unhooked server-side on cart and checkout
   (includes/commerce-guard.php). Everywhere else it still renders, so the
   page must reserve room for it instead of letting it sit on top of content.

   .peak-proof is fixed at bottom:1rem and is the tallest of them at roughly
   72px, so 1rem + 72px + breathing room, plus the iPhone home indicator.
   ========================================================================== */

:root{
  --omni-floating-clearance: 104px;
  --omni-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body{
  padding-bottom: calc(var(--omni-floating-clearance) + var(--omni-safe-bottom));
}

/* On cart, checkout and account the floating layer is gone, so the large
   reserve is not needed — only the safe-area inset. */
body.peak-commerce{
  padding-bottom: calc(1rem + var(--omni-safe-bottom));
}

/* The fixed elements themselves must clear the home indicator too. */
.peak-proof{ bottom: calc(1rem + var(--omni-safe-bottom)); }
.peak-sticky{ bottom: calc(5.5rem + var(--omni-safe-bottom)); left: auto; right: 0; }

/* Belt and braces: if a cached page still contains the markup, it must not
   paint over a payment form. */
body.peak-commerce .peak-proof,
body.peak-commerce .peak-sticky,
body.peak-commerce .peak-sidetab,
body.peak-commerce .peak-pop,
body.peak-commerce .peak-gate{
  display: none !important;
}

/* WooCommerce's own sticky/short-screen cases: never let anything sit over the
   place-order control. */
body.peak-commerce .wc-block-components-checkout-place-order-button,
body.peak-commerce #place_order,
body.peak-commerce .checkout-button{
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   2. HORIZONTAL OVERFLOW
   .omni-site-footer used width:100vw + margin-left:50% + translateX(-50%).
   100vw includes the scrollbar, so on any desktop browser showing one the
   footer was wider than the viewport and the page scrolled sideways.
   margin-inline with calc() gives the same full-bleed with no scrollbar bug.
   ========================================================================== */

.omni-site-footer{
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  transform: none;
}

/* ==========================================================================
   3. FLOATING VIAL
   The vial cutout floats — never the card, text, price, selector or button.
   transform/opacity only, so no layout shift and no repaint of siblings.
   ========================================================================== */

@keyframes omniVialFloat{
  0%,100%{ transform: translate3d(0,0,0); }
  50%    { transform: translate3d(0,-7px,0); }
}
@keyframes omniVialShadow{
  0%,100%{ transform: translate3d(-50%,0,0) scale(1);    opacity:.30; }
  50%    { transform: translate3d(-50%,0,0) scale(.88);  opacity:.18; }
}

/* The gallery image container is WooCommerce's own element. Do NOT impose
   width/aspect-ratio on it: measured on staging, `display:inline-block;
   width:100%; aspect-ratio:1/1` inflated it from 512px to 598px and collapsed
   the adjacent product-info column from 778px to 56px, wrapping every string
   one character per line. Only position is added, so the shadow can anchor. */
.omni-vial,
.woocommerce-product-gallery__image.omni-vial{
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
}

/* The vial itself is the only thing constrained. */
.woocommerce div.product .omni-vial__img,
.omni-vial__img{
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: min(380px, 100%);
  max-height: 650px;
  margin-inline: auto;
  /* contain, never crop — cap and glass base must both stay visible. */
  object-fit: contain;
  will-change: transform;
  animation: omniVialFloat 4.2s ease-in-out infinite;
  backface-visibility: hidden;
}

.omni-vial__shadow{
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 1;
  width: 42%;
  max-width: 300px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10,31,68,.42) 0%, rgba(10,31,68,0) 72%);
  transform: translate3d(-50%,0,0);
  animation: omniVialShadow 4.2s ease-in-out infinite;
  pointer-events: none;
}

/* ---- Single-product layout guards -------------------------------------
   The block theme lays the product out as wp-block-columns. A flex/grid child
   without min-width:0 cannot shrink below its content's min-content width, which
   is how one oversized image starved the info column. */
.woocommerce div.product .wp-block-column,
.wp-block-columns > .wp-block-column{
  min-width: 0;
}

/* Keep the gallery within the intended band and stop the float from bleeding. */
.woocommerce div.product .woocommerce-product-gallery{
  max-width: 600px;
}
/* NOTE: no ::after clearfix here. .wp-block-columns is a FLEX container, so a
   generated ::after becomes an extra flex item and shrinks the real columns.
   Measured on staging: it collapsed the row from 1340px to 618px. */

/* Trust/assurance items must never collapse into a one-character column. */
.omni-product-assurance{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.omni-product-assurance > *{ min-width: 0; }
.omni-coa-inline{ flex-wrap: wrap; }
.omni-coa-inline > *{ min-width: 0; }

/* Catalog cards: smaller travel, and card height must not change. */
.peak-card .omni-vial__img{
  animation-duration: 5s;
  animation-name: omniVialFloatSmall;
}

/* Standard WooCommerce Shop/category grids do not use the custom peak-card
   wrapper. Animate their real product thumbnail directly so All Products and
   archive pages match the homepage product grid. */
body.woocommerce-shop ul.products li.product img.attachment-woocommerce_thumbnail,
body.tax-product_cat ul.products li.product img.attachment-woocommerce_thumbnail,
body.tax-product_tag ul.products li.product img.attachment-woocommerce_thumbnail{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  will-change:transform;
  backface-visibility:hidden;
  animation:omniVialFloatSmall 5s ease-in-out infinite;
}
body.woocommerce-shop ul.products li.product:nth-child(2n) img.attachment-woocommerce_thumbnail,
body.tax-product_cat ul.products li.product:nth-child(2n) img.attachment-woocommerce_thumbnail{
  animation-delay:-1.15s;
}
body.woocommerce-shop ul.products li.product:nth-child(3n) img.attachment-woocommerce_thumbnail,
body.tax-product_cat ul.products li.product:nth-child(3n) img.attachment-woocommerce_thumbnail{
  animation-delay:-2.3s;
}
@keyframes omniVialFloatSmall{
  0%,100%{ transform: translate3d(0,0,0); }
  50%    { transform: translate3d(0,-5px,0); }
}

/* Desktop hover lift, in addition to the float. Pointer-capable devices only,
   so touch never depends on hover. */
@media (hover:hover) and (pointer:fine){
  .peak-card:hover .omni-vial__img{
    animation-play-state: paused;
    transform: translate3d(0,-9px,0);
    transition: transform .28s ease;
  }
}

/* Main product image: larger travel, longer loop. */
.omni-vial--hero .omni-vial__img{ animation-duration: 4.6s; }
@media (min-width: 1024px){
  .omni-vial--hero .omni-vial__img{ animation-name: omniVialFloatHero; }
  @keyframes omniVialFloatHero{
    0%,100%{ transform: translate3d(0,0,0); }
    50%    { transform: translate3d(0,-9px,0); }
  }
}

/* Tab hidden — stop animating. Set by assets/js/peak.js. */
body.omni-anim-paused .omni-vial__img,
body.omni-anim-paused .omni-vial__shadow{
  animation-play-state: paused;
}

/* Static, polished fallback. */
@media (prefers-reduced-motion: reduce){
  .omni-vial__img,
  .omni-vial__shadow,
  body.woocommerce-shop ul.products li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_cat ul.products li.product img.attachment-woocommerce_thumbnail,
  body.tax-product_tag ul.products li.product img.attachment-woocommerce_thumbnail{
    animation: none !important;
    transform: translate3d(0,0,0);
  }
  .omni-vial__shadow{ transform: translate3d(-50%,0,0); opacity:.24; }
  @media (hover:hover){
    .peak-card:hover .omni-vial__img{ transform:none; }
  }
}

/* Never animate in cart or checkout — distraction next to a payment form, and
   needless compositing on a page that must stay responsive. */
body.peak-commerce .omni-vial__img,
body.peak-commerce .omni-vial__shadow{
  animation: none !important;
  transform: none;
}
body.peak-commerce .omni-vial__shadow{ display:none; }

/* Real WooCommerce single-product gallery wiring. The supported gallery
   anchor and IMG remain in place, preserving zoom/lightbox and variation swaps. */
body.single-product .woocommerce-product-gallery__wrapper >
.woocommerce-product-gallery__image.omni-vial--hero{
  display:block;
  position:relative;
  aspect-ratio:1 / 1;
  overflow:visible;
  border:1px solid var(--peak-line,#e5ebf4);
  border-radius:18px;
  background:linear-gradient(145deg,#f8fbff 0%,#edf5ff 100%);
  padding:clamp(18px,4vw,42px);
}
body.single-product .woocommerce-product-gallery__image.omni-vial--hero > a{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
body.single-product .woocommerce-product-gallery__image.omni-vial--hero img.omni-vial__img{
  width:100%;
  height:100%;
  max-height:620px;
  object-fit:contain;
}
body.single-product .woocommerce-product-gallery__image.omni-vial--hero .omni-vial__shadow{
  bottom:8%;
}

/* Premium but theme-compatible product composition. */
body.single-product div.product{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}

/* v3.2.3 — block-theme correction.
   The grid above assumes the CLASSIC single-product template, where
   div.product's children are the gallery and .summary. Block themes render the
   product inside their own .wp-block-columns flex row, so div.product has one
   child and the grid squeezes that whole row into a single track.
   Measured on staging at 1440px: row 1340px -> 618px, info column 778px -> 56px,
   which is what wrapped every label one character per line.
   Detect the block layout and stand the grid down. */
body.single-product div.product:has(.wp-block-columns){
  display: block;
  grid-template-columns: none;
  gap: 0;
}
body.single-product div.product:has(.wp-block-columns) .wp-block-columns{
  max-width: 1280px;
  margin-inline: auto;
}
body.single-product div.product:has(.wp-block-columns) .wp-block-column{
  min-width: 0;
}
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary{
  float:none;
  width:auto;
  margin:0;
}
body.single-product div.product .summary{
  padding:clamp(4px,1.5vw,18px) 0;
}
body.single-product div.product .product_title{
  color:var(--peak-ink,#0A1F44);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.03;
  letter-spacing:-.04em;
}
body.single-product div.product .price{
  color:var(--peak-accent,#164CC8);
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  font-weight:750;
}
body.single-product div.product form.cart .variations{
  width:100%;
}
body.single-product div.product form.cart .variations select{
  min-height:48px;
  width:100%;
  border:1px solid var(--peak-line,#dbe5f2);
  border-radius:10px;
  background:#fff;
  padding:0 42px 0 13px;
}

.omni-product-assurance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin:1rem 0 1.2rem}
.omni-product-assurance span{display:flex;flex-direction:column;gap:.15rem;padding:.72rem .8rem;border:1px solid #dce5f2;border-radius:12px;background:#f8fbff;color:#5b6b8c;font-size:.73rem;line-height:1.25}
.omni-product-assurance strong{color:var(--peak-ink,#0A1F44);font-size:.82rem}
@media(max-width:680px){.omni-product-assurance{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.single-product div.product form.cart .single_add_to_cart_button{
  min-height:50px;
  border-radius:10px;
  background:var(--peak-accent,#164CC8);
  font-weight:700;
}
body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related,
body.single-product div.product .upsells{
  grid-column:1 / -1;
  width:100%;
}

@media (max-width: 782px){
  body.single-product div.product{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  body.single-product .woocommerce-product-gallery__wrapper >
  .woocommerce-product-gallery__image.omni-vial--hero{
    max-height:min(78vh,520px);
    padding:22px;
  }
  body.single-product .woocommerce-product-gallery__image.omni-vial--hero img.omni-vial__img{
    max-height:min(70vh,460px);
  }
}

/* ==========================================================================
   4. MOBILE
   ========================================================================== */

@media (max-width: 480px){
  :root{ --omni-floating-clearance: 92px; }

  /* Smaller travel so the vial cannot clip its container on a short screen. */
  .omni-vial__img{ animation-name: omniVialFloatSmall; }

  /* The vial must never overlap a sticky add-to-cart bar. */
  .omni-vial{ margin-bottom: .5rem; }
}

/* No horizontal scrolling at the narrowest supported width. */
@media (max-width: 360px){
  .omni-vial{ max-width: 100%; }
}

/* ==========================================================================
   5. BUNDLE READ-OUT
   Figures come from the server. Nothing here moves or animates — the price,
   savings and Add to Cart must stay stationary and readable.
   ========================================================================== */

.omni-bundle{
  margin:1rem 0 1.15rem;
  padding:.95rem 1.05rem;
  border:1px solid var(--peak-line,#e5ebf4);
  border-radius:12px;
  background:#f7fafd;
  position:relative;
}
.omni-bundle[data-omni-badge]::after{
  content:attr(data-omni-badge);
  position:absolute; top:-10px; left:14px;
  background:var(--peak-ink,#0A1F44); color:#fff;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
}
.omni-bundle__figures{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; }
.omni-bundle__unit{ font-size:1.28rem; font-weight:700; color:var(--peak-ink,#0A1F44); }
.omni-bundle__unit .omni-unit{ font-size:.8rem; font-weight:500; color:#5B6B8C; }
.omni-bundle__save{
  font-size:.9rem; font-weight:600; color:#0f7a4d;
  background:#e6f5ee; border-radius:99px; padding:3px 11px;
}
.omni-bundle__label{ margin:.55rem 0 0; font-size:.85rem; color:#5B6B8C; }

/* Grouped vial preview — never ten full-size images. */
.omni-bundle__viz{ display:flex; align-items:flex-end; gap:5px; margin-top:.7rem; min-height:34px; }
.omni-viz__v{
  width:13px; height:32px; border-radius:3px 3px 5px 5px;
  background:linear-gradient(180deg,#c9dcf5 0%,#eaf2fd 38%,#ffffff 100%);
  border:1px solid #b9cfeb; box-shadow:inset 0 -3px 0 rgba(22,76,200,.12);
}
.omni-viz__more{ font-size:.82rem; font-weight:600; color:#5B6B8C; margin-left:5px; }

/* ==========================================================================
   6. COA LIBRARY
   ========================================================================== */

.omni-coa{ margin:1.4rem 0; }
.omni-coa__tools{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.omni-coa__search{
  flex:1; min-width:230px; max-width:420px;
  padding:11px 13px; border:1px solid var(--peak-line,#e5ebf4);
  border-radius:9px; font-size:15px; background:#fff;
}
.omni-coa__count{ margin:0; font-size:.86rem; color:#5B6B8C; }

.omni-coa__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.omni-coa__item{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1rem; border:1px solid var(--peak-line,#e5ebf4);
  border-radius:11px; background:#fff;
}
.omni-coa__meta{ flex:1; min-width:190px; display:flex; flex-direction:column; gap:3px; }
.omni-coa__meta strong{ color:var(--peak-ink,#0A1F44); }
.omni-coa__meta span{ font-size:.83rem; color:#5B6B8C; }
.omni-coa__view,
.omni-coa__product,
.omni-coa__library{
  text-decoration:none; font-size:.88rem; font-weight:600;
  padding:8px 15px; border-radius:8px; white-space:nowrap;
}
.omni-coa__view{ background:var(--peak-ink,#0A1F44); color:#fff; }
.omni-coa__product,
.omni-coa__library{ border:1px solid var(--peak-line,#e5ebf4); color:var(--peak-ink,#0A1F44); }

/* Truthful empty state — no invented certificate, no purity figure. */
.omni-coa__empty{
  border:1px dashed var(--peak-line,#cfdcee); border-radius:12px;
  padding:1.5rem 1.4rem; background:#f7fafd;
}
.omni-coa__empty h3{ margin:0 0 .5rem; font-size:1.05rem; color:var(--peak-ink,#0A1F44); }
.omni-coa__empty p{ margin:0 0 .5rem; color:#5B6B8C; font-size:.95rem; line-height:1.6; }

.omni-coa-inline{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.85rem 0; }
.omni-coa-inline__none{ margin:0; font-size:.88rem; color:#5B6B8C; }
.omni-coa-inline__link{
  background:var(--peak-ink,#0A1F44); color:#fff; text-decoration:none;
  font-size:.86rem; font-weight:600; padding:8px 14px; border-radius:8px;
}
.omni-coa-inline__link span{ opacity:.75; font-weight:400; }

@media (max-width:480px){
  .omni-coa__item{ align-items:flex-start; }
  .omni-coa__view,.omni-coa__product,.omni-coa__library{ flex:1; text-align:center; }
}

/* ==========================================================================
   7. v3.2.3 — "Get 10% off" tab, and catalog-card vials
   ========================================================================== */

/* The tab was reported as sitting mostly outside the viewport. peak.css:330 pins
   it to right:0 with writing-mode:vertical-rl; on narrow screens the rotated text
   box overflows and the label is clipped. Anchor it fully inside the viewport and
   cap its height so it can never exceed the screen. */
.peak-sidetab{
  right: 0;
  max-height: 62vh;
  overflow: hidden;
  padding: 1rem .62rem;
  font-size: .82rem;
  letter-spacing: .04em;
  /* Never let the rotated box push past the right edge. */
  max-width: 44px;
  box-sizing: border-box;
}

/* The bottom-left discount button: keep it clear of the viewport edge and the
   home indicator, and never let it exceed the screen width. */
.peak-sticky{
  left: auto;
  right: 0;
  max-width: calc(100vw - 24px);
  border-radius: 10px 0 0 10px;
}

@media (max-width: 782px){
  /* peak.css:352 already hides .peak-sidetab below this width. Keep that, and
     make sure the bottom tab stays fully reachable above the safe area. */
  .peak-sticky{
    bottom: calc(1rem + var(--omni-safe-bottom));
    font-size: .84rem;
    padding: .7rem .95rem;
  }
}

/* Catalog cards (shop, category, tag, search, related). Only the IMG moves —
   the card box, title, price and button are untouched, so grid rows cannot
   shift or reflow. */
.omni-vial__img--card{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  will-change: transform;
  animation: omniVialFloatSmall 5s ease-in-out infinite;
  backface-visibility: hidden;
}

/* Stagger so a grid of cards does not pulse in unison. */
li.product:nth-child(2n) .omni-vial__img--card{ animation-delay: -1.2s; }
li.product:nth-child(3n) .omni-vial__img--card{ animation-delay: -2.4s; }
li.product:nth-child(4n) .omni-vial__img--card{ animation-delay: -3.1s; }

@media (hover:hover) and (pointer:fine){
  li.product:hover .omni-vial__img--card{
    animation-play-state: paused;
    transform: translate3d(0,-7px,0);
    transition: transform .28s ease;
  }
}

@media (prefers-reduced-motion: reduce){
  .omni-vial__img--card{ animation: none !important; transform: none !important; }
  li.product:hover .omni-vial__img--card{ transform: none !important; }
}

body.peak-commerce .omni-vial__img--card{
  animation: none !important;
  transform: none !important;
}

/* ==========================================================================
   8. v3.2.4 — BLOCK CART & CHECKOUT, OMNI BRANDING
   Scoped to the WooCommerce block cart/checkout only, so nothing else on the
   site shifts. Brand alignment only: no structural redesign.
   ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* Page heading: the theme default renders enormous on these two pages. */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title{
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.02em;
  color: var(--peak-ink, #0A1F44);
  margin-bottom: .6em;
}

/* Primary actions in OMNI blue rather than the theme's default black. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button:not(.wc-block-components-button--text),
.wp-block-woocommerce-checkout .wc-block-components-button:not(.wc-block-components-button--text){
  background-color: var(--peak-accent, #164CC8) !important;
  border-color: var(--peak-accent, #164CC8) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background-color: var(--peak-ink, #0A1F44) !important;
  border-color: var(--peak-ink, #0A1F44) !important;
}

/* Totals panel reads as a card, consistent with the rest of the storefront. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar{
  background: #fff;
  border: 1px solid var(--peak-line, #e5ebf4);
  border-radius: 14px;
  padding: 20px;
}

/* Line-item breathing room; the default table sits too tight. */
.wc-block-cart-items__row{
  padding-block: 18px;
  border-bottom: 1px solid var(--peak-line, #e5ebf4);
}
.wc-block-cart-item__image img{
  border-radius: 10px;
  background: var(--peak-frost, #f3f7fc);
}
.wc-block-components-product-name{
  color: var(--peak-ink, #0A1F44);
  font-weight: 600;
  text-decoration: none;
}
/* Strength / bundle must stay legible — this is what the customer is buying. */
.wc-block-components-product-details__value,
.wc-block-components-product-details__name{
  color: #5B6B8C;
  font-size: .88rem;
}

/* Savings badge picks up the OMNI signal colour. */
.wc-block-components-sale-badge{
  background: var(--peak-signal, #DCE9FF);
  color: var(--peak-ink, #0A1F44);
  border-radius: 999px;
}

/* Footer must follow content, never overlap it. */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-checkout .wp-site-blocks{
  display: flow-root;
}

@media (max-width: 782px){
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout{ padding-inline: 14px; }
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button{ width: 100%; }
}

/* The announcement marquee translates a track wider than the viewport. Its
   clipping was off by a sub-pixel, leaking 1px of horizontal scroll on mobile.
   overflow-x:clip rather than hidden, so no scroll container is created and
   position:sticky elsewhere is unaffected. */
.peak-annbar,
.peak-rail{
  max-width: 100vw;
  overflow-x: clip;
}

/* ==========================================================================
   9. v3.2.5 — CART/CHECKOUT OVERRIDES THAT ACTUALLY WIN
   Block themes print their global styles AFTER plugin stylesheets, so the
   section-8 rules loaded but lost the cascade. Verified on live: the theme's
   1440px container and default black buttons were winning.
   Scoped strictly to cart/checkout body classes so nothing else is affected.
   ========================================================================== */

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout{
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding-inline: 20px !important;
  box-sizing: border-box !important;
}

/* The giant page heading. */
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title{
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--peak-ink, #0A1F44) !important;
  margin: 0 0 .6em !important;
}

/* Empty-cart state: the theme renders this enormous too. */
body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .cart-empty{
  font-size: clamp(22px, 2.4vw, 30px) !important;
  color: var(--peak-ink, #0A1F44) !important;
}

/* Every primary action in OMNI blue, including "Return to shop". */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
body.woocommerce-cart .wc-block-cart__empty-cart__button,
body.woocommerce-cart .return-to-shop .button,
body.woocommerce-cart .wc-block-components-button:not(.wc-block-components-button--text),
body.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-button--text){
  background-color: var(--peak-accent, #164CC8) !important;
  border-color: var(--peak-accent, #164CC8) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
  background-color: var(--peak-ink, #0A1F44) !important;
  border-color: var(--peak-ink, #0A1F44) !important;
}

/* Totals panel as an OMNI card. */
body.woocommerce-cart .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar{
  background: #fff !important;
  border: 1px solid var(--peak-line, #e5ebf4) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}

@media (max-width: 782px){
  body.woocommerce-cart .wp-block-woocommerce-cart,
  body.woocommerce-checkout .wp-block-woocommerce-checkout{ padding-inline: 14px !important; }
  body.woocommerce-cart .wc-block-cart__submit-button,
  body.woocommerce-checkout .wc-block-components-checkout-place-order-button{ width: 100% !important; }
}

/* v3.2.6 — the cart/checkout headings are h1/h2.wp-block-heading, NOT
   .wp-block-post-title. Measured on live: "Cart" rendered at 80px and
   "Your shopping bag is empty" at 60px. */
body.woocommerce-cart h1.wp-block-heading,
body.woocommerce-checkout h1.wp-block-heading{
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--peak-ink, #0A1F44) !important;
}
body.woocommerce-cart h2.wp-block-heading,
body.woocommerce-checkout h2.wp-block-heading{
  font-size: clamp(19px, 2.1vw, 26px) !important;
  line-height: 1.25 !important;
  color: var(--peak-ink, #0A1F44) !important;
}
body.woocommerce-cart h3.wp-block-heading,
body.woocommerce-checkout h3.wp-block-heading{
  font-size: clamp(16px, 1.6vw, 20px) !important;
}

/* -------------------------------------------------------------------------
 * v3.4.0 — buying affordances on catalogue cards.
 *
 * Measured on live v3.2.6: the homepage product grid had 0 prices and 0
 * add-to-cart controls, and /shop/ had prices but 0 add-to-cart controls.
 * These styles cover the price, the priced bundle option buttons and the CTA.
 * ---------------------------------------------------------------------- */

.peak-buy{
  margin-top:auto;
  padding-top:.75rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.peak-buy__price{
  margin:0;
  font-weight:700;
  font-size:1.05rem;
  color:var(--peak-ink);
  line-height:1.2;
}
.peak-buy__price del{opacity:.55;font-weight:500;margin-right:.35rem;}
.peak-buy__price ins{text-decoration:none;}

.peak-buy__strength{
  margin:.15rem 0 0;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--peak-ink-2);
}

/* Priced option buttons — benchmark pattern: the price is on the button,
   never hidden behind a dropdown. */
.peak-buy__tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:.4rem;
}

.peak-buy__tier{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
  padding:.45rem .35rem;
  border:1px solid var(--peak-line);
  border-radius:calc(var(--peak-radius) * .6);
  background:#fff;
  text-decoration:none;
  color:var(--peak-ink);
  line-height:1.25;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.peak-buy__tier:hover,
.peak-buy__tier:focus-visible{
  border-color:var(--peak-accent);
  box-shadow:0 0 0 2px rgba(11,31,58,.06);
}
.peak-buy__tier-qty{font-size:.76rem;color:var(--peak-ink-2);}
.peak-buy__tier-price{font-weight:700;font-size:.9rem;}
.peak-buy__tier-save{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--peak-signal, #0B7A3B);
}

.peak-buy__cta{width:100%;text-align:center;}
.peak-buy__cta.is-disabled{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
}
.peak-buy__cta.loading{opacity:.7;}
.peak-buy__cta.added::after{content:" ✓";}

/* /shop/ is a block Product Collection; keep the injected control aligned
   with the block card's own rhythm. */
.wc-block-product .peak-buy,
.wp-block-woocommerce-product-collection .peak-buy{
  padding-top:.5rem;
}

@media (max-width:430px){
  .peak-buy__tiers{grid-template-columns:repeat(2,1fr);}
}

/* -------------------------------------------------------------------------
 * v3.4.4 — product gallery image was cropping the vial in half.
 *
 * MEASURED ON LIVE 4 Sept 2026, /product/bpc-157/:
 *   natural image   1440 x 2838  (tall, ~1:1.97)
 *   container        590 x 590   (square)
 *   object-fit       cover       -> ~50% of the vial cropped away vertically
 *
 * The assets themselves are fine and consistent (all four vials are 558x1100
 * in the plugin and in the media library); this was purely a display rule.
 * `contain` shows the whole vial inside the square without stretching it.
 * ---------------------------------------------------------------------- */

.wc-block-product-gallery-large-image img,
img.wc-block-woocommerce-product-gallery-large-image__image,
.wc-block-components-product-image img{
  object-fit: contain !important;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Give the tall vial a little breathing room rather than touching the edges. */
.wc-block-product-gallery-large-image__wrapper{
  padding: clamp(8px, 2%, 24px);
  box-sizing: border-box;
}

/* v3.5.0 — honest empty-category state */
.peak-empty-cat{
  max-width: 640px;
  margin: 2rem auto 3rem;
  padding: 1.75rem;
  border: 1px solid var(--peak-line);
  border-radius: var(--peak-radius);
  background: #fff;
  text-align: center;
}
.peak-empty-cat__title{
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--peak-ink);
}
.peak-empty-cat__body{
  margin: 0 0 1.25rem;
  color: var(--peak-ink-2);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
 * v3.6.0 — announcement rail must clip.
 *
 * MEASURED ON LIVE v3.5.2: the scrolling rail's track extended to x=1177 on a
 * 390px viewport, producing 5px of horizontal page overflow on
 * /product-category/research-peptides/ and 2px on /shop/ at 430px. The rail is
 * meant to be a marquee clipped by its container; it was not clipping on
 * archive templates.
 * ---------------------------------------------------------------------- */
.peak-rail{
  overflow: hidden !important;
  max-width: 100%;
}
.peak-rail__track{
  will-change: transform;
}

/* -------------------------------------------------------------------------
 * v3.6.1 — my own Add to Cart button was overflowing the viewport.
 *
 * MEASURED ON LIVE v3.6.0, /shop/ at 390px: `.peak-buy__cta` rendered 191px
 * wide ending at x=395 on a 390px viewport — 5px of horizontal page overflow
 * (2px at 430px). Cause: `width:100%` on a button that also carries horizontal
 * padding, without `box-sizing: border-box`, inside a grid column whose
 * children default to `min-width:auto` and therefore refuse to shrink.
 *
 * The announcement rail was NOT the cause — it clips correctly. The earlier
 * offender list was misleading because getBoundingClientRect still reports
 * out-of-viewport geometry for content that is visually clipped.
 * ---------------------------------------------------------------------- */
.peak-buy,
.peak-buy *{
  box-sizing: border-box;
}
.peak-buy{
  min-width: 0;
  max-width: 100%;
}
.peak-buy__cta{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.peak-buy__tiers{
  min-width: 0;
}

/* v3.7.1 — belt and braces: never let an orphaned mini-cart drawer paint. */
.wc-block-mini-cart__drawer,
.wp-block-woocommerce-mini-cart-contents{
  display: none !important;
}

/* -------------------------------------------------------------------------
 * v3.8.0 — mobile product-card polish.
 *
 * MEASURED ON LIVE v3.7.1 at 390px:
 *   1. `.peak-card__desc` was `display:none`, so the real strength
 *      ("10mg · Lyophilized powder") vanished on mobile. The card showed no
 *      strength at all, which the brief explicitly requires.
 *   2. The vial rendered 104px wide inside a 322px card — 32% of the card.
 *      Against the reference, whose image tile fills the card, OMNI read as
 *      small and less premium.
 *
 * The vial artwork itself is correct and unchanged: silver cap, blue collar,
 * clear glass, white label, navy branding, honeycomb strip. Only its presented
 * size and the missing strength line are addressed here.
 * ---------------------------------------------------------------------- */

@media (max-width: 782px){
  /* The real strength must be visible on the card. */
  .peak-card--approved-home .peak-card__desc,
  .peak-card .peak-card__desc{
    display: block !important;
    margin: .15rem 0 .5rem;
    font-size: .85rem;
    color: var(--peak-ink-2);
  }

  /* Give the vial the presence it has on desktop. */
  .peak-card--approved-home .peak-card__media{
    display: block;
    padding: .5rem 0 .25rem;
  }
  .peak-card--approved-home .peak-card__img{
    width: auto !important;
    height: clamp(200px, 34vw + 110px, 260px) !important;
    max-width: 78%;
    margin-inline: auto;
    object-fit: contain;
  }
}

/* Desktop cards: modest lift so the vial anchors the card. */
@media (min-width: 783px){
  .peak-card--approved-home .peak-card__img{
    height: clamp(170px, 12vw, 210px) !important;
    width: auto !important;
    max-width: 82%;
    margin-inline: auto;
    object-fit: contain;
  }
}

/* -------------------------------------------------------------------------
 * v3.8.1 — the card vial was clamped by max-width/max-height, not height.
 *
 * MEASURED ON LIVE v3.8.0: the image computed to max-width:104px and
 * max-height:180px, so setting `height` alone changed nothing — it was capped.
 * The media box itself is 220px tall while the image was held at 180px.
 * ---------------------------------------------------------------------- */
.peak-card--approved-home .peak-card__media{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: .4rem 0 .2rem;
}
.peak-card--approved-home .peak-card__img{
  max-width: 100% !important;
  max-height: none !important;
  width: auto !important;
  object-fit: contain !important;
}

@media (max-width: 782px){
  .peak-card--approved-home .peak-card__img{
    height: clamp(210px, 58vw, 275px) !important;
  }
}
@media (min-width: 783px){
  .peak-card--approved-home .peak-card__img{
    height: clamp(185px, 13vw, 225px) !important;
  }
}

/* -------------------------------------------------------------------------
 * v3.9.0 — GLP Research featured band.
 * Sits immediately under the hero, before the general catalogue, per owner
 * decision. Honest "not published" state until real product data exists.
 * ---------------------------------------------------------------------- */
.peak-glp{
  background:linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 100%);
  border-top:1px solid var(--peak-line);
  border-bottom:1px solid var(--peak-line);
  padding:clamp(30px,5vw,58px) 0;
}
.peak-glp__inner{
  max-width:var(--peak-max); margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,48px);
  align-items:center;
}
.peak-glp__eyebrow{
  margin:0 0 .5rem; font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--peak-accent);
}
.peak-glp__title{
  margin:0 0 .6rem; font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:800;
  letter-spacing:-.02em; color:var(--peak-ink); line-height:1.1;
}
.peak-glp__lede{ margin:0 0 1rem; color:var(--peak-ink-2); line-height:1.6; max-width:46ch; }
.peak-glp__status{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .5rem;
  font-size:.85rem; font-weight:700; color:var(--peak-ink-2);
}
.peak-glp__dot{ width:8px; height:8px; border-radius:50%; background:#C7D4EA; flex:0 0 auto; }
.peak-glp__note{ margin:0 0 1.25rem; font-size:.86rem; line-height:1.6; color:var(--peak-ink-2); max-width:48ch; }
.peak-glp__cta{ display:inline-flex; }
.peak-glp__panel{ min-width:0; }
.peak-glp__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.peak-glp__placeholder{
  border:1px dashed #C7D4EA; border-radius:var(--peak-radius);
  background:#fff; padding:clamp(24px,4vw,40px); text-align:center; color:var(--peak-ink-2);
}
.peak-glp__ph-mark{ display:block; color:#B9CAE8; margin-bottom:.75rem; }
.peak-glp__ph-mark svg{ margin-inline:auto; }
.peak-glp__ph-title{ margin:0 0 .4rem; font-weight:700; color:var(--peak-ink); }
.peak-glp__ph-body{ margin:0; font-size:.86rem; line-height:1.6; }

@media (max-width:860px){
  .peak-glp__inner{ grid-template-columns:1fr; }
  .peak-glp__lede,.peak-glp__note{ max-width:none; }
}

/* -------------------------------------------------------------------------
 * v4.0.0 — responsive product grid with NO fixed product count.
 * Works for 1 product or 25. Desktop / tablet / mobile derived from available
 * width, not from an assumed catalogue size.
 * ---------------------------------------------------------------------- */
.peak-grid--approved-home{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,2vw,24px);
  align-items:stretch;
}
@media (max-width:900px){
  .peak-grid--approved-home{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
}
@media (max-width:600px){
  .peak-grid--approved-home{grid-template-columns:1fr;}
}
/* Long product names must wrap, never overflow, at any width. */
.peak-card__title,.peak-card__title a,.peak-card__desc{
  overflow-wrap:anywhere;
  hyphens:auto;
  min-width:0;
}
.peak-card--approved-home{min-width:0;}

/* v4.1.0 — Shop by Category row + product specs. Responsive, no fixed counts. */
.peak-cats{padding:clamp(28px,4vw,52px) 0;background:#fff}
.peak-cats__inner{max-width:var(--peak-max);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.peak-cats__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(12px,2vw,20px)}
.peak-cat{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--peak-line);
  border-radius:var(--peak-radius);background:var(--peak-paper);text-decoration:none;color:var(--peak-ink);
  transition:border-color .15s ease,box-shadow .15s ease;min-width:0}
.peak-cat:hover{border-color:var(--peak-accent);box-shadow:0 6px 18px -8px rgba(10,31,68,.22)}
.peak-cat__media{flex:0 0 auto;width:52px;height:52px;border-radius:12px;background:#F1F6FF;
  display:flex;align-items:center;justify-content:center;color:var(--peak-accent);overflow:hidden}
.peak-cat__media img{width:100%;height:100%;object-fit:cover}
.peak-cat__body{display:flex;flex-direction:column;min-width:0}
.peak-cat__name{font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.peak-cat__count{font-size:.8rem;color:var(--peak-ink-2);margin-top:2px}

.peak-specs{max-width:var(--peak-max);margin:2rem auto 0;padding-inline:clamp(16px,4vw,32px)}
.peak-specs__h{margin:0 0 .75rem;font-size:1.05rem;font-weight:700;color:var(--peak-ink)}
.peak-specs__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin:0;
  border:1px solid var(--peak-line);border-radius:var(--peak-radius);overflow:hidden}
.peak-specs__row{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--peak-line);background:#fff;min-width:0}
.peak-specs__row dt{font-weight:600;color:var(--peak-ink-2);margin:0}
.peak-specs__row dd{margin:0;text-align:right;color:var(--peak-ink);overflow-wrap:anywhere}
.peak-specs__desc{margin:.9rem 0 0;color:var(--peak-ink-2);line-height:1.6}
@media (max-width:600px){
  .peak-cats__grid{grid-template-columns:1fr}
  .peak-specs__list{grid-template-columns:1fr}
}

/* -------------------------------------------------------------------------
 * v4.2.0 — launch polish.
 * Discovery cards (no bundle noise), stronger category cards, tighter product
 * page so purchase controls sit higher.
 * ---------------------------------------------------------------------- */

/* Best Sellers: fixed, static 4-up on desktop. No carousel, no auto-scroll. */
.peak-grid--approved-home{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
@media (max-width:1100px){ .peak-grid--approved-home{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:820px){  .peak-grid--approved-home{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:430px){  .peak-grid--approved-home{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} }

.peak-buy__from{font-size:.78rem;font-weight:600;color:var(--peak-ink-2);letter-spacing:.02em;}
.peak-buy__price{font-size:1.02rem}

/* Card image sits smaller on mobile 2-up so the card is not oversized. */
@media (max-width:430px){
  .peak-card--approved-home .peak-card__img{height:clamp(120px,34vw,160px)!important;}
  .peak-card__title{font-size:.98rem}
  .peak-card__desc{font-size:.8rem}
  .peak-buy__cta{font-size:.86rem;padding:.6rem .5rem}
}

/* Category cards — larger, image-led, with a clear affordance. */
.peak-cats__grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.peak-cat{
  position:relative; align-items:center; gap:16px; padding:18px 18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 100%);
}
.peak-cat__media{width:76px;height:76px;border-radius:14px;background:#EFF4FE;padding:6px}
.peak-cat__media img{object-fit:contain}
.peak-cat__name{font-size:1.02rem}
.peak-cat__go{
  margin-left:auto;flex:0 0 auto;color:var(--peak-accent);opacity:.7;
  transition:transform .15s ease,opacity .15s ease;
}
.peak-cat:hover .peak-cat__go{transform:translateX(3px);opacity:1}
@media (max-width:600px){
  .peak-cats__grid{grid-template-columns:1fr}
  .peak-cat__media{width:62px;height:62px}
}

/* Product page: bring purchase controls higher by capping the gallery. */
@media (min-width:1024px){
  .wc-block-product-gallery-large-image,
  .wp-block-woocommerce-product-image-gallery{
    max-width:440px;
  }
  .wc-block-product-gallery-large-image img{max-height:480px!important;}
}

/* v4.2.1 — category grid must look intentional at ANY count.
   With one published category an auto-fill grid left a single stranded card.
   Centring the tracks and capping card width reads as deliberate whether
   there is 1 category or 7, so adding BAC Water / Supplies later needs no
   layout change. */
.peak-cats__grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  justify-content:center;
}
@media (max-width:600px){
  .peak-cats__grid{grid-template-columns:minmax(0,1fr);}
}

/* =========================================================================
 * v4.3.0 — OMNI CARD SYSTEM
 *
 * One card definition used by the homepage, /shop/ and every category archive,
 * so a product looks identical wherever it appears and adding product #5..#25
 * inherits it automatically.
 *
 * Fixes measured on live at 390px:
 *   - grid was collapsing to 1 column (a later 600px rule beat the 430px rule)
 *   - vials sat on flat white with no image panel
 *   - card internals were not row-aligned across a row
 * ====================================================================== */

/* ---- grid ------------------------------------------------------------ */
.peak-grid--approved-home{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
  align-items:stretch;
}
@media (max-width:1100px){ .peak-grid--approved-home{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:860px){  .peak-grid--approved-home{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* Decisive 2-up on phones — this must beat every earlier rule. */
@media (max-width:600px){
  .peak-grid--approved-home{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;}
}

/* ---- the card -------------------------------------------------------- */
.peak-card--approved-home,
.wc-block-product{
  display:flex!important;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:#fff;
  border:1px solid var(--peak-line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.peak-card--approved-home:hover,
.wc-block-product:hover{
  border-color:#BFD2F2;
  box-shadow:0 10px 26px -14px rgba(10,31,68,.35);
}

/* ---- image panel: identical height for every card in a row ----------- */
.peak-card--approved-home .peak-card__media,
.wc-block-product .wc-block-components-product-image{
  display:flex!important;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/1;
  height:auto!important;
  min-height:0!important;
  margin:0;
  padding:10px;
  background:
    radial-gradient(120% 100% at 50% 0%, #EFF5FF 0%, #F7FAFF 55%, #FFFFFF 100%);
  border-bottom:1px solid var(--peak-line);
  overflow:hidden;
}
.peak-card--approved-home .peak-card__img,
.wc-block-product .wc-block-components-product-image img{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0 auto;
}

/* ---- body: aligned rows across the whole row ------------------------- */
.peak-card--approved-home .peak-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:.3rem;
  padding:14px 14px 16px;
  min-width:0;
  text-align:center;
}
.peak-card--approved-home .peak-card__title{
  margin:0;font-size:1rem;line-height:1.25;overflow-wrap:anywhere;
}
.peak-card--approved-home .peak-card__desc{
  margin:0;font-size:.82rem;color:var(--peak-ink-2);
  /* reserve two lines so a one-line and two-line card stay aligned */
  min-height:2.1em;
}
.peak-card--approved-home .peak-card__ruo{
  margin:.1rem 0 0;font-size:.62rem;letter-spacing:.08em;
}
/* push the buy block to the bottom so price + button align on every card */
.peak-card--approved-home .peak-buy{
  margin-top:auto;
  padding-top:.6rem;
  align-items:stretch;
  gap:.45rem;
}
.peak-card--approved-home .peak-buy__price{
  text-align:center;min-height:1.4em;
}

/* ---- strength chips -------------------------------------------------- */
.peak-buy__chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.peak-buy__chip{
  font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:999px;
  border:1px solid var(--peak-line);color:var(--peak-ink-2);
  background:#fff;text-decoration:none;line-height:1.3;
}
.peak-buy__chip.is-active{
  border-color:var(--peak-accent);color:var(--peak-accent);background:#EFF4FE;
}

/* ---- /shop/ + category archives: same system ------------------------- */
.wp-block-woocommerce-product-collection .wc-block-product,
.wc-block-grid__product{
  padding:0!important;
  text-align:center;
}
.wc-block-product .wc-block-components-product-title,
.wc-block-product .wc-block-components-product-price{
  padding-inline:12px;
}
.wc-block-product .wc-block-components-product-title{margin-top:12px;overflow-wrap:anywhere}
.wc-block-product .peak-buy{padding:0 12px 14px;margin-top:auto}
.wp-block-woocommerce-product-template{align-items:stretch}

@media (max-width:600px){
  .peak-card--approved-home .peak-card__body{padding:12px 10px 14px}
  .peak-card--approved-home .peak-card__title{font-size:.92rem}
  .peak-card--approved-home .peak-card__desc{font-size:.76rem;min-height:2.4em}
  .peak-buy__cta{font-size:.84rem;padding:.6rem .4rem}
  .peak-buy__price{font-size:.98rem}
}

/* ---- product page: matching bordered image panel --------------------- */
.wc-block-product-gallery-large-image,
.wp-block-woocommerce-product-image-gallery{
  border:1px solid var(--peak-line);
  border-radius:18px;
  background:radial-gradient(120% 100% at 50% 0%, #EFF5FF 0%, #F7FAFF 55%, #FFFFFF 100%);
  padding:clamp(10px,2vw,20px);
  overflow:hidden;
}

/* -------------------------------------------------------------------------
 * v4.3.1 — mobile 2-up, specificity fix.
 *
 * peak.css carries `body.peak-skin-clinical .peak-grid--approved-home` at
 * max-width:560px forcing a single column with !important. My earlier
 * `.peak-grid--approved-home` rule could never win that: lower specificity,
 * even with !important. Matching the skin-scoped selector so the 2-up phone
 * grid actually applies. omni-310.css loads after peak.css, so equal
 * specificity + !important resolves in favour of this rule.
 * ---------------------------------------------------------------------- */
@media (max-width:600px){
  body.peak-skin-clinical .peak-grid--approved-home,
  body.peak-skin-botanical .peak-grid--approved-home,
  body .peak-grid--approved-home{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
}
/* Very narrow phones keep 2-up but tighten the gutters further. */
@media (max-width:360px){
  body.peak-skin-clinical .peak-grid--approved-home,
  body .peak-grid--approved-home{ gap:9px!important; }
}

/* =========================================================================
 * v4.4.0 — SHOP BY CATEGORY, REBUILT FOR DESKTOP
 *
 * The v4.2.1 rule capped every category card at 300px and centred it. With a
 * single published category that produced exactly what it was meant to avoid:
 * one 300x126 card marooned in a 1180px section. Capping width is the wrong
 * lever — the card has to grow into the space it is given.
 *
 * Layout is driven by data-count, which the shortcode already emits, so the
 * section stays deliberate at 1, 2, 3 or 7 categories with no plugin edit when
 * BAC Water or Supplies are published later.
 * ====================================================================== */

.peak-cats{padding:clamp(40px,5vw,72px) 0}
.peak-cats__grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-content:stretch;
  gap:clamp(14px,1.8vw,22px);
}

/* A card is now a real panel: image band on top, body beneath. */
.peak-cats .peak-cat{
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  border:1px solid var(--peak-line);border-radius:18px;overflow:hidden;
  background:#fff;position:relative;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.peak-cats .peak-cat:hover{
  border-color:var(--peak-accent);
  box-shadow:0 18px 40px -22px rgba(10,31,68,.38);
  transform:translateY(-2px);
}
.peak-cats .peak-cat__media{
  width:100%;height:auto;aspect-ratio:16/10;border-radius:0;padding:18px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,#EFF5FF 0%,#F7FAFF 55%,#FFFFFF 100%);
  border-bottom:1px solid var(--peak-line);
}
.peak-cats .peak-cat__media img{
  width:auto;height:100%;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(10,31,68,.14));
}
.peak-cats .peak-cat__mark{color:var(--peak-accent);opacity:.5}
.peak-cats .peak-cat__body{
  padding:16px 18px 18px;gap:2px;flex:1 1 auto;justify-content:center;
}
.peak-cats .peak-cat__name{font-size:1.12rem;letter-spacing:-.01em}
.peak-cats .peak-cat__count{font-size:.85rem}
.peak-cats .peak-cat__go{
  position:absolute;right:16px;bottom:18px;opacity:.55;
}

/* One category: a full-width banner rather than a stranded tile. */
@media (min-width:781px){
  .peak-cats__grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
  .peak-cats__grid[data-count="1"] .peak-cat{
    flex-direction:row;align-items:stretch;min-height:230px;
  }
  .peak-cats__grid[data-count="1"] .peak-cat__media{
    flex:0 0 42%;aspect-ratio:auto;height:auto;
    border-bottom:0;border-right:1px solid var(--peak-line);
  }
  .peak-cats__grid[data-count="1"] .peak-cat__media img{max-height:190px}
  .peak-cats__grid[data-count="1"] .peak-cat__body{padding:28px 32px}
  .peak-cats__grid[data-count="1"] .peak-cat__name{font-size:1.55rem}
  .peak-cats__grid[data-count="1"] .peak-cat__count{font-size:.95rem;margin-top:6px}

  .peak-cats__grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .peak-cats__grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Mobile: two-up like every other card surface, stacked layout preserved. */
@media (max-width:600px){
  body .peak-cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  body .peak-cats__grid[data-count="1"]{grid-template-columns:minmax(0,1fr)!important}
  .peak-cats .peak-cat__body{padding:12px 12px 14px}
  .peak-cats .peak-cat__name{font-size:.98rem}
  .peak-cats .peak-cat__go{display:none}
}

/* v4.4.1 — escape the theme's constrained layout.
   The block theme applies --wp--style--global--content-size (620px) as a
   max-width to every direct child of .entry-content. .peak-catalog already
   overrode it; .peak-cats did not, which is the real reason Shop by Category
   sat in a 620px column while the catalogue beside it ran to 1180px. Widening
   the card alone could never have fixed that. Applied to every top-level OMNI
   section so a future one cannot inherit the same bug. */
.entry-content > .peak-cats,
.entry-content > .peak-catalog,
.entry-content > .peak-trust,
.entry-content > .peak-faq,
.entry-content > .peak-hero{max-width:none;width:100%}

/* v4.4.2 — one container width for every section.
   Freeing .peak-cats from the theme's 620px cap let it run to 1290px, which
   swapped one inconsistency for another: the category row no longer lined up
   with the catalogue, trust or FAQ sections at 1180px. Match .peak-catalog
   exactly — same max-width, same inline padding — so the left and right edges
   of every section stack in a single column down the page. */
.entry-content > .peak-cats{max-width:1180px;margin-inline:auto}
.peak-cats__inner{max-width:none;padding-inline:20px}

/* =========================================================================
 * v4.5.0 — APPROVED CARD DIRECTION: dark navy molecular image panel
 *
 * Owner-approved 5 Sep 2026. Scope is deliberately narrow: only the image
 * panel and outline of the four card surfaces change. The hero, page
 * background, logo, navigation and homepage structure are untouched.
 *
 * The molecular field is an inline SVG data URI, not a photograph. That
 * matters: the vial artwork itself is unchanged, so no label fact, strength
 * or product claim is altered by making the panel darker. It is an
 * environment behind the product, nothing more.
 *
 * One token drives all four surfaces, so the product page, homepage,
 * shop grid and category row cannot drift apart again.
 * ====================================================================== */

:root{
  --omni-panel-navy:#0A1F44;
  --omni-panel-navy-2:#123166;
  --omni-panel-line:rgba(94,148,255,.42);
  --omni-panel-mesh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'%3E%3Cg fill='none' stroke='%235E94FF' stroke-width='1' opacity='.30'%3E%3Cpath d='M22 44 L64 22 L106 48 L150 28'/%3E%3Cpath d='M64 22 L68 76 L22 104'/%3E%3Cpath d='M106 48 L110 100 L68 76'/%3E%3Cpath d='M110 100 L154 126'/%3E%3Cpath d='M22 104 L62 140 L110 100'/%3E%3Cpath d='M62 140 L102 164'/%3E%3Cpath d='M150 28 L154 126'/%3E%3C/g%3E%3Cg fill='%237FB0FF' opacity='.52'%3E%3Ccircle cx='22' cy='44' r='2.6'/%3E%3Ccircle cx='64' cy='22' r='3'/%3E%3Ccircle cx='106' cy='48' r='2.8'/%3E%3Ccircle cx='150' cy='28' r='2.4'/%3E%3Ccircle cx='68' cy='76' r='3'/%3E%3Ccircle cx='22' cy='104' r='2.6'/%3E%3Ccircle cx='110' cy='100' r='2.8'/%3E%3Ccircle cx='154' cy='126' r='2.4'/%3E%3Ccircle cx='62' cy='140' r='3'/%3E%3Ccircle cx='102' cy='164' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- the panel, shared by all four surfaces -------------------------- */
.peak-card--approved-home .peak-card__media,
.wc-block-product .wc-block-components-product-image,
.peak-cats .peak-cat__media,
.wc-block-product-gallery-large-image,
.wp-block-woocommerce-product-image-gallery{
  background-color:var(--omni-panel-navy)!important;
  background-image:
    var(--omni-panel-mesh),
    radial-gradient(120% 95% at 50% 8%, rgba(30,86,180,.55) 0%, rgba(10,31,68,0) 62%),
    linear-gradient(165deg, var(--omni-panel-navy-2) 0%, var(--omni-panel-navy) 58%, #071734 100%)!important;
  background-repeat:repeat, no-repeat, no-repeat!important;
  background-size:170px 170px, 100% 100%, 100% 100%!important;
  border-color:var(--omni-panel-line)!important;
}

/* Larger bottle in frame, and a shadow that reads on a dark ground. */
.peak-card--approved-home .peak-card__media,
.wc-block-product .wc-block-components-product-image,
.peak-cats .peak-cat__media{padding:4px!important}

.peak-card--approved-home .peak-card__img,
.wc-block-product .wc-block-components-product-image img,
.peak-cats .peak-cat__media img,
.wc-block-product-gallery-large-image img,
.wp-block-woocommerce-product-image-gallery img{
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.50));
}

/* ---- thin cobalt outline on the card itself -------------------------- */
.peak-card--approved-home,
.wc-block-product,
.peak-cats .peak-cat{border-color:rgba(37,99,235,.34)!important}
.peak-card--approved-home:hover,
.wc-block-product:hover,
.peak-cats .peak-cat:hover{border-color:rgba(37,99,235,.70)!important}

/* The category banner's divider sits between panel and body, so it has to
   follow the panel edge rather than the light card line. */
.peak-cats .peak-cat__media{border-bottom-color:var(--omni-panel-line)!important}
@media (min-width:781px){
  .peak-cats__grid[data-count="1"] .peak-cat__media{
    border-right-color:var(--omni-panel-line)!important;
  }
}

/* The gallery mark on an empty category has to invert on the dark panel. */
.peak-cats .peak-cat__mark{color:#7FB0FF;opacity:.85}

/* =========================================================================
 * v4.5.1 — make the approved panel actually win the cascade
 *
 * v4.5.0 was correct CSS that never applied. peak.css carries
 *   body.peak-skin-clinical .peak-card--approved-home .peak-card__media
 * with !important on display, background, padding and aspect-ratio — 
 * specificity (0,3,1) against my (0,2,0), so !important on my side lost.
 * Same root cause as the mobile 2-column bug in v4.3.1.
 *
 * `html body[class]` raises every panel selector to (0,3,2), which beats the
 * peak.css rule outright and does not depend on which skin class is active,
 * so renaming or adding a skin cannot silently revert the panel again.
 * ====================================================================== */

html body[class] .peak-card--approved-home .peak-card__media,
html body[class] .wc-block-product .wc-block-components-product-image,
html body[class] .peak-cats .peak-cat__media,
html body[class] .wc-block-product-gallery-large-image,
html body[class] .wp-block-woocommerce-product-image-gallery{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background-color:var(--omni-panel-navy)!important;
  background-image:
    var(--omni-panel-mesh),
    radial-gradient(120% 95% at 50% 8%, rgba(30,86,180,.55) 0%, rgba(10,31,68,0) 62%),
    linear-gradient(165deg, var(--omni-panel-navy-2) 0%, var(--omni-panel-navy) 58%, #071734 100%)!important;
  background-repeat:repeat, no-repeat, no-repeat!important;
  background-size:170px 170px, 100% 100%, 100% 100%!important;
  background-position:center center, center center, center center!important;
  border-color:var(--omni-panel-line)!important;
}

html body[class] .peak-card--approved-home .peak-card__media,
html body[class] .wc-block-product .wc-block-components-product-image,
html body[class] .peak-cats .peak-cat__media{
  aspect-ratio:1/1!important;
  height:auto!important;
  min-height:0!important;
  padding:10px!important;
}
/* The category banner is wide, not square — it keeps its own ratio. */
html body[class] .peak-cats .peak-cat__media{aspect-ratio:16/10!important}
@media (min-width:781px){
  html body[class] .peak-cats__grid[data-count="1"] .peak-cat__media{
    aspect-ratio:auto!important;
  }
}

/* Bigger bottle in frame, shadow tuned for a dark ground. */
html body[class] .peak-card--approved-home .peak-card__img,
html body[class] .wc-block-product .wc-block-components-product-image img,
html body[class] .peak-cats .peak-cat__media img{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0 auto!important;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.5))!important;
}

/* Thin cobalt outline on the card shell. */
html body[class] .peak-card--approved-home,
html body[class] .wc-block-product,
html body[class] .peak-cats .peak-cat{border-color:rgba(37,99,235,.34)!important}
html body[class] .peak-card--approved-home:hover,
html body[class] .wc-block-product:hover,
html body[class] .peak-cats .peak-cat:hover{border-color:rgba(37,99,235,.70)!important}

/* =========================================================================
 * v4.6.0 — desktop finishing pass
 * ====================================================================== */

/* ---- product page: stop the image column stranding whitespace --------- */
@media (min-width:900px){
  html body[class] .wc-block-product-gallery-large-image{
    position:sticky;
    top:100px;
  }
}

/* ---- product page: the empty review form read as unfinished ----------
   There are zero reviews, and a research-use-only catalogue must never
   invite fabricated social proof. Hiding the default form is a display
   choice only — review capability itself is untouched in WooCommerce and
   can be switched back on from Settings at any time. */
html body.single-product #reviews,
html body.single-product .wp-block-woocommerce-product-reviews,
html body.single-product .woocommerce-Reviews{display:none!important}

/* ---- Best Sellers: close the hollow gap under the RUO chip ------------ */
html body[class] .peak-card--approved-home .peak-card__desc{min-height:0!important}
html body[class] .peak-card--approved-home .peak-card__body{gap:8px!important}

/* ---- Shop by Category: a real call to action, not a bare arrow -------- */
.peak-cat__go{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--peak-accent);font-weight:700;font-size:.9rem;
}
.peak-cat__go-label{display:none}
@media (min-width:781px){
  .peak-cats__grid[data-count="1"] .peak-cat__go{
    position:static;opacity:1;margin-top:18px;
    padding:11px 22px;border-radius:999px;
    background:var(--peak-accent);color:#fff;width:max-content;
  }
  .peak-cats__grid[data-count="1"] .peak-cat__go-label{display:inline}
  .peak-cats__grid[data-count="1"] .peak-cat:hover .peak-cat__go{background:#0F3FB0}
}

/* v4.6.3 — category section must break out exactly like its neighbours.
   MEASURED AT 1280: .peak-catalog / .peak-trust / .peak-faq each resolve to a
   fixed 1180px and pull 50px past the theme's container padding
   (margin-right:-50px). .peak-cats, capped only by max-width, collapsed to the
   1130px container instead — so its right edge sat 50px short of every other
   section. Matching the fixed width reproduces their behaviour at any
   viewport, and the viewport clamp keeps it safe on small screens. */
.entry-content > .peak-cats{
  box-sizing:border-box;
  width:1180px;
  max-width:calc(100vw - 40px);
}

/* v4.6.4 — cards must not overflow their grid row.
   MEASURED AT 390px: grid tracks resolved to 424.97px while each card
   rendered 463px, so every row overlapped the next by 26px — the second row
   of vials sat on top of the first row's Add to cart button.

   Cause is `height:100%` on the card. Against a content-sized (auto) grid
   track that is circular: the track cannot be sized from an item whose height
   is defined as a percentage of that same track, so the track resolves short
   and the content spills out with overflow visible.

   `align-items:stretch` on the grid already equalises card heights, and it
   does so the other way round — track first, then stretch — so heights stay
   identical without the circularity. */
html body[class] .peak-card--approved-home,
html body[class] .wc-block-product{
  height:auto!important;
  align-self:stretch!important;
}

/* v4.7.0 — related products row spacing on the product page. */
.peak-related{margin-top:clamp(36px,5vw,64px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--peak-line)}

/* v4.7.1 — the one-category banner must cap its vial.
   v4.5.1 set height:100% on every panel image to fill the square card panels.
   The banner variant deliberately drops aspect-ratio (it is 16:10-ish wide,
   sized by the body beside it), so "100% of an auto-height box" resolved to
   the image's natural size and the vial rendered many times too large,
   overflowing the section. Give the banner image an explicit ceiling. */
@media (min-width:781px){
  html body[class] .peak-cats__grid[data-count="1"] .peak-cat__media{
    align-items:center!important;
    padding:18px!important;
  }
  html body[class] .peak-cats__grid[data-count="1"] .peak-cat__media img{
    height:auto!important;
    width:auto!important;
    max-height:190px!important;
    max-width:100%!important;
  }
}

/* v4.7.2 — related row must not inherit the homepage break-out.
   MEASURED AT 1440 ON A PRODUCT PAGE: 510px of horizontal overflow. The row
   reuses .peak-catalog--approved-home for its card styling, and that class
   carries a fixed 1180px width plus margin-right:-50px so it can escape the
   homepage container. Inside the narrower single-product container that
   break-out has nothing to escape into, so it pushed the page sideways.
   Styling is shared; geometry is not. */
.peak-related{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* v4.7.3 — the related row is a plain full-width section.
   It no longer carries .peak-catalog, so it inherits no break-out geometry;
   only the card and grid classes are shared, which is what actually gives it
   the OMNI look. Padding matches the surrounding block container. */
html body[class] .peak-related{
  width:auto!important;
  max-width:1180px!important;
  margin:clamp(36px,5vw,64px) auto 0!important;
  padding:clamp(28px,4vw,44px) 20px 0!important;
  border-top:1px solid var(--peak-line);
  box-sizing:border-box;
}

/* =========================================================================
 * v4.8.0 — THE OMNI CARD
 *
 * Owner direction 6 Sep 2026, reference: white page, dark premium cards.
 * The page background stays white; the navy/molecular treatment lives INSIDE
 * each card, with the vial sitting directly on that field rather than in a
 * white image box.
 *
 * One component, four surfaces: Best Sellers, shop grid, category grids,
 * related products. `.omni-card--woo` is the same card wrapped around
 * WooCommerce's own Product Collection markup, so purchase wiring is untouched.
 *
 * Specificity: peak.css carries `body.peak-skin-* …` rules with !important at
 * (0,3,1) which have silently beaten plain class selectors twice this session.
 * Everything below is written at `html body[class] …` = (0,3,2).
 * ====================================================================== */

:root{
  --omni-card-bg-1:#12305F;
  --omni-card-bg-2:#0A1F44;
  --omni-card-bg-3:#071734;
  --omni-card-line:rgba(94,148,255,.34);
  --omni-card-line-hi:rgba(120,170,255,.68);
  --omni-cobalt:#1B5CE0;
  --omni-cobalt-hi:#2F6FF0;
  --omni-ink-soft:#B9CCEC;
}

/* ---- the card shell -------------------------------------------------- */
html body[class] .omni-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:auto;
  align-self:stretch;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--omni-card-line);
  border-radius:16px;
  background-color:var(--omni-card-bg-2);
  background-image:
    var(--omni-panel-mesh),
    radial-gradient(78% 52% at 50% 20%, rgba(46,112,220,.55) 0%, rgba(10,31,68,0) 72%),
    linear-gradient(168deg, var(--omni-card-bg-1) 0%, var(--omni-card-bg-2) 55%, var(--omni-card-bg-3) 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-size:170px 170px, 100% 100%, 100% 100%;
  box-shadow:0 10px 30px -18px rgba(7,23,52,.75);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html body[class] .omni-card:hover{
  border-color:var(--omni-card-line-hi);
  box-shadow:0 20px 44px -22px rgba(7,23,52,.9), 0 0 0 1px rgba(94,148,255,.16);
  transform:translateY(-2px);
}

/* ---- media: the vial sits ON the card, no inner panel ---------------- */
html body[class] .omni-card .omni-card__media,
html body[class] .omni-card--woo .wc-block-components-product-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  min-height:0!important;
  width:100%!important;
  margin:0!important;
  padding:10px 10px 0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
html body[class] .omni-card .omni-card__img,
html body[class] .omni-card--woo .wc-block-components-product-image img{
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0 auto!important;
  border-radius:0!important;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
}

/* ---- body ------------------------------------------------------------ */
html body[class] .omni-card .omni-card__body{
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1 1 auto;
  padding:10px 14px 12px;
  text-align:left;
}
html body[class] .omni-card .omni-card__title,
html body[class] .omni-card--woo .wp-block-post-title{
  margin:0!important;
  padding:0 14px!important;
  font-size:1.02rem!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  color:#fff!important;
  text-align:left!important;
}
html body[class] .omni-card .omni-card__title{padding:0!important}
html body[class] .omni-card .omni-card__title a,
html body[class] .omni-card--woo .wp-block-post-title a{
  color:#fff!important;text-decoration:none!important;
}
html body[class] .omni-card .omni-card__meta{
  margin:0;
  font-size:.76rem;
  line-height:1.3;
  color:var(--omni-ink-soft);
}

/* ---- strength chips -------------------------------------------------- */
html body[class] .omni-card .omni-card__chips{
  display:flex;flex-wrap:wrap;gap:5px;margin:1px 0 0;
}
html body[class] .omni-card .omni-chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 9px;
  border-radius:6px;
  font-size:.7rem;font-weight:600;line-height:1.4;
  color:var(--omni-ink-soft);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(148,184,255,.22);
}
html body[class] .omni-card .omni-chip.is-active{
  color:#fff;
  background:var(--omni-cobalt);
  border-color:var(--omni-cobalt-hi);
}

/* ---- price + CTA (peak-buy lives inside the card) -------------------- */
html body[class] .omni-card .peak-buy{
  display:flex;flex-direction:column;gap:8px;
  margin-top:auto;padding:0;background:transparent;border:0;
}
html body[class] .omni-card .peak-buy__price,
html body[class] .omni-card--woo .wc-block-components-product-price{
  margin:2px 0 0!important;
  padding:0 14px!important;
  font-size:1.3rem!important;
  font-weight:800!important;
  line-height:1.15!important;
  color:#fff!important;
  text-align:left!important;
}
html body[class] .omni-card .peak-buy__price{padding:0!important}
html body[class] .omni-card .peak-buy__price .amount,
html body[class] .omni-card .peak-buy__price bdi,
html body[class] .omni-card--woo .wc-block-components-product-price .amount,
html body[class] .omni-card--woo .wc-block-components-product-price bdi{color:#fff!important}
html body[class] .omni-card .peak-buy__from{
  font-size:.72rem;font-weight:600;color:var(--omni-ink-soft);margin-right:3px;
}
html body[class] .omni-card .peak-buy__cta{
  display:flex!important;align-items:center;justify-content:center;gap:7px;
  box-sizing:border-box;
  width:100%!important;
  padding:.62rem .6rem!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--omni-cobalt)!important;
  color:#fff!important;
  font-size:.86rem!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:0 8px 18px -10px rgba(27,92,224,.9);
}
html body[class] .omni-card .peak-buy__cta:hover{background:var(--omni-cobalt-hi)!important}
html body[class] .omni-card .peak-buy__cta.is-disabled{
  background:rgba(255,255,255,.12)!important;color:var(--omni-ink-soft)!important;box-shadow:none;
}
/* the old oversized pill is gone */
html body[class] .omni-card .peak-card__ruo,
html body[class] .peak-card--approved-home .peak-card__ruo{display:none!important}

/* ---- compact status row --------------------------------------------- */
html body[class] .omni-card .omni-card__status{
  display:flex;flex-wrap:wrap;gap:4px 12px;
  list-style:none;
  margin:9px 0 0;
  padding:8px 0 0;
  border-top:1px solid rgba(148,184,255,.16);
}
html body[class] .omni-card--woo .omni-card__status{margin:9px 14px 12px;padding-top:8px}
html body[class] .omni-card .omni-card__stat{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.63rem;line-height:1.3;letter-spacing:.01em;
  color:var(--omni-ink-soft);
}
html body[class] .omni-card .omni-card__stat-ico{display:inline-flex;color:#7FB0FF}

/* ---- Woo card: strip its default chrome so it reads as one card ------ */
html body[class] .omni-card--woo{padding:0!important;gap:0!important}
html body[class] .omni-card--woo .wp-block-group{background:transparent!important;padding:0!important;margin:0!important}
html body[class] .omni-card--woo .wc-block-grid__product-onsale,
html body[class] .omni-card--woo .wc-block-components-product-price__regular{display:none!important}
html body[class] .omni-card--woo .peak-buy{padding:0 14px 0!important;margin-top:auto!important}

/* ---- section header: eyebrow + trust row ----------------------------- */
html body[class] .peak-sechead--omni{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
html body[class] .peak-sechead__eyebrow{
  margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--peak-accent);
}
html body[class] .peak-sechead__trust{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;
}
html body[class] .peak-sechead__trust li{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.72rem;line-height:1.25;text-align:center;color:var(--peak-ink-2);
}
html body[class] .peak-sechead__trust-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:#EFF5FF;color:var(--peak-accent);
}

/* ---- View All Products ---------------------------------------------- */
html body[class] .peak-catalog__all{margin:22px 0 0;text-align:center}
html body[class] .peak-catalog__all-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;border-radius:999px;
  border:1px solid var(--peak-line);
  font-size:.88rem;font-weight:700;color:var(--peak-accent);text-decoration:none;
}
html body[class] .peak-catalog__all-link:hover{
  border-color:var(--peak-accent);background:#F4F8FF;
}

/* ---- compact mobile: static 2-up, no movement ------------------------ */
@media (max-width:600px){
  html body[class] .peak-grid--approved-home,
  html body[class] .wc-block-product-template{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  html body[class] .omni-card .omni-card__body{padding:8px 10px 10px;gap:6px}
  html body[class] .omni-card .omni-card__title,
  html body[class] .omni-card--woo .wp-block-post-title{font-size:.92rem!important;padding-inline:10px!important}
  html body[class] .omni-card .omni-card__title{padding-inline:0!important}
  html body[class] .omni-card .omni-card__meta{font-size:.7rem}
  html body[class] .omni-card .peak-buy__price,
  html body[class] .omni-card--woo .wc-block-components-product-price{font-size:1.08rem!important;padding-inline:10px!important}
  html body[class] .omni-card .peak-buy__price{padding-inline:0!important}
  html body[class] .omni-card .peak-buy__cta{font-size:.8rem!important;padding:.55rem .4rem!important}
  html body[class] .omni-card .omni-chip{font-size:.66rem;padding:2px 7px}
  html body[class] .omni-card .omni-card__stat{font-size:.58rem}
  html body[class] .omni-card--woo .peak-buy{padding-inline:10px!important}
  html body[class] .omni-card--woo .omni-card__status{margin-inline:10px}
  html body[class] .peak-sechead--omni{align-items:flex-start}
  html body[class] .peak-sechead__trust{gap:18px}
}

/* Nothing on this page animates or scrolls horizontally by itself. */
html body[class] .peak-grid--approved-home,
html body[class] .wc-block-product-template{
  overflow:visible!important;
  scroll-snap-type:none!important;
  animation:none!important;
}

/* v4.8.1 — one price per product, everywhere.
   Woo's price block on a variable product renders a RANGE. The OMNI card shows
   the real base price of the default 1-vial variation. Showing both, on two
   pages of the same store, is a trust problem. Hide Woo's range on the card;
   the injected .peak-buy__price is the single source of truth. */
html body[class] .omni-card--woo .wc-block-components-product-price{display:none!important}
html body[class] .omni-card--woo .omni-card__meta,
html body[class] .omni-card--woo .omni-card__chips{padding:0 14px!important;margin:0!important}
html body[class] .omni-card--woo .omni-card__chips{margin-top:6px!important}
html body[class] .omni-card--woo .peak-buy__price{
  display:block!important;padding:0 14px!important;margin:8px 0 0!important;
  font-size:1.3rem!important;font-weight:800!important;color:#fff!important;text-align:left!important;
}
@media (max-width:600px){
  html body[class] .omni-card--woo .omni-card__meta,
  html body[class] .omni-card--woo .omni-card__chips,
  html body[class] .omni-card--woo .peak-buy__price{padding-inline:10px!important}
  html body[class] .omni-card--woo .peak-buy__price{font-size:1.08rem!important}
}

/* =========================================================================
 * v4.8.2 — PRODUCT PAGE PURCHASE COLUMN
 *
 * MEASURED ON LIVE v4.8.1 at 390px: the chips rendered black (rgb(30,30,30))
 * with a 2px radius and Add to cart was a black square — stock WooCommerce.
 * The page stays predominantly white per the reference; only the controls
 * adopt the OMNI cobalt system so the page reads as one design.
 * ====================================================================== */

/* ---- variation chips: strength + bundle ------------------------------ */
html body.single-product .wc-block-product-filter-chips__item{
  padding:8px 14px!important;
  min-height:38px!important;
  border-radius:9px!important;
  border:1px solid var(--peak-line)!important;
  background:#fff!important;
  color:var(--peak-ink)!important;
  font-size:.86rem!important;
  font-weight:600!important;
  line-height:1.2!important;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
html body.single-product .wc-block-product-filter-chips__item:hover{
  border-color:var(--omni-cobalt)!important;
  background:#F4F8FF!important;
}
html body.single-product .wc-block-product-filter-chips__item[aria-checked="true"]{
  background:var(--omni-cobalt)!important;
  border-color:var(--omni-cobalt)!important;
  color:#fff!important;
  box-shadow:0 8px 18px -12px rgba(27,92,224,.9);
}
html body.single-product .wc-block-product-filter-chips{gap:8px!important}
html body.single-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name{
  display:block;margin-bottom:8px;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--peak-ink-2);
}

/* ---- quantity -------------------------------------------------------- */
html body.single-product .wc-block-components-quantity-selector{
  border:1px solid var(--peak-line)!important;
  border-radius:9px!important;
  overflow:hidden;
  background:#fff!important;
}

/* ---- Add to cart + Buy now ------------------------------------------ */
html body.single-product .wc-block-components-product-button button,
html body.single-product button.single_add_to_cart_button{
  border-radius:10px!important;
  background:var(--omni-cobalt)!important;
  border:1px solid var(--omni-cobalt)!important;
  color:#fff!important;
  font-weight:700!important;
  padding:.78rem 1.4rem!important;
  box-shadow:0 10px 22px -12px rgba(27,92,224,.95);
}
html body.single-product .wc-block-components-product-button button:hover{
  background:var(--omni-cobalt-hi)!important;border-color:var(--omni-cobalt-hi)!important;
}
html body.single-product .omni-buynow{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:10px;
  padding:.78rem 1.4rem;
  border-radius:10px;
  border:1px solid var(--omni-cobalt);
  background:#fff;
  color:var(--omni-cobalt);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
}
html body.single-product .omni-buynow:hover{background:#F4F8FF}

/* ---- status row beneath the buttons --------------------------------- */
html body.single-product .omni-pdp-status{margin-top:16px}
html body.single-product .omni-pdp-status .omni-card__status{
  display:flex;flex-wrap:wrap;gap:6px 20px;
  list-style:none;margin:0;padding:12px 0 0;
  border-top:1px solid var(--peak-line);
}
html body.single-product .omni-pdp-status .omni-card__stat{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;color:var(--peak-ink-2);
}
html body.single-product .omni-pdp-status .omni-card__stat-ico{display:inline-flex;color:var(--omni-cobalt)}

/* ---- details / COA accordions --------------------------------------- */
html body.single-product .wp-block-woocommerce-product-details details,
html body.single-product .wc-block-product-details details{
  border:1px solid var(--peak-line)!important;
  border-radius:12px!important;
  margin-bottom:10px!important;
  padding:2px 16px!important;
  background:#fff!important;
}
html body.single-product .wp-block-woocommerce-product-details summary,
html body.single-product .wc-block-product-details summary{
  padding:14px 0!important;
  font-weight:700!important;
  color:var(--peak-ink)!important;
  cursor:pointer;
}

@media (max-width:600px){
  html body.single-product .omni-buynow{
    margin:10px 0 0;width:100%;
  }
  html body.single-product .wc-block-components-product-button button{width:100%!important}
  html body.single-product .wc-block-product-filter-chips__item{
    padding:7px 12px!important;min-height:36px!important;font-size:.82rem!important;
  }
}

/* =========================================================================
 * v4.9.0 — WHITE / CLEAN PRODUCT CARD  (supersedes the v4.8 dark chamber)
 *
 * Owner direction 6 Sep 2026: keep the white site, but the product image area
 * is light rather than a dark chamber. Everything else about the card system
 * stands — one component, four surfaces, cobalt accents, truthful status row.
 *
 * These rules come after the v4.8 block and use the same html body[class]
 * weight, so they win on source order without another specificity escalation.
 * ====================================================================== */

:root{
  --omni-media-1:#FFFFFF;
  --omni-media-2:#F4F8FF;
  --omni-card-edge:rgba(27,92,224,.20);
  --omni-card-edge-hi:rgba(27,92,224,.46);
}

/* ---- card shell: white, subtle blue outline -------------------------- */
html body[class] .omni-card{
  background-color:#fff!important;
  background-image:none!important;
  border:1px solid var(--omni-card-edge)!important;
  border-radius:16px!important;
  box-shadow:0 6px 20px -14px rgba(10,31,68,.30)!important;
  /* No transform anywhere: a lifted card changes its own top edge. */
  transform:none!important;
}
html body[class] .omni-card:hover{
  transform:none!important;
  box-shadow:0 6px 20px -14px rgba(10,31,68,.30)!important;
  border-color:var(--omni-card-edge)!important;
}
/* Only a real pointer gets the hover accent — never a touch screen. */
@media (hover:hover) and (pointer:fine){
  html body[class] .omni-card:hover{
    border-color:var(--omni-card-edge-hi)!important;
    box-shadow:0 14px 30px -18px rgba(10,31,68,.42)!important;
  }
}

/* ---- image area: light, fixed box, perfectly centred ----------------- */
html body[class] .omni-card .omni-card__media,
html body[class] .omni-card--woo .wc-block-components-product-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:1/1!important;   /* box reserved before the image arrives */
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  width:100%!important;
  margin:0!important;
  padding:14px!important;       /* identical on every card */
  background:linear-gradient(180deg, var(--omni-media-1) 0%, var(--omni-media-2) 100%)!important;
  border:0!important;
  border-bottom:1px solid rgba(27,92,224,.12)!important;
  border-radius:0!important;
  overflow:hidden!important;
  position:relative!important;  /* never absolute: that is what floats a card */
  transform:none!important;
}
html body[class] .omni-card .omni-card__img,
html body[class] .omni-card--woo .wc-block-components-product-image img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  padding:0!important;
  border-radius:0!important;
  filter:none!important;        /* the dark-ground drop shadow is wrong on white */
  transform:none!important;
  transition:none!important;
}

/* ---- body text back to OMNI ink on white ---------------------------- */
html body[class] .omni-card .omni-card__title,
html body[class] .omni-card--woo .wp-block-post-title,
html body[class] .omni-card .omni-card__title a,
html body[class] .omni-card--woo .wp-block-post-title a{color:var(--peak-ink)!important}
html body[class] .omni-card .omni-card__meta{color:var(--peak-ink-2)!important}
html body[class] .omni-card .peak-buy__price,
html body[class] .omni-card--woo .peak-buy__price,
html body[class] .omni-card .peak-buy__price .amount,
html body[class] .omni-card .peak-buy__price bdi{color:var(--peak-ink)!important}
html body[class] .omni-card .peak-buy__from{color:var(--peak-ink-2)!important}

html body[class] .omni-card .omni-chip{
  color:var(--peak-accent)!important;
  background:#EFF5FF!important;
  border-color:rgba(27,92,224,.24)!important;
}
html body[class] .omni-card .omni-chip.is-active{
  color:#fff!important;
  background:var(--omni-cobalt)!important;
  border-color:var(--omni-cobalt)!important;
}

html body[class] .omni-card .omni-card__status{
  border-top:1px solid var(--peak-line)!important;
}
html body[class] .omni-card .omni-card__stat{color:var(--peak-ink-2)!important}
html body[class] .omni-card .omni-card__stat-ico{color:var(--peak-accent)!important}

/* ---- alignment guarantees ------------------------------------------- */
html body[class] .peak-grid--approved-home,
html body[class] .wc-block-product-template{
  align-items:stretch!important;   /* equal tops AND bottoms per row */
}
html body[class] .omni-card{
  align-self:stretch!important;
  height:auto!important;
  margin:0!important;
  position:relative!important;
  animation:none!important;
  transition:box-shadow .18s ease, border-color .18s ease!important;
}
/* A one-line vs two-line name must not shift the row below it. */
html body[class] .omni-card .omni-card__title{min-height:2.5em}
html body[class] .omni-card .omni-card__meta{min-height:2.4em}

/* ---- product page: white image chamber ------------------------------ */
html body[class] .wc-block-product-gallery-large-image,
html body[class] .wp-block-woocommerce-product-image-gallery{
  background-color:#fff!important;
  background-image:linear-gradient(180deg, var(--omni-media-1) 0%, var(--omni-media-2) 100%)!important;
  border:1px solid var(--omni-card-edge)!important;
  border-radius:18px!important;
}
html body[class] .wc-block-product-gallery-large-image img,
html body[class] .wp-block-woocommerce-product-image-gallery img{
  object-fit:contain!important;
  object-position:center center!important;
  filter:none!important;
  margin:0 auto!important;
}

@media (max-width:600px){
  html body[class] .omni-card .omni-card__media,
  html body[class] .omni-card--woo .wc-block-components-product-image{padding:10px!important}
  html body[class] .omni-card .omni-card__title{min-height:2.4em}
  html body[class] .omni-card .omni-card__meta{min-height:2.6em}
}

/* =========================================================================
 * v4.9.1 — vial baseline must be identical in EVERY engine
 *
 * Chrome emulation measured all four cards identical, yet CJC-1295 sat higher
 * on a real iPhone. That gap is the tell: the previous rule sized the image
 * with `width:auto; height:100%` inside an aspect-ratio flex box, and Safari
 * resolves that combination differently from Blink — an auto-width replaced
 * element against a percentage height is exactly where the engines disagree.
 *
 * The fix removes the ambiguity instead of chasing it: the image fills the
 * ratio box on BOTH axes and `object-fit:contain` letterboxes it inside.
 * Every vial then shares one media box, one centre and one baseline no matter
 * what its intrinsic canvas or transparent padding happens to be — which also
 * neutralises uneven whitespace inside the artwork without re-cropping it.
 * ====================================================================== */

html body[class] .omni-card .omni-card__media,
html body[class] .omni-card--woo .wc-block-components-product-image{
  position:relative!important;
  display:block!important;      /* a block ratio box beats flex centring here */
  aspect-ratio:1/1!important;
  height:auto!important;
  width:100%!important;
  padding:14px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html body[class] .omni-card .omni-card__img,
html body[class] .omni-card--woo .wc-block-components-product-image img{
  display:block!important;
  width:100%!important;         /* both axes stated: no engine-specific guess */
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
@media (max-width:600px){
  html body[class] .omni-card .omni-card__media,
  html body[class] .omni-card--woo .wc-block-components-product-image{padding:10px!important}
}

/* =========================================================================
 * v4.9.2 — cart + checkout line-item imagery
 *
 * The cart thumbnail was inheriting whatever size the theme handed it, so the
 * vial rendered inconsistently between cart and checkout and between breakpoints.
 * Same treatment as the product card: a fixed square box, light ground,
 * object-fit:contain, centred — so the bottle is proportional everywhere.
 * ====================================================================== */

html body[class] .wc-block-cart-item__image,
html body[class] .wc-block-components-order-summary-item__image{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  padding:0!important;
}
html body[class] .wc-block-cart-item__image img,
html body[class] .wc-block-components-order-summary-item__image img{
  display:block!important;
  width:72px!important;
  height:72px!important;
  max-width:72px!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:6px!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#FFFFFF 0%, #F4F8FF 100%)!important;
  border:1px solid rgba(27,92,224,.18)!important;
  border-radius:10px!important;
  margin:0!important;
}
@media (max-width:600px){
  html body[class] .wc-block-cart-item__image,
  html body[class] .wc-block-components-order-summary-item__image{
    width:60px!important;min-width:60px!important;max-width:60px!important;
  }
  html body[class] .wc-block-cart-item__image img,
  html body[class] .wc-block-components-order-summary-item__image img{
    width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important;
  }
}
/* Cart table must never push the page sideways. */
html body[class] .wc-block-cart,
html body[class] .wp-block-woocommerce-cart{max-width:100%!important;overflow-x:visible!important}
html body[class] .wc-block-cart-items{width:100%!important}

/* =========================================================================
 * v4.10.0 — bundle tiers + honest sale presentation
 * ====================================================================== */

/* ---- bundle tier tiles ---------------------------------------------- */
html body.single-product .wc-block-product-filter-chips__item.omni-tier{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  min-width:112px!important;
  padding:10px 14px!important;
  min-height:auto!important;
  text-align:left!important;
  line-height:1.25!important;
}
html body.single-product .omni-tier__qty{
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;
}
html body.single-product .omni-tier__save{
  display:inline-block;
  padding:1px 7px;
  border-radius:5px;
  background:#0F9D58;
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.05em;
}
html body.single-product .omni-tier__price{
  font-size:.92rem;font-weight:700;
}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[aria-checked="true"] .omni-tier__save{
  background:#fff;color:#0F9D58;
}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[aria-checked="true"] .omni-tier__price,
html body.single-product .wc-block-product-filter-chips__item.omni-tier[aria-checked="true"] .omni-tier__qty{
  color:#fff!important;
}

/* ---- the bundle IS the purchase unit -------------------------------- */
/* A generic "Quantity: 1" beside a 3-vial choice reads as if the choice
   reverted. The tier already states how many vials are being bought. */
html body.omni-bundle-product .wc-block-components-quantity-selector{display:none!important}

/* ---- honest sale presentation ---------------------------------------
   Renders ONLY when WooCommerce actually holds a sale price. No product is
   on sale today, so nothing shows — which is the correct outcome. */
html body[class] .omni-card del,
html body[class] .wc-block-components-product-price del,
html body.single-product .wc-block-components-product-price del{
  opacity:.55;font-weight:600;margin-right:6px;
}
html body[class] .omni-card ins,
html body[class] .wc-block-components-product-price ins,
html body.single-product .wc-block-components-product-price ins{
  text-decoration:none;font-weight:800;
}
.omni-save-badge{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px;
  background:#0F9D58;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.05em;
  vertical-align:middle;
}

@media (max-width:600px){
  html body.single-product .wc-block-product-filter-chips__item.omni-tier{
    min-width:calc(50% - 6px)!important;padding:9px 12px!important;
  }
}

/* v4.10.1 — tier figures rendered as pseudo-elements.
   Child nodes injected into these chips are removed by WooCommerce's
   Interactivity runtime (verified live on v4.10.0). Pseudo-elements are not
   children, so they survive; flex order puts them in the intended sequence:
   label, savings badge, price. */
html body.single-product .wc-block-product-filter-chips__item.omni-tier > *{order:1}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[data-omni-save]::before{
  content:attr(data-omni-save);
  order:2;
  display:inline-block;
  padding:1px 7px;border-radius:5px;
  background:#0F9D58;color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.05em;
}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[data-omni-price]::after{
  content:attr(data-omni-price);
  order:3;
  font-size:.92rem;font-weight:700;
}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[aria-checked="true"]::before{
  background:#fff;color:#0F9D58;
}
html body.single-product .wc-block-product-filter-chips__item.omni-tier[aria-checked="true"]::after{
  color:#fff;
}

/* v4.10.3 — clip the announcement ticker at every width.
   MEASURED LIVE AT 768px: 21px of horizontal page overflow. The offender was
   .peak-rail__track, which is deliberately wider than the viewport (1338px)
   because it scrolls — but its container was only clipping at the widths that
   happened to be covered by existing media queries. A ticker must clip
   unconditionally, otherwise it drags the whole page sideways. */
html body[class] .peak-rail,
html body[class] .peak-rail__viewport,
html body[class] .peak-rail__mask{
  overflow:hidden!important;
  max-width:100%!important;
}
html body[class] .peak-rail__track{
  will-change:transform;
}
/* Nothing in the document may exceed the viewport horizontally. */
html body[class]{overflow-x:hidden!important}

/* v4.10.4 — the section break-out must never exceed the viewport.
   MEASURED LIVE AT 768px: 21px overflow, traced to .peak-catalog. These
   sections deliberately break out to a fixed 1180px and pull past the theme's
   container padding, which is correct at 1280/1440 where the viewport is wider
   than the break-out. At 768 the break-out was simply wider than the screen.
   Cap the width at the viewport and drop the negative pull once it no longer
   has room; 1280 and 1440 are unaffected because min() still yields 1180. */
html body[class] .peak-catalog,
html body[class] .peak-trust,
html body[class] .peak-faq,
html body[class] .entry-content > .peak-cats{
  max-width:min(1180px, calc(100vw - 24px))!important;
}
@media (max-width:1239px){
  html body[class] .peak-catalog,
  html body[class] .peak-trust,
  html body[class] .peak-faq{
    margin-right:0!important;
    margin-left:auto!important;
    margin-inline:auto!important;
  }
}

/* v4.10.5 — neutralise the negative break-out margin below the break-out width.
   MEASURED AT 768: max-width capped correctly at 744px, but a higher-specificity
   rule still applied margin-right:-79px, pushing the right edge to 790 in a 768
   viewport. Raising specificity with the element type + modifier class so the
   pull is genuinely removed once there is no room for it. */
@media (max-width:1239px){
  html body[class] section.peak-catalog,
  html body[class] section.peak-catalog--approved-home,
  html body[class] section.peak-trust,
  html body[class] section.peak-faq,
  html body[class] section.peak-cats,
  html body[class] .peak-catalog--approved-home,
  html body[class] .peak-trust,
  html body[class] .peak-faq{
    margin-right:auto!important;
    margin-left:auto!important;
    width:auto!important;
  }
}

/* =========================================================================
 * v4.11.0 — cart / checkout line-item imagery to spec
 *
 * The vial was being cropped in the SOURCE FILE (80x80 square rendition of a
 * 558x1100 portrait). cart-images.php now serves an uncropped rendition; these
 * rules give it a square container and let object-fit letterbox it, so the cap
 * and the base are both inside the box at every breakpoint.
 *
 * Desktop cart 80px · desktop checkout 72px · mobile 56px — inside the
 * 76-88 / 64-80 / 52-64 targets.
 * ====================================================================== */

html body[class] .wc-block-cart-item__image,
html body[class] .wc-block-components-order-summary-item__image{
  width:80px!important;
  min-width:80px!important;
  max-width:80px!important;
  height:80px!important;
  padding:0!important;
  overflow:visible!important;      /* never clip the letterboxed image */
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body[class] .wc-block-components-order-summary-item__image{
  width:72px!important;min-width:72px!important;max-width:72px!important;height:72px!important;
}
html body[class] .wc-block-cart-item__image img,
html body[class] .wc-block-components-order-summary-item__image img,
html body[class] img.omni-cart-thumb{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:4px!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#FFFFFF 0%, #F4F8FF 100%)!important;
  border:1px solid rgba(27,92,224,.18)!important;
  border-radius:10px!important;
  margin:0!important;
  aspect-ratio:auto!important;
}
/* Woo sometimes wraps the summary image in a badge container that clips. */
html body[class] .wc-block-components-order-summary-item__image > *{overflow:visible!important}

@media (max-width:600px){
  html body[class] .wc-block-cart-item__image{
    width:60px!important;min-width:60px!important;max-width:60px!important;height:60px!important;
  }
  html body[class] .wc-block-components-order-summary-item__image{
    width:56px!important;min-width:56px!important;max-width:56px!important;height:56px!important;
  }
}

/* v4.11.4 — square the line-item thumbnail now that the source is uncropped.
   With the crop removed the image is genuinely portrait (106x210), so an
   unconstrained height made it 109px tall inside a 60px box. Fixing explicit
   square dimensions on the IMG itself — highest specificity, last in the
   cascade — lets object-fit:contain letterbox the whole vial inside the box:
   cap and base both visible, nothing cropped, nothing stretched. */
html body[class] .wc-block-cart-item__image,
html body[class] .wc-block-cart-item__image img,
html body[class] .wc-block-components-order-summary-item__image,
html body[class] .wc-block-components-order-summary-item__image img{
  width:80px!important;
  height:80px!important;
  min-width:80px!important;
  max-width:80px!important;
  min-height:80px!important;
  max-height:80px!important;
  object-fit:contain!important;
  object-position:center center!important;
  flex:0 0 80px!important;
}
html body[class] .wc-block-components-order-summary-item__image,
html body[class] .wc-block-components-order-summary-item__image img{
  width:72px!important;height:72px!important;min-width:72px!important;max-width:72px!important;
  min-height:72px!important;max-height:72px!important;flex:0 0 72px!important;
}
@media (max-width:600px){
  html body[class] .wc-block-cart-item__image,
  html body[class] .wc-block-cart-item__image img{
    width:60px!important;height:60px!important;min-width:60px!important;max-width:60px!important;
    min-height:60px!important;max-height:60px!important;flex:0 0 60px!important;
  }
  html body[class] .wc-block-components-order-summary-item__image,
  html body[class] .wc-block-components-order-summary-item__image img{
    width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;
    min-height:56px!important;max-height:56px!important;flex:0 0 56px!important;
  }
}

/* v4.11.9 — free-shipping progress message above the cart.
   Sits outside the cart block so WooCommerce's Interactivity runtime cannot
   reconcile it away, which is what happened to the bundle chips in 4.10.0. */
html body[class] .omni-freeship {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid #d7e3f4;
  border-radius: 10px;
  background: #f4f8ff;
  color: #12335c;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
html body[class] .omni-freeship.is-unlocked {
  border-color: #cbe8d4;
  background: #f1faf4;
  color: #135c33;
}
@media (max-width: 782px) {
  html body[class] .omni-freeship { font-size: 14px; padding: 10px 12px; margin-bottom: 14px; }
}

/* v4.11.10 — hero vial lineup: CJC-1295 floated above the other three on mobile.
   REPORTED: repeatedly, from a real iPhone, on the homepage.

   Root cause (measured live, not guessed): .omni-vial-stage is
   `display:flex; align-items:flex-end`, so every unit is pinned to a shared
   shelf line at its BOTTOM. At <=820px each unit is only 66px wide, and
   "CJC-1295" is the one product name long enough to wrap onto a second line.
   That made its unit 209.5px tall against 186.9px for the other three, and
   because the row is bottom-aligned the extra 22.6px grew UPWARD — lifting the
   vial 22px off the line while its box measurements stayed identical to the
   rest. Every DOM check agreed the cards were equal, which is why earlier
   passes kept reporting this as fixed: the Best Sellers grid was fine, and this
   is a different component.

   Fix: the caption must never be able to change the unit's height.
   Measured after: image tops 427/427/427/427, spread 0.0px, unit heights all
   184.7px (was 399/401/406/384, spread 22px).

   nowrap is applied at every width, not just mobile, so a future product with a
   longer name cannot reintroduce this. */
html body[class] .omni-vial-unit .omni-vial-cap__name {
  white-space: nowrap;
}
html body[class] .omni-vial-unit {
  justify-content: flex-start;
}
@media (max-width: 820px) {
  /* 66px columns: shrink just enough that the longest current name
     ("CJC-1295", 59.7px at this size) fits without wrapping. */
  html body[class] .omni-vial-unit .omni-vial-cap__name {
    font-size: .78rem;
    letter-spacing: -0.01em;
  }
}

/* v4.11.11 — hero vial lineup: centre it, and stop the mobile float from
   re-creating the "one vial sits higher" problem.

   (1) OFF-CENTRE ON MOBILE.
   .omni-hero-media carries aspect-ratio:1.18/1 with height:280px, so its width
   resolves to a definite 330.4px inside a 394px grid cell. A grid item with a
   definite width aligns to the START of its cell, so the whole lineup sat 31.8px
   left of centre — 24px of air on the left against 88px on the right, while the
   buttons above it were centred. Measured after: offset 0.0px, 56px either side.

   (2) THE FLOAT WAS STILL BREAKING ALIGNMENT.
   Fixing the caption wrap in 4.11.10 removed the constant 22px offset, but
   omni-vial-individual-float-mobile-v308 runs on mobile with per-child
   animation-delay (-0.85s/-1.70s/-2.55s). Staggered phases mean the four vials
   are almost never level: sampled spread wandered between 4.9px and 8.0px.
   Synchronising the delays keeps the floating motion the owner asked to keep,
   but the group now rises and falls as one unit — sampled spread 0.0px, every
   time. Desktop keeps its stagger; that layout is approved and unaffected. */
@media (max-width: 820px) {
  /* Mobile only. Applying this at every width moved the DESKTOP hero media
     104px to the right (its 2-column grid cell is much wider than the media),
     which is a change nobody asked for. Desktop layout stays exactly as approved. */
  html body[class] .omni-hero-media {
    justify-self: center;
    margin-inline: auto;
  }
}
@media (max-width: 820px) {
  html body[class].peak-skin-clinical .omni-vial-unit img,
  html body[class].peak-skin-clinical .omni-vial-unit:nth-child(2) img,
  html body[class].peak-skin-clinical .omni-vial-unit:nth-child(3) img,
  html body[class].peak-skin-clinical .omni-vial-unit:nth-child(4) img {
    animation-delay: 0s !important;
  }
}

/* v4.11.13 — mobile home page: centre the two blocks that were still left-aligned.
   MEASURED at 430px, against a page whose hero, headings, trust chips, vial
   lineup and product grid are all centred:

     .peak-sechead__trust   justify-content:normal -> sat 106.3px left of centre
                            (48px of air on the left, 261px on the right)
     .omni-hero-assurance   full-width block, text starting hard at x=18

   The tick list keeps its rows LEFT-aligned internally so the tick icons stay in
   one column and the text keeps a clean left edge — only the block itself is
   centred. Centring the text of an icon list gives it a ragged edge and reads as
   worse, not better.

   Mobile only: on desktop the section trust row is deliberately right-aligned in
   the section header, which is the approved layout. */
@media (max-width: 820px) {
  html body[class] .omni-hero-assurance {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  html body[class] .peak-sechead__trust {
    justify-content: center;
    width: 100%;
  }
}

/* v4.11.14 — PDP cart controls, PDP shipping hint, checkout "Edit cart".
   The PDP was a one-way door: with the exact variation already in the cart it
   still offered only "Add to cart", with no way to change quantity, remove it,
   or reach the cart. These controls sit OUTSIDE the add-to-cart block so the
   Interactivity runtime cannot reconcile them away — the body class decides
   which set is visible rather than any node inside the block being rewritten. */
html body[class] .omni-cartctl { margin: 14px 0 0; }
html body[class] .omni-cartctl__row { display: none; gap: 10px; flex-wrap: wrap; }
html body[class].omni-variation-in-cart .omni-cartctl__row { display: flex; }

/* In-cart state: Woo's own Add-to-cart is redundant and misleading, because a
   second press would look like it should add a duplicate line. */
html body[class].omni-variation-in-cart .wc-block-components-product-button { display: none; }

html body[class] .omni-cartctl__btn {
  /* The theme leaves anchors as content-box, so "View cart" rendered 72px tall
     against the buttons' 48px (48 min-height + 22 padding + 2 border). */
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--peak-accent, #1e45c8);
  background: var(--peak-accent, #1e45c8);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .15s ease;
}
html body[class] .omni-cartctl__btn:hover { filter: brightness(1.06); }
html body[class] .omni-cartctl__btn:focus-visible { outline: 3px solid rgba(30,69,200,.35); outline-offset: 2px; }
html body[class] .omni-cartctl__remove,
html body[class] .omni-cartctl__view {
  background: transparent;
  color: var(--peak-accent, #1e45c8);
  flex: 0 1 auto;
}
html body[class] .omni-cartctl__remove { border-color: #d8e2f2; color: #5B6B8C; }
html body[class] .omni-cartctl.is-working { opacity: .55; pointer-events: none; }
html body[class] .omni-cartctl__state {
  margin: 8px 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--peak-ink, #0f1d38);
}
html body[class] .omni-cartctl__state:empty { display: none; }

html body[class] .omni-pdp-ship {
  margin: 8px 0 0;
  font-size: .88rem;
  color: #5B6B8C;
}
html body[class] .omni-pdp-ship.is-unlocked { color: #135c33; font-weight: 600; }

html body[class] .omni-editcart {
  display: inline-block;
  margin: 12px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--peak-accent, #1e45c8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  /* Full-width stacked controls: thumb-reachable, and nothing lands under the
     browser chrome the way a right-floated control would. */
  html body[class] .omni-cartctl__row { gap: 8px; }
  html body[class] .omni-cartctl__btn { flex: 1 1 100%; min-height: 48px; }
}

/* v4.11.19 — retire the raw WooCommerce specifications table on the PDP.
   It rendered "Attributes | Value / Strength 10 mg / Bundle 1 vial, 3 vials,
   5 vials, 10 vials" directly beneath the OMNI strength and bundle chips, which
   already present exactly that information as the actual purchase control. Two
   copies of the same facts, one of them not interactive, reads as unfinished.
   Hidden rather than unregistered so the data stays in the block for any theme
   or export that reads it. */
html body[class].single-product .wp-block-woocommerce-product-specifications { display: none; }

/* "Keep shopping" — the cart offered Checkout as its only exit. */
html body[class] .omni-keepshopping {
  display: inline-block;
  margin: 14px 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--peak-accent, #1e45c8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v4.11.20 — bring back the quantity stepper on the product page.
   4.10.0 hid it (rule at line ~2425) on the reasoning that a generic
   "Quantity: 1" beside a bundle selector read as a contradiction. That was
   right about the LABEL and wrong about the CONTROL: with it hidden, a customer
   whose variation was already in the cart saw "Update cart" with no way to say
   how many. The control returns, labelled for what it actually counts. */
html body.omni-bundle-product .wc-block-components-quantity-selector { display: flex !important; }
html body[class] .omni-qty-label {
  display: block;
  margin: 16px 0 6px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--peak-ink-2, #5B6B8C);
}
html body[class] .wp-block-add-to-cart-with-options-quantity-selector,
html body[class] .wc-block-components-quantity-selector { margin-bottom: 12px; }

/* Checkout: a touch wider on large monitors so it does not look marooned.
   Stays inside the 1100–1240px band the brief specifies. */
@media (min-width: 1600px) {
  html body[class] .wc-block-checkout,
  html body[class] .wp-block-woocommerce-checkout { max-width: 1240px !important; }
}

/* v4.11.24 — PDP purchase layout, to the approved mock.
   Existing vial artwork, logo and colours are untouched; this changes size,
   order and spacing only.

   MEASURED BEFORE: title 80px at 1440; 481px of content between the price and
   the first control on desktop, 675px on mobile; Add to cart at y=1560 on a
   390px screen, below the fold. Nothing is removed — the assurance strip, spec
   strip, COA line and research-use disclaimer all still render, below the
   buying controls instead of ahead of them. */

/* the column becomes a flex stack so the JS-assigned order slots apply */
html body[class].single-product .omni-pdp-col {
  display: flex;
  flex-direction: column;
}

/* Title: 80px is a banner, not a product name. */
html body[class].single-product .omni-pdp-col h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  line-height: 1.1 !important;
  margin-bottom: .35rem !important;
}

/* Image: large enough to judge the vial, small enough to leave the controls
   on screen. The artwork itself is unchanged and stays uncropped. */
/* The container is .wp-block-woocommerce-product-gallery — an earlier attempt
   targeted "-image-gallery", which does not exist here, so the rule silently
   did nothing and the image kept eating the mobile fold. */
@media (min-width: 1025px) {
  html body[class].single-product .wp-block-woocommerce-product-gallery,
  html body[class].single-product .wc-block-product-gallery-large-image {
    max-width: 420px !important;
  }
}
@media (max-width: 1024px) {
  html body[class].single-product .wp-block-woocommerce-product-gallery,
  html body[class].single-product .wc-block-product-gallery-large-image {
    max-width: 240px !important;
    margin-inline: auto !important;
  }
}

/* Close the remaining run-up to the buy controls: measured 174px between the
   bundle row and the quantity stepper on mobile. */
html body[class].single-product .omni-qty-label { margin-top: 10px !important; }
html body[class].single-product .wp-block-add-to-cart-with-options-quantity-selector { margin-bottom: 8px !important; }
@media (max-width: 820px) {
  html body[class].single-product .wp-block-woocommerce-product-gallery { margin-bottom: 6px !important; }
  html body[class].single-product .omni-pdp-col h1 { margin-top: 0 !important; }
}

/* Group strength, bundle, quantity and Add to cart as one purchase block. */
html body[class].single-product .omni-pdp-col > * { margin-block: 0; }
html body[class].single-product .omni-pdp-col > *:not(:last-child) { margin-bottom: 14px; }
html body[class].single-product .wc-block-components-notices { margin-block: 0 !important; }

/* Bundle tiles: total, per-vial, and the saving in dollars as well as percent.
   Rendered as pseudo-elements because the Interactivity runtime strips injected
   children from these chips (see the decorator comment in peak.js). */
html body[class].single-product .omni-tier[data-omni-pervial]::after {
  content: attr(data-omni-pervial);
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--peak-ink-2, #5B6B8C);
  margin-top: 2px;
}
html body[class].single-product .omni-tier[aria-checked="true"][data-omni-pervial]::after {
  color: inherit;
  opacity: .85;
}

/* "1 bundle = 3 vials" — two 3-vial bundles is six vials, and the page says so. */
html body[class] .omni-vial-note {
  display: inline-block;
  margin-left: 10px;
  font-size: .82rem;
  color: var(--peak-ink-2, #5B6B8C);
  white-space: nowrap;
}

/* Price on the Add to cart button, per the mock. */
html body[class].single-product .wc-block-components-product-button__button[data-omni-total]::after {
  content: " — " attr(data-omni-total);
  font-weight: 700;
}

@media (max-width: 820px) {
  html body[class].single-product .omni-pdp-col h1 { font-size: 1.6rem !important; }
  html body[class].single-product .omni-pdp-col > *:not(:last-child) { margin-bottom: 11px; }
  html body[class] .omni-vial-note { display: block; margin: 6px 0 0; }
}

/* v4.11.27 — bring the catalogue closer to the fold on the homepage.
   MEASURED: first product card sat at scrollY 969 of a 3244px page — roughly a
   full screen of scrolling before anything could be bought. Spacing only; no
   section is removed and no content is hidden. */
html body[class].peak-skin-clinical .peak-hero--omni {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
}
html body[class] .peak-trust { padding-top: 22px !important; padding-bottom: 24px !important; }
html body[class] .peak-catalog--approved-home { padding-top: 8px !important; }
html body[class] .peak-sechead { margin-bottom: 1rem !important; }
@media (max-width: 820px) {
  html body[class].peak-skin-clinical .peak-hero--omni {
    padding-top: 14px !important;
    padding-bottom: 6px !important;
  }
  html body[class] .peak-trust { padding-top: 18px !important; padding-bottom: 18px !important; }
}

/* v4.11.28 — mobile: shorten the run-up to the buyable products.
   MEASURED at 390x844: the hero alone was 1032px — taller than the viewport —
   and the first product card sat at y=1417. Nothing is removed: the headline,
   subtitle, both CTAs, the trust chips and the vial lineup all stay. This
   tightens their spacing and the section heading only.

   Note: with all of that content retained, products cannot sit above the fold
   on a 390px phone. The goal here is one short scroll, not a false claim of
   above-the-fold. */
@media (max-width: 820px) {
  html body[class] .peak-hero__title { margin-bottom: .6rem !important; }
  html body[class] .peak-hero__sub { margin-bottom: .85rem !important; font-size: .95rem !important; }
  html body[class] .peak-hero__cta { margin-bottom: .5rem !important; }
  html body[class] .omni-hero-badges { margin-top: .7rem !important; }
  html body[class] .omni-hero-assurance { margin-top: 16px !important; padding-top: 14px !important; }
  html body[class].peak-skin-clinical .peak-hero--omni .omni-hero-media {
    height: 210px !important;
    margin-bottom: 0 !important;
  }
  html body[class] .peak-sechead { margin-bottom: .7rem !important; }
  html body[class] .peak-sechead__sub { margin-bottom: .3rem !important; }
  html body[class] .peak-catalog--approved-home { padding-top: 4px !important; }
}

/* v4.11.29 — the relocated hero blocks, once below the products on mobile.
   The vial artwork keeps its real size and proportions; only its position
   in the page changed, and only under 820px. */
@media (max-width: 820px) {
  html body[class] .omni-moved-below {
    margin: 26px auto 8px !important;
    max-width: 100% !important;
  }
  html body[class] .omni-hero-media.omni-moved-below {
    height: 260px !important;
    justify-self: center !important;
  }
  html body[class] .omni-hero-assurance.omni-moved-below {
    border-top: 1px solid var(--peak-line, #d8e2f2) !important;
    padding-top: 18px !important;
  }
}

/* v4.11.30 — contain the relocated hero block.
   MEASURED after the move: 27px of horizontal overflow at 390px. The decorative
   .omni-hero-fx glow is absolutely positioned with inset:-20% -16%, so it always
   spilled past its parent — inside the hero that spill was clipped, and once the
   block moved below the products nothing clipped it any more. Clip it here and
   drop the glow entirely in the relocated position, where it adds nothing. */
@media (max-width: 820px) {
  html body[class] .omni-hero-media.omni-moved-below {
    overflow: hidden !important;
    max-width: calc(100vw - 32px) !important;
  }
  html body[class] .omni-hero-media.omni-moved-below .omni-hero-fx { display: none !important; }
}

/* =========================================================================
   v4.12.0 — PDP purchase experience.

   Four corrections, each against a measured defect on the live page:

   1. Add to cart was HIDDEN whenever the selected variation was already in the
      cart (the rule below at .omni-variation-in-cart), and replaced by an
      "Update cart" control. That made the quantity field mean "set the line to
      this" instead of "add this many". Add is now always the purchase action.
   2. The bundle tiles were sized by their content — measured 112 / 141 / 149 /
      153px across on desktop — so nothing lined up and the 1-vial tile was
      visibly shorter because it alone had no badge.
   3. The "Number of bundles" block was oversized and carried a restated
      explanation next to it.
   4. There was no prominent live total beside the quantity.
   ========================================================================= */

/* 1. The purchase actions are always the purchase actions. */
html body[class].omni-variation-in-cart .wc-block-components-product-button { display: block !important; }

/* 2. Equal tiles: one grid, one box size, aligned rows.
      Desktop four across; 2x2 on narrow screens where four would be cramped. */
html body[class].single-product .wc-block-product-filter-chips__items {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}
html body[class].single-product .wc-block-product-filter-chips__item.omni-tier {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px 8px 12px !important;
  text-align: center !important;
  border-radius: 12px !important;
}
/* Badge slot — every tile has one, so every tile is the same height. The
   1-vial tile says what it is rather than claiming a saving it does not have. */
html body[class].single-product .omni-tier[data-omni-badge]::before {
  content: attr(data-omni-badge);
  order: 0;
  display: block;
  width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  background: #EAF0FB;
  color: #29406E;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.5;
  white-space: nowrap;
}
html body[class].single-product .omni-tier[data-omni-badge^="SAVE"]::before {
  background: #0F9D58;
  color: #fff;
}
/* The pack label the block itself renders. */
html body[class].single-product .omni-tier.omni-tier > * {
  order: 1 !important;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
}
/* Figures block: total, per vial, and the real saving — one pseudo-element,
   because the Interactivity runtime leaves us only two per tile. */
html body[class].single-product .omni-tier[data-omni-figures]::after {
  content: attr(data-omni-figures);
  order: 2;
  display: block;
  margin-top: auto;
  padding-top: 4px;
  white-space: pre-line;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--peak-ink-2, #5B6B8C);
}
html body[class].single-product .omni-tier[aria-checked="true"][data-omni-figures]::after {
  color: #fff;
  opacity: .92;
}
html body[class].single-product .omni-tier[aria-checked="true"][data-omni-badge]::before {
  background: rgba(255,255,255,.92);
  color: #14224A;
}
@media (max-width: 820px) {
  html body[class].single-product .wc-block-product-filter-chips__items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3 + 4. Compact quantity control with the live total beside it. */
html body[class].single-product .omni-qtyrow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}
/* The oversized label becomes a quiet caption; the meaning is kept, not lost. */
html body[class].single-product .omni-qtyrow > :not(.wc-block-components-quantity-selector) {
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--peak-ink-2, #5B6B8C) !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
html body[class].single-product .omni-qtyrow .wc-block-components-quantity-selector {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  border-radius: 999px !important;
}
html body[class].single-product .omni-qtyrow[data-omni-live]::after {
  content: attr(data-omni-live);
  margin-left: auto;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--peak-ink, #14224A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 820px) {
  html body[class].single-product .omni-qtyrow[data-omni-live]::after { font-size: 1.45rem; }
}

/* The old restated note is gone; keep the rule inert if any page still has one. */
html body[class] .omni-vial-note { display: none !important; }

/* Post-add confirmation, with a way through to the cart. */
html body[class] .omni-cartctl__added {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ECF7F0;
  border: 1px solid #BFE3CE;
  color: #14532D;
  font-size: .88rem;
  font-weight: 600;
}
html body[class] .omni-cartctl__added[hidden] { display: none; }
html body[class] .omni-cartctl__tick { font-weight: 900; }
html body[class] .omni-cartctl__view {
  margin-left: auto;
  color: #0B4FCE;
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}
html body[class] .omni-cartctl__state {
  margin: 10px 0 0;
  font-size: .84rem;
  color: var(--peak-ink-2, #5B6B8C);
}
html body[class] .omni-cartctl__state:empty { display: none; }

/* v4.12.1 — keep the purchase action reading as a purchase action.
   MEASURED LIVE ON v4.12.0: with the variation in the cart, WooCommerce's block
   relabels its own button "1 in cart". The press still adds correctly, but the
   label no longer says so. The block owns that text node and rewrites it on
   every render, so the visible label is painted here and the accessible name is
   re-applied from JS. */
html body[class].single-product .wc-block-components-product-button__button[data-omni-label] {
  font-size: 0 !important;
  line-height: 1.2 !important;
}
html body[class].single-product .wc-block-components-product-button__button[data-omni-label]::before {
  content: attr(data-omni-label);
  font-size: 1rem;
  font-weight: 700;
}
html body[class].single-product .wc-block-components-product-button__button[data-omni-total]::after {
  content: "\00a0\2014\00a0" attr(data-omni-total);
  font-size: 1rem;
  font-weight: 700;
}

/* v4.12.2 — the quantity number must fit at two and three digits.
   REPORTED ON MOBILE AND MEASURED AT 390px: with a cart line at quantity 12,
   the input measured 45px wide with scrollWidth greater than clientWidth — the
   number itself was clipped inside the field, under the − and + controls.
   Sized to hold three digits at every width, on the product page and in the
   cart, without letting the control overflow its row. */
html body[class] .wc-block-components-quantity-selector { min-width: 0 !important; }
html body[class] .wc-block-components-quantity-selector input,
html body[class] .wc-block-components-quantity-selector__input {
  min-width: 3.25em !important;
  width: auto !important;
  padding-inline: 4px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  overflow: visible !important;
  text-overflow: clip !important;
}
@media (max-width: 820px) {
  html body[class] .wc-block-components-quantity-selector input,
  html body[class] .wc-block-components-quantity-selector__input {
    min-width: 3.5em !important;
    font-size: .95rem !important;
  }
  /* Keep the cart row's own controls from being squeezed under the image. */
  html body[class] .wc-block-cart-item__quantity { min-width: 118px !important; }
}

/* =========================================================================
   v4.12.3 — the purchase block, rebuilt from the live mobile screenshots.

   ROOT CAUSE of every symptom in those screenshots: the label, the stepper,
   the price and the Add button were all flex items in ONE ROW inside the
   block's own container. At 390px there was no width to share, so:
     - "NUMBER OF BUNDLES" was squeezed to ~40px and wrapped one letter per
       line ("N U M B E R" vertically);
     - the stepper stretched to the row's full height and rendered as a tall
       pill roughly 340px high;
     - the button text broke to "Add / to / cart" with the price on top of it.

   The fix is structural, not cosmetic: the shared parent becomes a column, so
   each part gets a full-width line of its own, in one order at every width —
   label, stepper, price, Add to cart, Buy now.
   ========================================================================= */
html body[class].single-product .omni-buybox {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
html body[class].single-product .omni-buybox > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Label: horizontal, one line, never letter-stacked. */
html body[class].single-product .omni-qty-label {
  display: block !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--peak-ink-2, #5B6B8C) !important;
}

/* Stepper: fixed, compact, centred, equal tap targets. */
html body[class].single-product .omni-qtyrow {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  height: auto !important;
}
html body[class].single-product .omni-qtyrow .wc-block-components-quantity-selector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
html body[class].single-product .omni-qtyrow .wc-block-components-quantity-selector__button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}
html body[class].single-product .omni-qtyrow input,
html body[class].single-product .omni-qtyrow .wc-block-components-quantity-selector__input {
  height: 48px !important;
  line-height: 48px !important;
  text-align: center !important;
  padding: 0 4px !important;
}
/* Price on its own line, centred under the stepper. */
html body[class].single-product .omni-qtyrow[data-omni-live]::after {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 1.7rem !important;
}

/* Add to cart: its own full-width line, text on ONE line. */
html body[class].single-product .wc-block-components-product-button,
html body[class].single-product .wc-block-components-product-button__button {
  width: 100% !important;
  display: block !important;
}
html body[class].single-product .wc-block-components-product-button__button {
  min-height: 54px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-inline: 14px !important;
}
html body[class].single-product .wc-block-components-product-button__button[data-omni-label]::before,
html body[class].single-product .wc-block-components-product-button__button[data-omni-total]::after {
  white-space: nowrap !important;
  display: inline !important;
}

/* Bundle tiles: contents centred and aligned the same way on all four. */
html body[class].single-product .omni-tier[data-omni-badge]::before {
  content: attr(data-omni-badge);
  min-height: 1.5em;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: .64rem !important;
}
/* An empty badge still reserves its line, so the single vial matches the
   others in height without being given a saving it does not have. */
html body[class].single-product .omni-tier[data-omni-badge=""]::before {
  background: transparent !important;
  color: transparent !important;
}
html body[class].single-product .omni-tier[data-omni-figures]::after {
  min-height: 4.5em;
  text-align: center !important;
}

/* v4.12.4 — the two purchase actions are one pair.
   MEASURED on the live desktop PDP before this rule: "Add to cart" was
   208.3x65.3 at x=1151.7 while "Buy now" was 580x44.9 at x=780 — 2.8x the
   width, 20px difference in height, on separate rows, with Buy now inset 10px
   from the column's own left edge. They are the same kind of control and now
   read as a pair: same width, same height, same left edge, stacked with even
   spacing at every width. */
html body[class].single-product .omni-buynow,
html body[class].single-product a.omni-buynow,
html body[class].single-product .wc-block-components-product-button__button {
  min-height: 54px !important;
  height: auto !important;
  width: 100% !important;
  margin-inline: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
html body[class].single-product .omni-buynow { margin-top: 10px !important; }

/* A picker with one option is not a picker. The strength group is rendered by
   the block even when the product has a single strength, giving a control that
   cannot be operated and that sits 3.5x shorter than the bundle tiles beside
   it. Present it as the stated fact it is. */
html body[class].single-product .omni-onechoice .wc-block-product-filter-chips__item {
  pointer-events: none !important;
  cursor: default !important;
  min-height: 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

/* v4.12.5 — the single-option group carries its class on the block wrapper. */
html body[class].single-product .omni-onechoice .wc-block-product-filter-chips__item,
html body[class].single-product .wp-block-woocommerce-product-filter-chips.omni-onechoice .wc-block-product-filter-chips__item {
  pointer-events: none !important;
  cursor: default !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

/* =========================================================================
   v4.12.7 — three measured layout defects, all found by a sweep rather than
   by the owner. Numbers are the measured values before each rule.
   ========================================================================= */

/* 1. Cart line row broke out of the page gutter on mobile, and got worse as
      the price string got longer: the row's right edge moved 363.9 -> 382.1 as
      quantity went 1 -> 99 while its container's right edge stayed at 360.8,
      so container scrollWidth exceeded clientWidth by 5px at qty 1 and 23px at
      qty 99. On a real order of ten or more units the line total sat 8px from
      the screen edge and no longer lined up with the totals card beneath it. */
@media (max-width: 820px) {
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-items__row,
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-items table,
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-items {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-item__total {
    width: auto !important;
    max-width: 40% !important;
    padding-right: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  html body[class] .wp-block-woocommerce-cart.alignwide { overflow-x: clip; }
}

/* 2. The product gallery card sat 11px right of the content column's centre on
      mobile, on all four products: content column 29.3-360.8 (centre 195) but
      the image card centred on 206, giving a 45.7px left margin against a
      23.8px right margin. Its own box also overflowed - clientWidth 240 vs
      scrollWidth 262 - so the image overhung its container by 22px. */
@media (max-width: 820px) {
  html body[class].single-product .wp-block-woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }
  html body[class].single-product .wc-block-product-gallery-large-image,
  html body[class].single-product .wc-block-product-gallery-large-image img {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

/* 3. The quantity stepper overhung its own rounded border by 7-8px at every
      width and every quantity (scrollWidth 113 vs clientWidth 105), so the +
      control painted just outside the border it belongs in. */
html body[class] .wc-block-components-quantity-selector {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* v4.12.8 — fit, rather than clip.
   MEASURED: .wc-block-product-gallery-large-image had computed width 331.5px
   but rendered 354px wide (left 29, right 383) inside a gallery ending at 361.
   The 22px was its own horizontal padding: width:100% without border-box adds
   padding OUTSIDE the declared width. Clipping it with overflow:hidden hid the
   symptom and cut the image; making the box include its padding fixes it.
   The same applies to the quantity stepper, whose content measured 113px inside
   a 105px box — it is sized to its contents now instead of overhanging or
   being cut. */
html body[class].single-product .wp-block-woocommerce-product-gallery,
html body[class].single-product .wp-block-woocommerce-product-gallery * {
  box-sizing: border-box !important;
}
html body[class] .wc-block-components-quantity-selector,
html body[class] .wc-block-components-quantity-selector * {
  box-sizing: border-box !important;
}
html body[class] .wc-block-components-quantity-selector {
  width: auto !important;
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
  overflow: visible !important;
}

/* =========================================================================
   v4.12.9 — cart and checkout defects found by sweeping, not by the owner.
   ========================================================================= */

/* 1. The cart's line-total column collapsed to 19px wide and 153px TALL at
      390px — the price rendered as a vertical stack of characters, the same
      failure mode as the quantity label. Caused by table-layout:fixed with an
      auto-width total cell: the product cell took the space and the price had
      nowhere to go. Give the column a real minimum and forbid the wrap. */
@media (max-width: 820px) {
  /* The row is display:grid despite being a <tr>, and its computed template
     was "80px 132px 0px 47.6875px" — four tracks for three cells, with the
     TOTAL landing on the 0px one. That is why the price rendered 19px wide and
     153px tall, then 1px once width:1% was tried: a table trick on a grid.
     Give the grid three real tracks instead. */
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-items__row {
    grid-template-columns: 60px minmax(0, 1fr) max-content !important;
    column-gap: 12px !important;
    align-items: start !important;
  }
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-item__total {
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding-right: 0 !important;
    justify-content: flex-end !important;
  }
  /* The product cell yields the space instead of the price being squeezed. */
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-item__product {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  html body[class] .wp-block-woocommerce-cart .wc-block-cart-item__total * {
    white-space: nowrap !important;
  }
}

/* 2. Mobile checkout rendered the order summary TWICE — a collapsed bar at
      y=180 and a fully expanded copy at y=1835, both visible. Keep the one at
      the top, make it stick so the total stays on screen while a long form is
      filled, and drop the duplicate. */
@media (max-width: 820px) {
  html body[class] .omni-summary-dupe { display: none !important; }
  html body[class] .omni-summary-keep {
    position: static !important;
    background: var(--peak-bg, #fff) !important;
  }
}

/* 3. Remove was an unlabelled icon. It keeps its aria-label and now shows the
      word as well, so it is not a guess for sighted users either. */
html body[class] .wc-block-cart-item__remove-link {
  font-size: .78rem !important;
  color: var(--peak-ink-2, #5B6B8C) !important;
  text-decoration: underline !important;
}
html body[class] .wc-block-cart-item__remove-link::after {
  content: "Remove";
  margin-left: 4px;
}

/* 4. "Keep shopping" was a bare text link stranded 400px below the Checkout
      button. It is the second half of a pair and now reads as one. */
html body[class] .omni-keepshopping {
  display: block !important;
  margin: 10px auto 0 !important;
  padding: 13px 18px !important;
  border: 1px solid #d8e2f2 !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--peak-ink, #14224A) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* v4.12.12 — say the research-use fact once below the buy controls.
   On a live iPhone the product page carried it four times between the buy box
   and the product table: the status chip, a COA paragraph (removed in
   v4.12.3), the full research-use block, and this one-line repeat of the same
   sentence. The full block states it completely; this line only restated it. */
html body[class].single-product .omni-pdp-col .peak-prod-shortdesc,
html body[class].single-product .entry-summary > p.omni-ruo-repeat {
  display: none !important;
}

/* v4.13.0 — cart: shipping progress, accepted methods, more of the catalogue. */
html body[class] .omni-shipbar { margin: 6px 0 14px; }
html body[class] .omni-shipbar__track {
  height: 6px;
  border-radius: 999px;
  background: #E8EEF8;
  overflow: hidden;
}
html body[class] .omni-shipbar__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #1E45C8;
  transition: width .35s ease;
}
html body[class] .omni-shipbar.is-unlocked .omni-shipbar__fill { background: #0F9D58; }
@media (prefers-reduced-motion: reduce) {
  html body[class] .omni-shipbar__fill { transition: none; }
}

html body[class] .omni-accepted {
  margin: 12px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--peak-ink-2, #5B6B8C);
}

html body[class] .omni-alsohere { margin: 34px 0 0; }
html body[class] .omni-alsohere__title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--peak-ink, #14224A);
}
html body[class] .omni-alsohere__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body[class] .omni-alsohere__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid #E4EAF5;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}
html body[class] .omni-alsohere__item a:hover { border-color: #c8d6ee; }
html body[class] .omni-alsohere__item img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
html body[class] .omni-alsohere__name { font-size: .82rem; font-weight: 700; }
html body[class] .omni-alsohere__price { font-size: .78rem; color: var(--peak-ink-2, #5B6B8C); }
@media (max-width: 520px) {
  html body[class] .omni-alsohere__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body[class] .omni-alsohere__item img { width: 48px; height: 48px; }
  html body[class] .omni-alsohere__name { font-size: .74rem; }
}

/* v4.15.0 — the QA test article is not a research product.
   Its page must not carry the research-use disclaimer, the COA status chip or
   the COA block: repeating those on an internal test item would be a claim
   about something that is not a product. Suppressed in PHP, and here too so a
   template that renders them by another route cannot reintroduce them. */
html body.omni-qa-product .peak-disclaimer,
html body.omni-qa-product .omni-coa-inline,
html body.omni-qa-product .peak-coa-note,
html body.omni-qa-product .omni-status-row,
html body.omni-qa-product .omni-assurance,
html body.omni-qa-product [class*="coa"],
html body.omni-qa-product .peak-prod-badges {
  display: none !important;
}

/* v4.16.2 — the QA article carries no analysis or research-use language.
   MEASURED on the live page: the status row still read "COA not published ·
   Research use only" and the assurance grid still showed a "COA / Not
   published" tile. Both are true statements about a research compound and
   meaningless about an internal checkout test, which is not a product and has
   nothing to certify. Targeted by their real classes, on this page only. */
html body.omni-qa-product .omni-pdp-status,
html body.omni-qa-product .omni-product-assurance {
  display: none !important;
}

/* =========================================================================
   v4.18.0 — FINAL LAYOUT PASS. Cosmetics freeze after this block.

   Shared template: every selector here keys off body.single-product, and there
   is no product-ID scoping anywhere in this stylesheet, so real products and
   the QA article change together — which is what was asked for.

   Four changes, each against a measured cause:

   1. Tiles were tall because the figures pseudo-element carried
      min-height:4.5em (three lines at line-height 1.5) plus margin-top:auto
      pushing it to the bottom of a stretched box. Both go; the tiles become
      equal rectangles sized by their content.
   2. Quantity and the selected total were stacked, because v4.12.3 set
      .omni-qtyrow to flex-direction:column and gave the total display:block
      with width:100%. They belong on one line, with Add to cart directly
      below. This restores the v4.12.0 intent that was superseded.
   3. The green savings badge never rendered: the rule matched
      [data-omni-badge^="SAVE"] while the JS writes "Save 5%".
   4. The stepper's overflow:hidden here outranked the v4.12.8 fix that exists
      to stop the "+" being clipped, so that fix was live in the cart but not
      on the product page.
   ========================================================================= */

/* 1 — shorter, equal rectangular tiles */
html body[class].single-product .wc-block-product-filter-chips__items {
  gap: 8px !important;
}
html body[class].single-product .wc-block-product-filter-chips__item.omni-tier {
  gap: 3px !important;
  padding: 8px 8px 9px !important;
}
html body[class].single-product .omni-tier[data-omni-badge]::before {
  min-height: 0;
  padding: 2px 6px;
  font-size: .6rem !important;
}
html body[class].single-product .omni-tier[data-omni-figures]::after {
  min-height: 0;          /* was 4.5em — the main source of tile height */
  margin-top: 0;          /* was auto — stopped stretching the box */
  padding-top: 2px;
  font-size: .72rem;
  line-height: 1.4;
}
html body[class].single-product .omni-tier.omni-tier > * {
  font-size: .9rem;
  line-height: 1.15;
}

/* 2 — quantity and total on ONE line, Add to cart immediately below */
html body[class].single-product .omni-buybox {
  gap: 8px !important;
}
html body[class].single-product .omni-qty-label {
  font-size: .74rem !important;
  margin: 0 !important;
}
html body[class].single-product .omni-qtyrow {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
html body[class].single-product .omni-qtyrow[data-omni-live]::after {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}
html body[class].single-product .wc-block-components-product-button__button {
  min-height: 50px !important;
}
html body[class].single-product .omni-buynow { margin-top: 4px !important; }

/* 3 — the savings badge, matched case-correctly this time */
html body[class].single-product .omni-tier[data-omni-badge^="Save"]::before {
  background: #0F9D58 !important;
  color: #fff !important;
}
html body[class].single-product
  .omni-tier[aria-checked="true"][data-omni-badge^="Save"]::before {
  background: rgba(255,255,255,.92) !important;
  color: #0B7A43 !important;
}

/* 4 — let the stepper show its own "+" on the product page too */
html body[class].single-product .omni-qtyrow .wc-block-components-quantity-selector {
  overflow: visible !important;
}

/* Tighter column rhythm, so the whole buy area is shorter. */
html body[class].single-product .omni-pdp-col > *:not(:last-child) {
  margin-bottom: 10px !important;
}

/* ==========================================================================
   v4.22.0 — bundle cards: vertical padding only.

   Owner instruction was explicit: preserve the current layout, colours,
   artwork and behaviour, and make the existing cards slimmer by reducing
   vertical padding. Nothing here touches width, colour, font, grid, badge
   text or any interaction — only the vertical box metrics, so the four cards
   stay equal rectangles and simply get shorter.
   ========================================================================== */
html body[class].single-product .wc-block-product-filter-chips__item.omni-tier {
  padding-top: 5px !important;
  padding-bottom: 6px !important;
  gap: 2px !important;
}
html body[class].single-product .omni-tier[data-omni-figures]::after {
  padding-top: 1px;
  line-height: 1.32;
}