/* One page grid from navigation to footer. Full-bleed imagery remains full width.
   Shared layout breakpoints: 360 / 768 / 1024 / 1440 / 1920px.
   Page components use these same literal media thresholds (including shop JS). */
:root{
  --accent:hsl(168 76% 42%);
  --content-max:1440px;
  --page-gutter:24px;
  --page-inset:max(var(--page-gutter),calc((100% - var(--content-max))/2));
  --site-header-height:74px;
}
@media(max-width:359px){:root{--page-gutter:20px}}
@media(min-width:768px){:root{--page-gutter:32px;--site-header-height:88px}}
@media(min-width:1024px){:root{--page-gutter:48px}}
@media(min-width:1440px){:root{--page-gutter:64px}}
/* Interior content containers. */
:is(.section,.shop-shell,.pdp-shell,.service-shell),.service-v2 .service-shell{
  width:calc(100% - var(--page-gutter)*2);
  max-width:var(--content-max);
  margin-inline:auto;
}
/* Full-width surfaces keep their background; only their contents are inset. */
:is(.frame>header,.site-header,.service-cinema,body>footer,.review-bar,.design-notes,body>.notes){padding-inline:var(--page-inset)}
:is(.frame>header,.site-header){height:var(--site-header-height)}
:is(.frame>header,.site-header) .logo img{width:128px}
:is(#mobile-menu:not([hidden]),.mobile-panel){padding-inline:var(--page-inset);top:var(--site-header-height)}
.caption{left:var(--page-inset);right:var(--page-inset)}
@media(max-width:1439px) and (min-width:1024px){
 :is(.frame>header,.site-header){gap:32px}
 :is(.frame>header,.site-header) nav{gap:24px}
 .utilities{gap:18px}
 .utilities .language,.utilities .account-label,.header-tools span{display:none}
}
@media(max-width:1023px){
 :is(.frame>header,.site-header)>nav{display:none}
 .frame>header .mobile-menu,.site-header .menu-toggle{display:grid;place-items:center}
 .utilities .language{display:none}
}
@media(max-width:767px){
 :is(.frame>header,.site-header) .logo img{width:110px}
 .category-tabs{margin-right:calc(-1*var(--page-gutter));padding-right:var(--page-gutter)}
}