/* Build Your Ring (settings step). Colours, type scale and .btn come from home.css. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.build{padding:0 var(--gutter) clamp(48px,8vh,96px)}
.crumbs{display:flex;gap:8px;padding:20px 0 0;font-size:var(--fs-small);color:var(--ink-3)}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.build__head{text-align:center;padding:clamp(28px,5vh,56px) 0 clamp(28px,4vw,48px)}
.build__head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.01em}
.build__head .lede{margin:16px auto 0;max-width:52ch}

/* three step bar */
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1.25fr));border:1px solid var(--rule)}
.steps3>li{display:flex;align-items:center;gap:14px;padding:16px 22px;min-height:68px;position:relative;color:var(--ink-3)}
.steps3__title{font-family:var(--serif);font-size:var(--fs-title);color:var(--ink)!important}
.steps3__s{border-left:1px solid var(--rule)}
.steps3__s b{font:400 1.6rem/1 var(--serif)}
.steps3__s span{display:flex;flex-direction:column;font-size:var(--fs-small);line-height:1.3}
.steps3__s small{font-size:var(--fs-label);color:var(--ink-3)}
.steps3__s svg,.steps3__s img{margin-left:auto;width:44px;height:30px;flex:none}
.steps3__s img{object-fit:contain}
.steps3__s.is-on{background:var(--ivory);color:var(--ink)}
.steps3__s.is-on svg,.steps3__s.is-on img{width:56px}

/* shape rail */
.byshape{margin-top:clamp(24px,3vw,40px)}
.rail{position:relative}
.rail__list{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;scroll-behavior:smooth}
.rail__list::-webkit-scrollbar{display:none}
.rail__list li{flex:0 0 clamp(104px,12vw,140px);scroll-snap-align:start}
.shape{display:block;width:100%;padding:0;background:none;border:0;cursor:pointer;font:400 var(--fs-small)/1.4 var(--sans);color:var(--ink);text-align:left}
.shape__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#fafafa;margin-bottom:8px;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .25s}
.shape__img img{width:56%;height:56%;object-fit:contain}
.shape[aria-pressed=true] .shape__img{box-shadow:inset 0 0 0 2px var(--ink)}
.rail__next{position:absolute;right:0;top:calc(50% - 34px);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--rule);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(17,17,17,.12)}
.rail__next svg{width:10px;height:18px}
.rail__next:hover{border-color:var(--ink)}

