/* ==========================================================================
   Kadene Jewelry — Every Move, A Statement.
   Mobile-first. Base rules target phones; min-width queries scale up.
   ========================================================================== */

:root {
  --white: #ffffff;
  --cream: #f9f7f4;
  --cream-deep: #f1ece4;
  --black: #161616;
  --ink: #1c1c1c;
  --body: #4a463f;
  --muted: #8a8478;
  --gold: #b8924a;
  --gold-soft: #d8c39b;
  --line: #e7e2d9;
  --line-strong: #d3ccc0;
  --error: #7a2e2e;

  --serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: 20px;
  --page: 1440px;
  --bar-h: 36px;
  --nav-h: 60px;
  --tap: 44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 44px; --nav-h: 112px; } }

/* ---------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

p { margin: 0; }

::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.skip:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--black);
  color: #fff;
  width: auto; height: auto;
  clip: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Every horizontally scrolling region: momentum on iOS, contained overscroll. */
.scroll-x {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 64px 0; }
.section--cream { background: var(--cream); }

/* Soft tonal transitions: sections fade into their neighbours instead of
   meeting at a hard edge. */
.blend-in { background: linear-gradient(180deg, var(--cream) 0, var(--white) 220px); }
.blend-cream {
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 16%, var(--cream) 84%, var(--white) 100%);
}
@media (min-width: 1024px) { .section { padding: 96px 0; } }

.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.section-head h2 { font-size: clamp(2rem, 7vw, 3.2rem); }
.section-head--center { align-items: center; text-align: center; }
.section-head p { color: var(--body); max-width: 52ch; }

