/* Approved navigation and homepage poster only. Other sections use site.css. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .mobile-enter{animation:mobile-soft-enter .55s cubic-bezier(.2,.7,.25,1) var(--entry-delay,0ms) both}
 .panel-button{transition:transform .18s ease,background-color .18s ease}
 .panel-button:active{transform:scale(.97)}
 @keyframes mobile-soft-enter{from{opacity:.35;translate:0 14px}to{opacity:1;translate:0 0}}
}
html{--storefront-max-width:1440px;background:#fff}
body{width:100%;max-width:var(--storefront-max-width);margin-inline:auto;min-height:100vh}
nav.site-nav{width:100%;max-width:var(--storefront-max-width);left:0;right:0;margin-inline:auto}
/* Beyond the desktop canvas, keep the surrounding page plain white. */
@media(min-width:1440px){
 body::before,body::after{display:none}
 nav.site-nav{padding-inline:72px}
 .storefront section{padding-inline:100.8px}
 body>footer.site-footer{padding-inline:100.8px}
}
#productGrid{max-width:1080px;margin-inline:auto}
nav.site-nav a{text-decoration:none}
nav.site-nav ul{margin:0;padding:0}
nav.site-nav{border-bottom:0;box-shadow:0 2px 16px #10154908}
nav.site-nav::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(100deg,#ff548d,#ffb928 24%,#41c992 47%,#00a6ec 68%,#984dff 88%,#ed50d9)}
.account-nav{display:inline-flex;min-height:44px;align-items:center}
.mobile-brand-name{display:none}
#productGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
#productGrid .product{min-width:0}
@media(max-width:760px){
 #colors{padding-inline:12px}
 #productGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #productGrid .meta{padding:10px 7px;gap:8px}
 #productGrid .meta .mrow{flex-direction:column;align-items:flex-start;gap:5px}
 #productGrid .meta strong{font-size:.68rem;letter-spacing:.02em;overflow-wrap:anywhere;min-height:2.5em}
 #productGrid .price{font-size:.75rem;white-space:normal;display:flex;flex-wrap:wrap;gap:3px}
 #productGrid .price s,#productGrid .deal{font-size:.65rem;margin:0}
 #productGrid .btn.add{padding:8px 2px;min-height:44px;font-size:.6rem;letter-spacing:0}
 #productGrid .stockline,#productGrid .blurb{font-size:.65rem;overflow-wrap:anywhere}
 #productGrid .gallery-arrow{width:26px;height:32px;min-width:0;padding:0}
 #productGrid .soldout-pill{font-size:.55rem;padding:4px}
}
/* Three consecutive, mobile-first brand stories. */
.brand-panels{padding-top:88px;display:grid;gap:8px;background:#fff}
.brand-panels .brand-panel{margin:0;padding:0;overflow:hidden;text-align:center;border-radius:0}
.panel-shop{background:#faf9f6}
.panel-fitting{background:#fff;color:#101529}
.fitting-animation-slot{max-width:540px;margin:0 auto;padding-bottom:20px}
.panel-community{background:#f2f2f6}
.brand-panels .panel-copy{padding:38px 20px 24px}
.brand-panels .panel-copy h1,.brand-panels .panel-copy h2{font-family:inherit;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.045em;line-height:1.08;margin:0 0 10px;color:inherit}
.brand-panels .panel-copy p{margin:0 0 18px;font-size:1rem;color:inherit;opacity:.8}
.panel-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:30px;background:#245dd8;color:white;text-decoration:none;font-size:.85rem;font-weight:600}
.panel-button:focus-visible,.panel-media:focus-visible{outline:3px solid #b149dd;outline-offset:4px}
.panel-media{display:block;max-width:660px;margin:0 auto}
.product-poster-crop{position:relative;aspect-ratio:1.07;overflow:hidden}
.product-poster-crop img{position:absolute;display:block;width:100%;max-width:none;height:auto;left:0;top:-35%}
.panel-placeholder{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;color:inherit}
.panel-placeholder>span{font-size:.85rem;font-weight:600}
.panel-placeholder small{font-size:.75rem;max-width:28ch;opacity:.6}
.panel-placeholder .placeholder-play{display:grid;place-items:center;width:100px;height:100px;border:1px solid #ffffff45;border-radius:28px;font-size:3rem;color:#bdb5ed;background:#ffffff08}
.community-photo-board{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:860px;margin:0 auto;padding:0 16px 30px;text-decoration:none}
.community-photo-column{display:flex;flex-direction:column;gap:12px;min-width:0}
.community-photo-column:nth-child(2){padding-top:28px}
.community-photo-column img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px}
.community-photo-column img:nth-child(2){aspect-ratio:4/3}
.community-photo-column:nth-child(3) img:first-child{aspect-ratio:4/3}
.community-photo-column:nth-child(3) img:nth-child(2){aspect-ratio:4/5;object-position:center 65%}
.community-photo-board:focus-visible{outline:3px solid #245dd8;outline-offset:-3px}
@media(max-width:600px){
 .community-photo-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 14px;align-items:start;align-content:start;height:calc(125vw + 30px);overflow:hidden}
 .community-photo-board::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#f2f2f6);pointer-events:none}
 .community-photo-column{display:contents}
 .community-photo-column img,.community-photo-column img:nth-child(2),.community-photo-column:nth-child(3) img:first-child,.community-photo-column:nth-child(3) img:nth-child(2){aspect-ratio:4/5;border-radius:12px}
 .community-photo-column img:nth-child(2){transform:translateY(12px)}
}
@media(max-width:1050px){.brand-panels{padding-top:114px}}
@media(min-width:761px){.panel-placeholder{min-height:380px}}
.brand-logo-lockup{background:url('assets/header-diamond-hq-small.webp') center top / 43px 43px no-repeat,url('assets/header-wordmark-hq-small.webp') center bottom / 92px auto no-repeat}
.brand-logo-lockup picture{display:none}
nav.site-nav .btn{border-radius:12px;min-height:48px;background:#161747;color:#fff}
nav.site-nav a:focus-visible{outline:3px solid #0086c9;outline-offset:4px}
.landing-poster{padding:88px 0 0;background:#f0ecfa}
.poster-link{display:block;color:#101549;text-decoration:none}
.poster-placeholder{position:relative;min-height:540px;padding:65px max(7vw,24px);background:linear-gradient(125deg,#eeeffb,#fff5ed 50%,#e5f3f1);overflow:hidden}
.poster-placeholder::after{content:"✧";position:absolute;right:7%;bottom:55px;font-size:170px;color:#a85ad0;opacity:.35;pointer-events:none}
.poster-placeholder h1{position:relative;margin:26px 0 20px;max-width:850px;font-size:clamp(3rem,8vw,7rem);font-weight:800;line-height:.98;letter-spacing:-.06em}
.poster-placeholder p{max-width:30ch;font-size:1rem}
.poster-shop{display:inline-flex;margin-top:24px;padding:14px 20px;background:#161747;color:#fff;border-radius:10px;font-size:.76rem;font-weight:800}
.poster-placeholder-note{display:block;margin-top:38px;font-size:.65rem;color:#656478;letter-spacing:.06em}
#posterPicture img{display:block;width:100%;height:auto}
#posterPicture{display:block}#posterPicture[hidden]{display:none}
@media(max-width:1050px){
 nav.site-nav ul .nav-about{display:none}
 html{scroll-padding-top:140px}
 nav.site-nav{grid-template-columns:1fr auto;grid-template-rows:62px 46px;padding:6px 18px 0;min-height:114px;gap:0}
 nav.site-nav .brand{grid-column:1;grid-row:1}
 nav.site-nav .nav-actions{grid-column:2;grid-row:1}
 nav.site-nav ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-column:1/-1;grid-row:2;width:100%;gap:0;align-self:stretch}
 nav.site-nav ul li{min-width:0;text-align:center}
 nav.site-nav ul a{display:flex;align-items:center;justify-content:center;height:46px;font-size:.7rem;font-weight:700;white-space:nowrap}
 nav.site-nav ul a::after{bottom:0;height:3px}
 nav.site-nav ul a[aria-current="page"]{color:#7939b7;background:#f5effb;border-radius:9px 9px 0 0}
 .brand-logo-lockup{height:56px;width:78px}
 .landing-poster{padding-top:114px}
 .fitting-page .fit-shell,.community-main,.account-shell{padding-top:142px}
}
@media(max-width:760px){
 nav.site-nav .logo{position:static}
 nav.site-nav{padding-inline:12px}
 nav.site-nav .brand{display:flex;align-items:center;min-width:44px;min-height:44px}
 nav.site-nav .brand-logo-lockup{width:40px;height:40px;background:url('assets/header-diamond-hq-small.webp') center / 46px auto no-repeat}
 nav.site-nav .brand-logo-lockup img{object-fit:contain}
 /* Show the original stacked wordmark, without altering the uploaded artwork. */
 nav.site-nav .mobile-brand-name{display:block;position:absolute;left:50%;top:37px;transform:translate(-50%,-50%);width:120px;height:40px;font-size:0;background:url('assets/header-wordmark-hq-small.webp') center / 116.5% auto no-repeat}
 nav.site-nav .nav-actions{gap:0}
 nav.site-nav .account-nav,nav.site-nav .cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;font-size:0;background:transparent;color:#101549;border:0;box-shadow:none}
 nav.site-nav .account-nav::before,nav.site-nav .cart-btn::after{content:"";display:block;width:22px;height:22px;background:currentColor;mask:center/contain no-repeat var(--header-icon)}
 nav.site-nav .account-nav{--header-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.5'/%3E%3Cpath d='M4.5 21v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3C/svg%3E")}
 nav.site-nav .cart-btn{--header-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2.5 12h11l2-8H6M9 20h.01M18 20h.01'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E")}
 nav.site-nav .cart-count{position:absolute;right:0;top:0;font-size:10px;line-height:16px;min-width:16px;padding:0 3px;border-radius:20px}
 .poster-placeholder{min-height:470px;padding:42px 24px}
 .poster-placeholder h1{font-size:clamp(2.6rem,11vw,4.5rem)}
 .poster-placeholder::after{font-size:130px;right:18px}
 nav.site-nav .cart-btn::before{display:none}
}
/* Shared customer UI: compact controls, aligned fields, readable labels. */
nav.site-nav .cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;font-size:0;background:transparent;color:var(--navy);border:0;box-shadow:none}
nav.site-nav .cart-btn::before{display:none}
nav.site-nav .cart-btn::after{content:"";display:block;width:29px;height:29px;mask:none;background:url('assets/cart-gem.svg') center/contain no-repeat}
nav.site-nav .cart-count{position:absolute;top:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#102d50;color:#fff;border:2px solid var(--paper,#fff);font-size:10px;font-weight:700;line-height:13px;letter-spacing:0;z-index:1}
/* Account sections share one compact segmented row at every screen size. */
#accountGrid.signed-in{grid-template-columns:minmax(0,1fr);gap:20px}
#accountSections{position:static;grid-column:1;grid-row:1;display:flex;align-items:center;justify-self:start;max-width:100%;gap:2px;padding:4px;border:0;border-radius:999px;background:#f3f3f5}
#accountSections[hidden]{display:none}
#accountSections a{display:flex;align-items:center;justify-content:center;min-height:34px;padding:7px 16px;border-radius:999px;font-size:.78rem;font-weight:400;line-height:1.3;white-space:nowrap;color:var(--muted)}
#accountSections a svg{display:none}
#accountSections a:hover{background:#eaeaec;color:var(--navy)}
#accountSections a[aria-current="page"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px #102d5008}
#accountGrid.signed-in>#ordersCard,#accountGrid.signed-in>#profileCard,#accountGrid.signed-in>#communityAccountCard{grid-column:1;grid-row:2}
@media(max-width:760px){#accountSections{justify-self:stretch;width:100%}#accountSections a{flex:1;min-width:0;padding:7px 5px;font-size:.69rem}}
body #ordersCard{padding:0;border:0;background:none}
body .order-list{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
body .order-card{padding:0;border:0;border-radius:0;background:none}
body .order-card+.order-card{border-top:1px solid var(--line)}
.order-summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:16px;list-style:none;cursor:pointer}
.order-summary{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left}
.order-summary:focus-visible{outline:2px solid #0086c9;outline-offset:-3px}
.order-ref{font-size:.8rem}
.order-overview{display:grid;justify-items:end;gap:4px;font-size:.82rem}
body .order-status{font-size:.65rem;letter-spacing:0;text-transform:capitalize;padding:0;border:0;color:var(--muted)}
.order-chevron{width:18px;height:18px;color:var(--muted);transition:transform .15s}
.order-dialog{position:relative}
.order-dialog>.dialog-icon-close{position:absolute;right:12px;top:10px;margin:0}
.order-dialog-header{padding:4px 38px 18px 0;border-bottom:1px solid var(--line)}
.order-dialog h2{font-size:1.05rem;margin:0 0 10px;overflow-wrap:anywhere}
.order-dialog-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.order-state{font-size:.68rem;text-transform:capitalize;padding:4px 8px;border-radius:6px;background:var(--soft);color:var(--navy)}
.order-dialog .order-items{margin:4px 0 12px;gap:0}
.order-product+.order-product{border-top:1px solid var(--line)}
.order-product strong{font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.order-product{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0}
.order-dialog .order-product img,.order-photo-placeholder{width:56px;height:68px;object-fit:contain;border-radius:6px}
.order-photo-placeholder{display:grid;place-items:center;background:var(--soft);font-size:24px}
.order-product small{display:block;margin-top:5px;color:var(--muted)}
.order-product>span{overflow-wrap:anywhere}
.order-tracking{display:grid;gap:6px;padding:12px;border-radius:8px;background:var(--soft);margin:4px 0 18px;font-size:.75rem;overflow-wrap:anywhere}
.order-tracking span{color:var(--muted)}
.tracking-copy{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:4px 0;min-height:40px;background:none;color:var(--navy);font:inherit;text-align:left;cursor:pointer;width:100%}
.tracking-copy strong{min-width:0;overflow-wrap:anywhere;user-select:text;font-variant-numeric:tabular-nums}
.tracking-copy svg{width:18px;height:18px;flex:none}
.tracking-copy:focus-visible{outline:2px solid #0086c9;outline-offset:3px}
.tracking-feedback:empty{display:none}
.order-dialog .order-total{padding-top:16px;font-size:.9rem}
.order-item>span:first-child{overflow-wrap:anywhere;min-width:0}
.order-item>span:last-child{white-space:nowrap}
.order-pages{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;border-top:1px solid var(--line);font-size:.75rem}
@media(prefers-reduced-motion:reduce){.order-chevron{transition:none}}
.community-header-actions{display:flex;align-items:center;gap:6px;flex:none}
body .community-hero{padding:24px 0 18px}
body .feed-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:7px;margin:0 0 20px;padding:2px 0 8px;scroll-padding-inline:4px}
body .feed-filters::-webkit-scrollbar{display:none}
body .feed-filter{flex:0 0 auto;white-space:nowrap}
body .feed-filter:focus-visible{outline:2px solid var(--navy);outline-offset:-3px}
body .username-form{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:end}
body .username-form .account-msg{grid-column:1/-1}
body .username-form .account-msg:empty{display:none}
body #signOutButton{border:0;background:none;box-shadow:none;padding:6px 0;min-height:40px;font-weight:500;color:var(--muted)}
.my-photo-open{position:relative}
.photo-gem-count{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:14px 7px 6px;width:100%;color:#fff;background:linear-gradient(transparent,rgba(10,20,35,.55));font-size:.68rem;font-weight:650;line-height:1.2;pointer-events:none;text-shadow:0 1px 3px #142033}
.photo-gem-count svg{width:15px;height:15px;flex:none}
html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
body .btn{padding:9px 15px;min-height:40px;border-radius:8px;font-size:.78rem;letter-spacing:0;text-transform:none;gap:7px}
body .btn:hover{transform:none}
/* Opaque control surfaces keep decorative rainbow lines behind the controls. */
body .btn.ghost,body .product .btn.add{background:var(--paper,#fcfcfb)}
body .btn:disabled{opacity:1;background:#eef0f3;color:#7b8490;border-color:#dce0e5;box-shadow:none}
body .viewer-controls{position:relative;isolation:isolate}
body .viewer-controls .btn{position:relative;z-index:1}
body input,body select,body textarea{max-width:100%;min-width:0}
body .account-form label,body .community-label,body .share-field{letter-spacing:0;text-transform:none;font-size:.78rem}
body .account-form input{padding:11px 12px;border-radius:9px}
body .profile-card{gap:16px}
body .profile-card>.btn{width:auto;justify-self:start}
body .account-actions{gap:8px}
body .account-sections a{line-height:1.35}
body .viewer-controls{gap:8px}
body .viewer-controls .btn{padding:8px 12px;font-size:.75rem;flex:0 1 auto}
.saved-combinations{max-width:540px;margin:24px auto 0;padding:0}
.saved-combinations>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.saved-combinations h2{margin:0;font-size:.9rem}
#savedComboCount{font-size:.75rem;color:var(--muted)}
.saved-combo-strip{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 0 8px}
.saved-combo{position:relative;flex:0 0 94px;scroll-snap-align:start}
.saved-combo-preview{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}
.saved-combo-preview img{display:block;width:100%;height:auto}
.saved-combo-remove{position:absolute;top:0;right:0;width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:20px;cursor:pointer}
#comboStatus{font-size:.8rem;margin:8px 0 0}
#comboStatus:empty{display:none}
body .community-hero{flex-direction:row;align-items:center;gap:12px}
body .community-hero h1{margin:0;font-size:clamp(1.65rem,4vw,3rem)}
body .community-hero .btn{width:auto;text-decoration:none}
body .icon-control{width:40px;min-width:40px;height:40px;padding:8px;border:0;background:var(--paper,#fcfcfb);color:var(--navy);border-radius:8px}
body .icon-control:hover{background:#edf0fa;color:var(--navy)}
body .icon-control svg,body .action-icon{width:18px;height:18px;flex:none}
body .profile-copy strong{overflow-wrap:anywhere;white-space:normal}
@media(max-width:760px){body .account-card{padding:18px}body .account-community{padding:0}body .account-sections a{padding:8px 3px;min-height:40px}body .community-hero{gap:16px}body .viewer-controls .btn{flex:1 1 calc(50% - 8px)}}
.newsletter-preference{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px;font-size:.82rem}
.newsletter-preference .btn{padding:7px 12px;min-height:38px;font-size:.75rem;letter-spacing:0;text-transform:none}
.account-form .marketing-choice{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;line-height:1.5;letter-spacing:0;text-transform:none}
.account-form .marketing-choice input{flex:none;width:18px;height:18px;margin:3px 0 0;padding:0;accent-color:var(--navy)}
.account-legal-footer{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:20px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}