/* =====================================================================
   Cocktail detail — top section (photo + recipe panel)
   Paired with template-parts/content-cocktail.php
   ===================================================================== */

.dm-cpd {
  background: var(--dm-bg-default-primary);
  padding: 16px 0 56px;
  color: var(--color-forest, var(--dm-fg-default-primary));
}

@media (max-width: 1023px) {
  .dm-cpd {
    padding: 8px 0 32px;
  }
}

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

@media (max-width: 1023px) {
  .dm-cpd__breadcrumb {
    margin-bottom: 12px;
  }
}

/* Layout */
.dm-cpd__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 1024px) {
  .dm-cpd__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
  }
}

/* Photo — full width, natural height, capped so tall images never dominate. */
.dm-cpd__media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
  max-height: 800px;
}

/* Mobile: bleed the photo edge to edge, cancelling the container's px-4. */
@media (max-width: 1023px) {
  .dm-cpd__media {
    width: auto;
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
  }
}

.dm-cpd__photo {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Sticks below the fixed header while the recipe panel scrolls, released at
   the end of the grid row (same pattern as the product PDP panel). */
@media (min-width: 1024px) {
  .dm-cpd__media {
    position: sticky;
    top: calc(var(--dm-header-h, 92px) + 16px);
    align-self: start;
  }
}

/* Panel */
.dm-cpd__panel {
  max-width: none;
}

/* heading/h4 — IM Fell Double Pica, 32 / 120% */
.dm-cpd__title {
  margin: 0 0 8px;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2; /* 120% -> 38.4px */
  letter-spacing: 0;
  color: var(--dm-fg-default-primary);
}

/* body/sm/regular — 14 / 140%, underlined (Figma spec) */
.dm-cpd__collection {
  display: inline-block;
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4; /* 140% -> 19.6px */
  color: var(--dm-bg-default-tertiary);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* Rating */
.dm-cpd__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.dm-cpd__stars {
  display: inline-flex;
  gap: 0;
}

.dm-cpd__star {
  width: 20px;
  height: 20px;
  fill: color-mix(in srgb, var(--color-forest) 25%, transparent);
}

.dm-cpd__star.is-on {
  fill: var(--color-forest, var(--dm-fg-default-primary));
}

.dm-cpd__rate-link {
  font-family: var(--font-default, sans-serif);
  font-size: 13px;
  color: var(--dm-fg-default-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* body/md/regular — 16 / 140% */
.dm-cpd__desc {
  margin: 30px 0 0;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% -> 22.4px */
  color: var(--dm-bg-default-tertiary);
}

/* Spec rows — body/md/regular, label secondary / value primary */
.dm-cpd__specs {
  margin: 14px 0 0;
}

.dm-cpd__spec {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-forest) 15%, transparent);
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  line-height: 1.4; /* 140% -> 22.4px */
}

.dm-cpd__spec dt {
  flex: 0 0 96px;
  color: var(--dm-fg-default-secondary); /* Semantics fg secondary */
}

.dm-cpd__spec dd {
  margin: 0;
  color: var(--dm-fg-default-primary);
}

.dm-cpd__author {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

.dm-cpd__spec--share dd {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Round white button; the SVG inside is just the brand glyph. */
.dm-cpd__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--dm-bg-default-white);
}

.dm-cpd__share svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Sections (Ingredients / Instructions) */
.dm-cpd__section {
  margin-top: 48px;
}


.dm-cpd__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--color-forest) 15%, transparent);
}

/* heading/h5 — display serif */
.dm-cpd__section-title {
  margin: 0;
  font-family: var(--font-display, serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--dm-fg-default-primary);
}

/* Unit toggle (radios stay in the DOM for ingredients.js) */
.dm-cpd__units {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--color-forest) 25%, transparent);
  border-radius: 3px;
  overflow: hidden;
}

.dm-cpd__unit {
  padding: 6px 20px;
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  line-height: 1.4; /* 140% -> 19.6px */
  color: var(--dm-bg-default-tertiary);
  cursor: pointer;
  border-left: 1px solid color-mix(in srgb, var(--color-forest) 25%, transparent);
  transition: background 0.15s ease, color 0.15s ease;
}

