/* The views pill ships with the HTML `hidden` attribute and is revealed by
   JS once a count arrives. `hidden` works only through the browser's default
   [hidden]{display:none}, and ANY author rule setting `display` beats a
   UA-stylesheet rule — .odw-social-proof__item{display:inline-flex} in
   product-search.css was overriding it, so an empty pill showed on every
   product page.

   v7.72.1: moved here from product-search.css. That file kept being served
   stale, which is why the fix appeared not to work — the rule was correct,
   it just wasn't reaching the browser. This file is small and new, so it is
   not carrying that history. */
.odw-social-proof__item[hidden] { display: none !important; }

/* ==========================================================================
   Product extras — trust block, delivery estimate, callback, assurance,
   return requests.

   WHY THESE LIVE IN THEIR OWN FILE (v7.71.1)
   Everything from v7.68 onwards had been appended to product-search.css,
   which grew to 101 KB / 1,729 lines. Repeatedly, the rules at the END of
   that file were the ones missing on the live site while everything earlier
   in the same file rendered fine — a stale copy of one large asset being
   served somewhere in the LiteSpeed / Cloudflare / browser chain.

   The CSS itself was never the problem: comments balance, minification
   preserves every rule, and the enqueue is unconditional. Splitting these
   into their own small file gives them a URL no cache layer has seen before
   and stops one oversized asset being a single point of failure.
   ========================================================================== */

/* ============================================================
   Product trust block (v7.68.4 — matched to the site's own pattern)

   Earlier versions invented their own look: radius-md, no shadow, a
   custom border colour, and full-colour background fills. It sat
   directly under the tabs panel and read as a foreign element.

   This version reuses the patterns the theme already establishes:
     · the card = exactly the .woocommerce-Tabs-panel treatment
       (surface, --odw-border, --odw-radius-lg, --odw-shadow-sm)
     · each row = the panel h3 treatment (3px left accent + padding),
       which is how this site already marks a subsection
   Same information, but it now looks like it belongs on the page.
   ============================================================ */
.odw-trust {
  margin: var(--odw-space-5) 0 var(--odw-space-4);
  padding: var(--odw-space-5);
  background: var(--odw-surface);
  border: 1px solid var(--odw-border);
  border-radius: var(--odw-radius-lg);
  box-shadow: var(--odw-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--odw-space-4);
}

/* Mirrors .odw-product-page__tabs .panel h3 — left accent bar, indent.
   The accent colour is what distinguishes the three rows. */
.odw-trust__row {
  display: flex;
  align-items: flex-start;
  gap: var(--odw-space-3);
  padding-left: var(--odw-space-3);
  border-left: 3px solid var(--odw-border);
}

.odw-trust__icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; color: var(--odw-text-muted); }
.odw-trust__body { min-width: 0; flex: 1 1 auto; }

/* Same weight and colour as the panel h3s above it, one step smaller. */
.odw-trust__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--odw-text);
  margin-bottom: var(--odw-space-1);
}

.odw-trust__text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--odw-text-muted);
}
.odw-trust__muted { color: var(--odw-text-muted); font-weight: 400; }
.odw-trust__sep   { color: var(--odw-text-muted); opacity: 0.5; margin: 0 6px; }

.odw-trust__meta {
  margin: var(--odw-space-1) 0 0;
  font-size: 0.74rem;
  color: var(--odw-text-muted);
  opacity: 0.85;
}

/* --- Row 1: the credential. Primary green — the site's trust colour. --- */
.odw-trust__row--verified { border-left-color: var(--odw-primary); }
.odw-trust__row--verified .odw-trust__icon  { color: var(--odw-primary); }
.odw-trust__row--verified .odw-trust__label { color: var(--odw-primary-dark); }
.odw-trust__row--verified .odw-trust__text strong { color: var(--odw-text); }

/* --- Row 2: the legal notice. Amber reads as "read this"; red would
       wrongly signal an error on a routine disclaimer. --- */
