/* Chi Chi structural overrides — Homepage Copy Map v3 */

/*
 * Mosaic section titles (C'est Chic / ICE CREAM EFFECT / COCKTAILS / LE FREAK).
 * Fluid scale + wrap — replaces template step-scale (80/140/240) and nowrap clip.
 */
.tale-head__title {
  font-size: clamp(80px, 24vw, 287px) !important;
  text-wrap: pretty !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 0.9 !important;
  letter-spacing: -0.06em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
@supports (text-wrap: balance) {
  .tale-head__title {
    text-wrap: balance !important;
  }
}
/* Beat template text-wrap:nowrap on hydrated mosaic titles. */
.tale-head__title[data-v-9445181d] {
  text-wrap: pretty !important;
  white-space: normal !important;
}
@supports (text-wrap: balance) {
  .tale-head__title[data-v-9445181d] {
    text-wrap: balance !important;
  }
}
.chichi-title-word {
  white-space: nowrap;
}

/*
 * #cest-chic playlist headline — permanent three-line stack (The / sound / within).
 * Replaces SSR one-line + Vue hover/hydrate swap; word boundaries via .chichi-title-word.
 */
#cest-chic .tale-product-story__song h2[data-chichi-playlist-headline] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: var(--sans-letter-spacing, -0.03em) !important;
}
#cest-chic .tale-product-story__song h2[data-chichi-playlist-headline] .chichi-title-word {
  display: block;
  white-space: nowrap;
}

@media (min-width: 48em) {
  .tale-head__title {
    letter-spacing: -0.07em !important;
  }
}
@media (min-width: 64em) {
  .tale-head__title {
    letter-spacing: -0.08em !important;
  }
}

/*
 * ICE CREAM EFFECT mosaic: full display scale (parity with C'est Chic / LE FREAK).
 * Long title wraps naturally to two lines when needed — no cqi shrink or JS fit.
 */
#ice-cream-effect .tale-head {
  overflow-x: clip;
}
#ice-cream-effect .tale-head__inner {
  container-type: inline-size;
  container-name: ice-cream-head;
  overflow-x: clip;
  row-gap: clamp(16px, 2.5vw, 32px);
}
#ice-cream-effect .tale-head__title {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(8px, 1.5vw, 20px);
  margin-inline: 0;
  margin-block: 0 clamp(12px, 2vw, 28px);
  text-align: center;
  white-space: normal !important;
  text-wrap: pretty !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  overflow: visible !important;
  line-height: 0.9 !important;
  transform: none !important;
  font-size: clamp(80px, 24vw, 287px) !important;
  letter-spacing: -0.06em !important;
}
@supports (text-wrap: balance) {
  #ice-cream-effect .tale-head__title {
    text-wrap: balance !important;
  }
}
@media (min-width: 48em) {
  #ice-cream-effect .tale-head__title {
    letter-spacing: -0.07em !important;
  }
}
@media (min-width: 64em) {
  #ice-cream-effect .tale-head__title {
    letter-spacing: -0.08em !important;
  }
}

/*
 * COCKTAILS mosaic: one unbreakable word (no space → no wrap). Multi-word
 * titles (C'est Chic, LE FREAK, ICE CREAM EFFECT) stack via .chichi-title-word;
 * COCKTAILS needs a width-derived cap on the shared clamp(80px, 24vw, 287px).
 */
#cocktails .tale-head {
  overflow-x: clip;
}
#cocktails .tale-head__inner {
  container-type: inline-size;
  container-name: cocktails-head;
  overflow-x: clip;
  row-gap: clamp(16px, 2.5vw, 32px);
}
#cocktails .tale-head__title {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(8px, 1.5vw, 20px);
  margin-inline: 0;
  margin-block: 0 clamp(12px, 2vw, 28px);
  text-align: center;
  white-space: normal !important;
  text-wrap: pretty !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  overflow: visible !important;
  line-height: 0.9 !important;
  transform: none !important;
  font-size: min(
    clamp(80px, 24vw, 287px),
    calc((100vw - 2 * clamp(8px, 1.5vw, 20px)) / 4.75)
  ) !important;
  letter-spacing: -0.06em !important;
}
@supports (text-wrap: balance) {
  #cocktails .tale-head__title {
    text-wrap: balance !important;
  }
}
@media (min-width: 48em) {
  #cocktails .tale-head__title {
    letter-spacing: -0.07em !important;
  }
}
@media (min-width: 64em) {
  #cocktails .tale-head__title {
    letter-spacing: -0.08em !important;
  }
}

