/* ============================================================================
   WOOCOMMERCE — every shop surface: product card, archive, product page,
   cart, checkout, notices. Values from tokens.css only.

   Scope convention as in site.css: `#page-container #et-boc` (two IDs) beats
   Divi's module CSS, which is scoped `.et-db #et-boc .et-l …` on shop pages.
   !important only where WooCommerce or Divi use it themselves (noted).
   ========================================================================== */

/* Every product loop on the site. */
#page-container #et-boc :is(.et_pb_shop, .et_pb_wc_related_products, .et_pb_wc_upsells, .woocommerce) ul.products { --card-pad: var(--s-5); }


/* ============================================================================
   0. BASE — what WooCommerce's own markup (outside any Divi setting) takes
   from the design: prices in the display face (the product page's Price
   module takes its face from its own Price Text setting).
   ========================================================================== */
:is(.price, .amount, .woocommerce-Price-amount):not(.et_pb_wc_price *) { font-family: var(--font-display); }
/* WooCommerce's small print and the mobile reservation bar read at the
   body's unitless 1.65. */
:is(.woocommerce-result-count, .spv-sticky-atc) { line-height: 1.65; }


/* ============================================================================
   1. PRODUCT GRID
   4 columns ≥1200, 3 ≥900, 2 below. On the homepage and under the product
   page (not the archive) phones get a swipeable row instead.
   ========================================================================== */

#page-container #et-boc ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
@media (min-width: 900px)  { #page-container #et-boc ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #page-container #et-boc ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px)  { #page-container #et-boc ul.products { gap: var(--s-3); --card-pad: var(--s-3); } }

/* WooCommerce clears its old float grid with ::before/::after boxes, which
   would become empty grid cells. */
#page-container #et-boc ul.products::before,
#page-container #et-boc ul.products::after { display: none !important; }

@media (max-width: 559px) {
  #page-container #et-boc :is(.spv-sec-products, .spv-sec-product-related) ul.products {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1) !important;
    padding: var(--s-1) var(--gutter) var(--s-4) !important;
    --card-pad: var(--s-4);
    gap: var(--s-4);
  }
  #page-container #et-boc :is(.spv-sec-products, .spv-sec-product-related) ul.products::-webkit-scrollbar { display: none; }
  #page-container #et-boc :is(.spv-sec-products, .spv-sec-product-related) ul.products li.product { scroll-snap-align: start; }
}


/* ============================================================================
   2. PRODUCT CARD — one component everywhere
   ========================================================================== */

/* WooCommerce and Divi size and float li.product with !important at several
   breakpoints; the grid above owns layout now. */
#page-container #et-boc ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-width: 0;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line);
  background: var(--surface-card);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
#page-container #et-boc ul.products li.product::before {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  border-radius: inherit;
  padding: var(--bw);
  background: var(--grad-brand);
  -webkit-mask: var(--mask-fill) content-box, var(--mask-fill);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
#page-container #et-boc ul.products li.product:hover,
#page-container #et-boc ul.products li.product:focus-within {
  transform: translateY(calc(var(--s-1) * -1));
  border-color: var(--line-hi);
  box-shadow: var(--shadow-3);
}
#page-container #et-boc ul.products li.product:hover::before,
#page-container #et-boc ul.products li.product:focus-within::before { opacity: 0.6; }

/* The card's link covers the whole card; the reserve button sits above it. */
#page-container #et-boc ul.products li.product .woocommerce-LoopProduct-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "img img" "cat cat" "title title" "price stock";
  align-items: center;
  flex: 1 1 auto;
  padding: var(--s-2) var(--s-2) 0;
  color: inherit;
  text-decoration: none;
}
#page-container #et-boc ul.products li.product .woocommerce-LoopProduct-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
#page-container #et-boc ul.products li.product .woocommerce-LoopProduct-link:focus-visible { outline: none !important; }
#page-container #et-boc ul.products li.product:has(.woocommerce-LoopProduct-link:focus-visible) { outline: var(--bw-lg) solid var(--cyan-400); outline-offset: 3px; }

/* Image: square, inset, same backdrop for every photo. */
#page-container #et-boc ul.products li.product .et_shop_image,
#page-container #et-boc ul.products li.product .woocommerce-LoopProduct-link > img {
  grid-area: img;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--image-backdrop);
}
#page-container #et-boc ul.products li.product img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important; /* WooCommerce: `ul.products li.product a img { margin: 0 0 1em }` with !important in Divi */
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 600ms var(--ease-out);
}
#page-container #et-boc ul.products li.product:hover img { transform: scale(1.06); }
#page-container #et-boc ul.products li.product .et_overlay { display: none !important; }

/* Category pill. */
#page-container #et-boc ul.products li.product .spv-card-eyebrow {
  grid-area: cat;
  justify-self: start;
  margin: var(--s-4) calc(var(--card-pad) - var(--s-2)) 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--tint-cyan-line);
  background: var(--tint-cyan);
  font: var(--fw-semibold) var(--fs-eyebrow)/1.3 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--cyan-300);
}

/* Title: two lines, height reserved so every card lines up. Divi's Shop and
   Related modules set title size/colour with their own settings. */
#page-container #et-boc ul.products li.product .woocommerce-loop-product__title {
  grid-area: title;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  margin: var(--s-2) calc(var(--card-pad) - var(--s-2)) 0;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-card-title) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  color: var(--text-hi) !important;
  text-wrap: pretty;
}