.odw-trust__row--notice { border-left-color: #E8A33D; }
.odw-trust__row--notice .odw-trust__icon { color: #B87614; }

/* --- Row 3: registration numbers. Left at the neutral border colour
       so it stays the quietest of the three. --- */
.odw-trust__row--licence .odw-trust__label { color: var(--odw-text-muted); font-size: 0.8rem; }

.odw-trust__licences {
  list-style: none;          /* without this the browser shows bullets */
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--odw-space-1) var(--odw-space-5);
}
.odw-trust__licences li { display: flex; align-items: baseline; gap: var(--odw-space-2); font-size: 0.76rem; }
.odw-trust__licences span { color: var(--odw-text-muted); }
.odw-trust__licences code {
  font-family: var(--odw-font-mono);
  font-size: 0.74rem;
  color: var(--odw-text);
  background: none; padding: 0;
  word-break: break-all;
}

@media (max-width: 600px) {
  .odw-trust {
    padding: var(--odw-space-4);
    gap: var(--odw-space-3);
    margin: var(--odw-space-4) 0 var(--odw-space-3);
  }
  .odw-trust__row  { gap: var(--odw-space-2); padding-left: var(--odw-space-2); }
  .odw-trust__label { font-size: 0.8rem; }
  .odw-trust__text  { font-size: 0.78rem; line-height: 1.6; }
  /* Stack the licences so long registration numbers never squeeze. */
  .odw-trust__licences { flex-direction: column; gap: var(--odw-space-1); }
}

/* ============================================================
   Delivery estimate on My Account → Orders (v7.69.0)
   ============================================================ */
.odw-eta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; }
.odw-eta--pending .odw-eta__value { color: var(--odw-primary-dark); }
.odw-eta--done    .odw-eta__value { color: var(--odw-text-muted); font-weight: 500; }
.odw-eta--late    .odw-eta__value { color: #B87614; }
.odw-eta__none    { color: var(--odw-text-muted); }

/* Detail view — same card language as the rest of the product pages. */
.odw-eta-box {
  display: flex; align-items: flex-start; gap: var(--odw-space-3);
  margin: 0 0 var(--odw-space-5);
  padding: var(--odw-space-4);
  background: var(--odw-primary-light);
  border: 1px solid rgba(46, 158, 92, 0.22);
  border-radius: var(--odw-radius-lg);
}
.odw-eta-box--done { background: var(--odw-bg); border-color: var(--odw-border); }
.odw-eta-box--late { background: #FFF4E0; border-color: #F5D9A8; }

.odw-eta-box__icon { flex-shrink: 0; color: var(--odw-primary-dark); margin-top: 2px; }
.odw-eta-box--done .odw-eta-box__icon { color: var(--odw-text-muted); }
.odw-eta-box--late .odw-eta-box__icon { color: #B87614; }

.odw-eta-box__label {
  display: block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--odw-text-muted); margin-bottom: 2px;
}
.odw-eta-box__value { display: block; font-size: 1rem; color: var(--odw-text); }
.odw-eta-box__note  { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--odw-text-muted); }

@media (max-width: 600px) {
  .odw-eta-box { padding: var(--odw-space-3); }
  .odw-eta-box__value { font-size: 0.92rem; }
}

/* ============================================================
   Callback box + assurance card (v7.70.0)
   Both reuse the card treatment the tabs panel establishes, so
   they read as part of the page rather than bolted on.
   ============================================================ */
.odw-callback {
  margin: 0 0 var(--odw-space-3);
  padding: var(--odw-space-4);
  background: var(--odw-surface);
  border: 1px solid var(--odw-border);
  border-radius: var(--odw-radius-lg);
  box-shadow: var(--odw-shadow-sm);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--odw-space-4) var(--odw-space-5);
}
.odw-callback__intro { display: flex; align-items: center; gap: var(--odw-space-3); flex: 1 1 100%; min-width: 0; }
.odw-callback__icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--odw-primary-light); color: var(--odw-primary-dark);
}
.odw-callback__title { display: block; font-size: 0.92rem; color: var(--odw-text); }
.odw-callback__sub   { display: block; font-size: 0.8rem; color: var(--odw-text-muted); margin-top: 1px; }
.odw-callback__sub a { color: var(--odw-primary-dark); font-weight: 700; text-decoration: none; }

.odw-callback__form { display: flex; gap: var(--odw-space-2); flex: 1 1 100%; }
.odw-callback__input {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--odw-border); border-radius: var(--odw-radius-md);
  background: var(--odw-surface); padding-left: var(--odw-space-3);
}
.odw-callback__input:focus-within { border-color: var(--odw-primary); }
.odw-callback__cc { color: var(--odw-text-muted); font-size: 0.85rem; flex-shrink: 0; }
.odw-callback__input input {
  border: 0; outline: 0; background: none; width: 100%; min-width: 0;
  padding: 11px var(--odw-space-3);
  font-family: var(--odw-font-body); font-size: 0.88rem; color: var(--odw-text);
}
.odw-callback__btn {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--odw-accent); color: #fff;
  font-family: var(--odw-font-body); font-weight: 700; font-size: 0.85rem;
  padding: 0 var(--odw-space-5); min-height: 44px;
  border-radius: var(--odw-radius-md);
}
.odw-callback__btn:hover:not(:disabled) { background: var(--odw-accent-dark); }
.odw-callback__btn:disabled { opacity: 0.6; cursor: default; }