.dm-cpd__units label:first-of-type {
  border-left: 0;
}

.dm-cpd__unit-input:checked + .dm-cpd__unit {
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-fg-default-white);
}

.dm-cpd__unit-input:focus-visible + .dm-cpd__unit {
  outline: 2px solid var(--color-forest, var(--dm-border-default-dark-strong));
  outline-offset: -2px;
}

/* Ingredients list — bulleted rows, qty flows inline with the name.
   Table markup is kept for ingredients.js; we break table layout to
   block/inline so each ingredient reads as one wrapping line. */
.dm-cpd__ingredients,
.dm-cpd__ingredients tbody {
  display: block;
  width: 100%;
  margin-top: 20px;
}

.dm-cpd__ing {
  display: block;
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
}

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

.dm-cpd__ing::before {
  content: "\2022";
  position: absolute;
  left: 10px;
  top: 0;
  color: var(--dm-fg-default-primary);
  line-height: 1.4;
}

/* body/lg/regular — 18 / 140% */
.dm-cpd__ing td {
  display: inline;
  padding: 0;
  font-family: var(--font-default, sans-serif);
  font-size: 18px;
  line-height: 1.4; /* 140% -> 25.2px */
  color: var(--dm-bg-default-tertiary);
}

.dm-cpd__ing-qty {
  text-transform: lowercase;
}

/* Single space between the (scalable) qty and the ingredient name */
.dm-cpd__ing-qty:not(:empty)::after {
  content: "\00a0";
}

.dm-cpd__ing-name {
  overflow-wrap: break-word;
}

.dm-cpd__ing-name a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Servings stepper */
.dm-cpd__servings {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.dm-cpd__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--color-forest) 25%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--dm-fg-default-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.dm-cpd__step:hover {
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-fg-default-white);
}

.dm-cpd__servings-input {
  width: 44px;
  height: 30px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-forest) 25%, transparent);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font-default, sans-serif);
  font-size: 14px;
  color: var(--dm-fg-default-primary);
  -moz-appearance: textfield;
}

.dm-cpd__servings-input::-webkit-outer-spin-button,
.dm-cpd__servings-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dm-cpd__servings-label {
  font-family: var(--font-default, sans-serif);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-forest) 60%, transparent);
}

/* Instructions */
.dm-cpd__steps {
  margin: 18px 0 0;
  padding-left: 25px;
  list-style: decimal;
}

/* body/lg/regular — 18 / 140% */
.dm-cpd__steps li {
  padding-left: 6px;
  margin-bottom: 14px;
  font-family: var(--font-default, sans-serif);
  font-size: 18px;
  line-height: 1.4; /* 140% -> 25.2px */
  color: var(--dm-bg-default-tertiary);
}