#page-container #et-boc ul.products li.product .price {
  grid-area: price;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-3) 0 0 calc(var(--card-pad) - var(--s-2)) !important;
  padding: 0;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-price) !important;
  line-height: 1.2;
  color: var(--violet-300) !important;
}
#page-container #et-boc ul.products li.product .price .amount { color: inherit !important; font-size: inherit !important; }
#page-container #et-boc ul.products li.product .price del { font-size: var(--fs-sm) !important; color: var(--text-low) !important; font-weight: var(--fw-medium); }
#page-container #et-boc ul.products li.product .price ins { text-decoration: none; }

/* Stock: dot + words. */
.spv-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--fw-semibold) var(--fs-eyebrow)/1.2 var(--font-body);
  white-space: nowrap;
}
.spv-stock.is-in  { color: var(--success); }
.spv-stock.is-low { color: var(--amber-400); }
.spv-stock.is-out { color: var(--danger); }
.spv-stock .spv-dot { width: var(--s-2); height: var(--s-2); }
#page-container #et-boc ul.products li.product .spv-stock {
  grid-area: stock;
  justify-self: end;
  margin: var(--s-3) calc(var(--card-pad) - var(--s-2)) 0 var(--s-2);
}

/* Reserve button: full width, small secondary; turns primary on card hover. */
#page-container #et-boc ul.products li.product .button {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * var(--card-pad));
  min-height: var(--control-sm);
  margin: var(--s-4) var(--card-pad) var(--card-pad) !important;
  padding: 0 var(--s-3) !important;
  font-size: var(--fs-sm) !important;
}
#page-container #et-boc ul.products li.product:hover .button:not(.loading):not(.added) {
  --btn-fg: var(--text-on-accent);
  --btn-line: transparent;
  --btn-shadow: var(--glow-violet);
  background: var(--grad-brand) !important;
  background-size: 200% 100% !important;
}
#page-container #et-boc ul.products li.product .button.added {
  --btn-bg: var(--tint-success);
  --btn-fg: var(--success);
  --btn-line: var(--tint-success-line);
}
#page-container #et-boc ul.products li.product .added_to_cart { display: none !important; }

@media (max-width: 559px) {
  #page-container #et-boc ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-ui) !important; }
  #page-container #et-boc ul.products li.product .price { font-size: var(--fs-lg) !important; }
  #page-container #et-boc ul.products li.product .woocommerce-LoopProduct-link { grid-template-areas: "img img" "cat cat" "title title" "price price" "stock stock"; }
  #page-container #et-boc ul.products li.product .spv-stock { justify-self: start; margin-top: var(--s-2); margin-left: calc(var(--card-pad) - var(--s-2)); }
  #page-container #et-boc ul.products li.product .spv-card-eyebrow { margin-top: var(--s-3); }
  #page-container #et-boc ul.products li.product .button { padding: 0 var(--s-2) !important; font-size: var(--fs-caption) !important; }
}

@media (prefers-reduced-motion: reduce) {
  #page-container #et-boc ul.products li.product:hover,
  #page-container #et-boc ul.products li.product:hover img { transform: none; }
}


/* ============================================================================
   3. NOTICES — tinted glass bars by type
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) 0;
}
.et_pb_module .woocommerce-notices-wrapper { padding: 0; max-width: none; }

/* !important: Divi styles all three with background, colour, padding and
   float at equal or higher specificity. */
body #page-container #et-boc .woocommerce-message,
body #page-container #et-boc .woocommerce-info,
body #page-container #et-boc .woocommerce-error {
  --notice: var(--cyan-400);
  --notice-bg: var(--tint-cyan);
  --notice-line: var(--tint-cyan-line);
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4) !important;
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + var(--s-8) + var(--s-3)) !important;
  list-style: none;
  border: var(--bw) solid var(--notice-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--notice-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
  color: var(--text-hi) !important;
  font: var(--fw-medium) var(--fs-ui)/1.5 var(--font-body) !important;
}
body #page-container #et-boc .woocommerce-message { --notice: var(--success); --notice-bg: var(--tint-success); --notice-line: var(--tint-success-line); }
body .woocommerce-error   { --notice: var(--danger);  --notice-bg: var(--tint-danger-md); --notice-line: var(--tint-danger-line); }

/* `body` + !important: Divi prints `.woocommerce-message::before
   { display:none !important; color:#fff !important }` after this file. */
body #page-container #et-boc .woocommerce-message::before,
body #page-container #et-boc .woocommerce-info::before,
body #page-container #et-boc .woocommerce-error::before {
  position: absolute;
  top: 50%;
  left: var(--s-5);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--s-8);
  height: var(--s-8);
  margin-top: calc(var(--s-4) * -1);
  border-radius: var(--r-pill);
  background: var(--notice-bg);
  color: var(--notice) !important;
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon-sm);
  line-height: 1;
}
body #page-container #et-boc .woocommerce-message::before { content: "check" !important; }
body #page-container #et-boc .woocommerce-info::before    { content: "info" !important; }
body #page-container #et-boc .woocommerce-error::before   { content: "error" !important; }
.woocommerce-error li { margin: 0; padding: 0; list-style: none; }

/* WooCommerce moves focus to a new notice so screen readers announce it.
   The notice is not a control, so it gets no focus ring (it drew a second
   cyan frame around the bar). */
.woocommerce-notices-wrapper:focus,
body #page-container #et-boc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus { outline: none !important; }

/* WooCommerce prints the button before the text; it belongs at the end. */
body #page-container #et-boc .woocommerce-message .button,
body #page-container #et-boc .woocommerce-info .button,
body #page-container #et-boc .woocommerce-error .button {
  order: 2;
  margin-left: auto !important;
  float: none !important;
  min-height: var(--control-sm) !important;
  padding: 0 var(--s-4) !important;
  font-size: var(--fs-sm) !important;
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) { color: var(--cyan-300); }

