/* =========================================================================
   Esmerelda — shop, product, cart, checkout, account
   Loaded only on WooCommerce pages (see functions.php).

   Rules of the road for this file:
   - Every colour, font, radius and rhythm value comes from the tokens in
     base.css. There is no second palette here.
   - Checkout markup is NOT overridden anywhere in this theme. Everything
     below for checkout is additive: typography, spacing, inputs and layout.
     Nothing repositions or hides a field, a gateway box or a Woo notice.
   - WooCommerce's own woocommerce-general.css floats `ul.products li.product`
     and `div.product div.images/summary` at fixed percentage widths. Where a
     rule below sets `float:none; width:auto`, it is undoing exactly that so
     the CSS grid can take over. Do not delete those.
   - Mobile-first: base rules are the phone layout, `min-width` queries add.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Shared shop primitives
   ---------------------------------------------------------------------- */

.esm-shop,
.esm-single,
.esm-cart,
.woocommerce-checkout .esm-main,
.woocommerce-account .esm-main {
  --esm-shop-gap: clamp(20px, 3vw, 44px);
}

.woocommerce .esm-shop,
.woocommerce .esm-cart {
  max-width: var(--esm-maxw);
  margin-inline: auto;
  padding-inline: var(--esm-gutter);
  padding-block: clamp(40px, 6vw, 96px) var(--esm-section-y);
}

/* Woo notices ---------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--esm-line-2);
  border-left: 3px solid var(--esm-violet);
  border-radius: 12px;
  background: var(--esm-cream-2);
  color: var(--esm-ink-2);
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

.woocommerce-error {
  border-left-color: var(--esm-ink);
}

/* Woo prints its icon-font glyph in ::before on every notice; the font is not
   loaded here, so it rendered as an empty box. The violet edge is the cue. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  display: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
}

/* Buttons -------------------------------------------------------------- */
/* Map every Woo button onto the .esm-btn pill without touching its markup. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--esm-ink);
  color: var(--esm-cream);
  font-family: var(--esm-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--esm-ease), color 0.25s var(--esm-ease), transform 0.25s var(--esm-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  background: var(--esm-violet-deep);
  color: var(--esm-cream);
  transform: translateY(-1px);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Secondary / outline variant used for "Update cart" and similar. */
.woocommerce .cart .actions button[name="update_cart"],
.woocommerce .cart .actions button[name="apply_coupon"],
.woocommerce a.button.wc-backward {
  background: transparent;
  color: var(--esm-ink);
  border-color: var(--esm-line-strong);
}

.woocommerce .cart .actions button[name="update_cart"]:hover,
.woocommerce .cart .actions button[name="apply_coupon"]:hover,
.woocommerce a.button.wc-backward:hover {
  background: var(--esm-ink);
  color: var(--esm-cream);
}

/* Form fields ---------------------------------------------------------- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce input[type="url"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid var(--esm-line-2);
  border-radius: 10px;
  background: var(--esm-cream-2);
  color: var(--esm-ink);
  font-family: var(--esm-sans);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.2s var(--esm-ease), background 0.2s var(--esm-ease);
}

.woocommerce textarea {
  min-height: 120px;
  resize: vertical;
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--esm-violet);
  background: var(--esm-cream);
}

.woocommerce label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce .required {
  color: var(--esm-violet-deep);
  text-decoration: none;
}

/* Prices — the design sets these in a mono face. The theme ships two
   variable fonts and no mono, so prices use the sans with tabular figures
   rather than pulling a third webfont onto every shop page. */
.woocommerce .price,
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount {
  font-family: var(--esm-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.woocommerce del,
.woocommerce del .amount {
  color: var(--esm-ink-4);
  font-weight: 400;
  text-decoration: line-through;
}

.woocommerce ins,
.woocommerce ins .amount {
  background: none;
  color: var(--esm-violet-deep);
  font-weight: 700;
  text-decoration: none;
}

/* Star ratings --------------------------------------------------------- */
.woocommerce .star-rating {
  color: var(--esm-violet);
}

.woocommerce .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--esm-ink-3);
}

.woocommerce .woocommerce-review-link {
  color: var(--esm-ink-3);
  border-bottom: 1px solid var(--esm-line-2);
}

/* -------------------------------------------------------------------------
   1. Shop / category archive
   ---------------------------------------------------------------------- */

.esm-shop__header {
  display: grid;
  gap: 20px;
  align-items: end;
  margin-bottom: 40px;
}

.esm-shop__header-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.esm-shop__title {
  margin: 0;
}

.esm-shop__header-aside p {
  max-width: 44ch;
  color: var(--esm-ink-2);
  font-size: 15px;
  line-height: 1.65;
}

@media (min-width: 900px) {
  .esm-shop__header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 24px 64px;
  }

  .esm-shop__header-aside {
    justify-self: end;
  }
}

/* Chip filter rail ----------------------------------------------------- */
.esm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--esm-line-2);
}

.esm-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--esm-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--esm-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--esm-ease), color 0.25s var(--esm-ease), border-color 0.25s var(--esm-ease);
}

.esm-chip:hover {
  border-color: var(--esm-ink);
  color: var(--esm-ink);
}

.esm-chip.is-active {
  background: var(--esm-ink);
  border-color: var(--esm-ink);
  color: var(--esm-cream);
}

/* Result count + ordering ---------------------------------------------- */
.esm-shop__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 28px 0 32px;
}

