:root{
  /* ── Palette carried over from the previous Eman Jewellers site ──────────
     One hue ramp, not several colours: bone at the top, peach through the
     middle, clay at the bottom — clay being peach taken down to a tenth of
     its lightness. Rose gold is the metal, pulled off yellow into the same
     family so it reads as part of the ramp. */
  --bone:#F9F3ED;
  --bone-2:#F5EAE1;
  --bone-3:#E3C7B2;
  --peach-rgb:243,184,146;
  --peach:rgb(var(--peach-rgb));
  --peach-paper:#F6DCC7;
  --clay:#21110A;
  --clay-2:#2B1810;
  --clay-3:#372014;
  --gold:#C98E63;
  --gold-bright:#EFC3A2;
  --gold-deep:#9C5C33;
  --gold-glow:rgba(201,142,99,.34);

  /* semantic names used everywhere below */
  --ink:#2A1A12;
  --ink-soft:rgba(42,26,18,.72);
  --ink-mute:rgba(42,26,18,.5);
  --cream:var(--bone);
  --cream-deep:var(--bone-2);
  --paper:#FFFFFF;
  --onyx:var(--clay);
  --line:rgba(156,92,51,.30);
  --line-soft:rgba(42,26,18,.13);
  --line-light:rgba(255,255,255,.22);

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

  --shell:min(1360px,100% - 2.5rem);
  --shell-narrow:min(880px,100% - 2.5rem);
  --nav-h:74px;
  --announce-h:42px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.08;
  letter-spacing:.005em;
  margin:0;
}
h1{font-size:clamp(2.7rem,6.4vw,5.25rem)}
h2{font-size:clamp(2rem,4.1vw,3.35rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
h4{font-size:1.15rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

::selection{background:var(--gold);color:#fff}

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

/* --------------------------------------------------------- utility classes */
.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:var(--shell-narrow);margin-inline:auto}
.center{text-align:center}
.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-link{
  position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ink);
  color:var(--cream);padding:.75rem 1.25rem;transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem}

.eyebrow{
  font-family:var(--sans);
  font-size:.688rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.1rem;
}
.eyebrow--light{color:var(--gold-bright)}

.lede{
  font-size:clamp(1.02rem,1.35vw,1.19rem);
  line-height:1.85;
  color:var(--ink-soft);
  font-weight:300;
}

.rule{width:64px;height:1px;background:var(--gold-deep);border:0;margin:1.5rem 0}
.rule--center{margin-inline:auto}

.section{padding:clamp(4.5rem,9vw,8.5rem) 0}
.section--tight{padding:clamp(3rem,6vw,5.5rem) 0}
.section--deep{background:var(--cream-deep)}
.section--ink{background:var(--onyx);color:#EDE7DC}
.section--ink .lede{color:#b8b0a4}
.section--ink h2,.section--ink h3{color:#F6F1E8}

.section-head{max-width:640px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.section-head p{margin-top:1.15rem}

/* ------------------------------------------------------------------ button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1rem 2.2rem;
  border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:.72rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--cream)}
.btn:hover::after{transform:translateY(0)}
.btn--solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--solid::after{background:var(--gold)}
.btn--solid:hover{color:#fff;border-color:var(--gold)}
.btn--light{border-color:rgba(255,255,255,.65);color:#fff}
.btn--light::after{background:#fff}
.btn--light:hover{color:var(--ink);border-color:#fff}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold::after{background:var(--ink)}
.btn--gold:hover{border-color:var(--ink);color:#fff}
.btn--block{width:100%}

.nav__links .link-underline{color:inherit}
.link-underline{
  display:inline-block;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  padding-bottom:.35rem;position:relative;color:var(--ink);
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--ease);
}
.link-underline:hover::after{transform-origin:left;transform:scaleX(0)}
.link-underline--light{color:#fff}

/* ------------------------------------------------------------ announcement */
.announce{
  background:var(--onyx);color:#D8CFC0;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  text-align:center;padding:.7rem 1rem;
}
.announce a{color:var(--gold-bright);border-bottom:1px solid rgba(201,168,106,.4)}

/* -------------------------------------------------------------- navigation */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.nav__inner{
  width:var(--shell);margin-inline:auto;
  min-height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
}
.nav__brand{
  grid-column:2;justify-self:center;text-align:center;
  font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.72rem);
  letter-spacing:.26em;text-transform:uppercase;line-height:1;
  padding:.2rem 0;
}
.nav__brand span{
  display:block;font-family:var(--sans);font-size:.5rem;
  letter-spacing:.42em;color:var(--gold);margin-top:.42rem;font-weight:400;
}
.nav__links{
  display:flex;align-items:center;gap:1.9rem;
  list-style:none;margin:0;padding:0;
}
.nav__links--right{grid-column:3;justify-self:end}
.nav__links a{
  font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding:.4rem 0;white-space:nowrap;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__icon{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;padding:.4rem}
.nav__burger{
  display:none;background:none;border:0;padding:.5rem;
  grid-column:1;justify-self:start;
}
.nav__burger span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* transparent nav over a hero, until scrolled */
.nav--over{
  position:fixed;left:0;right:0;top:var(--announce-h);
  background:transparent;color:#fff;border-color:transparent;
}
.nav--over.is-stuck,
.nav--over.is-open{background:var(--cream);color:var(--ink);border-color:var(--line-soft)}
.nav--over .nav__brand span{color:var(--gold-bright)}
.nav--over.is-stuck .nav__brand span,
.nav--over.is-open .nav__brand span{color:var(--gold)}
/* On pages where the nav floats over the hero, the announcement bar is pinned
   above it rather than scrolling underneath — otherwise the two overlap and the
   bar covers the menu button. */
body.has-over-nav .announce{position:fixed;top:0;left:0;right:0;z-index:99}
body.has-over-nav .drawer{top:calc(var(--announce-h) + var(--nav-h))}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;
  background:var(--cream);color:var(--ink);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  overflow-y:auto;padding:2.5rem 0 4rem;
}
.drawer.is-open{opacity:1;transform:none;pointer-events:auto}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer__primary a{
  display:block;font-family:var(--serif);font-size:2rem;
  padding:.5rem 0;border-bottom:1px solid var(--line-soft);
}
.drawer__secondary{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:1.25rem}
.drawer__secondary a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:clamp(560px,92vh,940px);
  display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;
}
.hero__slides{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--ease),transform 7s linear;
  transform:scale(1.06);
}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,9,.45) 0%,rgba(12,11,9,.18) 40%,rgba(12,11,9,.62) 100%);
}
.hero__content{position:relative;z-index:2;width:var(--shell-narrow);padding:6rem 0 4.5rem}
.hero__content h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero__content p{
  margin:1.6rem auto 2.5rem;max-width:44ch;color:rgba(255,255,255,.88);
  font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.85;
}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__dots{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;gap:.7rem;
}
.hero__dots button{
  width:30px;height:2px;border:0;padding:0;background:rgba(255,255,255,.35);
  transition:background .35s var(--ease);
}
.hero__dots button.is-active{background:#fff}

/* page banner (interior pages) */
.banner{
  position:relative;min-height:clamp(320px,46vh,480px);
  display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;
}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:rgba(14,13,10,.42)}
.banner__content{position:relative;z-index:2;width:var(--shell-narrow);padding:5rem 0 3rem}
.banner__content h1{color:#fff}
.banner__content p{margin:1.3rem auto 0;max-width:46ch;color:rgba(255,255,255,.85)}

/* ------------------------------------------------------------- breadcrumbs */
.crumbs{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);padding:1.6rem 0;
}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 .55rem;opacity:.5}

