/* Orynna — the few rules the store adds to the design (design tokens only; the design's stylesheet is untouched) */
/* numbered pager: store collections, search and the journal page in 24s (the design shows every piece at once) */
.or-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:34px 0 10px}
.or-pager .chip{min-width:40px;min-height:40px;display:inline-grid;place-items:center;padding:0 12px}
.or-pager .count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:12px}
.or-gap{color:var(--muted);padding:0 4px}
/* store titles are sentences, the design's names are one word: two lines at most on a card */
.card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.15em)}
.set-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.2em)}
/* store page / policy / article bodies in the design's type */
.or-rte{max-width:68ch;padding-bottom:80px}
.or-rte p,.or-rte ul,.or-rte ol{margin:0 0 14px}
.or-rte h2,.or-rte h3,.or-rte h4{margin:30px 0 12px}
.or-rte a{text-decoration:underline;text-underline-offset:3px}
.or-rte img{height:auto}
/* account forms: the design's .field is a label; the address book's fields are div + label */
.field>label{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.acct form{display:grid}
/* PDP option links (store sibling products) read as the design's segment buttons */
.seg a.shape-btn{border:1px solid var(--line2)}
.seg a.shape-btn.on{border-color:var(--ink);background:var(--surface)}
.seg a.swatch.lg{display:inline-block}
/* the design's PDP heading is sized for a one-word name; a store title of a sentence steps down so it reads in two lines */
.pinfo h1.or-long{font-size:clamp(30px,3vw,42px);line-height:1.1}
/* the design's selected metal swatch inside .seg takes the ink fill (its .seg button.on rule) — same for our link swatches */
.seg a.swatch.lg.on{background:var(--ink)}
/* footer (playbook Step 4): brand + Contact, Shop, Useful Links, Information in the design's .foot columns */
.or-foot-cols{grid-template-columns:1.4fr repeat(4,1fr)}
.or-foot-cols ul a{overflow-wrap:anywhere}
@media (max-width:1000px){.or-foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.or-foot-cols{grid-template-columns:1fr}.or-foot-cols .foot-brand{grid-column:auto}}
/* mega menus (Step 3): long lists in two columns, stacked groups, promo caption — the design's mega type */
.mega ul.or-2c{grid-template-columns:1fr 1fr;column-gap:22px}
.mega ul.or-2c a{font-size:16.5px}
.or-stack{display:grid;gap:26px;align-content:start}
.mega-feat .or-mp{font-family:var(--f-d);font-weight:400;font-size:22px;line-height:1.15}
.mega-in{column-gap:32px}
/* Step 18: hover intent — the panel opens / switches / closes softly (or-over.js navIntent) */
.mainnav.or-intent li .mega{transition:opacity .3s,transform .3s,visibility .3s;transform:translateY(-8px)}
.mainnav.or-intent li:hover .mega{visibility:hidden;opacity:0;transform:translateY(-8px)}
.mainnav.or-intent li.or-open .mega,.mainnav.or-intent li:focus-within .mega{visibility:visible;opacity:1;transform:none}
.mainnav.or-intent>ul>li.or-open>a{border-color:var(--ink)}
/* mobile drawer: each nav item opens its groups (the design's details / summary type) */
.drawer details.or-dn{border-top:0;border-bottom:1px solid var(--line)}
.drawer details.or-dn summary{font-size:26px;padding:8px 0}
.drawer details.or-dn>div{padding:0 0 12px}
.drawer details.or-dn .or-all{font-family:var(--f-b);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:0;padding:4px 0 6px;display:inline-flex;gap:8px;align-items:center}
.drawer details.or-dn .or-all svg{width:14px;height:14px}
.drawer .or-sub-h{flex-basis:100%;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
/* wishlist + bag drawers (Steps 19, 20): the design's drawer, from the right */
.drawer.or-right{left:auto;right:0;width:min(420px,92vw);transform:translateX(100%)}
.drawer.or-right.on{transform:none}
.or-dl .line{grid-template-columns:84px minmax(0,1fr)}
.or-sup{font-family:var(--f-b);font-size:.4em;letter-spacing:.1em;color:var(--accent);vertical-align:top}
.bag i.or-wc:empty{display:grid}
/* Step 26: Call now (bottom-left) + back to top (bottom-right, above the platform chat bubble) */
.or-call{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s}
.or-call:hover{background:var(--bg);color:var(--ink)}
.or-call svg{width:16px;height:16px}
.or-top{position:fixed;right:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 100px);z-index:45;width:44px;height:44px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line2);color:var(--ink);border-radius:50%}
.or-top svg{width:18px;height:18px}
@media (max-width:560px){.or-call span{display:none}.or-call{padding:0;width:44px;justify-content:center;border-radius:50%}}
/* content pages (Step 24) in the design's components */
.or-page .or-hero{padding-block:18px 10px}
.or-page .or-hero h1{margin:12px 0 18px}
.or-page .or-hero p{color:var(--muted);max-width:52ch}
.or-pb{padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.or-pb .center-head{margin-bottom:clamp(22px,3vw,36px)}
.or-facts .l{font-size:clamp(40px,4.4vw,58px)}
.or-vals{row-gap:28px}
.or-vals svg{color:var(--accent)}
.or-steps{max-width:820px;margin-inline:auto}
.or-prose{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.or-prose nav{display:grid;gap:10px;align-content:start;position:sticky;top:150px}
.or-prose section{padding-bottom:22px}
.or-prose h3{font-size:26px;margin-bottom:10px}
.or-prose p,.or-prose li{color:var(--muted);max-width:68ch;margin-bottom:10px}
.or-prose ul{padding-left:18px}
.or-list{padding-left:18px;color:var(--muted);display:grid;gap:6px}
.or-contact svg{width:28px;height:28px;color:var(--accent)}
.or-plans{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.or-cta{margin-bottom:0}
@media (max-width:900px){.or-prose{grid-template-columns:1fr}.or-prose nav{position:static}}
.mega-feat{align-content:start}
/* card metal swap (card-metal-swap.md): while the picked metal loads the card dims and its frame shimmers; a photo
   appears only once it has loaded (never the old metal's photo under the new name) */
[data-card].is-swapping .card-media img{opacity:.55;transition:opacity .2s}
[data-card].is-swapping .card-name,[data-card].is-swapping .price{opacity:.5}
[data-card].is-swapping .art{background:linear-gradient(100deg,var(--bg2) 30%,var(--surface) 50%,var(--bg2) 70%);background-size:300% 100%;animation:or-shim 1.2s linear infinite}
@keyframes or-shim{to{background-position:-150% 0}}
.card .sw a.swatch{display:inline-block}
@media (prefers-reduced-motion:reduce){[data-card].is-swapping .art{animation:none}}
/* collection filters (collection-filters-rules 2.md) in the design's filter aside */
.or-cnt{margin-left:auto;font-size:11px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.fshapes .shape-btn .or-cnt{margin:0;font-size:9.5px}
.or-price h4{display:flex;justify-content:space-between;gap:10px}
.or-pr-v{letter-spacing:.04em;text-transform:none;color:var(--muted)}
.or-rail{position:relative;height:24px;margin:4px 0 12px}
.or-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line2)}
.or-rail-fill{position:absolute;top:50%;height:2px;margin-top:-1px;left:var(--lo);right:calc(100% - var(--hi));background:var(--ink)}
.or-rail input[type=range]{position:absolute;inset:0;width:100%;height:24px;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.or-rail input[type=range]::-webkit-slider-runnable-track{height:24px;background:none}
.or-rail input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:4px;border-radius:50%;background:var(--surface);border:1px solid var(--ink);cursor:pointer}
.or-rail input[type=range]::-moz-range-track{background:none}
.or-rail input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--surface);border:1px solid var(--ink);cursor:pointer}
.or-price .two{gap:10px}
.or-price .field input[type=number]{padding:9px 10px}
.or-apply{position:sticky;bottom:0;z-index:2;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 6px;border-top:1px solid var(--line);flex-wrap:wrap}
.or-apply .btn{flex:1}
.or-apply-msg{flex-basis:100%;margin:0}
.or-active{margin-bottom:18px}
.or-dis{opacity:.35;pointer-events:none}
.or-showing{text-align:center;margin-top:30px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.or-showing+.or-pager{margin-top:12px}
@media (max-width:1024px){.or-apply{padding-bottom:78px}} /* the platform chat bubble (bottom-right, above every page layer) never covers "Show N results" */
.or-price .two{grid-template-columns:1fr 1fr}

/* ---------- product page (or-pdp.js · renaissancejewel-pdp-system.md) — the design's .pdp / .gal / .pinfo, our rows ---------- */
.or-stage{display:grid;gap:12px;align-content:start;min-width:0}
.or-stage .gal-main{position:relative}
.or-stage .gal-main img,.or-stage .gal-main video{width:100%;height:100%;object-fit:cover;display:block}
.or-stage .badge.sale{position:absolute;left:14px;top:14px;z-index:2}
.or-tabs{justify-self:start}
.or-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);font-size:22px;line-height:1;color:var(--ink)}
.or-prev{left:12px}.or-next{right:12px}
.thumbs .art{position:relative}
/* a video thumb shows the video's own frame, not the store's preview photo (that is the product's first photo) */
.thumbs .art video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.or-play{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--ink);background:color-mix(in srgb,var(--bg) 35%,transparent)}
.or-pdp h1.or-long{font-size:clamp(28px,2.8vw,40px)}
.or-wt button{display:grid;justify-items:center;gap:2px;min-width:64px;padding:8px 12px}
.or-wt button b{font-weight:400;font-size:15px}.or-wt button small{font-size:10px;letter-spacing:.12em;opacity:.7}
.or-shp{display:grid;justify-items:center;gap:6px}
.or-shp img{width:34px;height:34px;object-fit:contain}
.or-mtl{display:grid;justify-items:center;gap:6px;padding:4px 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.or-mtl.on{color:var(--ink)}.or-mtl.on .swatch{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--ink)}
.or-help{font-size:11px;letter-spacing:.04em;text-transform:none;margin-left:auto}
.or-pdp select{width:100%;min-height:50px;border:1px solid var(--line2);background:transparent;padding:0 14px;color:var(--ink)}
.or-badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 18px;font-size:12.5px;color:var(--muted)}
.or-badges li{display:flex;align-items:center;gap:8px}.or-badges img{width:26px;height:26px;object-fit:contain}
.or-badges a{text-decoration:underline;text-underline-offset:3px}
.or-pdsec{padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.or-edu li span{font-size:14px;color:var(--muted);max-width:30ch}
.or-edu{grid-template-columns:repeat(4,1fr)}
.or-pdsec .cs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.or-bar{display:none}
.or-try .modal-box{padding:clamp(18px,3vw,28px)}
.modal.or-try{z-index:70}
@media (max-width:900px){
 .or-edu,.or-pdsec .cs{grid-template-columns:1fr 1fr}
 /* padding 4px: the active thumb's outline sits 2px outside it (+1px line) — 2px padding clipped it to one edge */
 .or-pdp .gal .thumbs{order:2;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72px;overflow-x:auto;scrollbar-width:none;padding:4px}
 .or-pdp .gal .thumbs::-webkit-scrollbar{display:none}
 .or-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.06)}
 .or-bar>div{display:grid;gap:2px;min-width:0}.or-bar small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
 .or-bar .btn{flex:0 0 auto;min-height:46px;padding-inline:20px}
 body.or-has-bar{padding-bottom:76px}
 body.or-has-bar .or-call{bottom:88px}body.or-has-bar .or-top{bottom:150px}
}
@media (max-width:560px){.or-edu,.or-pdsec .cs{grid-template-columns:1fr 1fr;gap:22px 16px}.or-edu li{padding-top:16px}.or-edu b{font-size:19px}.or-edu li span{font-size:12.5px}.or-pdsec .cs .l{font-size:44px}.or-pdsec .cs p{font-size:12.5px}.or-arrow{width:36px;height:36px}}