.woocommerce .esm-shop__toolbar .woocommerce-result-count {
  margin: 0;
  color: var(--esm-ink-3);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.woocommerce .esm-shop__toolbar .woocommerce-ordering {
  margin: 0;
}

.woocommerce .esm-shop__toolbar select {
  min-height: 44px;
  width: auto;
  min-width: 220px;
  padding: 10px 16px;
  font-size: 13px;
}

.esm-shop__toolbar .woocommerce-notices-wrapper {
  flex: 1 0 100%;
  order: -1;
}

/* Product grid --------------------------------------------------------- */
/* `.esm-grid .esm-grid--4` are added to Woo's <ul class="products"> by the
   woocommerce_product_loop_start filter in archive-product.php, so the grid
   geometry itself lives in base.css. These rules only undo Woo's floats and
   fixed percentage widths. */
.woocommerce ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Related / upsell / cross-sell lists do not get the .esm-grid classes
   (they are rendered outside archive-product.php), so give them the same
   geometry here using the same tokens. */
.woocommerce ul.products:not(.esm-grid) {
  display: grid;
  gap: clamp(20px, 2.4vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 641px) {
  .woocommerce ul.products:not(.esm-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .woocommerce ul.products:not(.esm-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Product card --------------------------------------------------------- */
/* woocommerce-smallscreen.css floats each card at width:48% below 769px,
   which inside the theme's grid left every mobile card half a column wide
   (and clipped the sale badge). The grid decides the width, not the float. */
@media only screen and (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: auto;
    float: none;
    clear: none;
    margin: 0;
  }
}

.woocommerce ul.products li.product.esm-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Woo's loop link wraps the whole card; make it a passthrough container. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
}

/* .esm-card / .esm-card__media / .esm-card__sub geometry lives in base.css.
   Only the rules that must out-specify woocommerce-general.css are repeated. */
.woocommerce ul.products li.product .esm-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.6s var(--esm-ease);
}

.woocommerce ul.products li.product:hover .esm-card__media img {
  transform: scale(1.04);
}

/* Sale flash + sold-out badge share the .esm-card__badge look. */
.woocommerce ul.products li.product .esm-card__media span.onsale,
.esm-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--esm-violet-deep);
  color: var(--esm-cream);
  font-family: var(--esm-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.esm-card__badge--soldout {
  top: auto;
  bottom: 12px;
  /* Ink token at ~82% so the badge sits over the image without a new colour. */
  background: var(--esm-ink);
  background: color-mix(in srgb, var(--esm-ink) 82%, transparent);
}

.esm-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: baseline;
}

.woocommerce ul.products li.product .esm-card__body .woocommerce-loop-product__title {
  grid-column: 1;
  margin: 0;
  padding: 0;
  font-family: var(--esm-serif);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.woocommerce ul.products li.product .esm-card__body .price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--esm-violet-deep);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.woocommerce ul.products li.product .esm-card__body .price del {
  display: block;
  font-size: 12px;
}

/* Typography comes from base.css; this only places it in the card grid. */
.esm-card__sub {
  grid-column: 1 / -1;
}

.woocommerce ul.products li.product .esm-card__body .star-rating {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
}

/* Loop add-to-cart is rendered after Woo closes the card link.
   display/line-height are restated here on purpose: woocommerce.css sets
   `ul.products li.product .button{display:inline-block;margin-top:1em}` at a
   higher specificity than the theme's generic a.button rule, which left the
   label sitting at the top of a 40px inline-block. */
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 40px;
  margin: 2px 0 0;
  padding: 0 18px;
  border: 1px solid rgba(32, 27, 36, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--esm-ink);
  font-family: var(--esm-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.woocommerce ul.products li.product > a.button:hover,
.woocommerce ul.products li.product > .button:hover {
  background: var(--esm-ink);
  border-color: var(--esm-ink);
  color: var(--esm-cream);
}

.woocommerce ul.products li.product > a.added_to_cart {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esm-violet-deep);
  border-bottom: 1px solid var(--esm-line-strong);
}

/* Pagination ----------------------------------------------------------- */
.esm-shop__pagination {
  margin-top: clamp(48px, 6vw, 88px);
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--esm-line-2);
  border-radius: 999px;
  color: var(--esm-ink);
  font-size: 13px;
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--esm-ink);
  border-color: var(--esm-ink);
  color: var(--esm-cream);
}

.esm-shop__empty {
  padding: clamp(40px, 6vw, 88px) 0;
  border-top: 1px solid var(--esm-line-2);
}

/* -------------------------------------------------------------------------
   2. Single product

   Built to Product.dc.html. Reading order of this section follows the page:
   breadcrumb, layout, gallery, summary column (title -> specs), the
   "good to know" band, the stacked sections (description / reviews), related.

   The summary column is a flex column. Everything WooCommerce prints keeps
   the default `order: 0` and therefore stays in Woo's own priority order;
   the three blocks the template appends are pulled into their design
   positions with `order`, so no callback had to be moved or removed.
   ---------------------------------------------------------------------- */

.woocommerce .esm-single {
  max-width: var(--esm-maxw);
  margin-inline: auto;
  padding-inline: var(--esm-gutter);
  padding-block: clamp(24px, 4vw, 56px) 0;
}

/* Breadcrumb ----------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  color: var(--esm-ink);
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--esm-ink-3);
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--esm-violet);
}

.esm-breadcrumb__sep {
  color: var(--esm-ink-3);
}

/* Layout --------------------------------------------------------------- */
.esm-product__layout {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
  .esm-product__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }

  .esm-product__gallery {
    position: sticky;
    top: calc(var(--esm-header-h) + 16px);
  }
}

/* Gallery — undo Woo's float/percentage sizing, keep flexslider intact. */
.woocommerce div.product div.images,
.woocommerce div.product .esm-product__gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .esm-product__summary {
  float: none;
  width: auto;
  margin: 0;
}

.woocommerce div.product div.images img {
  border-radius: 6px;
}

.woocommerce div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
  float: none;
  width: 76px;
  margin: 0;
  list-style: none;
}

.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--esm-line);
  border-radius: 4px;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity 0.2s var(--esm-ease), border-color 0.2s var(--esm-ease);
}

