/* =====================================================================
   Product Detail Page — gallery (left) + sticky summary panel (right)
   Paired with template-parts/content-product.php + assets/js/product-gallery.js
   ===================================================================== */

.dm-pdp {
  background: var(--color-sand, var(--color-sand));
  padding: 20px 0 48px;
  color: var(--color-forest, var(--dm-fg-default-primary));
}

/* Breadcrumb type is centralised in style.css (.breadcrumbs.text-forest);
   only the page-specific spacing lives here. */
.dm-pdp__breadcrumb {
  margin-bottom: 20px;
}

.dm-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 1024px) {
  .dm-pdp__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: start;
  }
}

/* ------------------------------------------------------------------ Gallery */
.dm-pdp__gallery {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  /* Two-column (thumb rail + stage) only when there are multiple images;
     a single-image product keeps the stage full-width. */
  .dm-pdp__gallery.has-thumbs {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
  }
}

/* Thumbnail rail — desktop only, sticky beside the stage */
.dm-pdp__thumbs {
  display: none;
}

@media (min-width: 1024px) {
  .dm-pdp__thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: calc(var(--dm-header-h, 92px) + 16px);
    align-self: start;
  }
}

.dm-pdp__thumb {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-cream);
  cursor: pointer;
  transition: border-color 0.2s var(--dm-ease, ease), opacity 0.2s ease;
  opacity: 0.72;
}

.dm-pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lead thumbnail only: the bottle packshot is fitted whole inside the tile
   instead of cropped, with the cream tile filling the rest. The lifestyle
   shots after it keep the square cover crop above. */
.dm-pdp__thumbs .dm-pdp__thumb:first-child {
  padding: 4px;
}

.dm-pdp__thumbs .dm-pdp__thumb:first-child img {
  object-fit: contain;
  object-position: center;
}

.dm-pdp__thumb.is-active,
.dm-pdp__thumb:hover {
  opacity: 1;
}

.dm-pdp__thumb.is-active {
  border-color: var(--color-forest, var(--dm-border-default-dark-strong));
}

/* Stage — horizontal snap carousel on mobile, vertical stack on desktop */
.dm-pdp__stage {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 4px;
}

.dm-pdp__stage::-webkit-scrollbar {
  display: none;
}

.dm-pdp__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-cream);
}

.dm-pdp__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dm-pdp__slide.is-bottle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-pdp__slide.is-bottle img {
  width: auto;
  object-fit: contain;
  padding: 24px;
}

@media (min-width: 1024px) {
  .dm-pdp__stage {
    display: block;
    overflow: visible;
    border-radius: 0;
  }

  .dm-pdp__slide {
    flex: none;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--color-cream);
  }

  .dm-pdp__slide:last-child {
    margin-bottom: 0;
  }

  .dm-pdp__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .dm-pdp__slide.is-bottle {
    background: var(--color-cream);
  }

  .dm-pdp__slide.is-bottle img {
    object-fit: contain;
    padding: 40px 0;
  }

  .dm-pdp__slide:not(.is-bottle) {
    border-radius: 2px;
  }
}

/* Mobile progress bar (under the carousel) */
.dm-pdp__progress {
  height: 3px;
  margin-top: 14px;
  background: var(--color-beige-dark);
  border-radius: 2px;
  overflow: hidden;
}

.dm-pdp__progress-bar {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  border-radius: 2px;
  transition: width 0.2s ease;
}

@media (min-width: 1024px) {
  .dm-pdp__progress {
    display: none;
  }
}

/* -------------------------------------------------------------------- Panel */
@media (min-width: 1024px) {
  .dm-pdp__panel {
    position: sticky;
    /* pdp-details-scroll.js overrides --dm-pdp-panel-top with a negative value
       when the panel is taller than the viewport, so the panel pins by its
       bottom edge and its lower sections stay reachable. */
    top: var(--dm-pdp-panel-top, calc(var(--dm-header-h, 92px) + 16px));
    align-self: start;
  }
}

/* heading/h4 */
.dm-pdp__title {
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2; /* 120% */
  color: var(--dm-bg-default-tertiary);
  margin: 0 0 12px;
}

/* Category — body/sm/regular */
.dm-pdp__collection {
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  margin: 0 0 10px;
}

.dm-pdp__collection a:hover {
  text-decoration: underline;
}

.dm-pdp__rating {
  margin: 4px 0 14px;
  min-height: 20px;
}

/* body/sm/regular — secondary */
.dm-pdp__meta {
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-fg-default-secondary);
  margin: 0 0 16px;
}

/* body/md/regular */
.dm-pdp__desc {
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  max-width: 500px; /* Figma/client spec: the description caps at 500px */
  margin: 0 0 14px;
}

/* Editor content: paragraphs keep the description's own type, spaced apart */
.dm-pdp__desc p {
  margin: 0 0 12px;
}

.dm-pdp__desc p:last-child {
  margin-bottom: 0;
}

.dm-pdp__desc a {
  color: inherit;
  text-decoration: underline;
}

/* body/sm/regular */
.dm-pdp__details-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  text-decoration: underline;
  text-underline-offset: 4px;
  /* Absorbs the gap the removed .dm-pdp__price-row used to add below it, so the
     plugin's price/fulfillment block keeps its position. */
  margin-bottom: 46px;
}

/* Anchor for the "Product Details" link. Zero-height marker that sits just
   above the Flavor Profile heading; the offset clears the sticky header. */
.dm-pdp__details-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--dm-header-h, 92px) + 16px);
}

.dm-pdp__details-link svg {
  width: 18px;
  height: 18px;
}

.dm-pdp__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 18px;
}

