/* ══════════════════════════════════════════════════════════
   ROBYN STUDIO — Design System
   Floral candle bouquets · Handmade in Dublin
   ══════════════════════════════════════════════════════════ */

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

:root {
  /* Surfaces */
  --cream:        #FDFBF9;
  --cream-alt:    #F8F3EF;
  --blush:        #F4E7E2;
  --blush-deep:   #EAD5CE;
  --white:        #FFFFFF;

  /* Brand */
  --rose:         #B87F77;
  --rose-dark:    #9C625B;
  --rose-soft:    #D9A79F;
  --rose-deep:    #85504A;
  --gold:         #B39463;

  /* Ink */
  --heading:      #2C2320;
  --text:         #55443F;
  --muted:        #8A7873;
  --line:         rgba(44, 35, 32, 0.10);
  --line-strong:  rgba(44, 35, 32, 0.20);

  /* Type */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --nav-h:      74px;
  --bar-h:      36px;
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --section-y:  clamp(2.9rem, 6.5vw, 6.5rem);
  --maxw:       1280px;

  --shadow-sm:  0 1px 3px rgba(44, 35, 32, 0.04), 0 6px 18px rgba(44, 35, 32, 0.04);
  --shadow-md:  0 2px 6px rgba(44, 35, 32, 0.05), 0 18px 42px rgba(44, 35, 32, 0.08);
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

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

/* ── LAYOUT ─────────────────────────────────────────────── */

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section   { padding: var(--section-y) 0; }
.section--alt   { background: var(--cream-alt); }
.section--blush { background: var(--blush); }

/* Neighbouring bands differ by only a few percent of lightness, which reads
   as one continuous page. A hairline makes the boundary deliberate. */
.section--alt, .section--blush, .features, .newsletter {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ── TYPE ───────────────────────────────────────────────── */

.section-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose-dark);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.65rem, 4.6vw, 3.15rem);
  line-height: 1.14;
  color: var(--heading);
  letter-spacing: 0.002em;
}
.section-title em { font-style: italic; color: var(--rose-dark); }

.section-body {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text);
  max-width: 48ch;
}

.section-head { text-align: center; margin-bottom: clamp(1.9rem, 4vw, 3.4rem); }
.section-head .section-body { margin: 1rem auto 0; text-align: center; }

/* Heart divider under centred headings */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; margin: 1rem auto 0; max-width: 220px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.divider::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.divider svg { width: 12px; height: 12px; fill: var(--gold); flex: none; }

/* ── BUTTONS ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 2.2rem;
  font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn--primary { background: var(--rose-dark); color: #FFF; }
.btn--primary:hover { background: var(--rose-deep); transform: translateY(-2px); }

.btn--outline { background: transparent; color: var(--heading); border-color: var(--heading); }
.btn--outline:hover { background: var(--heading); color: var(--cream); }

.btn--light { background: transparent; color: #FFF; border-color: rgba(255,255,255,0.7); }
.btn--light:hover { background: #FFF; color: var(--heading); }

.btn--wa { background: var(--rose-dark); color: #FFF; }
.btn--wa:hover { background: var(--rose-deep); transform: translateY(-2px); }
.btn--wa svg { width: 16px; height: 16px; fill: currentColor; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.63rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--rose-dark);
  transition: gap 0.3s var(--ease);
}
.link-arrow::after { content: '→'; transition: transform 0.3s var(--ease); }
.link-arrow:hover { gap: 0.8rem; }

/* ── ANNOUNCEMENT BAR ───────────────────────────────────── */

.announce {
  background: var(--rose-dark);
  color: #FFF;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem;
  line-height: 1.4;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
  text-align: center; padding: 0.45rem 1rem;
  position: relative; z-index: 60;
}

.announce__sep { color: rgba(255,255,255,0.5); }
/* Two claims on one line only while both fit; below that the second is
   dropped rather than allowed to wrap into a ragged second row. */
@media (max-width: 700px) {
  .announce__sep, .announce__second { display: none; }
}