@media (min-width: 768px) {
  .section-head:not(.section-head--center) {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .section-head { margin-bottom: 48px; }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.link-line {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.link-line span {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s var(--ease);
}
.link-line:hover span { color: var(--gold); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid var(--black);
  background: var(--black);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--black); }
.btn--gold { background: var(--gold); border-color: var(--gold); }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn:not(:disabled):hover { background: var(--gold); border-color: var(--gold); color: #fff; }
  .btn--ghost:not(:disabled):hover { background: var(--black); border-color: var(--black); }
  .btn--gold:not(:disabled):hover { background: #fff; border-color: #fff; color: var(--black); }
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .icon-btn:hover { color: var(--gold); } }

.badge-count {
  position: absolute;
  top: 5px;
  right: 3px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.badge-count.is-on { display: inline-flex; animation: pop 0.4s var(--ease-out); }

@keyframes pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===================================================== announcement bar */

.announce {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  color: #efebe4;
}
.announce__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.announce__group { display: flex; flex: none; }
.announce span {
  padding: 0 28px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
.announce span::after {
  content: '✦';
  margin-left: 28px;
  color: var(--gold);
  font-size: 8px;
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ================================================================ nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 30px -22px rgba(22, 22, 22, 0.35); }

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
}
.nav__left, .nav__right { display: flex; align-items: center; }
.nav__right { justify-content: flex-end; }
.nav__search-desktop, .nav__wish { display: none; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
}
.logo img { width: auto; height: 24px; }
.logo__word {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 0.28em; /* optical balance against letter-spacing */
}

.nav__links { display: none; }
.nav__search-mobile { display: none; }  /* in the menu on the narrowest phones */

@media (min-width: 360px) {
  .nav__search-mobile { display: inline-flex; }
  .mobile-menu__search { display: none; }
}
@media (min-width: 480px) {
  .nav__wish { display: inline-flex; }
  .logo img { height: 28px; }
  .logo__word { font-size: 20px; letter-spacing: 0.28em; }
}

@media (min-width: 1024px) {
  .nav { height: 68px; }
  .nav__burger { display: none; }
  .nav__search-desktop { display: inline-flex; }
  .nav__search-mobile { display: none; }
  .logo img { height: 34px; }
  .logo__word { font-size: 25px; }

  .nav__links {
    display: flex;
    justify-content: center;
    gap: 36px;
    height: 45px; /* 44px link + 1px rule */
    border-top: 1px solid var(--line);
  }
  .nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    justify-content: center;
    min-width: var(--tap);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s var(--ease);
  }
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .nav__links a:hover { color: var(--gold); }
  .nav__links a:hover::after,
  .nav__links a[aria-current='page']::after { transform: scaleX(1); }
}

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  background: var(--white);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-out), visibility 0.5s;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: none; visibility: visible; }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  margin-bottom: 8px;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 26px;
}
.mobile-menu__foot {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-menu__foot a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* search */
.search {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  padding: 16vh var(--gutter) 0;
  background: rgba(249, 247, 244, 0.985);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.search.is-open { opacity: 1; visibility: visible; }
.search__box { width: min(680px, 100%); }
.search__close { position: absolute; top: 12px; right: 12px; }
.search input {
  width: 100%;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7vw, 3rem);
  outline: none;
  -webkit-appearance: none;
}
.search input::placeholder { color: var(--line-strong); }
.search__results {
  display: grid;
  gap: 2px;
  max-height: 55vh;
  margin-top: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search__hit {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
}
.search__hit img { width: 48px; height: 60px; object-fit: cover; background: var(--cream); }
.search__hit em { margin-left: auto; font-style: normal; color: var(--muted); }
.search__hint { margin-top: 18px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* =============================================================== hero */

/* On phones the clip is the hero: it runs full width in its own 9:16 shape and
   the copy sits over the bottom of it. From 900px up the hero splits in two,
   copy beside the clip, and the clip is shown whole rather than cropped. */
.hero { display: grid; background: var(--cream); }
.hero__media {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  /* Height, not aspect-ratio. With `aspect-ratio` plus a `max-height` cap the
     browser keeps the ratio by shrinking the WIDTH once the cap binds, which
     left a cream gap down the right edge on any screen shorter than 16/9 —
     including iPhones, where the visible viewport is shorter than the layout
     one. Setting the height outright keeps the width at 100% always and lets
     object-fit crop the clip instead. 177.78vw is 16/9 of the width. */
  height: min(177.78vw, 88vh);
  overflow: hidden;
  background: var(--cream-deep);
}
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__still { display: none; }

/* iOS paints its own start-playback button over the clip when it refuses to
   autoplay (Low Power Mode), and it lands right on the headline. The video
   carries no controls attribute; these strip the ones WebKit adds anyway. */
/* One rule each, not a comma-separated group: a selector an engine doesn't
   recognise invalidates the whole group it sits in, and this has to hold up on
   the one browser that draws the button. */
.hero__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; appearance: none; }
.hero__video::-webkit-media-controls-enclosure { display: none !important; }
.hero__video::-webkit-media-controls-panel { display: none !important; }
.hero__video::-webkit-media-controls-overlay-play-button { display: none !important; opacity: 0; pointer-events: none; }
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}

/* Belt and braces: if playback never actually starts, the poster stands in for
   the clip entirely, so there is nothing for a play button to sit on. */
.hero__media.is-still .hero__video { display: none; }
.hero__media.is-still .hero__still { display: block; }

.hero__copy {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  padding: 96px var(--gutter) 40px;
  color: var(--white);
  /* Soft lift off the footage. It has to hold up over whichever frame the clip
     happens to be on, so it reaches well up the image and fades out gradually. */
  background: linear-gradient(
    to top,
    rgba(14, 12, 10, 0.86) 0%,
    rgba(14, 12, 10, 0.68) 38%,
    rgba(14, 12, 10, 0.28) 70%,
    rgba(14, 12, 10, 0) 100%
  );
}
.hero__copy .eyebrow { color: rgba(255, 255, 255, 0.8); }
.hero__copy h1 {
  margin-bottom: 18px;
  font-size: clamp(2.8rem, 12vw, 5.4rem);
  line-height: 1.02;
}
.hero__copy h1 em { font-style: italic; color: var(--gold-soft); }
.hero__copy p { max-width: 42ch; margin-bottom: 30px; color: rgba(255, 255, 255, 0.86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { flex: 1 1 200px; }
.hero__copy .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
@media (hover: hover) {
  .hero__copy .btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
}

@media (min-width: 900px) {
  /* The clip's column is sized by the clip itself, so it sits at its own 9:16
     with nothing cropped and no letterboxing either side of it. */
  .hero { grid-template-columns: 1fr auto; align-items: stretch; }
  .hero__media {
    grid-area: 1 / 2;
    width: auto;
    height: auto;          /* the phone rule sets a height; here the clip sets it */
    aspect-ratio: auto;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-deep);
  }
  /* No display here on purpose: .hero__still must stay hidden unless the
     reduced-motion rule below turns it on. */
  .hero__media video,
  .hero__media img {
    position: static;
    width: auto;
    height: min(76vh, 720px);
    max-width: 46vw;
    aspect-ratio: 9 / 16;
    object-fit: contain;
  }
  .hero__copy {
    grid-area: 1 / 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(40px, 6vw, 110px);
    color: var(--ink);
    background: none;
  }
  .hero__copy .eyebrow { color: var(--muted); }
  .hero__copy h1 em { color: var(--gold); }
  .hero__copy p { color: var(--body); }
  .hero__copy .btn--ghost { color: var(--black); border-color: var(--line-strong); }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* Reduced motion: the still stands in for the clip entirely. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__still { display: block; }
}

/* ================================================ product card + grids */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 12px;
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 20px; } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; } }

