/* ============================================================
   0. FONTS — self-hosted, no Google Fonts request
   ============================================================ */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ⚠️  LICENCE — READ BEFORE LAUNCH
   Brittany Signature is licensed for PERSONAL USE ONLY. This is a
   commercial site, so it needs a licence bought from
   https://creatypestudio.co/brittany — and check it covers WEBFONT
   embedding, which is often sold separately from desktop use.

   Until that's bought, switch the --script token below to "Sacramento",
   which is SIL Open Font Licence and free for commercial use. Both are
   already here; it's a one-word change. */
@font-face {
  font-family: "Brittany Signature";
  src: url("assets/fonts/BrittanySignature.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Licence-safe stand-in. Same monoline signature feel. */
@font-face {
  font-family: "Sacramento";
  src: url("assets/fonts/Sacramento.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. TOKENS — sampled from the logo, gradient and reference
   ============================================================ */
:root {
  /* Brand palette, exactly as supplied.
     Raspberry Rose #C2185B · Wine Berry #7A1638 · Blush Petal #F3C6D4
     Warm Cream #F7F1EC · Taupe Beige #CBB9AE · Soft Black #191516 */
  --paper: #f7f1ec; /* Warm Cream — page background */
  --paper-2: #ffffff; /* Clean White — raised surfaces */
  --wine: #7a1638; /* Wine Berry — headings */
  --pink: #c2185b; /* Raspberry Rose — buttons, links, accents */
  --pink-pale: #f3c6d4; /* Blush Petal — tints, chip fills */
  --taupe: #cbb9ae; /* Taupe Beige — rules, quiet edges */
  --ink: #191516; /* Soft Black — body text */
  --pink-soft: #e88fae; /* between Raspberry and Blush, for the gradient */
  --muted: #6b5a60; /* Soft Black lifted, kept above 4.5:1 on cream */
  --rule: #cbb9ae; /* Taupe Beige */

  --gradient: linear-gradient(135deg, #f3c6d4 0%, #e88fae 50%, #c2185b 100%);

  /* Frosted glass. Surfaces are translucent so the roses read through
     them; the veil keeps text legible over the busiest part of the photo. */
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --frost: blur(18px) saturate(1.35);
  --veil: rgba(247, 241, 236, 0.62);

  --display: "Montserrat", system-ui, sans-serif;
  /* Swap to "Sacramento" to be licence-clean — see the note above. */
  --script: "Brittany Signature", "Sacramento", cursive;
  --body: "Montserrat", system-ui, sans-serif;

  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --measure: 74rem;
  --radius: 14px;
  --radius-lg: 26px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================
   1b. THE GLASS — roses behind, frost and droplets in front
   ============================================================ */
body::before,
body::after,
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -3;
}
body::after {
  z-index: -2;
}
html::before {
  z-index: -1;
}

/* The photo. Already blurred in the file, so the browser isn't asked
   to blur a full-screen image on every frame. */
body::before {
  background: url("assets/img/bg-roses.jpg") center / cover no-repeat,
    var(--paper);
}

/* The veil. This is what makes dark text readable over the busiest part
   of the roses — without it the body copy fails contrast on a phone,
   where a tall narrow viewport crops in on the most saturated petals. */
body::after {
  background: linear-gradient(
    180deg,
    rgba(247, 241, 236, 0.5) 0%,
    rgba(247, 241, 236, 0.58) 45%,
    rgba(247, 241, 236, 0.7) 100%
  );
}

/* Droplets sit on top of the veil, because they're on the near face of
   the glass. Kept faint — at full strength they read as bubbles. */
html::before {
  background: url("assets/img/droplets.png") repeat top left / 460px 460px;
  opacity: 0.45;
}

/* Turn the droplets off with class="no-droplets" on <body>. */
html:has(body.no-droplets)::before {
  display: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--wine);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
}

/* The script face is the accent, used sparingly. */
.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pink);
}

.label {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1em 1.75em;
  border: 1px solid var(--pink);
  border-radius: 100px;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn:hover {
  background: var(--wine);
  border-color: var(--wine);
}

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
}

.btn--ghost:hover {
  background: var(--wine);
  color: #fff;
}

.btn--light {
  background: var(--pink-pale);
  border-color: var(--pink-pale);
  color: var(--wine);
}

.btn--light:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.btn--wide {
  width: 100%;
}

.btn--sm {
  padding: 0.7em 1.25em;
  font-size: 0.6875rem;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  border-bottom: 1px solid var(--glass-edge);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.85rem;
  /* The SHOP badge is fixed to the top-right corner, so the nav has to
     stop short of it or the two overlap. */
  padding-right: clamp(6.5rem, 15vw, 10.5rem);
}

.masthead__logo {
  margin-right: auto;
  display: block;
  line-height: 0;
  flex: 0 0 auto; /* never let the nav squeeze the logo out of view */
}

.masthead__logo img {
  height: 30px;
  width: auto;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.masthead__nav a {
  text-decoration: none;
  color: var(--ink);
}

.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  color: var(--pink);
}

.cart-count {
  color: var(--pink);
}

/* Language switch */
.lang {
  display: inline-flex;
  border: 1px solid var(--glass-edge);
  border-radius: 100px;
  overflow: hidden;
  background: var(--glass);
}

.lang button {
  border: 0;
  background: none;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.5em 0.75em;
  color: var(--muted);
  cursor: pointer;
}

.lang button[aria-pressed="true"] {
  background: var(--wine);
  color: #fff;
}

/* The circular shop badge, borrowed from the reference */
.badge {
  position: fixed;
  top: 0;
  right: clamp(0.5rem, 3vw, 2.5rem);
  z-index: 45;
  width: clamp(88px, 12vw, 122px);
  aspect-ratio: 1;
  border-radius: 0 0 100px 100px;
  background: var(--gradient);
  display: grid;
  place-items: center;
  padding-top: 0.9rem;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -14px rgba(89, 25, 52, 0.65);
  transition: transform 0.2s ease;
}

.badge:hover {
  transform: translateY(3px);
}

/* ============================================================
   4. HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.25rem, 7vw, 5rem);
}

.hero__line {
  font-size: clamp(2.5rem, 6.6vw, 4.6rem);
  max-width: 11ch;
}

.hero__line em {
  display: block;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  color: var(--pink);
  font-size: 1.05em;
  letter-spacing: 0;
  /* Signature scripts throw swashes well outside the font's line box,
     which CSS can't measure — the descender of the Y and the tail of the
     final letter both overshoot. This is hand-tuned clearance, not
     something to shrink without looking at it. */
  line-height: 1.28;
  padding-block: 0.1em 0.2em;
  margin-top: 0.02em;
}

.hero__note {
  margin-top: 2rem;
  max-width: 38ch;
  color: var(--muted);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__art {
  border-radius: var(--radius-lg);
  background: url("assets/img/bg-roses-soft.jpg") center / cover no-repeat,
    var(--gradient);
  box-shadow: 0 18px 48px -28px rgba(89, 25, 52, 0.55);
  border: 1px solid var(--glass-edge);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

/* Text that sits directly on the background gets its own soft scrim.
   This is what lets the veil above stay light: readability is handled
   locally, where it's needed, instead of by bleaching the whole photo.
   The gradient has no hard edge, so it reads as haze rather than a box. */
/* The scrim overhangs its text block on purpose, which would widen the
   page. Clipping on <html> doesn't reliably propagate to the viewport in
   Chromium, so the clip lives on the content container instead. `clip`
   rather than `hidden` keeps the sticky header working. */
main,
.colophon {
  overflow-x: clip;
}

.scrim {
  position: relative;
  isolation: isolate;
}

@supports not (overflow-x: clip) {
  .scrim::before {
    inset: -3rem -2rem;
  }
}

.scrim::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Generous overhang so the fade happens well outside the text, not
     across it — otherwise the corners go thin exactly where the darkest
     petals are. */
  inset: -6rem -8rem;
  pointer-events: none;
  background: rgba(247, 241, 236, 0.93);
  -webkit-mask-image: radial-gradient(
    78% 72% at 50% 50%,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.72) 60%,
    rgba(0, 0, 0, 0.28) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    78% 72% at 50% 50%,
    #000 0%,
    #000 40%,
    rgba(0, 0, 0, 0.72) 60%,
    rgba(0, 0, 0, 0.28) 80%,
    transparent 100%
  );
}

/* No mask support: fall back to a plain soft panel rather than
   unreadable text over roses. */
@supports not ((mask-image: radial-gradient(#000, transparent)) or
               (-webkit-mask-image: radial-gradient(#000, transparent))) {
  .scrim::before {
    background: rgba(247, 241, 236, 0.95);
    border-radius: var(--radius-lg);
  }
}

/* ============================================================
   4b. STORY PANEL — the hero, styled like an Instagram story
   ============================================================ */
.story {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  max-width: 440px;
  margin-inline: auto;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--wine);
  isolation: isolate;
  touch-action: pan-y;
}

.story__stage {
  position: absolute;
  inset: 0;
}

.story__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.story__slide.is-on {
  opacity: 1;
}

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

.story__slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.5rem 1.15rem 1.15rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  /* The gradient is what keeps white text legible over any photo. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(25, 21, 22, 0.55) 55%,
    rgba(25, 21, 22, 0.8) 100%
  );
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Segmented progress, one bar per story */
.story__bars {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 4;
  display: flex;
  gap: 3px;
}

.story__bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.38);
  overflow: hidden;
}

.story__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 3px;
}

.story__head {
  position: absolute;
  top: 1.5rem;
  left: 0.75rem;
  /* Only as wide as its own content — a full-width bar here swallows
     taps meant for the navigation zones underneath. */
  right: auto;
  max-width: calc(100% - 1.5rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
  padding: 0.35rem 0.4rem;
  border-radius: 100px;
}

.story__head:hover {
  background: rgba(0, 0, 0, 0.22);
}

.story__avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  object-fit: cover;
  flex: 0 0 auto;
}

.story__who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.story__who b,
.story__who em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story__who b {
  font-size: 0.8125rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.story__who em {
  font-style: normal;
  font-size: 0.7rem;
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Invisible tap zones, exactly like the app: left third back,
   right two thirds forward. */
.story__tap {
  position: absolute;
  top: 3.5rem;
  bottom: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.story__tap--prev {
  left: 0;
  width: 32%;
}

.story__tap--next {
  right: 0;
  width: 68%;
}

.story__tap:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

.story.is-paused .story__slide.is-on img {
  filter: brightness(0.92);
}

.fan {
  width: 88%;
  max-width: 380px;
}

.fan__tip {
  transform-origin: 200px 200px;
  animation: fan-open 0.95s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes fan-open {
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0.72);
  }
}

/* ============================================================
   4c. GOOGLE REVIEWS
   ============================================================ */
.band--reviews {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.reviews__score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  order: 2;
}

.reviews__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--wine);
  line-height: 1;
}

.reviews__meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--pink);
  line-height: 0;
}

