/* Kanaka Jewellers.
   The visual language is the jeweller's display case: white paper and a soft porcelain blue
   that sits opposite gold on the colour wheel, so the gold in every photograph reads warmer.
   The site itself never uses gold; deep navy carries text and actions.
   IBM Plex Sans for reading, IBM Plex Serif (light) for display. Large photography, confident type,
   solid surfaces, small radii. No gradients on surfaces, no glass, few shadows. */
:root{
  --page:#FFFFFF; --soft:#F3F6F8; --stone:#E4EAEE;
  /* porcelain: the signature light surface (hero, rates, footer) */
  --mist:#E8EEF2; --mist2:#D6E0E7;
  --ink:#13202B; --ink2:#33424E; --muted:#64717C; --line:#E2E8EC; --line2:#CBD5DC;
  /* navy: primary buttons, selected states, active tabs. Text on it is white. */
  --navy:#1B2D3C; --navyHover:#0F1C27;
  /* slate: icons, hairline details, step numerals */
  --slate:#6F8494;
  /* emerald: the bag count, the one jewel-coloured detail in the interface */
  --emerald:#17694F;
  --garnet:#A3253A; --ok:#2C6B44;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --wrap:1360px; --r:4px;
  color-scheme:light; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.6 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0;font-weight:400}
h1{font:300 46px/1.08 var(--serif);letter-spacing:-.015em}
h2{font:300 42px/1.1 var(--serif);letter-spacing:-.015em}
h3{font-size:16px;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.bi{line-height:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border:1px solid var(--navy);border-radius:var(--r);background:var(--navy);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--navyHover);border-color:var(--navyHover)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.line:hover{border-color:var(--ink)}
.btn.light{background:#fff;border-color:#fff;color:var(--navy)}
.btn.light:hover{background:var(--soft);border-color:var(--soft)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{border-color:#fff}
.btn.block{width:100%}
.btn[disabled]{background:var(--stone);border-color:var(--stone);color:var(--muted);cursor:not-allowed}
.textlink{font-weight:600;border-bottom:1px solid var(--slate);padding-bottom:2px}
.textlink:hover{border-color:var(--ink)}

/* header: navigation left, wordmark centred, actions right */
.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;justify-self:start}
.brand b{font:400 27px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;margin-right:-.32em}
.brand small{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);margin-right:-.3em}
.mainnav{display:flex;gap:30px;align-self:stretch;justify-self:center}
.mainnav a{display:flex;align-items:center;font-size:14.5px;color:var(--ink2);font-weight:500;border-bottom:2px solid transparent;padding-top:2px}
.mainnav a:hover{color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--navy)}
.acts{display:flex;align-items:center;gap:4px;justify-self:end}
.acts .rateslink{font-size:14.5px;font-weight:500;color:var(--ink2);margin-right:14px}
.acts .rateslink:hover{color:var(--ink)}
.ib{position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:var(--r);color:var(--ink);font-size:19px;padding:0}
.ib:hover{background:var(--soft)}
.ib .piece{width:25px;height:25px}
/* item count: an emerald tile in the open space beside the pendant */
.ib .count{position:absolute;bottom:2px;right:-6px;min-width:18px;height:18px;padding:0 5px;text-align:center;font:600 11px/18px var(--sans);font-style:normal;background:var(--emerald);color:#fff;border-radius:5px;box-shadow:0 0 0 2px #fff}
.piece.sm{width:18px;height:18px;flex:none}
.menubtn{display:none}
.searchbar{border-top:1px solid var(--line);background:#fff}
.searchbar form{display:flex;gap:10px;padding:16px 0;max-width:720px;margin:0 auto}
.searchbar input{flex:1}
.mobilenav{display:none}

/* forms */
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink2)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r);background:#fff}
textarea{height:auto;padding:12px 14px;resize:vertical}
select{appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313202B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field .err{font-size:13px;color:var(--garnet)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--garnet)}

/* segmented choice: selected gets a solid fill */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:#fff}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:0 18px;line-height:46px;font-weight:500;color:var(--ink2)}
.seg label+label span{border-left:1px solid var(--line2)}
.seg input:checked+span{background:var(--navy);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--slate);outline-offset:-3px}