.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
  border-color: var(--esm-ink);
  opacity: 1;
}

/* Sale flash — the design's cream pill on the artwork, not a solid chip.
   Product.dc.html shows the bare word here (no dot, no saving), which the
   sale-flash filter honours; the rules below also hide those parts if the
   full badge ever lands in the gallery. */
.woocommerce div.product .esm-product__gallery span.onsale .esm-card__badge-dot,
.woocommerce div.product .esm-product__gallery span.onsale .esm-card__badge-save { display: none; }
.woocommerce div.product .esm-product__gallery span.onsale {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--esm-cream-2) 88%, transparent);
  color: var(--esm-ink);
  font-family: var(--esm-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.esm-product__gallery {
  position: relative;
}

/* Summary column ------------------------------------------------------- */
.woocommerce div.product .esm-product__summary {
  display: flex;
  flex-direction: column;
  gap: 22px;
  scroll-margin-top: calc(var(--esm-header-h) + 16px);
}

.woocommerce div.product .esm-product__summary > * {
  margin: 0;
}

/* Title block: eyebrow above a very large short name, per the design.
   Both live inside the <h1> so the heading still carries the full product
   name for assistive tech and search. */
.woocommerce div.product .esm-product__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.esm-product__eyebrow {
  font-family: var(--esm-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--esm-violet);
}

.esm-product__name {
  font-family: var(--esm-serif);
  font-size: clamp(44px, 5.5vw, 92px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

/* Rating row ----------------------------------------------------------- */
.woocommerce div.product .esm-product__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 13px;
  color: var(--esm-ink-3);
}

.woocommerce div.product .esm-product__rating .star-rating {
  margin: 0;
  color: var(--esm-violet);
}

.esm-product__rating-value {
  font-variant-numeric: tabular-nums;
}

.woocommerce div.product .esm-product__rating-link {
  color: var(--esm-ink-3);
  border-bottom: 1px solid var(--esm-line-strong);
  padding-bottom: 1px;
}

.woocommerce div.product .esm-product__rating-link:hover {
  color: var(--esm-violet);
}

/* Price ---------------------------------------------------------------- */
.woocommerce div.product .esm-product__summary p.price,
.woocommerce div.product .esm-product__summary span.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  color: var(--esm-ink);
  font-family: var(--esm-serif);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.woocommerce div.product .esm-product__summary p.price del .amount {
  font-size: 18px;
}

.esm-price__currency {
  font-family: var(--esm-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

/* Tagline + blurb ------------------------------------------------------ */
.esm-product__tagline {
  max-width: 34ch;
  color: var(--esm-violet-deep);
  font-family: var(--esm-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-style: italic;
  line-height: 1.3;
  text-wrap: pretty;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  max-width: 62ch;
  color: var(--esm-ink-2);
  font-size: 16px;
  line-height: 1.65;
}

.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* A short description that opened with a heading is demoted to a lead
   paragraph by the template, so the page keeps one <h1>. */
.esm-product__short-lead {
  color: var(--esm-ink);
}

/* Noise / power meters ------------------------------------------------- */
.esm-meters {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 24px;
  align-items: center;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--esm-line-2);
  border-bottom: 1px solid var(--esm-line-2);
}

.esm-meter__label {
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.esm-meter__dots {
  display: flex;
  gap: 6px;
  margin: 0;
}

.esm-meter__dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--esm-line-2);
}

.esm-meter__dot.is-on {
  background: var(--esm-violet);
}

/* Variation + quantity + add to cart ----------------------------------- */
.woocommerce div.product form.cart {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding-top: 8px;
  /* The level meters above already close with a rule; a second one here
     read as a double line (Dan, 2026-09-09). */
  border-top: 0;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
  content: none;
}

.woocommerce div.product form.cart table.variations {
  width: 100%;
  margin: 0;
  border: 0;
}

.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.woocommerce div.product form.cart table.variations td.label {
  margin-bottom: 8px;
}

.woocommerce div.product form.cart table.variations td.value {
  margin-bottom: 16px;
}

.woocommerce div.product form.cart table.variations label {
  margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 10px;
  color: var(--esm-ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--esm-line-2);
}

.woocommerce div.product form.cart .woocommerce-variation-price {
  margin-bottom: 12px;
}

.woocommerce div.product .esm-product__summary .quantity {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 6px;
  border: 1px solid var(--esm-line-strong);
  border-radius: 999px;
  background: transparent;
}

.woocommerce div.product .esm-product__summary .quantity .qty,
.woocommerce .quantity input.qty {
  width: 72px;
  min-height: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* The add-to-cart row, per Product.dc.html: a 56px quantity pill (− 1 +)
   beside a primary button that takes the rest of the line.

   The form is a wrapping ROW. It used to be a column, and a column turns the
   button's flex-basis into its height, which is how the button became a
   220px black blob and the quantity field stretched to the full width. */
.woocommerce div.product form.cart {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esm-buy-gap, 14px);
}

/* Anything that is not the qty pill or the button (variation table, stock
   notice, variation wrapper, plugin fields) takes its own full line. */
.woocommerce div.product form.cart > *:not(.quantity):not(.single_add_to_cart_button) {
  flex: 1 0 100%;
}

/* Variable products keep qty + button inside .woocommerce-variation-add-to-cart. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esm-buy-gap, 14px);
}

.woocommerce div.product form.cart .quantity {
  flex: 0 0 auto;
  float: none;
  margin: 0;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1 1 220px;
  min-width: 220px;
  width: auto;
  height: 56px;
  box-shadow: 0 14px 34px -18px rgba(32, 27, 36, 0.55);
}

/* Stepper buttons (app.js adds them; without JS the native number field stands). */
.woocommerce div.product form.cart .quantity .esm-qty__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--esm-ink);
  font-family: var(--esm-sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.woocommerce div.product form.cart .quantity .esm-qty__btn:hover { background: rgba(32, 27, 36, 0.06); }
.woocommerce div.product form.cart .quantity.is-stepper .qty {
  width: 40px;
  min-width: 28px;
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce div.product form.cart .quantity.is-stepper .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity.is-stepper .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce div.product .stock.out-of-stock {
  color: var(--esm-ink-3);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Trust row (order:2 puts it under the buy controls) -------------------- */
.esm-trust {
  order: 2;
  display: grid;
  /* Product.dc.html: auto-fit 150px cells. With four short labels in a
     ~600px column that made 3 + 1; a 40% floor keeps them 2 x 2 until the
     column is wide enough for all four on one line. */
  grid-template-columns: repeat(auto-fit, minmax(max(150px, 40%), 1fr));
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esm-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.esm-trust__item svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--esm-violet);
}

/* Numbered feature list (order:3) -------------------------------------- */
.esm-features {
  order: 3;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid var(--esm-line-2);
}

.esm-features__label {
  padding: 18px 0 6px;
}

.esm-features__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.esm-features__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--esm-line);
  font-size: 15px;
  line-height: 1.5;
}

.esm-features__n {
  padding-top: 4px;
  color: var(--esm-violet);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* Spec grid (order:4) -------------------------------------------------- */
.esm-specs {
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
  gap: 14px 32px;
  margin: 0;
  max-width: 78ch;
}

.esm-specs dt {
  padding-top: 3px;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.esm-specs dd {
  margin: 0;
  color: var(--esm-ink-2);
  font-size: 14px;
}

/* Product meta + sharing sit after our blocks. */
.woocommerce div.product .product_meta {
  order: 5;
  padding-top: 18px;
  border-top: 1px solid var(--esm-line-2);
  color: var(--esm-ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.woocommerce div.product .product_meta a {
  color: var(--esm-ink-2);
}

/* -------------------------------------------------------------------------
   "Good to know before you say yes." band + FAQ accordion
   ---------------------------------------------------------------------- */

.esm-goodtoknow {
  margin-top: clamp(56px, 7vw, 112px);
  /* Full-bleed like the design's section: break out of the centred column
     to the viewport edges (the column is max-width 1440, so a gutter-sized
     negative margin only reached the column's edge on wide screens). */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: clamp(56px, 7vw, 112px) var(--esm-gutter);
  border-top: 1px solid var(--esm-line);
}

.esm-goodtoknow__inner {
  display: grid;
  gap: 40px;
  max-width: var(--esm-maxw);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .esm-goodtoknow__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px clamp(40px, 6vw, 120px);
    align-items: start;
  }
}

.esm-goodtoknow__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.esm-goodtoknow__list {
  margin: 8px 0 0;
  border-top: 1px solid var(--esm-line-2);
}

.esm-goodtoknow__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--esm-line-2);
}

.esm-goodtoknow__row dt {
  font-size: 16px;
}

.esm-goodtoknow__row dd {
  margin: 0;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

/* Accordion — native <details>, so it opens with JavaScript disabled. */
.esm-faq {
  border-top: 1px solid var(--esm-line-2);
}

.esm-faq__item {
  border-bottom: 1px solid var(--esm-line-2);
}

.esm-faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  color: var(--esm-ink);
  cursor: pointer;
  font-family: var(--esm-serif);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.2;
  list-style: none;
}

/* Kill the native disclosure triangle in both engines. */
.esm-faq__q::-webkit-details-marker {
  display: none;
}

.esm-faq__q::marker {
  content: "";
}

.esm-faq__q:hover {
  color: var(--esm-violet-deep);
}

.esm-faq__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--esm-line-strong);
  border-radius: 999px;
  font-family: var(--esm-sans);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.4s var(--esm-ease);
}

.esm-faq__item[open] .esm-faq__mark {
  transform: rotate(45deg);
}

.esm-faq__a {
  padding: 0 56px 22px 0;
  max-width: 620px;
}

.esm-faq__a p {
  margin: 0;
  color: var(--esm-ink-2);
  font-size: 15px;
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   Stacked sections (what WooCommerce calls tabs)

   single-product/tabs/tabs.php renders each tab as a section instead of a
   tab panel, because the design has no tab strip. These rules dress those
   sections; there is no `ul.tabs` to style any more.
   ---------------------------------------------------------------------- */

.woocommerce div.product .esm-product-section {
  margin-top: clamp(56px, 7vw, 112px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--esm-line-2);
}

.esm-product-section__title {
  margin: 0 0 32px;
  max-width: 14ch;
  text-wrap: balance;
}

.esm-product-section__body {
  max-width: 78ch;
  color: var(--esm-ink-2);
  font-size: 16px;
  line-height: 1.7;
}

.esm-product-section--reviews .esm-product-section__body {
  max-width: none;
}

.esm-product-section__body h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 44px);
}