/* ------------------------------------------------------------ marquee band */
.band{
  background:var(--onyx);color:#E6DFD2;overflow:hidden;
  padding:1.15rem 0;border-block:1px solid rgba(201,168,106,.2);
}
.band__track{
  display:flex;gap:4rem;width:max-content;
  animation:slide 38s linear infinite;
}
.band span{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:1rem;
}
.band span::before{content:"◆";color:var(--gold);font-size:.55rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__track{animation:none}}

/* --------------------------------------------------------- collection grid */
.collections{
  display:grid;gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.collection-card{
  position:relative;display:block;overflow:hidden;background:var(--cream-deep);
  aspect-ratio:4/5;
}
.collection-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.collection-card:hover img{transform:scale(1.07)}
.collection-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%);
}
.collection-card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.9rem 1.6rem;color:#fff;text-align:center;
}
.collection-card__body h3{color:#fff;font-size:1.6rem}
.collection-card__body span{
  display:inline-block;margin-top:.7rem;font-size:.65rem;
  letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:.25rem;
}

/* ------------------------------------------------------------ product grid */
.toolbar{
  display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:space-between;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line-soft);margin-bottom:2.5rem;
}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter{
  border:1px solid var(--line);background:transparent;
  padding:.55rem 1.15rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter:hover{border-color:var(--ink)}
.filter.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.toolbar__meta{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.toolbar select{
  border:1px solid var(--line);background:transparent;padding:.55rem 1rem;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
}

.products{
  display:grid;gap:clamp(1.5rem,2.6vw,2.6rem) clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.product-card{display:block;position:relative}
.product-card__media{
  position:relative;overflow:hidden;background:var(--cream-deep);aspect-ratio:4/5;
}
.product-card__media img{
  width:100%;height:100%;object-fit:contain;padding:6%;transition:opacity .6s var(--ease),transform 1.1s var(--ease);
}
.product-card__media img + img{position:absolute;inset:0;opacity:0}
.product-card:hover .product-card__media img{transform:scale(1.04)}
.product-card:hover .product-card__media img + img{opacity:1}
.product-card__tag{
  position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(250,247,242,.92);
  color:var(--gold);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.4rem .75rem;
}
.product-card__body{padding:1.15rem .2rem 0;text-align:center}
.product-card__body h3{font-size:1.28rem;margin-bottom:.3rem}
.product-card__meta{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
}
.product-card__price{margin-top:.55rem;font-size:.82rem;letter-spacing:.09em;color:var(--ink-soft)}
.empty-state{padding:4rem 0;text-align:center;color:var(--ink-mute)}

/* --------------------------------------------------------- product detail */
.pdp{display:grid;gap:clamp(2.5rem,5vw,5rem);grid-template-columns:1.05fr .95fr;align-items:start}
.pdp__gallery{display:grid;gap:1rem}
.pdp__main{background:var(--cream-deep);aspect-ratio:4/5;overflow:hidden}
.pdp__main img{width:100%;height:100%;object-fit:contain;padding:5%}
/* some pieces carry a dozen photographs, so the strip wraps rather than
   running off the side of the column */
.pdp__thumbs{display:flex;gap:.7rem;flex-wrap:wrap}
.pdp__thumbs button{
  flex:0 0 74px;border:1px solid transparent;background:var(--cream-deep);padding:0;
  aspect-ratio:4/5;overflow:hidden;transition:border-color .3s var(--ease);
}
.pdp__thumbs button.is-active{border-color:var(--gold)}
.pdp__thumbs img{width:100%;height:100%;object-fit:contain;padding:6%}
.pdp__info{position:sticky;top:calc(var(--nav-h) + 2rem)}
.pdp__price{font-size:1.25rem;letter-spacing:.06em;margin:1.2rem 0 1.6rem;color:var(--ink-soft)}
.pdp__actions{display:flex;flex-direction:column;gap:.8rem;margin:2rem 0}
.spec{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft)}
.spec li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-size:.86rem;
}
.spec span:first-child{color:var(--ink-mute);letter-spacing:.14em;text-transform:uppercase;font-size:.66rem}
.accordion{margin-top:2.2rem;border-top:1px solid var(--line-soft)}
.accordion__item{border-bottom:1px solid var(--line-soft)}
.accordion__trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;padding:1.15rem 0;text-align:left;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.accordion__trigger i{font-style:normal;color:var(--gold);transition:transform .35s var(--ease)}
.accordion__trigger[aria-expanded="true"] i{transform:rotate(45deg)}
.accordion__panel{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.accordion__panel p{padding:0 0 1.3rem;color:var(--ink-soft);font-size:.92rem}

/* ------------------------------------------------------------- split media */
.split{display:grid;gap:clamp(2rem,5vw,5rem);align-items:center;grid-template-columns:1fr 1fr}
.split--reverse .split__media{order:2}
.split__media{overflow:hidden;background:var(--cream-deep)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body{max-width:46ch}
.split__body .btn{margin-top:1.9rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;text-align:center}
.stat strong{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.3rem);font-weight:300;line-height:1}
.stat span{
  display:block;margin-top:.7rem;font-size:.65rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-mute);
}
.section--ink .stat span{color:#a79e91}

/* ------------------------------------------------------------- services */
.cards{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:var(--paper);padding:clamp(2rem,3.2vw,2.9rem);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px -32px rgba(28,26,23,.45)}
.card__icon{color:var(--gold);margin-bottom:1.3rem}
.card h3{font-size:1.45rem;margin-bottom:.8rem}
.card p{color:var(--ink-soft);font-size:.93rem}
.card .link-underline{margin-top:1.3rem}

/* ------------------------------------------------------------- quotes */
.quote{max-width:56ch;margin-inline:auto;text-align:center}
.quote blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.45;font-style:italic;
}
.quote figcaption{
  margin-top:1.8rem;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-mute);
}
.section--ink .quote figcaption{color:#a79e91}

/* ------------------------------------------------------------- boutiques */
.boutique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.boutique:nth-child(even) .boutique__media{order:2}
.boutique__media{aspect-ratio:3/2;overflow:hidden;background:var(--cream-deep)}
.boutique__media img{width:100%;height:100%;object-fit:cover}
.boutique address{font-style:normal;color:var(--ink-soft);margin:1.2rem 0}
.boutique dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.5rem;margin:1.4rem 0 1.8rem;font-size:.88rem}
.boutique dt{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);padding-top:.25rem}
.boutique dd{margin:0;color:var(--ink-soft)}

