/* ==========================================================================
   Wholesome Labs — WooCommerce
   Catalogue, product detail, cart, checkout, account, notices.
   Targets WooCommerce block markup (WC 10.x) with classic fallbacks where
   WooCommerce still renders PHP templates (add-to-cart form, My Account).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ratings and reviews are switched off for this store. Reviews are disabled in
   WooCommerce settings and in inc/woocommerce.php; these rules are the belt to
   that braces, so a plugin or template cannot reintroduce stars visually.
   -------------------------------------------------------------------------- */

.star-rating,
.woocommerce-product-rating,
.woocommerce-review-link,
.comment-form-rating,
.wc-block-components-product-rating,
.wc-block-components-product-rating-stars,
.wc-block-components-review-list,
.wp-block-woocommerce-product-rating,
.wp-block-woocommerce-product-rating-stars,
.wp-block-woocommerce-product-rating-counter,
.wp-block-woocommerce-product-reviews,
.wp-block-woocommerce-reviews-by-product,
#reviews,
#review_form_wrapper,
li.reviews_tab,
.woocommerce-Tabs-panel--reviews {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Shared storefront chrome
   -------------------------------------------------------------------------- */

.wc-block-breadcrumbs {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--wl-warm-gray);
  padding-block: 1.25rem 0;
}

.wc-block-breadcrumbs a { color: var(--wl-warm-gray); text-decoration: none; }
.wc-block-breadcrumbs a:hover { color: var(--wl-forest); text-decoration: underline; text-underline-offset: 3px; }

/* Catalogue toolbar: result count + sorting */
.wl-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
  border-block: var(--wl-border);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.wc-block-product-results-count,
.woocommerce-result-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wl-warm-gray);
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select {
  width: auto;
  min-width: 200px;
  font-size: 0.8125rem;
  padding: 0.55rem 2.4rem 0.55rem 0.9rem;
  border-radius: var(--wl-radius-pill);
  background-color: var(--wl-white);
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

/* Catalogue grid.

   WooCommerce's product-collection block generates its own grid from a minimum
   item width when "shrink columns" is on, which resolved to two 577px columns
   on a 1182px catalogue and made every card enormous. Column count is a design
   decision, so it is set here rather than left to a computed minimum. */
.wp-block-woocommerce-product-collection .wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(var(--wl-cols, 3), minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem) !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Related products run four-up under a product. */
.wl-related .wc-block-product-template { --wl-cols: 4; }

/* The catalogue runs four-up on a wide screen. At wideSize 1600 a three-up
   grid gives each card a ~480px image, which is a poster rather than a
   thumbnail and pushes the second row off the fold. Four is ~355px.

   Scoped by body class rather than raised globally, because the same block
   powers the featured row on the home page (three products) and the cart
   cross-sell (three) — a four-column track would leave both with a hole on the
   right.

   1400 rather than 1200 as the switch: below that, four columns drop each card
   under ~280px and the longer product names start wrapping to three lines. */
@media (min-width: 1400px) {
  .post-type-archive-product .wc-block-product-template,
  .tax-product_cat .wc-block-product-template,
  .search-results .wc-block-product-template {
    --wl-cols: 4;
  }
}

@media (max-width: 1024px) {
  .wl-related .wc-block-product-template { --wl-cols: 3; }
}

@media (max-width: 860px) {
  .wp-block-woocommerce-product-collection .wc-block-product-template { --wl-cols: 2; }
}

@media (max-width: 560px) {
  .wp-block-woocommerce-product-collection .wc-block-product-template { --wl-cols: 1; }
}

.wc-block-product-template .wc-block-product,
ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  overflow: hidden;
  padding: 0 0 1.25rem;
  text-align: left;
  box-shadow: var(--wl-shadow-soft);
  transition: border-color 0.25s var(--wl-ease),
              box-shadow 0.25s var(--wl-ease),
              transform 0.25s var(--wl-ease);
}

.wc-block-product-template .wc-block-product:hover,
ul.products li.product:hover {
  border-color: var(--wl-sage);
  box-shadow: var(--wl-shadow-lift);
  transform: translateY(-2px);
}

/* Image panel — square, tinted, never distorted */
.wc-block-product-template .wc-block-components-product-image {
  margin: 0 0 1.15rem;
  background: linear-gradient(165deg, var(--wl-ivory-soft) 0%, var(--wl-mist) 100%);
  border-bottom: var(--wl-border-soft);
}

