/* Magik Stones storefront styles */
:root{
  --ink:#121012; --ink-2:#3A333C; --muted:#5E5560; --line:#E6DCE1; --field:#CFC3C9;
  --paper:#FBF8F7; --white:#FFFFFF; --blush:#F4E9EE; --blush-2:#EBDAE2; --stone:#F1ECEE;
  --magenta:#BF1D78; --magenta-light:#E04A9E; --night:#0A0809; --night-2:#241E23; --on-dark:#F3ECEF; --on-dark-2:#CFC6CB;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--magenta)}a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
p{margin:0 0 16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.narrow{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}
.kicker{display:block;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--magenta);font-weight:500}
.lede{font-size:18px;color:#4A424C;font-weight:300;max-width:680px}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:8px;background:var(--white);padding:8px 12px;z-index:99}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;font-family:var(--sans);font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{background:#2a252a;color:var(--paper)}
.btn-outline{background:transparent;color:var(--ink)}.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-magenta{background:var(--magenta);border-color:var(--magenta);color:#fff}.btn-magenta:hover{background:#9e1763;color:#fff}
.btn-light{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}.btn-light:hover{background:var(--on-dark);color:var(--ink)}
.link-under{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* Top bar + header */
.topbar{background:var(--ink);color:var(--on-dark);font-size:13px;letter-spacing:.04em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.cur{display:flex;align-items:center;gap:6px}
.cur span{color:#B8AEB4;margin-right:4px}
.cur button{min-height:32px;min-width:52px;padding:4px 10px;border:1px solid #5E5560;background:transparent;color:var(--on-dark);font-family:var(--sans);font-size:12px;cursor:pointer}
.cur button[aria-pressed="true"]{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.site-header{border-bottom:1px solid var(--line);background:var(--paper);position:relative}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.logo img{height:66px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.nav a{color:var(--ink);text-decoration:none;padding:6px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--magenta)}
.nav-toggle{display:none;min-height:44px;min-width:44px;border:1px solid var(--line);background:transparent;cursor:pointer;font-family:var(--sans)}
@media (max-width:860px){
  .logo img{height:52px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
  .nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--line);padding-top:8px}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
}

/* Hero bands */
.band{background:var(--blush)}
.band-dark{background:var(--ink);color:var(--on-dark)}
.page-hero{padding-top:64px;padding-bottom:56px}
.page-hero h1{font-size:clamp(40px,6vw,60px);margin:12px 0 14px}
.hero{padding-top:72px;padding-bottom:72px}
.hero .grid2{align-items:center}
.hero h1{font-size:clamp(44px,7vw,74px);line-height:1.02}
.hero h1 em,.band-dark h2 em{font-weight:400;color:var(--magenta)}
.band-dark h2 em{color:var(--magenta-light)}
.art{aspect-ratio:4/5;background:var(--blush-2);display:flex;align-items:center;justify-content:center}
.art picture{display:block;width:46%}.art img{width:100%}
@media (max-width:700px){.art{aspect-ratio:4/3}.art picture{width:34%}.hero{padding-top:48px;padding-bottom:48px}.grid2{gap:36px}}
.art-dark{background:var(--night-2);aspect-ratio:1/1}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px}
.stack{display:flex;flex-direction:column;gap:22px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
.section{padding-top:88px;padding-bottom:88px}
.section-sm{padding-top:56px;padding-bottom:56px}
.section h2,.h2{font-size:clamp(34px,4.5vw,48px);margin-bottom:12px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.center{text-align:center}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding-top:30px;padding-bottom:30px}
.promise{display:flex;gap:14px;align-items:flex-start}
.promise svg{flex:none;margin-top:3px}
.promise strong{display:block;font-weight:500;font-size:15px}
.promise span{font-size:14px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
.card{background:var(--white);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:26px}
.card p{margin:0;color:#4A424C;font-weight:300}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.steps li{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.steps .n{font-family:var(--serif);font-size:38px;color:var(--magenta);line-height:1}
.steps strong{font-weight:500;font-size:17px}
.steps span{color:var(--muted);font-size:15px}

/* Prose & legal */
.prose p,.prose li{font-size:17px;color:var(--ink-2);font-weight:300}
.prose ul,.prose ol{padding-left:22px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose h2{font-size:36px;margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose strong{font-weight:500;color:var(--ink)}
.legal-layout{display:flex;flex-wrap:wrap;gap:56px;padding-top:56px;padding-bottom:88px}
.toc{flex:1 1 230px;align-self:flex-start;display:flex;flex-direction:column;gap:8px;font-size:14px}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--magenta)}
.legal{flex:999 1 560px;min-width:0;max-width:820px}
.legal p,.legal li{font-size:16px;color:var(--ink-2);font-weight:300}
.legal h2{font-size:30px;margin:44px 0 12px;scroll-margin-top:24px}
.legal h2:first-of-type{margin-top:0}
.legal ul{padding-left:22px}
.updated{font-size:15px;color:var(--muted);margin:0}

/* Tables */
.table-box{overflow-x:auto;border:1px solid var(--line);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:14px 18px;text-align:left;border-top:1px solid var(--line)}
thead th{background:var(--blush);font-weight:500;border-top:0}
tbody th{font-weight:500}
.table-center th,.table-center td{text-align:center}
tr.hit{background:var(--blush);box-shadow:inset 4px 0 0 var(--magenta)}

/* FAQ */
.faq-group{margin-bottom:48px}
.faq-group h2{font-size:34px;margin-bottom:12px}
.faq-list{border-top:1px solid var(--ink)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;min-height:60px;padding:16px 40px 16px 0;font-size:17px;font-weight:500;position:relative;display:flex;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;color:var(--magenta);font-size:24px;font-weight:400}
details[open] summary::after{content:"−"}
details p{padding:0 40px 18px 0;margin:0;color:#4A424C;font-weight:300}

/* Forms */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:500}
input,select,textarea{font-family:var(--sans);font-size:15px;border:1px solid var(--field);background:var(--white);color:var(--ink);padding:0 14px;min-height:48px;width:100%}
textarea{padding:12px 14px;resize:vertical}
.fields2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px}
.status-ok{color:#1F6B45;font-weight:500;margin:0}

/* Products */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:30px 22px}
.p-card{color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:8px}
.p-img{aspect-ratio:4/5;background:var(--stone);display:flex;align-items:center;justify-content:center;position:relative}
.p-img svg{width:44%}
.tag{position:absolute;top:10px;left:10px;background:var(--paper);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px}
.p-name{font-family:var(--serif);font-size:23px;line-height:1.2}
.p-meta{font-size:13px;color:var(--muted)}
.p-price{font-size:15px;font-weight:500}
.swatches{display:flex;gap:6px}
.sw{width:13px;height:13px;border-radius:50%;display:inline-block}
.sw-y{background:#D9B45A;border:1px solid #B8913A}.sw-w{background:#E4E4E2;border:1px solid #9A9A97}.sw-r{background:#E2B5A4;border:1px solid #B9806C}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.cat-tile{color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:12px}
.cat-tile .p-img{aspect-ratio:1/1;background:var(--blush)}
.cat-tile span{font-family:var(--serif);font-size:24px}
.cat-tile small{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Product page */
.crumbs{font-size:13px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--magenta)}
.pdp{display:flex;flex-wrap:wrap;gap:56px;padding-top:24px;padding-bottom:72px}
.gallery{flex:999 1 520px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gallery .main{grid-column:1/-1;aspect-ratio:1/1}
.gallery>div{aspect-ratio:1/1;background:var(--stone);display:flex;align-items:center;justify-content:center;position:relative}
.gallery .main svg{width:46%}
.gallery .note{font-size:12px;color:var(--muted)}
.buy{flex:1 1 380px;display:flex;flex-direction:column;gap:22px}
.buy h1{font-size:clamp(34px,4vw,44px)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price{font-size:32px;font-weight:500}
fieldset{border:0;margin:0;padding:0}
legend{font-size:14px;font-weight:500;padding:0;margin-bottom:10px}
legend span{font-weight:400;color:var(--muted)}
.karats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.karats button{min-height:48px;border:1px solid var(--field);background:var(--white);font-family:var(--sans);font-size:15px;cursor:pointer;color:var(--ink)}
.karats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.colours{display:flex;gap:12px}
.colours button{width:48px;height:48px;border-radius:50%;border:2px solid transparent;background:transparent;padding:4px;cursor:pointer}
.colours button[aria-pressed="true"]{border-color:var(--ink)}
.colours button span{display:block;width:100%;height:100%;border-radius:50%}
.notice{background:var(--blush);padding:16px 18px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;font-size:14px;margin:0 0 16px}
.spec dt{color:var(--muted)}.spec dd{margin:0}
.buy details summary{min-height:54px;font-size:15px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;padding-top:56px;padding-bottom:56px}
.trust strong{display:block;font-family:var(--serif);font-weight:400;font-size:26px}
.trust span{color:var(--on-dark-2);font-size:14px}

/* Size finder */
.finder{background:var(--ink);color:var(--on-dark);padding:30px;display:flex;flex-direction:column;gap:14px}
.finder input{background:transparent;color:var(--on-dark);border-color:#5E5560;font-size:18px}
.finder .out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.finder .out div{background:var(--night-2);padding:12px}
.finder .out small{display:block;font-size:12px;letter-spacing:.14em;color:#B8AEB4}
.finder .out b{font-family:var(--serif);font-weight:400;font-size:26px}
.finder a{color:var(--magenta-light)}

/* Newsletter + footer */
.news form{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;margin:0 auto;justify-content:center}
.news input{flex:1 1 260px;background:transparent;color:var(--on-dark);border-color:#5E5560}
.news button{min-height:48px;padding:0 28px;border:0;background:var(--magenta-light);color:var(--ink);font-family:var(--sans);font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;cursor:pointer}
.site-footer{background:var(--night);color:#B8AEB4;font-size:14px}
.site-footer a{color:#B8AEB4;text-decoration:none}.site-footer a:hover{color:var(--on-dark)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;padding-top:64px;padding-bottom:32px}
.foot-grid nav{display:flex;flex-direction:column;gap:8px}
.foot-grid h2{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);font-weight:500;margin-bottom:4px}
.foot-brand{display:flex;flex-direction:column;gap:10px}
.foot-brand img{width:210px;margin-bottom:6px}
.foot-base{border-top:1px solid #2A2328;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:32px;font-size:13px}
.foot-base nav{display:flex;flex-wrap:wrap;gap:18px}