/* body/lg/strong */
.dm-pdp__price {
  font-family: var(--font-default, sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  text-align: right;
}

.dm-pdp__price-row .dm-price-tip__btn svg {
  width: 16px;
  height: 16px;
  color: var(--color-forest-light, var(--dm-ext-forest-light));
  display: block;
}

/* Actions row: Add to cart (dark pill) + Compare (outline pill) */
.dm-pdp__actions {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 10px;
}

.dm-pdp__cart {
  flex: 0 1 252px;
  max-width: 252px;
  min-width: 0;
}

/* Primary dark pill — scoped to ONLY the add-to-cart button and the quick-add
   trigger. Previously this targeted every button/link inside .dm-pdp__cart, which
   squashed the inline price block's retailer cards, "Change address", and
   "Find nearby" into fixed-height green pills (content overflowed and overlapped).
   The block's other elements now keep their own (Tailwind) styling. */
/* "Set delivery address" button — match the rounded add-to-cart pill (only the
   full button, not the inline "change address" underline link that shares the
   base class). */
.dm-pdp__cart .liquidcommerce-address-trigger-button:not(.change-address-inline) {
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* The add-to-cart pill (design board: forest, white 16px label, 48px tall,
   fully rounded). TWO different buttons can be the real add-to-cart:
     - `.pr-usa-lc-product__trigger` — what the theme renders in plain mode;
     - `.pr-usa-lc-atc` — built by the plugin's JS inside its delivery block
       in extended mode, where the plugin hides the trigger with its own
       `display:none` and this becomes the button that adds to cart.
   Both are named so the pill survives either mode. The selectors include
   .pr-usa-lc-theme and .button so they outweigh the plugin's own
   `.pr-usa-lc-theme .button.pr-usa-lc-btn--primary` rule whichever order
   the two sheets load in — colour comes from the shared variables in
   liquid-commerce.css, but the radius and height are ours alone. */
.dm-pdp__cart .liquidcommerce-add-to-cart-button,
.dm-pdp__cart .liquidcommerce-quick-add-trigger,
.dm-pdp__cart .pr-usa-lc-theme .button.pr-usa-lc-product__trigger,
.dm-pdp__cart .pr-usa-lc-theme .button.pr-usa-lc-atc {
  width: 100%;
  max-width: 252px; /* board width — never a full-bleed bar, even inside the plugin's row */
  min-height: 48px;
  border-radius: 999px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-fg-default-white); /* body/md/regular */
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  text-transform: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
}

/* The column holds the board's 252px, so Add to cart is a pill sitting beside
   Compare rather than a bar stretched across the panel. The one exception is
   the plugin's inline delivery block (address + fulfilment panels), which is a
   tall full-width thing — so the column only opens up once the plugin has
   actually rendered it. */
.dm-pdp__cart:has(.pr-usa-lc-product__express),
.dm-pdp__cart:has(.pr-usa-lc-atc-row),
.dm-pdp__cart:has(.liquidcommerce-price-display) {
  flex: 1 1 100%;
  max-width: none;
}

/* ...but the delivery block itself (address line, Fulfillment Option heading
   and the retailer panel) caps at the description's 500px, so the "Change"
   links and the panel edge line up with the copy above instead of running
   the full width of the summary column. */
.dm-pdp__cart .pr-usa-lc-product__express {
  max-width: 500px;
}

/* "Change shipping option" reads the same as the address line's "Change":
   the plugin gives it its own medium weight, rem size and tight underline,
   whereas "Change" just inherits the body text. */
.dm-pdp__cart .pr-usa-lc-fulfillment__change {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-underline-offset: auto;
}

/* "Fulfillment Option" takes the panel's own subheading style (heading/h6,
   as .dm-pdp__section-title — "Flavor Profile", "Tasting"). The plugin sets
   it bold, and the display face has no bold cut, so it came out as a
   browser-faked heavy serif. The plugin's font-family is !important. */
.dm-pdp__cart .pr-usa-lc-fulfillment__heading {
  font-family: var(--font-display, serif) !important;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2; /* 120% */
  color: var(--dm-bg-default-tertiary);
}

/* ---- Retailer offers: a stacked list ------------------------------------
   "Change shipping option" opens the plugin's list of every retailer's
   offer as a sideways carousel. It showed about one and a half cards, cut
   the rest off mid-word, and its max-content track pushed the whole summary
   column wider than a phone screen. Here the offers stack into rows at every
   width, as in the Buy Now sidebar, so the prices can be compared at a
   glance. pdp-fulfillment-list.js folds a long list down to three rows.
   The plugin's script only ever scrolls the viewport sideways, so once the
   offers stack its arrows have nothing to do, and they're hidden. */
.dm-pdp__cart .pr-usa-lc-fulfillment {
  --dm-lc-icon-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11v9h15v-9'/%3E%3Cpath d='M3.5 4.5h17l-1.3 4.3a2.5 2.5 0 0 1-4.8 0 2.6 2.6 0 0 1-4.9 0 2.5 2.5 0 0 1-4.8 0Z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
  --dm-lc-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11V15h-11z'/%3E%3Cpath d='M13.5 9.5h4l3.5 3.5v2h-7.5'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

/* On a narrow phone the heading and "Change shipping option" can't always
   share a line; the link drops under the heading instead of overflowing. */
.dm-pdp__cart .pr-usa-lc-fulfillment__header {
  flex-wrap: wrap;
  row-gap: 4px;
}

.dm-pdp__cart .pr-usa-lc-fulfillment-carousel {
  overflow: visible; /* so the focus ring on a row isn't clipped */
}

.dm-pdp__cart .pr-usa-lc-fulfillment-carousel__nav {
  display: none;
}

/* The plugin's `touch-action: pan-x` would stop the page scrolling on a
   phone whenever a swipe starts on the list. */
.dm-pdp__cart .pr-usa-lc-fulfillment-carousel__viewport {
  overflow: visible;
  scroll-snap-type: none;
  touch-action: auto;
  user-select: auto;
  cursor: auto;
}

.dm-pdp__cart .pr-usa-lc-fulfillment-carousel__track {
  flex-direction: column;
  gap: 8px;
  width: auto;
  padding: 0;
}

.dm-pdp__cart .pr-usa-lc-options {
  gap: 8px;
}

/* Rows: white on the cream panel with a hairline, like the sidebar's offer
   cards. The chosen one gets a forest edge, a filled forest radio and a
   faint forest tint. */
.dm-pdp__cart .pr-usa-lc-option {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dm-bg-default-white, #FFFFFF);
  border: 1px solid var(--dm-border-default-dark, rgba(0, 0, 0, .15));
  border-radius: 12px;
  color: var(--dm-fg-default-primary, #062D20);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.dm-pdp__cart .pr-usa-lc-fulfillment-carousel__viewport.is-dragging .pr-usa-lc-option {
  cursor: pointer;
}

.dm-pdp__cart .pr-usa-lc-option:hover {
  border-color: var(--dm-border-default-dark-strong, #062D20);
}

.dm-pdp__cart .pr-usa-lc-option:has(input:checked) {
  background: color-mix(in srgb, var(--color-forest, #062D20) 5%, var(--dm-bg-default-white, #FFFFFF));
  border-color: var(--dm-border-default-dark-strong, #062D20);
  box-shadow: inset 0 0 0 .5px var(--dm-border-default-dark-strong, #062D20);
}

.dm-pdp__cart .pr-usa-lc-option:has(input:focus-visible) {
  outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
  outline-offset: 2px;
}

/* Folded away by pdp-fulfillment-list.js until "Show N more" is pressed. */
.dm-pdp__cart .pr-usa-lc-option.is-dm-folded {
  display: none;
}

/* Drawn radio: forest ring on white; checked, a forest dot inside it. */
.dm-pdp__cart .pr-usa-lc-option input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  background: var(--dm-bg-default-white, #FFFFFF);
  border: 1.5px solid var(--dm-border-default-dark-strong, #062D20);
  border-radius: 50%;
  cursor: pointer;
}

.dm-pdp__cart .pr-usa-lc-option input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dm-border-default-dark-strong, #062D20);
  transform: scale(0);
  transition: transform .2s ease;
}

.dm-pdp__cart .pr-usa-lc-option input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Title on its own line; retailer and shipping share the line under it when
   they fit (desktop) and wrap onto a line each when they don't (phones, or
   a long retailer name). Each is led by its icon, so a wrapped line still
   reads cleanly without a separator. */
.dm-pdp__cart .pr-usa-lc-option__body {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.dm-pdp__cart .pr-usa-lc-option__title {
  flex: 1 0 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}

.dm-pdp__cart :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details) {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dm-fg-default-secondary, #70695C);
  transition: color .25s ease;
}

.dm-pdp__cart :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details)::before {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--dm-lc-icon-store) center / contain no-repeat;
  mask: var(--dm-lc-icon-store) center / contain no-repeat;
}

.dm-pdp__cart .pr-usa-lc-option__details::before {
  -webkit-mask-image: var(--dm-lc-icon-truck);
  mask-image: var(--dm-lc-icon-truck);
}

.dm-pdp__cart .pr-usa-lc-option:has(input:checked) :is(.pr-usa-lc-option__retailer, .pr-usa-lc-option__details) {
  color: color-mix(in srgb, var(--color-forest, #062D20) 80%, transparent);
}

/* "Show N more retailers": the same underlined body-text link as "Change
   shipping option", with a small chevron. */
.dm-pdp__cart .dm-lc-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--dm-fg-default-primary, #062D20);
  text-decoration: underline;
  cursor: pointer;
}

.dm-pdp__cart .dm-lc-more::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
}

.dm-pdp__cart .dm-lc-more:hover {
  text-decoration-thickness: 2px;
}

.dm-pdp__cart .dm-lc-more:focus-visible {
  outline: 2px solid var(--dm-border-default-dark-strong, #062D20);
  outline-offset: 2px;
}

/* Phones: a little tighter, so three rows plus the link stay close to the
   height of the one carousel card they replace. */
@media (max-width: 767px) {
  .dm-pdp__cart .pr-usa-lc-option {
    gap: 10px;
    padding: 12px 14px;
  }

  .dm-pdp__cart .pr-usa-lc-option__body {
    row-gap: 2px;
  }
}

/* While the plugin is still fetching retailers ("Loading…"), Compare hasn't
   been moved into the add-to-cart row yet — it's still beside .dm-pdp__cart
   in this row, squeezing the address line next to it. Keep it out of sight
   until the row exists, and let the row wrap so that if the fetch ends in an
   error (no row to move into) Compare drops onto its own line instead. */
.dm-pdp__actions:has(.pr-usa-lc-product__express) {
  flex-wrap: wrap;
}
.dm-pdp__actions:has(.pr-usa-lc-product__express .pr-usa-lc-loading) > .dm-pdp__compare {
  display: none;
}

/* Add-to-cart + Compare share ONE row inside the plugin's own wrapper (Compare
   is moved in by the small script in content-product.php), with the price block
   full-width above them. Only Compare is moved, so the plugin's button and its
   re-renders are untouched. */
.dm-pdp__cart .liquidcommerce-add-to-cart-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.dm-pdp__cart .liquidcommerce-price-display {
  flex: 1 1 100%;
}
.dm-pdp__cart .liquidcommerce-add-to-cart-button {
  flex: 1 1 auto;
}
.dm-pdp__cart .dm-pdp__compare {
  flex: 0 0 auto;
  margin: 0;
}

/* Extended mode: the plugin's own add-to-cart row. It already ships as a
   flex row (`.pr-usa-lc-atc-row { display:flex }` in the plugin sheet), so
   Compare only has to be moved into it — done by the small script in
   content-product.php — and then it shares the line with Add to cart.
   Gap and alignment are pulled up to the board's 14px / centred. */
.dm-pdp__cart .pr-usa-lc-atc-row {
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.dm-pdp__compare {
  flex: 0 0 133px;
  width: 133px;
  max-width: 133px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-forest, var(--dm-border-default-dark-strong));
  background: transparent;
  color: var(--color-forest, var(--dm-fg-default-primary));
  font-family: var(--font-default, sans-serif);
  font-size: 16px; /* body/md/regular */
  font-weight: 400;
  line-height: 1.4; /* 140% */
  cursor: pointer;
}

.dm-pdp__compare svg {
  width: 18px;
  height: 18px;
}

/* body/sm/regular */
.dm-pdp__find {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.dm-pdp__find svg {
  width: 17px;
  height: 17px;
}

/* Mobile adjustments for the summary panel */
@media (max-width: 767px) {
  .dm-pdp {
    padding-top: 13px;
  }

  .dm-pdp__breadcrumb {
    padding-top: 0;
  }

  /* Add to cart grows to fill the row so Compare doesn't sit unevenly */
  .dm-pdp__cart {
    flex: 1 1 auto;
    max-width: none;
  }

  .dm-pdp__find {
    margin-top: 12px;
  }
}

/* Flavor Profile */
.dm-pdp__section {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--color-forest) 15%, transparent);
}

/* heading/h6 */
.dm-pdp__section-title {
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2; /* 120% */
  color: var(--dm-bg-default-tertiary);
  margin: 0 0 16px;
}

.dm-pdp__flavors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 14px;
  background: var(--dm-ext-grey-pale);
  border-radius: 10px;
  padding: 16px 14px;
}

.dm-pdp__flavor-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-default, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4; /* 140% */
  text-transform: uppercase;
  color: var(--dm-fg-default-primary);
}

/* body/xs/medium on mobile; desktop keeps 14px */
@media (max-width: 767px) {
  .dm-pdp__flavor-label {
    font-size: 12px;
  }
}

.dm-pdp__dots {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.dm-pdp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dm-ext-greige-dark);
  flex-shrink: 0;
}

.dm-pdp__dot.is-on {
  background: var(--color-forest, var(--dm-bg-default-tertiary));
}

/* Structured tasting rows (Tasting Notes / Nose / Palate / Finish) */
.dm-pdp__notes {
  display: block;
}

.dm-pdp__note {
  margin-bottom: 16px;
}

.dm-pdp__note:last-child {
  margin-bottom: 0;
}

.dm-pdp__note-label {
  display: block;
  font-family: var(--font-default, sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-forest, var(--dm-fg-default-primary));
  margin-bottom: 4px;
}

.dm-pdp__note-text {
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-forest) 80%, transparent);
  margin: 0;
}