.wc-block-product-template .wc-block-components-product-image a,
.wc-block-product-template .wc-block-components-product-image img {
  display: block;
  width: 100%;
}

.wc-block-product-template .wc-block-components-product-image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 1.75rem);
  transition: scale 0.5s var(--wl-ease);
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img { scale: 1.03; }

/* Card text block */
.wc-block-product-template .wc-block-product > *:not(.wc-block-components-product-image) {
  padding-inline: 1.25rem;
  text-align: left !important;
}

.wc-block-product-template .wp-block-post-title {
  margin: 0 0 0.35rem;
  font-family: var(--wl-serif);
  font-size: 1.1875rem !important;
  font-weight: 500;
  line-height: 1.3 !important;
}

.wc-block-product-template .wp-block-post-title a {
  color: var(--wl-forest);
  text-decoration: none;
}

.wc-block-product-template .wp-block-post-title a:hover { color: var(--wl-forest-deep); }

/* Category line above the title */
.wl-card-cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wl-eucalyptus);
  margin: 0 0 0.5rem;
}

/* Short neutral descriptor */
.wl-card-desc {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--wl-warm-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge row inside a card */
.wl-card-badges { margin: 0 0 0.85rem; }

.wc-block-product-template .wc-block-components-product-price {
  margin: 0 0 1.15rem !important;
  font-family: var(--wl-sans);
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--wl-ink);
}

/* Unit price on a card.

   The price above it owns the gap down to the buttons, so when this line is
   present the price hands that gap over and this carries it instead. The card's
   vertical rhythm is then identical whether a product has a size on record or
   not — which matters, because a catalogue row mixes the two.

   Note the two selectors. The block core styles is .wc-block-components-
   product-price, but that sits *inside* .wp-block-woocommerce-product-price,
   and it is the outer one that is the sibling of this line — so the :has()
   test has to be on the wrapper while the margin is reset on both. */
.wc-block-product-template .wp-block-woocommerce-product-price:has(+ .wl-card-unit) {
  margin-bottom: 0 !important;
}

.wc-block-product-template .wp-block-woocommerce-product-price:has(+ .wl-card-unit)
  .wc-block-components-product-price {
  margin-bottom: 0.15rem !important;
}

.wl-card-unit {
  margin: 0 0 1.15rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--wl-warm-gray);
}

.wl-card-unit__value {
  font-weight: 600;
  color: var(--wl-forest-deep);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-components-product-price ins { text-decoration: none; }

.wc-block-components-product-price del {
  color: var(--wl-taupe);
  font-weight: 400;
  margin-right: 0.4rem;
  font-size: 0.875rem;
}

/* Card actions: primary add-to-cart plus a quiet details link */
.wl-card-actions {
  margin-top: auto;
  display: grid;
  gap: 0.5rem;
}

.wc-block-product-template .wp-block-button.wc-block-components-product-button { margin: 0; }

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
  width: 100%;
  justify-content: center;
  background: var(--wl-forest);
  border-color: var(--wl-forest);
  color: var(--wl-ivory);
  font-size: 0.8125rem;
  padding: 0.7rem 1.25rem;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--wl-forest-deep);
  border-color: var(--wl-forest-deep);
}

.wc-block-product-template .wc-block-components-product-button .added_to_cart {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--wl-forest);
}

.wl-card-view {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wl-warm-gray);
  text-decoration: none;
  padding: 0.5rem;
  border-radius: var(--wl-radius-pill);
  transition: color 0.2s var(--wl-ease), background-color 0.2s var(--wl-ease);
}

.wl-card-view:hover { color: var(--wl-forest); background: var(--wl-mist); }