/* ------------------------------------------------------------- timeline */
.timeline{position:relative;max-width:760px;margin-inline:auto;padding-left:2.5rem}
.timeline::before{content:"";position:absolute;left:6px;top:.6rem;bottom:.6rem;width:1px;background:var(--line)}
.timeline__item{position:relative;padding-bottom:2.8rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{
  content:"";position:absolute;left:-2.5rem;top:.55rem;width:13px;height:13px;
  border:1px solid var(--gold);background:var(--cream);transform:rotate(45deg);
}
.timeline__year{font-family:var(--serif);font-size:1.75rem;color:var(--gold);line-height:1}
.timeline__item h3{font-size:1.25rem;margin:.5rem 0 .55rem}
.timeline__item p{color:var(--ink-soft);font-size:.94rem}

/* ------------------------------------------------------------- forms */
.form{display:grid;gap:1.35rem}
.form__row{display:grid;gap:1.35rem;grid-template-columns:1fr 1fr}
.field{display:grid;gap:.5rem}
.field label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--ink);
  transition:border-color .3s var(--ease);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}
.field small{color:#b4433a;font-size:.72rem;letter-spacing:.04em;min-height:1em}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#b4433a}
.form__note{font-size:.78rem;color:var(--ink-mute)}
.form-success{
  border:1px solid var(--gold);background:rgba(168,133,78,.07);
  padding:1.1rem 1.4rem;font-size:.9rem;color:var(--ink-soft);
}
[hidden]{display:none !important}

/* ------------------------------------------------------------- newsletter */
.newsletter{text-align:center}
.newsletter form{
  display:flex;gap:1rem;max-width:520px;margin:2rem auto 0;flex-wrap:wrap;
}
.newsletter input{
  flex:1 1 240px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff;padding:.85rem 0;font-family:var(--sans);font-weight:300;
}
.newsletter input::placeholder{color:rgba(255,255,255,.5)}
.newsletter input:focus{outline:0;border-color:var(--gold-bright)}

/* ------------------------------------------------------------- footer */
.footer{background:var(--onyx);color:#C8C0B3;padding:clamp(3.5rem,7vw,6rem) 0 2rem;font-size:.86rem}
.footer__top{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.4fr repeat(3,1fr);
  padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand{
  font-family:var(--serif);font-size:1.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:#F4EFE5;line-height:1;
}
.footer__brand span{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.4em;color:var(--gold-bright);margin-top:.5rem}
.footer__top p{margin-top:1.4rem;max-width:34ch;color:#9c9488;line-height:1.85}
.footer h4{
  font-family:var(--sans);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;
  color:#F4EFE5;margin-bottom:1.35rem;font-weight:400;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.footer a:hover{color:var(--gold-bright)}
.footer__social{display:flex;gap:1.1rem;margin-top:1.8rem}
.footer__social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.footer__social a:hover{border-color:var(--gold-bright)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  padding-top:2rem;font-size:.7rem;letter-spacing:.12em;color:#7d766c;
}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:1.4rem}

/* ------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__slide{transition:opacity .01s}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .nav__links--left{display:none}
  .nav__burger{display:block}
  .nav__inner{grid-template-columns:auto 1fr auto}
  .nav__brand{grid-column:2}
  .nav__links--right{grid-column:3}
  .nav__links--right li:not(:last-child){display:none}
}
@media (max-width:900px){
  :root{--shell:min(1360px,100% - 2rem)}
  .pdp{grid-template-columns:1fr}
  .pdp__info{position:static}
  .split,.boutique{grid-template-columns:1fr}
  .split--reverse .split__media,.boutique:nth-child(even) .boutique__media{order:0}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.6rem .9rem}
  .hero__actions .btn{width:100%}
  .toolbar{flex-direction:column;align-items:flex-start}
  .drawer__primary a{font-size:1.6rem}
}

/* ==========================================================================
   Components added with the real catalogue
   ========================================================================== */

/* photographs come in mixed aspect ratios; the frame is constant */
.product-card__media img,.pdp__main img,.pdp__thumbs img,.collection-card img,.line__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.product-card__model,.pdp__model{
  display:block;font-size:.62em;color:var(--ink-mute);letter-spacing:.01em;margin-top:.15em;
}
.pdp__model{font-family:var(--serif)}

/* authentication / process steps */
.steps{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.step{position:relative;padding-top:1.6rem;border-top:1px solid rgba(239,195,162,.28)}
.step__num{
  font-family:var(--serif);font-size:1.5rem;color:var(--gold-bright);
  line-height:1;margin:0 0 1rem;letter-spacing:.08em;
}
.step h3{font-size:1.2rem;margin-bottom:.7rem;color:#F6EDE4}
.step p{font-size:.9rem;color:rgba(246,237,228,.68);line-height:1.8}
.section--ink .steps .step p{color:rgba(246,237,228,.68)}

/* the five bench lines */
.lines{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.line{display:flex;flex-direction:column}
.line__media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bone-2)}
.line__media img{transition:transform 1.1s var(--ease)}
.line__media:hover img{transform:scale(1.06)}
.line__body{padding:1.5rem .1rem 0}
.line__num{
  font-family:var(--serif);font-size:1.15rem;color:var(--gold-deep);
  letter-spacing:.18em;margin:0 0 .5rem;
}
.line__body h3{font-size:1.55rem;margin-bottom:.6rem}
.line__body p{color:var(--ink-soft);font-size:.93rem}
.line__body .link-underline{margin-top:1.1rem}

/* product detail additions */
.pdp__stock{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin:-.6rem 0 1.4rem;
}
.pdp__options{display:grid;gap:1.2rem;margin:1.9rem 0 .4rem}
.pdp__options .field select{
  border:1px solid var(--line);border-radius:var(--radius,2px);
  padding:.75rem .9rem;background:var(--paper);
}
.field__note{
  font-size:.78rem;color:var(--ink-mute);line-height:1.65;margin:.1rem 0 0;
}
.pdp__provenance{
  font-size:.83rem;color:var(--ink-soft);line-height:1.7;
  padding:1rem 1.15rem;margin:0 0 1.8rem;
  background:rgba(246,220,199,.5);border-left:2px solid var(--gold);
}
#pdp-story p{font-size:.94rem;color:var(--ink-soft);margin-bottom:1em}
#pdp-story p:last-child{margin-bottom:1.3rem}

/* contact details list */
.contact-list{
  display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.75rem;
  margin:2.2rem 0 0;font-size:.9rem;
}
.contact-list dt{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);padding-top:.3rem;
}
.contact-list dd{margin:0;color:var(--ink-soft)}
.contact-list a:hover{color:var(--gold-deep)}

@media (max-width:620px){
  .contact-list{grid-template-columns:1fr;gap:.2rem 0}
  .contact-list dd{margin-bottom:.9rem}
}

/* ── split hero ────────────────────────────────────────────────────────────
   The photography is roughly 630px on its longest side, so a full-bleed
   hero would upscale it three times over and go soft. A half-width portrait
   frame renders it close to native size and stays sharp. */
/* The split hero was replaced by the film hero; its styles went with it. */
/* cards in a row keep their prices on one baseline even when some carry a
   model line and others do not */
.product-card{display:flex;flex-direction:column;height:100%}
.product-card__body{display:flex;flex-direction:column;flex:1 1 auto}
.product-card__price{margin-top:auto;padding-top:.55rem}

/* ── navigation dropdown ───────────────────────────────────────────────────
   Jewellery opens a panel of sections on hover and on focus. Hover alone
   would strand keyboard and touch users, so the trigger is a real button
   that toggles on click too. */
.nav__item{position:relative}
.nav__trigger{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:.4rem 0;color:inherit;
  font-family:var(--sans);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;
}
.nav__trigger::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__item:hover .nav__trigger::after,
.nav__item:focus-within .nav__trigger::after{transform:scaleX(1)}
.nav__caret{
  width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease);
}
.nav__item:hover .nav__caret{transform:rotate(-135deg) translate(-2px,-2px)}

.megamenu{
  /* anchored to the trigger's left edge, not centred on it: the trigger sits
     near the left of the bar, so a centred panel hangs off the screen */
  position:absolute;top:calc(100% + .9rem);left:0;transform:translateY(-6px);
  width:min(680px,calc(100vw - 3rem));padding:2.1rem 2.3rem;z-index:120;
  background:var(--bone);border:1px solid var(--line-soft);
  box-shadow:0 34px 60px -38px rgba(74,44,26,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu,
.megamenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* a bridge across the gap so the panel survives the cursor crossing it */
.megamenu::before{content:"";position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem}

.megamenu__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.9rem 2.4rem}
.megamenu h4{
  font-family:var(--sans);font-size:.6rem;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-mute);margin:0 0 1rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line-soft);
}
.megamenu ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.megamenu a{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.86rem;letter-spacing:.01em;text-transform:none;color:var(--ink);
  transition:color .25s var(--ease);
}
.megamenu a:hover{color:var(--gold-deep)}
.megamenu a span{font-size:.68rem;color:var(--ink-mute)}
.megamenu__feature{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.9rem;
  margin-top:.4rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);
}
.megamenu__feature a{
  flex:1 1 180px;padding:.95rem 1.15rem;background:var(--bone-2);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  display:block;transition:background .3s var(--ease);
}
.megamenu__feature a:hover{background:var(--peach-paper);color:var(--ink)}
.megamenu__feature strong{display:block;font-weight:400}
.megamenu__feature em{
  display:block;font-style:normal;text-transform:none;letter-spacing:.01em;
  font-size:.74rem;color:var(--ink-mute);margin-top:.3rem;
}
@media (max-width:1080px){.megamenu{display:none}}

/* ── range tabs: the two price worlds never share a grid ──────────────── */
.ranges{display:flex;gap:.35rem;margin-bottom:1.6rem;flex-wrap:wrap}
.range-tab{
  padding:.7rem 1.5rem;border:1px solid var(--line);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.range-tab:hover{border-color:var(--ink)}
.range-tab.is-active{background:var(--clay);color:var(--bone);border-color:var(--clay)}

/* ── wedding groups ───────────────────────────────────────────────────── */
.group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  margin:0 0 1.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-soft);
}
.group-head h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.group-head p{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin:0}