/* Tasting / Awards accordions (native <details>) */
.dm-pdp__acc {
  border-top: 1px solid color-mix(in srgb, var(--color-forest) 15%, transparent);
}

/* No divider above the first accordion (Tasting) — the Flavor Profile box
   already sits directly above it. */
.dm-pdp__acc:first-of-type {
  border-top: 0;
}

.dm-pdp__acc-head {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--font-display, serif);
  font-size: 22px;
  color: var(--color-forest, var(--dm-fg-default-primary));
}

@media (max-width: 767px) {
  .dm-pdp__acc-head {
    font-size: 20px;
  }
}

.dm-pdp__acc-head::-webkit-details-marker {
  display: none;
}

.dm-pdp__acc-head::after {
  content: "+";
  font-family: var(--font-default, sans-serif);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-forest, var(--dm-fg-default-primary));
  transition: transform 0.2s ease;
}

.dm-pdp__acc[open] .dm-pdp__acc-head::after {
  content: "−";
}

.dm-pdp__acc-body {
  padding: 0 0 22px;
  font-family: var(--font-default, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-forest, var(--dm-fg-default-primary));
}

.dm-pdp__acc-body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   "The best way to enjoy this Mezcal" full-bleed banner
   ============================================================ */
.dm-vida-banner {
  position: relative;
  display: flex;
  min-height: 560px;
  color: var(--dm-fg-default-white);
  /* background-image is set inline (gradient + product/ACF image) in the template */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .dm-vida-banner {
    min-height: 640px;
  }
}

