/* UI/UX polish layer — loaded after style.css and structure.css.
   Accessibility, typography, touch targets and motion refinements. */

/* ---------- Typography: load the bundled Cormorant Garamond ---------- */
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/latin-1.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/latin-0.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}

:root{
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --on-dark:#fffdf5;
  --on-dark-muted:#d3e0d7;
  --focus:#2f7a55;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms;
  --dur-base:240ms;
}

/* Cormorant has a small x-height: slightly larger sizes, medium weight */
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
h1{line-height:1.08}
h2{line-height:1.12}
h1{font-size:clamp(2.75rem,5.2vw,4.75rem)}
h2{font-size:clamp(2.1rem,3.4vw,3.15rem)}
h3{font-size:1.6rem;line-height:1.2}
.brand-word{font-family:var(--serif);font-weight:500}
p{text-wrap:pretty}

/* Product-card titles were set in sans; align with the serif heading system */
.card-title h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,1.6vw,1.5rem);letter-spacing:0;line-height:1.2}

/* ---------- Contrast (WCAG AA 4.5:1) ---------- */
/* Imperial Green band: body copy was muted grey on green (1.56:1) */
.signature p:not(.eyebrow),.signature .disclaimer{color:var(--on-dark-muted)}
.signature .eyebrow{color:var(--on-dark-muted)}
.signature .text-link{color:var(--on-dark)}
.signature .text-link:hover{color:#ffffff;border-color:var(--on-dark)}
.carousel-note{color:#56644f}
/* Never go below 12px for any readable text */
.hero .eyebrow{font-size:12px}

/* ---------- Focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
.signature :focus-visible,.footer :focus-visible,.dark :focus-visible{outline-color:var(--on-dark)}

/* ---------- Touch targets (min 44px) ---------- */
.slide-arrow{min-width:44px;min-height:44px}
.utility-bar a{display:inline-flex;align-items:center;min-height:32px}
.footer-links a{display:flex;align-items:center;min-height:44px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.mobile-menu a,.nav-panel a{min-height:44px}
.card-title a,.card-title h3 a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Motion: consistent, purposeful micro-interactions ---------- */
a,button,summary,.button,.access,.text-link{transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.button:active,.access:active,.slide-arrow:active{transform:scale(.97)}

/* Cards: gentle lift + image zoom on hover (pointer devices only) */
.learning-card,.gem-card{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.learning-card img,.gem-card img{transition:transform 600ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .learning-card:hover,.gem-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(7,80,57,.35)}
  .learning-card:hover img,.gem-card:hover img{transform:scale(1.03)}
  .button:hover{box-shadow:0 10px 24px -14px rgba(7,80,57,.6)}
}
.learning-card figure,.gem-card-image{overflow:hidden}

/* Explore disclosure chevron rotates when open */
.nav-discover summary>span[aria-hidden],.mobile-explore summary>span[aria-hidden]{display:inline-block;transition:transform var(--dur-base) var(--ease-out);line-height:1;transform:translateY(-3px)}
.nav-discover[open] summary>span[aria-hidden],.mobile-explore[open] summary>span[aria-hidden]{transform:translateY(2px) rotate(180deg)}

/* Sticky header gains depth once the page scrolls under it */
.header{transition:box-shadow var(--dur-base) var(--ease-out)}
.header.is-scrolled{box-shadow:0 8px 24px -18px rgba(18,63,48,.45)}

/* ---------- Details ---------- */
::selection{background:#cfe3d4;color:#0b2f22}
img{border-radius:inherit}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}

/* ---------- Reduced motion: respect user preference everywhere ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root:not(.fx-ready) *,:root:not(.fx-ready) *::before,:root:not(.fx-ready) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Mobile: compensate Cormorant's smaller x-height */
@media (max-width:600px){
  .hero h1{font-size:clamp(1.9rem,8vw,2.3rem)}
  .card-title h3{font-size:1.3rem}
}

/* ---------- Header account control ---------- */
.centered-header .header-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px}
.account-nav{position:relative}
.account-link{display:inline-flex;align-items:center;justify-content:center;position:relative;width:46px;height:46px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--green);padding:0}
.account-link:hover{border-color:#b7c6b9;background:#f4f0e4}
.account-link[aria-expanded="true"]{background:#f4f0e4;border-color:#b7c6b9}
.account-dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#857244;box-shadow:0 0 0 2px var(--paper)}
.account-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;padding:8px;background:#fffdf5;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(18,63,48,.35);z-index:50}
.account-menu-name{padding:10px 12px 12px;margin:0 0 6px;border-bottom:1px solid var(--line);font:600 14px/1.4 var(--sans);color:var(--ink)}
.account-menu-name span{display:block;font-weight:400;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.account-menu a,.account-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;font:500 14px/1.4 var(--sans);color:var(--ink);text-align:left}
.account-menu a:hover,.account-menu button:hover,.account-menu a:focus-visible,.account-menu button:focus-visible{background:#f0f1eb;color:var(--green)}
.account-menu button{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:6px;color:var(--muted)}
.mobile-account{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.mobile-account button{display:flex;align-items:center;width:100%;min-height:48px;padding:0;border:0;background:none;font:500 16px/1.4 var(--sans);color:var(--muted)}
@media(max-width:900px){.account-link{width:40px;height:40px}.account-dot{top:7px;right:7px}.centered-header .header-actions{gap:8px}}
@media(max-width:600px){.account-nav{display:none}}
@media(max-width:600px){.centered-header .menu-toggle,.centered-header .access{width:44px;height:44px;min-height:44px}}

/* ===== Brand logo ===== */
.centered-header .brand-logo{width:58px;height:58px;object-fit:contain}
.brand-logo{filter:none!important}
@media(max-width:900px){.centered-header .brand-logo{width:46px;height:46px}}

/* ===== Compact page header: the products are the focus ===== */
.page-head,.page-head.has-art{padding-top:18px!important;padding-bottom:20px!important}
.page-head .page-art{display:none}
.page-head.has-art{grid-template-columns:1fr!important}
.page-head .eyebrow{display:none}
.page-head h1{font-size:clamp(1.9rem,3vw,2.5rem)!important;margin:6px 0 4px}
.page-head-copy>p:last-child{font-size:15px!important;margin:0;color:var(--muted)}
.page-head .breadcrumbs{font-size:13px}

/* ===== Store ===== */
.catalog.section{padding-top:22px}
.catalog .filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-bottom:14px}
.catalog .filters label{display:grid;gap:6px;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);min-width:180px;flex:1 1 180px}
.catalog .filters select{min-height:46px;width:100%;text-transform:none;letter-spacing:0;font:500 15px/1.2 var(--sans);color:var(--ink)}
.catalog .reset-filters{min-height:46px}
.collection-count{font-size:14px;color:var(--muted);margin:4px 0 18px}
.store-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px}
.gem-card .card-title h3{font-size:1.25rem;letter-spacing:.01em}
.gem-card .card-meta{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.45;color:var(--muted)}
.gem-card .card-meta span:last-child{color:var(--green);font-weight:600}
.gem-card-image .catalog-photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
@media(max-width:1100px){.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}.catalog .filters label{min-width:0;flex:1 1 140px}.gem-card .card-title h3{font-size:1.05rem}}

/* ===== Stone page ===== */
.stone-detail{min-height:calc(100svh - 230px);align-items:start;padding-bottom:28px!important}
.stone-gallery .catalog-photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.stone-kicker{font:600 12px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:8px 0 0}
.stone-info h1{margin:8px 0 18px!important;font-size:clamp(2rem,3.4vw,3rem)!important;color:var(--green)}
.stone-facts{margin:0 0 18px;border-top:1px solid var(--line)}
.stone-facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.stone-facts dt{color:var(--muted)}
.stone-facts dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}
.stone-desc{position:relative;font-size:15px;line-height:1.7;color:var(--muted)}
.stone-desc p{margin:0 0 10px}
.stone-desc.is-collapsed{max-height:5.2em;overflow:hidden}
.stone-desc.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(transparent,var(--paper))}
.read-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0;border:0;background:none;font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--green);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.read-more::after{content:"⌄";transition:transform .2s}
.read-more[aria-expanded="true"]::after{transform:rotate(180deg)}
.stone-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:20px 0 6px}
.stone-pager{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.stone-pager a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;color:var(--green)}
.stone-pager a:hover{color:#3b6c50}

/* Similar stones: peeks above the fold, horizontal rail to move between stones */
.similar{padding:18px max(5%,calc((100vw - var(--page))/2)) 64px;border-top:1px solid var(--line);background:linear-gradient(#f4f0e4,var(--paper) 220px)}
.similar-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.similar-head h2{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--green)}
.similar-controls{display:flex;gap:8px}
.rail-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--green);font-size:18px;cursor:pointer}
.rail-btn:hover:not(:disabled){border-color:var(--green)}
.rail-btn:disabled{opacity:.35;cursor:default}
.similar-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 66px)/4);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0;padding-bottom:10px;scrollbar-width:thin;overscroll-behavior-x:contain}
.similar-rail>.gem-card{scroll-snap-align:start}
@media(max-width:1100px){.similar-rail{grid-auto-columns:calc((100% - 44px)/3)}}
@media(max-width:760px){.stone-detail{min-height:0}.similar-rail{grid-auto-columns:44%;gap:14px}.stone-facts>div{font-size:14px}.similar-controls{display:none}}

