/* sunday-carat — the playbook's items in Sunday Carat's own parts: only the theme's tokens (--olive, --gold, --line,
   --paper, --ivory, --muted, --serif, --sans), its 1.4 line icons, its type scale. Generated by tools/sc/sc-build.mjs. */

/* ── header: six items in their own centred row under the logo row; Search · Account · Store left, Wishlist ·
   Bag right — the logo stays dead centre at every width (Steps 3, 5). Below 1101px: hamburger · logo · icons ── */
.sc-nav a{font-size:15px}
.sc-nav a.sc-on::after{transform:scaleX(1)}
.header-actions{align-items:center}
.sc-wish .badge{background:var(--gold)}
#header .header-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
@media(min-width:1101px){
  #header .header-inner{grid-template-areas:"l b r" "n n n";row-gap:12px;padding-bottom:12px;min-height:0}
  #header .mobile-toggle{display:none}
  #header .sc-left{grid-area:l;justify-content:flex-start}
  #header .brand{grid-area:b}
  #header .sc-right{grid-area:r;justify-content:flex-end}
  #header .sc-nav{grid-area:n;display:flex;justify-content:center;gap:38px}
}
@media(max-width:1100px){
  #header .sc-nav,#header .sc-left .sc-desk{display:none}
  #header .sc-left{justify-content:flex-start}
  #header .mobile-toggle{display:inline-flex}
  #header .header-inner{grid-template-areas:none}
}
@media(max-width:760px){.header-actions .icon-button{width:27px}}

/* ── mega: one panel per item, fade + 8px slide, content cross-fades on switch (Step 18) ── */
#header .sc-mega{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease;grid-template-columns:none;display:block}
#header .sc-mega[hidden]{display:none}
#header .sc-mega.sc-in{opacity:1;transform:none}
.sc-panel{display:grid;grid-template-columns:repeat(var(--sc-cols,3),minmax(0,1fr)) 260px;gap:40px}
.sc-panel[hidden]{display:none}
.sc-panel.sc-swap{animation:sc-fade .28s ease}
@keyframes sc-fade{from{opacity:.25}to{opacity:1}}
.sc-col .sc-links{display:grid;grid-template-columns:1fr;column-gap:24px}
.sc-col.sc-two .sc-links{grid-template-columns:1fr 1fr}
.sc-col .sc-then{margin-top:26px}
#header .sc-mega a{padding:4px 0;font-size:15px}
.sc-promo img{width:100%;aspect-ratio:1;object-fit:cover}
#header .sc-mega .sc-promo span{font-family:var(--serif);font-size:24px;display:block;margin-top:14px}
.sc-promo em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:4px}
@media(prefers-reduced-motion:reduce){#header .sc-mega{transform:none;transition:opacity .15s}.sc-panel.sc-swap{animation:none}}

/* ── announcement ticker ── */
.announcement .sc-tick{transition:opacity .35s ease}
.announcement .sc-tick.sc-out{opacity:0}

/* ── mobile menu groups ── */
.sc-mm{padding:12px 0}
.sc-mm summary{font-family:var(--serif);font-size:24px}
.sc-mm .eyebrow{margin:18px 0 6px}
.sc-mm-all{display:block;margin-top:14px;font-size:15px}
.sc-mm-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.sc-mm-links a{display:block;padding:7px 0;font-size:15px;min-height:30px}
.sc-mm-btn{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;cursor:pointer}

/* ── footer contact column ── */
.footer-grid .sc-contact,.footer-grid .sc-social{margin-top:18px}
.footer-grid .sc-contact a{font-size:15px;line-height:1.5}
.footer-grid .sc-social{display:flex;gap:18px}
.footer-grid .sc-social a{display:inline-block}

/* ── Call now (left) + back to top (right), above the platform chat widget (Step 26) ── */
.sc-call,.sc-top{position:fixed;bottom:calc(20px + var(--sc-float-lift,0px));z-index:40;background:var(--olive);color:var(--ivory);box-shadow:0 8px 20px #283c3026}
.sc-call{left:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 14px;border-radius:999px;font-size:14px;letter-spacing:.02em}
.sc-call .icon{width:18px;height:18px}
.sc-top{right:20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
.sc-top.sc-show{opacity:1;pointer-events:auto}
.sc-top .icon{width:20px;height:20px}
@media(max-width:760px){.sc-call{left:14px;bottom:14px;padding:10px 14px 10px 12px;font-size:13px}.sc-top{right:14px;bottom:calc(14px + var(--sc-float-lift,0px))}}

/* ── wordmark where a store piece has no photograph (Step 11) ── */
.sc-wordmark{container-type:inline-size;display:grid;place-content:center;justify-items:center;width:100%;height:100%;aspect-ratio:1;background:var(--paper);color:var(--olive);text-align:center}
.sc-wordmark .brand-name{font-family:var(--serif);font-size:clamp(14px,12cqi,30px);white-space:nowrap}
.sc-wordmark .brand-caption{font-size:clamp(7px,3.4cqi,10px);letter-spacing:.3em;margin-top:4px}
.sc-wordmark .brand-dot{color:var(--gold)}
.bag-line .sc-wordmark{width:95px;height:95px}

/* ── product card: name in two lines, price with compare-at, metal dots (Steps 13, 14, 15) ── */
.product-card h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;height:2.5em}
.product-bottom .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px}
.sc-was{color:var(--muted);font-size:.86em}
.sc-off{color:var(--gold);font-size:.86em;letter-spacing:.02em}
.sc-dots{display:flex;align-items:center;gap:9px;flex:none;padding:4px 4px 4px 0}
.sc-dots .metal-dot{display:block;margin:0}
.sc-dots .metal-dot.is-on{box-shadow:0 0 0 3px var(--ivory),0 0 0 4px var(--olive)}
.product-bottom{gap:12px;align-items:flex-start}

/* ── product page: chips for the store's groups, badges, 3D, design details (Steps 9, 10, 13, 14) ── */
.product-info>.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sc-group{margin:22px 0}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px}
.sc-chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 14px;border:1px solid var(--line);background:transparent;font:13px var(--sans);color:var(--olive);cursor:pointer;transition:border-color .2s,background .2s}
.sc-chip:hover{border-color:var(--gold)}
.sc-chip.is-on{border-color:var(--olive);background:var(--paper)}
.sc-chip .sc-shape{width:16px;height:16px}
.sc-more{align-self:center;font-size:12px;color:var(--muted)}
a.swatch{display:inline-block}
.sc-need{outline:1px solid var(--gold);outline-offset:2px}
.sc-3d{position:absolute;left:18px;top:18px;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:var(--ivory);border:1px solid var(--line);font-size:11px;letter-spacing:.08em;z-index:2}
.sc-3d .icon{width:16px;height:16px}
.sc-badges{list-style:none;padding:0;margin:4px 0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;border-top:1px solid var(--line);padding-top:18px}
.sc-badges li a,.sc-badges li{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.sc-badges img{width:26px;height:26px;object-fit:contain;flex:none}
.sc-spec{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:14px 0 0;font-size:14px}
.sc-spec dt{color:var(--muted)}
.sc-noimg{display:block}
.buy-row .sc-choose{flex:1}
.sc-props{font-size:12px;color:var(--muted)}

/* ── collection: shape row, numbered pages (Steps 7, 16, 17) ── */
.sc-shapes label{display:flex;align-items:center;gap:8px}
.sc-shapes .sc-shape{width:16px;height:16px}
.sc-shapes .muted{margin-left:auto;font-size:12px}
.sc-pager{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px}
.sc-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sc-pg{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);font-size:14px;padding:0 10px}
.sc-pg.is-on{background:var(--olive);color:var(--ivory);border-color:var(--olive)}
.sc-pg.sc-gap{border:0}
a.sc-pg:hover{border-color:var(--gold)}

/* ── wishlist drawer ── */
.sc-wish-q{width:100%;margin-bottom:12px}

/* store titles run 60-90 characters (the demo's were two words): same face, a size that keeps them to ~3 lines */
.product-info h1.sc-long{font-size:clamp(32px,3.4vw,50px);line-height:1.08}