/* Darkening overlay. Kept out of the inline style (which carries only the
   photo) so it can change per breakpoint: a left-heavy gradient by default,
   a flat 15% on the small-desktop board. */
.dm-vida-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--dm-ext-black) 55%, transparent) 0%, color-mix(in srgb, var(--dm-ext-black) 15%, transparent) 55%, transparent 100%);
}

/* Width + horizontal padding come from the shared container utilities
   (mx-auto lg:container px-4) so the text aligns with the rest of the page. */
.dm-vida-banner__inner {
  /* The section is a flex row, so without a width this item shrinks to its
     text and mx-auto centres it (visible on tablet, where there is no
     container width to fill). Full width keeps the copy on the page gutter. */
  position: relative;               /* above the ::before overlay */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
  box-sizing: border-box;
}

/* heading/h1 */
.dm-vida-banner__title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display, serif);
  font-weight: 400;
  /* heading-mobile/h1-M 40px. Only the >=1024 rule below sized this title
     before, so phones and portrait tablets fell back to the browser's ~16px. */
  font-size: 40px;
  line-height: 1.1; /* 110% */
  letter-spacing: -0.02em; /* -0.8px at 40px */
  color: var(--dm-fg-default-white);
}

/* Tablet: heading/h2 52px, a step under the 60px desktop h1. */
@media (min-width: 768px) {
  .dm-vida-banner__title {
    font-size: 52px;
  }
}

.dm-vida-banner__title em,
.dm-vida-banner__recipe-title em {
  font-style: italic;
}

.dm-vida-banner__recipe {
  max-width: 460px;
}

/* heading/h3 */
.dm-vida-banner__recipe-title {
  margin: 0 0 16px;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1; /* 110% */
  letter-spacing: -0.4px;
  color: var(--dm-fg-default-white);
}

/* body/lg/regular */
.dm-vida-banner__recipe-body {
  margin: 0 0 24px;
  font-family: var(--font-default, sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-white);
}

@media (min-width: 1024px) {
  .dm-vida-banner {
    min-height: 90vh;
  }

  .dm-vida-banner__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dm-vida-banner__title {
    font-size: 60px;
    letter-spacing: -1.2px;
  }

  .dm-vida-banner__recipe-title {
    font-size: 40px;
    letter-spacing: -0.4px;
  }
}

/* ============================================================
   "What defines this mezcal" — village story cards
   ============================================================ */
.dm-defines__inner {
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}

/* heading/h2 — IM Fell Double Pica */
.dm-defines__title {
  margin: 0 0 32px;
  text-align: center;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
  color: var(--dm-fg-default-primary);
}

.dm-defines__title em {
  font-style: italic;
}

.dm-defines__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 24px;
}

.dm-defines__media {
  aspect-ratio: 5 / 4; /* 472 × 377.6 */
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-cream);
  margin-bottom: 18px;
}

.dm-defines__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* heading/h5 — IM Fell Double Pica */
.dm-defines__card-title {
  margin: 0 0 10px;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--dm-fg-default-primary);
}

/* body/md/regular — Roboto Condensed */
.dm-defines__card-text {
  margin: 0;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dm-fg-default-primary);
  max-width: 42ch;
}

.dm-defines__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* On mobile the "Discover The Village" CTA moves up between the title and the
   cards (DOM order keeps it last, which desktop preserves). */
@media (max-width: 767px) {
  .dm-defines__inner {
    display: flex;
    flex-direction: column;
  }

  .dm-defines__title {
    order: 1;
    margin-bottom: 20px;
    text-align: left;
  }

  .dm-defines__cta-row {
    order: 2;
    margin: 0 0 32px;
    justify-content: flex-start;
  }

  .dm-defines__inner .dm-carousel {
    order: 3;
  }
}

