/* hi,dear — shared responsive layout contract.
   Applies to the store, checkout, scent finder and brand story.
   Horizontal movement is allowed only inside intentional carousels/navs. */
:root{
  --layout-gutter:19px;
  --layout-content-max:1440px;
  --layout-control-radius:8px;
  --type-menu:16px;
  --type-navigation:14px;
  --type-meta:12px;
}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  overscroll-behavior-x:none;
}
#app{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
:where(main,section,article,aside,nav,form,fieldset){min-width:0}
.main-nav__item,.shop-categories a,.menu-group__panel a{font-size:var(--type-navigation)}
.menu-sheet__eyebrow,.menu-sheet__utility a,.shop-drawer-utility a{font-size:var(--type-meta)}
.shop-drawer .mobile-menu-inner a{
  min-height:52px;
  padding-block:13px;
  font-size:var(--type-menu);
  line-height:1.3;
  letter-spacing:-.01em;
}
:where(input,select,textarea,img,video){max-width:100%}
.layout-shell{
  width:100%;
  max-width:var(--layout-content-max);
  margin-inline:auto;
  padding-inline:var(--layout-gutter);
}
@media(min-width:680px){
  :root{--layout-gutter:32px}
}