/*
 * Hero chapter index — must not exceed the viewport.
 * 375px scroll came from .btn--big chapter labels (esp. ICE CREAM EFFECT at
 * 50px + nowrap ≈406px) on a UL centered with translate(-50%).
 */
.hero__index {
  box-sizing: border-box;
  max-width: calc(100vw - 28px);
  width: 100%;
  padding-inline: 14px;
}

@media (max-width: 47.99em) {
  .hero__index .btn--big .btn__text {
    font-size: clamp(22px, 7vw, 50px) !important;
    letter-spacing: var(--sans-letter-spacing, -0.03em) !important;
    line-height: 1.05 !important;
  }
}

.chapters-menu__label,
.chapters-progress__bar {
  white-space: nowrap;
}

/* Desktop hero index: ICE CREAM EFFECT stays one line at full btn scale */
@media (min-width: 48em) {
  .hero__index a[href="#ice-cream-effect"] .btn__text {
    white-space: nowrap !important;
  }
}

/*
 * Bottom chapter progress — lipstick pink-red fill (was black, hard to notice).
 * Text + white track unchanged; only the moving fill picks up brand heat.
 */
:root {
  --chichi-progress-fill: #ef2b5c;
  /* Three-image tale-head side gutter copy — inset from page edge (see rules below). */
  --tale-head-gutter-inset: clamp(16px, 1.6666666667vw, 24px);
}
.chapters-progress__fill,
.chapters-menu__progress {
  background-color: var(--chichi-progress-fill) !important;
}

/* Hero chapter index + mobile drawer: SHOP NOW always last under COCKTAILS */
.hero__index-shop,
.chapters-menu__shop {
  margin-top: 0.35em;
}

/*
 * Intro caption — match .intro__abstract typography (bundled caption is 18px).
 */
.intro__caption[data-v-3a5bd0b8] {
  font-size: 30px !important;
  line-height: 36px !important;
  letter-spacing: var(--sans-letter-spacing, -0.03em) !important;
}

@media (min-width: 90em) {
  .intro__caption[data-v-3a5bd0b8] {
    font-size: clamp(30px, 2.0833333333vw, 35.8333333333px) !important;
    line-height: clamp(36px, 2.5vw, 43px) !important;
  }
}

/*
 * Intro headline — widen so "THE SPIRIT OF THE NIGHT" breaks as:
 * THE / SPIRIT OF / THE NIGHT (not THE / SPIRIT OF / THE / NIGHT).
 */
@media (max-width: 63.99em) {
  .intro__inner h1[data-v-3a5bd0b8] {
    max-width: min(380px, 92vw) !important;
  }
}

@media (min-width: 64em) {
  .intro__inner[data-v-3a5bd0b8] {
    max-width: 580px !important;
  }
}

@media (min-width: 90em) {
  .intro__inner[data-v-3a5bd0b8] {
    max-width: clamp(580px, 40.2777777778vw, 692.2222222222px) !important;
  }
}

/*
 * Satoshi tracking — ALL --font-sans / Satoshi text (body + subheads).
 * Figma -3% → CSS -0.03em. Mosaic chapter titles keep --display-letter-spacing.
 */
:root {
  --sans-letter-spacing: -0.03em;
  --body-letter-spacing: var(--sans-letter-spacing);
  --body-letter-spacing-crushed: var(--sans-letter-spacing);
}

