/* 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}}