/* =================================================================
   IHOC overrides — loaded after ihoc.css on IHOC pages.

   Two jobs:
     1. Defensive container centering — guarantee that .max-w-[1280px]
        + .mx-auto win against any Divi parent CSS that might be
        overriding margins on body/main/divs with !important.
     2. Style WooCommerce's standard markup (tabs, variation form,
        cart) inside our wrappers so it visually matches the IHOC
        design without us rebuilding the WC markup ourselves.
   ================================================================= */

/* ---- 1. Defensive centering ----------------------------------- */
body.caviar-ihoc-page main {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.caviar-ihoc-page .max-w-\[1280px\] {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- 1.5 Hero section full-width white background ------------ *
 * The 2-column hero (gallery + product info) is constrained to a
 * 1280px max-width centered container. To paint its background
 * white edge-to-edge — without breaking the layout by wrapping it
 * in another div — we use a ::before pseudo-element that extends
 * 100vw wide. `isolation: isolate` keeps z-index: -1 contained so
 * the white doesn't bleed behind the page header / breadcrumb.
 */
body.caviar-ihoc-page .caviar-product-hero {
  position: relative;
  isolation: isolate;
  background-color: #fff;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
body.caviar-ihoc-page .caviar-product-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background-color: #fff;
  z-index: -1;
}

/* ---- 1a. Breadcrumb bar — explicit styling --------------------- *
 * The Tailwind utility versions of these properties keep losing to
 * Divi parent's element resets (border-width: 0, padding resets,
 * link colors). So we add a dedicated `caviar-breadcrumb-bar` class
 * to the wrapper and pin all four properties — bg, bottom border,
 * inner padding, link colors — with explicit !important rules.
 *
 * Values match IHOC' tokens exactly (subtle off-white bg, stone
 * border, muted text, gold hover).
 */
body.caviar-ihoc-page .caviar-breadcrumb-bar {
  background-color: oklch(0.98 0.005 90) !important;
  border-bottom: 1px solid oklch(0.86 0.012 85) !important;
}
body.caviar-ihoc-page .caviar-breadcrumb-bar > div {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}
body.caviar-ihoc-page .caviar-breadcrumb-bar a,
body.caviar-ihoc-page .caviar-breadcrumb-bar span {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
body.caviar-ihoc-page .caviar-breadcrumb-bar a span,
body.caviar-ihoc-page .caviar-breadcrumb-bar > div > div > span:not(.text-\[oklch\(0\.30_0\.01_285\)\]) {
  color: oklch(0.55 0.01 285) !important;
  transition: color 0.2s;
}
body.caviar-ihoc-page .caviar-breadcrumb-bar a:hover span,
body.caviar-ihoc-page .caviar-breadcrumb-bar a span:hover {
  color: oklch(0.65 0.09 75) !important;
}
body.caviar-ihoc-page .caviar-breadcrumb-bar .text-\[oklch\(0\.30_0\.01_285\)\] {
  color: oklch(0.30 0.01 285) !important;
}

/* ---- 1b. Force-apply other IHOC tokens that Divi can override -- */
body.caviar-ihoc-page .bg-\[oklch\(0\.98_0\.005_90\)\] {
  background-color: oklch(0.98 0.005 90) !important;
}
body.caviar-ihoc-page .border-\[oklch\(0\.92_0\.004_85\)\] {
  border-color: oklch(0.92 0.004 85) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.55_0\.01_285\)\] {
  color: oklch(0.55 0.01 285) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.30_0\.01_285\)\] {
  color: oklch(0.30 0.01 285) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.22_0\.005_285\)\] {
  color: oklch(0.22 0.005 285) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.40_0\.005_285\)\] {
  color: oklch(0.40 0.005 285) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.50_0\.01_285\)\] {
  color: oklch(0.50 0.01 285) !important;
}
body.caviar-ihoc-page .hover\:text-\[oklch\(0\.65_0\.09_75\)\]:hover {
  color: oklch(0.65 0.09 75) !important;
}
body.caviar-ihoc-page .text-\[oklch\(0\.65_0\.09_75\)\] {
  color: oklch(0.65 0.09 75) !important;
}
body.caviar-ihoc-page .border-\[oklch\(0\.88_0\.008_85\)\] {
  border-color: oklch(0.88 0.008 85) !important;
}

/* ---- 2. WooCommerce product tabs ------------------------------ *
 * WC outputs:
 *   <div class="woocommerce-tabs wc-tabs-wrapper">
 *     <ul class="tabs wc-tabs">
 *       <li class="description_tab"><a href="#tab-description">…</a></li>
 *       …
 *     </ul>
 *     <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description panel" id="tab-description">…</div>
 *     …
 *   </div>
 *
 * Tailwind preflight strips list bullets + padding, leaving the
 * tabs as a vertical stack of underlined links. We restyle them
 * into IHOC' horizontal border-b-2 row.
 */
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-tabs {
  font-family: "DM Sans", sans-serif;
}

/* Strip the box that WC + Divi parent paint around the tabs section
 * (border on outer wrapper, background fill, rounded corners). User
 * wants a flat tabs row with content directly underneath, no card. */
body.caviar-ihoc-page .caviar-tabs-wrap,
body.caviar-ihoc-page .caviar-tabs-wrap > div,
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-tabs,
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel,
body.caviar-ihoc-page .caviar-tabs-wrap .panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Some Divi/WC stacks put a stone line via ::before / ::after on the
 * tabs nav. Wipe those too. */
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs::before,
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs::after {
  display: none !important;
  content: none !important;
}

