/* v35: rebuilt bottom menu from scratch with Bootstrap-style grid structure.
   It intentionally does not use .bottom-nav to avoid old CSS conflicts. */
:root{
  --ml-nav-height:82px;
  --ml-nav-safe:env(safe-area-inset-bottom, 0px);
  --ml-nav-white:#fff;
  --ml-nav-rose:#c7355f;
  --ml-nav-muted:#8f6b75;
}

/* minimal local Bootstrap helpers used only by the new nav */
.ml-bottom-tabs .container-fluid{width:100%;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}
.ml-bottom-tabs .row{display:flex;flex-wrap:nowrap;margin-right:0;margin-left:0}
.ml-bottom-tabs .col{flex:1 0 0;min-width:0}
.ml-bottom-tabs .g-0{--bs-gutter-x:0;--bs-gutter-y:0}
.ml-bottom-tabs .align-items-end{align-items:flex-end}
.ml-bottom-tabs .justify-content-between{justify-content:space-between}
.ml-bottom-tabs .text-center{text-align:center}
.ml-bottom-tabs .btn{border:0;background:transparent;font:inherit;text-decoration:none}
.ml-bottom-tabs .btn-link{color:inherit}
.ml-bottom-tabs .p-0{padding:0}
.ml-bottom-tabs.position-fixed{position:fixed}
.ml-bottom-tabs.bottom-0{bottom:0}
.ml-bottom-tabs.start-50{left:50%}
.ml-bottom-tabs.translate-middle-x{transform:translateX(-50%)}

/* remove old nav plates if any old patch left them in DOM/CSS */
.ml-nav-solid-base{display:none!important}
.bottom-nav{display:none!important}

/* keep page from making the empty tail below nav */
body{padding-bottom:0!important}
.app-shell{min-height:auto!important}
.app-shell > main{padding-bottom:calc(var(--ml-nav-height) + 10px + var(--ml-nav-safe))!important}
.site-footer{display:none!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}

.ml-bottom-tabs{
  width:100%;
  max-width:520px;
  height:calc(var(--ml-nav-height) + var(--ml-nav-safe));
  z-index:80;
  pointer-events:none;
  overflow:visible;
  isolation:isolate;
}

.ml-bottom-tabs::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-22px;
  height:22px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.84) 72%,#fff 100%);
}

.ml-bottom-tabs__curve{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:96px;
  z-index:1;
  pointer-events:none;
  overflow:visible;
  filter:drop-shadow(0 -8px 22px rgba(78,22,42,.09));
}

.ml-bottom-tabs__curve path{
  fill:#fff;
  fill-opacity:1;
  stroke:none;
}

.ml-bottom-tabs__inner{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(66px + var(--ml-nav-safe));
  padding:6px 8px calc(6px + var(--ml-nav-safe));
  z-index:2;
  pointer-events:auto;
}

.ml-tab-btn,
.ml-tab-order{
  width:100%;
  height:50px;
  min-height:50px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  color:var(--ml-nav-muted);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.ml-tab-btn:active,
.ml-tab-order:active{
  transform:translateY(1px);
}

.ml-tab-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:#9a6b76;
}

.ml-tab-icon svg{
  width:20px;
  height:20px;
  fill:currentColor;
  display:block;
}

.ml-tab-btn small,
.ml-tab-order small{
  display:block;
  margin:0;
  padding:0;
  font-size:9.2px;
  font-weight:850;
  line-height:1.05;
  white-space:nowrap;
  letter-spacing:-.1px;
}

.ml-center-col{
  position:relative;
  z-index:4;
}

.ml-tab-order{
  height:72px;
  min-height:72px;
  transform:translateY(-26px);
  justify-content:flex-start;
  gap:5px;
  color:var(--ml-nav-rose);
}

.ml-order-logo{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(199,53,95,.14);
  outline:6px solid #fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 7px 18px rgba(85,28,48,.06);
}

.ml-order-logo img{
  width:38px;
  height:38px;
  object-fit:contain;
  display:block;
}

.ml-tab-order small{
  color:var(--ml-nav-rose);
  font-size:11.2px;
  font-weight:950;
}

/* Bottom sheets must stay above new nav */
.sheet-backdrop{z-index:100!important}
.bottom-sheet{z-index:110!important}

