/* Maison Suppiah Gems — design system.
   Direction: flavienmonnoyeur.com (see ../../design-reference-flavienmonnoyeur.md).
   A colourless interface — ink, paper, white — so the stones carry all the colour. */

:root {
  --ink: #1C1C1C;
  --paper: #EFEFEF;
  --white: #FFFFFF;
  --night: #111111;
  --line: #CFCFCF;
  --line-white: #DDDDDD;
  --line-dark: #3E3E3E;
  --muted: rgb(28 28 28 / .65);
  --muted-dark: rgb(255 255 255 / .65);
  --overlay: rgb(0 0 0 / .4);
  --error: #B0442E;

  --display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track: .12em;
  --track-btn: .18em;
  --h1: calc(clamp(1.375rem, 1.1463rem + .9756vw, 2rem) * .9);
  --h2: calc(clamp(1.25rem, 1.0671rem + .7805vw, 1.75rem) * .9);
  --h3: calc(clamp(1.125rem, 1.0335rem + .3902vw, 1.375rem) * .9);
  --h4: calc(clamp(1rem, .9543rem + .1951vw, 1.125rem) * .9);
  --label: .75rem;
  --small: .8125rem;
  --base: .9375rem;

  --gutter: 20px;
  --section: 48px;
  --stack: 32px;
  --header-h: 64px;

  --ease: cubic-bezier(.785, .135, .15, .86);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --autoplay: 7s;

  /* Studio sweep behind every stone photo (photos are multiplied onto it). */
  --studio: radial-gradient(130% 100% at 50% 34%, #FCFCFC 0%, #EEEEEE 46%, #DADADA 82%, #CDCDCD 100%);
  --studio-hero: radial-gradient(72% 88% at 50% 40%, #FDFDFD 0%, #E8E8E8 34%, #C6C6C6 68%, #8E8E8E 100%);
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; --section: 72px; --header-h: 88px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--base)/1.65 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure, table { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 300; background: var(--white); color: var(--ink); padding: 10px 16px; }
.skip:focus { left: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--muted); }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; stroke-width: 1.4; }
.flip { display: grid; transform: scaleX(-1); }

/* ---------- type ---------- */
.eyebrow { font: 400 var(--label)/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.eyebrow--center { text-align: center; }
.page-title, .section__title, .band-title, .product__title, .drawer__title, .enquiry__title, .story__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); line-height: 1.4;
}
.page-title { font-size: var(--h1); }
.section__title { font-size: var(--h2); text-align: center; margin-bottom: var(--stack); }
.band-title { font-size: var(--h1); margin-bottom: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--small)/1.6 var(--text); letter-spacing: var(--track-btn); text-transform: uppercase; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- buttons ---------- */
.button {
  --bg: var(--ink); --fg: var(--white); --bd: var(--ink); --bg-h: var(--white); --fg-h: var(--ink); --bd-h: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 30px;
  font: 400 var(--small)/1.6 var(--text); letter-spacing: var(--track-btn); text-transform: uppercase; text-align: center;
  color: var(--fg); border: 1px solid var(--bd); border-radius: 0; cursor: pointer;
  background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(var(--bg-h), var(--bg-h));
  background-size: 101% 101%, 0 101%; background-position: 100% 50%, 0 50%; background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.button:hover { background-size: 0 101%, 101% 101%; color: var(--fg-h); border-color: var(--bd-h); }
.button:disabled { opacity: .55; cursor: progress; }
.button--light { --bg: var(--white); --fg: var(--ink); --bd: var(--white); --bg-h: var(--ink); --fg-h: var(--white); --bd-h: var(--white); }
.button--outline { --bg: transparent; --fg: var(--ink); --bd: var(--line); --bg-h: var(--ink); --fg-h: var(--white); --bd-h: var(--ink); }
.button--block { width: 100%; }
.circle-button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--ink); box-shadow: 0 2px 10px rgb(0 0 0 / .14); }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; color: inherit; }
.icon-button__count { position: absolute; top: -1px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--white); color: var(--ink); font: 700 10px/17px var(--text); text-align: center; }