/* filter bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,4vw,44px)}
.bar__filters{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 22px;background:var(--ink);color:var(--white);border:1px solid var(--ink);cursor:pointer;font:500 var(--fs-small)/1 var(--sans);transition:background .3s var(--ease),color .3s var(--ease)}
.bar__filters svg{width:22px;height:14px}
.bar__filters svg circle{fill:var(--ink);stroke:currentColor}
.bar__filters:hover{background:var(--white);color:var(--ink)}
.sort{display:flex;align-items:center;gap:0;border:1px solid var(--rule);min-height:48px;padding:0 6px 0 16px;font-size:var(--fs-small)}
.sort label{white-space:nowrap;color:var(--ink-2)}
.sort__sel{position:relative;display:flex;align-items:center}
.sort select{appearance:none;-webkit-appearance:none;border:0;background:none;padding:12px 30px 12px 6px;font:500 var(--fs-small)/1.2 var(--sans);color:var(--ink);cursor:pointer;border-radius:0}
.sort select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sort__sel svg{position:absolute;right:8px;width:14px;height:8px;pointer-events:none}
.sort:hover{border-color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px}
.meta__count{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags button{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;background:var(--ivory);border:0;cursor:pointer;font:400 var(--fs-small)/1 var(--sans);color:var(--ink)}
.tags button:hover{background:var(--ivory-lo)}
.tags svg{width:10px;height:10px}

/* filters drawer (left) */
.fdrawer{margin:0;inset:0 auto 0 0;width:min(380px,92vw);max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;background:var(--white);color:var(--ink);overflow:hidden;transform:translateX(-100%);transition:transform .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.fdrawer[open]{display:flex;transform:none}
.fdrawer::backdrop{background:rgba(17,17,17,0);transition:background .45s var(--ease),overlay .45s allow-discrete,display .45s allow-discrete}
.fdrawer[open]::backdrop{background:rgba(17,17,17,.5)}
@starting-style{.fdrawer[open]{transform:translateX(-100%)}.fdrawer[open]::backdrop{background:rgba(17,17,17,0)}}
.fdrawer__in{display:flex;flex-direction:column;width:100%;min-height:0}
.fdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 24px;border-bottom:1px solid var(--rule)}
.fdrawer__head h2{font-size:var(--fs-h2);line-height:1.1}
.fdrawer__x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink)}
.fdrawer__body{flex:1;overflow:auto;padding:0 24px}
.fg{border-bottom:1px solid var(--rule)}
.fg summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;list-style:none;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase}
.fg summary::-webkit-details-marker{display:none}
.fg summary::after{content:"";width:8px;height:8px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.fg[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fg__list{display:flex;flex-direction:column;padding:0 0 18px}
.fg__list label{position:relative;display:block;cursor:pointer}
.fg__list input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fg__list label>span{display:flex;align-items:center;gap:12px;min-height:40px;font-size:var(--fs-small)}
.fg__list label>span::before{content:"";flex:none;width:18px;height:18px;border:1px solid var(--ink);background:var(--white) center/12px no-repeat;transition:background-color .2s}
.fg__list input[type=radio]+span::before{border-radius:50%}
.fg__list input:checked+span::before{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.5'/%3E%3C/svg%3E")}
.fg__list input:focus-visible+span::before{outline:2px solid var(--ink);outline-offset:2px}
.fg__list--sw .sw{position:static;width:18px;height:18px;display:inline-block;cursor:inherit}
.fg__list--sw .sw::after{display:none}
.fg__list--sw label>span{gap:12px}
.fdrawer__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid var(--rule)}
.fdrawer__foot .btn{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.fdrawer__foot .tlink{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:inherit;padding:0}
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}

/* setting cards */
.cards{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.card__pick{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#fafafa;transition:background .35s var(--ease),box-shadow .25s}
.card__img img{width:74%;height:auto}
.card.is-picked .card__img{box-shadow:inset 0 0 0 2px var(--ink)}
.card[hidden]{display:none}
.card__sw{display:flex;justify-content:center;gap:6px;margin:14px 0 10px}
.sw{position:relative;width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(17,17,17,.15)}
.sw::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;transition:border-color .2s}
.sw[aria-pressed=true]::after{border-color:var(--ink)}
.sw--yellow{background:#e6c46d}.sw--rose{background:#e3ae95}.sw--white{background:#e4e4e4}.sw--silver{background:#c9c9c9}
.card h3{font-size:var(--fs-title);line-height:1.25;text-align:center}
.card p{margin:4px 0 0;text-align:center;font-size:var(--fs-small);color:var(--ink-3);text-wrap:balance}

/* dock and next */
.dock{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin:40px calc(var(--gutter)*-1) 0;padding:14px var(--gutter);background:var(--ink);color:var(--white)}
.dock p{margin:0;font-size:var(--fs-small)}.dock b{font-weight:500}
.dock .btn{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.next{padding:clamp(56px,10vh,120px) 0;text-align:center}
.next__in .lede{margin:16px auto 0}
.next .actions{justify-content:center;align-items:center;gap:12px 28px}
.next .btn{display:inline-flex;align-items:center;min-height:44px}
.next .tlink{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:inherit;padding:0}
.build>.band{margin:clamp(48px,8vh,96px) calc(var(--gutter)*-1) 0}
.build>.band{padding-block:clamp(32px,5vh,56px)}
.build>.band .care{margin-top:0}
.build+footer,.build~footer{margin-top:0}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps3>.steps3__title{display:none}
  .steps3>li{padding:12px 14px;gap:8px}
  .steps3__s svg,.steps3__s img{display:none}
  .steps3__s small{display:none}
  .steps3__s:first-of-type{border-left:0}
  .rail__next{display:none}
}
@media (max-width:520px){.sort{padding-left:10px}.sort label{display:none}.cards{gap:12px}.card p{display:none}.steps3__s span{font-size:var(--fs-label)}}
@media (prefers-reduced-motion:reduce){.fdrawer,.fdrawer::backdrop{transition:none}.rail__list{scroll-behavior:auto}.card__img img,.shape__img,.card__img{transition:none}}

/* real catalogue: photos, karat select, empty and calm states (spec 0009) */
.card__img img{width:100%;height:100%;object-fit:cover}
.card__none{display:block;width:40%;aspect-ratio:1;border:1px solid var(--rule)}
.sw--other{background:#d8d2c4}
.card__karat{display:block;margin:0 0 10px;text-align:center}
.card__karat select{appearance:none;-webkit-appearance:none;border:0;border-bottom:1px solid var(--rule);background:none;padding:6px 18px 6px 4px;font:400 var(--fs-small)/1.2 var(--sans);color:var(--ink);cursor:pointer;border-radius:0;max-width:100%}
.card__karat select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.empty{margin:32px 0 0;text-align:center;font-size:var(--fs-small);color:var(--ink-2)}
.empty .tlink,.step .tlink{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:inherit;padding:0;font:inherit}
.fine{margin:16px 0 0;font-size:var(--fs-small);color:var(--ink-3)}
.calm{padding:clamp(56px,10vh,120px) var(--gutter);text-align:center}
.calm .actions{justify-content:center;margin-top:24px}
.calm .btn{display:inline-flex;align-items:center;min-height:44px}

/* step 2 and 3 */
.step{padding:clamp(32px,6vh,72px) 0 0}
.step h2{font-size:var(--fs-h2);line-height:1.1;margin-top:8px}
.step h2:focus{outline:none}
.wrap--narrow{max-width:640px;margin-inline:auto}
.sum{margin:12px 0 0;font-size:var(--fs-body);color:var(--ink-2)}
.chips{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.chips__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips__l{flex:0 0 64px;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3)}
.bytype{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{min-height:36px;padding:0 14px;background:var(--white);border:1px solid var(--rule);cursor:pointer;font:400 var(--fs-small)/1 var(--sans);color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.stones{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.stone{display:flex;flex-direction:column;gap:6px}
.stone__img{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#fafafa;overflow:hidden}
.stone__img img,.stone__img video{width:100%;height:100%;object-fit:cover}
.stone h3{font-size:var(--fs-title);line-height:1.25;margin-top:8px}
.stone p{margin:0;font-size:var(--fs-small);color:var(--ink-3)}
.stone .btn{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.step__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.step__actions .btn{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.btn--line{background:var(--white);color:var(--ink);border:1px solid var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--white)}
.rform{margin-top:28px}
.rform__set{border:0;margin:0;padding:0;min-width:0}
.rform__closed{padding:16px;background:var(--ivory);font-size:var(--fs-small)}
.field{margin:0 0 22px}
.field label{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:500}
.field label small{font-weight:400;color:var(--ink-3)}
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--rule);background:var(--white);font:400 var(--fs-body)/1.4 var(--sans);color:var(--ink);border-radius:0}
.field textarea{resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fonts{display:flex;gap:10px;margin-top:10px}
.fonts label{position:relative;margin:0;cursor:pointer}
.fonts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fonts span{display:block;min-width:84px;padding:10px 16px;border:1px solid var(--rule);text-align:center;font-size:var(--fs-body)}
.fonts input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fonts input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.f-script{font-family:var(--serif);font-style:italic}.f-serif{font-family:var(--serif)}.f-block{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-small)!important}
.preview{min-height:1.6em;margin:12px 0 0;font-size:var(--fs-title);overflow-wrap:anywhere}
.preview.f-script{font-family:var(--serif);font-style:italic}.preview.f-serif{font-family:var(--serif)}.preview.f-block{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.verify{margin:32px 0 0;padding:24px;background:var(--ivory)}
.verify h3{font-size:var(--fs-title);margin-bottom:8px}
.verify .btn,.verify .tlink{margin-top:4px}
.verify .btn{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.err{min-height:1.4em;margin:12px 0 0;font-size:var(--fs-small);color:#8a1c1c}
.step--done{text-align:center;padding-bottom:clamp(40px,8vh,96px)}
.step--done .actions{justify-content:center;align-items:center;gap:12px 28px;margin-top:24px}
.step--done .btn{display:inline-flex;align-items:center;min-height:44px}
.ref{margin:20px 0 0;font:400 var(--fs-h2)/1.1 var(--serif);letter-spacing:.02em}
@media (max-width:980px){.stones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field label small{display:inline;margin-left:4px}
.field .fine,.verify .fine,.rform .fine{max-width:none}

/* a setting's own page */
.card__pick{text-decoration:none;color:inherit}
.steps3--slim{margin-top:20px}
.steps3--slim .steps3__s small a{text-decoration:underline;text-underline-offset:3px}
.pdp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(24px,4vw,48px)}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.5vw,20px)}
.gal[hidden]{display:none}
.gal li{aspect-ratio:1;background:#fafafa;overflow:hidden}
.gal img,.gal video{display:block;width:100%;height:100%;object-fit:cover}
.gal__none{min-height:240px}
.pdp__info{align-self:start;position:sticky;top:96px}
.pdp__info h1{font-size:var(--fs-h2);line-height:1.1;margin-top:8px}
.pdp__desc{margin:16px 0 0;color:var(--ink-2);line-height:1.6}
.pdp__row{margin-top:24px}
.pdp__l{margin:0 0 10px;font-size:var(--fs-small)}.pdp__l b{font-weight:500}
.pdp__sw{justify-content:flex-start;margin:0}
.pdp__info .field label{font-size:var(--fs-small);font-weight:500}
.btn--block{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:28px;cursor:pointer}
.pdp__promise{list-style:none;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.pdp__info{position:static}.gal{grid-template-columns:1fr}}

/* hover preview: the next photo of the same colour fades in over the first (which stays solid, so the ring never shows twice) */
.card__img{position:relative;overflow:hidden}
.card__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fafafa;opacity:0;filter:blur(2px);transition:opacity 280ms cubic-bezier(.23,1,.32,1),filter 280ms cubic-bezier(.23,1,.32,1);pointer-events:none;will-change:opacity}
@media (hover:hover) and (pointer:fine){
  .card__pick:hover .card__alt,.card__pick:focus-visible .card__alt{opacity:1;filter:blur(0)}
  .card__img:not(:has(.card__alt)) img{transition:transform 400ms cubic-bezier(.23,1,.32,1)}
  .card__pick:hover .card__img:not(:has(.card__alt)) img{transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){.card__alt{transition:none;filter:none}.card__img img{transition:none}.card__pick:hover .card__img img{transform:none}}

.rail__prev{right:auto;left:0}
.rail__next[hidden]{display:none}

.pdp__promise li{display:flex;align-items:center;gap:12px}
.pdp__promise img{flex:none;width:32px;height:32px;object-fit:contain}

/* setting page sidebar, after Brilliant Earth's order of content */
.pdp__sw{display:flex;flex-wrap:wrap;gap:10px}
/* metal swatches: flat discs with a soft gradient; the chosen one gets a clear dark ring with a white gap */
.pdp__sw{gap:14px;padding:5px 0}
.sw--metal{width:32px;height:32px;background:linear-gradient(135deg,var(--a) 0%,var(--b) 50%,var(--a) 100%);box-shadow:inset 0 0 0 1px rgba(17,17,17,.14);transition:box-shadow .2s var(--ease)}
.sw--metal::after{display:none}
.sw--metal:hover{box-shadow:inset 0 0 0 1px rgba(17,17,17,.14),0 0 0 3px var(--white),0 0 0 4px rgba(17,17,17,.35)}
.sw--metal[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgba(17,17,17,.14),0 0 0 3px var(--white),0 0 0 5px var(--ink)}
.sw--metal:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.m--yellow{--a:#f0cc72;--b:#fff4d2}
.m--rose{--a:#e8ad96;--b:#fce6dc}
.m--white{--a:#d6d7d9;--b:#fff}
.m--silver{--a:#bfc2c6;--b:#f1f2f3}
@media (prefers-reduced-motion:reduce){.sw--metal{transition:none}}
.pdp__pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.pdp__pick label{display:block;font-size:var(--fs-small);font-weight:500}
.pdp__pick select{display:block;width:100%;min-height:44px;margin-top:6px;padding:0 12px;border:1px solid var(--rule);background:var(--white);font:400 var(--fs-small)/1.2 var(--sans);color:var(--ink);border-radius:0}
.pdp__pick select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pdp__hint{margin-top:8px}
.pdp__cover{margin-top:32px}
.pdp__h{font-family:var(--sans);font-size:var(--fs-small);font-weight:500;letter-spacing:0;text-transform:none}
.pdp__cover .pdp__promise{margin-top:14px;padding-top:0;border-top:0}
.acc{border-top:1px solid var(--rule)}
.acc:last-of-type{border-bottom:1px solid var(--rule)}
.pdp__cover+.acc{margin-top:28px}
.acc summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;list-style:none;font-size:var(--fs-small);font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:8px;height:8px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.acc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc__body{margin:0;padding:0 0 20px;font-size:var(--fs-small);color:var(--ink-2);line-height:1.6}
.acc__body p{margin:0}
dl.acc__body{display:grid;grid-template-columns:auto 1fr;gap:8px 20px}
.acc__body dt{color:var(--ink-3)}.acc__body dd{margin:0}

.pdp__two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pdp__two .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;cursor:pointer;text-align:center}
.pdp__two .btn svg{flex:none}

/* you may also like: the last fold-out in the sidebar, always open */
.acc--open>summary{cursor:default}
.acc--open>summary::after{display:none}
.cards--alike{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards--alike .card h3{margin-top:10px;font-size:var(--fs-body)}
.pdp{padding-bottom:clamp(64px,10vh,120px)}

.btn--block[aria-disabled=true]{opacity:.35;cursor:not-allowed}
.btn--block[aria-disabled=true]:hover{background:var(--ink);color:var(--white)}
.pdp__need{margin-top:8px;color:#8a1c1c}

/* stone browser: filter sidebar and a grid */
.sb{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:28px;align-items:start}
.sb__side{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:8px}
.sb__sec{border-top:1px solid var(--rule);padding:18px 0}
.sb__sec summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.sb__sec summary::-webkit-details-marker{display:none}
.sb__sec summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.sb__sec[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.sb__body{margin-top:16px}
.sb__pills{display:flex;flex-wrap:wrap;gap:8px}
.sb__pills .chip{border-radius:999px}
.sb__shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px}
.chip--shape{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:0;border:0;background:none;font-size:12px;line-height:1.25;text-align:center;color:var(--ink-2)}
.chip--shape:hover{border-color:transparent}
.chip__ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#f3f3f3;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .2s}
.chip__ic img{width:58%;height:58%;object-fit:contain}
.chip--shape:hover .chip__ic{box-shadow:inset 0 0 0 1px var(--ink)}
.chip--shape[aria-pressed=true]{background:none;color:var(--ink);font-weight:500}
.chip--shape[aria-pressed=true] .chip__ic{box-shadow:inset 0 0 0 2px var(--ink)}
.sb__reset{margin-top:8px}
.sb__main .meta__count{padding-bottom:12px;border-bottom:1px solid var(--rule)}
.stone{position:relative;cursor:pointer}
.stone__pick{all:unset;cursor:pointer}
.stone__pick::after{content:"";position:absolute;inset:0}
.stone__pick:focus-visible::after{outline:2px solid var(--ink);outline-offset:2px}
.stone:hover h3{text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.sb{grid-template-columns:1fr}.sb__side{position:static;max-height:none;padding:0}.sb__shapes{grid-template-columns:repeat(5,1fr)}.stones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* carat range slider */
.rng{padding:4px 8px 0}
.rng__track{position:relative;height:20px}
.rng__track::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule)}
.rng__fill{position:absolute;top:9px;height:2px;background:var(--ink)}
.rng input{position:absolute;left:0;top:0;width:100%;height:20px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rng input::-webkit-slider-runnable-track{background:none;height:20px}
.rng input::-moz-range-track{background:none}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--white);box-shadow:0 0 0 1px var(--ink);cursor:grab}
.rng input::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--ink);border:3px solid var(--white);box-shadow:0 0 0 1px var(--ink);cursor:grab}
.rng input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:3px}
.rng__vals{display:flex;justify-content:space-between;margin:14px -8px 0}
.rng__vals output{min-width:64px;padding:8px 10px;border:1px solid var(--rule);font-size:var(--fs-small);text-align:center}
.sb__pills .rng{flex:1}
/* stone card text: smaller, centred, like the reference */
.stone{text-align:center;gap:4px}
.stone h3{margin-top:10px;font:500 var(--fs-small)/1.35 var(--sans);letter-spacing:0;color:var(--ink)}
.stone p{font-size:13px;line-height:1.4;color:var(--ink-2)}

/* stone quick view */
.qv{width:min(1000px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;background:var(--white);color:var(--ink);overflow:auto}
.qv::backdrop{background:rgba(17,17,17,.5)}
.qv__x{position:absolute;top:8px;right:12px;z-index:2;width:44px;height:44px;background:none;border:0;font-size:32px;line-height:1;cursor:pointer;color:var(--ink)}
.qv__body{display:grid;grid-template-columns:minmax(0,436px) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:clamp(20px,3vw,40px)}
.qv__main{aspect-ratio:1;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qv__main img,.qv__main video{width:100%;height:100%;object-fit:contain}
.qv__thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.qv__t{width:64px;height:64px;padding:0;background:#fafafa;border:1px solid var(--rule);cursor:pointer;position:relative}
.qv__t img{width:100%;height:100%;object-fit:cover}
.qv__t[aria-pressed=true]{border-color:var(--ink)}
.qv__t--vid::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-7px 0 0 -4px;border-left:12px solid var(--white);border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.qv__info{display:flex;flex-direction:column;padding-top:8px}
.qv__info h2{font-size:var(--fs-h3,1.5rem);line-height:1.2;padding-right:40px}
.qv__desc{margin:12px 0 0;color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}
.qv__spec{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:20px 0 0;font-size:var(--fs-small)}
.qv__spec dt{color:var(--ink-3)}
.qv__spec dd{margin:0}
.qv__act{margin-top:auto;padding-top:28px;border-top:1px solid var(--rule)}
.qv__act .fine{margin:12px 0 0;text-align:center}
@media (max-width:760px){.qv__body{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.qv[open]{animation:qvin .25s var(--ease,ease)}@keyframes qvin{from{opacity:0;transform:translateY(8px)}}}

/* step 3: a product style page, photos left and the details right */
.rq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,4vw,56px);align-items:start}
.rq__gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:sticky;top:20px}
.rq__gal figure{margin:0}
.rq__gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#fafafa}
.rq__gal figcaption{padding:8px 0 0;text-align:center;font-size:12px;color:var(--ink-3)}
.rq__side h2{font-size:var(--fs-h2,2rem);line-height:1.15}
.rq__lines{margin:20px 0 0;border-top:1px solid var(--rule)}
.rq__lines>div{padding:14px 0;border-bottom:1px solid var(--rule)}
.rq__lines dt{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.rq__lines dd{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;font-size:var(--fs-small)}
.rq__lines dd b{font-weight:500;flex:1 1 100%}
.rq__lines dd span{color:var(--ink-2);flex:1}
.rq__side .rform{margin-top:24px}
@media (max-width:900px){.rq{grid-template-columns:1fr}.rq__gal{position:static}}

/* step 3 sidebar, after the Brilliant Earth ring page */
.rq__side h2{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.2;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.rq__lines{margin:0;border-top:0}
.rq__lines>div{padding:18px 0 16px;border-bottom:0}
.rq__lines dt{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:var(--fs-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.rq__lines dt .tlink{font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-2);min-height:0;padding:0;border-bottom:1px solid currentColor}
.rq__lines dd{display:block}
.rq__lines dd b{display:block;font-weight:400;font-size:var(--fs-body);color:var(--ink);line-height:1.4}
.rq__lines dd span{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--ink-2)}
.rq__lines>div+div{border-top:1px solid var(--rule);padding-top:16px}
.rq__side .rform{margin-top:8px;padding-top:20px;border-top:1px solid var(--rule)}
.rq__side .field select{min-height:52px}
.acc--f{border-top:1px solid var(--rule)}
.acc--f summary small{margin-left:6px;font-weight:400;color:var(--ink-3)}
.acc--f .acc__body{padding-bottom:6px}
.acc--f .field{margin-bottom:18px}
.rq__side .rform__set>.acc--f:first-of-type{margin-top:4px}
.rq__side .verify{margin-top:24px}
.rq__side .step__actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:24px}
.rq__side .step__actions .btn{justify-content:center;min-height:52px;width:100%}
.rq__side .step__actions .tlink{align-self:center}
.rq__side .rform>.fine{text-align:center;margin-top:14px}
.rq__side .pdp__cover{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.rq__lines dt .tlink{background:none;border-width:0 0 1px;border-style:solid;cursor:pointer;font-family:var(--sans);line-height:1.2}
.rq__side #f-name{margin-top:0}.rq__side .acc--f+.field,.rq__side .acc--f:last-of-type{margin-bottom:22px}

/* ring size guide pop up */
.sizelink{min-height:0;margin-top:10px;padding:0;background:none;border-width:0 0 1px;border-style:solid;cursor:pointer;font:400 12px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.sz{width:min(500px,calc(100vw - 32px))}
.sz__body{padding:44px 32px 36px;text-align:center}
.sz__ic{color:var(--ink-2)}
.sz__body h2{margin-top:14px;font-size:1.6rem}
.sz__body p{margin:14px 0 24px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-2)}
.sz__body .btn{display:inline-flex;align-items:center;min-height:44px}
/* step 3: mobile confirmation, flat and quiet */
.rq__side .verify{margin:8px 0 0;padding:20px 0 0;background:none;border-top:1px solid var(--rule)}
.rq__side .verify h3{margin:0 0 12px;font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.rq__side .verify .fine{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.rq__side #v-signed{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;border:1px solid var(--rule);font-size:var(--fs-small);color:var(--ink)}
.rq__side #v-signed::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M5 9.5l2.7 2.7L13 6.5'/%3E%3C/svg%3E") center/100% no-repeat}
.rq__side .verify .field{margin-bottom:12px}
.rq__side .verify .btn--line{width:100%;justify-content:center;min-height:48px;margin:0}
.rq__side .verify .tlink{margin-top:12px;min-height:0;font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-2);background:none;border-width:0 0 1px;border-style:solid;cursor:pointer;font-family:var(--sans)}
.rq__side .verify>.fine:last-child{margin:16px 0 0;font-size:12px}
.rq__side .verify>.fine:last-child a{color:var(--ink-2)}

/* order details: what happens next, on an ivory band */
.path{margin-top:clamp(48px,8vh,96px);padding:clamp(40px,6vw,72px) 0 0;border-top:1px solid var(--rule)}
.path__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.path__lab{margin:0 0 8px;font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.path h2{font-size:min(var(--fs-h2),2.25rem);line-height:1.15}
.path__head p:last-child{max-width:38ch;margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.path__steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.path__steps li{position:relative;padding:28px 24px 0 0}
.path__steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.path__steps li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.path__steps small{display:block;margin-bottom:6px;font:600 var(--fs-label)/1 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze)}
.path__steps b{display:block;margin-bottom:8px;font:400 var(--fs-title)/1.25 var(--serif)}
.path__steps p{margin:0;font-size:var(--fs-small);line-height:1.65;color:var(--ink-2)}
.path__incl{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
.path__incl li{display:flex;align-items:center;gap:10px;font-size:var(--fs-small)}
@media (max-width:860px){.path__steps{grid-template-columns:1fr 1fr;gap:28px 0}}
@media (max-width:480px){.path__steps{grid-template-columns:1fr}}
/* the Crown difference: three photo cards */
.diff{margin-top:clamp(40px,7vh,80px)}
.diff h2{font-size:min(var(--fs-h2),2.25rem);line-height:1.15;margin-bottom:20px}
.diff__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diff__list li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1.45;padding:20px;overflow:hidden;color:#fff;background:#132323 var(--bg) center/cover no-repeat}
.diff__list li::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,20,.85),rgba(10,20,20,.1) 65%)}
.diff__list li>*{position:relative}
.diff__list h3{font:600 var(--fs-small)/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.diff__list p{margin:8px 0 0;max-width:34ch;font-size:13px;line-height:1.5;color:rgba(255,255,255,.85)}
@media (max-width:760px){.diff__list{grid-template-columns:1fr}.diff__list li{aspect-ratio:2}}

/* filters drawer, after the Brilliant Earth flyout */
.fdrawer__head h2{font-size:var(--fs-h2)}
.fdrawer__sub{display:flex;justify-content:space-between;align-items:baseline;padding:14px 24px;font-size:var(--fs-small);border-bottom:1px solid var(--rule)}
.fdrawer__sub p{margin:0;color:var(--ink-2)}
.fdrawer__clear{padding:0;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;font:400 13px/1.3 var(--sans);color:var(--ink-2)}
.fg summary{min-height:60px;font:600 var(--fs-body)/1.2 var(--sans);letter-spacing:0;text-transform:none}
.fg__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 8px;padding:0 0 22px}
.ft{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer}
.ft input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ft__ic{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#f3f3f3;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .2s var(--ease)}
.ft__ic img{width:62%;height:62%;object-fit:contain}
.ft__ic b{font:500 12px/1 var(--sans);color:var(--ink-2)}
.ft__sw{display:block;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--a,#d8d2c4) 0%,var(--b,#f4efe3) 50%,var(--a,#d8d2c4) 100%);box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)}
.ft__n{font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.ft:hover .ft__ic{box-shadow:inset 0 0 0 1px var(--ink)}
.ft input:checked~.ft__ic{box-shadow:inset 0 0 0 2px var(--ink)}
.ft input:checked~.ft__n{color:var(--ink);font-weight:600}
.ft input:focus-visible~.ft__ic{outline:2px solid var(--ink);outline-offset:3px}
.fdrawer__foot{padding:16px 24px}
.fdrawer__foot .btn{width:100%;justify-content:center;min-height:52px}

/* step bar: what you chose so far */
.steps3__sum{display:flex;flex-direction:column;gap:2px;min-width:0}
.steps3__sum strong{font-weight:600;color:var(--ink)}
.steps3__sum em{font-style:normal;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps3__links{display:flex;gap:12px}
.steps3__a{padding:0;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;font:400 12px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.steps3__s img.steps3__thumb{width:56px;height:56px;object-fit:cover;background:#fafafa;margin-left:auto}
@media (max-width:980px){.steps3__s .steps3__links,.steps3__s img.steps3__thumb{display:none}}
.steps3__s .steps3__links{flex-direction:row;margin-top:2px}