/* option rows: selected gets a stronger border */
.opt{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;cursor:pointer}
.opt+.opt{margin-top:10px}
.opt input{margin:4px 0 0;accent-color:var(--navy);width:17px;height:17px;flex:none}
.opt b{display:block;font-weight:600}
.opt small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.opt .amt{margin-left:auto;font-weight:600;white-space:nowrap}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- home ---------- */

/* hero: porcelain field, headline and today's rates on the left,
   a portrait with a shoppable piece laid over its corner on the right */
.hero{background:var(--mist);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;min-height:clamp(720px,calc(100svh - 85px),940px);padding-top:72px;padding-bottom:72px}
.hero .copy{display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(52px,5.4vw,86px);line-height:1.02;letter-spacing:-.03em;max-width:9.5ch}
.hero .lead{font-size:18px;line-height:1.65;color:var(--ink2);max-width:44ch;margin-top:28px}
.hero .ctas{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.hero .today{margin-top:64px;padding-top:26px;border-top:1px solid var(--mist2)}
.hero .today dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 44px;margin:0}
.hero .today dd{margin:0;font:300 30px/1 var(--serif);letter-spacing:-.01em}
.hero .today dt{font-size:13px;color:var(--muted);margin-top:8px}
.hero .today dl>div{display:flex;flex-direction:column-reverse}
.hero .today p{font-size:13.5px;color:var(--muted);margin-top:18px}
.hero .today p a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line2)}
.hero .today p a:hover{border-color:var(--ink)}
.hero .art{position:relative;min-height:560px}
.hero .big{position:absolute;top:0;right:0;bottom:0;width:80%;margin:0;overflow:hidden;border-radius:var(--r);background:var(--stone)}
.hero .big img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero .pick{position:absolute;left:0;bottom:56px;width:min(42%,280px);background:#fff;padding:10px;border-radius:var(--r);box-shadow:0 20px 44px rgba(19,32,43,.16)}
.hero .pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.hero .pick span{display:block;padding:14px 6px 6px;font-weight:600;font-size:14.5px;line-height:1.35}
.hero .pick small{display:block;padding:0 6px 6px;font-size:13.5px;color:var(--muted)}
.hero .pick:hover span{text-decoration:underline;text-underline-offset:3px}

/* assurance row */
.assurances{border-bottom:1px solid var(--line)}
.assurances .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.assurances .wrap>div{display:flex;gap:14px;align-items:flex-start;padding:28px 28px 28px 0}
.assurances .wrap>div+div{padding-left:28px;border-left:1px solid var(--line)}
.assurances .bi{font-size:22px;color:var(--slate);padding-top:2px}
.assurances b{display:block;font-weight:600;font-size:14.5px}
.assurances span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* sections */
.sec{padding:112px 0}
.sec.tight{padding:64px 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sechead p{color:var(--muted);margin-top:12px;max-width:52ch;font-size:16px}

/* category mosaic: bridal takes the big tile */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,300px));gap:12px}
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--stone);color:#fff;isolation:isolate}
.tile:first-child{grid-column:span 2;grid-row:span 2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tile::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(to top,rgba(10,18,26,.66),rgba(10,18,26,0));z-index:-1}
.tile:hover img{transform:scale(1.05)}
.tile .lbl{position:absolute;left:24px;right:24px;bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tile b{font:300 26px/1.1 var(--serif)}
.tile:first-child b{font-size:40px}
.tile span{font-size:13px;color:rgba(255,255,255,.82);white-space:nowrap}
.alsocats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:14.5px;color:var(--muted)}
.alsocats a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line2)}
.alsocats a:hover{border-color:var(--ink)}

