/* ═══════════════════════════════════════════════════════════
   DamArt Dancewear — stylesheet
   Mobile first. Breakpoints grow up from the phone.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --ivory:      #F8F5F0;
  --pink:       #D8A5AE;   /* powder pink — decorative only */
  --nude:       #EBCFD1;   /* nude pink — soft backgrounds */
  --gray:       #8C8B91;   /* stone gray — secondary text */
  --black:      #1D1D1D;

  /* Derived (accessible contrast on ivory) */
  --ink:        #8C4E4D;   /* logotype colour — headings and accents */
  --ink-strong: #743F3E;
  --nude-light: #FBF3F1;
  --line:       #E6DAD5;

  --font-heading: "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1180px;
  --radius: 2px;
  --shadow: 0 18px 40px -24px rgba(29, 29, 29, .35);
  --transition: .32s cubic-bezier(.22, .61, .36, 1);

  --header-height: 60px;
}

@media (min-width: 900px) {
  :root { --header-height: 84px; }
}

/* ── Base ────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  -webkit-text-size-adjust: 100%;
  /* The nav drawer lives off-screen: without this the phone lets
     you drag the page sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 1em; }

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

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.2rem;
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: none; }

/* ── Buttons ─────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .85rem 1.9rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.button--primary {
  background: var(--ink);
  color: #fff;
}
.button--primary:hover,
.button--primary:focus-visible { background: var(--ink-strong); border-color: var(--ink-strong); }

.button--secondary:hover,
.button--secondary:focus-visible { background: var(--ink); color: #fff; }

.button--block { width: 100%; }

.button svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ── Header ──────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 97;              /* above the backdrop and the drawer */
  background: rgba(248, 245, 240, .94);
  border-bottom: 1px solid var(--line);
  /* Careful: NO backdrop-filter here. On the phone the nav drawer is a
     child of this block, and a filter would turn the header into its
     containing block, pinning the drawer to the header's height. */
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: var(--header-height);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  position: relative;
  z-index: 96;             /* keeps the logo visible above the drawer */
}
.brand__logo { width: 108px; }
.brand__tagline {
  font-size: .5rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--pink);
  padding-left: 2px;
}

/* Navigation — side drawer on the phone */
.nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(82vw, 320px);
  padding: calc(var(--header-height) + 2rem) 2rem 2rem;
  background: var(--ivory);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform var(--transition);
  visibility: hidden;
  z-index: 95;
}

.nav.is-open { transform: translateX(0); visibility: visible; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.nav__list a {
  display: block;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--black);
}
.nav__list a:hover,
.nav__list a[aria-current="true"] { color: var(--ink); }

.menu-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 96;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 29, .35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 94;
}
.backdrop.is-visible { opacity: 1; visibility: visible; }

@media (min-width: 900px) {
  /* On desktop the nav is static: the blur is safe here. */
  .header { backdrop-filter: blur(10px); }
  .header__inner { padding: 0 2rem; }
  .brand__logo { width: 132px; }
  .brand__tagline { font-size: .55rem; }
  .menu-toggle, .backdrop { display: none; }
  .nav {
    position: static;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    transform: none;
    visibility: visible;
  }
  .nav__list { flex-direction: row; gap: 1.9rem; }
  .nav__list a { padding: 0; border: 0; font-size: .72rem; }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 3.5rem 1.25rem 3rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--nude-light) 0%, var(--ivory) 62%);
  border-bottom: 1px solid var(--line);
}

.hero__text { max-width: 620px; margin: 0 auto; }

.hero__logo { width: min(74vw, 300px); margin: 0 auto .9rem; }
.hero__tagline { width: min(58vw, 240px); margin: 0 auto 1.1rem; }

.hero__claim {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 2rem;
  line-height: 2;
}

.hero__footnote {
  margin: 2.6rem 0 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--gray);
}
.hero__footnote em { color: var(--ink); font-style: italic; }

