/* ==========================================================================
   ROSY — Moissanite Fine Jewellery
   Mobile-first stylesheet, BEM methodology.
   Design language: the Adam Lippes system — bone paper, onyx ink,
   one typeface at one weight, hairline structure, zero chromatic chrome.
   Photography (and its placeholders) provides every drop of colour.

   Table of contents
   01. Design tokens
   02. Reset & base
   03. Utilities
   04. Buttons
   05. Announcement bar
   06. Header
   07. Navigation drawer (mobile, 50% width)
   08. Page overlay
   09. Cart drawer & shipping progress
   10. Hero (full-bleed editorial)
   11. Section headings
   12. Values strip
   13. The shelf (product grid & cards)
   14. Editorial band
   15. Newsletter bar
   16. Footer
   17. Product page (gallery, options, accordion)
   18. Story section
   19. Cookie notice
   20. Motion preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Canvas & ink — the whole palette. Chrome is 0% chromatic. */
  --c-bone:     #fefcf8;
  --c-press:    #ffffff;
  --c-onyx:     #000000;
  --c-carbon:   #121212;
  --c-graphite: #403f3e;
  --c-stone:    #4c4c4a;
  --c-ash:      #767371; /* darkened from #b2b0ae — the original failed WCAG AA (2.1:1) on placeholder text and the breadcrumb separator; this passes at 4.6:1 */

  /* Hairlines are the only structure. */
  --line:      1px solid var(--c-onyx);
  --line-soft: 1px solid rgba(0, 0, 0, 0.16);

  /* One face, one weight. */
  --font: Optima, "Avenir Next", Candara, "Gill Sans", "Segoe UI", sans-serif;

  /* Type scale — Major Second, nothing above 24px. */
  --t-caption: 10px;
  --t-label:   11px;
  --t-button:  12px;
  --t-body:    14px;
  --t-link:    16px;
  --t-heading: 24px;
  --track-body: 0.031em;
  --track-caps: 0.064em;

  /* Structure */
  --max-page: 1440px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --gap-section: clamp(48px, 7vw, 72px);
  --gap-card: 16px;
  --gap-element: 10px;
  --header-height: 60px;

  /* Elevation — nav only. */
  --shadow-nav: 0 4px 5px rgba(0, 0, 0, 0.05);

  /* Motion — quiet and functional. */
  --ease: cubic-bezier(0.25, 0.6, 0.25, 1);
  --dur: 0.45s;
  --dur-fast: 0.2s;

  /* Layers */
  --z-header: 100;
  --z-overlay: 120;
  --z-drawer: 140;
}

/* --------------------------------------------------------------------------
   02. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--c-onyx);
  background-color: var(--c-bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

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

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

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--track-body);
  text-wrap: balance;
}

h1,
h2 {
  font-size: var(--t-heading);
}

strong {
  font-weight: 400;
  border-bottom: 1px solid currentColor;
}

em {
  font-style: normal;
}

:focus-visible {
  outline: 1px solid var(--c-onyx);
  outline-offset: 3px;
}

::selection {
  background: var(--c-onyx);
  color: var(--c-bone);
}

/* --------------------------------------------------------------------------
   03. Utilities
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--max-page));
  margin-inline: auto;
}

.label {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--c-stone);
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--c-onyx);
  color: var(--c-press);
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   04. Buttons — primary is a solid onyx fill; ghost is the secondary voice
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--c-onyx);
  border: 1px solid var(--c-onyx);
  color: var(--c-press);
  font-size: var(--t-button);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  text-align: center;
  border-radius: 0;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.btn:hover {
  background: var(--c-press);
  color: var(--c-onyx);
}

.btn--ghost {
  background: transparent;
  color: var(--c-onyx);
}

.btn--ghost:hover {
  background: var(--c-onyx);
  color: var(--c-press);
}

/* For placement on dark full-bleed imagery. */
.btn--light {
  background: var(--c-press);
  border-color: var(--c-press);
  color: var(--c-onyx);
}