/* ===== Simple footer ===== */
.footer-simple .footer-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-bottom:28px;border-bottom:1px solid #426050}
.footer-logo img{width:150px;height:150px;object-fit:contain}
.footer-contact{display:grid;gap:12px;justify-items:start}
.footer-contact .eyebrow{margin:0}
.social-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.social-list a,.social-list .is-pending{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:1px solid #426050;border-radius:999px;color:#fffdf5;font-size:15px}
.social-list img{filter:brightness(0) invert(1)}
.social-list a:hover{border-color:#b9d8c4;background:rgba(255,255,255,.05)}
.social-list .is-pending{opacity:.75;cursor:default}
.footer-inquiry{display:inline-flex;align-items:center;min-height:44px;color:#fffdf5;text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.footer-simple .footer-main{flex-direction:column;align-items:flex-start}.footer-logo img{width:120px;height:120px}}
/* Stone codes: lining figures so "11" never reads as "II" */
h1,h2,h3,.brand-word{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.catalog-photo{mix-blend-mode:multiply}
/* Stone page fits the viewport so the similar-stones rail peeks below */
.stone-detail{min-height:0!important;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)!important;gap:5%!important;padding-top:4px!important;padding-bottom:22px!important}
@media(min-width:761px){.stone-gallery .zoom-open{max-width:min(100%,calc(100svh - 300px));margin:0 auto}}
.stone-info h1{margin:4px 0 12px!important}
.stone-facts>div{padding:8px 0}
.stone-desc.is-collapsed{max-height:3.4em}
.stone-actions{margin:14px 0 4px}
.stone-pager{margin-top:12px;padding-top:6px}
.detail-breadcrumb{padding-top:14px!important;padding-bottom:10px!important}
@media(min-width:761px){.stone-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.stone-facts>div{display:block;padding:9px 0}.stone-facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.stone-facts dd{text-align:left;margin-top:2px}}
.similar-head{flex-wrap:wrap}
.similar-head .stone-pager{margin:0 auto 0 24px;padding:0;border:0;gap:22px}
@media(max-width:760px){.similar-head .stone-pager{order:3;width:100%;margin:0;justify-content:space-between}}

/* ===== Explore menu: group titles read as headings, links as their children ===== */
.nav-panel .menu-group p,.mobile-menu .menu-group p{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0 0 10px;border-bottom:2px solid var(--green);font:700 13px/1.2 var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--green)!important}
.nav-panel .menu-group p::before,.mobile-menu .menu-group p::before{content:"";width:7px;height:7px;border-radius:50%;background:#857244;flex:none}
.nav-panel .menu-group>a,.mobile-menu .menu-group>a{padding-left:6px!important;margin-left:4px;border-left:1px solid var(--line);font-weight:400;color:var(--ink)}
.nav-panel .menu-group>a:hover,.nav-panel .menu-group>a[aria-current]{border-left-color:var(--green);color:var(--green);background:linear-gradient(90deg,#f0f1eb,transparent)}
.nav-panel .menu-group>a .menu-icon{width:19px;height:19px;opacity:.8}
.mobile-menu .menu-group{padding:14px 4px 6px!important}

/* ===== Full-bleed hero and Imperial Green band (match the "Born in Iran" section) ===== */
.hero,.signature{max-width:none!important;width:100%;margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;padding-left:max(5%,calc((100vw - var(--page))/2))!important;padding-right:max(5%,calc((100vw - var(--page))/2))!important}
.hero{border-top:0!important;border-bottom:1px solid var(--line)!important}
@media(max-width:600px){.hero,.signature{padding-left:6%!important;padding-right:6%!important}}

/* Stones sit directly on the ivory surface (transparent images) */
.gem-card-image,.zoom-open,.stone-gallery .zoom-open,.similar .gem-card-image{background:#f4f0e4!important}
.catalog-photo{mix-blend-mode:normal!important;background:transparent}
.simple-carousel{padding-left:0!important;padding-right:0!important}

/* ===== Hero: Top Stones carousel — larger stones, button only ===== */
.top-stones{position:relative}
.top-label{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 12px;border:1px solid rgba(133,114,68,.35);border-radius:999px;background:rgba(255,253,245,.7);font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#857244;white-space:nowrap;pointer-events:none}
.top-label span{font-size:10px}
.simple-carousel.top-stones .carousel-stage{height:380px!important}
.simple-carousel.top-stones .slide-gem{width:360px!important;height:360px!important;margin-top:14px}
.top-stones .stone-cta{margin-top:10px}
@media(max-width:1100px){.simple-carousel.top-stones .carousel-stage{height:330px!important}.simple-carousel.top-stones .slide-gem{width:310px!important;height:310px!important}}
@media(max-width:600px){.simple-carousel.top-stones .carousel-stage{height:268px!important}.simple-carousel.top-stones .slide-gem{width:250px!important;height:250px!important;margin-top:16px}.top-label{font-size:11px;padding:4px 10px}}

/* ===== New arrivals: compact label heading; peeks above the fold under the hero ===== */
.new-arrivals{padding-top:30px!important}
.new-arrivals .section-heading{align-items:center!important;margin-bottom:18px!important}
.section-eyebrow{margin:0!important;font:600 13px/1.6 var(--sans)!important;letter-spacing:.12em!important;color:var(--green)!important}
.section-eyebrow .section-icon{width:26px;height:26px}
@media(min-width:601px){
  .hero{padding-top:30px!important;padding-bottom:30px!important;min-height:0!important}
  .simple-carousel.top-stones .carousel-stage{height:350px!important}
  .simple-carousel.top-stones .slide-gem{width:330px!important;height:330px!important;margin-top:24px}
}
@media(max-width:600px){.new-arrivals{padding-top:22px!important}.hero{padding-bottom:20px!important}}
/* Hero stone scales with viewport height so New arrivals always peeks above the fold */
@media(min-width:601px){
  .simple-carousel.top-stones{--g:clamp(200px,calc(100svh - 525px),330px)}
  .simple-carousel.top-stones .slide-gem{width:var(--g)!important;height:var(--g)!important}
  .simple-carousel.top-stones .carousel-stage{height:calc(var(--g) + 26px)!important}
}
@media(max-width:600px){
  .simple-carousel.top-stones{--g:clamp(170px,calc(100svh - 560px),250px)}
  .simple-carousel.top-stones .slide-gem{width:var(--g)!important;height:var(--g)!important}
  .simple-carousel.top-stones .carousel-stage{height:calc(var(--g) + 20px)!important}
}
@media(max-width:600px){.new-arrivals .section-heading{display:flex!important;flex-direction:row!important;justify-content:space-between;gap:12px}.new-arrivals .section-heading .text-link{margin:0!important;font-size:13px}}
/* Larger hero stone (description removed); New arrivals still peeks ~60px */
@media(min-width:601px){
  .simple-carousel.top-stones{--g:clamp(240px,calc(100svh - 481px),400px)}
}
@media(max-width:600px){
  .simple-carousel.top-stones{--g:clamp(210px,min(calc(100svh - 445px),calc(100vw - 40px)),360px)}
  .hero h1{margin-bottom:6px!important}
}
/* Bigger hero stone: reclaim the transparent margin inside the image (stone ≈ 71% of the box) */
.simple-carousel.top-stones .slide-gem{max-width:none!important;margin-top:calc(var(--g) * -.11)!important;margin-bottom:calc(var(--g) * -.07)!important}
.simple-carousel.top-stones .carousel-stage{height:calc(var(--g) * .82 + 30px)!important;overflow:visible}
.simple-carousel.top-stones .stone-slide{justify-content:flex-start}
.simple-carousel.top-stones .top-label{z-index:4}
@media(min-width:601px){.simple-carousel.top-stones{--g:clamp(300px,calc((100svh - 481px) * 1.22),540px)}}
@media(max-width:600px){.simple-carousel.top-stones{--g:clamp(260px,min(calc((100svh - 445px) * 1.22),calc(100vw + 20px)),460px)}}
/* Tighter framing: stone starts just under the label and the button follows its shadow */
.simple-carousel.top-stones .slide-gem{margin-top:calc(36px - var(--g) * .15)!important;margin-bottom:0!important}
.simple-carousel.top-stones .carousel-stage{height:calc(var(--g) * .75 + 36px)!important}
.simple-carousel.top-stones .stone-cta{margin-top:14px!important}
@media(min-width:601px){.simple-carousel.top-stones{--g:clamp(320px,calc((100svh - 481px) * 1.36),580px)}}
@media(max-width:600px){.simple-carousel.top-stones{--g:clamp(300px,min(calc((100svh - 445px) * 1.36),calc(100vw * 1.22)),520px)}}
@media(min-width:601px){.simple-carousel.top-stones{--g:clamp(320px,calc((100svh - 500px) * 1.36),580px)}}
@media(max-width:600px){.simple-carousel.top-stones{--g:clamp(290px,min(calc((100svh - 465px) * 1.36),calc(100vw * 1.22)),520px)}}

/* Stone gallery thumbnails, forms, articles */
.stone-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.stone-thumb{width:72px;height:72px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#f4f0e4;cursor:pointer}
.stone-thumb img{width:100%;height:100%;object-fit:contain}
.stone-thumb[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
#inquiry-form [aria-invalid=true]{border-color:#9b2c2c!important}
#inquiry-form .form-status{color:#9b2c2c;font-weight:600;margin:0}
.inquiry-done{padding:28px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:14px;background:#fff}
.inquiry-done h2{color:var(--green);margin:0 0 8px}
.inquiry-notice a{color:var(--green);font-weight:600}
.article-cover{width:min(100%,960px);margin:0 auto 28px;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.reading h3{font-size:1.4rem;color:var(--green);margin:22px 0 8px}
.reading ul{padding-left:20px;line-height:1.75}
.footer-info{display:grid;gap:2px;margin:4px 0 0;font-size:14px;color:#c5d4ca}.footer-info a{color:#fffdf5!important;font-weight:600}
.media-links{list-style:none;padding:0;display:grid;gap:8px}.media-links a{color:var(--green);font-weight:600}
/* Center the oversized (transparent-margin) hero stone image on every screen */
.simple-carousel.top-stones .slide-gem{margin-left:calc(50% - var(--g) / 2)!important;margin-right:0!important;align-self:flex-start}
.simple-carousel.top-stones{overflow:hidden}
/* Card photos: centred in a square frame on every screen (no offset tricks) */
.gem-card-image{display:grid!important;place-items:center;aspect-ratio:1!important}
.gem-card-image>.catalog-photo{position:static!important;top:auto!important;transform:none!important;width:100%;height:100%;max-width:none;object-fit:contain;padding:7%;box-sizing:border-box}
.gem-card-image:hover>.catalog-photo{transform:scale(1.04)!important;transition:transform .5s ease}

/* =================== Mobile navigation: drawer + bottom tab bar =================== */
.mnav,.tabbar{display:none}
.mobile-menu{display:none!important}
@media(max-width:900px){
  .mnav{display:block;position:fixed;inset:0;z-index:120}
  .mnav[hidden]{display:none}
  .mnav-scrim{position:absolute;inset:0;background:rgba(6,18,13,.55);opacity:0;transition:opacity .3s ease;backdrop-filter:blur(3px)}
  .mnav-panel{position:absolute;inset:0 0 0 auto;width:min(420px,100%);display:flex;flex-direction:column;background:var(--paper);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);outline:none;padding-bottom:env(safe-area-inset-bottom)}
  .mnav.is-open .mnav-scrim{opacity:1}
  .mnav.is-open .mnav-panel{transform:none}
  .mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));border-bottom:1px solid var(--line);background:#fffdf5}
  .mnav-brand{display:flex;align-items:center;gap:10px;font:500 1.15rem/1 var(--serif);letter-spacing:.06em;color:var(--green)}
  .mnav-close{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--green);cursor:pointer}
  .mnav-close .mi{width:20px;height:20px}
  .mnav-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 28px;display:grid;gap:22px;align-content:start}
  .mnav-feature{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mnav-card{display:grid;gap:4px;padding:16px;border-radius:16px;background:#f4f0e4;border:1px solid var(--line);color:var(--ink)}
  .mnav-card .menu-icon{width:26px;height:26px;margin-bottom:6px}
  .mnav-card strong{font:500 1.2rem/1.15 var(--serif);color:var(--green)}
  .mnav-card small{font-size:12.5px;color:var(--muted)}
  .mnav-card.dark{background:linear-gradient(150deg,#0f3a2a,#071a13);border-color:#0f3a2a}
  .mnav-card.dark strong{color:#f3eedf}.mnav-card.dark small{color:#c9b27a}.mnav-card.dark .menu-icon{filter:brightness(0) invert(.9) sepia(.5)}
  .mnav-group h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#857244}
  .mnav-group h2::after{content:"";flex:1;height:1px;background:var(--line)}
  .mnav-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .mnav-group a{display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:12px;min-height:58px;padding:6px 8px;border-radius:14px;color:var(--ink)}
  .mnav-group a:active,.mnav-group a:hover{background:#f0f1eb}
  .mnav-group a[aria-current]{background:#e9f0e8}
  .mnav-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f4f0e4}
  .mnav-ico .menu-icon{width:21px;height:21px}
  .mnav-txt strong{display:block;font:600 15.5px/1.25 var(--sans);color:var(--ink)}
  .mnav-txt small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .mnav-chev{width:18px;height:18px;color:#b7c0b6}
  .mnav-account{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
  .mnav-account a,.mnav-account button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font:600 14.5px/1 var(--sans);color:var(--ink);cursor:pointer}
  .mnav-account .menu-icon{width:18px;height:18px}
  .mnav-account .mnav-signin{background:var(--green);border-color:var(--green);color:#fffdf5}.mnav-account .mnav-signin .menu-icon{filter:brightness(0) invert(1)}
  .mnav-contact{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mnav-contact a{display:grid;place-items:center;min-height:48px;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:14.5px;color:var(--green)}
  .mnav-contact .mnav-wa{background:#e9f6ec;border-color:#bfe3c9;color:#14733b}
  /* staggered entrance */
  .mnav-body>*{opacity:0;transform:translateX(24px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  .mnav.is-open .mnav-body>*{opacity:1;transform:none}
  .mnav.is-open .mnav-body>*:nth-child(1){transition-delay:.08s}.mnav.is-open .mnav-body>*:nth-child(2){transition-delay:.13s}.mnav.is-open .mnav-body>*:nth-child(3){transition-delay:.18s}.mnav.is-open .mnav-body>*:nth-child(4){transition-delay:.23s}.mnav.is-open .mnav-body>*:nth-child(5){transition-delay:.28s}.mnav.is-open .mnav-body>*:nth-child(6){transition-delay:.33s}
  html.mnav-lock,html.mnav-lock body{overflow:hidden}

  /* Hamburger → X morph */
  .centered-header .menu-toggle{position:relative}
  .menu-toggle span{transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

  /* Bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;padding:6px;border-radius:22px;background:rgba(255,253,245,.92);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(7,80,57,.1);box-shadow:0 16px 40px -18px rgba(7,40,28,.45)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;border-radius:16px;background:none;font:600 11px/1 var(--sans);color:#5d6b62;cursor:pointer;transition:color .2s,background .2s}
  .tabbar .mi{width:23px;height:23px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .tabbar [aria-current=page],.tabbar [aria-expanded=true]{color:var(--green);background:#e9f0e8}
  .tabbar [aria-current=page] .mi{transform:translateY(-1px) scale(1.06)}
  .tabbar a:active .mi,.tabbar button:active .mi{transform:scale(.9)}
  .tabbar .signed-in::after{content:"";position:absolute;top:10px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:#857244;box-shadow:0 0 0 2px #fffdf5}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .page-home .tabbar{background:rgba(255,253,245,.94)}
  /* things that sat at the bottom now clear the tab bar */
  .mobile-detail-cta{bottom:calc(80px + env(safe-area-inset-bottom))!important;left:12px!important;right:12px!important;border-radius:14px!important;z-index:85!important}
  body:has(.mobile-detail-cta){padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom))!important}
  /* header: hamburger left, logo centre, lounge right; account lives in the tab bar */
  .centered-header .account-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.mnav-panel,.mnav-scrim,.mnav-body>*{transition:none!important}}
/* Mobile tap targets & legibility (audit fixes) */
@media(max-width:900px){
  .breadcrumbs a,.detail-breadcrumb a,.t-hero .breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
  main .text-link,.read-more,.field-link,.discover-next a,.t-sources a,.media-links a,.reading a[target],.t-ref h3 a,.reading .source-link{display:inline-flex;align-items:center;min-height:44px}
  .media-links li,.t-sources li{padding:0}
  .check{min-height:44px;align-items:center!important}
  .check input,.t-checklist input{width:24px!important;height:24px!important}
  .check a,.auth-alt a{display:inline-block;padding:10px 2px;margin:-10px 0}
  .top-label{font-size:12px!important}
  .find-green,.new-arrivals{overflow:hidden}
  .gem-model-link{display:inline-flex;align-items:center;min-height:44px;top:0!important}
}
@media(max-width:900px){main a.source-link,main .reading a,.auth-form .field-link{display:inline-flex;align-items:center;min-height:44px}.top-label span{font-size:12px}}
@media(max-width:760px){
  .stone-detail{grid-template-columns:1fr!important;gap:18px!important;padding:0 16px 24px!important}
  .stone-gallery{position:static!important}
  .stone-gallery .zoom-open{max-width:none!important;width:100%}
  .stone-info h1{font-size:2.1rem!important}
  .stone-facts{display:grid!important;grid-template-columns:1fr 1fr;column-gap:16px}
  .stone-facts>div{display:block!important;padding:10px 0!important}
  .stone-facts dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
  .stone-facts dd{text-align:left!important;margin-top:3px!important;font-size:14.5px}
  .stone-actions{flex-direction:column;align-items:stretch}
  .stone-actions .button{display:none}
}
.breadcrumbs,.detail-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
@media(max-width:900px){.page-head,.page-head.has-art{padding-top:4px!important}}

/* ===== Legible sans: platform UI font replaces Manrope everywhere (no download, crisp at small sizes) ===== */
:root,.lounge,.admin{--sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,Arial,sans-serif}
body{-webkit-font-smoothing:auto;font-weight:400}
p,li,dd,small,label,input,select,textarea,.disclaimer,.card-meta,.collection-note,.image-caption,.hint,.field-hint{font-weight:400;letter-spacing:0}
.disclaimer,.collection-note,.image-caption,.carousel-note,.t-note,.lounge-note,.field-hint,.hint{font-size:14px!important;line-height:1.6!important}
.eyebrow,.t-kicker,.lounge-kicker,.stone-kicker,.ar-kicker{font-weight:600!important}
/* text on dark green: brighter and never thin */
.signature p,.signature .disclaimer,.facts dd,.footer p,.footer-info span,.lounge p,.page-home .hero p{font-weight:400;color:#e6eee8!important}
.signature .disclaimer{color:#cfdcd2!important;opacity:1}
/* Imperial Green: Iran-only copy */
.sig-lead{font:500 clamp(1.3rem,2vw,1.6rem)/1.35 var(--serif)!important;color:#e2d3a6!important;margin:-6px 0 12px!important}
.sig-points{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:8px}
.sig-points li{display:flex;align-items:center;gap:10px;color:#f3eedf;font-size:15.5px}
.sig-points li::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:#e2d3a6;flex:none}

/* ===== Stronger body text: darker muted grey + slightly heavier weight (all pages) ===== */
:root{--muted:#3c4941;--ink:#14261d}
.admin{--mute:#46524b}
body,p,li,dd,td,label,input,select,textarea,small,.card-meta,.collection-note,.lead,.t-lead,.t-intro,.disclaimer,.hint,.field-hint{font-weight:450}
p,li,dd,.t-card p,.t-steps p,.t-faq p,.fg-head p,.learning-card p,.stone-desc,.reading p,.dash-action span,.auth-lead{color:var(--muted)}
.eyebrow,.eyebrow span,.t-kicker,.page-head .breadcrumbs,.breadcrumbs,.collection-count,.image-caption{color:#3c4941}
.gem-card .card-meta{color:#3c4941}
.page-home .hero .eyebrow span,.signature .eyebrow span,.facts .eyebrow span,.page-home .new-arrivals .section-eyebrow span{color:inherit}
.stone-kicker,.mnav-group h2,.dash-news-meta,.dash-num{color:#6a5728!important}
.eyebrow{font-size:13px!important}
.eyebrow,.eyebrow span{font-weight:600!important}
main .eyebrow span{color:#2c3a32}
.page-home .hero .eyebrow span,.signature .eyebrow span,.facts .eyebrow span,.page-home .new-arrivals .section-eyebrow span,.footer .eyebrow{color:inherit}
/* Bolder body text (requested): intros semibold, all other paragraphs medium */
p,li,dd,td,.card-meta,.collection-note,.stone-desc,.disclaimer,.hint,.field-hint{font-weight:500!important}
.fg-head p,.t-lead,.t-intro,.lead,.page-head-copy>p,.section-heading>p,.auth-lead,.hero-description,.article-lead,.lounge-page-head p,.t-hero .t-lead,.concierge-copy p,.viewing-copy p{font-weight:600!important;color:#26332b}
.signature p:not(.sig-lead),.facts dd{font-weight:500!important}
.lounge .lounge-page-head p:not(.lounge-kicker),.lounge .concierge-copy p:not(.lounge-kicker),.lounge .viewing-copy p:not(.lounge-kicker),.lounge .lh-lead{color:#d9dccf!important}
:where(.lounge,.signature,.facts,.footer,.page-home .hero,.t-cta,.mnav-card.dark) :is(p,li,dd,td){color:inherit}

/* Lining (aligned) numerals everywhere — Cormorant defaults to old-style figures */
html{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
*,*::before,*::after{font-variant-numeric:lining-nums!important}