.intro__abstract[data-v-3a5bd0b8],
.intro__caption[data-v-3a5bd0b8],
.tale-head__abstract[data-v-9445181d],
.tale-lookbook__side-col p[data-v-3342bb2a],
.tale-product-story__content p[data-v-d6421652],
.tale-product-story__story p[data-v-d6421652],
.tale-product-story__crafting p[data-v-d6421652],
.tale-outro__head p[data-v-8a2ce1f3],
#cest-chic .chichi-cest-chic__story p {
  letter-spacing: var(--sans-letter-spacing) !important;
}

#ice-cream-effect .tale-head__type.-left,
#ice-cream-effect .tale-head__type.-right,
#ice-cream-effect .tale-head__type.-left .tale-head__type-story,
#ice-cream-effect .tale-head__type.-right .tale-head__type-story,
#le-freak .tale-head__type.-left,
#le-freak .tale-head__type.-right,
#le-freak .tale-head__type.-left .tale-head__type-story,
#le-freak .tale-head__type.-right .tale-head__type-story {
  letter-spacing: var(--sans-letter-spacing) !important;
}

/*
 * Intro / hero chapter index SHOP NOW — runtime link lacks Vue scope attrs,
 * so mirror .btn.btn--secondary.btn--big.btn--contained.btn--black here.
 */
.hero__index .chichi-hero-shop,
.chapters-menu__shop .chichi-hero-shop {
  background-color: var(--color-black, #030303);
  color: var(--color-white, #fff);
  display: inline-block;
  mix-blend-mode: normal;
  text-decoration: none;
}

.hero__index .chichi-hero-shop .btn__text,
.chapters-menu__shop .chichi-hero-shop .btn__text {
  color: var(--color-white, #fff);
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 44px;
  text-transform: uppercase;
}

@media (min-width: 90em) {
  .hero__index .chichi-hero-shop .btn__text,
  .chapters-menu__shop .chichi-hero-shop .btn__text {
    font-size: clamp(50px, 3.4722222222vw, 59.7222222222px);
    line-height: clamp(44px, 3.0555555556vw, 52.5555555556px);
  }
}

@media (max-width: 63.99em) {
  .hero__index .chichi-hero-shop .btn__text,
  .chapters-menu__shop .chichi-hero-shop .btn__text {
    font-size: 16px;
    letter-spacing: var(--sans-letter-spacing, -0.03em);
    line-height: 20px;
  }
}

@media (hover: hover) {
  .hero__index .chichi-hero-shop:hover,
  .hero__index .chichi-hero-shop:focus-visible,
  .chapters-menu__shop .chichi-hero-shop:hover,
  .chapters-menu__shop .chichi-hero-shop:focus-visible {
    background-color: var(--color-white, #fff);
    color: var(--color-black, #030303);
  }

  .hero__index .chichi-hero-shop:hover .btn__text,
  .hero__index .chichi-hero-shop:focus-visible .btn__text,
  .chapters-menu__shop .chichi-hero-shop:hover .btn__text,
  .chapters-menu__shop .chichi-hero-shop:focus-visible .btn__text {
    color: var(--color-black, #030303);
  }
}

/* C'est Chic head gutters: View recipe button (left) + Chic Le Freak tagline (right) */
#cest-chic .tale-head__type.-left.-has-shop {
  text-transform: none;
  pointer-events: auto;
}
#cest-chic .tale-head__type.-left.-has-shop .chichi-head-shop {
  pointer-events: auto;
  display: inline-flex;
  white-space: nowrap;
}

/*
 * Three-image tale-head — side gutter text inset from page edge.
 * Homepage chapters: C'est Chic, ICE CREAM EFFECT, LE FREAK, COCKTAILS.
 * Centre .tale-head__abstract unchanged; mosaic images untouched.
 */
#cest-chic .tale-head__type.-left,
#ice-cream-effect .tale-head__type.-left,
#le-freak .tale-head__type.-left,
#cocktails .tale-head__type.-left {
  padding-inline-start: var(--tale-head-gutter-inset);
  box-sizing: border-box;
}
#cest-chic .tale-head__type.-right,
#ice-cream-effect .tale-head__type.-right,
#le-freak .tale-head__type.-right,
#cocktails .tale-head__type.-right {
  padding-inline-end: var(--tale-head-gutter-inset);
  box-sizing: border-box;
}

/* Splash ring — block homepage intro art leaked into age-gate spinner only */
.the-splash__ring-spinner img[src*="homepage/intro"],
.the-splash__ring-spinner img[src*="neon-alley-intro"],
.the-splash__ring-spinner img[src*="grand-entrance-intro"],
.the-splash__ring-spinner picture,
.the-splash__ring-spinner source[srcset*="homepage/intro"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Curtains canvas — hide on return-session until intro-side planes are purged */
html.splash-return-session:not(.chichi-curtains-armed) #curtains-canvas,
html.chichi-curtains-hold #curtains-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* C'est Chic — lookbook removed; story in white tale-head (cover retained) */
#cest-chic .tale-lookbook {
  display: none !important;
}
#cest-chic .chichi-cest-chic__story {
  margin-top: clamp(20px, 2.5vw, 40px);
  padding-inline: var(--tale-head-gutter-inset);
  box-sizing: border-box;
}
#cest-chic .chichi-cest-chic__story p {
  margin: 0;
  max-width: clamp(280px, 42vw, 520px);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 24px;
}
@media (min-width: 90em) {
  #cest-chic .chichi-cest-chic__story p {
    font-size: clamp(18px, 1.25vw, 21.5px);
    line-height: clamp(24px, 1.6666666667vw, 28.6666666667px);
  }
}
@media (max-width: 63.99em) {
  #cest-chic .chichi-cest-chic__story {
    padding-inline: clamp(16px, 5vw, 32px);
  }
  #cest-chic .chichi-cest-chic__story p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: min(480px, 86%);
  }
}