/* The tab panel renders a duplicate <h2>Description</h2> at the top
 * of each panel, but the tab button already shows the title. Hide. */
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel > h2:first-child,
body.caviar-ihoc-page .caviar-tabs-wrap .panel > h2:first-child {
  display: none !important;
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid oklch(0.88 0.008 85);
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li::before,
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li::after {
  display: none;
  content: none;
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li a {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: oklch(0.50 0.01 285);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li a:hover {
  color: oklch(0.65 0.09 75);
}
body.caviar-ihoc-page .caviar-tabs-wrap ul.tabs.wc-tabs li.active a {
  color: oklch(0.22 0.005 285);
  border-bottom-color: oklch(0.65 0.09 75);
  font-weight: 600;
}
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel,
body.caviar-ihoc-page .caviar-tabs-wrap .panel {
  padding: 1.5rem 0 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: oklch(0.40 0.005 285) !important;
}
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel p,
body.caviar-ihoc-page .caviar-tabs-wrap .panel p {
  margin: 0 0 1rem !important;
  line-height: 1.7;
}
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel p:last-child,
body.caviar-ihoc-page .caviar-tabs-wrap .panel p:last-child {
  margin-bottom: 0 !important;
}
body.caviar-ihoc-page .caviar-tabs-wrap .woocommerce-Tabs-panel h2,
body.caviar-ihoc-page .caviar-tabs-wrap .panel h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: oklch(0.22 0.005 285);
  margin: 0 0 0.75rem;
}

/* ---- 3. Reviews block (comments_template / Elfsight slot) ----- */
body.caviar-ihoc-page .caviar-reviews-wrap {
  font-family: "DM Sans", sans-serif;
  /* v3.19.57/58: was margin-top 3.5rem + padding-top 3rem. The margin sat
   * OUTSIDE the wrap so the body's off-white showed through that 56px gap;
   * v3.19.57 rolled the whole thing into padding-top 6.5rem to extend the
   * white surface, but that made the gap visibly too large. v3.19.58 keeps
   * the white surface (no margin) but matches padding-bottom (3rem) for the
   * symmetric "even padding" the user originally requested — the hero's own
   * padding-bottom (~40px) already provides separation between sections. */
  margin-top: 0 !important;
  padding-top: 3rem !important;
  /* v3.19.54: match the product description / hero white background and add
   * even bottom padding (mirrors padding-top) so the section breathes
   * before the "You May Also Like" strip below. */
  padding-bottom: 3rem !important;
  background: #fff !important;
  /* v3.19.55: extend the white background to the FULL VIEWPORT WIDTH (the
   * wrap itself is constrained to max-w-1280, so the body's off-white
   * showed on the left/right of the section). Same trick as
   * .caviar-product-hero — a position:absolute ::before centered at 50% with
   * width:100vw and z-index:-1, contained by `isolation:isolate`. */
  position: relative !important;
  isolation: isolate;
  /* v3.19.53: force a new block formatting context (flow-root) so the
   * <ol> list of reviews is properly contained inside the wrap. */
  display: flow-root !important;
  min-height: auto !important;
}
body.caviar-ihoc-page .caviar-reviews-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background-color: #fff;
  z-index: -1;
}
body.caviar-ihoc-page .caviar-reviews-wrap .caviar-reviews-heading {
  font-family: "DM Sans", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: oklch(0.22 0.005 285) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  margin: 0 0 1.25rem !important;
}

/* "You May Also Like" — fixed 36px, margin 0 0 32px, never uppercase. */
body.caviar-ihoc-page .caviar-related-wrap .section-heading {
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 0 0 32px !important;
  color: oklch(0.22 0.005 285) !important;
}

/* ---- Related-products card polish (IHOC 3-col layout) -------- */
/* Card background — IHOC' .product-card already sets white but Divi
 * parent sometimes paints transparent over it. Force. Also flex-column
 * so the Add-to-Cart button can stick to the bottom (margin-top: auto)
 * even when cards have different content heights (varying location
 * labels, multi-line titles, etc.). */
body.caviar-ihoc-page .caviar-related-wrap .product-card {
  background: #fff !important;
  background-color: #fff !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.caviar-ihoc-page .caviar-related-wrap .product-card > .p-4 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.caviar-ihoc-page .caviar-related-wrap .product-card .caviar-related-cart-btn {
  margin-top: auto !important;
}

/* Title is NOT all caps regardless of any global heading text-transform. */
body.caviar-ihoc-page .caviar-related-wrap .caviar-related-title {
  text-transform: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: oklch(0.22 0.005 285) !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
/* Origin label above the title — IHOC gold, uppercase, wide tracking. */
body.caviar-ihoc-page .caviar-related-wrap .section-label {
  display: block !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  color: oklch(0.65 0.09 75) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.25rem !important;
}
/* Star icons fixed at gold fill — Divi parent's svg color reset can
 * otherwise paint them grey. */
body.caviar-ihoc-page .caviar-related-wrap .lucide-star {
  fill: oklch(0.65 0.09 75) !important;
  stroke: oklch(0.65 0.09 75) !important;
}
body.caviar-ihoc-page .caviar-related-wrap .caviar-related-title:hover {
  color: oklch(0.65 0.09 75) !important;
}
/* Image area: subtle hover zoom is handled by IHOC class group-hover. */
body.caviar-ihoc-page .caviar-related-wrap .product-card .p-4 {
  padding: 1rem !important;
}

/* Badges (Best Seller, Limited Availability) — IHOC tokens forced. */
body.caviar-ihoc-page .badge-bestseller,
body.caviar-ihoc-page .badge-limited,
body.caviar-ihoc-page .badge-new {
  display: inline-block !important;
  padding: 0.25rem 0.55rem !important;
  border: 0 !important;
  border-radius: 0 !important; /* v3.19.46: square badge corners, no rounding */
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #fff !important;
}
body.caviar-ihoc-page .badge-bestseller {
  background-color: #051a36 !important;
}
body.caviar-ihoc-page .badge-limited {
  background-color: #af874d !important;
}
body.caviar-ihoc-page .badge-new {
  background-color: #107823 !important;
}
body.caviar-ihoc-page .badge-sale {
  display: inline-block !important;
  padding: 0.25rem 0.55rem !important;
  border: 0 !important;
  border-radius: 0 !important; /* v3.19.46: square badge corners, no rounding */
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: #fff !important;
  background-color: oklch(0.55 0.18 25) !important; /* red */
}

/* ---- Shop archive page hero (above breadcrumb-bottom border) -- *
 * Force white background + centered alignment for every child of the
 * inner container. Tailwind's `text-center` should center text-level
 * descendants by inheritance, but Divi parent ships rules like
 * `body.archive h1 { text-align: left }` that win without an override.
 */
body.caviar-ihoc-page .caviar-shop-hero {
  background-color: #fff !important;
  text-align: center;
}
body.caviar-ihoc-page .caviar-shop-hero,
body.caviar-ihoc-page .caviar-shop-hero > div,
body.caviar-ihoc-page .caviar-shop-hero > div > * {
  text-align: center !important;
}
body.caviar-ihoc-page .caviar-shop-hero .section-label,
body.caviar-ihoc-page .caviar-shop-hero .section-heading,
body.caviar-ihoc-page .caviar-shop-hero .gold-divider,
body.caviar-ihoc-page .caviar-shop-hero p {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Shop archive toolbar ------------------------------------- *
 * Layout (top-down, full container width 1280px):
 *   1. filter row — six expandable category panels, side-by-side
 *   2. divider + result count beneath
 *   3. grid wrapper (with vertical padding)
 *   4. grid (4-col on desktop) — cards
 *   5. pagination
 */

/* Filter row — flex container that wraps the six <details> panels.
 * Top padding gives breathing room above the buttons; bottom margin
 * spaces the row from the divider/result count beneath. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-top: 1.5rem;
  font-family: "DM Sans", sans-serif;
}

/* Each panel — flexes evenly so summaries align in a row. The
 * <details> element is the positioning anchor; the options panel
 * absolutely positions beneath the summary. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 160px;
}

/* Summary — pill-style filter button, white bg with stone border. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  border-radius: 0;
  cursor: pointer;
  list-style: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: oklch(0.22 0.005 285);
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.15s, color 0.15s;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary::-webkit-details-marker {
  display: none;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary::marker {
  content: "";
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary:hover,
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-panel[open] > .caviar-shop-filter-summary {
  border-color: oklch(0.65 0.09 75);
  color: oklch(0.22 0.005 285);
  outline: none;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary:focus-visible {
  outline: 2px solid oklch(0.65 0.09 75);
  outline-offset: 2px;
}

body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Chevron — rotates 180° when the panel is open. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: oklch(0.40 0.005 285);
  transition: transform 0.2s ease;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-summary-icon svg {
  width: 100%;
  height: 100%;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-panel[open] > .caviar-shop-filter-summary .caviar-shop-filter-summary-icon {
  transform: rotate(180deg);
}

/* Options panel — appears beneath the summary, white card with
 * stone border. Positioned absolutely so it doesn't push the row
 * (matches the reference where the panel hangs over the divider). */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-options {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid oklch(0.65 0.09 75);
  border-top: 1px solid oklch(0.88 0.008 85);
  padding: 0.5rem 0;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.18);
}

/* Each option row — <a> tag styled as a checkable radio row.
 * Native link handles navigation; the radio circle is purely visual. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: oklch(0.30 0.01 285);
  transition: background-color 0.15s, color 0.15s;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option:hover,
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option:focus {
  background-color: oklch(0.98 0.005 90);
  color: oklch(0.22 0.005 285);
  text-decoration: none;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option-radio {
  display: inline-flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 1px solid oklch(0.70 0.008 85);
  border-radius: 9999px;
  background: #fff;
  position: relative;
  transition: border-color 0.15s;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: oklch(0.65 0.09 75);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option.is-selected .caviar-shop-filter-option-radio {
  border-color: oklch(0.65 0.09 75);
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option.is-selected .caviar-shop-filter-option-radio::after {
  transform: translate(-50%, -50%) scale(1);
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option:focus-visible {
  outline: 2px solid oklch(0.65 0.09 75);
  outline-offset: -2px;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-filter-option-label {
  flex: 1 1 auto;
  font-family: "DM Sans", sans-serif;
}

/* Toolbar row beneath the filter — divider above, result count left. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0.875rem 0 0;
  border-top: 1px solid oklch(0.88 0.008 85);
  font-family: "DM Sans", sans-serif;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-result-count {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: oklch(0.50 0.01 285);
  text-align: left;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-result-count .woocommerce-result-count {
  margin: 0;
}

/* Hide WC's "Default sorting" dropdown — user wants it suppressed. */
body.caviar-ihoc-page .caviar-ihoc-shop .woocommerce-ordering {
  display: none !important;
}

/* Grid wrap — vertical padding so cards don't crowd the row above/below. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-grid-wrap {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-grid-wrap > .grid {
  width: 100%;
}

/* Pagination — extra bottom space so the section doesn't end flush
 * against the page numbers / next-prev links. */
body.caviar-ihoc-page .caviar-ihoc-shop .woocommerce-pagination {
  margin-bottom: 2rem;
}

/* Section bottom padding — explicit so filtered category pages (which
 * may not render pagination) end with the same breathing room below
 * the grid as the main /shop/ page does. Scoped on .caviar-ihoc-shop
 * directly (no body class) for category pages that bypass body_class. */
.caviar-ihoc-shop > section.py-12,
.caviar-ihoc-shop > section {
  padding-bottom: 5rem !important;
}
.caviar-ihoc-shop .caviar-shop-grid-wrap {
  padding-bottom: 2rem !important;
}

/* ---- Shop archive card tweaks ---- */
/* Make shop cards flex-column so the cart button sticks to the bottom
 * even when card titles wrap to different heights. (Same trick as the
 * related-products card.) */
/* Shop card — strictly match the related-products card style. White
 * background, flex-column for button alignment, p-4 inner padding. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card,
body.caviar-ihoc-page .caviar-ihoc-shop .product-card {
  background: #fff !important;
  background-color: #fff !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Card image — fill the square frame regardless of source aspect
 * ratio. Works around any parent theme rule resetting object-fit. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card-image-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Product-page main image — same cover-fill behavior so non-1:1
 * source images crop to the square hero frame instead of letterboxing
 * with whitespace. */
body.caviar-ihoc-page .caviar-product-hero .aspect-square > img,
body.caviar-ihoc-page .caviar-product-hero .aspect-square img.w-full {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card > .p-4,
body.caviar-ihoc-page .caviar-ihoc-shop .product-card > .p-4 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem !important;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card .caviar-shop-cart-btn,
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-card .caviar-related-cart-btn {
  margin-top: auto !important;
}

/* Title inside shop cards — match related card: DM Sans, 0.95rem,
 * NEVER uppercase regardless of any global heading rules. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-related-title {
  text-transform: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: oklch(0.22 0.005 285) !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.25rem !important;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-related-title:hover {
  color: oklch(0.65 0.09 75) !important;
}

/* Origin label inside shop cards — same gold-uppercase tokens as the
 * related card, with explicit margin-top so the label gets visible
 * breathing room below the product image. */
body.caviar-ihoc-page .caviar-ihoc-shop .product-card .section-label {
  display: block !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  color: oklch(0.65 0.09 75) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.4rem !important;
}

/* Star icons same gold fill as related card. */
body.caviar-ihoc-page .caviar-ihoc-shop .product-card .lucide-star {
  fill: oklch(0.65 0.09 75) !important;
  stroke: oklch(0.65 0.09 75) !important;
}

/* Full-width size dropdown above the Add-to-Cart button, replacing the
 * WC + Variation Swatches pills on the shop archive. Same IHOC token
 * vocabulary as the toolbar dropdown. */
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-size-select {
  display: block;
  width: 100%;
  padding: 0.7rem 2.25rem 0.7rem 0.85rem;
  margin: 0 0 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: oklch(0.22 0.005 285);
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351504e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-size-select:hover,
body.caviar-ihoc-page .caviar-ihoc-shop .caviar-shop-size-select:focus {
  border-color: oklch(0.65 0.09 75);
  outline: none;
}

/* Add-to-Cart button on the related card: navy + cart icon, like the
 * main product page button. Uses `currentColor` so the inline SVG
 * stroke inherits white from the button text color. */
/* Higher specificity (.caviar-related-wrap is a wrapping ancestor) so we
 * beat WC's `.woocommerce a.button` rule. Individual padding-top /
 * padding-bottom so any shorthand override or browser default can't drop
 * just the vertical part. */
/* Navy cart button — scoped to the .caviar-ihoc-shop / .caviar-related-wrap
 * containers WITHOUT requiring the body class. On some category pages
 * Divi Theme Builder renders without the body class but still emits
 * our shop-card markup, so body-class-scoped rules don't match. */
.caviar-related-wrap a.caviar-related-cart-btn,
.caviar-related-wrap .caviar-related-cart-btn,
.caviar-ihoc-shop a.caviar-related-cart-btn,
.caviar-ihoc-shop .caviar-related-cart-btn,
.caviar-ihoc-shop a.caviar-shop-cart-btn,
.caviar-ihoc-shop .caviar-shop-cart-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  width: 100%;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
  background: oklch(0.22 0.06 255) !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  transition: background 0.25s ease;
}
.caviar-related-wrap a.caviar-related-cart-btn:hover,
.caviar-related-wrap .caviar-related-cart-btn:hover,
.caviar-related-wrap a.caviar-related-cart-btn:focus,
.caviar-related-wrap a.caviar-related-cart-btn:active,
.caviar-ihoc-shop a.caviar-shop-cart-btn:hover,
.caviar-ihoc-shop .caviar-shop-cart-btn:hover,
.caviar-ihoc-shop a.caviar-shop-cart-btn:focus,
.caviar-ihoc-shop a.caviar-shop-cart-btn:active {
  background: oklch(0.30 0.07 255) !important;
  color: #fff !important;
  /* Repeat padding/border on hover/focus/active so Divi parent's
   * .button:hover { padding: ... } can't shrink the button and cause
   * the text to flicker mid-transition. */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 0.9rem !important;
  padding-right: 0.9rem !important;
  border: 0 !important;
  line-height: 1 !important;
  min-height: 0 !important;
  transform: none !important;
}
.caviar-related-cart-btn svg,
.caviar-ihoc-shop .caviar-shop-cart-btn svg {
  flex-shrink: 0;
  display: inline-block !important;
}
/* Hide WC's auto-generated "N reviews for product" title so we don't
 * double up on the heading our caviar-reviews-heading provides. */
body.caviar-ihoc-page .caviar-reviews-wrap .woocommerce-Reviews-title {
  display: none !important;
}

/* ---- Heading font: force DM Sans across the IHOC page ---------- *
 * Divi parent's "Header Font" setting is winning over the IHOC CSS
 * bundle for any heading that doesn't have an inline `font-family`
 * style attribute. Force DM Sans in our scoped contexts.
 *
 * The product H1 already has inline DM Sans via IHOC' export; this
 * sweeps up the other ones (Customer Reviews, You May Also Like, tab
 * panel headings pulled from the product description, etc.).
 */
body.caviar-ihoc-page .caviar-product-hero h1,
body.caviar-ihoc-page .caviar-product-hero h2,
body.caviar-ihoc-page .caviar-product-hero h3,
body.caviar-ihoc-page .caviar-product-hero h4,
body.caviar-ihoc-page .caviar-tabs-wrap h1,
body.caviar-ihoc-page .caviar-tabs-wrap h2,
body.caviar-ihoc-page .caviar-tabs-wrap h3,
body.caviar-ihoc-page .caviar-tabs-wrap h4,
body.caviar-ihoc-page .caviar-tabs-wrap .panel h1,
body.caviar-ihoc-page .caviar-tabs-wrap .panel h2,
body.caviar-ihoc-page .caviar-tabs-wrap .panel h3,
body.caviar-ihoc-page .caviar-reviews-wrap h1,
body.caviar-ihoc-page .caviar-reviews-wrap h2,
body.caviar-ihoc-page .caviar-reviews-wrap h3,
body.caviar-ihoc-page .caviar-related-wrap h1,
body.caviar-ihoc-page .caviar-related-wrap h2,
body.caviar-ihoc-page .caviar-related-wrap h3,
body.caviar-ihoc-page .section-heading,
body.caviar-ihoc-page .section-label {
  font-family: "DM Sans", sans-serif !important;
}

/* ---- 4. WC variation form (Variation Swatches plugin) --------- *
 * The plugin renders the size selector as:
 *   <table class="variations">
 *     <tr>
 *       <th class="label"><label>Select Size</label></th>
 *       <td class="value">
 *         <ul class="button-variable-items-wrapper wvs-style-squared">
 *           <li class="variable-item button-variable-item …">…</li>
 *           <li class="… selected">…</li>
 *         </ul>
 *         <a class="reset_variations">Clear</a>
 *       </td>
 *     </tr>
 *   </table>
 *   <div class="single_variation_wrap">
 *     <div class="woocommerce-variation single_variation"><span class="price">…</span></div>
 *     <div class="woocommerce-variation-add-to-cart">
 *       <div class="quantity"><input class="qty" …></div>
 *       <button class="single_add_to_cart_button">…</button>
 *     </div>
 *   </div>
 *
 * We flatten the table to block-level wrappers and style each element
 * to match IHOC' pill row + quantity stepper + gold CTA.
 * ----------------------------------------------------------------- */

/* Flatten the table */
body.caviar-ihoc-page .caviar-add-to-cart-wrap form.variations_form {
  display: block;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations,
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations tbody,
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations tr,
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations td,
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations th {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: auto;
  text-align: left;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations {
  margin: 0 0 1rem;
}

/* "Select Size" label */
body.caviar-ihoc-page .caviar-add-to-cart-wrap th.label,
body.caviar-ihoc-page .caviar-add-to-cart-wrap th.label label {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(0.40 0.005 285);
  margin: 0 0 0.5rem;
  padding: 0;
}

/* Pill row */
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Individual pill — override plugin defaults */
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0.65rem 1.1rem !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #fff !important;
  border: 1px solid oklch(0.88 0.008 85) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: oklch(0.30 0.01 285) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item .variable-item-contents,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item .variable-item-contents {
  display: contents;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item .variable-item-span,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item .variable-item-span {
  font-weight: 600;
  line-height: 1.2;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item:hover,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item:hover {
  border-color: oklch(0.65 0.09 75) !important;
  color: oklch(0.22 0.005 285) !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item.selected,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item.selected {
  background: oklch(0.22 0.06 255) !important;
  border-color: oklch(0.22 0.06 255) !important;
  color: #fff !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item.disabled,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* "Clear" link */
body.caviar-ihoc-page .caviar-add-to-cart-wrap a.reset_variations {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: oklch(0.55 0.01 285);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap a.reset_variations:hover {
  color: oklch(0.65 0.09 75);
}

/* Selected-variation price line — price + per-gram sit side by side.
 * Equal 1.25rem margin above and below so the gap from the size
 * pills to the price equals the gap from the price to the qty/cart
 * row. The variations table's own bottom margin is zeroed below so
 * we don't double up. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap table.variations {
  margin-bottom: 0 !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_variation_wrap {
  margin-top: 1.25rem !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation.single_variation,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.25rem;
  margin: 0 0 1.25rem !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation.single_variation .price,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation .woocommerce-variation-price .price {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: oklch(0.22 0.005 285);
  margin: 0;
  line-height: 1.2;
}

/* Quantity input + Add-to-Cart row */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity {
  display: inline-block;
  margin: 0;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity input.qty,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity input[type="number"] {
  width: 5rem;
  padding: 0.85rem 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: oklch(0.22 0.005 285);
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  border-radius: 0;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
  appearance: textfield;
  height: auto;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity input.qty:focus {
  border-color: oklch(0.65 0.09 75);
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity input.qty::-webkit-outer-spin-button,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add-to-cart button — navy with lighter-navy hover, matched to qty
 * stepper height (3.25rem). */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button {
  background: oklch(0.22 0.06 255) !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1.05rem 1.6rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 3.25rem !important;
  cursor: pointer;
  transition: background 0.25s ease !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button:hover {
  background: oklch(0.30 0.07 255) !important;
}
/* Match qty stepper to the button's height so they sit even on the row. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity.caviar-qty-stepped {
  height: 3.25rem;
  min-height: 3.25rem;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button.disabled,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Add to Cart button: full-width within the qty + cart flex row, with
 * a leading shopping-cart icon (lucide-shopping-cart inline SVG). */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woocommerce-variation-add-to-cart {
  align-items: center;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* Selected variation indicator appended to the "Select Size" label
 * by ihoc-product.js — displays as ": 30 g" next to the label. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-selected-attr {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: oklch(0.30 0.01 285);
  margin-left: 0.25em;
}

/* Variation Swatches plugin auto-appends its own
 * <span class="woo-selected-variation-item-name">: 100 g</span> after each
 * th.label's <label>. Use that as the live "Select Size : value" header,
 * prepend "Select Size" via ::before, and hide our own JS-appended
 * .caviar-selected-attr label so we don't show the same info twice.
 */
body.caviar-ihoc-page .caviar-add-to-cart-wrap th.label > label {
  display: none !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woo-selected-variation-item-name {
  display: block !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: oklch(0.40 0.005 285) !important;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .woo-selected-variation-item-name::before {
  content: "Select Size";
}

/* ---- Right-column hero polish --------------------------------- */

/* "Best Seller" badge — even padding all around. The trailing
 * letter-spacing was making the right edge feel cramped, so the
 * right padding gets a small bump to compensate visually. */
body.caviar-ihoc-page .caviar-product-hero .badge-bestseller {
  display: inline-block !important;
  padding: 0.4rem 0.7rem 0.4rem 0.7rem !important;
  background-color: oklch(0.22 0.06 255) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important; /* v3.19.46: square badge corners, no rounding */
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Force breathing room below the badge wrapper so origin label has
 * space above it (Tailwind .mb-3 utility doesn't always make it
 * through the bundle on every page). */
body.caviar-ihoc-page .caviar-product-hero .mb-3:has(.badge-bestseller) {
  margin-bottom: 1rem !important;
}

/* Origin label ("Veneto, Italy") — explicit top + bottom margin so
 * it never collapses against the badge above or the H1 below. */
body.caviar-ihoc-page .caviar-product-hero .section-label {
  margin-top: 0 !important;
  margin-bottom: 0.6rem !important;
}

/* Product title — Divi parent + WC sometimes uppercase product
 * titles; force mixed-case + small top margin so it doesn't sit
 * flush against the origin label. */
body.caviar-ihoc-page .caviar-product-hero h1 {
  text-transform: none !important;
  margin-top: 0.25rem !important;
}

/* Extra breathing room below the rating block. */
body.caviar-ihoc-page .caviar-product-hero h1 + .mb-4 {
  margin-bottom: 1.25rem !important;
}

/* Divider line below product description (empty .border-t element).
 * Stone color matches IHOC' rendered style; the extra margin below
 * gives the Select Size row breathing room. */
body.caviar-ihoc-page .caviar-product-hero .border-t {
  border-top: 1px solid oklch(0.92 0.004 85) !important;
  margin-bottom: 2rem !important;
  height: 0 !important;
}

/* Trust badges: gap between qty/cart row and the trust grid, plus
 * border + padding + gold svg + tight paragraph spacing in each card. */
body.caviar-ihoc-page .caviar-product-hero .grid.grid-cols-3.gap-3.mt-5 {
  margin-top: 1.75rem !important;
}
body.caviar-ihoc-page .caviar-product-hero .grid.grid-cols-3.gap-3.mt-5 > div {
  border: 1px solid oklch(0.92 0.004 85) !important;
  padding: 0.85rem 0.75rem !important;
  background: transparent !important;
}
body.caviar-ihoc-page .caviar-product-hero .grid.grid-cols-3.gap-3.mt-5 > div svg {
  display: block !important;
  margin: 0 auto 0.5rem !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  color: oklch(0.65 0.09 75) !important;
  stroke: currentColor !important;
}
body.caviar-ihoc-page .caviar-product-hero .grid.grid-cols-3.gap-3.mt-5 > div p {
  margin: 0 !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
}
body.caviar-ihoc-page .caviar-product-hero .grid.grid-cols-3.gap-3.mt-5 > div p + p {
  margin-top: 0.1rem !important;
}

/* ---- 4a. Per-gram labels (injected by ihoc-product.js) ------- */
/* Inside each pill */
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item .caviar-pg,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item .caviar-pg {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: oklch(0.65 0.09 75);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
  line-height: 1.1;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item.selected .caviar-pg,
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item.selected .caviar-pg {
  color: oklch(0.78 0.07 75);
}
/* Stack the size and per-gram vertically inside each pill */
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.variable-items-wrapper li.variable-item:has(.caviar-pg),
body.caviar-ihoc-page .caviar-add-to-cart-wrap ul.button-variable-items-wrapper li.variable-item:has(.caviar-pg) {
  flex-direction: column;
  padding: 0.55rem 1rem 0.6rem !important;
  align-items: center;
  text-align: center;
}

/* Next to the variation price ($110.00  $3.67/g) — flex parent above
 * handles the alignment, so we just style the text itself.
 */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-selected-pg {
  display: inline-block;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: oklch(0.65 0.09 75);
  line-height: 1.2;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-selected-pg:empty {
  display: none;
}

/* ---- 4b. Quantity stepper (injected by ihoc-product.js) ------ */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity.caviar-qty-stepped {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid oklch(0.88 0.008 85);
  background: #fff;
  transition: border-color 0.15s;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity.caviar-qty-stepped:focus-within {
  border-color: oklch(0.65 0.09 75);
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity.caviar-qty-stepped input.qty,
body.caviar-ihoc-page .caviar-add-to-cart-wrap .quantity.caviar-qty-stepped input[type="number"] {
  border: 0 !important;
  width: 3.5rem !important;
  padding: 0.6rem 0.25rem !important;
  text-align: center;
  background: transparent;
  outline: 0;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-qty-btn {
  width: 2.4rem;
  background: #fff;
  border: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: oklch(0.30 0.01 285);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
  user-select: none;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-qty-btn.caviar-qty-minus {
  border-right: 1px solid oklch(0.88 0.008 85);
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-qty-btn.caviar-qty-plus {
  border-left: 1px solid oklch(0.88 0.008 85);
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-qty-btn:hover {
  background: oklch(0.65 0.09 75);
  color: #fff;
}
body.caviar-ihoc-page .caviar-add-to-cart-wrap .caviar-qty-btn:active {
  background: oklch(0.78 0.07 75);
}

/* =================================================================
   IHOC arbitrary OKLCH classes — generated supplement.

   When IHOC compiled their Tailwind v4 bundle, the arbitrary-value
   utilities like `bg-[oklch(0.98_0.005_90)]` were purged because
   their build scanner did not detect them in the source. Our PHP
   templates do use them, so we regenerate the rules here.
   ================================================================= */

.bg-\[oklch\(0\.08_0\.04_255\/0\)\] { background-color: oklch(0.08 0.04 255/0); }
.bg-\[oklch\(0\.08_0\.04_255\/0\.55\)\] { background-color: oklch(0.08 0.04 255/0.55); }
.bg-\[oklch\(0\.18_0\.05_255\)\] { background-color: oklch(0.18 0.05 255); }
.bg-\[oklch\(0\.22_0\.06_255\)\] { background-color: oklch(0.22 0.06 255); }
.bg-\[oklch\(0\.22_0\.06_255\/0\.08\)\] { background-color: oklch(0.22 0.06 255/0.08); }
.bg-\[oklch\(0\.50_0\.15_145\)\] { background-color: oklch(0.50 0.15 145); }
.bg-\[oklch\(0\.65_0\.09_75\)\] { background-color: oklch(0.65 0.09 75); }
.bg-\[oklch\(0\.65_0\.09_75\/0\.15\)\] { background-color: oklch(0.65 0.09 75/0.15); }
.bg-\[oklch\(0\.88_0\.008_85\)\] { background-color: oklch(0.88 0.008 85); }
.bg-\[oklch\(0\.95_0\.03_145\)\] { background-color: oklch(0.95 0.03 145); }
.bg-\[oklch\(0\.96_0\.008_85\)\] { background-color: oklch(0.96 0.008 85); }
.bg-\[oklch\(0\.98_0\.005_90\)\] { background-color: oklch(0.98 0.005 90); }
.border-\[oklch\(0\.65_0\.09_75\)\] { border-color: oklch(0.65 0.09 75); }
.border-\[oklch\(0\.65_0\.09_75\/0\.25\)\] { border-color: oklch(0.65 0.09 75/0.25); }
.border-\[oklch\(0\.65_0\.09_75\/0\.3\)\] { border-color: oklch(0.65 0.09 75/0.3); }
.border-\[oklch\(0\.65_0\.09_75\/0\.4\)\] { border-color: oklch(0.65 0.09 75/0.4); }
.border-\[oklch\(0\.88_0\.008_85\)\] { border-color: oklch(0.88 0.008 85); }
.border-\[oklch\(0\.92_0\.004_85\)\] { border-color: oklch(0.92 0.004 85); }
.divide-\[oklch\(0\.88_0\.008_85\)\] > :not(:last-child) { border-color: oklch(0.88 0.008 85); }
.from-\[oklch\(0\.08_0\.04_255\/0\.6\)\] { --tw-gradient-from: oklch(0.08 0.04 255/0.6);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-\[oklch\(0\.08_0\.04_255\/0\.80\)\] { --tw-gradient-from: oklch(0.08 0.04 255/0.80);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-\[oklch\(0\.08_0\.04_255\/0\.85\)\] { --tw-gradient-from: oklch(0.08 0.04 255/0.85);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-\[oklch\(0\.08_0\.04_255\/0\.88\)\] { --tw-gradient-from: oklch(0.08 0.04 255/0.88);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from), var(--tw-gradient-to)); }
.group:hover .group-hover\:bg-\[oklch\(0\.08_0\.04_255\/0\.25\)\] { background-color: oklch(0.08 0.04 255/0.25); }
.group:hover .group-hover\:bg-\[oklch\(0\.08_0\.04_255\/0\.4\)\] { background-color: oklch(0.08 0.04 255/0.4); }
.group:hover .group-hover\:bg-\[oklch\(0\.08_0\.04_255\/0\.65\)\] { background-color: oklch(0.08 0.04 255/0.65); }
.hover\:border-\[oklch\(0\.65_0\.09_75\)\]:hover { border-color: oklch(0.65 0.09 75); }
.hover\:border-\[oklch\(0\.88_0\.008_85\)\]:hover { border-color: oklch(0.88 0.008 85); }
.hover\:text-\[oklch\(0\.65_0\.09_75\)\]:hover { color: oklch(0.65 0.09 75); }
.text-\[oklch\(0\.22_0\.005_285\)\] { color: oklch(0.22 0.005 285); }
.text-\[oklch\(0\.22_0\.06_255\)\] { color: oklch(0.22 0.06 255); }
.text-\[oklch\(0\.30_0\.005_285\)\] { color: oklch(0.30 0.005 285); }
.text-\[oklch\(0\.30_0\.01_285\)\] { color: oklch(0.30 0.01 285); }
.text-\[oklch\(0\.40_0\.005_285\)\] { color: oklch(0.40 0.005 285); }
.text-\[oklch\(0\.50_0\.01_285\)\] { color: oklch(0.50 0.01 285); }
.text-\[oklch\(0\.50_0\.15_145\)\] { color: oklch(0.50 0.15 145); }
.text-\[oklch\(0\.55_0\.01_285\)\] { color: oklch(0.55 0.01 285); }
.text-\[oklch\(0\.65_0\.09_75\)\] { color: oklch(0.65 0.09 75); }
.text-\[oklch\(0\.65_0\.09_75\/0\.5\)\] { color: oklch(0.65 0.09 75/0.5); }
.text-\[oklch\(0\.78_0\.07_75\)\] { color: oklch(0.78 0.07 75); }
.text-\[oklch\(0\.88_0\.008_85\)\] { color: oklch(0.88 0.008 85); }
.to-\[oklch\(0\.08_0\.04_255\/0\.20\)\] { --tw-gradient-to: oklch(0.08 0.04 255/0.20);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-from), var(--tw-gradient-to)); }
.via-\[oklch\(0\.08_0\.04_255\/0\.30\)\] { --tw-gradient-via: oklch(0.08 0.04 255/0.30);
  --tw-gradient-via-stops: var(--tw-gradient-from), var(--tw-gradient-via) var(--tw-gradient-via-position, 50%), var(--tw-gradient-to);
  --tw-gradient-stops: var(--tw-gradient-via-stops); }
.via-\[oklch\(0\.08_0\.04_255\/0\.40\)\] { --tw-gradient-via: oklch(0.08 0.04 255/0.40);
  --tw-gradient-via-stops: var(--tw-gradient-from), var(--tw-gradient-via) var(--tw-gradient-via-position, 50%), var(--tw-gradient-to);
  --tw-gradient-stops: var(--tw-gradient-via-stops); }
.via-\[oklch\(0\.08_0\.04_255\/0\.65\)\] { --tw-gradient-via: oklch(0.08 0.04 255/0.65);
  --tw-gradient-via-stops: var(--tw-gradient-from), var(--tw-gradient-via) var(--tw-gradient-via-position, 50%), var(--tw-gradient-to);
  --tw-gradient-stops: var(--tw-gradient-via-stops); }

/* ---- Homepage SEO accordion ---- *
 * Mirrors the shop-archive filter pattern (native <details>/<summary>
 * with a chevron) but stretched full-width and styled for content
 * readability rather than a pill button. */
.caviar-seo-accordion .caviar-seo-subtitle {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: oklch(0.50 0.01 285);
  max-width: 36rem;
  margin: 1rem auto 0;
}
.caviar-seo-accordion .caviar-seo-accordion-list {
  border-top: 1px solid oklch(0.92 0.004 85);
}
.caviar-seo-accordion .caviar-seo-accordion-item {
  border-bottom: 1px solid oklch(0.92 0.004 85);
}
.caviar-seo-accordion .caviar-seo-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: oklch(0.22 0.005 285);
  transition: color 0.15s;
}
.caviar-seo-accordion .caviar-seo-accordion-summary::-webkit-details-marker {
  display: none;
}
.caviar-seo-accordion .caviar-seo-accordion-summary::marker {
  content: "";
}
.caviar-seo-accordion .caviar-seo-accordion-summary:hover {
  color: oklch(0.65 0.09 75);
}
.caviar-seo-accordion .caviar-seo-accordion-summary:focus-visible {
  outline: 2px solid oklch(0.65 0.09 75);
  outline-offset: 2px;
}
.caviar-seo-accordion .caviar-seo-accordion-title {
  flex: 1 1 auto;
  text-align: left;
}
.caviar-seo-accordion .caviar-seo-accordion-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: oklch(0.40 0.005 285);
  transition: transform 0.2s ease, color 0.2s ease;
}
.caviar-seo-accordion .caviar-seo-accordion-icon svg {
  width: 100%;
  height: 100%;
}
.caviar-seo-accordion .caviar-seo-accordion-item[open] > .caviar-seo-accordion-summary .caviar-seo-accordion-icon {
  transform: rotate(180deg);
  color: oklch(0.65 0.09 75);
}
.caviar-seo-accordion .caviar-seo-accordion-item[open] > .caviar-seo-accordion-summary {
  color: oklch(0.22 0.005 285);
}
.caviar-seo-accordion .caviar-seo-accordion-body {
  padding: 0.25rem 0.25rem 1.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: oklch(0.30 0.01 285);
}
.caviar-seo-accordion .caviar-seo-accordion-body p {
  margin: 0 0 1em;
}
.caviar-seo-accordion .caviar-seo-accordion-body p:last-child {
  margin-bottom: 0;
}
.caviar-seo-accordion .caviar-seo-accordion-body a {
  color: oklch(0.65 0.09 75);
  text-decoration: underline;
}
.caviar-seo-accordion .caviar-seo-accordion-body ul,
.caviar-seo-accordion .caviar-seo-accordion-body ol {
  margin: 0 0 1em 1.25em;
}
.caviar-seo-accordion .caviar-seo-accordion-body li {
  margin: 0 0 0.35em;
}

/* ---- Hero section ----
 *
 * Full-bleed background image with a dark navy overlay; text content
 * sits on top, left-aligned, constrained to a max-w-2xl block inside
 * a 1280px centered container. Self-contained — does NOT depend on
 * any Tailwind utility class so the layout can't collapse if the
 * bundle drops a class.
 */
.caviar-hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: oklch(0.18 0.05 255);
}
@media (min-width: 1024px) {
  .caviar-hero { min-height: 65vh; }
}

.caviar-hero .caviar-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.caviar-hero .caviar-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.caviar-hero .caviar-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    oklch(0.08 0.04 255 / 0.85) 0%,
    oklch(0.08 0.04 255 / 0.65) 45%,
    oklch(0.08 0.04 255 / 0.20) 100%
  );
}

.caviar-hero .caviar-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
@media (min-width: 640px) {
  .caviar-hero .caviar-hero-content { padding: 5rem 2rem; }
}
@media (min-width: 1024px) {
  .caviar-hero .caviar-hero-content { padding: 6rem 3rem; }
}
.caviar-hero .caviar-hero-text-inner {
  max-width: 36rem;
}

.caviar-hero .caviar-hero-eyebrow {
  margin: 0 0 1rem;
  color: oklch(0.78 0.07 75);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.caviar-hero .caviar-hero-heading {
  margin: 0 0 1.25rem;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-transform: none !important;
  text-wrap: balance;
}
.caviar-hero .caviar-hero-heading-accent {
  color: oklch(0.78 0.07 75);
}
/* Each heading-line is its own inline-block so the explicit <br>s in
 * markup force the line breaks. `nowrap` is desktop-only — on mobile,
 * 32px text in a ~340px container would otherwise overflow horizontally. */
.caviar-hero .caviar-hero-heading-line {
  display: inline-block;
}
@media (min-width: 640px) {
  .caviar-hero .caviar-hero-heading-line { white-space: nowrap; }
}
.caviar-hero .caviar-hero-sub {
  margin: 0 0 1.75rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  line-height: 1.7;
}

/* Rating row — explicit margin-bottom so the gap to buttons is real
 * regardless of whether mb-8 utility is in the bundle. */
.caviar-hero .caviar-hero-rating {
  display: flex;
  align-items: center;
  /* v3.19.31: allow the stars + rating text to wrap. When the viewport is
   * too narrow to fit "★★★★★  Rated 4.9/5 by 200+ customers across Canada"
   * on one line, the text drops to a new line BELOW the stars instead of
   * cramming/overflowing. The stars span is narrow and always fits line 1. */
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem; /* row-gap col-gap */
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.75);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
}
.caviar-hero .caviar-hero-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  flex-shrink: 0; /* never compress the stars */
}

/* Buttons — self-contained, do not depend on btn-gold utility. */
.caviar-hero .caviar-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.caviar-hero .caviar-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 14px 22px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.caviar-hero .caviar-hero-btn-gold {
  background: oklch(0.65 0.09 75);
  color: #fff;
  border-color: oklch(0.65 0.09 75);
}
.caviar-hero .caviar-hero-btn-gold:hover,
.caviar-hero .caviar-hero-btn-gold:focus {
  background: oklch(0.58 0.10 75);
  border-color: oklch(0.58 0.10 75);
  color: #fff;
}
.caviar-hero .caviar-hero-btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.caviar-hero .caviar-hero-btn-outline:hover,
.caviar-hero .caviar-hero-btn-outline:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: #fff;
  color: #fff;
}

/* ---- Trust badges section ----
 *
 * Manus reference uses Tailwind divide-x / divide-y / arbitrary OKLCH
 * border-color classes which compile fine but get out-bid by Divi
 * parent rules on staging (font-family, text-transform, border-color
 * resets, padding). These rules force the visual to match the saved
 * Manus reference DOM byte-for-byte.
 */
.caviar-trust-bar {
  background: #fff;
  border-top: 1px solid oklch(0.88 0.008 85);
  border-bottom: 1px solid oklch(0.88 0.008 85);
  padding: 0;
}
.caviar-trust-bar > div {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-trust-bar > div { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-trust-bar > div { padding-left: 2rem;   padding-right: 2rem; } }

.caviar-trust-bar > div > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .caviar-trust-bar > div > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Each badge — 1.5rem 1rem padding, centered column. */
.caviar-trust-bar .trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.5rem !important;
  padding: 1.5rem 1rem !important;
  background: transparent !important;
}

/* Column separators — explicit 1px borders on each cell, removed on
 * the right edge. On desktop (4-up), every 4th cell loses its right
 * border + the bottom row loses its bottom border. */
.caviar-trust-bar .trust-badge {
  border-right: 1px solid oklch(0.88 0.008 85);
  border-bottom: 1px solid oklch(0.88 0.008 85);
}
.caviar-trust-bar .trust-badge:nth-child(2n) { border-right: none; }
.caviar-trust-bar .trust-badge:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 1024px) {
  .caviar-trust-bar .trust-badge { border-bottom: none !important; }
  .caviar-trust-bar .trust-badge:nth-child(2n) { border-right: 1px solid oklch(0.88 0.008 85); }
  .caviar-trust-bar .trust-badge:nth-child(4n) { border-right: none; }
}

/* Icon circle — keep the gold-tinted SVG, force the bg circle so a
 * Divi parent rule can't paint it. */
.caviar-trust-bar .trust-badge > div:first-child {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 9999px !important;
  background: oklch(0.96 0.008 85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.25rem !important;
}
.caviar-trust-bar .trust-badge svg {
  color: oklch(0.65 0.09 75) !important;
  stroke: currentColor !important;
}

/* Title — force DM Sans, semibold, navy, NOT uppercase. */
.caviar-trust-bar .trust-badge h3 {
  margin: 0 0 0.25rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: oklch(0.22 0.005 285) !important;
}

/* Description — small, light gray, regular weight. */
.caviar-trust-bar .trust-badge p {
  margin: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  line-height: 1.6 !important;
  color: oklch(0.50 0.01 285) !important;
}

/* ---- "How Your Caviar Is Delivered" 3-step section ----
 *
 * Manus reference uses Tailwind + inline styles; Divi parent overrides
 * heading text-transform / font-family / margin / line-height. These
 * rules pin every visual back to the saved Manus DOM byte-for-byte.
 */
.caviar-how-delivered {
  background: oklch(0.18 0.05 255) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  position: relative;
  overflow: hidden;
}

/* Inner 1280px container */
.caviar-how-delivered > div:nth-child(2) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
}
@media (min-width: 640px)  { .caviar-how-delivered > div:nth-child(2) { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-how-delivered > div:nth-child(2) { padding-left: 2rem;   padding-right: 2rem; } }

/* Header block — eyebrow / heading / divider / subhead */
.caviar-how-delivered .text-center.mb-14 {
  text-align: center;
  margin-bottom: 3.5rem;
}
.caviar-how-delivered .text-center.mb-14 > p:first-child {
  margin: 0 0 0.75rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.caviar-how-delivered h2 {
  margin: 0 0 1rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
.caviar-how-delivered .text-center.mb-14 > div {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto 1rem !important;
}
.caviar-how-delivered .text-center.mb-14 > p:last-child {
  margin: 0 auto !important;
  max-width: 48rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* 3-step grid */
.caviar-how-delivered .grid.grid-cols-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
@media (min-width: 768px) {
  .caviar-how-delivered .grid.grid-cols-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Horizontal connector line between the 3 icons (desktop only) */
.caviar-how-delivered .grid > .hidden {
  display: none !important;
}
@media (min-width: 768px) {
  .caviar-how-delivered .grid > .hidden.md\:block,
  .caviar-how-delivered .grid > .md\:block {
    display: block !important;
    position: absolute;
    top: 3.25rem;
    left: calc(16.67% + 1rem);
    right: calc(16.67% + 1rem);
    height: 1px;
    background: oklch(0.65 0.09 75 / 0.3) !important;
  }
}

/* Each step card */
.caviar-how-delivered .grid > div.relative.flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 1.5rem 2.5rem !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (min-width: 768px) {
  .caviar-how-delivered .grid > div.relative.flex {
    padding: 0 2rem 0 !important;
  }
}

/* Icon block (relative wrap that holds number badge + circle) */
.caviar-how-delivered .grid > div.relative.flex > div.relative {
  position: relative;
  margin: 0 0 1.5rem;
}

/* Number badge — small gold circle with white "1/2/3" */
.caviar-how-delivered .grid > div.relative.flex > div.relative > span {
  position: absolute !important;
  top: -0.5rem !important;
  right: -0.5rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 9999px !important;
  background: oklch(0.65 0.09 75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Icon circle — 4rem with gold border + navy semi-transparent fill */
.caviar-how-delivered .grid > div.relative.flex > div.relative > div {
  width: 4rem !important;
  height: 4rem !important;
  border-radius: 9999px !important;
  border: 1px solid oklch(0.65 0.09 75 / 0.4) !important;
  background: oklch(0.22 0.06 255 / 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.caviar-how-delivered .grid svg.lucide {
  color: oklch(0.65 0.09 75) !important;
  stroke: currentColor !important;
}

/* Step eyebrow above heading */
.caviar-how-delivered .grid > div.relative.flex > p:nth-of-type(1) {
  margin: 0 0 0.25rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Step heading */
.caviar-how-delivered .grid > div.relative.flex > h3 {
  margin: 0 0 0.75rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* Step description */
.caviar-how-delivered .grid > div.relative.flex > p:nth-of-type(2) {
  margin: 0 0 1rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}

/* Highlight box at bottom of each step */
.caviar-how-delivered .grid > div.relative.flex > div.mt-auto {
  margin-top: auto !important;
  border: 1px solid oklch(0.65 0.09 75 / 0.3) !important;
  background: oklch(0.65 0.09 75 / 0.08) !important;
  padding: 0.5rem 0.75rem !important;
  text-align: center !important;
}
.caviar-how-delivered .grid > div.relative.flex > div.mt-auto > p {
  margin: 0 !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Bottom guarantee callout */
.caviar-how-delivered > div:nth-child(2) > div.mt-14 {
  margin-top: 3.5rem !important;
  border: 1px solid oklch(0.65 0.09 75 / 0.25) !important;
  background: oklch(0.65 0.09 75 / 0.06) !important;
  padding: 1.5rem !important;
  text-align: center !important;
}
.caviar-how-delivered > div:nth-child(2) > div.mt-14 > p:first-child {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: "Playfair Display", serif !important;
  font-size: 1rem !important;
  font-style: normal !important; /* v3.19.50: italics removed theme-wide */
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.caviar-how-delivered > div:nth-child(2) > div.mt-14 > p:last-child {
  margin: 0.75rem 0 0 !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}

/* ---- Featured Products section ---- *
 * Lock the section padding/grid in case Divi parent or a missed
 * Tailwind utility collapses the layout. */
#featured-products {
  background: oklch(0.98 0.005 90) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
#featured-products > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { #featured-products > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #featured-products > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

#featured-products .text-center.mb-12 {
  margin-bottom: 3rem;
}
#featured-products .text-center.mb-12 > p:first-child {
  margin: 0 0 0.75rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
#featured-products h2 {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
#featured-products .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto !important;
}
#featured-products .text-center.mb-12 > p:last-child {
  margin: 1rem auto 0 !important;
  max-width: 48rem !important;
  color: oklch(0.50 0.01 285) !important;
}

#featured-products > div > .grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { #featured-products > div > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #featured-products > div > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- IHOC unified product card ---- *
 * Used by Featured Products (homepage), Related Products (single
 * product page), and the Shop archive cards. White card body, p-5
 * inner padding, hover overlay on image, rich variation dropdown,
 * navy Add-to-Cart button. */
.caviar-product-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  position: relative;
  /* Subtle 1px boundary so the card is visually framed even when the
   * image-frame's beige bg matches the surrounding section bg (used
   * to make BEST SELLER / SALE badges read as INSIDE the card instead
   * of floating in the section). Theme-wide (v3.19.14) so cart YMAL,
   * PDP related-products, shop archive, and homepage Featured all
   * share the same card boundary treatment. */
  border: 1px solid var(--caviar-border);
}
.caviar-product-card .caviar-product-card-image-link {
  display: block;
  text-decoration: none;
}
.caviar-product-card .caviar-product-card-image-frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.caviar-product-card .caviar-product-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.5s ease;
}
.caviar-product-card.group:hover .caviar-product-card-image {
  transform: scale(1.05);
}
.caviar-product-card .caviar-product-card-overlay {
  background: oklch(0.08 0.04 255 / 0);
  transition: background 0.3s ease;
}
.caviar-product-card.group:hover .caviar-product-card-overlay {
  background: oklch(0.08 0.04 255 / 0.25);
}
.caviar-product-card.group:hover .caviar-product-card-cta {
  opacity: 1;
}

.caviar-product-card .caviar-product-card-body {
  padding: 1.25rem !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.caviar-product-card .caviar-product-card-origin {
  margin: 0 0 0.25rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.caviar-product-card .caviar-product-card-title {
  margin: 0 0 0.5rem !important;
  text-transform: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: oklch(0.22 0.005 285) !important;
}
.caviar-product-card .caviar-product-card-title:hover {
  color: oklch(0.65 0.09 75) !important;
}
.caviar-product-card .caviar-product-card-rating {
  margin-bottom: 0.75rem;
}
.caviar-product-card .lucide-star {
  fill: oklch(0.65 0.09 75) !important;
  stroke: oklch(0.65 0.09 75) !important;
}
.caviar-product-card .caviar-product-card-desc {
  margin: 0 0 1rem !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ---- Inline size selector (v3.19.34) ---- *
 * Replaces the absolute dropdown panel below. Inline buttons live in normal
 * flow so they can NEVER be clipped by overflow / painted under the footer —
 * the size picker works in every card location (shop, PDP related, cart,
 * homepage). `margin-top:auto` bottom-aligns the size+price+cart group (the
 * foot also has margin-top:auto; the first auto-margin absorbs the slack, so
 * the two sit together at the card bottom). Mirrors the product page's
 * size-button look: bordered, navy-filled when selected. */
.caviar-product-card .caviar-card-sizes {
  margin-top: auto;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 0.4rem;
}
.caviar-product-card .caviar-card-size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 46px;
  padding: 0.35rem 0.25rem;
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  border-radius: 0;
  font-family: "DM Sans", sans-serif;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.caviar-product-card .caviar-card-size-btn-weight {
  font-size: 0.78rem;
  font-weight: 600;
  color: oklch(0.22 0.005 285);
  /* v3.19.42: was white-space:nowrap, which made long variation labels (e.g.
   * "10 gr Italian Beluga" on the grazing-board gift box) overflow the narrow
   * button and overlap its neighbours. Allow wrapping + center so any label
   * length stays inside its button. */
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.caviar-product-card .caviar-card-size-btn-pg {
  font-size: 0.6rem;
  color: oklch(0.50 0.01 285);
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.caviar-product-card .caviar-card-size-btn:hover {
  border-color: oklch(0.65 0.09 75);
}
.caviar-product-card .caviar-card-size-btn.is-selected {
  background: var(--caviar-navy);
  border-color: var(--caviar-navy);
}
.caviar-product-card .caviar-card-size-btn.is-selected .caviar-card-size-btn-weight,
.caviar-product-card .caviar-card-size-btn.is-selected .caviar-card-size-btn-pg {
  color: #fff;
}
/* Gift cards sit on a dark glass background (white body text), so invert the
 * button palette: outline buttons with white text, GOLD fill when selected
 * (navy would vanish on the dark card). Comes after the base rule so it wins
 * on equal specificity. */
.caviar-gift-card .caviar-card-size-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.30);
}
.caviar-gift-card .caviar-card-size-btn-weight { color: #fff; }
.caviar-gift-card .caviar-card-size-btn-pg { color: rgba(255, 255, 255, 0.70); }
.caviar-gift-card .caviar-card-size-btn:hover { border-color: var(--caviar-gold); }
.caviar-gift-card .caviar-card-size-btn.is-selected {
  background: var(--caviar-gold);
  border-color: var(--caviar-gold);
}
.caviar-gift-card .caviar-card-size-btn.is-selected .caviar-card-size-btn-weight,
.caviar-gift-card .caviar-card-size-btn.is-selected .caviar-card-size-btn-pg {
  color: #fff;
}

/* Size picker dropdown — toggle button styled like the Manus button.
 * RETAINED for safety but no longer emitted (superseded by the inline size
 * selector above as of v3.19.34).
 * `margin-top: auto` pins the size selector + price + Add-to-Cart row
 * as a group at the bottom of the card body, so cards with different
 * description lengths still align across the grid. */
.caviar-product-card .caviar-card-size {
  position: relative;
  margin-top: auto;
  margin-bottom: 1rem;
}
.caviar-product-card .caviar-card-size-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  border-radius: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  color: oklch(0.30 0.01 285);
  cursor: pointer;
  transition: border-color 0.15s;
}
.caviar-product-card .caviar-card-size-toggle:hover,
.caviar-product-card .caviar-card-size-toggle[aria-expanded="true"] {
  border-color: oklch(0.65 0.09 75);
  outline: none;
}
.caviar-product-card .caviar-card-size-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.caviar-product-card .caviar-card-size-weight {
  font-weight: 500;
  color: oklch(0.22 0.005 285);
}
.caviar-product-card .caviar-card-size-price {
  color: oklch(0.50 0.01 285);
}
.caviar-product-card .caviar-card-size-extra {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.caviar-product-card .caviar-card-size-per-gram {
  font-size: 0.75rem;
  color: oklch(0.65 0.09 75);
  font-weight: 500;
}
.caviar-product-card .caviar-card-size-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: oklch(0.50 0.01 285);
  transition: transform 0.2s ease;
}
.caviar-product-card .caviar-card-size-toggle[aria-expanded="true"] .caviar-card-size-chevron {
  transform: rotate(180deg);
}

/* Options panel.
 * v3.19.31 — two fixes so the open dropdown shows ALL sizes and isn't
 * cut off:
 *   1. z-index raised + the OPEN card elevated above its siblings (see the
 *      .caviar-product-card:has(...) / :focus-within rule below). The cards
 *      are each `position: relative`, so an earlier card's absolutely-
 *      positioned dropdown was painting UNDER the next card in DOM order —
 *      that's the "cut off by the card below" symptom.
 *   2. max-height cap lifted: was 240px (which truncated the list to ~5
 *      rows with an internal scrollbar). Caviar products only have a handful
 *      of sizes, so show them all; keep a generous viewport-based safety cap
 *      with scroll only as a last resort on very short screens. */
.caviar-product-card .caviar-card-size-options {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid oklch(0.65 0.09 75);
  box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.18);
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
/* Elevate the card whose dropdown is open so its absolutely-positioned
 * options panel paints above sibling cards in the same grid row/below it.
 * :has() covers the JS aria-expanded toggle; :focus-within is the fallback
 * for keyboard/click interaction in browsers without :has(). */
.caviar-product-card:has(.caviar-card-size-toggle[aria-expanded="true"]),
.caviar-product-card:focus-within {
  z-index: 50;
}
/* v3.19.32 — the card-level z-index only orders cards WITHIN their section.
 * When a card sits near the section's bottom edge, the open dropdown
 * overflows past the section and the NEXT section (e.g. the navy footer /
 * trust strip — a later, static, no-z-index DOM sibling) paints OVER it,
 * so the panel is clipped at the section boundary. Lift the ENTIRE
 * card-bearing section above the footer while a dropdown is open. The
 * footer is static with no z-index, so position+z-index here wins. Covers
 * every card location: PDP related, shop archive, homepage Featured. */
body.caviar-ihoc-page .caviar-related-wrap:has(.caviar-card-size-toggle[aria-expanded="true"]),
body.caviar-ihoc-page .caviar-related-wrap:focus-within,
body.caviar-ihoc-page .caviar-ihoc-shop:has(.caviar-card-size-toggle[aria-expanded="true"]),
body.caviar-ihoc-page .caviar-ihoc-shop:focus-within,
body.caviar-ihoc-page #featured-products:has(.caviar-card-size-toggle[aria-expanded="true"]),
body.caviar-ihoc-page #featured-products:focus-within {
  position: relative;
  z-index: 100;
}
.caviar-product-card .caviar-card-size-options[hidden] {
  display: none !important;
}
.caviar-product-card .caviar-card-size-options > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.caviar-product-card .caviar-card-size-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  color: oklch(0.30 0.01 285);
  text-align: left;
  transition: background-color 0.15s;
}
.caviar-product-card .caviar-card-size-option:hover,
.caviar-product-card .caviar-card-size-option:focus-visible {
  background-color: oklch(0.98 0.005 90);
  outline: none;
}
.caviar-product-card .caviar-card-size-option .caviar-card-size-weight {
  flex: 0 0 3rem;
}
.caviar-product-card .caviar-card-size-option .caviar-card-size-price {
  flex: 1 1 auto;
}
.caviar-product-card .caviar-card-size-option .caviar-card-size-per-gram {
  flex: 0 0 auto;
}

/* Bottom row — price (left) + small navy Add-to-Cart (right). */
.caviar-product-card .caviar-product-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.caviar-product-card .caviar-product-card-price {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
  color: oklch(0.22 0.005 285) !important;
  text-transform: none !important;
}
.caviar-product-card .caviar-product-card-price .woocommerce-Price-amount {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.caviar-product-card .caviar-product-card-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.625rem 1rem !important;
  background-color: oklch(0.22 0.06 255) !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.caviar-product-card .caviar-product-card-add:hover,
.caviar-product-card .caviar-product-card-add:focus {
  background-color: oklch(0.30 0.07 255) !important;
  color: #fff !important;
}
.caviar-product-card .caviar-product-card-add svg {
  flex-shrink: 0;
}

/* Hide the per-gram label inside the option list when it's the same
 * as the toggle (already shown there) — keep things tidy. */

/* Padding below the Featured Products grid so the View All Caviar
 * button has space above it. */
#featured-products > div > .grid {
  margin-bottom: 1rem;
}
#featured-products .text-center.mt-10 {
  margin-top: 3rem !important;
}

/* "View cart" link — appears below the price + Add-to-Cart row after
 * a successful AJAX add. Centered, gold underlined link. */
.caviar-product-card .caviar-product-card-view-cart {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.65 0.09 75);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.caviar-product-card .caviar-product-card-view-cart[hidden] {
  display: none !important;
}
.caviar-product-card .caviar-product-card-view-cart:hover,
.caviar-product-card .caviar-product-card-view-cart:focus {
  color: oklch(0.55 0.10 75);
}

/* WC's auto-injected `.added_to_cart` link (and any cart-drawer
 * plugin's equivalent) sits in line with the Add-to-Cart button
 * by default. We render our own centered View Cart below the row,
 * so suppress the in-line one to avoid duplicates. */
.caviar-product-card .added_to_cart,
.caviar-product-card-foot .added_to_cart,
.caviar-product-card-foot a.added_to_cart,
.caviar-product-card .wc-forward {
  display: none !important;
}

/* "View All Caviar" — re-pin .btn-outline-gold styling on the <a>
 * version so Divi parent's anchor rules (color, text-decoration)
 * can't override it. */
#featured-products .text-center.mt-10 a.btn-outline-gold,
a.btn-outline-gold {
  display: inline-block !important;
  padding: 0.75rem 1.75rem !important;
  background-color: transparent !important;
  color: oklch(0.65 0.09 75) !important;
  border: 1px solid oklch(0.65 0.09 75) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
}
#featured-products .text-center.mt-10 a.btn-outline-gold:hover,
a.btn-outline-gold:hover,
a.btn-outline-gold:focus {
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* "VIEW DETAILS" hover pill on the product card image — Divi parent's
 * anchor styles strip the inline styling, so re-pin it here. */
.caviar-product-card .caviar-product-card-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.375rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.caviar-product-card.group:hover .caviar-product-card-cta,
.caviar-product-card:hover .caviar-product-card-cta {
  opacity: 1;
}
.caviar-product-card .caviar-product-card-cta svg {
  width: 0.7rem;
  height: 0.7rem;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Container that holds the pill — make sure flex alignment + bottom
 * padding are explicit (Tailwind classes might be purged). */
.caviar-product-card .caviar-product-card-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}

/* ---- Category Banners section ----
 * 2 large tiles + 3 small tiles. Lock all heading / eyebrow /
 * button / overlay styling so Divi parent + missing Tailwind utilities
 * can't break it. */
.caviar-category-banners {
  background: #fff !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.caviar-category-banners > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-category-banners > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-category-banners > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

/* Top grid — 2 columns at lg, single column on mobile, 1.5rem gap. */
.caviar-category-banners > div > .grid.grid-cols-1.lg\:grid-cols-2,
.caviar-category-banners > div > .grid:first-child {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .caviar-category-banners > div > .grid.grid-cols-1.lg\:grid-cols-2,
  .caviar-category-banners > div > .grid:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each tile in the top grid — 420px min-height, image cover, hover scale. */
.caviar-category-banners > div > .grid:first-child > div {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  cursor: pointer;
}
.caviar-category-banners > div > .grid:first-child > div > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s ease;
}
.caviar-category-banners > div > .grid:first-child > div:hover > img {
  transform: scale(1.05);
}

/* Gradient overlay on top tiles — darker at bottom for legibility. */
.caviar-category-banners > div > .grid:first-child > div > div:not(.absolute.bottom-0) {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(0.08 0.04 255 / 0.85) 0%,
    oklch(0.08 0.04 255 / 0.40) 50%,
    transparent 100%
  );
}

/* Content block at bottom-left — padding 2rem. */
.caviar-category-banners > div > .grid:first-child > div > .absolute.bottom-0 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  z-index: 1;
}
.caviar-category-banners > div > .grid:first-child > div > .absolute.bottom-0 > p:first-child {
  margin: 0 0 0.5rem !important;
  color: oklch(0.78 0.07 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.caviar-category-banners > div > .grid:first-child > div > .absolute.bottom-0 > h3 {
  margin: 0 0 0.75rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-category-banners > div > .grid:first-child > div > .absolute.bottom-0 > p:nth-of-type(2) {
  margin: 0 0 1.25rem !important;
  max-width: 18rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
}

/* Inline gold + outline buttons inside the tiles (rendered as <span>). */
.caviar-category-banners .btn-gold,
.caviar-category-banners span.btn-gold {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  padding: 0.625rem 1.25rem !important;
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  width: fit-content;
}
.caviar-category-banners .btn-outline-gold,
.caviar-category-banners span.btn-outline-gold {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
  padding: 0.625rem 1.25rem !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  width: fit-content;
}
.caviar-category-banners .btn-gold svg,
.caviar-category-banners .btn-outline-gold svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Bottom grid — 3 small tiles, gap 1rem, mt-6 (1.5rem). */
.caviar-category-banners > div > .grid.mt-6,
.caviar-category-banners > div > .grid:nth-child(2) {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .caviar-category-banners > div > .grid.mt-6,
  .caviar-category-banners > div > .grid:nth-child(2) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.caviar-category-banners > div > .grid:nth-child(2) > div {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  cursor: pointer;
}
.caviar-category-banners > div > .grid:nth-child(2) > div > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.caviar-category-banners > div > .grid:nth-child(2) > div:hover > img {
  transform: scale(1.05);
}
.caviar-category-banners > div > .grid:nth-child(2) > div > div:first-of-type {
  position: absolute;
  inset: 0;
  background: oklch(0.08 0.04 255 / 0.55);
  transition: background 0.3s ease;
}
.caviar-category-banners > div > .grid:nth-child(2) > div:hover > div:first-of-type {
  background: oklch(0.08 0.04 255 / 0.65);
}
.caviar-category-banners > div > .grid:nth-child(2) > div > .absolute.inset-0:not(:first-of-type) {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  z-index: 1;
}
.caviar-category-banners > div > .grid:nth-child(2) > div h4 {
  margin: 0 0 0.125rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.caviar-category-banners > div > .grid:nth-child(2) > div p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

/* ---- Brand Story / "Our Story" section ----
 * Two-column split: off-white text panel on the left, image on the
 * right. All padding, typography, divider, stats grid, and button
 * styling pinned explicitly. */
.caviar-brand-story {
  background: #fff !important;
  padding: 0 !important;
  overflow: hidden;
}
.caviar-brand-story > .grid {
  display: grid !important;
  grid-template-columns: 1fr;
  min-height: 560px;
}
@media (min-width: 1024px) {
  .caviar-brand-story > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Left panel — text content over off-white. */
.caviar-brand-story > .grid > div:first-child {
  display: flex;
  align-items: center;
  background: oklch(0.96 0.008 85);
  padding: 4rem 2rem;
}
@media (min-width: 1024px) {
  .caviar-brand-story > .grid > div:first-child {
    padding: 5rem 4rem;
  }
}
.caviar-brand-story > .grid > div:first-child > div {
  max-width: 32rem;
  width: 100%;
}

/* Eyebrow — pinned via ID selector (matches the proven pattern used
 * on #featured-products / .caviar-how-delivered etc. that already
 * render correctly). ID specificity beats Divi parent's body/p rule
 * regardless of !important contests. Values match Manus base
 * .section-label: gold #af874d, weight 500, 0.2em tracking, 0.7rem. */
#caviar-our-story p.section-label,
body.caviar-ihoc-page #caviar-our-story p.section-label {
  margin: 0 0 1rem !important;
  padding: 0 !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Heading — navy, with gold accent on second line. */
.caviar-brand-story h2 {
  margin: 0 0 1.5rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-brand-story h2 span {
  color: oklch(0.65 0.09 75) !important;
}

/* Gold divider — 40px x 1px line under heading. */
.caviar-brand-story h2 + div.w-10 {
  width: 2.5rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 0 1.5rem !important;
}

/* Body paragraphs */
.caviar-brand-story > .grid > div:first-child > div > p {
  margin: 0 0 1.25rem !important;
  color: oklch(0.40 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
}
.caviar-brand-story > .grid > div:first-child > div > p:nth-of-type(2) {
  margin-bottom: 2rem !important;
}

/* Stats grid (30+ / 200+ / 100%) */
.caviar-brand-story .grid.grid-cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 2rem !important;
}
.caviar-brand-story .grid.grid-cols-3 > div {
  text-align: center;
}
.caviar-brand-story .grid.grid-cols-3 > div > div:first-child {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: oklch(0.22 0.005 285) !important;
  line-height: 1.1 !important;
}
.caviar-brand-story .grid.grid-cols-3 > div > div:nth-child(2) {
  margin-top: 0.25rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: oklch(0.50 0.01 285) !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* "Our Story" CTA — navy primary button, re-pinned for the <a> form
 * so Divi parent's anchor styles can't override. Bg / text / hover
 * pulled from Manus's .btn-primary exactly: #051a36 / #faf8f5 / #182e4b. */
.caviar-brand-story a.btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  padding: 0.85rem 2rem !important;
  background-color: #051a36 !important;
  color: #faf8f5 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
}
.caviar-brand-story a.btn-primary:hover,
.caviar-brand-story a.btn-primary:focus {
  background-color: #182e4b !important;
  color: #faf8f5 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(5, 26, 54, 0.3);
}
.caviar-brand-story a.btn-primary svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Right panel — image fills, with subtle navy tint overlay. */
.caviar-brand-story > .grid > div:last-child {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
@media (min-width: 1024px) {
  .caviar-brand-story > .grid > div:last-child {
    min-height: 0;
  }
}
.caviar-brand-story > .grid > div:last-child > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.caviar-brand-story > .grid > div:last-child > div {
  position: absolute;
  inset: 0;
  background: oklch(0.22 0.06 255 / 0.08);
}

/* ---- Caviar Varieties section ----
 * 3-card grid: each card has a 4:3 image with gradient + species
 * label, body with name/region + price tier, description, tasting
 * notes + Shop link. Hover lifts the card 1px and tightens border. */
body.caviar-ihoc-page .caviar-varieties,
.caviar-varieties {
  background: #fff !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.caviar-varieties > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-varieties > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-varieties > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

/* Header — eyebrow / heading / divider / sub */
.caviar-varieties .text-center.mb-12 {
  text-align: center;
  margin-bottom: 3rem;
}
body.caviar-ihoc-page .caviar-varieties p.section-label {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-varieties h2.section-heading {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-varieties .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto !important;
}
.caviar-varieties .text-center.mb-12 > p:last-child {
  margin: 1rem auto 0 !important;
  max-width: 48rem !important;
  color: oklch(0.50 0.01 285) !important;
}

/* Grid */
.caviar-varieties .grid.grid-cols-1.md\:grid-cols-3,
.caviar-varieties > div > .grid {
  display: grid !important;
  /* v3.19.52: minmax(0, 1fr) (not bare 1fr) so the column can't grow past
   * its share — fixes a "stretches beyond container" bug that reproduced
   * by rotating landscape → portrait. Bare 1fr would expand to fit content
   * (the card image's intrinsic width), overflowing the section. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .caviar-varieties .grid.grid-cols-1.md\:grid-cols-3,
  .caviar-varieties > div > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each card */
.caviar-varieties > div > .grid > div.group {
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  min-width: 0; /* v3.19.52: pairs with minmax(0,1fr) above; prevents the
                 * card from forcing its grid track wider than the column */
  overflow: hidden; /* contain the image at the card edge */
}
.caviar-varieties > div > .grid > div.group:hover {
  border-color: oklch(0.65 0.09 75);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px oklch(0.22 0.06 255 / 0.10);
}

/* Image — 4:3, fills, hover scale */
.caviar-varieties > div > .grid > div.group > div:first-child {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.caviar-varieties > div > .grid > div.group > div:first-child > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.caviar-varieties > div > .grid > div.group:hover > div:first-child > img {
  transform: scale(1.05);
}
.caviar-varieties > div > .grid > div.group > div:first-child > div.absolute.inset-0 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0.08 0.04 255 / 0.6) 0%, transparent 100%);
}
.caviar-varieties > div > .grid > div.group > div:first-child > div.absolute.bottom-3 {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 1;
}
.caviar-varieties > div > .grid > div.group > div:first-child > div.absolute.bottom-3 > span {
  font-family: "Playfair Display", serif !important;
  font-size: 0.75rem !important;
  font-style: normal !important; /* v3.19.50: italics removed theme-wide */
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Body */
.caviar-varieties > div > .grid > div.group > div.p-6 {
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.caviar-varieties > div > .grid > div.group .flex.items-start.justify-between.mb-3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Name / region */
.caviar-varieties > div > .grid > div.group h3 {
  margin: 0 0 0.125rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-varieties > div > .grid > div.group .flex.items-start > div:first-child > p {
  margin: 0 !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
}

/* Price tier / rarity */
.caviar-varieties > div > .grid > div.group .text-right > span {
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.caviar-varieties > div > .grid > div.group .text-right > p {
  margin: 0 !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
}

/* Description */
.caviar-varieties > div > .grid > div.group > div.p-6 > p {
  margin: 0 0 1rem !important;
  color: oklch(0.40 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}

/* Bottom row — tasting notes (italic gold) + SHOP link */
.caviar-varieties > div > .grid > div.group .flex.items-center.justify-between {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.caviar-varieties > div > .grid > div.group .flex.items-center.justify-between > span {
  font-family: "Playfair Display", serif !important;
  font-style: normal !important; /* v3.19.50: italics removed theme-wide */
  font-size: 0.75rem !important;
  color: oklch(0.65 0.09 75) !important;
}

/* SHOP X link — inline arrow link, navy default, gold on hover. */
.caviar-varieties .caviar-varieties-shop-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.caviar-varieties .caviar-varieties-shop-link:hover,
.caviar-varieties .caviar-varieties-shop-link:focus {
  color: oklch(0.65 0.09 75) !important;
  text-decoration: none !important;
}
.caviar-varieties .caviar-varieties-shop-link svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

/* "Learn About All Varieties" — gold-outline button, padded below grid. */
.caviar-varieties .text-center.mt-10 {
  margin-top: 3rem !important;
}
.caviar-varieties a.btn-outline-gold {
  display: inline-block !important;
  padding: 0.75rem 1.75rem !important;
  background-color: transparent !important;
  color: oklch(0.65 0.09 75) !important;
  border: 1px solid oklch(0.65 0.09 75) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.caviar-varieties a.btn-outline-gold:hover,
.caviar-varieties a.btn-outline-gold:focus {
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- Luxury Gift Sets / Gift Bundles section ----
 * Navy section with three gift cards. Each card has an image with a
 * gold "Most Popular" / "Best Value" / "New Arrival" badge, eyebrow,
 * title, bullet list of contents, price, and Add-to-Cart button.
 */
.caviar-gift-bundles {
  background: oklch(0.22 0.06 255) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.caviar-gift-bundles > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-gift-bundles > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-gift-bundles > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

/* Header */
.caviar-gift-bundles .text-center.mb-12 {
  text-align: center;
  margin-bottom: 3rem;
}
body.caviar-ihoc-page .caviar-gift-bundles p.section-label {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-gift-bundles h2 {
  margin: 0 0 1rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-gift-bundles .text-center.mb-12 > div.w-12 {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto 1rem !important;
}
.caviar-gift-bundles .text-center.mb-12 > p:last-child {
  margin: 0 auto !important;
  max-width: 48rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* Grid */
.caviar-gift-bundles .grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .caviar-gift-bundles .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Card — overflow: visible so the size-picker dropdown can expand
 * below the card without being clipped. Image hover-scale is still
 * clipped by .caviar-gift-card-image-wrap (which has its own
 * overflow: hidden), so the visual stays correct. */
.caviar-gift-card.caviar-product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.caviar-gift-card.caviar-product-card:hover {
  border-color: oklch(0.65 0.09 75);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px oklch(0.22 0.06 255 / 0.30);
}

/* Image */
.caviar-gift-card .caviar-gift-card-image-link {
  display: block;
  text-decoration: none;
}
.caviar-gift-card .caviar-gift-card-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.caviar-gift-card .caviar-gift-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease;
}
.caviar-gift-card:hover .caviar-gift-card-image {
  transform: scale(1.05);
}

/* Badge — base layout. Color is set per slot below so the three
 * cards visually rotate gold / white-navy / green like the Manus
 * reference. */
.caviar-gift-card .caviar-gift-card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: oklch(0.65 0.09 75);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1;
}
/* Slot 1 — gold (default). Slot 2 — white bg + navy text. Slot 3 — green bg + white text. */
.caviar-gift-bundles .grid > div:nth-child(2) .caviar-gift-card-badge {
  background: #ffffff;
  color: oklch(0.22 0.06 255);
}
.caviar-gift-bundles .grid > div:nth-child(3) .caviar-gift-card-badge {
  background: oklch(0.50 0.15 145);
  color: #ffffff;
}

/* Body */
.caviar-gift-card .caviar-gift-card-body {
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: #fff;
}
.caviar-gift-card .caviar-gift-card-eyebrow {
  margin: 0 0 0.25rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-gift-card .caviar-gift-card-title {
  margin: 0 0 1rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}
.caviar-gift-card a:has(.caviar-gift-card-title):hover .caviar-gift-card-title {
  color: oklch(0.65 0.09 75) !important;
}

/* Bullets */
.caviar-gift-card .caviar-gift-card-bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.caviar-gift-card .caviar-gift-card-bullets li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
}
.caviar-gift-card .caviar-gift-card-bullets li::before {
  content: none !important;
}
.caviar-gift-card .caviar-gift-card-bullet-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: oklch(0.65 0.09 75);
  flex-shrink: 0;
}

/* Footer — price + button */
.caviar-gift-card .caviar-gift-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.caviar-gift-card .caviar-gift-card-price {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  color: #fff !important;
  text-transform: none !important;
}
.caviar-gift-card .caviar-gift-card-price .woocommerce-Price-amount {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.caviar-gift-card .caviar-gift-card-price del {
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}
.caviar-gift-card .caviar-gift-card-price del .woocommerce-Price-amount {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Add to Cart — gold button matching Manus's btn-gold for gift cards */
.caviar-gift-card a.caviar-gift-card-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5rem 1rem !important;
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.caviar-gift-card a.caviar-gift-card-add:hover,
.caviar-gift-card a.caviar-gift-card-add:focus {
  background-color: oklch(0.58 0.10 75) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.caviar-gift-card a.caviar-gift-card-add svg {
  flex-shrink: 0;
}

/* View cart link inside the gift card — gold underline, centered */
.caviar-gift-card .caviar-product-card-view-cart {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.78 0.07 75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.caviar-gift-card .caviar-product-card-view-cart[hidden] {
  display: none !important;
}

/* "View All Gift Sets" — outline button, white border on dark bg */
.caviar-gift-bundles .text-center.mt-10 {
  text-align: center;
  margin-top: 3rem !important;
}
.caviar-gift-bundles a.btn-outline-gold {
  display: inline-block !important;
  padding: 0.75rem 1.75rem !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.caviar-gift-bundles a.btn-outline-gold:hover,
.caviar-gift-bundles a.btn-outline-gold:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color: #fff !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- Customer Reviews / Testimonials section ----
 * Header: eyebrow + heading + divider + 4.9-rating cluster (big score
 * with stars on the left, vertical divider, bar breakdown on the right).
 * Body: placeholder div for the Elfsight shortcode (`do_shortcode()`).
 * Footer: italic Playfair "luxury quote" centered with attribution.
 */
.caviar-testimonials {
  background: oklch(0.98 0.005 90) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.caviar-testimonials > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-testimonials > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-testimonials > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

/* Header */
.caviar-testimonials .text-center.mb-12 {
  text-align: center;
  margin-bottom: 3rem;
}
body.caviar-ihoc-page .caviar-testimonials p.section-label {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-testimonials h2.section-heading {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-testimonials .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto !important;
}

/* Rating cluster */
.caviar-testimonials .caviar-testimonials-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.caviar-testimonials .caviar-testimonials-score {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  color: oklch(0.22 0.005 285) !important;
}
.caviar-testimonials .caviar-testimonials-rating .lucide-star {
  fill: oklch(0.65 0.09 75) !important;
  stroke: oklch(0.65 0.09 75) !important;
}
.caviar-testimonials .caviar-testimonials-count {
  margin: 0 !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.875rem !important;
}
.caviar-testimonials .caviar-testimonials-divider {
  width: 1px;
  height: 4rem;
  background: oklch(0.88 0.008 85);
  margin: 0 1rem;
  flex-shrink: 0;
}
.caviar-testimonials .caviar-testimonials-bars {
  text-align: left;
}
.caviar-testimonials .caviar-testimonials-bars > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
}
.caviar-testimonials .caviar-testimonials-bar-label {
  width: 1rem;
  color: oklch(0.50 0.01 285);
  font-size: 0.75rem;
  text-align: center;
}
.caviar-testimonials .caviar-testimonials-bar-track {
  width: 6rem;
  height: 0.375rem;
  background: oklch(0.88 0.008 85);
  border-radius: 9999px;
  overflow: hidden;
}
.caviar-testimonials .caviar-testimonials-bar-fill {
  height: 100%;
  background: oklch(0.65 0.09 75);
  border-radius: 9999px;
}

/* Feed wrapper — keeps the section spacing right whether or not the
 * Elfsight shortcode is set. */
.caviar-testimonials .caviar-testimonials-feed {
  margin: 0 auto;
}
.caviar-testimonials .caviar-testimonials-placeholder {
  max-width: 36rem;
  margin: 1rem auto 0;
  padding: 1.25rem 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed oklch(0.65 0.09 75 / 0.4);
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  color: oklch(0.40 0.005 285);
  line-height: 1.6;
}
.caviar-testimonials .caviar-testimonials-placeholder strong {
  color: oklch(0.22 0.005 285);
}
.caviar-testimonials .caviar-testimonials-placeholder em {
  color: oklch(0.65 0.09 75);
  font-style: normal;
}

/* Bottom luxury quote */
.caviar-testimonials .caviar-testimonials-quote {
  margin-top: 4rem;
  text-align: center;
}
.caviar-testimonials .luxury-quote {
  margin: 0 auto;
  max-width: 36rem;
  font-family: "Playfair Display", serif !important;
  font-style: normal !important; /* v3.19.50: italics removed theme-wide */
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: oklch(0.30 0.005 285) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.caviar-testimonials .caviar-testimonials-quote-attr {
  margin: 0.75rem 0 0 !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
}

/* "Read More Reviews" CTA — gold-outline button below the feed,
 * centered. On the light testimonials bg this matches the Manus
 * styling: gold border + gold text, hover flips to gold fill. */
.caviar-testimonials .caviar-testimonials-cta {
  text-align: center;
  margin-top: 2rem;
}
.caviar-testimonials .caviar-testimonials-cta a.btn-outline-gold {
  display: inline-block !important;
  padding: 0.75rem 1.75rem !important;
  background-color: transparent !important;
  color: oklch(0.65 0.09 75) !important;
  border: 1px solid oklch(0.65 0.09 75) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.caviar-testimonials .caviar-testimonials-cta a.btn-outline-gold:hover,
.caviar-testimonials .caviar-testimonials-cta a.btn-outline-gold:focus {
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- Caviar Lifestyle / "Elevate Every Occasion" section ----
 * 6-tile gallery, all 1:1 squares (per user request — Manus had the
 * first tile as 1:2). Each tile is an <a> linking to its Customizer
 * URL; hover dims the image and surfaces a centered Instagram glyph.
 */
.caviar-lifestyle {
  background: oklch(0.96 0.008 85) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.caviar-lifestyle > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-lifestyle > div:first-child { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-lifestyle > div:first-child { padding-left: 2rem;   padding-right: 2rem; } }

/* Header */
.caviar-lifestyle .text-center.mb-12 {
  text-align: center;
  margin-bottom: 3rem;
}
body.caviar-ihoc-page .caviar-lifestyle p.section-label {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-lifestyle h2.section-heading {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-lifestyle .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto !important;
}
.caviar-lifestyle .caviar-lifestyle-sub {
  margin: 1rem auto 0 !important;
  max-width: 48rem !important;
  color: oklch(0.50 0.01 285) !important;
}

/* Grid — 2 cols mobile, 3 cols at md, 0.75rem gap. */
.caviar-lifestyle .caviar-lifestyle-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .caviar-lifestyle .caviar-lifestyle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each tile — square aspect, image fills, hover scale + dim overlay
 * + Instagram glyph fade-in. */
.caviar-lifestyle .caviar-lifestyle-tile {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  text-decoration: none;
}
.caviar-lifestyle .caviar-lifestyle-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.caviar-lifestyle .caviar-lifestyle-tile:hover > img,
.caviar-lifestyle .caviar-lifestyle-tile:focus > img {
  transform: scale(1.05);
}
.caviar-lifestyle .caviar-lifestyle-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.08 0.04 255 / 0);
  transition: background 0.3s ease;
}
.caviar-lifestyle .caviar-lifestyle-tile:hover .caviar-lifestyle-tile-overlay,
.caviar-lifestyle .caviar-lifestyle-tile:focus .caviar-lifestyle-tile-overlay {
  background: oklch(0.08 0.04 255 / 0.4);
}
.caviar-lifestyle .caviar-lifestyle-tile-overlay svg {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.caviar-lifestyle .caviar-lifestyle-tile:hover .caviar-lifestyle-tile-overlay svg,
.caviar-lifestyle .caviar-lifestyle-tile:focus .caviar-lifestyle-tile-overlay svg {
  opacity: 1;
}

/* Follow CTA — gold-outline button, with the small Instagram glyph
 * inline on the left. Centered below the gallery. */
.caviar-lifestyle .caviar-lifestyle-cta {
  text-align: center;
  margin-top: 2rem;
}
.caviar-lifestyle a.caviar-lifestyle-follow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 0.5rem !important;
  padding: 0.75rem 1.75rem !important;
  background-color: transparent !important;
  color: oklch(0.65 0.09 75) !important;
  border: 1px solid oklch(0.65 0.09 75) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.caviar-lifestyle a.caviar-lifestyle-follow:hover,
.caviar-lifestyle a.caviar-lifestyle-follow:focus {
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.caviar-lifestyle a.caviar-lifestyle-follow svg {
  width: 0.94rem;
  height: 0.94rem;
  flex-shrink: 0;
}

/* ---- Newsletter / Complimentary Guide section ----
 * Navy section with subtle dual radial-glow overlay. Centered content:
 * gold-circle book icon, gold eyebrow, white heading with gold accent
 * line, sub paragraph, 4 gold-check feature pills, email + Get Free
 * Guide submit row, fine-print disclaimer.
 */
.caviar-newsletter {
  background: oklch(0.22 0.06 255) !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  position: relative;
  overflow: hidden;
}
.caviar-newsletter .caviar-newsletter-glow {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 20% 50%, oklch(0.65 0.09 75) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, oklch(0.65 0.09 75) 0%, transparent 50%);
  pointer-events: none;
}
.caviar-newsletter > div:nth-child(2) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .caviar-newsletter > div:nth-child(2) { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .caviar-newsletter > div:nth-child(2) { padding-left: 2rem;   padding-right: 2rem; } }

.caviar-newsletter .caviar-newsletter-inner {
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}

/* Book icon — gold-tinted circle with gold svg stroke */
.caviar-newsletter .caviar-newsletter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: oklch(0.65 0.09 75 / 0.15);
  border: 1px solid oklch(0.65 0.09 75 / 0.3);
  margin-bottom: 1.5rem;
}
.caviar-newsletter .caviar-newsletter-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  color: oklch(0.65 0.09 75);
  stroke: currentColor;
}

/* Eyebrow */
body.caviar-ihoc-page .caviar-newsletter p.section-label.caviar-newsletter-eyebrow {
  margin: 0 0 0.75rem !important;
  color: oklch(0.78 0.07 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* Heading — white line one + gold accent line two */
.caviar-newsletter .caviar-newsletter-heading {
  margin: 0 0 1rem !important;
  color: #fff !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-newsletter .caviar-newsletter-heading-accent {
  color: oklch(0.78 0.07 75) !important;
}

/* Sub */
.caviar-newsletter .caviar-newsletter-sub {
  margin: 0 0 2rem !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* Feature checks — 4 inline items, gold check + white/70 text */
.caviar-newsletter .caviar-newsletter-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.caviar-newsletter .caviar-newsletter-checks > li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
}
.caviar-newsletter .caviar-newsletter-checks > li::before {
  content: none !important;
}
.caviar-newsletter .caviar-newsletter-checks svg {
  width: 0.8125rem;
  height: 0.8125rem;
  color: oklch(0.65 0.09 75);
  stroke: currentColor;
  flex-shrink: 0;
}

/* Form — email + button on one row at sm+, stacked on mobile */
.caviar-newsletter .caviar-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .caviar-newsletter .caviar-newsletter-form {
    flex-direction: row;
  }
}
.caviar-newsletter .caviar-newsletter-input {
  flex: 1 1 auto;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0;
  color: #fff !important;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.caviar-newsletter .caviar-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.caviar-newsletter .caviar-newsletter-input:focus {
  border-color: oklch(0.65 0.09 75) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.caviar-newsletter .caviar-newsletter-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.caviar-newsletter .caviar-newsletter-submit:hover,
.caviar-newsletter .caviar-newsletter-submit:focus {
  background-color: oklch(0.58 0.10 75) !important;
}
.caviar-newsletter .caviar-newsletter-submit svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Disclaimer */
.caviar-newsletter .caviar-newsletter-disclaimer {
  margin: 1rem 0 0 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
}

/* Admin-only "section hidden" notice — light banner that visitors
 * never see. Purely informational so admins know it exists. */
.caviar-newsletter-hidden-notice {
  background: oklch(0.98 0.005 90);
  border-top: 1px dashed oklch(0.65 0.09 75 / 0.4);
  border-bottom: 1px dashed oklch(0.65 0.09 75 / 0.4);
  padding: 1rem 1.5rem;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: oklch(0.40 0.005 285);
}
.caviar-newsletter-hidden-notice strong {
  color: oklch(0.22 0.005 285);
}
.caviar-newsletter-hidden-notice em {
  color: oklch(0.65 0.09 75);
  font-style: normal;
}

/* ---- Single-product variation tiles — selected state + badges ---- */

/* Selected pill has navy bg + white text. Inner per-gram label inherits
 * gold by default, which doesn't read on navy — flip it to white/80. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap li.variable-item.selected .caviar-pg,
body.caviar-ihoc-page .variations li.variable-item.selected .caviar-pg {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Hide WC's "Clear" reset link under the variation row — the user can
 * just pick a different size; the link is visual noise. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .reset_variations,
body.caviar-ihoc-page .variations_form .reset_variations,
body.caviar-ihoc-page .reset_variations {
  display: none !important;
}

/* Tile badge — small gold pill that floats above the matching size
 * variation. Driven by per-variation admin meta `_caviar_tile_badge`
 * (e.g. "Best Value", "Popular"); injected by ihoc-product.js. */
body.caviar-ihoc-page li.variable-item {
  position: relative;
}
body.caviar-ihoc-page .caviar-tile-badge {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.125rem 0.4rem;
  background: oklch(0.65 0.09 75);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
  pointer-events: none;
}

/* ---- Single-product Add-to-Cart cart icon ---- *
 * WC's `single_add_to_cart_button` has no icon by default. Inject one
 * via a ::before pseudo-element with an inline-SVG data URI (no extra
 * sprite or HTTP request). Width / height tuned to sit on the same
 * baseline as the button text. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}
/* Real SVG injected by ihoc-product.js (more reliable than ::before
 * — some Divi/WC stacks drop pseudo-element content on submit
 * buttons). Sized + colored to inherit the button's text color. */
body.caviar-ihoc-page .caviar-add-to-cart-wrap .single_add_to_cart_button .caviar-cart-btn-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

/* ---- Generic Page template ---- *
 * Layout drives by the "IHOC Page Layout" metabox in WP admin.
 * Modules render before (hero) and after (Our Story / Featured /
 * Custom CTA / Newsletter) the standard the_content() output.
 */

/* Hero on a Page reuses the homepage .caviar-hero styles. The
 * .caviar-page-hero hook tweaks min-height so a Page hero can be
 * shorter than the homepage hero. */
.caviar-page-hero.caviar-hero { min-height: 55vh; }
@media (min-width: 1024px) { .caviar-page-hero.caviar-hero { min-height: 50vh; } }

/* Page content body — block editor output. Centered column for
 * readability; consistent typography that matches the IHOC system. */
body.caviar-ihoc-page .caviar-page-main {
  background: #fff;
  padding: 4rem 1rem;
}
@media (min-width: 1024px) { body.caviar-ihoc-page .caviar-page-main { padding: 5rem 2rem; } }

body.caviar-ihoc-page .caviar-page-content {
  max-width: 760px;
  margin: 0 auto;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: oklch(0.30 0.005 285);
}
body.caviar-ihoc-page .caviar-page-content > *:first-child { margin-top: 0; }
body.caviar-ihoc-page .caviar-page-content > *:last-child  { margin-bottom: 0; }

body.caviar-ihoc-page .caviar-page-content h1,
body.caviar-ihoc-page .caviar-page-content h2,
body.caviar-ihoc-page .caviar-page-content h3,
body.caviar-ihoc-page .caviar-page-content h4 {
  font-family: "DM Sans", sans-serif;
  color: oklch(0.22 0.005 285);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2.25rem 0 1rem;
  text-transform: none;
}
body.caviar-ihoc-page .caviar-page-content h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; }
body.caviar-ihoc-page .caviar-page-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem);  font-weight: 700; }
body.caviar-ihoc-page .caviar-page-content h3 { font-size: 1.25rem; font-weight: 600; }
body.caviar-ihoc-page .caviar-page-content h4 { font-size: 1.05rem; font-weight: 600; }

body.caviar-ihoc-page .caviar-page-content p { margin: 0 0 1.25rem; }
body.caviar-ihoc-page .caviar-page-content ul,
body.caviar-ihoc-page .caviar-page-content ol { margin: 0 0 1.25rem 1.4em; }
body.caviar-ihoc-page .caviar-page-content li { margin: 0 0 0.4rem; }
body.caviar-ihoc-page .caviar-page-content a {
  color: oklch(0.65 0.09 75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.caviar-ihoc-page .caviar-page-content a:hover { color: oklch(0.55 0.10 75); }
body.caviar-ihoc-page .caviar-page-content blockquote {
  margin: 2rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 3px solid oklch(0.65 0.09 75);
  font-family: "Playfair Display", serif;
  font-style: normal;
  font-size: 1.1rem;
  color: oklch(0.40 0.005 285);
}
body.caviar-ihoc-page .caviar-page-content img,
body.caviar-ihoc-page .caviar-page-content figure { max-width: 100%; height: auto; margin: 1.5rem 0; }
body.caviar-ihoc-page .caviar-page-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: oklch(0.50 0.01 285);
  text-align: center;
}
body.caviar-ihoc-page .caviar-page-content .wp-block-buttons { margin: 2rem 0; }

/* ---- Custom CTA module ---- *
 * Three bg variants. Eyebrow + heading + divider + sub + button. */
.caviar-page-cta {
  padding: 5rem 1rem;
  text-align: center;
}
@media (min-width: 1024px) { .caviar-page-cta { padding: 5rem 2rem; } }

.caviar-page-cta .caviar-page-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.caviar-page-cta-bg-white    { background: #fff; }
.caviar-page-cta-bg-offwhite { background: oklch(0.96 0.008 85); }
.caviar-page-cta-bg-navy     { background: oklch(0.22 0.06 255); }

body.caviar-ihoc-page .caviar-page-cta .section-label.caviar-page-cta-eyebrow {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-page-cta .caviar-page-cta-heading {
  margin: 0 0 1rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  color: oklch(0.22 0.005 285) !important;
}
.caviar-page-cta-bg-navy .caviar-page-cta-heading { color: #fff !important; }
.caviar-page-cta .gold-divider { width: 3rem !important; height: 1px !important; background: oklch(0.65 0.09 75) !important; margin: 0 auto !important; }
.caviar-page-cta .caviar-page-cta-sub {
  margin: 1rem auto 1.75rem !important;
  max-width: 36rem;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: oklch(0.50 0.01 285) !important;
}
.caviar-page-cta-bg-navy .caviar-page-cta-sub { color: rgba(255, 255, 255, 0.7) !important; }

.caviar-page-cta .caviar-page-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem !important;
  background-color: oklch(0.65 0.09 75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease;
}
.caviar-page-cta .caviar-page-cta-btn:hover,
.caviar-page-cta .caviar-page-cta-btn:focus {
  background-color: oklch(0.58 0.10 75) !important;
  color: #fff !important;
}
.caviar-page-cta-bg-navy .caviar-page-cta-btn {
  background-color: #fff !important;
  color: oklch(0.22 0.06 255) !important;
}
.caviar-page-cta-bg-navy .caviar-page-cta-btn:hover,
.caviar-page-cta-bg-navy .caviar-page-cta-btn:focus {
  background-color: oklch(0.95 0.005 90) !important;
  color: oklch(0.22 0.06 255) !important;
}

/* ---- Blog index (home.php) ---- *
 * Hero header → centered [New] + featured latest → 3-col grid →
 * pagination → optional newsletter. */

.caviar-blog-hero {
  background: #fff;
  padding: 4rem 1rem 3rem;
  text-align: center;
  border-bottom: 1px solid oklch(0.92 0.004 85);
}
@media (min-width: 1024px) { .caviar-blog-hero { padding: 5rem 2rem 3.5rem; } }
.caviar-blog-hero .caviar-blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
body.caviar-ihoc-page .caviar-blog-hero p.section-label.caviar-blog-hero-eyebrow {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-blog-hero .caviar-blog-hero-heading {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-blog-hero .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto !important;
}
.caviar-blog-hero .caviar-blog-hero-sub {
  margin: 1rem auto 0 !important;
  max-width: 48rem !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

.caviar-blog-main {
  background: oklch(0.98 0.005 90);
  padding: 5rem 1rem;
}
@media (min-width: 1024px) { .caviar-blog-main { padding: 6rem 2rem; } }
.caviar-blog-grid-wrap > div.caviar-blog-grid + .caviar-blog-pagination,
.caviar-blog-pagination { margin-top: 3rem; }

/* Featured "[ New ]" + latest post */
.caviar-blog-featured {
  max-width: 720px;
  margin: 0 auto 4rem;
  padding-top: 2rem;
  text-align: center;
}
@media (min-width: 1024px) { .caviar-blog-featured { padding-top: 3rem; } }
.caviar-blog-featured-label {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.85rem;
  background: oklch(0.65 0.09 75);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 3-column grid */
.caviar-blog-grid-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 2rem;
}
@media (min-width: 1024px) { .caviar-blog-grid-wrap { padding-bottom: 3rem; } }
.caviar-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .caviar-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
@media (min-width: 1024px) { .caviar-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* Blog card — entire card is a link, image on top, body below */
.caviar-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid oklch(0.92 0.004 85);
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.caviar-blog-card:hover,
.caviar-blog-card:focus {
  border-color: oklch(0.65 0.09 75);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px oklch(0.22 0.06 255 / 0.08);
}
.caviar-blog-card-image-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: oklch(0.96 0.008 85);
}
.caviar-blog-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.caviar-blog-card:hover .caviar-blog-card-image,
.caviar-blog-card:focus .caviar-blog-card-image {
  transform: scale(1.05);
}
.caviar-blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.caviar-blog-card-cat {
  margin: 0 0 0.5rem !important;
  color: oklch(0.65 0.09 75) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-blog-card-title {
  margin: 0 0 0.75rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  transition: color 0.2s ease;
}
.caviar-blog-card:hover .caviar-blog-card-title,
.caviar-blog-card:focus .caviar-blog-card-title {
  color: oklch(0.65 0.09 75) !important;
}
.caviar-blog-card-excerpt {
  margin: 0 0 1.25rem !important;
  color: oklch(0.50 0.01 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
.caviar-blog-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  color: oklch(0.65 0.09 75);
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Featured (single, larger) variant */
.caviar-blog-card-featured {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.caviar-blog-card-featured .caviar-blog-card-image-frame { aspect-ratio: 16 / 8; }
.caviar-blog-card-featured .caviar-blog-card-body { padding: 2rem; }
.caviar-blog-card-featured .caviar-blog-card-title {
  font-size: 1.5rem !important;
}
.caviar-blog-card-featured .caviar-blog-card-excerpt {
  font-size: 0.95rem !important;
}

/* Pagination */
.caviar-blog-pagination {
  margin: 3.5rem auto 0;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
}
.caviar-blog-pagination .page-numbers {
  display: inline-block;
  margin: 0 0.15rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid oklch(0.88 0.008 85);
  color: oklch(0.40 0.005 285);
  text-decoration: none;
  transition: all 0.2s ease;
}
.caviar-blog-pagination .page-numbers:hover { border-color: oklch(0.65 0.09 75); color: oklch(0.65 0.09 75); }
.caviar-blog-pagination .page-numbers.current {
  background: oklch(0.22 0.06 255);
  border-color: oklch(0.22 0.06 255);
  color: #fff;
}
.caviar-blog-pagination .page-numbers.dots { border: 0; }

/* ---- Single post (single.php) ---- */
body.caviar-ihoc-page .caviar-post {
  background: #fff;
}
.caviar-post-header {
  padding: 4rem 1rem 2rem;
  text-align: center;
  background: #fff;
}
@media (min-width: 1024px) { .caviar-post-header { padding: 5rem 2rem 2.5rem; } }
.caviar-post-header-inner {
  max-width: 760px;
  margin: 0 auto;
}
body.caviar-ihoc-page .caviar-post-header p.section-label.caviar-post-cat {
  margin: 0 0 1rem !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
.caviar-post-header .caviar-post-cat a {
  color: #af874d !important;
  text-decoration: none !important;
}
.caviar-post-header .caviar-post-cat a:hover { color: oklch(0.55 0.10 75) !important; }

.caviar-post-title {
  margin: 0 0 1.5rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-wrap: balance;
}

/* Author byline */
.caviar-post-author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  color: oklch(0.50 0.01 285);
}
.caviar-post-author-avatar,
.caviar-post-author img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  display: inline-block;
}
.caviar-post-author-name { font-weight: 500; }

/* Featured image */
.caviar-post-feature {
  max-width: 1024px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
}
.caviar-post-feature img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post body */
.caviar-post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: oklch(0.30 0.005 285);
}
.caviar-post-body > *:first-child { margin-top: 0; }
.caviar-post-body > *:last-child { margin-bottom: 0; }
.caviar-post-body h2,
.caviar-post-body h3,
.caviar-post-body h4 {
  font-family: "DM Sans", sans-serif;
  color: oklch(0.22 0.005 285);
  letter-spacing: -0.01em;
  margin: 2.25rem 0 1rem;
  text-transform: none;
}
.caviar-post-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; }
.caviar-post-body h3 { font-size: 1.2rem; font-weight: 600; }
.caviar-post-body p  { margin: 0 0 1.25rem; }
.caviar-post-body a  { color: oklch(0.65 0.09 75); text-decoration: underline; text-underline-offset: 3px; }
.caviar-post-body a:hover { color: oklch(0.55 0.10 75); }
.caviar-post-body ul, .caviar-post-body ol { margin: 0 0 1.25rem 1.4em; }
.caviar-post-body li { margin: 0 0 0.4rem; }
.caviar-post-body blockquote {
  margin: 2rem 0;
  padding: 0.5rem 1.25rem;
  border-left: 3px solid oklch(0.65 0.09 75);
  font-family: "Playfair Display", serif;
  font-style: normal;
  font-size: 1.15rem;
  color: oklch(0.40 0.005 285);
}
.caviar-post-body img,
.caviar-post-body figure { max-width: 100%; height: auto; margin: 1.5rem 0; }
.caviar-post-body figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: oklch(0.50 0.01 285); text-align: center; }

/* Tags row */
.caviar-post-tags {
  max-width: 760px;
  margin: 1.5rem auto 0;
  padding: 1.5rem 1rem 0;
  border-top: 1px solid oklch(0.92 0.004 85);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: "DM Sans", sans-serif;
}
.caviar-post-tags-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.50 0.01 285);
}
.caviar-post-tags-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.caviar-post-tags-list a.caviar-post-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: oklch(0.96 0.008 85);
  color: oklch(0.40 0.005 285);
  border: 1px solid oklch(0.88 0.008 85);
  font-size: 0.75rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.caviar-post-tags-list a.caviar-post-tag:hover {
  border-color: oklch(0.65 0.09 75);
  color: oklch(0.65 0.09 75);
}

/* Related posts grid */
.caviar-related-posts {
  background: oklch(0.98 0.005 90);
  padding: 4rem 1rem;
  border-top: 1px solid oklch(0.92 0.004 85);
}
@media (min-width: 1024px) { .caviar-related-posts { padding: 5rem 2rem; } }
.caviar-related-posts-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
body.caviar-ihoc-page .caviar-related-posts p.section-label.caviar-related-posts-label {
  margin: 0 0 0.75rem !important;
  color: #af874d !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.caviar-related-posts-heading {
  margin: 0 0 1rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}
.caviar-related-posts .gold-divider {
  width: 3rem !important;
  height: 1px !important;
  background: oklch(0.65 0.09 75) !important;
  margin: 0 auto 2.5rem !important;
}
.caviar-related-posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: left;
}
@media (min-width: 640px)  { .caviar-related-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
@media (min-width: 1024px) { .caviar-related-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* Comments section */
.caviar-post-comments {
  background: #fff;
  padding: 3rem 1rem 4rem;
}
@media (min-width: 1024px) { .caviar-post-comments { padding: 4rem 2rem 5rem; } }
.caviar-post-comments-inner {
  max-width: 760px;
  margin: 0 auto;
}
.caviar-post-comments h2,
.caviar-post-comments h3 {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 700 !important;
  color: oklch(0.22 0.005 285) !important;
  text-transform: none !important;
  margin: 0 0 1rem !important;
}
.caviar-post-comments .comment-form input[type="text"],
.caviar-post-comments .comment-form input[type="email"],
.caviar-post-comments .comment-form input[type="url"],
.caviar-post-comments .comment-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid oklch(0.88 0.008 85);
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
}
.caviar-post-comments .comment-form-comment textarea { min-height: 6rem; }
.caviar-post-comments .form-submit input[type="submit"] {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: #051a36;
  color: #faf8f5;
  border: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}
.caviar-post-comments .form-submit input[type="submit"]:hover { background: #182e4b; }

/* ---- Blog hero subtitle now wraps a <div> from wpautop ---- *
 * Inner <p> tags should pick up the same typography as the parent. */
.caviar-blog-hero .caviar-blog-hero-sub p {
  margin: 0 0 0.5em !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.caviar-blog-hero .caviar-blog-hero-sub p:last-child { margin-bottom: 0 !important; }
.caviar-blog-hero .caviar-blog-hero-sub a {
  color: oklch(0.65 0.09 75);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Single post: 2-column layout with sticky sidebar ---- *
 * On mobile/tablet: single column (sidebar stacks below content).
 * On desktop (lg): grid with content (760px) + sidebar (300px),
 *                  total max 1100px, sidebar position: sticky. */
.caviar-post-grid {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
@media (min-width: 1024px) {
  .caviar-post.caviar-post-with-sidebar .caviar-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(0, 300px);
    gap: 3rem;
    align-items: start;
    max-width: 1100px;
    padding: 0 2rem 4rem;
  }
}

/* Content column inside the grid takes over from the bare body
 * styles (kept narrow + readable). */
.caviar-post-grid .caviar-post-content-col {
  min-width: 0; /* Prevents grid blowout if a long word/URL appears. */
}
.caviar-post-grid .caviar-post-feature {
  max-width: 100%;
  margin: 0 0 2rem;
  padding: 0;
}
.caviar-post-grid .caviar-post-feature img { width: 100%; height: auto; display: block; }

.caviar-post-grid .caviar-post-body {
  max-width: none;
  margin: 0;
  padding: 0;
}
.caviar-post-grid .caviar-post-tags {
  max-width: none;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
}

/* Sidebar */
.caviar-post-sidebar {
  margin-top: 2.5rem;
}
@media (min-width: 1024px) {
  .caviar-post-sidebar {
    margin-top: 0;
    position: sticky;
    top: 2rem;
    align-self: start;
  }
}
.caviar-post-sidebar .caviar-post-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Each widget rendered by dynamic_sidebar() */
.caviar-post-sidebar .caviar-post-sidebar-widget {
  background: #fff;
  border: 1px solid oklch(0.92 0.004 85);
  padding: 1.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  color: oklch(0.40 0.005 285);
  line-height: 1.65;
}
.caviar-post-sidebar .caviar-post-sidebar-title {
  margin: 0 0 0.75rem !important;
  color: oklch(0.22 0.005 285) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.caviar-post-sidebar .caviar-post-sidebar-widget img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.75rem;
}
.caviar-post-sidebar .caviar-post-sidebar-widget a:not(.button) {
  color: oklch(0.65 0.09 75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.caviar-post-sidebar .caviar-post-sidebar-widget a.button,
.caviar-post-sidebar .caviar-post-sidebar-widget .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: oklch(0.65 0.09 75);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 0;
  transition: background 0.2s ease;
}
.caviar-post-sidebar .caviar-post-sidebar-widget a.button:hover,
.caviar-post-sidebar .caviar-post-sidebar-widget .wp-block-button__link:hover {
  background: oklch(0.58 0.10 75);
}

/* Admin-only sidebar placeholder (visitors never see this — only
 * users with edit_theme_options capability render it). Dashed
 * border + soft tone so it's obviously a setup hint, not content. */
.caviar-post-sidebar-placeholder {
  background: #fff;
  border: 1px dashed oklch(0.65 0.09 75 / 0.5);
  padding: 1.25rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: oklch(0.40 0.005 285);
}
.caviar-post-sidebar-placeholder strong {
  display: block;
  margin-bottom: 0.4rem;
  color: oklch(0.22 0.005 285);
}
.caviar-post-sidebar-placeholder em {
  color: oklch(0.65 0.09 75);
  font-style: normal;
}

/* ==========================================================================
 * Header — notification bar + 3-col main nav + mobile drawer
 * ========================================================================== */

.caviar-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Hide Divi parent's default chrome on IHOC pages — our header.php
 * + inc/footer-template.php are the canonical ones. Divi otherwise
 * outputs #main-header/#main-footer/.et-l--header/.et-l--footer
 * which would stack against ours. */
body.caviar-ihoc-page #main-header,
body.caviar-ihoc-page #top-header,
body.caviar-ihoc-page .et-l--header,
body.caviar-ihoc-page #main-footer,
body.caviar-ihoc-page .et-l--footer,
body.caviar-ihoc-page #et-footer-nav,
body.caviar-ihoc-page #footer-bottom { display: none !important; }
body.caviar-ihoc-page #page-container { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---- Notification bar (navy, optional 3-message rotator) ---- */
.caviar-notif-bar {
  background: #051a36;
  color: rgba(255, 255, 255, 0.92);
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  max-height: 4rem;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
/* When the page scrolls past the top, the notif bar collapses out
   of the way so only the menu sticks. The class is toggled by JS
   in setupHeaderScroll(). */
.caviar-header.is-scrolled .caviar-notif-bar {
  max-height: 0;
}
.caviar-notif-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
}
.caviar-notif-track {
  position: relative;
  flex: 1 1 auto;
  text-align: center;
  min-height: 1.4rem;
}
.caviar-notif-item {
  display: none;
  line-height: 1.4;
}
.caviar-notif-item.is-active { display: block; }
.caviar-notif-item a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.caviar-notif-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.caviar-notif-arrow:hover, .caviar-notif-arrow:focus { color: #fff; }

/* ---- Main nav bar (white, 3 columns) ---- */
.caviar-nav-bar {
  position: relative;
  background: #fff;
  border-bottom: 1px solid oklch(0.92 0.004 85);
}
.caviar-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .caviar-nav-inner { padding: 10px 1.5rem; }
}
@media (min-width: 1024px) {
  .caviar-nav-inner { padding: 10px 2rem; gap: 2rem; }
}

.caviar-nav-col-logo { justify-self: start; }
.caviar-nav-col-icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.caviar-header-logo { display: inline-flex; align-items: center; }
/* v3.19.41: keep the logo PROPORTIONAL. The old rule forced `height: 56px`
 * with `max-width: 200px`; a wide logo (the new one is 1030×184 ≈ 5.6:1)
 * needs ~313px at 56px tall, so max-width clamped the WIDTH to 200px while
 * height stayed 56px → vertical stretch/squish. Using max-height + max-width
 * with width/height auto scales it to fit the box WITHOUT distortion. */
.caviar-header-logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 56px;
  max-width: 240px;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .caviar-header-logo img { max-height: 64px; max-width: 300px; }
}
.caviar-header-logo-text {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  color: oklch(0.22 0.005 285);
}

/* ---- Center menu (desktop) ---- */
.caviar-nav-col-menu {
  display: none;
  justify-self: center;
}
@media (min-width: 1024px) {
  .caviar-nav-col-menu { display: block; }
}
.caviar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-family: "DM Sans", sans-serif;
}
/* v3.19.52: chevron moved out of the link `<a>` and into a sibling
 * `<button class="caviar-nav-toggle">`. The LI now flexes them together so
 * label + chevron still read as one unit on desktop, while on mobile only
 * the chevron triggers expand/collapse (the label remains a real link). */
.caviar-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.caviar-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.22 0.005 285);
  text-decoration: none;
  transition: color 0.2s ease;
}
.caviar-nav-link:hover, .caviar-nav-link:focus { color: oklch(0.65 0.09 75); }
.caviar-nav-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 0;
  transition: color 0.2s ease;
}
.caviar-nav-toggle:focus-visible {
  outline: 2px solid oklch(0.65 0.09 75);
  outline-offset: 2px;
}
.caviar-nav-item:hover .caviar-nav-toggle,
.caviar-nav-item:focus-within .caviar-nav-toggle { color: oklch(0.65 0.09 75); }
.caviar-nav-chevron {
  width: 0.7rem;
  height: 0.7rem;
  transition: transform 0.2s ease;
  display: block;
}
.caviar-nav-item:hover .caviar-nav-chevron,
.caviar-nav-item:focus-within .caviar-nav-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.caviar-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  min-width: 220px;
  background: #fff;
  border: 1px solid oklch(0.88 0.008 85);
  box-shadow: 0 12px 32px -16px oklch(0.22 0.06 255 / 0.20);
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 50;
}
.caviar-nav-item.has-dropdown:hover > .caviar-nav-dropdown,
.caviar-nav-item.has-dropdown:focus-within > .caviar-nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.caviar-nav-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.caviar-nav-dropdown li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem; /* v3.19.45: 14px, consistent with all nav links */
  letter-spacing: 0.06em;
  text-transform: uppercase; /* v3.19.42: all-caps dropdown links */
  color: oklch(0.30 0.01 285);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.caviar-nav-dropdown li a:hover,
.caviar-nav-dropdown li a:focus {
  background: oklch(0.98 0.005 90);
  color: oklch(0.65 0.09 75);
}

/* ---- Mega-dropdown panel (multi-column, driven by Appearance → Menus)
 *
 * Anchored to the link's left edge by default; last-two top-level
 * items get `.is-anchor-right` from PHP so their wide panel docks
 * to the right edge instead of clipping past the viewport. */
/* v3.19.42: full-width (1280px) centered mega panel with a showcase-image
 * area on the right. The mega <li> is set position:static (below) so the
 * absolutely-positioned panel anchors to .caviar-nav-bar and centers on the
 * page — same position regardless of which item is hovered. */
/* v3.19.43: the full-width mega panel + showcase-image area is DESKTOP/TABLET
 * only (>=1024px). Below that the SAME markup renders inside the mobile drawer
 * (it reuses divi_caviar_render_header_menu), so these rules MUST be scoped or
 * they leak the 1280px width + 340px image slot into the drawer and break it.
 * The drawer's own mega rules live in the .caviar-mobile-list block below. */
@media (min-width: 1024px) {
  .caviar-nav-item.has-mega { position: static; }
  .caviar-nav-dropdown.is-mega {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(0.5rem);
    min-width: 0;
    width: min(1280px, calc(100vw - 2rem));
    max-width: none;
    padding: 2rem;
    display: flex;
    gap: 2.5rem;
    align-items: stretch;
  }
  /* the right-dock variant is moot now (always centered) */
  .caviar-nav-dropdown.is-mega.is-anchor-right { left: 50%; right: auto; }
  .caviar-nav-item.has-dropdown:hover > .caviar-nav-dropdown.is-mega,
  .caviar-nav-item.has-dropdown:focus-within > .caviar-nav-dropdown.is-mega {
    transform: translateX(-50%) translateY(0);
  }
  /* v3.19.43 HOVER BRIDGE — fixes "mega disappears when you move toward the
   * links". The mega panel anchors to .caviar-nav-bar (top:100% = bar bottom),
   * which sits ~22px below the vertically-centered nav links (10px nav-inner
   * bottom padding + the link centered inside the taller, logo-height row).
   * That empty strip drops .caviar-nav-item:hover before the cursor reaches the
   * panel. This transparent ::before extends the panel's hoverable area UP over
   * the gap; because it's a descendant of the <li>, hovering it keeps the item
   * (and the panel) in :hover. Height matches the measured gap. */
  .caviar-nav-dropdown.is-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2rem;      /* measured link->panel gap is ~28px; 32px covers it w/ margin */
    height: 2rem;
  }
  .caviar-nav-mega-cols {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 1.5rem 2rem;
    align-content: start;
  }
  /* Showcase image area (right). Reserved even when empty so the layout always
   * has room for an image — drop per-section images into assets/img/menu/
   * (caviar.jpg, gift-sets.jpg, …). The light bg reads as a reserved slot until
   * an image is added. */
  .caviar-nav-mega-aside {
    flex: 0 0 340px;
    align-self: stretch;
    min-height: 220px;
    background: oklch(0.97 0.006 85);
    overflow: hidden;
    display: flex;
  }
  .caviar-nav-mega-aside img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.caviar-nav-mega-col-title {
  /* v3.19.52: section titles now use the SAME default color as the regular
   * dropdown links (dark) — gold is reserved for the :hover state below,
   * applied uniformly to every dropdown link. Bold weight is kept so the
   * section heading still reads as a heading. Size + rhythm unchanged from
   * v3.19.45 (14px, padding 0.4rem 0, margin-bottom 0.9rem). */
  margin: 0 0 0.9rem;
  padding: 0.4rem 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.30 0.01 285);
}
.caviar-nav-mega-col-title a { color: inherit; text-decoration: none; }
.caviar-nav-mega-col-title a:hover,
.caviar-nav-mega-col-title a:focus { color: oklch(0.65 0.09 75); }
.caviar-nav-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.caviar-nav-mega-col ul li a {
  display: block;
  /* v3.19.42: left/right padding so the hover background isn't flush against
   * the text (like the mobile menu items). Negative margin bleeds the hover
   * fill to the column edges while keeping the text aligned with the title. */
  padding: 0.4rem 0.75rem;
  margin: 0 -0.75rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem; /* v3.19.45: 14px, consistent with all nav links */
  line-height: 1.7;    /* explicit so it matches the title box (even rhythm) */
  letter-spacing: 0.06em;
  text-transform: uppercase; /* all-caps dropdown links */
  color: oklch(0.30 0.01 285);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.caviar-nav-mega-col ul li a:hover,
.caviar-nav-mega-col ul li a:focus {
  background: oklch(0.98 0.005 90);
  color: oklch(0.65 0.09 75);
}

/* ---- Right icons ---- */
.caviar-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: oklch(0.22 0.005 285);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.caviar-header-icon:hover, .caviar-header-icon:focus { color: oklch(0.65 0.09 75); }
.caviar-header-icon svg { display: block; }
.caviar-header-cart-count {
  position: absolute;
  top: 0.2rem;
  right: 0.1rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.3rem;
  background: oklch(0.65 0.09 75);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
  border-radius: 9999px;
  pointer-events: none;
  display: none;
}
.caviar-header-cart-count.is-active { display: block; }

/* Hamburger only visible below lg */
.caviar-header-burger { display: inline-flex; }
@media (min-width: 1024px) { .caviar-header-burger { display: none; } }

/* v3.19.42: keep the header on a single row on narrow phones. The now-
 * proportional logo (up to 240px) + four 2.4rem icons overran ~360–393px
 * viewports, pushing the burger off-screen and shifting the page L/R.
 * Below 1024px: trim the logo, tighten the icon gap, shrink the icon hit-
 * area a touch. On very narrow screens (≤374px, e.g. mini phones) also hide
 * the standalone search icon (search is still reachable in the menu drawer). */
@media (max-width: 1023px) {
  .caviar-header-logo img { max-width: 200px; }
  .caviar-nav-col-icons { gap: 0.1rem; }
  .caviar-header-icon { width: 2rem; height: 2rem; }
}
@media (max-width: 374px) {
  .caviar-header-logo img { max-width: 160px; }
  .caviar-header-search-toggle { display: none; }
}

/* ---- Search overlay ---- */
.caviar-search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid oklch(0.92 0.004 85);
  box-shadow: 0 14px 28px -18px oklch(0.22 0.06 255 / 0.18);
  z-index: 80;
}
.caviar-search-overlay[hidden] { display: none; }
.caviar-search-overlay-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
}
@media (min-width: 1024px) { .caviar-search-overlay-inner { padding: 1.25rem 2rem; } }
.caviar-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid oklch(0.88 0.008 85);
  padding: 0.4rem 0.5rem 0.4rem 1rem;
}
.caviar-search-form:focus-within { border-color: oklch(0.65 0.09 75); }
.caviar-search-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  padding: 0.6rem 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  color: oklch(0.22 0.005 285);
  background: transparent;
}
.caviar-search-input::placeholder { color: oklch(0.55 0.01 285); }
.caviar-search-submit, .caviar-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: oklch(0.40 0.005 285);
  cursor: pointer;
  transition: color 0.2s ease;
}
.caviar-search-submit:hover, .caviar-search-close:hover { color: oklch(0.65 0.09 75); }

/* ---- Mobile drawer ---- */
.caviar-mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 32, 0.45);
  z-index: 200;
  display: none;
}
.caviar-mobile-drawer:not([hidden]) { display: block; }
.caviar-mobile-drawer-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 86vw;
  max-width: 360px;
  background: #fff;
  padding: 1.5rem 1.25rem 2rem;
  overflow-y: auto;
  box-shadow: -16px 0 32px -18px rgba(8, 12, 32, 0.28);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.caviar-mobile-drawer.is-open .caviar-mobile-drawer-inner {
  transform: translateX(0);
}
.caviar-mobile-drawer-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: oklch(0.30 0.005 285);
  cursor: pointer;
}
.caviar-mobile-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  font-family: "DM Sans", sans-serif;
}
/* v3.19.52: top-level drawer LI is a 2-col grid — link on the left, chevron
 * button on the right, dropdown spans both cols below. This lets the link be
 * tapped to NAVIGATE (its own click area) and only the chevron toggle the
 * submenu. LIs without a dropdown just have the link in col 1 (col 2 empty). */
.caviar-mobile-list li.caviar-nav-item {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  border-bottom: 1px solid oklch(0.92 0.004 85);
}
.caviar-mobile-list .caviar-nav-link {
  grid-column: 1;
  grid-row: 1;
  display: block !important;
  /* v3.19.56: matched to children's padding (was 0.85rem) so every row in the
   * drawer has the same vertical rhythm. Weight 400 (was 600) — all links
   * read uniformly, no bold tier. line-height 1.4 matches section titles
   * (the desktop rule leaks line-height 1.7 to children otherwise, making
   * sub-link rows ~4px taller than title rows). */
  padding: 0.7rem 0.25rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  color: oklch(0.30 0.01 285);
}
.caviar-mobile-list .caviar-nav-toggle {
  grid-column: 2;
  grid-row: 1;
  padding: 0.7rem 0.5rem 0.7rem 1.25rem; /* v3.19.56: match link row padding */
  color: oklch(0.30 0.01 285);
}
.caviar-mobile-list .caviar-nav-link:hover,
.caviar-mobile-list .caviar-nav-link:focus,
.caviar-mobile-list .caviar-nav-toggle:hover,
.caviar-mobile-list .caviar-nav-toggle:focus { color: oklch(0.65 0.09 75); }
.caviar-mobile-list .caviar-nav-item.is-open .caviar-nav-chevron { transform: rotate(180deg); }
/* v3.19.44: every layout-affecting property here is forced with !important so
 * the drawer is ALWAYS a static, full-width, block accordion — independent of
 * the desktop mega rules (the drawer reuses divi_caviar_render_header_menu, so
 * the same markup carries both). This no longer relies on the @media scoping
 * "winning"; even if the desktop mega rules ever apply here, these override
 * them. (Diagnosing a device that rendered the wide desktop mega in the drawer
 * despite the >=1024px scoping — this removes the dependency entirely.) */
.caviar-mobile-list .caviar-nav-dropdown {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  border: 0;
  box-shadow: none;
  padding: 0 0 0.5rem 0;
  display: none;
  /* v3.19.52: dropdown is grid row 2, spanning both cols (link + chevron). */
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}
.caviar-mobile-list .caviar-nav-item.has-dropdown.is-open > .caviar-nav-dropdown { display: block !important; }
/* v3.19.52: drawer child links — flat, same color + size as top-level, no
 * left indent, hover gold. */
.caviar-mobile-list .caviar-nav-dropdown li a {
  display: block;
  padding: 0.7rem 0.25rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4; /* v3.19.56: match section titles + top-level (even rhythm) */
  color: oklch(0.30 0.01 285);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.caviar-mobile-list .caviar-nav-dropdown li a:hover,
.caviar-mobile-list .caviar-nav-dropdown li a:focus { color: oklch(0.65 0.09 75); }
/* Mega dropdown inside the mobile drawer: stack columns vertically,
 * column titles become section headings, links indent. */
.caviar-mobile-list .caviar-nav-dropdown.is-mega {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: 0 !important;
  padding: 0 0 0.5rem 0 !important;
  /* display is owned by the open/close toggle above — do NOT set it here, or
   * the panel would show while collapsed. */
}
.caviar-mobile-list .caviar-nav-mega-cols {
  display: block !important;
  width: auto !important;
  grid-template-columns: none !important;
}
/* v3.19.43/44: the showcase image belongs to the DESKTOP mega only — never show
 * it in the mobile drawer (the drawer reuses the same render fn). */
.caviar-mobile-list .caviar-nav-mega-aside { display: none !important; }
.caviar-mobile-list .caviar-nav-mega-col {
  padding: 0;
}
/* v3.19.52: drawer mega items — section titles and child links uniform with
 * the top-level (same dark color, same size, hover gold, no left indent).
 * Titles get a slightly bolder weight so they still read as section heads. */
.caviar-mobile-list .caviar-nav-mega-col-title {
  margin: 0;
  padding: 0.7rem 0.25rem;
  font-size: 0.9rem;
  /* v3.19.56: weight 400 (was 600) — all drawer links uniform, no bold tier. */
  font-weight: 400;
  letter-spacing: 0.06em;
  color: oklch(0.30 0.01 285);
  text-transform: uppercase;
  line-height: 1.4;
}
.caviar-mobile-list .caviar-nav-mega-col-title a {
  display: block;
  color: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.caviar-mobile-list .caviar-nav-mega-col-title a:hover,
.caviar-mobile-list .caviar-nav-mega-col-title a:focus { color: oklch(0.65 0.09 75); }
/* v3.19.52: explicitly reset list defaults inside the drawer (the desktop
 * reset for `.caviar-nav-mega-col ul` lives inside @media min-width:1024px
 * so it doesn't apply here — without this the browser default
 * `list-style: disc` + `padding-inline-start: 40px` would re-indent every
 * child link by 40px). */
.caviar-mobile-list .caviar-nav-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.caviar-mobile-list .caviar-nav-mega-col ul li a {
  display: block;
  padding: 0.7rem 0.25rem;
  /* v3.19.53: reset the desktop rule's `margin: 0 -0.75rem` (it lives
   * outside @media min-width:1024px so it leaks into the drawer, shifting
   * child links ~12px left of the section-title and top-level rows). */
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  /* v3.19.56: 1.4 to match the section title line-height (desktop sets 1.7
   * via an outside-@media rule that otherwise leaks here, making child rows
   * ~4px taller than title rows → uneven row-to-row gaps). */
  line-height: 1.4;
  color: oklch(0.30 0.01 285);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal;
}
.caviar-mobile-list .caviar-nav-mega-col ul li a:hover,
.caviar-mobile-list .caviar-nav-mega-col ul li a:focus { color: oklch(0.65 0.09 75); }

/* ==========================================================================
 * Footer — trust strip + 4 link cols + brand col + bottom bar
 *
 * Selectors are scoped under `body` and key font/margin properties
 * use !important — Divi's parent stylesheet sets `body h3 { ... }`,
 * `a { font-family: ... }` etc. with high specificity, so without
 * this hardening the headings render in Open Sans at h3-default size
 * instead of Playfair @ 1.05rem.
 * ========================================================================== */

body .caviar-footer {
  font-family: "DM Sans", sans-serif !important;
  color: rgba(255, 255, 255, 0.82);
  background: #051a36;
  font-size: 0.875rem;
  line-height: 1.55;
}
/* Reset Divi/UA defaults inside the footer */
body .caviar-footer h1,
body .caviar-footer h2,
body .caviar-footer h3,
body .caviar-footer h4,
body .caviar-footer h5,
body .caviar-footer h6 {
  font-family: "Playfair Display", serif !important;
  font-weight: 500;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  color: #fff;
  text-transform: none;
}
body .caviar-footer p,
body .caviar-footer ul,
body .caviar-footer li,
body .caviar-footer address,
body .caviar-footer span,
body .caviar-footer div,
body .caviar-footer a,
body .caviar-footer strong {
  font-family: "DM Sans", sans-serif !important;
}
body .caviar-footer ul { list-style: none; padding: 0; margin: 0; }
body .caviar-footer p { margin: 0; }
body .caviar-footer address { font-style: normal; }
body .caviar-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
  background: transparent;
  box-shadow: none;
}
body .caviar-footer a:hover,
body .caviar-footer a:focus { color: oklch(0.78 0.07 75); }

/* ---- Trust strip (separator above main footer) ---- */
.caviar-trust-strip {
  background: #061f3f;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.caviar-trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .caviar-trust-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .caviar-trust-inner {
    grid-template-columns: repeat(3, 1fr);
    padding: 1.75rem 1.5rem;
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .caviar-trust-inner { padding-left: 2rem; padding-right: 2rem; }
}
.caviar-trust-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.caviar-trust-icon { color: oklch(0.78 0.07 75); flex-shrink: 0; }
body .caviar-trust-title {
  font-family: "Playfair Display", serif !important;
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.caviar-trust-text {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}
.caviar-trust-text a { color: rgba(255, 255, 255, 0.92); }
/* `width: 260px` (not `max-width: 260px`) because Divi parent ships
   `body img { max-width: 100% }` and similar rules that win against
   bare `max-width` overrides. !important ensures the size sticks even
   when WC/Divi enqueues another image-sizing pass. */
body .caviar-trust-payments {
  display: block !important;
  width: 260px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0.4rem auto 0;
  opacity: 0.95;
}

/* ---- Main footer (brand + 4 link cols) ---- */
.caviar-footer-main { padding: 3rem 0 2rem; }
.caviar-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .caviar-footer-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .caviar-footer-inner { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
  .caviar-footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 1024px) {
  .caviar-footer-inner { grid-template-columns: 1.3fr 3fr; gap: 3rem; }
}

/* Brand column */
.caviar-footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.caviar-footer-logo { display: inline-flex; align-self: flex-start; }
.caviar-footer-logo img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 220px;
}
body .caviar-footer-blurb {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  max-width: 32ch;
}
.caviar-footer-address {
  margin: 0;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
body .caviar-footer-address p { margin: 0; padding: 0; }
body .caviar-footer-address-title {
  margin: 0 0 0.2rem;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
body .caviar-footer-contact {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  line-height: 1.4;
}
.caviar-footer-contact-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
}
.caviar-footer-address a { color: rgba(255, 255, 255, 0.92); }
.caviar-footer-address a:hover, .caviar-footer-address a:focus { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.caviar-footer-social { display: flex; gap: 0.6rem; margin-top: 0.25rem; }
.caviar-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.18s ease, color 0.18s ease;
}
.caviar-footer-social-link:hover, .caviar-footer-social-link:focus {
  background: oklch(0.65 0.09 75);
  color: #fff;
}

/* Link columns wrapper */
.caviar-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.5rem;
}
@media (min-width: 1024px) {
  .caviar-footer-cols { grid-template-columns: repeat(4, 1fr); }
}

.caviar-footer-col { min-width: 0; }
body .caviar-footer-col-title,
body .caviar-footer-col-title a {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
body .caviar-footer-col-title {
  margin: 0;
  color: #fff;
}
body .caviar-footer-col-title a { color: #fff; }
body .caviar-footer-col-title a:hover,
body .caviar-footer-col-title a:focus { color: oklch(0.78 0.07 75); }

body .caviar-footer-list {
  list-style: none;
  margin: 0;
  /* v3.19.41: even rhythm. NOTE the previous attempt failed because Divi/WC
   * `ul { padding: 0 }` resets were winning the cascade (the list padding
   * computed to 0, so the heading sat ~1px above the first link). The
   * higher-specificity + !important rule below re-establishes a gap that
   * matches the inter-item rhythm so the column reads as one evenly-spaced
   * list. */
  padding: 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
/* Beat the Divi/WC ul-padding reset (higher specificity + !important). The
 * value matches the link→link gap so heading→first-link is visually equal. */
body nav.caviar-footer-col ul.caviar-footer-list {
  padding-top: 0.55rem !important;
}
body .caviar-footer-list li { margin: 0; padding: 0; }
body .caviar-footer-list a {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 400;
}
body .caviar-footer-list a:hover,
body .caviar-footer-list a:focus { color: #fff; }

/* ---- Geo row (sits above the bottom bar). The grid template
       mirrors the main footer (1.3fr brand spacer + 4 link cols)
       so each geo link aligns directly under its column above. */
.caviar-footer-geo-row {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: #051a36;
}
.caviar-footer-geo-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.5rem;
  align-items: center;
}
@media (min-width: 640px) {
  .caviar-footer-geo-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .caviar-footer-geo-inner { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
  .caviar-footer-geo-inner {
    grid-template-columns: 1.3fr 3fr;
    gap: 3rem;
  }
}
.caviar-footer-geo-spacer { display: none; }
@media (min-width: 1024px) {
  .caviar-footer-geo-spacer { display: block; }
}
.caviar-footer-geo-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
}
@media (min-width: 1024px) {
  .caviar-footer-geo-cols { grid-template-columns: repeat(4, 1fr); }
}
body .caviar-footer-geo-link {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
body .caviar-footer-geo-link:hover,
body .caviar-footer-geo-link:focus { color: oklch(0.78 0.07 75); }

/* ---- Bottom bar ---- */
.caviar-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: #03132a;
}
.caviar-footer-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.66);
  text-align: center;
}
@media (min-width: 640px) {
  .caviar-footer-bottom-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .caviar-footer-bottom-inner { flex-direction: row; padding: 1rem 1.5rem; text-align: left; }
}
@media (min-width: 1024px) {
  .caviar-footer-bottom-inner { padding-left: 2rem; padding-right: 2rem; }
}
body .caviar-footer-copyright { margin: 0; font-size: 0.78rem; }
.caviar-footer-bottom-links { display: flex; gap: 1.25rem; }
body .caviar-footer-bottom-links a {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
}
body .caviar-footer-bottom-links a:hover,
body .caviar-footer-bottom-links a:focus { color: #fff; }


/* ==========================================================================
 * 404 (Not Found) — see 404.php. Loads here because is_404() is now part of
 * divi_caviar_is_ihoc_page(), so this bundle reaches the 404.
 * ========================================================================== */
body.error404 .caviar-404 {
  padding: 6rem 1.5rem;
}
@media (min-width: 1024px) {
  body.error404 .caviar-404 { padding: 8rem 2rem; }
}
body.error404 .caviar-404-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
body.error404 .caviar-404-divider {
  margin-left: auto;
  margin-right: auto;
}
body.error404 .caviar-404-text {
  margin: 1.25rem 0 2rem;
  color: oklch(0.50 0.01 285);
  font-size: 1.05rem;
  line-height: 1.6;
}
/* Rotating illustration — 500x400 transparent PNG between text + buttons.
 * Sits centered; scales down on small screens but never up past its 500px
 * native width. The width/height attrs on the <img> reserve space to avoid
 * layout shift.
 *
 * Selector note: must out-specify the generic content-image rule
 *   body.caviar-ihoc-page .caviar-page-content img { max-width:100%; margin:1.5rem 0 }
 * (0,2,2). Scoping through .caviar-404-inner + img.caviar-404-image gives
 * (0,3,2) so our 500px cap + centered margin win. */
body.error404 .caviar-404-inner img.caviar-404-image {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto 2.5rem;
}

body.error404 .caviar-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Buttons: a matched pair that mirrors the theme's canonical .btn-primary
 * (ships in ihoc.css: #051a36 bg / #faf8f5 text / 0.85rem 2rem / DM Sans
 * 0.75rem 600 / 0.12em / uppercase / hover #182e4b + lift). On a bare <a>
 * inside the Divi parent, the parent's anchor styles override the plain
 * .btn-primary class — so, exactly like the .caviar-brand-story CTA, we
 * re-pin both buttons with !important here. The secondary is the outline
 * counterpart at IDENTICAL dimensions so the pair reads as a set. */
body.error404 .caviar-404-actions .btn-primary,
body.error404 .caviar-404-actions .btn-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem !important;
  border: 1px solid var(--caviar-navy) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
/* Primary — navy filled */
body.error404 .caviar-404-actions .btn-primary {
  background: var(--caviar-navy) !important;
  color: #faf8f5 !important;
}
body.error404 .caviar-404-actions .btn-primary:hover,
body.error404 .caviar-404-actions .btn-primary:focus {
  background: var(--caviar-navy-light) !important;
  color: #faf8f5 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(5, 26, 54, 0.3);
}
/* Secondary — navy outline, fills on hover */
body.error404 .caviar-404-actions .btn-secondary {
  background: transparent !important;
  color: var(--caviar-navy) !important;
}
body.error404 .caviar-404-actions .btn-secondary:hover,
body.error404 .caviar-404-actions .btn-secondary:focus {
  background: var(--caviar-navy) !important;
  color: #faf8f5 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(5, 26, 54, 0.3);
}

/* ==========================================================================
 * RESPONSIVE HORIZONTAL PADDING — all IHOC section containers (v3.19.31)
 *
 * Every IHOC section centers its content in an inner wrapper:
 *     <div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8"> … </div>
 * The `px-4 sm:px-6 lg:px-8` is supposed to give 1rem / 1.5rem / 2rem of
 * left+right padding. BUT the Divi parent theme resets padding on these
 * elements (documented in §1a, "Tailwind utility versions keep losing to
 * Divi parent's element resets"), and our earlier overrides only re-pinned
 * VERTICAL padding (hero/breadcrumb). Result: on mobile the content went
 * edge-to-edge (title/description/badges flush to the screen edge).
 *
 * Re-pin the responsive HORIZONTAL padding here, !important, on the shared
 * inner-container class so it applies to EVERY template at once — PDP,
 * shop archive, breadcrumb bar, related products, testimonials, trust bar,
 * CTA blocks, blog, etc. (The full-bleed hero uses its own
 * .caviar-hero-content wrapper, not .max-w-[1280px], so it's unaffected.)
 * ========================================================================== */
body.caviar-ihoc-page .max-w-\[1280px\] {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) {
  body.caviar-ihoc-page .max-w-\[1280px\] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (min-width: 1024px) {
  body.caviar-ihoc-page .max-w-\[1280px\] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* ==========================================================================
 * v3.19.49: NO ITALICS across the child theme.
 *
 * Italic text (Playfair italic in particular) reads as decorative but is
 * hard to scan, per the user. This forces font-style:normal on every text
 * surface owned by the child theme. !important is necessary to beat:
 *   - inline style="font-style: italic" on individual elements,
 *   - the Tailwind `italic` utility class on testimonial / quote markup,
 *   - any italic Playfair variant inherited from Divi parent rules.
 *
 * Scoped to caviar-* surfaces and body tags the theme adds — so this does
 * NOT touch the WP admin (admin instruction <em> stays italic for editors)
 * or pure-Divi pages unrelated to caviar.
 *
 * If a future element legitimately needs italic, give it a dedicated class
 * and set font-style: italic with higher specificity / !important.
 * ========================================================================== */
body.caviar-ihoc-page,
body.caviar-ihoc-page *,
body.caviar-woo-page,
body.caviar-woo-page *,
body.caviar-woo-fullwidth,
body.caviar-woo-fullwidth *,
.caviar-page-main,
.caviar-page-main *,
.caviar-footer,
.caviar-footer *,
.caviar-nav-bar,
.caviar-nav-bar *,
.caviar-mobile-drawer,
.caviar-mobile-drawer * {
  font-style: normal !important;
}

/* ==========================================================================
 * v3.19.51 — Single product page "Customer Reviews" list.
 *
 * Markup lives in woocommerce/single-product.php (rendered inline — the
 * theme contract still forbids render hooks). The whole section is
 * suppressed in PHP when a product has zero approved reviews, so any rule
 * here only paints when there's something to show.
 * ========================================================================== */
.caviar-reviews-heading {
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: oklch(0.22 0.005 285);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  line-height: 1.3;
}
.caviar-reviews-count {
  font-weight: 500;
  font-size: 0.9em;
  color: oklch(0.55 0.01 285);
  margin-left: 0.35rem;
}
/* v3.19.53: reviews laid out as a grid of cards — 1 col mobile, 2 cols on
 * ≥640px desktop. Each item gets a subtle bordered card treatment so the
 * list reads as balanced tiles instead of a long vertical stack. */
.caviar-reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .caviar-reviews-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
.caviar-review-item {
  padding: 1.25rem 1.4rem;
  border: 1px solid oklch(0.92 0.004 85);
  /* v3.19.54: white card on white wrap — same surface as the hero/product
   * description; the 1px border still defines each card cleanly. */
  background: #fff;
  min-width: 0;
}
.caviar-review-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}
.caviar-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  line-height: 1;
}
.caviar-review-stars svg { display: block; }
.caviar-review-byline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: "DM Sans", sans-serif;
}
.caviar-review-author {
  font-weight: 600;
  font-size: 0.95rem;
  color: oklch(0.22 0.005 285);
}
.caviar-review-date {
  font-size: 0.82rem;
  color: oklch(0.55 0.01 285);
}
.caviar-review-content,
.caviar-review-content p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: oklch(0.30 0.01 285);
}
.caviar-review-content p { margin: 0 0 0.65rem; }
.caviar-review-content p:last-child { margin-bottom: 0; }