/* ==========================================================================
   mobile.css  ·  sitewide mobile layer
   Loaded last on every page, so rules here are free to use !important to beat
   the older per page @media blocks that force the nav links to stay visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Menu button + slide out drawer
   -------------------------------------------------------------------------- */
.mnav-btn{
  display:none;
  position:relative;
  width:46px;height:46px;flex:0 0 auto;
  margin-left:10px;padding:0;border:0;background:transparent;
  border-radius:999px;cursor:pointer;color:#620013;
  -webkit-tap-highlight-color:transparent;
}
.mnav-btn span{
  position:absolute;left:12px;width:22px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s;
}
.mnav-btn span:nth-child(1){top:16px;}
.mnav-btn span:nth-child(2){top:22px;}
.mnav-btn span:nth-child(3){top:28px;}
.mnav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.mnav-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mnav-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mnav-sheet{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;
  background:#fffdf6;
  padding:0 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility .32s;
}
.mnav-sheet.open{opacity:1;visibility:visible;transform:none;}
.mnav-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0 10px;min-height:66px;
}
.mnav-top img{display:block;height:30px;width:auto;}
.mnav-close{
  width:46px;height:46px;flex:0 0 auto;border:0;background:transparent;padding:0;
  color:#620013;cursor:pointer;position:relative;border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
.mnav-close::before,.mnav-close::after{
  content:"";position:absolute;left:13px;top:22px;width:20px;height:2px;border-radius:2px;background:currentColor;
}
.mnav-close::before{transform:rotate(45deg);}
.mnav-close::after{transform:rotate(-45deg);}

.mnav-list{list-style:none;margin:14px 0 0;padding:0;}
.mnav-list li{border-top:1px solid rgba(98,0,19,.12);}
.mnav-list li:last-child{border-bottom:1px solid rgba(98,0,19,.12);}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:60px;padding:14px 2px;
  font-family:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:19px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  color:#620013;text-decoration:none;line-height:1.2;
}
.mnav-list a::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid rgba(98,0,19,.35);border-bottom:2px solid rgba(98,0,19,.35);
  transform:rotate(-45deg);
}
.mnav-list a.on{color:#A95C72;}
.mnav-list a.on::after{border-color:rgba(169,92,114,.5);}

.mnav-foot{margin-top:26px;}
.mnav-cta{
  display:flex;align-items:center;justify-content:center;min-height:56px;
  background:#f8e9bd;color:#620013;border-radius:999px;text-decoration:none;
  font-family:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
}
.mnav-note{
  margin:18px 0 0;text-align:center;font-size:12.5px;line-height:1.7;font-weight:300;color:#617486;
  font-family:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
}
html.mnav-open,html.mnav-open body{overflow:hidden !important;}

@media (max-width:860px){
  html.mnav .mnav-btn{display:inline-flex !important;}
  /* the old per page rules used display:flex !important, so these are scoped
     higher to win rather than relying on source order */
  html.mnav nav .links,
  html.mnav nav.lx-nav .links,
  html.mnav .lx-nav .links,
  html.mnav nav .navlinks,
  html.mnav nav.mknav .navlinks{display:none !important;}
  html.mnav nav,
  html.mnav nav.lx-nav,
  html.mnav nav.mknav{
    flex-wrap:nowrap !important;gap:8px !important;
    justify-content:space-between !important;
    padding-left:20px !important;padding-right:14px !important;
  }
  html.mnav nav .logo img,
  html.mnav nav .navlogo img{height:28px !important;}
}
@media (max-width:560px){
  /* the brands pill lives in the drawer at this width so the bar stays clean */
  html.mnav nav .navtag,
  html.mnav nav .tag{display:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .mnav-sheet,.mnav-btn span{transition:none !important;}
}

/* --------------------------------------------------------------------------
   2. No orphans
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.eh,.esub,.oi-h1,.dm-h,.sf-row{text-wrap:balance;}
p,li,figcaption,blockquote{text-wrap:pretty;}

/* --------------------------------------------------------------------------
   3. Spacing, padding and tap targets on phones
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  html,body{overflow-x:hidden;}
  img,video,iframe,svg{max-width:100%;}

  /* consistent side gutter for the common section wrappers */
  .band,.sec,.wrap,.in,.prose,.inner,.container{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
  .band .in,.sec .in,.wrap .in,.in .in{padding-left:0;padding-right:0;}
  .band{padding-top:34px;padding-bottom:34px;}

  /* long headings were set for desktop widths */
  h1{line-height:1.08;}
  h2{line-height:1.14;}

  /* two column grids that cannot shrink below their content on the media kit */
  .grid2{grid-template-columns:1fr !important;}
  .grid2>*,.kpis>*,.cards>*{min-width:0;}

  /* anything tappable gets a thumb sized target */
  a.btn,button,.btn,.lx-btn,.btn-fill,.btn-out,.cta a,.readmore,.dl,.buy,
  .mnav-list a,.mnav-cta{min-height:46px;}
  nav a{min-height:0;}
}