/* ── HEADER ─────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 251, 249, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  min-height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
}
.header__side { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.header__side--right { justify-content: flex-end; }

.brand { text-align: center; line-height: 1.1; white-space: nowrap; }
.brand__name {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--heading);
}
.brand__tag {
  display: block; font-size: 0.5rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--rose-dark); margin-top: 0.25rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2rem); }

.nav__link {
  position: relative;
  font-size: 0.68rem; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--text); padding: 0.4rem 0;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--rose); transition: width 0.3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--rose-dark); }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }

/* Dropdown */
.nav__item { position: relative; }
/* Chevron drawn from borders so it stays crisp and sits after the label,
   rather than a glyph rendered ahead of it. */
.nav__item--has-menu > .nav__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.nav__item--has-menu > .nav__link::before {
  content: ''; order: 2;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.nav__item--has-menu:hover > .nav__link::before { transform: translateY(0) rotate(225deg); }
/* The underline should track the label, not the label plus its chevron. */
.nav__item--has-menu > .nav__link::after { display: none; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 210px; padding: 0.7rem 0;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav__item--has-menu:hover .dropdown,
.nav__item--has-menu:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.dropdown a {
  display: block; padding: 0.5rem 1.4rem;
  font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text);
  transition: background 0.25s, color 0.25s;
}
.dropdown a:hover { background: var(--blush); color: var(--rose-dark); }

/* Icon actions */
.actions { display: flex; align-items: center; gap: 1.1rem; }
.icon-btn {
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--heading);
  transition: color 0.3s var(--ease);
}
.icon-btn:hover { color: var(--rose-dark); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* Burger */
.burger { display: none; background: none; border: none; cursor: pointer; width: 42px; height: 42px; margin-left: -0.5rem; }
.burger span {
  display: block; height: 1px; width: 21px; margin: 5px auto;
  background: var(--heading); transition: transform 0.35s var(--ease), opacity 0.25s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 45;
  background: var(--cream);
  padding: calc(var(--nav-h) + var(--bar-h) + 2rem) var(--gutter) 2rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer a {
  display: block; padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.4rem; color: var(--heading);
}
.drawer .drawer__sub a { font-family: var(--sans); font-size: 0.9rem; padding-left: 1.2rem; color: var(--text); }

/* ── HERO BANNER / SLIDER ───────────────────────────────────
   The artwork carries its own typography, so the banner keeps its
   natural ratio at every width instead of cropping the wordmark away. */

.hero { position: relative; background: var(--blush); overflow: hidden; }
.hero__track { position: relative; aspect-ratio: 1600 / 639; }

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Invisible, keyboard-reachable hit area over the artwork's own button.
   Positioned in percentages so it tracks the image at every size. */
.hero__hit {
  position: absolute; z-index: 3;
  left: 42.2%; top: 47.6%; width: 10.4%; height: 5.6%;
  border-radius: 2px;
  transition: background 0.3s var(--ease);
}
.hero__hit:hover { background: rgba(201, 139, 133, 0.14); }

/* On a phone the painted lettering is far too small to read, so the banner
   is cropped to the bouquet and the message is set in real text below it. */
.hero__mobile { display: none; text-align: center; padding: 1.6rem var(--gutter) 0; }
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.55rem, 6.6vw, 2.3rem); line-height: 1.18; color: var(--heading);
}
.hero__title em { font-style: italic; color: var(--rose-dark); }
.hero__text { margin: 0.85rem auto 1.5rem; max-width: 32ch; font-size: 0.88rem; }

.hero__dots { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 0.6rem; }
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--rose); background: transparent;
  cursor: pointer; padding: 0; transition: background 0.3s;
}
.hero__dot.is-active { background: var(--rose); }

@media (max-width: 860px) {
  /* The baked-in wordmark gets small on a phone: hide the tiny hit area
     and show a full-size button beneath the banner instead. */
  .hero__hit { display: none; }
}

/* Visually hidden, still read by search engines and screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── FEATURE STRIP ──────────────────────────────────────── */

.features { background: var(--cream-alt); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.features__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.4rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}
/* Flex rather than grid so a row that cannot be filled centres itself
   instead of leaving the last items stranded against the left edge. */
.feature { flex: 0 1 calc(20% - 1.7rem); min-width: 150px; }
.feature__icon { width: 40px; height: 40px; margin: 0 auto 0.85rem; stroke: var(--rose); fill: none; stroke-width: 1.1; }
.feature__name {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--heading); margin-bottom: 0.35rem;
}
.feature__desc { font-size: 0.8rem; line-height: 1.65; color: var(--muted); }