/* Sale badge, if ever used */
.wc-block-components-product-sale-badge {
  background: var(--wl-gold);
  color: var(--wl-forest-deep);
  border-radius: var(--wl-radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

/* Pagination */
.wp-block-query-pagination { margin-top: clamp(2rem, 4vw, 3rem); gap: 0.4rem; }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 0.6rem;
  border-radius: var(--wl-radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wl-warm-gray);
  text-decoration: none;
  transition: background-color 0.2s var(--wl-ease), color 0.2s var(--wl-ease);
}

.wp-block-query-pagination a:hover { background: var(--wl-mist); color: var(--wl-forest); }
.wp-block-query-pagination .page-numbers.current {
  background: var(--wl-forest);
  color: var(--wl-ivory);
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

.wl-product__gallery .wc-block-components-product-image,
.wp-block-woocommerce-product-image-gallery {
  background: linear-gradient(165deg, var(--wl-ivory-soft) 0%, var(--wl-mist) 100%);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.wp-block-woocommerce-product-image-gallery img {
  border-radius: var(--wl-radius);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li { width: 74px; }

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img {
  border: var(--wl-border);
  border-radius: var(--wl-radius-sm);
  background: var(--wl-white);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s var(--wl-ease), border-color 0.2s var(--wl-ease);
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img:hover,
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--wl-sage);
}

/* Purchase card on the right */
.wl-buybox {
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  box-shadow: var(--wl-shadow-soft);
  padding: clamp(1.35rem, 3vw, 1.9rem);
}

.wl-product__title.wp-block-post-title {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  margin: 0.75rem 0 0.5rem;
  line-height: 1.15;
}

/* Price per milligram, under the headline price.

   A unit price for a quantity of material — never a per-dose figure. See
   inc/unit-price.php and COMPLIANCE.md. */
.wl-unitprice {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--wl-warm-gray);
}

.wl-unitprice [data-wl-unitprice-value] {
  font-weight: 600;
  color: var(--wl-forest-deep);
  font-variant-numeric: tabular-nums;
}

.wl-unitprice__dash {
  font-weight: 400;
  color: var(--wl-taupe);
  padding-inline: 0.1rem;
}

.wl-product__price .wc-block-components-product-price {
  font-family: var(--wl-sans);
  font-size: 1.5rem !important;
  font-weight: 600;
  color: var(--wl-ink);
}

.wl-product__excerpt {
  color: var(--wl-warm-gray);
  line-height: 1.75;
  font-size: 0.9375rem;
}

/* Add-to-cart form (WooCommerce renders the classic form inside the block) */
.wp-block-woocommerce-add-to-cart-form form.cart,
.wc-block-add-to-cart-form form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0;
}

.wp-block-woocommerce-add-to-cart-form .quantity,
.wc-block-add-to-cart-form .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-white);
  overflow: hidden;
  flex: none;
}

.wp-block-woocommerce-add-to-cart-form .quantity input.qty,
.wc-block-add-to-cart-form .quantity input.qty {
  width: 4.5rem;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  padding: 0.8rem 0.35rem;
  background: transparent;
}

.wp-block-woocommerce-add-to-cart-form .quantity input.qty:focus { box-shadow: none; }

.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button,
.wc-block-add-to-cart-form button.single_add_to_cart_button {
  flex: 1 1 12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wl-forest);
  border: 1px solid var(--wl-forest);
  color: var(--wl-ivory);
  border-radius: var(--wl-radius-pill);
  font-family: var(--wl-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.75rem;
  cursor: pointer;
  transition: background-color 0.22s var(--wl-ease), transform 0.22s var(--wl-ease);
}

.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button:hover {
  background: var(--wl-forest-deep);
  border-color: var(--wl-forest-deep);
  transform: translateY(-1px);
}

.wp-block-woocommerce-add-to-cart-form button.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variation selects */
.variations { width: 100%; }

/* WooCommerce's woocommerce-blocktheme.css fixes these selects at
   height: 3em — shorter than base.css's padding plus line box, so
   descenders clip ("20 mg" renders as "20 ma"). Let content size it;
   the body prefix outranks core's selector. */
body .woocommerce table.variations tr td select {
  height: auto; /* wl-variation-clip-fix */
}
.variations th { text-align: left; padding: 0.5rem 0; font-size: 0.8125rem; color: var(--wl-warm-gray); }
.variations td { padding: 0 0 0.75rem; }
.reset_variations { font-size: 0.75rem; color: var(--wl-warm-gray); }

/* Microcopy under the buy button */
.wl-buybox__micro {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--wl-border-soft);
}

.wl-buybox__micro div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--wl-warm-gray);
}

.wl-buybox__micro svg { width: 15px; height: 15px; color: var(--wl-eucalyptus); flex: none; }

/* Product meta (SKU, category) */
.wp-block-woocommerce-product-meta {
  font-size: 0.75rem;
  color: var(--wl-warm-gray);
  margin-top: 1.25rem;
}

.wp-block-woocommerce-product-meta a { color: var(--wl-warm-gray); }

/* Related products heading */
.wl-related .wp-block-heading {
  font-size: 1.625rem;
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Cart
   -------------------------------------------------------------------------- */

/* Spacing comes from the surrounding .wl-section; a second margin here just
   stacked with it. */
.wc-block-cart { margin-block: 0; }

.wc-block-cart-items { border: 0; }

.wc-block-cart-items__header {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wl-warm-gray);
  border-bottom: var(--wl-border);
}

