/* ==========================================================================
   OMNI Biologics — omni-wc.css
   Skins REAL WooCommerce output to the verified design. Loaded after omni.css.
   Covers: price HTML, product card image, PDP native add-to-cart form +
   product image, cart / checkout / my-account (classic + block), notices.
   Tokens only — no new design vocabulary.
   ========================================================================== */

/* ---------- WooCommerce price HTML -> .price-retail / .price-sale ---------- */
.pcard .price .amount,
.pcard .price ins .amount {
  font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  color: var(--copper-deep); text-decoration: none;
}
.pcard .price del { opacity: 1; }
.pcard .price del .amount {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--gray); text-decoration: line-through; margin-right: 6px;
}
.pcard .price ins { text-decoration: none; background: none; }

.pdp-price .amount,
.pdp-price ins .amount {
  font-family: var(--font-mono); font-weight: 600; font-size: 30px;
  color: var(--ink); text-decoration: none;
}
.pdp-price del { opacity: 1; margin-right: 10px; }
.pdp-price del .amount {
  font-size: 19px; color: var(--gray); text-decoration: line-through; font-weight: 500;
}
.pdp-price ins { text-decoration: none; background: none; }

/* ---------- product card image (replaces the monogram when set) ---------- */
.pcard-head .mono .pcard-img,
.pcard-img { max-height: 96px; width: auto; object-fit: contain; display: block; margin: 0 auto; }

/* ---------- PDP product image plate ---------- */
.pdp-imgwrap {
  position: relative; border-radius: var(--radius-card);
  background: var(--cloud); border: 1px solid var(--line); box-shadow: var(--shadow);
  min-height: 460px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 32px;
}
.pdp-imgwrap .pdp-photo { max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; }
.pdp-imgwrap .coa-float {
  position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.92);
  border: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px;
  font-weight: 500; color: var(--charcoal); padding: 5px 10px; border-radius: 100px;
  display: flex; align-items: center; gap: 6px; z-index: 2;
}
.pdp-imgwrap .coa-float .g { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }
.pdp-shell { padding: 40px 0 var(--s9); }
.pdp-shell .pdp-back { display: inline-block; margin-bottom: 26px; color: var(--gray); font-size: 13.5px; }
.pdp-shell .pdp-back:hover { color: var(--copper-deep); }

/* ---------- PDP native WooCommerce add-to-cart form -> OMNI ---------- */
.omni-atc form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin: 0; }
.omni-atc .quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--radius-btn); overflow: hidden; background: #fff;
}
.omni-atc .quantity .qty {
  width: 56px; height: 48px; border: none; text-align: center; background: #fff;
  font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink);
  -moz-appearance: textfield;
}
.omni-atc .quantity input::-webkit-outer-spin-button,
.omni-atc .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.omni-atc .single_add_to_cart_button {
  flex: 1; min-width: 200px; padding: 16px 26px;
  background: var(--copper); color: #fff; border: none; cursor: pointer;
  border-radius: var(--radius-btn); font-family: var(--font-display);
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.omni-atc .single_add_to_cart_button:hover { background: var(--copper-deep); transform: translateY(-1px); }
.omni-atc .single_add_to_cart_button.loading { opacity: .7; cursor: progress; }
.omni-atc .single_add_to_cart_button.disabled,
.omni-atc .single_add_to_cart_button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* variable-product variations table */
.omni-atc .variations { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.omni-atc .variations th,
.omni-atc .variations td { text-align: left; padding: 6px 0; vertical-align: middle; }
.omni-atc .variations th.label { font-size: 12.5px; font-weight: 600; color: var(--charcoal); padding-right: 14px; white-space: nowrap; }
.omni-atc .variations select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: #fff; font-family: var(--font-body); font-size: 14px; color: var(--ink);
}
.omni-atc .reset_variations { font-size: 12.5px; color: var(--gray); margin-left: 8px; }
.omni-atc .woocommerce-variation-price { width: 100%; margin: 6px 0 12px; }
.omni-atc .woocommerce-variation-price .amount { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--ink); }
.omni-atc .woocommerce-variation-availability { width: 100%; font-size: 13px; color: var(--gray); }
.omni-atc .stock { font-size: 13px; color: var(--copper-deep); width: 100%; }
.omni-atc .stock.out-of-stock { color: #b4452f; }

/* ===================== generic WooCommerce page chrome ===================== */
.omni-page-head h1 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(34px,5vw,52px); font-weight: 500; letter-spacing: -.018em; }
.omni-wc-head { margin-bottom: 28px; }
.omni-wc-head h1 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(30px,4.4vw,46px); font-weight: 500; letter-spacing: -.018em; line-height: 1.05; }
.omni-rich { color: var(--charcoal); line-height: 1.7; }
.omni-rich h2, .omni-rich h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.omni-rich a { color: var(--copper-deep); }