/* ── PRODUCT CARDS ──────────────────────────────────────────
   A soft panel holding the photograph, with the name, a short line
   of copy and the link stacked centred beneath it. */

.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}

.card {
  display: flex; flex-direction: column;
  text-align: center;
  background: var(--cream-alt);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.card__media {
  position: relative; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 1 / 1; background: var(--blush);
}
/* Product photos are cropped tight, so each sits on the blush ground like a
   mounted print — the whole frame visible, never running off the edge. */
.card__media img {
  width: 76%; height: 76%; object-fit: contain;
  box-shadow: var(--shadow-md);
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__badge {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background: rgba(255,255,255,0.92); color: var(--rose-dark);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}

.card__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.55rem;
  padding: 1.5rem 1.2rem 1.7rem;
}
.card__name {
  font-size: 0.73rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--heading);
}
.card__meta {
  font-size: 0.83rem; line-height: 1.7; color: var(--muted);
  max-width: 22ch;
}
.card__price { font-family: var(--serif); font-size: 1.05rem; color: var(--rose-dark); }
.card__body .link-arrow { margin-top: auto; padding-top: 0.9rem; }

/* Carousel rail */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
@media (min-width: 900px) { .rail__track { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }

/* Below that the rail scrolls sideways. The column width is a fraction of
   the viewport rather than a fixed size, so the next card is always part way
   into frame — the cue this was missing the first time, when it clipped a
   card at a hard edge and simply looked broken. */
@media (max-width: 899px) {
  .rail__track {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 32%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: clamp(0.8rem, 2vw, 1.4rem);
  }
}
@media (max-width: 620px) { .rail__track { grid-auto-columns: 44%; } }
@media (max-width: 400px) { .rail__track { grid-auto-columns: 62%; } }


/* ── ABOUT SPLIT ────────────────────────────────────────── */

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}
.split__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--blush); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--reverse .split__media { order: 2; }

.pillars { display: grid; gap: 1.6rem; }
.pillar { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; align-items: start; }
.pillar svg { width: 34px; height: 34px; stroke: var(--rose); fill: none; stroke-width: 1.1; }
.pillar__name { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--heading); }
.pillar__desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

/* ── PROCESS ────────────────────────────────────────────── */

.process {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.8rem, 3vw, 2.4rem) clamp(0.8rem, 2vw, 1.6rem);
  text-align: center;
}
.step { flex: 0 1 calc(20% - 1.4rem); min-width: 132px; }
.step__media {
  width: clamp(88px, 11vw, 128px); aspect-ratio: 1; margin: 0 auto 1rem;
  border-radius: 50%; overflow: hidden; background: var(--blush);
  border: 1px solid var(--line);
}
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__num { font-family: var(--serif); font-size: 0.95rem; color: var(--gold); margin-bottom: 0.3rem; }
.step__name { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--heading); margin-bottom: 0.3rem; }
.step__desc { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }

/* ── TESTIMONIALS ───────────────────────────────────────── */