/* ── metal facets: karat and colour, in the grid and on a piece's page ── */
.metal-filters{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin:0 0 1.6rem}
.facet{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.facet__label{
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);
}
.facet__chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:transparent;
  padding:.5rem 1rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}

.pdp__description{
  font-size:.95rem;line-height:1.85;color:var(--ink-soft);margin:0 0 1.6rem;
}
.pdp__metal{display:grid;gap:1rem;margin:0 0 1rem}
@media (max-width:620px){
  .metal-filters{gap:1rem 1.4rem}
  .facet{align-items:flex-start;flex-direction:column;gap:.5rem}
}


/* the metal a piece is currently priced in */
.pdp__metal-chosen{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin:-.9rem 0 1.5rem;
}

/* ── gallery slider ──────────────────────────────────────────────────── */
.pdp__main{position:relative}
.pdp__frame{position:relative;width:100%;height:100%}
.pdp__frame img{width:100%;height:100%;object-fit:contain;padding:4%;display:block}
.pdp__frame img[hidden]{display:none}
.pdp__main:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.pdp__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(250,247,242,.88);border:1px solid var(--line-soft);
  color:var(--ink);cursor:pointer;z-index:2;
  opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease);
}
.pdp__main:hover .pdp__arrow,
.pdp__arrow:focus-visible{opacity:1}
.pdp__arrow:hover{background:var(--bone)}
.pdp__arrow--prev{left:1rem}
.pdp__arrow--next{right:1rem}