.wc-block-cart-items__row {
  border-bottom: var(--wl-border-soft);
  padding-block: 1.5rem;
}

.wc-block-cart-item__image img {
  border: var(--wl-border);
  border-radius: var(--wl-radius);
  background: var(--wl-ivory-soft);
  padding: 0.35rem;
}

.wc-block-components-product-name {
  font-family: var(--wl-serif);
  font-size: 1.125rem !important;
  font-weight: 500;
  color: var(--wl-forest) !important;
  text-decoration: none;
}

.wc-block-components-product-metadata { font-size: 0.8125rem; color: var(--wl-warm-gray); }

.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata__description {
  font-size: 0.75rem !important;
  color: var(--wl-warm-gray) !important;
}

.wc-block-cart-item__remove-link:hover { color: #8C3B2E !important; }

.wc-block-components-quantity-selector {
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius-pill);
  background: var(--wl-white);
  overflow: hidden;
}

.wc-block-components-quantity-selector::after { display: none; }

.wc-block-components-quantity-selector__button {
  color: var(--wl-warm-gray);
  transition: color 0.2s var(--wl-ease), background-color 0.2s var(--wl-ease);
}

.wc-block-components-quantity-selector__button:hover { color: var(--wl-forest); background: var(--wl-mist); }

/* Totals sidebar */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wc-block-components-panel {
  border-color: var(--wl-stone);
}

.wc-block-cart__sidebar .wc-block-components-sidebar {
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--wl-shadow-soft);
}

.wc-block-cart__totals-title {
  font-family: var(--wl-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wl-warm-gray) !important;
}

.wc-block-components-totals-item__label { color: var(--wl-warm-gray); font-size: 0.875rem; }
.wc-block-components-totals-item__value { font-weight: 600; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--wl-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--wl-ink);
}

/* Checkout button in cart */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--wl-forest) !important;
  border: 1px solid var(--wl-forest) !important;
  color: var(--wl-ivory) !important;
  border-radius: var(--wl-radius-pill) !important;
  font-family: var(--wl-sans);
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 1rem 1.75rem !important;
  transition: background-color 0.22s var(--wl-ease), transform 0.22s var(--wl-ease);
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--wl-forest-deep) !important;
  border-color: var(--wl-forest-deep) !important;
  transform: translateY(-1px);
}

/* Coupon panel */
.wc-block-components-panel__button {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--wl-forest) !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input { border-radius: var(--wl-radius-pill); }

.wc-block-components-totals-coupon__button {
  border-radius: var(--wl-radius-pill) !important;
  background: transparent !important;
  border: 1px solid var(--wl-forest) !important;
  color: var(--wl-forest) !important;
}

.wc-block-components-totals-coupon__button:hover {
  background: var(--wl-forest) !important;
  color: var(--wl-ivory) !important;
}

.wc-block-components-chip {
  background: var(--wl-sage-pale) !important;
  border-color: rgba(110, 143, 130, 0.35) !important;
  color: var(--wl-forest-deep) !important;
  border-radius: var(--wl-radius-pill) !important;
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.wc-block-checkout { margin-block: 0; }

.wc-block-components-checkout-step {
  border: 0;
  padding-block: 0 2.25rem;
}

.wc-block-components-checkout-step__title {
  font-family: var(--wl-serif) !important;
  font-size: 1.375rem !important;
  font-weight: 500 !important;
  color: var(--wl-forest) !important;
}

.wc-block-components-checkout-step__heading { margin-block: 0 1.15rem; }

.wc-block-components-checkout-step__description {
  color: var(--wl-warm-gray) !important;
  font-size: 0.875rem !important;
}

.wc-block-components-checkout-step__container::after { border-color: var(--wl-stone); }

/* Numbered step markers */
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  color: var(--wl-gold);
  font-family: var(--wl-serif);
  font-weight: 500;
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
  border-radius: var(--wl-radius) !important;
  border-color: var(--wl-stone) !important;
  background: var(--wl-white) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
  color: var(--wl-eucalyptus) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus {
  box-shadow: 0 0 0 3px rgba(110, 143, 130, 0.16) !important;
  border-color: var(--wl-eucalyptus) !important;
  outline: none;
}

/* Order summary sidebar */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--wl-shadow-soft);
}