@media (max-width: 767px) {
  body #page-container #et-boc .woocommerce-message .button,
  body #page-container #et-boc .woocommerce-info .button { margin-left: 0 !important; }
}


/* ============================================================================
   4. SHOP + CATEGORY ARCHIVE (Theme Builder post 46)
   ========================================================================== */

/* Section and module spacing, the breadcrumb's type and colours and the
   title are the modules' Divi settings. */

/* Breadcrumb links (also on the product page): a 32px tap target. */
#page-container #et-boc .woocommerce-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-8);
  text-decoration: none;
}
#page-container #et-boc .woocommerce-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

#page-container #et-boc .spv-archive-title .entry-title { margin: 0; padding: 0; }

/* Category chips bar: sticks under the header while the grid scrolls (its
   spacing, background and border are the module's settings). */
#page-container #et-boc .spv-archive-toolbar {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--bw));
  z-index: 5;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.spv-chips { position: relative; }
.spv-chips ul {
  display: flex;
  gap: var(--s-2);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.spv-chips ul::-webkit-scrollbar { display: none; }
.spv-chips li { flex: none; margin: 0 !important; padding: 0 !important; }
#page-container #et-boc .spv-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-10);
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--line-hi);
  background: var(--ink-700);
  color: var(--text-mid);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .spv-chip:hover { background: var(--ink-600); color: var(--text-hi); border-color: var(--line-hover); }
#page-container #et-boc .spv-chip.is-active { background: var(--grad-brand); border-color: transparent; color: var(--text-on-accent); }
@media (max-width: 767px) {
  /* Fade the edge that has more chips behind it. */
  .spv-chips::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: var(--s-8);
    background: linear-gradient(90deg, transparent, var(--ink-900));
    pointer-events: none;
  }
}

/* Toolbar: result count left, sort right (printed by the Shop module). */
#page-container #et-boc .spv-shop-archive .woocommerce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
#page-container #et-boc .spv-shop-archive .woocommerce > :is(ul.products, nav, .woocommerce-notices-wrapper, .woocommerce-no-products-found) { flex: 0 0 100%; }
#page-container #et-boc .woocommerce-result-count {
  float: none;
  margin: 0 !important;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-mid) !important;
}
#page-container #et-boc .woocommerce-ordering { float: none; margin: 0 !important; }
#page-container #et-boc .woocommerce-ordering select { width: auto; min-width: var(--w-select); min-height: var(--control-md); }
@media (max-width: 479px) {
  #page-container #et-boc .woocommerce-ordering,
  #page-container #et-boc .woocommerce-ordering select { width: 100%; min-width: 0; }
}

/* Pagination. */
#page-container #et-boc .woocommerce-pagination,
#page-container #et-boc .woocommerce nav.woocommerce-pagination { margin-top: var(--s-12) !important; text-align: center; }
#page-container #et-boc .woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#page-container #et-boc .woocommerce-pagination ul.page-numbers li { float: none; margin: 0; border: 0 !important; overflow: visible; }
#page-container #et-boc .woocommerce-pagination ul.page-numbers li :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line) !important;
  background: var(--ink-700) !important;
  color: var(--text-mid) !important;
  font: var(--fw-semibold) var(--fs-ui)/1 var(--font-body) !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .woocommerce-pagination ul.page-numbers li a:hover { background: var(--ink-600) !important; color: var(--text-hi) !important; }
#page-container #et-boc .woocommerce-pagination ul.page-numbers li span.current { background: var(--grad-brand) !important; border-color: transparent !important; color: var(--text-on-accent) !important; }

/* Empty category. */
.spv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--measure-card);
  margin: 0 auto;
  padding: var(--s-12) var(--s-6);
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line);
  background: var(--surface-card);
  text-align: center;
}
#page-container #et-boc .spv-empty__title { margin: var(--s-2) 0 0; padding: 0; font-size: var(--fs-h3); }
.spv-empty p { margin: 0; padding: 0; color: var(--text-mid); }
.spv-empty .spv-btn { margin-top: var(--s-3); }


/* ============================================================================
   5. PRODUCT PAGE (Theme Builder post 45)
   ========================================================================== */

/* Section spacing and backgrounds, row spacing, the gallery card and the
   title / price / description type are the Divi modules' own settings. */

/* 7 / 5 split; the summary follows the gallery down the page. */
@media (min-width: 1024px) {
  #page-container #et-boc .spv-sec-product-main .et_pb_row {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s-16);
    align-items: start;
  }
  #page-container #et-boc .spv-sec-product-main .et_pb_row::after { display: none; }
  #page-container #et-boc .spv-sec-product-main .et_pb_row > .et_pb_column { width: auto !important; margin: 0 !important; float: none; }
  #page-container #et-boc .spv-sec-product-main .et_pb_row > .et_pb_column:last-child {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--s-6));
  }
}
@media (max-width: 1023px) {
  #page-container #et-boc .spv-sec-product-main .et_pb_row > .et_pb_column:first-child { margin-bottom: var(--s-8) !important; }
}

