/* ── WooCommerce loop price ──────────────────────────────────────────────────
 * <del> gets browser default underline — override to strikethrough only,
 * smaller and muted. <ins> removes WC's default underline on the sale price.
 * ─────────────────────────────────────────────────────────────────────────── */
.woocommerce ul.products del,
.woocommerce-page ul.products del {
  text-decoration: line-through;
  text-decoration-color: currentColor;
  font-size: 0.8em;
  opacity: 0.6;
}

.woocommerce ul.products ins,
.woocommerce-page ul.products ins {
  text-decoration: none;
  font-weight: inherit;
  background: none;
}

/* ── Order-pay page spacing ──────────────────────────────────────────────── */
.woocommerce-order-pay .woocommerce > * + * {
  margin-top: 2rem;
}

/* ── Orders table — rounded corners without overflow:hidden ─────────────── */
.mezzo-orders-table-wrap thead tr:first-child th:first-child { border-top-left-radius: var(--radius-2xl); }
.mezzo-orders-table-wrap thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-2xl); }
.mezzo-orders-table-wrap tbody tr:last-child td:first-child,
.mezzo-orders-table-wrap tfoot tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-2xl); }
.mezzo-orders-table-wrap tbody tr:last-child td:last-child,
.mezzo-orders-table-wrap tfoot tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-2xl); }

/* ── Orders actions dropdown — no focus ring on trigger ─────────────────── */
.mezzo-orders-table-wrap button:focus { outline: none; }

/* ── Orders actions column — remove WC default text-center ──────────────── */
.woocommerce-orders-table__cell-order-actions { text-align: right !important; }
.woocommerce-orders-table__cell-order-actions button { outline: none; }

/* ── Primary nav links — gradient underline hover ────────────────────────── */
.site-header nav a {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .15s ease;
}
.site-header nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.site-header nav a:hover { color: rgb(var(--color-accent-bright)) !important; }
.site-header nav a:hover::after { transform: scaleX(1); }

/* ── Orders dropdown — force left-align on all items including buttons ───── */
.mezzo-orders-table-wrap .lhl-actions-dropdown a,
.mezzo-orders-table-wrap .lhl-actions-dropdown button { text-align: left !important; }

/* ── Single product — tab panel spacing, review-form submit ──────────────── */
/* Even padding. It was 1.25rem 1.5rem 0, so the copy sat hard against the
   bottom edge of the card while the other three sides were comfortable. */
.single-product .woocommerce-Tabs-panel {
  padding: 1.5rem;
}

/* ── Single product — gallery size ───────────────────────────────────────
   The gallery column was taking 598px of a 1200px row, so a single vial
   render was rendering larger than the buy panel beside it and pushing the
   price and add-to-cart down the page. Capping it keeps the product the
   subject without letting it dominate the decision. */
.single-product .woocommerce-product-gallery {
  max-width: 420px;
}
.single-product .comment-form .form-submit input[type=submit] {
  margin-bottom: 2rem;
}

/* ── Checkout payment options — kill Woo's double chrome ─────────────────
   Woo wraps the payment radio group in a hairline box (::after, currentColor
   at 20% — bright on dark surfaces), inset-shadows the checked option, and
   draws separator lines between options. Combined with core's own option
   styling it reads as doubled, cramped borders. Strip all of it and render
   each gateway as a standalone card like the rest of the checkout. */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked::after {
  display: none !important; /* outer hairline box */
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after {
  display: none !important; /* between-option separators */
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__payment-method label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: none !important; /* inset currentColor ring on checked option */
}

/* Each payment option is its own card; the accordion content stays inside. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  background: rgb(var(--color-surface-raised));
  border: var(--bw-1) solid rgb(var(--color-line));
  border-radius: var(--shape-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-smooth),
              background var(--duration-fast) var(--ease-smooth);
}
.wc-block-checkout__payment-method
  .wc-block-components-radio-control-accordion-option
  + .wc-block-components-radio-control-accordion-option {
  margin-top: 0.75rem;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:hover {
  border-color: rgb(var(--color-accent) / 0.5);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: rgb(var(--color-accent));
  background: rgb(var(--color-accent) / 0.06);
}

/* The inner label draws no chrome of its own — the card carries it. */
.wc-block-checkout__payment-method
  .wc-block-components-radio-control-accordion-option
  .wc-block-components-radio-control__option {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Gateway description — breathing room, aligned under the label text. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
  padding: 0.25rem 1.25rem 1.25rem 2.75rem !important;
  color: rgb(var(--color-muted));
}

/* ── Checkout — light field surfaces ──────────────────────────────────────
   Woo's rewritten country/province selects (.wc-blocks-components-select,
   plural "blocks") hardcode a white container that core's field tokens
   never reach, so those were rendering light while everything else sat
   dark. Take the hint: re-token the whole checkout so every field is a
   light surface. Core's input rules read these vars — no specificity
   fight for the surfaces themselves. */
.wp-block-woocommerce-checkout {
  --field-container-color: #fff;
  --field-text-color: rgb(15 23 42);        /* slate-900 */
  --field-placeholder-color: rgb(100 116 139); /* slate-500 */
  --field-border-color: transparent;
}

/* New-style selects — align radius with the token the other fields use. */
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
  border-radius: var(--field-border-radius);
}