.btn--light:hover {
  background: transparent;
  color: var(--c-press);
}

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

.btn.is-added {
  background: var(--c-graphite);
  border-color: var(--c-graphite);
  color: var(--c-press);
}

/* Quiet inline action — lowercase text control. */
.text-btn {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--c-graphite);
  border-bottom: 1px solid var(--c-ash);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.text-btn:hover {
  color: var(--c-onyx);
  border-bottom-color: var(--c-onyx);
}

/* --------------------------------------------------------------------------
   05. Announcement bar
   -------------------------------------------------------------------------- */
.announcement {
  background: var(--c-bone);
  border-bottom: var(--line-soft);
  text-align: center;
  padding: 8px var(--gutter);
}

.announcement__text {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--c-onyx);
}

/* --------------------------------------------------------------------------
   06. Header — sticky, hairline bottom, centred wordmark
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(254, 252, 248, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--line);
  transition: box-shadow var(--dur-fast) var(--ease);
}

.header.is-scrolled {
  box-shadow: var(--shadow-nav);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
}

.header__zone {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header__zone--right {
  justify-content: flex-end;
}

.header__logo {
  font-size: 17px;
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* optical centring: cancels trailing letter-space */
  text-transform: uppercase;
}

.header__nav {
  display: none;
}

.header__link {
  position: relative;
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  padding: 4px 0;
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-onyx);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}

.header__link:hover::after,
.header__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hamburger — three lines */
.header__menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 10px;
}

.header__menu-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--c-onyx);
}

.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.header__cart-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Badges are the one rounded element in the system. */
.header__cart-count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-onyx);
  color: var(--c-press);
  font-size: 9px;
  letter-spacing: 0;
  border-radius: 40px;
}

.header__cart-count[hidden] {
  display: none;
}

.header__wishlist {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--c-onyx);
}

.header__wishlist-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.header__wishlist-count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-onyx);
  color: var(--c-press);
  font-size: 9px;
  letter-spacing: 0;
  border-radius: 40px;
}

.header__wishlist-count[hidden] {
  display: none;
}

/* Filled vs. outline heart — the one place a shape (not colour) carries state. */
[data-wishlist-toggle][aria-pressed="true"] .product-card__wishlist-icon,
[data-wishlist-toggle][aria-pressed="true"] .pdp__wishlist-icon {
  fill: var(--c-onyx);
}

@media (min-width: 64em) {
  .header__menu-toggle {
    display: none;
  }

  .header__nav {
    display: flex;
    gap: 28px;
  }
}

/* --------------------------------------------------------------------------
   07. Navigation drawer — covers exactly 50% of the screen
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-drawer);
  width: 50%;
  display: flex;
  flex-direction: column;
  background: var(--c-bone);
  border-right: var(--line);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease);
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  flex-shrink: 0;
  padding-inline: clamp(16px, 5vw, 32px);
  border-bottom: var(--line);
}

.nav-drawer__brand {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.nav-drawer__close,
.cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
}

.nav-drawer__close svg,
.cart-drawer__close svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 6vh, 40px) clamp(16px, 5vw, 32px);
  overflow-y: auto;
}

.nav-drawer__link {
  font-size: var(--t-button);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease);
}

.nav-drawer__link:hover {
  border-bottom-color: var(--c-onyx);
}

.nav-drawer__foot {
  margin-top: auto;
  padding: 20px clamp(16px, 5vw, 32px) 24px;
  border-top: var(--line-soft);
}

.nav-drawer__contact {
  font-size: var(--t-body);
  border-bottom: 1px solid var(--c-ash);
}

.nav-drawer__contact:hover {
  border-bottom-color: var(--c-onyx);
}

.nav-drawer__note {
  margin-top: 8px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

@media (min-width: 64em) {
  .nav-drawer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   08. Page overlay (shared by both drawers)
   -------------------------------------------------------------------------- */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.page-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   09. Cart drawer & shipping progress
   -------------------------------------------------------------------------- */
