/* ================================================================
   Rêve de Karine · Complete Site Styles
   ================================================================ */

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Monsieur+La+Doulaise&family=Red+Hat+Display:wght@300;400;500&display=swap');

/*
   Adorn Story web fonts: place the licensed .woff2 files in
   /public/fonts/ and uncomment these @font-face blocks.

@font-face {
  font-family: 'Adorn Story Serif';
  src: url('/fonts/AdornStorySerif.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Adorn Story Script';
  src: url('/fonts/AdornStoryScript.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
*/

/* ── Brand Tokens ────────────────────────────────────────────── */
:root {
  --cultured:          #f5f5f1;
  --white:             #ffffff;
  --neutral-black:     #232222;
  --luxor-gold:        #a97527;
  --cherry-blossom:    #f7cee1;
  --pastel-turquoise:  #97c7c7;
  --jagged-ice:        #bee2e7;
  --sachet-pink:       #f38cb1;

  --font-serif:   'Italiana', serif;
  --font-script:  'Monsieur La Doulaise', cursive;
  --font-text:    'Red Hat Display', sans-serif;

  --sz-display:  66px;
  --sz-headline: 44px;
  --sz-title:    28px;
  --sz-lead:     18px;
  --sz-body:     15px;
  --sz-label:    11px;
  --ltr-label:   0.06em;

  --gutter:   48px;
  --max-w:    1440px;
  --hairline: 1px solid var(--neutral-black);
}