/* ---------- announcement + header ---------- */
.announce { background: var(--ink); color: var(--white); text-align: center; padding: 11px var(--gutter); font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.announce__sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; margin: 0 16px; vertical-align: middle; }
@media (max-width: 699px) { .announce__more { display: none; } }

.header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--white); border-bottom: 1px solid var(--line-dark); transition: transform .45s var(--ease-out); }
.header.is-hidden { transform: translateY(-101%); }
.header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 44px; height: var(--header-h); padding: 0 var(--gutter); }
.header__burger { display: none; }
.logo { display: inline-flex; align-items: flex-end; gap: 10px; color: inherit; }
.logo__mark { height: 30px; width: auto; aspect-ratio: 564.9 / 97.1; }
.logo__gems { font: 500 9.5px/1 var(--display); letter-spacing: .42em; text-transform: uppercase; padding-bottom: 6px; }
.nav { display: flex; align-items: stretch; gap: 34px; height: 100%; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link { position: relative; display: flex; align-items: center; height: 100%; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--white); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 14px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.dropdown { position: absolute; top: 100%; left: -28px; min-width: 230px; padding: 18px 0; background: var(--ink); border-top: 1px solid var(--white); box-shadow: 2px 2px 6px rgb(255 255 255 / .05); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s; }
.dropdown a { display: block; padding: 6px 28px; font: 400 14px/1.65 var(--text); color: var(--white); opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), color .2s; }
.dropdown a:hover { color: var(--muted-dark); }
.nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__item.is-open .dropdown a { opacity: 1; transform: none; }
.nav__item.is-open .dropdown a:nth-child(2) { transition-delay: .03s; }
.nav__item.is-open .dropdown a:nth-child(3) { transition-delay: .06s; }
.nav__item.is-open .dropdown a:nth-child(4) { transition-delay: .09s; }
.nav__item.is-open .dropdown a:nth-child(5) { transition-delay: .12s; }
.nav__item.is-open .dropdown a:nth-child(n+6) { transition-delay: .15s; }
.header__icons { display: flex; align-items: center; gap: 16px; justify-self: end; }
.search-panel { display: flex; align-items: center; gap: 16px; padding: 12px var(--gutter); border-top: 1px solid var(--line-dark); background: var(--ink); }
.search-panel input { flex: 1; min-width: 0; padding: 10px 0; background: transparent; border: 0; outline: none; color: var(--white); font: 400 13px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.search-panel input::placeholder { color: var(--muted-dark); }
.search-panel input::-webkit-search-cancel-button { display: none; }
@media (max-width: 999px) {
  /* Equal side columns keep the logo truly centred between menu and icons. */
  .header__inner { grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr); column-gap: 12px; }
  .header__burger { display: inline-grid; justify-self: start; }
  .nav { display: none; }
  .header .logo { flex-direction: column; align-items: flex-end; gap: 3px; }
  .header .logo__mark { height: 23px; }
  .header .logo__gems { font-size: 8px; letter-spacing: .5em; margin-right: -.5em; padding-bottom: 0; }
}