.pdp__counter{
  position:absolute;right:1rem;bottom:1rem;z-index:2;margin:0;
  background:rgba(33,17,10,.62);color:#F6EDE4;
  font-size:.62rem;letter-spacing:.18em;padding:.35rem .7rem;
}

/* on a touch screen there is no hover, so the arrows stay visible */
@media (hover:none){
  .pdp__arrow{opacity:1;width:40px;height:40px}
  .pdp__arrow--prev{left:.5rem}
  .pdp__arrow--next{right:.5rem}
}

/* ring sizes: a long row, so it wraps and the chips are square */
.facet--sizes{align-items:flex-start}
.facet--sizes .facet__chips{max-width:30rem}
.chip--size{min-width:2.4rem;padding:.5rem .55rem;text-align:center}

/* ── paging ────────────────────────────────────────────────────────────
   A long catalogue is cut into pages rather than run down the screen until
   the reader gives up. The pager borrows the chips' lettering so it reads as
   part of the same shop, and a hairline above it closes the grid off. */
.pager-wrap{margin:3.4rem 0 0}
.pager{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  padding-top:2.2rem;border-top:1px solid var(--line-soft);
}
.pager__nums{display:flex;align-items:center;gap:.3rem}
.pager__step,.pager__num{
  background:transparent;border:1px solid transparent;color:var(--ink);
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem .95rem;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.pager__step{border-color:var(--line)}
.pager__step:hover:not([disabled]){border-color:var(--ink)}
.pager__step[disabled]{opacity:.3;cursor:default}
.pager__num{min-width:2.4rem;text-align:center;color:var(--ink-mute)}
.pager__num:hover{color:var(--ink);border-color:var(--line)}
.pager__num.is-active{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.pager__gap{
  color:var(--ink-mute);padding:0 .15rem;font-size:.64rem;letter-spacing:.16em;
}
@media (max-width:36rem){
  .pager{gap:.7rem;padding-top:1.8rem}
  .pager__step{padding:.55rem .7rem;letter-spacing:.12em}
  .pager__num{min-width:2.1rem;padding:.55rem .5rem}
}

/* the count beside a style chip */
.chip__count{
  font-size:.86em;opacity:.55;margin-left:.15rem;
}
.chip.is-active .chip__count{opacity:.8}

/* ═══ Basket and checkout ══════════════════════════════════════════════════
   The shop half of the site: a basket, a promotion code, and a checkout
   laid out as form on the left, running order total on the right. */

/* the count that rides in the header */
.nav__basket{position:relative;display:inline-flex;align-items:center;gap:.45rem}
.nav__basket-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.35rem;height:1.35rem;padding:0 .35rem;
  border-radius:999px;background:var(--gold-deep);color:#fff;
  font-size:.66rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.nav--over .nav__basket-count{background:var(--gold-bright);color:var(--clay)}

.page-head{margin-bottom:2.6rem}
.section--tight{padding-block:clamp(2.6rem,6vw,4.4rem)}

/* ── basket ─────────────────────────────────────────────────────────── */
.basket,.checkout{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media (min-width:900px){
  .basket{grid-template-columns:minmax(0,1fr) 22rem}
  .checkout{grid-template-columns:minmax(0,1fr) 21rem}
}
.basket__line{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:1.1rem;
  align-items:start;padding:1.25rem 0;border-bottom:1px solid var(--line-soft);
}
.basket__line:first-child{border-top:1px solid var(--line-soft)}
.basket__thumb{display:block;border-radius:2px;overflow:hidden;background:var(--bone-2)}
.basket__thumb img{display:block;width:100%;aspect-ratio:1;object-fit:contain;padding:4%;background:var(--paper)}
.basket__noimg{display:block;width:100%;aspect-ratio:1;background:var(--bone-2)}
.basket__name{
  font-family:var(--serif);font-size:1.16rem;line-height:1.25;color:var(--ink);
  text-decoration:none;display:block;
}
.basket__name:hover{color:var(--gold-deep)}
.basket__meta{
  margin:.3rem 0 0;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
}
.basket__choice{margin:.4rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.basket__controls{display:flex;align-items:center;gap:1rem;margin-top:.85rem;flex-wrap:wrap}
.basket__price{text-align:right;white-space:nowrap}
.basket__price strong{font-weight:400;font-size:1.05rem;font-variant-numeric:tabular-nums}
.basket__unit{display:block;margin-top:.2rem;font-size:.76rem;color:var(--ink-mute)}
.basket__qty{font-size:.85rem;color:var(--ink-soft)}
.basket__remove{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.8rem;
  color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px;
}
.basket__remove:hover{color:var(--gold-deep)}
.basket__lines--compact .basket__line{grid-template-columns:3.5rem minmax(0,1fr) auto;padding:.9rem 0}
.basket__lines--compact .basket__name{font-size:.98rem}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px}
.qty__btn{
  width:2rem;height:2rem;border:0;background:none;cursor:pointer;
  font:inherit;font-size:1rem;line-height:1;color:var(--ink);
}
.qty__btn:hover{background:var(--bone-2)}
.qty__input{
  width:2.6rem;height:2rem;border:0;border-inline:1px solid var(--line);
  background:none;text-align:center;font:inherit;font-size:.9rem;
  font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield;
}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── the summary column ─────────────────────────────────────────────── */
.basket__summary,.checkout__summary{
  background:var(--bone-2);border:1px solid var(--line-soft);
  padding:clamp(1.25rem,3vw,1.75rem);border-radius:3px;
}
@media (min-width:900px){.basket__summary,.checkout__summary{position:sticky;top:calc(var(--nav-h) + 1.4rem)}}
.basket__summary-title{
  margin:0 0 1.1rem;font-family:var(--sans);font-size:.7rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.totals{margin:1.3rem 0 0}
.totals__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:.92rem}
.totals__row dt{margin:0;color:var(--ink-soft)}
.totals__row dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.totals__row.is-discount{color:var(--gold-deep)}
.totals__row.is-discount dt{color:var(--gold-deep)}
.totals__row.is-total{
  margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:1.3rem;
}
.totals__row.is-total dt{color:var(--ink)}
.totals__code{
  display:inline-block;margin-left:.3rem;padding:.05rem .35rem;border:1px solid currentColor;
  border-radius:2px;font-size:.62rem;letter-spacing:.08em;vertical-align:middle;
}
.totals__drop{
  background:none;border:0;padding:0 .2rem;cursor:pointer;color:inherit;
  font:inherit;font-size:1rem;line-height:1;
}

/* ── promotion code ─────────────────────────────────────────────────── */
.promo label{
  display:block;margin-bottom:.45rem;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);
}
.promo__row{display:flex;gap:.5rem}
.promo__row input{
  flex:1 1 auto;min-width:0;padding:.7rem .8rem;border:1px solid var(--line);
  background:var(--paper);font:inherit;font-size:.9rem;color:var(--ink);
  border-radius:2px;text-transform:uppercase;letter-spacing:.06em;
}
.promo__row input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:1px}
.promo__row .btn{flex:0 0 auto;padding-inline:1.1rem}
.promo__note{margin:.55rem 0 0;font-size:.82rem;min-height:1.1em}
.promo__note.is-ok{color:var(--gold-deep)}
.promo__note.is-bad{color:#9B3025}

.delivery-note{
  margin:1.2rem 0;padding:.9rem 1rem;background:var(--peach-paper);
  border-radius:2px;font-size:.82rem;line-height:1.5;color:var(--ink-soft);
}
.delivery-note p{margin:0}
.delivery-note__title{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.35rem !important;
}

/* ── checkout form ──────────────────────────────────────────────────── */
.block{border:0;margin:0 0 2.4rem;padding:0}
.block legend{
  display:flex;align-items:center;gap:.7rem;width:100%;margin-bottom:1.1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line-soft);
  font-family:var(--serif);font-size:1.35rem;color:var(--ink);
}
.block__step{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:999px;background:var(--clay);color:var(--bone);
  font-family:var(--sans);font-size:.72rem;
}
.field-row{display:grid;gap:1rem}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field__opt{color:var(--ink-mute);font-size:.76em;letter-spacing:0;text-transform:none}
.check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.92rem;color:var(--ink-soft)}
.check input{margin-top:.2rem;accent-color:var(--gold-deep)}
.billing{margin-top:1.4rem}