.wc-block-components-order-summary__button-text {
  font-family: var(--wl-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wl-warm-gray) !important;
}

.wc-block-components-order-summary-item__image img {
  border: var(--wl-border);
  border-radius: var(--wl-radius-sm);
  background: var(--wl-ivory-soft);
}

/* Payment methods */
.wc-block-components-radio-control__option {
  border-radius: var(--wl-radius);
  border: 1px solid var(--wl-stone);
  margin-bottom: 0.6rem;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  background: var(--wl-white);
  transition: border-color 0.2s var(--wl-ease), background-color 0.2s var(--wl-ease);
}

.wc-block-components-radio-control__option:hover { border-color: var(--wl-sage); }

.wc-block-components-radio-control__option-checked {
  border-color: var(--wl-eucalyptus);
  background: var(--wl-mist);
}

.wc-block-components-radio-control__option::before,
.wc-block-components-radio-control__option::after { left: 1rem; }

/* Terms / acknowledgment checkboxes get extra visual weight */
.wc-block-checkout__terms,
.wc-block-components-checkbox {
  font-size: 0.875rem;
  line-height: 1.6;
}

.wc-block-checkout__terms {
  background: var(--wl-ivory-soft);
  border: 1px solid var(--wl-stone);
  border-left: 3px solid var(--wl-gold);
  border-radius: var(--wl-radius);
  padding: 1.15rem 1.35rem;
  margin-block: 1.5rem;
}

/* Additional-fields block used by the research-use acknowledgment */
.wc-block-checkout__additional-fields .wc-block-components-checkbox {
  background: var(--wl-ivory-soft);
  border: 1px solid var(--wl-stone);
  border-left: 3px solid var(--wl-gold);
  border-radius: var(--wl-radius);
  padding: 1.15rem 1.35rem;
  display: block;
}

/* --------------------------------------------------------------------------
   Mini cart drawer
   -------------------------------------------------------------------------- */

.wc-block-mini-cart__drawer .wc-block-components-drawer {
  background: var(--wl-ivory);
}

.wc-block-mini-cart__title {
  font-family: var(--wl-serif) !important;
  font-size: 1.375rem !important;
  font-weight: 500 !important;
  color: var(--wl-forest) !important;
}

.wc-block-mini-cart__footer { border-top: var(--wl-border); }

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
  border-radius: var(--wl-radius-pill);
  color: var(--wl-warm-gray);
  transition: background-color 0.2s var(--wl-ease), color 0.2s var(--wl-ease);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
  background: var(--wl-mist);
  color: var(--wl-forest);
}

.wc-block-mini-cart__title { font-size: 1.375rem !important; }

.wc-block-mini-cart__items { padding-top: 0.5rem; }

.wc-block-mini-cart__footer-actions .wc-block-components-button {
  border-radius: var(--wl-radius-pill) !important;
}

/* --------------------------------------------------------------------------
   My Account (WooCommerce still renders these as classic templates)
   -------------------------------------------------------------------------- */

/* The dashboard grid must only apply once there is a dashboard. Logged out,
   WooCommerce renders a Login / Register pair inside the same .woocommerce
   wrapper, and the two-column rule crushed it into the 250px sidebar track. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none; }

.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Logged-out account page: Login and Register side by side
   -------------------------------------------------------------------------- */

.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  max-width: 940px;
  margin-inline: auto;
}

/* WooCommerce clears its float columns with ::before/::after on the wrapper.
   In a grid container those pseudo-elements become grid items, which pushed
   Login into column two and Register onto a second row. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { display: none; }

.woocommerce-account #customer_login > div {
  float: none;
  width: auto;
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--wl-shadow-soft);
}

/* WooCommerce gives the login and register forms their own border and padding.
   The card around them already provides both, so strip the inner frame. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.woocommerce-account #customer_login h2 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
}

.woocommerce-account #customer_login form { max-width: none; }

.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account #customer_login p:not(.form-row) {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--wl-warm-gray);
}

.woocommerce-account .woocommerce-LostPassword {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
}

/* WooCommerce's show/hide password toggle sits inside the input. */
.woocommerce-account .password-input,
.woocommerce-account .woocommerce-password-hint { display: block; position: relative; }

.woocommerce-account .show-password-input {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--wl-warm-gray);
  border-radius: var(--wl-radius-pill);
}

.woocommerce-account .show-password-input:hover { background: var(--wl-mist); color: var(--wl-forest); }

@media (max-width: 700px) {
  .woocommerce-account #customer_login { grid-template-columns: 1fr; }
}

