/* ============================================================
   Zenova Longevity — WooCommerce store layer
   Dark, high-contrast styling. zw-* = zenova-woo components.
   Iridescent gradient is reserved for CTAs, per brand rules.
   ============================================================ */

:root {
  --zw-bg: #f8f9fb;
  --zw-card: #ffffff;
  --zw-card2: #ffffff;
  --zw-input: #f1f5f9;
  --zw-border: rgba(15, 23, 42, 0.12);
  --zw-border-strong: rgba(15, 23, 42, 0.28);
  --zw-text: #0f172a;
  --zw-text-soft: #475569;
  --zw-text-dim: #475569;
  --zw-silver: #334155;
  --zw-holo: #0f172a;
}

/* ------------------------------------------------------------
   WooCommerce pages load unlayered plugin CSS (woocommerce.css,
   wc-blocks.css) that overrides Tailwind v4's @layer utilities
   (e.g. img { height: auto } beats .h-14). Re-assert the theme
   nav frame explicitly on those pages.
   ------------------------------------------------------------ */
.zw-shop-shell nav {
  position: sticky;
  top: 0;
  z-index: 50;
}
/* zv2: nav frame rules removed */

/* ---------------- Nav cart / account ---------------- */
.zw-navlink {
  display: none;
  position: relative;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(15, 23, 42, 0.22);
  background-color: rgba(15, 23, 42, 0.06);
  color: #334155;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.zw-navlink:hover {
  background-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
.zw-navaccount {
  border-color: transparent;
  background-color: transparent;
  color: #64748b;
}
@media (min-width: 640px) {
  .zw-navlink {
    display: inline-flex;
  }
}
.zw-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: #0f172a;
  color: #f8f9fb;
  border: 1px solid #f8f9fb;
}
.zw-badge[hidden] {
  display: none;
}

/* ---------------- Mini-cart hover dropdown ---------------- */
.zw-cartmenu {
  position: relative;
  display: inline-block;
}
.zw-cartpanel {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 10px;
  display: none;
  z-index: 90;
}
@media (hover: hover) {
  .zw-cartmenu:hover .zw-cartpanel,
  .zw-cartmenu:focus-within .zw-cartpanel {
    display: block;
  }
}
.zw-cartpanel-card {
  width: 320px;
  background: #f1f5f9;
  border: 1px solid var(--zw-border-strong);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.zw-minicart-empty {
  margin: 4px;
  font-size: 13px;
  color: var(--zw-text-dim);
  text-align: center;
}
.zw-minicart-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}
.zw-minicart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px dashed var(--zw-border);
}
.zw-minicart-row:last-child {
  border-bottom: 0;
}
.zw-minicart-thumb,
.zw-shop-shell nav .zw-minicart-thumb,
nav .zw-cartpanel img.zw-minicart-thumb {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  background: #f1f5f9;
  border-radius: 8px;
  flex: 0 0 auto;
}
.zw-minicart-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.zw-minicart-qty {
  color: var(--zw-text-dim);
  font-weight: 500;
  font-size: 12px;
}
.zw-minicart-price {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.zw-minicart-sub {
  display: flex;
  justify-content: space-between;
  padding: 10px 2px;
  border-top: 1px solid var(--zw-border);
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
}
.zw-minicart-sub span:last-child {
  font-weight: 800;
  color: #0f172a;
}
.zw-minicart-btns {
  display: flex;
  gap: 8px;
}
.zw-minicart-view,
.zw-minicart-checkout {
  flex: 1 1 0;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.zw-minicart-view {
  border: 1px solid var(--zw-border-strong);
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
}
.zw-minicart-view:hover {
  background: rgba(15, 23, 42, 0.18);
  color: #fff;
}
.zw-minicart-checkout {
  background: var(--zw-holo);
  color: #f8f9fb;
}
.zw-minicart-checkout:hover {
  filter: brightness(1.1);
  color: #f8f9fb;
}

/* ---------------- Cycle stack row vial thumbnails ---------------- */
.zw-stackrow-flex {
  display: flex;
  align-items: center;
  gap: 14px;
}
.zw-stackthumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.zw-stackrow-body {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---------------- Floating cart (small screens) ---------------- */
.zw-fabcart {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: none;
  place-items: center;
  background-color: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--zw-border-strong);
  color: #0f172a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}
.zw-fabcart .zw-badge {
  top: -4px;
  right: -4px;
}
@media (max-width: 639.98px) {
  .zw-fabcart {
    display: grid;
  }
}

/* ---------------- Home card pricing tiles + Add to Cart (.ca parity) ---------------- */
.zw-cardfoot {
  flex-direction: column;
  align-items: stretch !important;
  gap: 10px !important;
}
.zw-cardbuy {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.zw-optrow {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.zw-cardopt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--zw-border-strong);
  background: rgba(15, 23, 42, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s;
}
.zw-cardopt:hover {
  border-color: rgba(15, 23, 42, 0.45);
}
.zw-cardopt.is-sel {
  border-color: rgba(15, 23, 42, 0.7);
  background: rgba(15, 23, 42, 0.10);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35);
}
.zw-cardopt-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zw-text-dim);
  line-height: 1.25;
}
.zw-cardopt-price {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  white-space: nowrap;
}
.zw-cardopt-bundle .zw-cardopt-price {
  color: #0f172a;
  background: none;
}
.zw-cardadd {
  flex: 0 0 auto;
  align-self: stretch;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
  transition: filter 0.18s, box-shadow 0.18s, transform 0.1s;
}
.zw-cardadd:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.30);
}
.zw-cardadd:active {
  transform: scale(0.97);
}
@media (max-width: 560px) {
  .zw-cardbuy {
    flex-wrap: wrap;
  }
  .zw-cardadd {
    width: 100%;
  }
}

/* Show the FULL peptide description on home cards (was clamped to 3 lines with "…") */
.zv-card .line-clamp-3 {
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  display: block;
  overflow: visible;
}

/* Half-life line removed at source (home.php) as of theme 1.5.8 — the old
   `.zv-card .mt-4.pt-4 > span:first-child { display:none }` rule was DELETED
   because, with the half-life span gone, span:first-child became the buy box
   (price + Add to Cart) and this rule was hiding it. */

/* ---------------- Buy box (peptide profile pages) ---------------- */
.zw-buybox {
  border: 1px solid var(--zw-border-strong);
  background:
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box,
    linear-gradient(#e2e8f0, #e2e8f0) border-box;
  border-radius: 16px;
  padding: 20px;
  margin: 0 0 32px;
}
.zw-buybox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.zw-buybox-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zw-text-dim);
  margin: 0 0 4px;
}
.zw-price,
.zw-price .amount {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}
.zw-price del,
.zw-price del .amount {
  font-size: 16px;
  font-weight: 500;
  color: var(--zw-text-dim);
}
.zw-stock {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.zw-stock.zw-in {
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.4);
  background: rgba(22, 101, 52, 0.25);
}
.zw-stock.zw-out {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.4);
  background: rgba(127, 29, 29, 0.25);
}
.zw-buyform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 12px;
}
.zw-select,
.zw-qty {
  background-color: var(--zw-input);
  border: 1px solid var(--zw-border-strong);
  color: var(--zw-text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}
.zw-select {
  flex: 1 1 220px;
  cursor: pointer;
}
.zw-select option {
  background: #ffffff;
  color: #0f172a;
}
.zw-qty {
  width: 84px;
  text-align: center;
}
.zw-add {
  flex: 1 1 160px;
  padding: 12px 22px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #f8f9fb;
  background: #0f172a;
  transition: filter 0.2s, transform 0.1s;
}
.zw-add:hover {
  filter: brightness(1.1);
}
.zw-add:active {
  transform: scale(0.98);
}
.zw-buybox-note {
  font-size: 12px;
  color: var(--zw-text-dim);
  margin: 0;
}

/* ============================================================
   WooCommerce pages (cart / checkout / account) — dark overrides
   Scoped to .zw-page (page.php wrapper).
   ============================================================ */
.zw-page {
  color: var(--zw-text-soft);
}
.zw-page a {
  color: var(--zw-silver);
}
.zw-page a:hover {
  color: #0f172a;
}
.zw-page h2,
.zw-page h3 {
  color: #0f172a;
  font-weight: 700;
  margin: 1.2em 0 0.6em;
}
.zw-page p {
  margin-bottom: 0.8em;
}
.zw-page .amount,
.zw-page .woocommerce-Price-amount {
  color: #0f172a;
  font-weight: 600;
}

/* Notices */
.zw-page .woocommerce-message,
.zw-page .woocommerce-info,
.zw-page .woocommerce-error,
.zw-page .wc-block-components-notice-banner {
  background: var(--zw-card) !important;
  border: 1px solid var(--zw-border-strong) !important;
  border-top: 3px solid #0369a1 !important;
  color: #0f172a !important;
  border-radius: 12px;
  padding: 16px 20px 16px 48px !important;
  margin-bottom: 20px;
  list-style: none;
}
.zw-page .woocommerce-error {
  border-top-color: #fca5a5 !important;
}
.zw-page .woocommerce-message::before,
.zw-page .woocommerce-info::before {
  color: #0369a1;
}
.zw-page .woocommerce-error::before {
  color: #fca5a5;
}
.zw-page .woocommerce-message .button,
.zw-page .woocommerce-info .button,
.zw-page .woocommerce-error .button {
  background: transparent;
  color: var(--zw-silver);
  border: 1px solid var(--zw-border-strong);
}

/* Tables (cart, totals, orders) */
.zw-page table.shop_table {
  background: var(--zw-card);
  border: 1px solid var(--zw-border) !important;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.zw-page table.shop_table th,
.zw-page table.shop_table td {
  border-color: var(--zw-border) !important;
  color: var(--zw-text-soft);
  padding: 14px 16px;
  background: transparent;
}
.zw-page table.shop_table th {
  color: #0f172a;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.zw-page table.shop_table td.product-name,
.zw-page table.shop_table td.product-name a {
  color: #0f172a;
  font-weight: 600;
}
.zw-page .cart_item td {
  background: transparent;
}
.zw-page td.product-remove a.remove {
  /* was rose-300 (#fca5a5) from the dark build - 1.9:1 on the white cart */
  color: #b91c1c !important;
  background: transparent;
  border: 1px solid rgba(185, 28, 28, 0.35);
  transition: background-color 0.2s, color 0.2s;
}
.zw-page td.product-remove a.remove:hover {
  background: #b91c1c !important;
  color: #fff !important;
}
.zw-page table.shop_table img {
  border-radius: 8px;
  background: #f1f5f9;
}
.zw-page .product-quantity .qty {
  width: 72px;
  text-align: center;
}

/* Inputs */
.zw-page input.input-text,
.zw-page input[type="text"],
.zw-page input[type="email"],
.zw-page input[type="tel"],
.zw-page input[type="password"],
.zw-page input[type="number"],
.zw-page textarea,
.zw-page select {
  background-color: var(--zw-input) !important;
  border: 1px solid var(--zw-border-strong) !important;
  color: var(--zw-text) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 15px;
  box-shadow: none !important;
}
.zw-page input::placeholder,
.zw-page textarea::placeholder {
  color: #565e6c;
}
.zw-page input:focus,
.zw-page textarea:focus,
.zw-page select:focus {
  outline: none;
  border-color: #0369a1 !important;
}
.zw-page select option {
  background: #ffffff;
  color: #0f172a;
}
.zw-page .form-row label {
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}
.zw-page .required {
  color: #fca5a5;
}

/* Select2 / selectWoo (country & province dropdowns) */
.zw-page .select2-container--default .select2-selection--single {
  background-color: var(--zw-input);
  border: 1px solid var(--zw-border-strong);
  border-radius: 10px;
  height: 44px;
}
.zw-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--zw-text);
  line-height: 42px;
  padding-left: 14px;
}
.zw-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}
.select2-dropdown {
  background-color: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.28);
  color: #0f172a;
}
.select2-container--default .select2-results__option {
  color: #0f172a;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(15, 23, 42, 0.18);
  color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.28);
  color: #0f172a;
}

