/* Catalogs fill the viewport; editorial copy keeps its reading measure. */
:root{--public-frame:1560px;--public-gutter:64px;--public-content:1432px}
.product-category .catalog-content,.event-set-page .catalog-content{
 box-sizing:border-box;width:100%;max-width:none;margin-inline:0;
 padding-inline:clamp(24px,3.3vw,64px);
}
.catalog-products--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
@media(min-width:1600px){
 .catalog-products--grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:2200px){
 .catalog-products--grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:761px){
 .business .brand-intro.spectrum-intro,
 .business .solutions-editorial.solutions-video-grid,
 .business .project-editorial,
 .effects-cases{
  padding-inline:max(var(--public-gutter),calc((100% - var(--public-content))/2));
 }
 .business .intro-story-layout{max-width:none;margin-inline:0}
 .effects-heading,.effects-case{max-width:var(--public-content)}
 .business .spectrum-hero .film-copy{
  left:max(var(--public-gutter),calc((100% - var(--public-content))/2));
  right:max(var(--public-gutter),calc((100% - var(--public-content))/2));
 }
 .why-width{width:calc(100% - 2 * var(--public-gutter));max-width:var(--public-content)}
}
@media(min-width:761px) and (max-width:1199px){
 :root{--public-gutter:32px}
 .catalog-products--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
}
@media(max-width:760px){
 :root{--public-gutter:20px}
 .product-category .catalog-content,.event-set-page .catalog-content{padding-inline:20px}
 .catalog-products--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}
 /* Use more of the phone width for product cards without changing the desktop grid. */
 .product-category .catalog-products--grid{margin-inline:-8px;column-gap:10px}
 /* Give every catalog the taller mobile display used by the 3D sticks. */
 .product-category .catalog-products--grid .catalog-media{aspect-ratio:5/6}
 .product-category .catalog-products--grid .catalog-media :is(img,video){object-fit:cover;scale:var(--catalog-mobile-fit,1)}
 /* Leave room for the widest side/rear views of bracelets, rings and accessories. */
 .product-category[data-catalog-category="wristbands"]{--catalog-mobile-fit:.95}
 .product-category[data-catalog-category="rings"]{--catalog-mobile-fit:.94}
 .product-category[data-catalog-category="accessories"]{--catalog-mobile-fit:.96}
 .product-category [data-catalog-item="5322"]{--catalog-mobile-fit:.9}
 .product-category [data-catalog-item="4300"]{--catalog-mobile-fit:.84}
 /* Wearing frames share the clear-cap reference scale, independent of the
    product-only allowances used for wide rotation silhouettes. */
 .product-category[data-catalog-category="wristbands"] .catalog-products--grid .catalog-media :is(video.catalog-usage-active,img.catalog-use-poster){scale:.95}
 /* Fit the full 15-color palette in a mobile product card (162px total). */
 .product-category .catalog-color-chart{gap:3px}
 .product-category .catalog-color-swatch{flex-basis:8px;width:8px;height:8px}
}
@media(max-width:359px){.catalog-products--grid{grid-template-columns:minmax(0,1fr)}}

/* A reversible desktop view for mobile visitors, kept at the very bottom. */
.footer-view-mode{display:none;margin-top:24px}
#main .footer-view-mode button{font:inherit;color:inherit;background:transparent;border:1px solid #c7fb0f55;border-radius:999px;min-height:44px;padding:10px 20px}
.footer-view-mode button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:760px),(pointer:coarse){.footer-view-mode{display:block}}
html[data-view-mode=desktop] .footer-view-mode{display:block}
@media(pointer:coarse){html[data-view-mode=desktop] body{min-width:1280px}}

/* LED sticks: five products per desktop row, ordered by requested groups then length. */
@media(min-width:1200px){.product-category[data-catalog-category="sticks"] .catalog-products--grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 22px}}

/* Match the category title scale and align the logo with the catalog edge. */
#main .product-category .catalog-header{padding-left:clamp(24px,3.3vw,64px);grid-template-columns:minmax(0,230px) max-content}
.product-category .catalog-home{--glow-logo-width:230px}
@media(max-width:760px){
 #main .product-category .catalog-header{padding-left:20px;grid-template-columns:minmax(0,160px) max-content}
 .product-category .catalog-home{--glow-logo-width:160px}
}

/* Give the consultation action the same type scale and padding as category tabs. */
.product-category .catalog-header>a.catalog-consult{font-size:var(--catalog-product);line-height:1.6;min-height:42px;padding:8px 16px}
@media(max-width:760px){.product-category .catalog-header>a.catalog-consult{min-height:40px;padding:8px 13px}}

/* Align the visible logo lettering, including the source artwork inset. */
.product-category .catalog-home{justify-content:flex-start;margin:0;transform:translateX(-5px)}

/* Home wordmark and editorial headings share a consistent left edge. */
.business{--home-edge:clamp(24px,4vw,64px)}
.business .film-masthead{height:auto;min-height:88px;padding-top:18px;padding-bottom:18px;padding-left:var(--home-edge)}
.business .film-logo{display:block;max-width:calc(100% - 12px);transform:translateX(-5px)}
.business .film-logo .glow-brand-logo{width:calc(var(--home-title-size) * 5.73);max-width:100%}
.business .spectrum-hero .film-copy{left:var(--home-edge);right:var(--home-edge);text-align:left}
.business .brand-intro.spectrum-intro{padding-left:var(--home-edge);padding-right:var(--home-edge)}
.business .intro-story-layout{max-width:none;margin-left:0;margin-right:0}
@media(max-width:760px){.business{--home-edge:20px}}

/* Restore the original home logo scale, retaining the requested text alignment. */
.business .film-masthead{height:88px;padding-top:0;padding-bottom:0}
.business .film-logo .glow-brand-logo{width:var(--public-header-logo-width,220px)}
@media(max-width:640px){.business .film-masthead{height:80px;min-height:80px}}