.odw-callback__msg { flex: 1 1 100%; margin: 0; font-size: 0.8rem; }
.odw-callback__msg:empty { display: none; }
.odw-callback__msg.is-ok    { color: var(--odw-primary-dark); }
.odw-callback__msg.is-error { color: var(--odw-accent-dark); }

/* ---------- Assurance card ---------- */
.odw-assurance {
  margin: 0 0 var(--odw-space-5);
  padding: var(--odw-space-5);
  background: var(--odw-surface);
  border: 1px solid var(--odw-border);
  border-radius: var(--odw-radius-lg);
  box-shadow: var(--odw-shadow-sm);
}
/* Matches the tabs-panel h2 treatment exactly. */
.odw-assurance__heading {
  font-size: 1.05rem; font-weight: 700; color: var(--odw-primary-dark);
  margin: 0 0 var(--odw-space-4); padding-bottom: var(--odw-space-3);
  border-bottom: 1px solid var(--odw-border);
}
/* Back to four across: this card is full width again (v7.70.2), so four
   tiles get a comfortable ~270px each instead of the ~90px they had when
   it briefly lived inside the half-width left column. */
.odw-assurance__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--odw-space-5);
}
@media (max-width: 900px) {
  .odw-assurance__grid { grid-template-columns: repeat(2, 1fr); gap: var(--odw-space-4); }
}
.odw-assurance__item { min-width: 0; }
.odw-assurance__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--odw-radius-md);
  margin-bottom: var(--odw-space-2);
  background: var(--odw-primary-light); color: var(--odw-primary-dark);
}
.odw-assurance__icon--expiry { background: #FFF4E0; color: #8A5300; }
.odw-assurance__icon--price  { background: var(--odw-bg); color: var(--odw-text-muted); }
.odw-assurance__title {
  display: block; font-size: 0.85rem; color: var(--odw-text); margin-bottom: 3px; line-height: 1.35;
}
.odw-assurance__text { display: block; font-size: 0.76rem; color: var(--odw-text-muted); line-height: 1.5; }


@media (max-width: 600px) {
  .odw-callback { padding: var(--odw-space-4); gap: var(--odw-space-3); }
  .odw-callback__form { flex: 1 1 100%; }
  .odw-assurance { padding: var(--odw-space-4); }
  .odw-assurance__heading { font-size: 0.95rem; }
  /* Two columns still work at 360px because the text is short. */
  .odw-assurance__grid { gap: var(--odw-space-4) var(--odw-space-3); }
  .odw-assurance__icon { width: 32px; height: 32px; }
  .odw-assurance__title { font-size: 0.8rem; }
  .odw-assurance__text { font-size: 0.72rem; }
}

/* ============================================================
   Return / replacement requests (v7.71.0) — My Account order view
   ============================================================ */
.odw-return { margin: var(--odw-space-5) 0 0; }
.odw-return__open {
  background: none; border: 1px solid var(--odw-border); cursor: pointer;
  font-family: var(--odw-font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--odw-text-muted); padding: 10px var(--odw-space-4);
  border-radius: var(--odw-radius-md); min-height: 42px;
}
.odw-return__open:hover { border-color: var(--odw-primary); color: var(--odw-primary-dark); }

.odw-return__panel {
  margin-top: var(--odw-space-3); padding: var(--odw-space-4);
  background: var(--odw-surface); border: 1px solid var(--odw-border);
  border-radius: var(--odw-radius-lg); box-shadow: var(--odw-shadow-sm);
}
.odw-return__policy {
  margin: 0 0 var(--odw-space-4); padding: var(--odw-space-3);
  background: #FFF4E0; border-radius: var(--odw-radius-md);
  font-size: 0.78rem; line-height: 1.55; color: #8A5300;
}
.odw-return__label {
  display: block; font-size: 0.8rem; font-weight: 700; color: var(--odw-text);
  margin: var(--odw-space-3) 0 5px;
}
.odw-return__label:first-of-type { margin-top: 0; }
.odw-return__req {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--odw-accent-dark); margin-left: 6px;
}
.odw-return__select, .odw-return__textarea, .odw-return__panel input[type="file"] {
  width: 100%; font-family: var(--odw-font-body); font-size: 0.85rem;
  padding: 10px var(--odw-space-3); color: var(--odw-text);
  border: 1px solid var(--odw-border); border-radius: var(--odw-radius-md);
  background: var(--odw-surface);
}
.odw-return__select:focus, .odw-return__textarea:focus { outline: 0; border-color: var(--odw-primary); }
.odw-return__hint { margin: 5px 0 0; font-size: 0.74rem; color: var(--odw-text-muted); line-height: 1.5; }