/* Product once (C'est Chic only); cocktail grid in Cocktails section only */
#ice-cream-effect .tale-product-overview,
#ice-cream-effect .tale-product-story,
#ice-cream-effect .tale-product-gallery,
#le-freak .tale-product-overview,
#le-freak .tale-product-story,
#le-freak .tale-product-gallery,
#cocktails .tale-product-overview,
#cocktails .tale-product-story,
#cest-chic .tale-product-gallery {
  display: none !important;
}

/* C'est Chic product hero — full-bleed cover from 16:9 master */
#cest-chic .tale-product-overview__main-image img {
  object-fit: cover;
  object-position: center 42%;
  width: 100%;
  height: 100%;
  min-height: 100svh;
}

#cest-chic .tale-cover__bg img {
  object-fit: cover;
  object-position: center 42%;
}

/*
 * ICE CREAM EFFECT (#ice-cream-effect):
 * - header = title + koji abstract only (no texture under the title)
 * - left + right type gutters = body paragraphs (same size/weight/column)
 * - stories sit in the white gutters, bottom-aligned with the main image
 * - lookbook: single main image, title + body below (coconut story)
 */
#ice-cream-effect .tale-head__content {
  position: relative;
}

#ice-cream-effect .tale-head__type.-left,
#ice-cream-effect .tale-head__type.-right {
  white-space: normal;
  text-transform: none;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 1.35;
  text-align: left;
  z-index: 5;
  max-width: min(240px, 20vw);
}
#ice-cream-effect .tale-head__type.-left .tale-head__type-story,
#ice-cream-effect .tale-head__type.-right .tale-head__type-story {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}
@media (min-width: 64em) {
  #ice-cream-effect .tale-head__type.-left,
  #ice-cream-effect .tale-head__type.-right {
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    max-width: min(220px, 16vw);
  }
  #ice-cream-effect .tale-head__type.-left {
    left: 0 !important;
    right: auto !important;
  }
  #ice-cream-effect .tale-head__type.-right {
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 63.99em) {
  #ice-cream-effect .tale-head__type.-right {
    position: relative;
    bottom: auto;
    right: auto;
    display: block;
    max-width: min(480px, 86%);
    margin: 28px auto 0;
    text-align: center;
  }
}

