/* caratstudio customization layer (whitemoonjewels.com functionality, Carat Studio design language).
   Generated into assets/carat-custom.css by tools/carat-build.mjs; loads after assets/demo/styles.css.
   Uses only the theme's own tokens (--line, --plum, --muted, --rose, --champagne) and components. */

/* ---- mega menu: whitemoon's groups in the studio's .mega panel ---- */
.mega.mega--wm{grid-template-columns:var(--mega-tpl,repeat(4,minmax(0,1fr)));gap:26px 32px}
.mega.mega--wm>*{min-width:0}
.mega-shapes{grid-column:1/-1;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mega-shapes__row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}
.mega .mega-shape{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;font-size:14px;text-align:center}
.mega .mega-shape:hover{text-decoration:none;color:var(--plum)}
.mega-shape svg{width:42px;height:38px;transition:transform .2s}
.mega-shape:hover svg{transform:translateY(-4px)}
.mega-col--split{column-count:2;column-gap:24px}
.mega-col--split h4{column-span:all}
.mega-col a{break-inside:avoid}
.mega-promo p{font-size:14px;margin:0 0 16px}
.mega-promo .eyebrow{margin-bottom:12px}

@media(max-width:1000px) and (min-width:701px){
 .mega.mega--wm{grid-template-columns:repeat(3,minmax(0,1fr))}
 .mega-col--split{grid-column:span 2}
 .mega-shapes__row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:18px}
}
@media(max-width:700px){
 .mega.mega--wm{grid-template-columns:1fr 1fr}
 .mega-shapes__row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:16px;gap:8px}
 .mega .mega-shape{font-size:13px}
 .mega-shape svg{width:34px;height:30px}
 .mega-col--split{column-count:1}
}
@media(prefers-reduced-motion:reduce){.mega-shape:hover svg{transform:none}}

/* ---- S9 (staging) home "Find your diamond" = the menu's 10 shapes ---- */
.shape-grid.shape-grid--nav{grid-template-columns:repeat(10,minmax(0,1fr))}
@media(max-width:1000px){.shape-grid.shape-grid--nav{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:28px}}
@media(max-width:700px){.shape-grid.shape-grid--nav{gap:24px 6px}.shape-grid--nav .shape-choice{font-size:12px}}

/* ---- S13 header: wordmark in the true centre. The row was flex space-between; with 5 icons on the right
   and the short "Book a consultation" on the left the wordmark sat 67px left of centre (measured).
   Three tracks: left item | wordmark | icons, the side tracks equal. Mobile keeps its own row. ---- */
@media(min-width:701px){
 .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .masthead>.appointment{justify-self:start}
 .masthead>a:not(.appointment){justify-self:center}
 .masthead>.tools{justify-self:end}
}
/* tablet: centred wordmark (319px) + 5 icons need 6px more per side than the 30px padding leaves */
@media(max-width:1000px) and (min-width:701px){.masthead{padding:0 24px}}
/* 701–799px: the 29px wordmark overlaps the icons by up to 19px (720 measured) -> 26px in this band only */
@media(max-width:799px) and (min-width:701px){.masthead .wordmark{font-size:26px;letter-spacing:2.6px}.masthead .tools{gap:0}.masthead .tools .icon-button{padding:4px}}

/* ---- S15 no photo -> the studio wordmark centred in the photo box (sized to the box) ---- */
.photo.photo--ph{background:var(--ivory)}
.photo-ph{height:100%;min-height:inherit;display:flex;align-items:center;justify-content:center;container-type:inline-size;padding:8%;text-align:center}
.photo-ph .wordmark{font-size:clamp(7px,8.6cqw,34px);letter-spacing:.11em;line-height:1.15;color:var(--ink);white-space:nowrap}
.photo-ph .wordmark small{font-size:clamp(4px,2.5cqw,10px);letter-spacing:.3em;margin-top:.7em;white-space:nowrap}

/* ---- S14 PDP "360° / 3D" (studio chip above the gallery) ---- */
.gallery-actions{display:flex;gap:10px;margin:0 0 14px}
.gallery-3d{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:1.2px;font-size:12px}
.gallery-3d svg{width:16px;height:16px}

/* ---- C3 header icons (whitemoon set: Search · Account · Find our store · Wishlist · Cart) ---- */
@media(min-width:361px){.masthead .wordmark,.appointment{white-space:nowrap}}
.nav-item--mobile{display:none}
@media(max-width:1000px) and (min-width:701px){
 .masthead{gap:16px}
 .tools{gap:4px}
 .tools .icon-button{padding:5px}
}
/* mobile: the full wordmark leaves room for three icons only — Account and Find our store move into
   the hamburger menu (measured: 339px row, wordmark 181px), the wishlist shows with its count */
@media(max-width:700px){
 .tools .account{display:inline-flex}
 .tools .tools-account,.tools .tools-store{display:none}
 .tools{gap:0}
 .tools .icon-button{padding:5px;min-height:36px}
 .nav-item--mobile{display:block}
}

/* ---- C2 footer: whitemoon's columns (Contact · Shop · Useful Links · Information) in the studio footer ---- */
.footer-grid.footer-grid--wm{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}
.footer-social{display:flex;gap:22px;flex-wrap:wrap}
.footer-top>div{max-width:min(420px,48%)}
.footer-top>a .wordmark{white-space:nowrap}
@media(max-width:700px){.footer-top>div{max-width:none}}
@media(max-width:1000px){.footer-grid.footer-grid--wm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.footer-grid.footer-grid--wm{grid-template-columns:1fr 1fr}.footer-grid--wm>div:first-child{grid-column:1/-1}}

/* ---- S19 pagination (whitemoon: numbered pages) in the studio's line/plum language ---- */
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:48px 0 8px}
.pager a,.pager span{min-width:42px;height:42px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:14px;letter-spacing:.04em;color:inherit;text-decoration:none;transition:border-color .2s,color .2s}
.pager a:hover{border-color:var(--plum);color:var(--plum)}
.pager .pager__current{background:var(--plum);border-color:var(--plum);color:#fff}
.pager .pager__gap{border-color:transparent;min-width:20px;padding:0}
.pager .pager__arrow svg{width:16px;height:16px}
.pager .pager__arrow.is-off{opacity:.35}
@media(max-width:700px){.pager{gap:4px;margin-top:36px;flex-wrap:nowrap}.pager a,.pager span{min-width:34px;height:36px;padding:0 6px;font-size:13px}.pager .pager__gap{min-width:14px}}

/* ---- S20 soft mega menu (desktop hover): the panel fades/slides in once; moving to the next item keeps the
   panel and only cross-fades its content; a short hover-intent delay (bridge) stops menus flicking open
   while the pointer passes over other items. Touch / mobile keep the demo's tap menu. ---- */
@media(hover:hover) and (min-width:900px){
 .nav .nav-item .mega{display:grid;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
 .nav .nav-item.is-hover .mega,.nav .nav-item.open .mega,.nav .nav-item:has(:focus-visible) .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .32s ease,transform .32s ease,visibility 0s}
 .nav.mega-swap .nav-item .mega{transition:none}
 .nav.mega-swap .nav-item.is-hover .mega>*{animation:carat-mega-swap .34s ease both}
 .nav .nav-item>button,.nav .nav-item>a{transition:color .25s ease}
}
@keyframes carat-mega-swap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .nav .nav-item .mega,.nav .nav-item.is-hover .mega{transform:none!important;transition:opacity .15s linear,visibility 0s!important}
 .nav.mega-swap .nav-item.is-hover .mega>*{animation:none}
}

/* ---- S21 store metals: card dots (own metal ringed, others link to the sibling product) + PDP swatch links ---- */
.silver{background:#c8c8cc}
.mini-swatches.mini-swatches--store{gap:8px;align-items:center}
.mini-swatches--store a{display:block;border-radius:50%;line-height:0}
.mini-swatches--store a i{transition:transform .2s ease}
.mini-swatches--store a:hover i,.mini-swatches--store a:focus-visible i{transform:scale(1.3)}
.mini-swatches--store i.is-on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--plum)}
.swatches a.swatch,.swatches span.swatch{display:inline-flex;align-items:center;justify-content:center}
.swatches a.swatch:hover{border-color:var(--plum)}

/* ---- S22 store data on card + PDP (studio tokens only) ---- */
.price .price-was,.price .v1-was{color:var(--muted);font-size:.85em;margin-left:6px}
.product-card .badge:empty{display:none}
.style-tabs a.chip{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.style-tabs span.chip.active{cursor:default}
.linked-group:not(.is-open) .is-extra{display:none}
.linked-more{border-style:dashed}
#product-save{color:var(--plum);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.trust-row--store{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.trust-row--store>*{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:inherit;text-decoration:none}
.trust-row--store img{width:24px;height:24px;object-fit:contain}
.spec-row{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.spec-row>span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.trust-row.trust-row--store>*{font-size:13px;line-height:1.45}

/* ---- S24 diamond table: the shape cell is a table cell again (flex moved inside), phone = one card per stone ---- */
.diamond-table td{vertical-align:middle}
.diamond-table .dshape{display:inline-flex;align-items:center;gap:9px}
@media(max-width:700px){
 .table-scroll{overflow:visible}
 .diamond-table{min-width:0;width:100%}
 .diamond-table thead{display:none}
 .diamond-table,.diamond-table tbody{display:block}
 .diamond-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;padding:18px 0;border-bottom:1px solid var(--line)}
 .diamond-table tbody td{display:flex;flex-direction:column;gap:3px;padding:0;border:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
 .diamond-table tbody td::before{content:attr(data-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 .diamond-table tbody td[data-label="Shape"]{grid-column:1/-1;font-size:15px}
 .diamond-table tbody td[data-label="Shape"]::before{display:none}
 .diamond-table tbody td[data-label="Price"]{font-weight:500}
 .diamond-table tbody td.dsel,.diamond-table tbody td[colspan]{grid-column:1/-1}
 .diamond-table tbody td.dsel::before,.diamond-table tbody td[colspan]::before{display:none}
 .diamond-table tbody td.dsel .btn{width:100%}
}
.diamond-table .dshape{vertical-align:middle}

/* ---- S25 builder summary: "Review your ring →" beside Start over ---- */
.builder-summary__acts{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---- S26 whitemoon builder: steps bar shows each choice (price + Change | View); step 3 review fields ---- */
.steps .step__link{display:flex;gap:inherit;align-items:center;color:inherit;text-decoration:none;min-width:0}
.step__meta{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:var(--ink);white-space:nowrap}
.step__price{font-size:14px}
.step__acts{display:flex;gap:10px;font-size:11px;letter-spacing:.04em}
.step__acts a{color:var(--plum);text-decoration:underline;text-underline-offset:2px}
.rb-acts{display:flex;gap:18px;margin-top:4px}
.summary-box .rb-field{display:flex;flex-direction:column;gap:8px;margin-top:18px;font-size:13px}
.summary-box .rb-field select,.summary-box .rb-field input{min-height:46px;padding:0 12px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:14px;color:inherit}
.summary-box .rb-check{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:13px}
@media(max-width:700px){.steps .step{flex-wrap:wrap;align-content:flex-start}.step__meta{margin-left:0;align-items:flex-start;width:100%}.step__price{font-size:12px}}
.complete-grid .photo img{width:100%;height:100%;display:block;object-fit:contain}
.complete-grid>*{min-width:0}
.summary-box .rb-check{flex-direction:row;justify-content:flex-start;text-align:left;width:auto}
.summary-box .rb-check input{width:16px;height:16px;min-height:0;margin:0;flex:0 0 auto}

/* ---- S27 store pages (shipping / refund / privacy / terms / about / contact / care / journal) in the help-page layout ---- */
.store-page .breadcrumbs{margin-bottom:28px}
.store-page__lede{font-size:18px;line-height:1.6;color:var(--muted)}
.store-page h2{font-size:28px}
.store-page li{margin:8px 0;line-height:1.6}
.store-page__contact{display:grid;gap:12px;margin:28px 0 8px;padding:22px 24px;border:1px solid var(--line);background:var(--ivory)}
.store-page__contact a{color:inherit;text-decoration:none;font-size:16px}
.store-page__contact a:hover{color:var(--plum);text-decoration:underline}
.store-page__links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:34px}
.store-page__rte img{max-width:100%;height:auto}
@media(max-width:700px){.store-page h2{font-size:24px}.store-page__lede{font-size:16px}}

/* ---- S28 rich store pages (about / contact / care / journal / shipping / refund / privacy / terms):
   the studio's own components (.split hero + photo, .faq) plus facts strip, icon cards, steps, plans, compare,
   guides and a split CTA — theme tokens only ---- */
.sp .section.sp-block{display:block}
.sp-hero .split-copy{background:var(--rose)}
.sp-hero .breadcrumbs{margin-bottom:26px}
.sp-hero h1{font-size:54px;line-height:1.04;margin:12px 0 0;max-width:540px}
.sp-hero .split-copy p{font-size:17px;line-height:1.65}
.sp .photo{background:var(--ivory)}
.sp .split .photo{min-height:440px}
.sp .photo img{width:100%;height:100%;object-fit:cover;display:block}
.sp .photo img[src*="solitaire"],.sp .photo img[src*="halo"],.sp .photo img[src*="three-stone"],.sp .photo img[src*="pave"],.sp .photo img[src*="plain-band"],.sp .photo img[src*="floral"],.sp .photo img[src*="bezel"]{object-fit:contain;padding:36px}
.sp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.sp-actions .btn{margin:0}
.sp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1320px;margin:0 auto;border-bottom:1px solid var(--line)}
.sp-facts>div{padding:34px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sp-facts>div:last-child{border-right:0}
.sp-facts b{font:400 36px/1.05 var(--serif);color:var(--plum)}
.sp-facts span{font-size:13px;line-height:1.5;color:var(--muted)}
.sp-block--tint{background:var(--ivory);box-shadow:0 0 0 100vmax var(--ivory);clip-path:inset(0 -100vmax)}
.sp-head{margin-bottom:36px}
.sp-head--c{text-align:center}
.sp-head h2{font-size:40px;line-height:1.1;margin-top:10px}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.sp-card{display:flex;flex-direction:column;gap:10px;padding:30px 26px;border:1px solid var(--line);background:var(--paper);color:inherit;text-decoration:none;transition:border-color .25s ease,transform .25s ease}
.sp-card svg{width:30px;height:30px;color:var(--champagne);margin-bottom:6px}
.sp-card h3{font:500 25px/1.15 var(--serif)}
.sp-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65}
.sp-card--link:hover{border-color:var(--plum);transform:translateY(-2px)}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px}
.sp-steps__n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--champagne);border-radius:50%;font:21px var(--serif);color:var(--plum);margin-bottom:16px;background:var(--paper)}
.sp-steps h3{font:500 23px/1.2 var(--serif);margin-bottom:8px}
.sp-steps p{color:var(--muted);font-size:14.5px;line-height:1.65}
.sp-split .split-copy,.sp-cta .split-copy{background:var(--ivory)}
.sp-prose{display:grid;grid-template-columns:230px minmax(0,1fr);gap:60px;align-items:start}
.sp-toc{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-left:18px;border-left:1px solid var(--line)}
.sp-toc .eyebrow{margin-bottom:8px}
.sp-toc button{background:none;border:0;padding:5px 0;font:inherit;font-size:14px;color:var(--muted);text-align:left;cursor:pointer}
.sp-toc button:hover{color:var(--plum)}
.sp-prose__body{max-width:740px}
.sp-prose__body h3{font:500 29px/1.2 var(--serif);margin:38px 0 10px;scroll-margin-top:130px}
.sp-prose__body h3:first-child{margin-top:0}
.sp-prose__body p,.sp-prose__body li{color:var(--muted);font-size:15.5px;line-height:1.8}
.sp-prose__body p{margin:10px 0}
.sp-note{max-width:640px;margin:-18px auto 34px;text-align:center;color:var(--muted)}
.sp-note--after{margin:26px auto 0}
.sp-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.sp-plan{position:relative;padding:32px 26px;border:1px solid var(--line);background:var(--paper)}
.sp-plan.is-featured{border-color:var(--plum);box-shadow:0 18px 40px rgba(67,44,59,.09)}
.sp-plan__tag{position:absolute;top:-12px;left:26px;padding:4px 10px;background:var(--plum);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.sp-plan h3{font:500 25px var(--serif)}
.sp-plan__price{font:400 50px/1 var(--serif);color:var(--plum);margin:18px 0 6px}
.sp-plan__term{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.sp-plan p{color:var(--muted);font-size:14.5px;line-height:1.65}
.sp-compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sp-compare__col{padding:32px;border:1px solid var(--line);background:var(--paper)}
.sp-compare__col h3{font:500 27px var(--serif);margin-bottom:14px}
.sp-compare__col ul{list-style:none;margin:0;padding:0}
.sp-compare__col li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--line);color:var(--muted);line-height:1.6}
.sp-compare__col li::before{content:"✓";position:absolute;left:4px;top:12px;color:var(--champagne)}
.sp-compare__col--no li::before{content:"✕";color:var(--muted)}
.sp-faq{max-width:830px;margin:0 auto}
.sp-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sp-guide{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);color:inherit;text-decoration:none;transition:border-color .25s ease,transform .25s ease}
.sp-guide .photo{height:250px}
.sp-guide__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px 24px 28px}
.sp-guide h3{font:500 25px/1.2 var(--serif)}
.sp-guide p{margin:0 0 6px;color:var(--muted);font-size:14.5px;line-height:1.65}
.sp-guide:hover{border-color:var(--plum);transform:translateY(-2px)}
@media(max-width:1000px){
 .sp-hero h1{font-size:44px}
 .sp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-facts>div:nth-child(2n){border-right:0}
 .sp-facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .sp-plans,.sp-guides{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-prose{grid-template-columns:1fr;gap:26px}
 .sp-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;padding:0 0 16px;border-left:0;border-bottom:1px solid var(--line)}
 .sp-toc .eyebrow{width:100%}
}
@media(max-width:700px){
 .sp-hero h1{font-size:38px}
 .sp .split .photo{min-height:280px;height:280px}
 .sp-head h2{font-size:30px}
 .sp-facts>div{padding:22px 18px}
 .sp-facts b{font-size:28px}
 .sp-plans,.sp-guides,.sp-compare{grid-template-columns:1fr}
 .sp-compare__col{padding:24px}
 .sp-prose__body h3{font-size:25px}
}
@media(prefers-reduced-motion:reduce){.sp-card,.sp-guide{transition:none}.sp-card--link:hover,.sp-guide:hover{transform:none}}
/* S28: steps in even rows (6 -> 3 + 3, 4 -> 4, 3 -> 3) */
.sp .sp-steps{grid-template-columns:repeat(var(--sp-cols,3),minmax(0,1fr))}
@media(max-width:1000px){.sp .sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.sp .sp-steps{grid-template-columns:1fr;gap:24px}}