/* ---- Mobile typography (Figma heading-mobile specs) --------------------- */
@media (max-width: 1023px) {
  /* heading-mobile/h4-M — 26 / 120% */
  .dm-cpd__title {
    font-size: 26px;
  }

  /* heading-mobile/h5-M — 22 / 120% */
  .dm-cpd__section-title {
    font-size: 22px;
  }

  /* body/sm/regular — 14 / 140% */
  .dm-cpd__rate-link {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Optional video + post content below the grid */
.dm-cpd__video {
  margin-top: 48px;
  border-radius: 4px;
  overflow: hidden;
}

/* Article section: own band below "Products we recommend". */
.dm-cpd--article {
  padding: 0 0 64px;
}

@media (max-width: 1023px) {
  .dm-cpd--article {
    padding-bottom: 32px;
  }
}

/* Body text matches .dm-cpd__desc — body/md/regular, 16 / 400 / 140% */
.dm-cpd__content {
  font-family: var(--font-default, "Roboto Condensed", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4; /* 140% -> 22.4px */
  color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
}

/* Lighter emphasis so bold runs don't read as heavy as before */
.dm-cpd__content strong,
.dm-cpd__content b {
  font-weight: 500;
}

/* ---- Article stack (Gutenberg sections: full width + media-text splits) ---- */
.dm-cpd__content > * {
  margin-top: 0;
  margin-bottom: 20px;
}

/* Vertical rhythm everywhere, including inside the split text columns. */
.dm-cpd__content p,
.dm-cpd__content ul,
.dm-cpd__content ol {
  margin-bottom: 20px;
}

.dm-cpd__content .wp-block-media-text__content > *:last-child {
  margin-bottom: 0;
}

/* heading/h2 — IM Fell Double Pica */
.dm-cpd__content h2,
.dm-cpd__content h3 {
  font-family: var(--font-display, "IM FELL Double Pica", serif);
  font-style: normal;
  font-weight: 400;
  color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
}

.dm-cpd__content h2 {
  font-size: 25px;
}

.dm-cpd__content h3 {
  font-size: 20px;
}

/* Some legacy content wraps heading text in <strong>; headings stay 400. */
.dm-cpd__content h2 strong,
.dm-cpd__content h2 b,
.dm-cpd__content h3 strong,
.dm-cpd__content h3 b {
  font-weight: 400;
}

/* Highlighted words inside titles */
.dm-cpd__content h2 em,
.dm-cpd__content h2 i,
.dm-cpd__content h2 span,
.dm-cpd__content h3 em,
.dm-cpd__content h3 i,
.dm-cpd__content h3 span {
  font-style: italic;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.dm-cpd__content ul,
.dm-cpd__content ol {
  padding-left: 24px;
  list-style: disc;
}

.dm-cpd__content ol {
  list-style: decimal;
}

.dm-cpd__content li {
  margin-bottom: 8px;
}

.dm-cpd__content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dm-cpd__content img {
  border-radius: 4px;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  object-fit: contain;
}

/* Standalone / full-width image blocks sit centered in the column
   (media-text split images keep their own alignment). */
.dm-cpd__content figure:not(.wp-block-media-text__media),
.dm-cpd__content .wp-block-image {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.dm-cpd__content figure:not(.wp-block-media-text__media) img,
.dm-cpd__content .wp-block-image img {
  margin-left: auto;
  margin-right: auto;
}

/* Split sections (text/image left-right) */
.dm-cpd__content .wp-block-media-text {
  margin: 48px 0;
  gap: 28px;
  align-items: center;
}

.dm-cpd__content .wp-block-media-text .wp-block-media-text__content {
  padding: 0;
}

.dm-cpd__content .wp-block-media-text h2:first-child,
.dm-cpd__content .wp-block-media-text h3:first-child {
  margin-top: 0;
}

.dm-cpd__content .wp-block-media-text__media img {
  width: 100%;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  margin-inline: auto;
}

@media (min-width: 782px) {
  .dm-cpd__content .wp-block-media-text {
    gap: 48px;
  }
}

/* Desktop sizing */
@media (min-width: 1024px) {
  .dm-cpd {
    padding: 20px 0 80px;
  }

  .dm-cpd--article {
    padding-bottom: 48px;
  }

  /* heading/h2 — reduced ~30% from 52px */
  .dm-cpd__content h2 {
    font-size: 36px;
  }

  .dm-cpd__content h3 {
    font-size: 24px;
  }
}

/* =====================================================================
   "What Is …?" intro section (ACF cocktail_what_is) — larger hero
   heading/h2 (52px) + body/lg (18px), per Figma. "What Is" upright,
   the cocktail name italic (its <em>).
   ===================================================================== */
.dm-cpd--whatis .dm-cpd__content h2 {
  font-size: 34px;
  margin-top: 0;
}

.dm-cpd--whatis .dm-cpd__content,
.dm-cpd--whatis .dm-cpd__content p {
  font-size: 18px;
  line-height: 1.4; /* 140% -> 25.2px */
}

@media (min-width: 1024px) {
  .dm-cpd--whatis .dm-cpd__content h2 {
    font-size: 52px; /* 110% line-height, -1.04px tracking inherited */
  }
}

/* =====================================================================
   "Tips & Variations" banner — photo left / forest panel right
   ===================================================================== */
.dm-tips {
  background: var(--dm-bg-default-primary);
  padding: 24px 0 72px;
}

.dm-tips__card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 6px;
  overflow: hidden;
}

.dm-tips__media {
  position: relative;
  min-height: 300px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  overflow: hidden;
}

.dm-tips__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the left area; crop if needed */
  object-position: center;
  display: block;
}

/* PNG (transparent product shot): show the whole image with padding around it,
   not cropped to fill. */
.dm-tips__media--contain img {
  object-fit: contain;
  padding: 32px;
  box-sizing: border-box;
}

.dm-tips__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-bg-default-primary);
  padding: 48px 28px;
}

.dm-tips__eyebrow {
  font-family: var(--font-default, sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-cream) 85%, transparent);
}