.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--c-bone);
  border-left: var(--line);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur) var(--ease);
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  flex-shrink: 0;
  padding-inline: 24px;
  border-bottom: var(--line);
}

.cart-drawer__title {
  font-size: var(--t-button);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.cart-drawer__count {
  color: var(--c-stone);
}

/* Shipping progress */
.cart-drawer__shipping {
  flex-shrink: 0;
  padding: 16px 24px 18px;
  border-bottom: var(--line-soft);
  background: var(--c-press);
}

.cart-drawer__shipping-message {
  font-size: var(--t-body);
  line-height: 1.45;
  text-align: center;
  color: var(--c-graphite);
  min-height: 1.45em;
}

.progress {
  --progress: 0%;
  position: relative;
  margin-top: 12px;
  height: 2px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--c-onyx);
  transition: width 0.6s var(--ease);
}

/* Cart body */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px;
}

.cart-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: var(--line-soft);
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-item__media {
  flex-shrink: 0;
  width: 76px;
  aspect-ratio: 4 / 5;
  background: var(--c-press);
  overflow: hidden;
}

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

.cart-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cart-item__name {
  display: block;
  font-size: var(--t-body);
  line-height: 1.3;
}

.cart-item__name:hover {
  border-bottom: 1px solid var(--c-onyx);
}

.cart-item__variant {
  margin-top: 3px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.cart-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.cart-item__price {
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  align-self: flex-start;
  margin-top: 8px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
  border-bottom: 1px solid var(--c-ash);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.cart-item__remove:hover {
  color: var(--c-onyx);
  border-bottom-color: var(--c-onyx);
}

/* Quantity stepper */
.qty {
  display: inline-flex;
  align-items: center;
  border: var(--line-soft);
}

.qty__btn {
  width: 28px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-body);
  color: var(--c-graphite);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.qty__btn:hover:not(:disabled) {
  color: var(--c-onyx);
  background: var(--c-press);
}

.qty__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.qty__value {
  min-width: 2ch;
  text-align: center;
  font-size: var(--t-button);
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 56px 20px;
}

.cart-drawer__empty[hidden] {
  display: none;
}

.cart-drawer__empty-icon {
  width: 36px;
  height: 36px;
  stroke: var(--c-ash);
}

.cart-drawer__empty-text {
  font-size: var(--t-body);
  color: var(--c-graphite);
}

/* Cart footer */
.cart-drawer__foot {
  flex-shrink: 0;
  padding: 16px 24px 22px;
  border-top: var(--line);
  background: var(--c-press);
}

.cart-drawer__foot[hidden] {
  display: none;
}

.cart-drawer__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
}

.cart-drawer__summary-label {
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.cart-drawer__summary-value {
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.cart-drawer__summary-row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: var(--line-soft);
}

.cart-drawer__summary-row--total .cart-drawer__summary-label {
  color: var(--c-onyx);
}

.cart-drawer__summary-row--total .cart-drawer__summary-value {
  font-size: var(--t-link);
}

.cart-drawer__agree {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-graphite);
  cursor: pointer;
}

.cart-drawer__agree input {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--c-onyx);
}

.cart-drawer__agree a {
  color: var(--c-onyx);
  border-bottom: 1px solid var(--c-ash);
}

.cart-drawer__agree a:hover {
  border-bottom-color: var(--c-onyx);
}

.cart-drawer__checkout {
  margin-top: 12px;
}

.cart-drawer__checkout:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-drawer__checkout:disabled:hover {
  background: var(--c-onyx);
  color: var(--c-press);
}

.cart-drawer__demo-note {
  margin-top: 10px;
  font-size: var(--t-label);
  text-align: center;
  color: var(--c-stone);
}

.cart-drawer__demo-note[hidden] {
  display: none;
}

.cart-drawer__reassurance {
  margin-top: 12px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-stone);
}