/* ---------- Design Studio (or-builder.js · renaissancejewel-ring-builder-spec.md) ---------- */
.or-cv{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.04em;text-transform:none}
.or-cv a{text-decoration:underline;text-underline-offset:3px}
.or-s1f{display:grid;gap:18px;margin-bottom:24px}
.or-s1f .chips{flex-wrap:wrap}
.or-rbm .modal-box{max-height:92vh}
.or-rbm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,34px)}
.or-rbm-th{grid-template-columns:repeat(6,1fr);margin-top:10px}
.or-rbm-in img{width:100%;height:100%;object-fit:cover}
.or-rbsc{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.or-rbsc .on{color:var(--ink)}
.or-rbf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 34px;margin-bottom:12px}
.or-rbf>.or-rbg[data-g="shape"],.or-rbadv,.or-rbf>.or-rbg[data-g="adv"]{grid-column:1/-1}
.or-rbf>.or-rbg[data-g="adv"]{grid-column:auto}
.or-rbadv{display:flex;justify-content:space-between;gap:12px;padding-top:6px}
.or-qp{margin:6px 0 18px;flex-wrap:wrap}
.or-gl button{min-width:0;padding:8px 14px}
.or-dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-bottom:22px}
.or-dc{text-align:left;display:grid;gap:6px;cursor:pointer}
.or-dc .art{aspect-ratio:1;display:grid;place-items:center}
.or-dc .art img{width:100%;height:100%;object-fit:contain}
.or-dc .badge{position:absolute;left:10px;top:10px}
.or-dc small{font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.or-ai .or-dc{outline:1px solid var(--accent);outline-offset:-1px;padding-bottom:10px}
.or-aih{margin:10px 0 12px}
.or-dl2 tr[data-act]{cursor:pointer}.or-dl2 tr.on{background:var(--bg2)}
.or-th{display:grid;place-items:center;width:46px;height:46px;background:var(--bg2);position:relative}
.or-th img{width:100%;height:100%;object-fit:contain}.or-th i{position:absolute;bottom:-2px;right:-4px;font-style:normal;font-size:9px;background:var(--ink);color:var(--bg);padding:1px 3px}
.or-rbload{padding:40px 0}
.or-dd{padding-block:6px 20px}
.or-dd .gal-main{aspect-ratio:1}
.or-cert{display:block;aspect-ratio:1}
.or-rbsum{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:14px}
.or-rbsumrow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;padding:14px 2px;border-bottom:1px solid var(--line)}
.or-rbsumrow b{font-weight:400;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.or-rbpop{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.35);display:flex;align-items:flex-end}
.or-rbpop-box{background:var(--surface);width:100%;max-height:82vh;overflow-y:auto;padding:18px 16px 26px}
.or-rbpop-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.or-rbpop-h .btn{min-height:40px;padding-inline:18px}
@media (max-width:1024px){.or-dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.or-dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.or-rbf{grid-template-columns:1fr}.or-rbm-in{grid-template-columns:1fr}}

/* ---------- store contact form (pages.mjs contactForm — contact page + /pages/virtual-appointment) ---------- */
.or-cform{max-width:720px;margin:clamp(20px,3vw,32px) auto 0}
.or-cform .co{display:grid}
.or-cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.or-cform input,.or-cform select,.or-cform textarea{width:100%}
.or-note{padding:14px 16px;border:1px solid var(--line2);margin-bottom:16px;font-size:14px}
@media (max-width:560px){.or-cform .two{grid-template-columns:1fr}}
.or-cnote{margin-top:18px}.or-cnote textarea{width:100%;min-height:84px;border:1px solid var(--line2);background:transparent;padding:12px 14px;resize:vertical}
.or-share{margin-top:16px;display:grid;gap:12px}.or-sharebtns{flex-wrap:wrap;margin-top:10px}

/* touch targets (playbook Step 27: ≥ 44 px): on touch / narrow screens the small controls get an invisible 44 × 44 hit
   area centred on them — the design's look (16 px swatches, 18 px header icons, text links) stays as it is
   (.wish and .or-arrow are absolutely positioned already: they keep that — set to relative, the heart dropped below the
   card photo and the gallery arrows below the photo on phones) */
@media (pointer:coarse),(max-width:900px){
 .card .swatch,.menu-btn,.head-l>a,.head-l>button,.head-r>a,.head-r>button,.social a,.crumb a,.filter-close button,.fmetal button,.fprice button,.or-pager .chip,.filters .lnk,.toolbar .lnk,footer a,.x-btn button,.or-cv a,.drawer a,.drawer button{position:relative}
 .card .swatch::after,.wish::after,.menu-btn::after,.head-l>a::after,.head-l>button::after,.head-r>a::after,.head-r>button::after,.social a::after,.crumb a::after,.filter-close button::after,.fmetal button::after,.fprice button::after,.or-pager .chip::after,.filters .lnk::after,.toolbar .lnk::after,footer a::after,.x-btn button::after,.or-cv a::after,.drawer a::after,.drawer button::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
@media (pointer:coarse),(max-width:900px){
 .lnk,.qty button,.rm,.search-bar button,.or-acct__foot a,.or-prose nav a,.appt a,.or-help,.check,.co a,.hero-list a,.page-head a{position:relative}
 .lnk::after,.qty button::after,.rm::after,.or-acct__foot a::after,.or-arrow::after,.search-bar button::after,.or-prose nav a::after,.appt a::after,.or-help::after,.co a::after,.hero-list a::after,.page-head a::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
 .check input{width:22px;height:22px}
}
/* Step 18 (cont.): switching from one open menu to another keeps the panel in place — the two panels sit on the same
   spot and cross-fade (no slide); reduced motion = a light fade only (the design's own rule turns every transition off) */
.mainnav.or-intent.or-switch li .mega{transform:none;transition:opacity .25s,visibility .25s}
@media (prefers-reduced-motion:reduce){.mainnav.or-intent li .mega{transition:opacity .15s,visibility .15s!important;transform:none!important}}

/* ring-builder §0: a finished step in the 3-step bar shows a small image of the chosen setting / diamond */
.prog button{align-items:center}
.or-stepimg{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;background:var(--bg2);overflow:hidden}
.or-stepimg img{width:100%;height:100%;object-fit:cover}.or-stepimg svg{width:26px;height:26px}
@media (max-width:760px){.or-stepimg{display:none}}
/* Protect this item (protect-this-item-rule.md §6.5): the shared care-box layout in Orynna's fonts and colours */
.or-pc{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--line);min-width:0;margin-top:4px}
.or-pc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.or-pc-t{display:flex;align-items:center;gap:12px;font-family:var(--f-d);font-size:24px;line-height:1.1;color:var(--ink)}
.or-pc-sh{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--ink);color:var(--bg)}
.or-pc-sh svg{width:18px;height:18px}
.or-pc-lk{font-size:12.5px;letter-spacing:.04em;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.or-pc-s{margin:-6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.or-pc-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:6px}
.or-pc-o{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:30px 10px 20px;background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer;text-align:center;font:inherit;transition:border-color .2s,background .2s}
.or-pc-o:hover{border-color:var(--line2)}
.or-pc-o.on{border-color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--ink)}
.or-pc-o:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.or-pc-r{position:absolute;top:12px;left:12px;width:14px;height:14px;border:1px solid var(--line2);border-radius:50%}
.or-pc-o.on .or-pc-r{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--bg2)}
.or-pc-i svg{width:24px;height:24px;color:var(--accent)}
.or-pc-n{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.or-pc-p{font-family:var(--f-d);font-size:26px;line-height:1}
.or-pc-u{font-size:11.5px;color:var(--muted)}
.or-pc-top{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 10px;background:var(--ink);color:var(--bg);font-size:9px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.or-pc-b{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:1px solid var(--line);background:var(--bg)}
.or-pc-bt{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.or-pc-bt svg{width:16px;height:16px;color:var(--ok)}
.or-pc-bl{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;font-size:13.5px;line-height:1.5}
.or-pc-bl li{position:relative;padding-left:16px}.or-pc-bl li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.or-pc-f{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted)}
.or-pc-f span::before{content:'\2713\00a0'}.or-pc-f .or-pc-fr{margin-left:auto}.or-pc-f .or-pc-fr::before{content:none}
.or-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)}
.or-pc-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg2);font-size:12px;color:var(--ink)}
.or-pc-badge svg{width:16px;height:16px}.or-pc-badge.off{color:var(--muted)}
.or-pc-it{display:flex;gap:14px;align-items:baseline;font-size:13px;color:var(--muted)}.or-pc-it span+span{font-family:var(--f-d);font-size:22px;color:var(--ink)}