.quotes { position: relative; display: grid; }
.quote {
  grid-area: 1 / 1;
  text-align: center; max-width: 620px; margin: 0 auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
.quote.is-active { opacity: 1; visibility: visible; }
.quote__stars { color: var(--gold); letter-spacing: 0.25em; font-size: 0.85rem; margin: 1rem 0 0.6rem; }
.quote__text { font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.45; color: var(--heading); font-style: italic; }
.quote__author { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ── INSTAGRAM ──────────────────────────────────────────── */

.ig-embed {
  max-width: 620px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ig-embed iframe { display: block; width: 100%; height: 560px; border: 0; }

/* The facade: our own photography, dimmed, with the ask over it. Same
   footprint as the frame, so nothing jumps when it loads. */
.ig-facade { position: relative; height: 560px; }

.ig-facade__grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  gap: 2px;
}
.ig-facade__grid img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }

.ig-facade__ask {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 1.5rem;
  text-align: center;
  background: linear-gradient(rgba(253,251,249,0.82), rgba(253,251,249,0.94));
}
.ig-facade__ask p { font-size: 0.85rem; color: var(--text); max-width: 34ch; }

@media (max-width: 620px) {
  .ig-embed iframe, .ig-facade { height: 480px; }
}
@media (max-width: 420px) {
  .ig-embed iframe, .ig-facade { height: 420px; }
}

/* ── NEWSLETTER ─────────────────────────────────────────── */

.newsletter { background: var(--blush-deep); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.newsletter__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.newsletter__title { font-family: var(--serif); font-size: 1.5rem; color: var(--heading); }
.newsletter__text { font-size: 0.85rem; color: var(--text); max-width: 42ch; }
.newsletter__form { display: flex; gap: 0; }
.newsletter__form input {
  border: 1px solid var(--line-strong); border-right: none; background: var(--white);
  padding: 0.9rem 1.2rem; min-width: 260px; font-size: 0.85rem;
}
.newsletter__form input::placeholder { color: var(--muted); }
.newsletter__form button { border: none; }

/* ── FORMS ──────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  border: 1px solid var(--line-strong); background: var(--white);
  padding: 0.85rem 1rem; font-size: 0.92rem;
  transition: border-color 0.3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--rose); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.form__status { font-size: 0.85rem; min-height: 1.4em; }
.form__status.is-ok  { color: var(--rose-dark); }
.form__status.is-err { color: #9E3A32; }

/* ── FOOTER ─────────────────────────────────────────────── */

.footer { background: var(--cream-alt); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
.footer__col h4 {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--heading); font-weight: 400; margin-bottom: 1rem;
}
.footer__col li { margin-bottom: 0.55rem; }
.footer__col a { font-size: 0.85rem; color: var(--muted); transition: color 0.25s; }
.footer__col a:hover { color: var(--rose-dark); }
.footer__brand .brand__name { font-size: 1.3rem; }
.footer__note { font-size: 0.82rem; color: var(--muted); margin-top: 1rem; max-width: 30ch; }
.socials { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
.socials a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--rose-dark);
  transition: background 0.3s, color 0.3s;
}
.socials a:hover { background: var(--rose-dark); color: #FFF; border-color: var(--rose-dark); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer__bar {
  border-top: 1px solid var(--line); padding: 1.4rem 0;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--muted);
}

/* ── PAGE HEADER (inner pages) ──────────────────────────── */

.page-head { background: var(--blush); padding: clamp(2.5rem, 6vw, 4.5rem) 0; text-align: center; }
.crumbs { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.8rem; }
.crumbs a:hover { color: var(--rose-dark); }

/* ── REVEAL ─────────────────────────────────────────────── */

/* Only hide once JavaScript has confirmed it can bring things back. Without
   this the whole page depends on an observer firing: if it does not, or if
   the script fails, the content is simply never seen. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════
   INNER PAGES
   ══════════════════════════════════════════════════════════ */

/* ── FILTER CHIPS (shop) ────────────────────────────────── */

.filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.chip {
  border: 1px solid var(--line-strong); background: transparent;
  padding: 0.6rem 1.4rem; cursor: pointer;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover { border-color: var(--rose); color: var(--rose-dark); }
.chip.is-active { background: var(--rose-dark); border-color: var(--rose-dark); color: #FFF; }

.result-count { text-align: center; font-size: 0.8rem; color: var(--muted); margin-bottom: 2rem; }

/* ── PRODUCT DETAIL ─────────────────────────────────────── */

.detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.gallery__main {
  display: grid; place-items: center;
  aspect-ratio: 1; overflow: hidden; background: var(--blush);
  border: 1px solid var(--line); margin-bottom: 0.7rem;
}
.gallery__main img { width: 78%; height: 78%; object-fit: contain; box-shadow: var(--shadow-md); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.gallery__thumb {
  display: grid; place-items: center;
  aspect-ratio: 1; overflow: hidden; background: var(--blush);
  border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: border-color 0.3s var(--ease);
}
.gallery__thumb.is-active, .gallery__thumb:hover { border-color: var(--rose); }
.gallery__thumb img { width: 78%; height: 78%; object-fit: contain; box-shadow: var(--shadow-sm); }

.detail__collection { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose-dark); }
.detail__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.8vw, 2.9rem); line-height: 1.12; color: var(--heading); margin: 0.7rem 0; }
.detail__price { font-family: var(--serif); font-size: 1.7rem; color: var(--rose-dark); margin-bottom: 1.4rem; }
.detail__desc { font-size: 0.95rem; line-height: 1.9; margin-bottom: 1.8rem; }

.specs { border-top: 1px solid var(--line); margin: 1.8rem 0; }
.specs div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.specs dt { color: var(--muted); }
.specs dd { color: var(--heading); text-align: right; }

