/* components.css — shared on every page: buttons, chips, header/nav/mega menu, product circle, cards + grid,
   brand tiles, stat chips, navy band, footer, drawer, search, logo marquee.
   Template-only rules live in home.css, inner.css (breadcrumbs, chip rows: every page but home), archive.css,
   product.css and forms.css. Logical properties only. */

/* ---------- Buttons ---------- */
.btn{--h:var(--button-h);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:8px 24px;border:1.5px solid transparent;border-radius:var(--r-pill);font-size:1rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;transition:background-color var(--t1),border-color var(--t1),color var(--t1)}
.btn .i{--i:20px}
/* The filled navy button is the page's one primary action (showcase catalogue: no ordering buttons) */
.btn--navy{background:var(--navy-800);color:#fff}
.btn--navy:hover{background:var(--navy-700);color:#fff}
.on-navy .btn--navy{background:#fff;color:var(--navy-800)}
.on-navy .btn--navy:hover{background:var(--sky-100);color:var(--navy-800)}
.btn--outline{border-color:var(--navy-800);color:var(--navy-800);background:transparent}
.btn--outline:hover{background:var(--sky-100);color:var(--navy-800)}
.btn--sm{--h:44px;padding-inline:18px;font-size:.9375rem}
@media (pointer:fine){.btn--sm{--h:40px}}
.btn--block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--azure-700);text-decoration:none;min-height:44px}
.link-arrow .i{--i:18px;transition:translate var(--t2)}
.link-arrow:hover .i{translate:calc(2px * var(--dir)) 0}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--chip-h);padding:4px 12px;border:1px solid var(--sky-200);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-small);font-weight:600;line-height:1.2;color:var(--ink-700);white-space:nowrap}
.chip .i{--i:16px;color:var(--azure-500)}
a.chip{min-height:44px;padding-inline:16px;color:var(--navy-800);text-decoration:none;transition:border-color var(--t1),background-color var(--t1)}
a.chip:hover{border-color:var(--azure-500);background:var(--sky-50)}

/* ---------- Utility bar + header ---------- */
.utility{display:none;background:var(--navy-800);color:var(--on-navy);font-size:13px}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--utility-h)}
.utility__group{display:flex;align-items:center;gap:20px}
.utility__group>span{display:inline-flex;align-items:center;gap:6px}
.utility a,.utility button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0;border:0;background:none;color:#fff;text-decoration:none}
.utility a:hover,.utility button:hover{color:var(--sky-300)}
.utility .i{--i:16px;color:var(--sky-300)}
.utility__sep{width:1px;height:14px;background:rgba(255,255,255,.2)}

/* Opaque header: nothing ghosts through it on scroll. It keeps one size when scrolled (only the shadow appears):
   shrinking it slid the menu sideways and rescaled the logo, which looked blurred while scrolling up. */
.site-header{position:sticky;inset-block-start:0;z-index:50;background:#fff;border-block-end:1px solid var(--line-100);transition:transform var(--t3),box-shadow var(--t2)}
.site-header.is-scrolled{box-shadow:var(--sh-header),0 8px 24px -16px rgba(17,23,63,.18)}
.site-header.is-hidden{transform:translateY(-100%)}
.header-bar{display:flex;align-items:center;gap:4px;height:var(--header-h-compact)}
.logo{display:flex;align-items:center;flex:none;margin-inline-end:auto;padding-block:4px}
.logo img{height:48px;width:auto}
.header-actions{display:flex;align-items:center;gap:2px}
/* Round 44px icon buttons (header, card WhatsApp, socials) */
.icon-btn,.socials a{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%}
.icon-btn{border:0;background:transparent;color:var(--ink-900);transition:background-color var(--t1)}
.icon-btn:hover{background:var(--sky-50)}
@media (max-width:359px){.logo img{height:42px}.header-actions{gap:0}}
.header-cta{display:none}
.main-nav{display:none}
@media (min-width:1100px){
  .utility{display:block}
  .header-bar{height:var(--header-h);gap:8px}
  .logo{margin-inline-end:24px}
  .logo img{height:60px}
  .main-nav{display:flex;align-items:center;gap:4px;margin-inline-end:auto}
  .header-cta{display:inline-flex}
  .menu-toggle{display:none}
  .header-actions{gap:8px}
}
.nav-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding-inline:14px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-900);font-size:16px;text-decoration:none;transition:color var(--t1),background-color var(--t1)}
.nav-link .i{--i:16px;color:var(--ink-500);transition:transform var(--t2)}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--navy-800);background:var(--sky-50)}
.nav-link[aria-expanded="true"] .i{transform:rotate(180deg)}

