/* ============================================================
   SILVER JEWELLERY HOUSE — site.css
   Design tokens live in :root. Everything else follows them.
   ============================================================ */

:root{
  /* colour — white, black, grey only */
  --white:#FFFFFF;
  --ink:#111111;          /* headings, logo, buttons */
  --body:#333333;         /* body copy */
  --muted:#767676;        /* labels, meta, placeholders */
  --line:#E4E4E4;         /* hairlines */
  --line-soft:#EFEFEF;

  /* type */
  --font:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-micro:.6875rem;    /* 11px — announcement, labels */
  --fs-small:.8125rem;    /* 13px — meta, nav */
  --fs-base:.9375rem;     /* 15px — body */
  --fs-lead:1.0625rem;    /* 17px — intro copy */
  --fs-h3:1.25rem;        /* 20px */
  --fs-h2:1.75rem;        /* 28px */
  --fs-h1:2.75rem;        /* 44px */
  --track-wide:.16em;
  --track-mid:.09em;

  /* rhythm */
  --wrap:1560px;
  --gutter:2rem;
  --sec:5.5rem;           /* vertical section padding */
  --gap-col:1.5rem;
  --gap-row:3rem;

  --bar:2.375rem;         /* announcement bar height */
  --head:4.75rem;         /* header height */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--font);font-size:var(--fs-base);font-weight:400;
  line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}  /* let aspect-ratio win over the width/height attributes */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- primitives ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .62)}

.label{
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--muted);font-weight:500;
}
h1,h2,h3{color:var(--ink);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}

.eyebrow{
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;
}

/* section header: title left, "see all" right — catalog convention */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:2.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.sec-head__title{
  font-size:1.125rem;letter-spacing:var(--track-mid);text-transform:uppercase;
  color:var(--ink);font-weight:500;
}
.sec-head p{max-width:46ch;font-size:var(--fs-small);color:var(--muted);margin-top:.4rem}

/* buttons */
.btn{
  display:inline-block;padding:1.0625rem 2.5rem;background:var(--ink);color:var(--white);
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  font-weight:500;border:1px solid var(--ink);transition:background .2s,color .2s;
}
.btn:hover{background:var(--white);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}

/* underlined text link — the reference's CTA style under image blocks */
.tlink{
  display:inline-block;font-size:var(--fs-micro);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--ink);font-weight:500;
  padding-bottom:.3rem;border-bottom:1px solid var(--ink);
  transition:border-color .2s,color .2s;
}
.tlink:hover{color:var(--muted);border-color:var(--muted)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--white);padding:.75rem 1.25rem;font-size:var(--fs-small);
}
.skip:focus{left:0}

/* ---------- announcement bar ---------- */
.announce{
  background:var(--white);border-bottom:1px solid var(--line-soft);
  height:var(--bar);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.announce__track{position:relative;width:100%;height:100%}
.announce__item{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;text-align:center;padding-inline:3rem;
  opacity:0;transform:translateY(.4rem);transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
.announce__item.is-on{opacity:1;transform:none;pointer-events:auto}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid var(--line-soft);
}
.header__inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--head);display:flex;align-items:center;gap:2rem;
}
.brand{
  font-size:.9375rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:500;white-space:nowrap;line-height:1.1;
}
.brand span{display:block;font-size:.5625rem;letter-spacing:.34em;color:var(--muted);font-weight:400;margin-top:.15rem}
.nav{display:flex;gap:1.75rem;margin-inline:auto}
.nav a{
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;padding-block:.35rem;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.header__tools{display:flex;align-items:center;gap:1.25rem;margin-left:auto}
.iconbtn{
  width:2.25rem;height:2.25rem;display:grid;place-items:center;color:var(--ink);
}
.iconbtn svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:1.5}
.header__tel{
  font-size:var(--fs-micro);letter-spacing:var(--track-mid);color:var(--ink);
  white-space:nowrap;font-weight:500;
}
.burger{display:none;width:2.25rem;height:2.25rem;place-items:center}
.burger span{display:block;width:1.125rem;height:1px;background:var(--ink);margin:.1875rem 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.3rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.3rem) rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed;inset:calc(var(--head) + var(--bar)) 0 auto 0;background:var(--white);
  border-bottom:1px solid var(--line);z-index:99;padding:1.5rem var(--gutter) 2rem;
  max-height:calc(100dvh - var(--head) - var(--bar));overflow:auto;
}
.menu[hidden]{display:none}
.menu a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-small);letter-spacing:var(--track-mid);text-transform:uppercase;color:var(--ink);font-weight:500}
.menu__foot{margin-top:1.5rem;display:grid;gap:.4rem;font-size:var(--fs-small);color:var(--muted)}
.menu__foot a{border:0;padding:0;text-transform:none;letter-spacing:0;font-weight:400;color:var(--body)}