/* Floating labels sit INSIDE the now-light fields — core paints them with
   the dark theme's muted (light grey, invisible on white). Darken. */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-textarea label,
.wp-block-woocommerce-checkout .wc-block-components-select label,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
  color: rgb(71 85 105 / 0.95) !important; /* slate-600 */
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-components-text-input:focus-within label,
.wp-block-woocommerce-checkout .wc-block-components-select.is-active label {
  color: rgb(var(--color-accent)) !important;
}

/* Text typed into the new selects + their caret. */
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-blocks-components-select__expand {
  color: rgb(15 23 42);
  fill: rgb(15 23 42);
}

/* ── Checkout — form column sits on a surface ─────────────────────────────
   The bare form on the page background reads harsh next to the carded order
   summary; a soft raised surface pulls it together and tempers the white
   fields' contrast. */
.wp-block-woocommerce-checkout .wc-block-checkout__main {
  background: rgb(var(--color-surface-raised) / 0.55);
  border: var(--bw-1) solid rgb(var(--color-line) / 0.7);
  border-radius: var(--shape-2xl);
  padding: 1.25rem;
}
@media (min-width: 768px) {
  .wp-block-woocommerce-checkout .wc-block-checkout__main {
    padding: 2rem 2.5rem;
  }
}


/* ── Restock request (mezzo-restock-requests) ────────────────────────────
   Replaces the bare "Out of stock" dead end on the single product. Styled
   as a panel so it reads as an offer rather than an error. */
.mz-restock {
  margin: 1.25rem 0 0;
  padding: 1.25rem;
  border: 1px solid rgb(var(--color-line));
  border-radius: var(--shape-xl);
  background: rgb(var(--color-surface-sunken));
}

.mz-restock__lead {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  color: rgb(var(--color-ink));
}

.mz-restock__done {
  margin: 0;
  font-size: 0.9375rem;
  color: rgb(var(--color-primary));
}

.mz-restock__err {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: rgb(var(--color-error));
}

.mz-restock__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mz-restock__form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Off-screen rather than display:none — a bot reading the CSS can spot the
   latter, and some autofillers skip hidden fields entirely. */
.mz-restock__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mz-restock__fine {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(var(--color-subtle));
}


/* ─── Product breadcrumb ─────────────────────────────────────────────────
   Trail left, return link right. The core .woocommerce-breadcrumb rule
   still supplies type and colour; this only handles the split. */

.mz-crumbs {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
}

.mz-crumbs__trail { min-width: 0; }

.mz-crumbs__sep {
  margin: 0 0.45rem;
  opacity: 0.4;
}

.mz-crumbs__back {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--color-muted));
  text-decoration: none;
  transition: color 0.18s ease;
}

.mz-crumbs__back::before {
  content: "\2190";
  margin-right: 0.4rem;
  /* The arrow moves, the label does not — a whole shifting link reads as
     a layout wobble rather than a hover. */
  display: inline-block;
  transition: transform 0.18s ease;
}

.mz-crumbs__back:hover,
.mz-crumbs__back:focus-visible { color: rgb(var(--color-primary)); }

.mz-crumbs__back:hover::before { transform: translateX(-0.2rem); }

@media (prefers-reduced-motion: reduce) {
  .mz-crumbs__back::before { transition: none; }
  .mz-crumbs__back:hover::before { transform: none; }
}


/* ── Additional information table ────────────────────────────────────────
   Woo right-aligns the label column, which pushes the labels away from
   their own values and leaves a ragged left edge down the whole table. */