/* featured piece */
.feature{background:var(--soft)}
.feature .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:88px;align-items:center}
.feature figure{margin:0;aspect-ratio:1/1.05;overflow:hidden;border-radius:var(--r)}
.feature figure img{width:100%;height:100%;object-fit:cover}
.feature .note{font-size:14px;color:var(--muted);margin-bottom:18px}
.feature h2{font-size:clamp(36px,3.6vw,54px)}
.feature .desc{font-size:16.5px;color:var(--ink2);margin-top:22px;max-width:46ch}
.feature .figs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:36px;margin:34px 0 0;padding:22px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.feature .figs dt{font-size:12.5px;color:var(--muted)}
.feature .figs dd{margin:4px 0 0;font:400 22px/1.1 var(--serif)}
.feature .fprice{font:300 40px/1.1 var(--serif);margin-top:28px}
.feature .fprice small{display:block;font:400 13.5px/1.5 var(--sans);color:var(--muted);margin-top:6px}
.feature .ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* product grid + cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 20px}
.card{position:relative}
.card .ph{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--soft)}
.card .ph .imglink{display:block;height:100%}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.05)}
.card .tag{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:5px 9px;border-radius:2px}
/* quick actions: add to bag and Buy Now (WhatsApp), shown on hover over the photo */
.card .qbar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.card:hover .qbar,.card .qbar:focus-within{opacity:1;transform:none}
.card .qbar>*{flex:1;min-width:0}
.card .qadd{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:3px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,color .15s}
.card .qadd:hover{background:var(--navy);color:#fff}
.card .qadd.buy{background:var(--navy);color:#fff}
.card .qadd.buy:hover{background:var(--emerald)}
.card h3{margin-top:16px;font-size:15.5px;font-weight:500;line-height:1.35}
.card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.card .meta{font-size:13.5px;color:var(--muted);margin-top:3px}
.card .price{margin-top:8px;font-weight:600;font-size:16px}
.card .stock{font-size:13px;color:var(--garnet);font-weight:500;margin-left:8px}
.card.soldout .ph img{opacity:.6}

/* rate board */
.board{background:var(--mist);color:var(--ink)}
.board .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:80px;padding-top:112px;padding-bottom:112px;align-items:start}
.board .sub{color:var(--muted);margin-top:14px;font-size:16px}
.rates{width:100%;border-collapse:collapse;margin-top:40px}
.rates th{text-align:left;font-size:12.5px;font-weight:500;color:var(--muted);padding:0 0 14px;border-bottom:1px solid var(--mist2)}
.rates td{padding:22px 0 22px 16px;border-bottom:1px solid var(--mist2);vertical-align:middle;font-size:15px}
.rates td:first-child{padding-left:0}
.rates th:not(:first-child),.rates td:not(:first-child){text-align:right}
.rates td:first-child b{font:300 34px/1 var(--serif);color:var(--ink)}
.rates td:first-child span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px}
.rates td.sell{font-weight:600;font-size:17px}
.rates td.buyback{color:var(--muted)}
.board .note{font-size:13.5px;color:var(--muted);margin-top:20px}

/* estimator: a white card on the red board */
.est{background:#fff;color:var(--ink);border-radius:var(--r);padding:36px}
.est h3{font:300 30px/1.15 var(--serif)}
.est .sub{color:var(--muted);font-size:14.5px;margin-top:8px}
.est form{display:grid;gap:20px;margin-top:28px}
.est .row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.est .out{margin-top:4px;padding-top:22px;border-top:1px solid var(--line)}
.est .out small{display:block;font-size:13px;color:var(--muted)}
.est .out strong{display:block;font:300 44px/1.15 var(--serif);color:var(--navy);margin-top:4px;letter-spacing:-.01em}
.est .out dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 0 0;font-size:14px;color:var(--muted)}
.est .out dd{margin:0;text-align:right;color:var(--ink);font-weight:500}

/* process: a real sequence, so the steps are numbered */
.process .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center}
.process figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)}
.process figure img{width:100%;height:100%;object-fit:cover}
.process .intro{font-size:16.5px;color:var(--ink2);margin-top:20px;max-width:50ch}
.steps{list-style:none;margin:40px 0 0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:2px 8px;padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s);grid-row:span 2;font:300 28px/1 var(--serif);color:var(--slate)}
.steps b{font-weight:600;font-size:16px}
.steps span{color:var(--muted);font-size:14.5px}