/* --------------------------------------------------------------------------
   10. Hero — full-bleed editorial image, text in the left third
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: #180a0d; /* near-black burgundy — matches the campaign photo's edges so contain-fit never shows a gap */
}

.hero__media {
  width: 100%;
  height: clamp(420px, 70vh, 640px);
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 28px;
  /* Mobile: text sits at the foot of the frame over a quiet scrim. */
  background: linear-gradient(180deg, rgba(18, 4, 9, 0) 38%, rgba(18, 4, 9, 0.55) 100%);
}

.hero__title {
  color: var(--c-press);
  max-width: 16ch;
}

.hero__sub {
  color: rgba(254, 252, 248, 0.82);
  font-size: var(--t-body);
  max-width: 38ch;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.hero__link {
  color: rgba(254, 252, 248, 0.82);
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(254, 252, 248, 0.4);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.hero__link:hover {
  color: var(--c-press);
  border-bottom-color: var(--c-press);
}

@media (min-width: 56em) {
  .hero__media {
    /* A fixed short height on a full-width band crops the photo's top/bottom
       to fill a shape far wider than its own. Sizing the box to the photo's
       own ~16:9 ratio instead means cover barely has to crop anything —
       no letterbox bars, no lost subject. */
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    object-fit: cover;
  }

  .hero__overlay {
    max-width: none;
    justify-content: center;
    padding-bottom: 0;
    background: none; /* desktop: the empty left velvet is the scrim */
    padding-left: max(var(--gutter), calc((100% - var(--max-page)) / 2 + var(--gutter)));
    padding-right: 50%;
  }
}

/* --------------------------------------------------------------------------
   11. Section headings
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.section-head__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   12. Values strip
   -------------------------------------------------------------------------- */
.values {
  border-bottom: var(--line-soft);
  background: var(--c-bone);
}

.values__list {
  display: flex;
  flex-direction: column;
}

.values__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--gutter);
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
  text-align: center;
}

.values__item + .values__item {
  border-top: var(--line-soft);
}

@media (min-width: 48em) {
  .values__list {
    flex-direction: row;
  }

  .values__item {
    flex: 1;
    padding-block: 14px;
  }

  .values__item + .values__item {
    border-top: 0;
    border-left: var(--line-soft);
  }
}

/* --------------------------------------------------------------------------
   13. The shelf — dense grid, hairline structure, quiet cards
   -------------------------------------------------------------------------- */
.collection {
  padding-block: var(--gap-section);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-element);
}

.product-card {
  background: var(--c-bone);
  padding: var(--gap-card);
  display: flex;
  flex-direction: column;
}

.product-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--c-press);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.product-card:hover .product-card__media img {
  transform: scale(1.04); /* the single permitted movement */
}

.product-card__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
}

.product-card__name {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: var(--track-body);
  line-height: 1.3;
}

.product-card__name a:hover {
  border-bottom: 1px solid var(--c-onyx);
}

.product-card__price {
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.product-card__meta {
  margin-top: 4px;
  font-size: var(--t-caption);
  color: var(--c-stone);
  letter-spacing: var(--track-body);
}

.product-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.product-card__add {
  align-self: flex-start;
  position: relative;
}

.product-card__wishlist {
  display: inline-flex;
  position: relative;
  color: var(--c-stone);
}

.product-card__wishlist-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* The heart is drawn at 16px and the "add to cart" rule is ~20px tall — both
   below WCAG 2.2's 24×24 minimum target size, and awkward to hit with a thumb
   sitting right next to each other. Grow the touch area with a transparent
   overlay instead of the element, so the type and the icon keep the size the
   design calls for. */
.product-card__add::after,
.product-card__wishlist::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

.product-card__picker {
  margin-top: 10px;
}

.product-card__picker[hidden] {
  display: none;
}

.product-card__picker-label {
  display: block;
  font-size: var(--t-caption);
  color: var(--c-stone);
  letter-spacing: var(--track-body);
  margin-bottom: 6px;
}

.pdp__wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--c-stone);
}

.pdp__wishlist-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}