.order-note {
  background: var(--blush); padding: 1.2rem 1.4rem; margin-top: 1.4rem;
  font-size: 0.82rem; line-height: 1.7; color: var(--text);
}

.detail__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ── ACCORDION (FAQ) ────────────────────────────────────── */

.accordion { max-width: 780px; margin: 0 auto; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.4rem 0; text-align: left;
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--heading);
  transition: color 0.3s var(--ease);
}
.acc__btn:hover { color: var(--rose-dark); }
.acc__btn::after { content: '+'; font-family: var(--sans); font-size: 1.3rem; color: var(--rose-dark); transition: transform 0.35s var(--ease); flex: none; }
.acc__item.is-open .acc__btn::after { transform: rotate(45deg); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.acc__panel p { padding-bottom: 1.4rem; font-size: 0.92rem; line-height: 1.85; max-width: 62ch; }
.acc__panel p + p { padding-top: 0; }

/* ── PROSE (about / policy copy) ────────────────────────── */

.prose { max-width: 64ch; margin: 0 auto; }
.prose p { margin-bottom: 1.3rem; font-size: 0.97rem; line-height: 1.95; }
.prose h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--heading); margin: 2.2rem 0 0.9rem; font-weight: 400; }

/* ── CONTACT ────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-list { display: grid; gap: 1.5rem; margin-top: 1.8rem; }
.contact-list h4 { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose-dark); font-weight: 400; margin-bottom: 0.35rem; }
.contact-list a { color: var(--heading); border-bottom: 1px solid var(--line-strong); transition: color 0.25s; }
.contact-list a:hover { color: var(--rose-dark); }

/* ── CUSTOM ORDER OPTIONS ───────────────────────────────── */

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; }
.option { background: var(--white); border: 1px solid var(--line); padding: 2.2rem 1.6rem; text-align: center; }
.option svg { width: 36px; height: 36px; margin: 0 auto 1rem; stroke: var(--rose); fill: none; stroke-width: 1.1; }
.option h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--heading); margin-bottom: 0.5rem; }
.option p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }

/* ── EMPTY / ERROR STATES ───────────────────────────────── */

.empty { text-align: center; padding: clamp(3rem, 8vw, 6rem) 1rem; }
.empty h2 { font-family: var(--serif); font-size: 1.8rem; color: var(--heading); font-weight: 400; margin-bottom: 0.8rem; }
.empty p { color: var(--muted); margin-bottom: 1.8rem; }

/* ── THE ROBIN ──────────────────────────────────────────────
   Carried over from the original site unchanged — the same bird, the same
   pale disc, the same two notes. Only the motion is new. The ring is sized
   from the disc rather than the viewport, so the two stay concentric at
   every width, and on phones the notes drop below the circle instead of
   landing on top of it. */

.split__visual { display: flex; align-items: center; justify-content: center; }

.robin {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  /* Room for the ring, and for the notes to clear the circle's curve. */
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.6rem);
}

.robin__circle { position: relative; display: grid; place-items: center; }

.robin__disc {
  width: clamp(190px, 22vw, 260px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--blush) 0%, var(--blush-deep) 100%);
  display: grid; place-items: center;
  animation: robin-breathe 9s ease-in-out infinite;
}

/* Always the disc plus a fixed margin — never a viewport unit of its own. */
.robin__ring {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;              /* separate property so the spin can animate rotate */
  width: calc(100% + clamp(3.4rem, 6vw, 5rem)); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  animation: robin-turn 72s linear infinite;
}
.robin__ring::after {
  content: ''; position: absolute; inset: 13px;
  border-radius: 50%; border: 1px solid var(--line);
}

.about-bird {
  width: clamp(60px, 7vw, 80px);
  opacity: 0.62;
  animation: robin-bob 5.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}

.robin__note {
  position: absolute;
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem; color: var(--rose-dark);
  white-space: nowrap;
}
.robin__note--1 { top: 7%;    right: -6%; animation: robin-drift 7s ease-in-out infinite; }
.robin__note--2 { bottom: 7%; left: -6%;  animation: robin-drift 7s ease-in-out infinite reverse; }

