/** Shopify CDN: Minification failed

Line 374:0 Unexpected "`"

**/
/*
  PDP content sections — design system.

  Scoped to `.v2-pdp` so nothing here leaks into the rest of the theme. Every
  section using it wraps its markup in `.v2-pdp .v2-pdp-section`.

  ---------- Where this came from, and why it is a copy ----------

  Forked from assets/travel-bundle.css (the Europe-Ready Travel Bundle landing
  page) at commit 9e64787, taking only the rules the comparison table and the
  Size Fit Guarantee actually use, with every `tb-` prefix renamed to `v2-pdp-`.

  It is a deliberate copy rather than a shared import. That landing page is the
  destination for paid cold traffic, and sharing a stylesheet with a PDP means a
  tweak made for one silently moves the other, in a repo with no test suite to
  catch it. The duplication is the price of being able to edit either page
  without thinking about the other.

  The consequence, stated plainly so nobody has to rediscover it: a bug fixed in
  one of these two files is NOT fixed in the other. When you change something
  structural here, check whether assets/travel-bundle.css has the same bug.

  ---------- What changed in the fork ----------

  Only the tokens below. Every rule after them is byte-identical to its
  travel-bundle counterpart apart from the prefix rename, which is what makes a
  future diff between the two files readable.

  The palette moved from the landing page's own colours to the theme's, because
  these sections sit between madison-benefits and the Loox reviews rather than
  on a standalone lander. The type scale did not have to move at all: the
  landing page already sets Playfair Display for headings and Outfit for body,
  which ARE the theme's fonts (settings.heading_font = playfair_display_n7,
  settings.text_font = outfit_n4).
*/

.v2-pdp {
  /*
    Wine ramp, taken from the theme's primary button colour (#984856) rather
    than the landing page's #8a3b49. Two shades of burgundy a few hundred pixels
    apart read as a mistake rather than a choice.

    The base token reads the theme variable so a palette change in theme
    settings carries through. The derived tints are written out literally,
    because --v2-pdp-wine-wash composites at 6% alpha and `rgba()` cannot take a
    space-separated `var()` triple as its first three arguments. Change one,
    change the others.
  */
  --v2-pdp-wine: rgb(var(--primary-button-background));
  --v2-pdp-wine-deep: #7a3945;
  --v2-pdp-oxblood: #5d2b35;

  /* settings.product_rating_color, and the accent madison-benefits already uses
     on this same page, so the sections agree on their secondary. */
  --v2-pdp-blush: #b46b7a;
  --v2-pdp-wine-wash: rgba(152, 72, 86, 0.06);

  /*
    Neutrals. The landing page paints pure white bands precisely so the theme's
    cream cannot show through and yellow-cast its design. Here we want the
    opposite — these sections have cream on both sides, and a white band between
    them reads as a hole in the page.
  */
  --v2-pdp-canvas: rgb(var(--background));

  /* The tint v2-pdp already uses for its key-features panel, so a tinted band
     here matches one the shopper has seen higher up the same page. */
  --v2-pdp-sand: #f5f3eb;
  --v2-pdp-stone: #ebe7dd;

  /*
    Ink. The theme sets heading and body to the same #545454, lighter than the
    landing page's near-black #1c1e21. Taking both from the theme stops these
    sections reading as bolder than their neighbours; --v2-pdp-muted drops a step
    below so captions and struck values still recede.
  */
  --v2-pdp-ink: rgb(var(--heading-color));
  --v2-pdp-graphite: rgb(var(--text-color));
  --v2-pdp-muted: #7c7c7c;

  --v2-pdp-hairline: rgba(84, 84, 84, 0.14);
  --v2-pdp-hairline-strong: rgba(84, 84, 84, 0.22);

  /*
    Reserved for one thing, exactly as on the landing page: confirming an
    exchange or return costs her nothing. It is the only colour here that is not
    wine or a neutral, and it stays that way — spend it elsewhere and it stops
    meaning "yes, you're fine".
  */
  --v2-pdp-go: #1c6b47;
  --v2-pdp-go-wash: #eef5f1;

  /*
    Square corners, from the theme's block radius setting (currently "none"),
    rather than the landing page's 12px. Written as the variable so that if the
    theme ever turns radius on, these sections round with everything else.
  */
  --v2-pdp-radius: var(--block-border-radius);
  --v2-pdp-radius-sm: var(--block-border-radius-reduced);

  /*
    Elevation. The landing page's shadow is tuned for rounded cards floating on
    white; on cream, with square corners, it reads as a smudge. The hairline
    borders already separate the panels.
  */
  --v2-pdp-shadow: none;

  /*
    17px, between the theme's 16px and the landing page's 19px floor.

    travel-bundle.css says outright: "the audience is women 60+ reading on a
    phone... Do not shrink these to match other sections." That reasoning is
    about the reader, not the page, and the same woman reads this PDP. But 19px
    body copy directly under madison-benefits' 16px is a visible step, and type
    that changes size twice on one scroll undercuts both sections.

    Tap targets do NOT split the difference. 48px is kept, which is also the
    theme's own --button-height, so there is nothing to reconcile.
  */
  --v2-pdp-body-size: 17px;
  --v2-pdp-body-line: 1.6;
  --v2-pdp-tap-target: 48px;

  /*
    Section rhythm, from the theme's own spacing setting rather than the landing
    page's 40/64/76 scale. That scale was set for a standalone page where each
    section had to be unmistakably separate from the next; dropped onto a PDP
    whose neighbours use --vertical-breather, 76px of air above the comparison
    table makes it look detached from the page rather than part of it.

    The `max()` is a floor, so these layouts never collapse tighter than they
    assume no matter how the theme's spacing setting is later changed. Note that
    `.v2-pdp-section--tight` multiplies THIS value by 0.6 further down, so the floor
    has to leave room for that: 40px here is 24px there.
  */
  --v2-pdp-pad-block: max(40px, var(--vertical-breather));
  --v2-pdp-pad-inline: var(--container-gutter, 20px);

  /*
    Width. One container, three inner widths — the landing page's rule, which is
    the only way the left edge of "Size Fit Guarantee" and the left edge of the
    product gallery above it can be guaranteed to agree.

    --v2-pdp-max defers to --container-max-width, which on this template is owned
    by sections/v2-pdp-layout.liquid and set on #main. The 1140px fallback is
    the landing page's figure, for any template that uses these sections without
    that width section present.

    Sections whose content is a single column narrow the block INSIDE the
    container with .v2-pdp-panel. The container never changes.
  */
  --v2-pdp-max: var(--container-max-width, 1140px);
  --v2-pdp-intro: 54rem;
  --v2-pdp-panel: 760px;
  --v2-pdp-measure: 34rem;

  font-family: var(--text-font-family);
  color: var(--v2-pdp-graphite);
  font-size: var(--v2-pdp-body-size);
  line-height: var(--v2-pdp-body-line);
}

/*
  Desktop gets more air than the theme's own breather gives it. These are tall,
  self-contained sections rather than a row of product cards, and at 40px a
  desktop reader cannot tell where the comparison table stops and the reviews
  start. Still well under the landing page's 76px, which on a PDP reads as a
  gap rather than a separation.
*/
@media screen and (min-width: 741px) {
  .v2-pdp {
    --v2-pdp-pad-block: max(56px, var(--vertical-breather));
  }
}

/* ---------------------------------------------------------------- forked rules

   Everything below is travel-bundle.css with the prefix renamed. Keep it that
   way: a change made here that is not a palette token is a change that makes
   the two files harder to diff.
*/

