/* Celviora — the few rules the store wiring needs beyond the design's own stylesheet (assets/demo).
   Same tokens, type and radii as the design; nothing here restyles a design component. */

/* the store sells silver too — the design's swatch recipe in a cool grey (the design has no silver) */
.m-s{background:linear-gradient(135deg,#eef1f5,#8d98a3)}

/* store titles are longer than the design's one-word names: wrap between words, never mid-word */
.cv-pt{overflow-wrap:break-word;hyphens:manual}
/* the design's card names are one word on one line; store titles are long — the rail keeps one line,
   grid cards at most two, so card rows keep the design's rhythm (the full title is on the PDP) */
.x-pc-b b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-pc-b>span:first-child{min-width:0}
.x-pc-in{grid-template-columns:minmax(0,1fr)}  /* a nowrap name must not widen the card (its 4:5 image grew with it) */
.sc-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x-tag .x-tn{display:block;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* "Load more" under a listing / the builder's settings (the design shows its whole demo list at once) */
.cv-more{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:44px}
.cv-more:empty{display:none}

/* search: the listing without a filter column + a query field in the design's big-input style */
.col.cv-nof{grid-template-columns:minmax(0,1fr)}
.cv-sform{display:flex;gap:14px;align-items:end;max-width:720px;padding-bottom:30px}
.cv-sform .big-input{flex:1;min-width:0}
.cv-msearch{display:grid;gap:6px}

/* ---------- shell pages (blog, article, store pages, account, 404) inside the design's header + footer */
.page-width{max-width:1440px;margin-inline:auto;padding-inline:var(--gut);padding-block:26px clamp(80px,9vw,130px)}
.page-width--narrow{max-width:860px}
.page-width h1,.cv-head h1,.section__header h1{font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;font-size:clamp(40px,5vw,84px);line-height:1;color:var(--ink);margin:18px 0 26px;text-wrap:balance}
.page-width h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.05;margin:34px 0 14px;color:var(--ink)}
.page-width h3{font-family:var(--f-display);font-weight:700;font-size:21px;margin:26px 0 10px}
.cv-crumb,.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:0;margin:0}
.cv-crumb a:hover,.breadcrumbs a:hover{color:var(--ink)}
.cv-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rich-text{max-width:760px}
.rich-text--left{max-width:860px}
.rte{color:var(--muted);font-size:16px;line-height:1.8;max-width:68ch}
.rte p{margin:0 0 1em}.rte a{color:var(--accent);text-decoration:underline}.rte img{border-radius:4px;margin:20px 0}
.rte ul,.rte ol{padding-left:1.2em}
.cv-article .cv-lbl{display:block;margin-top:22px}
.cv-article__img{border-radius:20px;overflow:hidden;margin:10px 0 34px;background:var(--tint)}
.cv-article__img img{width:100%;height:auto}
.cv-tl{display:inline-flex;margin-top:36px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px}
.cv-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 14px}
.cv-post{display:grid;gap:10px;align-content:start}
.cv-post__img{display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--tint)}
.cv-post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.cv-post:hover .cv-post__img img{transform:scale(1.05)}
.cv-post__t{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.1;color:var(--navy)}
.cv-post__x{color:var(--muted);font-size:14px}
.cv-big{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,3vw,46px);color:var(--ink);margin:0}
.cv-big em{color:var(--accent);font-weight:600}
.cv-pager{margin-top:40px;display:flex;gap:18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.empty-state{display:grid;gap:18px;justify-items:start;padding-block:20px 40px;color:var(--muted)}
.field{display:grid;gap:6px;margin:0 0 16px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea,.page-width input[type=text],.page-width input[type=email],.page-width input[type=password],.page-width input[type=tel],.page-width select,.page-width textarea{width:100%;height:50px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .3s}
.page-width textarea{height:auto;min-height:120px;padding:14px 18px}
.field input:focus,.page-width input:focus,.page-width select:focus,.page-width textarea:focus{border-color:var(--accent)}
.button,.page-width button[type=submit]{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--h);padding:0 26px;border-radius:999px;background:var(--cta);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;border:0;cursor:pointer;transition:background .5s var(--ease)}
.button:hover,.page-width button[type=submit]:hover{background:#7a3341}
.button--secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.button--secondary:hover{background:var(--ink);color:var(--bg)}
.button--full{width:100%}
.form-status{padding:12px 16px;border-radius:12px;background:var(--tint);font-size:14px;margin:0 0 16px}
.form-status--error{color:var(--err)}.form-status--success{color:var(--ok)}
.page-width p a,.page-width .field a{color:var(--accent)}
.section__header{margin-bottom:30px}
.page-width .grid{gap:40px 14px}
.card{display:grid;gap:10px}.card__media{border-radius:18px;overflow:hidden;background:var(--tint);aspect-ratio:4/5}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__title{font-family:var(--f-display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.02em;color:var(--navy)}
.card__vendor{color:var(--muted);font-size:13px}
.cart__totals-row,.cart__row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.cv-note{color:var(--muted);font-size:15px;max-width:52ch;display:grid;gap:22px;justify-items:start}
@media (max-width:860px){.cv-posts{grid-template-columns:1fr 1fr}.cv-sform{flex-wrap:wrap}}
@media (max-width:560px){.cv-posts{grid-template-columns:1fr}}

/* the store configurator groups join the buy column's own grid (26px gap), and take no slot when empty */
#pV1{display:contents}
.pc{grid-template-columns:minmax(0,1fr)}  /* the nowrap name below must not widen the card (its implicit grid column grew to the name: cards overflowed at 375) */
.pc-meta>div:first-child{min-width:0}
.pc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* mega menu product cards: store titles at most two lines (the design's are two words) */
.mcard .d4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* phones zoom into any field under 16px on focus (build-rules: responsive input 16px) — the design's fields are 14px; desktop keeps them */
@media (max-width:560px){.fl input,.promo input,#engIn,.inp input,.inp select,.sel,.field input,.page-width input,.page-width select,.page-width textarea{font-size:16px}}
/* design defect: its decorative `.ghost{pointer-events:none}` also hits every `.btn.ghost` button ("Add setting only to bag",
   "See it in person", "View bag", empty-state buttons) — a real mouse click went through them. Same look, clickable. */
.btn.ghost{pointer-events:auto}
/* ---------- navigation = the demo url's menus, in the design's mega / drawer styles (2026-10-12) */
.cv-mi ul+h6{margin-top:26px}
.cv-kick{display:block;margin-bottom:6px;color:var(--muted)}
.cv-promo small{display:block}
.cv-promo .lk{margin-top:10px}
.cv-mg-h{position:relative}
.cv-mg-h .big{padding-right:52px}
.cv-mg-t{position:absolute;right:0;top:50%;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transform:translateY(-50%);transition:transform .45s var(--ease),background .3s}
.cv-mg-t:hover{background:var(--tint)}
.cv-mg.open .cv-mg-t{transform:translateY(-50%) rotate(45deg)}
.cv-mg-b{display:none;gap:20px;padding:16px 0 22px;border-bottom:1px solid var(--line)}
.cv-mg.open .cv-mg-b{display:grid}
.cv-mg-g h6{margin:0 0 10px;font-weight:400;color:var(--muted)}
.cv-mg-g ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:14.5px}
.cv-mnav-x{display:flex;flex-wrap:wrap;gap:22px;padding-top:20px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* phones: the header's right side holds search · wishlist · bag (account + store move into the menu drawer) */
@media (max-width:560px){.cv-xs-hide{display:none}}
/* footer = the demo's: contact rows under the brand line, then Shop · Useful Links · Information */
.cv-ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.cv-ft-contact{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:13.5px;color:rgba(247,237,234,.82)}
.cv-ft-contact a{display:inline-flex;gap:12px;align-items:flex-start;transition:color .3s}
.cv-ft-contact a:hover{color:var(--pale)}
.cv-ft-contact .ic{width:16px;height:16px;color:var(--pale);margin-top:2px}
/* mega "Shop by Metal": the metal's colour as a dot (the demo's swatches), the design's metal gradients */
.cv-dot{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(46,36,38,.12);flex:none}
@media (max-width:860px){.cv-ft-cols{grid-template-columns:1fr 1fr}}
/* design defect: under 1100px the footer card's single column took the brand column's min-content (newsletter form) — the
   card clipped "Subscribe" and the brand line at 375. Contact rows live there now, so keep it inside the card. */
@media (max-width:1100px){.ft-card{grid-template-columns:minmax(0,1fr)}}
.ft-brand{grid-template-columns:minmax(0,1fr)}  /* its own implicit column grew to the form (max-width 440px) */
/* PDP: 360° view (custom field v1_3d_url) — a pill on the first figure, in the design's mono / pill vocabulary */
.cv-360{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:background .4s var(--ease),color .4s var(--ease)}
.cv-360:hover{background:var(--cta);color:#fff}
.cv-360 .ic{width:17px;height:17px}
/* PDP: the configurator's compare-at price + saving (store data), beside the design's price */
.price .cv-cmp{font-size:15px;color:var(--muted);margin-left:10px}
.price .cv-save{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-left:10px;border-radius:4px;background:var(--navy);color:#fff;font-size:10px;vertical-align:3px}
.cv-shapes .fchip{cursor:pointer}
.cv-shapes .fchip.on{cursor:default}
/* cards: the store's metal family as the design's swatch dots (demo url's card), current metal named beside them */
.sc-row.cv-scm{margin-top:8px;justify-content:flex-start;gap:12px}
.cv-scm .sw{flex-wrap:wrap}
.cv-scm .sw button{width:14px;height:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cv-scm-t{font-size:12px}
/* numbered pages (listings, search, builder settings) — the design's pill chips */
.cv-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.cv-pg{min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--ink);background:transparent;transition:all .35s var(--ease)}
a.cv-pg:hover,button.cv-pg:hover{border-color:var(--muted)}
.cv-pg.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cv-pg.gap{border-color:transparent;min-width:20px;padding:0}
.cv-pg.nav .ic{width:16px;height:16px}
.cv-pg.prev .ic{transform:rotate(180deg)}
.cv-pg.off{opacity:.35}
.cv-pg-l{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:560px){.cv-pg{min-width:36px;height:36px;padding:0 10px}}
/* builder: the chosen setting's links under the steps (demo url: "Change | View") and the engraving field */
.cv-bset{display:flex;gap:12px;align-items:center;margin:-8px 0 26px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cv-bset a,.cv-bset .link-btn{color:var(--ink);font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
.cv-in{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:16px;background:transparent;color:var(--ink)}
.cv-in:focus{outline:none;border-color:var(--ink)}
/* builder step 2 — the demo url's diamond filters in the design's filter tint panel */
.cv-dfil .cv-wide{flex-basis:100%}
.cv-dfil .grp{min-width:180px}
.cv-dual{display:grid;gap:6px;min-width:200px}
.cv-pair{display:flex;align-items:center;gap:8px}
.cv-pair .sel{height:36px;padding:0 30px 0 14px;background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px}
.cv-reset{margin-left:auto;align-self:center;font-size:12.5px}
.cv-dbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 14px}
.cv-dbar .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cv-picks{display:grid;gap:10px;margin-bottom:18px}
.cv-picks .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cv-picks>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cv-pick{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;text-align:left;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);transition:border-color .35s var(--ease)}
.cv-pick:hover,.cv-pick.on{border-color:var(--ink)}
.cv-pick img{width:52px;height:52px;object-fit:contain;border-radius:4px;background:var(--tint)}
.cv-pick b{display:block;font-weight:500;font-size:14px}
.cv-pick small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.cv-picks>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tbl-x.cv-busy{opacity:.5;transition:opacity .3s}
.dt .cv-dmsg{text-align:center;padding:40px 16px;color:var(--muted)}
.dt .cv-cert{display:block;font-size:11px;color:var(--muted)}
.dt tr.cv-view td{background:var(--tint)}
.dt tr[data-act]{cursor:pointer}
/* the side panel = the diamond's detail (photo, 360°, report, Setting + Diamond = Total) */
.cv-dimg{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--tint);border-radius:6px;overflow:hidden}
.cv-dimg img{width:100%;height:100%;object-fit:contain}
.cv-dimg .cv-360{left:12px;bottom:12px;height:34px;padding:0 14px}
.cv-tot{border-top:1px solid var(--line);padding-top:12px!important}
.gemb img{width:100%;height:100%;object-fit:contain;border-radius:50%}
/* builder step 3 — "Change | View" per part, ring size select, "I don't know", subtotal */
.cv-cv{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--f-mono)}
.cv-cv a,.cv-cv .link-btn{color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:inherit}
.cv-bset .cv-gap{margin-left:18px}
.sel.cv-wsel{width:100%;height:46px;font-size:16px}
.cv-chk{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-top:10px;cursor:pointer}
.cv-chk input{width:16px;height:16px;accent-color:var(--ink)}
.sumlist.cv-sub span{font-weight:500}
.cv-note{font-size:13px;margin:0}
/* phones: the diamond table keeps shape · carat · colour · clarity · price on screen (cut, origin, report are in the panel) */
@media (max-width:560px){.cv-dfil~.tbl-x .dt th:nth-child(3),.cv-dfil~.tbl-x .dt td:nth-child(3),.cv-dfil~.tbl-x .dt th:nth-child(6),.cv-dfil~.tbl-x .dt td:nth-child(6),.cv-dfil~.tbl-x .dt th:nth-child(7),.cv-dfil~.tbl-x .dt td:nth-child(7){display:none}
  .cv-dfil~.tbl-x .dt th,.cv-dfil~.tbl-x .dt td{padding:10px 8px}.cv-dfil~.tbl-x .dt{min-width:0;width:100%}}
/* playbook Step 5 — the logo sits in the true centre at every width. The design's 861–1180px tier shows the burger as a
   4th item in its 3-column grid, so the icons wrapped to a second row (1024: logo pushed right); the burger now shares
   column 1 with "Book an appointment", and below 861px the side columns are equal so the logo centres */
@media (max-width:1180px){.hd-top-in>.burger{grid-column:1;grid-row:1}.hd-top-in>.hd-l{grid-column:1;grid-row:1;padding-left:52px}.hd-top-in>.logo{grid-column:2;grid-row:1}.hd-top-in>.hd-r{grid-column:3;grid-row:1}}
@media (max-width:860px){.hd-top-in{grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}}
/* ===== builder step 2 v3 (playbook 12A / 12B) — the demo url's filters, cards and detail view in the design's parts ===== */
.cv-rb2{padding-bottom:110px}
.cv-ftog{display:none;margin-bottom:12px}
.cv-fv{font-weight:400;letter-spacing:0;text-transform:none;font-family:var(--f-body,inherit);color:var(--ink);margin-left:8px;font-size:12.5px}
.cv-inp2{display:flex;gap:8px}
.cv-inp2 label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.cv-inp2 .cv-in{height:36px;width:92px;padding:0 10px;font-size:14px}
.cv-fancy{margin-top:8px;max-width:520px}
.cv-fc{width:12px;height:12px;border-radius:50%;background:var(--fc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.cv-advh{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.cv-advh .link-btn.mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cv-cts{margin:0 0 14px}
.cv-om{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round}
.cv-allh,.cv-picks h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:6px 0 14px}
.cv-picks{margin-bottom:26px}
.cv-picks>.cv-dgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cv-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.cv-dcard{display:grid;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg);cursor:pointer;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.cv-dcard:hover,.cv-dcard:focus-visible{border-color:var(--ink)}
.cv-dcard.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cv-dcard-m{position:relative;aspect-ratio:1;background:var(--tint);display:grid;place-items:center}
.cv-dcard-m img{width:100%;height:100%;object-fit:contain}
.cv-dcard-360{position:absolute;right:10px;bottom:10px;height:24px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.92);display:inline-flex;align-items:center;font-size:10px;letter-spacing:.1em}
.cv-dcard-b{display:grid;gap:4px;padding:14px 16px 16px}
.cv-dcard-c{font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.cv-dcard-s{font-size:13px;color:var(--muted);line-height:1.45}
.cv-dcard-p{font-size:17px;color:var(--ink);margin-top:4px}
.cv-noimg{display:grid;justify-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.cv-noimg img,.cv-noimg .cv-om{width:46px;height:46px}
.cv-noimg.big img,.cv-noimg.big .cv-om{width:96px;height:96px}
.cv-dsk{aspect-ratio:1/1.32;border-radius:6px;background:linear-gradient(100deg,var(--tint) 30%,rgba(255,255,255,.65) 50%,var(--tint) 70%);background-size:300% 100%;animation:cvsk 1.4s linear infinite}
@keyframes cvsk{from{background-position:100% 0}to{background-position:0 0}}
.cv-rb2 .cv-dmsg,.cv-dmsg{text-align:center;padding:40px 16px;color:var(--muted)}
.cv-sfor{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
/* the stone's detail view (the demo url's "diamond PDP"), in place of the list */
.cv-dv{padding-bottom:110px}
.cv-dv-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px}
.cv-dv-bar .link-btn.mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.cv-dv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,60px);align-items:start}
.cv-dv-media{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px}
.cv-dv-rail{display:grid;gap:10px;align-content:start}
.cv-dv-th{width:72px;height:72px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;background:var(--bg);overflow:hidden;font-size:11px;letter-spacing:.08em;color:var(--ink)}
.cv-dv-th img{width:100%;height:100%;object-fit:contain}
.cv-dv-th.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cv-dv-th .ic{width:22px;height:22px}
.cv-dv-stage{aspect-ratio:1;border-radius:6px;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.cv-dv-stage img,.cv-dv-stage video{width:100%;height:100%;object-fit:contain}
.cv-dv-stage iframe{width:100%;height:100%;border:0}
.cv-dv-info{display:grid;gap:14px;position:sticky;top:calc(var(--hdh-c,64px) + 20px)}
.cv-dv-t{margin:0}
.cv-tot{padding:12px 0 0!important;border-top:1px solid var(--line)}
.cv-tot .cv-t{font-weight:500;color:var(--ink);font-size:16px}
.cv-dv-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0;font-weight:400}
.cv-dv-spec{padding:0!important;grid-template-columns:auto 1fr auto 1fr!important;column-gap:16px}
@media (max-width:1100px){.cv-dv-grid{grid-template-columns:minmax(0,1fr)}.cv-dv-info{position:static}}
@media (max-width:860px){.cv-ftog{display:inline-flex}.cv-dfil{display:none}.cv-dfil.open{display:flex}
  .cv-picks>.cv-dgrid,.cv-dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cv-dv-media{grid-template-columns:minmax(0,1fr)}.cv-dv-rail{grid-auto-flow:column;justify-content:start;order:2}.cv-dv-spec{grid-template-columns:auto 1fr!important}}
@media (max-width:560px){.cv-dcard-b{padding:10px 10px 12px}.cv-dcard-s{font-size:12px}.cv-dcard-p{font-size:15px}.cv-inp2 .cv-in{width:84px}}
.cv-dchosen{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--ink);border-radius:6px;margin-bottom:16px;font-size:14px}
.cv-dchosen b{font-weight:500}
.cv-dfil .cv-advh{display:flex;justify-content:space-between;align-items:center}
/* PDP: the store's other sibling families (+ N more) and the ring size "Don't know" chip */
.cv-lgrp:not(.all) .cv-mx{display:none}
.cv-lgrp .cv-mb{border-style:dashed}
.sizes .cv-dk{grid-column:span 2;width:auto;padding:0 12px}
.mini-trust a{display:inline-flex;align-items:center;gap:inherit;color:inherit}
/* playbook Step 15 — every card name keeps two lines' height, so a row of cards lines up */
.sc-n{min-height:2lh}
/* Step 18: switching menus cross-fades the columns a touch slower */
#megaIn .mi{transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* wishlist: search + remove per piece */
.cv-wlq{margin:16px 0 6px}
.cv-wl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.cv-wl-r[hidden]{display:none}
.cv-wl-r .link-btn{font-size:12.5px}
.cv-wn{font-size:12px;vertical-align:4px}
.cv-sugg{justify-content:center;margin:6px 0 4px}
/* ===== content pages (playbook Step 24) — the design's eyebrow / display heading / tint frames / mono numbers ===== */
.cvp{padding-bottom:clamp(80px,9vw,130px)}
.cvp-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(16px,2vw,28px) 0 clamp(50px,6vw,90px)}
.cvp-hero .crumbs{margin-bottom:28px}
.cvp-hero h1{margin:14px 0 18px}
.cvp-lede{font-size:clamp(16px,1.3vw,18px);color:var(--muted);max-width:52ch;line-height:1.6}
.cvp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cvp-img{aspect-ratio:1;background:var(--tint);border-radius:6px;display:grid;place-items:center;overflow:hidden}
.cvp-img img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(58,45,48,.18))}
.cvp-b{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.cvp-h{display:grid;gap:12px;margin-bottom:clamp(24px,3vw,40px);max-width:760px}
.cvp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cvp-facts>div{display:grid;gap:6px;padding:22px;border-radius:6px;background:var(--tint)}
.cvp-facts b{font-family:var(--f-display);font-size:clamp(28px,3vw,42px);font-weight:400;color:var(--ink);line-height:1.1}
.cvp-facts span{color:var(--muted);font-size:14px}
.cvp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.cvp-card{display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:6px;text-align:left;color:var(--ink);background:var(--bg);transition:border-color .35s var(--ease)}
a.cvp-card:hover,button.cvp-card:hover{border-color:var(--ink)}
.cvp-card h3,.cvp-steps h3,.cvp-plan h3,.cvp-compare h3,.cvp-prose h3{font-family:var(--f-display);font-weight:400;font-size:20px;margin:0}
.cvp-card p,.cvp-steps p,.cvp-plan p,.cvp-prose p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.cvp-ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.cvp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;counter-reset:s}
.cvp-steps li{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--ink)}
.cvp-steps .mono{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.cvp-prose{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.cvp-toc{position:sticky;top:calc(var(--hdh-c,64px) + 20px);display:grid;gap:10px;font-size:13.5px}
.cvp-toc .mono{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.cvp-toc a{color:var(--muted)}
.cvp-toc a:hover{color:var(--ink)}
.cvp-prose section{display:grid;gap:10px;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdh-c,64px) + 24px)}
.cvp-prose ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.7}
.cvp-faq{max-width:860px}
.cvp-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cvp-compare>div{padding:24px;border-radius:6px;background:var(--tint);display:grid;gap:12px;align-content:start}
.cvp-compare ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px;line-height:1.7}
.cvp-compare .no{background:transparent;border:1px solid var(--line)}
.cvp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.cvp-plan{position:relative;display:grid;gap:8px;align-content:start;padding:26px 22px;border:1px solid var(--line);border-radius:6px}
.cvp-plan.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cvp-plan b{font-family:var(--f-display);font-weight:400;font-size:36px;color:var(--ink)}
.cvp-plan small{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.cvp-tag{position:absolute;top:-11px;left:20px;background:var(--ink);color:var(--bg);font-size:10px;letter-spacing:.12em;padding:4px 10px;border-radius:999px}
.cvp-note{margin-top:16px;font-size:13.5px}
.cvp-cta{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:center}
.cvp-cta p{color:var(--muted);max-width:56ch;line-height:1.6}
@media (max-width:860px){.cvp-hero,.cvp-cta,.cvp-prose,.cvp-compare{grid-template-columns:minmax(0,1fr)}.cvp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cvp-toc{position:static}.cvp-hero .cvp-img{max-width:420px}}
/* playbook Step 26 — Call now (left) + back to top (right); both rise above the PDP's sticky buy bar */
.cv-call{position:fixed;left:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14px;box-shadow:0 10px 30px rgba(42,30,33,.22);transition:transform .35s var(--ease),bottom .35s var(--ease)}
.cv-call:hover{transform:translateY(-2px)}
.cv-call .ic{width:18px;height:18px}
.cv-top{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(42,30,33,.12);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease),bottom .35s var(--ease)}
.cv-top.on{opacity:1;pointer-events:auto;transform:none}
.cv-top .ic{width:18px;height:18px}
body:has(#sbar.on) .cv-call,body:has(#sbar.on) .cv-top{bottom:96px}
@media (max-width:560px){.cv-call{left:12px;bottom:12px;height:44px;padding:0 16px 0 13px;font-size:13px}.cv-top{right:12px;bottom:12px;width:44px;height:44px}body:has(#sbar.on) .cv-call,body:has(#sbar.on) .cv-top{bottom:84px}}
/* ===== mobile pass (13 Oct): long store names in the design's short-name slots ===== */
.sbar-t{min-width:0}
.sbar-t b,.sbar-t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs{flex-wrap:wrap;row-gap:4px}
.mini-trust a{display:flex;gap:10px;align-items:center}
.pset-c b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){.pset-c b{font-size:18px}}
body.cv-fttop .cv-top{opacity:0;pointer-events:none}
/* phones: "Call now" becomes a round phone button (the pill sat over cards and buttons) */
@media (max-width:560px){.cv-call{width:44px;padding:0;justify-content:center}.cv-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* header, burger tiers (≤1180px; user screenshot 13 Oct, iPhone 16): every icon button 40 px — the count badge sat in the
   flow and widened wishlist / bag to 63 px (gaps 41 / 65 px) — and the burger + icons sit on the CELVIORA wordmark line
   (they were centred on the whole mark + wordmark block, 11 px above the word) */
@media (max-width:1180px){
  .hd-top-in .hd-r .icb{width:40px;min-width:40px;padding:0}
  .hd-top-in .hd-r .icb .cnt{position:absolute;top:3px;right:1px}
  .hd-top-in>.burger,.hd-top-in>.hd-r,.hd-top-in>.hd-l{transform:translateY(11px)}
}
/* navbar fix (2026-10-13): as .hd-top collapses (grid rows, .6s) the header grows the same bottom margin on the same
   curve, so the page keeps its height and scroll anchoring has nothing to correct — no expand/collapse loop. The
   margin value is set by the header script (the top row's natural height). */
.hd{transition:margin-bottom .6s var(--ease)}
/* product gallery fix (2026-10-13): figures that would start below the buy panel are moved (app script) into this
   full-width row under the gallery + buy panel, four a row, instead of leaving the right column empty */
.pdp>.gal-more{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}

/* >>> playbook (tools/celviora/playbook.css) */
/* Celviora — Carat Studio playbook port, in Celviora's own design (Playfair Display / Geist / Geist Mono, plum
   #3A2D30, rose #9A7670, ivory #F7F3EF). Inserted into assets/cv/cv-*.css by tools/celviora/apply-playbook.mjs. */

/* C3 — one fixed 4:3 white box on every product (the store's photos are all 4:3 on white): no padding, the photo whole */
.gal2.pb-gal .fr,.gal2.pb-gal .g-first .fr{aspect-ratio:4/3;background:#fff;border-radius:6px}
.pb-gal .fr img{object-fit:contain;background:#fff;animation:none}
.pb-stage{position:relative}
.pb-photo{position:absolute;inset:0}
.pb-photo img{width:100%;height:100%;object-fit:contain}
.pb-stage[data-mode="3d"] .pb-photo{visibility:hidden}
/* C4 — Photos | 360° / 3D switch and Try on, over the photo box */
.pb-3d{position:absolute;inset:0;background:#fff;overflow:hidden}
.pb-3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pb-sw{position:absolute;left:12px;bottom:12px;z-index:4;display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pb-sw button,.pb-try{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
.pb-sw button .ic,.pb-try .ic{width:15px;height:15px}
.pb-sw button.on{background:var(--cta);color:#fff}
.pb-try{position:absolute;right:12px;bottom:12px;z-index:4;height:38px;background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px var(--line)}
.pb-try:hover{background:var(--cta);color:#fff}
.pb-stage[data-mode="3d"] .pb-try{display:none}
.pb-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#fff;transition:opacity .6s var(--ease)}
.pb-cover.off{opacity:0;pointer-events:none}
.pb-cover-in{display:grid;justify-items:center;gap:14px;color:var(--muted)}
.pb-cover-in img{width:96px;height:auto;animation:pbPulse 1.6s ease-in-out infinite}
.pb-cover-in .mono{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
@keyframes pbPulse{50%{opacity:.45}}
/* the viewer's corner mark is another brand's: Celviora's badge sits over it */
.pb-badge{position:absolute;left:0;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;min-width:190px;height:62px;padding:0 16px;background:#fff;pointer-events:none}
.pb-badge img{height:24px;width:auto}
.pb-badge b{font-family:var(--f-display);font-weight:400;font-size:13px;letter-spacing:.32em;color:var(--ink)}
/* in 3D mode the Photos | 360° switch sits above the badge, which covers the viewer's own mark (bottom-left, ~135×36) */
.pb-stage[data-mode="3d"] .pb-sw{bottom:74px}
.pb-tryon{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(30,22,24,.58);opacity:0;transition:opacity .35s var(--ease)}
.pb-tryon.on{opacity:1}
.pb-tryon-in{width:min(980px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.4)}
.pb-tryon-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line)}
.pb-tryon-h .mono{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-x{font-size:24px;line-height:1;width:40px;height:40px;flex:none}
.pb-tryon-v{position:relative;aspect-ratio:4/3;max-height:calc(100vh - 140px);width:100%}
html.pb-lock{overflow:hidden}
@media (max-width:700px){.pb-tryon{padding:0}.pb-tryon-in{height:100%;border-radius:0;display:flex;flex-direction:column}.pb-tryon-v{flex:1;aspect-ratio:auto;max-height:none}}

/* C6 — information column */
.pb-buy{gap:24px}
.pb-kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pb-desc p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:56ch}
.pb-desc.fold p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pb-more{justify-self:start;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.pb-opt .opt-h b{font-family:var(--f-display);font-weight:400;font-size:16px;color:var(--ink)}
.pb-opt .opt-h .link-btn{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.pb-opt .opt-h .link-btn .ic{width:13px;height:13px}
.pb-sel .sel{width:100%;height:46px;font-size:14px}
.pb-hint{margin:0;font-size:12.5px}
.pb-eng-t{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink)}
.pb-eng-b{display:none;grid-template-columns:1fr auto;align-items:center;gap:12px}
.pb-eng.open .pb-eng-b{display:grid}
.pb-eng.open .pb-eng-t .pl::after{transform:none}
.pb-eng-b input{height:46px;border:1px solid var(--line);border-radius:999px;padding:0 18px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink);min-width:0}
.pb-eng-b input:focus{outline:none;border-color:var(--ink)}
.pb-cnt{font-size:11px}
.pb-buyrow{display:flex;gap:10px;align-items:stretch}
.pb-buyrow .btn{flex:1;min-width:0}
.pb-qty{display:inline-flex;align-items:center;height:50px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.pb-qty button{width:42px;height:100%;font-size:18px;color:var(--ink)}
.pb-qty input{width:34px;border:0;background:transparent;text-align:center;font:inherit;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.pb-qty input::-webkit-outer-spin-button,.pb-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pb-acts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.pb-acts button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;color:var(--ink);white-space:nowrap;transition:box-shadow .3s var(--ease)}
.pb-acts button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pb-acts .ic{width:17px;height:17px;flex:none}
.pb-save.on .ic path{fill:var(--accent);stroke:var(--accent)}
.pb-trust{background:var(--iv);border-radius:12px;padding:16px 18px;gap:12px 18px}
.pb-trust span{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.35}
.pb-trust .ic{width:18px;height:18px;flex:none;color:var(--accent)}
@media (max-width:420px){.pb-acts button span{font-size:11.5px}.pb-acts{gap:6px}.pb-acts button{padding:0 6px;gap:6px}}

/* D1 / D2 — cards: a clear "Save N%" tag on the photo's corner, compare-at price beside the price */
.pb-off{position:absolute;left:12px;top:12px;z-index:2;padding:5px 9px;border-radius:4px;background:var(--navy);color:var(--on-night);font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.pb-row{gap:10px}
.pb-row>.muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-price{display:inline-flex;align-items:baseline;gap:8px;flex:none}
.pb-price s{font-size:.86em;color:var(--muted)}
@media (max-width:560px){.pb-row{align-items:flex-start}.pb-price{flex-direction:column;align-items:flex-end;gap:0}}
.grid{align-content:start}
/* D3 — empty collection */
.pb-empty{padding-block:clamp(40px,6vw,80px) clamp(80px,10vw,140px)}
.pb-empty p{margin:14px 0 26px;color:var(--muted)}
/* F3 — builder ring in the bag: the diamond's photo as a round inset on the setting photo */
.line>a{position:relative;display:block}
.pb-inset{position:absolute;right:-6px;bottom:-6px;width:44%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(0,0,0,.35)}
.pb-inset img{width:100%;height:100%;object-fit:cover}
/* J — the smallest phones (≤ 360px): the header's Bag icon was cut off at 320px (logo 159px + three 40px icons) */
@media (max-width:360px){
  .hd-top-in .hd-r .icb{width:34px;min-width:34px}
  .hd-top-in .logo b{font-size:18px;letter-spacing:.26em}
  .hd-top-in .logo i{letter-spacing:.4em}
}
/* narrow photo boxes: Try on moves to the top corner so it never meets the Photos | 360° switch */
@media (max-width:520px){.pb-try{top:12px;bottom:auto;height:34px}}
/* D2 — while the collection page shows its filter sidebar (≥ 1181px), the grids without one get a fifth column so every
   card is the same width (search results, "Beautiful together" on the product page) */
@media (min-width:1181px){.col.cv-nof #cgrid,.pb-related .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* below 1181px the 5 related pieces sit in one swipe row (none hidden) */
@media (max-width:1180px){.pb-related .grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(200px,calc((100% - 36px)/3));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}.pb-related .grid .sc{scroll-snap-align:start}}
@media (max-width:600px){.pb-related .grid{grid-auto-columns:minmax(150px,calc((100% - 12px)/2))}}
/* J — builder: the "Setting View | Change · Diamond View | Change" line wraps on phones (its last Change was cut off) */
.cv-bset{flex-wrap:wrap;row-gap:6px}
/* bag lines: the store's 4:3 photo whole, on white (as on the product page) */
.line .fr,.sum-it .fr{background:#fff}
.line .fr img,.sum-it .fr img{object-fit:contain}

/* ---------- image loading shimmer (2026-10-15): only WHILE a photo is loading — the frame is a warm ivory with Celviora's
   metallic light (a champagne-edged diagonal band) sweeping across it on a loop; it fades away the moment the photo is in
   and nothing plays after that ---------- */
.pb-gl{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:#F1E8E2;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.pb-gl.ld{opacity:1;visibility:visible;transition:none}
.pb-gl::after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:45%;transform:translateX(-160%) skewX(-18deg);background:linear-gradient(90deg,rgba(199,174,138,0) 0,rgba(214,192,160,.35) 30%,rgba(255,255,255,.95) 50%,rgba(214,192,160,.35) 70%,rgba(199,174,138,0) 100%)}
.pb-gl.ld::after{animation:pbLoadSweep 1.4s cubic-bezier(.35,.05,.25,1) infinite}
@keyframes pbLoadSweep{from{transform:translateX(-160%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}
.pb-stage[data-mode="3d"] .pb-gl{display:none}
@media (prefers-reduced-motion:reduce){.pb-gl.ld::after{animation:none;opacity:0}}
/* product photos: small 4:3 thumbnails under the main photo (they were 350px figures) — a click shows one in the main box */
.pb-thumbs{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;max-width:100%}
.pb-th{display:block;padding:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;cursor:pointer;transition:box-shadow .3s var(--ease)}
.pb-th .fr{border-radius:6px;pointer-events:none}
.pb-th:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.pb-th.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pb-th:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pb-th .fr img{transition:none}
.pb-th:hover .fr img{transform:none}
@media (max-width:560px){.pb-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}

/* ---------- every size shows everything (responsive parity, 2026-10-15) ---------- */
/* card quick actions (Add to bag · Save · View) appear on hover with a mouse; touch screens have no hover — always shown there */
@media (hover:none){.sc-ico{gap:6px;right:10px}.sc-ico button{opacity:1;transform:none;width:32px;height:32px}.sc-ico button svg{width:14px;height:14px}}
/* home bestsellers: below 900px the rail is a swipe row, but its track grew to its full 3,300px width inside a frame that
   clips — only the first piece was reachable. Held to the screen width it scrolls */
@media (max-width:900px){.x-bs-pin{grid-template-columns:minmax(0,1fr)}.x-bs-track{min-width:0;max-width:100%;-webkit-overflow-scrolling:touch}.x-bs-track>*{scroll-snap-align:start}}
/* home craft steps: each step's own photo, shown on phones / tablets (the laptop keeps the pinned frame beside the steps) */
.pb-step-im{display:none}
@media (max-width:900px){.pb-step-im{display:block;margin-top:6px}.pb-step-im .fr{aspect-ratio:5/4;border-radius:18px}.x-craft-frame{display:none}}
/* the phone menu's Book an appointment / Ring size guide, in the style of its Account / Find our store links */
.pb-mnav-x{padding-top:14px}
.pb-mnav-x button{display:inline-flex;align-items:center;gap:8px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.pb-mnav-x .ic{width:15px;height:15px}
/* About "Four promises": each card's photo (and its dark text panel) fades in on hover — touch screens show it at once */
@media (hover:none){.val img{opacity:1;transform:scale(1)}.val::after{opacity:1}}
/* home vault: on the smallest phones the five collections don't fit one row of fifths ("Engagement" is wider than a
   fifth of 320px — the first and last fell off the screen); three a row there */
@media (max-width:420px){.x-orbit{grid-template-columns:repeat(3,minmax(0,1fr))}.x-om{min-width:0}.x-omi{max-width:84px}}
/* filter drawer (tablets / phones): "Show results" stays at the bottom of the drawer while the filters scroll */
@media (max-width:1180px){#filters>.fg:last-child{position:sticky;bottom:0;z-index:2;background:var(--bg);padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));margin-top:auto;box-shadow:0 -10px 18px -14px rgba(46,36,38,.25)}}
/* ---------- diamond step filters: two-thumb sliders (carat, price, colour, clarity, polish, symmetry, fluorescence) ---------- */
.dfil.cv-dfil,.dfil.cv-dfil.open{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:22px 40px;align-items:start}
@media (max-width:860px){.dfil.cv-dfil:not(.open){display:none}}
.cv-dfil .cv-wide,.cv-dfil .cv-advh{grid-column:1/-1}
.cv-dfil .grp{min-width:0}
.cv-dfil .grp>.mono{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:22px}
.cv-dfil .cv-dual{--t:9px;position:relative;display:block;height:28px;min-width:0;margin:4px 0 10px}
.cv-dfil .cv-dual::before,.cv-dfil .cv-dual::after{content:"";position:absolute;top:50%;height:2px;margin-top:-1px;border-radius:2px;pointer-events:none}
.cv-dfil .cv-dual::before{left:var(--t);right:var(--t);background:var(--line)}
.cv-dfil .cv-dual::after{left:calc(var(--t) + (100% - 2 * var(--t)) * var(--a,0));right:calc(var(--t) + (100% - 2 * var(--t)) * (1 - var(--b,1)));background:var(--accent)}
.cv-dfil .cv-dual input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.cv-dfil .cv-dual input[type=range]::-webkit-slider-runnable-track{height:28px;background:none;border:0}
.cv-dfil .cv-dual input[type=range]::-moz-range-track{background:none;border:0}
.cv-dfil .cv-dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:5px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.14);cursor:grab;transition:transform .2s var(--ease)}
.cv-dfil .cv-dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.14);cursor:grab}
.cv-dfil .cv-dual input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
.cv-dfil .cv-dual input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,0,0,.08),0 0 0 1.5px var(--accent)}
.cv-dfil .cv-dual input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(0,0,0,.08)}
.pb-ticks{display:flex;justify-content:space-between;padding:0 9px;margin-top:-6px;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.pb-ticks span{width:0;display:flex;justify-content:center;white-space:nowrap;transition:color .25s var(--ease)}
.pb-ticks span.on{color:var(--ink)}
@media (hover:none){.cv-dfil .cv-dual{height:36px}.cv-dfil .cv-dual input[type=range]::-webkit-slider-runnable-track{height:36px}.cv-dfil .cv-dual input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:6px}.cv-dfil .cv-dual input[type=range]::-moz-range-thumb{width:24px;height:24px}.cv-dfil .cv-dual{--t:12px}.pb-ticks{padding:0 12px}}
/* footer wordmark: the design cropped CELVIORA at 0.62em (its lower part was cut off); show the whole word */
.wordmark{height:auto;overflow:visible;padding-bottom:.1em}
/* ---------- diamond step: grid / list switch + list rows ---------- */
.cv-dbar .pb-dvt{margin-left:auto}
.pb-dvt{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--bg)}
.pb-dvt button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:background .35s var(--ease),color .35s var(--ease)}
.pb-dvt button .ic{width:15px;height:15px}
.pb-dvt button:hover{color:var(--ink)}
.pb-dvt button.on{background:var(--ink);color:#fff}
.cv-dgrid.pb-dlist{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.pb-drh,.cv-dcard.pb-drow{display:grid;grid-template-columns:56px minmax(0,1.4fr) repeat(5,minmax(0,.8fr)) minmax(0,1fr) 22px;align-items:center;gap:14px;padding:10px 14px}
.pb-drh{padding-top:12px;padding-bottom:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.pb-drh span:nth-child(8){text-align:right}
.cv-dcard.pb-drow{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg);font-size:14px;color:var(--ink);transition:background .3s var(--ease)}
.cv-dcard.pb-drow:hover,.cv-dcard.pb-drow:focus-visible{background:var(--tint);border-color:var(--line)}
.cv-dcard.pb-drow.on{background:var(--tint);box-shadow:inset 3px 0 0 var(--ink);border-color:var(--line)}
.pb-dr-m{width:56px;height:56px;border-radius:6px;overflow:hidden;background:var(--tint);display:grid;place-items:center}
.pb-dr-m img{width:100%;height:100%;object-fit:contain}
.pb-dr-m svg{width:30px;height:30px}
.pb-dr-sh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.pb-dr-sh b{font-weight:500}
.pb-dr-sh i{font-style:normal;font-size:9.5px;letter-spacing:.1em;padding:2px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.pb-dr-sum{display:none;flex-basis:100%;font-size:12px;color:var(--muted);line-height:1.4}
.pb-dr-c{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-dr-p{text-align:right;font-size:15px;white-space:nowrap}
.pb-dr-go{display:grid;place-items:center;color:var(--muted);transition:transform .3s var(--ease),color .3s var(--ease)}
.pb-dr-go .ic{width:16px;height:16px}
.pb-drow:hover .pb-dr-go{color:var(--ink);transform:translateX(3px)}
.pb-drsk{height:77px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--bg) 0,var(--tint) 50%,var(--bg) 100%);background-size:200% 100%;animation:pbRowSk 1.4s linear infinite}
@keyframes pbRowSk{from{background-position:100% 0}to{background-position:-100% 0}}
@media (max-width:820px){
  .pb-drh{display:none}
  .cv-dcard.pb-drow{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:10px 4px}
  .pb-drow .pb-dr-c,.pb-drow .pb-dr-go{display:none}
  .pb-dr-sum{display:block}
}
@media (max-width:420px){.cv-dbar #dqSort{flex:1 1 100%}.pb-dvt button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.pb-dvt button{padding:0 10px}.cv-dbar{flex-wrap:wrap}}
/* fancy-colour chips: the faceted diamond icon */
.pb-gem{width:18px;height:18px;flex-shrink:0;margin-left:-2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));transition:transform .35s var(--ease)}
.fchip:hover .pb-gem{transform:translateY(-1px) rotate(-6deg)}
/* ring size required: the select's error state */
.sel.pb-bad{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.pb-err{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;font-size:13px;line-height:1.45;color:var(--err)}
.pb-err .ic{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.pb-err[hidden]{display:none}
.pb-shake{animation:pbShake .42s var(--ease)}
@keyframes pbShake{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@media (prefers-reduced-motion:reduce){.pb-shake{animation:none}}

/* <<< playbook */
/* mega menu (15 Oct): the store hides menu links whose collection is empty, so a menu may have 2–5 groups — the design's
   fixed 5-column grid then left everything on the left. The groups now sit together in the middle, each at its column width */
#megaIn.mega-in{display:flex;justify-content:center;align-items:flex-start;gap:clamp(28px,3vw,56px)}
#megaIn.mega-in>.mi{flex:0 1 230px}
#megaIn.mega-in>.mi:has(.mshp){flex:0 1 400px}
#megaIn.mega-in>.cv-promo{flex:0 1 260px}
/* hero pill (15 Oct, user: "box fit image kar do"): the photo fills the whole pill — no inset; the store photos are on white,
   so the pill takes that white and the piece fits its full height (contain) — nothing of the jewellery is cropped */
.x-hero .win .it{inset:0;background:#fff;border-radius:inherit;overflow:hidden}
.x-hero .win .it img{width:100%;height:100%;object-fit:contain;object-position:center;filter:none}

/* signature call-outs (15 Oct, user): marker layer = the photo's own box + motion, so each dot lands on its part of the store photo */
.x-sig-pts{position:absolute;inset:0;pointer-events:none;transform:scale(calc(1.2 - var(--q) * .2))}
.x-sig-pts i{position:absolute;width:0;height:0}
/* "From stone to hand" (15 Oct, user: photo cut): the pinned column = the screen height under the header, and the photo frame
   takes what is left after the heading + step number (up to its 5:4) — the whole frame stays on screen while the steps scroll */
@media (min-width:901px){
  .x-craft-stick{height:calc(100vh - var(--hdc,53px) - 64px);grid-template-rows:auto auto auto minmax(0,1fr);align-content:start}
  .x-craft-frame{max-height:100%;align-self:start}
}
/* header icons (16 Oct, user): an empty count no longer holds its 25 px (it was only scaled to 0) — that made the heart wider
   and pushed Bag away. Icon-only buttons are one 40 px size with the count as a corner badge; Search / Bag keep their words.
   The compact (scrolled) header now carries the same five: Search, Account, Store, Wishlist, Bag */
@media (min-width:1181px){
  .hd-r .icb .cnt:not(.on){display:none}
  .hd-r .icb:not(:has(.lbl)){width:40px;min-width:40px;padding:0}
  .hd-r .icb:not(:has(.lbl)) .cnt{position:absolute;top:3px;right:1px}
}

/* card metal swap (card-metal-swap.md, 16 Oct): while a metal's piece is coming, the photo shimmers and name / price dim */
a.sc.cv-swapping .sc-img{background:linear-gradient(100deg,var(--tint,#f3eeea) 30%,#fff 50%,var(--tint,#f3eeea) 70%) 0 0/300% 100%;animation:cvSwapShim 1.1s linear infinite}
a.sc.cv-swapping .sc-img img{opacity:.55;transition:opacity .2s}
a.sc.cv-swapping .sc-n,a.sc.cv-swapping .pb-price,a.sc.cv-swapping .cv-scm-t{opacity:.5;transition:opacity .2s}
@keyframes cvSwapShim{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){a.sc.cv-swapping .sc-img{animation:none}}

/* ring builder = renaissancejewel.com's (renaissancejewel-ring-builder.md, 16 Oct) — in Celviora's own parts */
.rb-origin{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 22px}
.rb-origin button{height:42px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--ink);background:var(--bg);transition:background .3s,color .3s}
.rb-origin button.on{background:var(--ink);color:var(--bg);box-shadow:none}
/* phone summary rows (≤768): one row per filter, each opens that filter alone */
.rb-sum{display:none}
.rb-ov{display:none}
@media (max-width:860px) and (min-width:769px){.dfil.cv-dfil:not(.open){display:grid}.cv-ftog{display:none}}
@media (max-width:768px){
  .cv-ftog{display:none}
  .rb-sum{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:14px}
  .rb-sumrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:50px;padding:0 4px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink)}
  .rb-sumrow .mono{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .rb-sumrow b{font-weight:500;font-size:14px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rb-chev{font-size:20px;color:var(--muted)}
  .rb-madv{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 0}
  .dfil.cv-dfil:not(.open){display:none}
  .rb-ov{display:block;position:fixed;inset:0;z-index:90;background:rgba(20,14,12,.45)}
  .dfil.cv-dfil.rb-pop{position:fixed;left:0;right:0;bottom:0;z-index:91;display:block;max-height:84vh;overflow:auto;background:var(--bg);padding:16px 16px calc(22px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.25)}
  .dfil.cv-dfil.rb-pop .grp{margin-bottom:18px}
  .rb-poph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .rb-poph b{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
}
.cv-dfil .rb-off{display:none!important}
@media (min-width:769px){.rb-poph{display:none}}
/* results: loading, pager */
.cv-dmsg.rb-loading{text-align:center;color:var(--muted);letter-spacing:.08em}
.rb-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.rb-pager .cv-pg.off{opacity:.35;pointer-events:none}
.rb-pgof{flex-basis:100%;text-align:center;font-size:11px;letter-spacing:.12em;color:var(--muted);margin-top:8px}
/* LIST (§9): Photo · Shape · Carat · Color · Clarity · Cut · Lab · Cert # · Price · View */
.pb-drh.rb-lrow,.cv-dcard.pb-drow.rb-lrow{grid-template-columns:56px minmax(0,1fr) minmax(0,.6fr) minmax(0,.5fr) minmax(0,.6fr) minmax(0,.8fr) minmax(0,.5fr) minmax(0,1.3fr) minmax(0,.8fr) 64px}
.pb-drh.rb-lrow span:nth-child(9){text-align:right}
.rb-lrow>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-dcard.pb-drow.rb-lrow>span:not(.rb-l-m):not(.rb-l-sh):not(.rb-l-p):not(.rb-l-go){color:var(--muted)}
.rb-l-m{position:relative;width:56px;height:56px;border-radius:6px;overflow:hidden;background:var(--tint);display:grid;place-items:center}
.rb-l-m img{width:100%;height:100%;object-fit:contain}
.rb-l-m svg{width:30px;height:30px}
.rb-l-360{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:8px;letter-spacing:.06em;padding:1px 4px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink)}
.rb-l-sh{font-weight:500;color:var(--ink)}
.rb-l-cert{font-size:11px}
.rb-l-two{display:none!important}
.rb-l-p{text-align:right;font-size:15px;color:var(--ink)}
.rb-l-go{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rb-l-go .ic{width:14px;height:14px}
.pb-drow.rb-lrow:hover .rb-l-go{color:var(--ink)}
@media (max-width:768px){
  .pb-drh.rb-lrow{display:none}
  .cv-dcard.pb-drow.rb-lrow{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:10px 4px}
  .cv-dcard.pb-drow.rb-lrow>span{display:none}
  .cv-dcard.pb-drow.rb-lrow>.rb-l-m,.cv-dcard.pb-drow.rb-lrow>.rb-l-p{display:grid}
  .cv-dcard.pb-drow.rb-lrow>.rb-l-two{display:grid!important;gap:3px;white-space:normal}
  .rb-l-two b{font-weight:500;font-size:13.5px;line-height:1.35}
  .rb-l-two small{font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
}
/* detail: labelled ring / certificate thumbs, Ask a question */
.cv-dv-th{position:relative}
.rb-thl{display:block;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.cv-dv-th:has(.rb-thl){grid-template-rows:auto auto;align-content:center}
.rb-ask{margin-top:10px}
/* step 1: the setting sheet */
.rb-sheet{position:fixed;inset:0;z-index:95;background:rgba(20,14,12,.5);display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .3s var(--ease)}
.rb-sheet.on{opacity:1}
.rb-sheet-in{position:relative;width:min(1080px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--bg);border-radius:18px;padding:clamp(18px,3vw,36px)}
.rb-sx{position:absolute;top:12px;right:12px;z-index:2}
.rb-sg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px)}
.rb-sst{aspect-ratio:1;border-radius:10px;background:var(--tint);overflow:hidden;display:grid;place-items:center}
.rb-sst img{width:100%;height:100%;object-fit:contain}
.rb-sth{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rb-sth button{width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
.rb-sth button.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rb-sth img{width:100%;height:100%;object-fit:contain}
.rb-sinfo{display:grid;gap:16px;align-content:start}
.rb-sinfo .dx{margin:0;padding-right:40px}
.rb-sprice .price{font-size:22px}
.rb-sshape .fchip svg,.rb-sshape .fchip img{width:18px;height:18px}
.cv-wait{opacity:.5;pointer-events:none}
@media (max-width:768px){.rb-sheet{padding:0;place-items:end stretch}.rb-sheet-in{max-height:92vh;border-radius:18px 18px 0 0}.rb-sg{grid-template-columns:1fr}}
/* step 3 blocks */
.rb-blk{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.rb-bim{width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--tint);display:grid;place-items:center}
.rb-bim img{width:100%;height:100%;object-fit:contain}
.rb-btx{display:grid;gap:4px;min-width:0;font-size:14px}
.rb-btx b{font-weight:500}
.rb-btx a{text-decoration:underline;text-underline-offset:3px}
.rb-radio .fchip{min-width:64px;justify-content:center}
.rb-ship{font-size:14px;line-height:1.7;margin:4px 0 0}
.rb-start{display:block;margin:14px auto 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* card metal dots (16 Oct, user: the ring round the chosen dot was cut): the ring sits 4px outside its dot and the card clips
   (overflow hidden, 2px padding) — the dot row starts 4px in, so the first dot's ring is whole */
a.sc .cv-scm .sw{padding:6px 0 6px 5px}  /* + top / bottom: the row ends at the card's bottom edge, which also clipped the ring there */
/* footer social (16 Oct, user: "insta and facebook icon set kar do"): the round buttons carry the Instagram / Facebook marks
   in the theme's line-icon style instead of the letters IG / FB */
.soc a .cv-soc-ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* listing price rail (collection-filters-rules.md rule 1): $0 → the highest price among the products the other filters keep;
   two thumbs + two inputs, drawn like the builder's sliders */
.lx-price[hidden]{display:none!important}
.lx-dual{--t:9px;position:relative;height:28px;margin:6px 0 10px}
.lx-dual::before,.lx-dual::after{content:"";position:absolute;top:50%;height:2px;margin-top:-1px;border-radius:2px;pointer-events:none}
.lx-dual::before{left:var(--t);right:var(--t);background:var(--line)}
.lx-dual::after{left:calc(var(--t) + (100% - 2 * var(--t)) * var(--a,0));right:calc(var(--t) + (100% - 2 * var(--t)) * (1 - var(--b,1)));background:var(--accent)}
.lx-dual input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.lx-dual input[type=range]::-webkit-slider-runnable-track{height:28px;background:none;border:0}
.lx-dual input[type=range]::-moz-range-track{background:none;border:0}
.lx-dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:5px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.14);cursor:grab}
.lx-dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:#fff;border:1.5px solid var(--accent);cursor:grab}
.lx-dual input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,0,0,.08),0 0 0 1.5px var(--accent)}
.lx-inp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lx-inp label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.lx-inp .cv-in{width:100%;min-width:0;height:38px;padding:0 10px;font-size:14px}
@media (max-width:560px){.lx-inp .cv-in{font-size:16px}}
@media (hover:none){.lx-dual{height:36px}.lx-dual input[type=range]::-webkit-slider-runnable-track{height:36px}.lx-dual input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:6px}}
/* login (16 Oct): email only — a quiet note under the field, and the sent / error states in the theme's tones */
.cv-login-note{font-size:14px;color:var(--muted);margin:10px 0 16px}
.cv-login-ok,.cv-login-err{border-radius:12px;padding:16px 18px;margin:8px 0 18px;font-size:15px;line-height:1.6}
.cv-login-ok{background:var(--tint)}
.cv-login-ok p,.cv-login-err p{margin:0 0 6px}
.cv-login-err{background:#fbefee;color:#8a2c2c}
/* signed in (16 Oct): the header's account icon carries the shopper's name — kept to one short line */
.hd-r .cv-acct-n{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-acct-hi{font-family:var(--f-display);font-size:22px;margin:4px 0 2px}

/* ===== account pages (16 Oct, user: login + signed-in page redesign) — Celviora's ivory, the dark smoke panel, Playfair heads,
   mono eyebrows, pill buttons ===== */
.cv-au{padding-block:clamp(28px,4vw,64px) clamp(56px,7vw,110px)}
.cv-au-eb{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cv-au-eb::before{content:"";width:22px;height:1px;background:currentColor}
.cv-au-eb.dk{color:var(--muted)}
.cv-au-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.cv-au-panel{position:relative;overflow:hidden;border-radius:24px;padding:clamp(28px,3.4vw,52px);min-height:560px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:var(--cv-smoke) center/cover,#1b1214}
.cv-au-panel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 100%,rgba(199,174,138,.18),transparent 60%);pointer-events:none}
.cv-au-mark{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display);font-size:20px;letter-spacing:.32em;position:relative;z-index:1}
.cv-au-mark svg{width:26px;height:26px}
.cv-au-pt{position:relative;z-index:1;display:grid;gap:18px}
.cv-au-ph{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,5vw,80px);line-height:.95;letter-spacing:-.015em;margin:0}
.cv-au-ph em{font-style:italic;font-weight:600;color:#dccaae}
.cv-au-perks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px;font-size:15px;color:rgba(255,255,255,.82)}
.cv-au-perks li{display:flex;gap:12px;align-items:baseline}
.cv-au-perks li::before{content:"\2726";font-size:10px;color:#dccaae}
.cv-au-foot{position:relative;z-index:1;font-family:var(--f-display);font-style:italic;font-size:18px;color:rgba(255,255,255,.6)}
.cv-au-card{border-radius:24px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(28px,3.4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.cv-au-card form{display:flex;flex-direction:column;gap:14px;margin:0}
.cv-au-h{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,3.4vw,54px);line-height:1;letter-spacing:-.015em;margin:2px 0 0;color:var(--ink)}
.cv-au-sub{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.cv-au-lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.cv-au-in{width:100%;height:54px;border:1px solid var(--line);border-radius:14px;padding:0 18px;font-size:16px;background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.cv-au-in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(0,0,0,.05)}
.cv-au-in:disabled{background:var(--tint);color:var(--muted)}
.cv-au-in[aria-invalid="true"]{border-color:#b54848}
.cv-au-btn{height:54px;width:100%}
.cv-au-or{display:flex;align-items:center;gap:14px;margin:8px 0 2px;color:var(--muted);font-size:13px}
.cv-au-or::before,.cv-au-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cv-au-alt{margin:2px 0 0;text-align:center;font-size:14px}
.cv-au-alt a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.cv-au-err{border-radius:12px;padding:12px 16px;background:#fbefee;color:#8a2c2c;font-size:14px;line-height:1.5}
.cv-au-err p{margin:0}
.cv-au-ok{margin:0;border-radius:12px;padding:10px 14px;background:var(--tint);font-size:14px;color:var(--ink)}
.cv-au-sent{display:flex;flex-direction:column;gap:14px}
.cv-au-ic{width:54px;height:54px;border-radius:50%;background:var(--tint);display:grid;place-items:center;color:var(--ink)}
.cv-au-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cv-au-who{display:flex;align-items:center;gap:16px;margin:2px 0 6px}
.cv-au-av{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--f-display);font-size:24px}
.cv-au-av.lg{width:72px;height:72px;font-size:30px}
.cv-acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;padding-bottom:clamp(22px,3vw,36px);margin-bottom:clamp(22px,3vw,36px);border-bottom:1px solid var(--line)}
.cv-acc-hl{display:flex;align-items:center;gap:20px;min-width:0}
.cv-acc-hl>div{display:grid;gap:8px;min-width:0}
.cv-acc-h{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.015em;margin:0;color:var(--ink);overflow-wrap:anywhere}
.cv-acc-h em{font-style:italic;font-weight:600;color:var(--accent)}
.cv-acc-out{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cv-acc-all{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.cv-acc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cv-acc-card{border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.cv-acc-orders,.cv-acc-details{grid-column:1/-1}
.cv-acc-ch{display:flex;align-items:center;gap:12px;width:100%}
.cv-acc-ch h2{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.4vw,36px);line-height:1.05;margin:0;color:var(--ink)}
.cv-acc-n{min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--tint);display:grid;place-items:center;font-family:var(--f-mono);font-size:11px}
.cv-acc-list{list-style:none;margin:0;padding:0;width:100%}
.cv-acc-list li a{display:grid;grid-template-columns:minmax(80px,.8fr) minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px 20px;align-items:center;padding:16px 4px;border-top:1px solid var(--line);color:var(--ink);transition:background .3s}
.cv-acc-list li a:hover{background:var(--tint)}
.cv-acc-on{font-weight:600}
.cv-acc-od,.cv-acc-os{color:var(--muted);font-size:14px}
.cv-acc-ot{font-variant-numeric:tabular-nums}
.cv-acc-empty{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(18px,3vw,36px) 0;border-radius:16px;background:var(--tint)}
.cv-acc-empty .cv-au-ic{background:var(--bg)}
.cv-acc-empty p{margin:0;color:var(--muted)}
.cv-acc-addr{margin:0;line-height:1.7;color:var(--ink)}
.cv-acc-form{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px;margin:0}
.cv-acc-f{display:grid;gap:8px;min-width:0}
.cv-acc-wide{grid-column:1/-1}
.cv-acc-hint{color:var(--muted);font-size:12.5px}
.cv-acc-save{justify-self:start;margin-top:10px;min-width:160px}
@media (max-width:900px){
  .cv-au-grid{grid-template-columns:1fr}
  .cv-au-panel{min-height:0;gap:26px;padding:26px 24px}
  .cv-au-perks,.cv-au-foot{display:none}
  .cv-au-ph{font-size:clamp(38px,9vw,56px)}
  .cv-acc-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cv-au-card,.cv-acc-card{padding:24px 20px;border-radius:18px}
  .cv-acc-form{grid-template-columns:1fr}
  .cv-acc-list li a{grid-template-columns:1fr auto;gap:4px 14px}
  .cv-acc-od{grid-column:1}
  .cv-acc-os{grid-column:1/-1}
  .cv-acc-ot{grid-row:1;grid-column:2}
  .cv-acc-out{width:100%}
  .cv-acc-hl{gap:14px}
  .cv-au-av.lg{width:56px;height:56px;font-size:24px}
}
.cv-au .btn.cv-au-btn,.cv-au .btn{height:54px;min-height:0;padding-block:0}
.cv-acc .btn{height:50px}
/* account grid order: orders · (addresses | email preferences) · your details */
.cv-acc-orders{order:1}.cv-acc-grid>.cv-acc-card:not(.cv-acc-orders):not(.cv-acc-details):not(.cv-acc-mail){order:2}.cv-acc-mail{order:3}.cv-acc-details{order:4}