.card { min-width: 0; }
.card__frame { position: relative; margin-bottom: 14px; }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream);
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease), transform 1.1s var(--ease-out);
}
.card__img--alt { opacity: 0; }
.card.is-sold-out .card__img--main { opacity: 0.55; }
.card__quick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Hover-capable devices: swap to the second image, or zoom if there isn't one.
   Keyboard users get the same swap when the media link takes focus. */
@media (hover: hover) and (pointer: fine) {
  .card.has-alt:hover .card__img--main,
  .card.has-alt:focus-within .card__img--main { opacity: 0; }
  .card.has-alt:hover .card__img--alt,
  .card.has-alt:focus-within .card__img--alt { opacity: 1; transform: scale(1.02); }
  .card:not(.has-alt):hover .card__img--main { transform: scale(1.06); }
}

/* Touch: there is no hover to swap on, so the second image becomes a second
   slide the shopper can swipe to instead. */
.card__dots { display: none; }
@media (hover: none), (pointer: coarse) {
  .card.has-alt .card__media {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .card.has-alt .card__media::-webkit-scrollbar { display: none; }
  .card.has-alt .card__media img {
    position: static;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    opacity: 1;
    transition: none;
  }
  .card.has-alt.is-sold-out .card__media img { opacity: 0.55; }

  .card.has-alt .card__dots {
    display: flex;
    gap: 5px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .card__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
    transition: background 0.25s var(--ease);
  }
  .card__dots i.is-on { background: var(--white); }
}

.card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.card__wish {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
}
.card__wish span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transition: color 0.3s;
}
.card__wish svg { width: 15px; height: 15px; }
.card__wish.is-on { color: var(--gold); }
.card__wish.is-on svg { fill: var(--gold); }

.card__quick {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  /* An <a> rather than a <button> since it leaves the site, so the centring,
     colour and type a button gave for free have to be set here. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 12px;
  color: var(--black);
  text-align: center;
  text-decoration: none;
  font-family: var(--sans);
  background: rgba(255, 255, 255, 0.96);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s, color 0.3s;
}

/* Quick Add and the heart: always visible on touch, revealed on hover elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .card__quick { opacity: 0; transform: translateY(10px); }
  .card__wish { opacity: 0; transition: opacity 0.35s var(--ease); }
  .card:hover .card__quick,
  .card:focus-within .card__quick { opacity: 1; transform: none; }
  .card:hover .card__wish,
  .card:focus-within .card__wish,
  .card__wish.is-on { opacity: 1; }
  .card__quick:hover { background: var(--black); color: #fff; }
}

.card__info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.card__name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.card__name a {
  display: block;
  padding: 15px 0; /* 44px tap target without changing the visual rhythm */
  margin: -15px 0;
}
.card__price { font-size: 13px; white-space: nowrap; }
.card__sub {
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.35;
  color: var(--muted);
}