/* WooCommerce buttons (classic) */
.omni-wc .woocommerce a.button,
.omni-wc .woocommerce button.button,
.omni-wc .woocommerce input.button,
.omni-wc .woocommerce #respond input#submit,
.omni-wc .woocommerce a.button.alt,
.omni-wc .woocommerce button.button.alt {
  background: var(--copper); color: #fff; border: none; border-radius: var(--radius-btn);
  padding: 13px 24px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  letter-spacing: .01em; transition: background .15s var(--ease), transform .15s var(--ease);
}
.omni-wc .woocommerce a.button:hover,
.omni-wc .woocommerce button.button:hover,
.omni-wc .woocommerce input.button:hover,
.omni-wc .woocommerce a.button.alt:hover,
.omni-wc .woocommerce button.button.alt:hover { background: var(--copper-deep); transform: translateY(-1px); }

/* WooCommerce form fields (classic) */
.omni-wc .woocommerce form .form-row input.input-text,
.omni-wc .woocommerce form .form-row textarea,
.omni-wc .woocommerce form .form-row select,
.omni-wc .woocommerce .select2-container--default .select2-selection--single {
  border: 1px solid var(--line); border-radius: var(--radius-btn); background: #fff;
  padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  min-height: 46px;
}
.omni-wc .woocommerce form .form-row label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.omni-wc .woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-card); border-collapse: separate; overflow: hidden; }
.omni-wc .woocommerce table.shop_table th { font-family: var(--font-display); color: var(--ink); }
.omni-wc .woocommerce .cart-collaterals .cart_totals h2,
.omni-wc .woocommerce-checkout h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.omni-wc .woocommerce #order_review,
.omni-wc .woocommerce .cart_totals { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; background: var(--cloud); }

/* RUO confirm checkbox at checkout */
.omni-ruo-confirm { margin: 18px 0; font-size: 13px; color: var(--charcoal); line-height: 1.55; }
.omni-ruo-confirm input { margin-right: 8px; }

