/* Whitemoon — the design's tokens applied to Liquid content shown inside the design's header + footer
   (search-less shell pages: account, blog, article, CMS pages, 404, collections list) and to the few
   pieces the theme adds (mobile menu overlay, product description). Values copied from the design's own
   CSS: ground #FAFAF8, ink #141A2E, accent #4F5D86, gold #B08D57, muted #565D72, rule #DCE0E8, image
   ground #EEF1F5; Bodoni Moda (.d), DM Mono (.m labels), Hanken Grotesk (body); the .btn fill-on-hover. */
.wn-shell-slot{background:#FAFAF8;color:#141A2E;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:52vh;padding:calc(84px + clamp(40px,5vw,80px)) 0 clamp(80px,9vw,130px)}
.wn-shell-slot *{box-sizing:border-box}
.wn-shell-slot a{color:#141A2E;text-decoration:none;transition:color .3s}
.wn-shell-slot a:hover{color:#4F5D86}
.wn-shell-slot .page-width{max-width:1440px;margin:0 auto;padding:0 40px}
.wn-shell-slot .page-width--narrow{max-width:900px}
.wn-shell-slot h1,.wn-shell-slot h2,.wn-shell-slot h3{font-family:'Bodoni Moda',Didot,'Times New Roman',serif;font-weight:400;letter-spacing:-.015em;margin:0 0 .5em}
.wn-shell-slot h1{font-size:clamp(46px,5.4vw,84px);line-height:.95}
.wn-shell-slot h2{font-size:clamp(30px,3vw,44px);line-height:1.05}
.wn-shell-slot h3{font-size:24px;line-height:1.1}
.wn-shell-slot p{margin:0 0 1em;font-size:16px;line-height:1.7;color:#3A4057}
.wn-shell-slot em{font-style:italic;color:#4F5D86}
.wn-lbl,.wn-crumb,.wn-shell-slot label,.wn-shell-slot th{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.wn-crumb{display:flex;gap:10px;flex-wrap:wrap;color:#565D72;padding-bottom:18px}
.wn-crumb a{color:#565D72}
.wn-crumb span:last-child{color:#141A2E}
.wn-head{display:flex;flex-direction:column;gap:6px;padding-bottom:32px;border-bottom:1px solid #DCE0E8;margin-bottom:40px}
.wn-big{font-family:'Bodoni Moda',serif;font-size:38px!important;color:#141A2E!important;line-height:1.1!important}
.wn-shell-slot .button,.wn-shell-slot button[type=submit],.wn-shell-slot input[type=submit]{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 28px;background:#141A2E;color:#FAFAF8;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;overflow:hidden;isolation:isolate;border:1px solid #141A2E;cursor:pointer;transition:color .5s,border-color .5s;border-radius:0}
.wn-shell-slot .button::before{content:'';position:absolute;inset:0;background:#4F5D86;transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.7,0,.2,1);z-index:-1}
.wn-shell-slot .button:hover{color:#FAFAF8;border-color:#4F5D86}
.wn-shell-slot .button:hover::before{transform:scaleX(1);transform-origin:left}
.wn-shell-slot .button--secondary{background:transparent;color:#141A2E}
.wn-shell-slot .button--secondary::before{background:#141A2E}
.wn-shell-slot .button--secondary:hover{color:#FAFAF8;border-color:#141A2E}
.wn-shell-slot .button--full{width:100%}
.wn-shell-slot input[type=text],.wn-shell-slot input[type=email],.wn-shell-slot input[type=password],.wn-shell-slot input[type=tel],.wn-shell-slot input[type=search],.wn-shell-slot select,.wn-shell-slot textarea{appearance:none;width:100%;border:1px solid #DCE0E8;background:#FFF;height:52px;padding:0 16px;font:inherit;font-size:16px;color:#141A2E;outline:0;border-radius:0;transition:border-color .3s}
.wn-shell-slot textarea{height:auto;min-height:120px;padding-top:12px}
.wn-shell-slot input:focus,.wn-shell-slot select:focus,.wn-shell-slot textarea:focus{border-color:#141A2E}
.wn-shell-slot form{display:flex;flex-direction:column;gap:22px;max-width:560px}
.wn-shell-slot .field,.wn-shell-slot .form__field{display:flex;flex-direction:column;gap:8px}
.wn-shell-slot label{color:#565D72}
.wn-shell-slot .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:40px 24px}
.wn-shell-slot .card{display:flex;flex-direction:column;gap:14px}
.wn-shell-slot .card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#EEF1F5}
.wn-shell-slot .card__media img,.wn-shell-slot .card__media svg{width:100%;height:100%;object-fit:cover;display:block;fill:#C3CAD8}
.wn-shell-slot .card__info{padding:4px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wn-shell-slot .card__title{font-family:'Bodoni Moda',serif;font-size:26px;margin:0}
.wn-shell-slot .card__vendor{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#565D72}
.wn-shell-slot .section__header{padding-bottom:32px}
.wn-shell-slot .empty-state{padding:40px 0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.wn-shell-slot .empty-state h1{margin:0}
.wn-shell-slot table{width:100%;border-collapse:collapse;font-size:15px}
.wn-shell-slot th{text-align:left;padding:0 12px 14px;border-bottom:1px solid #DCE0E8;color:#565D72}
.wn-shell-slot td{padding:16px 12px;border-bottom:1px solid #DCE0E8}
.wn-shell-slot .rte{font-size:17px;line-height:1.8;color:#3A4057;max-width:760px}
.wn-shell-slot .rte img{max-width:100%;height:auto}
.wn-shell-slot .rte a{border-bottom:1px solid #B08D57}
.wn-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:56px 28px}
.wn-post{display:flex;flex-direction:column;gap:12px}
.wn-post__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#EEF1F5}
.wn-post__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.wn-post:hover .wn-post__img img{transform:scale(1.05)}
.wn-post__t{font-family:'Bodoni Moda',serif;font-size:30px;line-height:1.05}
.wn-post__x{font-size:15px;line-height:1.7;color:#3A4057}
.wn-post .wn-lbl{color:#565D72}
.wn-article{display:flex;flex-direction:column;gap:20px}
.wn-article .wn-lbl{color:#565D72}
.wn-article__img{aspect-ratio:16/9;overflow:hidden;background:#EEF1F5}
.wn-article__img img{width:100%;height:100%;object-fit:cover;display:block}
.wn-tl{align-self:flex-start;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid currentColor}
.wn-pager{padding-top:48px;display:flex;gap:14px;font-family:'DM Mono',monospace;font-size:12px}
.wn-pager .current{color:#4F5D86}
.wn-shell-slot ul{padding-left:1.1em}
.wn-shell-slot li{font-size:16px;line-height:1.8}
@media (max-width:700px){.wn-shell-slot .page-width{padding:0 20px}}
/* the design's header menu button opens the design's navigation (theme addition — no handler in the design) */
#wn-menu{position:fixed;inset:0;z-index:200;background:#FAFAF8;color:#141A2E;padding:0 24px 40px;overflow-y:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s linear .6s}
#wn-menu.on{clip-path:inset(0);visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s}
#wn-menu .wn-menu-top{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #DCE0E8;margin-bottom:24px}
#wn-menu nav{display:flex;flex-direction:column}
#wn-menu .ml{min-height:44px;display:flex;align-items:center}
#wn-menu .ml.wn-sub{font-size:18px;padding-left:16px;color:#3A4057}
/* store product description (store HTML) inside the design's Description panel */
.wn-desc p{margin:0 0 .8em}.wn-desc p:last-child{margin:0}
.wn-empty{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid #DCE0E8;max-width:560px}
.wn-empty .wn-lbl{color:#565D72}
.wn-empty p{margin:0}
/* store metal the design has no swatch for (Sterling Silver): the design's own conic swatch recipe, a cooler grey between its white-gold and platinum */
.mt-s{background:conic-gradient(from 200deg,#EEF0F3,#AAB0BA,#F8F9FA,#9AA1AC,#EEF0F3)}
#wn-menu .wn-grp{border-bottom:1px solid #DCE0E8}
#wn-menu .wn-grp>summary{list-style:none;cursor:pointer}
#wn-menu .wn-grp>summary::-webkit-details-marker{display:none}
#wn-menu .wn-h{display:block;color:#565D72;padding:14px 0 6px 16px}

/* card metal dots = the store's Metal family; the piece's own metal is ringed (W20) */
.mts .mt{cursor:pointer;flex-shrink:0}
.mts .mt.on{box-shadow:inset 0 0 0 1px rgba(20,26,46,.14),0 0 0 2px #FAFAF8,0 0 0 3px #141A2E}
/* PDP sibling families (Diamond shape / Side stone type …): the design's mono label + hairline chip (W20) */
.wn-lks{display:flex;flex-wrap:wrap;gap:8px}
.wn-lk{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #DCE0E8;background:#FAFAF8;color:#141A2E;font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:border-color .2s}
.wn-lk:hover{border-color:#141A2E}
.wn-lk.on{border-color:#141A2E;box-shadow:inset 0 0 0 1px #141A2E}
.wn-lk-s{flex-direction:column;gap:6px;min-width:76px;padding:10px 6px;font-size:9px}
.wn-lk svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3}
/* collection pages (W20): the design's mono row — previous · numbers · next */
.wn-pages{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.wn-pg{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border:1px solid #DCE0E8;color:#141A2E;text-decoration:none;transition:border-color .2s,background .2s}
.wn-pg:hover{border-color:#141A2E}
.wn-pg.on{background:#141A2E;border-color:#141A2E;color:#FAFAF8}
.wn-pg-gap{border-color:transparent;min-width:24px;padding:0}
.wn-pg-x svg{width:16px;height:16px}
@media (max-width:600px){.wn-pg{min-width:38px;height:38px;padding:0 8px}.wn-pg-x{font-size:0;gap:0}.wn-pg-x svg{width:18px;height:18px}}
/* card size (user 2026-10-10: "product card ki size badi he"): desktop shows four to a row (the design's own
   4-up view); on phones two to a row, so the name steps down to keep each card compact */
@media (max-width:600px){.cgrid .gc .nm{font-size:19px!important}.cgrid .gc .mts .mt{width:13px;height:13px}}

/* ---- design studio ring builder (W21, tools/wmnd/wn-rb.js) — the design's parts, the demo's steps ---- */
.wn-rb:empty{display:none}
.wn-rb{margin-top:32px;display:flex;flex-direction:column;gap:28px}
.wn-rb-list,.wn-rb-dv,.wn-rb-rv{display:flex;flex-direction:column;gap:24px;animation:fade .8s cubic-bezier(.2,.7,.2,1) both}
.wn-rb-org{display:grid;grid-template-columns:1fr 1fr;gap:0}
.wn-rb-org .chip{min-height:52px;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.wn-rb-f{display:flex;flex-direction:column;gap:22px;border-top:1px solid #DCE0E8;padding-top:24px}
.wn-rb-frow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.wn-rb-lbl{width:110px;color:#565D72;padding-top:14px;flex-shrink:0}
.wn-rb-fctl{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.wn-rb-shapes{display:flex;gap:8px;overflow-x:auto;padding:2px}
.wn-rb-seg,.wn-rb-quick,.wn-rb-fancy{display:flex;flex-wrap:wrap;gap:6px}
.wn-rb-fc i{display:inline-block;width:12px;height:12px;border-radius:999px;margin-right:8px;box-shadow:inset 0 0 0 1px rgba(20,26,46,.18)}
.wn-rb-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wn-rb-foot button,.wn-rb-links button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.wn-rb-count{color:#141A2E;font-size:12px}
.wn-rb-block{display:flex;flex-direction:column;gap:10px}
.wn-rb .row{grid-template-columns:56px repeat(6,minmax(64px,1fr)) 110px}
.wn-rb-th{position:relative;width:48px;height:48px;background:#EEF1F5;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.wn-rb-th img{width:100%;height:100%;object-fit:cover}
.wn-rb-th i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:7px;background:#FAFAF8;padding:1px 3px;letter-spacing:.06em}
.wn-rb-cert{font-size:9px;color:#565D72;letter-spacing:.06em}
.wn-rb-sk{display:flex;flex-direction:column;gap:2px}
.wn-rb-sk span{height:64px;background:linear-gradient(90deg,#EEF1F5 0%,#F6F7FA 50%,#EEF1F5 100%);background-size:200% 100%;animation:wnsk 1.2s linear infinite}
@keyframes wnsk{to{background-position:-200% 0}}
/* dual range: one 1px rail, the chosen run inked, two round thumbs */
.wn-rng{position:relative;height:28px;--lo:0%;--hi:100%}
.wn-rng input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none}
.wn-rng input[data-hi]{background:linear-gradient(90deg,#DCE0E8 var(--lo),#141A2E var(--lo),#141A2E var(--hi),#DCE0E8 var(--hi)) center/100% 2px no-repeat}
.wn-rng input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:999px;background:#FAFAF8;border:1px solid #141A2E;box-shadow:inset 0 0 0 5px #FAFAF8,inset 0 0 0 11px #141A2E;cursor:pointer}
.wn-rng input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:999px;background:#141A2E;border:5px solid #FAFAF8;box-shadow:0 0 0 1px #141A2E;cursor:pointer}
.wn-rng-t{position:absolute;left:0;right:0;top:30px;display:flex;justify-content:space-between;font-size:9px;color:#9AA1B4}
.wn-rng-t span.in{color:#141A2E}
.wn-rng:has(.wn-rng-t){margin-bottom:22px}
.wn-rng-n{display:flex;gap:12px}
.wn-rng-n label{display:flex;align-items:center;gap:8px;flex:1}
.wn-rng-n .sel2{min-height:44px;font-size:14px;padding:0 12px;min-width:0}
/* one stone */
.wn-rb-dv-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.wn-rb-dv-m{display:flex;flex-direction:column;gap:14px}
.wn-rb-stage{aspect-ratio:1;background:#EEF1F5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wn-rb-stage img,.wn-rb-stage video{width:100%;height:100%;object-fit:contain}
.wn-rb-stage iframe{width:100%;height:100%;border:0}
.wn-rb-noimg{display:flex;flex-direction:column;align-items:center;gap:12px;color:#4F5D86}
.wn-rb-dv-i{display:flex;flex-direction:column;gap:16px}
.wn-rb-sum,.wn-rb-specs{margin:0;display:flex;flex-direction:column;border-top:1px solid #141A2E}
.wn-rb-sum div,.wn-rb-specs div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #DCE0E8}
.wn-rb-sum dt,.wn-rb-specs dt{color:#565D72}
.wn-rb-sum dd,.wn-rb-specs dd{margin:0;text-align:right}
.wn-rb-sum .tot dd{font-size:26px;line-height:1}
/* review */
.wn-rb-rv{border-top:1px solid #141A2E;gap:0}
.wn-rb-rvl{display:flex;flex-direction:column;gap:10px;padding:22px 0;border-bottom:1px solid #DCE0E8}
.wn-rb-rvh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wn-rb-rvh .wn-rb-lbl{padding-top:0;width:auto}
.wn-rb-links{color:#4F5D86}
.wn-rb-opt{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.wn-rb-opt .wn-rb-lbl{padding-top:0;width:auto}
.wn-rb-check{display:flex;align-items:center;gap:10px;cursor:pointer}
.wn-rb-sub{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0}
@media (max-width:760px){.wn-rb-dv-g{grid-template-columns:1fr}.wn-rb-lbl{width:100%;padding-top:0}.wn-rb-fctl{flex-basis:100%}}
.wn-rb-rv .btn{width:100%;margin-top:4px}
/* home shape wheel (W22): the disc is a link — no underline, ink stays */
.orb-core{color:#141A2E;text-decoration:none;cursor:pointer;transition:box-shadow .4s}
.orb-core:hover{box-shadow:0 40px 80px -40px rgba(20,26,46,.45),0 0 0 8px rgba(176,141,87,.18)}

/* product cards (user 2026-10-10, W23: "bade name show hone ki wajah se card pura bhar ja raha he"): the store's
   long titles ran to four lines and every card took its own height. A card's name is now two lines at most
   ("…" after), a touch smaller, and every card keeps the same two-line room, so prices, the style line and the
   metal dots sit on one line across a row. The full name stays in the page (and on the product). */
.gc .nm,.card .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:clamp(19px,1.55vw,22px)!important;line-height:1.14!important;min-height:2.28em;overflow-wrap:anywhere}
.gc .nm+.m,.card .nm+.m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gc div:has(>span>.nm)>span:first-child,.card span:has(>span>.nm)>span:first-child{flex:1 1 auto;min-width:0}
.gc div:has(>span>.nm)>span:last-child{flex-shrink:0;white-space:nowrap}
@media (max-width:600px){.gc .nm,.card .nm{font-size:17px!important}}
/* W25 — card metal dots were clipped: the rail scrolls sideways (overflow hidden) and ended flush with the dots,
   so the chosen metal's outer ring (and the first card's left edge) was cut. The ring now sits INSIDE the dot,
   and the rail keeps a little room under the dots. */
.mts{min-height:18px;align-items:center}
.mts .mt.on{box-shadow:inset 0 0 0 1.5px #141A2E,inset 0 0 0 3.5px #FAFAF8}
.rail{padding-bottom:10px}

/* ---- the theme's ONE product card (W26): the parts the collection card uses, for every page that shows a card
   (the bag and the studio carried no card styles of their own) — same values as the design's collection card */
.mt{width:16px;height:16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(20,26,46,.14)}
.mt-w{background:conic-gradient(from 200deg,#F7F8FA,#C3C9D2,#FDFDFE,#AEB5C1,#F7F8FA)}
.mt-y{background:conic-gradient(from 200deg,#F7E6BC,#C79A4B,#FBEFD2,#B58841,#F7E6BC)}
.mt-r{background:conic-gradient(from 200deg,#F7D9CC,#C98B76,#FBE7DF,#B9796A,#F7D9CC)}
.mt-p{background:conic-gradient(from 200deg,#ECEEF2,#9DA4B0,#F6F7F9,#8E95A2,#ECEEF2)}
.mts{display:flex;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s cubic-bezier(.7,0,.2,1)}
.gc:hover .mts,.mini:hover .mts,.card:hover .mts,.card.on .mts,.gc:focus-within .mts,.mini:focus-within .mts{opacity:1;transform:none}
@media (hover:none){.mts{opacity:1;transform:none}}
.mini .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:clamp(19px,1.55vw,22px)!important;line-height:1.14!important;min-height:2.28em;overflow-wrap:anywhere;color:#141A2E}
.mini .nm+.m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini div:has(>span>.nm)>span:first-child{flex:1 1 auto;min-width:0}
.mini div:has(>span>.nm)>span:last-child{flex-shrink:0;white-space:nowrap}
.mini{gap:0}
.mini:hover .nm,.gc:hover .nm{color:#4F5D86;font-style:italic}
@media (max-width:600px){.mini .nm{font-size:17px!important}}
.card .im{aspect-ratio:4/5!important}
@media (max-width:600px){.cgrid .gc .nm{font-size:17px!important}}

/* home shape wheel (W27): each shape is its real diamond (the demo url's photographs); the chosen one keeps the
   light ground with an ink ring so the stone stays visible; the disc shows the chosen stone large and opens its
   diamonds in the studio */
.orb-i img{width:46px;height:46px;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.orb-i.on{background:#FAFAF8!important;box-shadow:0 0 0 1.5px #141A2E,0 0 0 8px rgba(176,141,87,.28)!important}
.orb-gem{width:128px;height:128px;object-fit:contain;mix-blend-mode:multiply}
.orb-core{gap:10px!important}
.orb-go{font-size:9px;color:#4F5D86;letter-spacing:.14em}

/* W28 — the design column-guide hairlines are gone from every page (user); belt and braces for any copy left */
.gl{display:none!important}

/* ---- wishlist (W29): the header heart + count, the card / PDP hearts, the drawer — the design's parts */
.wn-wish-open{position:relative}
.wn-heart{position:absolute;bottom:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:999px;border:0;background:rgba(250,250,248,.92);color:#141A2E;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s,background .3s}
.wn-heart:hover{transform:scale(1.08)}
.wn-heart svg{width:17px;height:17px}
.wn-heart.on svg path,.wn-heart-btn.on svg path{fill:#141A2E}
.mini .ph{position:relative}
.wn-wish{position:fixed;inset:0;z-index:250;background:rgba(20,26,46,0);transition:background .45s}
.wn-wish[hidden]{display:none}
.wn-wish.on{background:rgba(20,26,46,.42)}
.wn-wish-p{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:#FAFAF8;color:#141A2E;padding:32px 32px 40px;overflow-y:auto;display:flex;flex-direction:column;gap:24px;transform:translateX(100%);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.wn-wish.on .wn-wish-p{transform:none}
.wn-wish-h{display:flex;justify-content:space-between;align-items:start;gap:16px;border-bottom:1px solid #141A2E;padding-bottom:20px}
.wn-wish-x{width:44px;height:44px;border-radius:999px;border:1px solid #DCE0E8;background:none;color:#141A2E;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.wn-wish-q{display:flex;flex-direction:column;gap:8px}
.wn-wish-q input{min-height:48px;border:1px solid #141A2E;background:#FAFAF8;padding:0 14px;font-size:15px;color:#141A2E}
.wn-wish-list{display:flex;flex-direction:column}
.wn-wish-it{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid #DCE0E8}
.wn-wish-im{width:84px;flex-shrink:0;aspect-ratio:4/5;background:#EEF1F5;overflow:hidden}
.wn-wish-im img{width:100%;height:100%;object-fit:cover}
.wn-wish-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.wn-wish-nm{font-size:20px;line-height:1.15;color:#141A2E;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.wn-wish-rm{align-self:start;background:none;border:0;padding:0;cursor:pointer;color:#565D72;font-size:10px}
.wn-wish-empty{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:12px}

/* PDP (W31): the gallery rides along with the scroll beside the buying column until that column ends — as on
   the demo url. Only while the two sit side by side (620 + 64 + 420 px of row = 1184 px of window). */
@media (min-width:900px){.wn-gal{position:sticky;top:108px;align-self:flex-start}}

/* PDP sticky bar on a phone: the piece's name in one line with "…" — a long store name wrapped one word per line
   under the button (user 2026-10-10, W33) */
@media (max-width: 767px) {
  .sbar .wrap > span > .d:first-child { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 19px !important; }
  /* room for the name: no thumbnail (the bar sits right under the gallery), a compact button */
  .sbar .wrap { gap: 12px !important; }
  .sbar .wrap > div:first-child { display: none; }
  .sbar .wrap > span { flex: 1 1 auto; }
  .sbar .wrap > .btn { flex-shrink: 0; padding-left: 16px; padding-right: 16px; gap: 8px; }
}

/* article body (the store's journal posts, W33): the design's display face for headings, airy lists */
.wn-shell-slot .rte h2{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.12;color:#141A2E;margin:44px 0 10px}
.wn-shell-slot .rte p{margin:0 0 18px}
.wn-shell-slot .rte ul,.wn-shell-slot .rte ol{margin:0 0 18px;padding-left:22px}
.wn-shell-slot .rte li{margin:8px 0;padding-left:4px}
.wn-shell-slot .rte strong{color:#141A2E;font-weight:600}

/* ---------- W34 (user 2026-10-10: review points 12–34) ---------- */
/* studio: the "Your ring" panel rides along beside the diamond list while the two sit side by side */
@media (min-width:1100px){aside[aria-label="Your ring"]{position:sticky;top:108px;align-self:flex-start}}
/* listing filter bar: leaves with the product grid; on a phone it steps aside while scrolling down (WN tbarWatch) */
.tbar{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
.tbar.wn-tb-off{transform:translateY(-110%);opacity:0;pointer-events:none}
@media (max-width:767px){
  .tbar .wrap{gap:8px 10px!important;padding-top:8px!important;padding-bottom:8px!important}
  .tbar .wrap>div:first-child{display:contents!important}
  .tbar .wrap>div:first-child>.btn{order:1;min-height:42px!important;padding:0 14px!important;flex-shrink:0}
  .tbar .wrap>div:last-child{order:2;flex:1 1 0;min-width:0;justify-content:flex-end;gap:10px!important}
  .tbar .wrap>div:last-child>label:last-child{flex:1 1 auto;min-width:0}
  .tbar .wrap>div:last-child .sel{min-height:42px;width:100%}
  .tbar .wrap>div:first-child>div{order:3;flex:1 1 100%;min-width:0}
  .tbar .chipi{width:38px;height:38px}
}
/* nothing found: category suggestions */
.wn-sugg{display:flex;flex-wrap:wrap;gap:10px}
/* listing promo tiles on a phone: the whole row, smaller type (the text ran out of a half-width tile) */
@media (max-width:820px){.cgrid .tile{grid-column:1/-1;min-height:0}.cgrid .tile .d{font-size:28px!important}}
/* the moon "back to top": smaller and tucked in on a phone, above the product page's buy bar */
@media (max-width:767px){
  .mprog{width:40px!important;height:40px!important;right:12px!important;bottom:12px!important}
  body:has(.sbar) .mprog{bottom:88px!important}
}
/* home hero on a phone: slides 2 + 3 take their photograph full-bleed under a light veil, as slide 1 does —
   the arch sat behind the headline and the line under it */
.hero-ui .m{white-space:nowrap}
@media (max-width:767px){
  .hero .slide .archimg{inset:0;right:0;width:100%;height:100%;border-radius:0}
  .hero .slide .archimg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,241,245,.95) 0%,rgba(238,241,245,.84) 60%,rgba(238,241,245,.5) 100%)}
}
/* "Hover …" lines say "Tap …" where there is no hover, and the bag's "+ Add to bag" stays in view there */
.wn-tp{display:none}
@media (hover:none),(max-width:767px){.wn-hv{display:none!important}.wn-tp{display:inline}.mini .add{transform:none!important}}
/* our story: grown vs mined on a phone — the row's name over the two answers */
@media (max-width:600px){
  .cmp{grid-template-columns:1fr 1fr!important;gap:6px 16px!important;padding:16px 4px!important}
  .cmp>[role=cell]:first-child{grid-column:1/-1}
  .cmp>[role=columnheader]:first-child{display:none}
  .cmp .d{font-size:19px!important}
}
/* phone tap targets: small text links get a 44px tall touch area without moving anything */
@media (max-width:767px){
  .ul::before{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .ck input{width:22px!important;height:22px!important}
}

/* ---------- bag drawer (W35): the wishlist drawer's panel, with steppers and a checkout footer ---------- */
.wn-bag .wn-wish-p{padding-bottom:0}
.wn-bag .wn-wish-list{flex:1 1 auto}
.wn-bag-it .wn-wish-im{width:92px}
.wn-bag-q{display:inline-flex;align-items:center;border:1px solid #141A2E;min-height:40px}
.wn-bag-q button{width:40px;height:40px;background:none;border:0;color:#141A2E;font-size:18px;line-height:1;cursor:pointer}
.wn-bag-q button:disabled{color:#C9CEDB;cursor:default}
.wn-bag-q .m{min-width:28px;text-align:center;font-size:12px}
.wn-bag-f{position:sticky;bottom:0;margin:0 -32px;padding:24px 32px 28px;background:#FAFAF8;border-top:1px solid #141A2E;display:flex;flex-direction:column;gap:14px}
.wn-bag-f .btn{justify-content:center}
@media (max-width:520px){.wn-bag .wn-wish-p{padding-left:20px;padding-right:20px}.wn-bag-f{margin:0 -20px;padding-left:20px;padding-right:20px}}

/* ---------- W36 (user 2026-10-10: "mobile view or tablet view check kar lena") ---------- */
/* PDP on a tablet in landscape (900–1183px): gallery and buying column stay side by side (they stacked, leaving
   the buying column a 540px strip beside empty space); stacked below 900, the buying column takes the full width */
@media (min-width:900px) and (max-width:1183px){
  .wn-gal{flex:1 1 440px!important}
  .wn-buy{flex:1 1 340px!important;max-width:none!important}
  .wn-gal+.wn-buy,.wn-buy{min-width:0}
}
@media (max-width:899px){.wn-buy{max-width:none!important;flex-basis:100%!important}}
/* home promises: 2 × 2 on a tablet */
@media (min-width:600px) and (max-width:1100px){.wn-prm{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* bag page: the order summary spans the page once it sits under the bag; pairs two up on a phone, the heart
   lifted above the always-shown "+ Add to bag" there */
@media (max-width:1100px){.wn-sumc{max-width:none!important;flex-basis:100%!important}}
@media (max-width:767px){
  .wn-pairs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .mini .ph .wn-heart{bottom:62px}
  .mini .add{left:8px!important;right:8px!important;bottom:8px!important;font-size:10px!important}
}
/* studio diamond list below 820px: each stone on two lines — carat and price first, then colour · clarity ·
   cut · report and View (the 8-column row ran past the screen: price and View cut off) */
@media (max-width:820px){
  .wn-rb .thead{display:none!important}
  .wn-rb .row{min-width:0!important;grid-template-columns:48px repeat(4,minmax(0,1fr)) auto!important;gap:6px 10px!important;padding:14px 8px!important}
  .wn-rb .row>:nth-child(1){grid-row:1/3;grid-column:1}
  .wn-rb .row>:nth-child(2){grid-row:1;grid-column:2/5}
  .wn-rb .row>:nth-child(7){grid-row:1;grid-column:5/7;justify-self:end;font-size:14px!important}
  .wn-rb .row>:nth-child(3){grid-row:2;grid-column:2}
  .wn-rb .row>:nth-child(4){grid-row:2;grid-column:3}
  .wn-rb .row>:nth-child(5){grid-row:2;grid-column:4}
  .wn-rb .row>:nth-child(6){grid-row:2;grid-column:5}
  .wn-rb .row>:nth-child(8){grid-row:2;grid-column:6;justify-self:end}
  .wn-rb .row .d{font-size:20px!important}
}
@media (max-width:820px){
  .wn-rb .row>:nth-child(n+3):nth-child(-n+6)::before{display:block;font-size:8px;letter-spacing:.12em;color:#8A90A2;margin-bottom:3px}
  .wn-rb .row.on>:nth-child(n+3):nth-child(-n+6)::before{color:#C9CEDB}
  .wn-rb .row>:nth-child(3)::before{content:'Colour'}
  .wn-rb .row>:nth-child(4)::before{content:'Clarity'}
  .wn-rb .row>:nth-child(5)::before{content:'Cut'}
  .wn-rb .row>:nth-child(6)::before{content:'Report'}
}

/* ---------- "Call now" (W37, user 2026-10-12): the live store's call pill (a.wm-call), bottom LEFT as on
   whitemoonjewels.com (user: "left side se kar do"); above the product page's buy bar */
.wn-call{position:fixed;left:20px;bottom:20px;z-index:45;display:flex;align-items:center;gap:10px;height:45px;padding:12px 18px;border-radius:60px;background:#141A2E;color:#FAFAF8;font:500 16px/1 'Hanken Grotesk',system-ui,sans-serif;white-space:nowrap;text-decoration:none;box-shadow:0 0 0 4px rgba(250,250,248,.92),0 12px 30px -10px rgba(20,26,46,.5);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wn-call:hover{transform:scale(1.06)}
.wn-call:active{transform:scale(1.02)}
.wn-call svg{flex:0 0 auto}
.wn-call:focus-visible{outline:2px solid #B08D57;outline-offset:3px}
body:has(.sbar) .wn-call{bottom:96px}
@media (max-width:767px){
  .wn-call{left:16px;bottom:16px;height:42px;padding:11px 16px;font-size:15px}
  body:has(.sbar) .wn-call{bottom:88px}
}
@media (prefers-reduced-motion:reduce){.wn-call{transition:none}.wn-call:hover,.wn-call:active{transform:none}}
/* the moon stays bottom right; the production platform adds its own chat dock there (#relay-widget-host: right
   40px, bottom 60px, ~56px tall) — while it is on the page the moon sits above it */
body:has(#relay-widget-host) .mprog{bottom:128px!important;right:44px!important}
@media (max-width:767px){body:has(#relay-widget-host) .mprog{bottom:126px!important;right:48px!important}}

/* ---------- policy pages (W39): the store's own text in the design's parts — mono eyebrow, Bodoni title,
   numbered sections on a hairline, body in the design's reading measure */
.wn-pol{max-width:1080px;margin:0 auto;padding:64px 0 120px;display:flex;flex-direction:column;gap:56px}
.wn-pol-h{display:flex;flex-direction:column;gap:16px;padding-bottom:40px;border-bottom:1px solid #141A2E}
.wn-pol-h .wn-lbl{color:#565D72}
.wn-pol-t{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(48px,6vw,88px);line-height:.98;margin:0;color:#141A2E}
.wn-pol-u{color:#8A6A3A!important}
.wn-pol-i p{margin:0;font-size:20px;line-height:1.6;color:#3A4057;max-width:640px}
.wn-pol-b{display:flex;flex-direction:column}
.wn-pol-s{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding:36px 0;border-bottom:1px solid #DCE0E8}
.wn-pol-n{padding-top:10px;color:#8A6A3A!important}
.wn-pol-s h2{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.1;margin:0 0 16px;color:#141A2E}
.wn-pol .rte{font-size:17px;line-height:1.8;color:#3A4057;max-width:720px}
.wn-pol .rte p{margin:0 0 14px}
.wn-pol .rte p:last-child{margin-bottom:0}
.wn-pol .rte ul{margin:6px 0 16px;padding-left:20px}
.wn-pol .rte li{margin:8px 0}
.wn-pol .rte strong{color:#141A2E;font-weight:600}
.wn-pol .rte a{color:#141A2E;border-bottom:1px solid #B08D57;text-decoration:none}
.wn-pol-note{padding:28px 32px;background:#EEF1F5}
@media (max-width:700px){
  .wn-pol{padding:40px 0 96px;gap:40px}
  .wn-pol-s{grid-template-columns:1fr;gap:6px;padding:28px 0}
  .wn-pol-n{padding-top:0}
  .wn-pol-i p{font-size:18px}
  .wn-pol-note{padding:22px 20px}
}

/* ---------- W41 mobile pass on the production catalogue (user 2026-10-13: "mobile view me design sahi kar do") */
@media (max-width:820px){
  /* PDP gallery: the photo on top, the thumbnails in a row under it — with the store's many photos the thumbnail
     row (flex-shrink 0) took all the width and the photo got 0px */
  .wn-gal{flex-direction:column-reverse!important;gap:12px!important}
  .wn-gal>.thumbs{width:100%;max-width:100%;flex-shrink:1!important}
  .wn-gal>div:not(.thumbs){width:100%;flex:none!important}
  /* PDP name: long store names ran to six lines at 54px */
  .wn-buy h1.d{font-size:clamp(34px,9.5vw,46px)!important;line-height:1!important}
  /* home shape wheel: its box could not shrink below the 560px wheel and pushed it off the right edge */
  .orbit-box{min-width:0;max-width:100%}
}
@media (max-width:600px){
  /* home category list: the description under the name (it squeezed into a 3–4 line column) */
  .ix{grid-template-columns:44px minmax(0,1fr)!important;row-gap:6px!important}
  .ix>span.m:not(:first-child){grid-column:2;font-size:10px}
  /* shop-the-look and journal rows: price / kicker under the name (long names broke one word per line) */
  .jr{grid-template-columns:auto minmax(0,1fr)!important;row-gap:6px!important;column-gap:16px!important}
  .jr>:nth-child(3){grid-column:2;justify-self:start}
  .jr .d{font-size:22px!important}
  /* PDP "Complete the set": smaller pictures and names so a long name keeps whole words per line */
  div[style*="flex: 1 1 280px"]>div:first-child{width:96px!important;height:120px!important}
  div[style*="flex: 1 1 280px"] .d{font-size:20px!important;line-height:1.15!important}
}
/* phone: the moon (back to top) gives way — the call pill and the platform's chat already sit on the corners */
@media (max-width:767px){.mprog{display:none!important}}
@media (max-width:820px){
  /* hero slide eyebrow: a long store name ran to three lines */
  .hero .cap>span.m:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* the design's 120px section rhythm reads as empty screens on a phone */
  section[style*="padding: 120px 0"]{padding-top:72px!important;padding-bottom:72px!important}
}

/* ---------- W42 PDP name size (user 2026-10-13: "font bahut bade he, pdp me only name hi dikh raha he"): the
   design's 54–84px title was drawn for a two-word showcase name; the store's names run 8–10 words, so the name
   alone filled the first screen. Sized so a long name takes 2–3 lines and the price + options show above the fold */
@media (min-width:821px){
  .wn-buy h1.d{font-size:clamp(34px,2.6vw,44px)!important;line-height:1.08!important;letter-spacing:-.005em}
}

/* ---------- W43 PDP desktop pass (user 2026-10-13: "pdp page ki design tum khud dekho … sahi kar do") */
@media (min-width:821px){
  /* thumbnails never run past the photo: the column is as tall as the square stage (gallery width − 114px
     thumbs − 20px gap) and scrolls — 7 store photos made it 616px beside a 356–534px photo */
  .wn-gal{container-type:inline-size}
  .wn-gal>.thumbs{max-height:calc(100cqw - 134px);overflow-y:auto;scrollbar-width:thin;padding-right:4px}
}
/* the section rhythm: 112px under the buying column + 120px over the next section read as an empty screen */
body:has(.wn-gal) section[style*="padding: 112px 0 112px"]{padding-bottom:48px!important}
body:has(.wn-gal) section[style*="padding: 120px 0"]{padding-top:72px!important;padding-bottom:72px!important}
body:has(.wn-gal) section[style*="padding: 0 0 120px"]{padding-bottom:80px!important}
/* the moon (back to top) leaves the right edge to the platform's chat dock, which sat over the size picker,
   the wishlist heart and the buy bar's button: it stacks above the Call now pill on the left instead */
@media (min-width:768px){
  body:has(#relay-widget-host) .mprog,body:has(#relay-widget-host):has(.sbar) .mprog{right:auto!important;left:28px!important;bottom:82px!important}
  body:has(#relay-widget-host):has(.sbar) .mprog{bottom:158px!important}
}