/* WooCommerce's classic account stylesheet floats these two panels and gives
   them explicit percentage widths. Inside a grid container the floats are
   ignored but the widths are not, which collapsed both panels and pushed them
   onto separate rows. Reset both and place them explicitly. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
  grid-column: 1;
  grid-row: 1;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
  grid-column: 2;
  grid-row: 1;
}

.woocommerce-MyAccount-navigation {
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: 0.75rem;
  box-shadow: var(--wl-shadow-soft);
  position: sticky;
  top: calc(var(--wl-header-h) + 1.5rem);
}

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.7rem 0.95rem;
  border-radius: var(--wl-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wl-ink);
  text-decoration: none;
  transition: background-color 0.2s var(--wl-ease), color 0.2s var(--wl-ease);
}

.woocommerce-MyAccount-navigation a:hover { background: var(--wl-mist); color: var(--wl-forest); }

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--wl-sage-pale);
  color: var(--wl-forest-deep);
  font-weight: 600;
}

.woocommerce-MyAccount-content {
  background: var(--wl-white);
  border: var(--wl-border);
  border-radius: var(--wl-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--wl-shadow-soft);
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Orders / downloads tables */
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--downloads,
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.shop_table th {
  text-align: left;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wl-warm-gray);
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: var(--wl-border);
}

.shop_table td {
  padding: 1rem 0.75rem 1rem 0;
  border-bottom: var(--wl-border-soft);
  vertical-align: middle;
}

.shop_table .button { font-size: 0.75rem; padding: 0.5rem 1rem; }

/* Login / register forms */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
  max-width: 480px;
}

.woocommerce-form-row { margin-bottom: 1.15rem; }

.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.8125rem;
}

.woocommerce form .button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wl-forest);
  border: 1px solid var(--wl-forest);
  color: var(--wl-ivory);
  border-radius: var(--wl-radius-pill);
  font-family: var(--wl-sans);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--wl-ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--wl-forest-deep); border-color: var(--wl-forest-deep); color: var(--wl-ivory); }

@media (max-width: 860px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
  .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-MyAccount-navigation ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 0.35rem; }
  .woocommerce-MyAccount-navigation a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border-radius: var(--wl-radius) !important;
  border: 1px solid var(--wl-stone) !important;
  border-left-width: 3px !important;
  background: var(--wl-white) !important;
  padding: 1rem 1.25rem !important;
  margin-block: 1.25rem !important;
  font-size: 0.875rem !important;
  line-height: 1.6;
  color: var(--wl-ink) !important;
  list-style: none;
  box-shadow: var(--wl-shadow-soft);
}

.wc-block-components-notice-banner.is-success,
.woocommerce-message {
  border-left-color: var(--wl-eucalyptus) !important;
  background: var(--wl-mist) !important;
}

.wc-block-components-notice-banner.is-error,
.woocommerce-error {
  border-left-color: #A8503F !important;
  background: #FBF3F1 !important;
}

.wc-block-components-notice-banner.is-info,
.woocommerce-info {
  border-left-color: var(--wl-gold) !important;
  background: var(--wl-ivory-soft) !important;
}

/* Size it here. WooCommerce's own block CSS supplies the dimensions on cart
   and checkout, but it is not enqueued everywhere, and an inline SVG with only
   a viewBox has no intrinsic size -- left unsized with flex:none it expands to
   the full container width and squeezes the message to one character per line. */