/* WooCommerce notices */
.omni-wc .woocommerce-message,
.omni-wc .woocommerce-info,
.omni-wc .woocommerce-error {
  border-top: none; border-left: 3px solid var(--copper); background: var(--cloud);
  border-radius: var(--radius-btn); font-family: var(--font-body); color: var(--ink);
}
.omni-wc .woocommerce-error { border-left-color: #b4452f; }
/* Kill WooCommerce's default icon-font glyph on notices — it renders as a small
   BLUE box before "Have a coupon?" / "Sorry, no payment methods" and clashes with
   the OMNI design (the copper left border is the only accent we use). Global so
   every WC notice — checkout, cart, account — reads clean. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-noreviews::before { content: none !important; }
/* Notice links (e.g. the coupon "Click here to enter your code") read as on-brand
   copper links instead of blending into the body text. */
.woocommerce-info a,
.woocommerce-message a { color: var(--copper-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- block-based cart/checkout (WC 8/9 default) ---------- */
.omni-wc .wc-block-components-button,
.omni-wc .wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.omni-wc .wc-block-cart__submit-button {
  background: var(--copper) !important; color: #fff !important; border: none !important;
  border-radius: var(--radius-btn) !important; font-family: var(--font-display); font-weight: 600;
}
.omni-wc .wc-block-components-button:hover { background: var(--copper-deep) !important; }
.omni-wc .wc-block-components-text-input input,
.omni-wc .wc-block-components-select select {
  border-radius: var(--radius-btn); border-color: var(--line);
}
.omni-wc .wc-block-components-title,
.omni-wc .wp-block-woocommerce-checkout h2,
.omni-wc .wc-block-components-checkout-step__title { font-family: var(--font-display); color: var(--ink); }
.omni-wc .wc-block-components-totals-item__value,
.omni-wc .wc-block-formatted-money-amount { font-family: var(--font-mono); }

/* keep the design's drawer thumbnail image tidy */
#sidecart .sc-item .thumb img { height: 52px; object-fit: contain; }

/* ---------- in-cart express wallet button (#sc-express) -------------------
   Filled by assets/omni-express.js with Stripe's Express Checkout Element
   ONLY when Attestly Payments is connected AND a wallet (Apple/Google Pay/Link)
   is available; otherwise it stays display:none and the normal "Proceed to
   Checkout" button below is used. Sits just above #sc-proceed in .sc-foot. */
.sc-express {
  margin: 0 0 12px;
  min-height: 46px;
}
.sc-express > * { width: 100%; }
/* "or" divider between the wallet button and the normal checkout button */
.sc-express::after {
  content: "or";
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  margin: 12px 0 2px;
}
.sc-express::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin: 2px 0 -8px;
}
/* charged-but-finalizing note (omni-express.js surfacePendingMessage) */
.sc-express .omni-xpay-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--copper-deep);
  background: var(--clay-tint);
  border: 1px solid var(--rose);
  border-radius: var(--radius-btn);
  padding: 11px 13px;
  text-align: center;
}
.sc-express .omni-xpay-note + * { display: none; }

/* ---------- checkout-top express wallet strip (#omni-co-express) ----------
   Emitted by functions.php (woocommerce_before_checkout_form, priority 4) at the
   very top of the checkout form. Filled by assets/omni-express.js with Stripe's
   Express Checkout Element ONLY when Attestly Payments is connected AND a wallet
   (Apple/Google Pay/Link) is available; otherwise the wrap stays display:none and
   the card field below is used. Independent of #payment / the WC form. */
.omni-checkout-page .omni-co-express {
  max-width: var(--maxw);
  margin: 0 auto 18px;
  padding: 0 var(--gut);
}
.omni-co-express .oce-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 9px;
}
.omni-co-express .oce-mount { min-height: 46px; }
.omni-co-express .oce-mount > * { width: 100%; }
/* "or pay with card below" divider beneath the wallet buttons */
.omni-co-express .oce-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.omni-co-express .oce-or::before,
.omni-co-express .oce-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* charged-but-finalizing note (omni-express.js surfacePending) */
.omni-co-express .omni-xpay-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--copper-deep);
  background: var(--clay-tint);
  border: 1px solid var(--rose);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  text-align: center;
}

/* mobile */
@media (max-width: 768px) {
  .omni-atc form.cart { flex-direction: column; align-items: stretch; }
  .omni-atc .quantity { align-self: flex-start; }
  .omni-atc .single_add_to_cart_button { width: 100%; }
  .pdp-imgwrap { min-height: 320px; }
  /* bottom-sheet drawer: keep the express button full-width + comfortably tappable */
  .sc-express { margin-bottom: 14px; min-height: 48px; }
  .omni-co-express .oce-mount { min-height: 48px; }
}

/* ============================================================
   CLASSIC WOOCOMMERCE SKIN — My Account / Cart / Checkout (OMNI)
   These pages render WooCommerce's own shortcodes through page.php
   (NOT Elementor). WooCommerce's layout CSS handles structure; this
   applies the OMNI look + guards against stray oversized inline icons.
   Scope: .omni-wc-content (the WC shortcode wrapper in page.php).
   ============================================================ */