.esm-product-section__body h3 {
  margin: 32px 0 12px;
  font-size: clamp(20px, 2vw, 28px);
}

.esm-product-section__body h4 {
  margin: 28px 0 10px;
  font-family: var(--esm-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--esm-violet-deep);
}

.esm-product-section__body ul,
.esm-product-section__body ol {
  margin: 0 0 1em;
  padding-left: 1.1em;
}

.esm-product-section__body li {
  margin-bottom: 8px;
}

.esm-product-section__body img {
  border-radius: 6px;
}

/* Additional information, when it is not skipped. */
.woocommerce table.shop_attributes {
  width: 100%;
  border: 0;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--esm-line);
  background: none;
  font-style: normal;
  text-align: left;
}

.woocommerce table.shop_attributes th {
  width: 30%;
  font-family: var(--esm-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

/* Reviews -------------------------------------------------------------- */
.esm-product-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}

.esm-product-section__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.esm-product-section__intro .esm-product-section__title {
  margin: 0;
}

.esm-reviews__score {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.esm-reviews__average {
  font-family: var(--esm-serif);
  font-size: clamp(40px, 4vw, 64px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.esm-reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.woocommerce .esm-reviews__meta .star-rating {
  margin: 0;
  color: var(--esm-violet);
}

.esm-reviews__count {
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce #reviews {
  scroll-margin-top: calc(var(--esm-header-h) + 16px);
}

/* Woo's own "20 reviews for Zena" title duplicates the section heading. */
.woocommerce #reviews .woocommerce-Reviews-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.woocommerce #reviews #comments ol.commentlist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--esm-line-2);
  list-style: none;
}

@media (min-width: 900px) {
  .woocommerce #reviews #comments ol.commentlist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
}

.woocommerce #reviews #comments ol.commentlist li {
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--esm-line-2);
}

/* The design's review card has no avatar. */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  display: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: block;
}