@media (min-width: 768px) {
  .dm-defines__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dm-defines__inner {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .dm-defines__title {
    font-size: 52px; /* heading/h2 */
    margin-bottom: 44px;
  }

  .dm-defines__card-title {
    font-size: 24px;
  }
}

/* ============================================================
   "Similar mezcales you may enjoy"
   ============================================================ */
.dm-similar__inner {
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}

/* heading/h2 — IM Fell Double Pica */
.dm-similar__title {
  display: block; /* a <span> on cocktail pages (SEO: module title) */
  margin: 0 0 40px;
  text-align: center;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
  color: var(--dm-fg-default-primary);
}

.dm-similar__title em {
  font-style: italic;
}

@media (max-width: 767px) {
  .dm-similar__title {
    text-align: left;
  }
}

.dm-similar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.dm-similar__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 15px 28px;
  box-sizing: border-box;
}

/* Constrain + center the card content. */
.dm-similar__card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.dm-similar__card.is-recommended {
  background: var(--dm-bg-default-white);
  border-radius: 4px;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-forest) 8%, transparent);
}

@media (max-width: 767px) {
  /* Keep a breath of card below the add-to-cart pill: at 0 the white
     "Recommended" panel ended flush against the button. */
  .dm-similar__card {
    padding-bottom: 20px;
  }

  /* On mobile the white panel follows the carousel: the current slide gets
     it, whichever card that is, rather than the first card keeping it. */
  .dm-similar__card.is-recommended {
    background: transparent;
    box-shadow: none;
  }

  .dm-similar:not(.dm-similar--cocktail) .dm-similar__card.is-current {
    background: var(--dm-bg-default-white);
    border-radius: 4px;
  }
}

/* Dark "Recommended" pill over the bottle. */
.dm-similar__badge {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 87px;
  height: 24px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-fg-default-white);
  font-family: var(--font-default, sans-serif);
  font-size: 12px; /* body/xs/strong */
  font-weight: 500;
  line-height: 1.4; /* 140% */
  border-radius: 4px;
}

.dm-similar__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  margin-bottom: 20px;
}

.dm-similar__media img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* heading/h5 — IM Fell Double Pica italic */
.dm-similar__name {
  display: block; /* a <span> on cocktail pages (SEO) */
  margin: 0 0 10px;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2; /* 120% */
  color: var(--dm-bg-default-tertiary);
}

/* body/md/regular — clamped with ellipsis */
.dm-similar__desc {
  margin: 0 0 16px;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-similar__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* body/lg/strong */
.dm-similar__price {
  font-family: var(--font-default, sans-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
  text-align: right;
}

/* The ReserveBar mount stays empty and hidden until a shipping address is
   known, so the whole row (info icon included) has to go with it. */
.dm-similar__price-row:has(> .dm-similar__price[hidden]) {
  display: none;
}

.dm-similar__price[hidden] + .dm-price-tip {
  display: none;
}

/* The plugin writes the amount as `<strong>`; keep the row's own weight. */
.dm-similar__price strong {
  font-weight: inherit;
}

/* "Currently unavailable" lands in the same span — smaller, and not shouted. */
.dm-similar__price.pr-usa-lc-product__price--unavailable {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-forest-light, var(--dm-ext-forest-light));
}

.dm-similar__price-row .dm-price-tip__btn svg {
  width: 16px;
  height: 16px;
  color: var(--dm-fg-default-primary);
  display: block;
}

/* body/md/regular — secondary */
.dm-similar__spec {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-fg-default-secondary);
}

/* body/md/strong */
.dm-similar__notes-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-default, sans-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4; /* 140% */
  color: var(--dm-bg-default-tertiary);
}

/* body/md/regular — secondary */
.dm-similar__notes-text {
  margin: 0 0 16px;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% */
  color: var(--dm-fg-default-secondary);
}

/* Flavor meters reuse the PDP .dm-pdp__flavors styles; just space them here. */
.dm-similar__card .dm-pdp__flavors {
  margin-bottom: 20px;
}

/* Smaller axis labels inside the similar cards (12px vs 14px on the PDP). */
.dm-similar__card .dm-pdp__flavor-label {
  font-size: 12px; /* body/xs/strong */
}

.dm-similar__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm-similar__actions .dm-btn--outline {
  letter-spacing: 0.04em;
}

/* Mobile: tighten the gap between the flavor meters and the card buttons. */
@media (max-width: 767px) {
  .dm-similar__card .dm-pdp__flavors {
    margin-bottom: 10px;
  }

  .dm-similar__actions {
    margin-top: 13px;
    gap: 6px;
  }
}

/* Solid add-to-cart pill (LiquidCommerce inner markup varies). */
.dm-similar__cart button,
.dm-similar__cart a,
.dm-similar__cart [role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-fg-default-white);
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
  border: 0;
  cursor: pointer;
}

/* The plugin's own `.pr-usa-lc-theme .button.pr-usa-lc-btn--primary` rule (three
   classes) sets the 8px panel radius from --pr-usa-lc-radius and outweighs the
   element selector above, so this button rendered as a rounded rectangle beside
   the pill-shaped "View Full Comparison". Same fix as the PDP button (line 370)
   and the listing card (mezcales-listing.css): qualify the selector with the
   plugin's own classes so the full pill wins whichever order the sheets load in. */
.dm-similar__cart .pr-usa-lc-theme .button.pr-usa-lc-product__trigger,
.dm-similar__cart .pr-usa-lc-theme .button.pr-usa-lc-btn--primary,
.dm-similar__cart .pr-usa-lc-theme .button.pr-usa-lc-atc {
  border-radius: 999px;
}

/* Shopping-bag icon after the "Add to cart" label. */
.dm-similar__cart button::after,
.dm-similar__cart a::after,
.dm-similar__cart [role="button"]::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  /* Masked rather than painted as a background image: the SVG carries a
     hard-coded fill="white", and a background image cannot inherit
     currentColor. Masking makes the icon take the button's own ink --
     white on the forest default, forest (#062D20) on the yellow hover. */
  background-color: currentColor;
  -webkit-mask: url("../images/add-to-cart-icon.svg") center / contain no-repeat;
  mask: url("../images/add-to-cart-icon.svg") center / contain no-repeat;
}

