/* ELIFLI CAKERY V20.14.89
   Product page only: remove WhatsApp-order heading and integrate the brand cleanly.
   No cupcake symbol above the logo. */

.product-brand-header{
  position:relative;
}

.product-brand-wordmark{
  text-decoration:none!important;
  color:inherit!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.product-brand-wordmark:link,
.product-brand-wordmark:visited,
.product-brand-wordmark:hover,
.product-brand-wordmark:active{
  text-decoration:none!important;
  color:inherit!important;
}
.product-brand-wordmark strong{
  font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive;
  font-weight:400;
  color:#ea7181;
  line-height:.82;
}
.product-brand-wordmark small{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  color:#9b7b68;
  letter-spacing:.34em;
  line-height:1;
}

@media (max-width:820px){
  .topbar{display:none!important}

  .site-header .product-brand-header{
    min-height:128px!important;
    display:grid!important;
    grid-template-columns:58px 1fr 58px!important;
    align-items:center!important;
    padding:16px 22px!important;
    border-bottom:1px solid #f1dce1!important;
    background:#fff!important;
  }

  .site-header .product-brand-header .icon-btn{
    grid-column:1!important;
    justify-self:start!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid #efd8de!important;
    border-radius:50%!important;
    background:#fff!important;
    color:#2e2729!important;
    font-size:26px!important;
    text-decoration:none!important;
    box-shadow:none!important;
  }

  .site-header .product-brand-wordmark{
    grid-column:2!important;
    justify-self:center!important;
    min-width:130px!important;
  }

  .site-header .product-brand-wordmark strong{
    font-size:43px!important;
    letter-spacing:-1.5px!important;
  }

  .site-header .product-brand-wordmark small{
    margin-top:9px!important;
    font-size:9px!important;
    letter-spacing:5px!important;
  }

  /* soft divider under the centered wordmark, matching the approved visual */
  .site-header .product-brand-wordmark::after{
    content:"♡";
    position:absolute;
    left:24px;
    right:24px;
    bottom:10px;
    height:1px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#f39aae;
    font-size:15px;
    line-height:1px;
    background:linear-gradient(90deg,#f3a1b1 0 47%,transparent 47% 53%,#f3a1b1 53% 100%);
  }

  /* the former contact block must never reappear on mobile */
  .site-header .contact{display:none!important}
}

@media (max-width:390px){
  .site-header .product-brand-header{
    min-height:116px!important;
    grid-template-columns:52px 1fr 52px!important;
    padding:14px 18px!important;
  }
  .site-header .product-brand-header .icon-btn{
    width:43px!important;
    height:43px!important;
    font-size:24px!important;
  }
  .site-header .product-brand-wordmark strong{
    font-size:39px!important;
  }
  .site-header .product-brand-wordmark small{
    font-size:8px!important;
    letter-spacing:4.5px!important;
  }
}


/* V20.14.90 — Product brand/back row must scroll with page, not remain sticky. */
@media (max-width:820px){
  .site-header{
    position:relative!important;
    top:auto!important;
    z-index:20!important;
  }
}


/* V20.14.91 — FINAL: Product brand/back bar stays fixed at the top while product content scrolls. */
@media (max-width:820px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:950!important;
    background:#fff!important;
  }

  .site-header .product-brand-header{
    background:#fff!important;
    box-shadow:0 8px 20px rgba(69,42,50,.05)!important;
  }
}


/* V20.14.92 — iOS/mobile double sticky fix.
   Root cause: .mobile-shell and .site-header were both sticky at top:0;
   the product brand header had the higher z-index and covered the main mobile toolbar. */
@media (max-width:820px){
  body{
    --elifli-mobile-toolbar-h:70px;
  }

  .mobile-shell{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    z-index:1100!important;
    background:#fff!important;
  }

  .site-header{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:var(--elifli-mobile-toolbar-h)!important;
    z-index:1000!important;
    background:#fff!important;
  }

  .site-header .product-brand-header{
    background:#fff!important;
  }
}

@media (max-width:390px){
  body{
    --elifli-mobile-toolbar-h:70px;
  }
}


/* V20.14.93 — HARD FIX
   On iOS Safari sticky can scroll out with the page. Use FIXED positioning for both
   mobile top toolbar and product brand/back bar, then reserve their space in content. */
@media (max-width:820px){
  body{
    --elifli-mobile-toolbar-h:70px;
    --elifli-product-brand-h:118px;
  }

  .mobile-shell{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--elifli-mobile-toolbar-h)!important;
    min-height:var(--elifli-mobile-toolbar-h)!important;
    box-sizing:border-box!important;
    z-index:2000!important;
    background:#fff!important;
    margin:0!important;
  }

  .site-header{
    position:fixed!important;
    top:var(--elifli-mobile-toolbar-h)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--elifli-product-brand-h)!important;
    min-height:var(--elifli-product-brand-h)!important;
    z-index:1900!important;
    background:#fff!important;
    margin:0!important;
    box-shadow:0 6px 18px rgba(69,42,50,.05)!important;
  }

  .site-header .product-brand-header{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    box-sizing:border-box!important;
    padding:12px 22px 20px!important;
    background:#fff!important;
  }

  /* Since both bars are fixed and removed from document flow, reserve exact space. */
  main.product-page{
    margin-top:calc(var(--elifli-mobile-toolbar-h) + var(--elifli-product-brand-h))!important;
  }

  /* Drawer must remain above all fixed header layers. */
  .mobile-drawer{
    z-index:3000!important;
  }
}

@media (max-width:390px){
  body{
    --elifli-mobile-toolbar-h:70px;
    --elifli-product-brand-h:112px;
  }

  .site-header .product-brand-header{
    padding:10px 18px 18px!important;
  }
}