/* Stars, then the quote, then the attribution — the design's figure order.
   Woo prints the meta line above the quote, so it is reordered here rather
   than by overriding review.php, which would mean re-implementing five
   review hooks by hand. */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating {
  order: 1;
  margin: 0;
  color: var(--esm-violet);
  font-size: 13px;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
  order: 2;
  font-family: var(--esm-serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: var(--esm-ink);
  text-wrap: pretty;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description p:last-child {
  margin-bottom: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author {
  color: var(--esm-ink);
  font-weight: 400;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__dash {
  display: none;
}

.woocommerce #reviews .woocommerce-noreviews {
  padding: 28px 0;
  border-top: 1px solid var(--esm-line-2);
  color: var(--esm-ink-3);
}

.woocommerce #review_form_wrapper {
  margin-top: 40px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--esm-line);
  border-radius: 16px;
  background: var(--esm-cream-2);
}

.woocommerce #review_form #respond p.stars a {
  color: var(--esm-violet);
}

/* Related / upsells ---------------------------------------------------- */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells {
  margin-top: clamp(56px, 7vw, 112px);
}

.esm-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 40px;
}

.esm-related__title {
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.esm-related__all {
  white-space: nowrap;
}

.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  margin-bottom: 32px;
  font-family: var(--esm-serif);
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* Mobile sticky buy bar ------------------------------------------------ */
.esm-buybar {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--esm-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--esm-line-2);
  background: var(--esm-cream);
  box-shadow: 0 -10px 30px -22px color-mix(in srgb, var(--esm-ink) 90%, transparent);
}

.esm-buybar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.esm-buybar__name {
  overflow: hidden;
  font-family: var(--esm-serif);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.esm-buybar__price {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--esm-violet-deep);
}

.esm-buybar__price del {
  display: none;
}

.esm-buybar__cta {
  height: 46px;
  margin-left: auto;
  padding: 0 22px;
  font-size: 11px;
}

/* Keep the bar from covering the end of the page. */
.single-product .esm-main {
  padding-bottom: 96px;
}

@media (min-width: 900px) {
  .esm-buybar {
    display: none;
  }

  .single-product .esm-main {
    padding-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
   3. Cart
   ---------------------------------------------------------------------- */

.esm-cart__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 24px;
  margin-bottom: 40px;
}

.esm-cart__title {
  margin: 6px 0 0;
  font-family: var(--esm-serif);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.esm-cart__continue {
  white-space: nowrap;
}

.esm-cart__layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 1000px) {
  .esm-cart__layout {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 40px clamp(40px, 5vw, 96px);
  }
}

/* Line items — the responsive table becomes a borderless list. */
.woocommerce table.shop_table.cart {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
}

.woocommerce table.shop_table.cart thead {
  /* Hidden visually; still exposed to assistive tech via the data-title
     attributes Woo puts on every cell. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "thumb name"
    "thumb price"
    "qty   subtotal";
  gap: 6px 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--esm-line-2);
}

.woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item td {
  padding: 0;
  border: 0;
}

.woocommerce table.shop_table.cart td.product-remove {
  grid-area: name;
  justify-self: end;
  align-self: start;
}

.woocommerce table.shop_table.cart td.product-thumbnail {
  grid-area: thumb;
  align-self: start;
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 84px;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  object-fit: cover;
  background: var(--esm-cream-2);
}

.woocommerce table.shop_table.cart td.product-name {
  grid-area: name;
  padding-right: 40px;
  font-family: var(--esm-serif);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.woocommerce table.shop_table.cart td.product-name .variation {
  margin: 8px 0 0;
  font-family: var(--esm-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce table.shop_table.cart td.product-price {
  grid-area: price;
  color: var(--esm-ink-3);
  font-size: 13px;
}

.woocommerce table.shop_table.cart td.product-quantity {
  grid-area: qty;
  grid-column: 2;
  justify-self: start;
  padding-top: 10px;
}

.woocommerce table.shop_table.cart td.product-subtotal {
  grid-area: subtotal;
  justify-self: end;
  padding-top: 10px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--esm-line-strong);
  border-radius: 999px;
}

.woocommerce table.shop_table.cart td.product-quantity .qty {
  width: 60px;
  height: 32px;
}

.woocommerce table.shop_table.cart a.remove {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--esm-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--esm-ink-3);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.woocommerce table.shop_table.cart a.remove:hover {
  background: var(--esm-ink);
  border-color: var(--esm-ink);
  color: var(--esm-cream);
}

.woocommerce table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 28px 0 0;
  border: 0;
}

.woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce table.shop_table.cart td.actions .coupon label {
  margin: 0;
}

.woocommerce table.shop_table.cart td.actions .coupon .input-text {
  width: 200px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
}

.woocommerce table.shop_table.cart td.actions .coupon .button,
.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
  height: 48px;
  padding: 0 24px;
}

.woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
  margin-left: auto;
}

/* Aside: free-shipping meter, totals card, assurances ------------------- */
.esm-cart__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 1000px) {
  .esm-cart__aside {
    position: sticky;
    top: calc(var(--esm-header-h) + 16px);
  }
}

.esm-freeship {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.esm-freeship__track {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--esm-line);
}

.esm-freeship__bar {
  display: block;
  height: 100%;
  background: var(--esm-violet);
  transition: width 0.4s var(--esm-ease);
}

.esm-freeship__copy {
  margin: 0;
  color: var(--esm-ink-3);
  font-size: 13px;
}

.esm-freeship__copy--done {
  color: var(--esm-violet-deep);
  font-weight: 600;
}

.esm-cart__collaterals {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: auto;
}

.woocommerce .esm-cart__collaterals .cart_totals {
  order: 1;
  float: none;
  width: auto;
  padding: 28px;
  border: 1px solid var(--esm-line);
  border-radius: 14px;
  background: var(--esm-cream-2);
}

.woocommerce .esm-cart__collaterals .cross-sells {
  order: 2;
  float: none;
  width: auto;
  margin-top: 8px;
}

.woocommerce .cart_totals h2 {
  margin: 0 0 18px;
  font-family: var(--esm-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esm-violet);
}

.woocommerce .cart_totals table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: 10px 0;
  border: 0;
  background: none;
  font-weight: 400;
  vertical-align: top;
}