html.or-pc-busy a[href="/checkout"]{opacity:.7;cursor:progress}
@media (max-width:820px){.or-pc{padding:18px 14px}.or-pc-g{grid-template-columns:repeat(2,minmax(0,1fr))}.or-pc-bl{grid-template-columns:1fr}.or-pc-f .or-pc-fr{margin-left:0}}
/* a collection's description (collection-description-rule.md, WhiteMoon option A in Orynna's fonts and colours):
   intro under the title; buying guide + FAQ after the pieces. Hidden where the server printed them until placed */
.col-desc-pre{display:none}
.cd-slot:empty{display:none}
.or-cd-intro{max-width:560px;margin:-6px auto clamp(26px,4vw,40px);font-size:15.5px;line-height:1.7;color:var(--muted)}
.or-cd-intro p{margin:0 0 10px}.or-cd-intro p:last-child{margin-bottom:0}.or-cd-intro a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.or-cd-more{border-top:1px solid var(--line);padding-block:104px}
.or-cd-in{display:grid;gap:96px}
.or-cd-guide,.or-cd-faq{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.or-cd-toc{position:sticky;top:130px;display:flex;flex-direction:column;gap:14px}
.or-cd-kick{color:var(--accent)}
.or-cd-big{font-family:var(--f-d);font-weight:400;font-size:clamp(40px,5vw,64px);line-height:1;margin:0;color:var(--ink)}
.or-cd-fq{font-size:clamp(32px,3.6vw,44px)}
.or-cd-toc ol{list-style:lower-roman;margin:10px 0 0;padding-left:1.6em;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.or-cd-toc ol a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}.or-cd-toc ol a:hover{border-color:var(--ink)}
.or-cd-s{border-top:1px solid var(--line);padding-block:28px}.or-cd-s:first-child{border-top:0;padding-top:0}
.or-cd-s h2{font-family:var(--f-d);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:0 0 14px;scroll-margin-top:130px;color:var(--ink)}
.or-cd-tx,.or-cd-a{font-size:15px;line-height:1.75;color:var(--muted)}
.or-cd-tx p,.or-cd-a p{margin:0 0 12px}.or-cd-tx ul,.or-cd-tx ol,.or-cd-a ul{margin:0 0 12px;padding-left:1.2em}.or-cd-tx a,.or-cd-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.or-cd-qs details{border-top:1px solid var(--line)}.or-cd-qs details:last-child{border-bottom:1px solid var(--line)}
.or-cd-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;font-family:var(--f-d);font-size:clamp(19px,1.8vw,22px);line-height:1.3;color:var(--ink)}
.or-cd-qs summary::-webkit-details-marker{display:none}
.or-cd-qs summary::after{content:'+';flex:0 0 auto;font-family:var(--f-b);font-size:22px;font-weight:300;line-height:1;color:var(--accent);transition:transform .2s}
.or-cd-qs details[open] summary::after{transform:rotate(45deg)}
.or-cd-qs summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.or-cd-a{padding:0 0 22px;max-width:680px}
@media (max-width:900px){.or-cd-more{padding-block:72px}.or-cd-in{gap:64px}.or-cd-guide,.or-cd-faq{grid-template-columns:1fr;gap:24px}.or-cd-toc{position:static}}
@media (prefers-reduced-motion:reduce){.or-cd-qs summary::after{transition:none}}
/* Step 27 (tap targets ≥ 44 px, 29 Oct re-check): the care box's "Learn what's covered", the PDP's "Length Guide", the
   sign-in page's "Create an account" and the bag's gift-wrap label get the same invisible 44 px hit area — no visible
   change. (The gift checkbox itself stays 22 px; its whole label row is the tap target.) */
