/* White boutique identity: image-led compositions and restrained typography. */
:root{--sec:clamp(64px,7vw,112px);--head-h:100px;--wrap:1320px}
body{background:#fff;color:#202020}.container{max-width:1320px}.site-header{background:#fff;box-shadow:none;border-bottom:1px solid #e8e8e8}.site-header .container{max-width:none;position:relative;min-height:100px}.brand{position:absolute;left:50%;transform:translateX(-50%)}.brand-artwork{width:220px;max-height:78px}.nav{gap:18px;max-width:40%;font-size:12px;letter-spacing:.13em;text-transform:uppercase}.nav a{padding:12px 0;border-radius:0}.nav a:hover,.nav a[aria-current=page]{background:transparent;color:#0879c5}.nav a[data-i18n='nav.private'],.nav a[data-i18n='nav.about']{display:none}.header-actions{margin-left:auto;gap:22px}.order-link{font-size:10px;letter-spacing:.08em;border-radius:0;border:0}.lang{font-size:10px}.menu-btn{border-radius:0}.mobile-nav a{font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.btn{border-radius:0;min-height:50px;padding:0 28px;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;box-shadow:none!important}.btn-light,.band .btn-light,.contact-section .btn-light{background:#222;border-color:#222;color:white}.btn-light:hover,.band .btn-light:hover,.contact-section .btn-light:hover{background:#0879c5;border-color:#0879c5;transform:none}.btn-line{background:transparent;border-color:#bbb;color:#222}.text-link{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:500}.h2,.intro-statement,.page-head .h2,.pl-top .h2,.band .h2,.contact-section .h2{font-size:clamp(25px,2.5vw,38px);font-weight:400;line-height:1.45;letter-spacing:.09em;text-transform:uppercase}.eyebrow,.editorial-label{font-size:10px;letter-spacing:.18em;font-weight:500;color:#565656!important}.lede{font-size:14px;line-height:1.9}
.hero.hero-portrait{min-height:640px;height:calc(100svh - 100px);max-height:900px;justify-content:flex-end;background:#fff}.hero-portrait .hero-film img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-portrait::before{background:linear-gradient(90deg,#fff 0%,#ffffffeb 29%,#ffffff00 60%)}.hero-portrait .hero-copy{width:55%;max-width:770px;padding:70px var(--gutter);margin:0}.hero-portrait h1{font:400 clamp(30px,3.1vw,48px)/1.4 var(--sans);letter-spacing:.055em;text-transform:uppercase;max-width:13em;margin-top:20px}.hero-portrait .dream-line{color:#202020;margin:0}.hero-portrait .hero-description{font-size:13px;line-height:1.8;margin-top:20px}.hero-actions{gap:14px;margin-top:28px}.hero-portrait .hero-actions .btn{font-size:10px}.house-intro{padding:100px 24px;text-align:center}.intro-grid{display:block;max-width:840px}.intro-grid>.editorial-label{border:0;max-width:none;margin:0 0 32px;padding:0}.intro-statement{font-size:clamp(24px,2.6vw,36px);max-width:none;margin-bottom:24px}.intro-grid .lede{max-width:48em;margin:auto;font-size:14px}.nowrap{white-space:normal}
.campaign-feature{position:relative;width:100%;min-height:580px;height:75vw;max-height:780px;overflow:hidden;background:#303633}.campaign-feature>img{width:100%;height:100%;object-fit:cover;object-position:center 40%}.campaign-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent 60%)}.feature-caption{position:absolute;z-index:1;bottom:56px;left:var(--gutter);color:#fff}.feature-caption .eyebrow{color:#fff!important}.feature-caption h2{font:400 34px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 26px}.feature-caption .btn{background:#fff;color:#222;border-color:#fff}.feature-caption .btn:hover{background:#e9e9e9}
.production-layout{grid-template-columns:1fr 1fr;gap:8vw}.production-title{display:block;margin:0}.production-title .editorial-label{border:0;padding:0;margin-bottom:20px}.production-title .h2{font-size:32px;max-width:14em}.production-notes{gap:24px}.blueprint{border:0;border-radius:0;padding:20px 40px}.blueprint img{height:360px}.blueprint figcaption{display:none}.sec-private{border-block:1px solid #ededed!important}.pl-top{gap:8vw;margin-bottom:48px;align-items:start}.pl-top .h2{max-width:12em}.pl-points{gap:40px}.pl-points h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase}.pl-points p{font-size:13px;line-height:1.9}.heritage-grid{gap:8vw}.heritage-year{font:400 62px/1 var(--sans);letter-spacing:.04em;color:#222;margin-bottom:26px}.heritage-copy .story-text{font:400 clamp(20px,2vw,28px)/1.65 var(--sans);letter-spacing:.035em}.heritage-photo img{border-radius:0}.heritage-photo figcaption{display:none}.band{padding:60px 0;border-block:1px solid #ededed}.band .container{align-items:center;gap:32px}.band .h2{font-size:26px;max-width:23em}.contact-grid{grid-template-columns:1fr 1.15fr;gap:8vw}.contact-section .h2{font-size:32px;max-width:14em}.contact-section .form-grid{padding:0;border:0;border-radius:0}.field input,.field select,.field textarea,.contact-section .field input,.contact-section .field select,.contact-section .field textarea{border-radius:0;background:white;border-color:#d5d5d5}.site-footer{border-top:1px solid #eee;padding-top:56px}.foot-brand .tagline{font:400 14px/1.9 var(--sans);max-width:26em}.foot-nav .small{font-size:11px;letter-spacing:.12em;text-transform:uppercase}.foot-bottom{margin-top:40px}.page-head.asset-page-head{background:#fff!important;min-height:0;padding:70px 0 48px}.asset-page-head::before,.asset-page-head::after{display:none}.asset-page-head .h2{color:#222;font-size:42px}.asset-page-head .lede{color:#555;max-width:56em;font-size:14px}.gallery-page .masonry{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.gallery-page .masonry .shot,.gallery-page .masonry .shot:nth-child(4n+2){margin:0;padding:0;aspect-ratio:4/3;border-radius:0}.gallery-page .masonry .shot img{width:100%;height:100%;object-fit:contain}.gallery-page .sub-head{margin:64px 0 30px}.sub-head h2{font:400 24px var(--sans);letter-spacing:.1em;text-transform:uppercase}.prod-photo img{border-radius:0}.stage-item h3{font-size:22px;font-weight:400}.stage-item p{line-height:1.9}.stages{gap:48px 64px}.order-main h1,.cat-hero h1,.sale-hero h1{font-size:40px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}.order-side,.lock-card{border-radius:0;box-shadow:none}.reveal-ready{opacity:1;transform:none}
@media(max-width:1279px){.site-header .container{min-height:90px}.nav{display:none}.menu-btn{display:inline-flex}.brand{left:var(--gutter);transform:none}.brand-artwork{width:205px}.hero.hero-portrait{height:calc(95svh - 90px)}.header-actions{gap:14px}}
@media(max-width:760px){.hero.hero-portrait{height:auto;max-height:none;min-height:780px}.hero-portrait .hero-film img{object-position:77% center}.hero-portrait::before{background:linear-gradient(180deg,transparent 0%,transparent 25%,#ffffffb8 42%,#fffffff5 54%,#fff 66%)}.hero-portrait .hero-copy{width:100%;max-width:none;padding:340px var(--gutter) 44px}.hero-portrait h1{font-size:29px;max-width:16em;line-height:1.4;letter-spacing:.04em}.hero-portrait .hero-description{font-size:13px}.hero-portrait .hero-actions .btn{font-size:9px;padding-inline:18px}.hero-portrait .eyebrow{font-size:9px}.house-intro{padding:64px 0}.intro-statement{font-size:24px}.campaign-feature{min-height:480px;height:125vw;max-height:650px}.campaign-feature>img{object-position:40% center}.feature-caption{bottom:32px}.feature-caption h2{font-size:28px}.production-layout,.pl-top,.heritage-grid,.contact-grid{grid-template-columns:1fr;gap:32px}.production-title .h2,.pl-top .h2,.contact-section .h2{font-size:27px}.blueprint{padding:0 30px}.blueprint img{height:250px}.heritage-copy .story-text{font-size:22px!important}.heritage-year{font-size:52px}.pl-points{gap:24px}.band .h2{font-size:24px}.contact-section .form-grid{padding:0}.asset-page-head .h2{font-size:32px}.page-head.asset-page-head{padding:48px 0 28px}.gallery-page .masonry{gap:18px}.stages{gap:32px}.hero-actions{gap:10px}.band .acts{gap:10px}.band .btn{padding-inline:18px}}
@media(max-width:480px){:root{--head-h:82px}.site-header .container{min-height:82px}.brand-artwork{width:176px}.order-link{font-size:9px;letter-spacing:0;padding:0}.header-actions{gap:8px}.hero.hero-portrait{min-height:760px}.hero-portrait h1{font-size:27px}.hero-portrait .hero-copy{padding-top:320px}.hero-portrait .hero-actions .btn{min-height:46px;padding-inline:16px;font-size:8px}.gallery-page .masonry{grid-template-columns:1fr}.foot-grid{gap:30px}.form-foot .btn{width:100%}.house-intro .container{padding-inline:var(--gutter)}}
.nav{margin-left:0}.feature-caption h2{color:#fff}.house-intro .container{padding-inline:0}
@media(max-width:760px){.campaign-feature{min-height:0;height:auto;aspect-ratio:3/2;max-height:none}.campaign-feature>img{height:100%;object-position:center}.feature-caption{bottom:22px}.feature-caption .eyebrow{font-size:8px}.feature-caption h2{font-size:22px;margin:8px 0 16px}.feature-caption .btn{min-height:40px;font-size:8px;padding-inline:18px}.heritage-photo{max-width:100%;margin:0}}
/* Top bar: the charcoal of the home page photo (#2a292b) with white logo and links, on every page except the
   catalogue (body class "dark-head"). On the home page it starts see-through over the photo and fills in with
   the same charcoal once the photo has scrolled away or the phone menu opens. */
.dark-head .site-header{background:#2a292b;border-bottom-color:#2a292b}
.dark-head .site-header>.container{--paper:#fff;--mute-2:#ffffffb3;--line-2:#ffffff8c;color:#fff}
.dark-head .site-header .brand-artwork{filter:brightness(0) invert(1)}
.dark-head .site-header .nav a{color:#fff}
.dark-head .site-header .nav a:hover,.dark-head .site-header .nav a[aria-current=page]{color:#6cc0ff}
.dark-head .site-header .lang button{color:#ffffffb3}
.dark-head .site-header .lang button.is-on{background:transparent;color:#fff}
.dark-head .site-header .menu-btn{color:#fff;border-color:#ffffff8c;background:transparent}
.dark-head .site-header .order-link,.dark-head .site-header .icon-link{color:#fff}
.dark-head .mobile-nav{background:#2a292b;border-top-color:#ffffff24}
.dark-head .mobile-nav a{color:#fff;border-bottom-color:#ffffff24}
.dark-head .mobile-nav .lang button{color:#ffffffb3;background:transparent}
.dark-head .mobile-nav .lang button.is-on{color:#fff}
.has-video-hero .site-header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background-color .35s ease,border-color .35s ease}
.has-video-hero .site-header.is-solid{background:#2a292b;border-bottom-color:#2a292b}
.has-video-hero .brand-artwork,.has-video-hero .nav a,.has-video-hero .lang button,.has-video-hero .menu-btn{transition:filter .35s ease,color .35s ease,background-color .35s ease,border-color .35s ease}
.hero-video{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#3a3a3a}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%,#0000 72%,#00000059 100%)}
.hero-scroll{position:absolute;z-index:1;left:50%;bottom:24px;transform:translateX(-50%);display:flex;justify-content:center;width:44px;height:72px;padding-top:8px}
.hero-scroll span{position:relative;display:block;width:1px;height:100%;overflow:hidden;background:#ffffff59}
.hero-scroll span::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:hero-scroll 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes hero-scroll{to{top:100%}}
.hero-video .hero-motion{position:absolute;z-index:1;right:var(--gutter);bottom:32px;min-height:36px;padding:0 14px;border:1px solid #ffffff8c;border-radius:0;background:transparent;color:#fff;font:500 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.hero-video .hero-motion:hover{background:#fff;color:#222}
.home-statement{padding:clamp(72px,8vw,120px) 0;background:#fff}
.home-statement h1{font:400 clamp(30px,3.1vw,48px)/1.4 var(--sans);letter-spacing:.055em;text-transform:uppercase;color:#132133;max-width:13em;margin:20px 0 0}
.home-statement .dream-line{display:block;color:#202020}
.home-statement .hero-description{font-size:13px;line-height:1.8;color:#566476;max-width:27em;margin-top:20px}
@media(max-width:760px){.hero-video video{object-position:38% center}.hero-video .hero-motion{bottom:24px;min-height:32px;padding:0 10px;font-size:9px}.home-statement{padding-block:56px}.home-statement h1{font-size:29px;max-width:16em;letter-spacing:.04em}.home-statement .eyebrow{font-size:9px}.home-statement .hero-actions .btn{font-size:9px;padding-inline:18px}}
@media(max-width:480px){.hero-video{min-height:480px}.home-statement h1{font-size:27px}.home-statement .hero-actions .btn{min-height:46px;padding-inline:16px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-scroll span::after{animation:none;top:30%}.has-video-hero .site-header,.has-video-hero .brand-artwork,.has-video-hero .nav a{transition:none}}
/* Contact page: chat line, underlined WhatsApp link, links stay readable on hover */
.contact-info dd .chat-line{display:block;margin-top:6px}
.contact-info dd a[href^="https://wa.me"]{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.contact-info dd a:hover{color:inherit}
/* Home: company story below the gallery, one column */
.about-section{padding:var(--sec) 0;background:#fff}
.about-text{max-width:820px}
.about-text p{margin:0 0 1.5em;font-size:15px;line-height:1.95;color:#3f4a58}
.about-text p:last-child{margin-bottom:0}
/* Contact page: neon portrait background with white text and cyan labels, as on www.dreamhimax.com/contact.html */
.contact-page .contact-bg{position:relative;isolation:isolate;background:#001a5c url(../images/atelier/contact.webp) 30% center/cover no-repeat;color:#fff}
.contact-page .contact-bg::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#040b2bb3 0%,#040b2b8c 50%,#040b2b59 100%)}
.contact-page .page-head.asset-page-head,.contact-page .contact-section{background:transparent!important;border-color:#ffffff26;--paper:#fff;--mute:#ffffffd9;--mute-2:#ffffffd9;--line:#ffffff26;--line-2:#ffffff40}
.contact-page .asset-page-head .h2,.contact-page .contact-info .lede,.contact-page .contact-info dd,.contact-page .contact-info dd a{color:#fff}
.contact-page .contact-info dt{color:#fff;font-weight:600}
.contact-page .contact-info dd a[href^="https://wa.me"],.contact-page .field>span{color:#5fd4f4}
.contact-page .btn-light{background:#fff;border-color:#fff;color:#14213d}
.contact-page .btn-light:hover{background:#5fd4f4;border-color:#5fd4f4;color:#061233}
.contact-page .form-msg{color:#fff}
@media(max-width:760px){.contact-page .contact-bg{background-size:240% auto;background-position:46% 0}.contact-page .contact-bg::before{background:linear-gradient(180deg,#040b2b8c 0,#040b2b8c 360px,#001a5c 620px,#001a5c 100%)}}
/* Catalogue cards: Add button as tall as the quantity box and half its width; "✔ n pc(s) added" shows between them */
.sp-buy{container-type:inline-size;flex-wrap:wrap;justify-content:flex-start;gap:6px 8px}
.sp-buy .sp-add{flex:none;width:46px;height:30px;min-height:0;margin-left:auto;padding:0;font-size:9px;letter-spacing:.04em}
.sp-added{flex:1 1 0;min-width:0;font-size:11px;line-height:1.25;color:#1a7f4b;text-align:center}
.sp-added:empty{display:none}
.sp-added.is-shown{animation:sp-added-in .25s ease}
@keyframes sp-added-in{from{opacity:0}}
@container (max-width:190px){.sp-added{order:3;flex-basis:100%;text-align:left}}
@media(prefers-reduced-motion:reduce){.sp-added.is-shown{animation:none}}
/* Catalogue photo viewer: quantity box whose list always opens downward */
.lb-qty .qty-dd-btn{position:relative;min-width:64px;min-height:36px;padding:0 28px 0 12px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;color:#172131;font:700 14px var(--sans);text-align:left;cursor:pointer}
.lb-qty .qty-dd-btn::after{content:'';position:absolute;right:11px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.qty-dd.is-open .qty-dd-btn,.lb-qty .qty-dd-btn:focus-visible{border-color:#0879c5;outline:none;box-shadow:0 0 0 3px #0879c526}
.qty-dd-list{position:absolute;z-index:5;margin:0;padding:4px 0;list-style:none;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #cbd5df;border-radius:8px;box-shadow:0 10px 28px #1321332e;color:#172131;font:500 14px var(--sans)}
.qty-dd-list:focus{outline:none}
.qty-dd-list li{padding:6px 16px;line-height:1.4;cursor:pointer}
.qty-dd-list li.is-active{background:#eaf3fb}
.qty-dd-list li[aria-selected=true]{font-weight:700;color:#0879c5}
/* Catalogue product viewer: white photo side, dark detail panel, previous / next model arrows beside the window */
.lightbox.is-product .lb-dialog{width:min(1180px,100% - 150px);background:#fff;border:0;border-radius:14px;box-shadow:0 30px 80px #00000080;grid-template-columns:minmax(0,1fr) 380px}
.lightbox.is-product .lb-media{background:#fff}
.lightbox.is-product .lb-info{--paper:#fff;--mute:#ffffffbf;--mute-2:#ffffff99;--line:#ffffff1a;--line-2:#ffffff33;--ink:#0f1217;padding:30px 18px 22px;gap:18px;background:linear-gradient(180deg,#1d212b 0%,#151820 100%);color:#fff}
.lightbox.is-product .lb-title{padding-right:56px;font:800 26px/1.15 var(--sans);letter-spacing:-.01em;color:#fff;text-transform:none}
.lightbox.is-product .lb-shades{border:1px solid #ffffff1f;border-radius:14px;background:#ffffff06}
.lightbox.is-product .lb-shade{padding:6px 10px 6px 8px;border-bottom:1px solid #ffffff14}
.lightbox.is-product .lb-shade:last-child{border-bottom:0}
.lightbox.is-product .lb-shade.is-on{background:#2a3142}
.lightbox.is-product .lb-pick,.lightbox.is-product .lb-shade.is-on .lb-name{color:#fff;font:700 13px var(--sans)}
.lightbox.is-product .lb-swatch{width:22px;height:22px;box-shadow:0 0 0 1px #ffffff4d}
.lightbox.is-product .lb-shade.is-on .lb-swatch{box-shadow:0 0 0 2px #2a3142,0 0 0 4px #8fb3ff}
.lightbox.is-product .lb-qty{font-size:11px;font-weight:500;color:#ffffffa6}
.lightbox.is-product .lb-qty .qty-dd-btn{border-color:#ffffff2e;border-radius:10px;background:#0f1217;color:#fff}
.lightbox.is-product .lb-add{min-height:52px;border:0;border-radius:16px;background:linear-gradient(180deg,#3d7bf0,#2b5fd0);color:#fff;font:700 15px var(--sans);letter-spacing:0;text-transform:none}
.lightbox.is-product .lb-add:hover:not(:disabled){background:linear-gradient(180deg,#4a87f7,#3068dc)}
.lightbox.is-product .lb-add:disabled{opacity:1;background:#2a3a6a;color:#ffffff59}
.lightbox.is-product .lb-add.is-done{background:#1f9d6b;color:#fff}
.lightbox.is-product .lb-note{font-size:12px;line-height:1.6;color:#ffffffa6}
.lightbox.is-product .lb-review{color:#fff}
.lightbox.is-product .lb-close{top:16px;right:16px;background:#fff;color:#151820}
.lightbox.is-product .lb-view{width:56px;height:42px;border:1px solid #d9dce2;border-radius:8px;box-shadow:0 2px 6px #0000001a}
.lightbox.is-product .lb-view.is-on{border:2px solid #3b82f6;box-shadow:0 0 0 2px #3b82f633}
.lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{display:flex;background:#ffffff1f;border-color:#ffffff59;color:#fff}
.lightbox.is-product.has-nav .lb-prev:hover,.lightbox.is-product.has-nav .lb-next:hover{background:#fff;color:#151820}
.lightbox .qty-dd-list{border-color:#ffffff26;background:#1d212b;color:#fff;box-shadow:0 14px 32px #00000099}
.lightbox .qty-dd-list li.is-active{background:#2a3142}
.lightbox .qty-dd-list li[aria-selected=true]{color:#8fb3ff}
@media(max-width:960px){.lightbox.is-product .lb-dialog{width:100%;max-height:calc(100dvh - 96px);align-self:start;grid-template-columns:1fr}.lightbox.is-product .lb-title{font-size:22px}.lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{bottom:16px}}
/* Footer: the real logo image instead of a typed wordmark (the stand-in fonts looked soft) */
.foot-logo{display:block;width:220px;max-width:100%;height:auto}
@media(max-width:480px){.foot-logo{width:190px}}

/* Home page Gallery section: a film instead of a photo, filling the same frame */
.campaign-feature>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media(max-width:760px){.campaign-feature>video{object-position:center 25%}}

/* Home statement: "We don't just design eyewear," on the first line, "we design dreams." on the second */
.home-statement h1{max-width:none}
.home-statement .first-line{display:block;white-space:nowrap}
.home-statement h1{font-size:min(clamp(30px,3.1vw,48px),calc((100vw - 2 * var(--gutter)) / 14.4))}
@media(max-width:760px){.home-statement h1{font-size:min(29px,calc((100vw - 2 * var(--gutter)) / 14.2))}}
@media(max-width:480px){.home-statement h1{font-size:min(27px,calc((100vw - 2 * var(--gutter)) / 14.2))}}

/* Order request: a plain black "Submit" button with a note under it (no WhatsApp button) */
.order-submit{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.order-submit-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;border-radius:6px;background:#000;color:#fff;font:400 19px/1 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .2s ease}
.order-submit-btn:hover{background:#2b2b2b}
.order-submit-btn:disabled{opacity:.35;cursor:not-allowed}
.order-submit-note{margin:0;color:#6f7682;font-size:16px;line-height:1.5}

/* Home statement: eyebrow at the navigation size; headline in lower case, typed out letter by letter,
   with "eyewear" and "dreams" in the blue of the logo */
.home-statement .eyebrow{font-size:12px;letter-spacing:.13em;font-weight:500}
.home-statement h1.type-title{text-transform:lowercase;letter-spacing:.01em}
.type-title .is-blue{color:#0084e0}
.type-title .ch{position:relative}
.type-title.is-typing .ch{visibility:hidden}
.type-title.is-typing .ch.on{visibility:visible}
.type-title .ch.is-caret::after{content:"";position:absolute;right:-.08em;top:.18em;bottom:.12em;width:2px;background:#0084e0;animation:type-caret 1s steps(1) infinite}
@keyframes type-caret{50%{opacity:0}}

/* About text: starts at the same left edge as "Wholesale eyewear for eye care professionals", slightly larger type */
.about-text.container{max-width:none}
.about-text p{max-width:46em;font-size:18px;line-height:1.85}
@media(max-width:760px){.about-text p{font-size:16px;line-height:1.8}}

/* One typeface everywhere: every heading and text uses Manrope, the navigation font
   (the old display serif is no longer loaded; the logo is a picture and keeps its own lettering) */
:root{--serif:var(--sans);--logo-himax:var(--sans);--logo-fever:var(--sans)}
.campaign-word,.oversize-index{font-style:normal}

/* Home statement and About: text on the left, a campaign photo on the right (stacked on phones).
   The photos are cropped to the frame around the face so the glasses always show in full. */
.statement-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.statement-photo{margin:0;width:100%;max-width:420px;aspect-ratio:6/5;overflow:hidden;background:#f1f2f4}
.statement-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr);gap:clamp(40px,6vw,104px);align-items:start}
.about-grid .about-text{max-width:none}
.about-photo{margin:0;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f1f2f4}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
@media(max-width:960px){.statement-grid,.about-grid{grid-template-columns:1fr}.statement-photo{max-width:none;aspect-ratio:4/3}.about-photo{aspect-ratio:4/3}}

/* Catalogue: no model counts (total or per filter option); a shorter search box on computers */
.sf-check i,.sb-opt i{display:none}
@media(min-width:761px){.shop-tools input[type="search"]#shop-q{flex:0 1 325px;width:325px}}

/* Catalogue cards: a bold black frame with a soft shadow around each photo, smaller model numbers,
   a compact info block (about a third shorter) and half the space between rows */
.shop-grid,body.filters-open .shop-grid{row-gap:22px}
.shop-grid .sp-img{border:2px solid #111;box-shadow:0 8px 16px -4px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.12)}
.shop-grid .sp-body{padding-top:5px;gap:2px}
.shop-grid .sp-body h3{font-size:14px;line-height:16px}
.shop-grid .sp-size{font-size:11px;line-height:16px}
.shop-grid .sp-swatches{margin-top:0;gap:4px;min-height:14px}
.shop-grid .sp-dot{width:12px;height:12px}
.shop-grid .sp-cname{font-size:11px;line-height:14px}
.shop-grid .sp-buy{margin-top:4px;padding-top:4px}
.shop-grid .sp-buy .qty{height:24px}
.shop-grid .sp-buy .qty button{width:24px;height:22px;font-size:13px}
.shop-grid .sp-buy .qty input{width:28px;height:22px;font-size:12px}
.shop-grid .sp-add{min-height:24px;height:24px;padding:0 12px}
@media(max-width:760px){.shop-grid,body.filters-open .shop-grid{row-gap:13px}}

/* About photo: exactly as tall as the About text, from the top of the first line ("Himax ...")
   to the baseline of the last line ("... design."); the photo fills that space, cropped around the face */
.about-grid{align-items:stretch}
.about-photo{position:relative;aspect-ratio:auto;font-size:18px;margin:.557em 0 .573em}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
@media(max-width:960px){.about-photo{margin:0;aspect-ratio:4/3}}

/* Catalogue cards, final shape: one rounded box with the bold black frame and shadow around the whole card
   (photo + details), and the details block (model number to Add button) a further third shorter */
.shop-grid .sp-card{border:2px solid #111;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 16px -4px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.12)}
.shop-grid .sp-img{border:0;border-bottom:1px solid rgba(0,0,0,.1);box-shadow:none;border-radius:0}
.shop-grid .sp-body{padding:8px 10px 10px;gap:1px}
.shop-grid .sp-body h3{font-size:14px;line-height:14px}
.shop-grid .sp-size{line-height:14px}
.shop-grid .sp-swatches{min-height:12px;gap:4px}
.shop-grid .sp-dot{width:11px;height:11px}
.shop-grid .sp-cname{line-height:12px}
.shop-grid .sp-buy{margin-top:2px;padding-top:0;border-top:0}
.shop-grid .sp-buy .qty{height:20px}
.shop-grid .sp-buy .qty button{width:20px;height:18px;font-size:12px}
.shop-grid .sp-buy .qty input{width:26px;height:18px;font-size:11px}
.shop-grid .sp-add{min-height:20px;height:20px;padding:0 10px;font-size:9px}
.shop-grid .sp-body{gap:0}
.shop-grid .sp-title{line-height:14px;height:14px;align-items:center}
.shop-grid .sp-swatches{margin-top:1px}
.shop-grid .sp-buy{margin-top:3px}
.shop-grid .sp-buy .qty,.shop-grid .sp-add{height:19px;min-height:19px}
.shop-grid .sp-buy .qty button,.shop-grid .sp-buy .qty input{height:17px}
.shop-grid .sp-swatches{margin-top:0}
.shop-grid .sp-buy{margin-top:2px}

/* Home statement: the two photos line up (same left edge and width), and pointing at a word of the
   headline makes its letters zoom and fade in, one after another */
.statement-grid{grid-template-columns:minmax(0,1fr) minmax(0,.68fr);gap:clamp(40px,6vw,104px)}
.statement-photo{max-width:none}
@media(max-width:960px){.statement-grid{grid-template-columns:1fr}}
.type-title .word{display:inline-block;white-space:nowrap}
.type-title .ch{display:inline-block;transform-origin:50% 75%}
/* touching any letter sends a slow-motion wave through both lines: every letter rises, zooms and fades back in, in order */
.type-title.is-wave .ch{animation:ch-wave 1.8s cubic-bezier(.33,0,.2,1) both;animation-delay:calc(var(--g) * 70ms)}
@keyframes ch-wave{0%{opacity:.2;transform:translateY(.28em) scale(.6)}55%{opacity:1;transform:translateY(-.14em) scale(1.22)}100%{opacity:1;transform:none}}

/* colours marked out of stock: "Not available" instead of the quantity (card and product viewer) */
.sp-na{display:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b3261e;line-height:19px}
.sp-buy.is-na .qty,.sp-buy.is-na .sp-add,.sp-buy.is-na .sp-added{display:none}
.sp-buy.is-na .sp-na{display:inline-block}
.lb-qty.lb-na span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ff9b8f;white-space:nowrap;padding:0 4px}

/* Contact page typography, all from the scale in css/site.css :root */
.contact-page .asset-page-head .h2{font-size:var(--fs-title);line-height:1.2}
.contact-page .contact-info .lede{font-size:var(--fs-body);line-height:var(--lh-body);max-width:34em}
.contact-page .contact-info dl{font-size:var(--fs-body);line-height:var(--lh-body)}
.contact-page .contact-info dd a{font-size:inherit;line-height:inherit}
.contact-page .field>span{letter-spacing:.01em}
.contact-page .form-foot .btn{font-size:13px;letter-spacing:.12em;padding:0 34px}
@media(max-width:760px){:root{--fs-label:14px;--fs-meta:15px}}

/* top of the home page: a full-screen campaign photo; the model sits just right of centre, so the picture
   is anchored a little to the right to keep her whole on every screen */
.hero-video .hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% center}
/* phones and upright tablets show a narrow slice, centred on her face and glasses */
@media(max-aspect-ratio:5/4){.hero-video .hero-still{object-position:58% center}}

/* Home statement on its pink photo: the words sit on the plain pink on the left, the model fills the right.
   The headline is sized so its first line always ends before her hair, on every screen width. */
.home-statement.has-photo{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(49.66vw,900px);padding-block:clamp(40px,5vw,80px);background:#fdbacd}
.has-photo .statement-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 20%}
.has-photo .statement-grid{position:relative;z-index:1;display:block}
.home-statement.has-photo h1{font-size:min(48px,calc((min(1320px,100vw - 2 * var(--gutter)) / 2 - 1vw) / 14.4))}
.has-photo .eyebrow{color:#2b2f3a}
/* phones and small tablets: the words on pink first, then the photo below, blending in at the top */
@media(max-width:860px){
  .home-statement.has-photo{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-bottom:0}
  .has-photo .statement-grid{order:1}
  .has-photo .statement-bg{order:2;position:relative;inset:auto;height:auto;aspect-ratio:16/10;object-position:90% 20%;margin-top:clamp(28px,6vw,48px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px);mask-image:linear-gradient(to bottom,transparent 0,#000 64px)}
  .home-statement.has-photo h1{font-size:min(29px,calc((100vw - 2 * var(--gutter)) / 14.2))}
}
@media(max-width:560px){
  .has-photo .statement-bg{aspect-ratio:1/1;object-position:95% 20%}
  .home-statement.has-photo h1{font-size:min(27px,calc((100vw - 2 * var(--gutter)) / 14.2))}
}
/* the arrow on the top photo lands the pink section right under the header (no strip of the photo left showing) */
.has-video-hero #intro{scroll-margin-top:calc(-1 * 12px)}

/* About section on its green photo: the plain green fills the whole section behind the words,
   the model stays on the right half and blends in at her left edge. However long the text runs
   (English or Spanish), she never moves under the words. */
.about-section.has-photo{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(49.66vw,900px);padding-block:clamp(56px,6vw,96px);background:#a6d9b4}
.has-photo .about-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%}
.has-photo .about-bg{position:absolute;top:0;right:0;bottom:0;width:50%;height:100%;object-fit:cover;object-position:88% 22%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
.about-section.has-photo>.container{position:relative;z-index:1}
.has-photo .about-grid{display:block}
.has-photo .about-text{max-width:calc(min(1320px,100vw - 2 * var(--gutter)) / 2 - 24px)}
.has-photo .about-text p{color:#1d2733}
/* phones and tablets: the words on the green first, then the photo below, fading in at the top */
@media(max-width:960px){
  .about-section.has-photo{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:0}
  .has-photo .about-text{max-width:none}
  .has-photo .about-bg{position:relative;top:auto;right:auto;bottom:auto;order:2;width:100%;height:auto;aspect-ratio:16/10;object-position:90% 22%;margin-top:clamp(28px,6vw,48px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px);mask-image:linear-gradient(to bottom,transparent 0,#000 64px)}
  .about-section.has-photo>.container{order:1}
}
@media(max-width:560px){.has-photo .about-bg{aspect-ratio:1/1;object-position:84% 22%}}

/* Catalogue: grey card outlines, tight gaps between frames, compact Filters button */
.shop-grid .sp-card{border-color:#b5bac2}
.shop-grid,body.filters-open .shop-grid{gap:7px}
@media(max-width:760px){.shop-grid,body.filters-open .shop-grid{gap:4px}}
#shop-ftoggle{min-height:0;height:28px;padding:0 10px;gap:5px}
#shop-ftoggle svg{width:12px;height:12px}
/* the catalogue opens straight on the category links: the heading is kept for screen readers only */
.cat-hero.no-intro{padding-top:clamp(18px,2vw,28px)}
.cat-hero.no-intro .shop-pills{margin-top:0;padding-top:0;border-top:0}

/* Product viewer: the Previous / Next arrows sit right beside the product box, each with its word next to it
   (label beside the arrow on wide screens, under it on narrower ones, along the bottom on tablets and phones) */
.lb-label{display:none}
.lightbox.is-product{--lb-side:140px;--lb-w:min(1180px,100vw - 2 * var(--lb-side) - 32px)}
.lightbox.is-product .lb-dialog{width:var(--lb-w)}
.lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{display:flex;align-items:center;gap:10px;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;transform:translateY(-50%);font:600 13px/1.2 var(--sans);letter-spacing:.02em}
.lightbox.is-product.has-nav .lb-prev{left:auto;right:calc(50% + var(--lb-w) / 2 + 14px)}
.lightbox.is-product.has-nav .lb-next{right:auto;left:calc(50% + var(--lb-w) / 2 + 14px)}
.lightbox.is-product .lb-label{display:block;white-space:nowrap}
.lightbox.is-product .lb-arrow{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff59;background:#ffffff1f;transition:background-color .2s ease,color .2s ease}
.lightbox.is-product.has-nav .lb-prev:hover,.lightbox.is-product.has-nav .lb-next:hover{background:transparent;color:#fff}
.lightbox.is-product .lb-prev:hover .lb-arrow,.lightbox.is-product .lb-next:hover .lb-arrow,.lightbox.is-product .lb-prev:focus-visible .lb-arrow,.lightbox.is-product .lb-next:focus-visible .lb-arrow{background:#fff;color:#151820}
@media(max-width:1240px) and (min-width:961px){
  .lightbox.is-product{--lb-side:84px}
  .lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{flex-direction:column;gap:6px;font-size:12px}
}
@media(max-width:960px){
  .lightbox.is-product{--lb-w:100%}
  .lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{top:auto;bottom:18px;transform:none}
  .lightbox.is-product.has-nav .lb-prev{left:16px;right:auto}
  .lightbox.is-product.has-nav .lb-next{right:16px;left:auto}
  .lightbox.is-product .lb-arrow{width:42px;height:42px}
}
/* Private Label and About stay out of the phone menu too (already hidden in the computer menu) */
.mobile-nav a[data-i18n='nav.private'],.mobile-nav a[data-i18n='nav.about']{display:none}

/* Order page "Your details": one field per line, boxes a third narrower than the panel (full width on phones) */
.order-form .field input,.order-form .field textarea{width:67%}
@media(max-width:560px){.order-form .field input,.order-form .field textarea{width:100%}}
/* product viewer and catalogue cards: no zoom (the card photo opens the viewer) */
.lightbox.is-product .lb-media img{cursor:default}
.sp-img{cursor:pointer}
/* a field only robots fill in (the order is then ignored) */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Catalogue password page: a compact form (about a third of its old size) and larger copy on the left (+66%) */
.lock .container{grid-template-columns:minmax(0,1fr) 340px;gap:clamp(40px,6vw,104px)}
.lock-copy{gap:30px}
.lock-copy h1{font-size:clamp(42px,6.15vw,90px);line-height:1.04}
.lock-copy .lede{font-size:23px;line-height:1.6;max-width:28em}
.lock-card{padding:10px}
.lock-card form{gap:14px;padding:22px}
.lock-card h2{font-size:26px;line-height:1.15}
.lock-card .field{gap:6px;font-size:13px}
.lock-card .field input{min-height:40px;height:40px;padding-block:0}
.lock-card button[type=submit]{min-height:40px;padding-block:0}
.lock-foot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px;font-size:13px}
.lock-foot .btn{min-height:34px;padding-block:0}
@media(max-width:960px){.lock .container{grid-template-columns:1fr}.lock-card{max-width:400px}}
@media(max-width:600px){.lock-copy{gap:20px}.lock-copy .lede{font-size:19px}.lock-card{max-width:none}}

/* Header cart: "Cart" 75% larger, with a cart icon; on phones the icon stays visible (catalogue and order pages) */
.site-header .order-link{font-size:17.5px;letter-spacing:.02em;gap:7px}
.site-header .order-link .ol-icon{width:22px;height:22px;flex:none}
.site-header .order-link .cart-count{font-size:11px;letter-spacing:0}
@media(max-width:480px){.site-header .order-link:not(.is-empty-home){display:inline-flex}.site-header .order-link .ol-icon{width:24px;height:24px}}

/* Catalogue toolbar: a Search button at the end of the search bar, the cart at the right-hand end */
.shop-search{display:flex;align-items:stretch;flex:0 1 430px;min-width:0}
.shop-tools .shop-search input[type="search"]#shop-q{flex:1 1 auto;width:auto;min-width:0}
.shop-search-btn{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border:0;border-radius:0;background:#172131;color:#fff;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;flex:none}
.shop-search-btn:hover{background:#2a292b}
.shop-search-btn:focus-visible,.shop-cart:focus-visible{outline:2px solid #1a73c9;outline-offset:2px}
.shop-cart{margin-left:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #d5d9de;border-radius:50%;color:#172131;text-decoration:none;flex:none;transition:border-color .2s ease}
.shop-cart:hover{border-color:#172131}
.shop-cart .cart-count{position:absolute;top:-5px;right:-7px;min-width:20px;height:20px;line-height:20px;padding:0 5px;font-size:11px}
@media(max-width:760px){.shop-search{order:1;flex:1 1 100%}.shop-cart{order:0}}
.dark-head .site-header .cart-count{background:#fff;color:#172131}

/* Production page: the workshop photo behind the whole page (under a dark tint), all text white */
.production-bg{position:relative;isolation:isolate;color:#fff;background:linear-gradient(180deg,rgba(14,14,16,.45) 0%,rgba(14,14,16,.58) 50%,rgba(14,14,16,.72) 100%),url('../images/atelier/production.webp') center 40%/cover no-repeat #1b1b1d}
@media(min-width:1025px) and (hover:hover){.production-bg{background-attachment:fixed}}
.production-bg .page-head.asset-page-head{background:transparent!important;border-bottom:0}
.production-bg .asset-page-head .h2,.production-bg .lede,.production-bg .stage-item h3,.production-bg .stage-item p,.production-bg .stage-item::before{color:#fff}
.production-bg .asset-page-head .h2{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.production-bg .prod-split{grid-template-columns:minmax(0,1fr)}
.production-bg .prod-copy .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.8;max-width:44em}
.production-bg .stage-item p{color:rgba(255,255,255,.88)}
.production-bg .stage-item{border-top-color:rgba(255,255,255,.35)}
.production-bg .sec+.sec{border-top-color:rgba(255,255,255,.18)}
.production-bg .sec:first-of-type{padding-top:clamp(24px,3vw,48px)}
.production-bg{--paper:#fff;--mute:#ffffffe0;--mute-2:#ffffffd9;--line:#ffffff2e;--line-2:#ffffff59}
@media(max-width:1024px),(hover:none){.production-bg{background:linear-gradient(180deg,rgba(14,14,16,.38) 0,rgba(14,14,16,.6) 560px,#1b1b1d 1000px) 0 0/100% 100% no-repeat,url('../images/atelier/production.webp') 42% 0/auto 1000px no-repeat #1b1b1d}}

/* Gallery page: the pastel room photo behind the page, 5 photos a row, "SEE THE FULL CATALOG" twice as large */
.gallery-bg{position:relative;isolation:isolate;background:url('../images/atelier/gallery-bg.webp') center/cover no-repeat #f4b89a}
@media(min-width:1025px) and (hover:hover){.gallery-bg{background-attachment:fixed}}
.gallery-bg .page-head.asset-page-head{background:transparent!important;border-bottom:0}
.gallery-bg .asset-page-head .h2{color:#222}
.gallery-bg .asset-page-head .lede{color:#2b2b2b}
.gallery-bg .sec+.sec,.gallery-bg .sec-foot,.gallery-page .gallery-bg .sub-head{border-color:rgba(34,34,34,.18)}
.gallery-page .gallery-bg .masonry{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1100px){.gallery-page .gallery-bg .masonry{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.gallery-page .gallery-bg .masonry{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:600px){.gallery-page .gallery-bg .masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.gal-foot{justify-content:center}
.gal-foot .text-link{font-size:22px;letter-spacing:.08em;color:#222;gap:14px}
.gal-foot .text-link svg{width:28px;height:28px}
@media(max-width:600px){.gal-foot .text-link{font-size:18px}}
.gal-foot .text-link:hover{color:#000}
@media(max-width:1024px),(hover:none){.gallery-bg{background:linear-gradient(180deg,rgba(246,196,170,0) 0,rgba(246,196,170,0) 640px,#f6c4aa 900px) 0 0/100% 100% no-repeat,url('../images/atelier/gallery-bg.webp') 18% 0/auto 900px no-repeat #f6c4aa}}
/* footer: the copyright line 1.5 times larger (10px -> 15px) */
.foot-bottom [data-i18n="foot.rights"]{font-size:15px}

/* Cart page: "Back to the catalogue" and the heading right under the top bar; compact order lines (about 80% shorter) */
.order-page{padding-top:12px}
.order-back{margin-bottom:4px}
.order-main h1{line-height:1.05}
.order-sum{margin-top:6px;padding-bottom:8px}
.order-side{margin-top:0}
.order-line{grid-template-columns:64px minmax(0,1fr) auto auto;gap:4px 16px;padding:4px 0}
.order-line .plate{width:64px;height:32px;aspect-ratio:auto}
.order-line .plate img{width:100%;height:100%;object-fit:contain;padding:2px}
.order-line .info{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.order-line .info b{display:inline;font-size:14px;line-height:1.2}
.order-line .info span{display:inline;margin:0;font-size:13px}
.order-line .qty{height:26px}
.order-line .qty button{width:26px;height:24px;min-height:0;font-size:13px}
.order-line .qty input{width:32px;height:24px;font-size:13px}
.order-line .order-rm{font-size:12px;min-height:0}
@media(max-width:760px){
  .order-line{grid-template-columns:52px minmax(0,1fr) auto;gap:2px 10px}
  .order-line .plate{width:52px;height:28px;grid-row:span 2}
  .order-line .info b{font-size:14px}
  .order-line .qty{grid-column:3;grid-row:1;justify-self:end}
  .order-line .order-rm{grid-column:3;grid-row:2;justify-self:end;margin:0}
  .order-line .info{grid-column:2;grid-row:span 2;align-self:center}
}
.order-line{padding:2px 0}.order-line .qty{height:24px}.order-line .qty button,.order-line .qty input{height:22px}
@media(max-width:760px){.order-line{grid-template-columns:44px minmax(0,1fr) auto auto;gap:2px 8px}.order-line .plate{width:44px;height:24px;grid-row:auto}.order-line .info{grid-row:auto;display:block;line-height:1.15}.order-line .info b{display:block;font-size:13px}.order-line .info span{display:block;font-size:11.5px}.order-line .qty{grid-column:auto;grid-row:auto}.order-line .order-rm{grid-column:auto;grid-row:auto;font-size:11px}}
.order-main h1{font-size:20px;letter-spacing:.08em;margin-top:2px}
.campaign-feature>img{object-position:center 45%}@media(max-width:760px){.campaign-feature>img{object-position:center}}
/* gallery photos are not clickable: no zoom cursor, hover zoom or darkening */
.shot{cursor:default}.shot:hover img{transform:none;filter:none}.shot::before,.shot::after{display:none}
/* The section after the hero: deep midnight navy (#1B2A4A) instead of pink. The photo behind it has the same
   navy backdrop. Text is white / soft off-white; the button is off-white on navy so it stands out. */
.home-statement.has-photo{background:#1B2A4A;color:#F5F2EB}
.has-photo .eyebrow{color:#F5F2EB!important;opacity:.85}
.home-statement.has-photo h1,.home-statement.has-photo .dream-line{color:#FFFFFF}
.home-statement.has-photo .type-title .is-blue{color:#8CC8FF}
.home-statement.has-photo .hero-actions .btn{background:#F5F2EB;color:#1B2A4A;border-color:#F5F2EB}
.home-statement.has-photo .hero-actions .btn:hover,.home-statement.has-photo .hero-actions .btn:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#1B2A4A}
.home-statement.has-photo .hero-actions .btn:focus-visible{outline:2px solid #8CC8FF;outline-offset:3px}
/* Section after the hero, as in the reference: very dark midnight navy, large serif heading on three lines
   ("we don't just design" / "eyewear, we design" / "dreams."), light-blue accent words, white button */
.home-statement.has-photo{background:#031023}
.home-statement.has-photo h1.type-title{font-family:"Libre Baskerville","Baskerville","Times New Roman",Times,serif;font-weight:400;
  font-size:clamp(26px,2.9vw,44px);line-height:1.2;letter-spacing:-.005em;color:#FFFFFF;margin-top:18px}
.home-statement.has-photo .first-line,.home-statement.has-photo .dream-line{display:block;white-space:nowrap;color:#FFFFFF}
.home-statement.has-photo .type-title .is-blue{color:#87BEE5}
.home-statement.has-photo .type-title .ch.is-caret::after{background:#87BEE5}
.has-photo .eyebrow{color:#FFFFFF!important;opacity:1;font-weight:600;letter-spacing:.12em}
.home-statement.has-photo .hero-actions{margin-top:30px}
.home-statement.has-photo .hero-actions .btn{background:#FFFFFF;color:#0B1324;border-color:#FFFFFF;font-weight:600;letter-spacing:.12em}
.home-statement.has-photo .hero-actions .btn:hover{background:#E9EEF6;border-color:#E9EEF6}
@media(max-width:860px){.home-statement.has-photo h1.type-title{font-size:min(40px,calc((100vw - 2 * var(--gutter)) / 15.6))}}
/* Home gallery (third section): warm ivory, centred heading, 3 x 2 grid of frames and models wearing them */
.home-gallery{background:#F7F5F2;padding:clamp(64px,8vw,112px) 0}
.hg-head{text-align:center;max-width:46em;margin:0 auto clamp(32px,4vw,52px)}
.hg-label{margin:0;font:600 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#2A2B30}
.hg-title{margin:18px 0 12px;font:400 clamp(28px,3.2vw,46px)/1.15 "Libre Baskerville","Baskerville","Times New Roman",Times,serif;color:#1C1D22;letter-spacing:-.005em}
.hg-lead{margin:0;font-size:15px;line-height:1.6;color:#6E6A64}
.hg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);max-width:1180px;margin:0 auto}
.hg-tile{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:#EDEAE5;box-shadow:0 1px 2px rgba(28,29,34,.06),0 10px 28px rgba(28,29,34,.07)}
.hg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.hg-tile.is-model img{object-position:50% 30%}
.hg-tile:focus-visible{outline:2px solid #1C1D22;outline-offset:3px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .hg-tile{transition:transform .35s ease,box-shadow .35s ease}
  .hg-tile:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(28,29,34,.06),0 18px 40px rgba(28,29,34,.12)}
}
.hg-more{text-align:center;margin:clamp(32px,4vw,48px) 0 0}
.hg-more .btn{background:#1C1D22;color:#fff;border-color:#1C1D22}
.hg-more .btn:hover{background:#000;border-color:#000}
@media(max-width:760px){.hg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Home page header over a light section (ivory gallery, light green about…): dark logo and links */
.has-video-hero.dark-head .site-header.head-light .brand-artwork{filter:none}
.has-video-hero.dark-head .site-header.head-light .nav a,
.has-video-hero.dark-head .site-header.head-light .order-link,
.has-video-hero.dark-head .site-header.head-light .icon-link{color:#1C1D22}
.has-video-hero.dark-head .site-header.head-light .nav a:hover,.has-video-hero.dark-head .site-header.head-light .nav a[aria-current=page]{color:#0084e0}
.has-video-hero.dark-head .site-header.head-light .lang button{color:#1C1D22b3}
.has-video-hero.dark-head .site-header.head-light .lang button.is-on{color:#1C1D22}
.has-video-hero.dark-head .site-header.head-light .menu-btn{color:#1C1D22;border-color:#1C1D228c}
.has-video-hero.dark-head .site-header.head-light>.container{--paper:#1C1D22;--mute-2:#1C1D22b3;--line-2:#1C1D228c;color:#1C1D22}
/* top photo: the model stands in the middle of the page, her head right under the logo */
.hero-video .hero-still{object-position:50% center}
@media(max-aspect-ratio:5/4){.hero-video .hero-still{object-position:50% center}}
/* About section: same midnight navy as the statement section, white text, model on the right */
.about-section.has-photo{background:#031023}
.has-photo .about-text p{color:#F5F2EB}
.has-photo .about-bg{object-position:70% 20%}
@media(max-width:960px){.has-photo .about-bg{object-position:65% 18%}}
@media(max-width:560px){.has-photo .about-bg{object-position:65% 18%}}

/* About: model sits in the right column, top = first text line, bottom = last text line */
.has-photo .about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.has-photo .about-grid .about-text{max-width:none}
.has-photo .about-media{position:relative;min-height:0}
.has-photo .about-model{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:960px){
  .about-section.has-photo{padding-bottom:clamp(56px,6vw,96px)}
  .has-photo .about-grid{grid-template-columns:1fr}
  .has-photo .about-model{position:static;display:block;width:auto;height:auto;max-width:100%;max-height:70vh;margin:clamp(28px,6vw,48px) auto 0}
}
.about-section.has-photo>.container{width:calc(100% - 2 * var(--gutter))}

/* About + footer on the home page: warm cream matching the model photo's backdrop */
.about-section.has-photo{background:#EAE1CD}
.has-photo .about-text p{color:#2A2622}
.has-photo .about-model{-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.home .site-footer{background:#EAE1CD;border-top:1px solid #DCD1BA}

/* Home: Exhibitions & Events — midnight navy, four booth cards */
.home-events{background:#031023;color:#F5F2EB;padding:clamp(64px,8vw,112px) 0}
.ev-head{text-align:center;margin:0 auto clamp(32px,4vw,52px)}
.ev-label{margin:0;font:600 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#87BEE5}
.ev-heading{margin:18px 0 0;font:400 clamp(28px,3.2vw,46px)/1.15 "Libre Baskerville","Baskerville","Times New Roman",Times,serif;color:#fff}
.ev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);max-width:1240px;margin:0 auto}
.ev-card{background:#0A1A31;border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:26px 24px 28px}
.ev-logo{display:block;height:44px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin:0 0 18px}
.ev-badge{display:inline-block;margin:0 0 14px;padding:3px 10px;border-radius:999px;font:600 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#4ADE80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35)}
.ev-badge:empty{display:none}
.ev-card.is-past .ev-badge{color:#A7B0BE;background:rgba(167,176,190,.08);border-color:rgba(167,176,190,.3)}
.ev-title{margin:0 0 16px;font:700 19px/1.3 var(--sans);color:#fff}
.ev-facts{margin:0;display:grid;gap:12px}
.ev-facts dt{font:600 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7F8DA3}
.ev-facts dd{margin:2px 0 0;font-size:15px;line-height:1.45;color:#E6E9EE}
.ev-facts .ev-date{color:#F2C14E}
@media(max-width:1100px){.ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ev-grid{grid-template-columns:1fr}}

/* Home sections 3 (gallery) and 5 (about): soft geometric pattern tinted #FAF9F6; footer plain #FAF9F6 */
.home-gallery,.about-section.has-photo{background:#FAF9F6 url(../images/pattern-cream.webp?v=3) center/cover no-repeat}
.has-photo .about-model{-webkit-mask-image:none;mask-image:none}
.home .site-footer{background:#FAF9F6;border-top-color:#E8E6E1}

/* Home: About + footer on one continuous pattern */
.home-tail{background:#FAF9F6 url(../images/pattern-cream.webp?v=3) center/cover no-repeat}
.home-tail .about-section.has-photo,.home .home-tail .site-footer{background:transparent}
.home .home-tail .site-footer{border-top:0}
/* Every link on the site: underline the text on hover / keyboard focus */
a:hover,a:focus-visible{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px}
/* Footer social links with icons */
.foot-nav a .soc-ico{width:18px;height:18px;flex:none}
.foot-nav a:has(.soc-ico){display:inline-flex;align-items:center;gap:9px}

/* Gallery / Production / Contact: page background continues behind the footer */
.page-tail .site-footer{background:transparent;border-top:0;position:relative}
.production-bg .site-footer,.contact-bg .site-footer{color:rgba(255,255,255,.82)}
.production-bg .site-footer .foot-bottom,.contact-bg .site-footer .foot-bottom{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82)}
.gallery-bg .site-footer .foot-bottom{border-top-color:rgba(34,34,34,.18);color:#2b2b2b}
@media(min-width:961px){.has-photo .about-media{margin-left:calc(-1 * clamp(24px,4vw,64px))}.has-photo .about-model{object-position:right bottom}}

/* Gallery page: title right under the header, photos right under the intro line, one continuous photo grid */
.gallery-bg .page-head.asset-page-head{padding:clamp(18px,2.4vw,28px) 0 0;min-height:0}
.gallery-bg .page-head.asset-page-head .lede{margin-bottom:0}
.gallery-bg .page-head+.sec{padding-top:clamp(18px,2vw,26px)}
.gallery-page .gallery-bg .masonry.gal-more{margin-top:18px}
@media(max-width:860px){.gallery-page .gallery-bg .masonry.gal-more{margin-top:14px}}
@media(max-width:600px){.gallery-page .gallery-bg .masonry.gal-more{margin-top:10px}}
.gallery-page .gallery-bg .masonry .shot,.gallery-page .gallery-bg .masonry .shot:nth-child(4n+2){aspect-ratio:3/2}
/* Events: same soft light-and-shadow pattern as the hero, in navy */
.home-events{background:#031023 url(../images/pattern-navy.webp?v=2) center/cover no-repeat}
.ev-card{background:rgba(6,20,40,.82);backdrop-filter:blur(2px)}
/* Catalogue login: the photo continues behind the footer while the lock screen shows */
body:has(#lock:not([hidden])) .lock-tail{background:linear-gradient(90deg,#071322c9,#07132250),url('../images/atelier/catalogue.webp') center 38%/cover no-repeat #071322}
body:has(#lock:not([hidden])) .lock{background:transparent}
body:has(#lock:not([hidden])) .lock-tail .site-footer{background:transparent;border-top:0;color:rgba(255,255,255,.82)}
body:has(#lock:not([hidden])) .lock-tail .foot-bottom{border-top-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82)}
@media(max-width:760px){body:has(#lock:not([hidden])) .lock-tail{background-position:35% center}}
.hero-video.hero-photo-only{background:#031023}
/* hero -> section 2: the solid navy at the bottom of the hero melts into the pattern (no line) */
.home-statement.has-photo::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(90px,12vw,180px);background:linear-gradient(#031023,rgba(3,16,35,0));z-index:1;pointer-events:none}
.home-statement.has-photo>.container{position:relative;z-index:2}
/* phones: the model fills the whole width there, so the very bottom of the photo eases into the navy */
.hero-video.hero-photo-only::after{background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%)}
@media(max-width:760px){.hero-video.hero-photo-only::after{background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%,#0000 calc(100% - 90px),#031023 100%)}}
/* section 2 -> gallery: the model's hair and dress dissolve into navy so the section ends in a calm band */
.home-statement.has-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(110px,16%,200px);background:linear-gradient(rgba(3,16,35,0),#031023 85%);z-index:1;pointer-events:none}
/* gallery -> events: the patterns calm down on both sides of the edge, so it reads as a clean page break */
.home-gallery,.home-events{position:relative}
.home-gallery>.container,.home-events>.container{position:relative;z-index:2}
.home-gallery::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(90px,12vw,170px);background:linear-gradient(rgba(250,249,246,0),#FAF9F6 85%);z-index:1;pointer-events:none}
.home-events::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(90px,12vw,170px);background:linear-gradient(#031023 15%,rgba(3,16,35,0));z-index:1;pointer-events:none}
/* same calm edge between events and about */
.home-events::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(90px,12vw,170px);background:linear-gradient(rgba(3,16,35,0),#031023 85%);z-index:1;pointer-events:none}
.home-tail{position:relative}
.home-tail::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(90px,12vw,170px);background:linear-gradient(#FAF9F6 15%,rgba(250,249,246,0));z-index:0;pointer-events:none}
.home-tail>section,.home-tail>footer{position:relative;z-index:1}
/* scroll fade-ins (js/reveal.js) */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity 4.05s cubic-bezier(.2,.7,.2,1),transform 4.05s cubic-bezier(.2,.7,.2,1)}
.rv-on .rv.rv-photo{transform:scale(1.02);transition-duration:2.8s}
.rv-on .rv.rv-booth{transition-duration:6.75s}
.rv-on .rv.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none;transition:none}}
/* Asymmetrical overlay: the booth cards hang over the edge into the About section, linking the two */
.home-events{padding-bottom:clamp(40px,4vw,56px)}
.home-events .ev-grid{position:relative;z-index:3;margin-bottom:calc(-1 * clamp(70px,7vw,110px))}
.home-events .ev-card{background:#0A1A31;box-shadow:0 18px 40px rgba(3,16,35,.28),0 2px 6px rgba(3,16,35,.18)}
.home-events .ev-card:nth-child(even){transform:translateY(clamp(18px,2vw,32px))}
.home-tail .about-section.has-photo{padding-top:calc(clamp(56px,6vw,96px) + clamp(70px,7vw,110px) + clamp(18px,2vw,32px))}
@media(max-width:1100px){.home-events .ev-card:nth-child(even){transform:none}}
@media(max-width:560px){.home-events .ev-grid{margin-bottom:-56px}.home-tail .about-section.has-photo{padding-top:calc(56px + 56px)}}

/* Home: one button style, one small-label style, About heading */
.home .btn{font-size:12px;font-weight:600;letter-spacing:.14em;min-height:48px;padding-inline:28px}
@media(max-width:480px){.home .home-statement .hero-actions .btn,.home .btn{font-size:12px;min-height:46px;padding-inline:22px}}
.home .home-statement .eyebrow,.home .hg-label,.home .ev-label,.home .ab-label{font:600 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.home .about-text p.ab-label{margin:0;color:#2A2B30;font:600 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;max-width:none}
.home .ab-title{margin:16px 0 28px;font:400 clamp(28px,3.2vw,46px)/1.15 "Libre Baskerville","Baskerville","Times New Roman",Times,serif;color:#1C1D22;letter-spacing:-.005em}
.home .ev-facts dt{font-size:11px}
.home .ev-badge{font-size:11px}
.home .home-statement .hero-actions .btn,.home a.btn{letter-spacing:.14em;font-weight:600}
/* Production page: just one line of space between the title and the intro text */
.production-bg .page-head.asset-page-head{padding-bottom:0}
.production-bg .page-head.asset-page-head .h2{margin-bottom:0}
.production-bg .page-head+.sec{padding-top:0}
.production-bg .page-head+.sec .lede{margin-top:1.8em;margin-top:1lh}
/* Production page: two lines of space between the intro text and "01 Materials" */
.production-bg .page-head+.sec{padding-bottom:0}
.production-bg .page-head+.sec .lede{margin-bottom:calc(3.6em - 8px);margin-bottom:calc(2lh - 8px)}
.production-bg .page-head+.sec+.sec{padding-top:0;border-top:0}
.production-bg .page-head+.sec+.sec .stages{margin-top:0}
.production-bg .page-head+.sec+.sec .stage-item:nth-child(-n+2){border-top:0;padding-top:0}
@media(max-width:960px){.production-bg .page-head+.sec+.sec .stage-item:nth-child(2){border-top:1px solid rgba(255,255,255,.35);padding-top:26px}}
/* ---- home page motion (all switched off for "reduce motion") ---- */
@media(prefers-reduced-motion:no-preference){
  /* 1. hero photo settles slowly as the page opens */
  .hero-video.hero-photo-only .hero-still{animation:heroSettle 6s cubic-bezier(.2,.6,.2,1) both;transform-origin:50% 40%}
  @keyframes heroSettle{from{transform:scale(1.06)}to{transform:scale(1)}}
  /* 2. gallery tiles: slow zoom on the photo + slight lift */
  .hg-tile img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  .hg-tile:hover img,.hg-tile:focus-visible img{transform:scale(1.04)}
  .rv-on .hg-tile.rv-in:hover,.rv-on .hg-tile.rv-in:focus-visible{transform:translateY(-4px);box-shadow:0 2px 4px rgba(28,29,34,.06),0 18px 40px rgba(28,29,34,.12)}
  .rv-on .hg-tile.rv-done{transition:opacity .9s ease,transform .35s ease,box-shadow .35s ease}
  /* 4. soft pulse on the "Upcoming" tag */
  .ev-card:not(.is-past) .ev-badge{position:relative;padding-left:22px}
  .ev-card:not(.is-past) .ev-badge::before{content:'';position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#4ADE80;animation:evPulse 2.4s ease-out infinite}
  @keyframes evPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
}
/* very wide screens crop the photo's own fade off, so the hero always ends in navy */
.hero-video.hero-photo-only::after{background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%,#0000 78%,#031023 100%)}
/* hero living photo: the film sits over the still and fades in once it is actually playing */
.hero-video .hero-loop{background:transparent;z-index:1}

.hero-video .hero-motion{z-index:3;bottom:28px}
.hero-video.hero-photo-only::after{z-index:2}
/* hero: plain still photo, no motion */
.hero-video.hero-photo-only .hero-still{animation:none!important;transform:none}

/* Home: the second section's model zooms in as you scroll (js/model-move.js).
   */

.home-statement.has-photo .statement-grid{position:relative;z-index:2}

/* Catalogue viewer: "2 Qty in cart." in red under a colour that is already in the cart */
.lb-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.lb-incart{margin-top:3px;color:#ff4d4d;font:500 12px/1.2 var(--sans);letter-spacing:.01em}
.lb-incart[hidden]{display:none}

/* Booth cards: lift up a little when the mouse is over one (computers only). Uses "translate" so the
   staggered offset of the even cards and the scroll fade-in are kept. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .home-events .ev-card{translate:0 0;transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
  .rv-on .home-events .ev-card.rv{transition:opacity 6.75s cubic-bezier(.2,.7,.2,1),transform 6.75s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
  .home-events .ev-card:hover{translate:0 -8px;border-color:rgba(255,255,255,.22);box-shadow:0 28px 56px rgba(3,16,35,.42),0 4px 10px rgba(3,16,35,.22)}
  .home-events .ev-logo{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .home-events .ev-card:hover .ev-logo{transform:scale(1.05)}
}

/* Catalogue password page: public preview of the models ticked "Show to public" (photos and colours only) */
.lock .container.pub-picks{display:block;margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.18)}
.lock .container.pub-picks[hidden]{display:none}
.pub-title{margin:0;color:#fff;font:400 clamp(22px,2.2vw,30px)/1.25 var(--sans);letter-spacing:.01em}
.pub-lead{margin:8px 0 0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.6}
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:24px}
.pub-card{background:#fff;border:1px solid #b5bac2;border-radius:12px;overflow:hidden;box-shadow:0 8px 16px -4px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.12)}
.pub-img{display:block;width:100%;aspect-ratio:4/3;padding:10px;border:0;border-bottom:1px solid rgba(0,0,0,.1);background:#fff}
.pub-img img{width:100%;height:100%;object-fit:contain}
.pub-body{padding:12px 14px 14px;color:#172131}
.pub-body h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font:700 14px/1.3 var(--sans)}
.pub-body h3 small{font:500 12px var(--sans);color:#566476}
.pub-colour{margin:4px 0 8px;min-height:1.3em;font-size:12px;color:#566476}
.pub-sw{display:flex;flex-wrap:wrap;gap:6px}
.pub-sw button{width:18px;height:18px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.pub-sw button.is-on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #172131}
.pub-sw button:focus-visible{outline:2px solid #0879c5;outline-offset:2px}
.lock:has(#pub-picks:not([hidden])){flex-direction:column;align-items:stretch;justify-content:center}
.lock:has(#pub-picks:not([hidden]))>.container{width:min(var(--wrap),100% - 2 * var(--gutter))}

/* Home second section: the model is a cut-out standing on the navy pattern. At full size she is 84% of the
   section's height, at the right; js/model-move.js shows her at 50% of that size first and grows her to 80%
   as you scroll down (scaled from her feet, so she always stands on the bottom edge). */
.home-statement.has-photo{background:#031023 url(../images/pattern-navy.webp?v=1) center/cover no-repeat}
.has-photo .statement-model{position:absolute;right:3%;bottom:0;height:84%;width:auto;max-width:none;transform:scale(.5);transform-origin:50% 100%;will-change:transform}
@media(max-width:860px){
  .has-photo .statement-model{order:2;position:relative;right:auto;bottom:auto;height:auto;width:min(100%,560px);align-self:center;margin-top:clamp(20px,5vw,40px)}
}
@media(prefers-reduced-motion:reduce){.has-photo .statement-model{transform:scale(.8)}}

/* Catalogue quick links (All Eyeglasses, Adults, Women…): a soft blue highlight on mouse-over instead of an underline */
.shop-pill{padding:6px 12px;margin-inline:-12px;border-radius:999px;transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.shop-pill:hover,.shop-pill:focus-visible{text-decoration:none!important;background:#e3f1fc;color:#0879c5;border-bottom-color:transparent}
.shop-pill.is-on:hover{border-bottom-color:transparent}
.shop-pill.is-on{border-bottom-color:transparent;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.shop-pill.is-on:hover{text-decoration:none!important}

/* Catalogue viewer (item page), Oct 14 */
.lightbox.is-product .lb-view{width:112px;height:84px}
@media(max-width:760px){.lightbox.is-product .lb-view{width:76px;height:57px}}
/* close button 70% smaller (a larger invisible area keeps it easy to tap) */
.lightbox.is-product .lb-close{width:16px;height:16px;top:12px;right:12px;padding:0}
.lightbox.is-product .lb-close svg{width:10px;height:10px}
.lightbox.is-product .lb-close::after{content:'';position:absolute;inset:-12px}
/* "1pc C8 added to shopping cart" under a colour already in the cart */
.lb-incart{color:#3fd17a;font-weight:600}
/* "✔1pc C8 added" after Add to cart; several colours: chevrons open the full list upward */
.lb-added{display:flex;align-items:center;gap:8px;margin-top:10px;color:#3fd17a;font:600 13px/1.3 var(--sans)}
.lb-added[hidden]{display:none}
.dh-more{display:inline-flex;align-items:center;justify-content:center;width:20px;height:22px;margin-left:4px;border-radius:5px;color:currentColor;cursor:pointer;vertical-align:middle;outline:none}
.lb-added .dh-more{color:#fff}
.dh-more:hover,.dh-more:focus-visible{background:rgba(127,127,127,.18)}
.sp-added{display:inline-flex;align-items:center;justify-content:center;gap:2px}
.sp-added .dh-more svg{width:11px;height:14px}
.dh-more-pop{position:fixed;z-index:3000;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;background:#fff;color:#1d7a3e;
  font:600 13px/1.3 var(--sans);white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.3);border:1px solid #e3e7ec;
  opacity:0;transform:translateY(8px) scaleY(.6);transform-origin:50% 100%;transition:opacity .18s ease,transform .22s ease;pointer-events:none}
.dh-more-pop.is-open{opacity:1;transform:none}
/* the item page: no payment note */
.lightbox.is-product .lb-note{display:none}

/* Cart page: the photo opens the model; the form fields are a third wider and half as tall */
.order-line a.plate{cursor:pointer}
.order-line a.plate:hover img{transform:scale(1.06);transition:transform .25s ease}
.order-form .field input,.order-form .field textarea{width:89%}
.order-form .field input{min-height:0;height:24px;padding:2px 10px;font-size:14px;border-radius:7px}
.order-form .field textarea{min-height:0;padding:4px 10px;font-size:14px;border-radius:7px}
.order-form{gap:14px}
@media(max-width:560px){.order-form .field input,.order-form .field textarea{width:100%}}
.sp-added .dh-added-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* item page: thumbnails 10% shorter (solid again), so they cover less of the photo */
.lightbox.is-product .lb-view{height:76px}
@media(max-width:760px){.lightbox.is-product .lb-view{height:51px}}

/* Hero: the sun shining in. Two light layers over the photo (the beams and the warm glow, light on black, added with
   "screen") move slowly, and specks of dust float in the light (js/hero-sun.js). Still for people who ask for less motion. */
.hero-video .hero-sun{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% center;z-index:1;pointer-events:none;mix-blend-mode:screen}
.hero-video .hero-sun-rays{animation:sunDrift 14s ease-in-out infinite alternate,sunFlicker 7s ease-in-out infinite alternate}
.hero-video .hero-sun-haze{animation:sunBreath 9s ease-in-out infinite alternate}
@keyframes sunDrift{from{transform:translate(-6px,-3px)}to{transform:translate(6px,3px)}}
@keyframes sunFlicker{0%{opacity:.7}35%{opacity:1}60%{opacity:.82}100%{opacity:.96}}
@keyframes sunBreath{from{opacity:.65}to{opacity:1}}
.hero-video .hero-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.hero-video .hero-sun{animation:none}.hero-video .hero-dust{display:none}}

/* Section 2: living facets drawn on a canvas (js/facets.js); the navy picture stays underneath as a fallback */
.home-statement.has-photo .statement-facets{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.home-statement.has-photo .statement-model{z-index:0}

/* Section 2 in cognac leather brown (the hero model's jacket): the top still melts in from the hero's navy */
.home-statement.has-photo{background:#34170A}
.home-statement.has-photo::after{background:linear-gradient(rgba(42,18,8,0),#2A1208 85%)}

/* Section 3 (gallery): the same geometric pattern in light tan leather, to go with the cognac brown of section 2 */
.home-gallery{background:#E2C8AA url(../images/pattern-tan.webp?v=2) center/cover no-repeat}
.home-gallery::after{background:linear-gradient(rgba(226,200,170,0),#E2C8AA 85%)}
.home-gallery .hg-lead{color:#5B4636}

/* Section 4 (events) in cognac leather brown like section 2; section 5 (about + footer) in the light tan of section 3 */
.home-events{background:#2E1408 url(../images/pattern-brown.webp?v=2) center/cover no-repeat}
.home-events::before{background:linear-gradient(#2E1408 15%,rgba(46,20,8,0))}
.home-events::after{background:linear-gradient(rgba(46,20,8,0),#2E1408 85%)}
.home-events .ev-card{background:#2A1209;border-color:rgba(255,226,196,.12);box-shadow:0 18px 40px rgba(26,10,3,.32),0 2px 6px rgba(26,10,3,.2)}
.home-events .ev-facts dt{color:#B89A84}
.home-events .ev-card.is-past .ev-badge{color:#CDB7A6;background:rgba(205,183,166,.08);border-color:rgba(205,183,166,.3)}
@media(hover:hover){.home-events .ev-card:hover{border-color:rgba(255,226,196,.26);box-shadow:0 28px 56px rgba(26,10,3,.45),0 4px 10px rgba(26,10,3,.25)}}
.home-tail{background:#E2C8AA url(../images/pattern-tan.webp?v=2) center/cover no-repeat}
.home-tail::before{background:linear-gradient(#E2C8AA 15%,rgba(226,200,170,0))}

/* catalogue cards: the quantity box half as wide (narrow - and + and number) */
.shop-grid .sp-buy .qty button{width:10px;min-width:0;padding:0;font-size:11px}
.shop-grid .sp-buy .qty input{width:14px;min-width:0;padding:0;font-size:10px;text-align:center}
.sp-added .dh-added-text{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;font-size:10.5px}

/* item page: the photo thumbnails sit in the top right corner of the photo (clear of the model number printed at
   the bottom), and on computers the Next arrow sits right at the photo's edge, mirroring Previous */
.lightbox.is-product .lb-views{left:auto;right:14px;top:14px;bottom:auto;justify-content:flex-end}
@media(min-width:961px){
  .lightbox.is-product.has-nav .lb-next{left:calc(50% + var(--lb-w) / 2 - 380px - 23px);z-index:4}
  .lightbox.is-product.has-nav .lb-next .lb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lightbox.is-product.has-nav .lb-next .lb-arrow{background:#151820;border-color:#ffffff40;box-shadow:0 4px 14px #00000040}
}
@media(max-width:760px){.lightbox.is-product .lb-views{right:8px;top:8px}}
/* phones: the thumbnails keep clear of the close button */
@media(max-width:960px){.lightbox.is-product .lb-views{right:52px}}
/* cart page: "Back to the catalogue" twice as big */
.order-back{font-size:28px;gap:12px}
.order-back svg{width:28px;height:28px}
/* checkout form: no empty space between the fields; the note box 2 lines taller */
.order-form{gap:4px}
.order-form .field{gap:2px;margin:0}
.order-form .field textarea{min-height:calc(8 * 1.45em + 10px)}
/* item page on computers: the thumbnails stand in a column on the right side of the photo, which keeps clear of them */
@media(min-width:961px){
  .lightbox.is-product .lb-views{flex-direction:column;align-items:flex-end;justify-content:flex-start;left:auto;right:14px;top:14px;bottom:auto;gap:8px}
  .lightbox.is-product .lb-media img{box-sizing:border-box;padding-right:136px}
  .lightbox.is-product .lb-media:has(.lb-views:empty) img{padding-right:0}
}
@media(min-width:961px){.lightbox.is-product .lb-views{right:32px}.lightbox.is-product .lb-media img{padding-right:154px}}
/* catalogue page: no divider lines or big gaps between the sections; full width, 5 models per row
   (also with the filter menu open), the model blocks about 20% bigger than the old 1320px layout */
body.catalogue-open .site-header{border-bottom-color:transparent}
body.catalogue-open .cat-hero.no-intro{padding-top:10px;padding-bottom:0;margin:0}
body.catalogue-open .shop-pills{margin:0;padding:0;border:0}
body.catalogue-open .shop-tools{margin-bottom:12px;padding-bottom:0;border-bottom:0}
body.catalogue-open .shop-pages{border-top:0;padding-top:0;margin-top:28px}
body.catalogue-open .shop{gap:28px}
body.catalogue-open #shop-area .container{width:auto;max-width:1600px;margin-inline:auto;padding-inline:32px}
body.catalogue-open.filters-open #shop-area .container{max-width:1880px}
@media(min-width:1100px){body.catalogue-open .shop-grid{grid-template-columns:repeat(5,minmax(0,1fr))}body.catalogue-open.filters-open .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){body.catalogue-open.filters-open .shop-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1099px){body.catalogue-open .shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}body.catalogue-open.filters-open .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){body.catalogue-open #shop-area .container{padding-inline:var(--gutter)}}
/* catalogue cards: the model / colour / qty area about 10% taller */
.shop-grid .sp-body{padding:10px 10px 12px;row-gap:1.5px}
/* catalogue cards: colour circles and the qty box a little bigger */
.shop-grid .sp-dot{width:14px;height:14px}
.shop-grid .sp-swatches{gap:5px;min-height:14px}
.shop-grid .sp-buy .qty{height:23px;min-height:23px}
.shop-grid .sp-buy .qty button{width:14px;height:21px;font-size:13px}
.shop-grid .sp-buy .qty input{width:20px;height:21px;font-size:12px}
/* checkout: smaller Submit button */
.order-submit-btn{min-height:30px;height:30px;padding:0 16px;font-size:13px;border-radius:5px}
/* catalogue: no "1–150 of 557" under the page numbers */
.shop-pageinfo{display:none}
/* hero (navy) → section 2 (cognac brown): a longer, softer blend through a deep warm charcoal, so there is no hard navy band */
.home-statement.has-photo::before{height:clamp(240px,24vw,360px);background:linear-gradient(180deg,#031023 0%,#071124 12%,#13131c 34%,#231710 58%,rgba(52,23,10,.45) 80%,rgba(52,23,10,0) 100%)}
@media(max-width:760px){.home-statement.has-photo::before{height:300px}}
/* less navy at the hero → section 2 join: the hero's bottom fades into a very dark warm brown, which then opens into the cognac */
.hero-video.hero-photo-only::after{background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%,#0000 74%,rgba(22,13,9,.85) 92%,#160D09 100%)}
@media(max-width:760px){.hero-video.hero-photo-only::after{background:linear-gradient(180deg,#00000080 0%,#00000026 20%,#0000 40%,#0000 calc(100% - 150px),rgba(22,13,9,.85) calc(100% - 40px),#160D09 100%)}}
.home-statement.has-photo::before{height:clamp(200px,20vw,300px);background:linear-gradient(180deg,#160D09 0%,#1f120b 35%,rgba(52,23,10,.5) 70%,rgba(52,23,10,0) 100%)}
@media(max-width:760px){.home-statement.has-photo::before{height:240px}}
/* item popup: "Qty Updated" next to the quantity box when the cart was changed right away */
.lightbox.is-product .lb-qty{position:relative}
.lb-qtydone{position:absolute;right:0;top:calc(100% + 2px);color:#4ade80;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;opacity:0;transition:opacity .25s ease;pointer-events:none}
.lb-qtydone.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.lb-qtydone{transition:none}}
/* sections 3 (gallery) and 5 (about + footer): plain #E8DEC8 with the soft cube pattern in the same sand tone */
.home-gallery,.home-tail{background:#E8DEC8 url(../images/pattern-sand.webp?v=1) center/cover no-repeat}
.home-gallery::after{background:linear-gradient(rgba(232,222,200,0),#E8DEC8 85%)}
.home-tail::before{background:linear-gradient(#E8DEC8 15%,rgba(232,222,200,0))}
/* sections 3 and 5: soft organic grain / subtle canvas texture on #E8DEC8 (a seamless tile, shown at half size so it stays sharp on every screen) */
.home-gallery,.home-tail{background:#E8DEC8 url(../images/pattern-canvas.webp?v=2) 0 0/512px 512px repeat}
/* sections 3 and 5: soft radial glow on #E8DEC8 — drawn by the browser (CSS gradients), so it is sharp at any size */
.home-gallery{background:
  radial-gradient(ellipse 62% 55% at 50% 30%, rgba(255,251,242,.95) 0%, rgba(255,251,242,.55) 38%, rgba(255,251,242,0) 72%),
  radial-gradient(ellipse 45% 55% at 8% 85%, rgba(214,196,163,.55) 0%, rgba(214,196,163,0) 70%),
  radial-gradient(ellipse 45% 55% at 92% 80%, rgba(214,196,163,.5) 0%, rgba(214,196,163,0) 70%),
  #E8DEC8}
.home-tail{background:
  radial-gradient(ellipse 55% 50% at 28% 22%, rgba(255,251,242,.9) 0%, rgba(255,251,242,.45) 40%, rgba(255,251,242,0) 72%),
  radial-gradient(ellipse 50% 45% at 75% 45%, rgba(255,249,236,.7) 0%, rgba(255,249,236,0) 70%),
  radial-gradient(ellipse 70% 40% at 50% 100%, rgba(210,190,154,.55) 0%, rgba(210,190,154,0) 72%),
  #E8DEC8}
/* sections 3 and 5: micro linen on #E8DEC8 — a seamless tile drawn at twice the screen resolution, so it is sharp on every screen (also Retina) */
.home-gallery,.home-tail{background:#E8DEC8 url(../images/pattern-linen.webp?v=1) 0 0/510px 510px repeat}
/* sections 3 and 5: gentle organic waves / topographic lines on #E8DEC8 — a vector picture (SVG), sharp at any size */
.home-gallery,.home-tail{background:#E8DEC8 url(../images/pattern-topo.svg?v=2) center/cover no-repeat}
/* sections 3 and 5: background tint about 7% warmer / sandier (#E8DEC8 -> #E9DAC0) */
.home-gallery,.home-tail{background:#E9DAC0 url(../images/pattern-topo.svg?v=2) center/cover no-repeat}
.home-gallery::after{background:linear-gradient(rgba(233,218,192,0),#E9DAC0 85%)}
.home-tail::before{background:linear-gradient(#E9DAC0 15%,rgba(233,218,192,0))}
/* Section 4 (Exhibitions & Events): the same living cognac facets as section 2 (canvas drawn by js/facets.js) */
.home-events{background:#34170A}
.home-events .statement-facets{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.home-events::before{background:linear-gradient(#34170A 10%,rgba(52,23,10,0))}
.home-events::after{background:linear-gradient(rgba(52,23,10,0),#34170A 90%)}
/* sections 3 and 5: light cognac / camel tan, a lighter shade of the leather of sections 2 and 4 (#E9DAC0 -> #D9BF9A),
   with espresso-brown headings and darker brown contour lines so the four sections read as one family */
.home-gallery,.home-tail{background:#D9BF9A url(../images/pattern-topo.svg?v=3) center/cover no-repeat}
.home-gallery::after{background:linear-gradient(rgba(217,191,154,0),#D9BF9A 85%)}
.home-tail::before{background:linear-gradient(#D9BF9A 15%,rgba(217,191,154,0))}
.home .hg-label,.home .about-text p.ab-label{color:#4A2614}
.home .hg-title{color:#2E1408}
.home-gallery .hg-lead{color:#4E3424}
/* tan sections: warm brown text instead of the cool greys (about text and footer) */
.home .home-tail .about-text p{color:#3A2416}
.home .home-tail .site-footer,.home .home-tail .site-footer p{color:#3A2416}
.home .home-tail .site-footer h2,.home .home-tail .site-footer h3,.home .home-tail .site-footer h4{color:#6B4529}
.home .home-tail .foot-nav a{color:#4A2E1C}
.home .home-tail .foot-nav a:hover{color:#2E1408}
.home .home-tail .foot-bottom{color:#5A3A24;border-top-color:rgba(74,38,20,.22)}
.home .home-tail .site-footer .small{color:#6B4529}
/* Production and Contact titles: same place and size as the Gallery title */
.production-bg .page-head.asset-page-head,.contact-page .page-head.asset-page-head{padding-top:clamp(18px,2.4vw,28px);min-height:0}
.contact-page .asset-page-head .h2{font-size:42px;line-height:1.45}
@media(max-width:760px){.contact-page .asset-page-head .h2{font-size:32px}}
/* Production: the private-label paragraph and the stage paragraphs in one size, one step up from the old 14px */
.production-bg .prod-copy .lede,.production-bg .stage-item p{font-size:16px;line-height:1.8}
/* Contact form: compact fields (about 40% lower), labels sit right above their box, no empty band between fields,
   and the Subject list shows dark words on white */
.contact-page #contact-form{row-gap:10px}
.contact-page #contact-form .field{gap:3px}
.contact-page #contact-form .field input,.contact-page #contact-form .field select{padding:4px 12px;line-height:22px;height:30px;min-height:0}
.contact-page #contact-form .field textarea{padding:5px 12px;line-height:22px;height:102px;min-height:0}
.contact-page #contact-form select,.contact-page #contact-form select option{color:#172131;background:#fff}
/* Item viewer in clear white: light backdrop, white detail panel with dark words, black Previous / Next */
.lightbox.is-product{background:rgba(255,255,255,.94)}
.lightbox.is-product .lb-dialog{box-shadow:0 24px 70px rgba(20,24,32,.18),0 0 0 1px #e6e8ec}
.lightbox.is-product .lb-info{--paper:#151820;--mute:#151820bf;--mute-2:#15182099;--line:#e6e8ec;--line-2:#d5d9df;background:#fff;color:#151820;border-left:1px solid #eceef1}
.lightbox.is-product .lb-title{color:#151820}
.lightbox.is-product .lb-shades{border-color:#e3e6ea;background:#fff}
.lightbox.is-product .lb-shade{border-bottom-color:#eef0f3}
.lightbox.is-product .lb-shade.is-on{background:#eef4ff}
.lightbox.is-product .lb-pick,.lightbox.is-product .lb-shade.is-on .lb-name,.lightbox.is-product .lb-name{color:#151820}
.lightbox.is-product .lb-swatch{box-shadow:0 0 0 1px #00000026}
.lightbox.is-product .lb-shade.is-on .lb-swatch{box-shadow:0 0 0 2px #eef4ff,0 0 0 4px #3b6fe0}
.lightbox.is-product .lb-qty{color:#5b6270}
.lightbox.is-product .lb-qty .qty-dd-btn{border-color:#cfd4db;background:#fff;color:#151820}
.lightbox .qty-dd-list{border-color:#d5d9df;background:#fff;color:#151820;box-shadow:0 14px 32px rgba(20,24,32,.18)}
.lightbox .qty-dd-list li.is-active{background:#eef4ff}
.lightbox .qty-dd-list li[aria-selected=true]{color:#2b5fd0}
.lightbox.is-product .lb-add:disabled{background:#eef0f3;color:#9aa1ad}
.lightbox.is-product .lb-incart,.lightbox.is-product .lb-added{color:#178a4c}
.lightbox.is-product .lb-qtydone{color:#178a4c}
.lightbox.is-product .lb-added .dh-more,.lightbox.is-product .lb-review{color:#151820}
.lightbox.is-product .lb-note{color:#5b6270}
.lightbox.is-product .lb-close{background:#151820;color:#fff}
.lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{color:#151820}
.lightbox.is-product .lb-arrow{border-color:#151820;background:#fff;color:#151820}
.lightbox.is-product.has-nav .lb-prev:hover,.lightbox.is-product.has-nav .lb-next:hover{color:#151820}
.lightbox.is-product .lb-prev:hover .lb-arrow,.lightbox.is-product .lb-next:hover .lb-arrow,.lightbox.is-product .lb-prev:focus-visible .lb-arrow,.lightbox.is-product .lb-next:focus-visible .lb-arrow{background:#151820;color:#fff}
@media(min-width:961px){.lightbox.is-product.has-nav .lb-next .lb-arrow{background:#fff;border-color:#151820;box-shadow:0 4px 14px rgba(20,24,32,.18)}}
/* Item viewer arrows (computers): Previous on the photo's left edge, Next on the photo's right edge, each word under its arrow */
@media(min-width:961px){
  .lightbox.is-product.has-nav .lb-prev,.lightbox.is-product.has-nav .lb-next{flex-direction:column;gap:6px;z-index:4;top:50%;transform:translateY(-23px);font-size:13px}
  .lightbox.is-product.has-nav .lb-prev{right:auto;left:calc(50% - var(--lb-w) / 2 - 23px)}
  .lightbox.is-product.has-nav .lb-next{right:auto;left:calc(50% + var(--lb-w) / 2 - 380px - 23px)}
  .lightbox.is-product.has-nav .lb-next .lb-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .lightbox.is-product .lb-label{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.92)}
  .lightbox.is-product.has-nav .lb-prev .lb-arrow,.lightbox.is-product.has-nav .lb-next .lb-arrow{background:#fff;border-color:#151820;box-shadow:0 4px 14px rgba(20,24,32,.18)}
  .lightbox.is-product.has-nav .lb-prev:hover .lb-arrow,.lightbox.is-product.has-nav .lb-next:hover .lb-arrow{background:#151820;color:#fff}
}
/* phones / tablets: Previous and Next in one row inside the window, between the photo and the quantities, word under each arrow */
.lb-navrow{display:none}
@media(max-width:960px){
  .lightbox.is-product.has-nav .lb-navrow{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 16px 8px;background:#fff;border-top:1px solid #eceef1}
  .lightbox.is-product.has-nav .lb-navrow .lb-prev,.lightbox.is-product.has-nav .lb-navrow .lb-next{position:static;transform:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}
}
/* item viewer: solid white page behind the window */
.lightbox.is-product{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
/* "Verify you are human" box on the contact and order forms */
.human-box{margin:6px 0 14px;min-height:65px}
.contact-section .human-box{grid-column:1/-1}