/* ICE CREAM lookbook — horizontal: text column (40%) + single main image (60%) */
#ice-cream-effect .tale-lookbook__secondary-image,
#ice-cream-effect .tale-lookbook__side-col > .base-image {
  display: none !important;
}
#ice-cream-effect .tale-lookbook__side-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}
#ice-cream-effect .tale-lookbook__side-col .chichi-lookbook__title {
  font-family: var(--font-sans), "Satoshi", sans-serif;
  font-size: clamp(18px, 1.35vw, 24px);
  font-weight: 500;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 1.25;
  margin: 0;
  margin-left: clamp(20px, 1.3888888889vw, 23.8888888889px);
  max-width: clamp(256px, 17.7777777778vw, 305.7777777778px);
  text-transform: none;
  color: var(--color-black, #030303);
}
#ice-cream-effect .tale-lookbook__side-col p {
  margin-left: clamp(20px, 1.3888888889vw, 23.8888888889px);
  margin-top: clamp(12px, 1.5vw, 20px);
  max-width: clamp(256px, 17.7777777778vw, 305.7777777778px);
  text-align: left;
}
#ice-cream-effect .tale-lookbook__side-col .text-link-arrow {
  display: inline-flex;
  margin-left: clamp(20px, 1.3888888889vw, 23.8888888889px);
  margin-top: clamp(12px, 1.5vw, 20px);
  white-space: nowrap;
}
@media (max-width: 63.99em) {
  #ice-cream-effect .tale-lookbook__inner[data-v-3342bb2a] {
    padding-block: clamp(48px, 12vw, 80px);
  }

  #ice-cream-effect .tale-lookbook__side-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 0 !important;
    width: 86% !important;
    max-width: 480px;
    min-height: min(52svh, 420px);
    text-align: center;
  }

  #ice-cream-effect .tale-lookbook__side-col .chichi-lookbook__title,
  #ice-cream-effect .tale-lookbook__side-col p {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-align: center;
    max-width: none;
  }

  #ice-cream-effect .tale-lookbook__side-col .chichi-lookbook__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
  }

  #ice-cream-effect .tale-lookbook__side-col p {
    font-size: 18px;
    line-height: var(--body-line-height, 1.44);
  }

  #ice-cream-effect .tale-lookbook__side-col .text-link-arrow {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
  }
}

/*
 * LE FREAK (#le-freak): full mosaic title — same scale as C'est Chic.
 * Layout gutters mirror ICE CREAM EFFECT; title does NOT use ICE CREAM cqi shrink.
 */
#le-freak .tale-head__content {
  position: relative;
}
#le-freak .tale-head__type.-left,
#le-freak .tale-head__type.-right {
  white-space: normal;
  text-transform: none;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 1.35;
  text-align: left;
  z-index: 5;
  max-width: min(240px, 20vw);
}
#le-freak .tale-head__type.-left .tale-head__type-story,
#le-freak .tale-head__type.-right .tale-head__type-story {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}
@media (min-width: 64em) {
  #le-freak .tale-head__type.-left,
  #le-freak .tale-head__type.-right {
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    max-width: min(220px, 16vw);
  }
  #le-freak .tale-head__type.-left {
    left: 0 !important;
    right: auto !important;
  }
  #le-freak .tale-head__type.-right {
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 63.99em) {
  #le-freak .tale-head__type.-right {
    position: relative;
    bottom: auto;
    right: auto;
    display: block;
    max-width: min(480px, 86%);
    margin: 28px auto 0;
    text-align: center;
  }
}

/*
 * COCKTAILS (#cocktails): side gutter copy under head images 1 + 3.
 */