@media (min-width: 768px) {
  .dm-similar__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
  }

  /* Single faint vertical separator between the 2nd and 3rd cards only
     (none beside the white "Recommended" card). */
  .dm-similar__card:not(.is-recommended) + .dm-similar__card:not(.is-recommended) {
    border-left: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
  }
}

@media (min-width: 1024px) {
  .dm-similar__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dm-similar__title {
    font-size: 52px; /* heading/h2 */
    margin-bottom: 40px;
  }
}

/* ============================================================
   "Reviews from the community" (Bazaarvoice)
   ============================================================ */
.dm-reviews {
  background-color: var(--dm-bg-default-secondary);
}

.dm-reviews__inner {
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}

/* heading/h2 — IM Fell Double Pica */
.dm-reviews__title {
  margin: 0 0 40px;
  text-align: center;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
  color: var(--dm-fg-default-primary);
}

.dm-reviews__title em {
  font-style: italic;
}

@media (max-width: 767px) {
  .dm-reviews__title {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
}

.dm-reviews__widget {
  min-height: 120px;
}

.dm-reviews__placeholder {
  width: 100%;
  max-width: 1285px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  background-color: var(--dm-bg-default-white);
}

@media (min-width: 1024px) {
  .dm-reviews__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dm-reviews__title {
    font-size: 52px; /* heading/h2 */
    margin-bottom: 48px;
  }
}

/* ===== PDP mobile carousels ("What defines this mezcal", "Similar mezcales") =====
   The tracks stay CSS grids on desktop; below the mobile breakpoint they flip to
   a scroll-snap row and the controls appear. See assets/js/pdp-carousel.js. */
.dm-carousel__controls {
  display: none;
}

@media (max-width: 767px) {
  .dm-carousel__track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dm-carousel__track::-webkit-scrollbar {
    display: none;
  }

  /* Soften the hard left cut as cards scroll out of view. Only once the track
     has actually moved, so the first card is never faded at rest. */
  .dm-carousel__track.is-scrolled {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px);
    mask-image: linear-gradient(to right, transparent 0, #000 40px);
  }

  /* Cards size to a peek of the next one rather than the full viewport. */
  .dm-carousel__track > * {
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Full-bleed track: the section gutter moves off the wrapper and onto the
     heading, the track's own inline padding and the controls, so cards can
     scroll out to the screen edge and meet the fade instead of a hard cut. */
  .dm-similar .dm-similar__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .dm-similar .dm-similar__title,
  .dm-similar .dm-carousel__controls {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* overflow-x:auto makes the browser compute overflow-y as auto too, which
     clips the recommended card's drop shadow. Pad the track and pull the
     controls back up so the spacing is unchanged. */
  .dm-similar__grid.dm-carousel__track {
    padding-right: 16px;
    padding-bottom: 44px;
    padding-left: 16px;
    scroll-padding-left: 16px;
  }

  .dm-similar__grid.dm-carousel__track + .dm-carousel__controls {
    margin-top: 0;
  }

  .dm-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
  }

  .dm-carousel__progress {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-forest) 15%, transparent);
    overflow: hidden;
  }

  /* Width/left are set by pdp-carousel.js to mirror the scroll position. */
  .dm-carousel__progress-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33%;
    border-radius: inherit;
    background: var(--dm-bg-default-tertiary);
    transition: left 0.15s linear, width 0.15s linear;
  }

  .dm-carousel__arrows {
    display: flex;
    gap: 12px;
  }

  .dm-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dm-border-default-dark-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--dm-fg-default-primary);
    cursor: pointer;
  }

  .dm-carousel__arrow svg {
    display: block;
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   Mobile sticky action bar

   Board: "On mobile user should see the main action and price in a sticky zone
   at the bottom of the page." It fades out while the real add-to-cart row is on
   screen and back in once that row has scrolled past — assets/js/pdp-sticky-cart.js
   toggles .is-visible; this file owns the look and the desktop cut-off.
   ============================================================ */
.dm-pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--color-cream, var(--dm-bg-default-secondary));
  border-top: 1px solid color-mix(in srgb, var(--dm-ext-black) 10%, transparent);
  box-shadow: 0 -6px 20px color-mix(in srgb, var(--dm-ext-black) 10%, transparent);
  /* Hidden until the script says otherwise; it also carries [hidden] until then
     so the bar never flashes on first paint. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.25s var(--dm-ease, ease), transform 0.25s var(--dm-ease, ease), visibility 0.25s;
}

.dm-pdp-sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Price row stacked above the button row, matching the board. */
.dm-pdp-sticky__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-pdp-sticky__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-pdp-sticky__price {
  font-family: var(--font-default, sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-forest, var(--dm-fg-default-primary));
}

/* The plugin writes the amount as `<strong>`; keep the row's own weight. */
.dm-pdp-sticky__price strong {
  font-weight: inherit;
}

/* "Currently unavailable" lands in the same span — smaller, and not shouted. */
.dm-pdp-sticky__price.pr-usa-lc-product__price--unavailable {
  font-size: 15px;
  font-weight: 500;
  color: var(--dm-bg-default-tertiary);
}

.dm-pdp-sticky__price-row .dm-price-tip__btn svg {
  width: 16px;
  height: 16px;
  color: var(--color-forest-light, var(--dm-ext-forest-light));
  display: block;
}

/* The plugin mount stays empty until a price is known; collapse the row rather
   than leaving a blank line (and a stray info icon) above the buttons. */
.dm-pdp-sticky__price-row:has(> .dm-pdp-sticky__price[hidden]) {
  display: none;
}

/* Same, for browsers without `:has()`. */
.dm-pdp-sticky__price[hidden] + .dm-price-tip {
  display: none;
}

/* Add to cart left, Compare right — same pairing as the summary panel. */
.dm-pdp-sticky__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dm-pdp-sticky__cart {
  flex: 1 1 auto;
  min-width: 0;
}

.dm-pdp-sticky__compare {
  flex: 0 0 auto;
}

/* Match the pill treatment the rest of the page uses. The plugin's own
   three-class rule outranks plain element selectors, so qualify with its
   classes here too (see the note at .dm-similar__cart above). */