@keyframes robin-turn   { to { rotate: 360deg; } }
@keyframes robin-bob    { 0%, 100% { transform: translateY(0) rotate(0deg); }
                          50%      { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes robin-breathe{ 0%, 100% { transform: scale(1); }
                          50%      { transform: scale(1.028); } }
@keyframes robin-drift  { 0%, 100% { transform: translateY(0); opacity: 0.85; }
                          50%      { transform: translateY(-8px); opacity: 1; } }

/* Below this the disc is too small to carry the notes beside it, so they
   become a caption underneath — no overlap, nothing hanging off the edge. */
@media (max-width: 820px) {
  .robin { gap: 1.3rem; padding: clamp(1.8rem, 4vw, 2.6rem) 0 0; }
  .robin__note {
    position: static;
    font-size: 0.92rem;
    line-height: 1.5;
    animation: none;
    opacity: 0.9;
  }
  .robin__note--2::before {
    content: '·'; margin-right: 0.5rem; color: var(--line-strong);
  }
}

/* ── COOKIE CONSENT ─────────────────────────────────────── */

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--white);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}
.consent.is-in { transform: translateY(0); }

.consent__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.4rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.consent__text {
  font-size: 0.85rem; line-height: 1.7; color: var(--text);
  max-width: 64ch; margin: 0;
}
.consent__text a { color: var(--rose-dark); border-bottom: 1px solid var(--line-strong); }
.consent__text a:hover { border-bottom-color: var(--rose-dark); }

.consent__actions { display: flex; gap: 0.7rem; flex: none; }
.consent__actions .btn { padding: 0.8rem 1.7rem; font-size: 0.64rem; }

.consent__reopen {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.76rem; color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.consent__reopen:hover { color: var(--rose-dark); border-bottom-color: var(--line-strong); }

@media (max-width: 760px) {
  .consent__inner { flex-direction: column; align-items: stretch; padding: 1.2rem var(--gutter); }
  .consent__text { font-size: 0.82rem; }
  .consent__actions { flex-direction: row; }
  .consent__actions .btn { flex: 1; width: auto; max-width: none; }
}

/* ── SEASONAL POP-UP ────────────────────────────────────── */

/* The card takes the poster's own deep red, so any letterboxing around the
   image reads as part of the artwork. */
.popup {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(30, 12, 12, 0.62);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.popup.is-in { opacity: 1; }

.popup__snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.popup__snow span {
  position: absolute; top: -12px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation-name: popup-fall, popup-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal, alternate;
}
@keyframes popup-fall { to { top: 105%; } }
@keyframes popup-sway { from { margin-left: -14px; } to { margin-left: 14px; } }

.popup__card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  background: #5E1414;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.5s var(--ease);
}
.popup.is-in .popup__card { transform: none; }

/* On short screens the poster gives way to the copy, shrinking rather than
   sliding under it. */
.popup__media { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.popup__media img {
  display: block; flex: 1 1 auto; min-height: 0;
  width: 100%; object-fit: contain;
}

.popup__body {
  flex: none;
  padding: 1.1rem 1.5rem 1.4rem;
  text-align: center;
  color: #F3E3C6;
}
.popup__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.6rem; line-height: 1.2;
  color: #E2BE7C;
  margin-bottom: 0.35rem;
}
.popup__text { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.popup__text + .popup__text { margin-top: 0.45rem; }

.popup__close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(30, 12, 12, 0.55);
  color: #FFF;
  transition: background 0.25s;
}
.popup__close:hover { background: rgba(30, 12, 12, 0.85); }
.popup__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }

@media (max-width: 480px) {
  .popup { padding: 0.75rem; }
  .popup__title { font-size: 1.35rem; }
  .popup__text { font-size: 0.82rem; }
  .popup__body { padding: 0.9rem 1.1rem 1.1rem; }
}

/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 1120px) {
  .nav { gap: 1.1rem; }
  .nav__link { font-size: 0.64rem; letter-spacing: 0.14em; }
  .brand__name { font-size: 1.35rem; letter-spacing: 0.22em; }
}