.woocommerce .cart_totals table.shop_table th {
  color: var(--esm-ink-2);
  font-size: 15px;
  text-align: left;
}

.woocommerce .cart_totals table.shop_table td {
  color: var(--esm-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
  padding-top: 16px;
  border-top: 1px solid var(--esm-line-2);
}

.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-family: var(--esm-serif);
  font-size: 21px;
}

.woocommerce .cart_totals table.shop_table tr.order-total td {
  font-size: 21px;
  font-weight: 600;
}

.woocommerce .cart_totals .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.woocommerce .cart_totals .woocommerce-shipping-methods label {
  display: inline;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--esm-ink-2);
}

.woocommerce .cart_totals .shipping-calculator-button {
  font-size: 12px;
  color: var(--esm-ink-3);
  border-bottom: 1px solid var(--esm-line-2);
}

.woocommerce .cart_totals .wc-proceed-to-checkout {
  padding: 18px 0 0;
}

.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
}

.esm-cart__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

/* -------------------------------------------------------------------------
   4. Checkout — CSS ONLY. No checkout template is overridden by this theme.
      Gateway plugins inject markup into these containers, so nothing here
      hides, reorders or absolutely-positions a field.
   ---------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce {
  max-width: var(--esm-maxw);
  margin-inline: auto;
  padding-inline: var(--esm-gutter);
  padding-block: clamp(32px, 5vw, 72px) var(--esm-section-y);
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  margin: 0 0 20px;
  font-family: var(--esm-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  margin: 0 0 28px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--esm-line);
  border-radius: 14px;
  background: var(--esm-cream-2);
}

.woocommerce form.checkout_coupon .form-row {
  padding: 0;
}

.woocommerce-checkout .col2-set {
  display: grid;
  gap: 24px clamp(24px, 4vw, 56px);
}

@media (min-width: 760px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: auto;
}

/* Woo's clearfix (::before / ::after with content and display:table) turns
   into a real grid item once the wrapper is a grid, which pushed Billing into
   the second column and Shipping onto a new row. No floats here, no clearfix. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after,
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after,
.woocommerce-account div.woocommerce::before,
.woocommerce-account div.woocommerce::after {
  content: none;
  display: none;
}

.woocommerce form .form-row {
  margin: 0 0 18px;
  padding: 0;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100%;
  float: none;
}

@media (min-width: 560px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    display: inline-block;
    width: calc(50% - 9px);
    vertical-align: top;
  }

  .woocommerce form .form-row-first {
    margin-right: 14px;
  }
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--esm-ink-2);
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"] {
  width: auto;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--esm-violet-deep);
}

.woocommerce .woocommerce-invalid input.input-text,
.woocommerce .woocommerce-invalid select {
  border-color: var(--esm-violet-deep);
}

/* Order review + payment ---------------------------------------------- */
@media (min-width: 1000px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
  }

  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
  }

  .woocommerce-checkout form.checkout #order_review {
    position: sticky;
    top: calc(var(--esm-header-h) + 16px);
  }
}

.woocommerce-checkout #order_review {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--esm-line);
  border-radius: 14px;
  background: var(--esm-cream-2);
}

.woocommerce-checkout table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--esm-line);
  background: none;
  font-weight: 400;
  vertical-align: top;
}

.woocommerce-checkout table.shop_table thead th {
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table tfoot td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
  font-family: var(--esm-serif);
  font-size: 20px;
}

.woocommerce-checkout #payment {
  margin-top: 24px;
  border-radius: 12px;
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--esm-line-2);
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--esm-ink);
}

.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--esm-cream);
  color: var(--esm-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}

.woocommerce-checkout #payment div.form-row.place-order {
  padding: 20px 0 0;
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--esm-ink-2);
}

/* Order received / thank you ------------------------------------------ */
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 0 0 32px;
  padding: 24px;
  border: 1px solid var(--esm-line);
  border-radius: 14px;
  background: var(--esm-cream-2);
  list-style: none;
}

.woocommerce ul.order_details li {
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--esm-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--esm-ink);
}

/* -------------------------------------------------------------------------
   5. My account
   ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
  max-width: var(--esm-maxw);
  margin-inline: auto;
  padding-inline: var(--esm-gutter);
  padding-block: clamp(32px, 5vw, 72px) var(--esm-section-y);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
  margin-bottom: 32px;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    /* Keep Woo's two-column relationship without its percentage floats. */
    float: none;
  }

  .woocommerce-account div.woocommerce {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }

  .woocommerce-account div.woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }

  /* The nav + content grid is for the logged-in dashboard only. Logged out,
     the wrapper holds the login / register columns instead, and those were
     landing in the 240px nav track (QA-02, 2026-09-08). */
  .woocommerce-account div.woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) {
    display: block;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 0;
  }
}