.dm-pdp-sticky__cart .pr-usa-lc-theme .button.pr-usa-lc-product__trigger,
.dm-pdp-sticky__cart .pr-usa-lc-theme .button.pr-usa-lc-btn--primary,
.dm-pdp-sticky__cart .pr-usa-lc-theme .button.pr-usa-lc-atc {
  width: 100%;
  /* The theme's default LC button class string carries Tailwind's `mt-2`
     (8px, cleared only at md:), which pushed this button 4px below Compare in
     the same row. Zero it so the two sit on one line. */
  margin: 0;
  min-height: 48px;
  border-radius: 999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 16px;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dm-pdp-sticky {
    transition: none;
  }
}

/* Desktop keeps the action in the summary panel only. */
@media (min-width: 1024px) {
  .dm-pdp-sticky {
    display: none;
  }
}

/* ============================================================
   Awards — forest panel under "What defines this mezcal"
   Same rhythm as the sand sections around it (56px ends, 32 under
   the title), on forest with cream type.
   ============================================================ */
.dm-awards {
  background: var(--color-forest, var(--dm-bg-default-tertiary, #062D20));
  color: var(--dm-fg-default-white, #FFFFFF);
}

.dm-awards__inner {
  padding-top: 56px;
  padding-bottom: 56px;
  box-sizing: border-box;
}

.dm-awards__title {
  margin: 0 0 32px;
  text-align: center;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.04px;
  color: var(--dm-fg-default-white, #FFFFFF);
}

.dm-awards__title em {
  font-style: italic;
}

/* Up to three across; fewer awards stay centred rather than stretching. */
.dm-awards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 280px));
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-awards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.dm-awards__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 4px;
}

.dm-awards__badge {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.dm-awards__year {
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  color: var(--color-sun, var(--dm-fg-accent-yellow, #E9B949));
}

.dm-awards__name {
  margin: 0;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--dm-fg-default-white, #FFFFFF);
}

.dm-awards__text {
  margin: 0;
  font-family: var(--font-default, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--dm-fg-default-white, #FFFFFF) 80%, transparent);
}

/* Tablet: two across. */
@media (max-width: 1023.98px) {
  .dm-awards__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 260px));
    gap: 28px;
  }

  .dm-awards__title {
    font-size: 32px;
  }
}

/* Mobile: one column, tighter ends. */
@media (max-width: 767.98px) {
  .dm-awards__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dm-awards__title {
    margin-bottom: 24px;
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .dm-awards__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .dm-awards__name {
    font-size: 20px;
  }
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "PDP - Small Desktop" (2021:27991):
 *   breadcrumbs (2021:28020)       py-16
 *   product-details (2021:28021)   two 540 halves, pb-40
 *     gallery: 64 thumb rail (py-24, 12 apart, 1px rule 4 under the active
 *              one), 24 gap, then 452 square slides stacked with no gap
 *     panel:   pl-80 py-64; 32 between groups, 48 down to the accordions,
 *              cta row max 400 with 16 between Add to cart and Compare
 *   banner-content (2021:28119)    720 tall, py-80, 40 between title and recipe
 *   What defines (2021:28125)      py-80, 40 under the title, 24 between cards
 *   Similar (2021:28150)           three 360 cards, image p-16, info px-32
 *   Reviews (2021:28478)           py-80, 64 under the title, 1080 x 550 widget
 *   featured section (2021:28483)  py-80, 1080 x 432 panel
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  /* The capped 1080 container already provides Figma's 100px gutter. */
  .dm-pdp__inner,
  .dm-vida-banner__inner,
  .dm-defines__inner,
  .dm-awards__inner,
  .dm-similar__inner,
  .dm-reviews__inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* ---- Awards ---- (same py-80 / 40-under-title rhythm as its neighbours) */
  .dm-awards__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dm-awards__title {
    margin-bottom: 40px;
  }

  .dm-awards__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 320px));
    gap: 24px;
  }

  /* ---- Product details ---- */
  .dm-pdp {
    padding-top: 16px;
    padding-bottom: 40px;
  }

  .dm-pdp__breadcrumb {
    margin-bottom: 16px;
  }

  .dm-pdp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }

  .dm-pdp__gallery.has-thumbs {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;
  }

  .dm-pdp__thumbs {
    padding-top: 24px;
    gap: 12px;
  }

  /* overflow stays visible so the active rule can sit under the tile; the
     image carries the 2px radius itself instead. */
  .dm-pdp__thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 2px;
    overflow: visible;
  }

  .dm-pdp__thumb img {
    border-radius: 2px;
  }

  .dm-pdp__thumb.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;                   /* a 1px rule 4px under the tile */
    height: 1px;
    background: var(--color-forest, var(--dm-border-default-dark-strong));
  }

  /* Bottle packshot: greige tile, bottle 74.6% of the tile, centred. */
  .dm-pdp__thumbs .dm-pdp__thumb:first-child {
    padding: 8px;
    background: var(--dm-ext-greige-pale);
  }

  .dm-pdp__slide {
    margin-bottom: 0;
  }

  .dm-pdp__slide:not(.is-bottle) {
    border-radius: 0;
  }

  .dm-pdp__slide.is-bottle {
    background: var(--dm-ext-greige-pale);
  }

  .dm-pdp__slide.is-bottle img {
    width: 100%;
    box-sizing: border-box;
    padding: 12.7%;                 /* % of the slide width: 57px at 452 */
  }

  .dm-pdp__panel {
    padding: 64px 0 64px 80px;
  }

  /* Header group: 12 between title, collection and rating. */
  .dm-pdp__collection {
    margin-bottom: 12px;
  }

  .dm-pdp__rating {
    margin: 0 0 32px;
  }

  /* Description group: 16 apart, then 32 to the price. */
  .dm-pdp__desc {
    margin-bottom: 16px;
  }

  .dm-pdp__details-link {
    margin-bottom: 64px;
  }

  .dm-pdp__details-link svg {
    width: 16px;
    height: 16px;
  }

  .dm-pdp__price-row {
    gap: 6px;
    margin: 0 0 32px;
  }

  /* Action group: cta row max 400, 16 apart, then 16 to Find nearby. */
  .dm-pdp__actions {
    gap: 16px;
    margin-bottom: 16px;
  }

  .dm-pdp__cart {
    flex: 0 1 270px;
    max-width: 260px;
  }

  .dm-pdp__cart .pr-usa-lc-atc-row,
  .dm-pdp__cart .liquidcommerce-add-to-cart-wrapper {
    gap: 16px;
  }

  /* Compare hugs its content: px-24, 8 between label and a 20px icon. */
  .dm-pdp__panel .dm-pdp__compare {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 0 24px;
    border-width: 1px;
  }

  .dm-pdp__panel .dm-pdp__compare svg {
    width: 20px;
    height: 20px;
  }

  .dm-pdp__find {
    padding: 0;
  }

  .dm-pdp__find svg {
    width: 16px;
    height: 16px;
  }

  /* Accordion list: 48 below the actions, each row ruled on top, header
     py-20, 8 under the flavor box. */
  .dm-pdp__section {
    margin-top: 48px;
    padding-top: 20px;
    padding-bottom: 8px;
  }

  .dm-pdp__section ~ .dm-pdp__section {
    margin-top: 0;
  }

  .dm-pdp__section-title {
    margin-bottom: 20px;
  }

  .dm-pdp__acc:first-of-type {
    border-top: 1px solid color-mix(in srgb, var(--color-forest) 15%, transparent);
  }

  .dm-pdp__acc-head {
    font-size: 20px;                /* heading/h6 */
    line-height: 1.2;
  }

  /* Flavor box: two columns (160 min each in a 428 row), p-16, radius 4. */
  .dm-pdp__flavors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
    padding: 16px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--dm-ext-black) 4%, transparent);
  }

  .dm-pdp__dots {
    gap: 6px;                       /* five 8px dots in a 64 track */
    margin-top: 6px;
  }

  /* ---- "The best way to enjoy this Mezcal" ---- */
  .dm-vida-banner {
    min-height: 720px;
  }

  /* Board 2021:28119: a flat rgba(0,0,0,.15) wash, not a gradient. */
  .dm-vida-banner::before {
    background: color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
  }

  .dm-vida-banner__inner {
    gap: 40px;
  }

  .dm-vida-banner__recipe-title,
  .dm-vida-banner__recipe-body {
    margin-bottom: 32px;
  }

  /* ---- "What defines this mezcal" ---- */
  .dm-defines__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .dm-defines__title {
    margin-bottom: 40px;
  }

  .dm-defines__media {
    border-radius: 4px;
    margin-bottom: 16px;
  }

  .dm-defines__card-title {
    margin-bottom: 8px;
  }

  .dm-defines__card-text {
    font-size: 18px;                /* body/lg/regular */
    max-width: none;
  }

  /* ---- "Similar mezcales you may enjoy" ---- */
  /* Image block p-16 around a 220 bottle; info px-32 pt-24 pb-32. */
  .dm-similar__card {
    padding: 16px 32px 32px;
  }

  .dm-similar__card-inner {
    max-width: none;
  }

  .dm-similar__badge {
    top: 0;
    left: -16px;                    /* 16 in from the card edge */
    width: auto;
    padding: 0 8px;
  }

  .dm-similar__media {
    height: 220px;
    margin-bottom: 40px;            /* image p-16 bottom + info pt-24 */
  }

  .dm-similar__name {
    margin-bottom: 8px;
  }

  .dm-similar__price-row {
    gap: 6px;
    margin-bottom: 16px;
  }

  .dm-similar__card .dm-pdp__flavors {
    margin-bottom: 24px;            /* 16 gap + the cta block's pt-8 */
  }

  /* Card meters are a size down: 7px dots in a 51 track. */
  .dm-similar__card .dm-pdp__dot {
    width: 7px;
    height: 7px;
  }

  .dm-similar__card .dm-pdp__dots {
    gap: 4px;
  }

  /* ---- Reviews ---- */
  .dm-reviews__title {
    margin-bottom: 64px;
  }

  .dm-reviews__placeholder {
    aspect-ratio: 1080 / 550;
  }
}