/* ---- S29 review fixes: account pages, all collections, size chart, search page, real forms ---- */
.form-note{font-size:13px;color:var(--muted)}
.acct .split-copy{gap:0}
.acct-form{display:grid;gap:16px;width:100%;max-width:440px;margin-top:8px}
.acct-form label{display:flex;flex-direction:column;gap:7px;font-size:13px}
.acct-form input[type=email],.acct-form input:not([type]),.acct-form input[type=text]{min-height:48px;padding:0 14px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:15px;color:var(--ink)}
.acct-form .btn{width:100%;margin-top:4px}
.acct-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acct-form .acct-check{flex-direction:row;align-items:center;gap:9px}
.acct-check input{width:16px;height:16px;margin:0}
.acct-alt{font-size:14px;color:var(--muted);margin:4px 0 0}
.acct-msg{padding:12px 16px;border:1px solid var(--line);background:var(--paper);font-size:14px;margin:0 0 6px;max-width:440px}
.acct-msg--err{border-color:#b42318;color:#8a1c12}
.acct-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;margin-top:20px}
.acct-grid h2{font-size:28px;margin-bottom:16px}
.acct-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px;border:1px solid var(--line);background:var(--ivory)}
.acct-orders{width:100%;border-collapse:collapse;font-size:14px}
.acct-orders th,.acct-orders td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.acct-orders th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.collection-grid.collection-grid--all{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:34px}
.sp-table-wrap{max-width:760px;margin:0 auto}
.sp-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
.sp-table th{background:var(--rose);padding:14px 18px;text-align:left;font-weight:500;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.sp-table td{padding:12px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
.sp-table td:first-child{color:var(--ink);font-weight:500}
.search-page-form{display:flex;gap:10px;max-width:560px;margin:22px auto 0}
.search-page-form input{flex:1;min-height:50px;padding:0 16px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:15px}
.search-page-form .btn{margin:0}
@media(max-width:1000px){.collection-grid.collection-grid--all{grid-template-columns:repeat(3,minmax(0,1fr))}.acct-grid{grid-template-columns:1fr}}
@media(max-width:700px){.collection-grid.collection-grid--all{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;row-gap:24px}.acct-row{grid-template-columns:1fr}.search-page-form{flex-direction:column}}

/* ---- S30 collection tiles: the photo fills its box (the demo's 14px inset + contain was for cut-out product renders) ---- */
.collection-card .photo img{padding:0;object-fit:cover;width:100%;height:100%}

/* ---- Step 3 announcement ticker (whitemoon's three messages) in the studio's plum bar ---- */
.announcement.announcement--ticker{position:relative;display:grid;place-items:center;min-height:38px}
.announcement--ticker .ann-msg{grid-area:1/1;display:block;margin:0;padding:0;border:0;opacity:0;transform:translateY(4px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.announcement--ticker .ann-msg.is-on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:700px){.announcement--ticker .ann-msg{display:block}}
@media(prefers-reduced-motion:reduce){.announcement--ticker .ann-msg{transition:none;transform:none}}
.wish-count{font-size:13px}   /* Step 5: own class (was cart-count) — same look */

/* ---- S31 (playbook 12A + 12B): builder step 2 diamond finder — whitemoon's filters, cards + detail, in the studio's design */
.df{margin:28px 0 10px}
.df-origin{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:22px}
.df-origin button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 22px;font:500 13px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);cursor:pointer}
.df-origin button[aria-selected="true"]{color:var(--plum);border-bottom-color:var(--plum)}
.df-mbar{display:none}
.df-panel{border:1px solid var(--line);background:var(--paper);padding:24px 26px 18px}
.df-panel__head{display:none}
.df-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 44px}
.df-f h4{font:600 12px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--plum);margin:0 0 12px}
.df-f--wide{grid-column:1/-1}
.df-grid:not(.is-adv) .df-adv{display:none}
.df-shapes{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:8px}
.df-shape{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--ink);font:12px var(--sans);transition:border-color .2s,background-color .2s}
.df-shape svg{width:34px;height:34px}
.df-shape:hover{border-color:var(--plum)}
.df-shape[aria-pressed="true"]{border-color:var(--plum);background:var(--rose)}
.df-shape span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.df-sl{position:relative;height:30px;--lo:0;--hi:1}
.df-sl::before,.df-sl::after{content:"";position:absolute;top:14px;height:2px;pointer-events:none}
.df-sl::before{left:9px;right:9px;background:var(--line)}
.df-sl::after{left:calc(9px + (100% - 18px) * var(--lo));right:calc(9px + (100% - 18px) * (1 - var(--hi)));background:var(--plum)}
.df-sl input[type=range]{position:absolute;inset:0;width:100%;height:30px;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:1}
.df-sl input[type=range]::-webkit-slider-runnable-track{background:none;height:30px}
.df-sl input[type=range]::-moz-range-track{background:none}
.df-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:6px;border-radius:50%;background:var(--paper);border:1.5px solid var(--plum);cursor:grab;box-shadow:0 1px 4px rgba(67,44,59,.18)}
.df-sl input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.5px solid var(--plum);cursor:grab}
.df-sl input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--champagne);outline-offset:2px}
.df-ticks{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:2px 0 0}
.df-ticks span{text-align:center;font-size:12px;color:var(--muted);white-space:nowrap}
.df-ticks span.is-in{color:var(--plum);font-weight:600}
.df-nums{display:flex;gap:12px;margin-top:8px}
.df-num{flex:1;display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.df-num__box{display:flex;align-items:center;border:1px solid var(--line);background:#fff;padding:0 10px}
.df-num__box i{font-style:normal;color:var(--muted);font-size:13px;text-transform:none;letter-spacing:0}
.df-num input{flex:1;min-width:0;min-height:0;border:0;background:transparent;padding:9px 4px;font:14px var(--sans);color:var(--ink);-moz-appearance:textfield}
.df-num input::-webkit-inner-spin-button,.df-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.df-mode{display:inline-flex;border:1px solid var(--line);margin-bottom:12px}
.df-mode button{background:none;border:0;padding:7px 18px;font:13px var(--sans);color:var(--muted);cursor:pointer}
.df-mode button[aria-pressed="true"]{background:var(--plum);color:var(--ivory)}
.df-fancy{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.df-fancy__c{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;background:none;border:1px solid var(--line);font:11px var(--sans);color:var(--ink);cursor:pointer}
.df-fancy__c i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.df-fancy__c[aria-pressed="true"]{border-color:var(--plum);background:var(--rose)}
.df-chips{display:flex;gap:8px;flex-wrap:wrap}
.df-panel__foot{display:flex;align-items:center;gap:22px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.df-link{background:none;border:0;padding:0;font:13px var(--sans);color:var(--plum);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.df-panel__foot .df-done{display:none}
.df-x{background:none;border:0;font-size:20px;line-height:1;color:var(--plum);cursor:pointer;padding:6px}
.df-scrim{display:none}
.df-quick{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.df-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.df-count{font:500 24px var(--serif);color:var(--plum)}
.df-sort{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.df-sort select{border:1px solid var(--line);background:#fff;min-height:40px;padding:8px 10px;font:13px var(--sans);color:var(--ink)}
.df-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.df-cards--aip{grid-template-columns:repeat(4,minmax(0,1fr))}
.df-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.df-card:hover,.df-card:focus-visible{border-color:var(--plum);box-shadow:0 8px 22px rgba(67,44,59,.08);outline:none}
.df-card__media{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.df-card__media[data-sk]{background:linear-gradient(100deg,var(--paper) 30%,var(--rose) 50%,var(--paper) 70%) 0 0/300% 100%;animation:df-sweep 1.3s linear infinite}
.df-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.df-card__360{position:absolute;top:10px;left:10px;font:600 11px var(--sans);letter-spacing:1px;background:var(--paper);border:1px solid var(--line);padding:3px 7px;color:var(--plum)}
.df-card__body{display:flex;flex-direction:column;gap:5px;padding:14px 14px 16px;flex:1}
.df-card__cert{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.df-card__spec{font-size:14px;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.df-card__price{font:500 22px var(--serif);color:var(--plum);margin-top:auto}
.df-card__cta{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.df-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;color:var(--muted);font-size:13px}
.df-noimg svg{width:44%;height:auto;max-width:120px}
.df-sk{aspect-ratio:1/1.42;border:1px solid var(--line);background:linear-gradient(100deg,var(--paper) 30%,var(--rose) 50%,var(--paper) 70%) 0 0/300% 100%;animation:df-sweep 1.3s linear infinite}
@keyframes df-sweep{to{background-position:-150% 0}}
.df-status{padding:56px 20px;text-align:center;color:var(--muted);border:1px solid var(--line);background:var(--paper)}
.df-aip{background:var(--rose);padding:26px 24px 24px;margin-bottom:30px}
.df-aip__head{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.df-aip__head .eyebrow{margin:0}
.df-aip__head h3{font-size:32px;color:var(--plum)}
.df-aip__head p{color:var(--muted);font-size:14px}
.df-all{font-size:28px;color:var(--plum);margin:0 0 16px}
.df-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:34px 0 10px}
.df-pg{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);background:transparent;font:14px var(--sans);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.df-pg:hover{border-color:var(--plum)}
.df-pg[aria-current="page"]{background:var(--plum);border-color:var(--plum);color:var(--ivory)}
.df-pg--gap{border:0;cursor:default}
.df-pg--nav{padding:0 14px}
.df-pageinfo{flex-basis:100%;text-align:center;font-size:13px;color:var(--muted);margin-top:6px}
.df.is-detail>:not([data-df-detail]){display:none}
.df-dv__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.df-dv__grid{display:grid;grid-template-columns:76px minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.df-dv__rail{display:flex;flex-direction:column;gap:10px}
.df-thumb{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border:1px solid var(--line);background:#fff;padding:0;cursor:pointer;overflow:hidden;color:var(--plum);font:600 12px var(--sans);letter-spacing:1px;text-decoration:none}
.df-thumb img{width:100%;height:100%;object-fit:contain}
.df-thumb.is-on{border-color:var(--plum)}
.df-dv__stage{aspect-ratio:1/1;border:1px solid var(--line);background:#fff;overflow:hidden}
.df-dv__stage img,.df-dv__stage video,.df-dv__stage iframe{width:100%;height:100%;object-fit:contain;border:0;display:block}
.df-dv__stage img{object-fit:cover}
.df-dv__info h2{font-size:40px;color:var(--plum);margin:4px 0 8px}
.df-dv__cert{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.df-dv__price{font:500 28px var(--serif);color:var(--ink);margin-bottom:16px}
.df-sum{border:1px solid var(--line);background:var(--paper);padding:6px 16px;margin:0 0 16px}
.df-sum div{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.df-sum dt{color:var(--muted)}
.df-sum dd{margin:0}
.df-sum__total{border-top:1px solid var(--line);font-weight:600}
.df-sum__total dt{color:var(--ink)}
.df-dv__info>.btn{width:100%;margin:0 0 24px}
.df-dv__info h3{font-size:24px;color:var(--plum);margin-bottom:8px}
.df-specs{margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.df-specs div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.df-specs dt{color:var(--muted)}
.df-specs dd{margin:0;text-align:right}
@media (max-width:1100px){.df-shapes{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){.df-cards--aip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.df-dv__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.df-dv__rail{grid-column:1/-1;flex-direction:row;order:2}.df-dv__stage{order:1;grid-column:1}.df-dv__info{order:3;grid-column:2;grid-row:1}}
@media (max-width:768px){
  .df-origin button{flex:1;padding:12px 8px;font-size:12px;letter-spacing:.8px}
  .df-mbar{display:block}
  .df-mbar .btn{width:100%;margin:0}
  .df-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--plum);color:var(--ivory);font-size:11px;padding:0 6px}
  .df-panel{position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(420px,92vw);overflow-y:auto;padding:0 18px;transform:translateX(102%);visibility:hidden;transition:transform .32s ease,visibility 0s linear .32s}
  .df.is-open .df-panel{transform:none;visibility:visible;transition:transform .32s ease;box-shadow:-10px 0 30px rgba(51,43,48,.16)}
  .df-panel__head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--paper);padding:16px 0 12px;border-bottom:1px solid var(--line);margin-bottom:16px;z-index:2}
  .df-panel__head h3{font-size:26px;color:var(--plum)}
  .df-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .df-shapes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .df-panel__foot{position:sticky;bottom:0;background:var(--paper);flex-wrap:wrap;gap:12px 20px;padding:12px 0 16px;z-index:2}
  .df-panel__foot .df-done{display:inline-flex;width:100%;margin:0}
  .df-scrim{display:block;position:fixed;inset:0;z-index:1000;background:rgba(51,43,48,.4);opacity:0;pointer-events:none;transition:opacity .3s}
  .df.is-open .df-scrim{opacity:1;pointer-events:auto}
  .df-quick{flex-wrap:nowrap;overflow-x:auto;margin:14px -16px 4px;padding:0 16px 4px;scrollbar-width:none}
  .df-quick::-webkit-scrollbar{display:none}
  .df-quick .chip{flex:0 0 auto}
  .df-bar{flex-wrap:wrap}
  .df-count{font-size:20px}
  .df-cards,.df-cards--aip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .df-card__body{padding:10px 10px 12px}
  .df-card__spec{font-size:13px}
  .df-card__price{font-size:19px}
  .df-aip{padding:18px 14px;margin:0 0 24px}
  .df-aip__head h3{font-size:26px}
  .df-dv__grid{grid-template-columns:minmax(0,1fr)}
  .df-dv__stage,.df-dv__rail,.df-dv__info{grid-column:1;grid-row:auto}
  .df-dv__rail{justify-content:flex-start}
  .df-thumb{width:62px;height:62px}
  .df-dv__info h2{font-size:32px}
  .df-specs{grid-template-columns:minmax(0,1fr)}
}
html.df-lock,html.df-lock body{overflow:hidden}

/* ---- S32 (playbook 15): one product card everywhere (collections, builder step 1, search, wishlist, PDP "you may also
   like") — smaller: desktop 4 columns, photo 4:5, name at most 2 lines (2-line min height), price row at the bottom so a
   row of cards lines up whatever the name length */
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 18px;align-content:start;align-self:start}   /* rows hug the cards — a short listing beside the tall filter column used to stretch them */
.product-card{display:flex;flex-direction:column;height:100%;min-width:0}
.product-card>a{display:block}
.product-card .photo{height:auto;aspect-ratio:4/5}
.product-card .photo img{width:100%;height:100%;object-fit:cover;padding:0}
/* the save badge (−50%) sits on the photo's top-left corner at every width (it was a line of its own above the card), heart top-right */
.product-card .badge{position:absolute;left:10px;top:10px;z-index:2;min-height:0;padding:3px 8px;background:var(--paper);font-size:11px;line-height:1.3}
.product-card .wish{top:10px}
.product-card h3{font-size:21px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;margin-top:12px}
.product-card>p{font-size:13px;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card .price{margin-top:auto;padding-top:8px}
@media (max-width:1199px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the same card size everywhere: a grid without the filter column (search, PDP "Beautiful together.") is 242px wider,
   so it takes one column more — 1224px / 5 with 16px gaps = 232px, the listing's card width */
.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px}
.section-title+.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(4,calc((100% - 64px) / 5));justify-content:center}   /* 4 related pieces, centred */
@media (max-width:1199px){.product-grid:not(.listing>.product-grid),.section-title+.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px}}
@media (max-width:1000px){.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(3,minmax(0,1fr))}.section-title+.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.product-grid:not(.listing>.product-grid),.section-title+.product-grid:not(.listing>.product-grid){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}}
@media (max-width:700px){.product-grid{gap:26px 12px}.product-card h3{font-size:18px}.product-card .badge{min-height:0}}
/* phone cards are ~150px wide: a five-figure price + its compare-at price wrapped onto a second line on some cards only,
   making them (and their row) taller — the compare-at price always takes its own line there, so every card matches */
@media (max-width:700px){.product-card .price{min-height:2.6em;line-height:1.3}.product-card .price-was{display:block;margin-left:0}}

/* ---- S33 (playbook 16): URL filters in the studio's checkbox look; style tabs are links; 8-key sort; budget slider */
.filters__head{display:flex;justify-content:space-between;align-items:baseline}
.filters__reset{font-size:13px;color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.filter-options .filter-link{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);text-decoration:none;padding:3px 0;line-height:1.35}
.filter-options .filter-link:hover{color:var(--plum)}
.filter-box{position:relative;flex:0 0 auto;width:14px;height:14px;border:1px solid #9d9196;background:var(--paper)}
.filter-link[aria-checked="true"]{color:var(--plum);font-weight:600}
.filter-link[aria-checked="true"] .filter-box{background:var(--plum);border-color:var(--plum)}
.filter-link[aria-checked="true"] .filter-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--ivory);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.filter-budget{display:flex;flex-direction:column;gap:10px;margin-top:14px;font-size:14px}
.filter-budget b{font-weight:600;color:var(--plum)}
.filter-budget input[type=range]{width:100%;min-height:0;padding:0;border:0;background:none;accent-color:var(--plum)}
.style-tabs a.chip{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.style-tabs a.chip.active{color:var(--plum)}
.sort-by{display:flex;flex-direction:row;align-items:center;gap:8px}
.sort-by select{padding:6px;min-height:35px;border:0;font-size:14px;background:transparent}
@media (max-width:700px){.filter-options .filter-link{font-size:15px;padding:7px 0}.filter-box{width:18px;height:18px}.filter-link[aria-checked="true"] .filter-box::after{left:5px;top:2px;width:5px;height:10px}.sort-by select{font-size:13px}}

/* ---- S34 (playbook 19 + 20): wishlist / bag drawer (right), the studio's ivory panel + plum type */
.cdr{position:fixed;inset:0;z-index:1200}
.cdr[hidden]{display:none}
.cdr__scrim{position:absolute;inset:0;background:rgba(51,43,48,.42);opacity:0;transition:opacity .3s ease}
.cdr__panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--paper);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s ease;box-shadow:-12px 0 34px rgba(51,43,48,.16);outline:none}
.cdr.is-open .cdr__scrim{opacity:1}
.cdr.is-open .cdr__panel{transform:none}
html.cdr-lock,html.cdr-lock body{overflow:hidden}
.cdr__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.cdr__head h2{font-size:30px;color:var(--plum)}
.cdr__n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-left:6px;padding:0 7px;border-radius:12px;background:var(--rose);font:600 12px var(--sans);color:var(--plum);vertical-align:middle}
.cdr__x{background:none;border:0;font-size:20px;line-height:1;color:var(--plum);cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.cdr__added{margin:14px 24px 0;padding:10px 14px;background:var(--rose);color:var(--plum);font-size:14px}
.cdr__search{display:block;padding:14px 24px 4px}
.cdr__search input{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--line);background:#fff;font:14px var(--sans);color:var(--ink)}
.cdr__list{flex:1;overflow-y:auto;padding:6px 24px}
.cdr__line{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cdr__img{display:block;color:inherit}
.cdr__img .photo{height:auto;min-height:0;aspect-ratio:4/5;width:84px}
.cdr__img .photo img{width:100%;height:100%;object-fit:cover;padding:0}
.cdr__img .photo .wordmark,.cdr__img .photo [class*="wordmark"]{transform:scale(.42);transform-origin:center}
.cdr__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.cdr__top{display:flex;justify-content:space-between;gap:12px}
.cdr__name{font:500 19px/1.2 var(--serif);color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.cdr__name:hover{color:var(--plum)}
.cdr__lp{font-size:14px;white-space:nowrap}
.cdr__meta{font-size:12px;color:var(--muted);line-height:1.5}
.cdr__price{font-size:14px}
.cdr__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.cdr__row .quantity{display:inline-flex;align-items:center;border:1px solid var(--line)}
.cdr__row .quantity button{width:36px;height:36px;background:none;border:0;font-size:16px;color:var(--plum);cursor:pointer}
.cdr__row .quantity button:disabled{opacity:.4;cursor:wait}
.cdr__row .quantity span{min-width:28px;text-align:center;font-size:14px}
.cdr__rm{align-self:flex-start;background:none;border:0;padding:4px 0;font:12px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cdr__rm:hover{color:var(--plum)}
.cdr__none{padding:30px 0;color:var(--muted);text-align:center}
.cdr__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:30px 28px;color:var(--muted)}
.cdr__big{font:500 28px var(--serif);color:var(--plum)}
.cdr__empty .btn{width:auto;margin-top:10px}
.cdr__foot{padding:16px 24px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.cdr__foot .btn{width:100%;margin:0}
.cdr__sub{display:flex;justify-content:space-between;font-size:16px}
.cdr__sub strong{font-weight:600}
.cdr__note{font-size:12px;color:var(--muted);margin-bottom:4px}
.cdr .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.cdr__head{padding:16px 18px 12px}.cdr__head h2{font-size:26px}.cdr__list{padding:4px 18px}.cdr__search{padding:12px 18px 4px}.cdr__foot{padding:14px 18px 18px}.cdr__line{grid-template-columns:72px minmax(0,1fr)}.cdr__img .photo{width:72px}}
@media (prefers-reduced-motion:reduce){.cdr__panel,.cdr__scrim{transition:none}}

/* ---- S35 (playbook 21): PDP gallery stays in view while the information column scrolls — only while the two sit side
   by side (>=701px; the header is not sticky, so a small top offset) */
@media (min-width:701px){.product-layout{align-items:start}.product-gallery{position:sticky;top:24px;align-self:start}}

/* ---- S36 (playbook 26): "Call now" pill (left) + back to top (right), the studio's plum / ivory */
.fab-call,.fab-top{position:fixed;bottom:24px;z-index:90;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--plum);box-shadow:0 6px 18px rgba(51,43,48,.16);transition:background-color .2s ease,color .2s ease,opacity .25s ease,transform .25s ease}
.fab-call{left:24px;gap:8px;min-height:46px;padding:0 20px 0 16px;border-radius:999px;background:var(--plum);color:var(--ivory);font:600 13px var(--sans);letter-spacing:1px;text-transform:uppercase;text-decoration:none}
.fab-call:hover{background:#614454}
.fab-top{right:24px;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--plum);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none}
.fab-top.is-on{opacity:1;transform:none;pointer-events:auto}
.fab-top:hover{background:var(--rose)}
.fab-call:focus-visible,.fab-top:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
html.cdr-lock .fab-call,html.cdr-lock .fab-top,html.df-lock .fab-call,html.df-lock .fab-top{visibility:hidden}
@media (max-width:700px){.fab-call,.fab-top{bottom:16px}.fab-call{left:16px;min-height:44px;padding:0 16px 0 13px;font-size:12px}.fab-top{right:16px;width:44px;height:44px}}
@media print{.fab-call,.fab-top{display:none}}

/* ---- S37 (playbook 23): search suggestion chips */
.search-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:22px auto 26px;max-width:760px}
.search-chips__t{width:100%;text-align:center;font:600 12px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--plum);margin-bottom:4px}
.search-chips a.chip{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.search-chips a.chip:hover{color:var(--plum)}

/* ---- S38 (playbook 27): tap targets — header icons 44px tall (44 x 44 from 701px, where the header has room; the
   375 header keeps its widths so the wordmark stays centred), metal dots get a 24px touch area on touch screens,
   bag drawer quantity 44px. Look unchanged. */
.mobile-toggle{min-height:44px}
@media (min-width:701px){.mobile-toggle{min-width:44px}}
.tools .icon-button{min-height:44px}
@media (min-width:701px){.tools .icon-button{min-width:44px;justify-content:center}}
@media (pointer:coarse){.mini-swatches--store{gap:14px}.mini-swatches--store a{padding:7px;margin:-7px}}
.cdr__row .quantity button{width:44px;height:44px}

/* ---- S39 (user, 13 Oct: "mobile view theme design me bahut changes he … design sahi kar do") — phone design pass, the
   studio's own look; desktop untouched. Filters drawer close / done buttons exist only for the phone. */
.filters__x,.filters__foot{display:none}
@media (max-width:700px){
  /* menu: rows with hairlines, + / − on the items that open, the extras quieter */
  .nav{gap:0}
  .nav.mobile-open{padding:0 20px 16px;border-top:1px solid var(--line);max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain}
  .nav.mobile-open>.nav-item{border-bottom:1px solid var(--line)}
  .nav.mobile-open>.nav-item>a,.nav.mobile-open>.nav-item>button{display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:13px;letter-spacing:1.4px}
  .nav.mobile-open>.nav-item:has(>.mega)>a::after,.nav.mobile-open>.nav-item:has(>.mega)>button::after{content:"+";font:300 22px/1 var(--sans);color:var(--champagne);transition:transform .2s ease}
  .nav.mobile-open>.nav-item.open>a::after,.nav.mobile-open>.nav-item.open>button::after{content:"−"}
  .nav.mobile-open>.nav-item.open .mega{padding:4px 0 18px}
  .nav.mobile-open>.nav-item--mobile{border-bottom:0}
  .nav.mobile-open>.nav-item--mobile:first-of-type{margin-top:8px}
  .nav.mobile-open>.nav-item--mobile>a{padding:10px 0;font-size:12px;letter-spacing:1px;color:var(--muted)}
  /* collection toolbar: count on its own line, Filters + Sort side by side */
  .listing-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .listing-toolbar>span{grid-column:1/-1}
  .listing-toolbar .mobile-filter{display:inline-flex;justify-content:center;align-items:center;width:100%;min-height:44px;margin:0}
  .listing-toolbar .sort-by{border:1px solid var(--line);min-height:44px;padding:0 0 0 12px;gap:4px;font-size:13px;color:var(--muted)}
  .listing-toolbar .sort-by select{flex:1;min-width:0;min-height:42px;padding:0 6px}
  /* collection filters = a right-hand drawer over the page, not a long block pushing the designs down */
  .filters.show{position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(380px,90vw);margin:0;padding:0 20px;overflow-y:auto;background:var(--paper);box-shadow:0 0 0 100vmax rgba(51,43,48,.42);animation:studio-drawer .28s ease both}
  .filters.show .filters__head{position:sticky;top:0;z-index:2;background:var(--paper);padding:16px 0 12px;border-bottom:1px solid var(--line);align-items:center}
  .filters.show .filters__head h4{font:500 26px var(--serif);color:var(--plum);margin-right:auto}
  .filters.show .filters__reset{margin-right:14px}
  .filters.show .filters__x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;font-size:20px;color:var(--plum)}
  .filters.show .filters__foot{display:block;position:sticky;bottom:0;background:var(--paper);padding:12px 0 16px;border-top:1px solid var(--line)}
  .filters.show .filters__foot .btn{width:100%;margin:0}
  html:has(.filters.show){overflow:hidden}
  /* style tabs of a collection: one swipeable row, not four wrapped rows */
  .style-tabs--nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-left:-20px;margin-right:-20px;padding:2px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .style-tabs--nav::-webkit-scrollbar{display:none}
  .style-tabs--nav .chip{flex:0 0 auto;white-space:nowrap}
  /* product card: the save badge sits on the photo (was a line of its own), heart top-right */
  .product-card .badge{position:absolute;left:8px;top:8px;z-index:2;min-height:0;padding:3px 7px;background:var(--paper);font-size:11px;line-height:1.3}
  .product-card .badge:empty{display:none}
  .product-card .wish{top:8px}
  /* PDP "you may also like": a swipe row, so an odd count leaves no hole */
  section>.product-grid{display:flex;overflow-x:auto;gap:12px;margin:0 -20px;padding:0 20px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  section>.product-grid::-webkit-scrollbar{display:none}
  section>.product-grid>.product-card{flex:0 0 62%;scroll-snap-align:start}
  /* home: distinctive cuts show the shape, not a speck in a pink box */
  .special-card>div:first-child{height:auto!important;padding:26px 24px 76px!important;display:flex;justify-content:center}
  .special-card>div:first-child svg{width:78%;max-width:96px;height:auto}
  .special-card .special-caption h3{font-size:19px}
  .certs{margin-bottom:18px}
  .review{padding:22px 20px}
  .review h3{font-size:25px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .collection-card h3{font-size:19px;line-height:1.2}
  .collection-card .caption{align-items:flex-start;gap:8px}
  .collection-card .caption span{flex:0 0 auto}
  .empty{padding:48px 20px}
  .sp-table td,.sp-table th{padding:12px 10px}
  .sp-table td:first-child{white-space:nowrap}
  /* Call: icon-only on the phone, so it does not sit on the content's text */
  .fab-call{width:44px;padding:0;justify-content:center}
  .fab-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@keyframes studio-drawer{from{transform:translateX(100%)}to{transform:none}}

/* S39 tablet (701-1100): ring-style labels of two lines were painted over by the ring picture above them (58px band);
   distinctive-cut cards show the shape; the hero button stays on one line */
@media (min-width:701px) and (max-width:1100px){.ring-style-showcase{padding-bottom:70px}.ring-style-link::before{bottom:70px}.ring-style-link{font-size:12px;line-height:1.3;padding-bottom:10px}.hero .btn{white-space:nowrap;letter-spacing:.9px;padding:14px 20px;gap:12px}}
@media (min-width:701px) and (max-width:1000px){.special-card>div:first-child{height:auto!important;padding:28px 26px 80px!important;display:flex;justify-content:center}.special-card>div:first-child svg{width:70%;max-width:110px;height:auto}}

/* ---- S40 (user, 13 Oct): menu that can always be closed. Phone: a panel fixed under the masthead, scrolling on its
   own (top-aligned: centred, an opened item's top + its closing row went off the top), the open item's row sticky,
   the menu button shows ✕. Touch tablet: an open mega panel scrolls inside the screen, so its item stays in reach. */
@media (max-width:700px){
  .nav.mobile-open{position:fixed;left:0;right:0;top:var(--nav-top,114px);bottom:0;z-index:1000;max-height:none;justify-content:flex-start;background:var(--paper);overflow-y:auto;padding-bottom:40px;box-shadow:0 10px 24px rgba(51,43,48,.08)}
  .nav.mobile-open>.nav-item{flex:0 0 auto}
  .nav.mobile-open>.nav-item.open>a,.nav.mobile-open>.nav-item.open>button{position:sticky;top:0;z-index:2;background:var(--paper);color:var(--plum)}
  html.nav-lock,html.nav-lock body{overflow:hidden}
  html.nav-lock .fab-call,html.nav-lock .fab-top{visibility:hidden}
  .mobile-toggle[aria-expanded="true"] svg{display:none}
  .mobile-toggle[aria-expanded="true"]::before{content:"✕";font-size:20px;line-height:1;color:var(--plum)}
}
@media (min-width:701px) and (hover:none){
  .nav-item.open>.mega{max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain}
}
@media (max-width:700px){html.nav-lock #header{position:fixed;top:0;left:0;right:0;z-index:1001}}

/* wide ring-row photo (3:1): show all five rings on white instead of cropping the outer ones */
.split .photo:has(img[src*="rings-by-style-row"]){display:flex;align-items:center;justify-content:center;background:#fff}
.split .photo img[src*="rings-by-style-row"]{width:100%;height:auto;max-height:100%;aspect-ratio:3 / 1;object-fit:contain;padding:24px clamp(16px,3vw,48px)}
@media(max-width:700px){.sp .split .photo:has(img[src*="rings-by-style-row"]){height:auto;min-height:0}}

/* built ring in the bag: the setting's photo with the chosen diamond inset (bottom-right) */
.ring-thumb{position:relative;display:block}
.ring-thumb .photo{margin:0}
.ring-thumb__stone{position:absolute;right:-6px;bottom:-6px;width:44%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(67,44,59,.18)}
.ring-thumb__stone img{width:100%;height:100%;object-fit:cover;display:block;padding:0}
.cart-item .ring-thumb .photo{height:145px}
@media(max-width:700px){.cart-item .ring-thumb .photo{height:85px}}
/* step 3 "Your complete ring": the same pairing, larger — the diamond sits inside the photo's corner */
.complete-grid>.ring-thumb--lg{align-self:start}
.ring-thumb--lg .ring-thumb__stone{right:18px;bottom:18px;width:30%;max-width:170px;border-width:3px}
.complete-grid .ring-thumb--lg .photo img{padding:26px;object-fit:contain}
@media(max-width:700px){.ring-thumb--lg .ring-thumb__stone{right:12px;bottom:12px;width:34%}}

/* store pages' closing call-to-action ("Visit or call" …): sit in the same 1320px column as the content above,
   with the copy taking the smaller share, instead of a full-bleed 50/50 split that strands the text at the far left */
@media(min-width:1001px){
 .sp .sp-cta{max-width:1320px;width:calc(100% - 96px);margin:0 auto 66px;grid-template-columns:5fr 7fr;min-height:0;border:1px solid var(--line);overflow:hidden}
 .sp .sp-cta .split-copy{padding:56px 52px}
 .sp .sp-cta .photo{min-height:360px}
}

/* an empty collection: just the message, centred across the page (no filter column beside it) */
.listing--empty{display:block}
.listing--empty>.product-grid{display:block}

/* product page: bracelet length + quantity (same controls as ring size / the bag) */
.product-info .pdp-select{display:flex;flex-direction:column;gap:8px;font-size:14px}
.product-info .pdp-hint{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.pdp-qty{margin:0}
.pdp-qty input{width:44px;height:36px;border:0;text-align:center;font:inherit;font-size:14px;background:none;-moz-appearance:textfield}
.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- product page options (configurator, shape, backing, engraving): label left, current choice right,
   choices as boxes; diamond weights as "2 / CT" tiles. Separated by a hairline like the rest of the info column */
.product-info .option-group{border-top:1px solid var(--line);padding-top:18px;margin:18px 0 0}
.opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.opt-head b{font-weight:500;letter-spacing:.02em;text-transform:none;font-size:13px;color:var(--muted)}
.opt-head small{font-size:10px;color:var(--muted);letter-spacing:.12em;margin-left:6px}
.opt-boxes{display:flex;flex-wrap:wrap;gap:8px}
.opt-box{min-width:64px;padding:10px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.opt-box:hover{border-color:var(--champagne)}
.opt-box.is-on{border-color:var(--plum);background:var(--rose);box-shadow:inset 0 0 0 1px var(--plum)}
.opt-boxes--ct{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.opt-boxes--ct .opt-box{min-width:0;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.opt-boxes--ct b{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1}
.opt-boxes--ct small{font-size:9px;letter-spacing:.14em;color:var(--muted)}
.opt-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.opt-shape{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.opt-shape svg{width:30px;height:30px}
.opt-shape:hover{border-color:var(--champagne)}
.opt-shape.is-on{border-color:var(--plum);background:var(--rose);box-shadow:inset 0 0 0 1px var(--plum)}
.product-info .pdp-select input{height:44px;border:1px solid var(--line);padding:0 12px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink)}
@media(max-width:700px){.opt-boxes--ct{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- PDP gallery: Photos / 360° 3D / Try On (only with custom.v1_3d_url), the stage, the product's thumbnails */
.pdp-gtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.pdp-gtab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pdp-gtab svg{width:16px;height:16px}
.pdp-gtab:hover{border-color:var(--champagne)}
.pdp-gtab.is-on{border-color:var(--plum);background:var(--rose)}
.pdp-tryon{margin-left:auto;background:var(--plum);border-color:var(--plum);color:#fff}
.pdp-tryon:hover{background:#2f1f2a;border-color:#2f1f2a}
.pdp-stage{position:relative;overflow:hidden}
.pdp-stage img{width:100%;height:100%}
.pdp-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.pdp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:12px}
.pdp-thumb{aspect-ratio:1;padding:0;border:1px solid var(--line);background:var(--ivory);cursor:pointer;overflow:hidden}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pdp-thumb:hover{border-color:var(--champagne)}
.pdp-thumb.is-on{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.pdp-tryon-pop{position:fixed;inset:0;z-index:2000;background:rgba(33,22,29,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.pdp-tryon-pop__box{position:relative;width:min(560px,100%);height:min(760px,100%);background:#000}
.pdp-tryon-pop__box iframe{width:100%;height:100%;border:0}
.pdp-tryon-pop__x{position:absolute;top:8px;right:8px;z-index:1;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--plum);font-size:24px;line-height:1;cursor:pointer}
html.tryon-lock{overflow:hidden}
@media(max-width:700px){.pdp-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}.pdp-tryon-pop{padding:0}.pdp-tryon-pop__box{width:100%;height:100%}}
/* Try On without a 3D model yet: a short note in the same popup */
.pdp-tryon-pop.is-soon .pdp-tryon-pop__box{height:auto;background:var(--paper)}
.pdp-tryon-soon{padding:56px 36px 40px;text-align:center;color:var(--ink)}
.pdp-tryon-soon svg{width:44px;height:44px;color:var(--champagne)}
.pdp-tryon-soon h3{font-family:var(--serif);font-size:28px;font-weight:500;margin:14px 0 10px}
.pdp-tryon-soon p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 auto 22px;max-width:380px}
.pdp-gtab.pdp-tryon:only-child{margin-left:0}

/* very narrow phones (≤380px): the size chart fits the screen; anything wider scrolls inside its own box, never the page */
.table-scroll.sp-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:380px){.sp-table{font-size:13px}.sp-table td,.sp-table th{padding:10px 6px}.sp-table th{font-size:11px;letter-spacing:.03em}}
/* every option heading on the product page in one style (Ring size, Bracelet / Chain length, Quantity = like Metal) */
.product-info .option-group>.option-title,.product-info .pdp-select{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.product-info .pdp-select select,.product-info .pdp-select input{text-transform:none;letter-spacing:normal}

/* 3D view + Try On: Carat Studio's loading cover and corner badge over the viewer's own branding */
.d3-cover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#fff;transition:opacity .5s ease}
.d3-cover img{width:min(260px,62%);height:auto}
.d3-cover b{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:.16em;color:var(--ink)}
.d3-cover small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.d3-cover__bar{width:120px;height:2px;background:var(--line);overflow:hidden;position:relative}
.d3-cover__bar i{position:absolute;left:-40%;top:0;bottom:0;width:40%;background:var(--champagne);animation:d3bar 1.1s ease-in-out infinite}
@keyframes d3bar{to{left:100%}}
.d3-cover.is-done{opacity:0;pointer-events:none}
.d3-badge{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;width:min(190px,34%);min-width:132px;height:58px;padding:0 14px 0 12px;background:#fff;pointer-events:none;font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--ink)}
.d3-badge img{width:100%;height:auto}
.pdp-tryon-pop__box{overflow:hidden}
@media(max-width:700px){.d3-badge{height:48px;min-width:118px}}


/* home "Rings by style": five tiles — each style's own photo with its collection's name directly under it */
.ring-style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;max-width:1240px;margin:0 auto}
.ring-style-tile{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;color:var(--plum)}
.ring-style-tile__img{display:block;width:100%;aspect-ratio:1;background:#fff;overflow:hidden}
.ring-style-tile__img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s cubic-bezier(.2,.7,.25,1)}
.ring-style-tile__name{font-size:14px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:5px;transition:border-color .25s ease,color .25s ease}
.ring-style-tile:hover .ring-style-tile__img img,.ring-style-tile:focus-visible .ring-style-tile__img img{transform:translateY(-6px)}
.ring-style-tile:hover .ring-style-tile__name,.ring-style-tile:focus-visible .ring-style-tile__name{border-color:var(--champagne);color:var(--champagne)}
.ring-style-tile:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}
@media(max-width:1000px){.ring-style-grid{gap:14px}.ring-style-tile__name{font-size:12px;letter-spacing:1px}}
@media(max-width:700px){
 .ring-style-grid{display:flex;overflow-x:auto;gap:12px;margin:0;padding:0 16px 8px;scroll-padding:0 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
 .ring-style-grid::-webkit-scrollbar{display:none}
 .ring-style-tile{flex:0 0 42%;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.ring-style-tile__img img{transition:none}.ring-style-tile:hover .ring-style-tile__img img{transform:none}}

/* PDP photo box: one fixed 4:3 white box on every product (the store's photos are 4:3 on white), photo edge to edge —
   was a square cream box with padding, leaving cream bars round every photo */
.product-gallery .pdp-stage.photo{aspect-ratio:4/3;height:auto;background:#fff}
.product-gallery>.pdp-stage.photo img,.product-gallery .pdp-stage [data-stage-img]{padding:0;object-fit:contain;background:#fff}
.pdp-thumb{aspect-ratio:4/3;background:#fff}

/* ===== Product page information column — Carat Studio's own type + palette (Cormorant / Manrope, plum / champagne):
   kicker, serif title, price with a "Save" tag, folded description, one quiet option rhythm (label left, choice right,
   no rule between groups), size guide on the label row, engraving folded, quantity beside Add to bag, icon actions,
   badges in an ivory panel. Applies to every product type. ===== */
.pdp-info{min-width:0}
.pdp-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 14px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.pdp-kicker i{font-style:normal;color:var(--line)}
.product-info.pdp-info h1{margin:0;max-width:none;font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,42px);line-height:1.1;letter-spacing:0;color:var(--plum)}
.pdp-price-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 0}
.product-info.pdp-info .pdp-price-row .price{margin:0;font-size:24px;font-weight:500;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.pdp-price-row .price s{margin-left:8px;font-size:16px;font-weight:400;color:var(--muted)}
.product-info.pdp-info .pdp-price-row .subline{margin:0;padding:3px 9px;border:1px solid var(--champagne);font-size:10.5px;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
.pdp-price-row .subline[hidden]{display:none}
.pdp-desc{margin:22px 0 0}
.product-info.pdp-info .pdp-desc .description{margin:0;font-size:15px;line-height:1.75;color:var(--muted)}
.pdp-desc.is-folded:not(.is-open) .description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pdp-more{margin:8px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--plum);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--champagne);cursor:pointer}

/* options */
.pdp-config{margin-top:28px;padding-top:4px;border-top:1px solid var(--line)}
.pdp-config:empty{display:none}
.product-info.pdp-info .pdp-group{margin:24px 0 0;padding:0;border:0}
.pdp-info .opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;text-transform:none;letter-spacing:0}
.pdp-info .opt-head>span,.pdp-info .opt-head>label{margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--plum)}
.pdp-info .opt-head b{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1;letter-spacing:0;text-transform:none;color:var(--ink)}
.pdp-info .opt-head small{margin-left:6px;font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted)}
.opt-help{font-size:12.5px;font-weight:500;color:var(--plum);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--champagne);white-space:nowrap}
.opt-help:hover{color:var(--champagne)}
.pdp-info .opt-boxes{gap:8px}
.pdp-info .opt-box,.pdp-info .linked-group .chip{min-height:46px;min-width:64px;padding:8px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13.5px;line-height:1.2;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.pdp-info .opt-box:hover,.pdp-info .linked-group a.chip:hover{border-color:var(--plum);background:var(--paper)}
.pdp-info .opt-box.is-on,.pdp-info .linked-group .chip.active{border-color:var(--plum);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--plum);color:var(--plum)}
.pdp-info .opt-boxes--ct .opt-box{min-height:58px;padding:8px 4px}
.pdp-info .linked-group .style-tabs{gap:8px}
.pdp-info .linked-group .chip{display:inline-flex;align-items:center;justify-content:center}
.pdp-info .linked-group .linked-more{border-style:dashed;color:var(--muted)}
.pdp-info .swatches{gap:14px;flex-wrap:wrap}
.pdp-info .swatch{width:40px;height:40px;padding:5px}
.pdp-info .swatch span{width:28px;height:28px}
.pdp-field{position:relative}
.pdp-field select,.pdp-field input{width:100%;min-height:50px;margin:0;padding:0 44px 0 16px;border:1px solid var(--line);border-radius:0;background:var(--paper);font:inherit;font-size:14px;color:var(--ink);-webkit-appearance:none;appearance:none}
.pdp-field select{background-image:linear-gradient(45deg,transparent 50%,var(--plum) 50%),linear-gradient(135deg,var(--plum) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.pdp-field select:hover,.pdp-field input:hover{border-color:var(--champagne)}
.pdp-field select:focus-visible,.pdp-field input:focus-visible{outline:none;border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.pdp-field--count input{padding-right:64px}
.pdp-field--count b{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:500;color:var(--muted);pointer-events:none}
.product-info.pdp-info .pdp-hint{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.pdp-engrave details{padding:0;border:0}
.pdp-engrave summary{align-items:center;min-height:50px;padding:0 16px;border:1px dashed var(--line);font-family:var(--sans);font-size:13.5px;color:var(--plum)}
.pdp-engrave summary:hover{border-color:var(--champagne)}
.pdp-engrave summary small{margin-left:6px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pdp-engrave details[open] summary{border-style:solid;margin-bottom:10px}
.pdp-engrave details>p{padding-top:0}

/* buy row: quantity beside the button */
.pdp-buy{display:flex;gap:10px;margin:30px 0 0}
.pdp-buy .pdp-qty{flex:0 0 auto;display:inline-flex;align-items:stretch;gap:0;margin:0;border:1px solid var(--line);background:var(--paper)}
.pdp-buy .pdp-qty button{width:40px;min-height:54px;border:0;background:none;font-size:18px;color:var(--plum);cursor:pointer}
.pdp-buy .pdp-qty button:hover{background:var(--ivory)}
.pdp-buy .pdp-qty input{width:36px;height:auto;font-size:15px}
.product-info.pdp-info .pdp-buy .btn{flex:1 1 auto;width:auto;min-height:56px;margin:0;font-size:13px;font-weight:600;letter-spacing:.16em}

/* secondary actions */
.pdp-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 0;border-bottom:1px solid var(--line)}
.pdp-act{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:6px 4px;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .18s ease}
.pdp-act svg{width:17px;height:17px;flex:0 0 auto;color:var(--plum)}
.pdp-act:hover,.pdp-act:hover svg{color:var(--champagne)}
.pdp-act.is-on svg path{fill:var(--plum)}
.pdp-act+.pdp-act::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:1px solid var(--line)}

/* the store's badges: an ivory panel, icon beside its words */
.pdp-info .trust-row.trust-row--store{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:24px 0;padding:20px 22px;border:0;background:var(--ivory)}
.pdp-info .trust-row.trust-row--store>*{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left;font-size:12.5px;line-height:1.4;color:var(--ink)}
.pdp-info .trust-row--store img{width:22px;height:22px;flex:0 0 auto}

/* Design details */
.pdp-info>details{border-top:0;border-bottom:1px solid var(--line);padding:18px 0}
.pdp-info>details>summary{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--plum)}
.pdp-info>details>p{padding-top:10px}

@media (max-width:700px){
  .product-info.pdp-info h1{font-size:30px}
  .product-info.pdp-info .pdp-price-row .price{font-size:22px}
  .pdp-config{margin-top:24px}
  .product-info.pdp-info .pdp-group{margin-top:22px}
  .pdp-info .opt-box,.pdp-info .linked-group .chip{min-height:44px;padding:8px 13px}
  .pdp-buy{margin-top:26px}
  .pdp-buy .pdp-qty button{width:38px}
  .product-info.pdp-info .pdp-buy .btn{padding:12px 14px;letter-spacing:.12em}
  .pdp-act{flex-direction:column;gap:5px;font-size:11.5px;min-height:62px}
  .pdp-act+.pdp-act::before{top:16px;bottom:16px}
  .pdp-info .trust-row.trust-row--store{grid-template-columns:1fr 1fr;padding:18px 16px;gap:14px}
}
@media (prefers-reduced-motion:reduce){.pdp-info .opt-box,.pdp-info .linked-group .chip,.pdp-act{transition:none}}
/* metal swatches with their names */
.pdp-info .swatches--named{gap:6px 4px}
.swatch-opt{display:flex;flex-direction:column;align-items:center;gap:7px;width:68px;color:var(--muted);text-decoration:none;text-align:center}
.swatch-opt small{font-size:10.5px;line-height:1.25;letter-spacing:.02em}
.swatch-opt.is-on small{color:var(--plum);font-weight:600}
.swatch-opt:hover .swatch{border-color:var(--plum)}
.swatch-opt:hover small{color:var(--plum)}
.swatch-opt:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
@media (max-width:700px){.swatch-opt{width:60px}.swatch-opt small{font-size:10px}}

/* product card discount tag: a clear plum tag on the photo (was off-white on a white photo, near invisible), same
   wording as the product page ("Save 50%") — from the store: price vs compare-at price */
.product-grid .product-card .badge,.product-card .badge{position:absolute;left:10px;top:10px;z-index:2;min-height:0;padding:4px 9px;background:var(--plum);color:var(--ivory);font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase}
.product-card .badge:empty{display:none}
@media (max-width:700px){.product-grid .product-card .badge,.product-card .badge{left:8px;top:8px;padding:3px 7px;font-size:9.5px;letter-spacing:.1em}}

/* ---- P2 (user, 15 Oct): phone / tablet menu — "Shop · All <item>" at the top of an opened item (a tap there only opens
   it); hidden on a hover desktop, where the item itself is the link to its collection */
.mega-all{display:none}
@media (max-width:899px),(hover:none){
  .mega .mega-all{display:block;grid-column:1/-1;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .mega-all h4{margin:0 0 10px}
  .mega-all a{display:inline-flex;align-items:center;min-height:36px;font:500 20px/1.2 var(--serif);color:var(--plum);text-decoration:none}
  .mega-all a::after{content:"→";font:15px var(--sans);margin-left:8px;color:var(--champagne)}
}

/* ---- P3 (user, 15 Oct): phone + tablet filters apply only on "Show results". The tablet (701–1024) gets the phone's
   drawer instead of the side column, so both work the same way; desktop (>1024) is unchanged. */
@media (min-width:701px) and (max-width:1024px),(min-width:1025px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  .listing{display:block}
  .listing .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .filters{display:none;margin:0}
  .mobile-filter{display:block}
  .listing-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
  .listing-toolbar>span{grid-column:1/-1}
  .listing-toolbar .mobile-filter{display:inline-flex;justify-content:center;align-items:center;width:100%;min-height:44px;margin:0}
  .listing-toolbar .sort-by{border:1px solid var(--line);min-height:44px;padding:0 0 0 12px;gap:4px;font-size:13px;color:var(--muted)}
  .listing-toolbar .sort-by select{flex:1;min-width:0;min-height:42px;padding:0 6px}
  .filters.show{display:block;position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(420px,70vw);margin:0;padding:0 24px;overflow-y:auto;background:var(--paper);box-shadow:0 0 0 100vmax rgba(51,43,48,.42);animation:studio-drawer .28s ease both}
  .filters.show .filters__head{position:sticky;top:0;z-index:2;background:var(--paper);padding:18px 0 12px;border-bottom:1px solid var(--line);align-items:center}
  .filters.show .filters__head h4{font:500 28px var(--serif);color:var(--plum);margin-right:auto}
  .filters.show .filters__reset{margin-right:14px}
  .filters.show .filters__x{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:none;border:0;font-size:20px;color:var(--plum)}
  .filters.show .filters__foot{display:block;position:sticky;bottom:0;background:var(--paper);padding:14px 0 18px;border-top:1px solid var(--line)}
  .filters.show .filters__foot .btn{width:100%;margin:0}
  .filters.show .filter-options .filter-link{padding:6px 0}
  html:has(.filters.show){overflow:hidden}
}
/* P3: inside an open drawer / menu the store chat bubble no longer sits on its buttons; ✕ is the right-most control */
html:has(.filters.show) #relay-widget-host,html.cdr-lock #relay-widget-host,html.df-lock #relay-widget-host,html.nav-lock #relay-widget-host{display:none!important}
.filters.show .filters__x{order:3}
.filters.show .filters__reset{order:2}

/* ---- P4 (user, 15 Oct): filter options + Reset are buttons now (no URL on hover), same look as before */
.filter-options button.filter-link{width:100%;background:none;border:0;border-radius:0;text-align:left;font-family:inherit;cursor:pointer;min-height:0;-webkit-tap-highlight-color:transparent}
.filter-options button.filter-link:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
button.filters__reset{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;min-height:0}

/* ---- P5 (user, 15 Oct): home "Less ordinary" — the square solitaire photo grew to a 960px square on a wide screen, inset
   in an ivory box. Desktop / tablet: the same 3:2 band as "A little knowledge" above (420–680px tall), photo filling it. */
@media (min-width:701px){
  .split .photo:has(img[src*="solitaire.png"]){height:clamp(420px,33.34vw,680px);min-height:0;background:linear-gradient(90deg,#f1e7da 0%,#efe4d7 50%,#e7dbcc 100%)}
  /* the whole ring, never cropped at the top; the band beside it is the photo's own backdrop colour, so no inset box shows */
  .split .photo img[src*="solitaire.png"]{display:block;width:auto;max-width:100%;height:100%;aspect-ratio:1;object-fit:cover;margin:0 auto;padding:0;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
}

/* ---- P6 (user, 15 Oct): phone / tablet sort = the studio dropdown, its list right under the control (the native list
   opened elsewhere on the page); desktop keeps the native select */
.sort-wrap{min-width:0}
.sort-dd{display:none}
@media (max-width:1024px),(hover:none) and (pointer:coarse){
  .sort-wrap .sort-by--native{display:none!important}
  .sort-dd{display:block;position:relative;height:100%}
  .sort-dd__btn{display:flex;align-items:center;gap:6px;width:100%;height:100%;min-height:44px;padding:0 12px;background:var(--paper);border:1px solid var(--line);font:13px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
  .sort-dd__l{color:var(--muted);flex:0 0 auto}
  .sort-dd__v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sort-dd__btn svg{flex:0 0 auto;color:var(--plum);transition:transform .2s ease}
  .sort-dd.is-open .sort-dd__btn{border-color:var(--plum)}
  .sort-dd.is-open .sort-dd__btn svg{transform:rotate(180deg)}
  .sort-dd__list{position:absolute;top:calc(100% + 4px);right:0;left:auto;width:max(100%,230px);z-index:60;margin:0;padding:6px 0;list-style:none;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 30px rgba(51,43,48,.14)}
  .sort-dd__list[hidden]{display:none}
  .sort-dd__list button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 14px;background:none;border:0;font:14px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
  .sort-dd__list button:hover,.sort-dd__list button:focus-visible{background:var(--rose);outline:none}
  .sort-dd__list button[aria-selected="true"]{color:var(--plum);font-weight:600}
  .sort-dd__list button[aria-selected="true"]::after{content:"✓";font-weight:400}
}
@media (min-width:1025px) and (hover:none) and (pointer:coarse){.sort-dd{width:240px}}

/* ---- P7 (user, 15 Oct): ring builder step 2 — Cards (default) | List toggle; the list is one row per stone */
.df-sort{margin-left:auto}
.df-view{display:inline-flex;border:1px solid var(--line);background:var(--paper)}
.df-view button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;background:none;border:0;font:13px var(--sans);color:var(--muted);cursor:pointer}
.df-view button+button{border-left:1px solid var(--line)}
.df-view button[aria-pressed="true"]{background:var(--plum);color:var(--ivory)}
.df-view button:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.df-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.df-row__in{display:grid;grid-template-columns:64px repeat(6,minmax(0,1fr)) 120px 64px;align-items:center;gap:14px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper);cursor:pointer;transition:background-color .2s ease}
.df-row__in:hover,.df-row__in:focus-visible{background:var(--rose);outline:none}
.df-row__sum{display:none}
.df-row__media{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:#fff;border:1px solid var(--line);overflow:hidden}
.df-row__media img{width:100%;height:100%;object-fit:cover;display:block}
.df-row__media .df-noimg{gap:0}
.df-row__media .df-noimg svg{width:34px;max-width:34px}
.df-row__media .df-noimg>span{display:none}
.df-row__360{position:absolute;left:2px;bottom:2px;padding:1px 3px;background:var(--paper);font:600 9px var(--sans);letter-spacing:.5px;color:var(--plum)}
.df-row__c{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df-row__price{font:500 19px var(--serif);color:var(--plum);text-align:right;white-space:nowrap}
.df-row__cta{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--plum);text-align:right;white-space:nowrap}
.df-row--head .df-row__in{background:transparent;cursor:default;padding-top:8px;padding-bottom:8px}
.df-row--head .df-row__in:hover{background:transparent}
.df-row--head span,.df-row--head .df-row__price{font:600 11px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.df-row--head .df-row__media{height:0;border:0;background:none}
.df-sk--row{aspect-ratio:auto;height:86px;border-width:0 0 1px}
@media (max-width:1000px){
  .df-row__in{grid-template-columns:56px repeat(6,minmax(0,1fr)) 96px;gap:10px}
  .df-row__media{width:56px;height:56px}
  .df-row__cta{display:none}
}
@media (max-width:700px){
  .df-bar{gap:10px}
  .df-view button{padding:0 10px}
  .df-view button span{display:none}
  .df-row--head{display:none}
  .df-row__in{grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:10px 2px}
  .df-row__c{display:none}
  .df-row__sum{display:flex;flex-direction:column;gap:3px;min-width:0}
  .df-row__title{font-size:14px;color:var(--ink)}
  .df-row__sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .df-row__price{font-size:17px}
}
@media (max-width:700px){.df-bar .df-count{flex-basis:100%}.df-bar .df-sort{margin-left:0;flex:1;min-width:0}.df-bar .df-sort select{flex:1;min-width:0}.df-view button{min-height:40px}}

/* ---- P9 (user, 15 Oct): "Book a consultation" is switched off (carat.js APPOINTMENTS = false adds html.no-appt).
   Every link to the booking page is hidden; the header keeps its slot (the wordmark stays centred); the home box that only
   offered the booking goes and its neighbour takes the full row. Remove html.no-appt (APPOINTMENTS = true) to bring it back. */
html.no-appt a[href="/appointment"],html.no-appt a[href="#appointment"]{display:none!important}
@media (min-width:701px){html.no-appt .masthead>a.appointment{display:inline-flex!important;visibility:hidden;pointer-events:none}}
html.no-appt .nav-item--mobile:has(>a[href="/appointment"]){display:none!important}
html.no-appt .contact-grid>div:has(>a.btn[href="/appointment"]),html.no-appt .contact-grid>div:has(>a.btn[href="#appointment"]){display:none!important}
html.no-appt .contact-grid:has(>div>a.btn[href="/appointment"]),html.no-appt .contact-grid:has(>div>a.btn[href="#appointment"]){grid-template-columns:minmax(0,1fr)}
html.no-appt .contact-grid:has(>div>a.btn[href="/appointment"]) p,html.no-appt .contact-grid:has(>div>a.btn[href="#appointment"]) p{max-width:640px}

/* ---- P10 (user, 15 Oct): ring size required — the field turns red with a short message under it until a size (or "I don't know") is chosen */
select.is-invalid{border-color:#a3302a!important;box-shadow:0 0 0 1px #a3302a}
.rs-err{margin:6px 0 0;font-size:13px;color:#a3302a}
.rs-err::before{content:"! ";font-weight:600}

/* ---- P11 (collection-filters-rules.md): price rail $0 – the highest price of the other filters' matches; loading state
   while a filtered listing is worked out (the server's first paint is only the platform's 240-product window) */
#listing-content.cf-loading,html.cf-wait #listing-content{opacity:.45;pointer-events:none;transition:opacity .2s ease}
.cf-price{margin-top:12px}
.cf-price__val{font-size:14px;color:var(--ink);margin:0 0 6px}
.cf-price__val b{font-weight:600;color:var(--plum)}
.cf-price .cf-sl{margin:2px 0}
.cf-price__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:2px 0 0}
.cf-price__note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* P3+ (user, 16 Oct): touch tablets in landscape (1025–1366, iPad Air / Pro) also get the drawer — picks wait for "Show results"; 4 cards a row there */
@media (min-width:1025px) and (max-width:1366px) and (hover:none) and (pointer:coarse){.listing .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.listing-toolbar .sort-dd{width:100%}}
.filters.cf-busy .cf-price{opacity:.5;transition:opacity .2s ease}

/* user 16 Oct: footer social logos instead of names — round outline buttons in the studio colours */
.footer-social--icons{gap:12px;align-items:center}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--plum);text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.social-icon:hover,.social-icon:focus-visible{background:var(--plum);border-color:var(--plum);color:var(--ivory)}
.social-icon svg{display:block}

/* card metal swap (card-metal-swap.md, user 19 Oct): the picked dot rings at once; the photo shimmers and the name /
   price dim while that metal's piece comes, and a swapped card's new photo shimmers until it has arrived */
.mini-swatches--store a.is-wait i{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--plum)}
.product-card.is-swapping .photo,.product-card.cs-shim .photo{position:relative;overflow:hidden}
.product-card.is-swapping .photo img{opacity:.55;transition:opacity .2s ease}
.product-card.cs-shim .photo img{opacity:0}
.product-card.is-swapping .photo::after,.product-card.cs-shim .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) 150% 0/250% 100% no-repeat;animation:df-sweep 1.2s linear infinite;pointer-events:none}
.product-card.is-swapping h3,.product-card.is-swapping .price{opacity:.5;transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.product-card.is-swapping .photo::after,.product-card.cs-shim .photo::after{animation:none}}

/* user 19 Oct: bag page (/cart) — the product photo fills its box (it sat letterboxed in an ivory frame with bands above
   and below); white behind it, as the store's photos are shot on white. The drawer already does this (.cdr__img) */
.cart-item .photo,.cart-item .ring-thumb .photo{height:auto;aspect-ratio:4/3;background:#fff;overflow:hidden}   /* the store photos are 4:3 (1600x1200): the box takes their shape, so the photo fills it whole and nothing is cut */
.cart-item .photo img{display:block;width:100%;height:100%;padding:0;object-fit:cover;object-position:center}
.cart-item .ring-thumb{align-self:start}   /* the stone inset sits on the photo's corner, not at the foot of a stretched row */
.cart-item .ring-thumb__stone{width:36%;right:-10px;bottom:-10px}   /* smaller in the bag, so the setting stays in view */

/* search drop-down (user 19 Oct, as whitemoonjewels.com's): a bar right under the header, suggestions under it — the
   whitemoon layout and sizes in the studio's colours and type (assets/carat.js "search drop-down") */
#sq{position:fixed;left:0;right:0;top:0;z-index:49;display:none;color:var(--ink);font:15px/1.5 var(--sans)}
#sq.on{display:block}
#sq .sq-bar{background:var(--ivory);border-bottom:1px solid var(--line);padding:26px 40px 22px;animation:sq-in .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes sq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#sq form{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--plum)}
#sq form:focus-within{box-shadow:0 1px 0 var(--plum)}
#sq .sq-gl{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
#sq input{flex:1 1 0%;min-width:0;border:0;border-radius:0;background:transparent;min-height:60px;padding:0;font:inherit;font-size:22px;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none}
#sq input::placeholder{color:var(--muted);opacity:.75}
#sq input::-webkit-search-cancel-button,#sq input::-webkit-search-decoration{-webkit-appearance:none;display:none}
#sq .sq-go{appearance:none;border:0;border-bottom:1px solid var(--plum);background:none;padding:6px 0;cursor:pointer;color:var(--plum);font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}
#sq .sq-x{appearance:none;border:0;background:none;width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:999px;cursor:pointer;color:var(--plum)}
#sq .sq-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#sq .sq-x:hover{background:var(--rose)}
#sq .sq-res{max-width:1100px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-top:0;box-shadow:0 24px 48px -28px rgba(67,44,59,.35);max-height:calc(100vh - var(--sq-top,0px) - 124px);overflow-y:auto;overscroll-behavior:contain}
#sq .sq-res[hidden]{display:none}
#sq .sq-res>*{transition:opacity .2s}
#sq .sq-res.busy>*{opacity:.5}
#sq .sq-grp{padding:18px 24px 10px;display:flex;flex-direction:column;gap:6px}
#sq .sq-grp+.sq-grp{border-top:1px solid var(--line)}
#sq .sq-lb{color:var(--muted);font:600 10px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px}
#sq .sq-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;padding:6px 0 10px}
#sq .sq-pc{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;margin:-10px;color:var(--ink);text-decoration:none;transition:background .2s}
#sq .sq-ph{aspect-ratio:1/1;max-width:100%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
#sq .sq-ph img{width:100%;height:100%;object-fit:contain;display:block;padding:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){#sq .sq-pc:hover .sq-ph img{transform:scale(1.04)}}
#sq .sq-nm{font-size:13px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
#sq .sq-nm b{color:var(--ink);font-weight:700}
#sq .sq-pl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
#sq .sq-pr{font:500 19px/1 var(--serif);color:var(--plum);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
#sq .sq-was{font:14px var(--serif);color:var(--muted);text-decoration:line-through;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
#sq .sq-chips{flex-flow:row wrap;align-items:center;gap:10px}
#sq .sq-chips .sq-lb{padding:0 6px 0 0}
#sq .sq-ln{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);padding:8px 12px;font-size:13px;color:var(--muted);text-decoration:none}
#sq .sq-ln svg,#sq .sq-all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
#sq .sq-ln b{color:var(--ink);font-weight:700}
#sq .sq-all{position:sticky;bottom:0;background:var(--paper);display:flex;justify-content:center;align-items:center;gap:10px;padding:16px;border-top:1px solid var(--line);color:var(--plum);text-decoration:none;font:600 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase}
#sq .sq-ln:hover,#sq .sq-ln.on{border-color:var(--plum)}
#sq .sq-pc:hover,#sq .sq-pc.on,#sq .sq-ln:hover,#sq .sq-ln.on,#sq .sq-all:hover,#sq .sq-all.on{background:var(--ivory);color:var(--ink)}
#sq a:focus-visible,#sq button:focus-visible{outline:2px solid var(--champagne);outline-offset:-2px}
#sq .sq-msg{padding:20px 24px;color:var(--muted);margin:0}
#sq .sq-msg a{color:var(--plum);border-bottom:1px solid var(--plum);text-decoration:none}
html.sq-on #header{box-shadow:0 1px 0 var(--line)}
html.sq-on #header [data-action="search"]{position:relative;z-index:0;color:var(--paper)}
html.sq-on #header [data-action="search"]::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--plum);z-index:-1}
@media (max-width:700px){html.sq-on #header [data-action="search"]::before{width:34px;height:34px;margin:-17px 0 0 -17px}}
#sq .sq-ph img{background:linear-gradient(100deg,#fff 30%,var(--rose) 50%,#fff 70%) 0 0/300% 100%;animation:df-sweep 1.3s linear infinite}
#sq .sq-ph img.ld{background:none;animation:none}
@media (prefers-reduced-motion:reduce){#sq .sq-ph img{animation:none}}
html.sq-on #relay-widget-host{display:none!important}
@media (max-width:900px) and (min-width:821px){#sq .sq-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
  #sq .sq-bar{padding:12px 16px}
  #sq form{gap:10px}
  #sq input{font-size:17px;min-height:52px}
  #sq .sq-go{display:none}
  #sq .sq-res{border-left:0;border-right:0;max-height:calc(100dvh - var(--sq-top,0px) - 78px)}
  #sq .sq-grp{padding:14px 16px 8px}
  #sq .sq-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:14px;padding:6px 16px 10px;margin:0 -16px;scrollbar-width:none}
  #sq .sq-cards::-webkit-scrollbar{display:none}
  #sq .sq-pc{flex:0 0 42%;scroll-snap-align:start;margin:0;padding:0}
}
@media (prefers-reduced-motion:reduce){#sq .sq-bar{animation:none}#sq .sq-res>*{transition:none}}

/* ---- R1 (user 19 Oct: "mobile / tablet view me design dekh lo, jo sahi nahi use sahi kar do") */
@media (max-width:700px){
  /* PDP "Beautiful together" swipe row: the desktop rule centred it (justify-content:center), which on a scroller pushes
     the first cards off the left edge where no swipe reaches them — the row now starts at its first card */
  section>.section-title+.product-grid:not(.listing>.product-grid){justify-content:flex-start}
  /* the breadcrumb flows as one line of text (the product name used to drop under "Home /" as a block of its own) */
  #main .breadcrumbs{display:block}
  #main .breadcrumbs>*{display:inline}
  #main .breadcrumbs>span:not(:last-child){margin:0 6px}
}
/* FAQ questions read from the left like the rest when they wrap (a long one was centred) */
summary{text-align:left}
/* small phones (under 375): the wordmark + its line stay on one line each, scaled to the room the icons leave
   (they wrapped to "THE CARAT / STUDIO"); the announcement stays one line so its messages never stack mid-change */
@media (max-width:374px){
  .masthead .wordmark{font-size:clamp(12px,calc((100vw - 200px) * .0955),18px);letter-spacing:.5px;white-space:nowrap}
  .masthead .wordmark small{font-size:clamp(6.5px,calc((100vw - 200px) * .05),9px);letter-spacing:.6px;white-space:nowrap}
  .announcement{font-size:10.5px;letter-spacing:.3px;padding-left:10px;padding-right:10px}
}
@media (max-width:340px){.announcement{font-size:9.5px;letter-spacing:.1px;padding-left:6px;padding-right:6px}}
/* tablets (701–1060): the wordmark and the five header icons overlapped (logo over the search icon: 768 −7px, 820 −15px,
   1024 −1px, 701 −40px). The search icon moves to the header's empty left side (the phone's menu button sits there; on
   a tablet it is empty), so four icons are left on the right, the logo stays centred and every icon keeps its 44px */
@media (min-width:701px) and (max-width:1060px){
  .masthead{position:relative}
  .masthead .tools{gap:0}
  .masthead .tools [data-action="search"]{position:absolute;left:24px;top:50%;transform:translateY(-50%)}
}
@media (min-width:1001px) and (max-width:1060px){.masthead .tools [data-action="search"]{left:48px}}
@media (min-width:701px) and (max-width:767px){.masthead .wordmark{font-size:21.5px;letter-spacing:2px}}
/* bag page quantity − / + were 32×32: 44×44 to a finger (phones, tablets and any touch screen) */
@media (max-width:1180px),(pointer:coarse){
  .cart-item .quantity{height:auto;align-items:center}
  .cart-item .quantity button{min-width:44px;min-height:44px}
}
/* PDP metal row on a tablet's narrow info column (701–900): five swatches on one line (Platinum dropped to a 2nd row) */
@media (min-width:701px) and (max-width:900px){.swatches--named .swatch-opt{width:58px}.swatches--named .swatch-opt small{font-size:10px}}
/* search drop-down: the close button takes a full 44px target */
#sq .sq-x{width:44px;height:44px}
@media (max-width:374px){html.sq-on #header [data-action="search"]::before{width:30px;height:30px;margin:-15px 0 0 -15px}}

/* user 20 Oct (home, boxed): the empty bands between "Know your diamond" and "We're here to help", and between the
   contact form and "A little guidance" — each was two sections' padding (66 + 66 = 132px; phone 42 + 42). Now 40px
   (phone 32px) of breathing room; nothing else on the page moves */
.newsletter+section.section{padding-bottom:0}
.newsletter+section.section+section.section{padding-top:40px;padding-bottom:0}
.newsletter+section.section+section.section+section.section:has(.faq){padding-top:40px}
@media (max-width:700px){
  .newsletter+section.section+section.section{padding-top:32px}
  .newsletter+section.section+section.section+section.section:has(.faq){padding-top:32px}
}
.newsletter+section.section+section.section .form-note{margin-bottom:0}   /* its 20px margin made the 2nd band look wider */

/* user 20 Oct: the back-to-top button sits right above the "Call now" button (bottom-left), not bottom-right under the
   store's chat bubble — same left edge, 12px above it */
.fab-top{left:24px;right:auto;bottom:82px}
@media (max-width:700px){.fab-top{left:16px;right:auto;bottom:72px}}

/* user 20 Oct (home): "Know your diamond" and "We're here to help" read as one block (P20 took the empty band out, and
   since P9 the Know section's right column — the consultation box — is hidden, so it was text on the left over an empty
   right). The Know section is now its own full-width ivory band, and on wide screens its text uses both columns
   (heading left; paragraph, IGI / GIA and the link right). Only while the appointment feature is off (html.no-appt). */
html.no-appt .newsletter+section.section{background:var(--ivory);box-shadow:0 0 0 100vmax var(--ivory);clip-path:inset(0 -100vmax);padding-top:64px;padding-bottom:64px}
html.no-appt .newsletter+section.section+section.section{padding-top:64px}
@media (min-width:901px){
  html.no-appt .newsletter+section.section .contact-grid>div:first-child{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:80px;row-gap:0;align-items:start}
  html.no-appt .newsletter+section.section .contact-grid>div:first-child>.eyebrow{grid-column:1;grid-row:1}
  html.no-appt .newsletter+section.section .contact-grid>div:first-child>h2{grid-column:1;grid-row:2/span 3;margin-bottom:0}
  html.no-appt .newsletter+section.section .contact-grid>div:first-child>p{grid-column:2;grid-row:1/span 2;margin-top:0;max-width:none}
  html.no-appt .newsletter+section.section .contact-grid>div:first-child>.certs{grid-column:2;grid-row:3}
  html.no-appt .newsletter+section.section .contact-grid>div:first-child>.text-link{grid-column:2;grid-row:4;justify-self:start}
}
@media (max-width:700px){
  html.no-appt .newsletter+section.section{padding-top:40px;padding-bottom:40px}
  html.no-appt .newsletter+section.section+section.section{padding-top:40px}
}

/* user 20 Oct: the hero of the four policy pages (Shipping, Privacy, Terms, Refund — footer "Information") filled the
   whole screen: its photo box was as tall as it is wide (1920 → 960px, 1440 → 720px). Now a set height, the whole piece
   in view (contain), the copy unchanged. Other rich pages (About, Care …) keep theirs. */
:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{height:460px;min-height:0;aspect-ratio:auto}
:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo img{object-fit:contain;width:100%;height:100%}
@media (max-width:1024px){:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{height:380px}}
@media (max-width:700px){:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{height:220px}}
/* … the photo now fills the hero's full height (it was 460 under a 495px copy column, leaving a strip), the piece whole
   (contain), and its frame takes the photo's own edge colours so no box edge shows (sampled from the four images) */
:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{position:relative;height:auto;min-height:460px;overflow:hidden}
:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo img{position:absolute;inset:0}
.sp--shipping-policy>.sp-hero .photo{background:linear-gradient(90deg,#f5eee2,#e6dacc)}
.sp--privacy-policy>.sp-hero .photo{background:#fcfbf6}
.sp--terms-conditions>.sp-hero .photo{background:linear-gradient(90deg,#f5e9db,#e9dbcb)}
.sp--refund-policy>.sp-hero .photo{background:#f7f2eb}
@media (max-width:1024px){:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{height:auto;min-height:380px}}
@media (max-width:700px){:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo{height:220px;min-height:0}}
/* user 20 Oct ("image box fit kar do"): the photo fills its box (cover) — no side strips; each photo keeps its piece in
   view (the pendant sits low in its photo) */
:is(.sp--shipping-policy,.sp--privacy-policy,.sp--terms-conditions,.sp--refund-policy)>.sp-hero .photo img{object-fit:cover;object-position:center}
.sp--privacy-policy>.sp-hero .photo img{object-position:center 85%}

/* user 20 Oct: a little room between the IGI / GIA boxes and "Understanding reports" (0px on desktop / tablet; the phone
   already had ~21px) */
@media (min-width:701px){.newsletter+section.section .certs+.text-link{margin-top:20px}}

/* user 20 Oct: Contact page hero photo fills its box (the ring-photo rule gave it contain + a 36px inset frame) */
.sp--contact>.sp-hero .photo img{object-fit:cover;padding:0;object-position:center 30%}   /* the diamond sits high in the photo */

/* user 20 Oct: the four Cs pages (Cut, Clarity, Color, Carat — home "Diamond education" links) — the policy-page hero
   treatment: the photo spans the hero's height (the copy sets it), fills its box (cover, no inset frame) */
:is(.sp--info-cut,.sp--info-clarity,.sp--info-color,.sp--info-carat)>.sp-hero .photo{position:relative;height:auto;min-height:460px;overflow:hidden;aspect-ratio:auto}
:is(.sp--info-cut,.sp--info-clarity,.sp--info-color,.sp--info-carat)>.sp-hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0;object-position:center 40%}
@media (max-width:1024px){:is(.sp--info-cut,.sp--info-clarity,.sp--info-color,.sp--info-carat)>.sp-hero .photo{min-height:380px}}
@media (max-width:700px){:is(.sp--info-cut,.sp--info-clarity,.sp--info-color,.sp--info-carat)>.sp-hero .photo{height:240px;min-height:0}}
/* the home "Less ordinary" rule (P5) sizes every solitaire.png split photo (clamp height, edge-fade mask) — the Cut hero
   uses the same photo, so it is released here */
.sp--info-cut>.sp-hero .photo:has(img[src*="solitaire.png"]){height:auto;min-height:460px;background:var(--ivory)}
.sp--info-cut>.sp-hero .photo img[src*="solitaire.png"]{width:100%;max-width:none;aspect-ratio:auto;margin:0;-webkit-mask-image:none;mask-image:none}
@media (max-width:1024px){.sp--info-cut>.sp-hero .photo:has(img[src*="solitaire.png"]){min-height:380px}}
@media (max-width:700px){.sp--info-cut>.sp-hero .photo:has(img[src*="solitaire.png"]){height:240px;min-height:0}}

/* ==== user 20 Oct, site-wide ("image box fit nahi he … kai bar bola alag alag page pe"): every photo fills its box.
   Three old rules left frames and strips: (1) ring photos on rich pages got contain + a 36px inset (guide cards, CTAs,
   Care hero); (2) the home "Less ordinary" sizing (P5) reached every solitaire.png split — Sign in / Register / Account /
   Sizing / About got a 480px photo under a taller text column; (3) About's hero and the five-rings row were inset too.
   Now: rich-page / account photos are cover with no inset; a split's photo spans its row (the text sets the height);
   the five-rings row (white ground) stays whole on a white box. Home sections are untouched (P5 stays there). */
.sp .photo img:not([src*="rings-by-style-row"]),.split:is(.sp-hero,.sp-split,.sp-cta) .photo img:not([src*="rings-by-style-row"]),.sp-guide .photo img{object-fit:cover;padding:0;background:transparent}
.sp .photo img[src*="rings-by-style-row"],.split:is(.sp-hero,.sp-split,.sp-cta) .photo img[src*="rings-by-style-row"]{object-fit:contain;padding:0}
.sp .photo:has(img[src*="rings-by-style-row"]),.split:is(.sp-hero,.sp-split,.sp-cta) .photo:has(img[src*="rings-by-style-row"]){background:#fff}
.split:is(.sp-hero,.sp-split,.sp-cta)>.photo:has(img){position:relative;align-self:stretch;height:auto;min-height:440px;overflow:hidden}
.split:is(.sp-hero,.sp-split,.sp-cta)>.photo:has(img:not([src*="rings-by-style-row"])){background:var(--ivory)}
.split:is(.sp-hero,.sp-split,.sp-cta)>.photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;-webkit-mask-image:none;mask-image:none;object-position:center 40%}
.sp-guide .photo img{object-position:center 28%}   /* ring photos: the diamond sits high */
@media (max-width:1024px){.split:is(.sp-hero,.sp-split,.sp-cta)>.photo:has(img){min-height:380px}}
@media (max-width:700px){.split:is(.sp-hero,.sp-split,.sp-cta)>.photo:has(img){height:280px;min-height:0}}
/* home "Diamond education" photo (hero.png): the demo set it to contain on a tablet, so it sat small in its box */
.split>.photo:has(img[src*="hero.png"]){position:relative;align-self:stretch;overflow:hidden}
.split>.photo img[src*="hero.png"]{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;padding:0}
@media (max-width:700px){.split>.photo:has(img[src*="hero.png"]){position:relative;height:300px;min-height:0}}
.split>.photo img[src*="hero.png"],.sp .photo img[src*="hero.png"]{object-position:70% center}   /* the ring sits right of centre in this photo */

/* user 20 Oct: the signed-in account page (carat.js accountHTML, "acct-dash") — hero band, three tiles, orders + details */
.acct-dash{padding-bottom:72px}
.acct-hero{background:var(--rose);box-shadow:0 0 0 100vmax var(--rose);clip-path:inset(0 -100vmax)}
.acct-hero__in{max-width:1224px;margin:0 auto;padding:40px 0 52px}
.acct-hero .breadcrumbs{padding:0 0 26px;margin:0}
.acct-hero h1{font:500 clamp(40px,4.4vw,58px)/1.05 var(--serif);color:var(--ink);margin:12px 0 14px}
.acct-hero p{margin:0;color:var(--muted);font-size:16px}
.acct-hero p b{color:var(--ink);font-weight:600}
.acct-wrap{max-width:1224px;margin:0 auto}
.acct-tiles{margin:44px 0 0}
.acct-tile .text-link{align-self:flex-start;margin-top:auto;padding-top:8px}
.acct-tile:hover{border-color:var(--plum)}
.acct-dash .acct-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.acct-panel{border:1px solid var(--line);background:var(--paper);padding:30px 30px 32px}
.acct-panel h2{font:500 30px/1.15 var(--serif);margin:0 0 20px}
.acct-orders{width:100%;border-collapse:collapse;font-size:14.5px}
.acct-orders th{text-align:left;font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 12px 12px 0;border-bottom:1px solid var(--line)}
.acct-orders td{padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.acct-status{display:inline-block;padding:3px 10px;border:1px solid var(--line);background:var(--ivory);font-size:12.5px;white-space:nowrap}
.acct-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;background:var(--ivory);border:1px dashed var(--line)}
.acct-empty svg{width:30px;height:30px;color:var(--champagne)}
.acct-empty h3{font:500 25px/1.2 var(--serif);margin:0}
.acct-empty p{margin:0;color:var(--muted);max-width:520px;line-height:1.65}
.acct-empty__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:10px}
.acct-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0 0 22px;font-size:15px}
.acct-dl dt{font:600 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.acct-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.acct-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0 24px;border-top:1px solid var(--line)}
.acct-out{width:100%;justify-content:center;text-align:center}
@media (max-width:1300px){.acct-hero__in,.acct-wrap{padding-left:48px;padding-right:48px}}
@media (max-width:900px){.acct-dash .acct-grid{grid-template-columns:1fr}.acct-hero__in,.acct-wrap{padding-left:24px;padding-right:24px}}
@media (max-width:700px){
  .acct-hero__in{padding:24px 20px 34px}.acct-wrap{padding:0 20px}
  .acct-tiles{margin-top:28px;grid-template-columns:1fr}
  .acct-panel{padding:24px 20px}
  .acct-orders th:nth-child(2),.acct-orders td:nth-child(2){display:none}
}
.acct-tile h3,.acct-orders td{font-variant-numeric:lining-nums}   /* "0 orders" read as "o orders" in the serif's old-style figures */
@media (max-width:700px){   /* compact tiles on a phone, so the orders are not three screens down */
  .acct-tiles{gap:10px}
  .acct-tile{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:16px 18px}
  .acct-tile svg{width:24px;height:24px;margin:0}
  .acct-tile h3{font-size:21px;flex:1}
  .acct-tile p{display:none}
  .acct-tile .text-link{flex-basis:100%;margin:0 0 0 38px;padding-top:2px;font-size:13.5px}
}
@media (max-width:700px){
  .acct-tile{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:2px}
  .acct-tile svg{grid-row:1/span 2;align-self:start;margin-top:4px}
  .acct-tile .text-link{margin:0;justify-self:start;flex-basis:auto}
}
.acct-links{width:100%;box-sizing:border-box}

/* user 20 Oct: home "The collections" shows the five main categories of the menu (Bracelets was missing) — five across,
   in the menu's order; on a phone two across with the fifth tile full width */
.collection-grid:not(.collection-grid--all){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:700px){
  .collection-grid:not(.collection-grid--all){grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-grid:not(.collection-grid--all)>.collection-card:nth-child(5):last-child{grid-column:1/-1}
}
@media (max-width:700px){.collection-grid:not(.collection-grid--all)>.collection-card:nth-child(5):last-child .photo{aspect-ratio:2/1;height:auto}}   /* the wide fifth tile is not a tall square */

/* user 20 Oct: the menu's promo card carries a photo — the theme's own category photo (warm beige ground, the same set
   as the home tiles), edge to edge at the top of the rose card, so it reads as one piece with the card */
.mega-promo--img{display:flex;flex-direction:column;padding:0 0 20px;overflow:hidden}
.mega-promo--img>:not(.mega-promo__img){margin-left:20px;margin-right:20px}
.mega-promo__img{display:block;aspect-ratio:4/3;overflow:hidden;margin:0 0 18px;background:var(--ivory)}
.mega-promo__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mega-promo--img:hover .mega-promo__img img{transform:scale(1.04)}
.mega-promo--img .text-link{align-self:flex-start}
@media (prefers-reduced-motion:reduce){.mega-promo__img img{transition:none}}
.mega-promo__img{position:relative}
.mega-promo__img img{position:absolute;inset:0;max-width:none;max-height:none;object-position:center 35%}   /* fills the box (it was 10px short); the stone sits high */

/* user 20 Oct (option B, artifact "Carat Studio Section Options"): home "Create your own ring" — the ring builder's three
   steps replace "Find your diamond" + "Distinctive cuts". Step 1 / 3 open the builder (setting first), step 2 and the
   second button start diamond first (the app's own data-action="diamond-first") */
.rb3 .section-title{margin-bottom:28px}
.rb3-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rb3-step{display:flex;flex-direction:column;gap:12px;min-width:0}
.rb3-ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ivory);border:0;padding:0;cursor:pointer;width:100%}
.rb3-ph .photo{position:absolute;inset:0;height:100%;min-height:0;margin:0}
.rb3-ph img{width:100%;height:100%;object-fit:cover;padding:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rb3-ph--stone{display:grid;place-items:center;background:var(--rose)}
.rb3-ph--stone svg{width:42%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rb3-step:hover .rb3-ph img,.rb3-step:hover .rb3-ph--stone svg{transform:scale(1.04)}
.rb3-n{font:400 44px/1 var(--serif);color:var(--champagne);margin-top:6px;font-variant-numeric:lining-nums}
.rb3-step h3{font:500 26px/1.15 var(--serif);margin:0}
.rb3-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.65;max-width:34ch}
.rb3-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.rb3-cta .btn{margin:0}
@media (prefers-reduced-motion:reduce){.rb3-ph img,.rb3-ph--stone svg{transition:none}}
@media (max-width:700px){
  .rb3-steps{grid-template-columns:1fr;gap:18px}
  .rb3-step{display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:4px;align-items:start}
  .rb3-ph{grid-row:1/span 3;aspect-ratio:1}
  .rb3-n{font-size:28px;margin:0}
  .rb3-step h3{font-size:21px}
  .rb3-step p{font-size:14px}
  .rb3-cta{flex-direction:column;align-items:stretch;margin-top:28px}
  .rb3-cta .btn{justify-content:center;text-align:center}
}
.rb3-ph img{object-position:center 30%}   /* the stone sits high in these photos */
@media (max-width:700px){.rb3-ph--stone svg{width:64%}}
.rb3-ph{cursor:default}   /* user 20 Oct: the step photos are pictures only; the two buttons carry the links */

/* user 21 Oct: the editorial photo pack (Documents/Codex/2026-10-21/.../carat-studio-theme-assets, placement-guide.html) —
   the guide's focal points, and every split that holds one fills its box (the home splits used to key on solitaire / hero.png) */
img[src*="ed-01-brand-hero"]{object-position:70% 50%}
img[src*="ed-02-craftsmanship"]{object-position:55% 45%}
img[src*="ed-03-consultation"]{object-position:50% 50%}
img[src*="ed-04-lifetime-care"]{object-position:50% 40%}
img[src*="ed-05-diamond-education-cut"]{object-position:68% 55%}
img[src*="ed-06-clarity-inspection"]{object-position:50% 48%}
img[src*="ed-07-diamond-color"]{object-position:50% 50%}
img[src*="ed-08-carat-weight"]{object-position:42% 45%}
img[src*="ed-09-gifting-delivery"]{object-position:72% 50%}
img[src*="ed-10-coloured-gemstones"]{object-position:50% 52%}
img[src*="ed-11-lab-diamonds"]{object-position:50% 50%}
img[src*="ed-12-natural-diamonds"]{object-position:47% 52%}
.split>.photo:has(img[src*="/ed-"]){position:relative;align-self:stretch;overflow:hidden;min-height:440px;background:var(--ivory)}
.split>.photo img[src*="/ed-"]{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;padding:0;margin:0;-webkit-mask-image:none;mask-image:none}
.sp .photo img[src*="/ed-"],.sp-guide .photo img[src*="/ed-"]{object-fit:cover;padding:0}
@media (max-width:1024px){.split>.photo:has(img[src*="/ed-"]){min-height:380px}}
@media (max-width:700px){.split>.photo:has(img[src*="/ed-"]){height:280px;min-height:0}}
/* the home hero now carries the brand photo (01): it fills its frame at every width — the phone's square slot crops on
   the hands (guide focal point 70% 50%) instead of the old transparent ring's contain + inset */
.hero-visual img[src*="/ed-01"],.hero-visual source+img[src*="/ed-01"]{object-fit:cover;object-position:70% 50%}
@media (max-width:700px){.hero-visual:has(img[src*="/ed-01"]){padding:0}.hero-visual img[src*="/ed-01"]{width:100%;aspect-ratio:1/1;object-fit:cover}}

/* user 21 Oct: menu Gemstone columns — a faceted gem in the stone's colour before each name */
.mega-gem{display:inline-flex;align-items:center;gap:10px}
.mega-gem .gem-ic{flex:0 0 auto;width:16px;height:16px;filter:drop-shadow(0 1px 1.5px rgba(51,43,48,.25))}
.mega-gem:hover .gem-ic{transform:scale(1.15);transition:transform .2s ease}
.mega .mega-col a.mega-gem{display:flex;align-items:center;gap:10px}
.mega .mega-col a.mega-gem .gem-ic{margin:0}
/* user 21 Oct: card heart — the same SVG for saved / not saved, so it keeps its size (the filled ♥ glyph drew smaller) */
.wish{display:inline-flex;align-items:center;justify-content:center;color:var(--plum);padding:0;line-height:0}
.wish .wish-ic{width:16px;height:16px;display:block;transition:transform .2s ease}
.wish[aria-pressed="true"] .wish-ic{color:var(--plum)}
.wish:active .wish-ic{transform:scale(.9)}

/* ---- P43 (user, 22 Oct — whitemoonjewels.com navbar) ----
   1. The header stays at the top while the page scrolls. Past the hero it gets a frosted background + shadow
      (html.hdr-stuck, carat.js), and on a wide screen a slimmer masthead. The blur sits on a ::before layer: a
      backdrop-filter on the header itself would make it the box the phone menu's position:fixed panel is laid out
      in. --hdr-h (measured) keeps the other sticky things and #anchors clear of it. */
#header{position:sticky;top:0;transition:box-shadow .25s ease}
#header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background-color .25s ease}
html.hdr-stuck #header{background:transparent;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(51,43,48,.07)}
html.hdr-stuck #header::before{background:rgba(255,254,250,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
html{scroll-padding-top:calc(var(--hdr-h,90px) + 12px)}
@media (min-width:701px){
  .nav .nav-item .mega{top:100%}
  #header .masthead,#header .nav{transition:height .25s ease}
  html.hdr-stuck #header .masthead{height:68px}
  html.hdr-stuck #header .wordmark small{display:none}
  html.hdr-stuck #header .nav{height:46px}
  .product-gallery{top:calc(var(--hdr-h,143px) + 24px)}
  .sp-toc{top:calc(var(--hdr-h,143px) + 24px)}
}
/* 2. Phone menu, as on whitemoonjewels.com: a search box at the top (opens the same search pop-up as the header
      icon); under the items a "Design your ring" banner, the studio's pages in two columns and a "Questions?" box.
      About lives in that page list, so its own row is not repeated. */
@media (max-width:700px){
  .nav.mobile-open>.nav-item--desk{display:none}
  .nav.mobile-open>.nav-m-search{border-bottom:0;margin:14px 0 4px}
  .nav.mobile-open>.nav-m-search>button{display:flex;justify-content:flex-start;align-items:center;gap:12px;width:100%;padding:12px 2px;border:0;border-bottom:1px solid var(--plum);background:none;font-size:15px;letter-spacing:.2px;text-transform:none;color:var(--muted);text-align:left;cursor:text}
  .nav.mobile-open>.nav-m-search>button::after{content:none}
  .nav-m-search svg{width:18px;height:18px;flex:none;color:var(--ink)}
  .nav.mobile-open>.nav-m-more{border-bottom:0;margin-top:22px}
  .nav-m-design{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--plum);color:var(--ivory);padding:18px}
  .nav-m-design b{display:block;font:500 25px/1.1 var(--serif)}
  .nav-m-design small{display:block;margin-top:8px;font-size:11px;line-height:1.6;letter-spacing:1.6px;text-transform:uppercase;color:#d7c8d2}
  .nav-m-design i{font-style:normal;color:var(--champagne);font-size:18px}
  .nav-m-links{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .nav-m-links a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
  .nav-m-help{margin-top:22px;background:var(--ivory);padding:16px 16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .nav-m-help__k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .nav-m-help a{font-size:15px;color:var(--ink)}
  .nav-m-help a.nav-m-help__appt{color:var(--plum);border-bottom:1px solid var(--champagne);padding-bottom:2px}
}

/* ---- P44 (user, 22 Oct): product card hover — the main photo first, the product's second photo fades in over it on
   hover (carat.js csWrap adds .card-alt only when the product has a second image). Touch screens keep the main photo. */
.product-card .photo{position:relative}
.product-card .photo>.card-alt{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease,transform .4s;pointer-events:none}
@media (hover:hover){.product-card:hover .photo>.card-alt{opacity:1}}

/* ---- P46 (user, 22 Oct): photographed diamonds in the shape / colour pickers (carat.js gemPhoto). The photos are on white:
   multiply drops the white onto the button's own background; a colour is the stone with a colour-blend layer on top
   (white stays white, the facets take the hue). ---- */
.gem-ph{position:relative;display:block;width:36px;height:36px;flex:none;isolation:isolate;mix-blend-mode:multiply}
.gem-ph img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.gem-ph--tint::after{content:"";position:absolute;inset:0;background:var(--gem);mix-blend-mode:color;pointer-events:none}
/* builder step 2 */
.df-shape .gem-ph{width:40px;height:40px}
.df-fancy__c .gem-ph{width:26px;height:26px}
/* mega menu "Shop by Shape" */
.mega-shape .gem-ph{width:46px;height:46px;transition:transform .2s}
.mega .mega-shape:hover .gem-ph{transform:translateY(-3px)}
/* product page: Diamond shape / Diamond colour */
.chip.chip--gem{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:78px;padding:10px 12px 9px;text-align:center;line-height:1.2}
.chip.chip--gem .gem-ph{width:38px;height:38px}
@media (max-width:700px){.chip.chip--gem{min-width:68px;padding:8px 8px 7px}.chip.chip--gem .gem-ph{width:32px;height:32px}}
/* dark fancy colours: the gamma curves in carat.js gemDefs() */
.gem-ph--deep img{filter:url(#gem-deep)}
.gem-ph--mid img{filter:url(#gem-mid)}

/* ---- P48 (user, 22 Oct: "the diamonds don't look good"): the PDP Diamond shape / colour options as white tiles with a
   bigger stone (56px in a 72px tile, 60/48 on a phone) and the name under the tile — the stone on white, as the
   photos were shot, instead of a 38px stone multiplied into a beige chip. The colour layer is softer (85%) and the
   photo a touch crisper, so a fancy stone reads as a coloured diamond, not a neon one. ---- */
.chip.chip--gem,.chip.chip--gem:hover,.chip.chip--gem.active,.pdp-info .linked-group .chip.chip--gem,.pdp-info .linked-group a.chip.chip--gem:hover,.pdp-info .linked-group .chip.chip--gem.active{min-height:0;justify-content:flex-start;display:inline-flex;flex-direction:column;align-items:center;gap:8px;width:84px;min-width:0;padding:0;border:0;background:none;box-shadow:none;text-align:center;font-size:13px;line-height:1.25;color:var(--muted)}
.chip.chip--gem .gem-ph{width:72px;height:72px;padding:8px;box-sizing:border-box;background:#fff;border:1px solid var(--line);mix-blend-mode:normal;transition:border-color .2s,box-shadow .2s}
.chip.chip--gem:hover .gem-ph{border-color:var(--plum)}
.chip.chip--gem.active .gem-ph{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.chip.chip--gem.active,.pdp-info .linked-group .chip.chip--gem.active{color:var(--ink);font-weight:600}
.chip.chip--gem .gem-ph--tint::after{inset:8px}
.gem-ph--tint::after{opacity:.85}
.gem-ph img{filter:contrast(1.08)}
.gem-ph--deep img{filter:url(#gem-deep)}
.gem-ph--mid img{filter:url(#gem-mid)}
.linked-group .style-tabs:has(.chip--gem){gap:12px}
@media (max-width:1199px){
  .chip.chip--gem,.chip.chip--gem:hover,.chip.chip--gem.active,.pdp-info .linked-group .chip.chip--gem,.pdp-info .linked-group .chip.chip--gem.active{width:56px;font-size:12px;padding:0}
  .chip.chip--gem .gem-ph{width:56px;height:56px;padding:5px}
  .chip.chip--gem .gem-ph--tint::after{inset:5px}
  .linked-group .style-tabs:has(.chip--gem){gap:6px}
}

/* ---- P49: the photographed stones (carat.js stoneSrc) are shown as shot — no colour wash, no extra contrast ---- */
.gem-ph--stone img{filter:none}
.chip.chip--gem .gem-ph--stone{padding:6px}
.df-shape .gem-ph--stone{width:44px;height:44px}
.df-fancy__c .gem-ph--stone{width:30px;height:30px}
.mega-shape .gem-ph--stone{width:48px;height:48px}
/* six colours (White … Black) on one row: 80px items with 10px gaps fill the 556px column at 1280+; small phones 48px */
.pdp-info .linked-group .chip.chip--gem,.pdp-info .linked-group .chip.chip--gem.active{width:80px}
.linked-group .style-tabs:has(.chip--gem){gap:10px}
@media (max-width:1199px){.pdp-info .linked-group .chip.chip--gem,.pdp-info .linked-group .chip.chip--gem.active{width:56px}.linked-group .style-tabs:has(.chip--gem){gap:6px}}
@media (max-width:820px){
  .pdp-info .linked-group .chip.chip--gem,.pdp-info .linked-group .chip.chip--gem.active{width:48px;font-size:11px}
  .chip.chip--gem .gem-ph,.chip.chip--gem .gem-ph--stone{width:48px;height:48px;padding:4px}
  .linked-group .style-tabs:has(.chip--gem){gap:5px}
}