/* Mega menu + brands menu (desktop). Each panel follows its trigger in the DOM (keyboard order) and is
   display:none while closed, so its links are not tab stops and its lazy images are not fetched. */
.mega{position:absolute;inset-inline:0;inset-block-start:100%;background:#fff;border-block:1px solid var(--line-100);box-shadow:0 24px 48px -24px rgba(17,23,63,.25);transition:opacity var(--t2),translate var(--t2),display var(--t2) allow-discrete}
.mega:not(.is-open){display:none;opacity:0;translate:0 -4px}
@starting-style{.mega.is-open{opacity:0;translate:0 -4px}}
.mega__inner{display:grid;grid-template-columns:260px minmax(0,1fr) 260px;min-height:340px}
.mega__inner--no-promo{grid-template-columns:260px minmax(0,1fr)}
.mega__cats{background:var(--sky-50);padding:28px 20px;display:grid;align-content:start;gap:2px}
.mega__aside{align-content:center;gap:12px;padding:28px}
.mega__label{padding:0 12px 8px;color:var(--ink-500)}
.mega__aside .mega__label{padding:0}
.mega__label:not(:first-child){padding-block-start:16px}
.mega__cat{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-inline:12px;border-radius:var(--r-panel);color:var(--ink-900);text-decoration:none;font-weight:600;font-size:15px}
.mega__cat .i{--i:16px;color:var(--ink-500)}
.mega__cat:hover,.mega__cat.is-active{background:#fff;color:var(--navy-800);box-shadow:var(--sh-1)}
.mega__cat.is-active .i{color:var(--azure-500)}
.mega__panel{padding:28px 32px}
.mega__panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-block-end:20px}
.mega__panel-head .link-arrow{white-space:nowrap;min-height:0}
.mega__panel-head p{font-size:14px;color:var(--ink-500);max-width:34rem}
.mega__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.thumb{display:grid;gap:10px;justify-items:center;text-align:center;font-size:14px;font-weight:600;color:var(--ink-900);text-decoration:none;line-height:1.3}
.thumb .orb{position:relative;width:100%;max-width:132px}
.thumb:hover{color:var(--navy-800)}
.thumb:hover .orb img{scale:var(--mo-scale)}
.mega__promo{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;margin-block:20px;margin-inline:20px 0;padding:24px;border-radius:var(--r-tile);background:linear-gradient(calc(155deg * var(--dir)),var(--navy-900) 0%,#1A2A78 58%,#0F57B8 120%);color:var(--on-navy);text-decoration:none}
.mega__promo .eyebrow{color:var(--sky-300)}
.promo__art{position:absolute;z-index:-1;inset-block-start:16px;inset-inline-end:16px;width:44%}
.promo__art .orb{box-shadow:0 16px 40px -16px rgba(0,0,0,.55)}
.promo__title{color:#fff;font-size:22px;line-height:1.25;font-weight:600}
.promo__go{display:inline-flex;align-items:center;gap:8px;margin-block-start:8px;font-size:15px;font-weight:600;color:#fff}
.promo__go .i{--i:20px}
.mega__promo:hover .promo__go .i{translate:calc(2px * var(--dir)) 0}
.brands-menu .mega__inner{grid-template-columns:minmax(0,1fr);min-height:0}
.brands-menu .partner-cols{padding-block:24px 28px}
.brands-menu .brand-grid{padding:28px 32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:start}

/* ---------- Product circle (Zirdent motif) ---------- */
.orb{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff 0%,#fff 30%,var(--sky-100) 72%);box-shadow:inset 0 0 0 1px var(--sky-200);overflow:hidden;isolation:isolate}
.orb img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply;transition:scale var(--t2)}
/* Photos that cannot be cut out: a photo disc at 78% with a sky-200 ring (until a packshot on white arrives) */
.orb--photo img{border-radius:50%;object-fit:cover;mix-blend-mode:normal;box-shadow:0 0 0 1px var(--sky-200),0 0 0 6px #fff,0 0 0 7px var(--sky-200)}
/* Framed detail photos (photo: frame): the whole photo, rounded, on the sky circle */
.orb--frame{position:relative}
.orb--frame img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:60%;max-height:78%;border-radius:14px;mix-blend-mode:normal;box-shadow:0 0 0 1px var(--sky-200),var(--sh-1)}
.orb--ph{color:var(--azure-500)}
.orb--ph .i{--i:34%;opacity:.85}

/* ---------- Product grid + card (2 / 3 / 4 columns) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.card{position:relative;display:flex;flex-direction:column;padding:8px 8px 6px;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-card);transition:border-color var(--t2),box-shadow var(--t2),translate var(--t2)}
.card:hover{border-color:var(--sky-200);box-shadow:var(--sh-2);translate:0 -2px}
.card:hover .orb img{scale:var(--mo-scale)}
.card:focus-within{border-color:var(--sky-200)}
.card__body{display:flex;flex-direction:column;gap:4px;flex:1;padding:12px 6px 0}
.card__brand{line-height:1.4;color:var(--azure-700)}
.card__title{font-size:var(--fs-card-title-sm);line-height:var(--lh-card-title-sm);font-weight:600;letter-spacing:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card__link{color:var(--ink-900);text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.card__link:focus-visible{outline:none}
.card__link:focus-visible::after{outline:var(--focus-width) solid var(--azure-500);outline-offset:2px}
.card__tagline,.card__chips{display:none}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-start:auto;padding-block-start:8px}
.card__more{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--azure-700)}
.card__more .i{--i:16px;transition:translate var(--t2)}
.card:hover .card__more .i{translate:calc(2px * var(--dir)) 0}
@media (min-width:480px){
  .card{padding:12px 12px 10px}
  .card .orb{width:88%;margin:6px auto 0}
  .card__body{padding:16px 6px 0;gap:6px}
  .card__title{font-size:var(--fs-h4);line-height:var(--lh-h4);min-height:calc(2em * var(--lh-h4))}
  /* The card line is written to fit 2 lines (≤50 characters); the clamp is only a safety net */
  .card__tagline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.5;min-height:3em;color:var(--ink-500)}
  .card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:6px}
  .card__chips .chip{min-height:26px;padding:2px 10px;font-size:12.5px;border-color:var(--line-200);color:var(--ink-700)}
}

/* ---------- Brand tiles (wall + brands menu) ---------- */
.brand-tile{flex:0 0 calc((100% - 20px) / 3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 8px;background:#fff;border:1px solid var(--line-100);border-radius:var(--r-card);text-decoration:none;transition:border-color var(--t2),box-shadow var(--t2)}
a.brand-tile:hover{border-color:var(--sky-200);box-shadow:var(--sh-2)}
.brand-tile__logo{display:grid;place-items:center;height:44px}
.brand-tile img{max-height:44px;max-width:min(140px,100%);width:auto;object-fit:contain}
.brand-tile img.is-wide{max-width:min(150px,100%)}
/* Wordmark fallback: matched to the optical weight of the logos */
.brand-tile__word{font-size:18px;font-weight:600;letter-spacing:.01em;color:var(--ink-700);line-height:44px;white-space:nowrap}
.brand-grid .brand-tile{flex:none;min-height:88px}

/* ---------- Stat chips (spotlight, product page) ---------- */
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-block:8px;padding-inline:8px 16px;border:1px solid var(--sky-200);border-radius:var(--r-pill);background:#fff;font-size:15px;font-weight:600;color:var(--ink-900)}
.stat .i{--i:28px;padding:5px;border-radius:50%;background:var(--sky-100);color:var(--azure-700)}

/* ---------- Navy bands (about, product quote band) ---------- */
.band-navy{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-900);color:var(--on-navy)}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .eyebrow{color:var(--sky-300)}
.band-navy a:not(.btn){color:#fff}
.band-navy a:not(.btn):hover{color:var(--sky-300)}
.band-navy__art{position:absolute;z-index:-1;inset-block:0;inset-inline-end:-6%;width:min(70%,720px);height:100%;color:var(--sky-300);opacity:.16;transform:scaleX(var(--dir))}

/* ---------- Price note ---------- */
.price-note{display:flex;gap:10px;align-items:flex-start;margin-block-start:20px;padding:14px 16px;border-radius:var(--r-panel);background:var(--sky-50);font-size:15px;color:var(--ink-700)}
.price-note .i{--i:20px;color:var(--azure-500);margin-block-start:2px}

/* ---------- Footer: accordions below 600px, columns from 600px ---------- */
.site-footer{background:var(--navy-900);color:var(--on-navy);font-size:15px;line-height:1.6}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--sky-300);text-decoration:underline}
.footer-main{display:grid;gap:8px;padding-block:56px 32px}
.footer-brand{display:grid;gap:16px;align-content:start;justify-items:start;padding-block-end:24px;order:-2}
.footer-brand img{height:104px;width:auto}
.footer-brand p{max-width:30rem}
.socials{display:flex;gap:8px}
.socials a{border:1px solid rgba(255,255,255,.2)}
.socials a:hover{border-color:var(--sky-300);text-decoration:none}
.fcol{border-block-start:1px solid rgba(255,255,255,.12)}
.fcol--contact{order:-1}
.fcol summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:600;color:#fff}
.fcol summary .i{--i:18px;color:var(--sky-300);transition:transform var(--t2)}
.fcol[open] summary .i{transform:rotate(180deg)}
.fcol ul{list-style:none;padding:0 0 20px;display:grid;gap:4px}
.fcol li a{display:inline-flex;min-height:36px;align-items:center}
.fcontact li{display:flex;gap:10px;align-items:flex-start;padding-block:4px}
.fcontact .i{--i:18px;color:var(--sky-300);margin-block-start:.2em}
.fcontact small{display:block;color:#9AA4C7;font-size:13px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-block:20px;border-block-start:1px solid rgba(255,255,255,.12);font-size:13px;color:#9AA4C7}
@media (min-width:600px){
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;padding-block:64px 40px}
  .footer-brand{grid-column:1/-1;padding:0}
  .fcol{border:0}
  .fcol summary{min-height:0;margin-block-end:12px;pointer-events:none;font-size:15px}
  .fcol summary .i{display:none}
  .fcol ul{padding:0}
  .fcol--contact{order:5}
}
@media (min-width:1024px){
  .footer-main{grid-template-columns:1.4fr repeat(4,minmax(0,1fr));padding-block:80px 48px}
  .footer-brand{grid-column:auto}
  .fcontact a{overflow-wrap:anywhere}
}
@media (pointer:coarse){
  .fcol li a,.fcontact a{min-height:44px;display:inline-flex;align-items:center}
}

/* Drawer (dialog) */
.drawer{position:fixed;inset-block:0;inset-inline-start:auto;inset-inline-end:0;width:min(88vw,400px);max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--ink-700);overflow-y:auto;transform:translateX(calc(100% * var(--dir)));transition:transform var(--t3),overlay var(--mo-slow) allow-discrete,display var(--mo-slow) allow-discrete}
.drawer[open]{transform:none}
@starting-style{.drawer[open]{transform:translateX(calc(100% * var(--dir)))}}
.drawer::backdrop{background:rgba(17,23,63,.45)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:10px;padding-inline:16px 12px;border-block-end:1px solid var(--line-100);position:sticky;inset-block-start:0;background:#fff;z-index:1}
.drawer__head img{height:42px;width:auto}
.drawer__body{display:grid;gap:4px;padding:12px 16px 24px}
.dnav{border-block-end:1px solid var(--line-100)}
.dnav summary,.dnav>a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:18px;font-weight:600;color:var(--ink-900);text-decoration:none}
.dnav summary .i{--i:20px;color:var(--ink-500);transition:transform var(--t2)}
.dnav[open] summary .i{transform:rotate(180deg)}
.dnav ul{list-style:none;padding:0 0 12px;display:grid}
.dnav li a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding-inline:12px;border-radius:var(--r-panel);color:var(--ink-700);text-decoration:none}
.dnav li a:hover{background:var(--sky-50)}
.dnav li a .i{--i:16px;color:var(--line-400)}
.dnav__label{padding:8px 12px 4px;color:var(--ink-500)}
.drawer__ctas{display:grid;gap:10px;padding-block:20px 8px}
.drawer__meta{font-size:14px;color:var(--ink-500);display:grid;gap:4px}
.drawer__meta>span{display:inline-flex;align-items:center;gap:6px}