/* Story showcase near the foot of the PDP (split-content-showcase block,
 * printed from single-product.php) — board "featured section" (2021:28483):
 * py-80, a 1080 x 432 panel with radius 4, image half at 500/400, content
 * half px-48 py-24. Scoped to the PDP so the block's other uses keep their
 * own layout. Must stay at the end of the file. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  .single-product .split-showcase > div {
    padding: 80px 0;
  }

  .single-product .split-showcase .grid {
    max-width: min(1080px, 100% - 32px);
    border-radius: 4px;
  }

  /* With aspect-ratio set, a grid item aligns to start instead of
     stretching, so the ratio (not the old 720 floor) sets the row height. */
  .single-product .split-showcase .grid > div:first-child {
    min-height: 0;
    aspect-ratio: 500 / 400;
  }

  .single-product .split-showcase .content-col {
    padding: 24px 48px;
  }
}

/* Small desktop type fixes from the font audit against 2021:27991.
 * Must stay at the end of the file. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  /* Breadcrumb (2021:28020): 8 between items, pipes full strength, current
     page at 70% (the shared style.css rule uses 0.4 / 0.5). */
  .dm-pdp__breadcrumb.breadcrumbs.text-forest li + *::before {
    opacity: 1;
    margin: 0 8px;
  }

  .dm-pdp__breadcrumb.breadcrumbs.text-forest li:last-child {
    opacity: 0.7;
  }

  /* "View Full Comparison": body/md/regular, no tracking on the board. */
  .dm-similar__actions .dm-btn--outline {
    letter-spacing: 0;
  }

  /* Card price info icon is 20px on the board (16 on the panel). */
  .dm-similar__price-row .dm-price-tip__btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Small desktop: Add to cart and Compare sit side by side as on large
   desktop, instead of Add to cart growing and pushing Compare to the far
   right of the (full-width) cart column. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  .dm-pdp__cart .pr-usa-lc-atc-row,
  .dm-pdp__cart .liquidcommerce-add-to-cart-wrapper {
    justify-content: flex-start;
  }

  .dm-pdp__cart .pr-usa-lc-atc-row > *,
  .dm-pdp__cart .liquidcommerce-add-to-cart-wrapper > :not(.liquidcommerce-price-display) {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .dm-pdp__cart .pr-usa-lc-theme .button.pr-usa-lc-atc,
  .dm-pdp__cart .liquidcommerce-add-to-cart-button {
    flex: 0 0 252px;
    width: 252px;
    max-width: 252px;
  }
}