@media (min-width: 64em) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Scales to the system's five columns as the catalogue grows. */
  .product-grid--five {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --------------------------------------------------------------------------
   14. Editorial band — the photograph is the section
   -------------------------------------------------------------------------- */
.editorial {
  position: relative;
  background: #180a0d;
}

.editorial__media {
  width: 100%;
  height: clamp(380px, 58vh, 560px);
  object-fit: cover;
}

.editorial__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, rgba(18, 4, 9, 0) 38%, rgba(18, 4, 9, 0.55) 100%);
}

.editorial__title {
  color: var(--c-press);
  max-width: 18ch;
}

.editorial__sub {
  color: rgba(254, 252, 248, 0.82);
  font-size: var(--t-body);
  max-width: 40ch;
}

.editorial__actions {
  margin-top: 10px;
}

@media (min-width: 56em) {
  .editorial__media {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    object-fit: cover;
  }

  .editorial__overlay {
    justify-content: center;
    padding-bottom: 0;
    background: none;
    padding-left: max(var(--gutter), calc((100% - var(--max-page)) / 2 + var(--gutter)));
    padding-right: 52%;
  }
}

/* --------------------------------------------------------------------------
   15. Newsletter bar
   -------------------------------------------------------------------------- */
.newsletter {
  border-top: var(--line);
  background: var(--c-bone);
  padding-block: 28px;
}

.newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newsletter__copy {
  font-size: var(--t-body);
  color: var(--c-graphite);
  max-width: 52ch;
}

.newsletter__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.newsletter__input {
  flex: 1;
  min-width: 220px;
  padding: 10px 2px;
  background: transparent;
  border: 0;
  border-bottom: var(--line-soft);
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease);
}

.newsletter__input::placeholder {
  color: var(--c-ash);
}

.newsletter__input:focus {
  border-bottom-color: var(--c-onyx);
}

.newsletter__thanks {
  font-size: var(--t-body);
  color: var(--c-graphite);
}

.newsletter__consent {
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-ash);
}

.newsletter__thanks[hidden],
.newsletter__consent[hidden],
.newsletter__form[hidden] {
  display: none;
}

@media (min-width: 56em) {
  .newsletter__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .newsletter__form {
    flex: 0 1 460px;
  }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: var(--line);
  background: var(--c-bone);
}

.footer__grid {
  display: grid;
  gap: 32px;
  padding-block: 44px;
}