.odw-return__submit {
  margin-top: var(--odw-space-4); border: 0; cursor: pointer; width: 100%;
  background: var(--odw-accent); color: #fff;
  font-family: var(--odw-font-body); font-weight: 700; font-size: 0.88rem;
  padding: 12px var(--odw-space-5); border-radius: var(--odw-radius-md); min-height: 46px;
}
.odw-return__submit:hover:not(:disabled) { background: var(--odw-accent-dark); }
.odw-return__submit:disabled { opacity: 0.6; cursor: default; }

.odw-return__msg { margin: var(--odw-space-3) 0 0; font-size: 0.82rem; }
.odw-return__msg:empty { display: none; }
.odw-return__msg.is-ok    { color: var(--odw-primary-dark); }
.odw-return__msg.is-error { color: var(--odw-accent-dark); }

/* ---------- Existing request status ---------- */
.odw-return-status {
  margin: var(--odw-space-5) 0 0; padding: var(--odw-space-4);
  border: 1px solid var(--odw-border); border-radius: var(--odw-radius-lg);
  background: var(--odw-surface); font-size: 0.85rem;
}
.odw-return-status__badge {
  display: inline-block; margin-left: var(--odw-space-2);
  padding: 3px var(--odw-space-3); border-radius: var(--odw-radius-pill);
  font-size: 0.72rem; font-weight: 700;
}
.odw-return-status--pending  .odw-return-status__badge { background: #FFF4E0; color: #8A5300; }
.odw-return-status--approved .odw-return-status__badge { background: var(--odw-primary-light); color: var(--odw-primary-dark); }
.odw-return-status--rejected .odw-return-status__badge { background: var(--odw-accent-light); color: var(--odw-accent-dark); }
.odw-return-status__note { margin: var(--odw-space-2) 0 0; font-size: 0.8rem; color: var(--odw-text-muted); line-height: 1.55; }

@media (max-width: 600px) {
  .odw-return__open, .odw-return__submit { width: 100%; }
  .odw-return__panel { padding: var(--odw-space-3); }
}

/* ============================================================
   Add to cart + Buy now (v7.73.2)

   The previous attempt never took effect. product-search.css has:

     .odw-product-page__form .single_add_to_cart_button {
       flex: 1; min-width: 160px; width: 100%;
       background: var(--odw-accent) !important;
     }

   Buy now carries .single_add_to_cart_button (WooCommerce needs it to
   disable the button when no variation is chosen), so it inherited an
   !important accent background — no amount of extra specificity was
   going to beat that — plus width:100%, which is why the two buttons
   stacked instead of sitting side by side on mobile.

   Fixed by matching !important where required and overriding the
   width/min-width that forced the wrap.
   ============================================================ */
/* v7.75.1: was flex-wrap with .quantity at flex:0 0 100%. That did put the
   buttons on their own row, but it also stretched the quantity BOX itself
   across the full width, leaving a large empty bordered area beside the
   − 1 + controls.

   Grid solves both at once: quantity spans the row so the buttons wrap
   below it, while justify-self keeps the box at its natural width. */
/* v7.75.2: the grid was on form.cart. For a SIMPLE product that form
   contains the quantity and buttons directly, so it worked. For a VARIABLE
   product it contains the "Pack size" variations table first and the
   quantity/buttons in a separate wrapper — so the grid turned those two into
   side-by-side columns and squeezed the buttons until "Add to cart" clipped.

   The grid has to go on whichever element actually holds the controls: the
   form itself for simple products, .woocommerce-variation-add-to-cart for
   variable ones. */
.odw-product-page__form form.cart:not(.variations_form),
.odw-product-page__form form.cart .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--odw-space-3);
  align-items: center;
}
/* The variable-product form must stay a normal block so the Pack size table
   sits ABOVE the controls rather than beside them. */
.odw-product-page__form form.cart.variations_form { display: block; }
.odw-product-page__form form.cart.variations_form .single_variation_wrap { margin-top: var(--odw-space-3); }