@media (min-width: 700px) {
  .hero { padding: 5.5rem 2rem 4.5rem; }
  .hero__logo { width: 340px; }
  .hero__tagline { width: 262px; }
  .hero__claim { font-size: .85rem; }
}

/* ── Category shortcuts ──────────────────────────────────── */

.categories {
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
}

.categories__list {
  list-style: none;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 1rem;
}

.categories__list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem .3rem;
  text-align: center;
}

.categories__list svg {
  width: 34px;
  height: 34px;
  stroke: var(--pink);
  stroke-width: 1.1;
  fill: none;
}

.categories__name {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
}

.categories__link {
  font-size: .62rem;
  color: var(--pink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

@media (min-width: 700px) {
  .categories__list { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .categories__list li + li { border-left: 1px solid var(--line); }
  .categories__list svg { width: 40px; height: 40px; }
}

/* ── Sections ────────────────────────────────────────────── */

.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1rem;
}

.section--nude {
  max-width: none;
  background: var(--nude-light);
  border-block: 1px solid var(--line);
}
.section--nude > * { max-width: var(--max-width); margin-inline: auto; }

.section__header { text-align: center; margin-bottom: 2.5rem; }

.section__title {
  font-size: clamp(1.7rem, 6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: .06em;
}

/* The collection name is italic, same as in the hero. */
.section__title em { font-style: italic; }

.section__subtitle {
  max-width: 46ch;
  margin: 1rem auto 0;
  color: var(--gray);
  font-size: .93rem;
}

/* Divider: heart in the middle, two hairlines either side.
   The lines are CSS and not part of the SVG on purpose. The original
   divider ships them as 1.5-unit shapes inside a 895 viewBox: drawn at
   190 px they end up 0.32 px wide and the browser only paints the
   antialiasing, at an intensity that shifts with width and zoom (14 % at
   1x, 41 % at 2x). It looked as if one of the two lines vanished while
   resizing. A CSS border is always a solid 1 px. */
.ornament {
  width: 190px;
  margin: .9rem auto 0;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #9B605C;           /* same tone as the brand SVGs */
  opacity: .55;
}

.ornament img {
  width: 13px;
  flex: none;
}

.ornament--hero {
  width: min(46vw, 200px);
  margin: 0 auto 1.6rem;
}

@media (min-width: 700px) {
  .ornament--hero { width: 210px; }
}

@media (min-width: 700px) {
  .section { padding: 5rem 2rem; }
}

/* ── Filters ─────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .35rem;
  -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  min-height: 40px;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

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

@media (min-width: 700px) {
  .filters { flex-wrap: wrap; justify-content: center; }
}

/* ── Product grid ────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem .75rem;
}

@media (min-width: 620px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1.2rem; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 2.4rem 1.6rem; } }

.grid__empty { text-align: center; color: var(--gray); padding: 2rem 0; }

.card {
  display: flex;
  flex-direction: column;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.card__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--nude-light);
  border-radius: var(--radius);
}

.card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), opacity var(--transition);
}

.card:hover .card__photo,
.card:focus-visible .card__photo { transform: scale(1.045); }

/* Placeholder for a garment without a photograph */
.card__no-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .4rem;
  text-align: center;
  padding: 1rem;
  background: repeating-linear-gradient(135deg, var(--nude-light) 0 10px, #fff 10px 20px);
  color: var(--gray);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card__no-photo span:first-child {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--pink);
}

.card__tag {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .28rem .6rem;
  background: rgba(248, 245, 240, .93);
  color: var(--ink);
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.card__icon {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(248, 245, 240, .92);
  color: var(--ink);
  font-size: .85rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover .card__icon,
.card:focus-visible .card__icon { opacity: 1; }

/* The quotes vary in length: this keeps prices and sizes aligned
   across the garments sharing a row. */
.card__body {
  padding: .75rem .15rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card__quote { flex: 1; }

.card__name {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}

.card__quote {
  margin: .2rem 0 .7rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--gray);
}

.card__price {
  font-size: .92rem;
  color: var(--black);
  margin: 0 0 .35rem;
}

.card__sizes {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0;
}

@media (min-width: 620px) {
  .card__name  { font-size: 1.28rem; }
  .card__quote { font-size: .92rem; }
}

/* ── Size guide ──────────────────────────────────────────── */

.size-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 620px)  { .size-guide { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1000px) { .size-guide { grid-template-columns: repeat(4, 1fr); } }

.size-guide__card {
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius);
}
.size-guide__card h3 {
  font-size: 1.28rem;
  margin-bottom: .5rem;
}
.size-guide__card p { font-size: .88rem; color: var(--gray); margin-bottom: .5rem; }
.size-guide__card p:last-child { margin-bottom: 0; }
.size-guide__card strong { color: var(--black); letter-spacing: .1em; }

/* ── Essence ─────────────────────────────────────────────── */

.essence { display: grid; }

.essence__text {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.essence__text p { color: var(--gray); font-size: .95rem; }

.essence__lead {
  font-family: var(--font-heading);
  font-size: 1.35rem !important;
  line-height: 1.45;
  color: var(--black) !important;
  margin-top: 1.5rem;
}

.essence__signature {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink) !important;
  margin-top: .6rem;
}

.essence__shoes {
  width: 86px;
  margin: 2.4rem auto .4rem;
  opacity: .85;
}

@media (min-width: 900px) {
  .essence__text p { font-size: 1rem; }
  .essence__shoes { width: 100px; }
}

/* ── Contact ─────────────────────────────────────────────── */

.contact {
  display: grid;
  gap: .8rem;
  max-width: 420px;
  margin: 0 auto;
}

.contact__noscript { text-align: center; color: var(--gray); font-size: .9rem; }

/* The `auto` on the sides is mandatory: `.section--nude > *` centres its
   children with `margin-inline: auto`, and a `margin` shorthand that sets
   the sides to 0 overrides it. The block ends up against the left edge of
   the content and the text centres inside it, not inside the section.
   It only shows once the window is wider than `--max-width` (1180 px). */
.contact__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 2rem auto 0;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  /* `letter-spacing` also adds the gap after the last letter, and that
     trailing space is part of the box being centred: the line ends up
     shifted left. Padding equal to the spacing brings it back on axis. */
  padding-left: .14em;
}

/* Separator diamond. Decorative, so it takes the tone of the divider
   hairlines (`.ornament`) rather than a text colour. */
.contact__diamond {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: #9B605C;
  opacity: .55;
}

/* The three details only share one line once they actually fit. Measured:
   677 px of uppercase text with letter-spacing, so the row needs ~740 px of
   viewport; below that the stacked column reads better than a ragged wrap
   with a separator dangling at the end of a line. `flex-wrap` stays as a
   safety net for when the wording changes — without it, a row that does not
   fit pushes the whole page sideways. */
@media (min-width: 760px) {
  .contact__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .55rem .95rem;
  }
}

/* ── Footer ──────────────────────────────────────────────── */

.footer {
  text-align: center;
  padding: 3rem 1.25rem 2.5rem;
  background: var(--ivory);
  border-top: 1px solid var(--line);
}

.footer__logo { width: 132px; margin: 0 auto .35rem; }

.footer__tagline {
  font-size: .55rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0;
}

.footer .ornament { width: 160px; margin: 1.2rem auto; }

.footer__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1.4rem;
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: .9rem;
  margin-bottom: 1.8rem;
}

.footer__social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--ink); color: #fff; }
.footer__social svg { width: 19px; height: 19px; fill: currentColor; }