.woocommerce-product-attributes th,
.woocommerce-product-attributes-item__label {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 1.5rem;
  color: rgb(var(--color-ink));
}

.woocommerce-product-attributes td,
.woocommerce-product-attributes-item__value { text-align: left; }

.woocommerce-product-attributes td p { margin: 0; }

/* ── Strength picker ─────────────────────────────────────────────────────
   A listbox standing in for the native variation <select>, so each option
   can carry its own stock state. The native select stays in the DOM and
   keeps being the source of truth — Woo's variation script listens to it,
   and this only ever sets its value and fires change. Progressive: without
   JS the native select is simply never hidden. */

.mz-vselect { position: relative; }

.mz-vselect__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mz-vselect__trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 13rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid rgb(var(--color-line));
  border-radius: 0.625rem;
  background: rgb(var(--color-surface-sunken));
  color: rgb(var(--color-ink));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.mz-vselect__trigger:hover { border-color: rgb(var(--color-subtle)); }

.mz-vselect__trigger:focus-visible,
.mz-vselect.is-open .mz-vselect__trigger {
  outline: none;
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.22);
}

.mz-vselect__label { flex: 1 1 auto; min-width: 0; }

.mz-vselect__label--placeholder { color: rgb(var(--color-subtle)); }

.mz-vselect__caret {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.18s ease;
}

.mz-vselect.is-open .mz-vselect__caret { transform: rotate(180deg); }

.mz-vselect__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.375rem);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0.3125rem;
  list-style: none;
  border: 1px solid rgb(var(--color-line));
  border-radius: 0.75rem;
  background: rgb(var(--color-surface-raised));
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.65);
}

.mz-vselect:not(.is-open) .mz-vselect__list { display: none; }

.mz-vselect__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.14s ease;
}

.mz-vselect__option:hover,
.mz-vselect__option.is-active { background: rgb(var(--color-surface-sunken)); }

.mz-vselect__option[aria-selected="true"] { color: rgb(var(--color-primary)); }

/* Out of stock stays selectable: choosing it is how you reach the restock
   form, so it is dimmed rather than disabled. */
.mz-vselect__option--oos .mz-vselect__option-label { opacity: 0.6; }

/* ── Stock badge ─────────────────────────────────────────────────────── */

.mz-stock {
  flex: 0 0 auto;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.mz-stock--in {
  background: rgb(var(--color-primary) / 0.14);
  color: rgb(var(--color-primary));
}

.mz-stock--out {
  background: rgb(var(--brand-error) / 0.14);
  color: rgb(var(--brand-error));
}

/* Woo's own availability line, restyled to match the badges above instead
   of sitting under the price as unstyled grey text. */
.single-product .woocommerce-variation-availability p.stock {
  display: inline-block;
  margin: 0.375rem 0 0;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.single-product .woocommerce-variation-availability p.in-stock {
  background: rgb(var(--color-primary) / 0.14);
  color: rgb(var(--color-primary));
}

.single-product .woocommerce-variation-availability p.out-of-stock {
  background: rgb(var(--brand-error) / 0.14);
  color: rgb(var(--brand-error));
}

/* The restock panel on a variable product ships hidden and is revealed by
   the picker when the chosen variation is the one that is out. */
.mz-restock[hidden] { display: none; }

/* Woo marks the wrapper disabled for an out-of-stock variation but the
   gradient button carried on looking live and clickable. */
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}


/* ── Payment instructions (mezzo-checkout-extras) ────────────────────────
   Shown on the order-received page for e-Transfer orders. Treated as a
   notice rather than body copy: until the money arrives this is the only
   thing on the page the customer still has to act on. */

.mz-payinfo {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(var(--color-line));
  border-left: 3px solid rgb(var(--color-primary));
  border-radius: 0.75rem;
  background: rgb(var(--color-surface-raised));
}

.mz-payinfo__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgb(var(--color-ink));
}

.mz-payinfo__order {
  margin: 0 0 0.875rem;
  color: rgb(var(--color-ink));
}

.mz-payinfo__steps {
  margin: 0;
  padding-left: 1.25rem;
  color: rgb(var(--color-muted));
}

.mz-payinfo__steps li { margin-bottom: 0.4375rem; }
.mz-payinfo__steps li:last-child { margin-bottom: 0; }