/* GUARD: a stray unsized inline icon (e.g. a FontAwesome breadcrumb chevron)
   must NEVER balloon to fill the page. Caps runaway SVGs only — the design's
   intentional 18-24px account/checkout icons render at their natural size. */
.omni-wc-content svg { max-width: 48px; max-height: 48px; }

/* WC content is UI, not prose — kill list bullets */
.omni-wc-content ul, .omni-wc-content ol { list-style: none; margin: 0; padding: 0; }
.omni-wc-content { color: var(--charcoal); font-family: var(--font-body); line-height: 1.6; }
.omni-wc-content .woocommerce-breadcrumb { display: none; }

/* Generic typographic skin — scoped to the CLASSIC cart page only, so it never
   overrides the account/checkout design templates' own typography. */
.omni-wc-page .omni-wc-content { font-size: 15px; }
.omni-wc-page .omni-wc-content a { color: var(--copper-deep); }
.omni-wc-page .omni-wc-content a:hover { color: var(--ink); }
.omni-wc-page .omni-wc-content h2, .omni-wc-page .omni-wc-content h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }

/* Buttons -> OMNI copper pill */
.omni-wc-content a.button, .omni-wc-content button.button, .omni-wc-content input.button,
.omni-wc-content #place_order, .omni-wc-content .button.alt, .omni-wc-content .checkout-button {
  background: var(--copper); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 26px; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: .01em; text-transform: none; cursor: pointer; line-height: 1.2;
  transition: background .15s var(--ease), transform .15s var(--ease); box-shadow: none;
}
.omni-wc-content a.button:hover, .omni-wc-content button.button:hover, .omni-wc-content input.button:hover,
.omni-wc-content #place_order:hover, .omni-wc-content .button.alt:hover, .omni-wc-content .checkout-button:hover {
  background: var(--copper-deep); color: #fff; transform: translateY(-1px);
}
.omni-wc-content button[name="update_cart"] { background: var(--cloud); color: var(--ink); border: 1px solid var(--line); }
.omni-wc-content .button[disabled] { opacity: .55; cursor: not-allowed; }

/* Inputs */
.omni-wc-content input.input-text, .omni-wc-content textarea,
.omni-wc-content input[type="text"], .omni-wc-content input[type="email"],
.omni-wc-content input[type="tel"], .omni-wc-content input[type="password"],
.omni-wc-content input[type="number"], .omni-wc-content select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: #fff; box-sizing: border-box;
}
.omni-wc-content input:focus, .omni-wc-content select:focus, .omni-wc-content textarea:focus {
  outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(186,148,134,.15);
}
.omni-wc-content .form-row label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; display: block; }
.omni-wc-content .form-row { margin-bottom: 15px; }
.omni-wc-content .quantity input.qty { width: 66px; text-align: center; }

/* Notices */
.omni-wc-content .woocommerce-message, .omni-wc-content .woocommerce-info,
.omni-wc-content .woocommerce-error, .omni-wc-content .woocommerce-noreviews {
  border: 1px solid var(--line); border-left: 3px solid var(--copper);
  border-radius: var(--radius-card); background: var(--cloud); color: var(--ink);
  padding: 14px 18px; font-size: 14px;
}
.omni-wc-content .woocommerce-error { border-left-color: #b3261e; }

/* My Account navigation -> OMNI sidebar card */
.omni-wc-content .woocommerce-MyAccount-navigation ul {
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff;
}
.omni-wc-content .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line-soft); }
.omni-wc-content .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.omni-wc-content .woocommerce-MyAccount-navigation li a {
  display: block; padding: 13px 18px; color: var(--ink-soft); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: background .12s var(--ease), color .12s var(--ease);
}
.omni-wc-content .woocommerce-MyAccount-navigation li a:hover { background: var(--cloud); color: var(--ink); }
.omni-wc-content .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--clay-tint); color: var(--copper-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--copper);
}
.omni-wc-content .woocommerce-MyAccount-content { color: var(--charcoal); }