.footer__legal {
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--gray);
  margin: 0;
}

/* ── Product modal ───────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ivory);
  color: var(--black);
  overflow: hidden;
}

.modal:not([open]) { display: none; }

.modal::backdrop { background: rgba(29, 29, 29, .55); }

.modal__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(248, 245, 240, .9);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.modal__body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
  .modal {
    position: fixed;
    inset: 0;
    width: min(1080px, 92vw);
    height: auto;
    max-height: 90vh;
    margin: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .modal__close { top: 1rem; right: 1rem; background: transparent; }
}

/* Modal contents */

.product {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .product { grid-template-columns: 46% 54%; }
}

.product__gallery { background: var(--nude-light); }

.product__main {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.product__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.product__no-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  padding: 2rem;
  background: repeating-linear-gradient(135deg, var(--nude-light) 0 12px, #fff 12px 24px);
  color: var(--gray);
  font-size: .75rem;
}
.product__no-photo strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--pink);
}

.product__thumbs {
  display: flex;
  gap: .5rem;
  padding: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.product__thumbs::-webkit-scrollbar { display: none; }

.product__thumb {
  flex: none;
  width: 58px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.product__thumb[aria-current="true"] { border-color: var(--ink); }

@media (min-width: 900px) {
  .product__main { aspect-ratio: 4 / 5; }
  .product__thumb { width: 68px; }
}

/* ── Main photo zoom ──────────────────────────────────────
   Mouse only: the JS checks the same media query before wiring
   anything up. It stays off on phones because the gesture would
   be dragging a finger inside a <dialog> that already scrolls,
   and the two fight each other. The hint is hidden by default
   and only shows up where the zoom exists. */

.product__zoom-hint { display: none; }

@media (hover: hover) and (pointer: fine) {

  .product__main--zoom { cursor: zoom-in; }

  .product__main--zoom img {
    /* the JS moves the origin with the pointer position */
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform .28s ease;
  }

  /* 2× and no further: the photos are 1400 px on the long side and the
     frame is about 490, so past ~1.6× it is already interpolating. At 2×
     the drift is invisible; at 2.4× the lace turned to mush on high
     density screens (measured at DPR 2). The photos set the real ceiling. */
  .product__main--zoom.is-zoomed img {
    transform: scale(2);
    transition-duration: .16s;
  }

  .product__zoom-hint {
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: rgba(248, 245, 240, .9);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;          /* must not steal mousemove from the photo */
    transition: opacity .2s ease;
  }

  .product__main--zoom.is-zoomed .product__zoom-hint { opacity: 0; }
}

.product__info { padding: 1.75rem 1.25rem 2.25rem; }

@media (min-width: 900px) {
  .product__info { padding: 2.75rem 2.5rem; }
}

.product__category {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 .5rem;
}

.product__name {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .03em;
  margin: 0;
}

.product__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--gray);
  margin: .7rem 0 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.product__price {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  color: var(--black);
  margin: 0 0 .25rem;
}

.product__disclaimer {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 1.5rem;
}

.product__block { margin-bottom: 1.4rem; }

.product__label {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 .55rem;
}

.product__sizes { display: flex; flex-wrap: wrap; gap: .45rem; }

.product__size {
  min-width: 44px;
  min-height: 40px;
  padding: .45rem .8rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--black);
}

.product__colors { display: flex; flex-wrap: wrap; gap: .9rem; }

.product__color {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  color: var(--gray);
}
.product__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
}

.product__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.product__list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .87rem;
}

.product__list dt, .product__list .key {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray);
}
.product__list .value { color: var(--black); line-height: 1.5; }

@media (min-width: 560px) {
  .product__list li { grid-template-columns: 120px 1fr; gap: 1rem; align-items: baseline; }
}

.product__actions {
  display: grid;
  gap: .65rem;
  margin-top: 1.9rem;
}

.product__note {
  margin: 1rem 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--gray);
  text-align: center;
}

/* ── Floating toast ──────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 160%);
  z-index: 200;
  max-width: calc(100vw - 2rem);
  padding: .85rem 1.4rem;
  background: var(--black);
  color: var(--ivory);
  border-radius: 100px;
  font-size: .8rem;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ── Reveal animation ────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

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