.star {
  display: block;
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.review {
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.review blockquote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink);
}

.review cite {
  margin-top: auto;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

.reviews__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

/* ============================================================
   5. GALLERY STRIP
   ============================================================ */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.strip__cell {
  aspect-ratio: 3 / 4;
  background: var(--t);
  overflow: hidden;
  position: relative;
}

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

.strip__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 30% 15%,
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.band {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.band--tint {
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-block: 1px solid var(--glass-edge);
}

.band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.band__title {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
}

.band__head a {
  color: var(--pink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.band__head a:hover {
  color: var(--wine);
}

.centered {
  text-align: center;
}

.centered .band__title {
  margin-bottom: 2.5rem;
}

/* ============================================================
   7. FEATURED SERVICE CARDS
   ============================================================ */
.styles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.style {
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.style--lead {
  background: var(--wine);
  border-color: var(--wine);
}

.style--lead .style__name,
.style--lead .style__blurb {
  color: #fff;
}

.style--lead .style__blurb {
  opacity: 0.82;
}

.style__art {
  aspect-ratio: 4 / 3;
  background: var(--t);
  position: relative;
  overflow: hidden;
}

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

.style__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 85% at 28% 12%,
    rgba(255, 255, 255, 0.26),
    transparent 60%
  );
}

.style__body {
  padding: 1.25rem 1.15rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.style__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--wine);
  letter-spacing: -0.01em;
}

.style__blurb {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.style__body .btn {
  margin-top: auto;
}

/* ============================================================
   8. SERVICE LIST
   ============================================================ */
.services {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.services li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}

.services__name {
  font-weight: 700;
  color: var(--wine);
}

.services__time {
  color: var(--muted);
  font-size: 0.8125rem;
}

.services__price {
  margin-left: auto;
  white-space: nowrap;
  color: var(--pink);
  font-weight: 700;
}

/* ============================================================
   9. PRODUCT GRID
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
}

.card__art {
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--sw);
  overflow: hidden;
}

.card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      130% 82% at 26% 12%,
      rgba(255, 255, 255, 0.34),
      transparent 56%
    ),
    radial-gradient(88% 70% at 86% 96%, rgba(0, 0, 0, 0.22), transparent 60%);
}

.card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

.card__dots {
  position: absolute;
  bottom: 0.55rem;
  left: 0.55rem;
  z-index: 3;
  display: flex;
  gap: 4px;
}

.card__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--d);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.card__body {
  padding: 0.95rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.card__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--wine);
  letter-spacing: -0.01em;
}

.card__sub {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.card__foot {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.card__foot .label {
  color: var(--pink);
}

/* ============================================================
   10. FILTERS
   ============================================================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.chip {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55em 1.15em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

/* ============================================================
   11. PRODUCT DETAIL
   ============================================================ */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
}

.detail__art {
  aspect-ratio: 1;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--sw);
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease;
}

.detail__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      120% 80% at 25% 10%,
      rgba(255, 255, 255, 0.36),
      transparent 55%
    ),
    radial-gradient(90% 75% at 88% 96%, rgba(0, 0, 0, 0.24), transparent 58%);
}