/* Gallery. */
#page-container #et-boc .et_pb_wc_images .woocommerce-product-gallery { margin: 0 !important; }
#page-container #et-boc .et_pb_wc_images .woocommerce-product-gallery__image img { border-radius: 0 !important; }
#page-container #et-boc .woocommerce-product-gallery__trigger {
  top: var(--s-4) !important;
  right: var(--s-4) !important;
  width: var(--icon-btn) !important;
  height: var(--icon-btn) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill) !important;
  border: var(--bw) solid var(--line-hi);
  background: var(--surface-glass) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 0 !important;
  text-indent: 0 !important;
  transition: background-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .woocommerce-product-gallery__trigger::before {
  content: "zoom_in" !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon) !important;
  color: var(--text-hi);
}
#page-container #et-boc .woocommerce-product-gallery__trigger::after { display: none !important; }
#page-container #et-boc .woocommerce-product-gallery__trigger:hover { background: var(--ink-600) !important; }
#page-container #et-boc .flex-control-thumbs { display: flex; gap: var(--s-2); padding: var(--s-3) !important; }
#page-container #et-boc .flex-control-thumbs li { width: var(--s-16) !important; flex: none; }
#page-container #et-boc .flex-control-thumbs img { border-radius: var(--r-sm); border: var(--bw-lg) solid transparent; opacity: 0.7; }
#page-container #et-boc .flex-control-thumbs img.flex-active { border-color: var(--violet-400); opacity: 1; }

/* Category as a pill (the "Category:" label is hidden with font-size:0 and
   takes no line space, so the pill hangs from the meta line's baseline). */
#page-container #et-boc .et_pb_wc_meta .product_meta .posted_in { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); font-size: 0 !important; line-height: 0; }
#page-container #et-boc .et_pb_wc_meta .product_meta .posted_in a {
  display: inline-flex;
  align-items: center;
  min-height: var(--s-8);
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--tint-cyan-line);
  background: var(--tint-cyan);
  font: var(--fw-bold) var(--fs-eyebrow)/1 var(--font-body) !important;
  letter-spacing: var(--ls-caps) !important;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cyan-300) !important;
  transition: background-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .et_pb_wc_meta .product_meta .posted_in a:hover { background: var(--tint-cyan-line); }

/* Title and price: type and colour are the modules' settings. */
#page-container #et-boc .et_pb_wc_title h1,
#page-container #et-boc .et_pb_wc_title .product_title { margin: 0; padding: 0; }
#page-container #et-boc .et_pb_wc_price .price { margin: 0; }
#page-container #et-boc .et_pb_wc_price .price .amount { color: inherit; }

/* Stock as a status pill. */
#page-container #et-boc .et_pb_wc_stock p.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-8);
  margin: 0;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-body) !important;
  letter-spacing: 0.04em !important;
}
#page-container #et-boc .et_pb_wc_stock p.stock::before {
  content: "";
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}
#page-container #et-boc .et_pb_wc_stock p.stock.in-stock { color: var(--success) !important; background: var(--tint-success); border: var(--bw) solid var(--tint-success-line); }
#page-container #et-boc .et_pb_wc_stock p.stock.low-stock { color: var(--amber-400) !important; background: var(--tint-amber); border-color: var(--tint-amber-line); }
#page-container #et-boc .et_pb_wc_stock p.stock.out-of-stock { color: var(--danger-soft) !important; background: var(--tint-danger-md); border: var(--bw) solid var(--tint-danger-line); }
#page-container #et-boc .et_pb_wc_stock p.stock.available-on-backorder { color: var(--warning) !important; background: var(--tint-amber); border: var(--bw) solid var(--tint-amber-line); }

#page-container #et-boc .et_pb_wc_description p:last-child { padding-bottom: 0; }

/* Quantity stepper + Add to reservation, one row, same 52px height. */
#page-container #et-boc .et_pb_wc_add_to_cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-3);
  margin: 0 !important;
}
/* `body` + !important: WooCommerce's `.woocommerce div.product form.cart::before
   { content:" "; display:table }` would become a flex item. */
body #page-container #et-boc .et_pb_wc_add_to_cart form.cart::before,
body #page-container #et-boc .et_pb_wc_add_to_cart form.cart::after { display: none !important; }
/* Divi: `.woocommerce div.product form.cart div.quantity { margin: 0 20px 0 0 !important }`. */
body #page-container #et-boc .et_pb_wc_add_to_cart form.cart div.quantity { float: none; width: auto !important; margin: 0 !important; }
#page-container #et-boc .et_pb_wc_add_to_cart form.cart .single_add_to_cart_button {
  flex: 1 1 180px;
  min-height: var(--control-lg);
  margin: 0 !important;
  float: none;
  font-size: var(--fs-base) !important;
}

/* The stepper, shared by the product page and the cart. main.js wraps the
   native input with − / + buttons; the input stays the real field. */
/* Width: Divi fixes the cart's .quantity at 100px, which cut the + button
   off inside the overflow:hidden frame. The stepper sizes to its parts. */
#page-container #et-boc .quantity.spv-qty {
  display: inline-flex;
  flex: none;
  width: auto !important;
  min-width: max-content;
  align-items: stretch;
  height: var(--control-lg);
  overflow: hidden;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line-hi);
  background: var(--ink-800);
}
#page-container #et-boc .quantity.spv-qty:focus-within { border-color: var(--cyan-400); box-shadow: var(--focus-halo); }
#page-container #et-boc .quantity input.qty {
  box-sizing: border-box;
  width: var(--s-12) !important;       /* Divi: `.woocommerce .quantity input.qty { width: 4.3em }` */
  max-width: none !important;           /* Divi: `.et_pb_wc_add_to_cart .quantity input.qty { max-width: 4.3em }` */
  height: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-hi) !important;
  font: var(--fw-semibold) var(--fs-base)/1 var(--font-body) !important;
  text-align: center;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
#page-container #et-boc .quantity input.qty::-webkit-outer-spin-button,
#page-container #et-boc .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#page-container #et-boc .quantity input.qty:focus { box-shadow: none !important; }
.spv-qty__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stepper-btn);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-mid);
  font: var(--fw-regular) var(--fs-icon)/1 var(--font-icon);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.spv-qty__btn:hover:not(:disabled) { background: var(--ink-600); color: var(--text-hi); }