/* Yellow italic display serif, like the "Craft your drink" heading */
.dm-tips__title {
  display: block; /* <span>: module title, not a heading (SEO) */
  margin: 0;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--color-sun, var(--dm-fg-accent-yellow));
  text-wrap: balance;
}

.dm-tips__text {
  margin: 15px 0 0;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  max-width: 56ch;
}

.dm-tips__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  padding: 14px 34px;
  border-radius: 999px;
  background: var(--dm-bg-default-white);
  color: var(--color-forest, var(--dm-fg-default-primary));
  font-family: var(--font-default, sans-serif);
  font-size: 15px;
  text-decoration: none;
}

@media (min-width: 900px) {
  .dm-tips {
    padding: 32px 0 96px;
  }

  .dm-tips__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: 560px;
  }

  .dm-tips__panel {
    padding: 64px 72px;
  }

  .dm-tips__title {
    font-size: 40px;
  }
}

/* =====================================================================
   "Similar cocktails" — left rail + card carousel
   ===================================================================== */
.dm-simcock {
  background: var(--dm-bg-default-primary);
  padding: 24px 0 72px;
}

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

.dm-simcock__rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

/* heading/h2 — IM Fell Double Pica, 52 / 110% */
.dm-simcock__title {
  display: block; /* <span>: module title, not a heading (SEO) */
  margin: 0 0 14px;
  font-family: var(--font-display, "IM FELL Double Pica", serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
  color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

.dm-simcock__subtitle {
  margin: 0 0 24px;
  font-family: var(--font-default, sans-serif);
  font-size: 16px;
  font-weight: 300;
  color: var(--dm-fg-default-primary);
  max-width: 34ch;
}

.dm-simcock__browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
  color: var(--dm-bg-default-primary);
  font-family: var(--font-default, sans-serif);
  font-size: 15px;
  text-decoration: none;
}

/* Progress line + round arrows */
.dm-simcock__controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.dm-simcock__progress {
  position: relative;
  flex: 1;
  max-width: 380px;
  height: 2px;
  background: color-mix(in srgb, var(--color-forest) 20%, transparent);
  overflow: hidden;
}

.dm-simcock__progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-simcock__arrows {
  display: flex;
  gap: 14px;
}

.dm-simcock__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--dm-border-default-dark-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--dm-fg-default-primary);
  cursor: pointer;
}

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

/* Card track: native scroll-snap row */
.dm-simcock__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.dm-simcock__card {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.dm-simcock__media {
  display: block;
  aspect-ratio: 1 / 1.24;
  overflow: hidden;
}

.dm-simcock__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Italic display serif name, like the mock */
.dm-simcock__name {
  display: block; /* <span> (SEO) */
  margin: 18px 0 8px;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--dm-fg-default-primary);
}

.dm-simcock__name a {
  color: inherit;
  text-decoration: none;
}

.dm-simcock__name a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dm-simcock__desc {
  margin: 0;
  font-family: var(--font-default, sans-serif);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--dm-fg-default-primary);
}

/* Mobile: drop the arrows/progress below the cards. Flattening the rail lets
   its children reorder as direct items of the stacked layout grid. */
@media (max-width: 899px) {
  .dm-simcock__rail {
    display: contents;
  }

  .dm-simcock__rail-top {
    order: 1;
  }

  .dm-simcock__track {
    order: 2;
    /* Full bleed on both sides, with the 16px gutter moved inside the
       track. Bleeding only the right edge left the track's left edge on
       the page gutter, so cards scrolling off the left were cut on a hard
       line 16px in, and with no room after the last card it ended flush
       on the screen edge. Now the first card still rests on the gutter
       (scroll-padding), cards slide out to the screen edge, and the last
       one stops 16px short of it. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
  }

  .dm-simcock__controls {
    order: 3;
  }

  .dm-simcock__media {
    border-radius: 10px;
  }
}

@media (min-width: 900px) {
  .dm-simcock {
    padding: 32px 0 96px;
    overflow-x: hidden;
  }

  /* Track bleeds to the right viewport edge; the rail stays on the
     container's left edge. 50% resolves against the container width, so
     (50% - 50vw) is exactly the negative right gutter. */
  .dm-simcock__layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
    margin-right: calc(50% - 50vw);
  }

  .dm-simcock__title {
    font-size: 52px;
  }

  .dm-simcock__card {
    flex-basis: clamp(320px, 31%, 480px);
  }
}