/* ---------- drawers, overlay, toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 80; background: var(--overlay); opacity: 0; transition: opacity .35s var(--ease-out); }
.overlay.is-open { opacity: 1; }
.drawer { position: fixed; top: 0; bottom: 0; z-index: 90; width: min(440px, 92vw); display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.drawer--right { right: 0; background: var(--paper); color: var(--ink); transform: translateX(100%); }
.drawer--left { left: 0; background: var(--ink); color: var(--white); transform: translateX(-100%); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 24px 0 28px; border-bottom: 1px solid var(--line); }
.drawer--left .drawer__head { border-color: var(--line-dark); padding-left: 18px; }
.drawer__title { font-size: var(--h4); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 28px 28px; }
.menu { display: grid; }
.menu__group summary, .menu__link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font: 400 13px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; list-style: none; }
.menu__group summary::-webkit-details-marker { display: none; }
.menu__group summary .icon { transition: transform .25s; }
.menu__group[open] summary .icon { transform: rotate(90deg); }
.menu__group a { display: block; padding: 9px 0 9px 14px; font-size: 15px; color: var(--muted-dark); }
.menu__group a:hover { color: var(--white); }
.menu__group[open] { padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.menu__group[open] summary { border-bottom: 0; }

.selection__empty { display: grid; justify-items: center; gap: 14px; padding: 56px 0; text-align: center; }
.selection__list li { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.selection__thumb { display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; }
.selection__thumb .studio__img { padding: 10%; }
.selection__title { display: block; font: 400 11.5px/1.55 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.selection__price { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.selection__remove { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.selection__form { margin-top: 26px; }
.selection__note { font-size: 13px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; display: flex; align-items: center; gap: 14px; padding: 13px 20px; white-space: nowrap; max-width: calc(100vw - 32px); background: var(--ink); color: var(--white); font: 400 11px/1.5 var(--display); letter-spacing: var(--track); text-transform: uppercase; transform: translate(-50%, 16px); opacity: 0; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast a, .toast button { text-decoration: underline; text-underline-offset: 3px; color: var(--white); letter-spacing: inherit; text-transform: inherit; font: inherit; }

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section--ink { background: var(--ink); color: var(--white); }
.section--ink .eyebrow { color: var(--muted-dark); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--tight { padding-top: 32px; }
.section__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.section__cta { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- hero ---------- */
.hero { position: relative; height: clamp(480px, 74vh, 672px); background: var(--studio-hero); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; background: var(--studio-hero); opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-out), visibility 0s linear 1.1s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-out), visibility 0s; }
/* The stage must not create a stacking context, or the multiply blend would
   lose the gradient behind it and show the photo's white background. */
.hero__stage { position: absolute; left: 0; right: 0; top: 5%; height: 66%; margin: 0 auto; width: min(80%, 700px); }
.hero__stone, .hero__reflection { position: absolute; left: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero__stone { top: 0; filter: brightness(1.02) contrast(1.03); transform: scale(.965); transition: transform 8s linear; }
.hero__slide.is-active .hero__stone { transform: scale(1); }
.hero__reflection { top: 99%; transform: scaleY(-1); opacity: .2; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 34%); mask-image: linear-gradient(to top, #000 0%, transparent 34%); }
.hero__content { position: absolute; left: 0; right: 0; bottom: 56px; display: grid; justify-items: center; gap: 16px; padding: 0 var(--gutter); text-align: center; }
.hero__caption { font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); }
a.hero__caption:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__dots { position: absolute; right: var(--gutter); bottom: 24px; display: flex; gap: 4px; }
.hero__dot { width: 22px; height: 22px; display: grid; place-items: center; }
.ring { width: 10px; height: 10px; overflow: visible; transform: rotate(-90deg); }
.ring circle { fill: rgb(28 28 28 / .32); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 22.62; stroke-dashoffset: 22.62; }
.hero__dot.is-active .ring circle { fill: transparent; animation: ring var(--autoplay) linear forwards; }
.hero.is-paused .hero__dot.is-active .ring circle { animation-play-state: paused; }
@keyframes ring { to { stroke-dashoffset: 0; } }
@media (max-width: 699px) {
  .hero { height: 520px; }
  .hero__stage { top: 9%; height: 52%; width: 88%; }
  .hero__content { bottom: 44px; }
  .hero__dots { left: 0; right: 0; justify-content: center; bottom: 12px; }
}

/* ---------- category circles ---------- */
.circles { background: var(--night); color: var(--paper); padding: 26px 0 24px; }
.circles__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 34px; padding: 0 var(--gutter); }
.circle { display: grid; justify-items: center; gap: 14px; width: 104px; transition: transform .3s var(--ease-out); }
.circle:hover { transform: translateY(-3px); }
.circle__img { display: block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #1e1e1e; }
.circle__img img { width: 100%; height: 100%; object-fit: cover; }
.circle__img.studio .studio__img { object-fit: contain; padding: 16%; }
.circle__img--mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.circle__label { font: 400 10.5px/1.3 var(--display); letter-spacing: var(--track); text-transform: uppercase; text-align: center; }
@media (max-width: 699px) {
  .circles__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 20px; scrollbar-width: none; padding-bottom: 4px; }
  .circles__list::-webkit-scrollbar { display: none; }
  .circle { flex: none; width: 84px; }
  .circle__img { width: 80px; height: 80px; }
}