/* Buttons */
.zw-page .button,
.zw-page button.button,
.zw-page input.button,
.zw-page .woocommerce-button {
  background: rgba(15, 23, 42, 0.10) !important;
  color: #0f172a !important;
  border: 1px solid var(--zw-border-strong) !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}
.zw-page .button:hover {
  background: rgba(15, 23, 42, 0.22) !important;
  color: #fff !important;
}
.zw-page .button.alt,
.zw-page #place_order,
.zw-page .checkout-button,
.zw-page button[name="calc_shipping"],
.zw-page .woocommerce-form-login__submit,
.zw-page .woocommerce-form-register__submit {
  background: #0f172a !important;
  color: #f8f9fb !important;
  border: none !important;
  font-weight: 700 !important;
}
.zw-page .button.alt:hover,
.zw-page #place_order:hover,
.zw-page .checkout-button:hover {
  filter: brightness(1.1);
  color: #f8f9fb !important;
}
.zw-page .button:disabled,
.zw-page .button[disabled] {
  opacity: 0.5;
}

/* Cart totals / collaterals */
.zw-page .cart_totals,
.zw-page .cart-collaterals .cart_totals {
  color: var(--zw-text-soft);
}
.zw-page .cart_totals h2 {
  font-size: 18px;
}
.zw-page .woocommerce-shipping-destination {
  color: var(--zw-text-dim);
}

/* Cart actions row: coupon + update (Woo core squishes the coupon input to 80px) */
.zw-page table.shop_table td.actions {
  padding: 16px;
}
.zw-page table.shop_table td.actions .coupon {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
}
.zw-page table.shop_table td.actions .coupon .input-text,
.woocommerce-cart .zw-page table.cart td.actions .coupon .input-text {
  width: 200px !important;
  min-width: 0;
}
@media (max-width: 560px) {
  .zw-page table.shop_table td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .zw-page table.shop_table td.actions .coupon .input-text {
    flex: 1 1 160px;
  }
}
.zw-page table.shop_table td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Cart shipping calculator: compact panel instead of full-size raw fields */
.zw-page .woocommerce-shipping-calculator {
  margin: 6px 0 0;
}
.zw-page .woocommerce-shipping-calculator .shipping-calculator-button {
  font-size: 13px;
  color: var(--zw-silver);
}
.zw-page .shipping-calculator-form {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--zw-border);
  border-radius: 12px;
  background: var(--zw-card2);
}
.zw-page .shipping-calculator-form .form-row {
  margin: 0 0 10px;
  padding: 0;
}
.zw-page .shipping-calculator-form label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}
.zw-page .shipping-calculator-form input,
.zw-page .shipping-calculator-form select {
  width: 100%;
  padding: 8px 10px !important;
  font-size: 13px;
  border-radius: 8px !important;
}
.zw-page .shipping-calculator-form .select2-container--default .select2-selection--single {
  height: 37px;
  border-radius: 8px;
}
.zw-page .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px;
  padding-left: 10px;
  font-size: 13px;
}
.zw-page .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 35px;
}
.zw-page .shipping-calculator-form button[name="calc_shipping"] {
  width: 100%;
  padding: 9px 16px !important;
  font-size: 14px;
}

/* Checkout */
.zw-page #customer_details,
.zw-page #order_review {
  color: var(--zw-text-soft);
}
.zw-page #order_review_heading,
.zw-page #ship-to-different-address {
  color: #0f172a;
}

/* Checkout: classic Woo layout — billing form left, Your Order box right */
.zw-page form.woocommerce-checkout {
  display: block;
}
@media (min-width: 1000px) {
  .zw-page form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .zw-page form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .zw-page form.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 14px;
  }
  .zw-page form.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 90px;
  }
}
.zw-page #customer_details.col2-set {
  width: 100%;
}
.zw-page #customer_details .col-1,
.zw-page #customer_details .col-2 {
  float: none;
  width: 100%;
  background: var(--zw-card);
  border: 1px solid var(--zw-border);
  border-radius: 14px;
  padding: 22px 20px;
  margin-bottom: 24px;
}

/* Your Order: single card containing totals table + payment */
.zw-page #order_review {
  background: var(--zw-card);
  border: 1px solid var(--zw-border-strong);
  border-radius: 14px;
  padding: 18px;
}
.zw-page #order_review table.shop_table {
  background: transparent;
  border: 0 !important;
  margin-bottom: 4px;
}
.zw-page #order_review table.shop_table th,
.zw-page #order_review table.shop_table td {
  padding: 12px 8px;
}
.zw-page #order_review #payment {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--zw-border);
  margin-top: 8px;
}
.zw-page #order_review #payment ul.payment_methods {
  padding: 16px 8px;
}
.zw-page #order_review #payment .form-row.place-order {
  padding: 8px;
}
.zw-page #order_review #place_order {
  display: block;
  width: 100%;
  padding: 14px 20px !important;
  font-size: 16px !important;
}
.zw-page .woocommerce-billing-fields > h3,
.zw-page .woocommerce-shipping-fields > h3,
.zw-page #order_review_heading {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #0f172a;
}
.zw-page .woocommerce-billing-fields > h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--zw-border);
}
.zw-page #order_review_heading {
  margin-top: 8px;
}
.zw-page .form-row {
  margin: 0 0 14px;
}
.zw-page .form-row label {
  display: block;
  margin-bottom: 5px;
}
.zw-page .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
.zw-page .form-row input.input-text,
.zw-page .form-row select:not(.select2-hidden-accessible),
.zw-page .form-row textarea,
.zw-page .form-row .select2-container {
  width: 100% !important;
}

/* Ship to a different address: prominent toggle row (checkbox checked = delivery form open) */
.zw-page #ship-to-different-address {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--zw-border);
}
.zw-page #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
}
.zw-page #ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0369a1;
  cursor: pointer;
}
.zw-page .woocommerce-additional-fields > h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 4px 0 10px;
  color: #0f172a;
}

/* Shipping method radios in the order review table */
.zw-page ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zw-page ul#shipping_method li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.zw-page ul#shipping_method input[type="radio"] {
  accent-color: #0369a1;
}
.zw-page #payment {
  background: var(--zw-card) !important;
  border: 1px solid var(--zw-border);
  border-radius: 14px;
}
.zw-page #payment div.payment_box {
  background: var(--zw-card2) !important;
  color: #334155 !important;
}
.zw-page #payment div.payment_box::before {
  border-bottom-color: var(--zw-card2) !important;
}
.zw-page #payment ul.payment_methods {
  border-bottom: 1px solid var(--zw-border) !important;
  padding: 16px;
}
.zw-page #payment ul.payment_methods li {
  color: #0f172a;
}
.zw-page #payment ul.payment_methods li label img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0 0;
  max-height: 24px;
  width: auto;
}
.zw-page .woocommerce-terms-and-conditions-wrapper,
.zw-page .woocommerce-privacy-policy-text {
  color: var(--zw-text-dim);
  font-size: 13px;
}

/* Account */
.zw-page .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zw-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #475569;
  text-decoration: none;
}
.zw-page .woocommerce-MyAccount-navigation li.is-active a,
.zw-page .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(15, 23, 42, 0.10);
  border-color: var(--zw-border);
  color: #0f172a;
}
.zw-page .woocommerce-form-login,
.zw-page .woocommerce-form-register {
  background: var(--zw-card);
  border: 1px solid var(--zw-border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  max-width: 480px;
}
.zw-page .u-columns.col2-set .u-column1,
.zw-page .u-columns.col2-set .u-column2 {
  float: none;
  width: 100%;
  max-width: 480px;
}
.zw-page .woocommerce-form__label-for-checkbox span {
  color: #475569;
}
.zw-page .lost_password a {
  color: var(--zw-text-dim);
}

/* Order received / order details */
.zw-page .woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0 0 24px;
}
.zw-page .woocommerce-order-overview li {
  background: var(--zw-card);
  border: 1px solid var(--zw-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zw-text-dim);
  border-right-width: 1px !important;
  margin: 0 !important;
}
.zw-page .woocommerce-order-overview li strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}
.zw-page .wc-bacs-bank-details-heading,
.zw-page .woocommerce-bacs-bank-details {
  color: #0f172a;
}
.zw-page .woocommerce-customer-details address {
  border: 1px solid var(--zw-border) !important;
  border-radius: 12px !important;
  background: var(--zw-card);
  color: #475569;
  padding: 16px !important;
}