@media (max-width: 1024px) {
  .feature { flex-basis: calc(33.333% - 1.4rem); }
  .step    { flex-basis: calc(33.333% - 1.2rem); }
  .footer__grid   { grid-template-columns: 1fr 1fr; }
  .split          { gap: 2.5rem; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__side--left { justify-content: flex-start; }
  .brand__tag { letter-spacing: 0.3em; }

  /* Tablets keep the full banner — the painted lettering is still legible at
     this width, so repeating it as text would only say everything twice. The
     painted button is too small to tap, though, so a real one appears below. */
  .hero__hit { display: none; }
  .hero__mobile { display: block; }
  .hero__mobile .hero__title,
  .hero__mobile .hero__text { display: none; }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .detail { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .newsletter__inner { grid-template-columns: 1fr; text-align: center; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form input { border-right: 1px solid var(--line-strong); min-width: 0; width: 100%; }

}

/* Only here is the painted lettering too small to read — around 8px a
   character — so the banner crops to the bouquet and the message is set as
   real text instead. Above this the crop is not attempted at all: excluding
   the wordmark needs a container taller than it is wide, which at 768px
   would mean a hero over a thousand pixels tall. */
@media (max-width: 619px) {
  .hero__track { aspect-ratio: 4 / 5; }
  .hero__slide img { object-position: 2.5% center; }
  .hero__mobile .hero__title,
  .hero__mobile .hero__text { display: block; }
}

@media (max-width: 620px) {
  :root { --nav-h: 62px; --section-y: 2.6rem; }

  /* The hero copy right above already says soy wax and Dublin, so on a phone
     those two tiles are repetition taking up a screen. Craft, the thing that
     makes the product unusual, and the reason to buy are enough. */
  .feature[data-secondary] { display: none; }

  /* Five steps stacked two-up ran to about seven hundred pixels. As a strip
     they read as a sequence, which is what they are. It bleeds to both edges
     so the next step is visibly half in frame — the cue the collections rail
     was missing when it simply clipped. */
  .process {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 1.1rem;
  }
  .process::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 118px; min-width: 118px;
    scroll-snap-align: start;
  }
  .step__media { width: 100%; margin-bottom: 0.7rem; }
  .step__desc  { font-size: 0.72rem; }

  .feature { flex-basis: calc(50% - 1rem); }
  /* Four stacked link lists ran to about a thousand pixels of footer. The
     brand keeps the full width; the three lists share two columns beneath it. */
  .footer__grid   { grid-template-columns: 1fr 1fr; text-align: left; gap: 1.8rem 1.4rem; }
  .footer__brand  { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer__note   { margin-left: auto; margin-right: auto; }
  .socials        { justify-content: center; }
  .footer__bar    { justify-content: center; text-align: center; }
  .footer__col li { margin-bottom: 0.4rem; }
  .footer__col a  { font-size: 0.8rem; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .card__body   { padding: 1.1rem 0.7rem 1.3rem; gap: 0.45rem; }
  .card__name   { font-size: 0.66rem; letter-spacing: 0.16em; }
  .card__meta   { font-size: 0.76rem; }

  .btn { width: 100%; max-width: 320px; padding: 1rem 1.5rem; }
  .detail__actions .btn { width: 100%; max-width: none; }
  .filters { gap: 0.45rem; }
  .chip { padding: 0.55rem 1rem; font-size: 0.62rem; }

  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .specs div { font-size: 0.8rem; }
  .acc__btn { font-size: 1.05rem; padding: 1.15rem 0; }


}

@media (max-width: 400px) {
  .brand__name  { font-size: 1.2rem; letter-spacing: 0.2em; }
  .brand__tag   { font-size: 0.44rem; }
}

/* The wordmark cannot wrap, so on the narrowest phones the burger, the
   wordmark and the two action icons stop fitting on one line and push the
   header past the viewport. Everything tightens rather than anything being
   dropped — both icons stay reachable. */
@media (max-width: 380px) {
  .header__inner { gap: 0.5rem; }
  .brand__name   { font-size: 1.02rem; letter-spacing: 0.13em; }
  .brand__tag    { font-size: 0.42rem; letter-spacing: 0.2em; }
  .actions       { gap: 0.55rem; }
  .icon-btn      { width: 30px; height: 30px; }
  .icon-btn svg  { width: 17px; height: 17px; }
  .burger        { width: 34px; margin-left: -0.35rem; }
  .announce      { font-size: 0.6rem; letter-spacing: 0.14em; }
}

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

/* Coarse pointers get comfortable hit areas throughout. */
@media (hover: none) {
  .icon-btn { width: 42px; height: 42px; }
  .card:hover { transform: none; box-shadow: none; }
  .card:hover .card__media img { transform: none; }
  .nav__item--has-menu:hover .dropdown { opacity: 0; visibility: hidden; }
}