/* search panel */
.search{
  border-bottom:1px solid var(--line);background:var(--white);
  position:sticky;top:var(--head);z-index:98;
}
.search[hidden]{display:none}
.search__inner{
  max-width:var(--wrap);margin-inline:auto;padding:1.5rem var(--gutter);
  display:flex;align-items:center;gap:1rem;
}
.search input{
  flex:1;border:0;border-bottom:1px solid var(--line);background:none;padding:.75rem 0;
  font-size:1.125rem;color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:0;border-bottom-color:var(--ink)}
.search__close{font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted)}
.search__count{font-size:var(--fs-small);color:var(--muted);padding:0 var(--gutter) 1.25rem;max-width:var(--wrap);margin-inline:auto}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line-soft)}
.hero__media{background:var(--white)}
.hero__media picture,.promo__media picture{display:block}
.hero__media img{width:100%;height:auto;aspect-ratio:12/5;max-height:38rem;object-fit:contain}
.hero__copy{
  max-width:var(--wrap);margin-inline:auto;padding:3.25rem var(--gutter) 4.5rem;
  text-align:center;
}
.hero__copy .eyebrow{display:block;margin-bottom:1.125rem}
.hero__copy h1{max-width:20ch;margin-inline:auto}
.hero__copy p{max-width:52ch;margin:1.125rem auto 2.25rem;color:var(--body);font-size:var(--fs-lead)}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- two-column split ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col)}
.blk__media{display:block;overflow:hidden;background:var(--white)}
.blk__media img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .7s var(--ease)}
.blk:hover .blk__media img{transform:scale(1.035)}
.blk__body{padding-top:1.5rem}
.blk__body h3{margin-bottom:.5rem}
.blk__body p{font-size:var(--fs-small);color:var(--muted);max-width:44ch;margin-bottom:1.125rem}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap-col);row-gap:var(--gap-row)}
.card{display:block}
.card__media{overflow:hidden;background:var(--white);position:relative}
.card__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__flag{
  position:absolute;top:.75rem;left:.75rem;background:var(--white);color:var(--ink);
  font-size:var(--fs-micro);letter-spacing:var(--track-mid);text-transform:uppercase;
  padding:.3rem .55rem;border:1px solid var(--line);font-weight:500;
}
.card__body{padding-top:1rem}
.card__name{font-size:var(--fs-base);color:var(--ink);font-weight:500;line-height:1.3}
.card__type{font-size:var(--fs-small);color:var(--muted);margin-top:.2rem}
.card__price{font-size:var(--fs-small);color:var(--ink);margin-top:.5rem;letter-spacing:.02em;font-weight:500}
.card__price s{color:var(--muted);font-weight:400;margin-left:.4rem}
.grid-more{margin-top:3.25rem;text-align:center}

/* ---------- full-width promo ---------- */
.promo{border-block:1px solid var(--line-soft)}
.promo__media{overflow:hidden}
.promo__media img{width:100%;height:auto;aspect-ratio:60/21;max-height:27rem;object-fit:contain}
.promo__body{
  max-width:var(--wrap);margin-inline:auto;padding:2.75rem var(--gutter) 3.5rem;text-align:center;
}
.promo__body h2{margin-bottom:.75rem}
.promo__body p{max-width:56ch;margin:0 auto 1.75rem;color:var(--body)}