/* Empty cart */
.zw-page .cart-empty {
  border-top-color: #0369a1 !important;
}
.zw-page .return-to-shop .button {
  margin-top: 8px;
}

/* Mobile cart table stacking fix */
@media (max-width: 768px) {
  .zw-page table.shop_table_responsive tr {
    border-bottom: 1px solid var(--zw-border);
  }
  .zw-page table.shop_table_responsive td {
    background: transparent !important;
  }
  .zw-page table.shop_table_responsive td::before {
    color: #0f172a;
  }
}

/* ---------------- Cycle stack bundles (/cycles) ---------------- */
.zw-stackbox {
  margin-top: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box,
    linear-gradient(#e2e8f0, #e2e8f0) border-box;
  border-radius: 16px;
  padding: 18px;
}
.zw-stackrows {
  margin-top: 6px;
}
.zw-stackrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--zw-border);
}
.zw-stackrow:last-child {
  border-bottom: 0;
}
.zw-stackname {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}
.zw-stackprice {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.zw-stacksel {
  flex: 0 1 230px;
  padding: 8px 10px;
  font-size: 13px;
}
.zw-stackmissing {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--zw-text-dim);
}
.zw-stackfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--zw-border);
}
.zw-stacktotal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zw-text-dim);
  margin-bottom: 2px;
}
.zw-stacktotal {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}
.zw-stackadd {
  flex: 0 1 auto;
}
.zw-stackbox .zw-buybox-note {
  margin-top: 12px;
}

/* ---------------- Welcome popup (10% off first order) ---------------- */
.zw-pop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}
.zw-pop[hidden] {
  display: none;
}
.zw-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
.zw-pop-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(241, 245, 249, 0.99), rgba(241, 245, 249, 0.99)) padding-box,
    linear-gradient(135deg, rgba(224, 192, 255, 0.55), rgba(128, 208, 255, 0.55), rgba(160, 255, 192, 0.55)) border-box;
  border-radius: 20px;
  padding: 30px 28px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  animation: zw-pop-in 0.35s ease-out;
}
@keyframes zw-pop-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zw-pop-card {
    animation: none;
  }
}
.zw-pop-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--zw-border-strong);
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.zw-pop-x:hover {
  background: rgba(15, 23, 42, 0.2);
  color: #fff;
}
.zw-pop-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zw-silver);
}
.zw-pop-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}
.zw-pop-holo {
  color: #0f172a;
}
.zw-pop-sub {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--zw-text-soft);
}
.zw-pop-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.zw-pop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.zw-pop-email {
  flex: 1 1 200px;
  background-color: var(--zw-input);
  border: 1px solid var(--zw-border-strong);
  color: var(--zw-text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}
.zw-pop-email::placeholder {
  color: #565e6c;
}
.zw-pop-email:focus {
  outline: none;
  border-color: #0369a1;
}
.zw-pop-btn {
  flex: 0 1 auto;
}
.zw-pop-err {
  margin: 10px 0 0;
  font-size: 13px;
  color: #fca5a5;
}
.zw-pop-done {
  margin-top: 4px;
}
.zw-pop-code-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zw-text-dim);
}
.zw-pop-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.zw-pop-code {
  flex: 1 1 auto;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed var(--zw-border-strong);
  background: var(--zw-input);
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
}
.zw-pop-copy {
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--zw-border-strong);
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.zw-pop-copy:hover {
  background: #334155;
  color: #f8f9fb;
}
.zw-pop-fine {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--zw-text-dim);
}

/* ---------------- Universal footer: signup + small disclaimer ---------------- */
.zw-footsub {
  background-color: #f8f9fb;
  padding: 40px 20px 28px;
}
.zw-footsub-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(241, 245, 249, 0.99), rgba(241, 245, 249, 0.99)) padding-box,
    linear-gradient(#e2e8f0, #e2e8f0) border-box;
  border-radius: 18px;
  padding: 26px 24px 22px;
}
.zw-footsub-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}
.zw-footsub-row {
  justify-content: center;
}
.zw-footsub-coderow {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.zw-sitefoot {
  max-width: 1120px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  color: #4d5461;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.zw-sitefoot-logo {
  height: 32px;
  width: 32px;
  border-radius: 999px;
  object-fit: cover;
  margin: 0 auto 10px;
  opacity: 0.6;
  display: block;
}
.zw-sitefoot-name {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #565e6c;
}
.zw-sitefoot-line {
  margin: 0;
}

/* Billing-descriptor note under the credit-card gateway at checkout */
.zw-billing-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--zw-text-dim);
}

/* ============================================================
   Checkout coupon — always expanded + styled input box
   (replaces the hidden "Have a coupon? Click here" toggle)
   ============================================================ */

/* Hide the default collapse toggle notice — the box is always open now */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none !important;
}

/* Force the coupon form visible (beats Woo's inline style="display:none") */
.woocommerce-checkout form.checkout_coupon {
  display: block !important;
  position: relative;
  margin: 0 0 26px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,251,.94));
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Turn the intro paragraph into a small uppercase heading */
.woocommerce-checkout form.checkout_coupon > p:first-of-type {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #475569;
}

/* Input + button side by side */
.woocommerce-checkout form.checkout_coupon .form-row {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.woocommerce-checkout form.checkout_coupon .form-row-first {
  width: min(360px, 60%);
  margin-right: 12px;
}

/* The input field */
.woocommerce-checkout form.checkout_coupon input#coupon_code {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-size: 15px;
  color: #eef1f6;
  background: #f8f9fb;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-checkout form.checkout_coupon input#coupon_code::placeholder {
  color: #6b7280;
}
.woocommerce-checkout form.checkout_coupon input#coupon_code:focus {
  outline: none;
  border-color: rgba(140,190,255,.55);
  box-shadow: 0 0 0 3px rgba(120,170,255,.18), 0 0 22px rgba(120,170,255,.14);
}

/* Apply button — iridescent gradient to match theme CTAs */
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
  height: 52px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f8f9fb;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(120deg, #c9b3ff, #8fd0ff 45%, #8affc9);
  background-size: 180% 100%;
  box-shadow: 0 8px 22px rgba(120,170,255,.22);
  transition: background-position .5s ease, transform .15s ease, box-shadow .2s ease;
}
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(120,170,255,.32);
}

/* Mobile: stack input over button, both full width */
@media (max-width: 560px) {
  .woocommerce-checkout form.checkout_coupon .form-row {
    display: block;
    width: 100%;
    margin: 0 0 12px;
  }
  .woocommerce-checkout form.checkout_coupon .form-row-last {
    margin-bottom: 0;
  }
  .woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: 100%;
  }
}

/* ============================================================
   Buy box — .ca reference PRICING layout: per-size cards +
   10-pack bundle cards (replaces the old size dropdown).
   ============================================================ */