.spv-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.spv-qty__btn:focus-visible { outline-offset: -2px !important; }

/* Pickup, ID notice and trust row under the button. */
.spv-pdp-assure { display: grid; gap: var(--s-3); }
.spv-pdp-assure__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line);
  background: var(--surface-card);
}
.spv-pdp-assure__row--id {
  border-color: var(--tint-danger-line);
  background: var(--tint-danger);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.spv-pdp-assure__icon.material-symbols-outlined {
  flex: 0 0 var(--s-10);
  height: var(--s-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-icon);
}
.spv-pdp-assure__icon--pickup { color: var(--cyan-400); background: var(--tint-cyan); border: var(--bw) solid var(--tint-cyan-line); }
.spv-pdp-assure__icon--id { color: var(--danger-soft); background: var(--tint-danger-md); border: var(--bw) solid var(--tint-danger-line); }
.spv-pdp-assure strong { display: block; margin: 0 0 var(--s-1); font: var(--fw-bold) var(--fs-sm)/1.3 var(--font-body); color: var(--text-hi); }
.spv-pdp-assure__text { display: block; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-mid); }

.spv-trust-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.spv-trust-mini li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  margin: 0 !important;
  padding: var(--s-3) !important;
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--line);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--text-hi);
}
.spv-trust-mini .material-symbols-outlined { font-size: var(--fs-icon); color: var(--cyan-400); }
@media (max-width: 479px) { .spv-trust-mini { grid-template-columns: minmax(0, 1fr); } .spv-trust-mini li { flex-direction: row; align-items: center; } }

/* Tabs: underline style on dark. The tabs' type and colours, their
   backgrounds, the module border and the content padding are the module's
   Divi settings; the controls' layout, the underline and the tap target
   are here. */
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
  border-bottom: var(--bw) solid var(--line);
}
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls::-webkit-scrollbar { display: none; }
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls::after { display: none; }
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls li {
  float: none;
  flex: none;
  margin: 0;
  border: 0;
}
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--s-12);
  padding: 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls li a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--bw) * -1);
  height: var(--bw-lg);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
#page-container #et-boc .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a::after { transform: scaleX(1); }
#page-container #et-boc .et_pb_wc_tabs .et_pb_tab { max-width: var(--prose-wide); }
#page-container #et-boc .et_pb_wc_tabs .et_pb_tab h2 { display: none; }

#page-container #et-boc table.shop_attributes {
  width: 100%;
  max-width: var(--w-table);
  margin: 0;
  border: var(--bw) solid var(--line) !important;
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
#page-container #et-boc table.shop_attributes th,
#page-container #et-boc table.shop_attributes td {
  padding: var(--s-3) var(--s-4) !important;
  border: 0 !important;
  border-bottom: var(--bw) solid var(--line) !important;
  background: transparent !important;   /* WooCommerce zebra-stripes with !important-free rules; Divi adds its own */
  font-style: normal;
  text-align: left;
}
#page-container #et-boc table.shop_attributes tr:nth-child(odd) :is(th, td) { background: var(--ink-800) !important; }
#page-container #et-boc table.shop_attributes th { width: 40%; color: var(--text-mid); font-weight: var(--fw-semibold); }
#page-container #et-boc table.shop_attributes td { color: var(--text-hi); }
#page-container #et-boc table.shop_attributes td p { margin: 0; padding: 0; }
#page-container #et-boc table.shop_attributes tr:last-child :is(th, td) { border-bottom: 0 !important; }

/* Related products heading: type and colour are the module's Title settings. */
body #page-container #et-boc .et_pb_wc_related_products section.related > h2 { margin: 0 0 var(--s-8) !important; padding: 0; }

/* Mobile reservation bar. */
.spv-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: var(--bw) solid var(--line-hi);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3);
}
.spv-sticky-atc[hidden] { display: none; }
.spv-sticky-atc__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.spv-sticky-atc__name { overflow: hidden; font-size: var(--fs-caption); color: var(--text-mid); white-space: nowrap; text-overflow: ellipsis; }
.spv-sticky-atc__price { font: var(--fw-bold) var(--fs-lg)/1.2 var(--font-display); color: var(--violet-300); }
.spv-sticky-atc .spv-btn { flex: none; }
html.spv-has-sticky-atc body { padding-bottom: calc(var(--control-md) + 2 * var(--s-3)); }
@media (min-width: 768px) { .spv-sticky-atc { display: none !important; } }


/* ============================================================================
   6. CART — "Your reservation"
   ========================================================================== */

/* Section padding and the gap between the rows are the Divi settings. From
   1024px the cards row is a grid (Divi's columns have no 1.7 : 1 split); below
   it the stacked columns get the gap — a default a column's own Spacing
   setting overrides. */
@media (min-width: 1024px) {
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_row_1,
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_row:has(> .et_pb_column_2_3, > .et_pb_column_3_5) {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--s-10);
    align-items: start;
  }
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_row:has(> .et_pb_column_2_3, > .et_pb_column_3_5)::after { display: none; }
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_row:has(> .et_pb_column_2_3, > .et_pb_column_3_5) > .et_pb_column { width: auto !important; margin: 0 !important; float: none; }
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_row:has(> .et_pb_column_2_3, > .et_pb_column_3_5) > .et_pb_column:last-child {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--s-6));
  }
}
@media (max-width: 1023px) {
  #page-container #et-boc :is(.spv-sec-cart, .spv-sec-checkout) .et_pb_column { margin-bottom: var(--s-8); }
}