.detail__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

.detail__name {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  margin-block: 0.35rem 0.3rem;
}

.detail__sub {
  color: var(--muted);
  margin: 0;
}

.detail__price {
  font-size: 1.35rem;
  color: var(--pink);
  font-weight: 800;
  margin-block: 1.1rem;
}

.detail__copy {
  border-top: 1px solid var(--rule);
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  color: var(--muted);
}

.opt {
  margin-top: 1.5rem;
}

.opt__head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.7rem;
}

.opt__chosen {
  color: var(--wine);
  font-size: 0.875rem;
  font-weight: 600;
}

.opt__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* glossy nail tip used for shades */
.swatch {
  width: 44px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 22px 22px 7px 7px;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 6px 12px -6px rgba(255, 255, 255, 0.9),
    inset 0 -8px 14px -8px rgba(0, 0, 0, 0.45),
    0 2px 6px -3px rgba(36, 26, 31, 0.4);
  transition: transform 0.14s ease;
}

.swatch:hover {
  transform: translateY(-2px);
}

.swatch[aria-pressed="true"] {
  border-color: var(--pink);
}

.swatch[data-out="1"] {
  opacity: 0.3;
  cursor: not-allowed;
}

.swatch[data-out="1"]:hover {
  transform: none;
}

.pill {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6em 1.15em;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.pill[aria-pressed="true"] {
  border-color: var(--pink);
  color: var(--wine);
  background: var(--pink-pale);
}

.pill[data-out="1"] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--glass-edge);
  border-radius: 100px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.qty button {
  background: none;
  border: 0;
  font-size: 1.05rem;
  padding: 0.5em 0.85em;
  cursor: pointer;
  color: var(--wine);
}