.zw-pricing {
  margin: 18px 0 0;
}
.zw-pricing + .zw-pricing {
  margin-top: 20px;
}
.zw-pricing-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zw-text-dim);
}
.zw-save {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #86efac;
  border: 1px solid rgba(134, 239, 172, 0.4);
  background: rgba(22, 101, 52, 0.22);
  padding: 3px 9px;
  border-radius: 999px;
}
.zw-optgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.zw-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--zw-border-strong);
  background: rgba(15, 23, 42, 0.04);
}
.zw-opt-size {
  font-size: 13px;
  font-weight: 500;
  color: var(--zw-text-dim);
}
.zw-opt-price {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  background: none;
}
.zw-opt-was {
  font-size: 14px;
  font-weight: 500;
  margin-left: 6px;
  color: var(--zw-text-dim);
  -webkit-text-fill-color: var(--zw-text-dim); /* undo parent's transparent fill */
  text-decoration: line-through;
}
.zw-opt-add.zw-add {
  width: 100%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  text-decoration: none;
}
.zw-cart-ico {
  flex: 0 0 auto;
}
@media (max-width: 480px) {
  .zw-optgrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Home "Most Popular" rail  (added 2026-07-27)
   Sales-ranked strip between the category pills and the catalog
   grid. Mirrors the design reference: horizontal snap-scroll of
   compact vial cards showing "From $x".
   ============================================================ */
.zv-pop {
  margin-bottom: 2rem;
  padding: 16px 16px 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  background: #f1f5f9;
}
.zv-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 14px;
}
.zv-pop-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.28) transparent;
}
.zv-pop-rail::-webkit-scrollbar { height: 6px; }
.zv-pop-rail::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.28); border-radius: 99px; }
.zv-pop-rail::-webkit-scrollbar-track { background: transparent; }
.zv-pop-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 144px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.18s, background-color 0.18s;
}
.zv-pop-card:hover { border-color: rgba(15,23,42,0.35); background: #ffffff; }
.zv-pop-imgwrap {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  overflow: hidden;
}
.zv-pop-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.zv-pop-card:hover .zv-pop-img { transform: scale(1.03); }
.zv-pop-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.zv-pop-name { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.25; }
.zv-pop-price { font-size: 12.5px; color: #6f7787; display: flex; align-items: baseline; gap: 5px; }
.zv-pop-price b {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  background: none;
}
@media (min-width: 640px) {
  .zv-pop-card { width: 176px; }
  .zv-pop-imgwrap { height: 96px; }
}

/* ============================================================
   Free-shipping bar under the hero (restored 2026-07-27).
   Threshold is read live from the WooCommerce free_shipping
   method, so it can never drift from the actual cart rule.
   ============================================================ */
.zv-shipbar {
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
}
.zv-shipbar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0f172a;
  line-height: 1.35;
}
.zv-shipbar-inner svg { flex: 0 0 auto; color: #334155; }
.zv-shipbar-amt {
  color: #0f172a;
  background: none;
  font-weight: 800;
}
@media (max-width: 640px) {
  .zv-shipbar-inner { font-size: 10.5px; letter-spacing: 0.10em; padding: 10px 12px; gap: 8px; }
}

/* ============================================================
   Phone catalog grid: two cards per row (.ca parity, 2026-07-29)
   Client ask: "on the home screen ... just for the phone, makes
   it easier to see more" — the reference (.ca build)
   shows two compact cards per row on a phone, ours showed one
   full-bleed card per screen.

   home.php now emits grid-cols-2 on phones; everything below
   just shrinks the card body so two fit at 360-430px without
   the type turning to mush. Scoped to .zv-catgrid so the nav
   "popular" strip, cycle cards and profile pages are untouched.
   ============================================================ */
@media (max-width: 639.98px) {
  .zv-catgrid { gap: 10px; }

  /* Vial image band (Tailwind .h-32 = 128px) */
  .zv-catgrid .zv-card .h-32 { height: 86px; }

  /* Card body padding (Tailwind .p-5 = 20px) */
  .zv-catgrid .zv-card .p-5 { padding: 12px 11px 13px; }

  /* Title + chevron */
  .zv-catgrid .zv-card h2 { font-size: 13px; line-height: 1.25; }
  .zv-catgrid .zv-card h2 + svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .zv-catgrid .zv-card .mb-3 { margin-bottom: 7px; }

  /* Category badge */
  .zv-catgrid .zv-card .rounded-full {
    font-size: 9px;
    padding: 2px 7px;
    line-height: 1.3;
  }

  /* Aliases line — two lines max, then ellipsis.
     MUST stay scoped to the <p>: the card FOOT div carries the same
     text-xs/text-stone-600 utilities, and clamping it clips the price
     tiles on real WebKit/iOS (the '$…' bug, root-caused 2026-08-09). */
  .zv-catgrid .zv-card p.text-xs.text-stone-600 {
    font-size: 9.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Description — re-clamp to 3 lines on phones (desktop keeps the
     full text; see the .zv-card .line-clamp-3 unclamp rule above).
     max-height is required as well as the clamp: the paragraph carries
     Tailwind's .flex-1, so in a stretched grid row its box grows past
     three lines and the un-clamped lines bleed in under the ellipsis. */
  .zv-catgrid .zv-card .line-clamp-3 {
    font-size: 10.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 0 0 auto;
    max-height: 4.5em; /* 3 lines x line-height 1.5 */
  }

  /* Footer / buy box — margin-top:auto pins it to the bottom of the card so
     the Add to Cart buttons line up across a row even though the clamped
     descriptions no longer stretch to fill the height. */
  .zv-catgrid .zw-cardfoot,
  .zv-catgrid .zv-card .mt-4.pt-4 {
    margin-top: auto;
    padding-top: 10px;
    gap: 8px !important;
  }
  .zv-catgrid .zw-optrow { flex-wrap: wrap; gap: 6px; }
  .zv-catgrid .zw-cardopt {
    flex: 1 1 42%;
    padding: 7px 8px;
    border-radius: 10px;
    gap: 3px;
  }
  .zv-catgrid .zw-cardopt-lbl { font-size: 8px; letter-spacing: 0.06em; }
  .zv-catgrid .zw-cardopt-price { font-size: 12.5px; }
  .zv-catgrid .zw-cardadd {
    padding: 8px 10px;
    font-size: 11px;
    border-radius: 10px;
  }

  /* "Full Profile →" fallback (cards with no purchasable product) */
  .zv-catgrid .zv-card .mt-4.pt-4 .ml-auto { font-size: 10px; }
}

/* Very narrow phones (iPhone SE / mini): one more notch down. */
@media (max-width: 374.98px) {
  .zv-catgrid { gap: 8px; }
  .zv-catgrid .zv-card .p-5 { padding: 10px 9px 11px; }
  .zv-catgrid .zv-card h2 { font-size: 12px; }
  .zv-catgrid .zw-cardopt { flex: 1 1 100%; }
}

/* --- Long-form WP page content (page.php .zw-content): privacy, terms, shipping,
       returns. Added 2026-08-03 - there was NO styling here, so default UA link
       blue (#0000EE) rendered on the #f8f9fb background = unreadable. --- */
.zw-content { color: #0f172a; font-size: 1rem; line-height: 1.75; }
.zw-content .zw-lead { font-size: 1.125rem; color: #0f172a; }
.zw-content h2 {
  margin: 2.25rem 0 .85rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: .01em;
}
.zw-content h2:first-child { margin-top: 0; }
.zw-content h3 { margin: 1.5rem 0 .6rem; font-size: 1.05rem; font-weight: 600; color: #0f172a; }
.zw-content p { margin: 0 0 1.05rem; }
.zw-content strong { color: #0f172a; font-weight: 600; }
.zw-content em { color: #475569; }
.zw-content ul, .zw-content ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.zw-content li { margin-bottom: .5rem; }
.zw-content ul li::marker { color: #64748b; }
.zw-content ol li::marker { color: #64748b; }
.zw-content a {
  color: #0369a1;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(3, 105, 161, .45);
  transition: color .15s, text-decoration-color .15s;
}
.zw-content a:hover { color: #075985; text-decoration-color: #075985; }
.zw-content a:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; border-radius: 2px; }
.zw-content code {
  background: rgba(15, 23, 42, .10);
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 6px;
  padding: .1em .4em;
  font-size: .9em;
  color: #0f172a;
}
.zw-content hr { border: 0; border-top: 1px solid rgba(15, 23, 42, .14); margin: 2rem 0; }
.zw-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.zw-content th, .zw-content td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid rgba(15, 23, 42, .12);
}
.zw-content th { color: #0f172a; font-weight: 600; }

/* --- iOS Safari price-ellipsis fix (2026-08-09) ------------------------------
   On iPhones the catalog quick-add tiles (which are <button>s) rendered the
   selected tile's price as "$…" while Chrome showed it fine - WebKit applies
   its own appearance/overflow/text-overflow to button internals. Neutralize
   every truncation vector; a price painting 1-2px past the tile edge beats
   hiding the number. */
.zw-cardopt {
  -webkit-appearance: none;
  appearance: none;
  overflow: visible;
  text-overflow: clip;
}
.zw-cardopt-lbl,
.zw-cardopt-price {
  display: block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}


/* --- iOS tile fix, round 2 (2026-08-09): layout moved off the <button> ------
   WebKit ellipsizes button text on an anonymous internal box no selector can
   reach, so .zw-cardopt is now a plain block and the inner span does the flex
   column. Desktop rendering identical. */
.zw-cardopt {
  display: block;
}
.zw-cardopt-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  overflow: visible;
}


/* --- iOS '$…' root fix (2026-08-09): the foot must never be line-clamped ---- */
.zv-catgrid .zv-card .zw-cardfoot,
.zv-catgrid .zv-card .mt-4.pt-4 {
  display: flex !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  max-height: none !important;
}


/* Footer utility links (COA / Privacy) - 2026-08-10 */
.zw-sitefoot-links { margin: 0 0 6px; font-size: 12.5px; }
.zw-sitefoot-links a { color: #0369a1; text-decoration: none; }
.zw-sitefoot-links a:hover { text-decoration: underline; }


/* --- Mobile hamburger nav: REMOVED 2026-08-13 -------------------------
   The burger + flat .zw-mnav list are gone (see template-parts/site-nav.php).
   Mobile now renders the SAME mega panel as desktop, so the old rule that
   hid every child of the nav row under 768px must not exist - it would
   hide the new menu trigger and the cart on phones.
   ------------------------------------------------------------------ */

/* --- Peptides dropdown cutoff fix (2026-08-10) --------------------------
   At mid-size windows the All Peptides panel (right-anchored to the Home
   trigger on the LEFT side of the nav) extended past the left viewport edge
   and names were clipped. Anchor it to the trigger's left edge instead and
   clamp every panel to the viewport. */
@media (min-width: 640px) {
  .zv-menu:first-child .zv-panel { left: 0; right: auto; }
  .zv-panel { max-width: calc(100vw - 24px); }
}


/* ============ WHITE THEME (2026-08-11, ported from zenovapeptides.ca) ======== */
.silver-text { background-image: linear-gradient(120deg, #0f172a, #475569, #0f172a) !important; }
.holo-text { background-image: none !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; }
.silver-divider { background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important; }
/* Tailwind stone text utilities -> slate-on-white */
.text-stone-200 { color: #0f172a !important; }
.text-stone-300 { color: #1e293b !important; }
.text-stone-400 { color: #475569 !important; }
.text-stone-500 { color: #64748b !important; }
.text-stone-600 { color: #64748b !important; }
.text-stone-700 { color: #64748b !important; }
/* Primary CTAs -> reference black buttons */
.zw-add, .zw-cardadd, .zw-opt-add {
  background: #0f172a !important; color: #ffffff !important;
  border: 1px solid #0f172a !important; background-image: none !important;
}
.zw-add:hover, .zw-cardadd:hover, .zw-opt-add:hover { background: #1e293b !important; }
.zw-opt-soldout { background: #e2e8f0 !important; color: #64748b !important; border-color: #e2e8f0 !important; }
/* Cards get the reference soft shadow */
.zv-card, .zv-coa .rounded-2xl { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
/* Footer + about logos are light art - darken on white */
.zw-sitefoot-logo, img[src*="zenova-about-logo"], img[src*="zenova-footer-logo"] { filter: brightness(0.2); }
/* Body fallback */
body, .zv-body { background-color: #f8f9fb; color: #0f172a; }


/* ---- White theme round 2 (2026-08-11): badges, labels, chips ---- */
.zw-stock.zw-in { color: #047857 !important; background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.35); }
.zw-stock.zw-out { color: #b91c1c !important; background: rgba(220, 38, 38, 0.08) !important; border: 1px solid rgba(220, 38, 38, 0.25); }
.zw-save { color: #475569 !important; background: rgba(15, 23, 42, 0.07) !important; }
.zv-back, .zv-back * { color: #475569 !important; }
.text-stone-500 { color: #526071 !important; }
.text-stone-600 { color: #475569 !important; }
.zv-pop-head { color: #334155 !important; }

/* White theme: the shared logo art is light/holographic - darken on white surfaces */
/* zv2: logo filter removed (the 2.0 header inverts the logo inline) */


/* Chatwoot launcher: center the icon in the bubble (owner report 2026-08-11) */
.woot-widget-bubble { display: flex !important; align-items: center !important; justify-content: center !important; }
.woot-widget-bubble img, .woot-widget-bubble svg { margin: 0 !important; }


/* ---- White theme round 4 (2026-08-11): oklch utilities missed by rgb scanner ---- */
.text-stone-50, .text-stone-100 { color: #0f172a !important; }


/* =========================================================
   Homepage: zenovapeptides.ca parity  (2026-08-12)
   Hero headline + CTAs + trust badges, slimmed product cards.
   Muted text uses #64748b (4.6:1 on white) rather than the
   reference's #94a3b8, which fails WCAG AA.
   ========================================================= */
.zv-hero-title {
  margin: 0 0 14px;
  font-size: clamp(30px, 5.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: #0f172a;
}
.zv-hero-sub {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 16px;
  line-height: 1.6;
  color: #64748b;
}
.zv-hero-ctas {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.zv-hero-ctas .zv-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.zv-hero-ctas .zv-cta:hover { background: #f1f5f9; color: #0f172a; }
.zv-hero-ctas .zv-cta-primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #f8fafc;
}
.zv-hero-ctas .zv-cta-primary:hover { background: #1e293b; color: #ffffff; }
.zv-trustgrid {
  margin: 32px auto 0;
  max-width: 48rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .zv-trustgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.zv-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}
.zv-trust-ico { flex: 0 0 auto; color: #64748b; line-height: 0; margin-top: 1px; }
.zv-trust-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zv-trust-t { font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.25; }
.zv-trust-s { font-size: 11.5px; color: #64748b; line-height: 1.3; }

/* ---- product cards ---- */
.zv-card-imgwrap {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
@media (min-width: 640px) { .zv-card-imgwrap { height: 200px; } }
.zv-card-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.zv-card:hover .zv-card-img { transform: scale(1.05); }
.zv-cardbody {
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 640px) { .zv-cardbody { padding: 18px 18px 16px; } }
.zv-card-cat {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #64748b;
}
.zv-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #0f172a;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .zv-card-name { font-size: 18px; } }
.zv-card-price { margin: 6px 0 0; font-size: 14px; color: #475569; }
.zv-card-oos { color: #64748b; font-weight: 600; }
/* description is gone, so push the buy box to the bottom of the card */
.zv-cardbody > .mt-4 { margin-top: auto; }
/* reference stacks the tiles above a full-width Add to Cart */
.zv-cardbody .zw-cardbuy { flex-direction: column; }
.zv-cardbody .zw-cardadd { width: 100%; flex: 0 0 auto; padding: 11px 16px; font-size: 13px; }

/* ---- shipping bar: dark, matching the reference ---- */
.zv-shipbar {
  border-top: none;
  border-bottom: none;
  background: #0f172a;
}
.zv-shipbar-inner { color: #f8fafc; }
.zv-shipbar-inner svg { color: #94a3b8; }
.zv-shipbar-amt { color: #ffffff; font-weight: 800; }


/* ---- White-theme badge remap (2026-08-12) ----
   Difficulty / category pills kept the dark-theme pairing (950/60 tint behind
   300-level text), which lands at 2.3-3.6:1 on the white build. Light tint plus
   700-level ink instead, and the cart remove "x" was rose-300 at 1.9:1. */
.zv-body [class*="bg-emerald-950"] { background-color: rgba(16, 185, 129, 0.12) !important; }
.zv-body [class*="bg-amber-950"]   { background-color: rgba(245, 158, 11, 0.14) !important; }
.zv-body [class*="bg-rose-950"]    { background-color: rgba(244, 63, 94, 0.12) !important; }
.zv-body .text-emerald-300 { color: #047857 !important; }
.zv-body .text-amber-300   { color: #b45309 !important; }
.zv-body .text-rose-300    { color: #be123c !important; }
.zv-body [class*="border-emerald-700"] { border-color: rgba(4, 120, 87, 0.35) !important; }
.zv-body [class*="border-amber-700"]   { border-color: rgba(180, 83, 9, 0.35) !important; }
.zv-body [class*="border-rose-700"]    { border-color: rgba(190, 18, 60, 0.35) !important; }
a.remove,
a.remove:hover,
.woocommerce a.remove { color: #b91c1c !important; background: none !important; }

/* ============ POINTS & REWARDS UI (2026-08-13) =========================
   WPSwings "Points and Rewards for WooCommerce" ships unstyled markup: a
   .woocommerce-info box carrying the WooCommerce icon font, a bare .input-text
   and a default grey .button. Rebrand the cart + checkout redemption panels to
   the Zenova card language (white card, 14px radius, ink pill CTA).

   Lives in woo.css ON PURPOSE: woo.css is enqueued LAST (it declares
   zenova-extra as its dependency), so the same rules in extra.css would be
   overridden by Woo's own styles. See the header-refactor notes.
   ==================================================================== */

/* --- the "you earn 5% back" notice on the cart ------------------------ */
.woocommerce-message.wps_wpr_cart_redemption__notice {
  text-transform: none !important;   /* theme forces uppercase on notices */
  letter-spacing: 0 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-left: 4px solid #0f172a !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
}
.woocommerce-message.wps_wpr_cart_redemption__notice::before,
.woocommerce-message.wps_wpr_cart_redemption__notice::after { display: none !important; }

/* --- redemption panel, shared by cart and checkout -------------------- */
.wps_wpr_apply_custom_points,
.custom_point_checkout.wps_wpr_checkout_points_class {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  padding: 50px 20px 18px !important;
  margin: 16px 0 !important;
  color: #0f172a !important;
}

/* Replace the Woo info glyph with a real, readable heading. */
.wps_wpr_apply_custom_points::before,
.custom_point_checkout.wps_wpr_checkout_points_class::before {
  content: "Redeem your points" !important;
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
}
.custom_point_checkout.wps_wpr_checkout_points_class::after { display: none !important; }

/* --- input --- */
#wps_cart_points,
.zw-page input#wps_cart_points {
  flex: 0 1 150px;
  min-width: 120px;
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
#wps_cart_points:focus {
  border-color: rgba(15, 23, 42, 0.45) !important;
  outline: none !important;
}

/* --- apply button: matches "Proceed to checkout" --- */
.wps_cart_points_apply,
.zw-page button.wps_cart_points_apply,
.zw-page input.wps_cart_points_apply {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wps_cart_points_apply:hover,
.zw-page button.wps_cart_points_apply:hover,
.zw-page input.wps_cart_points_apply:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  transform: translateY(-1px);
}

/* --- the "N Points = $X" / "Your available points" line --- */
.wps_wpr_apply_custom_points > p,
.custom_point_checkout.wps_wpr_checkout_points_class > p {
  flex: 1 0 100%;
  margin: 2px 0 0 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
}
.wps_wpr_apply_custom_points > p .amount,
.custom_point_checkout.wps_wpr_checkout_points_class > p .amount {
  font-weight: 700;
  color: #0f172a;
}
.wps_wpr_show_restrict_message:empty { display: none !important; }

@media (max-width: 480px) {
  #wps_cart_points,
.zw-page input#wps_cart_points { flex: 1 1 100%; }
  .wps_cart_points_apply,
.zw-page button.wps_cart_points_apply,
.zw-page input.wps_cart_points_apply { width: 100%; }
}

/* ---- homepage rewards strip (2026-08-13) ----------------------------
   Announces the 5%-back points programme under the hero CTAs. Sits above the
   .zv-trust 2x2 badge grid rather than being a 5th badge, which would leave an
   orphan card on phones. */
.zv-rewards-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  text-decoration: none !important;
  color: #0f172a !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.zv-rewards-strip:hover {
  border-color: rgba(15, 23, 42, 0.34);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.zv-rewards-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
}
.zv-rewards-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.zv-rewards-txt strong { font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.zv-rewards-txt span { font-size: 12.5px; color: #64748b; line-height: 1.35; }
.zv-rewards-cta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .zv-rewards-strip { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .zv-rewards-cta { margin-left: 54px; }
}

/* ---- #shop scroll target + smooth scrolling (2026-08-13) --------------
   The hero "Shop Peptides" button has always pointed at #shop, but no element
   with that id existed, so the click did nothing at all. The target now sits at
   the top of the catalog, just above the search box. scroll-margin-top keeps it
   clear of the sticky header + the two promo bars. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#shop.zv-shop-anchor {
  display: block;
  height: 0;
  margin: 0;
  scroll-margin-top: 104px;
}
@media (max-width: 639.98px) {
  #shop.zv-shop-anchor { scroll-margin-top: 76px; }
}

/* ---- rewards strip: relocated + tightened (2026-08-13) ----------------
   Moved out of the hero (it interrupted the headline) to sit directly above the
   Most Popular rail. Grid rather than flex so the phone layout can put the CTA
   on its own row instead of floating at an odd indent. */
.zv-rewards-strip {
  display: grid !important;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  margin: 0 0 14px !important;
}
.zv-rewards-ico { grid-column: 1; }
.zv-rewards-txt { grid-column: 2; }
.zv-rewards-cta { grid-column: 3; margin-left: 0 !important; }

@media (max-width: 560px) {
  .zv-rewards-strip {
    grid-template-columns: 40px 1fr;
    align-items: start;
    row-gap: 10px;
    padding: 14px 16px !important;
  }
  .zv-rewards-ico { grid-column: 1; grid-row: 1; margin-top: 1px; }
  .zv-rewards-txt { grid-column: 2; grid-row: 1; }
  .zv-rewards-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    text-align: right;
  }
}

/* ---- points UX states (2026-08-13) -----------------------------------
   With a zero balance the plugin still renders the redemption form plus an
   inert grey button and "You require : 1 more points to get redeem". That reads
   as a broken feature. Hide the form for those shoppers and show what they are
   EARNING instead (printed by mu-plugin zenova-points-ux.php). */

.zv-pts-earn {
  display: none;                      /* shown only in the zv-pts-none state */
  flex-direction: column;
  gap: 3px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-left: 4px solid #0f172a;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
  color: #0f172a;
}
.zv-pts-earn-h {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #64748b;
}
.zv-pts-earn span:last-child { font-size: 14px; color: #334155; line-height: 1.45; }
.zv-pts-earn strong { color: #0f172a; }

/* No balance: swap the dead redeem form for the earning note. */
body.zv-pts-none .wps_wpr_apply_custom_points,
body.zv-pts-none .custom_point_checkout.wps_wpr_checkout_points_class { display: none !important; }
body.zv-pts-none .zv-pts-earn { display: flex; }

/* Has points but below one whole discount unit: keep the form, but make the
   shortfall line read as guidance rather than an error. */
body.zv-pts-low .wps_wpr_restrict_user_message,
body.zv-pts-low .wps_wpr_apply_custom_points > p {
  color: #64748b !important;
}


/* =========================================================================
   2026-08-16 — header stacking + cart layout
   ========================================================================= */

/* --- 1. Header dropdowns were painted over by page content on /my-account/.
   Cause (measured, not guessed): WooCommerce's .woocommerce-MyAccount-navigation
   is position:sticky with z-index:50 — IDENTICAL to `.zw-shop-shell nav`. On a
   z-index tie the later DOM node wins, and the account nav comes after the
   header, so it painted over the open dropdown panel.

   Raising the header fixes EVERY dropdown at once (Home mega panel, Cycle
   Stacks, mini-cart) because they all live inside the header's stacking
   context — their own z-index values (60/90) only rank them against each
   other, never against the page. ------------------------------------------ */
.zw-shop-shell nav {
  z-index: 200;
}
/* Belt and braces: keep page-level stickies below the header permanently. */
.zw-page .woocommerce-MyAccount-navigation {
  z-index: 1;
}

/* --- 2. Cart: items left, order summary right.
   Woo ships the form and .cart-collaterals as two stacked blocks (collaterals
   floats at ~48%), which left a dead left column and pushed the checkout
   button far below the fold. ---------------------------------------------- */
@media (min-width: 1024px) {
  .woocommerce-cart .zw-page {
    max-width: 1180px;
  }
  .woocommerce-cart .zw-page .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    grid-template-areas:
      "notices notices"
      "items   totals";
    column-gap: 30px;
    align-items: start;
  }
  .woocommerce-cart .zw-page .woocommerce > .woocommerce-notices-wrapper {
    grid-area: notices;
  }
  .woocommerce-cart .zw-page .woocommerce-cart-form {
    grid-area: items;
    margin: 0;
  }
  .woocommerce-cart .zw-page .cart-collaterals {
    grid-area: totals;
    width: 100%;
    float: none;
    margin: 0;
    /* Follows the shopper down a long cart so "Proceed to checkout" is always
       one click away — this is the "smoother transition to checkout" bit. */
    position: sticky;
    top: 104px;
  }
  .woocommerce-cart .zw-page .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
  }
}

/* Order-summary panel styling (both breakpoints). */
.woocommerce-cart .zw-page .cart_totals {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 18px 18px 20px;
}
.woocommerce-cart .zw-page .cart_totals h2 {
  margin-top: 0;
  margin-bottom: 12px;
}
.woocommerce-cart .zw-page .cart_totals table.shop_table {
  border: 0;
  margin: 0;
}
.woocommerce-cart .zw-page .wc-proceed-to-checkout {
  padding-top: 14px;
}
.woocommerce-cart .zw-page .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

/* --- 3. Mobile is deliberately a different layout, not a squashed desktop:
   single column, and the checkout button pins to the bottom of the viewport
   so it never falls below a long totals table. --------------------------- */
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page .cart-collaterals {
    width: 100%;
    float: none;
    margin: 22px 0 0;
  }
  .woocommerce-cart .zw-page .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
  }
  .woocommerce-cart .zw-page .wc-proceed-to-checkout {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: #f8f9fb;
    padding: 12px 0 14px;
    box-shadow: 0 -10px 22px -14px rgba(15, 23, 42, 0.45);
  }
}


/* =========================================================================
   2026-08-17 — calmer cart
   The cart was shouting: every notice carried a 3px saturated blue top bar,
   the points panel a 4px black left bar, and the same rewards message appeared
   twice (once above the items table, once in the sidebar). Toned down so the
   products and the total are what the eye lands on.
   ========================================================================= */

/* --- Notices: quiet tinted card instead of a banner with a coloured bar. --- */
.zw-page .woocommerce-message,
.zw-page .woocommerce-info,
.zw-page .wc-block-components-notice-banner {
  background: #f6f8fa !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.10) !important;
  color: #334155 !important;
  border-radius: 10px;
  padding: 11px 16px 11px 40px !important;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.zw-page .woocommerce-error {
  border-top-width: 1px !important;
  border-top-color: rgba(15, 23, 42, 0.10) !important;
  padding: 11px 16px 11px 40px !important;
  font-size: 13.5px;
}
/* Confirmation ticks: muted slate, not brand blue. */
.zw-page .woocommerce-message::before,
.zw-page .woocommerce-info::before {
  color: #94a3b8 !important;
  font-size: 15px !important;
  top: 12px !important;
  left: 15px !important;
}
.zw-page .woocommerce-error::before {
  color: #dc9a94 !important;
  font-size: 15px !important;
  top: 12px !important;
  left: 15px !important;
}

/* Several "added to cart" confirmations stack on top of each other; pull them
   together so they read as one block rather than three competing banners. */
.woocommerce-cart .zw-page .woocommerce-notices-wrapper > * + * {
  margin-top: -2px;
}

/* --- The rewards message appeared twice. Keep the SPECIFIC one (sidebar, which
   states the points this order actually earns) and drop the generic restatement
   above the items table on the cart. It still shows at checkout. ----------- */
.woocommerce-cart .zw-page .woocommerce-cart-form
  ~ * .wps_wpr_cart_redemption__notice,
.woocommerce-cart .zw-page .woocommerce-notices-wrapper
  .wps_wpr_cart_redemption__notice {
  display: none !important;
}

/* --- Points panel: drop the heavy left bar and the shouty uppercase heading. */
.zv-pts-earn {
  background: #f6f8fa;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-left: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  gap: 2px;
}
.zv-pts-earn-h {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #0f172a;
}
.zv-pts-earn span:last-child {
  font-size: 13px;
  color: #64748b;
}

/* --- Cart totals: the label column was collapsing so long coupon labels like
   "WELCOME KIT — FREE (INTRO OFFER)" wrapped down six lines. ---------------- */
.woocommerce-cart .zw-page .cart_totals table.shop_table th {
  width: 42%;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  padding: 12px 10px 12px 0;
  vertical-align: top;
  hyphens: none;
}
.woocommerce-cart .zw-page .cart_totals table.shop_table td {
  padding: 12px 0;
  vertical-align: top;
  font-size: 14px;
}
.woocommerce-cart .zw-page .cart_totals .order-total th,
.woocommerce-cart .zw-page .cart_totals .order-total td {
  padding-top: 14px;
  font-size: 16px;
}
/* The [Remove] link on a coupon row sat tight against the amount. */
.woocommerce-cart .zw-page .cart_totals .cart-discount td a {
  display: inline-block;
  margin-left: 6px;
  font-size: 12.5px;
}

/* --- Remove (×) buttons were bright red at rest on every single row. ------ */
.zw-page td.product-remove a.remove {
  color: #b4bdc9 !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  background: transparent !important;
  transition: color .15s ease, border-color .15s ease;
}
.zw-page td.product-remove a.remove:hover {
  color: #c2554a !important;
  border-color: rgba(194, 85, 74, 0.4) !important;
  background: transparent !important;
}

/* 2026-08-17b — three follow-ups from the calmer-cart pass.
   (a) The generic rewards notice lives INSIDE .woocommerce-cart-form, not the
       notices wrapper, so the first selector never matched it. It repeats what
       the sidebar panel already says specifically, so hide it on the cart only.
   (b) The two-column layout squeezed the thumbnail column until images rendered
       at 31px and read as empty grey boxes. */
.woocommerce-cart .zw-page .woocommerce-cart-form .wps_wpr_cart_redemption__notice {
  display: none !important;
}
.woocommerce-cart .zw-page table.shop_table td.product-thumbnail {
  width: 74px;
  padding-right: 4px;
}
.woocommerce-cart .zw-page table.shop_table td.product-thumbnail img {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 3px;
}


/* --- 2026-08-23: catalog + profile layout ported from the reference build ----
   Only the layout and the card treatment came across. The header is unchanged
   on purpose - the reference header is a bare "Home" dropdown with no nav,
   account or affiliate link, so ours is the better one. */

/* The vials carry printed labels now, so the image needs height to stay
   legible, and a ground with some tone so clear glass reads as an object
   rather than as a hole in the card. */
.zv-card-imgwrap {
  background: linear-gradient(180deg, #f5f6f8 0%, #e9ebef 100%);
}
@media (min-width: 640px) {
  .zv-card-imgwrap { height: 230px; }
}

/* The selected pack tile was dark-grey text on a light-grey fill - the
   "selected" state was almost invisible against the unselected one. Fill it
   with the ink colour so the choice is unambiguous. */
.zw-cardopt.is-sel {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: none;
}
.zw-cardopt.is-sel .zw-cardopt-lbl { color: rgba(255, 255, 255, 0.72); }
.zw-cardopt.is-sel .zw-cardopt-price,
.zw-cardopt.is-sel.zw-cardopt-bundle .zw-cardopt-price { color: #ffffff; }
.zw-cardopt.is-sel:hover { border-color: #0f172a; }

/* Four across once the viewport can carry it. Overrides Tailwind's
   lg:grid-cols-3 from app.css, which loads earlier. */
@media (min-width: 1280px) {
  .zv-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Profile pages: the single centred column left both desktop margins empty and
   pushed price and Add to Cart roughly 980px down the page. Image and copy go
   left, buy box goes right and sticks. Below 1024px this is inert and the page
   keeps its original single-column flow. */
.zv-pdp-img {
  background: linear-gradient(180deg, #f5f6f8 0%, #e9ebef 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
}
/* The profile trust grid lives in a ~372px rail, so it stays 2x2 at every
   width - the sitewide 4-across rule clips "Free Xpresspost" in that column. */
.zv-pdp-trust {
  margin: 12px 0 0;
  max-width: none;
}
@media (min-width: 640px) {
  .zv-pdp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .zv-pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 32px;
    align-items: start;
  }
  .zv-pdp-top > .mb-8 { margin-bottom: 0; }
  .zv-pdp-buy { position: sticky; top: 24px; }
  .zv-pdp-img { height: 340px !important; }
  .zv-pdp-img img { max-height: 300px !important; }
}

/* In-stock buy boxes no longer print a headline price - it repeated the first
   pricing tile's number directly above that tile. With the label standing alone
   it should sit on the same line as the stock pill rather than above it. */
.zw-buybox-head-compact {
  align-items: center;
  margin-bottom: 14px;
}
.zw-buybox-head-compact .zw-buybox-label {
  margin-bottom: 0;
}

/* --- 2026-08-23: zw-opt compact rows ---------------------------------------
   Each pricing tile stacked its Add to Cart button UNDER the price, making the
   tile 146px tall. Retatrutide sells in three sizes, so with the 10-packs that
   is six tiles = a 1,293px buy box against 649px of copy on the left, and a
   644px hole in the middle of the page. Size on its own line, then price and
   button side by side: ~82px per tile, and every size keeps its own button
   (which is what we kept instead of the reference build's single toggle). */
.zw-opt {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  padding: 12px 12px 12px 15px;
}
.zw-opt-size {
  flex: 1 0 100%;
  line-height: 1.2;
}
.zw-opt-price { font-size: 21px; }
.zw-opt-was { margin-left: 0; }
.zw-opt-add.zw-add {
  width: auto;
  margin-top: 0;
  margin-left: auto;
  padding: 9px 16px;
  font-size: 13.5px;
  white-space: nowrap;
}
.zw-opt-add.zw-add .zw-cart-ico { flex: 0 0 auto; }

/* Narrow rails (and the stacked mobile layout) get the button back on its own
   line rather than squeezing it against the price. */
@media (max-width: 400px) {
  .zw-opt-add.zw-add { flex: 1 0 100%; margin-left: 0; margin-top: 4px; }
}

/* The spec strip (half-life / dose / route / frequency) now sits as the left
   column's second row instead of spanning the full width below both columns.
   A product sold in three sizes has six pricing rows, so the buy box outruns
   the copy beside it; this fills that column rather than leaving a hole, and
   spec data reads naturally next to the description. Below 1024px the grid is
   off and the strip keeps its original place in the document flow. */
@media (min-width: 1024px) {
  .zv-pdp-top > .mb-8    { grid-column: 1; grid-row: 1; }
  .zv-pdp-top > .zv-pdp-stats { grid-column: 1; grid-row: 2; margin-bottom: 0; align-self: start; }
  .zv-pdp-top > .zv-pdp-buy   { grid-column: 2; grid-row: 1 / span 2; }
}

/* pdp stats 2-up: four spec tiles across a ~716px column squeezed values like
   "Start 2 mg/week, titrate up by 2 mg every 4 weeks to 8-12 mg/week" into four
   wrapped lines. Two across gives each tile ~350px and one or two lines. */
@media (min-width: 1024px) {
  .zv-pdp-top > .zv-pdp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zv-pdp-top > .zv-pdp-stats > div { display: flex; flex-direction: column; justify-content: center; }
}

/* --- Checkout: fill the page on wide screens (2026-08-24) -----------------
   page.php wraps EVERY page in Tailwind's .max-w-5xl (1024px). On checkout
   that left ~500px of dead margin either side of a desktop monitor and
   squeezed the billing form into a tall, narrow strip. Widened here for the
   checkout page ONLY. Both the breadcrumb bar and the content wrapper are
   widened together, otherwise the breadcrumb sits narrower than the form and
   the page looks misaligned. Mobile is untouched. */
@media (min-width: 1200px) {
  body.woocommerce-checkout .zw-shop-shell .max-w-5xl {
    max-width: 1240px;
  }
  body.woocommerce-checkout .zw-page form.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 40px;
  }
  /* Address fields two-up, so the card fills its width instead of running
     long. Everything is full-width by default; only the short fields pair. */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items: start;
  }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
    grid-column: 1 / -1;
    width: 100%;
    float: none;
  }
  body.woocommerce-checkout #billing_first_name_field,
  body.woocommerce-checkout #billing_last_name_field,
  body.woocommerce-checkout #billing_company_field,
  body.woocommerce-checkout #billing_country_field,
  body.woocommerce-checkout #billing_city_field,
  body.woocommerce-checkout #billing_state_field,
  body.woocommerce-checkout #billing_postcode_field,
  body.woocommerce-checkout #billing_phone_field,
  body.woocommerce-checkout #shipping_first_name_field,
  body.woocommerce-checkout #shipping_last_name_field,
  body.woocommerce-checkout #shipping_company_field,
  body.woocommerce-checkout #shipping_country_field,
  body.woocommerce-checkout #shipping_city_field,
  body.woocommerce-checkout #shipping_state_field,
  body.woocommerce-checkout #shipping_postcode_field {
    grid-column: span 1;
  }
}
@media (min-width: 1500px) {
  body.woocommerce-checkout .zw-shop-shell .max-w-5xl {
    max-width: 1340px;
  }
}

/* =========================================================================
   2026-08-24 - MOBILE CART REBUILD
   Woo's `shop_table_responsive` fallback turned every cell into its own row
   with a bold "Product:/Price:/Quantity:/Subtotal:" label, so a 3-item cart
   was 12+ stacked rows tall, values were right-aligned against left-aligned
   labels, and `.product-thumbnail` was display:none even though a real vial
   image was already in the markup. Rebuilt as one card per line item:
   thumbnail left, name + unit price, quantity and line total on one row.
   Desktop (>=1024px) is untouched.
   ========================================================================= */
@media (max-width: 1023.98px) {

  /* The table itself stops pretending to be a table. */
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents,
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents tbody {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
  }
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents thead {
    display: none;
  }

  /* Kill the injected "Product: " style labels on the ITEM table only -
     the totals table still needs its labels. */
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents td::before {
    display: none !important;
    content: none !important;
  }

  /* --- one card per line item --- */
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  remove"
      "thumb price price"
      "thumb qty   total";
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
    position: relative;
    margin: 0 0 12px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.45);
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent;
  }

  /* Thumbnail: the vials are portrait 432x912, so never crop - contain it
     inside a portrait box or the vial gets its cap and base chopped off. */
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-thumbnail {
    display: block !important;
    grid-area: thumb;
    align-self: start;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
    width: 64px;
    height: 86px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: #f6f8fa;
    padding: 4px;
  }

  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name {
    grid-area: name;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: #0f172a;
    padding-right: 6px !important;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name a {
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
  }
  /* Long "Includes: ..." blurbs and variation lists read as fine print. */
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name p,
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name dl,
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name .variation {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: #64748b;
  }

  /* Unit price, quiet - the line total is the number that matters. */
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-price {
    grid-area: price;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 400;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-price::after {
    content: " each";
    color: #94a3b8;
  }

  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-quantity {
    grid-area: qty;
    margin-top: 4px;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-quantity .quantity input.qty {
    width: 62px;
    height: 40px;
    padding: 0 6px;
    text-align: center;
    font-size: 15px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 10px;
  }

  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-subtotal {
    grid-area: total;
    text-align: right !important;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
  }

  /* Remove: a real 34px tap target pinned to the card corner, not a stray
     row of its own above the product. */
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-remove {
    grid-area: remove;
    align-self: start;
    justify-self: end;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-remove a.remove {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -4px -4px 0 0;
    font-size: 20px;
    line-height: 1;
    color: #94a3b8 !important;
    background: transparent !important;
    border-radius: 50%;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-remove a.remove:hover {
    color: #b91c1c !important;
    background: rgba(185, 28, 28, 0.08) !important;
  }

  /* --- coupon + update row: side by side instead of three stacked blocks --- */
  .woocommerce-cart .zw-page tr:not(.woocommerce-cart-form__cart-item) td.actions {
    display: block;
    padding: 4px 0 0 !important;
    border: 0 !important;
  }
  .woocommerce-cart .zw-page td.actions .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
  }
  .woocommerce-cart .zw-page td.actions .coupon input#coupon_code {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border-radius: 10px;
  }
  .woocommerce-cart .zw-page td.actions .coupon button {
    flex: 0 0 auto;
    height: 44px;
    white-space: nowrap;
    border-radius: 10px;
  }
  .woocommerce-cart .zw-page td.actions button[name="update_cart"] {
    width: 100%;
    height: 44px;
    border-radius: 10px;
  }

  /* --- totals: give the injected label room so it stops reading as
         "Shipment:Xpresspost" with no space --- */
  .woocommerce-cart .zw-page .cart_totals td::before {
    margin-right: 6px;
  }

  /* Sticky checkout button clears the iOS home indicator. */
  .woocommerce-cart .zw-page .wc-proceed-to-checkout {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 2026-08-24 follow-up: the coupon row was flex but still wrapped, because
   the input kept its own width and pushed the button onto a second line. Pin
   it to one line, and give the actions block the same card treatment as the
   line items so it stops floating loose on the page background. --- */
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page td.actions {
    display: block;
    margin: 0 0 12px;
    padding: 14px !important;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.45);
  }
  .woocommerce-cart .zw-page td.actions .coupon {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    align-items: stretch;
    margin: 0 0 10px !important;
    width: 100%;
  }
  .woocommerce-cart .zw-page td.actions .coupon input#coupon_code {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    height: 44px;
    border-radius: 10px;
  }
  .woocommerce-cart .zw-page td.actions .coupon button {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px;
    height: 44px;
    white-space: nowrap;
    border-radius: 10px;
  }
  .woocommerce-cart .zw-page td.actions button[name="update_cart"] {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    height: 44px;
    border-radius: 10px;
  }
}

/* --- 2026-08-24 final: the actions cell kept a transparent background and a
   0px border because WooCommerce core's own table styles load after the theme
   sheet, and an older rule at ~line 734 forced flex-wrap:wrap under 560px.
   Both are overridden explicitly here rather than by raising specificity
   guesswork. --- */
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents td.actions {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin: 0 0 12px !important;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.45) !important;
  }
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents td.actions .coupon {
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .woocommerce-cart .zw-page table.woocommerce-cart-form__contents td.actions .coupon .input-text {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* --- 2026-08-25: mobile cart thumbnail. Two things were wrong. (1) The rule
   at ~line 2672 sets width/height 56px !important with NO media query, so it
   beat the mobile block's 64x86 (which carries no !important) and every vial
   rendered in a 56px square. (2) That 64x86 portrait box was wrong anyway -
   the cart thumbnails are SQUARE source images (300x300 and 640x640), not the
   portrait 432x912 the older comment assumed, so a portrait box just added
   ~22px of dead space under each vial. Square tile, sized up, column widened
   to match. Desktop (>=1024px) deliberately untouched. --- */
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px;
    object-fit: contain;
    display: block;
    background: #f6f8fa;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 4px;
  }
}

/* --- 2026-08-25: the line-item name column was only ~142px (72px thumb +
   gap + the auto subtotal column ate the rest), so "Bacteriostatic Water"
   wrapped to two lines and the Welcome Kit "Includes:" blurb ran to four.
   The remove x only needs a corner, so lift it out of the grid and let the
   name span both remaining columns - ~202px, and cards get shorter. The card
   already has position:relative, so absolute positioning anchors to it. --- */
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item {
    grid-template-areas:
      "thumb name  name"
      "thumb price price"
      "thumb qty   total";
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-name {
    padding-right: 30px !important;
  }
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    grid-area: auto;
  }
}

/* =========================================================================
   2026-08-31 - CHECKOUT "Redeem your points" panel: card + heading restored

   The checkout panel is rendered by WPSwings as
     <div class="custom_point_checkout woocommerce-info wps_wpr_checkout_points_class">
   so the 2026-08-17 "calmer cart" rule `.zw-page .woocommerce-info` (~line 2547)
   captured it. That rule and the points-panel rule (~line 2181) are BOTH
   specificity (0,2,0) with !important, so source order decided it and the later
   notice rule won:
       padding  50px 20px 18px  ->  11px 16px 11px 40px   (top padding gone)
       background #ffffff       ->  #f6f8fa               (white card lost)
   and `.zw-page .woocommerce-info::before` (~line 2567) overrode the fake heading:
       font-size 11.5px -> 15px, color #64748b -> #94a3b8, top 16px -> 12px.

   Net effect on mobile: the Points input sat flush at the top of the panel and
   ran straight through the "REDEEM YOUR POINTS" heading, which was itself washed
   out to 2.8:1. The CART panel (.wps_wpr_apply_custom_points) carries no
   woocommerce-info class and was never affected - checkout only.

   Re-asserted here at (0,3,0), one class HIGHER than the notice rule, so the
   panel no longer depends on source order to survive.
   ========================================================================= */
.zw-page .custom_point_checkout.wps_wpr_checkout_points_class {
  padding: 50px 20px 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
  font-size: 15px;
}
/* Heading: #475569 = 7.0:1 on white (was #94a3b8 = 2.8:1, below AA). */
.zw-page .custom_point_checkout.wps_wpr_checkout_points_class::before {
  content: "Redeem your points" !important;
  top: 16px !important;
  left: 20px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  color: #475569 !important;
}
.zw-page .custom_point_checkout.wps_wpr_checkout_points_class > p {
  color: #475569 !important;
}

/* The plugin caps `input#wps_cart_points` at max-width:200px, so the mobile
   full-width rule never took and the input rendered 200px under a 300px
   button. Match them. */
@media (max-width: 480px) {
  .zw-page .custom_point_checkout.wps_wpr_checkout_points_class input#wps_cart_points {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  .zw-page .custom_point_checkout.wps_wpr_checkout_points_class button.wps_cart_points_apply {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Cart panel heading matched to the checkout one above (was #64748b, 4.8:1). */
.zw-page .wps_wpr_apply_custom_points::before {
  color: #475569 !important;
}


/* =====================================================================
   2026-09-07 sitewide design pass (theme 1.14.19). Every value below was
   measured live with getComputedStyle against the composited background;
   nothing here is reasoned from class names (woo.css remaps the stone scale).
   ===================================================================== */

/* 1. Category chips on the 25 peptide pages + cycles.php still carried the
      dark-build Tailwind classes (bg-<hue>-950/60 text-<hue>-300) - a brown
      chip with light text on the white page, 3.3:1. Same hue family, light
      theme values; every text/background pair is >= 6.4:1. */
[class~="bg-amber-950/60"]   { background-color: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; }
[class~="bg-emerald-950/60"] { background-color: #d1fae5 !important; color: #065f46 !important; border-color: #6ee7b7 !important; }
[class~="bg-orange-950/60"]  { background-color: #ffedd5 !important; color: #9a3412 !important; border-color: #fdba74 !important; }
[class~="bg-purple-950/60"]  { background-color: #f3e8ff !important; color: #6b21a8 !important; border-color: #d8b4fe !important; }
[class~="bg-rose-950/60"]    { background-color: #ffe4e6 !important; color: #9f1239 !important; border-color: #fda4af !important; }
[class~="bg-teal-950/60"]    { background-color: #ccfbf1 !important; color: #115e59 !important; border-color: #5eead4 !important; }
[class~="bg-yellow-950/60"]  { background-color: #fef9c3 !important; color: #854d0e !important; border-color: #fde047 !important; }

/* 2. Breadcrumb separators: .text-stone-700 was remapped to #64748b, which is
      4.3:1 on the #f1f5f9 crumb bar. House muted instead (7.0:1). */
.text-stone-700 { color: #475569 !important; }

/* 3. Cart remove (x): #b4bdc9 on white was 1.9:1 on desktop, #94a3b8 2.6:1 on
      phones. Still quiet, now legible; red remains hover-only. Desktop target
      grows from 24px to 32px. */
.zw-page td.product-remove a.remove {
  color: #64748b !important;
  width: 32px;
  height: 32px;
  line-height: 30px;
}
@media (max-width: 1023.98px) {
  .woocommerce-cart .zw-page tr.woocommerce-cart-form__cart-item td.product-remove a.remove { color: #64748b !important; }
}

/* 4. Points-earning note in the cart: heading and body were #64748b (4.5:1). */
.zv-pts-earn-h { color: #475569; }
.zv-pts-earn > span:not(.zv-pts-earn-h) { color: #334155; }

/* 5. Catalogue buy tiles on phones. Two tiles side by side inside a ~160px
      card forced 8px labels that wrapped onto two lines ("10 PACK ·" / "20% OFF").
      One tile per row, size on the left, price on the right: 10.5px / 13px. */
@media (max-width: 639.98px) {
  .zv-catgrid .zw-cardopt { flex: 1 1 100%; padding: 7px 10px; }
  .zv-catgrid .zw-cardopt { min-height: 40px; justify-content: center; }
  .zv-catgrid .zw-cardopt .zw-cardopt-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .zv-catgrid .zw-cardopt-lbl { font-size: 10.5px; letter-spacing: 0.06em; white-space: normal; flex: 1 1 auto; min-width: 0; text-align: left; }
  .zv-catgrid .zw-cardopt-price { font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
}

/* 6. Category filter pills on phones: nine pills wrapped into five rows
      (~230px of chips) before the first product. One swipeable row, bled to
      the screen edges; the half-visible last chip is the scroll affordance. */
@media (max-width: 639.98px) {
  div:has(> .zv-catbtn) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding: 2px 16px 6px;
  }
  div:has(> .zv-catbtn)::-webkit-scrollbar { display: none; }
  .zv-catbtn { flex: 0 0 auto; white-space: nowrap; }
}

/* 7. About page hero logo. zenova-about-logo.png is a light-grey lockup on a
      BLACK canvas, blended with mix-blend-mode:screen for the old dark theme.
      On the white redesign `screen` lifts the grey to ~white, so the logo
      vanished and left a 336px (desktop) / 171px (phone) empty block under the
      H1. Invert + greyscale + multiply renders it as the dark lockup, and the
      box is capped at 440px so the tagline comes back up the page. */
img[src*="zenova-about-logo"] {
  filter: invert(1) grayscale(1) !important;
  mix-blend-mode: multiply !important;
  max-width: 440px !important;
  opacity: .92;
}

/* 8. My Account: WooCommerce's default 13px "Remember me" checkbox. */
.woocommerce-form__input-checkbox { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; accent-color: #0f172a; }


/* 9. Welcome popup on phones: the email row wraps, leaving a half-width
      left-aligned "Get my code" under the input. Full-width button, tighter
      card padding. Desktop untouched (row stays side by side there). */
@media (max-width: 480px) {
  .zw-pop-card { padding: 26px 20px 20px; }
  .zw-pop-row .zw-pop-btn { width: 100%; }
}

/* 10. My Account: WooCommerce's 22px show/hide-password toggle. Bigger hit
       area, icon stays where it is. */
.woocommerce form .show-password-input {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 8px;
  border-radius: 8px;
}