#cocktails .tale-head__content {
  position: relative;
}
#cocktails .tale-head__type.-left,
#cocktails .tale-head__type.-right {
  white-space: normal;
  text-transform: none;
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 1.35;
  text-align: left;
  z-index: 5;
  max-width: min(240px, 20vw);
}
#cocktails .tale-head__type.-left .tale-head__type-story,
#cocktails .tale-head__type.-right .tale-head__type-story {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}
@media (min-width: 64em) {
  #cocktails .tale-head__type.-left,
  #cocktails .tale-head__type.-right {
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    max-width: min(220px, 16vw);
  }
  #cocktails .tale-head__type.-left {
    left: 0 !important;
    right: auto !important;
  }
  #cocktails .tale-head__type.-right {
    right: 0 !important;
    left: auto !important;
  }
}
@media (max-width: 63.99em) {
  #cocktails .tale-head__type.-right {
    position: relative;
    bottom: auto;
    right: auto;
    display: block;
    max-width: min(480px, 86%);
    margin: 28px auto 0;
    text-align: center;
  }
}

/*
 * Distillery sidebar — Woodward Street Distilling Co.
 * Keep hero + brand story; hide legacy values/songs blocks.
 * Socials: Instagram only (no WhatsApp / Etsy).
 */
.maker-side-modal .brand-values,
.maker-side-modal .brand-songs,
.maker-side-modal .editorial-info {
  display: none !important;
}
.maker-side-modal .maker-hero__socials a[href*="whatsapp"],
.maker-side-modal .maker-hero__socials a[href*="wa.me"],
.maker-side-modal .maker-hero__socials a[href*="etsy"],
.maker-side-modal .maker-hero__socials a[href*="soundcloud"],
.maker-side-modal .maker-hero__socials a[href*="#pending"] {
  display: none !important;
}

/* Cover side labels: white on dark, black on light via difference blend. */
.tale-cover__name {
  color: #fff;
  mix-blend-mode: difference;
}

/*
 * Mobile hero bracket labels — .-is-desktop hides cover names below 64em.
 * Centre-stack both flanking titles in the middle of the square cover.
 */
@media (max-width: 63.99em) {
  .tale-cover .tale-cover__name.-is-desktop {
    display: block !important;
    position: absolute;
    left: 50% !important;
    right: auto !important;
    text-align: center;
    width: max-content;
    max-width: calc(100vw - 32px);
    z-index: 4;
    margin: 0;
  }

  .tale-cover .tale-cover__name.-is-desktop:first-child {
    bottom: calc(50% + 0.7em) !important;
    transform: translate(-50%, 50%) !important;
  }

  .tale-cover .tale-cover__name.-is-desktop:nth-child(2) {
    bottom: calc(50% - 0.7em) !important;
    transform: translate(-50%, 50%) !important;
  }

  /*
   * Mobile chapter heads — [CHI CHI] / [VODKA] flank the mosaic title row.
   * Full width; corner labels share tale-head__abstract inset (12px).
   */
  .tale-head__pre[data-v-9445181d] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between !important;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding-inline: 12px;
  }

  .tale-head__pre[data-v-9445181d] p {
    margin: 0;
    flex: 0 1 auto;
  }

  .tale-head__pre[data-v-9445181d] p:first-child {
    text-align: left;
  }

  .tale-head__pre[data-v-9445181d] p:last-child {
    text-align: right;
  }

  /*
   * Mobile mosaic titles — Nuxt applies translate(-16px) for optical centre on
   * nowrap titles; once words wrap it reads off-centre (esp. LE FREAK).
   * Extra air between [CHI CHI]/[VODKA] and the headline (~64px).
   */
  #cest-chic .tale-head__title[data-v-9445181d],
  #ice-cream-effect .tale-head__title[data-v-9445181d],
  #le-freak .tale-head__title[data-v-9445181d],
  #cocktails .tale-head__title[data-v-9445181d] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-inline: 0;
    margin-top: 64px !important;
    padding-inline: clamp(8px, 1.5vw, 20px);
    text-align: center !important;
    transform: none !important;
  }
}

/* ICE CREAM cover — full-bleed object-fit within tale-cover aspect box */
#ice-cream-effect .tale-cover {
  overflow: hidden;
}

#ice-cream-effect .tale-cover__bg {
  width: 100%;
}

#ice-cream-effect .tale-cover__bg img {
  object-fit: cover;
  object-position: center 42%;
}