/* =====================================================================
   "{Cocktail} FAQ" — light accordion (cocktail_faqs terms)
   ===================================================================== */
.dm-faq {
  background: var(--dm-bg-default-primary);
  padding: 24px 0 40px;
  overflow-x: clip; /* contains the full-bleed divider lines below */
}

/* Italic cocktail name + upright FAQ, display serif — heading/h2 */
.dm-faq__title {
  margin: 0 0 36px;
  text-align: center;
  font-family: var(--font-display, "IM FELL Double Pica", serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1; /* 110% */
  letter-spacing: -1.04px;
  color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
}

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

.dm-faq__list {
  max-width: 800px;
  margin: 0 auto;
}

/* Full-bleed divider lines: the list content stays at 800px, but the rules
   span the full viewport width (edge to edge). */
.dm-faq__item {
  position: relative;
}

.dm-faq__item::before,
.dm-faq__item:last-child::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: color-mix(in srgb, var(--color-forest) 15%, transparent);
  pointer-events: none;
}

.dm-faq__item::before {
  top: 0;
}

.dm-faq__item:last-child::after {
  bottom: 0;
}

.dm-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
}

/* heading/h5 — display serif, 24 / 120% */
.dm-faq__question span {
  font-family: var(--font-display, "IM FELL Double Pica", serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2; /* 120% -> 28.8px */
  color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
}

.dm-faq__chevron {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--Semantics-fg-default-primary, var(--dm-fg-default-primary));
  transition: transform 0.25s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__question .dm-faq__chevron {
  transform: rotate(180deg);
}

.dm-faq__toggle:focus-visible ~ .dm-faq__question {
  outline: 2px solid var(--color-forest, var(--dm-border-default-dark-strong));
  outline-offset: -2px;
}

/* Grid-rows collapse trick: animates open/close without JS */
.dm-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap {
  grid-template-rows: 1fr;
}

/* body/lg/regular — Roboto Condensed, 18 / 140% */
.dm-faq__answer {
  overflow: hidden;
  padding: 0 22px;
  font-family: var(--font-default, "Roboto Condensed", sans-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4; /* 140% -> 25.2px */
  color: var(--Semantics-fg-default-primary, var(--dm-bg-default-tertiary));
  max-width: 72ch;
}

.dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
  padding-bottom: 22px;
}

/* ---- Mobile typography (Figma heading-mobile specs) --------------------- */
@media (max-width: 899px) {
  /* heading-mobile/h2-M — 36 / 110% */
  .dm-faq__title {
    font-size: 36px;
    letter-spacing: -0.72px;
  }

  /* heading-mobile/h5-M — 22 / 120% */
  .dm-faq__question span {
    font-size: 22px;
  }

  /* body/md/regular — 16 / 140% */
  .dm-faq__answer {
    font-size: 16px;
  }

  /* Smaller expand chevron on mobile */
  .dm-faq__chevron {
    width: 22px;
    height: 22px;
  }

  /* No horizontal padding on mobile; keep the answer aligned with the question. */
  .dm-faq__question,
  .dm-faq__answer {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 900px) {
  .dm-faq {
    padding: 32px 0 56px;
  }

  .dm-faq__title {
    font-size: 52px;
    margin-bottom: 48px;
  }

  .dm-faq__question {
    padding: 24px 28px;
  }

  .dm-faq__answer {
    padding: 0 28px;
  }

  .dm-faq__toggle:checked ~ .dm-faq__answer-wrap .dm-faq__answer {
    padding-bottom: 26px;
  }
}

/* =====================================================================
   "Products we recommend" — dm-similar card reused from the product PDP
   (product-single.css), tuned for the cocktail page.
   ===================================================================== */
.dm-similar--cocktail {
  background: var(--dm-bg-default-primary);
}

/* Bottle sits on a muted panel, like the mock. */
.dm-similar--cocktail .dm-similar__media {
  background: var(--color-cream);
  height: 365px;
  padding: 20px 0;
  box-sizing: border-box;
}

/* Recommend card: "Add to cart" + "View Product" share one row (both 48px). */
.dm-similar--cocktail .dm-similar__actions {
  flex-direction: row;
  align-items: stretch;
}

/* "Add to cart" grows to fill; "View Product"/Compare hugs its own text. */
.dm-similar--cocktail .dm-similar__cart {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* The LiquidCommerce button ships a default top margin that pushes it below the
   Compare pill — zero it and let it fill the wrapper so both align. */
.dm-similar--cocktail .dm-similar__cart > * {
  margin: 0;
  width: 100%;
}

.dm-similar--cocktail .dm-similar__actions .dm-btn--block {
  flex: 0 0 auto;
  width: auto;
  gap: 8px;
}

.dm-similar--cocktail .dm-similar__actions .dm-btn--block svg {
  width: 18px;
  height: 18px;
}

/* Recommend card product name spacing */
.dm-similar--cocktail .dm-similar__name {
  margin: 0 0 13px;
}

/* Mobile: bleed the slider off the right edge so the next card peeks, matching
   the "Similar cocktails" slider. Left stays at the container gutter. */
@media (max-width: 767px) {
  .dm-similar--cocktail .dm-similar__grid.dm-carousel__track {
    margin-right: -1rem;
  }

  /* No horizontal padding on the cards on mobile. */
  .dm-similar--cocktail .dm-similar__card {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  /* Center 1–3 cards instead of forcing a full 3-column row. */
  .dm-similar--cocktail .dm-similar__grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 460px));
    justify-content: center;
    gap: 40px;
  }

  /* No vertical separators between the cocktail cards. */
  .dm-similar--cocktail .dm-similar__card:not(.is-recommended) + .dm-similar__card:not(.is-recommended) {
    border-left: 0;
  }
}

/* Tighter vertical rhythm on the cocktail page so the recommend band doesn't
   sit too far from the article above (product PDP keeps its own 80px). */
@media (min-width: 1024px) {
  .dm-similar--cocktail .dm-similar__inner {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .dm-similar--cocktail .dm-similar__title {
    margin-bottom: 34px;
  }
}

/* ---- Edge bleed, every desktop width -------------------------------- *
 * From 900px the card track runs to the screen edge, but with nothing after
 * the last card it stopped there - half under the scrollbar, with the next
 * arrow already disabled - and `mandatory` start-snapping pulled the end back
 * a card, since the last card's start can never reach the left edge.
 * Trailing room equal to the bleed lets the last card scroll in to the
 * container's right edge; `proximity` still snaps mid-track but lets the end
 * rest. Same fix as the shop carousel (shop-mezcales.css).
 *
 * The distance is (screen - container) / 2 + the wrapper's side padding, with
 * the wrapper sized by `lg:container px-4`: full width below 1024, capped at
 * 1080 through 1280 (padding kept), then 1280 and 1536.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 900px) {
  .dm-simcock {
    --dm-simcock-edge: 16px;
  }
}

@media (min-width: 1024px) and (max-width: 1280.98px) {
  .dm-simcock {
    --dm-simcock-edge: calc((100vw - min(1080px, 100vw - 32px)) / 2 + 16px);
  }
}

@media (min-width: 1281px) {
  .dm-simcock {
    --dm-simcock-edge: calc((100vw - 1280px) / 2 + 16px);
  }
}

@media (min-width: 1536px) {
  .dm-simcock {
    --dm-simcock-edge: calc((100vw - 1536px) / 2 + 16px);
  }
}

@media (min-width: 900px) {
  .dm-simcock__layout {
    margin-right: calc(-1 * var(--dm-simcock-edge));
  }

  .dm-simcock__track {
    padding-right: var(--dm-simcock-edge);
    scroll-padding-right: var(--dm-simcock-edge);
    scroll-snap-type: x proximity;
  }
}