/* Line items as row cards. The table stays a table for WooCommerce's JS;
   rows become grids. */
#page-container #et-boc table.shop_table.cart {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#page-container #et-boc table.shop_table.cart thead { display: none; }
#page-container #et-boc table.shop_table.cart tbody { display: grid; gap: var(--s-3); width: 100%; }
#page-container #et-boc table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: var(--s-16) minmax(0, 1fr) auto auto auto var(--control-sm);
  grid-template-areas: "thumb name price qty subtotal remove";
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line);
  background: var(--surface-card);
  box-shadow: var(--shadow-2);
}
#page-container #et-boc table.shop_table.cart td {
  display: block;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
#page-container #et-boc table.shop_table.cart td::before { display: none !important; } /* WooCommerce's responsive data-title labels */
#page-container #et-boc table.shop_table.cart td.product-thumbnail { grid-area: thumb; display: block !important; }
#page-container #et-boc table.shop_table.cart td.product-thumbnail img {
  width: var(--s-16) !important;
  height: var(--s-16);
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--image-backdrop);
}
#page-container #et-boc table.shop_table.cart td.product-name { grid-area: name; }
#page-container #et-boc table.shop_table.cart td.product-name a {
  font: var(--fw-semibold) var(--fs-base)/1.35 var(--font-display) !important;
  color: var(--text-hi) !important;
  text-decoration: none;
}
#page-container #et-boc table.shop_table.cart td.product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
#page-container #et-boc table.shop_table.cart td.product-price { grid-area: price; color: var(--text-mid); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
#page-container #et-boc table.shop_table.cart td.product-quantity { grid-area: qty; }
#page-container #et-boc table.shop_table.cart td.product-quantity .quantity.spv-qty { height: var(--control-md); }
#page-container #et-boc table.shop_table.cart td.product-subtotal { grid-area: subtotal; min-width: 5ch; text-align: right !important; font: var(--fw-bold) var(--fs-base)/1 var(--font-display); color: var(--text-hi); font-variant-numeric: tabular-nums; }
#page-container #et-boc table.shop_table.cart td.product-remove { grid-area: remove; }
#page-container #et-boc table.shop_table.cart a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--control-sm) !important;
  height: var(--control-sm) !important;
  border-radius: var(--r-pill) !important;
  border: var(--bw) solid var(--line) !important;
  background: transparent !important;
  color: var(--text-mid) !important;
  font-size: 0 !important;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc table.shop_table.cart a.remove::before {
  content: "delete";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
}
#page-container #et-boc table.shop_table.cart a.remove:hover {
  background: var(--tint-danger-md) !important;
  border-color: var(--tint-danger-line) !important;
  color: var(--danger-soft) !important;
}

/* WooCommerce greys out the cart/checkout while it updates with a white,
   inline-styled overlay and a dark GIF spinner. Dark overlay, site spinner. */
.blockUI.blockOverlay {
  background: var(--ink-900) !important;
  opacity: 0.55 !important;
  border-radius: var(--r-lg);
}
.blockUI.blockOverlay::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--s-6) !important;
  height: var(--s-6) !important;
  margin: calc(var(--s-3) * -1) 0 0 calc(var(--s-3) * -1) !important;
  border: var(--bw-lg) solid var(--violet-400) !important;
  border-right-color: transparent !important;
  border-radius: var(--r-pill) !important;
  background: none !important;
  animation: spv-spin 700ms linear infinite !important;
}

/* Coupon + update row. */
#page-container #et-boc table.shop_table.cart tr:not(.cart_item) { display: block; }
#page-container #et-boc table.shop_table.cart td.actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0 0 !important;
}
#page-container #et-boc table.shop_table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 320px;
  gap: var(--s-2);
  float: none;
  padding: 0 !important;
}
#page-container #et-boc table.shop_table.cart td.actions .coupon input#coupon_code { flex: 1 1 180px; width: auto !important; min-width: 0; min-height: var(--control-md); margin: 0 !important; }
#page-container #et-boc table.shop_table.cart td.actions .coupon .button { flex: 0 0 auto; margin: 0 !important; }
#page-container #et-boc table.shop_table.cart td.actions .button { min-height: var(--control-md); float: none !important; }
/* With scripts, quantity changes apply on their own (main.js); the button
   stays in the form for no-JS visitors. */
html.js #page-container #et-boc table.shop_table.cart button[name="update_cart"] {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  #page-container #et-boc table.shop_table.cart tr.cart_item {
    grid-template-columns: var(--s-16) minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name remove"
      "thumb price price"
      "qty qty subtotal";
    gap: var(--s-2) var(--s-3);
  }
  #page-container #et-boc table.shop_table.cart td.product-quantity { margin-top: var(--s-2); }
  #page-container #et-boc table.shop_table.cart td.product-subtotal { align-self: center; margin-top: var(--s-2); }
}

/* Totals card: the Divi Cart Totals module's own Design settings (background,
   border, radius, padding, shadow). WooCommerce's classic cart (no module)
   gets the same card here. */
