/* ESNOVI V27.5.51 — Contabo mobile storefront integration
   Public storefront only; preserve premium shopping tabs & commerce JS.
   Loaded AFTER v27550 CSS and any old premium page stylesheet. */
@media (max-width:820px),(pointer:coarse) and (max-width:1024px){
  html{max-width:100%;overflow-x:clip;scroll-padding-top:70px;}
  body.v274MobileApp{overflow-x:clip!important;background:#f7f8fa!important;}
  /* A single five-tab bar: keep the already deployed shopping-focused one. */
  body.v274MobileApp:has(.appTabBar) .v274BottomNav{display:none!important;}
  body.v274MobileApp:not(:has(.appTabBar)) .v274BottomNav{display:grid!important;}
  body.v274MobileApp .appTabBar{display:flex!important;z-index:1550!important;}
  body.v274MobileApp .marketHeader,body.v274MobileApp .topbar,
  body.v274MobileApp .departmentNav{display:none!important;}
  body.v274MobileApp .v274AppBar{background:#fff!important;z-index:1510!important;}
  body.v274MobileApp .v274AppBar .v274BackBtn[hidden],
  body.v274MobileApp .v274CartBtn [data-v274-cart-badge][hidden]{display:none!important;}
  body.v274MobileApp .v274SearchOverlay{z-index:1800!important;}
  body.v274MobileApp .v274ProductDock{bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;z-index:1490!important;}
  body.v274MobileApp .v274InstallCard{max-width:calc(100% - 24px);}
  /* Preserve all service/policy links but reduce the excessive desktop footer. */
  body.v274MobileApp .footer{padding:17px 0 calc(20px + env(safe-area-inset-bottom,0px))!important;margin-top:12px!important;}
  body.v274MobileApp .footer .footGrid{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;gap:12px 8px!important;
  }
  body.v274MobileApp .footer .footGrid>div{min-width:0!important;}
  body.v274MobileApp .footer .footGrid>div:first-child{
    grid-column:1/-1!important;display:flex!important;align-items:center!important;
    justify-content:center!important;gap:10px!important;text-align:center!important;
    padding-bottom:8px!important;border-bottom:1px solid #ffffff24!important;
  }
  body.v274MobileApp .footer .footGrid>div:first-child .brand{font-size:17px!important;letter-spacing:.07em!important;margin:0!important;}
  body.v274MobileApp .footer .footGrid>div:first-child p,
  body.v274MobileApp .footer .footGrid>div:first-child .muted{display:none!important;}
  body.v274MobileApp .footer .footGrid h4{font-size:11px!important;margin:2px 0 9px!important;}
  body.v274MobileApp .footer .footGrid a{display:block!important;font-size:10px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere;padding:4px 0!important;}
  body.v274MobileApp .footer .legal{margin-top:12px!important;padding-top:9px!important;font-size:10px!important;line-height:1.4!important;}
  body.v274MobileApp .aiFab,body.v274MobileApp #esnoviAiFab{bottom:calc(79px + env(safe-area-inset-bottom,0px))!important;right:12px!important;}
  /* Make the editorial homepage behave as a phone-first feed. */
  body.v274MobileApp.editorialHome{background:#f7f8fa!important;}
  body.v274MobileApp.editorialHome .wrap{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important;}
  body.v274MobileApp.editorialHome main{padding-top:0!important;}
  body.v274MobileApp.editorialHome .editionLine{padding:13px 1px!important;gap:6px!important;}
  body.v274MobileApp.editorialHome .editionLine>span:first-child{font-size:10px!important;}
  body.v274MobileApp.editorialHome .editorialHero{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    overflow:hidden!important;border-radius:18px!important;background:#eee9e0!important;
  }
  body.v274MobileApp.editorialHome .editorialCopy{padding:22px 18px!important;min-width:0;}
  body.v274MobileApp.editorialHome .editorialCopy h1{font-size:clamp(30px,9vw,42px)!important;line-height:1.02!important;}
  body.v274MobileApp.editorialHome .editorialCopy>p:not(.eyebrow){font-size:13px!important;line-height:1.48!important;margin:10px 0 14px!important;}
  body.v274MobileApp.editorialHome .editorialActions{flex-wrap:wrap;gap:12px!important;}
  body.v274MobileApp.editorialHome .editorialActions a{min-height:44px;}
  body.v274MobileApp.editorialHome .editorialPhoto{min-height:205px!important;max-height:255px!important;}
  body.v274MobileApp.editorialHome .departmentSection{padding-top:19px!important;}
  body.v274MobileApp.editorialHome .departmentGrid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;border:0!important;background:transparent!important;
  }
  body.v274MobileApp.editorialHome .departmentGrid>a{
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    min-height:88px!important;min-width:0!important;padding:13px!important;
    border:1px solid #e5e3dd!important;border-radius:14px!important;background:#fff!important;
  }
  body.v274MobileApp.editorialHome .departmentNumber{width:auto!important;margin-bottom:4px!important;}
  body.v274MobileApp.editorialHome .departmentGrid strong{font-size:12px!important;}
  body.v274MobileApp.editorialHome .editHighlights{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;}
  body.v274MobileApp.editorialHome .highlight{min-width:0!important;border-radius:15px!important;padding:15px!important;}
  body.v274MobileApp.editorialHome :is(.grid,.productGrid,.productsGrid){
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  }
  body.v274MobileApp.editorialHome :is(.card,.clickableProductCard){min-width:0!important;border-radius:15px!important;}
  body.v274MobileApp.editorialHome .card h3{font-size:12px!important;min-height:0!important;overflow-wrap:anywhere;}
  body.v274MobileApp.editorialHome .card .now{font-size:17px!important;}
  body.v274MobileApp.editorialHome .serviceStrip{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;}
  body.v274MobileApp.editorialHome .sectionHead h2{font-size:23px!important;}
  body.v274MobileApp.editorialHome .categoryShelf .grid{overflow:visible!important;}
  body.v274MobileApp.editorialHome .footer{background:#17191b!important;}
}
@media(max-width:350px){
  body.v274MobileApp .footer .footGrid{gap:6px!important;}
  body.v274MobileApp .footer .footGrid a{font-size:9px!important;}
}
@media(prefers-reduced-motion:reduce){
 body.v274MobileApp .appTabBar *{transition:none!important;}
}

/* V27.5.52 — equal-width thumb navigation: no collapsed tab labels. */
@media(max-width:820px),(pointer:coarse) and (max-width:1024px){
 body.v274MobileApp .appTabBar{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:center!important;justify-items:stretch!important;
  width:100%!important;max-width:100%!important;
  gap:0!important;min-height:calc(66px + env(safe-area-inset-bottom,0px))!important;
  padding:4px max(6px,env(safe-area-inset-left,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px))!important;
 }
 body.v274MobileApp .appTabBar a{
  box-sizing:border-box!important;position:relative!important;min-width:0!important;
  width:100%!important;max-width:100%!important;min-height:52px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:4px!important;
  margin:0!important;padding:4px 1px!important;
  letter-spacing:0!important;line-height:1.1!important;text-align:center!important;
 }
 body.v274MobileApp .appTabBar a svg{
  display:block!important;position:static!important;
  width:22px!important;height:22px!important;
  flex:0 0 22px!important;transform:none!important;margin:0 auto!important;
 }
 body.v274MobileApp .appTabBar a span{
  display:block!important;position:static!important;left:auto!important;top:auto!important;
  flex:0 0 auto!important;transform:none!important;
  width:100%!important;max-width:100%!important;margin:0!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;
  font-size:10px!important;font-weight:750!important;letter-spacing:0!important;
  line-height:1.1!important;text-transform:none!important;text-align:center!important;
 }
}
@media(max-width:350px){
 body.v274MobileApp .appTabBar a span{font-size:9px!important;}
}

/* Final V27.5.52 decision: use the proven accessible 5-tab controller on all phones.
   The legacy premium tab component has visually overlapping labels on iOS.
   Its destinations remain accessible via ESNOVI's search, closet and cart icon. */
@media(max-width:820px),(pointer:coarse) and (max-width:1024px){
  body.v274MobileApp .appTabBar,
  body.v274MobileApp:has(.appTabBar) .appTabBar{display:none!important;}
  body.v274MobileApp .v274BottomNav,
  body.v274MobileApp:has(.appTabBar) .v274BottomNav{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    z-index:1560!important;
  }
}


/* V27.5.53 — compact, safe-area aware iPhone app header.
   Keep the native status bar/Dynamic Island free; remove redundant space
   immediately below it. No checkout/header override on standalone forms. */
@media (max-width:820px), (pointer:coarse) and (max-width:1024px) {
  body.v274MobileApp:not(.v27550NoShell) {
    --v274-appbar:48px;
    padding-top:calc(48px + env(safe-area-inset-top,0px))!important;
    scroll-padding-top:calc(48px + env(safe-area-inset-top,0px));
  }
  body.v274MobileApp #v274MobileShell .v274AppBar {
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    height:calc(48px + env(safe-area-inset-top,0px))!important;
    min-height:0!important;
    padding-top:max(0px,calc(env(safe-area-inset-top,0px) - 8px))!important;
    padding-bottom:0!important;
    margin:0!important;
    align-items:center!important;
  }
  body.v274MobileApp #v274MobileShell .v274Wordmark {
    font-size:18px!important;
    line-height:1!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  body.v274MobileApp #v274MobileShell .v274IconBtn {
    min-height:42px!important;
    height:42px!important;
    width:42px!important;
    padding:9px!important;
    flex:0 0 42px!important;
  }
  body.v274MobileApp #v274MobileShell .v274AppBarActions {
    align-items:center!important;
  }
}