/* Search dialog */
.search{width:min(640px,calc(100vw - 24px));max-height:min(80vh,640px);margin:12px auto auto;padding:0;border:0;border-radius:var(--r-tile);box-shadow:var(--sh-3);background:#fff;color:var(--ink-700)}
.search::backdrop{background:rgba(17,23,63,.45)}
.search form{display:flex;align-items:center;gap:8px;padding-block:12px;padding-inline:16px 12px;border-block-end:1px solid var(--line-100);transition:box-shadow var(--t1)}
.search form:focus-within{box-shadow:inset 0 -2px 0 var(--azure-500)}
.search .i{color:var(--ink-500)}
.search input{flex:1;min-width:0;min-height:48px;border:0;font-size:18px;outline:none;background:transparent}
.search input::-webkit-search-cancel-button{display:none}
.search__hint{padding:10px 20px 0;font-size:14px;color:var(--ink-500)}
.search__results{list-style:none;padding:8px;margin:0;display:grid;max-height:calc(min(80vh,640px) - 120px);overflow:auto}
.search__results a{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 10px;border-radius:12px;color:var(--ink-900);text-decoration:none;font-weight:600;font-size:15px}
.search__results a:hover,.search__results a:focus-visible{background:var(--sky-50)}
.search__results a:focus-visible{outline-offset:-3px}
.search__results .orb{width:44px;flex:none}
.search__results small{display:block;font-weight:400;color:var(--ink-500);font-size:13px}
.search__empty{padding:16px;color:var(--ink-500)}

/* ---------- Brand chip and navy partner band (product pages and brand archives) ---------- */
.brand-chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding-block:4px;padding-inline:14px;border:1px solid var(--line-200);border-radius:var(--r-pill);background:#fff;text-decoration:none;color:var(--ink-900);font-size:14px;font-weight:600}
@media (pointer:coarse){.brand-chip{min-height:44px}}
.brand-chip img{height:22px;width:auto;max-width:90px;object-fit:contain}
.brand-chip span{color:var(--ink-500);font-weight:400;padding-inline-start:10px;border-inline-start:1px solid var(--line-200)}
.qband{padding-block:var(--sp-9);margin-block-start:var(--sp-8)}
.qband__grid{display:grid;gap:32px;align-items:center}
.qband__copy{display:grid;gap:16px}
.qband .checklist{gap:14px;margin-block-start:8px;color:#E3E8F6}
.qband .checklist .i{color:var(--sky-300)}
.qcard{display:grid;gap:12px;padding:24px;border-radius:var(--r-tile);background:#fff;color:var(--ink-700);box-shadow:0 24px 64px -24px rgba(0,0,0,.5)}
.qcard h3{font-size:var(--fs-h4);color:var(--ink-900)}
.qcard .text-link{justify-self:center}
.band-navy .qcard a.text-link{color:var(--navy-800)}
.qcard__hours{display:flex;gap:8px;justify-content:center;font-size:14px;color:var(--ink-500)}
@media (min-width:1024px){.qband__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px}.qcard{padding:36px}}

/* ---------- Light CTA band (home, about, partners, brand archives) ---------- */
.cta-band{background:var(--sky-100);padding-block:var(--sp-8)}
.cta-card{display:grid;gap:20px;padding:28px 20px;border-radius:var(--r-tile);background:#fff;box-shadow:var(--sh-3)}
.cta-card h2{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.cta-card__sub{margin-block-start:8px}
.cta-card .btn-row{display:grid}
@media (min-width:768px){.cta-card{padding:40px}.cta-card .btn-row{display:flex}}
@media (min-width:1024px){
  .cta-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:48px 56px}
  .cta-card h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
}
.brand-chip{width:fit-content;max-width:100%}
/* Brand archive: the product grid's bottom padding is the gap above the partner band */
.archive-body + .qband{margin-block-start:0}

/* ---------- Logo marquee (home page, aot/logo-strip): runs inside the content width, not the full window. Hover (a tap
   on touch screens, marquee.js) pauses it; logos are grey until hovered (in colour on touch screens, where a tap would leave :hover stuck,
   so hover only pauses where it is real). Two identical lists, the track moves one list's width (-50%) per
   loop. Reduced motion, or no JavaScript (no tap-to-pause): a static grid (wrapping rows; two columns on
   phones). ---------- */
.marquee{--logo-scale:1}
.marquee__viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee.is-paused .marquee__track{animation-play-state:paused}
.marquee__list{display:flex;flex:none;align-items:center}
.marquee__item{display:grid;place-items:center;height:calc(112px * var(--logo-scale));padding-inline:calc(40px * var(--logo-scale));border-inline-end:1px solid var(--line-200)}
.marquee__item img{width:calc(var(--w) * var(--logo-scale));max-width:none}
@media (hover:hover){
  .marquee__viewport:hover .marquee__track{animation-play-state:paused}
  .marquee__item img{filter:grayscale(1);opacity:.65;transition:filter var(--t2),opacity var(--t2)}
  .marquee__item:hover img{filter:none;opacity:1}
}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:599px){.marquee{--logo-scale:.8}}
@media (prefers-reduced-motion:reduce),(scripting:none){
  .marquee__viewport{-webkit-mask-image:none;mask-image:none}
  .marquee__track{width:auto;animation:none}
  .marquee__list{flex:auto;flex-wrap:wrap;justify-content:center}
  .marquee__list[aria-hidden],.marquee__item--repeat{display:none}
  .marquee__item{border-inline-end:0}
}
@media (max-width:599px) and (prefers-reduced-motion:reduce),(max-width:599px) and (scripting:none){
  .marquee__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .marquee__item{padding-inline:12px}
  .marquee__item img{max-width:100%}
}

/* ---------- Lightbox (gallery.js): the product gallery and page galleries (core/gallery, e.g. Events) ---------- */
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,14,40,.94);color:#fff}
.lightbox::backdrop{background:rgba(10,14,40,.88)}
/* The page behind an open lightbox does not scroll (wheel, keys), so closing it returns to the photo; the gutter
   keeps the page from shifting sideways when its scrollbar goes. Only while open: no empty gutter elsewhere. */
html:has(dialog.lightbox[open]){overflow:hidden;scrollbar-gutter:stable}
.lightbox__img{width:100%;height:100%;display:grid;place-items:center;padding:56px 12px;overflow:auto;touch-action:pinch-zoom pan-x pan-y}
.lightbox__img img{max-width:min(100%,1100px);max-height:calc(100dvh - 112px);object-fit:contain;background:#fff;border-radius:12px}
.lightbox__bar{position:absolute;inset-block-start:0;inset-inline:0;display:flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px 8px;font-size:14px;font-weight:600}
.lightbox .icon-btn{color:#fff}
.lightbox .icon-btn:hover{background:rgba(255,255,255,.12)}
.lightbox__nav{position:absolute;inset-block-start:calc(50% - 22px);background:rgba(255,255,255,.12)!important}
.lightbox__nav--prev{inset-inline-start:8px}
.lightbox__nav--next{inset-inline-end:8px}
.lightbox--single .lightbox__nav,.lightbox--single [data-lb-count]{display:none}