.qty input {
  width: 2.5rem;
  text-align: center;
  border: 0;
  background: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  -moz-appearance: textfield;
}

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

.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.75rem;
}

/* ============================================================
   12. CART
   ============================================================ */
.lines {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.line__art {
  width: 46px;
  height: 58px;
  border-radius: 23px 23px 6px 6px;
  background: var(--sw);
  box-shadow: inset 0 6px 12px -6px rgba(255, 255, 255, 0.9);
}

.line__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--wine);
  text-decoration: none;
}

.line__opts {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.15rem;
}

.line__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

.line__remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 0.8125rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

.line__remove:hover {
  color: var(--pink);
}

.line__price {
  text-align: right;
  white-space: nowrap;
  color: var(--wine);
  font-weight: 700;
}

.totals {
  margin-left: auto;
  max-width: 22rem;
}

.totals__row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.45rem;
  color: var(--muted);
}

.totals__row--sum {
  border-top: 1px solid var(--rule);
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  font-size: 1.1rem;
  color: var(--wine);
  font-weight: 700;
}

.empty {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  text-align: center;
}

.empty h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  margin-bottom: 0.6rem;
}

.empty p {
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 42ch;
  margin-inline: auto;
}

.notice {
  border: 1px solid var(--pink);
  background: var(--pink-pale);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  color: var(--wine);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

.notice[hidden] {
  display: none;
}

/* ============================================================
   13. BOOKING
   ============================================================ */
.booking {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  min-height: 780px;
  margin-top: 1.75rem;
}

.booking iframe {
  width: 100%;
  min-height: 780px;
  border: 0;
  display: block;
}

.booking__fallback {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.booking__fallback a {
  color: var(--pink);
  font-weight: 600;
}

/* ============================================================
   14. INFO + FOOTER
   ============================================================ */
.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}

.info h2 {
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}

.info dl,
.prose dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1.25rem;
  max-width: 24rem;
}

.info dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.info dd,
.prose dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.prose dt {
  color: var(--muted);
  font-size: 0.9rem;
}