.v2-pdp-section {
  --v2-pdp-band: var(--v2-pdp-canvas);
  padding: var(--v2-pdp-pad-block) 0;
  background: var(--v2-pdp-band);
}
.v2-pdp-section--tight {
  padding: calc(var(--v2-pdp-pad-block) * 0.6) 0;
}
.v2-pdp-section--sand {
  --v2-pdp-band: var(--v2-pdp-sand);
  background: var(--v2-pdp-band);
}
.v2-pdp-section--stone {
  --v2-pdp-band: var(--v2-pdp-stone);
  background: var(--v2-pdp-band);
}
.v2-pdp-section--wine {
  --v2-pdp-band: var(--v2-pdp-wine-deep);
  --v2-pdp-ink: #ffffff;
  --v2-pdp-graphite: rgba(255, 255, 255, 0.88);
  --v2-pdp-muted: rgba(255, 255, 255, 0.72);
  --v2-pdp-hairline: rgba(255, 255, 255, 0.18);
  --v2-pdp-hairline-strong: rgba(255, 255, 255, 0.28);
  background: var(--v2-pdp-band);
  color: #ffffff;
}
.v2-pdp-section--wine .v2-pdp-eyebrow {
  color: rgba(255, 255, 255, 0.75);
}
.v2-pdp-section--flush {
  padding: 0;
}
.v2-pdp-container {
  max-width: var(--v2-pdp-max);
  margin: 0 auto;
  padding: 0 var(--v2-pdp-pad-inline);
}
.v2-pdp-panel {
  max-width: var(--v2-pdp-panel);
  margin-left: auto;
  margin-right: auto;
}
.v2-pdp-intro {
  max-width: var(--v2-pdp-measure);
  margin: 0 0 32px;
}
@media screen and (min-width: 741px) {
.v2-pdp-intro--centered {
    max-width: var(--v2-pdp-intro);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
.v2-pdp-intro--centered .v2-pdp-lede,
  .v2-pdp-intro--centered .v2-pdp-body {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.v2-pdp-cta-row {
  margin: 32px 0 0;
}
.v2-pdp-cta-row--loose {
  margin: 48px 0 0;
}
@media screen and (min-width: 741px) {
.v2-pdp-cta-row--center {
    text-align: center;
  }
}
.v2-pdp-cta-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-pdp-muted);
}
@media screen and (min-width: 741px) {
.v2-pdp-cta-row--center .v2-pdp-cta-trust {
    justify-content: center;
  }
}
.v2-pdp-cta-trust__item + .v2-pdp-cta-trust__item::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 14px;
  vertical-align: -1px;
  background: var(--v2-pdp-hairline-strong);
}
.v2-pdp .v2-pdp-cta-trust__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--v2-pdp-hairline-strong);
}
.v2-pdp .v2-pdp-cta-trust__link:hover,
.v2-pdp .v2-pdp-cta-trust__link:focus-visible {
  color: var(--v2-pdp-wine);
  text-decoration: none;
  border-bottom-color: var(--v2-pdp-wine);
}
.v2-pdp-quote--inline {
  margin-top: 32px;
  max-width: var(--v2-pdp-measure);
}
.v2-pdp-media--video {
  aspect-ratio: 9 / 16;
  margin-bottom: 16px;
}
.v2-pdp-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-pdp-wine);
  margin: 0 0 14px;
}
.v2-pdp-h1,
.v2-pdp-h2,
.v2-pdp-h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--v2-pdp-ink);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.v2-pdp-h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.1;
}
.v2-pdp-h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
}
.v2-pdp-h3 {
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  line-height: 1.25;
}
.v2-pdp-lede {
  font-size: clamp(1.1875rem, 2.5vw, 1.375rem);
  line-height: 1.55;
  max-width: var(--v2-pdp-measure);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.v2-pdp-body {
  margin: 0 0 20px;
  max-width: var(--v2-pdp-measure);
}
.v2-pdp-body:last-child {
  margin-bottom: 0;
}
.v2-pdp-small {
  font-size: 16px;
  color: var(--v2-pdp-muted);
}
.v2-pdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--v2-pdp-tap-target);
  padding: 15px 34px;
  border: 1px solid var(--v2-pdp-wine);
  background: var(--v2-pdp-wine);
  color: var(--v2-pdp-canvas);
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--v2-pdp-radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
`
  inside a `@media (pointer: fine)` block — specificity (0,2,2), which beats a
  bare `.v2-pdp-btn:hover`. On desktop only, that repainted every CTA label dark
  grey on the wine fill and underlined it. Our CTA wrappers are divs now rather
  than paragraphs, so the theme rule no longer matches, but this stays as the
  guard: the next person to wrap a button in a <p> should not be able to break
  the primary CTA on the page.
*/
.v2-pdp .v2-pdp-btn:hover,
.v2-pdp .v2-pdp-btn:focus-visible {
  background: var(--v2-pdp-wine-deep);
  border-color: var(--v2-pdp-wine-deep);
  color: var(--v2-pdp-canvas);
  text-decoration: none;
}
.v2-pdp-btn:active {
  transform: translateY(1px);
}
.v2-pdp-btn--wide {
  width: 100%;
}
.v2-pdp-btn__arrow {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-left: 10px;
  transition: transform 0.2s ease;
}
.v2-pdp-btn:hover .v2-pdp-btn__arrow,
.v2-pdp-btn:focus-visible .v2-pdp-btn__arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.v2-pdp-btn__arrow {
    transition: none;
  }
.v2-pdp-btn:hover .v2-pdp-btn__arrow,
  .v2-pdp-btn:focus-visible .v2-pdp-btn__arrow {
    transform: none;
  }
}
@media screen and (max-width: 740px) {
.v2-pdp .v2-pdp-btn:not(.v2-pdp-sticky__cta) {
    width: 100%;
  }
}
.v2-pdp-btn--ghost {
  background: transparent;
  color: var(--v2-pdp-wine);
}
.v2-pdp .v2-pdp-btn--ghost:hover,
.v2-pdp .v2-pdp-btn--ghost:focus-visible {
  background: var(--v2-pdp-wine);
  color: var(--v2-pdp-canvas);
}
.v2-pdp-section--strip {
  padding: 26px 0;
}
@media screen and (min-width: 741px) {
.v2-pdp-section--strip {
    padding: 30px 0;
  }
}
.v2-pdp-quote__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--v2-pdp-radius);
  background: var(--v2-pdp-stone);
}
.v2-pdp-quote__media img,
.v2-pdp-quote__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 740px) {
.v2-pdp-split--hero > .v2-pdp-hero__copy > .v2-pdp-eyebrow {
    order: 2;
  }
.v2-pdp-split--hero > .v2-pdp-hero__copy > .v2-pdp-h1 {
    order: 3;
    margin-bottom: 6px;
  }
.v2-pdp-split--hero > .v2-pdp-hero__copy > .v2-pdp-lede {
    order: 5;
    font-size: 1.3125rem;
    line-height: 1.5;
  }
}
@media screen and (min-width: 741px) {
.v2-pdp-split--solo .v2-pdp-lede,
  .v2-pdp-split--solo .v2-pdp-body {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 741px) {
.v2-pdp-showcase__after .v2-pdp-quote--inline {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}
.v2-pdp-section--wine .v2-pdp-strip__check {
  color: rgba(255, 255, 255, 0.75);
}
.v2-pdp-section--wine .v2-pdp-strip__value {
  justify-self: start;
  padding: 11px 22px;
  background: #ffffff;
  color: var(--v2-pdp-wine-deep);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 741px) {
.v2-pdp-section--wine .v2-pdp-strip__value {
    max-width: none;
    white-space: nowrap;
  }
}
.v2-pdp-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px 24px;
  background: var(--v2-pdp-canvas);
  border: 1px solid var(--v2-pdp-hairline);
  border-radius: var(--v2-pdp-radius);
  box-shadow: var(--v2-pdp-shadow);
}
.v2-pdp-quote::before {
  content: '\201C';
  position: absolute;
  top: 4px;
  right: 20px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--v2-pdp-wine);
  opacity: 0.14;
  pointer-events: none;
}
.v2-pdp-quote:has(.v2-pdp-quote__verified)::before {
  content: none;
}
.v2-pdp-quote__meta {
  position: relative;
  z-index: 1;
}
.v2-pdp-quote__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.v2-pdp-quote__stars {
  display: flex;
  gap: 3px;
  color: var(--v2-pdp-wine);
}
.v2-pdp-quote__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.v2-pdp-quote__verified {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--v2-pdp-go-wash);
  color: var(--v2-pdp-go);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v2-pdp-quote__verified svg {
  display: block;
  width: 13px;
  height: 13px;
}
.v2-pdp-quote__headline {
  position: relative;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--v2-pdp-ink);
}
.v2-pdp-quote__text {
  position: relative;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--v2-pdp-ink);
}
.v2-pdp-quote__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  margin-top: auto;
  list-style: none;
}
.v2-pdp-quote__photo {
  width: 96px;
  margin: 0;
}
.v2-pdp-quote__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--v2-pdp-radius-sm);
  background: var(--v2-pdp-stone);
}
.v2-pdp-quote__photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
@media (pointer: fine) {
.v2-pdp-quote__photo-open:hover img {
    box-shadow: 0 0 0 2px var(--v2-pdp-hairline-strong);
  }
}
.v2-pdp-quote__photo-open:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 3px;
  border-radius: var(--v2-pdp-radius-sm);
}
.v2-pdp-quote__cite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: 15px;
  font-style: normal;
  color: var(--v2-pdp-muted);
}
.v2-pdp-quote:has(.v2-pdp-quote__photos) .v2-pdp-quote__cite {
  margin-top: 0;
}
.v2-pdp-quote__name {
  display: block;
  font-weight: 600;
  color: var(--v2-pdp-ink);
}
.v2-pdp-quote__context {
  display: block;
  font-size: 14px;
  color: var(--v2-pdp-muted);
}
.v2-pdp-quote--on-tint {
  background: var(--v2-pdp-canvas);
}
.v2-pdp-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
@media screen and (min-width: 741px) {
.v2-pdp-quotes {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
  }
}
.v2-pdp-fitg {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}
.v2-pdp-fitg__panel {
  min-width: 0;
  padding: 24px 22px;
  background: var(--v2-pdp-canvas);
  border: 1px solid var(--v2-pdp-hairline);
  border-radius: var(--v2-pdp-radius);
}
@media screen and (min-width: 741px) {
.v2-pdp-fitg__panel {
    padding: 28px;
  }
}
.v2-pdp-fitg__title {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--v2-pdp-ink);
}
.v2-pdp-fitg__title--icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-pdp-fitg__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--v2-pdp-wine-wash);
  color: var(--v2-pdp-wine);
}
.v2-pdp-fitg__icon svg {
  width: 18px;
  height: 18px;
}
.v2-pdp-fitg__lede {
  margin: -6px 0 16px;
  font-size: 17px;
  color: var(--v2-pdp-graphite);
}
.v2-pdp-fitg__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.v2-pdp-fitg__filter-label {
  margin-right: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-pdp-graphite);
}
.v2-pdp-fitg__chip {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--v2-pdp-hairline-strong);
  border-radius: 999px;
  background: var(--v2-pdp-canvas);
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--v2-pdp-graphite);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
@media (pointer: fine) {
.v2-pdp-fitg__chip:hover {
    border-color: var(--v2-pdp-wine);
    color: var(--v2-pdp-wine);
  }
}
.v2-pdp-fitg__chip[aria-pressed='true'] {
  background: var(--v2-pdp-wine);
  border-color: var(--v2-pdp-wine);
  color: var(--v2-pdp-canvas);
}
.v2-pdp-fitg__chip:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 2px;
}
.v2-pdp-fitg__controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.v2-pdp-fitg__nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.v2-pdp-fitg__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--v2-pdp-hairline);
  border-radius: 50%;
  background: var(--v2-pdp-canvas);
  color: var(--v2-pdp-ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.v2-pdp-fitg__arrow svg {
  width: 20px;
  height: 20px;
}
@media (pointer: fine) {
.v2-pdp-fitg__arrow:hover:not(:disabled) {
    border-color: var(--v2-pdp-wine);
    color: var(--v2-pdp-wine);
  }
}
.v2-pdp-fitg__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}
.v2-pdp-fitg__arrow:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 2px;
}
.v2-pdp-fitg__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v2-pdp-fitg__rail::-webkit-scrollbar {
  display: none;
}
.v2-pdp-fitg__rail:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 4px;
}
.v2-pdp-fitg__item {
  flex: 0 0 200px;
  margin: 0;
  scroll-snap-align: start;
}
@media screen and (max-width: 740px) {
.v2-pdp-fitg__controls {
    margin-bottom: 14px;
  }
.v2-pdp-fitg__filter-label {
    display: none;
  }
.v2-pdp-fitg__nav {
    display: none;
  }
.v2-pdp-fitg__rail {
    gap: 14px;
  }
.v2-pdp-fitg__item {
    flex: 0 0 58%;
  }
}
.v2-pdp-fitg__thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--v2-pdp-stone);
  border-radius: var(--v2-pdp-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: pointer;
}
.v2-pdp-fitg__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-pdp-fitg__poster--empty {
  background: var(--v2-pdp-stone);
}
.v2-pdp-fitg__play {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--v2-pdp-wine);
  box-shadow: 0 2px 10px rgba(28, 30, 33, 0.24);
  transition: transform 0.15s ease;
}
.v2-pdp-fitg__play svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media (pointer: fine) {
.v2-pdp-fitg__thumb:hover .v2-pdp-fitg__play {
    transform: translateX(-50%) scale(1.08);
  }
}
.v2-pdp-fitg__thumb:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 2px;
}
.v2-pdp-fitg__caption {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--v2-pdp-graphite);
}
.v2-pdp-fitg__duo {
  display: grid;
  gap: 20px;
}
@media screen and (min-width: 741px) {
.v2-pdp-fitg__duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*
  ---------- The commitment quotes ----------

  A swipeable rail on a phone, a three-up grid from 741px.

  Stacked, the three cards ran about 1200px down a phone — the third was below
  anything a reader reaches, and the first looked like the only one. Side by
  side with the next card's edge showing, the rail says "there are more of
  these" without a word, and costs 300px of page instead of 1200.

  `grid-auto-flow: column` with fixed columns rather than flex, so it stays the
  same element as the desktop grid and the two share everything but direction.
  84% so the next card is visibly cut off at the right edge — a full-width
  snap gives no hint there is anything beside it.

  scroll-padding-inline matches the card's own padding so a snapped card lines
  up with the copy above it rather than against the panel edge.
*/
.v2-pdp-fitg__proof {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 22px;

  /*
    The rail bleeds to both screen edges, undoing the panel's inline padding,
    so a card can sit flush left while the next one runs off the right. Padding
    puts the inset back on the content itself.
  */
  margin-inline: -22px;
  padding-inline: 22px;

  /* The native bar sits over the cards on desktop-class browsers and adds
     nothing on touch, where the gesture is the affordance. */
  scrollbar-width: none;
}

.v2-pdp-fitg__proof::-webkit-scrollbar {
  display: none;
}

.v2-pdp-fitg__proof > * {
  scroll-snap-align: start;
}

@media screen and (min-width: 741px) {
  .v2-pdp-fitg__proof {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }
}
.v2-pdp-fitg__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.v2-pdp-fitg__point {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--v2-pdp-graphite);
}
.v2-pdp-fitg__tick {
  display: inline-flex;
  margin-top: 2px;
  color: var(--v2-pdp-wine);
}
.v2-pdp-fitg__tick svg {
  width: 18px;
  height: 18px;
}
.v2-pdp-fitg__action {
  margin: 20px 0 0;
}
.v2-pdp-fitg__fitter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}
.v2-pdp-fitg__fitter[hidden] {
  display: none;
}
.v2-pdp-fitg__note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--v2-pdp-muted);
}
.v2-pdp-fitg__shift {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 22px;
  background: var(--v2-pdp-wine);
  border-radius: var(--v2-pdp-radius);
  color: var(--v2-pdp-canvas);
  text-align: center;
}
@media screen and (min-width: 741px) {
.v2-pdp-fitg__shift {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    align-items: center;
    gap: 24px;
    padding: 22px 28px;
    text-align: left;
  }
}
.v2-pdp-fitg__seal {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  text-align: center;
  line-height: 1.1;
}
.v2-pdp-fitg__seal-num {
  display: block;
  font-size: 20px;
  font-weight: 700;
}
.v2-pdp-fitg__seal-word {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.v2-pdp-fitg__shift-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--v2-pdp-canvas);
}
.v2-pdp-fitg__shift-text {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.45;
  opacity: 0.92;
}
.v2-pdp-fitg__shift-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--v2-pdp-radius-sm);
  background: transparent;
  color: var(--v2-pdp-canvas);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.v2-pdp .v2-pdp-fitg__shift-cta:hover,
.v2-pdp .v2-pdp-fitg__shift-cta:focus-visible {
  background: var(--v2-pdp-canvas);
  border-color: var(--v2-pdp-canvas);
  color: var(--v2-pdp-wine);
  text-decoration: none;
}
.v2-pdp-fitg__dialog {
  width: min(92vw, 520px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.v2-pdp-fitg__dialog::backdrop {
  background: rgba(18, 19, 21, 0.78);
}
.v2-pdp-fitg__dialog-inner {
  position: relative;
  background: var(--v2-pdp-ink);
  border-radius: var(--v2-pdp-radius);
  overflow: hidden;
}
.v2-pdp-fitg__video {
  display: block;
  width: 100%;
  max-height: 76vh;
  background: #000;
}
.v2-pdp-fitg__dialog-caption {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
}
.v2-pdp-fitg__dialog-caption:empty {
  display: none;
}
.v2-pdp-fitg__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 19, 21, 0.62);
  color: #fff;
  cursor: pointer;
}
.v2-pdp-fitg__close svg {
  width: 20px;
  height: 20px;
}
.v2-pdp-fitg__close:hover {
  background: rgba(18, 19, 21, 0.85);
}
.v2-pdp-fitg__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.v2-pdp-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.v2-pdp-compare th,
.v2-pdp-compare td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid var(--v2-pdp-hairline);
}
.v2-pdp-compare thead th:not(:first-child) {
  width: 24%;
}
.v2-pdp-compare thead th {
  background: transparent;
  color: var(--v2-pdp-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: bottom;
  border-bottom: 1px solid var(--v2-pdp-hairline-strong);
}
.v2-pdp-compare thead th.v2-pdp-compare__us {
  background: var(--v2-pdp-wine);
  color: var(--v2-pdp-canvas);
  border-bottom-color: var(--v2-pdp-wine);
  border-radius: var(--v2-pdp-radius-sm) var(--v2-pdp-radius-sm) 0 0;
  padding-top: 12px;
  font-size: 14px;
}
.v2-pdp-compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--v2-pdp-ink);
  background: transparent;
}
.v2-pdp-compare td.v2-pdp-compare__us {
  background: var(--v2-pdp-wine-wash);
  font-weight: 600;
}
.v2-pdp-compare thead th.v2-pdp-compare__us,
.v2-pdp-compare td.v2-pdp-compare__us {
  box-shadow: inset 1px 0 0 var(--v2-pdp-wine), inset -1px 0 0 var(--v2-pdp-wine);
}
.v2-pdp-compare tbody tr:last-child td.v2-pdp-compare__us {
  border-radius: 0 0 var(--v2-pdp-radius-sm) var(--v2-pdp-radius-sm);
  box-shadow: inset 1px 0 0 var(--v2-pdp-wine), inset -1px 0 0 var(--v2-pdp-wine),
    inset 0 -1px 0 var(--v2-pdp-wine);
}
.v2-pdp-compare__flag {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.v2-pdp-compare__yes {
  color: var(--v2-pdp-wine);
  font-weight: 600;
}
.v2-pdp-compare__no {
  color: var(--v2-pdp-muted);
}
.v2-pdp-compare-scroll {
  overflow-x: auto;
  contain: paint;
  -webkit-overflow-scrolling: touch;
}
.v2-pdp-compare-hint {
  display: none;
}
@media screen and (max-width: 740px) {
.v2-pdp-compare-hint {
    display: block;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-pdp-wine);
  }
.v2-pdp-compare thead th:not(:first-child) {
    width: auto;
    min-width: 118px;
  }
.v2-pdp-compare tbody th,
  .v2-pdp-compare thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    background: var(--v2-pdp-band);
  }
}
.v2-pdp-compare-note {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--v2-pdp-muted);
}
.v2-pdp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- new-customer strip */

.v2-pdp-section--strip {
  padding: 26px 0;
}
@media screen and (min-width: 741px) {
.v2-pdp-section--strip {
    padding: 30px 0;
  }
}
.v2-pdp .v2-pdp-newcust[hidden] {
  display: none !important;
}
.v2-pdp-newcust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.v2-pdp-newcust__copy {
  max-width: var(--v2-pdp-intro);
}
.v2-pdp-newcust__text {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  color: var(--v2-pdp-ink);
  text-wrap: balance;
}
.v2-pdp-newcust__text strong,
.v2-pdp-newcust__text b {
  font-weight: 700;
}
.v2-pdp-newcust__note {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--v2-pdp-muted);
}
.v2-pdp-newcust__cta[aria-busy='true'] {
  cursor: progress;
  opacity: 0.75;
}
.v2-pdp .v2-pdp-section--wine .v2-pdp-newcust__cta {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--v2-pdp-wine-deep);
}
.v2-pdp .v2-pdp-section--wine .v2-pdp-newcust__cta:hover,
.v2-pdp .v2-pdp-section--wine .v2-pdp-newcust__cta:focus-visible {
  background: var(--v2-pdp-stone);
  border-color: var(--v2-pdp-stone);
  color: var(--v2-pdp-wine-deep);
}
@media screen and (max-width: 740px) {
.v2-pdp-newcust__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ------------------------------------------------------------------- piece

   The garment in full: a photograph on one side, the eyebrow, lede and ruled
   detail list on the other. Ported from .tb-piece in assets/travel-bundle.css,
   prefix renamed, minus the colour-pane overrides — sections/v2-pdp-piece.liquid
   has no carousel, because the buy box above it already owns colour.
*/

.v2-pdp-piece {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media screen and (min-width: 741px) {
  /*
    The photograph takes well under half. It is a 4:5 frame, so at an even split
    it stands about 700px tall and towers over the copy beside it — and every
    pixel of width it gives up is a pixel the copy uses to run longer, which is
    what gives the pin something to travel through.

    40 rather than 45 because the detail rows carry a still each, which spends
    190px of the copy column before a word of it is set.
  */
  .v2-pdp-piece {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }

  /*
    Pinned, so the jacket stays in front of her for the whole detail list.

    88px, not a comfortable-looking 32px: the theme's announcement bar is itself
    sticky at top 0 and 56px tall, so anything pinned above 56 slides its own top
    edge underneath it — which on a garment photo means her head disappears
    behind a shipping promo. 56 + 32 of breathing room.

    Sticky is clamped to its grid AREA, so the pin engages only while the taller
    column is still scrolling past and releases when it ends. That is correct
    behaviour, not a bug — and it means the rule is inert when the two columns
    are close in height, which is the normal state for a garment with only two
    or three details.
  */
  .v2-pdp-piece__media {
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .v2-pdp-piece--reverse .v2-pdp-piece__media {
    order: 2;
  }
}

/* `display: block` because this is a <span> inside the lightbox button — an
   inline box ignores aspect-ratio and would collapse the frame to nothing. */
.v2-pdp-piece__still {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--v2-pdp-radius);
  background: var(--v2-pdp-stone);
}

.v2-pdp-piece__still img,
.v2-pdp-piece__still video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-pdp-piece__title {
  margin: 0;
}

/*
  Bigger than the feature titles beneath it on a phone.

  .v2-pdp-h3 clamps to its 1.25rem floor at 390px — 20px — while the detail
  titles were lifted to 21px so they survive a skim. That left the section's own
  heading a pixel SMALLER than the rows it introduces, which flattens the
  hierarchy exactly where it matters: nothing on screen says which line is the
  heading and which are the items.

  26px is the clamp's own desktop ceiling, so this is the heading arriving at
  full size early rather than a new value invented for mobile.
*/
@media screen and (max-width: 740px) {
  .v2-pdp-piece__title {
    font-size: 26px;
    line-height: 1.2;
  }
}

.v2-pdp-piece__lede {
  margin: 16px 0 0;
}

/*
  Hairline-separated rows rather than a gapped stack. These are the garment's
  specifics, and a ruled list reads as a spec sheet she can scan — which is what
  she is doing — where a loose stack of headed paragraphs reads as four more
  pieces of prose to get through. That difference is the whole reason this
  section exists alongside madison-benefits' full-height feature rows.
*/
/*
  22px, not 32px, so the first rule sits the same distance from the lede above
  it as every later rule sits from the row above it.

  The arithmetic, since it is the whole point: each row carries 22px of padding
  top and bottom, so the gap between two rows is 22 + rule + 22. At a 32px list
  margin the first gap was 32 + rule + 22 — 10px wider than all the others, and
  that is exactly the amount that reads as a mistake rather than as a section
  break.
*/
/*
  The wrapper carries the top spacing, not the <ul>.

  <v2-pdp-clips> is an unknown element, so it computes to display:inline and has
  to be told to be a block — and while we are here it is also the only place the
  gap can live. theme.css has `ul:first-child { margin-top: 0 !important }`, and
  this list IS the first child of the clips element, so a margin on the <ul>
  measured 0px no matter what was set. Same `!important` reset that was quietly
  eating the product badge's offset; putting the space on the parent sidesteps
  it instead of fighting it.
*/
v2-pdp-clips {
  display: block;
  margin-top: 22px;
}

.v2-pdp-piece__details {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-pdp-piece__detail {
  padding: 22px 0;
  border-top: 1px solid var(--v2-pdp-hairline);
}

/*
  No rule under the last row. It closed the list off from a section boundary
  that is already obvious from the whitespace, and with the CTA gone from this
  section it was the last thing on the page before a full band change — a line
  under nothing.

  The row keeps its bottom padding: that space belongs to the row, and removing
  it would pull the next section up against the final sentence.
*/

/*
  A still per detail, beside the claim it demonstrates.

  The titles are the arguments and the images are the evidence, so they have to
  be readable together — a row of thumbnails above the list, or a lightbox, puts
  the proof somewhere she has to go and get it.

  Stacked on a phone, where a 190px image beside 17px text leaves neither enough
  room. Full width there is also the only place these read as photography rather
  than as icons.
*/
.v2-pdp-piece__detail--media {
  display: grid;
  gap: 16px;
}

.v2-pdp-piece__detail-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--v2-pdp-radius-sm);
  background: var(--v2-pdp-stone);
}

.v2-pdp-piece__detail-media img,
.v2-pdp-piece__detail-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 741px) {
  /*
    A fixed 190px rather than a fraction: the image is supporting evidence, and
    a share of the column would grow it as the column grows until it outweighed
    the claim. It also leaves the copy about 50 characters, which is the least
    these two-line titles can take without breaking badly.

    `start` alignment, not centre — the image lines up with the title it belongs
    to, so a short detail doesn't float its picture halfway down the row.
  */
  .v2-pdp-piece__detail--media {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
}

/*
  The detail row's own type. Ported from .tb-feature__title / .tb-feature__text,
  which the landing page shares between its showcase and its piece rows; only
  the piece rows came across in this fork.
*/
/*
  18px/600, not the original's 19px/600. The landing page sets its body to 19px
  and its detail title one step above at 19 — same size, carried by weight. This
  fork already stepped body down to 17px (see --v2-pdp-body-size), so the title
  steps with it to keep the same one-notch separation rather than inheriting a
  gap that was measured against different body copy.

  Body font, not Playfair: these are list rows, and a serif at 18px repeated
  four times down a column starts competing with the section heading above it.
*/
.v2-pdp-feature__title {
  font-family: var(--text-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--v2-pdp-ink);
  margin: 0 0 6px;
}

/*
  Bigger on a phone than on desktop, which is backwards from how type scales
  normally work — and deliberate.

  Nobody reads this list; they skim it. On desktop the four titles are visible
  almost at once and a size step is enough to mark them. On a phone each row
  arrives on its own, one screen at a time, and the title is the only thing that
  gets read before the thumb keeps moving — so it has to carry the whole row on
  its own. 21px against the 18px body beneath it, and 700 rather than 600.

  Line-height tightens as the size goes up, so a two-line title still reads as
  one unit rather than as two.
*/
@media screen and (max-width: 740px) {
  .v2-pdp-feature__title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
  }
}

.v2-pdp-feature__text {
  margin: 0;
  color: var(--v2-pdp-graphite);
}

.v2-pdp-feature__text p {
  margin: 0;
}

/* ------------------------------------------------- piece: hero video lightbox

   The left column as a poster with a play button, opening the full clip in a
   <dialog>. Sized and coloured to match the fit-video lightbox in the size-fit
   section — same page, same gesture, so they should not be two different
   controls.

   The one deliberate difference is scale: that one is a 9:16 phone clip in a
   520px dialog, this is landscape film, so the dialog is wide and the play
   button is centred and larger rather than tucked at the bottom edge.
*/

.v2-pdp-piece__video {
  display: block;
  position: relative;
}

/*
  The frame follows the film, not the default 4:5.

  The hero clip is a 1080x1920 portrait that was exported pillarboxed into a
  1920x1920 square. Two things fall out of that, and both are handled here
  rather than left to `cover` to paper over:

    - The poster in assets/ is cropped to the 1080x1920 content, so the white
      side bars baked into the square are gone rather than cropped at by CSS.
    - The frame is 9:16 to match, so nothing is cut. At 4:5 the same poster lost
      ~14% off the top and bottom, which took the feet off both women — in a
      section whose whole argument is how the jacket hangs.

  Only when a hero video is set. The plain-still branch keeps 4:5, which is the
  right shape for the studio product photography it is meant to hold.
*/
.v2-pdp-piece__video .v2-pdp-piece__still {
  aspect-ratio: 9 / 16;
}

/*
  ---------- The thumbnail is shorter on a phone ----------

  9:16 at full width is 608px tall on a 390px screen — two thirds of the
  viewport spent on a still image before a word of the section is read, and the
  play button lands off-centre of what the thumb can reach.

  4:3 brings it to ~256px. The poster is a 9:16 portrait, so `contain` letter-
  boxes it rather than cropping into the two women, and the bars get the panel's
  own stone so they read as a frame rather than as a loading state. Cropping
  instead would have taken their heads and feet off, which is the one thing a
  jacket thumbnail cannot lose.
*/
@media screen and (max-width: 740px) {
  .v2-pdp-piece__video .v2-pdp-piece__still {
    aspect-ratio: 4 / 3;
    background: var(--v2-pdp-stone);
  }

  .v2-pdp-piece__video .v2-pdp-piece__still img,
  .v2-pdp-piece__video .v2-pdp-piece__still video {
    object-fit: contain;
  }
}

/*
  A 9:16 frame is tall, and at the 40% the grid gives a 4:5 still it came out
  910px against an 868px copy column — taller than the thing it sits beside, and
  taller than a 900px laptop viewport. Two costs: the sticky pin goes inert,
  because sticky is clamped to its grid area and there is no slack left to
  travel through, and the section's height is set by the picture rather than by
  the argument next to it.

  Narrowing the column rather than capping the height, because a max-height with
  an aspect-ratio just hands the crop back to object-fit and takes the feet off
  again. At 34% the frame is ~435x773, which clears the copy column and restores
  the pin.

  Scoped with :has() so the plain-still branch keeps its 40%.
*/
@media screen and (min-width: 741px) {
  .v2-pdp-piece:has(.v2-pdp-piece__video) {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  }
}

.v2-pdp-piece__thumb {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* The frame's own radius is on .__still; without this the button's focus ring
     traces a rectangle around a rounded picture. */
  border-radius: var(--v2-pdp-radius);
}

.v2-pdp-piece__thumb:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 3px;
}

/*
  The no-script poster. The button ships `hidden` and the element clears it on
  upgrade, so exactly one of the two is ever visible: before upgrade the button
  is hidden and this shows, after upgrade `:has()` hides this one.

  `:has()` rather than a class toggled from JS, so there is no frame where both
  are painted. Browsers without :has() support are browsers without <dialog>
  support, where the element bails out and leaves the button hidden anyway.
*/
.v2-pdp-piece__video:has(.v2-pdp-piece__thumb:not([hidden])) .v2-pdp-piece__still--fallback {
  display: none;
}

/*
  Play button and label as one centred group.

  They were separate — button in the middle, label pinned bottom-left — and the
  label read as a decorative tag on the photograph rather than as part of the
  control. Together and centred, the thing you are meant to press and the reason
  to press it are one object.
*/
.v2-pdp-piece__cue {
  position: absolute;
  /*
    Stretched across the frame rather than centred from a point. An absolutely
    positioned box with only `left: 50%` is shrink-to-fit against the remaining
    half of the container, which on a 342px phone frame left the label 171px to
    wrap inside — "WATCH / PRODUCT / BREAKDOWN / (45s)", four lines in a circle.
    Pinning both edges gives it the full width and lets align-items do the
    centring.
  */
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  /* The frame is a bright studio white, so the group needs its own contrast
     rather than relying on the picture behind it. */
  text-shadow: 0 1px 6px rgba(28, 30, 33, 0.25);
}

.v2-pdp-piece__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--v2-pdp-wine);
  box-shadow: 0 2px 14px rgba(28, 30, 33, 0.28);
  transition: transform 0.15s ease;
}

/*
  A solid pill rather than bare text. It sits over photography whose brightness
  is not knowable — a white studio wall here, something else after the next
  reshoot — and a wine chip is legible on all of it.
*/
.v2-pdp-piece__cue-label {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--v2-pdp-wine);
  color: #fff;
  font-family: var(--text-font-family);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  /* Deliberately NOT text-transform: uppercase, unlike the other chips in this
     stylesheet — it would render the duration as "(45S)". The label is typed in
     the case it should display. */
  text-align: center;
  text-shadow: none;
  box-shadow: 0 2px 10px rgba(28, 30, 33, 0.22);
  /* Keeps a long label off the edges of a narrow frame. */
  max-width: calc(100% - 24px);
}

.v2-pdp-piece__play svg {
  width: 30px;
  height: 30px;
  /* The glyph's visual centre sits left of its box centre — the triangle's mass
     is on the left of a square viewBox. Nudged so it looks centred in the
     circle rather than measuring as centred. */
  margin-left: 3px;
}

@media (pointer: fine) {
  .v2-pdp-piece__thumb:hover .v2-pdp-piece__play {
    transform: scale(1.06);
  }
}

/*
  Shrink-wrapped to the video rather than given a width.

  A fixed width guesses the file's aspect ratio, and guessing wrong is very
  visible: the clip wired in here is square (1920x1920), and at the 1100px this
  first used it rendered 1100x738 with black pillars down both sides and the
  close button stranded out in the bar.

  `width: fit-content` lets the <video> below size itself against the viewport
  and the dialog take whatever shape that produces — correct for square,
  portrait and landscape without anyone having to come back and retune it when
  the file is re-encoded.
*/
.v2-pdp-piece__dialog {
  width: fit-content;
  max-width: 94vw;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.v2-pdp-piece__dialog::backdrop {
  background: rgba(18, 19, 21, 0.78);
}

.v2-pdp-piece__dialog-inner {
  position: relative;
  background: var(--v2-pdp-ink);
  border-radius: var(--v2-pdp-radius);
  overflow: hidden;
}

/*
  The element that actually decides the size. Bounded on both axes and left to
  work out its own dimensions from the file's intrinsic ratio — so there are no
  bars on any side, whatever shape the video turns out to be.
*/
.v2-pdp-piece__dialog-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: 82vh;
  background: #000;
}

/*
  The crop correction, for a file whose picture is boxed inside a different
  container ratio than its own — see "Crop video to ratio" in the section.

  `height` has to be definite for `aspect-ratio` to size the box: with width and
  height both `auto`, as the uncropped rule above leaves them, the video's
  intrinsic dimensions win and the declared ratio is ignored entirely. So the
  height is pinned to the same 82vh cap and the width is derived from it.
*/
.v2-pdp-piece__dialog-video--cropped {
  aspect-ratio: var(--v2-pdp-piece-video-aspect);
  object-fit: cover;
  height: 82vh;
  width: auto;
}

.v2-pdp-piece__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 19, 21, 0.62);
  color: #fff;
  cursor: pointer;
}

.v2-pdp-piece__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media screen and (max-width: 740px) {
  .v2-pdp-piece__play {
    width: 56px;
    height: 56px;
  }

  .v2-pdp-piece__play svg {
    width: 24px;
    height: 24px;
  }

  /*
    Kept to one line on the shorter mobile thumbnail. Spelling the duration out
    as "(45 seconds)" makes the label 36 characters, and at the desktop 13px
    plus 0.08em tracking that wrapped to two lines — a pill deep enough to cover
    both women's faces on a 245px-tall frame.

    12px with tighter tracking measures ~278px inside the ~303px the frame
    allows, so it reads as a caption on the picture rather than a banner across
    it. The words are unchanged: the duration is the reason to press it.
  */
  /*
    No `nowrap`, and the max-width stays. Forcing one line made the pill 350px
    against a 327px frame — it hung off both edges, which is worse than the wrap
    it was meant to avoid. The label is short enough to fit on one line at this
    size; if it is ever lengthened it wraps inside the frame instead of
    escaping it.
  */
  .v2-pdp-piece__cue-label {
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 8px 14px;
  }

  /* Tighter, so the button and its label read as one object on a frame with
     much less room than the desktop one. */
  .v2-pdp-piece__cue {
    gap: 10px;
  }
}

/* --------------------------------------------- size fit: the promise card

   The overview panel above the evidence. Same panel chrome as the others in
   the section — it is a peer, not a banner — with two differences that come
   from its job: it spans the full width rather than sitting in the two-up, and
   its list is set a step larger, because these four lines are the ones someone
   who reads nothing else should still come away with.
*/

/*
  ---------- Why this one panel is dressed differently ----------

  It is the only panel in the section making a promise rather than showing
  evidence, and it is the first thing under the heading. Four changes, each
  doing one job:

  1. White, not the cream every other panel uses. The band behind it is sand
     (#f5f3eb) and the panel token is the theme's cream — two warm neutrals a
     few percent apart, so the card barely read as a card at all. White is the
     cheapest way to make it look like an object placed on the page.

  2. Hairline-ruled rows instead of a gapped stack. Same treatment as the
     detail list in v2-pdp-piece higher up the page, which is the point: a
     reader who has already scrolled past one ruled spec list reads a second one
     as the same voice rather than as a different component.

  3. Real padding. Premium reads as air more than as ornament, and this is the
     one card on the page worth spending it on.

  4. A bordered tick rather than a bare check — the four of them are the card's
     only iconography, so they are worth drawing properly.

  No shadow and no radius — see --v2-pdp-shadow and --v2-pdp-radius at the top
  of this file. Both are deliberately off across these sections, and a single
  floating rounded card would read as imported from somewhere else.
*/
.v2-pdp-fitg__panel--promise {
  margin-bottom: 20px;
  background: #ffffff;
  border-color: var(--v2-pdp-hairline-strong);
  padding: 26px 22px;
}

@media screen and (min-width: 741px) {
  .v2-pdp-fitg__panel--promise {
    padding: 44px 40px;
  }
}

/*
  ---------- A section heading that is a sentence ----------

  Kept for the case where someone sets the section heading as well, though the
  template leaves it blank. .v2-pdp-h2 tops out at 2.5rem, which is right for
  "How our jacket compares" and wrong for a sentence: at that size this one runs
  three lines on desktop and eight on a phone.
*/
.v2-pdp-h2--sentence {
  font-size: clamp(1.375rem, 2.9vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  color: var(--v2-pdp-graphite);
}

.v2-pdp-h2--sentence b,
.v2-pdp-h2--sentence strong {
  font-weight: 700;
  color: var(--v2-pdp-ink);
}

/*
  ---------- The promise card: sentence against the promises ----------

  Two columns on desktop, and the reason is the measure rather than the look.
  Full width, the card is ~1280px inside its padding, which put "Different
  heights and shapes, so you can see the fit on a body like yours." on a single
  1100px line — roughly 130 characters, about double a comfortable measure, and
  the eye loses the line-start on the way back. Splitting it gives the promises
  ~700px and the sentence a column of its own.

  38/62 rather than an even split: the sentence is three short lines and the
  rows are the substance, so the rows take the larger share. Same proportion as
  the piece section further up the page, which is also a statement beside a
  ruled list — the page should look like it was laid out by one person.

  A vertical hairline between the two, because without it the sentence and the
  first promise sit at the same optical height with nothing saying they are
  different kinds of thing.
*/
.v2-pdp-fitg__promise-grid {
  display: grid;
  gap: 24px;
}

@media screen and (min-width: 741px) {
  .v2-pdp-fitg__promise-grid {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    column-gap: 44px;

    /*
      Top-aligned. This was centred for a while, on the argument that a short
      sentence beside a tall list leaves dead space below it and centring turns
      that into margin — but the sentence is the section's opening line, and an
      opening line that starts halfway down the card reads as floating rather
      than as the start of anything. Aligning it with the first promise makes
      the two columns start together, which is what a reader expects of a
      statement and its list.

      The dead space is now below the sentence, and that is the accepted cost.
      34% column width is kept because it gives the sentence a fourth line,
      which reduces how much there is.
    */
    align-items: start;
  }

  /*
    The rule belongs to the divide, so it goes on the promises' edge and spans
    their full height — the taller of the two columns. Hung off the sentence
    instead it would stop three lines down and look clipped.
  */
  .v2-pdp-fitg__promise-grid > .v2-pdp-fitg__points--promise {
    border-left: 1px solid var(--v2-pdp-hairline);
    padding-left: 44px;
  }
}

/*
  The sentence. Serif at a reading size, not a display one — Playfair at the
  2.5rem a short title could carry turns three lines of prose into a billboard.
  Weight stays 400 so the bolded guarantee name has something to stand against.
*/
.v2-pdp-fitg__promise-intro {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  /* 1.4375rem = 23px on a phone, up from 21px. It is the first thing read in
     the section and it is three or four lines, so it can carry the size. */
  font-size: clamp(1.4375rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--v2-pdp-graphite);
  text-wrap: pretty;
}

.v2-pdp-fitg__promise-intro b,
.v2-pdp-fitg__promise-intro strong {
  font-weight: 700;
  color: var(--v2-pdp-ink);
}


/*
  The rows. `gap: 0` because the separation is carried by the rules and the
  rows' own padding — a gap on top of both would double the spacing and pull
  the hairlines away from the text they divide.
*/
.v2-pdp-fitg__points--promise {
  gap: 0;
  margin-top: 0;
}

/*
  Rules strictly BETWEEN the rows — `:not(:first-child)`, not a blanket
  border-top. With no header above it, a rule on the first row would draw a line
  across the top of the card just inside its own border: two parallel lines a
  few pixels apart, which reads as a rendering fault.
*/
/*
  ---------- Mobile type on this card ----------

  The audience is women 50+ reading on a phone, and this card is the one that
  answers the objection that loses the most sales — so it is set LARGER on
  mobile than on desktop relative to its surroundings, not smaller.

  17px was the section's inherited body size. These rows go to 18px with the
  lead at 19px, which is above --v2-pdp-body-size deliberately: the four leads
  are the sentence she should come away with even if she reads nothing else.
*/
.v2-pdp-fitg__points--promise .v2-pdp-fitg__point {
  padding: 16px 0;
  gap: 14px;
  font-size: 18px;
  line-height: 1.5;
}

.v2-pdp-fitg__points--promise .v2-pdp-fitg__point-lead {
  font-size: 19px;
  line-height: 1.4;
}

.v2-pdp-fitg__points--promise .v2-pdp-fitg__point:not(:first-child) {
  border-top: 1px solid var(--v2-pdp-hairline);
}

.v2-pdp-fitg__points--promise .v2-pdp-fitg__tick {
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 1px solid var(--v2-pdp-wine);
  border-radius: 50%;
}

.v2-pdp-fitg__points--promise .v2-pdp-fitg__tick svg {
  width: 14px;
  height: 14px;
}

@media screen and (min-width: 741px) {
  .v2-pdp-fitg__points--promise .v2-pdp-fitg__point {
    padding: 20px 0;
    font-size: 18px;
  }

  /* Back in line with the row on desktop — the size step exists to help a
     phone reader scan, and at 700 weight on a wide row it is enough on its
     own. */
  .v2-pdp-fitg__points--promise .v2-pdp-fitg__point-lead {
    font-size: inherit;
  }
}

/* A step below the lead, so the bold phrase takes the eye first and the
   sentence is there for whoever wants it. */
.v2-pdp-fitg__points--promise .v2-pdp-fitg__point > span:last-child {
  color: var(--v2-pdp-muted);
}

.v2-pdp-fitg__points--promise .v2-pdp-fitg__point-lead {
  color: var(--v2-pdp-ink);
}

/*
  The numbered rows — the guarantee itself.

  A ring rather than a filled disc, matching the ticks beside the rows below so
  the two markers read as one family. Tabular figures and a fixed 26px box so
  "1", "2" and "3" all sit on the same optical centre; proportional digits drift
  a pixel or two each and the column stops looking like a column.
*/
.v2-pdp-fitg__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--v2-pdp-wine);
  border-radius: 50%;
  color: var(--v2-pdp-wine);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/*
  The "PLUS:" row.

  Its own row in the list rather than a heading above a second list, so the
  hairlines keep their rhythm — a separate <ul> would need its own top border
  and would sit a different distance from the row above than every other gap in
  the card.

  No marker in the left column, so the label starts where the numbers and ticks
  do and the eye reads it as a break in the same column rather than as another
  item in it.
*/
/*
  No bottom padding, and no rule under it. "PLUS:" is a label for the rows that
  follow, so it should sit against them; a hairline plus 20px of air between a
  heading and the thing it heads reads as a third group rather than as the start
  of the second.

  Both selectors are scoped under .v2-pdp-fitg__points--promise to outweigh the
  row rules there — `…--promise .v2-pdp-fitg__point` (0,0,2,0) for the padding
  and `…--promise .v2-pdp-fitg__point:not(:first-child)` (0,0,3,0) for the
  border. Written short, they lost silently and measured 20px and 1px.
*/
.v2-pdp-fitg__points--promise .v2-pdp-fitg__point--divider {
  display: block;
  padding-top: 18px;
  padding-bottom: 0;
}

/*
  A single exception rather than a change to the pattern: the group label
  already marks the break, so a rule immediately under it drew the same boundary
  twice and spent ~20px of height doing it.
*/
.v2-pdp-fitg__points--promise .v2-pdp-fitg__point--divider + .v2-pdp-fitg__point {
  border-top: 0;
}

.v2-pdp-fitg__plus {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-pdp-muted);
}

/*
  A lead that links. Bold like its siblings so the list still scans as one
  thing, with an underline to mark it as the one row she can go and check —
  colour alone would not, for anyone who cannot separate wine from ink.
*/
.v2-pdp-fitg__point-lead--link {
  font-weight: 700;
  color: var(--v2-pdp-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (pointer: fine) {
  .v2-pdp-fitg__point-lead--link:hover {
    color: var(--v2-pdp-oxblood);
  }
}

.v2-pdp-fitg__point-lead--link:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 2px;
}

/*
  The lead reads as its own line on a phone and runs into the sentence on a
  wider screen. Four bold phrases stacked down a narrow column is the fastest
  way to take in what the guarantee covers; forcing that same break on desktop
  would just leave four short lines and a lot of ragged space.
*/
.v2-pdp-fitg__point-lead {
  display: block;
  font-weight: 700;
  color: var(--v2-pdp-ink);
}

@media screen and (min-width: 741px) {
  .v2-pdp-fitg__point-lead {
    display: inline;
    /* The bold phrase and the sentence are one paragraph on desktop, so the
       space between them has to be real rather than collapsed out by Liquid's
       whitespace handling. */
    margin-right: 0.35em;
  }
}

/* ==================================================== mobile type floors

   The audience is women 50+ reading on a phone. travel-bundle.css puts it
   plainly — "Do not shrink these to match other sections" — and this fork
   already stepped body copy down from its 19px to 17px to sit beside the
   theme's 16px. That trade was about matching neighbours, and it should not
   have been paid twice: several labels in these sections had drifted to 12-15px
   on top of it.

   Audited at 390px and lifted below. The rule applied: anything a shopper has
   to READ gets 16px or more; only a genuine uppercase micro-label stays under
   that, and nothing goes below 14px.

   Mobile only. Desktop is a different reading distance and these sizes are
   already comfortable there, so the floors lift and then release at 741px where
   an existing rule sets the desktop value.
*/
@media screen and (max-width: 740px) {
  /* The height-and-size label under each fit video. This is the single most
     useful piece of sizing information in the section — "5'2\", size Small" is
     what a reader matches herself against — and it was the smallest text in the
     panel. */
  .v2-pdp-fitg__caption {
    font-size: 16px;
    line-height: 1.4;
  }

  /* The filter buttons above those videos. Also a tap target, so the size
     helps twice. */
  .v2-pdp-fitg__chip {
    font-size: 16px;
  }

  /* Quote attribution. The name and what she exchanged are the part that makes
     the quote evidence rather than decoration. */
  .v2-pdp-quote__name {
    font-size: 17px;
  }

  .v2-pdp-quote__context {
    font-size: 15px;
  }

  /* "Verified buyer" was 12px — the smallest text on the page, on the word
     doing the most trust work in the card. */
  .v2-pdp-quote__verified {
    font-size: 14px;
  }

  /*
    Comparison table. The column headings that say WHO is being compared were
    13px, and the row labels — which are the actual claims — were 15px.

    Specificity note: the base rules are `.v2-pdp-compare thead th` (0,0,2,1)
    and `.v2-pdp-compare thead th.v2-pdp-compare__us` (0,0,3,1). A plain
    `.v2-pdp-compare th` loses to both no matter which media query it sits in,
    so these have to match that shape rather than being written short.
  */
  .v2-pdp-compare thead th {
    font-size: 15px;
  }

  .v2-pdp-compare thead th.v2-pdp-compare__us {
    font-size: 16px;
  }

  .v2-pdp-compare tbody th {
    font-size: 16px;
  }

  /* The instruction that the table scrolls sideways. A hint nobody can read is
     not a hint. */
  .v2-pdp-compare-hint {
    font-size: 16px;
  }

  /* The play-button label on the hero video. */
  .v2-pdp-piece__cue-label {
    font-size: 14px;
  }
}

/* A row label that links to the section proving it. Underlined rather than
   coloured alone, so it is still marked as a link for anyone who cannot
   separate wine from ink — same treatment as the promise row's linked lead. */
/* Inline links authored into a row label get the same treatment as the ones
   the `>` convention builds — the reader should not be able to tell which
   mechanism produced a given link. */
.v2-pdp-compare th a,
.v2-pdp-compare__label-link {
  color: var(--v2-pdp-wine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 700;
}

@media (pointer: fine) {
  .v2-pdp-compare th a:hover,
  .v2-pdp-compare__label-link:hover {
    color: var(--v2-pdp-oxblood);
  }
}

.v2-pdp-compare th a:focus-visible,
.v2-pdp-compare__label-link:focus-visible {
  outline: 2px solid var(--v2-pdp-wine);
  outline-offset: 2px;
}

/* ============================================ sticky review strip (mobile)

   Rides directly above Kaching's sticky add-to-cart bar. The bar's height is
   measured at runtime and written to --sticky-bar-height by the element; see
   assets/v2-pdp-sticky-reviews.js for why we measure rather than inject.

   Mobile only. Desktop has the rating in the buy box and no sticky bar.
*/

.v2-pdp-sticky-reviews {
  display: none;
}

@media screen and (max-width: 740px) {
  .v2-pdp-sticky-reviews {
    display: block;
    position: fixed;
    left: 0;
    right: 0;

    /*
      Stacked on their bar. The fallback matters: if the measurement has not
      run yet — or Kaching never mounts — 0px puts the strip flush to the
      bottom of the viewport rather than floating in the middle of the page.
    */
    bottom: var(--sticky-bar-height, 0px);

    /*
      Below Kaching's own bar, which sits at a high z-index of its own, and
      above the page. Deliberately not competing with theirs: if the two ever
      overlap, the buy button is the one that must win.
    */
    z-index: 3;

    /* Hidden until their bar is on screen. `visibility` as well as opacity, so
       it cannot be tapped while invisible. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  .v2-pdp-sticky-reviews.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /*
    Selector carries the parent deliberately. The theme ships
    `a[href="#looxReviews"] { color: inherit }` — an attribute selector at
    (0,0,2,0) — which beat a single class and left white-on-grey text invisible
    on the strip. Anything linking to the review wall from here has to outweigh
    that rule.
  */
  .v2-pdp-sticky-reviews a.v2-pdp-sticky-reviews__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--container-gutter, 20px);

    /*
      Wine, not --v2-pdp-ink. Ink is the body TEXT colour (#545454) and using it
      as a surface put a grey slab under the white Kaching bar that read as a
      rendering artefact. The deep wine is a surface in this palette, separates
      cleanly from the white bar below, and marks the strip as ours.
    */
    background: var(--v2-pdp-wine-deep);
    color: #fff;
    text-decoration: none;
    font-family: var(--text-font-family);

    /* 15px, not the 16px floor the rest of the audit uses: this is one line of
       supporting information sitting on top of the buy bar, and every pixel it
       takes is a pixel of the product it covers. Still well above the 12-13px
       the third-party bars around it use. */
    font-size: 15px;
    line-height: 1.2;
  }

  /*
    The half star. An unfilled row of glyphs with a filled row clipped over it
    at --v2-pdp-rating, so a 4.5 renders as four and a half rather than being
    rounded to one side.

    The glyphs carry no meaning a screen reader needs — the visually hidden
    sentence after them says the rating in words.
  */
  .v2-pdp-sticky-reviews a .v2-pdp-sticky-reviews__stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.02em;
    /* Stops the glyphs inheriting the link's line-height and leaving the two
       rows a pixel out of vertical alignment. */
    line-height: 1;
    white-space: nowrap;
  }

  .v2-pdp-sticky-reviews a .v2-pdp-sticky-reviews__stars-track {
    color: rgba(255, 255, 255, 0.34);
  }

  .v2-pdp-sticky-reviews a .v2-pdp-sticky-reviews__stars-fill {
    position: absolute;
    inset: 0;
    width: var(--v2-pdp-rating, 100%);
    overflow: hidden;
    color: #f5c518;
  }

  .v2-pdp-sticky-reviews a .v2-pdp-sticky-reviews__text {
    font-weight: 600;
  }

  /*
    The tap cue. Pushed to the right edge and underlined, because a dark strip
    above a button does not otherwise look like something you can press — the
    whole row is the target, but nothing was saying so.
  */
  .v2-pdp-sticky-reviews a .v2-pdp-sticky-reviews__cue {
    margin-left: auto;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}