/* V27.5.54: Fix iOS standalone's double-counted top inset.
   Keep a minimum 48px header for browsers without a safe-area inset.
   On Home Screen PWAs reserve part of the status-bar inset only once. */
@media (max-width:820px), (pointer:coarse) and (max-width:1024px) {
  @media (display-mode: standalone) {
    html {
      --esnovi-app-safe-top: max(0px, calc(env(safe-area-inset-top, 0px) - 25px));
      scroll-padding-top: calc(48px + var(--esnovi-app-safe-top))!important;
    }
    body.v274MobileApp:not(.v27550NoShell) {
      --v274-appbar:48px;
      padding-top:calc(48px + var(--esnovi-app-safe-top))!important;
    }
    body.v274MobileApp #v274MobileShell .v274AppBar {
      top:0!important;
      height:calc(48px + var(--esnovi-app-safe-top))!important;
      min-height:0!important;
      box-sizing:border-box!important;
      padding-top:var(--esnovi-app-safe-top)!important;
      padding-bottom:0!important;
      margin-top:0!important;
    }
    body.v274MobileApp #v274MobileShell .v274Wordmark,
    body.v274MobileApp #v274MobileShell .v274AppBarActions {
      align-self:center!important;
    }
  }
}
/* iOS also reports an installed web app via navigator.standalone.
   JS applies this class only in that situation; no regular Safari change. */
@media (max-width:820px), (pointer:coarse) and (max-width:1024px) {
  html.esnoviIosInstalled {
    --esnovi-app-safe-top:max(0px,calc(env(safe-area-inset-top,0px) - 25px));
    scroll-padding-top:calc(48px + var(--esnovi-app-safe-top))!important;
  }
  html.esnoviIosInstalled body.v274MobileApp:not(.v27550NoShell){
    padding-top:calc(48px + var(--esnovi-app-safe-top))!important;
  }
  html.esnoviIosInstalled body.v274MobileApp #v274MobileShell .v274AppBar {
    height:calc(48px + var(--esnovi-app-safe-top))!important;
    padding-top:var(--esnovi-app-safe-top)!important;
  }
}