#page-container #et-boc .et_pb_wc_cart_totals { width: 100% !important; float: none; }
#page-container #et-boc .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none;
  padding: var(--s-6) !important;
  border-radius: var(--r-lg) !important;
  border: var(--bw) solid var(--line-hi) !important;
  background: var(--surface-glass) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3);
}
#page-container #et-boc .cart-collaterals:empty { display: none; }
#page-container #et-boc .cart_totals h2 { margin: 0 0 var(--s-4) !important; padding: 0; }
#page-container #et-boc .cart_totals table.shop_table,
#page-container #et-boc .woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse;
  background: transparent !important;
}
#page-container #et-boc :is(.cart_totals, .woocommerce-checkout-review-order-table) :is(th, td) {
  padding: var(--s-3) 0 !important;
  border: 0 !important;
  border-top: var(--bw) solid var(--line) !important;
  background: transparent !important;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  vertical-align: top;
}
#page-container #et-boc :is(.cart_totals, .woocommerce-checkout-review-order-table) tr:first-child :is(th, td) { border-top: 0 !important; }
#page-container #et-boc :is(.cart_totals, .woocommerce-checkout-review-order-table) th { color: var(--text-mid) !important; text-align: left; }
#page-container #et-boc :is(.cart_totals, .woocommerce-checkout-review-order-table) td { color: var(--text-hi) !important; text-align: right !important; font-variant-numeric: tabular-nums; }
#page-container #et-boc .cart_totals td::before { display: none !important; }
/* WooCommerce's responsive table hides the labels on phones and prints
   them with td::before; the two-column rows fit, so keep the real ones. */
#page-container #et-boc .cart_totals table.shop_table_responsive tr { display: table-row !important; }
#page-container #et-boc .cart_totals table.shop_table_responsive :is(th, td) { display: table-cell !important; }
#page-container #et-boc .woocommerce-checkout-review-order-table td.product-name { width: 70%; text-align: left !important; }
#page-container #et-boc .woocommerce-checkout-review-order-table .product-quantity { color: var(--text-mid); font-weight: var(--fw-regular); }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: var(--s-3) !important; }
#page-container #et-boc :is(.cart_totals, .woocommerce-checkout-review-order-table) tr.order-total :is(th, td) {
  padding-top: var(--s-4) !important;
  border-top-color: var(--line-hi) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-total) !important;
  color: var(--text-hi) !important;
}
#page-container #et-boc .spv-pickup-row .woocommerce-shipping-methods { display: contents; margin: 0; padding: 0; list-style: none; }
#page-container #et-boc .spv-pickup-row .woocommerce-shipping-methods li { display: contents; }
#page-container #et-boc .spv-pickup-row__value { color: var(--text-hi); }
#page-container #et-boc :is(.woocommerce-shipping-destination, .woocommerce-shipping-calculator, .shipping-calculator-button) { display: none !important; }
#page-container #et-boc .wc-proceed-to-checkout { padding: var(--s-5) 0 0 !important; }
#page-container #et-boc .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: var(--control-lg);
  margin: 0 !important;
  font-size: var(--fs-base) !important;
}

/* Empty cart. */
#page-container #et-boc .cart-empty.woocommerce-info { max-width: var(--measure-card); }
#page-container #et-boc .return-to-shop { margin-top: var(--s-4); }


/* ============================================================================
   7. CHECKOUT
   ========================================================================== */

/* The Order Details and Payment cards, and every heading's type, are the
   Divi checkout modules' own settings. */
#page-container #et-boc .spv-sec-checkout h3,
#page-container #et-boc .woocommerce-billing-fields > h3,
#page-container #et-boc #order_review_heading { margin: 0 0 var(--s-4) !important; padding: 0; }
#page-container #et-boc .spv-pickup__details-heading { margin-top: var(--s-8) !important; }

/* Fields. */
#page-container #et-boc .woocommerce form .form-row { margin: 0 0 var(--s-4); padding: 0; }
#page-container #et-boc .woocommerce form .form-row label { display: block; margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-mid); }
#page-container #et-boc .woocommerce form .form-row .required { color: var(--danger-soft); text-decoration: none; }
#page-container #et-boc .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--danger) !important; }
#page-container #et-boc .woocommerce form .form-row .checkout-inline-error-message,
#page-container #et-boc .woocommerce-error[role="alert"] li { font-size: var(--fs-caption); color: var(--danger-soft); }
#page-container #et-boc .woocommerce form .form-row .checkout-inline-error-message::before { content: "error"; font-family: var(--font-icon); margin-right: var(--s-1); vertical-align: -0.2em; }
#page-container #et-boc .select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: var(--input-h) !important;
  display: flex;
  align-items: center;
  border: var(--bw) solid var(--line-hi) !important;
  border-radius: var(--r-sm) !important;
  background: var(--ink-800) !important;
  font-size: var(--fs-base);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: var(--s-4) !important; line-height: var(--input-h) !important; color: var(--text-hi) !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--cyan-400) !important; box-shadow: var(--focus-halo); }
#page-container #et-boc .select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--input-h); }

/* Store picker: two radio cards. */
.spv-pickup { margin: 0 0 var(--s-2); padding: 0; border: 0; line-height: 1.65; }
.spv-pickup__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); }
.spv-pickup__card {
  position: relative;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-5) !important;
  border-radius: var(--r-lg);
  border: var(--bw-md) solid var(--line-hi);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.spv-pickup__card:hover { border-color: var(--store-line); background: var(--ink-600); }
.spv-pickup__card:has(input:checked) {
  border-color: var(--store-color);
  background: var(--store-tint);
  box-shadow: 0 0 0 1px var(--store-color), 0 12px 32px -16px var(--store-color);
}
#page-container #et-boc .spv-pickup__card input[type="radio"] { margin: 2px 0 0; }
#page-container #et-boc .spv-pickup__card input[type="radio"]:checked { background-color: var(--store-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='white'/%3E%3C/svg%3E"); background-size: 100%; }
.spv-pickup__body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.spv-pickup__name { font: var(--fw-bold) var(--fs-h4)/1.2 var(--font-display); color: var(--store-color); }
.spv-pickup__address,
.spv-pickup__hours { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-mid); }
.spv-pickup__phone { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-hi); }
#page-container #et-boc .spv-pickup__note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--text-mid);
}
#page-container #et-boc .spv-pickup__note::before { content: "badge"; font-family: var(--font-icon); font-size: var(--fs-icon-sm); color: var(--danger-soft); }
.spv-pickup__confirm { margin-top: var(--s-4); }