/* Logged-out account page: login on the left, register on the right, each
   in the same card as the checkout coupon / login forms. */
#customer_login.col2-set {
  display: grid;
  gap: 24px clamp(24px, 4vw, 56px);
  max-width: 1040px;
}

@media (min-width: 760px) {
  #customer_login.col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#customer_login.col2-set::before,
#customer_login.col2-set::after {
  content: none;
  display: none;
}

#customer_login .col-1,
#customer_login .col-2 {
  float: none;
  width: auto;
}

#customer_login h2 {
  margin: 0 0 20px;
  font-family: var(--esm-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--esm-line-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--esm-line-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--esm-ink);
}

.woocommerce-account table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: 14px 12px 14px 0;
  border: 0;
  border-bottom: 1px solid var(--esm-line);
  background: none;
  text-align: left;
}

.woocommerce-account table.shop_table thead th {
  font-family: var(--esm-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

/* -------------------------------------------------------------------------
   6. Motion preferences
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product:hover .esm-card__media img,
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce #place_order:hover {
    transform: none;
  }

  .esm-freeship__bar {
    transition: none;
  }
}


/* =========================================================================
   Shop grid — Shop.dc.html
   ====================================================================== */

/*
 * The design's grid is auto-fill at a 270px minimum, not a fixed 4 columns.
 * At 4 fixed columns a wide screen stretched every card and a mid-width one
 * dropped straight to 2; auto-fill keeps the card at its intended size and
 * lets the column count follow the viewport.
 */
.woocommerce ul.products.esm-grid--4,
.woocommerce-page ul.products.esm-grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  row-gap: 56px;
}

/*
 * The staggered baseline is the signature of this grid: the design offsets
 * every card on a repeating 0 / 56 / 24px cycle so the row never reads as a
 * flat shelf. Applied with nth-child so it survives any product count.
 *
 * It is switched off below the two-column breakpoint, where a stagger just
 * looks like broken alignment, and for anyone who has asked for reduced
 * motion-free simplicity is not affected since nothing here animates.
 */
@media (min-width: 861px) {
  .woocommerce ul.products.esm-grid--4 > li.product:nth-child(3n + 2) { padding-top: 56px; }
  .woocommerce ul.products.esm-grid--4 > li.product:nth-child(3n)     { padding-top: 24px; }
}

/* ---- Sale badge: dot + word + saving ------------------------------- */
.woocommerce ul.products li.product .esm-card__media span.onsale.esm-card__badge--sale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  top: 14px;
  left: 14px;
  padding: 9px 16px 9px 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(74, 62, 122, 0.75);
}
.esm-card__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  /* The design's blush accent, used only here. */
  background: #F0C9D6;
  flex: none;
}
.esm-card__badge-save {
  padding-left: 10px;
  border-left: 1px solid rgba(245, 241, 235, 0.35);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* The design keeps the sold-out badge in the same top-left position as the
   sale badge rather than moving it to the bottom of the media panel. */
.esm-card__badge--soldout {
  top: 14px;
  bottom: auto;
  font-family: var(--esm-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 500;
}


/* ---- Empty cart, per Cart.dc.html ----------------------------------- */
.esm-cart--empty .esm-cart__layout{display:none}
.esm-cart__empty{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  padding:clamp(32px,5vw,64px) 0
}
.esm-cart__empty-copy{margin:0;font-family:var(--esm-serif);font-size:clamp(20px,2vw,28px);line-height:1.3}
.esm-cart__empty-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.esm-cart__empty-quiz{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(32,27,36,.35);padding-bottom:4px
}
.esm-cart__empty-quiz:hover{color:var(--esm-violet);border-bottom-color:var(--esm-violet)}


/* =========================================================================
   Card body — price, descriptor, rating per Shop.dc.html (2026-09-08)
   The title is the short product name (content-product.php splits the
   catalogue title at its first comma); price sits on the same baseline in
   mono, the descriptor beneath, then "★ 4.88 / 5" as text.
   ====================================================================== */
.woocommerce ul.products li.product .esm-card__body .price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--esm-violet-deep);
}
.woocommerce ul.products li.product .esm-card__body .price del {
  display: inline;
  order: -1;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--esm-ink-4);
  opacity: 1;
}
.woocommerce ul.products li.product .esm-card__body .price ins {
  text-decoration: none;
  font-weight: 700;
}
.esm-card__rating {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--esm-ink-3);
}
.esm-card__star { color: var(--esm-violet); }

/* The design tilts the sale badge 3 degrees and sets the saving in mono.
   Woo's own `ul.products li.product .onsale` pins the flash with right:0, so
   with our left:14px the absolutely positioned pill was being stretched to
   the full card width (Dan, 2026-09-08). right:auto lets it shrink-wrap. */
.woocommerce ul.products li.product .esm-card__media span.onsale.esm-card__badge--sale {
  right: auto;
  width: auto;
  max-width: none;
  transform: rotate(-3deg);
  pointer-events: none;
}
.esm-card__badge-save {
  font-family: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;
}

/* Shop.dc.html has no result count and no sort control: the chip rail leads
   straight into the grid. The toolbar now only carries Woo's notices
   wrapper, so it takes no space unless a notice is printed. */
.esm-shop__toolbar { margin: 0; justify-content: flex-end; }
.esm-shop__toolbar:has(> .woocommerce-notices-wrapper:empty:only-child) { display: none; }
.woocommerce ul.products.esm-grid--4 { margin-top: 32px; }