.wc-block-components-notice-banner > svg {
  fill: currentColor;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

.wc-block-components-validation-error {
  color: #A8503F !important;
  font-size: 0.75rem !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .wl-catalog-toolbar { flex-direction: column; align-items: stretch; }
  .wl-catalog-toolbar > * { width: 100%; }
  .wc-block-catalog-sorting,
  .wc-block-catalog-sorting select,
  .woocommerce-ordering,
  .woocommerce-ordering select { width: 100%; }
  .wl-buybox { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Snackbar notices

   WooCommerce drops these bottom-left after cart actions (coupon applied, item
   removed). The element carries the notice-banner classes as well, so it picks
   up the banner styling above. Only the chrome is adjusted here — an earlier
   attempt to give it a dark treatment set ivory text that the banner's white
   background rule then won against, which made the text invisible.
   -------------------------------------------------------------------------- */

.wc-block-components-notice-snackbar {
  border-radius: var(--wl-radius) !important;
  box-shadow: var(--wl-shadow-lift) !important;
  font-family: var(--wl-sans);
  font-size: 0.875rem !important;
  line-height: 1.5;
  padding: 0.9rem 1.1rem !important;
  max-width: min(420px, calc(100vw - 2rem));
}

.wc-block-components-notice-snackbar svg {
  fill: var(--wl-eucalyptus) !important;
  color: var(--wl-eucalyptus) !important;
}

.wc-block-components-notice-snackbar__dismiss {
  color: var(--wl-warm-gray) !important;
  border-radius: var(--wl-radius-pill);
}

.wc-block-components-notice-snackbar__dismiss:hover { color: var(--wl-forest) !important; }

/* Field validation messages were 12px and sat flush against the input. */
.wc-block-components-validation-error {
  font-size: 0.8125rem !important;
  line-height: 1.45;
  margin-top: 0.4rem !important;
}
/* Payment methods render as an accordion: a wrapper holds the option row
   AND its description. The standalone __option card rules above are for
   plain radio lists (shipping); here the card chrome belongs on the
   wrapper, or you get a box inside a box with WC's raw dark border. */
.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius);
  background: var(--wl-white);
  margin-bottom: 0.6rem;
  overflow: hidden;
  transition: border-color 0.2s var(--wl-ease);
}

.wc-block-components-radio-control-accordion-option:hover { border-color: var(--wl-sage); }

.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
  border-color: var(--wl-eucalyptus);
}

.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
}

.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked {
  background: var(--wl-mist);
}

.wc-block-components-radio-control-accordion-content {
  padding: 0.85rem 1rem 1rem 2.9rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wl-warm-gray);
  background: var(--wl-ivory-soft);
  border-top: 1px solid var(--wl-stone);
}

.wc-block-components-radio-control-accordion-content:empty { display: none; }

.wc-block-components-radio-control__option::after { background: var(--wl-forest); }

.wc-block-components-radio-control__option-checked::before { border-color: var(--wl-forest); }
/* Volume tier cards (wl-volume-cards). The old __table rules above stay for
   any cached markup; new pages render cards only. */
.wl-volume__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 0.9rem;
}
@media (max-width: 1240px) { .wl-volume__cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .wl-volume__cards { grid-template-columns: repeat(2, 1fr); } }
.wl-volume__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 1.05rem 0.5rem 0.85rem;
  background: var(--wl-white);
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius);
  cursor: pointer;
  font-family: var(--wl-sans);
  text-align: center;
  transition: border-color 0.2s var(--wl-ease), box-shadow 0.2s var(--wl-ease), transform 0.2s var(--wl-ease);
}
.wl-volume__card:hover {
  border-color: var(--wl-eucalyptus);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(36, 42, 38, 0.05), 0 12px 28px -14px rgba(36, 42, 38, 0.16);
}
.wl-volume__card[aria-pressed="true"] {
  border-color: var(--wl-forest);
  box-shadow: 0 0 0 1px var(--wl-forest) inset;
  background: var(--wl-ivory-soft);
}
.wl-volume__vials { display: flex; align-items: flex-end; gap: 2px; height: 24px; color: var(--wl-eucalyptus); }
.wl-volume__vial { width: 10px; height: 21px; fill: currentColor; opacity: 0.85; }
.wl-volume__more { font-weight: 600; color: var(--wl-warm-gray); font-size: 0.8rem; align-self: center; }
.wl-volume__count { font-weight: 600; font-size: 0.8125rem; color: var(--wl-ink); margin-top: 2px; }
.wl-volume__price { font-weight: 600; font-size: 0.9375rem; color: var(--wl-forest); }
.wl-volume__each { font-size: 0.6875rem; color: var(--wl-warm-gray); margin-top: -2px; }
.wl-volume__unitline { font-size: 0.6875rem; color: var(--wl-warm-gray); }
.wl-volume__chip {
  margin-top: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2em 0.7em;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-sage-pale);
  color: var(--wl-forest-deep);
}
.wl-volume__chip--base { background: var(--wl-mist); color: var(--wl-warm-gray); }
.wl-volume__flag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--wl-gold);
  color: var(--wl-forest-deep);
  padding: 0.18em 0.65em;
  border-radius: var(--wl-radius-pill);
}
/* Tier card busy state while a buy-now add is in flight. */
.wl-volume__cards.is-busy .wl-volume__card { pointer-events: none; opacity: 0.55; }
.wl-volume__cards.is-busy .wl-volume__card.is-adding { opacity: 1; border-color: var(--wl-forest); box-shadow: 0 0 0 1px var(--wl-forest) inset; }