/* Hearts are still disabled */
.ml-heart-layer,.ml-floating-heart,.ml-order-heart{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

@media(max-width:360px){
  :root{--ml-nav-height:78px}
  .app-shell > main{padding-bottom:calc(var(--ml-nav-height) + 8px + var(--ml-nav-safe))!important}
  .ml-bottom-tabs__curve{height:92px}
  .ml-bottom-tabs__inner{height:calc(62px + var(--ml-nav-safe));padding-bottom:calc(4px + var(--ml-nav-safe))}
  .ml-tab-icon{width:20px;height:20px}
  .ml-tab-icon svg{width:18px;height:18px}
  .ml-tab-btn small{font-size:8.5px}
  .ml-tab-order{transform:translateY(-24px)}
  .ml-order-logo{width:48px;height:48px}
  .ml-order-logo img{width:35px;height:35px}
  .ml-tab-order small{font-size:10.4px}
}


/* v36: fix overlap after rebuilt Bootstrap-style bottom nav.
   The curve geometry remains visually the same; only vertical reserve/positioning is corrected. */
:root{
  --ml-nav-height:92px !important;
  --ml-nav-safe:env(safe-area-inset-bottom, 0px);
}

/* The fixed nav has a protruding curve, so page content needs enough bottom reserve. */
.app-shell > main{
  padding-bottom:calc(142px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs{
  height:calc(92px + var(--ml-nav-safe)) !important;
  max-height:calc(92px + var(--ml-nav-safe)) !important;
}

/* Keep the curve but prevent it from eating the card buttons visually. */
.ml-bottom-tabs__curve{
  bottom:0 !important;
  height:94px !important;
  z-index:1 !important;
}

/* Inner white menu plate is taller and items are vertically centered. */
.ml-bottom-tabs__inner{
  height:calc(72px + var(--ml-nav-safe)) !important;
  padding:8px 8px calc(8px + var(--ml-nav-safe)) !important;
  display:block !important;
}

.ml-bottom-tabs__inner > .row{
  height:100% !important;
  align-items:center !important;
}

/* Regular tabs: fixed, centered, no sinking below viewport. */
.ml-tab-btn{
  height:54px !important;
  min-height:54px !important;
  justify-content:center !important;
  align-items:center !important;
  gap:4px !important;
  transform:none !important;
}

.ml-tab-icon{
  width:23px !important;
  height:23px !important;
}
.ml-tab-icon svg{
  width:20px !important;
  height:20px !important;
}
.ml-tab-btn small{
  font-size:9.4px !important;
  line-height:1.1 !important;
}

/* Center order action sits inside the notch, not too low and not covering cards. */
.ml-tab-order{
  height:82px !important;
  min-height:82px !important;
  transform:translateY(-29px) !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:5px !important;
}

.ml-order-logo{
  width:54px !important;
  height:54px !important;
  outline:6px solid #fff !important;
}

.ml-order-logo img{
  width:39px !important;
  height:39px !important;
}

.ml-tab-order small{
  font-size:11px !important;
  line-height:1.05 !important;
}

/* A more visible separation without changing the curve shape. */
.ml-bottom-tabs::before{
  top:-24px !important;
  height:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.88) 70%, #fff 100%) !important;
}
.ml-bottom-tabs__curve{
  filter:drop-shadow(0 -8px 22px rgba(78,22,42,.10)) !important;
}

@media(max-width:360px){
  :root{--ml-nav-height:88px !important;}
  .app-shell > main{padding-bottom:calc(136px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs{height:calc(88px + var(--ml-nav-safe)) !important;max-height:calc(88px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs__curve{height:90px !important;}
  .ml-bottom-tabs__inner{height:calc(68px + var(--ml-nav-safe)) !important;padding-bottom:calc(6px + var(--ml-nav-safe)) !important;}
  .ml-tab-btn{height:50px !important;min-height:50px !important;}
  .ml-tab-order{height:76px !important;min-height:76px !important;transform:translateY(-27px) !important;}
  .ml-order-logo{width:50px !important;height:50px !important;}
  .ml-order-logo img{width:36px !important;height:36px !important;}
}


/* v37: remove curve completely; build a flat white nav bar with floating brand mark */
:root{
  --ml-nav-height:82px !important;
  --ml-nav-safe:env(safe-area-inset-bottom, 0px);
  --ml-nav-rose:#c7355f;
  --ml-nav-muted:#8f6b75;
}

.app-shell > main{
  padding-bottom:calc(120px + var(--ml-nav-safe)) !important;
}

/* old curve removed */
.ml-bottom-tabs__curve{
  display:none !important;
}

/* flat bar */
.ml-bottom-tabs{
  width:100% !important;
  max-width:520px !important;
  height:calc(82px + var(--ml-nav-safe)) !important;
  max-height:calc(82px + var(--ml-nav-safe)) !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.ml-bottom-tabs::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:-20px !important;
  height:20px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.80) 70%, #fff 100%) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.ml-bottom-tabs__inner{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:calc(82px + var(--ml-nav-safe)) !important;
  padding:10px 8px calc(8px + var(--ml-nav-safe)) !important;
  background:#fff !important;
  border-top:1px solid rgba(199,53,95,.10) !important;
  box-shadow:0 -10px 28px rgba(78,22,42,.08) !important;
  z-index:1 !important;
  pointer-events:auto !important;
}

.ml-bottom-tabs__inner > .row{
  height:100% !important;
  align-items:flex-end !important;
}

.ml-tab-btn{
  height:54px !important;
  min-height:54px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:4px !important;
  transform:none !important;
  color:var(--ml-nav-muted) !important;
}

.ml-tab-btn small{
  font-size:9.3px !important;
  line-height:1.08 !important;
}

.ml-tab-icon{
  width:22px !important;
  height:22px !important;
  color:#9a6b76 !important;
}
.ml-tab-icon svg{
  width:20px !important;
  height:20px !important;
  fill:currentColor !important;
}

/* center button */
.ml-center-col{
  position:relative !important;
  z-index:4 !important;
}
.ml-tab-order{
  height:76px !important;
  min-height:76px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:5px !important;
  transform:translateY(-20px) !important;
  color:var(--ml-nav-rose) !important;
}

/* no circular white badge; logo remains itself with thick white outline following its shape */
.ml-order-logo{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:block !important;
  overflow:visible !important;
}

.ml-order-logo img{
  width:42px !important;
  height:42px !important;
  object-fit:contain !important;
  display:block !important;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 7px #fff)
    drop-shadow(0 3px 10px rgba(83, 28, 45, .10)) !important;
  -webkit-filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 7px #fff)
    drop-shadow(0 3px 10px rgba(83, 28, 45, .10)) !important;
}

.ml-tab-order small{
  font-size:11px !important;
  line-height:1.05 !important;
  color:var(--ml-nav-rose) !important;
  font-weight:950 !important;
}

/* neutralize v36 extra space rules that relied on the curve */
.ml-bottom-tabs{
  max-height:calc(82px + var(--ml-nav-safe)) !important;
}

@media(max-width:360px){
  :root{--ml-nav-height:78px !important;}
  .app-shell > main{padding-bottom:calc(114px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs{height:calc(78px + var(--ml-nav-safe)) !important;max-height:calc(78px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs__inner{height:calc(78px + var(--ml-nav-safe)) !important;padding:8px 6px calc(6px + var(--ml-nav-safe)) !important;}
  .ml-tab-btn{height:50px !important;min-height:50px !important;}
  .ml-tab-order{height:72px !important;min-height:72px !important;transform:translateY(-18px) !important;}
  .ml-order-logo img{width:40px !important;height:40px !important;}
  .ml-tab-order small{font-size:10.4px !important;}
}


/* v42: safe flat nav logo tuning - no heavy filters, no curve, no browser lag */
:root{
  --ml-nav-height:74px !important;
  --ml-nav-safe:env(safe-area-inset-bottom, 0px);
}

/* Keep enough space for flat nav but avoid huge empty tail */
.app-shell > main{
  padding-bottom:calc(108px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs{
  height:calc(74px + var(--ml-nav-safe)) !important;
  max-height:calc(74px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs__curve{
  display:none !important;
}

.ml-bottom-tabs::before{
  top:-14px !important;
  height:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.82) 70%, #fff 100%) !important;
}

.ml-bottom-tabs__inner{
  height:calc(74px + var(--ml-nav-safe)) !important;
  padding:8px 8px calc(6px + var(--ml-nav-safe)) !important;
  background:#fff !important;
  border-top:1px solid rgba(199,53,95,.10) !important;
  box-shadow:0 -9px 24px rgba(78,22,42,.07) !important;
}

.ml-bottom-tabs__inner > .row{
  height:100% !important;
  align-items:center !important;
}

.ml-tab-btn{
  height:48px !important;
  min-height:48px !important;
  justify-content:center !important;
  align-items:center !important;
  gap:3px !important;
  transform:none !important;
}

.ml-tab-icon{
  width:21px !important;
  height:21px !important;
}
.ml-tab-icon svg{
  width:19px !important;
  height:19px !important;
}
.ml-tab-btn small{
  font-size:8.9px !important;
  line-height:1.05 !important;
}

/* Center logo: bigger than original, but not huge; text remains visible */
.ml-tab-order{
  height:76px !important;
  min-height:76px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:3px !important;
  transform:translateY(-12px) !important;
}

.ml-order-logo{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* Thin flat white contour around logo shape. Only 4 shadows = much lighter for Chrome. */
.ml-order-logo img{
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  display:block !important;
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 9px rgba(83,28,45,.08)) !important;
  -webkit-filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 9px rgba(83,28,45,.08)) !important;
}

.ml-tab-order small{
  font-size:10.7px !important;
  line-height:1.05 !important;
  margin-top:-2px !important;
  color:#c7355f !important;
  font-weight:950 !important;
}

/* Ensure old heart animations or old nav plates never return */
.ml-heart-layer,.ml-floating-heart,.ml-order-heart{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}
.ml-nav-solid-base,.bottom-nav{
  display:none !important;
}

@media(max-width:360px){
  :root{--ml-nav-height:72px !important;}
  .app-shell > main{padding-bottom:calc(104px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs{height:calc(72px + var(--ml-nav-safe)) !important;max-height:calc(72px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs__inner{height:calc(72px + var(--ml-nav-safe)) !important;padding:7px 6px calc(5px + var(--ml-nav-safe)) !important;}
  .ml-tab-btn{height:46px !important;min-height:46px !important;}
  .ml-tab-order{height:72px !important;min-height:72px !important;transform:translateY(-10px) !important;}
  .ml-order-logo img{width:54px !important;height:54px !important;}
  .ml-tab-order small{font-size:10.1px !important;margin-top:-2px !important;}
}


/* v43: logo a bit higher, a bit bigger, outline ~3px thicker but still flat and light */
.app-shell > main{
  padding-bottom:calc(110px + var(--ml-nav-safe)) !important;
}

.ml-tab-order{
  height:78px !important;
  min-height:78px !important;
  transform:translateY(-16px) !important; /* higher */
  gap:3px !important;
}

.ml-order-logo img{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
  display:block !important;
  filter:
    drop-shadow(3px 0 0 #fff)
    drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 3px 9px rgba(83,28,45,.08)) !important;
  -webkit-filter:
    drop-shadow(3px 0 0 #fff)
    drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 3px 9px rgba(83,28,45,.08)) !important;
}

.ml-tab-order small{
  font-size:10.7px !important;
  line-height:1.05 !important;
  margin-top:-1px !important;
}

@media(max-width:360px){
  .app-shell > main{padding-bottom:calc(106px + var(--ml-nav-safe)) !important;}
  .ml-tab-order{
    height:74px !important;
    min-height:74px !important;
    transform:translateY(-14px) !important;
  }
  .ml-order-logo img{
    width:60px !important;
    height:60px !important;
  }
  .ml-tab-order small{
    font-size:10.2px !important;
  }
}


/* v44: logo 3px higher, outline 1px lighter, remove shadow */
.ml-tab-order{
  transform:translateY(-19px) !important;
}

.ml-order-logo img{
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff) !important;
  -webkit-filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff) !important;
}

@media(max-width:360px){
  .ml-tab-order{
    transform:translateY(-17px) !important;
  }
}


/* v45: add mellow logo shadow + make top-of-nav shadow dark instead of white */
.ml-bottom-tabs::before{
  top:-16px !important;
  height:16px !important;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.05) 55%, rgba(0,0,0,.10) 100%) !important;
  opacity:1 !important;
}

.ml-bottom-tabs__inner{
  box-shadow:0 -10px 24px rgba(0,0,0,.12) !important;
}

.ml-order-logo img{
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(0 3px 7px rgba(0,0,0,.13)) !important;
  -webkit-filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(0 3px 7px rgba(0,0,0,.13)) !important;
}


/* v46: make center order label bolder */
.ml-tab-order small{
  font-weight:1000 !important;
  text-shadow:none !important;
}


/* v47: lighter top shadow + 2px shorter bottom menu */
:root{
  --ml-nav-height:72px !important;
}

.app-shell > main{
  padding-bottom:calc(108px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs{
  height:calc(72px + var(--ml-nav-safe)) !important;
  max-height:calc(72px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs__inner{
  height:calc(72px + var(--ml-nav-safe)) !important;
  padding:7px 8px calc(5px + var(--ml-nav-safe)) !important;
  box-shadow:0 -8px 20px rgba(0,0,0,.065) !important;
}

.ml-bottom-tabs::before{
  top:-14px !important;
  height:14px !important;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.025) 58%, rgba(0,0,0,.055) 100%) !important;
}

@media(max-width:360px){
  :root{--ml-nav-height:70px !important;}
  .app-shell > main{padding-bottom:calc(104px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs{
    height:calc(70px + var(--ml-nav-safe)) !important;
    max-height:calc(70px + var(--ml-nav-safe)) !important;
  }
  .ml-bottom-tabs__inner{
    height:calc(70px + var(--ml-nav-safe)) !important;
    padding:6px 6px calc(4px + var(--ml-nav-safe)) !important;
  }
}


/* v48: logo +3px and gentle heart burst on order click */
.ml-order-logo img{
  width:67px !important;
  height:67px !important;
}

/* Dedicated new classes so old disabled heart rules do not affect this animation */
.ml-heart-burst-layer{
  position:fixed;
  inset:0;
  z-index:109;
  pointer-events:none;
  overflow:hidden;
  direction:ltr;
}

.ml-burst-heart{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  transform:translate(-50%,-50%) scale(.72) rotate(var(--r));
  opacity:0;
  color:var(--c);
  animation:mlHeartFloat var(--d) cubic-bezier(.17,.84,.44,1) forwards;
  will-change:transform,opacity;
}

.ml-burst-heart svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

@keyframes mlHeartFloat{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.58) rotate(var(--r));
  }
  16%{
    opacity:.82;
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.02) rotate(calc(var(--r) + var(--rr)));
  }
}

@media(max-width:360px){
  .ml-order-logo img{
    width:63px !important;
    height:63px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .ml-burst-heart{animation:none !important; opacity:0 !important;}
}


/* v49: more hearts with longer visible duration */
.ml-heart-burst-layer{
  z-index:109 !important;
}

.ml-burst-heart{
  animation:mlHeartFloatV49 var(--d) cubic-bezier(.16,.78,.28,1) forwards !important;
}

@keyframes mlHeartFloatV49{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.58) rotate(var(--r));
  }
  10%{
    opacity:.35;
  }
  22%{
    opacity:.88;
  }
  72%{
    opacity:.76;
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.06) rotate(calc(var(--r) + var(--rr)));
  }
}


/* v50: reduce bottom menu height by 8px */
:root{
  --ml-nav-height:64px !important;
}

.app-shell > main{
  padding-bottom:calc(100px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs{
  height:calc(64px + var(--ml-nav-safe)) !important;
  max-height:calc(64px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs__inner{
  height:calc(64px + var(--ml-nav-safe)) !important;
  padding:5px 8px calc(4px + var(--ml-nav-safe)) !important;
}

.ml-bottom-tabs__inner > .row{
  height:100% !important;
  align-items:center !important;
}

.ml-tab-btn{
  height:42px !important;
  min-height:42px !important;
  justify-content:center !important;
  gap:2px !important;
}

.ml-tab-icon{
  width:20px !important;
  height:20px !important;
}
.ml-tab-icon svg{
  width:18px !important;
  height:18px !important;
}

.ml-tab-btn small{
  font-size:8.6px !important;
}

.ml-tab-order{
  height:74px !important;
  min-height:74px !important;
  transform:translateY(-19px) !important;
}

@media(max-width:360px){
  :root{--ml-nav-height:62px !important;}
  .app-shell > main{padding-bottom:calc(96px + var(--ml-nav-safe)) !important;}
  .ml-bottom-tabs{
    height:calc(62px + var(--ml-nav-safe)) !important;
    max-height:calc(62px + var(--ml-nav-safe)) !important;
  }
  .ml-bottom-tabs__inner{
    height:calc(62px + var(--ml-nav-safe)) !important;
    padding:4px 6px calc(3px + var(--ml-nav-safe)) !important;
  }
  .ml-tab-btn{
    height:40px !important;
    min-height:40px !important;
  }
}


/* v51: custom uploaded SVG icons for 4 bottom menu items */
.ml-tab-icon svg{
  width:21px !important;
  height:21px !important;
  display:block !important;
  overflow:visible !important;
}
.ml-tab-icon svg path,
.ml-tab-icon svg circle,
.ml-tab-icon svg rect{
  vector-effect:non-scaling-stroke;
}
@media(max-width:360px){
  .ml-tab-icon svg{
    width:20px !important;
    height:20px !important;
  }
}


/* v52: updated FAQ/portfolio icons + larger bottom menu labels */
.ml-tab-btn small{
  font-size:9.6px !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  letter-spacing:-.18px !important;
}

.ml-tab-icon svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
  overflow:visible !important;
}

@media(max-width:360px){
  .ml-tab-btn small{
    font-size:9.1px !important;
  }
  .ml-tab-icon svg{
    width:21px !important;
    height:21px !important;
  }
}


/* v53: replace FAQ/portfolio icons + add a little space between icons and labels */
.ml-tab-btn{
  gap:5px !important;
}

.ml-tab-order{
  gap:5px !important;
}

.ml-tab-icon{
  margin-bottom:1px !important;
}

.ml-tab-btn small{
  margin-top:1px !important;
}

.ml-tab-order small{
  margin-top:0 !important;
}

.ml-tab-icon svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
  overflow:visible !important;
}

@media(max-width:360px){
  .ml-tab-btn{
    gap:4px !important;
  }
  .ml-tab-order{
    gap:4px !important;
  }
  .ml-tab-icon svg{
    width:21px !important;
    height:21px !important;
  }
}


/* v54: FAQ text refinement */
.faq-list details:first-child summary{
  color:#c7355f !important;
  font-weight:950 !important;
}
.faq-list details:first-child p{
  font-weight:650 !important;
}


/* v55: quick order CTA inside FAQ sheet */
.faq-quick-order{
  margin-top:12px !important;
  padding:12px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(199,53,95,.075), rgba(199,53,95,.035)) !important;
  border:1px solid rgba(199,53,95,.13) !important;
}

.faq-quick-order strong{
  display:block !important;
  font-size:13px !important;
  font-weight:950 !important;
  color:#8f2747 !important;
  margin-bottom:4px !important;
}

.faq-quick-order p{
  margin:0 0 10px !important;
  font-size:11.2px !important;
  line-height:1.9 !important;
  color:#7c5c66 !important;
}

.faq-quick-order-btn{
  width:100% !important;
  min-height:42px !important;
  border:0 !important;
  border-radius:15px !important;
  background:#c7355f !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font:inherit !important;
  font-size:12px !important;
  font-weight:950 !important;
  box-shadow:0 8px 18px rgba(199,53,95,.20) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}


/* v56: FAQ accordion, no CTA, corrected arrows */
.faq-quick-order{
  display:none !important;
}

.faq-list details{
  position:relative !important;
}

.faq-list summary{
  position:relative !important;
  list-style:none !important;
  cursor:pointer !important;
  padding-left:24px !important;
  user-select:none !important;
}

.faq-list summary::-webkit-details-marker{
  display:none !important;
}

.faq-list summary::marker{
  content:"" !important;
}

.faq-list summary::after{
  content:"‹" !important;
  position:absolute !important;
  left:2px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#9a6b76 !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.faq-list details[open] summary::after{
  content:"⌄" !important;
  font-size:18px !important;
  left:4px !important;
  transform:translateY(-48%) !important;
}

.faq-empty{
  margin:0 !important;
  color:#8f6b75 !important;
  font-size:12px !important;
  line-height:1.9 !important;
}


/* v57 verified faq admin patch: accordion arrows + one-open FAQ behavior styles are included. */


/* v58: professional Bootstrap-style FAQ accordion arrows */
.faq-list{
  display:none !important;
}

.faq-accordion{
  display:grid !important;
  gap:8px !important;
}

.faq-accordion-item{
  background:#fff !important;
  border:1px solid rgba(199,53,95,.12) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 5px 14px rgba(86,31,48,.035) !important;
}

.faq-accordion-header{
  margin:0 !important;
  padding:0 !important;
  font-size:inherit !important;
  line-height:inherit !important;
}

.faq-accordion-button{
  width:100% !important;
  min-height:44px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#4d2634 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:11px 13px !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.65 !important;
  text-align:right !important;
  cursor:pointer !important;
  box-shadow:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

.faq-accordion-button span{
  flex:1 !important;
}

.faq-accordion-button:not(.collapsed){
  color:#c7355f !important;
  background:rgba(199,53,95,.035) !important;
}

.faq-accordion-button:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(199,53,95,.22) !important;
}

.faq-accordion-chevron{
  flex:0 0 auto !important;
  width:17px !important;
  height:17px !important;
  color:#9a6b76 !important;
  transition:transform .22s ease, color .22s ease !important;
}

.faq-accordion-chevron path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.15 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* RTL closed state: chevron points left */
.faq-accordion-button .faq-accordion-chevron{
  transform:rotate(180deg) !important;
}

/* Open state: chevron points down */
.faq-accordion-button:not(.collapsed) .faq-accordion-chevron{
  transform:rotate(90deg) !important;
  color:#c7355f !important;
}

.faq-accordion-collapse{
  display:none !important;
}

.faq-accordion-collapse.show{
  display:block !important;
}

.faq-accordion-body{
  padding:0 13px 13px !important;
  color:#72515d !important;
  font-size:11.4px !important;
  font-weight:560 !important;
  line-height:2 !important;
  border-top:1px solid rgba(199,53,95,.08) !important;
  background:#fff !important;
}

.faq-accordion-item:first-child .faq-accordion-button{
  font-weight:950 !important;
}

.faq-accordion-item:first-child .faq-accordion-button:not(.collapsed){
  color:#c7355f !important;
}

@media(max-width:360px){
  .faq-accordion-button{
    font-size:11.5px !important;
    padding:10px 12px !important;
  }
  .faq-accordion-body{
    font-size:11px !important;
  }
}


/* v59: elegant editable About section */
.about-sheet-content{
  display:grid !important;
  gap:10px !important;
}

.about-story-card{
  position:relative !important;
  padding:15px 14px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1px solid rgba(199,53,95,.12) !important;
  box-shadow:0 8px 22px rgba(86,31,48,.045) !important;
  overflow:hidden !important;
}

.about-story-card.soft{
  background:linear-gradient(180deg,rgba(199,53,95,.055),rgba(255,255,255,.95)) !important;
}

.about-story-mark{
  width:28px !important;
  height:28px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:rgba(199,53,95,.09) !important;
  color:#c7355f !important;
  font-size:14px !important;
  margin-bottom:8px !important;
}

.about-story-card h3{
  margin:0 0 7px !important;
  color:#4d2634 !important;
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.7 !important;
  letter-spacing:-.25px !important;
}

.about-story-card p{
  margin:0 !important;
  color:#72515d !important;
  font-size:11.8px !important;
  font-weight:560 !important;
  line-height:2.05 !important;
}


/* v60: elegant editable Services section */
.services-sheet-content{
  display:grid !important;
  gap:10px !important;
}

.services-intro-card{
  padding:13px 14px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg, rgba(199,53,95,.06), rgba(255,255,255,.98)) !important;
  border:1px solid rgba(199,53,95,.12) !important;
}

.services-intro-card p{
  margin:0 !important;
  color:#6e4a57 !important;
  font-size:11.8px !important;
  font-weight:650 !important;
  line-height:2.05 !important;
}

.services-list{
  display:grid !important;
  gap:8px !important;
}

.service-line-card{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  padding:12px !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(199,53,95,.10) !important;
  box-shadow:0 6px 16px rgba(86,31,48,.035) !important;
}

.service-line-number{
  flex:0 0 auto !important;
  min-width:30px !important;
  height:30px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(199,53,95,.08) !important;
  color:#c7355f !important;
  font-size:10px !important;
  font-weight:950 !important;
  line-height:1 !important;
}

.service-line-card b{
  display:block !important;
  margin:0 0 4px !important;
  color:#4d2634 !important;
  font-size:12.6px !important;
  font-weight:950 !important;
  line-height:1.65 !important;
}

.service-line-card p{
  margin:0 !important;
  color:#72515d !important;
  font-size:11.2px !important;
  font-weight:560 !important;
  line-height:1.95 !important;
}