.info a {
  color: var(--pink);
  font-weight: 600;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

.about__portrait {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 18px 48px -30px rgba(122, 22, 56, 0.5);
  position: sticky;
  top: 6rem;
}

.about__portrait img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 820px) {
  .about {
    grid-template-columns: 1fr;
  }

  .about__portrait {
    position: static;
    max-width: 320px;
  }
}

.prose {
  max-width: 36rem;
}

.prose p {
  color: var(--muted);
  margin-block: 0 1.15rem;
}

.prose h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.9rem;
}

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2.25rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.colophon a {
  margin-right: 1.15rem;
  color: var(--muted);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--pink);
}

.colophon__end {
  margin-left: auto;
  line-height: 0;
}

.colophon__end img {
  height: 26px;
  width: auto;
}

@media (max-width: 560px) {
  .colophon__end {
    margin-left: 0;
    padding-top: 0.5rem;
  }

  .colophon__end img {
    height: 22px;
  }
}

/* ============================================================
   15. RESPONSIVE + MOTION
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .scrim::before {
    inset: -4rem -4rem;
  }

  /* The story panel is a tall 9:16 card — on a phone it pushed the
     headline and the booking button below the fold. Hidden here; the
     gallery strip just underneath carries the visuals instead. */
  .hero__art {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-block: clamp(2rem, 8vw, 3rem) 0;
  }

  .detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .masthead__logo img {
    height: 23px;
  }

  .masthead__nav {
    gap: 0.7rem;
    font-size: 0.8125rem;
  }

  .masthead__nav .btn {
    padding: 0.5em 0.85em;
    font-size: 0.7rem;
  }

  .lang button {
    padding: 0.45em 0.55em;
    font-size: 0.625rem;
  }

  .hide-sm {
    display: none;
  }

  /* At phone width the header can't carry six items. About is the one
     nobody taps on the way to booking, so it goes to the footer only. */
  .masthead__nav a[href="salon.html"] {
    display: none;
  }

  .strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .totals {
    max-width: none;
  }

  .services li {
    flex-wrap: wrap;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .swatch:hover,
  .badge:hover {
    transform: none;
  }
}


/* ============================================================
   16. FROSTED GLASS FALLBACKS
   ============================================================ */

/* Older browsers with no backdrop-filter get near-solid panels rather
   than unreadable text floating over roses. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(255, 255, 255, 0.95);
    --glass-strong: rgba(255, 255, 255, 0.97);
  }

  .band--tint {
    background: rgba(255, 255, 255, 0.85);
  }
}

/* backdrop-filter on many stacked panels is expensive on older phones,
   and the droplet tile is decoration. Both go on small screens. */
@media (max-width: 700px) {
  :root {
    --glass: rgba(255, 255, 255, 0.84);
    --glass-strong: rgba(255, 255, 255, 0.9);
    --frost: blur(10px) saturate(1.2);
  }

  /* A phone crops into the middle of the bouquet, so the same veil that
     works on desktop leaves body copy unreadable here. */
  body::after {
    background: linear-gradient(
      180deg,
      rgba(247, 241, 236, 0.64) 0%,
      rgba(247, 241, 236, 0.7) 40%,
      rgba(247, 241, 236, 0.8) 100%
    );
  }

  /* backdrop-filter on stacked panels is expensive on older phones, and
     the droplet tile is pure decoration. */
  html::before {
    display: none;
  }

  /* The corner badge repeats the Shop link and crowds out the logo at
     this width, so it's dropped rather than shrunk. */
  .badge {
    display: none;
  }

  .masthead__inner {
    padding-right: 0;
  }
}

/* Someone who has asked for less motion has usually also asked for
   less visual noise. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: rgba(255, 255, 255, 0.97);
    --glass-strong: rgba(255, 255, 255, 0.99);
  }

  body::before,
  html::before {
    display: none;
  }

  body::after {
    background: var(--paper);
  }
}


/* Very narrow phones — 320px still exists on older handsets. Drop the
   language pills to icons-width and the Cart label to just the count. */
@media (max-width: 360px) {
  .masthead__inner {
    gap: 0.5rem;
  }

  /* At 320px the script wordmark plus five nav items simply won't fit.
     The Cart link keeps its count badge, so the word itself can go. */
  .masthead__nav a[href="cart.html"] span[data-t] {
    display: none;
  }

  .masthead__nav a[href="cart.html"]::before {
    content: "🛍";
    font-size: 1rem;
  }

  .masthead__nav {
    gap: 0.55rem;
  }

  .masthead__logo img {
    height: 19px;
  }

  .masthead__nav .btn {
    padding: 0.5em 0.7em;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
  }

  .lang button {
    padding: 0.4em 0.45em;
  }
}