/* Login / register cards (logged-out my account) */
.omni-wc-content form.login, .omni-wc-content form.register,
.omni-wc-content .u-column1 > form, .omni-wc-content .u-column2 > form {
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; background: #fff;
}

/* Tables (orders, cart, totals, order review) */
.omni-wc-content table.shop_table {
  border: 1px solid var(--line); border-radius: var(--radius-card); border-collapse: separate;
  border-spacing: 0; overflow: hidden; background: #fff;
}
.omni-wc-content table.shop_table th {
  background: var(--cloud); color: var(--ink); font-family: var(--font-display);
  font-size: 13px; font-weight: 600; padding: 14px 16px;
}
.omni-wc-content table.shop_table td { padding: 14px 16px; border-top: 1px solid var(--line-soft); color: var(--charcoal); }
.omni-wc-content table.shop_table .amount { font-family: var(--font-mono); color: var(--ink); }

/* Cart thumb + remove + totals */
.omni-wc-content .product-thumbnail img {
  width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line);
  border-radius: 10px; background: var(--cloud);
}
.omni-wc-content a.remove { color: var(--gray) !important; }
.omni-wc-content a.remove:hover { color: #b3261e !important; background: transparent !important; }
.omni-wc-content .cart_totals { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; background: var(--cloud); }
.omni-wc-content .cart_totals table.shop_table { border: 0; border-radius: 0; background: transparent; }

/* Checkout review + payment */
.omni-wc-content #order_review { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; background: #fff; }
.omni-wc-content #payment { background: var(--cloud) !important; border: 1px solid var(--line); border-radius: var(--radius-card); }
.omni-wc-content #payment div.payment_box { background: #fff !important; border: 1px solid var(--line); border-radius: 10px; }
.omni-wc-content #payment div.payment_box::before { display: none !important; }
.omni-wc-content #place_order { width: 100%; margin-top: 10px; }

/* ============================================================
   CHECKOUT — OMNI 2-column (details left, sticky summary right),
   matching the cloud-design checkout.html (.co-top / .co-wrap).
   Full-width page from page.php (.omni-checkout-page).
   ============================================================ */
.omni-checkout-page .omni-wc-content { max-width: var(--maxw); margin: 0 auto; padding: 26px var(--gut) 84px; }
.co-secure-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.co-secure { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--gray); }
.co-secure svg { color: var(--copper-deep); }
.omni-checkout-page form.checkout.woocommerce-checkout {
  display: grid; grid-template-columns: minmax(0,1fr) 384px; gap: 44px; align-items: start;
}
.omni-checkout-page #customer_details { grid-column: 1; grid-row: 1 / span 2; width: auto; float: none; }
.omni-checkout-page #customer_details .col-1,
.omni-checkout-page #customer_details .col-2 { width: auto; float: none; margin-bottom: 8px; }
.omni-checkout-page #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; font-family: var(--font-display); color: var(--ink); }
.omni-checkout-page #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 92px; }
/* order-review inner table sits flat inside the single card (no box-in-box) */
.omni-wc-content #order_review table.shop_table { border: 0; border-radius: 0; background: transparent; }
@media (max-width: 900px) {
  .omni-checkout-page form.checkout.woocommerce-checkout { grid-template-columns: 1fr; gap: 24px; }
  .omni-checkout-page #customer_details,
  .omni-checkout-page #order_review_heading,
  .omni-checkout-page #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* ============================================================
   POLISH (from the WC verification pass)
   ============================================================ */
/* Edit-address + lost-password forms get a card like login/register */
.omni-wc-content form.woocommerce-address-fields,
.omni-wc-content form.lost_reset_password {
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; background: #fff; max-width: 600px;
}
/* select2 open dropdown -> copper highlight (not default blue) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.omni-wc .select2-results__option--highlighted { background: var(--copper) !important; color: #fff !important; }
/* cart cross-sells loop is unstyled by default + not in the design -> hide */
.omni-wc-content .cross-sells { display: none; }

/* ============================================================
   MOBILE — cart drawer slides UP from the bottom (Ventra-style)
   + a tap "peek" arrow tab to open it.
   ============================================================ */
#omni-cart-peek { display: none; }
@media (max-width: 768px) {
  /* bottom-sheet: pin to the bottom, slide up instead of in from the right */
  #sidecart {
    top: auto !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 90vh !important;
    border-radius: 22px 22px 0 0;
    transform: translateY(110%) !important;
    transition: transform .42s var(--ease) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidecart.open { transform: translateY(0) !important; }
  /* grab handle */
  #sidecart .sc-head { position: relative; padding-top: 26px; }
  #sidecart .sc-head::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: var(--line);
  }
  /* the tap-up arrow tab (shown by JS when the cart has items) */
  #omni-cart-peek {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 130;
    align-items: center; gap: 9px;
    background: var(--ink); color: #fff; border: 0; border-radius: 99px;
    padding: 12px 22px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
    box-shadow: var(--shadow-lg); cursor: pointer;
  }
  #omni-cart-peek.show { display: inline-flex; }
  #omni-cart-peek .pk-count {
    background: var(--copper); color: #fff; border-radius: 99px; min-width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 6px;
  }
  #omni-cart-peek .pk-arrow { width: 13px; height: 13px; }
}

/* ---------- HEADER-NAV LEAK FIX (account sidebar) -------------------------
   omni.css has a global `nav{height:80px;align-items:center;
   justify-content:space-between}` for the SITE HEADER. The account sidebar is
   a <nav class="acct-nav">, so it inherits those three props (the design's own
   .acct-nav rule never sets them) — clamping the column to 80px so the buttons
   overflow/overlap and "Log out" lands on top. Restore the design's intent. */
.acct-nav {
  height: auto;
  align-items: stretch;
  justify-content: flex-start;
}
.acct-side .acct-navbtn { width: 100%; }
/* WooCommerce's default layout CSS floats + width-clamps the account nav/content
   (.woocommerce-MyAccount-navigation{float:left;width:35%}, -content 65%). Our
   .acct-wrap grid owns the layout, so neutralize them to fill their columns. */
.acct-wrap .woocommerce-MyAccount-navigation,
.acct-wrap .woocommerce-MyAccount-content {
  float: none; width: auto; margin: 0;
}

/* ============================================================
   LOGIN (logged-out my-account) — ONE centered card that toggles
   between a Sign-in panel and a Create-account panel.
   Replaces the old two-column (col2-set / u-column1|2) edge layout.
   Base .login-wrap / .login-card / .login-form styles live in omni.css;
   this block owns the single-card centering + the tab/panel toggle.
   ============================================================ */
/* .login-wrap already centers via flex in omni.css — reassert defensively so
   the single card sits centered horizontally + comfortably from the top. */
.omni-wc-content .login-wrap { display: flex; align-items: center; justify-content: center; }
/* single centered card ~440px (was two edge-flung cards) */
.omni-wc-content .login-card { width: 100%; max-width: 440px; margin-inline: auto; }
/* the form sits FLUSH inside the single card — kill the old per-form card box
   (border/padding/bg) that the two-column layout gave each form. */
.login-card form.login,
.login-card form.register {
  border: 0; border-radius: 0; padding: 0; background: transparent; margin: 0;
}