.odw-product-page__form form.cart .quantity {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto !important;
  flex: 0 0 auto !important;
}

/**
 * v7.80.2: anything else rendered inside form.cart must span the full row too.
 *
 * Making form.cart a two-column grid (so Add to cart and Buy now sit as equal
 * halves) turned every OTHER child into a half-width grid item as well. The
 * prescription upload box — hooked onto woocommerce_before_add_to_cart_button,
 * so it lives inside this form — was squeezed into one column, which wrapped
 * its text over six lines and made the box far taller than the form.
 *
 * Only the two buttons should share a row. Everything else spans both.
 */
.odw-product-page__form form.cart > *:not(.single_add_to_cart_button):not(.odw-buy-now) {
  grid-column: 1 / -1;
}
.odw-product-page__form form.cart .odw-prescription-upload {
  grid-column: 1 / -1;
  /* No width:100% — a grid item already fills its column. Adding it made the
     box 34px wider than the form and it overflowed the right edge. */
  min-width: 0;
  margin-bottom: 0;
}

/* Beat the width:100% / min-width:160px that was forcing the wrap. */
.odw-product-page__form form.cart .single_add_to_cart_button,
.odw-product-page__form form.cart .odw-buy-now {
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 0 var(--odw-space-4) !important;
  font-family: var(--odw-font-body); font-weight: 700; font-size: 0.95rem;
  border-radius: var(--odw-radius-md);
  border: 0; cursor: pointer; white-space: nowrap;
}

/* Buy now is green. !important is needed only because the rule it is
   overriding uses it too. */
.odw-product-page__form form.cart .odw-buy-now,
.odw-product-page__form form.cart button.odw-buy-now {
  background: var(--odw-primary) !important;
  color: #fff !important;
  box-shadow: none;
}
.odw-product-page__form form.cart .odw-buy-now:hover:not(:disabled):not(.disabled) {
  background: var(--odw-primary-dark) !important;
}

.odw-product-page__form form.cart .odw-buy-now:disabled,
.odw-product-page__form form.cart .odw-buy-now.disabled,
.odw-product-page__form form.cart .single_add_to_cart_button.disabled {
  opacity: 0.45; cursor: not-allowed; box-shadow: none;
}

@media (max-width: 600px) {
  .odw-product-page__form form.cart .single_add_to_cart_button,
  .odw-product-page__form form.cart .odw-buy-now {
    min-height: 48px; font-size: 0.88rem;
    padding: 0 var(--odw-space-2) !important;
  }
}

/* ============================================================
   Quantity offer badges (v7.73.0)
   Sits just under the price on the product page — a quantity
   offer only changes behaviour if it is read BEFORE the
   customer picks a quantity.
   ============================================================ */
.odw-offer-badges { display: flex; flex-wrap: wrap; gap: var(--odw-space-2); margin: 0 0 var(--odw-space-3); }
.odw-offer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--odw-space-3);
  background: #FFF4E0; border: 1px dashed #E8A33D; color: #8A5300;
  border-radius: var(--odw-radius-md);
  font-family: var(--odw-font-body); font-size: 0.79rem; font-weight: 700;
  line-height: 1.3;
}
.odw-offer-badge__icon { flex-shrink: 0; display: inline-flex; }

/* The applied discount in the cart/checkout totals — negative fees render
   as an ordinary fee row, so make it read as a saving. */
.woocommerce-cart .cart-subtotal ~ .fee th,
.woocommerce-checkout .fee th { font-weight: 600; }
.woocommerce-cart .fee td, .woocommerce-checkout .fee td { color: var(--odw-primary-dark); }

@media (max-width: 600px) {
  .odw-offer-badge { font-size: 0.74rem; padding: 5px var(--odw-space-2); }
}

/* Cashback badge on the full-payment method (v7.74.0). Amber rather than
   green so it reads as a reward and does not blend into the "Zero COD Fee"
   badge sitting next to it. */
.odw-payment-badge--cashback {
  background: #FFF4E0;
  color: #8A5300;
  border: 1px dashed #E8A33D;
}

/* ============================================================
   Order quantity limits (v7.76.1)
   Class name matches ODW_Max_Quantity::notice(), which already
   existed — v7.76.0 shipped a second, duplicate limit system by
   mistake. That class is gone; this styles the original.
   ============================================================ */
.odw-max-qty-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--odw-space-3);
  padding: 5px var(--odw-space-3);
  background: #FFF4E0; border: 1px solid #F5D9A8; color: #8A5300;
  border-radius: var(--odw-radius-md);
  font-family: var(--odw-font-body); font-size: 0.78rem; font-weight: 600;
}

