/* ==========================================================================
   Mobile navigation drawer
   Own file so a new css/style.css from the design team cannot remove it.
   Everything is prefixed .mnav- and shares nothing with the desktop nav.
   ========================================================================== */
.mnav{position:fixed;inset:0;z-index:120;display:none}
.mnav[hidden]{display:none}
.mnav-lock,.mnav-lock body{overflow:hidden}

@media(max-width:1180px){
  .mnav:not([hidden]){display:block}

  .mnav-veil{position:absolute;inset:0;background:rgba(20,8,14,.55);opacity:0;transition:opacity .22s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .mnav.is-open .mnav-veil{opacity:1}

  .mnav-panel{position:absolute;inset:0 0 0 auto;width:min(92vw,420px);background:#FCF9F6;
    display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;
    box-shadow:-18px 0 50px rgba(20,8,14,.28);
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mnav.is-open .mnav-panel{transform:none}

  .mnav-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 18px;border-bottom:1px solid #EADFDB;background:#fff;flex:none}
  .mnav-brand b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:20px;color:#2A1520;line-height:1.1}
  .mnav-brand span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#B0897A;margin-top:2px}
  .mnav-x{width:40px;height:40px;flex:none;border:1px solid #EADFDB;background:#fff;border-radius:50%;
    font-size:24px;line-height:1;color:#2A1520;cursor:pointer}

  .mnav-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 16px}

  /* every row is a comfortable tap target */
  .mnav-item,.mnav-cat,.mnav-prod,.mnav-all,.mnav-cat-link{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    font-family:inherit;text-align:left;background:none;border:0;cursor:pointer;
    padding:14px 20px;min-height:52px;font-size:16px;color:#2A1520;text-decoration:none}
  .mnav-item{border-bottom:1px solid #F0E7E2;font-weight:500}
  .mnav-item--accent{color:#8F3F52;font-weight:600}
  .mnav-toggle .mnav-chev{width:9px;height:9px;flex:none;border-right:2px solid #9A674F;border-bottom:2px solid #9A674F;
    transform:rotate(45deg);transition:transform .2s ease;margin-top:-4px}
  .mnav-group.is-open > .mnav-toggle .mnav-chev{transform:rotate(-135deg);margin-top:2px}
  .mnav-group.is-open > .mnav-toggle{background:#F7F1EC}

  /* submenus: closed by default, so they work even before the script runs */
  .mnav-sub{max-height:0;overflow:hidden;transition:max-height .25s ease;background:#F7F1EC}
  .mnav-group.is-open > .mnav-sub{max-height:2000px}

  .mnav-cat{padding-left:30px;font-size:15px;border-bottom:1px solid #EFE4DD}
  .mnav-n{margin-left:auto;margin-right:8px;font-size:11px;font-weight:700;color:#8C737A;
    background:#fff;border:1px solid #EADFDB;border-radius:999px;padding:2px 8px}
  .mnav-cat-link{padding-left:30px;font-size:15px;border-bottom:1px solid #EFE4DD}

  .mnav-sub--2{background:#fff}
  .mnav-prod{padding:12px 20px 12px 42px;min-height:48px;font-size:14.5px;color:#5c534d;border-bottom:1px solid #F3EBE6}
  .mnav-prod em{font-style:normal;font-weight:600;color:#2A1520;font-size:13.5px;white-space:nowrap}
  .mnav-prod:active{background:#F7F1EC}

  .mnav-all{padding-left:30px;font-size:13.5px;font-weight:600;color:#8F3F52;min-height:46px;border-bottom:1px solid #EFE4DD}
  .mnav-all--2{padding-left:42px;font-size:13px}

  .mnav-foot{flex:none;display:flex;gap:10px;padding:14px 18px;border-top:1px solid #EADFDB;background:#fff}
  .mnav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;
    border-radius:999px;background:#B17A63;color:#fff;font-weight:600;font-size:15px;text-decoration:none}
  .mnav-btn--ghost{background:#fff;color:#2A1520;border:1px solid #DCCBC4}
  .mnav-badge{background:#8F3F52;color:#fff;border-radius:999px;font-size:11.5px;padding:1px 7px}

  /* the old in-header nav panel must never appear alongside the drawer */
  .nav-flex-1.open{display:none !important}
}

@media(prefers-reduced-motion:reduce){
  .mnav-panel,.mnav-veil,.mnav-sub,.mnav-chev{transition:none}
}

/* ==========================================================================
   Video fallback
   A muted autoplay video does not start on an iPhone in Low Power Mode, on a
   data saver, or before it has buffered. The element then paints black, which
   on these dark-brand pages looks like a broken box. Giving every video the
   brand gradient underneath means a video that has not started looks like an
   intentional panel instead.
   ========================================================================== */
video{background:linear-gradient(135deg,#2A1520 0%,#4a2733 45%,#8F3F52 80%,#B17A63 100%)}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}