/* toggle tabs (top of the card) */
.login-tabs {
  display: flex; gap: 6px; background: var(--cloud); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px; margin: 6px 0 22px;
}
.login-tab {
  flex: 1 1 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  cursor: pointer; padding: 10px 12px; border-radius: 9px; font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600; color: var(--gray); letter-spacing: -.005em;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.login-tab:hover { color: var(--ink); }
.login-tab.is-active {
  background: #fff; color: var(--copper-deep); box-shadow: 0 1px 3px rgba(20,20,19,.08);
}

/* panels — only the active one shows (no reload) */
.login-panel { display: none; }
.login-panel.is-active { display: block; }

/* bottom switch link ("New here? Create an account" / "Already have an account? Sign in") */
.login-alt .login-switch { color: var(--copper-deep); font-weight: 600; text-decoration: none; cursor: pointer; }
.login-alt .login-switch:hover { text-decoration: underline; }

/* mobile: full-width card with padding (login-wrap keeps its 20px gutters) */
@media (max-width: 480px) {
  .omni-wc-content .login-card { max-width: 100%; }
}

/* ===================================================================
 * SHOP REDESIGN (2026-07-01) — Ventra-style image-forward cards + PDP polish.
 * Borderless cards, big vial image, "From $X", View->PDP; PDP full-scale
 * image, copper add-to-cart, qty +/- stepper.  (class .ocard = new shared card)
 * =================================================================== */
.ocard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:1100px){ .ocard-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .ocard-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
.ocard { display:flex; flex-direction:column; text-decoration:none; color:inherit; border:none;
  background:transparent; transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.ocard:hover { transform:translateY(-4px); }
.ocard-media { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; }
.ocard-media img, .ocard-media .ocard-img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.ocard:hover .ocard-media img { transform:scale(1.04); }
.ocard-mono { font-family:var(--font-mono,monospace); font-size:30px; font-weight:700; color:var(--copper,#BA9486); }
.ocard-media .coa { position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center;
  gap:5px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); padding:5px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--charcoal,#262626); }
.ocard-media .coa .g { width:6px; height:6px; border-radius:50%; background:var(--copper,#BA9486); }
.ocard-body { padding:15px 3px 6px; }
.ocard-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ocard-name { font-size:17.5px; font-weight:600; line-height:1.2; margin:0; color:var(--ink,#141413); }
.ocard-price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; white-space:nowrap; text-align:right; }
.ocard-price .ocard-from { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gray,#7F7C7C); margin-bottom:1px; }
.ocard-price .ocard-was { font-family:var(--font-mono,monospace); font-size:11.5px; font-weight:500; color:var(--gray,#7F7C7C); text-decoration:line-through; text-decoration-thickness:1px; }
.ocard-price .ocard-was .amount { color:var(--gray,#7F7C7C); }
.ocard-price .ocard-cur { font-family:var(--font-mono,monospace); font-size:17px; font-weight:700; color:var(--ink,#141413); }
.ocard-price .ocard-cur .amount { color:var(--ink,#141413); }
/* PDP size pills (replace WC variation <select> for a clean, unbroken selector) */
.omni-sizes { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 18px; }
.omni-size-pill { padding:10px 20px; border-radius:999px; border:1.5px solid rgba(20,20,19,.16); background:#fff; font-weight:600; font-size:14px; color:var(--ink,#141413); cursor:pointer; transition:all .18s; }
.omni-size-pill:hover { border-color:var(--copper,#BA9486); }
.omni-size-pill.active { background:var(--ink,#141413); border-color:var(--ink,#141413); color:#fff; }
.omni-atc table.variations.omni-piled { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); margin:-1px; }
.ocard-cat { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--copper-deep,#8E6757); margin:7px 0 13px; }
.ocard-view { display:block; text-align:center; padding:11px; border-radius:999px; border:1.5px solid rgba(20,20,19,.14);
  font-size:13.5px; font-weight:600; color:var(--ink,#141413); transition:all .2s; }
.ocard:hover .ocard-view { background:var(--copper,#BA9486); border-color:var(--copper,#BA9486); color:#fff; }
/* PDP full-scale image, no border box */
.pdp-media .pdp-imgwrap { background:#fff !important; border:none !important; border-radius:22px; padding:0 !important;
  overflow:hidden; box-shadow:0 20px 50px -30px rgba(20,20,19,.25) !important; }
.pdp-media .pdp-imgwrap .pdp-photo { width:100% !important; max-width:100% !important; max-height:none !important;
  height:auto !important; object-fit:cover; display:block; }
/* PDP copper add-to-cart (kills default/purple) */
.omni-atc .single_add_to_cart_button, .omni-wc .omni-atc .single_add_to_cart_button,
.omni-atc button.single_add_to_cart_button { background:var(--copper,#BA9486) !important; color:#fff !important;
  border:none !important; border-radius:999px !important; padding:14px 32px !important; font-weight:600 !important;
  font-size:15px !important; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; }
.omni-atc .single_add_to_cart_button:hover { background:var(--copper-deep,#8E6757) !important; transform:translateY(-1px); }
/* PDP qty +/- stepper */
.omni-qty { display:inline-flex; align-items:stretch; border:1.5px solid rgba(20,20,19,.14); border-radius:999px;
  overflow:hidden; height:50px; background:#fff; }
.omni-qty .omni-qty-btn { width:42px; border:none; background:transparent; font-size:20px; line-height:1;
  color:var(--charcoal,#262626); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s; }
.omni-qty .omni-qty-btn:hover { color:var(--copper-deep,#8E6757); }
.omni-atc .omni-qty .qty { width:42px !important; border:none !important; background:transparent !important;
  text-align:center !important; font-weight:600; font-size:15px; -moz-appearance:textfield; box-shadow:none !important; padding:0 !important; }

/* --- SHOP REDESIGN fixes (2026-07-01 pm) --- */
/* Equal-height cards: pin the View button to the bottom so rows align even when
   a product name wraps to 2 lines. */
.ocard-grid { align-items:stretch; }
.ocard { height:100%; }
.ocard-body { display:flex; flex-direction:column; flex:1 1 auto; }
.ocard-name { min-height:2.3em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ocard-view { margin-top:auto; }
/* PDP variation price: clean, layered (was/now spaced, not cramped) */
.omni-atc .woocommerce-variation-price { margin:6px 0 16px; }
.omni-atc .woocommerce-variation-price .price { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.omni-atc .woocommerce-variation-price del { opacity:1; order:2; }
.omni-atc .woocommerce-variation-price del .amount { font-size:16px; font-weight:500; color:var(--gray,#7F7C7C); text-decoration:line-through; text-decoration-thickness:1px; }
.omni-atc .woocommerce-variation-price ins { text-decoration:none; background:none; order:1; }
.omni-atc .woocommerce-variation-price ins .amount,
.omni-atc .woocommerce-variation-price > .amount { font-family:var(--font-mono,monospace); font-size:27px; font-weight:700; color:var(--ink,#141413); }

/* --- CERTIFICATES + MOBILE fixes (2026-07-01) --- */
/* COA row: real product vial image (server-rendered) on a clean white tile */
.coa-row .ci { background:#fff; }
.coa-row .ci .coa-vial { height:46px; width:auto; object-fit:contain; display:block; }
/* Mobile education tab strip: show a subtle NEUTRAL scroll indicator so it's
   clearly swipeable (the scrollbar was hidden -> it read as broken). */
@media (max-width:820px) {
  .edu-tabnav { scrollbar-width:thin !important; scrollbar-color:rgba(20,20,19,.22) transparent; padding-bottom:10px; }
  .edu-tabnav::-webkit-scrollbar { display:block !important; height:4px; }
  .edu-tabnav::-webkit-scrollbar-thumb { background:rgba(20,20,19,.22); border-radius:99px; }
  .edu-tabnav::-webkit-scrollbar-track { background:rgba(20,20,19,.06); border-radius:99px; }
}

/* PDP accordion: raise the open-state height cap so the longer compound-research
   descriptions aren't clipped (base omni.css caps .ps-body at 600px, which cut
   off multi-paragraph Details copy, especially on mobile). */
.pdp-section.open .ps-body { max-height: 1600px; }