/* Tier cards: the product's real vial photo, fanned per rung. */
.wl-volume__vials--photos { height: auto; padding: 2px 0; }
.wl-volume__photo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
  border: 1.5px solid var(--wl-white);
  outline: 1px solid var(--wl-stone);
  box-shadow: 0 1px 3px rgba(36, 42, 38, 0.14);
}
.wl-volume__photo + .wl-volume__photo { margin-left: -22px; }

/* COA panel: the certificate shown inline beside its facts. */
.wl-doc--rich .wl-doc__body { display: flex; gap: 1.4rem; align-items: flex-start; margin-bottom: 0.5rem; }
.wl-doc__certimg {
  flex: 0 0 200px;
  display: block;
  border: 1px solid var(--wl-stone);
  border-radius: var(--wl-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(36, 42, 38, 0.05), 0 10px 26px -14px rgba(36, 42, 38, 0.18);
  transition: transform 0.2s var(--wl-ease), box-shadow 0.2s var(--wl-ease);
}
.wl-doc__certimg img { display: block; width: 100%; height: auto; }
.wl-doc__certimg:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(36, 42, 38, 0.06), 0 18px 38px -16px rgba(36, 42, 38, 0.24);
}
.wl-doc__facts { flex: 1; min-width: 0; }
.wl-doc__result { margin-bottom: 0.75rem; }
.wl-doc__result strong {
  display: block;
  font-family: var(--wl-serif);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--wl-forest);
}
.wl-doc__result span {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--wl-warm-gray);
}
@media (max-width: 680px) {
  .wl-doc--rich .wl-doc__body { flex-direction: column; }
  .wl-doc__certimg { flex-basis: auto; width: min(230px, 100%); }
}
/* Standalone vial cutouts on the tier cards. */
.wl-volume__vials--cutouts { height: 36px; align-items: flex-end; gap: 0; }
/* .woocommerce img (0,1,1) beats a lone class — the img tag in the selector
   buys the specificity back, same lesson as the variation-select clip. */
.wl-volume__vials img.wl-volume__cut { height: 36px; width: auto; filter: drop-shadow(0 1px 2px rgba(36, 42, 38, 0.18)); }
.wl-volume__vials img.wl-volume__cut + img.wl-volume__cut { margin-left: -7px; }

/* Technical spec values (CAS, molecular formula/weight) can be long — let them wrap. */
.wl-spec td { overflow-wrap: anywhere; }

/* wl-ack-preline: the Waave-required research-use acknowledgment checkbox label is
   multi-paragraph; preserve its paragraph breaks at the block checkout. Single-line
   checkbox labels have no newlines so pre-line leaves them visually unchanged. */
.wc-block-checkout .wc-block-components-checkbox__label,
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label { white-space: pre-line; }

/* CRO 14 Sep 2026: compact shop/category header (S1/S2/S3/S9). The value-prop
   lede uses the existing .wl-pagehead p style; the trust strip is pulled up to
   sit directly under the title instead of at the page bottom. Restore the tight
   first-section top padding that .wl-pagehead + .wl-section used to give. */
.wl-shop-trust{ margin-block: clamp(1rem,2.6vw,1.75rem) 0; }
.wl-shop-trust + .wl-section{ padding-top: clamp(1.25rem,2.6vw,2.25rem); }

/* CRO 14 Sep 2026: same-day shipping note at top of cart (C3). */
.wl-cart-ship{ margin-block: 0 1.25rem; }
.wl-cart-ship p{ margin:0; text-align:center; font-size:0.9375rem; line-height:1.5; color:var(--wl-forest-deep); background:var(--wl-mist,#EDF1E9); border:1px solid var(--wl-sage-pale,#D8E0D2); border-radius:12px; padding:0.6rem 1rem; }
.wl-cart-ship strong{ color:var(--wl-forest-deep); }


/* wl-home-featured-4up: home featured row runs four-up so a fourth highlighted product
   shares one clean row (2-up tablet, 1-up phone — never a lonely wrapped card).
   Scoped to .home so the cart cross-sell + every other collection stay 3-up. */
@media (min-width: 1025px) {
  .home .wp-block-woocommerce-product-collection .wc-block-product-template { --wl-cols: 4; }
}
@media (min-width: 561px) and (max-width: 1024px) {
  .home .wp-block-woocommerce-product-collection .wc-block-product-template { --wl-cols: 2; }
}