@media (pointer:coarse),(max-width:900px){
 .or-pc-lk,.opt-h a,.acct p a,.check{position:relative}
 .or-pc-lk::after,.opt-h a::after,.acct p a::after,.check::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* Orynna image pack (user, 30 Oct 2026): the Everyday banner's picture has the model at the right; on a narrow
   screen keep her in the frame (the pack's note: about 80% across) */
@media (max-width:768px){.qband-bg{object-position:82% 30%}}

/* ── account pages (passwordless-account-spec.md, 31 Oct 2026): Seravine's structure in Orynna's look — the sign-in pages
   are an editorial panel beside a form card (stacked on phones), the account home a hero + cards. Orynna's tokens,
   square corners and hairlines; the panel / hero use the design's own band colour. ── */
.or-acct-wrap{padding-bottom:72px}
.or-acct{max-width:1180px;margin:24px auto 0;color:var(--ink)}
.or-acct__kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.or-acct__title{font-family:var(--f-d);font-weight:400;font-size:clamp(40px,4.4vw,60px);line-height:1.04;margin:0 0 18px}
.or-acct__title em{font-style:normal;color:var(--accent)}
.or-acct__crest{display:grid;place-items:center;width:76px;height:76px;flex:0 0 auto;border:1px solid currentColor;border-radius:50%;font:400 34px/1 var(--f-d);opacity:.9}
.or-acct__note{margin:0 0 22px;padding:12px 16px;border:1px solid var(--line2);border-left:3px solid var(--ok);background:var(--surface);font-size:14px;line-height:1.55;color:var(--ink)}
.or-acct__note--err{border-left-color:var(--err);color:var(--err)}
.or-acct__lede{max-width:46ch;margin:0 0 26px;font-size:15px;line-height:1.7;color:var(--muted)}
.or-acct form{display:grid;gap:18px}
.or-acct .field input{min-height:52px}
.or-acct .field input::placeholder{color:var(--muted);opacity:.55}
.or-acct .field input:disabled{background:var(--bg2);color:var(--muted);cursor:not-allowed}
.or-acct__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.or-acct__foot{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.or-acct__foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* sign-in pages */
.or-acct--auth{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border:1px solid var(--line2);background:var(--surface)}
.or-acct__panel{position:relative;display:flex;flex-direction:column;padding:clamp(36px,4.6vw,64px);background:radial-gradient(120% 90% at 0% 0%,#86705F 0%,var(--band) 50%,#4A3B30 100%);color:var(--band-ink);min-height:560px;isolation:isolate}
.or-acct__panel::after{content:"";position:absolute;inset:18px;border:1px solid rgba(246,235,224,.24);pointer-events:none;z-index:-1}
.or-acct__panel .or-acct__kicker{color:var(--glow);margin-top:36px}
.or-acct__line{font:400 clamp(30px,2.9vw,42px)/1.15 var(--f-d);margin:0 0 auto;max-width:15ch}
.or-acct__points{list-style:none;margin:44px 0 0;padding:0}
.or-acct__points li{position:relative;padding:15px 0 15px 26px;border-top:1px solid rgba(246,235,224,.18);font-size:15px;line-height:1.55;color:rgba(246,235,224,.86)}
.or-acct__points li::before{content:"";position:absolute;left:2px;top:22px;width:7px;height:7px;background:var(--glow);transform:rotate(45deg)}
.or-acct__card{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,76px)}
/* account home, addresses, order */
.or-acct__hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,36px);padding:clamp(28px,4vw,48px);margin:0 0 24px;background:radial-gradient(120% 140% at 0% 0%,#86705F 0%,var(--band) 50%,#4A3B30 100%);color:var(--band-ink)}
.or-acct__hero .or-acct__kicker{color:var(--glow);margin-bottom:10px}
.or-acct__hero .or-acct__title{margin:0 0 8px}
.or-acct__hero .or-acct__title em{color:var(--glow)}
.or-acct__email{margin:0;color:rgba(246,235,224,.75);font-size:15px;overflow-wrap:anywhere}
.or-acct__out{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border:1px solid rgba(246,235,224,.45);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--band-ink);transition:background .3s,color .3s}
.or-acct__out:hover{background:var(--band-ink);color:var(--band)}
.or-acct__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.or-acct__head .or-acct__title{margin:0 0 10px}
.or-acct__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"orders addresses" "details prefs";gap:24px}
.or-acct__grid--two,.or-acct__grid--order{grid-template-areas:none}
.or-acct__grid--two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.or-acct__box{border:1px solid var(--line2);padding:clamp(24px,3vw,36px);background:var(--surface);min-width:0}
.or-acct__box--orders{grid-area:orders}.or-acct__box--addresses{grid-area:addresses}.or-acct__box--details{grid-area:details}.or-acct__box--prefs{grid-area:prefs}
.or-acct__box-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.or-acct__box-head h2{font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;margin:0;font-family:var(--f-b)}
.or-acct__count{font-size:13px;color:var(--muted)}
.or-acct__label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.or-acct__muted{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 18px}
.or-acct__address{font-style:normal;line-height:1.75;margin:0 0 24px}
.or-acct__orders,.or-acct__items{list-style:none;margin:-8px 0 0;padding:0}
.or-acct__orders li+li,.or-acct__items li+li{border-top:1px solid var(--line)}
.or-acct__order{display:grid;grid-template-columns:minmax(0,1fr) auto auto 16px;align-items:center;gap:18px;margin:0 -14px;padding:16px 14px;transition:background .3s}
.or-acct__order:hover{background:var(--bg2)}
.or-acct__order-main,.or-acct__item-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.or-acct__order-main strong{font:400 22px/1.2 var(--f-d)}
.or-acct__order-main span,.or-acct__item-main span{font-size:13px;color:var(--muted)}
.or-acct__order-status{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin:0}
.or-acct__pill{color:var(--accent);border-color:var(--accent)}
.or-acct__order-total{font-weight:500;font-size:15px;white-space:nowrap}
.or-acct__arrow{color:var(--accent);transition:transform .3s}
.or-acct__order:hover .or-acct__arrow{transform:translateX(4px)}
.or-acct__empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0 4px}
.or-acct__empty-title{font:400 30px/1.2 var(--f-d);margin:0}
.or-acct__empty p:not(.or-acct__empty-title){color:var(--muted);max-width:42ch;line-height:1.65;margin:0 0 20px}
.or-acct__pref+.or-acct__pref{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
.or-acct__links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0}
.or-acct__addr+.or-acct__addr{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
.or-acct__addr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.or-acct__addr .or-acct__address{margin:0 0 12px}
.or-acct__addr-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 24px}
.or-acct__addr-actions details{flex:1 1 100%;order:2}
.or-acct__addr-actions summary{cursor:pointer;list-style:none;display:inline-flex}
.or-acct__addr-actions summary::-webkit-details-marker{display:none}
.or-acct__addr-actions form{display:block}
.or-acct__del{color:var(--err);background:none;border:0;padding:0;cursor:pointer}
.or-acct__item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0}
.or-acct__item-art{width:72px;height:72px;background:var(--bg2);overflow:hidden}
.or-acct__item-art img{width:100%;height:100%;object-fit:cover;display:block}
.or-acct__item-main strong{font-weight:500;font-size:15px}
.or-acct__sum>div{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.or-acct__sum-tot{border-top:1px solid var(--line);margin-top:6px;padding-top:14px!important;font-size:16px!important;font-weight:500}
.or-acct__box>.btn{margin-top:22px}
@media (max-width:899px){
  .or-acct__grid,.or-acct__grid--two{grid-template-columns:minmax(0,1fr);grid-template-areas:"orders" "addresses" "details" "prefs"}
  .or-acct__grid--two,.or-acct__grid--order{grid-template-areas:none}
}
@media (max-width:819px){
  .or-acct--auth{grid-template-columns:minmax(0,1fr)}
  .or-acct__card{order:1}
  .or-acct__panel{order:2;min-height:0}
  .or-acct__line{margin-bottom:0}
  .or-acct__points{margin-top:28px}
}
@media (max-width:599px){
  .or-acct{margin-top:16px}
  .or-acct__card{padding:30px 22px 34px}
  .or-acct__panel{padding:34px 26px}
  .or-acct__panel::after{inset:12px}
  .or-acct__crest{width:56px;height:56px;font-size:26px}
  .or-acct__row{grid-template-columns:minmax(0,1fr)}
  .or-acct__hero{grid-template-columns:minmax(0,1fr);gap:18px}
  .or-acct__hero .or-acct__crest{display:none}
  .or-acct__out{justify-self:start}
  .or-acct__box{padding:22px 18px}
  .or-acct__order{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;margin:0 -8px;padding:14px 8px}
  .or-acct__order-status{grid-column:1;grid-row:2;justify-content:flex-start}
  .or-acct__arrow{display:none}
  .or-acct__item{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}
  .or-acct__item-art{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.or-acct__order,.or-acct__arrow,.or-acct__out{transition:none}}

/* a listing with nothing to filter (the store has no piece in it yet): no bare filter column — the "New designs are on
   their way" note takes the full width and sits centred, as on the other empty pages */
.coll:has(#cfGrid > .empty):not(:has(.filters h4)){grid-template-columns:minmax(0,1fr)}
.coll:has(#cfGrid > .empty):not(:has(.filters h4)) .filters{display:none}
.wrap:has(.coll #cfGrid > .empty):not(:has(.filters h4)) .filter-open{visibility:hidden}

/* phones and tablets — the responsive sweep of 31 Oct (tools/orynna/clipscan.mjs): nothing runs past the screen edge.
   The design itself clips these at 320–414 (its 4Cs and shape grids use 1fr columns that cannot shrink below the
   64 px display word / the shape label) — fixed here, the look kept */
.wrap.empty{padding-inline:clamp(16px,4vw,40px)}
.wrap.empty>*{max-width:100%;min-width:0}
@media (max-width:900px){
 .cs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs>div{min-width:0}
 .cs .l{font-size:clamp(34px,12vw,64px)}
 .cs h3{font-size:clamp(20px,6vw,26px)}
}
@media (max-width:600px){
 .shapes.photo{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
 .shape-ph{padding-inline:0;font-size:9px;letter-spacing:.06em}
 .shape-ph img{max-width:100%}
}
@media (max-width:360px){.shape-ph{font-size:8px;letter-spacing:.04em}}
/* footer on phones: two columns with the brand across both — the design's own phone footer, not one long column */
@media (max-width:560px){.or-foot-cols{grid-template-columns:1fr 1fr}.or-foot-cols .foot-brand{grid-column:span 2}}
@media (max-width:600px){.wrap.empty .search-bar input{font-size:clamp(18px,5.5vw,34px)}}
@media (max-width:560px){.or-foot-cols ul{font-size:12.5px}}  /* the contact e-mail fits its half column in one piece */

/* main nav row: its <ul> carries .wrap (max-width + gutters), but the design's `.mainnav>ul{margin:0;padding:0}` wins on
   specificity — above 1280 px the row sat at the left edge instead of the middle (Harsh, 1920 screenshot, 31 Oct) */
.mainnav>ul.wrap{margin-inline:auto;padding-inline:var(--gut)}

/* real diamond shapes (user, 31 Oct 2026): every shape is the render from D:\diamond-shapes.zip (OR.shapeImg). The
   sizes follow the design's line icons in each place, a little larger where the facets need room to read */
.or-shi{display:block;object-fit:contain;flex:none;width:40px;height:40px;filter:drop-shadow(0 3px 5px rgba(60,40,25,.14))}
.shape-btn .or-shi{width:40px;height:40px}
.forge .shape-btn .or-shi,.seg .shape-btn .or-shi{width:28px;height:28px}
.forge .shape-btn .or-shi{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.fshapes .shape-btn .or-shi{width:30px;height:30px}
.dtbl .sh .or-shi{width:22px;height:22px;display:inline-block;vertical-align:middle;margin-right:8px}
.shape-guide .or-shi{width:48px;height:48px}
.or-shp img{width:34px;height:34px}
/* mega menu "Shop by Shape" + the phone drawer: the shape before its name */
.mega a.or-mshp{display:inline-flex;align-items:center;gap:12px}
.mega a.or-mshp .or-shi{width:24px;height:24px}
.mega ul:has(.or-mshp){gap:5px}
.drawer .or-dshp{gap:10px 14px}
.drawer .or-dshp a.or-mshp{display:inline-flex;align-items:center;gap:7px;min-width:calc(50% - 8px)}
.drawer .or-dshp a.or-mshp .or-shi{width:22px;height:22px}

/* hero: the wordmark alone (side tagline + (01)–(04) list removed, Harsh 31 Oct) — one centred column at every width */
.hero-top{grid-template-columns:1fr;justify-items:center;text-align:center}

/* the header stays on screen while scrolling (Harsh, 31 Oct 2026: "nav bar scroll karne par chala ja raha he"). The
   design's `body{overflow-x:hidden}` (with html clipped) turns <body> into the scroll container, so .site-head's
   position:sticky never engaged — clip keeps the side overflow hidden without creating a scroll container */
html body{overflow-x:clip}
/* back-to-top sits just above the "Call now" button, bottom-left (Harsh, 31 Oct) — not above the chat bubble */
.or-top{right:auto;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px)}
@media (max-width:900px){body.or-has-bar .or-top{bottom:144px}}
/* with the header sticky, an in-page jump (/#faq, #reviews …) lands below it, not under it */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 124px)}
@media (max-width:900px){html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}}

/* search: one close button only — the browser's own blue "clear" X of type=search sat beside the design's close X */
.search-bar input[type=search]::-webkit-search-cancel-button,.search-bar input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* "View all results" and its arrow stay on one line */
.search-res a.or-qall{display:inline-flex;grid-auto-flow:column;white-space:nowrap;justify-self:start}  /* .search-res a is a grid — the arrow dropped below */

/* home: with "A little more to love" removed (Harsh, 31 Oct) the trust strip met the Design Studio band edge to edge —
   it keeps the breathing room that section's top padding used to give */
.wrap:has(>.trust):has(+ .forge){padding-bottom:clamp(56px,8vw,104px)}

/* Design Studio band: the matched store ring's own photo in the card's thumbnail (white plate, whole ring visible) */
.forge-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}

/* Design Studio band fits one screen on desktop (Harsh, 31 Oct 2026: "windows me fit nahi ho raha") — it stacked title,
   980 px arch, card, three dial rows and the button (≈1,470 px; 800 px visible under the sticky header at 1920×1080).
   From 1100 px: two columns — the arch with the summary card under it on the left; title, the three choices and the
   button on the right. Same colours, type, chips and card; tablets and phones keep the single column. */
@media (min-width:1100px){
 .forge{padding-block:clamp(48px,6vh,96px)}
 .forge .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(36px,4vw,72px);align-items:start}
 .forge-top{grid-column:2;grid-row:1;justify-items:start;text-align:left;margin-bottom:6px;gap:10px}
 .forge-top h2{font-size:clamp(34px,3.3vw,52px);max-width:none}
 .forge-arch{grid-column:1;grid-row:1/4;align-self:end;width:100%;max-width:none;aspect-ratio:4/3.5;border-radius:999px 999px 0 0;margin:0}
 .forge-card{grid-column:1;grid-row:4;width:100%;max-width:none;margin:0;grid-template-columns:110px 1fr 1fr}
 .forge-card>.forge-thumb{grid-row:1/3;width:auto;height:100%;min-height:120px}
 .forge-card>div:nth-child(4){border-left:0}
 .forge-card>div:nth-child(n+4){border-top:1px solid #3A2518}
 .forge-card>div{padding:14px 18px}
 .forge-card b{font-size:20px}
 .dials{grid-column:2;grid-row:2/4;max-width:none;width:100%;margin:18px 0 0}
 .dial{grid-template-columns:40px 1fr;row-gap:10px;padding:14px 0}
 .dial-opts{grid-column:1/-1}
 .forge-cta{grid-column:2;grid-row:4;align-self:center;max-width:none;margin:0;justify-content:flex-start}
 .forge-thumb img{object-fit:cover}
}
@media (min-width:1100px){
 .forge .wrap{max-width:min(1440px,100%);grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
 .forge{padding-block:clamp(40px,5vh,96px)}
 .forge-top{margin-bottom:0}
 .forge-top h2{font-size:clamp(30px,2.5vw,42px);white-space:nowrap}
 .forge-top p{margin-top:-2px}
 .forge .shape-btn{min-width:56px;padding:7px 4px;gap:7px}
 .forge .fchip{padding:7px 13px;font-size:12.5px}
 .dial{padding:11px 0;row-gap:8px}
 .dial-n{font-size:22px}
 .forge-card>.forge-thumb{min-height:0}
 .forge-card>div{padding:11px 18px}
 .forge-card b{font-size:19px}
}
@media (min-width:1100px) and (max-width:1499px){.forge .shape-btn{min-width:50px;padding-inline:2px;font-size:8.5px;letter-spacing:.1em}}
/* short desktop screens (laptops, ≤ 900 px tall): the arch is held to what is left under the header and the card, the
   spacing tightens — the whole band still fits one screen */
@media (min-width:1100px) and (max-height:900px){
 .forge{padding-block:32px}
 .forge-arch{max-height:calc(100svh - 111px - 100px - 64px - 24px)}
 .forge-top{gap:6px}
 .forge-top h2{font-size:clamp(28px,2.4vw,38px)}
 .dials{margin-top:10px}
 .dial{padding:8px 0;row-gap:6px}
 .forge .shape-btn{padding-block:5px;gap:5px}
 .forge .shape-btn .or-shi{width:24px;height:24px}
 .forge .fchip{padding-block:6px}
 .forge-card>div{padding:8px 16px}
 .forge-card b{font-size:17px}
}
@media (min-width:1100px) and (max-height:900px){
 .forge-arch{max-height:calc(100svh - 111px - 100px - 64px - 64px)}
 .forge .fchip{padding-inline:11px;font-size:12px}
}
/* FORGE-STEPS — Design Studio on phones / tablets (Harsh, 5 Nov 2026: picked option D, "Step by step", of the 5 mock-ups in
   changes-runs/2026-10-23-1844/mockups/forge-mobile; replaces the 4 Nov pinned summary card). Under 1100 px the band
   fits about one screen: the title, then the arch photo beside the summary list (Shape / Setting / Metal / In our
   collection — a row opens its step), then three tabs and ONE dial at a time, Back · dots · Next, and the button on the
   last step. Picking a shape or a setting opens the next step (or-over.js fsGo). State = data-fstep on .forge.
   From 1100 px the tabs and Back / Next are hidden and the desktop layout is unchanged. */
@media (min-width:1100px){.or-ftabs,.or-fnav{display:none}}
@media (max-width:1099px){
 .forge .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:14px;align-items:center}
 .forge .forge-top{grid-column:1/-1;margin-bottom:0;gap:8px}
 .forge .forge-top h2{font-size:clamp(26px,7.4vw,34px)}
 .forge .forge-arch{grid-column:1;grid-row:2;width:100%;max-width:none;height:auto;aspect-ratio:3/3.4;margin:14px 0 0;border-radius:999px 999px 0 0}
 .forge .forge-card{grid-column:2;grid-row:2;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);margin:14px 0 0;max-width:none;width:auto;border:0;background:none}
 .forge .forge-card>.forge-thumb{display:none}
 .forge .forge-card>div{grid-column:1;padding:5px 0 6px;gap:1px;border:0;border-bottom:1px solid #3A2518;min-width:0;cursor:pointer}
 .forge .forge-card>div:last-child{cursor:default}
 .forge .forge-card small{letter-spacing:.16em}
 .forge .forge-card b{font-size:17px;overflow-wrap:anywhere;transition:color .2s}
 .forge[data-fstep="0"] .forge-card>div:nth-child(2) b,.forge[data-fstep="1"] .forge-card>div:nth-child(3) b,.forge[data-fstep="2"] .forge-card>div:nth-child(4) b{color:#D9A47A}
 .or-ftabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-bottom:1px solid #3A2518}
 .or-ftabs button{padding:11px 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#A88E78;border-bottom:2px solid transparent;margin-bottom:-1px}
 .or-ftabs i{font-style:normal;font-family:var(--f-d);color:#D9A47A;margin-right:6px;font-size:14px;letter-spacing:0}
 .forge[data-fstep="0"] .or-ftabs button:nth-child(1),.forge[data-fstep="1"] .or-ftabs button:nth-child(2),.forge[data-fstep="2"] .or-ftabs button:nth-child(3){color:#F3E6D8;border-bottom-color:#D9A47A}
 .forge .dials{grid-column:1/-1;margin:0;max-width:none;width:100%}
 .forge .dials>.dial{display:none;border-top:0;padding:12px 0 4px}
 .forge[data-fstep="0"] .dials>.dial:nth-child(1),.forge[data-fstep="1"] .dials>.dial:nth-child(2),.forge[data-fstep="2"] .dials>.dial:nth-child(3){display:block}
 .forge .dials .dial-n,.forge .dials .dial-l{display:none}
 .or-fnav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:6px}
 .or-fnav button{font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:12px 18px;border:1px solid #4A3020;color:#E8D6C5}
 .or-fnav .or-fnx{background:#F3E6D8;color:#1B0F09;border-color:#F3E6D8}
 .forge[data-fstep="0"] .or-fbk,.forge[data-fstep="2"] .or-fnx{visibility:hidden}
 .or-fdots{display:flex;gap:6px}.or-fdots i{width:6px;height:6px;border-radius:50%;background:#5A3D2A;transition:background .2s}
 .forge[data-fstep="0"] .or-fdots i:nth-child(1),.forge[data-fstep="1"] .or-fdots i:nth-child(2),.forge[data-fstep="2"] .or-fdots i:nth-child(3){background:#D9A47A}
 .forge .forge-cta{grid-column:1/-1;margin-top:18px}
 .forge:not([data-fstep="2"]) .forge-cta{display:none}
}

/* home "Modern Heirlooms" = the grand arch triptych (option 2 of the five arcade mock-ups Harsh chose, 31 Oct 2026):
   a framed centre arch between two smaller arches, names under each; phones: the centre arch on top, the two below */
.or-tri{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:clamp(14px,2.4vw,36px);align-items:end}
.or-tri>a{display:grid;gap:14px;justify-items:center;text-align:center}
.or-arch{width:100%;border-radius:999px 999px 0 0;overflow:hidden;background:var(--bg2)}
.or-arch img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s}
.or-tri>a:hover .or-arch img{transform:scale(1.04)}
.or-tri-s .or-arch{aspect-ratio:3/4.3}
.or-tri-m .or-arch{aspect-ratio:3/4.1;outline:1px solid var(--line2);outline-offset:10px}
.or-tri b{font-family:var(--f-d);font-weight:400;font-size:20px}
.or-tri-m b{font-size:24px;margin-top:6px}
@media (max-width:760px){
 .or-tri{grid-template-columns:1fr 1fr;row-gap:28px}
 .or-tri-m{grid-column:1/-1;order:-1}
 .or-tri-m .or-arch{outline-offset:7px}
 .or-tri b{font-size:17px}.or-tri-m b{font-size:21px}
}

/* footer in the theme's brown (Harsh, 31 Oct 2026) — the band colour of the announcement strip and the account panel,
   painted edge to edge behind the centred footer; cream text, soft cream lines, a warm accent on hover */
footer.wrap{background:var(--band);color:var(--band-ink);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
footer .join{border-top:0}
footer .join p,footer .foot h6,footer .foot-brand p,footer .foot-bot{color:rgba(246,235,224,.8)}
footer .foot,footer .foot-bot{border-top-color:rgba(246,235,224,.2)}
footer a{color:var(--band-ink)}
footer a:hover,footer .foot ul a:hover{color:#F1C9A5}
footer .field-line{border-color:rgba(246,235,224,.5)}
footer .field-line input{color:var(--band-ink)}
footer .field-line input::placeholder{color:rgba(246,235,224,.7)}
footer .field-line button{color:var(--band-ink)}
/* phones: the Contact column (phone, e-mail, address) takes the full width so the e-mail never breaks mid-word */
@media (max-width:560px){.or-foot-cols>div:nth-child(2){grid-column:span 2}.or-foot-cols ul{font-size:13.5px}}

/* home values row (Responsibly grown · Expert craftsmanship · Certified quality · For a lifetime) in the theme's brown, like
   the footer (Harsh, 31 Oct 2026: "is part me bhi colour add kar do") — a full-width band, cream words, warm icons; the
   space before the FAQ stays outside the band */
section.wrap:has(>.values){background:var(--band);color:var(--band-ink);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);padding-block:clamp(40px,5vw,64px)!important;margin-bottom:clamp(56px,8vw,104px)}
section.wrap:has(>.values) .values svg{color:#F1C9A5}
section.wrap:has(>.values) .values b{color:var(--band-ink)}
section.wrap:has(>.values) .values span{color:rgba(246,235,224,.8)}
section.wrap:has(>.values) .values div+div{border-left-color:rgba(246,235,224,.22)}

/* "The Orynna Edit" on the theme's brown, like the values band and the footer (Harsh, 31 Oct 2026; its "View all" removed
   in the generator) — cream words, warm accent, the product photos stay on their white plates */
.or-edit{background:var(--band);color:var(--band-ink);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);padding-block:clamp(48px,6vw,88px)!important}
.or-edit .center-head .eyebrow{color:rgba(246,235,224,.8)}
.or-edit .center-head .eyebrow::before,.or-edit .center-head .eyebrow::after{background:rgba(246,235,224,.35)}
.or-edit h2{color:var(--band-ink)}
.or-edit h2 em{color:#F1C9A5}
.or-edit .tabs button{color:rgba(246,235,224,.7)}
.or-edit .tabs button:hover,.or-edit .tabs button.on{color:var(--band-ink)}
.or-edit .tabs button.on{border-color:#F1C9A5}
.or-edit .card-name,.or-edit .price{color:var(--band-ink)}
.or-edit .card-sub,.or-edit .was{color:rgba(246,235,224,.78)}
.or-edit .swatch{box-shadow:0 0 0 1px rgba(246,235,224,.4)}
.or-edit .swatch.on{box-shadow:0 0 0 1px var(--band),0 0 0 2px var(--band-ink)}
.or-edit{margin-bottom:clamp(56px,8vw,104px)}   /* the next section ("Our speciality") has no top padding of its own */

/* "Call now": softly rounded corners (Harsh, 31 Oct 2026); on phones it stays the round icon button */
@media (min-width:561px){.or-call{border-radius:10px}}

/* "The Orynna Edit" cards on the brown band (Harsh, 31 Oct 2026: white photos and cream words straight on the brown did not
   look good): each piece is a cream tile — photo on its white plate inside a 10 px cream border, name / meta / price back in
   the design's ink and muted, a soft lift on hover */
.or-edit .card{background:var(--surface);padding:10px 10px 16px;gap:12px;box-shadow:0 1px 0 rgba(0,0,0,.08);transition:transform .35s ease,box-shadow .35s ease}
.or-edit .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(0,0,0,.55)}
.or-edit .card-body{padding:0 6px}
.or-edit .card-name,.or-edit .price{color:var(--ink)}
.or-edit .card-sub,.or-edit .was{color:var(--muted)}
.or-edit .swatch{box-shadow:0 0 0 1px var(--line2)}
.or-edit .swatch.on{box-shadow:0 0 0 1px var(--surface),0 0 0 2px var(--ink)}
.or-edit .card>.wish{top:18px;right:18px}
.or-edit .card .badge{top:20px;left:20px}
@media (prefers-reduced-motion:reduce){.or-edit .card,.or-edit .card:hover{transition:none;transform:none}}

/* "A story in every facet" pictures as arches, like the Modern Heirlooms triptych (Harsh, 31 Oct 2026): a framed centre arch
   between two smaller arches, same proportions; phones: the centre arch full width on top, the two below */
.spec-media{grid-template-columns:1fr 1.35fr 1fr;gap:clamp(14px,2.4vw,36px)}
.spec-media .art{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:3/4.3}
.spec-media .art:first-child{aspect-ratio:3/4.3}
.spec-media .big{height:auto;aspect-ratio:3/4.1;outline:1px solid var(--line2);outline-offset:10px;overflow:hidden}
@media (max-width:760px){
 .spec-media{grid-template-columns:1fr 1fr;row-gap:28px}
 .spec-media .big{grid-column:span 2;grid-row:1;aspect-ratio:4/4.6;outline-offset:7px}
}

/* home hero tiles as an arcade, like the Modern Heirlooms and "A story in every facet" arches (Harsh, 31 Oct 2026): five
   arches on one base line, tallest in the middle (Earrings, framed, still rising into the "Lab-grown diamonds" line),
   stepping down to the sides; names and "Explore" unchanged below */
.collage{grid-template-columns:1fr 1fr 1.12fr 1fr 1fr}
.tile .art{border-radius:999px 999px 0 0;overflow:hidden}
.tile:nth-child(1) .art,.tile:nth-child(5) .art{height:auto;aspect-ratio:3/4.1}
.tile:nth-child(2) .art,.tile:nth-child(4) .art{height:auto;aspect-ratio:3/4.6}
.tile:nth-child(3) .art{height:auto;aspect-ratio:3/5.2;margin-top:-110px;outline:1px solid var(--line2);outline-offset:8px;overflow:hidden}
@media (max-width:900px){
 .tile:nth-child(n) .art{height:auto;aspect-ratio:3/4.2}
 .tile:nth-child(3) .art{margin-top:0;outline-offset:6px}
 .collage{padding-top:8px}
}

/* hero arcade, second pass (Harsh, 31 Oct 2026: Rings in the middle, and tiles 1 and 5 as big as the middle one): three tall
   framed arches — Earrings, Rings, Pendants — rising into the "Lab-grown diamonds" line, with Necklaces and Bracelets as the
   two smaller arches between them */
@media (min-width:901px){
 .collage{grid-template-columns:1.12fr 1fr 1.12fr 1fr 1.12fr}
 .tile:nth-child(1) .art,.tile:nth-child(3) .art,.tile:nth-child(5) .art{height:auto;aspect-ratio:3/5.2;margin-top:-110px;outline:1px solid var(--line2);outline-offset:8px}
 .tile:nth-child(2) .art,.tile:nth-child(4) .art{height:auto;aspect-ratio:3/4.6;margin-top:0;outline:0}
}
/* hero tiles carry the navbar's names (Harsh, 4 Nov 2026): "Engagement Rings" / "Wedding Bands" wrapped to two lines at
   20px beside "Explore →" and lifted those two arches off the base line. Each name stays on one line, one size for all
   five tiles at a width (17px at 1366+, down to 13px at 901–1024; 16–20px in the phone / tablet carousel) */
.tile-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:901px){.tile-name b{font-size:clamp(13px,1.28vw,17px)}}
@media (max-width:900px){.tile-name b{font-size:clamp(16px,4.3vw,20px)}}

/* header icons only (Harsh, 31 Oct 2026): search + account | logo | store + wishlist + bag — icons a touch larger and evenly
   spaced so the row reads as one set on both sides of the logo */
@media (min-width:901px){.head-l,.head-r{gap:26px}.head-l .ico,.head-r .ico{width:20px;height:20px}}

/* collection browse orbs: a row wider than the page (Wedding Bands has nine options + All) was centred inside its own
   scroller, which cuts the first orb off on the left where no scroll can reach — the row now starts at the left edge
   when it overflows and stays centred when it fits */
.orbs{justify-content:flex-start}
.orbs>:first-child{margin-left:auto}
.orbs>:last-child{margin-right:auto}
/* nine options or more (Wedding Bands): slightly smaller orbs and tighter spacing so the whole row fits on desktop */
@media (min-width:901px){
 .orbs:has(>:nth-child(9)){gap:clamp(10px,1.4vw,22px)}
 .orbs:has(>:nth-child(9)) .orb-img{width:clamp(68px,6.2vw,92px)}
 .orbs:has(>:nth-child(9)) .orb-l{font-size:10px;letter-spacing:.12em}
}

/* collection page polish (Harsh, 31 Oct 2026: "collection page ka design sahi nahi he") */
/* 1 · the filter column stays beside the grid while scrolling (it stretched to the grid's height, so sticky never moved) */
@media (min-width:901px){.coll>.filters{align-self:start;top:130px;max-height:calc(100vh - 150px);overflow-y:auto;scrollbar-width:thin}}
/* 2 · product cards as cream tiles (like The Orynna Edit): the photo on its white plate inside a fine frame, quieter name */
#cfGrid .grid .card{background:var(--surface);border:1px solid var(--line);padding:10px 10px 14px;transition:transform .35s ease,box-shadow .35s ease}
#cfGrid .grid .card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(60,40,25,.45)}
#cfGrid .grid .card-body{padding:0 4px}
#cfGrid .grid .card-name{font-size:18px;line-height:1.2}
#cfGrid .grid .card>.wish{top:18px;right:18px}
#cfGrid .grid .card .badge{top:20px;left:20px}
@media (prefers-reduced-motion:reduce){#cfGrid .grid .card,#cfGrid .grid .card:hover{transition:none;transform:none}}
/* 3 · phones: two pieces a row instead of one 340 px card; the help tile spans the row */
@media (max-width:600px){
 #cfGrid .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 #cfGrid .grid .card{padding:6px 6px 10px}
 #cfGrid .grid .card-name{font-size:14.5px}
 #cfGrid .grid .card-sub{font-size:11px}
 #cfGrid .grid .price{font-size:13px}
 #cfGrid .grid .card>.wish{top:10px;right:10px;width:30px;height:30px}
 #cfGrid .grid .card .badge{top:12px;left:12px;font-size:8.5px;padding:3px 6px}
 #cfGrid .grid .sw{gap:5px}#cfGrid .grid .swatch{width:14px;height:14px}
}
/* 4 · browse orbs: a store packshot sits whole on its white plate (it was cropped to a sliver); the pack's photographs fill */
.orb-img{background:#fff}
.orb-img img:not([src*="/or/pack/"]){object-fit:contain;padding:12%}

/* image pack v2 (Harsh, 31 Oct 2026, orynna-theme-assets.zip): the new "Made to be worn" banner (12) is a 3:1 picture with its
   blank space on the left — centred on desktop, 75 % across on narrow screens (the pack's placement guide) */
.qband-bg{object-position:50% 50%}
@media (max-width:768px){.qband-bg{object-position:75% 50%}}

/* collection browse options as ARCHES (Harsh, 31 Oct 2026: "ye jo round he uski design change kar do … is tarike ka design",
   pointing at the home heirloom triptych) — the five kinds' pages and /collections/all. Same language as .or-arch: a full
   round top on a flat foot, the picture filling it; the chosen option wears the triptych's fine offset frame instead of the
   accent ring; hover slowly enlarges the picture instead of lifting the circle */
.orbs{gap:clamp(12px,1.9vw,30px);padding:12px 10px 6px;align-items:start}
.orb{gap:12px}
.orb-img{width:clamp(78px,7.4vw,116px);aspect-ratio:3/4;border-radius:999px 999px 0 0;box-shadow:none;outline:1px solid transparent;outline-offset:5px;transition:outline-color .3s}
.orb-img img{transition:transform 1s}
.orb:hover .orb-img{transform:none}
.orb:hover .orb-img img{transform:scale(1.05)}
.orb.on .orb-img{box-shadow:none;outline-color:var(--line2)}
.orb.on .orb-l{color:var(--accent)}
@media (min-width:901px){
 .orbs:has(>:nth-child(9)){gap:clamp(10px,1.3vw,22px)}
 .orbs:has(>:nth-child(9)) .orb-img{width:clamp(70px,6vw,96px)}
}
@media (max-width:600px){.orb-img{width:76px;outline-offset:4px}.orb{gap:10px}}
@media (prefers-reduced-motion:reduce){.orb:hover .orb-img img{transform:none}}

/* no "All" option in the browse row (Harsh, 31 Oct 2026: "all ka option nikal do taki thodi jagah ho jaye or baki sare bade
   ho jaye") — the collection itself is "all"; the freed space goes to bigger arches. Up to 7 options: up to 136 px wide;
   Wedding Bands' 9: up to 112 px, still one row on desktop */
.orbs{gap:clamp(14px,2vw,32px)}
.orb-img{width:clamp(84px,8.6vw,136px)}
@media (min-width:901px){
 .orbs:has(>:nth-child(9)){gap:clamp(12px,1.5vw,18px)}
 .orbs:has(>:nth-child(9)) .orb-img{width:clamp(80px,7.6vw,112px)}
}
@media (max-width:600px){.orb-img{width:84px}}

/* GRPB-HOVER-CARE (Harsh, 31 Oct 2026 — group-b-card-hover-and-drawer-care.md) */
/* part 1 · a product card's full name in a dark box above it (desktop pointers; tools/orynna/or-over.js titleTip) —
   the theme's ink on its cream, the body font, an arrow at the name; touch screens: no box, the name wraps whole */
.or-tip{position:absolute;left:0;top:0;z-index:9999;box-sizing:border-box;padding:10px 14px;border-radius:6px;background:var(--ink);color:var(--bg);font:400 14px/1.45 var(--f-b);letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 8px 24px rgba(43,35,30,.22);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s}
.or-tip.is-on{opacity:1;visibility:visible}
.or-tip::after{content:"";position:absolute;top:100%;left:var(--tip-arrow,22px);transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--ink)}
.card-name.is-tipped{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* (touch screens used to lift the clamp here; since CARD-TITLE, 4 Nov, the clamp holds at every width — block at the end) */
/* part 2 · the second photo over the first, same frame and fit; it fades in on the image hover once loaded */
.card-media .art img.or-i2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none}
@media (hover:hover) and (pointer:fine){.card-media:hover .art img.or-i2.ld{opacity:1}}
@media not ((hover:hover) and (pointer:fine)){.card-media .art img.or-i2{display:none}}
/* part 3 · the care plan's own line in the bag drawer: the shield whole on the ink, steppers faded (they follow the piece) */
.or-pc-li .art{background:var(--ink);display:block}
.or-pc-li .art img{object-fit:contain;padding:16%}
.or-pc-li .qty button:disabled{opacity:.35;cursor:default}
.or-pc-u{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* browse-row category cards (user, 31 Oct 2026, orynna-35-category-cards-upload.zip): each option's own 800 × 1000 picture
   fills its arch, centred (the zip's 50% 50%) — not the white-plate "contain" kept for a store packshot */
.orb-img img[src*="/or/cards/"]{object-fit:cover;object-position:50% 50%;padding:0}

/* product page, as thecaratstudio.com's (Harsh, 2 Nov 2026):
   1 · "Photos" / "360° / 3D" (/ "Try On" on rings) above the picture — the demo's bordered caps buttons with their icons, the
       chosen one tinted; shown when the product has a 3D link from a host in the section's "Allowed outside media hosts"
   2 · the pictures stay beside the details while the shopper scrolls them (desktop): the design made .gal sticky, but as a
       grid item it stretched to the row's full height, so it never moved — it now starts at the top and sticks under the
       111 px header until the details end */
.or-pdp .or-tabs{gap:8px;margin:0 0 2px}
.or-pdp .or-tabs button{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:9px 15px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.or-pdp .or-tabs button svg{width:16px;height:16px;flex:0 0 auto}
.or-pdp .or-tabs button:hover{border-color:var(--accent)}
.or-pdp .or-tabs button.on{border-color:var(--ink);background:var(--bg2);color:var(--ink)}
@media (min-width:901px){.or-pdp .pdp>.gal{align-self:start;position:sticky;top:130px}}

/* product page buttons + dropdowns (whitemoon-pdp-buttons-dropdowns.md, hub PDP-BUTTONS 2 Nov 2026) */
/* (option tiles: the add-on line under the value — "+$171" / "Included" — was removed from the markup, Harsh 4 Nov,
   pdp-option-addon-label-remove.md; its two rules went with it) */
/* quantity 1–10: the end buttons go quiet at the limits; "3 × $509" beside it (§3) */
.or-pdp .qty button:disabled{opacity:.3;cursor:default}
.or-pdp .or-qeach{margin-left:14px;font-size:13px;vertical-align:middle}
/* chain length guide (§6): the six lengths as buttons, the chosen one dark; page scroll held while open */
.or-lenmod .modal-box{width:min(560px,100%)}
.or-len-fig{color:var(--muted);margin:0 auto 14px;max-width:260px}
.or-len-fig svg{display:block;width:100%;height:auto}
.or-len-list{display:grid;gap:8px}
.or-len-list button{display:grid;gap:2px;text-align:left;padding:11px 14px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer}
.or-len-list button span{font-size:13px;color:var(--muted)}
.or-len-list button:hover{border-color:var(--accent)}
.or-len-list button.on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.or-len-list button.on span{color:var(--line2)}
html.or-lock,html.or-lock body{overflow:hidden}

/* mobile / tablet menu drawer (Harsh, 2 Nov 2026: "menu ki ui or colour sahi nahi lag raha"): the design's sub-links were
   12 px spaced capitals in the muted brown, run together in one wrapping line — hard to read and to tap. Each group is now
   a quiet accent heading over a two-column list of links in the ink colour, normal case, 14.5 px, with room to tap; the
   shapes keep their stone icons in the same grid. Desktop mega menu untouched */
.drawer details.or-dn>div{padding:2px 0 16px}
.drawer details.or-dn .or-all{color:var(--accent);margin:2px 0 4px}
.drawer .sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.drawer .sub:last-child{border-bottom:0}
.drawer .sub .or-sub-h{grid-column:1/-1;margin:0 0 6px;font-size:10.5px;letter-spacing:.22em;color:var(--accent)}
.drawer .sub a,.drawer .or-dshp a.or-mshp{display:flex;align-items:center;gap:9px;min-width:0;min-height:38px;padding:4px 0;font-family:var(--f-b);font-size:14.5px;letter-spacing:.01em;text-transform:none;line-height:1.3;color:var(--ink);border:0;transition:color .2s}
.drawer .sub a:hover,.drawer .sub a:focus-visible{color:var(--accent)}
.drawer .or-dshp{gap:0 18px}
.drawer .or-dshp a.or-mshp .or-shi{width:24px;height:24px;flex:0 0 auto}
.drawer details.or-dn[open]>summary{color:var(--accent)}

/* product page "Complete the Look" on phones / tablets (Harsh, 2 Nov 2026: the pieces came one under another and made the
   page long): one row that scrolls sideways, smaller cards (about two and a bit in view, the next one peeking), snap to
   each card; desktop keeps its four-across grid */
@media (max-width:900px){
 .or-ctl .grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:clamp(150px,42vw,230px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .or-ctl .grid::-webkit-scrollbar{display:none}
 .or-ctl .grid>[data-card]{scroll-snap-align:start;min-width:0}
 .or-ctl [data-card] .card-name{font-size:14px;line-height:1.25}
 .or-ctl [data-card] .card-sub{font-size:11px}
 .or-ctl [data-card] .price{font-size:13px}
 .or-ctl [data-card] .badge{font-size:8.5px;padding:3px 6px;top:8px;left:8px}
 .or-ctl [data-card]>.wish{width:30px;height:30px;top:8px;right:8px}
 .or-ctl [data-card] .sw{gap:5px}.or-ctl [data-card] .swatch{width:14px;height:14px}
}

/* compact footer on phones / tablets (Harsh, 2 Nov 2026: "footer ki size bhi badi lag rahi he"): the design's desktop
   spacing (48 px blocks, 28 px gaps, 8 px between links, 44 px above the © line) made it ~1100 px tall at 375. Same
   content and order; tighter rhythm, a smaller newsletter title and wordmark, Information in two columns. Desktop as was */
@media (max-width:900px){
 footer .join{gap:12px;padding-block:26px 22px}
 footer .join h3{font-size:28px}
 footer .foot{padding-block:24px 16px}
 footer .or-foot-cols{gap:20px 18px}
 footer .foot-brand b{font-size:30px}
 footer .foot-brand p{margin-top:4px;font-size:12.5px;line-height:1.5}
 footer .foot h6{margin:0 0 8px}
 footer .foot ul{gap:0}
 footer .foot ul a{display:block;padding:4px 0;line-height:1.35}
 footer .foot-bot{margin-top:20px;padding-top:14px;gap:10px}
 footer .foot-bot nav{gap:8px 16px}
}
@media (max-width:560px){
 footer .or-foot-cols>div:last-child{grid-column:span 2}
 footer .or-foot-cols>div:last-child ul{grid-template-columns:1fr 1fr;column-gap:18px}
}

/* footer Contact's opening line (Harsh, 2 Nov 2026, as whitemoonjewels.com): plain cream text above phone / e-mail / address */
footer .foot .or-foot-lead{margin:0 0 12px;max-width:34ch;font-size:13.5px;line-height:1.55;color:var(--band-ink)}
@media (max-width:900px){footer .foot .or-foot-lead{margin-bottom:8px;font-size:13px}}

/* RESPONSIVE (Harsh, 3 Nov 2026, D:\design\responsive-all-views-check.md): fit and work at every size, same design.
   R1 an open menu / drawer / modal / search / filters panel keeps the page behind still (the gutter stays, no jump) */
html:has(.drawer.on,.modal.on,#search.on,#filters.on,#appt.on){overflow:hidden;scrollbar-gutter:stable}
.drawer,.modal,#search,#filters{overscroll-behavior:contain}
/* R2 collection grid: 3 columns from the tablet up to the desktop wrap (1024 fell to 2 beside the filter column) */
@media (min-width:901px) and (max-width:1199px){#cfGrid .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* R3 product grids outside a collection (search results, wishlist page) are 2 columns on a phone, like the collection */
@media (max-width:600px){
 main .grid:has(> .card):not(.or-ctl .grid){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 /* the same card scale the collection grid uses at two columns */
 main .grid:has(> .card):not(.or-ctl .grid) .card-name{font-size:14.5px;line-height:1.2}
 main .grid:has(> .card):not(.or-ctl .grid) .card-sub{font-size:11px}
 main .grid:has(> .card):not(.or-ctl .grid) .price{font-size:13px}
 main .grid:has(> .card):not(.or-ctl .grid) .card>.wish{top:10px;right:10px;width:30px;height:30px}
 main .grid:has(> .card):not(.or-ctl .grid) .card .badge{top:12px;left:12px;padding:3px 6px}
 main .grid:has(> .card):not(.or-ctl .grid) .sw{gap:5px}main .grid:has(> .card):not(.or-ctl .grid) .swatch{width:14px;height:14px}
}
/* R4 ring-builder step bar on a phone: the number sits above the label, so the three steps never run into each other */
@media (max-width:560px){
 .prog button{flex-direction:column;align-items:flex-start;gap:4px;padding:10px}
 .prog .n{font-size:24px}
 .prog .t{letter-spacing:.08em;line-height:1.35;overflow-wrap:anywhere}
}
/* R5 tap targets on touch: a 44 px hit area round the logo, chips, option buttons and metal swatches (same look),
   a 44 px sort select and checkbox rows */
@media (pointer:coarse),(max-width:900px){
 .wrap>a.logo,.fchip,.chips .chip,.seg>button,.seg>a.or-mtl{position:relative}
 .wrap>a.logo::after,.fchip::after,.chips .chip::after,.seg>button::after,.seg>a.or-mtl::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
 .selectw select{min-height:44px}
 .check{min-height:44px}
}
@media (max-width:600px){
 /* R6 no iOS zoom on focus: every typed field is at least 16px on a phone */
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
 /* R7 labels at least 11px on a phone (footer heads, badges, tile captions, option grades, dial / shape labels, table heads) */
 footer h6,.foot h6,.badge,.pill,.cat .lnk,.cp-big span,.dtbl th,main th,.forge .shape-btn,.forge-card small,.fshapes .shape-btn,.hero-list,.mega h5,.mini,.orb-l,.qband cite,.qband small,.seg .shape-btn,.shape-btn,.shape-ph,.sz th,.tile-name small,.vert,#cfGrid .grid .card .badge,.or-ctl [data-card] .badge,.drawer .or-sub-h,.drawer .sub .or-sub-h,.fshapes .shape-btn .or-cnt,.or-acct__label,.or-dc small,.or-pc-top,.or-pdp .seg button .or-rbsc,.or-th i,.or-wt button small,.seg button small,.or-mtl small,.coll-title sup,.dial-l,.forge small{font-size:11px!important}
 .bag i{min-width:18px;height:18px;font-size:11px}
 /* R8 body copy at least 14px on a phone (the helper lines under the PDP price, care plans, size guide, builder, bag) */
 .pinfo .emi,.or-pb p.muted,.bld-prev p.muted,#chain-length p.muted,.or-pc-s,.opt p.muted,.or-pdsec .cs p,main p.o{font-size:14px!important}
}
/* R9 a mega menu taller than a short landscape screen (1024×768) scrolls inside itself instead of running off the bottom */
@media (min-width:901px){.mainnav .mega{max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain}}

/* CARD-TITLE (card-title-two-lines.md — Harsh, 4 Nov 2026): a product card's name is 2 lines at most, then "…", and a
   short name keeps 2 lines of room so the price row lines up across the row — the same at every width, touch included
   (a phone used to show the whole name on 3–7 lines). Only the line count is set: font, size, line-height and colour
   stay the card's own (1lh = its own line-height). The full name stays in the HTML; on a desktop pointer the dark
   tooltip shows it (or-over.js titleTip). Cards: [data-card] (collections, search, home rails, Complete the Look,
   wishlist), the builder's setting cards and the search overlay's predictive list. */
.card-name,.set-card b,#qres>a>span:first-of-type{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;min-height:calc(2 * 1lh)}
@supports not (height:1lh){.card-name{min-height:calc(2 * 1.15em)}.set-card b{min-height:calc(2 * 1.2em)}#qres>a>span:first-of-type{min-height:calc(2 * 1.6em)}}
#qres>a>span:first-of-type{line-height:1.6}
/* the line under the name ("Round · Necklace · White Gold") wrapped to 2 lines on some 2-column phone cards and not on
   others, so the price rows still sat at two heights in one row: it keeps to 1 line, "…" when it does not fit (where it
   fits — almost everywhere — nothing changes) */
.card-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* PDP description in full (Harsh, 5 Nov 2026, pdp-description-full.md): the store's own paragraphs / lists inside the
   near-the-price line (.psub) and the "About This …" accordion — same font, size and colour as before, no clamp */
.or-desc>:first-child{margin-top:0}
.or-desc p{margin:0}
.or-desc p+p,.or-desc p+ul,.or-desc p+ol,.or-desc ul+p,.or-desc ol+p{margin-top:.6em}
.or-desc ul,.or-desc ol{margin:.4em 0 0;padding-left:1.2em}
.or-desc ul{list-style:disc}.or-desc ol{list-style:decimal}
.or-desc strong,.or-desc b{font-weight:500}