/* Order summary + payment: the modules above are the cards. */
/* The Payment card is the module's own box (Background setting + Advanced ›
   Custom CSS › Main Element). The privacy and terms links read in the colour
   of the line they sit in. */
#page-container #et-boc :is(.woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-link) { color: inherit; }
/* WooCommerce's small print sets its own line height; the design's is the
   body's 1.65 (the Payment module's Body line height, when set, wins). */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment div.payment_box p { line-height: 1.65; }
#page-container #et-boc .woocommerce-checkout-review-order-table thead th { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-low) !important; }
#page-container #et-boc #payment ul.payment_methods { margin: 0 0 var(--s-4); padding: 0 !important; border: 0 !important; }
#page-container #et-boc #payment ul.payment_methods li { list-style: none; color: var(--text-hi); }
#page-container #et-boc #payment div.payment_box {
  margin: var(--s-2) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--ink-800) !important;
  color: var(--text-mid) !important;
  font-size: var(--fs-sm);
}
#page-container #et-boc #payment div.payment_box::before { display: none; }
#page-container #et-boc #payment .place-order { margin: 0; padding: 0 !important; }
#page-container #et-boc #payment .woocommerce-privacy-policy-text p { font-size: var(--fs-caption); color: var(--text-low); }
#page-container #et-boc #payment #place_order { width: 100%; min-height: var(--control-lg); float: none; font-size: var(--fs-base) !important; }


/* ============================================================================
   8. MY ACCOUNT (login / register)
   The page is WooCommerce's own screen (the page title from the Divi page
   template, the forms from a shortcode in a Code module), so its type and
   colours are set here.
   ========================================================================== */

.woocommerce-account #main-content .entry-title.main_title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-hi);
}
#page-container #et-boc .spv-woo-account { color: #DFE2EE; }
#page-container #et-boc .spv-woo-account a:not(.button) { color: inherit; }
#page-container #et-boc .spv-woo-account :is(h2, h3) {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--text-hi);
}

#page-container #et-boc .woocommerce-form-login,
#page-container #et-boc .woocommerce-form-register {
  padding: var(--s-6) !important;
  border-radius: var(--r-lg) !important;
  border: var(--bw) solid var(--line) !important;
  background: var(--surface-card);
}
#page-container #et-boc .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
#page-container #et-boc .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-mid);
  text-decoration: none;
}
#page-container #et-boc .woocommerce-MyAccount-navigation .is-active a,
#page-container #et-boc .woocommerce-MyAccount-navigation a:hover { background: var(--ink-600); color: var(--text-hi); }

/* Order received: one column, the confirmation card centred. */
.woocommerce-order-received #page-container #et-boc .spv-sec-checkout .et_pb_row:has(> .et_pb_column_3_5) { display: block !important; max-width: calc(var(--measure) + 2 * var(--gutter)) !important; }
.woocommerce-order-received #page-container #et-boc .spv-sec-checkout .et_pb_column_3_5:has(.et_pb_wc_checkout_billing) { display: none; }
.woocommerce-order-received #page-container #et-boc .spv-sec-checkout .et_pb_column_2_5 { width: 100% !important; position: static !important; }
.woocommerce-order-received #page-container #et-boc .spv-sec-checkout .et_pb_row:first-child { max-width: calc(var(--measure) + 2 * var(--gutter)) !important; }
#page-container #et-boc ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-6) !important;
  padding: 0 !important;
  list-style: none;
}
#page-container #et-boc ul.woocommerce-order-overview li {
  margin: 0 !important;
  padding: var(--s-3) var(--s-4) !important;
  border: var(--bw) solid var(--line) !important;
  border-radius: var(--r-sm);
  background: var(--ink-800);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-low);
}
#page-container #et-boc ul.woocommerce-order-overview li strong { display: block; margin-top: var(--s-1); font: var(--fw-bold) var(--fs-base)/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text-hi); }
#page-container #et-boc .woocommerce-thankyou-order-received { margin: 0; font: var(--fw-bold) var(--fs-h4)/1.3 var(--font-display); color: var(--success); }
#page-container #et-boc .woocommerce-order-details__title,
#page-container #et-boc .woocommerce-column__title { margin: var(--s-8) 0 var(--s-4) !important; font-size: var(--fs-h4) !important; }
#page-container #et-boc .woocommerce-table--order-details { width: 100%; border: 0 !important; }
#page-container #et-boc .woocommerce-table--order-details :is(th, td) { padding: var(--s-3) 0 !important; border: 0 !important; border-top: var(--bw) solid var(--line) !important; background: transparent !important; color: var(--text-mid); font-size: var(--fs-sm); }
#page-container #et-boc .woocommerce-table--order-details tfoot tr:last-child :is(th, td) { font: var(--fw-bold) var(--fs-total)/1.2 var(--font-display) !important; color: var(--text-hi); }
#page-container #et-boc .woocommerce-customer-details address { padding: var(--s-4) !important; border: var(--bw) solid var(--line) !important; border-radius: var(--r-md); background: var(--ink-800); font-style: normal; color: var(--text-mid); }
#page-container #et-boc ul.woocommerce-order-overview::before, #page-container #et-boc ul.woocommerce-order-overview::after { display: none !important; }