/* Product.dc.html has no zoom magnifier on the gallery; the lightbox still
   opens on click. */
.woocommerce div.product .woocommerce-product-gallery__trigger { display: none; }

/* =========================================================================
   Quiz CTA band on the shop archives — Shop.dc.html "Quiz CTA"
   The band's styles lived only in inner.css (blog/guides), which the
   archives never load, so it rendered as unstyled left-aligned text here.
   ====================================================================== */
.esm-shop-wrap .esm-quizcta {
  padding: clamp(72px, 9vw, 140px) var(--esm-gutter);
  border-top: 0;
  text-align: center;
  background:
    radial-gradient(60% 70% at 22% 20%, #DDD6F0 0%, rgba(221, 214, 240, 0) 70%),
    radial-gradient(50% 60% at 82% 88%, var(--esm-blush) 0%, rgba(242, 230, 226, 0) 70%),
    var(--esm-cream);
}
.esm-shop-wrap .esm-quizcta__inner {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.esm-shop-wrap .esm-quizcta .esm-abt-h2,
html body .esm-shop-wrap .esm-quizcta h2 {
  margin: 0;
  font-family: var(--esm-serif);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--esm-ink);
}
.esm-shop-wrap .esm-quizcta__inner p {
  margin: 0;
  font-family: var(--esm-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--esm-violet-deep);
}
.esm-shop-wrap .esm-quizcta .esm-btn {
  margin-top: 8px;
  height: 60px;
  padding: 0 36px;
  letter-spacing: 0.18em;
}


/* -------------------------------------------------------------------------
   Product detail tabs (Dan, 2026-09-09): How to use / Specifications /
   Esmerelda recommends. Serif small-caps tab labels on a hairline, the
   active one underlined in violet, matching the eyebrow/meter language of
   Product.dc.html. Panels stay stacked and visible without JS.
   ---------------------------------------------------------------------- */
.woocommerce div.product .esm-ptabs {
  margin-top: clamp(48px, 6vw, 88px);
}

.esm-ptabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(20px, 3vw, 40px);
  margin: 0 0 clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--esm-line-2);
}

.woocommerce div.product .esm-ptabs__tab,
html body .esm-ptabs__tab {
  position: relative;
  margin: 0;
  padding: 14px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--esm-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--esm-ink-3);
  cursor: pointer;
  transition: color 0.25s var(--esm-ease);
}

.woocommerce div.product .esm-ptabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--esm-violet);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--esm-ease);
}

.woocommerce div.product .esm-ptabs__tab:hover,
html body .esm-ptabs__tab:hover {
  background: transparent;
  color: var(--esm-ink);
}

.woocommerce div.product .esm-ptabs__tab.is-active,
html body .esm-ptabs__tab.is-active {
  color: var(--esm-ink);
}

.woocommerce div.product .esm-ptabs__tab.is-active::after {
  transform: scaleX(1);
}

.woocommerce div.product .esm-ptabs__tab:focus-visible {
  outline: 2px solid var(--esm-violet);
  outline-offset: 4px;
}

.esm-ptabs__panel {
  max-width: 78ch;
  color: var(--esm-ink-2);
  font-size: 16px;
  line-height: 1.7;
}

.esm-ptabs__panel[hidden] {
  display: none;
}

/* Inherited long-description typography (was .esm-product-section__body). */
.esm-ptabs__panel h2,
.esm-ptabs__panel h3,
.esm-ptabs__panel h4 {
  margin: 28px 0 12px;
  font-family: var(--esm-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--esm-ink);
}

.esm-ptabs__panel h2 { font-size: clamp(24px, 2.4vw, 32px); }
.esm-ptabs__panel h3 { font-size: clamp(20px, 2vw, 26px); }
.esm-ptabs__panel h4 { font-size: 18px; }

.esm-ptabs__panel > :first-child,
.esm-ptabs__panel .elementor-widget-container > :first-child {
  margin-top: 0;
}

.esm-ptabs__panel p {
  margin: 0 0 16px;
}

.esm-ptabs__panel p > b:only-child,
.esm-ptabs__panel p > strong:only-child {
  display: block;
  margin-top: 22px;
  font-family: var(--esm-serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--esm-ink-3);
}

.esm-ptabs__panel p > b:first-child:not(:only-child),
.esm-ptabs__panel p > strong:first-child:not(:only-child) {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--esm-ink);
}

.esm-ptabs__panel ul,
.esm-ptabs__panel ol {
  margin: 0 0 18px;
  padding-left: 20px;
}

.esm-ptabs__panel li {
  margin: 0 0 8px;
}

.esm-ptabs__panel img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Elementor containers inside a panel become plain flow. */
.esm-ptabs__panel .e-con,
.esm-ptabs__panel .e-con-inner {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  --width: 100%;
  --content-width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* The recommends accordion, restyled like the FAQ rows. */
.esm-ptabs__panel .e-n-accordion-item {
  border-top: 1px solid var(--esm-line-2);
}

.esm-ptabs__panel .e-n-accordion-item:last-child {
  border-bottom: 1px solid var(--esm-line-2);
}

.esm-ptabs__panel .e-n-accordion-item-title {
  padding: 18px 0;
  font-family: var(--esm-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--esm-ink);
  cursor: pointer;
}

.esm-ptabs__panel .e-n-accordion-item-title-icon {
  color: var(--esm-ink-3);
}

.esm-ptabs__panel .e-n-accordion-item > .e-con {
  padding: 0 0 18px;
}

.esm-ptabs__panel .e-n-accordion-item .elementor-widget-container p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .esm-ptabs__bar {
    gap: 0 18px;
  }
  .woocommerce div.product .esm-ptabs__tab,
  html body .esm-ptabs__tab {
    font-size: 12px;
    padding: 12px 0 14px;
  }
}