/* ---------- 4-tile category grid ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-col)}
.tile__media{overflow:hidden;background:var(--white)}
.tile__media img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.05)}
.tile__label{
  display:block;text-align:center;padding-top:1rem;
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;
}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about h2{margin-bottom:1.25rem}
.about p + p{margin-top:1rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.25rem;
  padding-top:2rem;border-top:1px solid var(--line)}
.facts dt{font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:500}
.facts dd{margin:.4rem 0 0;font-size:var(--fs-small);color:var(--ink)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem}
.cdl{display:grid;gap:1.75rem;margin-top:.5rem}
.cdl dt{font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--muted);font-weight:500}
.cdl dd{margin:.4rem 0 0;font-size:var(--fs-base);color:var(--ink)}
.cdl a:hover{text-decoration:underline;text-underline-offset:3px}
.hours{border:1px solid var(--line);padding:2rem}
.hours h3{font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:1.25rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-soft);font-size:var(--fs-small)}
.hours li:last-child{border-bottom:0}
.hours li span:last-child{color:var(--ink)}
.hours__note{margin-top:1.25rem;font-size:var(--fs-small);color:var(--muted)}

/* ---------- footer ---------- */
.footer{background:var(--white);border-top:1px solid var(--line);padding-block:4rem 2.5rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.6fr;gap:3rem}
.footer h3{
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-bottom:1.25rem;
}
.footer li{margin-bottom:.6rem}
.footer li a,.footer address{font-size:var(--fs-small);color:var(--body);font-style:normal;line-height:1.9}
.footer li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.footer__blurb{font-size:var(--fs-small);color:var(--muted);max-width:34ch;margin-top:1rem}
.news p{font-size:var(--fs-small);color:var(--muted);margin-bottom:1rem;max-width:38ch}
.news__row{display:flex;border-bottom:1px solid var(--ink)}
.news__row input{flex:1;border:0;background:none;padding:.7rem 0;font-size:var(--fs-small)}
.news__row input:focus{outline:0}
.news__row button{
  font-size:var(--fs-micro);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink);font-weight:500;padding-left:1rem;
}
.news__note{font-size:var(--fs-micro);color:var(--muted);margin-top:.75rem;letter-spacing:.02em;line-height:1.6}
.news__ok{font-size:var(--fs-small);color:var(--ink);margin-top:.75rem}
.footer__bar{
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:var(--fs-micro);color:var(--muted);letter-spacing:.03em;
}
.footer__bar nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer__bar a:hover{color:var(--ink)}

/* ---------- legal page ---------- */
.legal{max-width:52rem;margin-inline:auto;padding-block:var(--sec)}
.legal h1{margin-bottom:.75rem}
.legal .meta{font-size:var(--fs-small);color:var(--muted);padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal .toc{margin:2rem 0 3rem;display:grid;gap:.5rem}
.legal .toc a{font-size:var(--fs-small);color:var(--body)}
.legal .toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal section{margin-top:3rem;scroll-margin-top:8rem}
.legal h2{font-size:var(--fs-h3);margin-bottom:1rem}
.legal h3{font-size:var(--fs-base);margin:1.75rem 0 .6rem}
.legal p{margin-bottom:1rem}
.legal ul{margin:0 0 1rem;display:grid;gap:.5rem}
.legal li{padding-left:1.1rem;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:.7em;width:.375rem;height:1px;background:var(--muted)}
.legal .box{border:1px solid var(--line);padding:1.75rem;margin-top:1rem}
.legal .box p:last-child{margin-bottom:0}
.legal a[href^="mailto"],.legal a[href^="tel"]{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(1rem);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:74rem){
  :root{--wrap:100%;--sec:4.5rem}
  .nav{display:none}
  .burger{display:grid}
  .header__tel{display:none}
  .grid,.tiles{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .about,.contact{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:52rem){
  :root{--gutter:1.25rem;--sec:3.5rem;--gap-row:2.25rem;--fs-h1:2rem;--fs-h2:1.4rem;--bar:3.5rem}
  .announce__item{padding-inline:1.25rem;line-height:1.4}
  .grid,.tiles{grid-template-columns:repeat(2,1fr)}
  .split2{grid-template-columns:1fr;gap:2.5rem}
  .hero__media img{aspect-ratio:6/5;max-height:none}
  .promo__media img{aspect-ratio:12/7;max-height:none}
  .facts{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr;gap:2.25rem}
  .footer__bar{flex-direction:column;gap:1rem}
  .hero__cta .btn{width:100%;text-align:center}
}
@media (max-width:30rem){
  .tiles{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr}
}

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

@media print{
  .header,.announce,.menu,.search,.footer__bar nav{display:none}
  body{color:#000}
}

/* sub-heading inside a combined grid section */
.sec-head--sub{margin-top:4rem;scroll-margin-top:9rem}
@media (max-width:52rem){.sec-head--sub{margin-top:2.75rem}}
#rings,#necklaces,#earrings,#about,#contact,#home{scroll-margin-top:6.5rem}