/* ---------- studio media ---------- */
.studio { position: relative; display: block; background: var(--studio); }
.studio__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.02); }
.studio__video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.studio__video.is-cover { object-fit: cover; }
/* Matte media: shot on their own flat background (supplier photography, framed
   4:5 at import). Shown as-is on that colour, never multiplied or padded. */
.studio .studio__img.is-matte, .studio .studio__video.is-matte { padding: 0; object-fit: contain; mix-blend-mode: normal; filter: none; background: var(--matte); }
.studio__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: rgb(28 28 28 / .42); text-align: center; }
.cut-art { width: 50%; max-width: 230px; height: auto; fill: none; stroke: currentColor; stroke-width: .55; stroke-linejoin: round; stroke-linecap: round; }
.studio__note { font: 400 10px/1.4 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }

/* ---------- product cards ---------- */
.card { position: relative; display: grid; align-content: start; gap: 16px; }
.card__figure { position: relative; }
.card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.card__media > .studio__img { padding: 15%; transition: transform .9s var(--ease-out); }
@media (hover: hover) { .card:hover .card__media > .studio__img { transform: scale(1.045); } }
.card__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease-out); }
.card__alt .studio__img { padding: 15%; }
@media (hover: hover) { .card:hover .card__alt { opacity: 1; } }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 1px 6px; background: var(--paper); color: rgb(0 0 0 / .65); font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.card__add { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; background: var(--white); color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), background .2s, color .2s; }
.card__add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.card:hover .card__add, .card__add:focus-visible, .card__add.is-added { opacity: 1; transform: none; }
.card__add.is-added { background: var(--ink); color: var(--white); }
@media (hover: none) { .card__add { opacity: 1; transform: none; } }
.card__info { display: grid; justify-items: center; gap: 5px; text-align: center; }
.card__title { max-width: 32ch; font: 400 11.5px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.card__colour { font-size: 13px; color: var(--muted); }
.card__price { font-size: 14px; }
.card__info:hover .card__title { text-decoration: underline; text-underline-offset: 3px; }
.section--ink .card__colour { color: var(--muted-dark); }

/* ---------- product rows (carousels) ---------- */
.row { position: relative; }
.row__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 32px) / 4); gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.row__track::-webkit-scrollbar { display: none; }
.row__track > .card { scroll-snap-align: start; }
.row.is-static .row__track { justify-content: center; }
.row__arrow { position: absolute; top: 36%; z-index: 3; opacity: 0; transition: opacity .3s; }
.row:hover .row__arrow, .row__arrow:focus-visible { opacity: 1; }
.row__arrow--prev { left: -22px; }
.row__arrow--next { right: -22px; }
@media (max-width: 999px) { .row__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px; } }
@media (max-width: 699px) {
  .row__track { grid-auto-columns: min(300px, 64%); gap: 16px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
}
@media (hover: none), (max-width: 699px) { .row__arrow { display: none; } }

/* ---------- product (feature block + stone page) ---------- */
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.gallery__stage { aspect-ratio: 4 / 5; overflow: hidden; }
.gallery__stage > .studio__img { padding: 10%; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gallery__thumb { position: relative; width: 64px; aspect-ratio: 4 / 5; overflow: hidden; outline: 1px solid transparent; outline-offset: 2px; }
.gallery__thumb .studio__img { padding: 10%; }
.gallery__thumb.is-active { outline-color: var(--ink); }
.gallery__play { position: absolute; inset: 0; display: grid; place-items: center; }
.gallery__play::after { content: ""; width: 0; height: 0; border-left: 11px solid var(--white); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .4)); }
.product__info { display: grid; gap: 14px; align-content: start; }
.product__title { font-size: var(--h3); }
.product__title a:hover { text-decoration: underline; text-underline-offset: 5px; }
.product__price { font: 400 var(--h4)/1.5 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.status-chip { justify-self: start; padding: 4px 10px; border: 1px solid var(--line); font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.status-chip--sold { background: var(--ink); border-color: var(--ink); color: var(--white); }
.rule { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.product__notes { max-width: 62ch; }
.product__label { margin-top: 6px; font: 400 var(--label)/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec th, .spec td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1px solid var(--line); }
.spec th { width: 40%; padding-right: 16px; font-weight: 400; color: var(--muted); }
.spec a { text-decoration: underline; text-underline-offset: 3px; }
.product__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.enquiry { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.enquiry__title { font-size: var(--h4); }
.stone-page .gallery { position: sticky; top: 24px; }
@media (max-width: 899px) {
  .product { grid-template-columns: 1fr; gap: 28px; }
  .stone-page .gallery { position: static; }
  .product__info > .eyebrow, .product__title, .product__price { text-align: center; }
  .status-chip { justify-self: center; }
}
@media (max-width: 520px) { .product__actions { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font: 400 var(--label)/1.5 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.field label .muted { text-transform: none; letter-spacing: 0; }
.field input, .field textarea, .field select { width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 0; background: transparent; outline: none; font: 400 15px/1.5 var(--text); transition: border-color .2s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 96px; }
.form__status { min-height: 20px; font-size: 13px; }
.form__status.is-error { color: var(--error); }
.form__done { padding: 18px; border: 1px solid var(--line); background: var(--white); font-size: 15px; }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- editorial bands ---------- */
.feature-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.feature-band__media { aspect-ratio: 3 / 2; overflow: hidden; }
.feature-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.feature-band__text { max-width: 620px; padding: 48px clamp(24px, 7vw, 112px); }
.feature-band__text p + p { margin-top: 16px; }
.feature-band__lead { font-weight: 700; }
.feature-band__text .text-link { margin-top: 26px; }
@media (max-width: 899px) {
  .feature-band { grid-template-columns: 1fr; padding: 0; }
  .feature-band__text { padding: 40px var(--gutter) 48px; }
}

/* ---------- featured collection tabs ---------- */
.tabs__list { display: flex; justify-content: center; gap: 38px; margin: 12px 0 40px; }
.tabs__tab { padding-bottom: 3px; border-bottom: 1px solid transparent; font: 400 var(--h2)/1.4 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted-dark); transition: color .25s, border-color .25s; }
.tabs__tab:hover { color: var(--white); }
.tabs__tab.is-active { color: var(--white); border-color: var(--white); }
@media (max-width: 699px) {
  .tabs__list { justify-content: flex-start; gap: 24px; overflow-x: auto; scrollbar-width: none; margin: 10px calc(var(--gutter) * -1) 28px; padding: 0 var(--gutter); }
  .tabs__tab { flex: none; font-size: var(--h3); }
}

/* ---------- house notes (rotator) ---------- */
.notes-band { padding: 84px 0; text-align: center; }
.rotator { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.rotator__item { font: 400 clamp(16px, 1.5vw, 19px)/1.7 var(--text); }
.rotator__dots { display: flex; justify-content: center; gap: 4px; margin-top: 26px; }
.rotator__dot { width: 22px; height: 22px; display: grid; place-items: center; }
.rotator__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(28 28 28 / .25); transition: background .25s; }
.rotator__dot.is-active::before { background: var(--ink); }

/* ---------- assurances + footer ---------- */
.assurances { background: var(--paper); border-top: 1px solid var(--line); padding: 56px var(--gutter); }
.assurances__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px clamp(40px, 8vw, 120px); }
.assurances li { display: grid; justify-items: center; gap: 14px; max-width: 230px; text-align: center; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.footer { background: var(--ink); color: var(--white); padding: 64px var(--gutter) 36px; }
.footer__top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 48px; align-items: start; }
.footer__head { margin-bottom: 18px; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.footer__col li + li { margin-top: 8px; }
.footer__col a, .footer__group a { font-size: 15px; color: var(--muted-dark); transition: color .2s; }
.footer__col a:hover, .footer__group a:hover { color: var(--white); }
.footer__col--end { justify-self: end; }
.footer__brand { display: grid; justify-items: center; gap: 14px; text-align: center; }
.logo--footer .logo__mark { height: 34px; }
.footer__tag { font-size: 14px; color: var(--muted-dark); }
.footer__group { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line-dark); text-align: center; }
.footer__group ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted-dark); }
.footer__bottom a { color: var(--white); }
.footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 799px) {
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__brand { order: -1; justify-items: start; text-align: left; }
  .footer__col--end { justify-self: start; }
  .footer__group { text-align: left; }
  .footer__group ul { justify-content: flex-start; }
  .footer__bottom { flex-direction: column; }
}

/* ---------- title band, toolbar, filters, grid (store) ---------- */
.title-band { display: grid; justify-items: center; gap: 22px; padding: 64px var(--gutter); background: var(--ink); color: var(--white); text-align: center; }
.title-band .muted { color: var(--muted-dark); max-width: 56ch; }
.toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; min-height: 56px; background: var(--paper); border-bottom: 1px solid var(--line); }
.toolbar__filter { display: none; }
.toolbar__density { display: flex; align-items: center; gap: 6px; padding: 0 var(--gutter); border-right: 1px solid var(--line); }
.toolbar__density button { display: grid; place-items: center; width: 30px; height: 30px; color: rgb(28 28 28 / .35); }
.toolbar__density button[aria-pressed="true"] { color: var(--ink); }
.toolbar__density svg { width: 17px; height: 17px; fill: currentColor; }
.toolbar__count { align-self: center; text-align: center; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.toolbar__sort { display: flex; align-items: center; gap: 10px; padding: 0 var(--gutter); border-left: 1px solid var(--line); font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); }
.toolbar__sort select { appearance: none; -webkit-appearance: none; padding: 8px 22px 8px 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.store__layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px; max-width: 1600px; margin: 0 auto; padding: 36px var(--gutter) var(--section); }
.filters { align-self: start; position: sticky; top: 24px; }
.filters__head, .filters__foot { display: none; }
.filter { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter:first-child { padding-top: 6px; }
.filter__head { display: flex; justify-content: space-between; align-items: center; width: 100%; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.filter__head .icon { transition: transform .25s; }
.filter:not(.is-open) .filter__head .icon { transform: rotate(-90deg); }
.filter__body { display: grid; gap: 11px; padding-top: 16px; }
.filter:not(.is-open) .filter__body { display: none; }
.check { display: flex; align-items: center; gap: 11px; font-size: 14px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0; border: 1px solid var(--ink); background: transparent; cursor: pointer; }
.check input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.check__count { margin-left: auto; font-size: 12px; color: var(--muted); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: block; cursor: pointer; }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch__chip { display: block; width: 30px; height: 30px; outline: 1px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.swatch__chip--light { box-shadow: inset 0 0 0 1px var(--line); }
.swatch:hover .swatch__chip { outline-color: var(--line); }
.swatch input:checked + .swatch__chip { outline-color: var(--ink); }
.swatch input:focus-visible + .swatch__chip { outline: 1px dashed var(--ink); }
.switch { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex: none; width: 34px; height: 18px; border-radius: 9px; background: var(--line); transition: background .2s; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform .2s var(--ease-out); }
.switch input:checked + .switch__track { background: var(--ink); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 1px solid var(--ink); outline-offset: 3px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.grid[data-density="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid__empty { display: grid; justify-items: center; gap: 18px; padding: 64px 0; text-align: center; }
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid[data-density="2"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .toolbar { grid-template-columns: 1fr 1fr auto; }
  .toolbar__filter { display: block; font: 400 11px/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; border-right: 1px solid var(--line); }
  .toolbar__count { display: none; }
  .toolbar__sort { order: 2; justify-content: center; border-left: 0; border-right: 1px solid var(--line); }
  .toolbar__sort > span { display: none; }
  .toolbar__density { order: 3; border-right: 0; }
  .store__layout { grid-template-columns: 1fr; padding-top: 24px; }
  .filters { position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; width: min(400px, 90vw); display: flex; flex-direction: column; background: var(--paper); transform: translateX(-100%); transition: transform .5s var(--ease); }
  .filters.is-open { transform: none; }
  .filters__head { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--line); font: 400 var(--h4)/1.4 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
  .filters__form { flex: 1; overflow-y: auto; padding: 8px 24px; }
  .filters__foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 16px 24px; border-top: 1px solid var(--line); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .store__layout { padding: 20px 10px var(--section); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 10px; }
  .grid[data-density="2"] { grid-template-columns: 1fr; }
  .grid .card__title { font-size: 10.5px; }
}

/* ---------- simple pages ---------- */
.backbar { padding: 14px var(--gutter); border-bottom: 1px solid var(--line); text-align: center; }
.backbar a { font-size: 14px; }
.backbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose { max-width: 740px; margin: 0 auto; padding: 56px var(--gutter) var(--section); }
.prose .lede { font-size: 17px; }
.prose .date { margin-top: 10px; font-size: 13px; color: var(--muted); }
.prose h2 { margin: 42px 0 12px; font: 400 var(--h4)/1.4 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.prose p + p { margin-top: 14px; }
.prose ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; margin-top: 12px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; max-width: 1120px; margin: 0 auto; padding: 56px var(--gutter) var(--section); }
.contact__aside { display: grid; gap: 24px; align-content: start; }
.contact__aside h2 { font: 400 var(--label)/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contact__aside a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 799px) { .contact { grid-template-columns: 1fr; gap: 40px; } }
.notfound { display: grid; justify-items: center; gap: 18px; padding: 96px var(--gutter); text-align: center; }

/* ---------- origins (stories carried over from maisonsuppiah.com) ---------- */
.soft { color: var(--muted); }
.title-band .soft, .section--ink .soft { color: var(--muted-dark); }
.title-band .eyebrow { color: var(--muted-dark); }
.origin-hero__sub { max-width: 60ch; font-size: 15px; color: var(--muted-dark); }
.origin-band { margin: 0; height: clamp(300px, 62vh, 640px); overflow: hidden; background: var(--ink); }
.origin-band img { width: 100%; height: 100%; object-fit: cover; }
.story { display: grid; gap: clamp(64px, 9vw, 120px); max-width: 1240px; margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.story__title { margin: 10px 0 20px; font-size: var(--h2); }
.story__block p:not(.eyebrow), .origin-close p:not(.eyebrow):not(.origin-close__line) { font-size: 16px; line-height: 1.75; }
.story__block p + p { margin-top: 14px; }
.story__block--text { width: 100%; max-width: 680px; margin: 0 auto; }
.story__block--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.story__media { margin: 0; order: 2; }
.story__block--reverse .story__media { order: 0; }
.story__media img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; }
.story__text { max-width: 540px; }
.origin-close { display: grid; justify-items: center; gap: 14px; margin-top: clamp(64px, 9vw, 120px); padding: var(--section) var(--gutter); background: var(--white); border-top: 1px solid var(--line-white); text-align: center; }
.origin-close p:not(.eyebrow) { max-width: 640px; }
.origin-close .story__title { margin-bottom: 6px; }
.origin-close__line { margin-top: 22px; font: 400 var(--label)/1.6 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.origin-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.origin-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.origin-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin: 0 auto; }
.origin-card { display: grid; align-content: start; gap: 10px; }
.origin-card__media { display: block; aspect-ratio: 4 / 5; margin-bottom: 8px; overflow: hidden; background: var(--ink); }
.origin-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.origin-card:hover .origin-card__media img { transform: scale(1.04); }
.origin-card__title { font: 400 var(--h4)/1.45 var(--display); letter-spacing: var(--track); text-transform: uppercase; }
.origin-card__text { max-width: 46ch; color: var(--muted); }
.origin-card .text-link { margin-top: 4px; }
.origin-card:hover .text-link { text-decoration: underline; text-underline-offset: 4px; }
.product__origin { justify-self: start; margin-top: 2px; }
@media (max-width: 899px) {
  .story__block--media { grid-template-columns: 1fr; }
  .story__media, .story__block--reverse .story__media { order: 0; }
  .story__text { max-width: none; }
  .origin-cards, .origin-cards--2 { grid-template-columns: 1fr; gap: 44px; }
  .origin-card__media { aspect-ratio: 3 / 2; }
  .product__origin { justify-self: center; }
}

/* ---------- scroll reveal (added by script, so content never hides without JS) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }