/* Seravine demo page "product" — the demo's own page style */
.pd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,90px);padding-block:36px 120px;align-items:start}
.gal{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;position:sticky;top:calc(var(--hdr) + 24px)}
.thumbs{display:flex;flex-direction:column;gap:12px}
.th{padding:0;border:0;background:var(--vellum);cursor:pointer;aspect-ratio:4/5;overflow:hidden;opacity:.55;transition:opacity .4s;outline:1px solid transparent;outline-offset:4px}
.th img{width:100%;height:100%;object-fit:cover}
.th.on{opacity:1;outline-color:var(--gold)}
.main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--vellum);cursor:zoom-in}
.main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s,transform .3s}
.main .zoom{position:absolute;inset:0;background-repeat:no-repeat;background-size:220%;opacity:0;transition:opacity .4s;pointer-events:none}
.main:hover .zoom{opacity:1}
.main .badge{position:absolute;left:18px;top:18px;background:var(--pearl);color:var(--wine);padding:8px 12px;z-index:2}
.main .cnt2{position:absolute;right:18px;bottom:18px;background:var(--pearl);padding:6px 10px;z-index:2}
.info{display:flex;flex-direction:column;gap:30px;min-width:0}
.info h1{font-size:clamp(52px,5.6vw,88px);line-height:.92}
.rate{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:14px}
.rate .s{color:var(--gold);letter-spacing:.24em}
.price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.price b{font-family:var(--f-disp);font-weight:400;font-size:42px}
.opt{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.opt-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.metals{display:flex;gap:16px}
.metals .mt{width:34px;height:34px}
.carats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.carat{background:none;border:1px solid var(--line);cursor:pointer;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .4s}
.carat b{font-family:var(--f-disp);font-weight:400;font-size:24px;line-height:1}
.carat span{font-size:11px;color:var(--mute)}
.carat.on{border-color:var(--wine);background:var(--wine);color:var(--pearl)}
.carat.on span{color:var(--gold-2)}
.eng{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:center}
.eng svg{width:100%;height:auto}
.eng text{font-family:var(--f-disp);font-style:italic;font-size:15px;fill:var(--wine)}
.cta{display:grid;grid-template-columns:1fr auto;gap:10px}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.perks>div{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.perks b{font-family:var(--f-disp);font-weight:400;font-size:19px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ico{transition:transform .6s var(--ease)}
.acc details[open] summary .ico{transform:rotate(135deg)}
.acc .body{padding-bottom:24px;color:var(--mute)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;font-size:15px}
.spec dt{color:var(--mute)}.spec dd{margin:0;color:var(--text)}
/* in-page guide */
.pnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));z-index:25;background:var(--pearl);border-block:1px solid var(--line)}
.pnav .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.pnav .wrap::-webkit-scrollbar{display:none}
.pnav{background:transparent!important;border:0!important;padding-top:10px}
.pnav .wrap{background:var(--snow);border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 20px 40px -30px rgba(11,31,25,.45)}
.pnav a{flex:0 0 auto;padding:11px 16px;border-radius:999px;color:var(--mute);position:relative;transition:color .3s,background .5s var(--ease)}
.pnav a.on{background:var(--wine);color:var(--pearl)!important}
.pnav a::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--wine);transform:scaleX(0);transition:transform .5s var(--ease)}
.pnav a::after{display:none}
.blk{padding-block:clamp(70px,8vw,120px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 60px)}
.blk.alt{background:var(--vellum)}
.bh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:clamp(36px,4vw,56px)}
.bh>div{display:flex;flex-direction:column;gap:16px;min-width:0}
.bh h2{font-size:clamp(40px,4.6vw,72px);line-height:.95}
.bh p{max-width:46ch;color:var(--mute)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.panel{background:var(--snow);border:1px solid var(--line);padding:clamp(22px,3vw,36px)}
.alt .panel{background:var(--pearl)}

/* true size */
.ts{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center}
.ts-stage{background:var(--snow);border:1px solid var(--line);position:relative;aspect-ratio:1/1.02;max-width:560px;width:100%;justify-self:center;overflow:hidden}
.ts-stage svg{width:100%;height:100%;display:block}
.ts-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.ts-read>div{padding:18px 12px 0 0;display:flex;flex-direction:column;gap:4px}
.ts-read b{font-family:var(--f-disp);font-weight:400;font-size:30px;line-height:1}
.skins{display:flex;gap:10px}
.skin{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 0 0 3px var(--pearl),0 0 0 4px transparent;transition:box-shadow .3s}
.skin.on{box-shadow:0 0 0 3px var(--pearl),0 0 0 4px var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* grading */
.scale{display:flex;flex-direction:column;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.scale:first-child{padding-top:0}
.scale-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.scale-h b{font-family:var(--f-disp);font-weight:400;font-size:28px;line-height:1}
.ticks{display:grid;gap:3px;position:relative}
.ticks span{height:34px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:11px;color:var(--mute);border-bottom:3px solid var(--line);transition:all .4s}
.ticks span.in{border-bottom-color:rgba(19,68,55,.35)}
.ticks span.me{color:var(--wine);border-bottom-color:var(--wine);font-weight:500}
.ticks span.me::before{content:'';position:absolute;transform:translateY(-30px) rotate(45deg);width:8px;height:8px;background:var(--gold)}
.scale p{font-size:14px;color:var(--mute)}
.cert{background:var(--snow);border:1px solid var(--line);padding:clamp(22px,3vw,34px);position:relative;box-shadow:0 30px 60px -40px rgba(11,31,25,.45)}
.cert::before{content:'';position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.cert-h{display:flex;justify-content:space-between;align-items:start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:9px 24px;margin:18px 0 0;font-size:14px}
.cert dt{color:var(--mute)}.cert dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.cert .seal{width:64px;height:64px;color:var(--wine);flex-shrink:0}

/* size finder */
.tabs2{display:flex;border:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap}
.tabs2 button{flex:1;background:none;border:0;cursor:pointer;padding:14px 10px;font-size:14px;transition:all .4s;min-width:120px}
.tabs2 button.on{background:var(--wine);color:var(--pearl)}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.res>div{border:1px solid var(--line);padding:16px;text-align:center;display:flex;flex-direction:column;gap:4px}
.res b{font-family:var(--f-disp);font-weight:400;font-size:34px;line-height:1}
.ringdraw{display:flex;align-items:center;justify-content:center;padding:10px 0}
.ringdraw svg{width:min(100%,300px);height:auto}
.tips{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.tips li{display:flex;gap:12px;font-size:14px;color:var(--mute);list-style:none}
.tips li::before{content:'';width:6px;height:6px;margin-top:8px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}
.tips{padding:0}

/* price */
.brk{display:flex;flex-direction:column;gap:18px}
.brk-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline}
.brk-r .bar{grid-column:1/-1;height:6px;background:var(--line);position:relative;overflow:hidden}
.brk-r .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--wine);transition:width 1s var(--ease)}
.brk-r:nth-child(2) .bar i{background:var(--gold)}
.brk-r:nth-child(3) .bar i{background:var(--wine-2)}
.brk-r .amt{font-family:var(--f-disp);font-size:24px}
.incl{display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.fin-out{display:flex;align-items:baseline;gap:12px;margin:22px 0 8px}
.fin-out b{font-family:var(--f-disp);font-weight:300;font-size:64px;line-height:1;color:var(--wine)}
.upg{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.upg .ic{width:44px;height:44px;flex-shrink:0;color:var(--gold)}

/* delivery */
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.tl::before{content:'';position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.tl>div{position:relative;padding:34px 18px 0 0;display:flex;flex-direction:column;gap:6px}
.tl>div::before{content:'';position:absolute;top:4px;left:0;width:10px;height:10px;background:var(--pearl);border:1px solid var(--wine);transform:rotate(45deg)}
.tl>div:first-child::before,.tl>div:last-child::before{background:var(--wine)}
.tl b{font-family:var(--f-disp);font-weight:400;font-size:24px;line-height:1.1}
.tl .d{color:var(--wine)}
.tl p{font-size:14px;color:var(--mute)}
.zip{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:44px}
.zip .fld{flex:0 1 240px}
.box{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:56px}
.box>div{border:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;gap:10px;background:var(--snow)}
.box svg{width:36px;height:36px;color:var(--wine);fill:none;stroke:currentColor;stroke-width:1.1}
.box b{font-weight:500;font-size:15px}
.box span{font-size:13px;color:var(--mute)}

/* metals */
.mtab{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.mtab th{text-align:left;font:500 10px var(--f-crest);letter-spacing:.28em;text-transform:uppercase;color:var(--mute);padding:14px 14px 14px 0;border-bottom:1px solid var(--line)}
.mtab td{padding:18px 14px 18px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.mtab tr.me td{background:rgba(19,68,55,.05)}
.mtab tr.me td:first-child{box-shadow:inset 3px 0 0 var(--wine)}
.mtab td:first-child{padding-left:16px}
.mtab .nm{display:flex;align-items:center;gap:12px;font-family:var(--f-disp);font-size:21px}
.dots{display:inline-flex;gap:4px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.f{background:var(--wine)}
.tblw{overflow-x:auto}

/* reviews */
.rv-g{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,5vw,80px);align-items:start}
.rv-sum{position:sticky;top:calc(var(--hdr) + 80px);display:flex;flex-direction:column;gap:22px}
.rv-big{font-family:var(--f-disp);font-weight:300;font-size:96px;line-height:.85}
.rv-bars{display:flex;flex-direction:column;gap:8px}
.rv-bars div{display:grid;grid-template-columns:28px 1fr 40px;gap:12px;align-items:center;font-size:13px;color:var(--mute)}
.rv-bars i{height:4px;background:var(--line);position:relative}
.rv-bars i b{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}
.fitm{display:flex;flex-direction:column;gap:8px}
.fitm .tr{height:4px;background:var(--line);position:relative}
.fitm .tr i{position:absolute;top:-6px;width:16px;height:16px;margin-left:-8px;background:var(--wine);transform:rotate(45deg)}
.fitm .lb{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.rlist{display:flex;flex-direction:column}
.rvw{padding:30px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px}
.rvw:first-child{padding-top:0}
.rvw .who{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.rvw .ver{color:var(--wine);display:inline-flex;align-items:center;gap:6px}
.rvw .ver::before{content:'';width:6px;height:6px;background:var(--wine);transform:rotate(45deg)}
.rvw q{quotes:none;font-family:var(--f-disp);font-size:24px;line-height:1.3;grid-column:1/-1}
.rvw .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--mute)}
.rvw .ph{width:96px;height:120px;object-fit:cover;grid-row:1/3;grid-column:2}
.help{background:none;border:1px solid var(--line);cursor:pointer;padding:6px 12px;font-size:12px;color:var(--mute)}
.help.on{border-color:var(--wine);color:var(--wine)}

/* questions */
.qa details{border-top:1px solid var(--line)}
.qa details:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-family:var(--f-disp);font-size:24px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{transition:transform .6s var(--ease);flex-shrink:0}
.qa details[open] summary .ico{transform:rotate(135deg)}
.qa .ans{padding:0 0 24px;color:var(--mute);display:flex;flex-direction:column;gap:10px;max-width:64ch}
.qa .by{font-size:12px;color:var(--wine)}
.ask{display:flex;flex-direction:column;gap:18px}
.ask textarea{resize:vertical;min-height:110px}

/* gift options */
.gift{border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:14px;background:var(--snow)}
.tog{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:15px}
.tog input{position:absolute;opacity:0;width:0;height:0}
.tog .sw{width:44px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:background .4s;flex-shrink:0}
.tog .sw::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--snow);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .5s var(--ease)}
.tog input:checked+.sw{background:var(--wine)}
.tog input:checked+.sw::after{transform:translateX(20px)}
.tog input:focus-visible+.sw{outline:1.5px solid var(--gold);outline-offset:3px}
.gift-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.gift.on .gift-b{grid-template-rows:1fr}
.gift-b>div{overflow:hidden;display:flex;flex-direction:column;gap:14px}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--mute);cursor:pointer}
.chk input{accent-color:var(--wine);width:16px;height:16px}

/* compare */
.cmp-t{width:100%;border-collapse:separate;border-spacing:0;min-width:680px}
.cmp-t th,.cmp-t td{padding:16px 18px;text-align:left;vertical-align:top;font-size:15px;border-bottom:1px solid var(--line)}
.cmp-t th{font:500 10px var(--f-crest);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);width:160px}
.cmp-t td.me{background:rgba(19,68,55,.06)}
.cmp-t tr:first-child td.me{border-radius:18px 18px 0 0}
.cmp-t tr:last-child td.me{border-radius:0 0 18px 18px}
.cmp-t img{width:100%;max-width:220px;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block}
.cmp-t .you{display:inline-block;margin-top:10px;background:var(--wine);color:var(--pearl);border-radius:999px;padding:5px 12px;font:500 9px var(--f-crest);letter-spacing:.24em}
.yes{color:var(--wine)}.no{color:var(--mute)}

/* wear & care */
.wear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wr{border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;gap:16px;align-items:flex-start;background:var(--snow);transition:transform .5s var(--ease),box-shadow .5s}
.wr:hover{transform:translateY(-4px);box-shadow:0 30px 40px -30px rgba(11,31,25,.4)}
.wr svg{width:34px;height:34px;flex-shrink:0;fill:none;stroke:var(--wine);stroke-width:1.2}
.wr b{font-weight:500;display:block}
.wr .v{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 9.5px var(--f-crest);letter-spacing:.22em;text-transform:uppercase;border-radius:999px;padding:5px 10px}
.v.ok{background:rgba(19,68,55,.1);color:var(--wine)}.v.off{background:rgba(168,139,87,.16);color:#7A5F2E}
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:44px}
.care>div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--wine)}
.care b{font-family:var(--f-crest);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:18px}
.hard{display:flex;flex-direction:column;gap:10px;margin-top:44px}
.hard .row3{display:grid;grid-template-columns:180px 1fr 60px;gap:16px;align-items:center;font-size:14px}
.hard .row3 i{height:8px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.hard .row3 i b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--wine),var(--gold));width:0;transition:width 1.4s var(--ease)}
.hard.in .row3 i b{width:var(--w)}

/* live viewing */
.view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:26px;overflow:hidden;background:var(--ink);color:var(--pearl)}
.view .vl{position:relative;min-height:420px;overflow:hidden}
.view .vl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.view .live{position:absolute;left:22px;top:22px;display:inline-flex;align-items:center;gap:8px;background:rgba(11,31,25,.7);border-radius:999px;padding:8px 14px}
.view .live i{width:8px;height:8px;border-radius:50%;background:#E05A5A;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.view .vr{padding:clamp(24px,4vw,52px);display:flex;flex-direction:column;gap:22px}
.view .ttl .k{color:var(--gold-2)}
.vdays{display:flex;gap:8px;flex-wrap:wrap}
.vdays .chip{border-color:rgba(220,205,170,.3);color:var(--pearl)}
.vdays .chip.on{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2)}
.view .inp{border-bottom-color:rgba(220,205,170,.3);color:var(--pearl)}
.view .inp::placeholder{color:rgba(244,243,238,.45)}
.view .fld label{color:rgba(244,243,238,.6)}

/* recently viewed */
.recent{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rc{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--snow);transition:transform .5s var(--ease)}
.rc:hover{transform:translateY(-3px)}
.rc img{width:64px;height:80px;object-fit:cover;border-radius:12px}
@media (max-width:980px){.wear,.care{grid-template-columns:1fr 1fr}.view{grid-template-columns:1fr}.view .vl{min-height:260px}.recent{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wear,.care,.recent{grid-template-columns:1fr}.hard .row3{grid-template-columns:110px 1fr 44px}}

/* sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ink);color:var(--pearl);transform:translateY(105%);transition:transform .7s var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
.buybar.on{transform:none}
.buybar .wrap{display:flex;align-items:center;gap:18px;min-height:78px}
.buybar img{width:48px;height:58px;object-fit:cover}
.buybar .t{flex:1;min-width:0;display:flex;flex-direction:column}
.buybar .t span:last-child{font-size:13px;color:rgba(244,243,238,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .pr{font-family:var(--f-disp);font-size:28px}

@media (max-width:980px){.pd{grid-template-columns:1fr}.gal{position:relative;top:0}.ts,.two,.rv-g{grid-template-columns:1fr}.rv-sum{position:relative;top:0}.tl{grid-template-columns:1fr 1fr;row-gap:30px}.tl::before{display:none}.box{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gal{grid-template-columns:1fr}.thumbs{flex-direction:row;order:2}.th{width:64px}.eng{grid-template-columns:1fr}.perks{grid-template-columns:1fr}.carats{grid-template-columns:repeat(2,minmax(0,1fr))}.box{grid-template-columns:1fr}.tl{grid-template-columns:1fr}.res b{font-size:26px}.buybar .pr{display:none}.buybar img{display:none}.rvw .ph{grid-row:auto;grid-column:1/-1}}