/* Toast shown when someone tries to go past the limit, on any page.
   Sits above the mobile bottom nav so it is never hidden behind it. */
.odw-qty-toast {
  position: fixed; left: 50%; transform: translate(-50%, 20px);
  bottom: calc(var(--odw-bottomnav-height, 64px) + 16px);
  z-index: 200; max-width: min(420px, calc(100vw - 32px));
  padding: var(--odw-space-3) var(--odw-space-4);
  background: #8A5300; color: #fff;
  border-radius: var(--odw-radius-md); box-shadow: var(--odw-shadow-lg);
  font-family: var(--odw-font-body); font-size: 0.84rem; font-weight: 600;
  line-height: 1.45; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.odw-qty-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (min-width: 900px) {
  .odw-qty-toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .odw-qty-toast { transition: opacity .01s; }
}

/* ============================================================
   Review form + review list (v7.77.0)

   The theme had NO styling for #respond, .comment-form-rating or
   p.stars at all — WooCommerce's own stylesheet is overridden, so
   the rating rendered as five plain text links ("1 of 5 stars"...)
   and looked broken.

   Stars are drawn with a Unicode glyph rather than WooCommerce's
   icon font, so they cannot break if that font fails to load.
   ============================================================ */
.odw-product-page__tabs #reviews { max-width: 760px; }
.odw-product-page__tabs #reviews .commentlist { list-style: none; margin: 0 0 var(--odw-space-5); padding: 0; }

/* ---------- Existing reviews ---------- */
.odw-product-page__tabs #reviews .comment_container {
  display: flex; gap: var(--odw-space-3); align-items: flex-start;
  padding: var(--odw-space-4) 0; border-bottom: 1px solid var(--odw-border);
}
.odw-product-page__tabs #reviews .comment_container img.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
}
.odw-product-page__tabs #reviews .comment-text { flex: 1 1 auto; min-width: 0; }
.odw-product-page__tabs #reviews .meta { font-size: 0.82rem; color: var(--odw-text-muted); margin: 0 0 var(--doesnt-exist, 6px); }
.odw-product-page__tabs #reviews .meta strong { color: var(--odw-text); font-weight: 700; }
.odw-product-page__tabs #reviews .description p { font-size: 0.88rem; line-height: 1.65; margin: 0; }
.odw-product-page__tabs #reviews .woocommerce-noreviews {
  margin: 0 0 var(--odw-space-4); font-size: 0.88rem; color: var(--odw-text-muted);
}

/* ---------- The form ---------- */
.odw-product-page__tabs #review_form_wrapper {
  background: var(--odw-primary-light);
  border: 1px solid rgba(46,158,92,0.22);
  border-radius: var(--odw-radius-lg);
  padding: var(--odw-space-5);
}
.odw-product-page__tabs #reply-title {
  display: block; font-family: var(--odw-font-display, var(--odw-font-body));
  font-size: 1.05rem; font-weight: 700; color: var(--odw-primary-dark);
  margin: 0 0 var(--odw-space-2);
}
.odw-product-page__tabs .comment-notes,
.odw-product-page__tabs .comment-form-cookies-consent {
  font-size: 0.8rem; color: var(--odw-text-muted); line-height: 1.55;
}
.odw-product-page__tabs #respond .comment-form > p { margin: 0 0 var(--odw-space-4); }
.odw-product-page__tabs #respond label {
  display: block; font-size: 0.85rem; font-weight: 700;
  color: var(--odw-text); margin-bottom: 6px;
}
.odw-product-page__tabs #respond input[type="text"],
.odw-product-page__tabs #respond input[type="email"],
.odw-product-page__tabs #respond textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--odw-font-body); font-size: 0.9rem; color: var(--odw-text);
  padding: 11px var(--odw-space-3);
  background: var(--odw-surface);
  border: 1px solid var(--odw-border); border-radius: var(--odw-radius-md);
}
.odw-product-page__tabs #respond textarea { min-height: 120px; resize: vertical; }
.odw-product-page__tabs #respond input:focus,
.odw-product-page__tabs #respond textarea:focus { outline: 0; border-color: var(--odw-primary); }

.odw-product-page__tabs #respond .form-submit input[type="submit"] {
  background: var(--odw-primary); color: #fff; border: 0; cursor: pointer;
  font-family: var(--odw-font-body); font-weight: 700; font-size: 0.92rem;
  padding: 13px var(--odw-space-6); border-radius: var(--odw-radius-md);
  min-height: 48px;
}
.odw-product-page__tabs #respond .form-submit input[type="submit"]:hover { background: var(--odw-primary-dark); }