/* showroom: photograph with a solid card over it */
.visit{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--stone)}
.visit>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.visit .wrap{position:relative;width:100%}
.visit .card2{background:#fff;max-width:480px;padding:44px;border-radius:var(--r)}
.visit h2{font-size:38px}
.visit .card2>p{color:var(--ink2);margin-top:14px}
.visit dl{display:grid;grid-template-columns:110px 1fr;gap:12px 16px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px}
.visit dt{color:var(--muted)}
.visit dd{margin:0;font-weight:500}
.visit dd a:hover{text-decoration:underline}
.visit .ctas{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}

/* footer */
.foot{background:var(--mist);color:var(--ink2);font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-top:80px;padding-bottom:40px}
.foot .fbrand b{display:block;font:300 34px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.foot .fbrand p{margin-top:20px;max-width:38ch;line-height:1.7}
.foot h4{margin:0 0 16px;color:var(--ink);font-size:14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .base{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid var(--mist2);font-size:13px;color:var(--muted);flex-wrap:wrap}

/* ---------- inner pages ---------- */
.pagehead{padding:48px 0 0}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.pagehead h1{font-size:52px}
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-top:32px;padding-top:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:0 0 14px;color:var(--muted);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--navy);font-weight:600}
/* count as a small raised numeral beside the tab name */
.tabs a span{display:inline-block;vertical-align:top;margin:-3px 0 0 5px;font-size:11px;font-weight:600;line-height:1;color:var(--slate);font-variant-numeric:tabular-nums}
.tabs a[aria-current="page"] span{color:var(--ink)}

/* shop: toolbar spans both columns so the filters and the first row of products start on one line */
.shop{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"toolbar toolbar" "filters results";column-gap:56px;padding:0 0 112px}
.shop>.toolbar{grid-area:toolbar}
.shop>.results{grid-area:results;min-width:0}
.filters{grid-area:filters;display:grid;gap:32px;align-content:start;position:sticky;top:108px;align-self:start}
.filters fieldset{border:0;margin:0;padding:0;display:grid;gap:2px}
.filters legend{padding:0;margin-bottom:10px;font-size:12px;font-weight:600;color:var(--ink)}
.check{display:flex;align-items:center;gap:12px;min-height:34px;font-size:14.5px;cursor:pointer;color:var(--ink2)}
.check:hover{color:var(--ink)}
.check input{width:17px;height:17px;accent-color:var(--navy);margin:0;flex:none}
.check span{margin-left:auto;min-width:22px;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.filters .clear{justify-self:start;background:none;border:0;border-bottom:1px solid var(--slate);padding:0 0 2px;font-size:14px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0;margin-bottom:24px}
.toolbar #result-count{font-size:14px;color:var(--muted)}
.toolbar select{width:auto;height:44px}
.toolbar .fbtn{display:none}
.grid.three{grid-template-columns:repeat(3,1fr)}
.empty{padding:72px 0;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:300 30px/1.3 var(--serif);margin-bottom:8px}
.empty .btn{margin-top:24px}

/* product */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:80px;padding:28px 0 96px}
.pdp .gallery{align-self:start}
.pdp .gallery figure{margin:0;aspect-ratio:1/1.08;overflow:hidden;border-radius:var(--r);background:var(--soft)}
.pdp .gallery img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:50px}
.pdp .meta{color:var(--muted);margin-top:12px}
.pdp .price{font:300 40px/1.2 var(--serif);margin-top:26px;color:var(--navy)}
.pdp .ratenote{font-size:13.5px;color:var(--muted);margin-top:6px}
.breakdown{margin:26px 0 0;border-top:1px solid var(--line)}
.breakdown div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.breakdown dt{color:var(--ink2)}
.breakdown dd{margin:0;font-weight:500}
.breakdown .tot dt,.breakdown .tot dd{font-weight:700;color:var(--ink)}
.stockline{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:14.5px;font-weight:500}
.stockline .bi{font-size:16px}
.stockline.ok{color:var(--ok)}
.stockline.low{color:var(--garnet)}
.stockline.out{color:var(--muted)}
.buybox{display:grid;gap:14px;margin-top:24px}
.buybox .row{display:grid;grid-template-columns:auto 1fr;gap:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--r);background:#fff;height:52px}
.qty button{width:44px;height:100%;border:0;background:none;font-size:17px;color:var(--ink2)}
.qty button:hover{background:var(--soft)}
.qty button[disabled]{color:var(--line2);cursor:not-allowed;background:none}
.qty output{min-width:30px;text-align:center;font-weight:600}
.qty.sm{height:40px}
.qty.sm button{width:36px}
.pdp .about{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.pdp .about p{color:var(--ink2)}
.specs{margin:22px 0 0;display:grid;grid-template-columns:140px 1fr;gap:11px 18px;font-size:14.5px}
.specs dt{color:var(--muted)}
.specs dd{margin:0}
.assure{margin-top:30px;display:grid;gap:14px;font-size:14px;color:var(--ink2)}
.assure div{display:flex;gap:12px}
.assure .bi{color:var(--slate);font-size:17px;padding-top:1px}

/* bag + checkout */
.cartwrap{display:grid;grid-template-columns:1fr 400px;gap:56px;padding:36px 0 112px;align-items:start}
.lines{border-top:1px solid var(--line)}
.bagline{display:grid;grid-template-columns:104px 1fr auto;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}
.bagline .ph{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.bagline .ph img{width:100%;height:100%;object-fit:cover}
.bagline h3{font-weight:500;font-size:16px}
.bagline h3 a:hover{text-decoration:underline}
.bagline .meta{font-size:13.5px;color:var(--muted);margin-top:3px}
.bagline .ctl{display:flex;align-items:center;gap:18px;margin-top:16px}
.bagline .rm{background:none;border:0;padding:0;font-size:13.5px;color:var(--muted);text-decoration:underline}
.bagline .rm:hover{color:var(--ink)}
.bagline .amt{font-weight:600;text-align:right}
.bagline .amt small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.summary{background:var(--soft);border-radius:var(--r);padding:30px;position:sticky;top:108px}
.summary h2{font-size:28px;margin-bottom:18px}
.summary dl{margin:0}
.summary dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14.5px}
.summary dt{color:var(--ink2)}
.summary dd{margin:0;font-weight:500;text-align:right}
.summary .tot{border-top:1px solid var(--line2);margin-top:8px;padding-top:16px}
.summary .tot dt,.summary .tot dd{font-weight:700;font-size:17px;color:var(--ink)}
.summary .btn{margin-top:22px}
.summary .fine{font-size:13px;color:var(--muted);margin-top:14px}
.mini{display:grid;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.mini div{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;font-size:14px}
.mini img{width:52px;height:64px;object-fit:cover;border-radius:3px;background:var(--stone)}
.mini small{display:block;color:var(--muted);font-size:12.5px}
.form{display:grid;gap:40px}
.form section{display:grid;gap:16px}
.form h2{font-size:30px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.done{max-width:660px;padding:72px 0 112px}
.done .ref{display:block;margin-top:16px;font-size:16px;color:var(--ink2)}
.done .ref b{color:var(--ink);font-weight:700}
.done p{margin-top:16px;color:var(--ink2)}
.done .bankbox{margin-top:26px;background:var(--soft);border-radius:var(--r);padding:24px 26px}
.done .bankbox dl{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:12px 0 0;font-size:14.5px}
.done .bankbox dt{color:var(--muted)}
.done .bankbox dd{margin:0;font-weight:500}
.done .ctas{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* toast */
.toast{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;gap:18px;align-items:center;background:var(--ink);color:#fff;padding:15px 20px;border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14.5px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast a{color:#BFD2DF;font-weight:600}

/* responsive */
@media (max-width:1180px){
  .mainnav{gap:20px}
  .acts .rateslink{display:none}
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .board .wrap{grid-template-columns:1fr;gap:56px}
  .feature .wrap,.process .wrap{gap:56px}
  .assurances .wrap{grid-template-columns:repeat(2,1fr)}
  .assurances .wrap>div:nth-child(3){padding-left:0;border-left:0}
  .assurances .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .wrap{padding:0 20px}
  .top .wrap{height:68px;grid-template-columns:auto 1fr auto}
  .mainnav{display:none}
  .menubtn{display:grid;order:-1}
  .brand b{font-size:21px}
  .brand small{display:none}
  .mobilenav{display:block;border-top:1px solid var(--line);background:#fff}
  .mobilenav a{display:block;padding:15px 20px;border-bottom:1px solid var(--line);font-weight:500}
  .mobilenav a[aria-current="page"]{color:var(--navy)}
  .hero .wrap{grid-template-columns:1fr;gap:0;min-height:0;padding:0 0 56px}
  .hero .art{order:-1;min-height:0;aspect-ratio:4/3.6;margin-bottom:44px}
  .hero .big{width:100%;border-radius:0}
  .hero .pick{left:20px;right:auto;bottom:-28px;width:auto;max-width:300px;padding:8px 16px 8px 8px;display:grid;grid-template-columns:60px 1fr;column-gap:12px;align-items:center}
  .hero .pick img{width:60px;grid-row:span 2}
  .hero .pick span{font-size:13.5px;padding:0;align-self:end}
  .hero .pick small{padding:2px 0 0;font-size:12.5px;align-self:start}
  .hero .copy{padding:36px 20px 0}
  .hero h1{max-width:none}
  .sec{padding:72px 0}
  h2{font-size:34px}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:340px;grid-auto-rows:220px}
  .tile:first-child{grid-column:span 2;grid-row:span 1}
  .feature .wrap,.process .wrap{grid-template-columns:1fr}
  .board .wrap{padding-top:72px;padding-bottom:72px}
  .visit{min-height:0;display:block;padding:0}
  .visit>img{position:static;height:300px}
  .visit .wrap{padding:0}
  .visit .card2{max-width:none;border-radius:0;padding:36px 20px}
  .shop{grid-template-columns:minmax(0,1fr);grid-template-areas:"toolbar" "filters" "results";grid-template-rows:auto;padding-top:24px}
  .toolbar{flex-wrap:wrap}
  .toolbar #result-count{flex-basis:100%}
  .toolbar select{flex:1;min-width:0}
  .toolbar .fbtn{display:inline-flex;height:44px;padding:0 18px}
  .filters{position:static;display:none;padding:4px 0 28px;border-bottom:1px solid var(--line);margin-bottom:24px;grid-template-columns:1fr 1fr}
  .filters.open{display:grid}
  .pagehead h1,.pdp h1{font-size:40px}
  .pdp{grid-template-columns:1fr;gap:28px}
  .pdp .gallery{position:static}
  .cartwrap{grid-template-columns:1fr}
  .summary{position:static}
  .foot .wrap{grid-template-columns:1fr 1fr;padding-top:56px}
  .foot .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .hide-sm{display:none}
  .hero h1{font-size:42px}
  .hero .lead{font-size:16px}
  .hero .ctas .btn{flex:1}
  .hero .today dl{grid-template-columns:1fr;gap:0}
  .hero .today dl>div{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--mist2)}
  .hero .today dt{margin:0}
  .hero .today dd{font-size:24px}
  .hero .today{padding-top:6px}
  .hero .today{margin-top:44px}
  .assurances .wrap{grid-template-columns:1fr}
  .assurances .wrap>div,.assurances .wrap>div+div{padding:18px 0;border-left:0}
  .assurances .wrap>div+div{border-top:1px solid var(--line)}
  .sechead{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .tile b{font-size:21px}
  .tile:first-child b{font-size:30px}
  .tile .lbl{left:16px;right:16px;bottom:14px;flex-direction:column;align-items:flex-start;gap:2px}
  .feature .figs{gap:22px}
  .grid,.grid.three{grid-template-columns:repeat(2,1fr);gap:32px 12px}
  .card h3{font-size:14.5px}
  .card .qbar{left:8px;right:8px;bottom:8px;gap:6px}
  .card .qadd{height:38px;font-size:12.5px;gap:5px}
  .card .qadd .piece,.card .qadd .bi{display:none}
  .rates th:nth-child(4),.rates td:nth-child(4){display:none}
  .rates td:first-child b{font-size:28px}
  .est{padding:24px 20px}
  .filters{grid-template-columns:1fr}
  .bagline{grid-template-columns:80px 1fr}
  .bagline .amt{grid-column:2;text-align:left}
  .cols2{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .pagehead h1,.pdp h1{font-size:34px}
  .toast{left:16px;right:16px;bottom:16px}
}
/* touch screens have no hover: keep the quick actions visible */
@media (hover:none){.card .qbar{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* text pages: about, contact, policies, 404 */
.pagelead{margin-top:18px;max-width:62ch;font-size:17px;line-height:1.65;color:var(--ink2)}
.page{padding:56px 0 112px}
.page .ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.prose{max-width:720px;color:var(--ink2);font-size:16px;line-height:1.75}
.prose h2{font:300 30px/1.2 var(--serif);color:var(--ink);margin:48px 0 14px}
.prose h2:first-child,.prose .updated+h2,.prose .updated+p{margin-top:0}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--slate)}
.prose b{color:var(--ink);font-weight:600}
.prose a:not(.textlink){color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.prose a:not(.textlink):hover{text-decoration-color:var(--ink)}
.prose .updated{font-size:13.5px;color:var(--muted);margin-bottom:32px}
.prose .ticks{list-style:none;padding:0}
.prose .ticks li{position:relative;padding-left:28px}
.prose .ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:1.6px solid var(--emerald);border-bottom:1.6px solid var(--emerald);transform:rotate(-45deg)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.split .prose{max-width:none}
.pagefig{margin:0;position:sticky;top:120px}
.pagefig img{width:100%;aspect-ratio:11/13;object-fit:cover;border-radius:var(--r)}
.cta-band{margin-top:96px;padding:48px;background:var(--mist);border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:32px}
.cta-band p{margin:10px 0 0;color:var(--ink2)}
.cta-band .ctas{margin-top:0}
.contactgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.panel{border:1px solid var(--line);border-radius:var(--r);padding:32px;display:flex;flex-direction:column}
.panel h2{font:300 28px/1.2 var(--serif);margin-bottom:20px}
.panel .ctas{margin-top:auto;padding-top:24px}
.kv{display:grid;grid-template-columns:96px 1fr;gap:12px 16px;margin:0;font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink);font-weight:500}
.kv a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.page .fine{font-size:13.5px;color:var(--muted);margin:20px 0 0}
.page .fine a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.notfound{max-width:620px;padding:120px 0 140px}
.notfound .code{display:block;font:300 15px/1 var(--sans);letter-spacing:.3em;color:var(--slate);margin-bottom:20px}
.notfound p{margin-top:18px;font-size:17px;color:var(--ink2)}
.notfound .ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.foot .legal{display:flex;gap:20px}
@media (max-width:1180px){.contactgrid{grid-template-columns:1fr 1fr}.contactgrid .panel:first-child{grid-column:1/-1}}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px}.pagefig{position:static}.pagefig img{aspect-ratio:4/3}.cta-band{padding:32px 24px}}
@media (max-width:600px){.contactgrid{grid-template-columns:1fr}.panel{padding:24px}.page{padding:40px 0 80px}.prose h2{font-size:26px}.kv{grid-template-columns:80px 1fr}}

/* header Products dropdown: opens on hover and on keyboard focus, no JS */
.dd{position:relative;display:flex;align-self:stretch}
.mainnav .dd>a{gap:6px}
.dd>a .bi{font-size:11px;transition:transform .2s}
.dd:hover>a .bi,.dd:focus-within>a .bi{transform:rotate(180deg)}
.ddmenu{position:absolute;top:100%;left:-20px;min-width:260px;padding:10px 0;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:0 18px 36px -18px rgba(19,32,43,.28);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;z-index:50}
.dd:hover .ddmenu,.dd:focus-within .ddmenu{opacity:1;visibility:visible;transform:none}
.mainnav .ddmenu a{display:flex;justify-content:space-between;gap:24px;padding:10px 20px;border:0;font-size:14.5px;color:var(--ink2)}
.mainnav .ddmenu a span{color:var(--muted);font-size:13px}
.mainnav .ddmenu a:hover,.mainnav .ddmenu a:focus-visible{background:var(--soft);color:var(--ink)}
.mainnav .ddmenu a[aria-current="page"]{color:var(--ink);font-weight:600;border:0}
.mainnav .ddmenu a:first-child{border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:12px}
.mobilenav .mhead{display:block;padding:15px 20px 6px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mobilenav a.sub{padding:11px 20px 11px 36px;font-weight:400;color:var(--ink2)}

/* gold rates page */
.ratesec{padding:96px 0 0}
.ratesec:last-child{padding-bottom:112px}
.ratesec .sechead p{margin-top:10px;color:var(--muted)}
.chart{position:relative;margin-top:36px;padding-left:96px;height:300px}
.chart svg{width:100%;height:280px;overflow:visible;display:block}
.chart .gridline{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .l0{stroke:var(--navy);color:var(--navy)}
.chart .l1{stroke:var(--emerald);color:var(--emerald)}
.chart .axis{position:absolute;left:0;top:0;width:88px;height:280px}
.chart .axis span{position:absolute;right:0;transform:translateY(-50%);font-size:12px;color:var(--muted);white-space:nowrap}
.chart .legend{display:flex;gap:24px;margin-top:14px;font-size:13.5px;color:var(--ink2)}
.chart .legend span{display:flex;align-items:center;gap:8px}
.chart .legend span::before{content:"";width:18px;height:2px;background:currentColor}
.hist{width:100%;max-width:640px;margin-top:48px;border-collapse:collapse;font-size:14.5px}
.hist th{text-align:left;font-size:12.5px;font-weight:500;color:var(--muted);padding:0 0 12px;border-bottom:1px solid var(--line)}
.hist td{padding:12px 0;border-bottom:1px solid var(--line)}
.hist th:not(:first-child),.hist td:not(:first-child){text-align:right}
.emptynote{margin-top:24px;padding:28px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--muted);max-width:640px}
.exchange{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.exchange h2{margin-bottom:18px}
.exchange p{color:var(--ink2);max-width:52ch}
.exchange .fine{font-size:13.5px;color:var(--muted);margin-top:14px}
.exchange .est{border:1px solid var(--line);display:grid;gap:20px}
/* our weaves page */
.weaves{display:grid;gap:96px}
.weave{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center}
.weave:nth-child(even) figure{order:2}
.weave figure{margin:0}
.weave img{width:100%;aspect-ratio:9/10;object-fit:cover;border-radius:var(--r)}
.weave .num{font-size:12.5px;font-weight:600;letter-spacing:.2em;color:var(--slate)}
.weave h2{font-size:38px;margin:12px 0 10px}
.weave .tech{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.weave p{color:var(--ink2);font-size:16.5px;line-height:1.75;max-width:52ch;margin:0 0 24px}
@media (max-width:900px){.exchange,.weave{grid-template-columns:1fr;gap:32px}.weave:nth-child(even) figure{order:0}.weaves{gap:64px}.chart{padding-left:80px}.chart .axis{width:72px}.ratesec{padding-top:64px}}

/* radio buttons are drawn here, not by the browser: Chrome framed a checked native radio in a square */
.opt input[type=radio],.check input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;border:1.5px solid var(--slate);border-radius:50%;background:#fff;display:grid;place-content:center;outline:none;cursor:pointer;transition:border-color .12s}
.opt input[type=radio]{margin-top:3px}
.opt input[type=radio]::before,.check input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy);transform:scale(0);transition:transform .12s}
.opt input[type=radio]:checked,.check input[type=radio]:checked{border-color:var(--navy)}
.opt input[type=radio]:checked::before,.check input[type=radio]:checked::before{transform:scale(1)}
/* keyboard focus shows on the whole option, never as a box around the control */
.opt:has(input:focus-visible),.check:has(input:focus-visible){outline:2px solid var(--slate);outline-offset:2px;border-radius:var(--r)}