/* ── ring builder (Steps 12 / 12A / 12B): the theme's builder rail, workspace, cards and detail ── */
.sc-rail a{display:flex;align-items:center;gap:10px}
.sc-railsub{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.sc-railsub a{display:inline;padding:0;border:0;text-decoration:underline}
.sc-rail>a>span:last-child{display:flex;flex-direction:column}
.sc-dws{grid-template-columns:300px minmax(0,1fr)}
.sc-rbmain{min-width:0}
.sc-filters{border:1px solid var(--line);padding:22px 24px;margin-bottom:26px;background:var(--ivory)}
.sc-ftop{display:flex;justify-content:space-between;align-items:center;gap:16px}
.sc-ftog{display:none}
.sc-fbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 34px;margin-top:18px}
.sc-fbody>.sc-fgroup:first-child,.sc-fbody>.sc-adv,.sc-fbody>[data-rb-reset]{grid-column:1/-1}
.sc-fgroup{padding:12px 0}
.sc-fgroup h3{font:11px var(--sans);letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.sc-fgroup h3 .muted{letter-spacing:0;text-transform:none;font-size:12px;color:var(--muted)}
.sc-adv{padding:12px 0}.sc-adv[open] .sc-fgroup{padding:10px 0}
.segmented-control button[aria-pressed="true"],.segmented-control button[aria-selected="true"]{background:var(--olive);color:var(--ivory);border-color:var(--olive)}
.sc-origin button,.sc-cmode button{min-height:38px;padding:8px 16px;border:1px solid var(--line);background:transparent;font:13px var(--sans);cursor:pointer}
.sc-cmode{margin-bottom:12px}
.sc-shapechips .sc-chip{min-height:36px;padding:6px 11px}
.sc-swatchdot{width:12px;height:12px;border-radius:50%;border:1px solid var(--line)}
.sc-f-black{background:#222}.sc-f-blue{background:#3d6fb6}.sc-f-brown{background:#7a5232}.sc-f-gray{background:#9a9a9a}.sc-f-green{background:#4f8a4d}.sc-f-olive{background:#7d7a3a}.sc-f-orange{background:#e08a2f}.sc-f-other{background:linear-gradient(130deg,#f2c6d6,#c9e3f2)}.sc-f-pink{background:#e8a3bd}.sc-f-red{background:#b8333a}.sc-f-violet{background:#7f5aa8}.sc-f-white{background:#fff}.sc-f-yellow{background:#f2d24e}
.sc-range{position:relative;height:30px;--lo:0%;--hi:100%}
.sc-range::before{content:'';position:absolute;left:0;right:0;top:13px;height:2px;background:var(--line)}
.sc-range::after{content:'';position:absolute;left:var(--lo);right:calc(100% - var(--hi));top:13px;height:2px;background:var(--olive)}
.sc-range input[type=range]{position:absolute;inset:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:1}
.sc-range input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--olive);cursor:pointer}
.sc-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--olive);cursor:pointer}
.sc-range input[type=range]::-webkit-slider-runnable-track{background:none}
.sc-ticks{position:absolute;left:0;right:0;top:30px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.sc-ticks span.in{color:var(--olive)}
.sc-range[data-rb-range]{margin-bottom:22px}
.sc-rangeboxes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sc-rangeboxes .field{margin:8px 0 0}
.sc-rbtop{margin-bottom:18px}
.sc-aiptitle,.sc-alltitle{margin:6px 0 16px}
.sc-alltitle{margin-top:36px}
.sc-dgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.sc-dcard{cursor:pointer}
.sc-dcard .product-photo{display:block;aspect-ratio:1;background:var(--paper)}
.sc-dcard .product-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sc-dcard h3{font:13px/1.45 var(--sans);margin-top:6px}
.sc-dcard:focus-visible{outline:1px solid var(--olive);outline-offset:4px}
.sc-360{position:absolute;left:10px;top:10px;font-size:10px;letter-spacing:.1em;padding:4px 8px;background:var(--ivory);border:1px solid var(--line)}
.sc-dnoimg{display:grid;place-content:center;justify-items:center;gap:8px;width:100%;height:100%;aspect-ratio:1;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--paper)}
.sc-dnoimg .sc-shape{width:46px;height:46px;stroke-width:.9}
.sc-dnoimg.is-big .sc-shape{width:120px;height:120px}
.sc-sk{aspect-ratio:.78;background:linear-gradient(90deg,var(--paper),var(--sand),var(--paper));background-size:200% 100%;animation:sc-sk 1.3s linear infinite}
@keyframes sc-sk{to{background-position:-200% 0}}
.sc-rbstatus{margin:24px 0;color:var(--muted)}
.sc-back{margin:0 0 18px}
.sc-dlayout{padding:0}
.sc-stage{display:grid;place-items:center}
.sc-stage video,.sc-stage iframe{width:100%;aspect-ratio:1;border:0;background:#000}
.sc-txtthumb{display:grid!important;place-items:center;font-size:11px;letter-spacing:.1em;aspect-ratio:1;border:1px solid var(--line);background:var(--paper)}
.sc-dsum{margin:20px 0}
.sc-review{grid-template-columns:1.2fr 1fr;gap:60px}
.sc-check{display:flex;align-items:center;gap:10px;font-size:14px;margin:4px 0 12px}
.sc-err{color:#8b3a2e}
#sc-engn{font-style:normal;color:var(--muted);float:right}
@media(max-width:1100px){.sc-dws{grid-template-columns:1fr;gap:28px}.sc-dws .builder-context{position:static}.sc-dws .builder-context img{max-width:220px}}
@media(max-width:760px){
  .sc-ftog{display:inline-flex}
  .sc-fbody{display:none;grid-template-columns:1fr}
  .sc-filters.is-open .sc-fbody{display:grid}
  .sc-dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sc-review{grid-template-columns:1fr;gap:28px}
  .sc-rail{gap:10px}
  .sc-rail .sc-railsub{font-size:10px}
}

/* ── store pages (Step 24), collections list, account, size guide, search suggestions (Step 23) ── */
.sc-facts .trust,.sc-plans{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.sc-facts .trust h3{font-family:var(--serif);font-size:30px}
.sc-plans>div{border:1px solid var(--line);padding:28px 22px;text-align:left}
.sc-plan-price{font-family:var(--serif);font-size:44px;color:var(--olive)!important;margin:6px 0 4px}
.sc-compare{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:auto}
.sc-compare h3{font-family:var(--serif);font-size:30px;margin-bottom:14px}
.sc-compare li{padding:10px 0;border-top:1px solid var(--line);list-style:none;font-size:15px}
.sc-compare ul{padding:0;margin:0}
.sc-cta .sc-cta-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 28px;margin-top:28px}
.sc-cta .text-link{color:var(--ivory)}
.sc-policy h2{margin-top:44px}
.sc-policy .rte p{margin-bottom:14px}
.sc-toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:30px 0;display:flex;flex-wrap:wrap;gap:6px 22px}
.sc-toc .eyebrow{flex-basis:100%;margin-bottom:6px}
.sc-toc .text-link{font-size:13px}
.sc-coll-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sc-coll-grid .category-label{align-items:center;gap:10px}
.sc-coll-grid .category-label h3{flex:1}
.sc-account .sc-ok{border:1px solid var(--line);background:var(--paper);padding:14px 16px;margin-bottom:16px}
.sc-orders .summary-line{border-bottom:1px solid var(--line);padding:12px 0}
.sc-sizes{width:100%;border-collapse:collapse;margin:20px 0 10px;font-size:14px}
.sc-sizes th,.sc-sizes td{border-bottom:1px solid var(--line);padding:9px 6px;text-align:left}
.sc-sizes th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.sc-suggest{justify-content:center;margin-top:18px}
@media(max-width:1100px){.sc-facts .trust,.sc-plans{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-coll-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.sc-facts .trust,.sc-plans{grid-template-columns:1fr}.sc-compare{grid-template-columns:1fr;gap:24px}.sc-coll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* home "Your forever shape": the navbar's ten shapes wrap inside the panel (the demo widget held two) */
.shape-widget>div.sc-shapewidget{flex-wrap:wrap;gap:8px}
.shape-widget .sc-shapewidget button{flex:0 0 auto;min-height:42px;padding:8px 12px;gap:8px;font-size:12px}
.shape-widget .sc-shapewidget .sc-shape{width:16px;height:16px;transition:transform .5s}
.shape-widget .sc-shapewidget button:hover .sc-shape{transform:rotateY(180deg)}
.sc-coll-grid>.category{min-width:0}
.sc-coll-grid .category-label{min-width:0}
.sc-coll-grid .category-label h3{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){.sc-coll-grid .category-label .small{display:none}}
#overlay .sc-mm-links a,#overlay .sc-mm-all{font:15px/1.4 var(--sans);letter-spacing:0;padding:7px 0;border:0}
#overlay .sc-mm .eyebrow{font-size:10px}

/* filters on mobile / tablet (≤1100px): choices are staged, "Show results" applies them (user, 15 Oct); desktop unchanged */
.sc-apply{display:none}
@media(max-width:1100px){
  /* the rail is taller than a tablet screen: sticky kept its lower half (Metal) out of reach until the grid ended */
  .catalog .filters{position:static}
  .sc-apply{display:block;position:sticky;bottom:0;z-index:5;margin:22px -4px 0;padding:12px 4px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,#faf7f000,var(--ivory) 22%)}
  .filters.open .sc-apply{background:linear-gradient(to bottom,#f2eee500,var(--paper) 22%)}
  .sc-apply .button{width:100%}
  .sc-apply .button.sc-dirty{box-shadow:0 0 0 2px var(--gold)}
}
/* filter counts are LIVE (sc-bridge refreshCounts): the number fills in after the page; an option with 0 pieces hides
   (user, 15 Oct: real counts, nothing static) */
.filters label .sc-n{margin-left:auto;font-size:12px;min-width:1.5em;text-align:right}
.filters label.sc-counting .sc-n:empty::after{content:'\2026'}
.filters label.sc-zero{display:none}
[data-sc-group][hidden]{display:none}
/* desktop filter rail: stays sticky (the demo's) but scrolls inside itself — it is taller than the screen, and its lower
   options (Metal) could not be reached until the grid ended (filter audit, 15 Oct) */
@media(min-width:1101px){.catalog .filters{max-height:calc(100vh - 135px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px}}

/* ring builder · diamond results: Grid (cards, default) | List toggle (user, 15 Oct) — theme parts: line rules, paper hover */
.sc-rbtop{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sc-layout{display:inline-flex;border:1px solid var(--line)}
.sc-layout button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;font-size:13px;color:var(--muted);transition:background .2s,color .2s}
.sc-layout button+button{border-left:1px solid var(--line)}
.sc-layout button.is-on{background:var(--olive);color:var(--ivory)}
.sc-layout .icon{width:16px;height:16px}
.sc-dgrid.sc-dlist{display:block}
.sc-drow{display:grid;grid-template-columns:64px 1.3fr .7fr .7fr .8fr .9fr 1fr 1fr 18px;align-items:center;gap:14px;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;transition:background .2s}
.sc-drow:not(.sc-drow-head):hover,.sc-drow:focus-visible{background:var(--paper)}
.sc-drow-head{cursor:default;padding-top:4px;padding-bottom:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--olive)}
.sc-drow-ph{width:64px;height:64px;display:grid;place-items:center;background:var(--paper);overflow:hidden}
.sc-drow-ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sc-drow-ph .sc-dnoimg{transform:scale(.6)}
.sc-drow-shape{font:500 18px/1.2 var(--serif)}
.sc-drow-shape .sc-360{position:static;display:inline-block;margin-left:6px;font-style:normal;vertical-align:middle}
.sc-drow-lab small{display:block;font-size:11px;color:var(--muted)}
.sc-drow-price{text-align:right;font-weight:500}
.sc-drow-go{color:var(--muted);font-size:20px;text-align:right}
.sc-drow-specs{display:none}
@media(max-width:900px){
  .sc-drow-head,.sc-drow>span[data-l],.sc-drow-go{display:none}
  .sc-drow{grid-template-columns:64px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 14px;padding:12px 4px}
  .sc-drow-ph{grid-row:1/3}
  .sc-drow-shape{grid-column:2;grid-row:1;align-self:end}
  .sc-drow-price{grid-column:3;grid-row:1/3}
  .sc-drow-specs{display:block;grid-column:2;grid-row:2;align-self:start;font-size:12px;color:var(--muted)}
  .sc-layout button span{display:none}
}

/* ── PDP system (sc-pdp.js) in Sunday Carat's own parts: olive / ivory / paper / gold, Cormorant + DM Sans.
   Appended to assets/sc-store.css by tools/sc/sc-build.mjs. ── */
.sc-pdp .product-gallery{min-width:0}
.sc-stage{overflow:hidden}
.sc-stage-in{position:absolute;inset:0;display:grid;place-items:center}
.sc-stage-in .product-main-image{width:100%;height:100%}
.sc-stage .sc-video{object-fit:contain;mix-blend-mode:normal;background:var(--paper)}
.sc-stage .sc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;background:#faf7f0d9;border:1px solid var(--line);font-size:22px;line-height:1;color:var(--olive);display:grid;place-items:center;transition:background .2s}
.sc-stage .sc-arrow:hover{background:var(--ivory)}
.sc-prev{left:14px}.sc-next{right:14px}
.sc-gtools{position:absolute;left:16px;top:16px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100% - 120px)}
.sc-gtabs{display:flex;background:var(--ivory);border:1px solid var(--line)}
.sc-gtabs button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-gtabs button.is-on{background:var(--olive);color:var(--ivory)}
.sc-gtabs .icon{width:14px;height:14px}
.sc-offbadge{position:absolute;right:16px;top:16px;z-index:4;background:var(--ivory);border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.sc-tryon{padding:8px 14px;border-radius:999px;background:var(--olive);color:var(--ivory);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.sc-3dframe{position:absolute;inset:0;z-index:3;background:var(--paper)}
.sc-3dframe[hidden]{display:none}
.sc-3dframe iframe,.sc-tryframe iframe{width:100%;height:100%;border:0;display:block}
.sc-stage.sc-3d-on .sc-arrow,.sc-stage.sc-3d-on .sc-offbadge,.sc-stage.sc-3d-on .photo-zoom{display:none}
.sc-tryframe{aspect-ratio:3/4;max-height:70vh;width:100%;background:var(--paper)}
.sc-thumbs button{position:relative}
.sc-play{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;color:var(--olive);background:#faf7f066}
.sc-pdp .product-info>.eyebrow{letter-spacing:.14em}
.sc-rating{font-size:13px;color:var(--muted);margin:-4px 0 0!important}
.sc-rating span{color:var(--gold);letter-spacing:2px}
.sc-pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.sc-pdp-price .sc-now{font:500 30px/1.1 var(--serif)}
.sc-save{border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;align-self:center}
.sc-pdp-note{font-size:13px;color:var(--muted);margin:-12px 0 18px!important;max-width:460px}
.sc-pdp-row{margin:20px 0}
.sc-pdp-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 11px!important}
.sc-pdp-label>span{letter-spacing:.02em;text-transform:none;color:var(--muted);font-size:14px}
.sc-help{font-size:12px;letter-spacing:.02em;text-transform:none;text-decoration:underline;text-underline-offset:3px;color:var(--olive);padding:0}
.sc-help::after{display:none}
.sc-tiles{display:flex;flex-wrap:wrap;gap:8px}
.sc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:72px;min-height:74px;padding:9px 4px;border:1px solid var(--line);font-size:11px;letter-spacing:.02em;text-align:center;transition:border-color .2s,background .2s}
.sc-tile:hover{border-color:var(--gold)}
.sc-tile.is-on{border-color:var(--olive);background:var(--paper)}
.sc-tile img{width:36px;height:36px;object-fit:contain;mix-blend-mode:multiply}
.sc-tile .sc-shape{width:26px;height:26px}
.sc-wt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;min-height:58px;padding:6px 10px;border:1px solid var(--line);color:var(--olive);transition:border-color .2s,background .2s}
.sc-wt b{font:500 21px/1 var(--serif)}
.sc-wt small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.sc-wt:hover{border-color:var(--gold)}
.sc-wt.is-on{border-color:var(--olive);background:var(--paper)}
.sc-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);flex:none}
.sc-chipimg{width:20px;height:20px;object-fit:contain;mix-blend-mode:multiply}
.sc-more-btn{font-size:12px;color:var(--olive);text-decoration:underline;text-underline-offset:3px;padding:0 6px}
.sc-pdp-inputs{margin-top:6px}
.sc-pdp-field{margin:16px 0}
.sc-pdp-field>span{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px!important;letter-spacing:.13em;text-transform:uppercase}
.sc-pdp-field>span em{font-style:normal;color:var(--muted);letter-spacing:.02em}
.sc-pdp-field small{display:block;font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
.sc-fixed{margin:0!important;font-size:15px}
.sc-qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.sc-qty button{width:44px;height:44px;font-size:18px}
.sc-qty span{min-width:30px;text-align:center}
.sc-err{color:#9a4b2f;margin:6px 0 0!important}
.sc-ship{font-size:14px;margin:18px 0 0!important}
.sc-ship small{display:block;font-size:12px;color:var(--muted)}
.sc-pdp .buy-row{margin:20px 0 14px}
.sc-pdp .sc-cta{flex:1}
.sc-next,.sc-appt{font-size:13px;color:var(--muted);margin:0 0 12px!important}
.sc-appt a{color:var(--olive);text-decoration:underline;text-underline-offset:4px}
.sc-reassure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:16px 0 0;margin:6px 0 16px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sc-reassure li::before{content:"\2713";color:var(--gold);margin-right:7px}
.sc-pdp-details{max-width:1600px;margin:auto;padding:70px 4.4vw;display:grid;grid-template-columns:1fr 1fr;gap:7.8%;border-top:1px solid var(--line)}
.sc-pdp-details h2{margin:14px 0 26px}
.sc-pdp-details h3{font-size:24px;margin-bottom:14px}
.sc-pdp-details .sc-spec{grid-template-columns:minmax(150px,auto) 1fr;gap:0;font-size:15px;margin:0}
.sc-pdp-details .sc-spec dt,.sc-pdp-details .sc-spec dd{padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.sc-about{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:22px}
.sc-edu{border-top:1px solid var(--line)}
.sc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.sc-cards>div{border-top:1px solid var(--olive);padding-top:18px}
.sc-cards h3{font-size:22px;margin-bottom:10px}
.sc-cards p{font-size:15px;color:var(--muted)}
.sc-4cs{background:var(--paper);max-width:none;padding-left:max(64px,calc((100vw - 1312px)/2));padding-right:max(64px,calc((100vw - 1312px)/2))}
.sc-guide{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 18px;font-size:15px}
.sc-guide dt{font-weight:600}.sc-guide dd{margin:0;color:var(--muted)}
.sc-pdp-bar{display:none}
.sc-pdp-toast{position:fixed;z-index:60;left:50%;bottom:26px;transform:translate(-50%,16px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:14px;background:var(--olive);color:var(--ivory);padding:12px 12px 12px 20px;box-shadow:0 8px 24px #283c3030;font-size:14px;transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px)}
.sc-pdp-toast.sc-show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sc-pdp-toast button{color:var(--ivory);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sc-pdp-toast .sc-x{text-decoration:none;font-size:18px;padding:0 6px}
@media(max-width:1100px){.sc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-pdp-details{padding:56px 35px;gap:40px}.sc-4cs{padding-left:35px;padding-right:35px}}
@media(max-width:760px){
  .sc-pdp .product-gallery{position:static}
  .sc-pdp .sc-thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .sc-pdp .sc-thumbs button{flex:none;width:64px}
  .sc-stage .sc-arrow{width:34px;height:34px;font-size:18px}.sc-prev{left:8px}.sc-next{right:8px}
  .sc-gtools{left:10px;top:10px;gap:6px;max-width:calc(100% - 90px)}.sc-gtabs button{padding:7px 9px;font-size:10px}.sc-tryon{padding:7px 11px;font-size:10px}
  .sc-offbadge{right:10px;top:10px;font-size:10px;padding:5px 8px}
  .sc-pdp-price .sc-now{font-size:26px}
  .sc-tile{width:calc((100% - 32px)/5);min-width:0}
  .sc-pdp-details{grid-template-columns:1fr;padding:46px 24px;gap:34px}
  .sc-cards{grid-template-columns:1fr;gap:22px}
  .sc-4cs{padding-left:24px;padding-right:24px}
  .sc-pdp-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;align-items:center;justify-content:space-between;gap:12px;padding:10px calc(16px + var(--sc-dock-w,0px)) calc(10px + env(safe-area-inset-bottom)) 16px;background:var(--ivory);border-top:1px solid var(--line);box-shadow:0 -6px 18px #283c3014;transform:translateY(110%);transition:transform .25s;visibility:hidden}
  .sc-pdp-bar.sc-show{transform:none;visibility:visible}
  .sc-pdp-bar>div{min-width:0}
  .sc-bar-price{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
  .sc-bar-price .sc-now{font:500 21px/1.1 var(--serif)}
  .sc-bar-price .sc-was{font-size:13px;color:var(--muted)}
  .sc-bar-meta{margin:2px 0 0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sc-pdp-bar .button{min-height:44px;padding:10px 14px;font-size:14px;flex:none;gap:8px}
  body.sc-bar-on .sc-call{bottom:calc(var(--sc-bar-h,66px) + 12px)}
  body.sc-bar-on .sc-top{bottom:calc(var(--sc-bar-h,66px) + 12px + var(--sc-float-lift,0px))}
  body.sc-bar-on .sc-pdp-toast{bottom:calc(var(--sc-bar-h,66px) + 12px)}
}

/* ── touch targets (Step 27, audit 2026-10-20): ≥ 44px tall hit areas on touch / phone, same look — invisible ::after ── */
@media (pointer:coarse),(max-width:760px){
  #header .icon-button::after,.product-card .save::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .sc-dots{gap:14px}
  .sc-dots .metal-dot{position:relative}
  .sc-dots .metal-dot::after{content:'';position:absolute;left:50%;top:50%;width:23px;height:44px;transform:translate(-50%,-50%)}
}
/* ring builder: price sort beside Grid / List (playbook F2, 2026-10-20) */
.sc-rbtop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sc-rbsort{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-left:auto}
.sc-rbsort select{font:inherit;color:var(--ink,inherit);padding:7px 10px;border:1px solid var(--line);background:transparent}
/* builder ring = setting photo + the chosen diamond as a round inset (playbook F3, 2026-10-20) */
#sc-crstage{position:relative}
.sc-ringthumb{position:relative;display:block;line-height:0}
.sc-ringthumb>img:first-child{width:100%}
.sc-dinset{position:absolute;right:6%;bottom:6%;width:34%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#fff;border:2px solid var(--ivory);box-shadow:0 4px 12px #283c3026}
#sc-crstage .sc-dinset{width:22%;right:5%;bottom:5%;border-width:3px}
/* 3D / Try On viewer: Sunday Carat cover while loading + badge over the viewer's own corner mark (playbook C4) */
.sc-vwrap{position:relative;width:100%;height:100%}
.sc-vwrap iframe{display:block;width:100%;height:100%;border:0}
.sc-3dcover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--olive);transition:opacity .4s;z-index:2}
.sc-3dcover p{font-size:13px;letter-spacing:.04em;color:var(--muted)}
.sc-vwrap.is-ready .sc-3dcover{opacity:0;pointer-events:none}
.sc-3dbadge{position:absolute;left:0;bottom:0;width:210px;height:84px;display:flex;align-items:center;padding-left:20px;background:#fff;pointer-events:none;z-index:1}
@media(max-width:760px){.sc-3dbadge{width:160px;height:64px;padding-left:14px}.sc-3dbadge .brand-name{font-size:18px}}
/* PDP photo box = the store's photo shape: every store photo is 4:3 on white (45 sampled, all five types) —
   one fixed 4:3 white box, no padding, photo filling it; thumbnails and video the same shape (playbook C3, 2026-10-20) */
.sc-pdp .sc-stage{aspect-ratio:4/3;height:auto;background:#fff}
.sc-pdp .sc-stage-in .product-main-image,.sc-pdp .sc-stage-in .sc-video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:#fff;padding:0}
.sc-pdp .sc-thumbs button{background:#fff}
.sc-pdp .sc-thumbs img{aspect-ratio:4/3;object-fit:contain;background:#fff}
/* PDP video rule: the main box video is exactly the box (a portrait video no longer grows past it), cover like a photo */
.sc-pdp .sc-stage-in video.sc-video{position:absolute;inset:0}
/* PDP video rule: the video thumb is the video's own first frame (a paused <video #t=0.1>), the click goes to the button */
.sc-pdp .sc-thumbs video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;pointer-events:none;background:#fff}
.sc-pdp .sc-3dframe{background:#fff}
/* PDP information column (playbook C6, 2026-10-20) — the theme's own tokens */
.sc-desc .product-description{margin-bottom:6px}
/* Harsh, 5 Nov: PDP description shows in full, no "…" — no clamp / Read more; the store's own paragraphs, breaks and lists keep their shape */
.sc-pdp .product-description p{margin:0 0 .75em}
.sc-pdp .product-description>:last-child,.sc-pdp .product-description p:last-child{margin-bottom:0}
.sc-pdp .product-description ul,.sc-pdp .product-description ol{margin:0 0 .75em;padding-left:1.2em}
.sc-pdp .product-description ul{list-style:disc}.sc-pdp .product-description ol{list-style:decimal}
.sc-pdp .product-description strong,.sc-pdp .product-description b{font-weight:600}
.sc-engrave{border-top:1px solid var(--line);padding:14px 0 4px;margin:6px 0 10px}
.sc-engrave summary{cursor:pointer;list-style:none;font-size:14px;display:flex;align-items:center;gap:6px}
.sc-engrave summary::-webkit-details-marker{display:none}
.sc-engrave summary::before{content:'+';font-size:16px;width:16px;color:var(--olive)}
.sc-engrave[open] summary::before{content:'−'}
.sc-engrave summary span{color:var(--muted)}
.sc-engrave .field{margin-top:12px}
.buy-row{align-items:stretch}
.buy-row .sc-qty{flex:none}
.sc-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}
.sc-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid var(--line);font-size:13px;color:inherit;background:transparent;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.sc-act:hover{border-color:var(--olive)}
.sc-act .icon{width:18px;height:18px}
.sc-act.wishlist-button{position:static;width:auto;height:auto;border-radius:0}
.sc-act .sc-act-on,.sc-act[aria-pressed="true"] .sc-act-off{display:none}
.sc-act[aria-pressed="true"] .sc-act-on{display:inline}
.sc-act[aria-pressed="true"] .icon{fill:currentColor}
.sc-pdp .sc-badges{background:var(--paper);border-top:0;padding:16px 18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:420px){.sc-act{font-size:12px;gap:6px;padding:8px 6px}}
/* card discount: a clear "Save N%" tag on the photo's top-left corner, in the theme's accent (playbook D1) */
.product-card .sc-cardsave{position:absolute;top:12px;left:12px;z-index:2;background:var(--olive);color:var(--ivory);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;line-height:1.2;pointer-events:none}
@media(max-width:760px){.product-card .sc-cardsave{top:6px;left:6px;font-size:9px;padding:4px 7px}}
/* phones: the compare-at price on its own line so every card lines up (playbook D2) */
@media(max-width:760px){.product-card .price .sc-was{flex-basis:100%;order:2}}
/* home "Rings by style" (playbook H): five tiles on desktop, a swipeable row on phones */
.sc-style-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.sc-style-tiles .category-photo{background:#fff}
@media(max-width:900px){.sc-style-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px;scrollbar-width:none}.sc-style-grid::-webkit-scrollbar{display:none}.sc-style-grid .category{flex:0 0 58%;scroll-snap-align:start}}
/* very narrow phones: the price and the metal dots stack, so five dots with their touch spacing fit the card (J, 320px) */
@media(max-width:400px){.product-card .product-bottom{flex-direction:column;align-items:flex-start;gap:8px}}
/* narrow CARDS (any screen — e.g. 3 columns at 768px give 150px cards): compare-at on its own line and the metal dots
   under the price, so every card in a row lines up and the dots stay inside (playbook D2 / J, 2026-10-20) */
.product-card{container-type:inline-size}
@container (max-width:230px){
  .product-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .product-bottom .price .sc-was{flex-basis:100%;order:2}
}
/* ── ring builder = renaissancejewel-ring-builder.md (2026-10-20), in Sunday Carat's own parts ── */
.sc-fhead{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;width:100%;font:inherit;letter-spacing:inherit;text-transform:inherit}
.sc-fhead:focus-visible{outline:1px solid var(--olive);outline-offset:3px}
@media(max-width:760px){
  /* phones: the filters are summary rows ("Shape · Oval"); a tap opens that row (spec §4.8) */
  .sc-ftog{display:none}
  .sc-fbody,.sc-filters .sc-fbody{display:grid;gap:0;margin-top:12px}
  .sc-fgroup{padding:0;border-top:1px solid var(--line)}
  .sc-fgroup h3{margin:0}
  .sc-fhead{padding:14px 0;justify-content:flex-start}
  .sc-fhead::after{content:'+';margin-left:auto;color:var(--olive);font-size:16px;line-height:1}
  .sc-fgroup.is-open .sc-fhead::after{content:'−'}
  .sc-fgroup .sc-fin{display:none;padding:0 0 16px}
  .sc-fgroup.is-open .sc-fin{display:block}
  .sc-adv .sc-fgroup:first-child{border-top:0}
}
/* list view: Photo · Shape · Carat · Color · Clarity · Cut · Lab · Cert # · Price · View → (spec §9) */
@media(min-width:901px){.sc-drow{grid-template-columns:64px 1.1fr .6fr .6fr .7fr .8fr .6fr 1.1fr .9fr 64px}}
.sc-drow-go{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sc-drow-cert{font-size:12px;color:var(--muted);word-break:break-all}
.sc-drow-ph{position:relative}
.sc-360-mini{position:absolute;right:2px;bottom:2px;font-size:8px;padding:1px 3px}
.sc-railimg{width:28px;height:28px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:6px;background:#fff}
.sc-ask{display:inline-flex;margin-top:12px;font-size:13px}
.sc-ropt{margin:14px 0 4px}
.sc-ship{font-weight:500;font-size:14px;margin:16px 0 4px}
.sc-startover{display:block;margin:14px auto 0;font-size:13px}
.sc-setp{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:400;white-space:nowrap}
/* step 1: the setting window */
.sc-setmodal{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start}
.sc-setstage{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;overflow:hidden}
.sc-setstage img{width:100%;height:100%;object-fit:contain}
.sc-setmodal .gallery-thumbs button{width:64px;background:#fff}
.sc-setmodal .gallery-thumbs img{aspect-ratio:4/3;object-fit:contain}
.sc-setinfo h3{font:400 26px/1.15 var(--serif);margin-bottom:8px}
.sc-setinfo .sc-pdp-row{margin:14px 0}
.sc-setinfo .checkout-link{width:100%;margin-top:6px}
@media(max-width:760px){.sc-setmodal{grid-template-columns:1fr;gap:18px}}
.sc-tarnish{font-size:11px;color:var(--muted);margin-left:2px}
/* payloads §3 / §6.2: search "View all", share cart */
.sc-viewall{display:inline-flex;margin-top:14px;font-size:13px}
.sc-sharebtn{display:inline-flex;margin-left:18px;font-size:14px}
.sc-sharelink{display:flex;gap:10px;margin:14px 0}
.sc-sharelink input{flex:1;min-width:0;font-size:13px}
.sc-sharenets{flex-wrap:wrap}
/* card metal swap (card-metal-swap.md): while the picked metal comes, the photo frame shimmers (the theme's sc-sk), the
   name and price dim and the picked dot pulses; a swapped card whose photo is still on its way shows the shimmer, never
   the old metal's photo */
.product-card.sc-swap .product-photo{background:linear-gradient(90deg,var(--paper),var(--sand),var(--paper));background-size:200% 100%;animation:sc-sk 1.3s linear infinite}
.product-card.sc-swap .product-photo img{opacity:.55;transition:opacity .2s}
.product-card[aria-busy] .product-meta h3,.product-card[aria-busy] .product-category,.product-card[aria-busy] .price{opacity:.5;transition:opacity .2s}
.sc-dots .metal-dot.sc-wait{animation:sc-fade .8s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.product-card.sc-swap .product-photo,.sc-dots .metal-dot.sc-wait{animation:none}}
/* ── in-page collection filters (collection-filters-rules.md, assets/sc-lf.js) ── */
.sc-lf .sc-apply{display:none}
.sc-lf-psort{display:none}
.sc-lf .filters label.sc-zero{display:none}
.sc-lf-price h3{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sc-lf-range{font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--olive);white-space:nowrap}
.sc-prail{position:relative;height:24px;margin:6px 2px 4px}
.sc-prail::before{content:'';position:absolute;left:0;right:0;top:11px;height:2px;background:var(--line)}
.sc-rail-fill{position:absolute;top:11px;height:2px;background:var(--olive)}
.sc-prail input[type=range]{position:absolute;inset:0;width:100%;height:24px;margin:0;padding:0;background:none;border:0;-webkit-appearance:none;appearance:none;pointer-events:none;accent-color:var(--olive)}
.sc-prail input[type=range]::-webkit-slider-runnable-track{height:2px;background:transparent;border:0}
.sc-prail input[type=range]::-moz-range-track{height:2px;background:transparent;border:0}
.sc-prail input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--olive);cursor:pointer}
.sc-prail input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--olive);cursor:pointer}
.sc-prail input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #a88b5055}
.sc-lf-ft{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.sc-lf .filters .sc-lf-ft label{display:block;margin:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-lf-cur{display:flex;align-items:center;gap:3px;margin-top:5px;border:1px solid var(--line);padding:0 8px;min-height:38px;font-size:13px;color:var(--olive);text-transform:none;letter-spacing:0;background:var(--ivory)}
.sc-lf .filters .sc-lf-cur input[type=number]{width:100%;height:auto;border:0;background:transparent;font:inherit;color:inherit;padding:8px 0;-moz-appearance:textfield}
.sc-lf-cur input[type=number]::-webkit-inner-spin-button,.sc-lf-cur input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sc-lf .filters .sc-lf-psort select{width:100%;max-width:none}
.sc-lf-clearall{margin-top:22px}
.sc-lf-active{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-8px 0 22px}
.sc-lf-active .sc-chip{cursor:pointer}
.sc-lf-active .text-link{font-size:12px}
.sc-pg.is-off{opacity:.3;pointer-events:none}
.sc-lf-sk{aspect-ratio:4/5}
.sc-lf-loading{grid-column:1/-1;text-align:center;margin:8px 0 0}
.sc-lf-note{margin:0 0 8px;color:var(--olive);text-align:center;width:100%}
@media(max-width:1024px){
  .sc-lf .sc-apply{display:flex;flex-wrap:wrap;align-items:center;gap:14px;position:sticky;bottom:0;z-index:5;margin:22px -4px 0;padding:12px 4px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,#faf7f000,var(--ivory) 22%)}
  .sc-lf .filters.open .sc-apply{background:linear-gradient(to bottom,#f2eee500,var(--paper) 22%)}
  .sc-lf .sc-apply .button{flex:1;width:auto}
  .sc-lf .sc-apply .button.sc-dirty{box-shadow:0 0 0 2px var(--gold)}
  .sc-lf .sc-apply .button[aria-busy]{opacity:.75}
  .sc-lf-psort{display:block}
  .sc-lf-topsort{display:none!important}
  .sc-prail input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px}
  .sc-prail{height:30px}.sc-prail::before,.sc-rail-fill{top:14px}.sc-prail input[type=range]{height:30px}
}
@media(prefers-reduced-motion:reduce){.sc-lf-sk{animation:none}}

/* a 4-column mega panel (the Gemstone columns, White Moon's header in full — user 2026-10-20): tighter gaps so two-column lists fit */
.sc-panel[style*="--sc-cols:4"]{gap:28px}
.sc-panel[style*="--sc-cols:4"] .sc-links a{white-space:nowrap}
.sc-panel[style*="--sc-cols:4"] .sc-col.sc-two .sc-links{column-gap:16px}

/* image loading shimmer, every image in the theme (assets/sc-shimmer.js adds .sc-img-wait until the image has loaded):
   the theme's paper → sand sweep behind the image, its alt text hidden meanwhile; a still tint on reduced motion */
img.sc-img-wait{background:linear-gradient(100deg,var(--paper,#eeebe2) 25%,var(--sand,#e8e3d5) 45%,#f6f3ec 52%,var(--sand,#e8e3d5) 59%,var(--paper,#eeebe2) 75%) 0 0/250% 100%;animation:sc-img-sk 1.4s linear infinite;color:transparent}
@keyframes sc-img-sk{from{background-position:100% 0}to{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){img.sc-img-wait{animation:none;background:var(--paper,#eeebe2)}}
/* the in-page filters hide parts with [hidden] (Clear all with nothing chosen, an empty group) — the theme's
   .text-link / group display rules must not show them again */
.sc-lf [hidden]{display:none!important}
/* signed in: "Hi, <first name>" beside the account icon (header colour, one line, long names cut with …) */
#header .icon-button.sc-acct{width:auto;gap:7px;padding-right:2px}
#header .sc-hello{font-size:13px;letter-spacing:.02em;line-height:1;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
/* 320px: an editorial block's column may not grow past the section for a long button ("Create an engagement ring ↗︎"
   on About made the page 22px too wide, re-audit 2026-10-20) — the column stays inside, the button text wraps */
@media(max-width:760px){.editorial{grid-template-columns:minmax(0,1fr)}.editorial>*{min-width:0}.editorial-copy .button{max-width:100%;white-space:normal;flex-wrap:wrap;text-align:left}}
/* footer socials as icons (user, 2026-10-20): 44px tap areas, the footer's own colour, gold on hover */
.sc-social{gap:6px;margin-left:-10px}
.sc-social a{display:inline-grid;place-items:center;width:44px;height:44px;color:inherit;opacity:.9;transition:color .2s,opacity .2s}
.sc-social a:hover,.sc-social a:focus-visible{color:var(--gold);opacity:1}
.sc-social .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sc-social .icon circle[r=".6"]{fill:currentColor}
/* back to top: LEFT, just above "Call now" (user, 2026-10-20) — the chat launcher keeps the right-hand corner */
.sc-top{left:20px;right:auto;bottom:calc(20px + var(--sc-call-h,46px) + 12px)}
@media(max-width:760px){.sc-top{left:14px;right:auto;bottom:calc(14px + var(--sc-call-h,42px) + 10px)}}
body.sc-bar-on .sc-top{left:14px;right:auto;bottom:calc(var(--sc-bar-h,66px) + 12px + var(--sc-call-h,42px) + 10px)}
/* CONTACT-HIDDEN (contact-number-address-hide.md, 2026-11-03): no "Call now" while sc-store.js SHOW_CONTACT is false, so back to top takes its corner */
html.sc-nocall .sc-top{bottom:20px}
@media(max-width:760px){html.sc-nocall .sc-top{bottom:14px}}
html.sc-nocall body.sc-bar-on .sc-top{bottom:calc(var(--sc-bar-h,66px) + 12px)}
/* back to top keeps a fine ivory ring, so it reads over the olive footer as well as light pages */
.sc-top{box-shadow:0 0 0 1px #f8f6ef66,0 8px 20px #283c3026}
/* the price rail while the chosen metal's prices load: dimmed and still, "Loading prices…" in place of the range */
.sc-lf-pwait .sc-prail,.sc-lf-pwait .sc-lf-ft{opacity:.4;pointer-events:none}
.sc-lf-pwait .sc-lf-range{color:var(--muted);animation:sc-fade .8s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.sc-lf-pwait .sc-lf-range{animation:none}}
/* "I don't know my ring size" (user, 2026-10-21): a checkbox under the size list, 44px tall row, the theme's olive tick */
.sc-dontknow{display:flex;align-items:center;gap:10px;min-height:44px;margin:-6px 0 2px;font-size:14px;color:var(--olive);cursor:pointer}
.sc-dontknow input{width:18px;height:18px;margin:0;accent-color:var(--olive);flex:none}
.sc-pdp-field select:disabled{opacity:.45;cursor:not-allowed}
.sc-size-note{display:block;margin:0 0 14px;color:var(--muted)}

/* builder step bar (2026-10-21): each step is a block — its link (number + name) and, under it, the chosen piece's
   photo, price and Change | View as separate links (they used to sit INSIDE the step link; browsers split nested links,
   which threw the 3-column bar apart) */
.sc-rail .sc-step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;gap:6px}
.sc-rail .sc-step>a{width:100%}
.sc-rail .sc-step.active>a{border-color:var(--olive);font-weight:600}
.sc-rail .sc-step .sc-railsub{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:0}
.sc-rail .sc-step .sc-railsub a{display:inline;width:auto;padding:0;border:0;font-weight:400}

/* .sc-arrow is also the pager's ‹ › (builder diamonds, collections): the photo arrows' absolute placement is scoped to
   the gallery stage above, so a pager arrow stays in its row (it used to float over the builder's step bar — 2026-10-21) */
.sc-rail .sc-step .sc-railsub{flex-direction:column;gap:3px}
.sc-railprice{display:inline-flex;align-items:center;gap:6px;color:var(--olive);font-size:12px}
.sc-railprice .sc-railimg{margin:0}
.sc-raillinks{font-size:11px;color:var(--muted)}
/* builder fancy colours: a faceted diamond tinted in the colour (user, 2026-10-21) instead of a dot */
.sc-gem{width:17px;height:17px;flex:none;display:block}
.sc-gem .g{fill:currentColor;stroke:#283c3066;stroke-width:.9;stroke-linejoin:round}
.sc-gem .f{fill:none;stroke:#ffffffb3;stroke-width:.8;stroke-linejoin:round}
.sc-gem.sc-f-black{color:#222}.sc-gem.sc-f-blue{color:#3d6fb6}.sc-gem.sc-f-brown{color:#7a5232}.sc-gem.sc-f-gray{color:#9a9a9a}
.sc-gem.sc-f-green{color:#4f8a4d}.sc-gem.sc-f-olive{color:#7d7a3a}.sc-gem.sc-f-orange{color:#e08a2f}.sc-gem.sc-f-pink{color:#e8a3bd}
.sc-gem.sc-f-red{color:#b8333a}.sc-gem.sc-f-violet{color:#7f5aa8}.sc-gem.sc-f-yellow{color:#f2d24e}
.sc-gem.sc-f-white{color:#fff}.sc-gem.sc-f-white .g{stroke:#283c30a6}.sc-gem.sc-f-white .f{stroke:#283c3040}
.sc-gem.sc-f-other .g{fill:url(#sc-gem-other)}
.sc-gem{background:none!important;border:0!important}
/* builder stone detail — thumbnail row (user, 2026-10-21 "fix the UI"): photo and text thumbs one size and one frame;
   text thumbs = line icon + small label; the certificate link (an <a>) no longer shrinks; the row scrolls, never wraps */
.sc-dlayout .gallery-thumbs{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.sc-dlayout .gallery-thumbs>*{flex:none;width:74px;height:74px;padding:0;border:1px solid var(--line);background:#fff;box-sizing:border-box;cursor:pointer;transition:border-color .2s;color:var(--olive);text-decoration:none}
.sc-dlayout .gallery-thumbs>*:hover{border-color:var(--muted)}
.sc-dlayout .gallery-thumbs>.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.sc-dlayout .gallery-thumbs img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;display:block}
.sc-dlayout .gallery-thumbs .sc-txtthumb{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:auto;background:var(--paper);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.sc-dlayout .sc-txtthumb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
@media(max-width:760px){.sc-dlayout .gallery-thumbs>*{width:62px;height:62px}.sc-dlayout .sc-txtthumb svg{width:18px;height:18px}}
/* collection filter: a metal the listing has, with 0 under the other filters — shown, dimmed, not tickable (user, 2026-10-21) */
.sc-lf .filters label.sc-none{opacity:.45;cursor:default}
.sc-lf .filters label.sc-none input{cursor:default}
/* home tennis section: the light travels along the bracelet in the photo with "Trace a little light" (user, 2026-10-21;
   demo/widgets.js mountTennis). .tennis-light = the photo's drawn box; --x = the light's place in % of its width */
.tennis-image{position:relative}
.tennis-light{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;--x:50;opacity:0;transition:opacity .6s ease}
.tennis-light.is-on{opacity:1}
/* the sheen: a soft band of light over the stone row only (46.5–56% of the photo's height), brightening what it crosses */
.tennis-light .tl-sheen{position:absolute;top:var(--sy,46.5%);height:var(--sh,9.5%);width:11%;left:calc(var(--x) * 1% - 5.5%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0));mix-blend-mode:overlay;filter:blur(1px);transition:left .12s linear}
.tennis-light.is-warm .tl-sheen{background:linear-gradient(90deg,rgba(255,236,190,0),rgba(255,240,205,.95) 50%,rgba(255,236,190,0))}
/* the stars: one main ON the nearest stone (--sx centre, --sw width, from widgets.js STONES), four small around it */
.tennis-light .tl-star{position:absolute;top:var(--ty,51.2%);aspect-ratio:1;transform:translate(-50%,-50%);transition:left .12s linear}
.tennis-light .tl-star svg{display:block;width:100%;height:100%;fill:#fff}
.tennis-light .tl-main{width:calc(var(--sw,5) * 1%);left:calc(var(--sx,50) * 1%);transition:left .16s ease-out,width .16s ease-out}
.tennis-light .tl-main svg{animation:sc-twinkle 1.6s ease-in-out infinite}
.tennis-light .tl-main.is-flash svg{animation:sc-flash .5s ease-out,sc-twinkle 1.6s ease-in-out .5s infinite}
.tennis-light .tl-sat{width:calc(var(--sz) * var(--sw,5) * 1%);left:calc(var(--sx,50) * 1% + var(--dx) * var(--sw,5) * .5%);top:calc(var(--ty,51.2%) + var(--dy) * 1.6%);transition:left .16s ease-out}
.tennis-light .tl-sat svg{opacity:0;animation:sc-glimmer 1.5s ease-in-out var(--d) infinite}
.tennis-light.is-cool .tl-main{filter:drop-shadow(0 0 1px rgba(60,66,72,.5)) drop-shadow(0 0 6px rgba(205,228,255,.95)) drop-shadow(0 0 14px rgba(255,255,255,.9))}
.tennis-light.is-warm .tl-main{filter:drop-shadow(0 0 2px rgba(168,139,80,.85)) drop-shadow(0 0 9px rgba(222,186,104,.75))}
/* a little fire on the small glints */
.tennis-light .tl-sat:nth-of-type(2){filter:drop-shadow(0 0 3px rgba(255,170,205,.95))}
.tennis-light .tl-sat:nth-of-type(3){filter:drop-shadow(0 0 3px rgba(150,205,255,.95))}
.tennis-light .tl-sat:nth-of-type(4){filter:drop-shadow(0 0 3px rgba(255,232,150,.95))}
.tennis-light .tl-sat:nth-of-type(5){filter:drop-shadow(0 0 3px rgba(185,255,220,.95))}
@keyframes sc-twinkle{0%,100%{transform:scale(.72) rotate(0);opacity:.8}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes sc-flash{0%{transform:scale(1.35) rotate(0);opacity:1}100%{transform:scale(.8) rotate(45deg);opacity:.9}}
@keyframes sc-glimmer{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(30deg)}70%{opacity:.2;transform:scale(.6) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.tennis-light .tl-sheen,.tennis-light .tl-star{transition:none}.tennis-light .tl-star svg,.tennis-light .tl-main.is-flash svg{animation:none;opacity:1;transform:scale(.85)}.tennis-light .tl-sat{display:none}}
/* atelier "From idea to possibility": the photo itself drags the reveal (demo/widgets.js mountAtelier; user, 2026-10-21) */
.atelier-reveal-stage.is-draggable{cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.atelier-reveal-stage.is-draggable img{-webkit-user-drag:none;pointer-events:none}
.atelier-reveal-stage .reveal-divider i{transition:transform .2s ease,box-shadow .2s ease}
.atelier-reveal-stage.is-draggable:hover .reveal-divider i,.atelier-reveal-stage.is-dragging .reveal-divider i{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 1px #283c3030,0 4px 14px rgba(40,60,48,.18)}
/* Journal (user, 2026-10-21): the store's articles — card excerpt; the article page's eyebrow, lede, cover and body */
.sc-journal .journal-card{display:flex;flex-direction:column}
.sc-journal-ex{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-journal .journal-photo{background:#fff}
.sc-journal .journal-photo img{object-fit:contain}
.sc-article{max-width:760px}
.sc-article .eyebrow{margin:18px 0 10px}
.sc-article h1{margin-bottom:16px}
.sc-article p.sc-article-lede{font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--olive);margin:0 0 28px}
.sc-article-cover{margin:0 0 36px;background:#fff;aspect-ratio:4/3;max-height:520px;width:100%;display:grid;place-items:center;overflow:hidden}
.sc-article-cover img{width:100%;height:100%;object-fit:contain}
.sc-article .rte h2{font-size:30px;margin:38px 0 12px}
.sc-article .rte p{margin:0 0 16px}
.sc-article .rte ul{margin:0 0 18px;padding-left:20px}
.sc-article .rte li{margin:0 0 8px;line-height:1.8}
.sc-article .rte a{color:var(--olive);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.sc-article .rte a:hover{text-decoration-color:var(--olive)}
.sc-article .rte p,.sc-article .rte li{font-size:17px}
@media(max-width:760px){.sc-article p.sc-article-lede{font-size:20px}.sc-article .rte h2{font-size:25px}}
/* header menu: the shape's line drawing beside each "Shop by Shape" link (user, 2026-10-21) */
.sc-shapelink{display:inline-flex!important;align-items:center;gap:9px}
.sc-navshape{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;opacity:.75;transition:opacity .2s ease,transform .2s ease}
.sc-shapelink:hover .sc-navshape,.sc-shapelink:focus-visible .sc-navshape{opacity:1;transform:scale(1.1);color:var(--gold)}
/* collection header (user, 2026-10-21 "too much empty space"): the intro and the feature photo share the width — the
   photo takes the right half instead of a 300–340px strip at the far edge, and the band is shorter */
@media(min-width:761px){
  .collection-header{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:4vw;align-items:center;min-height:0}
  .collection-header .page-intro{padding:38px 0 40px}
  .collection-header .breadcrumb{margin-bottom:22px}
  .collection-feature{height:300px;max-height:none;width:100%;justify-self:stretch;padding:0 0 26px}
  .collection-feature img{object-position:center}
  .collection-feature>span{bottom:4px}
}
@media(min-width:761px) and (max-width:1100px){
  .collection-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .collection-feature{height:240px}
}
/* the header's three pieces */
.collection-feature.sc-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6vw;align-items:center}
.collection-feature.sc-trio>a{display:block;height:100%;min-height:0}
.collection-feature.sc-trio img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s ease}
.collection-feature.sc-trio>a:hover img{transform:scale(1.04)}
@media(min-width:761px){.collection-feature.sc-trio{height:260px}}
@media(max-width:760px){.collection-feature.sc-trio{display:block}.collection-feature.sc-trio>a:not(:first-child){display:none}}
/* search bar under the header row (user, 2026-10-23 "like White Moon"; sc-store.js sbOpen) */
.sc-sveil{position:fixed;left:0;right:0;bottom:0;z-index:58;background:rgba(40,60,48,.32);opacity:0;transition:opacity .18s ease}
html.sc-searching .sc-sveil{opacity:1}
html.sc-searching{overflow:hidden}
.sc-sbar{position:fixed;left:0;right:0;z-index:59;background:var(--ivory);color:var(--olive);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(40,60,48,.12);max-height:calc(100vh - 120px);overflow:auto;opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}
.sc-sbar.sc-in{opacity:1;transform:none}
.sc-sb-row{max-width:1100px;margin:0 auto;padding:22px 24px 0;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--olive)}
.sc-sb-ic svg{width:20px;height:20px}
#sc-sb-field{flex:1;min-width:0;border:0;background:none;outline:0;font-family:var(--serif);font-size:30px;line-height:1.2;padding:8px 0 14px;color:var(--olive)}
#sc-sb-field::placeholder{color:var(--muted);opacity:.8}
#sc-sb-field::-webkit-search-cancel-button{display:none}
.sc-sb-go{appearance:none;border:0;background:none;padding:4px 0;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);border-bottom:1px solid var(--gold);cursor:pointer}
.sc-sb-x{flex:none}
.sc-sb-panel{max-width:1100px;margin:0 auto;padding:0 24px}
.sc-sb-panel:not(:empty){padding-top:22px;padding-bottom:26px}
.sc-sb-panel.sc-busy{opacity:.55;transition:opacity .2s}
.sc-sb-hint,.sc-sb-none{margin:0;font-size:14px;color:var(--muted)}
.sc-sb-k{margin:0 0 14px}
.sc-sb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.sc-sb-card{display:flex;flex-direction:column;gap:8px;color:var(--olive);text-decoration:none}
.sc-sb-ph{display:grid;place-items:center;aspect-ratio:1;background:#fff;border:1px solid var(--line);overflow:hidden}
.sc-sb-ph img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
.sc-sb-card:hover .sc-sb-ph img{transform:scale(1.05)}
.sc-sb-n{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-sb-n b,.sc-sb-chip b{font-weight:600}
.sc-sb-pr{font-family:var(--serif);font-size:19px}
.sc-sb-cols{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.sc-sb-chips{display:flex;flex-wrap:wrap;gap:10px}
.sc-sb-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--olive);text-decoration:none;transition:border-color .2s}
.sc-sb-chip:hover{border-color:var(--gold)}
.sc-sb-chip .sc-sb-ar{color:var(--gold)}
.sc-sb-all{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);text-decoration:none}
.sc-sb-all:hover{color:var(--gold)}
@media(max-width:900px){.sc-sb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.sc-sb-row{padding:14px 16px 0;gap:10px}#sc-sb-field{font-size:22px;padding-bottom:10px}.sc-sb-go{display:none}.sc-sb-panel{padding:0 16px}.sc-sb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sc-sbar{max-height:calc(100vh - 80px)}}
@media(prefers-reduced-motion:reduce){.sc-sbar,.sc-sveil{transition:none}}
/* colour icons (user, 2026-10-24; SC.metalIcon / diamondIcon / gemstoneIcon in sc-bridge.js): header menu, product page
   chips, ring builder */
.sc-ico{display:inline-block;flex:none;width:16px;height:16px;vertical-align:-3px}
.sc-msw{border-radius:50%;border:1px solid rgba(40,60,48,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.sc-dia .g,.sc-gst .g{fill:currentColor;stroke:rgba(40,60,48,.5);stroke-width:.9;stroke-linejoin:round}
.sc-dia .f,.sc-gst .f{fill:none;stroke:rgba(255,255,255,.75);stroke-width:.8;stroke-linejoin:round}
.sc-shp{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.sc-shapelink .sc-ico{width:15px;height:15px;opacity:.95}
.sc-shapelink .sc-msw{width:13px;height:13px}
.sc-cmode button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.sc-cmode .sc-gem{width:16px;height:16px}
/* real diamond photos for shapes and diamond colours (user, 2026-10-24; shapeIcon in sc-store.js, SC.diamondPhoto in
   sc-bridge.js, assets/dia/*.webp): a small rounded photo tile, sized a little larger than the line icons it replaces */
img.sc-dimg{display:inline-block;flex:none;object-fit:cover;border-radius:4px;background:#d3d4d6;vertical-align:middle;box-shadow:0 0 0 1px rgba(40,60,48,.12)}
img.sc-dimg.sc-navshape{width:22px;height:22px;opacity:1}
.sc-shapelink img.sc-dimg.sc-ico{width:20px;height:20px}
img.sc-dimg.sc-shape{width:26px;height:26px}
.sc-chip img.sc-dimg,.sc-chip img.sc-dimg.sc-shape,.sc-chip img.sc-dimg.sc-ico{width:24px;height:24px}
img.sc-dimg.sc-gem{width:22px;height:22px}
.sc-cmode img.sc-dimg{width:20px;height:20px}
.sc-tile img.sc-dimg{width:44px;height:44px;border-radius:6px}
.sc-shapelink:hover img.sc-dimg,.sc-shapelink:focus-visible img.sc-dimg{transform:scale(1.08);transition:transform .2s ease}
.sc-tile img.sc-dimg{mix-blend-mode:normal;object-fit:cover}
/* shimmer, stronger (user, 2026-10-24 "shimmer in the entire theme, before the image is loaded"): a clearer sand → light
   sweep that reads on the ivory pages and the olive footer alike; images drawn without a height get a 4:3 box while they
   load (sc-shimmer.js), so their shimmer shows instead of a 0-height gap; mix-blend photos keep the sweep visible */
img.sc-img-wait{background-image:linear-gradient(100deg,#e6dfd0 20%,#efe9dd 38%,#fbf9f4 50%,#efe9dd 62%,#e6dfd0 80%)!important;background-size:250% 100%!important;background-repeat:no-repeat!important;background-color:#e6dfd0!important;animation:sc-img-sk 1.25s linear infinite!important;color:transparent!important;mix-blend-mode:normal!important;border-radius:inherit}
img.sc-img-wait[alt]{font-size:0}
@media(prefers-reduced-motion:reduce){img.sc-img-wait{animation:none!important;background:#ebe5d8!important}}

/* collection description (collection-description-rule.md, Nainesh 2026-10-22; snippets/sc-col-desc + cdPlace in sc-store.js):
   intro under the title (lede size, ~560px); after the pieces a full-width band — Buying guide (sticky index i. ii. iii. |
   sections) and FAQ (title | accordion, gold + turning to ×); one column at ≤900px */
.sc-cd-pre{display:none}
.sc-cd-intro{max-width:560px;font-size:15px;line-height:1.8;color:var(--olive)}
.sc-cd-intro p{margin:0 0 10px}
.sc-cd-intro p:last-child{margin-bottom:0}
.sc-cd-intro a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.sc-cd-more{border-top:1px solid var(--line);padding:104px 0;background:var(--ivory)}
.sc-cd-in{max-width:1800px;margin:0 auto;padding:0 4.4vw;display:flex;flex-direction:column;gap:96px}
.sc-cd-guide,.sc-cd-faq{display:grid;grid-template-columns:340px minmax(0,1fr);gap:6vw;align-items:start}
.sc-cd-toc{position:sticky;top:150px}
.sc-cd-kick{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sc-cd-big{display:block;font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.02;margin:0;color:var(--olive)}
.sc-cd-big em{font-style:italic}
.sc-cd-faq .sc-cd-big{font-size:40px}
.sc-cd-toc ol{list-style:none;margin:30px 0 0;padding:0;counter-reset:cd;border-top:1px solid var(--line)}
.sc-cd-toc li{counter-increment:cd;border-bottom:1px solid var(--line)}
.sc-cd-toc li a{display:flex;gap:14px;padding:13px 0;font-size:14px;line-height:1.45;color:var(--olive);text-decoration:none}
.sc-cd-toc li a::before{content:counter(cd,lower-roman) '.';min-width:26px;font-family:var(--serif);font-style:italic;color:var(--gold)}
.sc-cd-toc li a:hover{color:var(--gold)}
.sc-cd-s{border-top:1px solid var(--line);padding:30px 0 34px}
.sc-cd-s:first-child{border-top:0;padding-top:0}
.sc-cd-s h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.15;margin:0 0 14px;scroll-margin-top:170px;color:var(--olive)}
.sc-cd-tx{font-size:15px;line-height:1.85;color:var(--olive);max-width:720px}
.sc-cd-tx p{margin:0 0 12px}
.sc-cd-tx ul,.sc-cd-tx ol{margin:0 0 12px;padding-left:20px}
.sc-cd-tx li{margin-bottom:6px}
.sc-cd-tx a,.sc-cd-a a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.sc-cd-qs{border-top:1px solid var(--line)}
.sc-cd-qs details{border-bottom:1px solid var(--line)}
.sc-cd-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--serif);font-size:23px;line-height:1.3;color:var(--olive)}
.sc-cd-qs summary::-webkit-details-marker{display:none}
.sc-cd-qs summary::after{content:'+';flex:none;font-family:var(--sans,inherit);font-size:22px;font-weight:300;color:var(--gold);transition:transform .25s ease}
.sc-cd-qs details[open] summary::after{transform:rotate(45deg)}
.sc-cd-qs summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sc-cd-a{padding:0 40px 24px 0;font-size:15px;line-height:1.85;color:var(--olive)}
.sc-cd-a p{margin:0 0 10px}
@media(max-width:900px){
  .sc-cd-more{padding:72px 0}
  .sc-cd-in{padding:0 23px;gap:64px}
  .sc-cd-guide,.sc-cd-faq{grid-template-columns:1fr;gap:28px}
  .sc-cd-toc{position:static}
  .sc-cd-big{font-size:40px}
  .sc-cd-faq .sc-cd-big{font-size:32px}
  .sc-cd-s h2{font-size:27px}
  .sc-cd-qs summary{font-size:20px}
}
/* "Protect this item" (protect-this-item-rule.md; assets/sc-care.js): the care box under each piece on the bag page,
   the drawer's "Protected by …" line, the busy checkout while a plan is being written */
.bag-line .sc-pc{grid-column:1/-1}
.sc-pc{display:flex;flex-direction:column;gap:16px;padding:24px;margin-top:6px;background:#fff;border:1px solid var(--line);min-width:0}
.sc-pc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sc-pc-t{display:flex;align-items:center;gap:12px;font:400 26px/1.1 var(--serif);color:var(--olive)}
.sc-pc-sh{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--olive);color:var(--ivory)}
.sc-pc svg,.sc-pc-note svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.sc-pc-sh svg{width:17px;height:17px}
.sc-pc-lk{font-size:13px;color:var(--olive);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.sc-pc-s{margin:-6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.sc-pc-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:8px}
.sc-pc-o{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:30px 10px 20px;background:#fff;color:var(--olive);border:1px solid var(--line);cursor:pointer;text-align:center;font:inherit;transition:border-color .2s,background .2s}
.sc-pc-o:hover{border-color:var(--muted)}
.sc-pc-o.on{border-color:var(--olive);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--olive)}
.sc-pc-o:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sc-pc-r{position:absolute;top:12px;left:12px;width:14px;height:14px;border:1px solid var(--muted);border-radius:50%}
.sc-pc-o.on .sc-pc-r{border-color:var(--olive);background:var(--olive);box-shadow:inset 0 0 0 3px #fff}
.sc-pc-i{width:26px;height:26px;color:var(--gold)}
.sc-pc-n{font-size:13px;letter-spacing:.04em}
.sc-pc-p{font:400 28px/1 var(--serif)}
.sc-pc-u{font-size:11px;color:var(--muted)}
/* P80: the price for one piece under the line's price, when the piece's quantity is above 1 ("4 × $249") */
.sc-pc-x{font-size:11px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere;max-width:100%}
.sc-pc-top{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 10px;background:var(--gold);color:#fff;font-size:9px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.sc-pc-b{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);background:var(--ivory)}
.sc-pc-bt{display:flex;align-items:center;gap:8px;font:400 19px/1.2 var(--serif)}
.sc-pc-bt svg{width:16px;height:16px;color:var(--gold);stroke-width:1.8}
.sc-pc-bl{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:14px}
.sc-pc-bl li{display:flex;gap:8px}
.sc-pc-bl li::before{content:'';flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--gold)}
.sc-pc-f{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)}
.sc-pc-f span::before{content:'\2713\00a0';color:var(--gold)}
.sc-pc-tot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.sc-pc-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--sand);font-size:12px}
.sc-pc-badge svg{width:14px;height:14px}
.sc-pc-badge.off{background:var(--paper);color:var(--muted)}
.sc-pc-it{display:flex;gap:14px;align-items:baseline;font-size:13px;color:var(--muted)}
.sc-pc-it b{font:400 24px/1 var(--serif);color:var(--olive)}
.sc-pc-note{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)}
.sc-pc-note svg{width:13px;height:13px;color:var(--gold)}
.sc-pc-note b{font-weight:500;color:var(--olive)}
html.sc-pc-busy a[href="/checkout"]{opacity:.7;cursor:progress}
@media(max-width:820px){.sc-pc{padding:18px 14px}.sc-pc-g{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-pc-bl{grid-template-columns:1fr}.sc-pc-t{font-size:22px}}
/* page placeholders (layout/theme.liquid; user 2026-10-24): before the design draws the header, the page and the footer,
   shimmering blocks in their places — the same sand → light sweep the images use; the footer's on its olive ground */
.sc-sk{display:block;border-radius:3px;background:linear-gradient(100deg,#e6dfd0 20%,#efe9dd 38%,#fbf9f4 50%,#efe9dd 62%,#e6dfd0 80%) 0 0/250% 100%;animation:sc-img-sk 1.25s linear infinite}
.sc-sk-head{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(3,22px) 1fr repeat(2,22px);align-items:center;gap:18px;padding:24px 64px 18px}
.sc-sk-ic{width:22px;height:22px;border-radius:50%}
.sc-sk-head .sc-sk-logo{justify-self:center;width:200px;height:34px}
.sc-sk-nav{grid-column:1/-1;display:flex;justify-content:center;gap:28px;padding-top:6px}
.sc-sk-nav .sc-sk{width:110px;height:12px}
.sc-sk-main{max-width:1440px;margin:auto;padding:70px 64px 90px;min-height:70vh}
.sc-sk-kick{width:150px;height:10px;margin-bottom:22px}
.sc-sk-h1{width:min(560px,80%);height:56px;margin-bottom:20px}
.sc-sk-line{width:min(380px,70%);height:12px;margin-bottom:12px}
.sc-sk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:46px}
.sc-sk-card{aspect-ratio:4/5;border-radius:0}
.sc-sk-foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding:68px 4.4vw 60px;background:var(--olive,#283c30)}
.sc-sk-foot .sc-sk{background:linear-gradient(100deg,#34493c 20%,#3d5245 38%,#4a6052 50%,#3d5245 62%,#34493c 80%) 0 0/250% 100%;margin-bottom:14px}
.sc-sk-foot .sc-sk-logo{width:180px;height:30px;margin-bottom:22px}
.sc-sk-foot .sc-sk-kick{width:90px}
@media(max-width:760px){.sc-sk-head{grid-template-columns:22px 22px 1fr 22px 22px;padding:14px 18px}.sc-sk-head .sc-sk-ic:nth-child(3){display:none}.sc-sk-head .sc-sk-logo{width:150px;height:28px}.sc-sk-nav{display:none}.sc-sk-main{padding:40px 23px 60px}.sc-sk-h1{height:40px}.sc-sk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sc-sk-foot{grid-template-columns:1fr 1fr;padding:46px 24px}}
@media(prefers-reduced-motion:reduce){.sc-sk{animation:none}}
/* responsive pass (user, 2026-10-24 "completely responsive on every device"): measured every page at 320 / 360 / 375 /
   390 / 414 / 600 / 768 / 820 / 1024 / 1180 / 1280 / 1366 / 1440 / 1920 — the only spill was /about's 59px "conversation."
   at 320. Big serif headings scale with the screen on small phones and long words wrap; the page itself never scrolls
   sideways (clip keeps position:sticky working, unlike hidden) */
html,body{overflow-x:clip}
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:420px){.editorial-copy h2,.page-intro h1,.info-page h1{font-size:clamp(34px,12.5vw,56px)}}
img,video,iframe{max-width:100%}
/* "See diamonds" (ring builder) — filters collect, one search on the button (user, 2026-10-24); the list dims until then */
.sc-see{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sc-see .sc-see-go{min-width:200px}
.sc-see.is-pending .sc-see-go{box-shadow:0 0 0 3px rgba(168,139,80,.35)}
.sc-see-note{flex-basis:100%;order:3;margin:0;color:var(--muted)}
#sc-rbgrid.sc-stale{opacity:.45;filter:grayscale(.4);transition:opacity .2s ease,filter .2s ease;pointer-events:none}
@media(max-width:760px){.sc-see{position:sticky;bottom:0;z-index:3;margin:16px -16px 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--ivory);box-shadow:0 -10px 24px rgba(40,60,48,.08)}.sc-see .sc-see-go{flex:1}}
/* collection filters wait for "See N pieces" on desktop too (sc-lf.js, user 2026-10-24): the button bar shows at every
   width — on desktop it stays at the foot of the filter column while the column scrolls */
@media(min-width:1025px){
  .sc-lf .sc-apply{display:flex;flex-wrap:wrap;align-items:center;gap:12px;position:sticky;bottom:0;z-index:5;margin:22px 0 0;padding:14px 0 16px;background:linear-gradient(to bottom,#f8f6ef00,var(--ivory) 24%)}
  .sc-lf .sc-apply .button{flex:1;width:auto}
  .sc-lf .sc-apply .button.sc-dirty{box-shadow:0 0 0 2px var(--gold)}
  .sc-lf .sc-apply .button[aria-busy]{opacity:.75}
}
/* phone menu: each section opens on its submenus with, first, the link the desktop menu item itself goes to — a clear
   full-width row (user, 2026-10-24) */
#overlay .sc-mm-all{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px;padding:13px 16px;border:1px solid var(--olive);background:var(--olive);color:var(--ivory);font:500 14px/1.3 var(--sans);letter-spacing:.02em}
#overlay .sc-mm-all span{font-size:16px}
#overlay .sc-mm[open] > summary span{transform:rotate(45deg);display:inline-block;transition:transform .2s ease}
@media(max-width:760px){.sc-see{padding-right:84px}.sc-lf .sc-apply{padding-right:84px}} /* the chat bubble sits bottom-right — keep the button clear of it */
/* The Sunday Letter envelope (footer newsletter; demo/widgets.js mountNewsletter, user 2026-10-24): a button — it floats
   gently, the letter peeks out now and then, it opens on hover / focus, and a tap opens it, lifts the letter with a small
   gold sparkle and puts the cursor in the email field. Reduced motion: no float, no peek */
button.letter-widget{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;animation:sc-env-float 4.2s ease-in-out infinite}
button.letter-widget:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:2px}
button.letter-widget .letter-sheet{animation:sc-env-peek 6s ease-in-out 1.5s infinite}
.newsletter:not(.letter-open) button.letter-widget:hover .envelope-flap{transform:rotateX(180deg);z-index:1}
.newsletter:not(.letter-open) button.letter-widget:hover .letter-sheet{animation:none;transform:translateY(-14px)}
.letter-open button.letter-widget .letter-sheet,.letter-sent button.letter-widget .letter-sheet{animation:none}
button.letter-widget::after{content:'\2726';position:absolute;right:-6px;top:-14px;font-size:14px;color:var(--gold);opacity:0;transform:scale(.4) rotate(0);pointer-events:none;z-index:6}
.letter-pop button.letter-widget::after{animation:sc-env-spark .9s ease-out}
@keyframes sc-env-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sc-env-peek{0%,70%,100%{transform:translateY(0)}80%,88%{transform:translateY(-9px)}}
@keyframes sc-env-spark{0%{opacity:0;transform:scale(.4) rotate(0)}35%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.8) translateY(-10px) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){button.letter-widget,button.letter-widget .letter-sheet{animation:none}.letter-pop button.letter-widget::after{animation:none}}
.newsletter.section-arrived button.letter-widget{animation:letterArrival .8s both,sc-env-float 4.2s ease-in-out .8s infinite}
@media(prefers-reduced-motion:reduce){.newsletter.section-arrived button.letter-widget{animation:none}}
/* colour stones: one cut-out round stone per colour, no tile behind it (sc-bridge SC.diamondPhoto) */
img.sc-dimg.sc-dcol{background:none;box-shadow:none;border-radius:50%;object-fit:contain}
/* builder in full view (user, 2026-10-25 "don't leave the empty space"): the design capped the builder at 1300px and its
 intro at 1480px, and `.builder .grid` held the stone grid to 2 columns — on wide screens the page now runs edge to edge
 with the theme's gutter, the stone grid takes as many 230px columns as fit, the chosen-setting column grows a little */
@media(min-width:1101px){
  #main:has(> section.builder) > .page-intro,#main > section.builder{max-width:none;margin-left:0;margin-right:0;padding-left:clamp(24px,3.4vw,72px);padding-right:clamp(24px,3.4vw,72px)}
  #main:has(> section.builder) > .page-intro > *{margin-left:0}
  .builder .grid.sc-dgrid:not(.sc-dlist){grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .builder .grid.sc-aipgrid:not(.sc-dlist){grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
@media(min-width:1500px){.sc-dws{grid-template-columns:340px minmax(0,1fr);gap:56px}}
/* care plan as its own bag line, under the piece it protects (sc-care SC.careLine) */
.bag-line.sc-careline{position:relative;align-items:center}
.sc-careline .sc-cl-pic{display:grid;place-items:center;aspect-ratio:1;background:var(--sand,#ece6da);border-radius:2px}
.sc-careline .sc-cl-pic img{width:62%;height:62%;object-fit:contain}
.sc-careline .sc-cl-pic svg{width:46%;height:46%;fill:none;stroke:var(--ink,#253a2f);stroke-width:1.4}
.sc-careline h3{margin:0 0 4px}
.sc-careline .sc-cl-for{margin:0 0 10px;color:var(--muted);font-size:13px;padding-right:36px}
.sc-careline .sc-cl-q{font-size:13px;color:var(--muted)}
/* P80: the plan's stepper follows the piece's — shown, never pressed */
.sc-careline .sc-cl-qty button:disabled{opacity:.35;cursor:not-allowed}
.sc-careline .sc-cl-x{position:absolute;top:50%;right:0;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--ink,#253a2f)}
.sc-careline .sc-cl-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.sc-careline .sc-cl-x:hover{color:var(--gold,#a8823c)}
.sc-careline .bag-row{padding-right:44px}
/* atelier reveal: the ring photo (store photo on white, shown whole) fills its half with white, not sand bands above and below */
.atelier-reveal-stage img.atelier-setting-image{background:#fff}
/* home "Find your little thing" tiles: the theme's own editorial art (assets/demo/home-art-<c>.webp, user 2026-10-26 "show a general image, not a product") fills the tile; without it the tile keeps the store / product photo */
.category-photo img.sc-catart{object-fit:cover;mix-blend-mode:normal}
/* tennis story: the theme's editorial photo fills its frame (widgets.js mountTennis reads its own stone positions) */
.tennis-image img.sc-tart{object-fit:cover;mix-blend-mode:normal}
/* journal "Finding your forever shape." card: the theme's editorial photo fills its frame (the design styled this slot for a product photo on white) */
.journal-card:first-child .journal-photo img[src*="home-art-journal-shape"]{object-fit:cover;mix-blend-mode:normal;background:none}
/* ── account pages (snippets/sc-account.liquid, redesigned 2026-10-26) ──
   sign-in / create account: editorial photo panel | form card; account: greeting + a dashboard of cards */
.sc-auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100vh - 160px);max-width:1440px;margin:0 auto}
.sc-auth-art{position:relative;overflow:hidden;background:var(--paper)}
.sc-auth-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.sc-auth-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,27,0) 38%,rgba(28,34,27,.72) 100%)}
.sc-auth-cap{position:absolute;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,52px);z-index:1;color:var(--ivory)}
.sc-auth-cap .eyebrow{color:rgba(250,247,240,.78);margin:0 0 10px}
.sc-auth-quote{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,42px);line-height:1.1;margin:0 0 22px}
.sc-auth-cap ul{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(250,247,240,.28);display:grid;gap:9px;font-size:14px}
.sc-auth-cap li{display:flex;gap:10px;align-items:baseline}
.sc-auth-cap li::before{content:"✦";color:var(--gold);font-size:11px}
.sc-auth-card{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,96px) clamp(24px,6vw,96px);max-width:620px;width:100%;justify-self:center}
.sc-auth-card .breadcrumb{margin:0 0 22px}
.sc-auth-card h1{font-size:clamp(40px,4.6vw,64px);line-height:1.02;margin:0 0 14px}
.sc-auth-lede{color:var(--muted);margin:0 0 26px;max-width:42ch}
.sc-auth-card form{margin:0}
.sc-auth-card .field{margin:0 0 18px}
.sc-auth-card .field input{background:#fff;min-height:54px;font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}
.sc-auth-card .field input:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(51,61,50,.12)}
.sc-auth-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc-auth-card .form-row .field{margin-bottom:18px}
.sc-auth-go{width:100%;display:flex;justify-content:center;gap:10px;min-height:54px}
.sc-auth-alt{margin:18px 0 0;font-size:14px;color:var(--muted)}
.sc-auth-inside{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.sc-auth-inside .eyebrow{margin:0 0 12px}
.sc-auth-inside ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.sc-auth-inside li::before{content:"—";color:var(--gold);margin-right:10px}
@media(max-width:900px){
  .sc-auth{grid-template-columns:1fr;min-height:0}
  .sc-auth-art{aspect-ratio:16/10}
  .sc-auth-cap ul{display:none}
  .sc-auth-quote{margin:0}
  .sc-auth-card{padding:34px 20px 56px;max-width:none}
}
@media(max-width:480px){.sc-auth-card .form-row{grid-template-columns:1fr;gap:0}}

.sc-dash{max-width:1180px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,4vw,48px) clamp(56px,7vw,96px)}
.sc-dash-head{padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.sc-dash-head .breadcrumb{margin:0 0 18px}
.sc-dash-head h1{font-size:clamp(42px,5.2vw,76px);line-height:1.02;margin:0 0 12px;overflow-wrap:anywhere}
.sc-dash-who{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:0;color:var(--muted);font-size:15px}
.sc-dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sc-dash-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:var(--ivory);padding:26px 26px 24px;color:inherit;text-decoration:none;min-width:0}
.sc-dash-card h2{font-size:24px;margin:0}
.sc-dash-card p{margin:0;color:var(--muted)}
.sc-dash-orders,.sc-dash-wide{grid-column:1/-1}
.sc-dash-ch{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.sc-dash-n{min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:var(--olive);color:var(--ivory);font-size:12px;display:inline-grid;place-items:center}
.sc-dash-ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sc-dash-ol a{display:grid;grid-template-columns:1fr 1.4fr auto 24px;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:background .2s ease}
.sc-dash-ol a:hover{background:var(--paper)}
.sc-dash-on{font-weight:600}
.sc-dash-od{color:var(--muted)}
.sc-dash-ar{color:var(--gold)}
.sc-dash-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:22px;background:var(--paper)}
.sc-dash-empty p{max-width:46ch}
.sc-dash-link{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.sc-dash-link:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 26px rgba(51,61,50,.08)}
.sc-dash-link .text-link,.sc-dash-help .sc-dash-hl{margin-top:auto;padding-top:12px}
.sc-dash-hl{display:flex;flex-wrap:wrap;gap:8px 18px}
.sc-dash-addr{white-space:pre-line;color:inherit}
.sc-dash-back{margin:28px 0 0}
@media(max-width:900px){.sc-dash-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sc-dash-grid{grid-template-columns:1fr}.sc-dash-ol a{grid-template-columns:1fr auto;gap:4px 12px}.sc-dash-od{grid-column:1;font-size:13px}.sc-dash-ar{display:none}.sc-dash-empty{padding:18px}}
/* atelier reveal with the theme's matched pair (sketch → ring, same framing): both halves fill the frame, no white backing */
.atelier-reveal-stage.sc-atpair>img,.atelier-reveal-stage.sc-atpair>img.atelier-setting-image{object-fit:cover;mix-blend-mode:normal;background:none}
/* the three steps under "Your story. Our starting point." (same as the custom page) */
.sc-at-steps{list-style:none;margin:22px 0 26px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 26px;font-size:14px}
.sc-at-steps li{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.sc-at-steps span{font-size:11px;letter-spacing:.14em;color:var(--gold)}
@media(max-width:600px){.sc-at-steps{grid-template-columns:1fr;gap:8px}}
/* the pair's ring sits mid-frame: the ↔︎ handle moves down the line so it never covers the ring */
.atelier-reveal-stage.sc-atpair .reveal-divider i{top:76%}
/* header shimmer (user, 2026-10-26 "show the shimmer on header images while loading"): the menu promos, the diamond shape /
   colour photos and the phone menu load only when a menu opens, and the page-wide shimmer was too faint on the ivory panel
   (a flat beige square). Here: a deeper sand with a bright light sweeping across, a little faster; the photo then fades in. */
#header img.sc-img-wait,.sc-mega img.sc-img-wait,.sc-panel img.sc-img-wait,.sc-mm img.sc-img-wait{background-image:linear-gradient(105deg,#ddd3bf 0%,#ddd3bf 34%,#f3ede2 44%,#fffdf8 50%,#f3ede2 56%,#ddd3bf 66%,#ddd3bf 100%)!important;background-size:300% 100%!important;background-repeat:no-repeat!important;background-color:#ddd3bf!important;animation:sc-hdr-sk 1.05s ease-in-out infinite!important;opacity:1!important}
@keyframes sc-hdr-sk{from{background-position:100% 0}to{background-position:0 0}}
#header img,.sc-mega img,.sc-panel img,.sc-mm img{transition:opacity .35s ease}
#header img:not(.sc-img-wait),.sc-mega img:not(.sc-img-wait),.sc-panel img:not(.sc-img-wait),.sc-mm img:not(.sc-img-wait){animation:sc-hdr-in .35s ease both}
@keyframes sc-hdr-in{from{opacity:.25}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#header img.sc-img-wait,.sc-mega img.sc-img-wait,.sc-panel img.sc-img-wait,.sc-mm img.sc-img-wait{animation:none!important;background:#e4dccb!important}#header img,.sc-mega img,.sc-panel img,.sc-mm img{animation:none!important}}
/* passwordless account (passwordless-account-spec.md, 2026-10-31; Seravine's structure in Sunday Carat's own look):
   kicker, the post note on the card, order status pills, the details / preferences forms, the order and address pages */
.sc-acct-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.sc-acct-note{border:1px solid var(--line);border-left:3px solid var(--olive);background:var(--paper);color:var(--olive);padding:13px 16px;margin:0 0 18px;font-size:15px;line-height:1.5}
.sc-acct-note--err{border-left-color:#9a4b2f;color:#7d3a24}
.sc-dash>.sc-acct-note{margin:0 0 24px}
.sc-acct-hero h1 em{font-style:italic;color:var(--olive)}
.sc-acct-pills{display:inline-flex;flex-wrap:wrap;gap:6px}
.sc-acct-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--olive);color:var(--ivory);font-size:12px;line-height:1.5;letter-spacing:.02em;white-space:nowrap;align-self:flex-start}
.sc-acct-pill--soft{background:var(--sand);color:var(--olive)}
.sc-acct-pill--off{background:#efe1dc;color:#7d3a24}
.sc-dash-ol a{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) auto auto 24px}
.sc-acct-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)!important}
.sc-acct-gap{margin-top:14px!important}
.sc-acct-more{margin-top:auto;padding-top:12px;align-self:flex-start}
.sc-acct-form{margin:4px 0 0;display:grid;gap:0}
.sc-acct-form .field{margin:0 0 12px}
.sc-acct-form .field input{background:#fff}
.sc-acct-form .field input:disabled{background:var(--paper);color:var(--muted)}
.sc-acct-form .button{justify-self:start;min-height:46px}
.sc-acct-ghost{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--olive);justify-self:start}
.sc-acct-order{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.sc-acct-line{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.sc-acct-line img,.sc-acct-ph{width:80px;height:80px;object-fit:contain;background:var(--paper);display:block}
.sc-acct-line p{margin:0}
.sc-acct-lt{color:var(--olive)!important;font-weight:500}
.sc-acct-edit summary{cursor:pointer;list-style:none;align-self:flex-start}
.sc-acct-edit[open] summary{margin-bottom:12px}
.sc-acct-edit form,.sc-acct-fields{display:grid;gap:0}
.sc-acct-fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.sc-dash-card form .field input,.sc-dash-card form .field select{background:#fff}
@media(max-width:900px){.sc-acct-order{grid-template-columns:1fr}}
@media(max-width:600px){.sc-dash-ol a{grid-template-columns:minmax(0,1fr) auto}.sc-acct-pills{grid-column:1/-1}.sc-acct-fields{grid-template-columns:1fr}.sc-acct-line{grid-template-columns:64px minmax(0,1fr);}.sc-acct-line>span{grid-column:2}.sc-acct-line img,.sc-acct-ph{width:64px;height:64px}}
/* GRPB (group-b-card-hover-and-drawer-care.md, 2026-10-31): the card's second photo on image hover, the full-name box on
   name hover (desktop only), the name in full on touch */
.product-photo .sc-alt{position:absolute;inset:0;opacity:0;transition:opacity .35s ease,transform .45s;pointer-events:none}
.product-photo>img:first-child{transition:opacity .35s ease,transform .45s}
@media (hover:hover) and (pointer:fine){
  .product-photo.sc-alt-ready:hover .sc-alt{opacity:1}
  .product-photo.sc-alt-ready:hover>img:first-child{opacity:0}
}
.product-card.sc-swap .product-photo .sc-alt{opacity:0!important}
@media (hover:none),(pointer:coarse){
  .product-photo .sc-alt{display:none}
  .product-card h3 a{display:block;-webkit-line-clamp:unset;height:auto;overflow:visible}
}
.sc-nametip{position:absolute;z-index:9999;left:0;top:0;padding:10px 14px;border-radius:6px;background:var(--olive,#283c30);color:var(--ivory,#f8f6ef);font:400 14px/1.45 var(--sans);box-shadow:0 10px 26px rgba(28,34,27,.22);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease;max-width:calc(100vw - 16px);box-sizing:border-box}
.sc-nametip.is-on{opacity:1;visibility:visible}
.sc-nametip::after{content:"";position:absolute;top:100%;left:var(--sc-ax,18px);margin-left:-6px;border:6px solid transparent;border-top-color:var(--olive,#283c30)}
.product-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* PDP-BUTTONS (whitemoon-pdp-buttons-dropdowns.md, 2026-11-02): the quantity's ends, the length guide's lengths as buttons,
   the Add to Bag price. (The tile add-on line .sc-addon was removed — Harsh, 4 Nov, pdp-option-addon-label-remove.md.) */
.sc-qty button:disabled{opacity:.35;cursor:not-allowed}
.sc-guide .sc-glen{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px}
.sc-guide .sc-glen:hover{color:var(--gold)}
.sc-cta b{font-weight:500}
.button.sc-cta>.sc-cta-l{font-size:inherit;line-height:1.3;transition:none;transform:none;text-align:left}
/* ── RESPONSIVE pass (responsive-all-views-check.md, Harsh 2026-11-03) — the look stays; only fit and touch change ── */
/* phone: labels at least 11px (eyebrows, kickers, breadcrumbs, numbers, captions, the announcement, the legal line).
   The wordmark's "FINE JEWELRY" caption stays as drawn: it is part of the logo. */
@media(max-width:767px){
  :root .eyebrow,:root .widget-kicker,:root .breadcrumb,:root .breadcrumb a,:root .breadcrumb span,:root .category-number,:root .step-number,:root .image-note,:root .product-category,:root .reveal-view-label,:root .sc-pc-top,:root .announcement .sc-tick,:root .footer-bottom,:root .footer-bottom a,:root .hero-piece>span,:root .bridal-steps span,:root .atelier-image figcaption label,:root #overlay .sc-mm .eyebrow,:root .field>span,:root .sc-cardsave,:root .sc-gtabs button,:root .sc-offbadge,:root .sc-wt small{font-size:11px}
}
/* phone + tablet: a form field under 16px makes iOS zoom the page on focus; the builder's sort select also inherited the
   demo's font-size:0 for the hidden "Sort" word and showed an empty box on a phone */
@media(max-width:1024px){
  :root .field input,:root .field select,:root .field textarea,:root .newsletter input,:root .sc-rbsort select{font-size:16px}
  :root .sc-rbsort select{max-width:200px;min-height:44px}
  :root .sc-lf-psort select,:root .sc-lf-ft input{min-height:44px}
  :root .sc-rbtop button,:root .sc-pg{min-width:44px;min-height:44px}
}
/* phone + tablet: every control a finger uses gets a 44px tap zone — an invisible ::after (::before where the ::after
   already draws a sign or an underline), centred on the control and never smaller than it, so the spacing stays as
   designed (the same trick as the header icons above) */
@media(max-width:1024px){
  .footer-grid a:not(.brand),.footer-bottom a,.back-to-top,.sc-contact a,.bridal-steps a,.light-options button,.segmented-control button,.hero-secondary,.scroll-cue,.sc-chip,.bag-line .remove,.sc-pc-lk,a.brand,details>summary,.sc-fhead,.quantity button,[data-rb-origin],.announcement a,.catalog-top>.button,.collection-tabs a,.sc-gtabs button,.bag-line h3 a{position:relative}
  .footer-grid a:not(.brand)::after,.footer-bottom a::after,.back-to-top::after,.sc-contact a::after,.bridal-steps a::after,.light-options button::after,.segmented-control button::after,.hero-secondary::after,.scroll-cue::after,.sc-chip::after,.bag-line .remove::after,.sc-pc-lk::after,a.brand::after,details>summary::after,.quantity button::after,[data-rb-origin]::after,.announcement a::after,.catalog-top>.button::after,.collection-tabs a::after,.product-card .quick-view::after,.sc-gtabs button::after,.bag-line h3 a::after,.photo-zoom::after,.sc-stage .sc-arrow::after,.text-link::before,.sc-fhead::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  /* the FAQ summaries draw their + with ::after — their zone is the ::before */
  .sc-cd-qs summary::after{content:'+';position:static;width:auto;height:auto;transform:none}
  .sc-cd-qs details[open] summary::after{transform:rotate(45deg)}
  .sc-cd-qs summary::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  /* the ring size form's "I don't know" box: the whole label is the target (its own rule: :has() is skipped, not fatal, where unknown) */
  label:has(#pdp-size-dk),#sc-lf-panel label:has(input[type=checkbox]){position:relative}
  label:has(#pdp-size-dk)::after,#sc-lf-panel label:has(input[type=checkbox])::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* ── collection filters (Harsh 2026-11-03, screenshot of /collections/all: "design sahi nahi he") ──
   each group sits in its own div, so the demo's `.filters h3:first-child{border-top:0;padding-top:0}` took the rule and the
   space off every heading and "METAL" sat glued to the price boxes — the groups after the first get the demo's own
   separator back. In the filter column (≥761px) the bar stacks: "See N pieces" full width on one line, "Clear" under it. */
.sc-lf .filters [data-lf-group]~[data-lf-group]>h3:first-child{border-top:1px solid var(--line);padding-top:22px;margin-top:24px}
@media(min-width:761px){
  .sc-lf .sc-apply{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .sc-lf .sc-apply .button{flex:none;width:100%;white-space:nowrap;padding-left:12px;padding-right:12px;justify-content:center}
  .sc-lf .sc-apply .sc-lf-clear{align-self:center}
}
/* home "Lovely, together" pair (Harsh 2026-11-03: "us part ki size choti kar do, screen me fit nahi ho raha"): the two
   arched cards were 450px each (grid 950px), so one card alone took more than a laptop screen — the pair now sits in
   460px (≈205px a card) so heading, buttons and the pair fit one 1366×768 screen under the header; the phone rules (2-up, 14px gap) are unchanged */
@media(min-width:761px){
  .pairing-section .pair-grid{max-width:460px}
  .pairing-section .product-card h3{font-size:20px}
}
/* home "Find your little thing" — Wedding Bands added as a fifth tile (Harsh 2026-11-03: "weding bend nahi he to add kar
   do"): five across from 761px (the tiles keep their staggered rhythm), and on a phone the fifth sits centred under the
   2 × 2 at the same tile width */
@media(min-width:761px){.category-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){.category-grid .category:nth-child(5){grid-column:1/-1;width:calc(50% - 7px);justify-self:center}}
/* "Lovely, together" cards square (Harsh 2026-11-03: "is ki design sahi karo squer kar do"): the demo's arched photo
   (border-radius 48% / 42% on a phone, 5% on hover) cut the "SAVE x%" badge and the heart off — square at every width */
.pairing-section .product-image-wrap,.pairing-section .product-card:hover .product-image-wrap{border-radius:0}
/* footer: the theme logo where "Sunday state of mind." stood (Harsh 2026-11-04: "theme logo vaha par set kar do") — the
   header's own wordmark (Sunday Carat + the gold dot + FINE JEWELRY), large and centred in the ivory of the footer text */
.sc-footer-logo{display:flex;flex-direction:column;align-items:center;max-width:1480px;margin:44px auto 26px;text-align:center;user-select:none;color:var(--ivory,#f8f6ef)}
.sc-footer-logo .brand-name{font-family:var(--serif);font-size:clamp(46px,7vw,104px);line-height:1;letter-spacing:-.02em;font-weight:500;white-space:nowrap}
.sc-footer-logo .brand-dot{color:var(--gold)}
.sc-footer-logo .brand-caption{display:block;font:clamp(10px,.9vw,13px)/1.2 var(--sans);letter-spacing:.32em;margin-top:clamp(8px,1vw,14px);opacity:.75}
@media(max-width:760px){.sc-footer-logo{margin:34px 0 24px}}
/* contact page spacing (Harsh 2026-11-04: "space thodi kam kar do"): the "Write to us" facts row carried a full section
   padding (90px / 57px on a phone) on top of the intro's and the form's own space — ~130px of empty band above and below
   it. Only where the facts sit straight after the page intro and the form straight after the facts (the contact layout) */
.page-intro + .sc-facts{padding-top:20px;padding-bottom:24px}
.sc-facts + .info-page{padding-top:24px}
@media(max-width:760px){.page-intro + .sc-facts{padding-top:12px;padding-bottom:16px}.sc-facts + .info-page{padding-top:16px}}
/* "Find your little thing" tile numbers 01–05 (Harsh 2026-11-04: "number ka colour dark kar do taki dikhe"): the muted
   grey vanished into the photos — dark olive, medium weight, on a small ivory tag so it reads on light and dark photos */
.category-grid .category-number{color:var(--olive);font-weight:500;background:rgba(250,247,240,.88);padding:3px 7px;line-height:1.3}
/* "The Tennis Edit" on a phone (Harsh 2026-11-04: "ye part proper 1 view me fit nahi ho raha"): the slider moves the light
   along the bracelet IN the photo, but on a phone the photo sat ~800px above the slider, so the two were never on screen
   together. Under 761px the slider ("Trace a little light") comes straight under the photo; the heading, text, piece link
   and price follow. Desktop / tablet keep the two-column layout. */
@media(max-width:760px){
  .tennis-story{gap:0;padding-top:40px} /* a little air under the green bridal band (Harsh 2026-11-04) */
  .tennis-story .tennis-image{aspect-ratio:4/3}
  .tennis-story .tennis-copy{display:contents}
  .tennis-story .tennis-image{order:0}
  /* the slider sits ON the photo's foot — one block with it (Harsh 2026-11-04: "image ke sath slider set kar do") */
  .tennis-story .tennis-copy>.sparkle-widget{order:1;align-self:stretch;margin:0;padding:14px 16px 12px;border-top:0;background:var(--paper);max-width:none}
  .tennis-story .sparkle-widget-heading{margin-bottom:12px}
  .tennis-story .sparkle-strand{margin-bottom:8px}
  .tennis-story .sparkle-widget .widget-hint{margin-top:4px}
  .tennis-story .tennis-copy>*:not(.sparkle-widget){order:2;align-self:flex-start;margin-left:3px;margin-right:3px}
  .tennis-story .tennis-copy>.fine-rule{margin-top:36px}
  .tennis-story .tennis-copy>*:not(.sparkle-widget):not(.fine-rule){margin-top:21px}
  .tennis-story .tennis-copy>.text-link{align-self:stretch}
}

/* card-title-two-lines.md (Harsh 2026-11-04: card names max 2 lines + "…", the same on phone, tablet and desktop): the
   GRPB touch rule above had opened the clamp on touch screens (the hover tooltip cannot show there), so a phone or tablet
   card's name ran to 7–9 lines and the prices of a row went uneven. The clamp (2 lines, a 2-line box, line-height 1.25 —
   the desktop look) now holds at every width and on touch; the full name stays in the HTML and the desktop tooltip. */
@media (hover:none),(pointer:coarse){.product-card h3 a{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.5em}}
.product-card h3 a{overflow-wrap:anywhere}
/* the small "NECKLACES / WHITE GOLD" line over the name wrapped to 2 lines on narrow cards and pushed that card's name
   and price down — one line with "…", so every card of a row lines up (card-title-two-lines.md §1 #2) */
.product-card .product-category{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bag line (Harsh, 5 Nov): "Remove" in the quantity row, right of the stepper, centred on it; price stays at the right */
.bag-row .sc-qtyrm{display:flex;align-items:center;gap:16px;min-width:0}
.bag-row .sc-qtyrm .remove{margin-top:0;white-space:nowrap;line-height:1}

/* extra space (Harsh 2026-11-05: "remove this extra space"): two empty bands of ~170px.
   Home — the journal notes' own 105px foot + the service strip's 36px top sat between the note arrows and
   "Considered choices". Contact — the last info block's 90px foot + the newsletter's 80px top sat under "Quick answers".
   Only these two joints change; the sections keep their other spacing. */
.journal-section:has(+ .service-strip){padding-bottom:8px}
.sc-facts + .info-page:has(form) + .info-page:last-child{padding-bottom:0} /* contact only: facts → form → Quick answers */
@media(max-width:760px){.journal-section:has(+ .service-strip){padding-bottom:20px}}

/* home hero = one screen (Harsh 2026-11-05: "ye image ek screen me fit nahi ho raha he to ek screen me dikh jaye vesa fit
   karo"). On desktop / tablet the hero kept a fixed floor (790px, 900px ≥1700px, 760px ≤1100px), so on any screen
   shorter than that its foot ("Scroll to discover", the "On her hand" piece) fell below the fold. Now the hero is the
   screen under the announcement bar (100svh − 34px, max 1050px as before), and the heading size and the copy's top /
   bottom space follow the screen height, so the whole hero shows at once. Tall screens look exactly as before (the
   clamps reach the old values: 132px / 99px heading, 215px / 185px top, 115px foot). Phones keep their own layout. */
@media(min-width:761px){
  .home-hero{min-height:520px;height:calc(100vh - 34px);height:calc(100svh - 34px)}
  .home-hero .hero-copy{padding-top:clamp(140px,21svh,215px);padding-bottom:clamp(40px,9svh,115px)}
  .home-hero h1{font-size:clamp(60px,min(8.4vw,12.4svh),132px)}
}
@media(min-width:761px) and (max-width:1100px){
  .home-hero .hero-copy{padding-top:clamp(140px,18svh,185px)}
  .home-hero h1{font-size:clamp(60px,12.4svh,99px)}
}
/* short screens (≤ 820px tall laptops): tighter copy so the buttons end above "Scroll to discover" */
@media(min-width:761px) and (max-height:820px){
  .home-hero .hero-copy{padding-top:clamp(136px,22svh,180px);gap:18px}
  .home-hero h1{font-size:clamp(54px,min(8.4vw,11svh),132px)}
  .home-hero .hero-description{line-height:1.7}
}
@media(min-width:761px) and (max-height:640px){
  .home-hero .hero-copy{gap:14px}
  .home-hero h1{font-size:clamp(50px,min(8.4vw,10svh),132px)}
}

/* menu shape icons without the grey tile (Harsh 2026-11-05: "dimond ke piche background jo he use nikal do"): the menu uses
   transparent cut-outs (assets/dia/cut/, made by tools/sc/sc-diacut.py from the same photos), so no grey square, ring
   or rounded corner sits behind the stone. The filter panel, ring builder and PDP chips keep their tiles. */
img.sc-dimg.sc-navshape.sc-cut{background:none;box-shadow:none;border-radius:0;object-fit:contain}

/* About: space after the "A considered process" photo (Harsh 2026-11-05: "image ke bad thodi space kar do") — the photo
   sat flush on the green "A conversation is a lovely beginning." band. Only where an editorial block meets the CTA band. */
.editorial + .sc-cta{margin-top:80px}
@media(max-width:760px){.editorial + .sc-cta{margin-top:48px}}

/* store articles' photos fill their frames (blog-news-content.md §4, Harsh 2026-11-05): the News cards and the article
   cover drew the cover photo "contain" on white, so a square or landscape lifestyle photo sat between white bars. Now
   it fills the frame like the theme's own Journal cards; the paper tone shows only while the photo loads. */
.sc-journal .journal-photo,.sc-article-cover{background:var(--paper)}
.sc-journal .journal-card .journal-photo img,.sc-article-cover img{object-fit:cover;mix-blend-mode:normal;background:none}