/* ---------- Star rating ---------- */
.odw-product-page__tabs .comment-form-rating { margin-bottom: var(--odw-space-4); }
.odw-product-page__tabs p.stars {
  display: flex; gap: 4px; margin: 0; padding: 0; line-height: 1;
}
.odw-product-page__tabs p.stars > span { display: flex; gap: 4px; }
.odw-product-page__tabs p.stars a {
  position: relative; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  /* Hide the "1 of 5 stars" label visually but keep it for screen
     readers. font-size:0 is reliable here; text-indent leaked. */
  font-size: 0; line-height: 0; color: transparent;
  text-decoration: none; cursor: pointer; overflow: hidden;
}
.odw-product-page__tabs p.stars a::before {
  /* CSS escape, NOT the literal glyph. A raw non-ASCII byte here is a
     risk in the minify/combine pipeline: if the file is read as the
     wrong encoding the whole stylesheet can be corrupted, which takes
     every style on the page down with it. The escape is pure ASCII. */
  content: "\2605";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-indent: 0; font-size: 30px; line-height: 1;
  color: #DFD6C4;                            /* unselected */
  transition: color .12s ease, transform .12s ease;
}
.odw-product-page__tabs p.stars a:hover::before { transform: scale(1.12); }

/* Fill this star and every star before it. */
.odw-product-page__tabs p.stars.is-hovering a::before,
.odw-product-page__tabs p.stars a.is-filled::before { color: #E8A33D; }
.odw-product-page__tabs p.stars.is-hovering a.is-past::before { color: #DFD6C4; }

/* ---------- Colour by rating (v7.77.2) ----------
   Red through green, so the meaning is readable before the words are.
   The class goes on p.stars and is set by JS on both hover and click,
   which is why a preview looks exactly like the committed choice. */
.odw-product-page__tabs p.stars.odw-r1 a.is-filled::before,
.odw-product-page__tabs p.stars.odw-r1.is-hovering a:not(.is-past)::before { color: #D64545; }
.odw-product-page__tabs p.stars.odw-r2 a.is-filled::before,
.odw-product-page__tabs p.stars.odw-r2.is-hovering a:not(.is-past)::before { color: #E8833D; }
.odw-product-page__tabs p.stars.odw-r3 a.is-filled::before,
.odw-product-page__tabs p.stars.odw-r3.is-hovering a:not(.is-past)::before { color: #E8A33D; }
.odw-product-page__tabs p.stars.odw-r4 a.is-filled::before,
.odw-product-page__tabs p.stars.odw-r4.is-hovering a:not(.is-past)::before { color: #7BB661; }
.odw-product-page__tabs p.stars.odw-r5 a.is-filled::before,
.odw-product-page__tabs p.stars.odw-r5.is-hovering a:not(.is-past)::before { color: var(--odw-primary); }

.odw-product-page__tabs .odw-rating-label {
  display: inline-block; margin-left: var(--odw-space-3);
  font-size: 0.85rem; font-weight: 700;
  vertical-align: middle;
  transition: color .12s ease;
}
.odw-product-page__tabs .odw-rating-label:empty { display: none; }
/* Label takes the same colour as the stars it describes. */
.odw-product-page__tabs p.stars.odw-r1 ~ .odw-rating-label { color: #C0392B; }
.odw-product-page__tabs p.stars.odw-r2 ~ .odw-rating-label { color: #C56A22; }
.odw-product-page__tabs p.stars.odw-r3 ~ .odw-rating-label { color: #8A5300; }
.odw-product-page__tabs p.stars.odw-r4 ~ .odw-rating-label { color: #4E8A3C; }
.odw-product-page__tabs p.stars.odw-r5 ~ .odw-rating-label { color: var(--odw-primary-dark); }

/* A dimmer style while it is only a hover preview, so a committed
   choice still reads as committed. */
.odw-product-page__tabs p.stars.is-hovering ~ .odw-rating-label { opacity: 0.75; }
/* The real <select> stays in the DOM for form submission and screen
   readers, but is not the visible control. */
.odw-product-page__tabs #respond select#rating { position: absolute; left: -9999px; }

@media (max-width: 600px) {
  .odw-product-page__tabs #review_form_wrapper { padding: var(--odw-space-4); }
  .odw-product-page__tabs p.stars a { width: 38px; height: 38px; }
  .odw-product-page__tabs p.stars a::before { font-size: 32px; }
  .odw-product-page__tabs #respond .form-submit input[type="submit"] { width: 100%; }
}

/* ============================================================
   Checkout payment badges (v7.79.1)

   Two columns, one icon and one colour per badge. Stacked in a
   single column, four badges pushed the payment method's own
   text down the card and read as fine print instead of as
   reasons to choose prepaid.
   ============================================================ */
.odw-payment-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0 8px;
  max-width: 460px;
}
.odw-payment-badges .odw-payment-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; min-width: 0;
  padding: 3px 7px;
  /* v7.79.6: radius-md (8px) read as a soft pill next to the squarer
     payment card. radius-sm keeps the badge shape closer to the box it
     sits inside. */
  border-radius: var(--odw-radius-sm);
  font-family: var(--odw-font-body); font-size: 0.64rem; font-weight: 700;
  line-height: 1.3;
}
.odw-payment-badges .odw-payment-badge__icon svg { width: 11px; height: 11px; }
.odw-payment-badge__icon { flex-shrink: 0; display: inline-flex; }
.odw-payment-badge__text { min-width: 0; overflow-wrap: anywhere; }

/* One colour per badge so four of them stay scannable rather than
   becoming a block of the same green. */
.odw-payment-badge--green  { background: #E9F7EF; color: #1E7A46; border: 1px solid rgba(46,158,92,0.28); }
.odw-payment-badge--amber  { background: #FFF4E0; color: #8A5300; border: 1px solid #F0C97D; }
.odw-payment-badge--blue   { background: #E8F1FB; color: #1F5C99; border: 1px solid #BBD5F0; }
.odw-payment-badge--violet { background: #F0ECFA; color: #5B3FA8; border: 1px solid #D2C6EF; }

/* A badge used on its own, outside the grid — the part-payment amount.
   It needs the same look as the grid badges but must not inherit the
   grid's sizing, since there is nothing beside it. */
.odw-payment-badge--solo {
  /* v7.79.4: was 0.78rem / 6px 10px, which made this noticeably bigger than
     the badge it replaced (0.64rem / 2px) and left it towering over the
     benefit list beneath it. Back near the original size — the icon and
     colour are what make it read as a badge, not the bulk. */
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content;
  margin: 0 0 var(--odw-space-2) calc(var(--odw-space-3) + 18px);
  padding: 2px 7px;
  border-radius: var(--odw-radius-sm);
  font-family: var(--odw-font-body); font-size: 0.66rem; font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.odw-payment-badge--solo .odw-payment-badge__icon svg { width: 11px; height: 11px; }

@media (max-width: 600px) {
  /* The ~30px indent that aligns this under the radio label is worth it on
     a wide screen. At 380px it was the difference between one line and two,
     so the badge wrapped and doubled in height. Drop the indent and let the
     text stay on one line. */
  .odw-payment-badge--solo {
    margin-left: 0;
    font-size: 0.62rem;
    padding: 2px 7px;
  }
  .odw-payment-badge--solo .odw-payment-badge__icon svg { width: 10px; height: 10px; }
}

@media (max-width: 480px) {
  .odw-payment-badges { gap: 5px; }
  .odw-payment-badges .odw-payment-badge { font-size: 0.7rem; padding: 5px 8px; gap: 5px; }
}


/* ============================================================
   Payment method card spacing (v7.79.6)
   The card carried 12px padding all round plus the badge/benefit
   block's own bottom margin, which stacked into a visible gap
   under the last bullet. Tightened, with the bottom trimmed more
   than the top since nothing sits below the text.
   ============================================================ */
.woocommerce-checkout .wc_payment_method {
  padding: var(--odw-space-3) var(--odw-space-3) var(--odw-space-2);
}
/* Gateways WITH a logo still need room for it — that rule stays, just
   with a smaller reserve now the badges are shorter. */
.woocommerce-checkout .wc_payment_method:has(label img) {
  padding-bottom: calc(var(--odw-space-1) + 20px);
}
.woocommerce-checkout .payment_box .odw-payment-benefits { margin-bottom: 0; }
.woocommerce-checkout .payment_box .odw-payment-badges { margin-bottom: 2px; }

@media (max-width: 600px) {
  .odw-payment-badges { gap: 4px; }
  .odw-payment-badges .odw-payment-badge { font-size: 0.61rem; padding: 3px 6px; }
  .odw-payment-badges .odw-payment-badge__icon svg { width: 10px; height: 10px; }
}