/* LE FREAK cover — full-bleed object-fit within tale-cover aspect box */
#le-freak .tale-cover {
  overflow: hidden;
}

#le-freak .tale-cover__bg {
  width: 100%;
}

#le-freak .tale-cover__bg img {
  object-fit: cover;
  object-position: center center;
}

#cocktails .tale-product-gallery {
  --f6763f6a: calc((100% - 96px) / 4) !important;
}

/*
 * Cocktails gallery — never show stale SSR/chapter JPEGs before Shopify hydrate.
 * Placeholders match /cocktails and /shop loading convention.
 */
#cocktails .media-placeholder.chichi-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--placeholder-ratio, 1 / 1);
  width: 100%;
  background-color: var(--color-indaco, #6a15ff);
  color: var(--color-black-70, rgba(0, 0, 0, 0.7));
  box-sizing: border-box;
}

#cocktails .media-placeholder.chichi-gallery-placeholder .media-placeholder__label {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  padding: 12px;
  max-width: 90%;
}

#cocktails
  .tale-product-gallery__list:not([data-chichi-gallery-hydrated="1"])
  .tale-product-gallery__plane
  picture,
#cocktails
  .tale-product-gallery__list:not([data-chichi-gallery-hydrated="1"])
  .tale-product-gallery__plane
  img {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#cocktails
  .tale-product-gallery__list[data-chichi-gallery-hydrated="1"]
  .chichi-gallery-placeholder {
  display: none !important;
}

/* Cocktails head side columns: keep img visible if Curtains plane fails on col2 */
#cocktails .tale-head__side-col1 picture img,
#cocktails .tale-head__side-col2 picture img {
  visibility: visible !important;
  opacity: 1 !important;
}

#cocktails .tale-product-gallery__body {
  font-family: var(--font-sans), "Satoshi", sans-serif;
  font-size: clamp(16px, 1.25vw, 21px);
  letter-spacing: var(--sans-letter-spacing, -0.03em);
  line-height: 1.35;
  max-width: 440px;
  margin: 0 auto clamp(12px, 1.5vw, 20px);
  text-align: center;
  color: var(--color-black, #000);
}
#cocktails .tale-product-gallery__body + .text-link-arrow {
  display: inline-flex;
  margin: 0 auto 40px;
  white-space: nowrap;
}
#cocktails .tale-product-gallery__inner {
  text-align: center;
}

/*
 * Cocktails gallery — image cards link to recipe pages (no Curtains lightbox).
 * Overlay link sits above the plane; mobile View recipe btn stays on top.
 */
#cocktails .tale-product-gallery__plane {
  position: relative;
}

#cocktails .tale-product-gallery__item {
  cursor: pointer;
}

#cocktails .tale-product-gallery__shop-btn {
  z-index: 3;
}

@media (max-width: 63.99em) {
  #cocktails .tale-product-gallery h3[data-v-0653fa0c] {
    font-size: 28px;
    line-height: 1.2;
  }

  #cocktails .tale-product-gallery__item.-is-active h3[data-v-0653fa0c] {
    font-size: 36px;
    line-height: 1.15;
  }

  #cocktails .tale-product-gallery__shop-btn .btn__text {
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.04em;
  }
}

/*
 * Cocktails gallery hover cursor — [→] instead of template [+].
 * Open cursor is teleported to body; class is applied by runtime JS.
 */
.cocktails-gallery-cursor > svg:nth-child(2),
.cocktails-gallery-cursor .icon:nth-child(2) svg {
  display: none !important;
}