.footer__heading {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 12px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__link {
  font-size: 13px;
  color: var(--c-graphite);
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.footer__link:hover {
  color: var(--c-onyx);
  border-bottom-color: var(--c-onyx);
}

.footer__about p {
  font-size: var(--t-body);
  color: var(--c-graphite);
  max-width: 34ch;
  margin-top: 10px;
}

.footer__wordmark {
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: 18px;
  border-top: var(--line-soft);
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.footer__socials {
  display: flex;
  gap: 20px;
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   17. Product page
   -------------------------------------------------------------------------- */
.pdp {
  padding-block: clamp(20px, 4vw, 40px) var(--gap-section);
}

/* Order-confirmation page (success.html) — reuses pdp__* type styles. */
.confirmation {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--gap-section);
}

.confirmation__ref {
  margin-top: 10px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.confirmation__action {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* Policy / legal pages (privacy.html) — reuses pdp__* type styles at a
   comfortable prose width instead of the two-column product layout. */
.legal {
  max-width: 68ch;
  padding-block: var(--gap-section);
}

.legal .pdp__title {
  margin-top: 10px;
}

.legal .pdp__lede {
  margin-bottom: 8px;
}

.legal code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--c-press);
  padding: 1px 5px;
  border: var(--line-soft);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 4vw, 36px);
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.breadcrumb a:hover {
  border-bottom: 1px solid var(--c-onyx);
  color: var(--c-onyx);
}

.breadcrumb__sep {
  color: var(--c-ash);
}

.pdp__layout {
  display: grid;
  gap: 32px;
}

/* Gallery */
.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-press);
  overflow: hidden;
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.gallery__stage.is-fading .gallery__image {
  opacity: 0;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-element);
  margin-top: var(--gap-element);
}

/* Four is the usual count, but the bracelet only has three views — without
   this it sat as three-quarters of a row with a gap hanging off the end. */
.gallery__thumbs:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

.gallery__thumb {
  aspect-ratio: 4 / 5;
  background: var(--c-press);
  overflow: hidden;
  border: 1px solid transparent;
  padding: 0;
  opacity: 0.55;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

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

.gallery__thumb:hover {
  opacity: 1;
}

.gallery__thumb.is-active {
  border-color: var(--c-onyx);
  opacity: 1;
}

/* Product info column */
.pdp__info {
  max-width: 460px;
  width: 100%;
}

.pdp__collection {
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.pdp__title {
  margin-top: 10px;
}

.pdp__price {
  margin-top: 10px;
  font-size: var(--t-link);
  font-variant-numeric: tabular-nums;
}

.pdp__lede {
  margin-top: 14px;
  font-size: var(--t-link);
  line-height: 1.55;
  color: var(--c-graphite);
}

.pdp__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

.pdp__form {
  margin-top: 26px;
}

/* Size option swatches */
.option__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.option__label {
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.option__guide {
  font-size: var(--t-label);
  color: var(--c-stone);
  border-bottom: 1px solid var(--c-ash);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.option__guide:hover {
  color: var(--c-onyx);
  border-bottom-color: var(--c-onyx);
}

.option__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option__error {
  margin-top: 8px;
  font-size: var(--t-label);
  color: var(--c-onyx);
}

.option__error[hidden] {
  display: none;
}

.swatch {
  position: relative;
}

.swatch__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: var(--line-soft);
  font-size: var(--t-button);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.swatch__label:hover {
  border-color: var(--c-onyx);
}

.swatch__input:checked + .swatch__label {
  border-color: var(--c-onyx);
  background: var(--c-onyx);
  color: var(--c-press);
}

.swatch__input:focus-visible + .swatch__label {
  outline: 1px solid var(--c-onyx);
  outline-offset: 3px;
}

.pdp__add {
  margin-top: 26px;
}

.pdp__assurance {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
  padding: 16px 0;
  border-block: var(--line-soft);
}

.pdp__assurance-item {
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

/* Accordion */
.accordion {
  margin-top: 6px;
}

.accordion__item {
  /* The header is sticky, so a deep link to an accordion (footer "size guide",
     "jewellery care") would otherwise land with its first line tucked behind
     it. Keep the panel clear of the header when openLinkedAccordion() scrolls. */
  scroll-margin-top: 96px;
  border-bottom: var(--line-soft);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-size: var(--t-label);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.accordion__icon {
  position: relative;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}

.accordion__icon::before {
  width: 100%;
  height: 1px;
}

.accordion__icon::after {
  width: 1px;
  height: 100%;
}

.accordion__item[open] .accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__content {
  padding-bottom: 18px;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-stone);
}

.accordion__content p + p {
  margin-top: 10px;
}

.size-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.size-table th,
.size-table td {
  padding: 8px 4px;
  border-bottom: var(--line-soft);
  text-align: left;
  font-weight: 400;
}

.size-table th {
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-stone);
}

@media (min-width: 64em) {
  .pdp__layout {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

  .pdp__info {
    position: sticky;
    top: calc(var(--header-height) + 28px);
  }
}

/* --------------------------------------------------------------------------
   18. Story — full-bleed frame, then quiet columns on bone
   -------------------------------------------------------------------------- */
.story {
  background: #180a0d;
}

.story__media {
  width: 100%;
  height: clamp(320px, 52vh, 520px);
  object-fit: cover;
}

@media (min-width: 56em) {
  .story__media {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 74vh;
    object-fit: cover;
  }
}

.story__body {
  padding-block: var(--gap-section);
}

.story__body .label {
  color: rgba(254, 252, 248, 0.82);
}

.story__title {
  margin-top: 8px;
  color: var(--c-press);
}

.story__grid {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}

.story__heading {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(254, 252, 248, 0.82);
  margin-bottom: 10px;
}

.story__text {
  font-size: var(--t-body);
  line-height: 1.7;
  color: rgba(254, 252, 248, 0.82);
}

.story__signature {
  max-width: 60ch;
  margin-top: 40px;
  padding-top: 24px;
  border-top: var(--line-soft);
  border-top-color: rgba(254, 252, 248, 0.25);
}

.story__signature p {
  font-size: var(--t-link);
  line-height: 1.6;
  color: rgba(254, 252, 248, 0.82);
}

.story__signoff {
  display: block;
  margin-top: 14px;
  font-size: var(--t-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(254, 252, 248, 0.82);
}

@media (min-width: 64em) {
  .story__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* Related products */
.related {
  padding-block: var(--gap-section);
  border-top: var(--line-soft);
}

/* --------------------------------------------------------------------------
   18b. Buying aids — sticky buy bar, cart suggestion, size hint, terms prompt
   -------------------------------------------------------------------------- */
/* Product pages below the desktop layout: price + buy button pinned to the
   bottom while the page's own button is out of view (initBuyBar). */
.buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 105; /* above the header (100), below the cookie notice (110) and drawers */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--c-bone);
  border-top: var(--line);
}

.buybar[hidden] {
  display: none;
}

.buybar__text {
  min-width: 0;
}

.buybar__name {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--c-stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buybar__price {
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.buybar__btn {
  flex-shrink: 0;
  min-height: 44px;
}

body.has-buybar {
  padding-bottom: 76px;
}

@media (min-width: 64em) {
  .buybar {
    display: none;
  }

  body.has-buybar {
    padding-bottom: 0;
  }
}

/* Cart drawer: one "complete the set" suggestion under the items. */
.cart-suggest {
  margin-top: 8px;
  padding-top: 18px;
  border-top: var(--line);
}

.cart-suggest[hidden] {
  display: none;
}

.cart-suggest__eyebrow {
  margin-bottom: 12px;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--c-stone);
}

.cart-suggest__row {
  display: flex;
  gap: 14px;
}

.cart-suggest__media {
  flex-shrink: 0;
  width: 76px;
  aspect-ratio: 4 / 5;
  background: var(--c-press);
  overflow: hidden;
}

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

.cart-suggest__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.cart-suggest__name {
  font-size: var(--t-body);
}

.cart-suggest__name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-suggest__price {
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--c-graphite);
}

.cart-suggest__note {
  font-size: var(--t-label);
  color: var(--c-stone);
}

.cart-suggest__add {
  position: relative;
  margin-top: 8px;
}

.cart-suggest__add::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}

.cart-suggest .product-card__picker {
  margin-top: 14px;
}

/* Ring PDP: eternity bands can't be resized, said at the moment of choosing. */
.option__hint {
  margin-top: 10px;
  font-size: var(--t-label);
  color: var(--c-stone);
}

/* Checkout pressed without the Terms box ticked (flagAgreement). */
.cart-drawer__agree.is-invalid {
  outline: 1px solid var(--c-onyx);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   19. Cookie notice — bottom bar, dismissed choice remembered in localStorage
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 110; /* above page content, below the drawers (--z-overlay: 120) */
  background: var(--c-bone);
  border-top: var(--line);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px var(--gutter);
}

.cookie-banner__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-graphite);
  max-width: 62ch;
}

.cookie-banner__text a {
  color: var(--c-onyx);
  border-bottom: 1px solid var(--c-ash);
}

.cookie-banner__text a:hover {
  border-bottom-color: var(--c-onyx);
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 48em) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-page);
    margin-inline: auto;
  }

  .cookie-banner__actions {
    flex-shrink: 0;
  }
}

/* --------------------------------------------------------------------------
   20. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}