.methods{display:grid;gap:.6rem}
.method__row{
  display:flex;align-items:flex-start;gap:.8rem;padding:1rem;cursor:pointer;
  border:1px solid var(--line);border-radius:2px;background:var(--paper);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.method__row:hover{border-color:var(--gold-deep)}
.method__row.is-active{border-color:var(--gold-deep);background:var(--bone-2)}
.method__row input{margin-top:.25rem;accent-color:var(--gold-deep)}
.method__body{flex:1 1 auto;min-width:0}
.method__body strong{display:block;font-weight:400;font-size:1rem;color:var(--ink)}
.method__body em{display:block;margin-top:.25rem;font-style:normal;font-size:.83rem;color:var(--ink-soft);line-height:1.5}
.method__price{flex:0 0 auto;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.method.is-active .method__row{border-color:var(--gold-deep);background:var(--bone-2)}

.payment-handoff{
  margin-top:1rem;padding:.95rem 1.05rem;background:var(--bone-2);
  border-left:2px solid var(--gold-deep);font-size:.85rem;line-height:1.55;color:var(--ink-soft);
}
.payment-handoff p{margin:0}
.payment-handoff strong{color:var(--ink)}
.btn--lg{padding-block:1.05rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.is-added{background:var(--gold-deep);border-color:var(--gold-deep)}
.checkout__legal{margin:1rem 0 0;font-size:.78rem;line-height:1.55;color:var(--ink-mute)}

@media (max-width:560px){
  .basket__line{grid-template-columns:4.2rem minmax(0,1fr);}
  .basket__price{grid-column:2;text-align:left;margin-top:.5rem}
}

/* The contact form's underlined fields read as a considered gesture on one
   short form; on a checkout of fifteen of them they read as an unfinished
   page, and a note under one field runs into the label of the next. Inside
   a checkout block the fields are boxed and given room. */
.checkout__form .field{gap:.4rem;margin-bottom:1.15rem}
.checkout__form .field-row{margin-bottom:0}
.checkout__form .field-row .field{margin-bottom:1.15rem}
.checkout__form .field input,
.checkout__form .field select{
  border:1px solid var(--line);border-radius:2px;background:var(--paper);
  padding:.72rem .85rem;font-size:.95rem;
}
.checkout__form .field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.2rem;
}
.checkout__form .field input:focus,
.checkout__form .field select:focus{border-color:var(--gold-deep);box-shadow:0 0 0 2px var(--gold-glow)}
.checkout__form .field label{letter-spacing:.14em;font-size:.66rem}
.checkout__form .field__note{margin:.1rem 0 0;font-size:.78rem;line-height:1.45;color:var(--ink-mute)}
.checkout__form .field input:user-invalid{border-color:#9B3025}

/* the promotion row keeps its code and its remove control on one line */
.totals__row.is-discount dt{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
}
.totals__drop:hover{color:var(--ink)}

/* the order summary lines are narrow, so let the choice wrap tidily */
.basket__lines--compact .basket__choice,
.basket__lines--compact .basket__meta{font-size:.76rem}
.basket__lines--compact .basket__controls{margin-top:.5rem}
/* the code and its remove control travel together, so the × never orphans */
.totals__tag{display:inline-flex;align-items:center;gap:.15rem;white-space:nowrap}
.totals__code{margin-left:0}


/* ── the extras offered on a piece ──────────────────────────────────────── */
.extra{
  display:flex;align-items:flex-start;gap:.75rem;margin-top:1.1rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:2px;background:var(--paper);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.extra:hover{border-color:var(--gold-deep)}
.extra:has(input:checked){border-color:var(--gold-deep);background:var(--bone-2)}
.extra input{margin-top:.25rem;accent-color:var(--gold-deep);flex:0 0 auto}
.extra__body{flex:1 1 auto;min-width:0}
.extra__body strong{display:block;font-weight:400;font-size:.98rem;color:var(--ink)}
.extra__body em{display:block;margin-top:.25rem;font-style:normal;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.extra__price{flex:0 0 auto;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}

/* a photographed piece sits inside its frame rather than being cropped to
   fill it, so the whole ring is visible on the card and on the page */
.product-card__media,.pdp__main,.pdp__frame,.pdp__thumbs a,.basket__thumb{background:var(--paper)}


/* Nearly every product photograph is square (410 of 476). The 4:5 frames
   were drawn for editorial imagery: with `cover` they cropped the top and
   bottom off a ring, and with `contain` they leave a band of empty paper
   above and below it. Square frames for the pieces themselves. */
.product-card__media{aspect-ratio:1}
.pdp__main,.pdp__frame{aspect-ratio:1}
.pdp__thumbs a,.pdp__thumb{aspect-ratio:1}
.product-card__media img{padding:4%}
.pdp__frame img,.pdp__main img{padding:3%}

/* ── where to find us ───────────────────────────────────────────────────── */
.visit{display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media (min-width:820px){.visit{grid-template-columns:1fr 1fr}}
.visit__card{
  background:var(--bone-2);border:1px solid var(--line-soft);
  padding:clamp(1.4rem,3vw,2rem);border-radius:3px;
}
.visit__card h3{
  margin:0 0 1rem;font-family:var(--sans);font-size:.7rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
}
.visit__card address{
  font-style:normal;font-family:var(--serif);font-size:1.6rem;
  line-height:1.35;color:var(--ink);
}
.visit__note{margin:1.1rem 0;font-size:.88rem;line-height:1.65;color:var(--ink-soft)}
.visit .contact-list{margin:0}

/* the contact column in the footer */
.footer__contact a{word-break:break-word}

/* ═══ The hero ═════════════════════════════════════════════════════════════
   The loop runs full bleed, edge to edge, with the words centred on top of
   it. The footage is light throughout — apricot ground, white metal — so the
   type stays dark: over apricot and over a diamond alike, ink reads. A dark
   scrim would only have muddied the thing it sits on.

   What the scrim does instead is even the footage out, so a frame that is
   mostly white diamond and a frame that is mostly apricot give the words the
   same amount of contrast. */
.hero-film{
  --film-ground:#FACCB3;
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;place-items:center;
  min-height:clamp(30rem,78vh,48rem);
  background:var(--film-ground);
  border-bottom:1px solid var(--line-soft);
}
.hero-film__media{position:absolute;inset:0;z-index:0}

/* edge to edge, cropped to fill whatever shape the viewport is */
.hero-film__loop,
.hero-film__media::after{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* the still stands behind the loop in exactly the same box, so whatever
   hides the video — reduced motion, a data saver, a refused autoplay —
   leaves something deliberate rather than an empty frame */
.hero-film__media::after{
  content:"";z-index:-1;
  background:var(--film-ground) url("../img/hero-poster.webp") center/cover no-repeat;
}

/* A light wash overall, a little stronger at the top and bottom so the
   navigation and the band below it keep their edges, and a soft pool behind
   the words themselves. The scrim sits above the picture: a pseudo-element
   paints after its element's children, so without this it would not. */
.hero-film__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(58% 52% at 50% 50%,
      rgba(249,243,237,.82) 0%,
      rgba(249,243,237,.62) 46%,
      rgba(249,243,237,.22) 78%,
      rgba(249,243,237,0) 100%),
    linear-gradient(180deg,
      rgba(249,243,237,.62) 0%,
      rgba(249,243,237,.16) 22%,
      rgba(249,243,237,.16) 76%,
      rgba(249,243,237,.58) 100%);
}

.hero-film__inner{position:relative;z-index:2;padding-block:clamp(3.5rem,8vw,6rem)}
.hero-film__body{
  max-width:46rem;margin-inline:auto;text-align:center;
}
/* The eyebrow is 11px, so it needs 4.5:1. Over the loop the standard gold
   only reaches 4.0, so the hero takes the darkest gold in the ramp — same
   family, 5.9:1 against the brightest frame. */
.hero-film__body .eyebrow{color:#7A4526}
.hero-film__body h1{
  font-size:clamp(2.3rem,5vw,4.1rem);letter-spacing:-.005em;text-wrap:balance;
}
.hero-film__body .lede{
  margin-top:1.5rem;margin-inline:auto;max-width:52ch;
}
.hero-film__body .rule{margin:1.9rem auto 0}
.hero-film__actions{
  display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;justify-content:center;
}
.hero-film__where{
  margin-top:2.4rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
}

@media (max-width:640px){
  .hero-film{min-height:clamp(26rem,82vh,40rem)}
  .hero-film__scrim{
    background:
      radial-gradient(86% 46% at 50% 50%,
        rgba(249,243,237,.88) 0%,
        rgba(249,243,237,.7) 52%,
        rgba(249,243,237,.3) 84%,
        rgba(249,243,237,0) 100%),
      linear-gradient(180deg,
        rgba(249,243,237,.6) 0%,
        rgba(249,243,237,.2) 20%,
        rgba(249,243,237,.2) 74%,
        rgba(249,243,237,.6) 100%);
  }
}

/* Reduced motion is handled in the markup: <picture> serves the still
   instead of the loop, so there is nothing to hide here. */

/* Eight cards over an auto-filled grid land as five and three, which reads
   as a mistake. On the home page the row is fixed at four so eight make two
   clean rows; below that it falls back to the auto-fill. */
@media (min-width:1100px){
  .products--four{grid-template-columns:repeat(4,1fr)}
}

/* ── commissions ────────────────────────────────────────────────────────── */
.commission{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (min-width:960px){.commission{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.commission__lead .lede{margin-top:0}
.commission__lead p+p{margin-top:1.1rem}
.commission__lead .btn{margin-top:2rem}

.commission__steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.4rem,3vw,2rem);
}
@media (min-width:640px){.commission__steps{grid-template-columns:1fr 1fr}}
.commission__steps li{
  padding:1.5rem 1.6rem;background:var(--bone-2);
  border:1px solid var(--line-soft);border-radius:3px;
}
.commission__step{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.8rem;height:1.8rem;padding:0 .4rem;margin-bottom:.9rem;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--serif);font-size:.82rem;color:var(--gold-deep);
}
.commission__steps h3{
  margin:0 0 .6rem;font-family:var(--serif);font-size:1.16rem;
  font-weight:400;color:var(--ink);
}
.commission__steps p{margin:0;font-size:.88rem;line-height:1.65;color:var(--ink-soft)}

.commission__note{
  margin:clamp(2rem,4vw,3rem) 0 0;padding:1.1rem 1.3rem;
  background:var(--peach-paper);border-radius:2px;
  font-size:.9rem;line-height:1.7;color:var(--ink-soft);
}

/* ── Stripe's payment form ──────────────────────────────────────────────
   Stripe renders inside its own frame, so almost nothing here can reach in;
   the appearance of the fields themselves is passed to Stripe as tokens in
   assets/js/checkout-stripe.js. This is only the box around it. */
.stripe-form{
  margin-top:1.25rem;
  padding:1.25rem;
  border:1px solid var(--line-soft);
  background:#fff;
  min-height:3rem;
}
.stripe-form[aria-busy="true"]{
  position:relative;
}
.stripe-form[aria-busy="true"]::after{
  content:"Loading the payment form\2026";
  display:block;
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--ink-mute);
}
@media (max-width:640px){
  .stripe-form{padding:1rem}
}

/* the smaller print under the payment instruction */
.payment-handoff__note{
  margin-top:.55rem;
  font-size:.82rem;
  color:var(--ink-mute);
}

/* a piece that is no longer listed */
.pdp__gone{
  grid-column:1/-1;
  max-width:44rem;
  padding-block:clamp(2rem,6vw,4rem);
}
.pdp__gone h1{margin-top:.5rem}
.pdp__gone .lede{margin-top:1rem}

/* a piece that is no longer listed */
.pdp__gone{
  grid-column:1/-1;
  max-width:44rem;
  padding-block:clamp(2rem,6vw,4rem);
}
.pdp__gone h1{margin-top:.5rem}
.pdp__gone .lede{margin-top:1rem}

/* an empty grid that has something useful to say */
.empty-state{
  grid-column:1/-1;
  max-width:34rem;
  margin:clamp(1.5rem,4vw,3rem) auto;
  text-align:center;
  color:var(--ink-soft);
}
.empty-state p + p{margin-top:.85rem}
.empty-state .btn{margin-top:.6rem}