.cocktails-gallery-cursor .cocktails-gallery-cursor-arrow {
  display: inline-block;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/*
 * Site-wide shared header replaces Vue .the-header on homepage.
 * Splash sound buttons remain in .the-splash (z-index above shared header).
 */
.the-header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Playlist hover cursor (left/right of inline track list) — visual only.
 * Nuxt cursor is pointer-events: none; play icon inside is decorative.
 */
.tale-product-story__cursor svg,
.tale-product-story__cursor .icon {
  display: none !important;
}

/*
 * Privacy chrome — handled in Shopify later.
 * Suppress iubenda cookie banner + floating prefs, footer legal links.
 */
[class*="iubenda"],
#iubenda-cs-banner,
.iubenda-cs-preferences-link,
.the-footer a[href*="iubenda.com"],
.the-footer__legal,
.the-footer__links .-is-mobile:has(a[href*="iubenda"]),
.the-footer__links .-is-desktop a[href*="iubenda"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * Footer statement uses shared chapter-title scale (footer.js + chapter-title.css).
 * Legacy Nuxt footer bottom band is removed in footer.js; hide if hydration re-adds it.
 */
.the-footer__bottom,
.the-footer__overlay,
.the-footer__copyright {
  display: none !important;
}

/*
 * Extra-large default cursors from bundled .cur masters. Fine pointer only.
 * Ring cursor + drag trails from the template are fully suppressed.
 */
:root {
  --chichi-cursor-default: url("/brand/cursors/arrow.png") 0 0, auto;
  --chichi-cursor-pointer: url("/brand/cursors/pointer.png") 9 0, pointer;
}

@media (hover: hover) and (pointer: fine) {
  html,
  html body,
  html .tale-head,
  html .tale-lookbook,
  html .the-splash {
    cursor: var(--chichi-cursor-default) !important;
  }

  html a,
  html button,
  html input[type="button"],
  html input[type="submit"],
  html input[type="reset"],
  html label[for],
  html select,
  html summary,
  html [role="button"],
  html [role="link"],
  html .btn,
  html [data-site-sound],
  html .the-splash__sound-btn {
    cursor: var(--chichi-cursor-pointer) !important;
  }

  html input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  html textarea {
    cursor: var(--chichi-cursor-default) !important;
  }
}

/* Kill template ring cursor + drag trails */
.the-splash__ring-cursor,
.the-splash__ring-spinner,
.tale-head__trail,
.tale-lookbook__trail,
.tale-head__mobile-trail,
.tale-head__trail-img,
.tale-lookbook__trail-img,
.tale-head__mobile-trail-img,
body > img[src*="ring-float"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Age gate dismiss — reveal shared header + hero chapter index once splash
 * (or boot cover) has cleared. chichi-home-revealed covers return-session
 * reloads where splash-exit-complete is never set.
 */
html.age-gate-homepage:not(.chichi-home-revealed):not(.splash-exit-complete) [data-site-header] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html.splash-exit-complete [data-site-header],
html.splash-exit-complete .hero__index,
html.chichi-home-revealed [data-site-header],
html.chichi-home-revealed .hero__index {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

html.splash-exit-complete [data-site-header] .site-header__logo-img {
  animation: chichi-splash-header-logo-in 700ms ease forwards;
  opacity: 0;
}

@keyframes chichi-splash-header-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.splash-exit-complete [data-site-header] .site-header__logo-img {
    animation: none;
    opacity: 1;
  }
}

/*
 * Mobile homepage — classic in-flow scroll at chapter handoffs.
 * Drops sticky chapter pins, outro reveal padding, section fade spacers,
 * and GSAP residual transforms so outro image + CTA scroll normally.
 */
@media (max-width: 63.99em) {
  .homepage .tale-cover[data-v-8e566236] {
    position: relative !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
  }

  .homepage .tale-cover .tale-cover__bg,
  .homepage .tale-cover .responsive-image.tale-cover__bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  .homepage .tale-cover .tale-cover__bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .homepage .tale-outro[data-v-8a2ce1f3] {
    padding-top: 0 !important;
  }

  .homepage .homepage__tale[data-v-f32f2486]::after {
    display: none !important;
    content: none !important;
  }

  .homepage .homepage__tale[data-v-f32f2486] {
    transform: none !important;
    filter: none !important;
  }

  .homepage .tale-outro__image[data-v-8a2ce1f3],
  .homepage .tale-outro__image-wr[data-v-8a2ce1f3] img,
  .homepage .tale-cover__bg img[data-v-8e566236] {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}