/* rail arrows (lookbook) */
.rail-controls { display: none; gap: 8px; }
@media (min-width: 1024px) and (hover: hover) { .rail-controls { display: flex; } }
.rail-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.rail-btn svg { width: 16px; height: 16px; }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail-btn:not(:disabled):hover { background: var(--black); border-color: var(--black); color: #fff; }

.skeleton {
  background: linear-gradient(100deg, var(--cream) 30%, var(--cream-deep) 50%, var(--cream) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton--card { aspect-ratio: 4 / 5; margin-bottom: 14px; }
.skeleton--line { height: 11px; width: 60%; margin-bottom: 8px; }
@keyframes shimmer { to { background-position: -220% 0; } }

.empty { grid-column: 1 / -1; padding: 72px 0; text-align: center; color: var(--muted); }

/* ============================================================ lookbook */

.lookbook__rail {
  gap: 10px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.lookbook__item {
  flex: 0 0 auto;
  height: 300px;
  /* The editorial shots are all 2:3 portrait. The rail used to be 3:2, which
     cover-cropped them to a centre band and threw the composition away. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--cream-deep);
  scroll-snap-align: start;
}
.lookbook__item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .lookbook__item { height: 460px; } .lookbook__rail { gap: 16px; } }
@media (min-width: 1280px) { .lookbook__item { height: 560px; } }

.progress {
  position: relative;
  height: 1px;
  margin-top: 28px;
  background: var(--line);
}
.progress span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--black);
  transition: width 0.15s linear;
}

/* =============================================================== values */

.values { display: grid; }
.value {
  position: relative;
  padding: 40px var(--gutter);
  text-align: center;
}
.value + .value::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.value svg { width: 30px; height: 30px; margin: 0 auto 16px; color: var(--gold); }
/* The brand mark is a black PNG; mask it so it takes the gold accent. */
.value__mark {
  display: block;
  width: 32px;
  height: 30px;
  margin: 0 auto 16px;
  background: var(--gold);
  -webkit-mask: url(/assets/brand/kadene-mark.png) center / contain no-repeat;
  mask: url(/assets/brand/kadene-mark.png) center / contain no-repeat;
}
.value h3 {
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.value p { max-width: 34ch; margin: 0 auto; font-size: 13.5px; color: var(--muted); }
@media (min-width: 768px) {
  .values { grid-template-columns: repeat(3, 1fr); }
  .value { padding: 16px 32px 40px; }
  .value + .value::before {
    top: 20%;
    bottom: 20%;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
  }
}

/* ============================================================ community */

/* Instagram-style comment strip: avatar, bold handle running into the comment,
   a quiet platform line underneath. Deliberately light — no cards or borders. */
.community { padding: 64px 0 8px; background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%); }
@media (min-width: 1024px) { .community { padding: 88px 0 16px; } }

.community__title {
  margin-bottom: 28px;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  text-align: center;
}
.community__list {
  display: grid;
  gap: 22px;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.comment__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--white), 0 0 0 2px var(--gold-soft);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
}
.comment blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.comment__handle { margin-right: 6px; font-weight: 500; letter-spacing: 0.01em; }
.comment__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.comment__meta svg { width: 12px; height: 12px; }

/* ========================================================== email strip */

.signup { padding: 64px 0 72px; background: var(--cream); text-align: center; }
.signup .logo-mark { width: auto; height: 38px; margin: 0 auto 22px; opacity: 0.9; }
.signup h2 { margin-bottom: 12px; font-size: clamp(2rem, 7vw, 3rem); }
.signup p { max-width: 44ch; margin: 0 auto 30px; color: var(--body); }
.signup__form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin: 0 auto; }
.signup__form input {
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease);
}
.signup__form input::placeholder { color: var(--muted); }
.signup__form input:focus { border-color: var(--gold); }
@media (min-width: 600px) {
  .signup__form { flex-direction: row; gap: 0; }
  .signup__form input { flex: 1; border-right: 0; }
}
@media (min-width: 1024px) { .signup { padding: 88px 0 100px; } }
/* Straight after the community strip the two cream areas read as one; don't double the gap. */
.community + .signup { padding-top: 40px; }
@media (min-width: 1024px) { .community + .signup { padding-top: 56px; } }
@media (hover: hover) {
  .signup .btn--gold:not(:disabled):hover { background: var(--black); border-color: var(--black); color: #fff; }
}

/* =============================================================== footer */

.footer { padding: 0 0 28px; background: var(--cream); }
.footer__grid { padding-top: 48px; border-top: 1px solid var(--line); }
main:not(:has(> .signup:last-child))::after {
  content: '';
  display: block;
  height: 120px;
  background: linear-gradient(180deg, var(--white), var(--cream));
}
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-bottom: 40px; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand .logo img { height: 30px; }
.footer__brand p { max-width: 36ch; margin-top: 16px; font-size: 13px; color: var(--muted); }
.footer h4 {
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  font-size: 13px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.footer li a:hover { color: var(--gold); }
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.socials { display: flex; gap: 4px; margin-left: -12px; }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ================================================================= shop */

.collection-head { padding: 48px 0 56px; background: linear-gradient(180deg, var(--cream) 65%, var(--white) 100%); text-align: center; }
.collection-head h1 { margin-bottom: 14px; font-size: clamp(2.6rem, 10vw, 4.4rem); }
.collection-head__headline {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-style: italic;
  color: var(--gold);
}
.collection-head__body { max-width: 62ch; margin: 0 auto; color: var(--body); }
.collection-head__signoff {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
@media (min-width: 1024px) { .collection-head { padding: 80px 0 64px; } }

.toolbar {
  position: sticky;
  top: 60px;
  z-index: 60;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .toolbar { top: 112px; margin-bottom: 44px; } }

.toolbar__inner { display: flex; flex-direction: column; }
.tabs { gap: 6px; padding: 10px 0; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: none; }
.tab {
  flex: none;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}
.tab[aria-selected='true'] { background: var(--black); border-color: var(--black); color: #fff; }
@media (hover: hover) { .tab[aria-selected='false']:hover { border-color: var(--black); color: var(--black); } }

.toolbar__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 10px;
}
.count { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.select { position: relative; }
.select select {
  min-height: var(--tap);
  padding: 0 38px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.select svg {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

@media (min-width: 768px) {
  .toolbar__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .tabs { margin: 0; padding-inline: 0; overflow: visible; }
  .toolbar__meta { padding: 10px 0; gap: 20px; }
}

/* ================================================================ modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(22, 22, 22, 0.45); }

.modal__panel {
  position: relative;
  width: 100%;
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--white);
  transform: translateY(40px);
  transition: transform 0.5s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }

.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
.modal__close svg { width: 16px; height: 16px; }

.gallery { position: relative; background: var(--cream); }
.gallery__track { aspect-ratio: 4 / 5; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__dots {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  display: flex;
  justify-content: center;
}
.gallery__dot { display: grid; place-items: center; width: var(--tap); height: var(--tap); }
.gallery__dot span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--black);
  transition: background 0.3s, transform 0.3s;
}
.gallery__dot[aria-current='true'] span { background: var(--black); transform: scale(1.15); }

.modal__body { padding: 28px var(--gutter) 36px; }
.modal__body h2 { margin-bottom: 4px; font-size: clamp(1.9rem, 7vw, 2.6rem); }
.modal__sub { margin-bottom: 14px; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--muted); }
.modal__price { margin-bottom: 18px; font-size: 18px; letter-spacing: 0.03em; }
.modal__desc { margin-bottom: 14px; font-size: 14px; color: var(--body); }
/* One line of brand voice, set apart from the description that precedes it. */
.modal__handoff {
  margin: 0 0 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.modal__vibe {
  margin-bottom: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--gold);
}

/* ------------------------------------------------ complete the look */
.ctl { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.ctl__head {
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctl__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; }
.ctl__item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.ctl__shot { display: block; overflow: hidden; background: var(--cream); }
.ctl__shot img { display: block; width: 100%; height: auto; transition: transform 0.5s var(--ease); }
.ctl__name { font-size: 12px; line-height: 1.3; }
.ctl__price { font-size: 12px; color: var(--muted); }
@media (hover: hover) {
  .ctl__item:hover .ctl__shot img { transform: scale(1.05); }
  .ctl__item:hover .ctl__name { color: var(--gold); }
}
.ctl__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.label.is-error { color: var(--error); }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.size {
  min-width: 52px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  transition: all 0.25s var(--ease);
}
.size[aria-pressed='true'] { background: var(--black); border-color: var(--black); color: #fff; }
.size:disabled {
  border-color: var(--line);
  color: var(--line-strong);
  text-decoration: line-through;
  cursor: not-allowed;
}
.modal__stock { min-height: 20px; margin: -8px 0 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--gold); }
@media (hover: hover) { .size[aria-pressed='false']:hover { border-color: var(--black); } }

.qty {
  display: inline-flex;
  align-items: center;
  height: var(--tap);
  border: 1px solid var(--line-strong);
}
.qty button { width: var(--tap); height: 100%; font-size: 17px; color: var(--muted); }
.qty button:hover { color: var(--black); }
.qty output { min-width: 36px; font-size: 13px; text-align: center; }

.modal__buy { display: flex; gap: 10px; margin: 6px 0 8px; }
.modal__buy .btn { flex: 1; min-height: var(--tap); padding: 0 16px; }

.info { border-top: 1px solid var(--line); }
.info details { border-bottom: 1px solid var(--line); }
.info summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.info summary::-webkit-details-marker { display: none; }
.info summary::after { content: '+'; font-size: 16px; color: var(--muted); transition: transform 0.3s; }
.info details[open] summary::after { transform: rotate(45deg); }
.info ul { margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: var(--body); }
.info li { display: flex; gap: 10px; padding: 3px 0; }
.info li::before { content: '—'; color: var(--gold); }

@media (min-width: 900px) {
  .modal { align-items: center; justify-content: center; padding: 24px; }
  .modal__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(1040px, 100%);
    max-height: min(90vh, 780px);
    transform: translateY(20px) scale(0.985);
  }
  .gallery { position: sticky; top: 0; align-self: start; }
  .modal__body { padding: 52px 48px; }
}

/* ========================================================= cart drawer */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(22, 22, 22, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0.5s;
}
.drawer.is-open { transform: none; visibility: visible; }
@media (min-width: 600px) { .drawer { width: 440px; box-shadow: -20px 0 60px rgba(22, 22, 22, 0.08); } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px 10px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 24px; }
.drawer__head small { margin-left: auto; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.drawer__ship {
  padding: 12px var(--gutter);
  background: var(--cream);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.drawer__ship strong { font-weight: 400; color: var(--gold); }
.drawer__bar { height: 2px; margin-top: 8px; background: var(--line); }
.drawer__bar span { display: block; height: 100%; background: var(--gold); transition: width 0.5s var(--ease); }

.drawer__items {
  flex: 1;
  padding: 0 var(--gutter);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.line {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  animation: slideIn 0.4s var(--ease-out);
}
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } }
.line__img { width: 76px; height: 95px; object-fit: cover; background: var(--cream); }
.line__name { margin-bottom: 2px; font-family: var(--sans); font-size: 13px; font-weight: 400; }
.line__meta { margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.line__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.line__price { font-size: 13px; white-space: nowrap; }
.line__remove {
  min-height: var(--tap);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.line__remove:hover { color: var(--gold); }

.drawer__empty { padding: 72px 12px; text-align: center; color: var(--muted); }
.drawer__empty p { margin-bottom: 8px; font-family: var(--serif); font-size: 24px; color: var(--ink); }
.drawer__empty .btn { margin-top: 24px; }

.drawer__foot {
  padding: 18px var(--gutter);
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.drawer__row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.drawer__row--total { margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; }
.drawer__email {
  width: 100%;
  height: var(--tap);
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
}
.drawer__email:focus { border-color: var(--black); }
.drawer__note { margin-top: 10px; font-size: 11px; text-align: center; color: var(--muted); }

/* =============================================================== toasts */

.toasts {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 200;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 600px) { .toasts { left: auto; right: 24px; bottom: 24px; width: 340px; } }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  background: var(--black);
  color: #fff;
  font-size: 13px;
  pointer-events: auto;
  animation: toastIn 0.45s var(--ease-out);
}
.toast.is-leaving { animation: toastOut 0.35s var(--ease) forwards; }
.toast svg { flex: none; width: 16px; height: 16px; color: var(--gold-soft); }
.toast--error { background: var(--error); }
.toast--error svg { color: #f2caca; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

/* ================================================================ about */

.page-head { padding: 52px 0 64px; background: linear-gradient(180deg, var(--cream) 65%, var(--white) 100%); text-align: center; }
.page-head h1 { margin-bottom: 14px; font-size: clamp(2.6rem, 10vw, 4.4rem); }
.page-head p { max-width: 54ch; margin: 0 auto; color: var(--body); }
@media (min-width: 1024px) { .page-head { padding: 88px 0 72px; } }

.split { display: grid; gap: 36px; align-items: center; }
.split__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.split__media img,
.split__media video { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 20px; font-size: clamp(2rem, 7vw, 3rem); }
.split p { margin-bottom: 16px; color: var(--body); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); }
  .split--flip .split__media { order: 2; }
}

.mission { max-width: 800px; margin: 0 auto; text-align: center; }
.mission__mark { width: auto; height: 56px; margin: 0 auto 26px; }
.mission h2 { margin-bottom: 22px; font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.3; }
.mission h2 em { color: var(--gold); }
.mission p { max-width: 60ch; margin: 0 auto 14px; color: var(--body); }

.materials { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.material { padding: 36px 28px; background: var(--white); }
.material__num { display: block; margin-bottom: 14px; font-size: 10px; letter-spacing: 0.28em; color: var(--gold); }
.material h3 { margin-bottom: 10px; font-size: 26px; }
.material p { font-size: 14px; color: var(--body); }
@media (min-width: 768px) { .materials { grid-template-columns: repeat(3, 1fr); } .material { padding: 48px 36px; } }

/* ============================================================== contact */

.contact { display: grid; gap: 48px; }
@media (min-width: 900px) { .contact { grid-template-columns: 0.85fr 1.15fr; gap: clamp(48px, 7vw, 110px); align-items: start; } }

.contact__details h2 { margin-bottom: 18px; font-size: clamp(2rem, 7vw, 2.8rem); }
.contact__details > p { max-width: 40ch; margin-bottom: 28px; color: var(--body); }
.contact-line { padding: 18px 0; border-top: 1px solid var(--line); }
.contact-line:last-of-type { border-bottom: 1px solid var(--line); }
.contact-line span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-line a { display: inline-flex; align-items: center; min-height: var(--tap); }
.contact-line a:hover { color: var(--gold); }
.contact__socials { display: flex; gap: 10px; margin-top: 26px; }
.contact__socials a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  transition: all 0.3s var(--ease);
}
.contact__socials a:hover { background: var(--black); border-color: var(--black); color: #fff; }
.contact__socials svg { width: 18px; height: 18px; }

.form { padding: 28px 20px; background: var(--cream); }
@media (min-width: 600px) { .form { padding: 44px; } }
.form__row, .form-row { display: grid; gap: 0 18px; }
@media (min-width: 600px) { .form__row, .form-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__note { margin-top: 12px; font-size: 12px; color: var(--muted); }

/* ====================================================== stack builder */

.stack { display: grid; gap: 28px; }
@media (min-width: 900px) { .stack { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; } }

/* Beside the panel on desktop the hand stays in view; on phones it sits above
   the controls in normal flow. */
@media (min-width: 900px) { .stack__hand { position: sticky; top: calc(var(--nav-h) + 16px); } }
.stack__svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--cream);
  border-radius: 2px;
  overflow: hidden;
}
.stack__hint {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

/* The finger being stacked on is marked by a soft halo on the skin. It is drawn
   in its own layer below the rings, so nothing is ever laid over the jewellery.
   An empty finger is left completely unmarked. */
.stack__glow {
  fill: url(#stack-glow);
  opacity: 0;
  pointer-events: none;
  /* Screened rather than painted on, so it reads as light falling on the
     finger instead of a coloured patch sitting over the skin. */
  mix-blend-mode: screen;
  transition: opacity 0.35s var(--ease);
}
.stack__glow.is-hover { opacity: 0.5; }
.stack__glow.is-on { opacity: 1; }

/* tap areas over each finger — invisible; the halo below does the talking */
.stack__target rect { fill: transparent; stroke: none; cursor: pointer; }
/* The <g> is what takes focus, so its own ring has to go — otherwise the browser
   draws a heavy box over the photo. Keyboard focus is shown as a hairline
   around the finger instead, about 1px at the size the photo is drawn. */
.stack__target { outline: none; }
.stack__target:focus-visible { outline: none; }
.stack__target:focus-visible rect { stroke: var(--gold); stroke-width: 0.2; }
.stack__ring { pointer-events: none; filter: drop-shadow(0 0.35px 0.6px rgba(22, 22, 22, 0.35)); }

/* finger chips */
.stack__fingers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.stack__finger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.3s var(--ease);
}
.stack__finger.is-on { background: var(--black); border-color: var(--black); color: #fff; }
@media (hover: hover) { .stack__finger:not(.is-on):hover { border-color: var(--black); color: var(--ink); } }
.stack__dot {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.stack__picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stack__picker-head h2 { font-size: 22px; }

.stack__rings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px) { .stack__rings { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .stack__rings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .stack__rings { grid-template-columns: repeat(3, 1fr); } }

.stack__pick {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  background: var(--white);
  text-align: center;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s;
}
.stack__pick img { width: 100%; height: auto; margin-bottom: 4px; }
.stack__pick-name { font-size: 12px; letter-spacing: 0.06em; }
.stack__pick-price { font-size: 12px; color: var(--muted); }
.stack__pick:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) { .stack__pick:not(:disabled):hover { border-color: var(--gold); transform: translateY(-2px); } }

.stack__summary { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.stack__list { display: grid; gap: 10px; margin-bottom: 18px; }
.stack__line { display: grid; grid-template-columns: 54px 1fr auto auto; gap: 12px; align-items: center; }
.stack__line img { background: var(--cream); }
.stack__line strong { display: block; font-weight: 400; font-size: 13px; }
.stack__line em { font-style: normal; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.stack__line-price { font-size: 13px; }
.stack__remove {
  width: var(--tap);
  height: var(--tap);
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: color 0.3s;
}
.stack__remove:hover { color: var(--error); }
.stack__empty { font-size: 13px; color: var(--muted); }
.stack__actions { display: grid; gap: 10px; }

/* ================================================== order confirmation */

.confirm { max-width: 640px; margin: 0 auto; text-align: center; }
.confirm__mark { width: auto; height: 52px; margin: 0 auto 24px; }
.confirm h1 { margin-bottom: 12px; font-size: clamp(2.2rem, 8vw, 3.2rem); }
.confirm__num { margin-bottom: 36px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.confirm__items { margin-bottom: 26px; border-top: 1px solid var(--line); text-align: left; }
.confirm__item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.confirm__item img { width: 60px; height: 75px; object-fit: cover; background: var(--cream); }
.confirm__totals { margin-bottom: 26px; text-align: left; }

.notfound { display: grid; place-items: center; min-height: 60vh; padding: 72px var(--gutter); text-align: center; }
.notfound h1 { margin-bottom: 8px; font-size: clamp(3rem, 14vw, 7rem); }

/* =========================================================== reveal */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* =============================================================== admin */

.admin { min-height: 100vh; padding: 36px 0 80px; background: var(--cream); }
.admin__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.admin__head h1 { font-size: 34px; }
.admin-login { max-width: 400px; margin: 12vh auto; padding: 40px 28px; background: #fff; }
.admin-login h1 { margin-bottom: 8px; font-size: 30px; }
.admin-login p { margin: 0 0 24px; font-size: 13px; color: var(--muted); }
.stats { display: grid; gap: 1px; margin-bottom: 30px; background: var(--line); }
@media (min-width: 600px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 24px; background: #fff; }
.stat span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.stat strong { display: block; margin-top: 6px; font-family: var(--serif); font-size: 36px; font-weight: 300; }
.admin .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; overflow: visible; }
.admin .tab { background: #fff; }
.admin .tab.is-active { background: var(--black); border-color: var(--black); color: #fff; }
.panel { display: none; padding: 24px; background: #fff; }
.panel.is-active { display: block; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
td img { width: 44px; height: 55px; object-fit: cover; }
.pill { display: inline-block; padding: 5px 10px; background: var(--cream-deep); color: var(--muted); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.pill--paid { background: #e8f0e6; color: #3d6b34; }
.row-actions { display: flex; gap: 8px; }
.mini {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mini:hover { border-color: var(--black); }
.mini--danger:hover { background: var(--error); border-color: var(--error); color: #fff; }

/* ===================================================== page transitions */

/* Supporting browsers cross-fade between pages while the header and
   announcement bar hold still; others simply navigate as before. */
@view-transition { navigation: auto; }
.announce { view-transition-name: announce; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 280ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ====================================================== reduced motion */

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