@media (max-width: 768px) {
  :root {
    --sz-display:  40px;
    --sz-headline: 32px;
    --sz-lead:     16px;
    --gutter:      24px;
  }
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--cultured);
  color: var(--neutral-black);
  font-family: var(--font-text);
  font-size: var(--sz-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ── Typography ──────────────────────────────────────────────── */
.t-script {
  font-family: var(--font-script);
  font-size: calc(var(--sz-display) * 0.9);
  font-weight: 400;
  line-height: 1.1;
  color: var(--luxor-gold);
}
.t-display {
  font-family: var(--font-serif);
  font-size: var(--sz-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.t-display--gold { color: var(--luxor-gold); }
.t-headline {
  font-family: var(--font-serif);
  font-size: var(--sz-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.t-title {
  font-family: var(--font-serif);
  font-size: var(--sz-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.t-lead { font-size: var(--sz-lead); font-weight: 300; line-height: 1.6; }
.t-body { font-size: var(--sz-body); font-weight: 300; line-height: 1.7; }
.t-label {
  font-family: var(--font-text);
  font-size: var(--sz-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ltr-label);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px;
  font-family: var(--font-text);
  font-size: var(--sz-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ltr-label);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn--primary { background-color: var(--neutral-black); color: var(--white); border-color: var(--neutral-black); }
.btn--primary:hover { background-color: #3d3c3c; border-color: #3d3c3c; }
.btn--outline { background-color: transparent; color: var(--neutral-black); border-color: var(--neutral-black); }
.btn--outline:hover { background-color: var(--neutral-black); color: var(--white); }
.btn--outline-white { background-color: transparent; color: var(--white); border-color: var(--white); }
.btn--outline-white:hover { background-color: var(--white); color: var(--neutral-black); }
.btn--full { width: 100%; }

/* ── Layout Helpers ──────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.hairline-top    { border-top: var(--hairline); }
.hairline-bottom { border-bottom: var(--hairline); }
.hairline-left   { border-left: var(--hairline); }
.hairline-right  { border-right: var(--hairline); }

/* ── Image Placeholder ───────────────────────────────────────── */
.img-ph {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background-color: var(--cherry-blossom);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(35,34,34,0.35);
}
.img-ph--turquoise { background-color: var(--jagged-ice); }
.img-ph--white     { background-color: var(--white); }
.img-ph__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-text); font-weight: 500; }

/* ── Accessibility ───────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }


/* ================================================================
   TopBar
   ================================================================ */
.top-bar { background-color: var(--cultured); height: 40px; }
.top-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.top-bar__instagram { transition: color 0.15s ease; }
.top-bar__instagram:hover { color: var(--luxor-gold); }


/* ================================================================
   Header
   ================================================================ */
.site-header { position: sticky; top: 0; z-index: 100; background-color: var(--cultured); height: 72px; }
.site-header__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.site-header__nav { display: flex; align-items: center; gap: 32px; }
.site-header__nav--right { justify-content: flex-end; }
.nav-link { transition: color 0.15s ease; }
.nav-link:hover { color: var(--luxor-gold); }
.site-header__logo { display: flex; justify-content: center; align-items: center; }
.site-header__logo-img { display: block; height: auto; }
.site-header__menu-btn, .site-header__book-link { display: none; }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed; inset: 0 auto 0 0;
  width: min(320px, 100vw);
  background-color: var(--cultured);
  border-right: var(--hairline);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__inner { padding: 32px 24px; display: flex; flex-direction: column; gap: 0; }
.mobile-nav__close { align-self: flex-start; background: none; border: none; margin-bottom: 40px; color: var(--neutral-black); }
.mobile-nav__link { padding: 18px 0; border-bottom: var(--hairline); transition: color 0.15s ease; display: block; }
.mobile-nav__link:hover { color: var(--luxor-gold); }
.mobile-nav__overlay { display: none; position: fixed; inset: 0; background: rgba(35,34,34,0.3); z-index: 150; opacity: 0; transition: opacity 0.3s ease; }
.mobile-nav__overlay.is-visible { display: block; opacity: 1; }

@media (max-width: 768px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .site-header__nav { display: none; }
  .site-header__menu-btn {
    display: flex; align-items: center; justify-content: center; justify-self: start;
    width: 44px; height: 44px; margin-left: -11px;
    background: none; border: none; color: var(--neutral-black); cursor: pointer;
  }
  .site-header__book-link {
    display: inline-flex; align-items: center; justify-content: center; justify-self: end;
    /* Owner asked for a smaller box than the brief's 48px; the ::after keeps a 48px tap area */
    position: relative; height: 36px; padding-inline: 12px;
    border: var(--hairline); background-color: transparent; color: var(--neutral-black);
    letter-spacing: 0.1em; white-space: nowrap;
    transition: background-color 0.22s ease, color 0.22s ease, transform 0.15s ease;
  }
  .site-header__book-link:hover,
  .site-header__book-link:focus-visible { background-color: var(--neutral-black); color: var(--white); }
  .site-header__book-link:active { transform: scale(0.97); }
  .site-header__book-link::after { content: ''; position: absolute; inset: -7px -5px; }
  .site-header__logo-img--desktop { display: none; }
  .site-header__logo-img--mobile  { display: block; width: min(184px, 46vw); }
}
@media (max-width: 374px) {
  .site-header__book-link { padding-inline: 9px; }
  .site-header__logo-img--mobile { width: 40vw; }
}
@media (min-width: 769px) {
  .site-header__logo-img--mobile  { display: none; }
  .site-header__logo-img--desktop { display: block; }
}


/* ================================================================
   Hero
   ================================================================ */
.hero { display: grid; grid-template-columns: 3fr 1fr; min-height: calc(100vh - 112px); }
.hero__image { overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__text { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px; gap: 28px; }
.hero__script { color: var(--sachet-pink); margin-bottom: -8px; }
.hero__headline { font-size: clamp(36px, 3.5vw, var(--sz-display)); color: var(--neutral-black); }
.hero__intro { color: rgba(35,34,34,0.7); max-width: 30ch; }
.hero__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 2fr 1fr; }
  .hero__text { padding: 48px 32px; }
}
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__image { border-right: none; border-bottom: var(--hairline); height: 60vw; min-height: 320px; }
  .hero__text { padding: 48px var(--gutter); gap: 20px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
}


/* ================================================================
   Collection Section
   ================================================================ */
.collection-section { display: grid; grid-template-columns: 1fr 1.6fr; min-height: 640px; }
.collection-section__text { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 80px var(--gutter); }
.collection-section__eyebrow { color: rgba(35,34,34,0.45); }
.collection-section__name { color: var(--neutral-black); }
.collection-section__desc { max-width: 36ch; color: rgba(35,34,34,0.72); }
.collection-section__image { overflow: hidden; }
.collection-section__img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .collection-section { grid-template-columns: 1fr; min-height: auto; }
  .collection-section__image { order: -1; border-left: none; border-bottom: var(--hairline); height: 70vw; min-height: 280px; }
  .collection-section__text { padding: 48px var(--gutter); gap: 20px; }
  .collection-section__text .btn { width: 100%; }
}


/* ================================================================
   Atelier Section
   ================================================================ */
.atelier { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; background-color: var(--white); }
.atelier__image { overflow: hidden; min-height: 480px; }
.atelier__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.atelier__text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 80px 64px; }
.atelier__eyebrow { color: rgba(35,34,34,0.45); }
.atelier__body { max-width: 42ch; color: rgba(35,34,34,0.75); }
.atelier__body--secondary { font-size: var(--sz-body); }

@media (max-width: 1024px) { .atelier__text { padding: 64px 40px; } }
@media (max-width: 768px) {
  .atelier { grid-template-columns: 1fr; }
  .atelier__image { border-left: none; border-right: none; border-top: var(--hairline); border-bottom: var(--hairline); height: 65vw; min-height: 260px; }
  .atelier__text { padding: 48px var(--gutter); gap: 16px; }
  .atelier__text .btn { width: 100%; }
}


/* ================================================================
   New In
   ================================================================ */
.new-in { background-color: var(--cultured); }
.new-in__header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 32px; }
@media (max-width: 768px) {
  .new-in__header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .new-in__header-inner .btn { width: 100%; }
}


/* ================================================================
   Dress grid (New in + collection): edge to edge, hairlines between
   cards only; the section borders above and below form the outer edge.
   ================================================================ */
.dress-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background-color: var(--cultured); }
.dress-grid .dress-card { border: none; position: relative; }
/* Vertical divider drawn as an overlay so every card in a row keeps the same width (and photo height) */
.dress-grid .dress-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background-color: var(--neutral-black); z-index: 1; pointer-events: none; display: none;
}
.dress-grid .dress-card:not(:nth-child(4n+1))::before { display: block; }
.dress-grid .dress-card:nth-child(n+5) { border-top: var(--hairline); }

@media (max-width: 768px) {
  .dress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dress-grid .dress-card:nth-child(n) { border-top: none; }
  .dress-grid .dress-card:nth-child(n)::before { display: block; }
  .dress-grid .dress-card:nth-child(2n+1)::before { display: none; }
  .dress-grid .dress-card:nth-child(n+3) { border-top: var(--hairline); }
  .dress-card__meta { padding: 12px 14px 18px; }
}


/* ================================================================
   Dress Card
   ================================================================ */
.dress-card { border: var(--hairline); }
.dress-card__link { display: block; }
.dress-card__image { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.dress-card__img { width: 100%; height: 100%; object-fit: cover; }
.dress-card__ph { min-height: unset; height: 100%; }
.dress-card__meta { padding: 16px; display: flex; flex-direction: column; gap: 4px; border-top: var(--hairline); }
.dress-card__collection { color: rgba(35,34,34,0.45); margin-bottom: 2px; }
.dress-card__name { font-weight: 400; }
.dress-card__price { color: var(--neutral-black); margin-top: 4px; }


/* ================================================================
   Brand Line
   ================================================================ */
.brand-line { background-color: var(--white); padding: 80px var(--gutter); }
.brand-line__inner { max-width: var(--max-w); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.brand-line__monogram { opacity: 0.88; }
.brand-line__text { max-width: 48ch; color: rgba(35,34,34,0.72); }
@media (max-width: 768px) {
  .brand-line { padding: 56px var(--gutter); }
  .brand-line__text { font-size: var(--sz-body); }
}


/* ================================================================
   Instagram Section
   ================================================================ */
.instagram { background-color: var(--cultured); }
.instagram__header { padding-block: 0; }
.instagram__header-inner { display: flex; align-items: flex-end; justify-content: space-between; padding-block: 40px 32px; padding-inline: var(--gutter); max-width: var(--max-w); margin-inline: auto; }
.instagram__heading-group { display: flex; flex-direction: column; gap: 8px; }
.instagram__eyebrow { color: rgba(35,34,34,0.45); }
.instagram__handle { transition: color 0.15s ease; }
.instagram__handle:hover { color: var(--luxor-gold); }
.instagram__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.instagram__tile { aspect-ratio: 1; display: block; overflow: hidden; border-right: var(--hairline); }
.instagram__tile:last-child { border-right: none; }
.instagram__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.instagram__tile:hover .instagram__img { transform: scale(1.04); }
.instagram__tile--ph .img-ph { min-height: unset; height: 100%; }

@media (max-width: 768px) {
  .instagram__header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .instagram__header-inner .btn { width: 100%; }
  .instagram__grid { grid-template-columns: repeat(2, 1fr); }
  .instagram__tile:nth-child(even) { border-right: none; }
  .instagram__tile:nth-child(n+3) { border-top: var(--hairline); }
}


/* ================================================================
   Newsletter
   ================================================================ */
.newsletter { background-color: var(--white); padding-block: 80px 72px; }
.newsletter__inner { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.newsletter__desc { color: rgba(35,34,34,0.7); max-width: 44ch; }
.newsletter__form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 520px; margin-top: 8px; }
.newsletter__fields { display: flex; border: var(--hairline); width: 100%; }
.newsletter__input { flex: 1; padding: 0 16px; background: transparent; border: none; outline: none; min-height: 48px; color: var(--neutral-black); font-family: var(--font-text); font-weight: 300; }
.newsletter__input::placeholder { color: rgba(35,34,34,0.38); }
.newsletter__submit { flex-shrink: 0; }
.newsletter__consent { color: rgba(35,34,34,0.4); }
.newsletter__message { font-family: var(--font-text); font-size: var(--sz-label); font-weight: 500; letter-spacing: var(--ltr-label); text-transform: uppercase; min-height: 1em; }

@media (max-width: 768px) {
  .newsletter { padding-block: 56px; }
  .newsletter__fields { flex-direction: column; }
  .newsletter__submit { width: 100%; }
  .newsletter__input { border-bottom: var(--hairline); min-height: 52px; }
}


/* ================================================================
   Footer
   ================================================================ */
.site-footer { background-color: var(--cultured); margin-top: auto; }
.footer__main { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; padding-top: 64px; padding-bottom: 64px; }
.footer__logo-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.footer__logo-link { display: inline-block; }
.footer__social { display: flex; gap: 12px; }
.footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: var(--hairline); color: var(--neutral-black);
  transition: background-color 0.22s ease, color 0.22s ease;
}
.footer__social-link:hover,
.footer__social-link:focus-visible { background-color: var(--neutral-black); color: var(--white); }
.footer__logo-img { display: block; width: 280px; max-width: 100%; height: auto; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "collection house care"; gap: 32px; }
.footer__col--collection { grid-area: collection; }
.footer__col--house { grid-area: house; }
.footer__col--care { grid-area: care; }
.footer__col-heading { margin-bottom: 20px; color: rgba(35,34,34,0.45); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__link { transition: color 0.15s ease; }
.footer__link:hover { color: var(--luxor-gold); }
.footer__base { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-top: 24px; padding-bottom: 24px; }
.footer__copyright { color: rgba(35,34,34,0.6); }
.footer__tagline-base { font-family: var(--font-text); font-size: 12px; font-weight: 300; letter-spacing: 0.02em; color: rgba(35,34,34,0.6); }

@media (max-width: 768px) {
  .footer__main { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 40px; }
  /* One flat two-column list with equal rows, as in the mobile reference */
  .footer__cols { grid-template-columns: 1fr 1fr; grid-template-areas: none; gap: 0 16px; }
  .footer__col, .footer__links { display: contents; }
  .footer__col-heading { display: none; }
  .footer__link { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; }
  .footer__col--care li:last-child { grid-column: 1 / -1; }
  .footer__logo-col { align-items: center; }
  .footer__base { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .footer__base { padding-top: 16px; padding-bottom: 28px; }
}


/* ================================================================
   Page Hero (shared inner-page header)
   ================================================================ */
.page-hero { background-color: var(--cultured); padding-block: 72px 64px; }
.page-hero__inner { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.page-hero__eyebrow { color: rgba(35,34,34,0.45); }
.page-hero__desc { color: rgba(35,34,34,0.72); max-width: 52ch; }

@media (max-width: 768px) {
  .page-hero { padding-block: 48px 40px; }
}


/* ================================================================
   Breadcrumb
   ================================================================ */
.breadcrumb { padding-block: 20px; }
.breadcrumb__list { display: flex; align-items: center; gap: 10px; list-style: none; flex-wrap: wrap; }
.breadcrumb__item { color: rgba(35,34,34,0.5); }
.breadcrumb__sep  { color: rgba(35,34,34,0.3); }
.breadcrumb__link { transition: color 0.15s ease; }
.breadcrumb__link:hover { color: var(--luxor-gold); }


/* ================================================================
   Collection Page
   ================================================================ */
.collection-hero { background-color: var(--cultured); padding-block: 72px 64px; }
.collection-hero__inner { display: flex; flex-direction: column; gap: 20px; }
.collection-hero__eyebrow { color: rgba(35,34,34,0.45); }
.collection-hero__desc { max-width: 52ch; color: rgba(35,34,34,0.72); }

.collection-grid-header { padding-block: 20px; background-color: var(--cultured); }
.collection-grid-header__inner { display: flex; align-items: center; justify-content: space-between; }
.collection-empty { padding-block: 56px; color: rgba(35,34,34,0.72); }

@media (max-width: 768px) {
  .collection-hero { padding-block: 48px 40px; }
}


/* ================================================================
   Dress Detail
   ================================================================ */
.dress-detail { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }

.dress-detail__gallery { background-color: var(--cultured); }
.dress-detail__main-image { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.dress-detail__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dress-detail__ph { min-height: unset; height: 100%; }
.dress-detail__thumbs { display: flex; gap: 0; border-top: var(--hairline); }
.dress-detail__thumb {
  flex: 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: none;
  border: none;
  border-right: var(--hairline);
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.dress-detail__thumb:last-child { border-right: none; }
.dress-detail__thumb:hover,
.dress-detail__thumb.is-active { opacity: 1; }
.dress-detail__thumb-img { width: 100%; height: 100%; object-fit: cover; }

.dress-detail__info { background-color: var(--white); }
.dress-detail__info-inner {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.dress-detail__collection { color: rgba(35,34,34,0.45); }
.dress-detail__name { color: var(--neutral-black); font-size: clamp(32px, 3vw, var(--sz-display)); }
.dress-detail__price { color: var(--luxor-gold); }
.dress-detail__desc { color: rgba(35,34,34,0.75); max-width: 44ch; }

/* Size grid */
.dress-detail__sizes { display: flex; flex-direction: column; gap: 12px; }
.dress-detail__sizes-label { color: rgba(35,34,34,0.5); }
.dress-detail__sizes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.dress-detail__size-guide { border-bottom: var(--hairline); transition: color 0.15s ease; }
.dress-detail__size-guide:hover { color: var(--luxor-gold); }
.size-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  min-width: 52px;
  height: 44px;
  padding: 0 12px;
  border: var(--hairline);
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--sz-label);
  font-weight: 500;
  letter-spacing: var(--ltr-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.size-btn:hover { background-color: var(--neutral-black); color: var(--white); }
.size-btn.is-selected { background-color: var(--neutral-black); color: var(--white); }

/* CTAs */
.dress-detail__ctas { display: flex; flex-direction: column; gap: 10px; }

/* Accordion */
.dress-detail__accordions { display: flex; flex-direction: column; }
.detail-block { list-style: none; }
.detail-block__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.detail-block__summary::-webkit-details-marker { display: none; }
.detail-block__chevron { color: rgba(35,34,34,0.4); font-size: 18px; line-height: 1; transition: transform 0.2s ease; }
.detail-block[open] .detail-block__chevron { transform: rotate(45deg); }
.detail-block__body { padding-bottom: 16px; color: rgba(35,34,34,0.75); }

@media (max-width: 1024px) {
  .dress-detail__info-inner { padding: 48px 40px; }
}
@media (max-width: 768px) {
  .dress-detail { grid-template-columns: 1fr; }
  .dress-detail__info { border-left: none; border-top: var(--hairline); }
  .dress-detail__info-inner { padding: 40px var(--gutter); position: static; max-height: none; }
}


/* ================================================================
   Forms (shared)
   ================================================================ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label { color: rgba(35,34,34,0.55); }
.form-label span { color: var(--neutral-black); }
.form-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: var(--hairline);
  background: transparent;
  outline: none;
  font-family: var(--font-text);
  font-size: var(--sz-body);
  font-weight: 300;
  color: var(--neutral-black);
  transition: border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder { color: rgba(35,34,34,0.35); }
.form-input:focus { border-color: var(--luxor-gold); }
.form-input[aria-invalid] { border-color: #c0392b; }
.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23232222' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.form-textarea { min-height: 120px; resize: vertical; }
.form-note { color: rgba(35,34,34,0.4); margin-bottom: 4px; }
.form-msg { margin-top: 12px; min-height: 1.5em; }
.form-msg--success { color: var(--neutral-black); }
.form-msg--error   { color: #c0392b; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}


/* ================================================================
   Booking Page
   ================================================================ */
.booking-page {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  padding-top: 72px;
  padding-bottom: 80px;
  align-items: start;
}
.booking-info { display: flex; flex-direction: column; gap: 32px; padding-right: 48px; border-right: var(--hairline); }
.booking-info__block { display: flex; flex-direction: column; gap: 6px; }
.booking-info__label { color: rgba(35,34,34,0.45); margin-bottom: 2px; }
.booking-info__link { transition: color 0.15s ease; }
.booking-info__link:hover { color: var(--luxor-gold); }
.booking-form { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 960px) {
  .booking-page { grid-template-columns: 1fr; gap: 48px; }
  .booking-info { border-right: none; border-bottom: var(--hairline); padding-right: 0; padding-bottom: 40px; }
}
@media (max-width: 768px) {
  .booking-page { padding-top: 48px; padding-bottom: 56px; }
}


/* ================================================================
   Story Page
   ================================================================ */
.story-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.story-hero__text { display: flex; flex-direction: column; justify-content: center; background-color: var(--cultured); }
.story-hero__text-inner { display: flex; flex-direction: column; gap: 28px; padding: 80px var(--gutter); }
.story-hero__eyebrow { color: rgba(35,34,34,0.45); }
.story-hero__title { color: var(--neutral-black); }
.story-hero__quote { display: flex; flex-direction: column; gap: 12px; }
.story-hero__quote-attr { color: rgba(35,34,34,0.5); }
.story-hero__image { overflow: hidden; }
.story-hero__ph { min-height: unset; height: 100%; }

.story-section { background-color: var(--white); }
.story-section__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.story-section__text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 80px var(--gutter); }
.story-section__eyebrow { color: rgba(35,34,34,0.45); }
.story-section__para { color: rgba(35,34,34,0.75); max-width: 46ch; }
.story-section__image { overflow: hidden; }
.story-section__ph { min-height: unset; height: 100%; }
.story-section--reverse .story-section__grid { }

.story-values { background-color: var(--cultured); padding-block: 80px; }
.story-values__heading { margin-bottom: 48px; }
.story-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.story-value { padding: 40px; }
.story-value:last-child { border-right: none; }
.story-value__title { margin-bottom: 16px; }
.story-value__body { color: rgba(35,34,34,0.72); }

.story-cta { background-color: var(--white); padding-block: 96px; }
.story-cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 640px; }
.story-cta__desc { color: rgba(35,34,34,0.72); max-width: 44ch; }

@media (max-width: 768px) {
  .story-hero { grid-template-columns: 1fr; min-height: auto; }
  .story-hero__image { border-left: none; border-top: var(--hairline); min-height: 70vw; order: -1; }
  .story-hero__text-inner { padding: 48px var(--gutter) 40px; }
  .story-section__grid { grid-template-columns: 1fr; min-height: auto; }
  .story-section__image { border-left: none; border-right: none; border-top: var(--hairline); border-bottom: var(--hairline); min-height: 70vw; order: -1; }
  .story-section--reverse .story-section__image { order: -1; }
  .story-section__text { padding: 48px var(--gutter); }
  .story-values__grid { grid-template-columns: 1fr; }
  .story-value { border-right: none; border-bottom: var(--hairline); padding: 32px 0; }
  .story-value:last-child { border-bottom: none; }
  .story-cta { padding-block: 64px; }
  .story-cta__inner .btn { width: 100%; }
}


/* ================================================================
   Contact Page
   ================================================================ */
.contact-page {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 80px;
  padding-top: 72px;
  padding-bottom: 80px;
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info__block { display: flex; flex-direction: column; gap: 6px; }
.contact-info__label { color: rgba(35,34,34,0.45); margin-bottom: 2px; }
.contact-info__link { transition: color 0.15s ease; }
.contact-info__link:hover { color: var(--luxor-gold); }
.contact-form { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 960px) {
  .contact-page { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { border-bottom: var(--hairline); padding-bottom: 40px; flex-direction: row; flex-wrap: wrap; column-gap: 48px; }
}
@media (max-width: 768px) {
  .contact-page { padding-top: 48px; padding-bottom: 56px; }
  .contact-info { flex-direction: column; }
}


/* ================================================================
   404 Page
   ================================================================ */
.error-page { min-height: calc(100vh - 300px); display: flex; align-items: center; padding-block: 80px; }
.error-page__inner { display: flex; flex-direction: column; gap: 20px; }
.error-page__num { color: var(--cherry-blossom); line-height: 1; }
.error-page__title { max-width: 20ch; }
.error-page__desc { color: rgba(35,34,34,0.65); max-width: 44ch; }
.error-page__actions { display: flex; gap: 16px; padding-top: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .error-page__actions .btn { width: 100%; }
}


/* ================================================================
   Floating WhatsApp button
   ================================================================ */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 140;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 20px 0 15px;
  background-color: var(--neutral-black); color: var(--white);
  border: 1px solid var(--neutral-black);
  animation: rdk-fade-in 0.6s ease 1.2s both;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.15s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible { background-color: var(--white); color: var(--neutral-black); }
.whatsapp-float:active { transform: scale(0.96); }
.whatsapp-float__label { white-space: nowrap; }

@media (max-width: 768px) {
  .whatsapp-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; padding: 0; justify-content: center;
  }
  .whatsapp-float__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}

/* Anchored sections clear the sticky header */
section[id] { scroll-margin-top: 72px; }


/* ================================================================
   Info pages: size guide, garment care, privacy
   ================================================================ */
.info-page { max-width: 820px; padding-top: 56px; padding-bottom: 88px; display: flex; flex-direction: column; }
.info-section { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 40px; border-bottom: var(--hairline); }
.info-section:last-child { border-bottom: none; }
.info-section__body { color: rgba(35,34,34,0.75); max-width: 60ch; }
.info-list { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; list-style: disc; color: rgba(35,34,34,0.75); max-width: 60ch; }
.info-list strong { font-weight: 500; color: var(--neutral-black); }
.table-scroll { width: 100%; overflow-x: auto; }
.size-table { width: 100%; min-width: 560px; border-collapse: collapse; border: var(--hairline); background-color: var(--white); }
.size-table th, .size-table td { padding: 14px 16px; text-align: left; border-bottom: var(--hairline); }
.size-table thead th { color: rgba(35,34,34,0.55); font-weight: 400; }
.size-table tbody th { font-weight: 500; }
.size-table tbody tr:last-child > * { border-bottom: none; }

@media (max-width: 768px) {
  .info-page { padding-top: 24px; padding-bottom: 56px; }
  .info-section { padding-block: 32px; }
  .info-section .btn { width: 100%; }
}


/* ================================================================
   Account: sign in, create account, dashboard
   ================================================================ */
.auth-page { background-color: var(--cultured); padding: 72px var(--gutter) 96px; }
.auth-panel {
  max-width: 480px;
  margin-inline: auto;
  padding: 56px 48px;
  background-color: var(--white);
  border: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-panel__script { color: var(--luxor-gold); }
.auth-panel__desc { color: rgba(35,34,34,0.7); }
.auth-form { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.auth-form .form-msg { margin-top: 0; }
.auth-panel__switch { padding-top: 20px; border-top: var(--hairline); color: rgba(35,34,34,0.7); }
.auth-panel__link { color: var(--neutral-black); border-bottom: 1px solid var(--luxor-gold); transition: color 0.15s ease; }
.auth-panel__link:hover { color: var(--luxor-gold); }
.auth-panel__preview { color: rgba(35,34,34,0.4); }

/* Checkbox: square, hairline, gold tick */
.form-check { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; cursor: pointer; }
.form-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form-check__box {
  width: 20px; height: 20px; margin-top: 2px;
  border: var(--hairline);
  background-color: var(--white);
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.form-check__box::after {
  content: '';
  position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--white);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.form-check__input:checked + .form-check__box { background-color: var(--luxor-gold); border-color: var(--luxor-gold); }
.form-check__input:checked + .form-check__box::after { transform: rotate(45deg) scale(1); }
.form-check__input:focus-visible + .form-check__box { outline: 1px solid var(--luxor-gold); outline-offset: 3px; }
.form-check__input:disabled + .form-check__box { opacity: 0.5; }
.form-check__text { color: rgba(35,34,34,0.75); }

/* Dashboard */
.account-dash {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.account-dash.is-ready { opacity: 1; transform: none; }
.account-dash__head { display: flex; flex-direction: column; gap: 12px; }
.account-dash__email { color: rgba(35,34,34,0.5); }
.account-dash__grid { display: grid; grid-template-columns: 1fr 1fr; border: var(--hairline); background-color: var(--white); }
.account-card { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.account-card + .account-card { border-left: var(--hairline); }
.account-card__label { color: rgba(35,34,34,0.45); }
.account-card__body { color: rgba(35,34,34,0.72); max-width: 44ch; }
.account-card .form-msg { margin-top: 0; }
.account-dash__signout { align-self: flex-start; }

@media (max-width: 768px) {
  .auth-page { padding: 40px var(--gutter) 64px; }
  .auth-panel { padding: 40px 24px; }
  .account-dash__grid { grid-template-columns: 1fr; }
  .account-card { padding: 32px 24px; }
  .account-card + .account-card { border-left: none; border-top: var(--hairline); }
  .account-card .btn, .account-dash__signout { width: 100%; align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .account-dash, .form-check__box, .form-check__box::after { transition: none !important; }
}


/* ================================================================
   Animations
   ================================================================ */

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes rdk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rdk-slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rdk-slide-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rdk-scale-up {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Page: top-bar and header slide in on load ──────────────────── */
.top-bar    { animation: rdk-fade-in  0.5s ease 0.05s both; }
.site-header { animation: rdk-fade-in 0.6s ease 0.1s  both; }

/* ── Hero: cinematic staggered entrance ─────────────────────────── */
.hero__image   { animation: rdk-fade-in   1.3s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.hero__script  { animation: rdk-slide-left 0.9s cubic-bezier(0.22,1,0.36,1) 0.30s both; }
.hero__headline { animation: rdk-slide-up  0.9s cubic-bezier(0.22,1,0.36,1) 0.50s both; }
.hero__intro   { animation: rdk-slide-up   0.9s cubic-bezier(0.22,1,0.36,1) 0.70s both; }
.hero__actions { animation: rdk-slide-up   0.9s cubic-bezier(0.22,1,0.36,1) 0.90s both; }

/* ── Scroll-triggered: initial hidden state ─────────────────────── */
[data-animate] {
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
              transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-in"]    { transform: translateY(0); }
[data-animate="fade-left"]  { transform: translateX(-28px); }
[data-animate="fade-right"] { transform: translateX(28px); }
[data-animate="scale-up"]   { transform: scale(0.92); }

[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }

/* ── Scroll-triggered: revealed state ──────────────────────────── */
[data-animate].in-view {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}
.brand-line__monogram.in-view { opacity: 0.88; }

/* ── Dress-card grid stagger ────────────────────────────────────── */
.new-in__grid [data-animate]:nth-child(2),
.collection-grid [data-animate]:nth-child(4n+2) { transition-delay: 0.10s; }
.new-in__grid [data-animate]:nth-child(3),
.collection-grid [data-animate]:nth-child(4n+3) { transition-delay: 0.20s; }
.new-in__grid [data-animate]:nth-child(4),
.collection-grid [data-animate]:nth-child(4n+4) { transition-delay: 0.30s; }

/* ── Enhanced hover: dress card ─────────────────────────────────── */
.dress-card__img {
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.dress-card__link:hover .dress-card__img {
  transform: scale(1.07);
}

/* ── Enhanced hover: collection section image ───────────────────── */
.collection-section__img {
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.collection-section:hover .collection-section__img {
  transform: scale(1.04);
}

/* ── Enhanced hover: atelier illustration ───────────────────────── */
.atelier__img {
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.atelier:hover .atelier__img {
  transform: scale(1.04);
}

/* ── Enhanced hover: buttons ────────────────────────────────────── */
.btn {
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, transform 0.15s ease;
}
.btn:active  { transform: scale(0.97); }

/* ── Nav link: gold underline sweep ─────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--luxor-gold);
  transition: width 0.28s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* ── Logo: subtle entrance ──────────────────────────────────────── */
.site-header__logo {
  animation: rdk-fade-in 0.7s ease 0.2s both;
}

/* ── Honour reduced-motion preference ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .top-bar, .site-header, .site-header__logo,
  .hero__image, .hero__script, .hero__headline,
  .hero__intro, .hero__actions {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dress-card, .dress-card__img, .collection-section__img,
  .atelier__img, .btn { transition: none !important; }
}