/* ESNOVI V27.4 — Mobile App Experience */
:root{--v274-safe-top:env(safe-area-inset-top,0px);--v274-safe-bottom:env(safe-area-inset-bottom,0px);--v274-appbar:58px;--v274-bottomnav:68px}
#v274MobileShell{display:none}
.v274FilterHead,.v274FilterButton,.v274ProductDock,.v274InstallCard{display:none}
html.v274OverlayOpen,html.v274OverlayOpen body{overflow:hidden!important}

@media(max-width:820px),(pointer:coarse) and (max-width:1024px){
  body.v274MobileApp{background:#f6f7f8!important;padding-top:calc(var(--v274-appbar) + var(--v274-safe-top))!important;padding-bottom:calc(var(--v274-bottomnav) + var(--v274-safe-bottom) + 12px)!important;min-height:100dvh;-webkit-tap-highlight-color:transparent}
  body.v274MobileApp #v274MobileShell{display:block}
  body.v274MobileApp .topbar,
  body.v274MobileApp .marketHeader,
  body.v274MobileApp header.header,
  body.v274MobileApp .siteHeader,
  body.v274MobileApp .headerin{display:none!important}
  body.v274MobileApp main{padding-top:0!important}
  body.v274MobileApp .wrap{max-width:none!important;width:100%!important;padding-left:14px!important;padding-right:14px!important}
  body.v274MobileApp a,body.v274MobileApp button{touch-action:manipulation}
  body.v274MobileApp input,body.v274MobileApp select,body.v274MobileApp textarea{font-size:16px!important}
  body.v274MobileApp .btn{min-height:46px;border-radius:14px!important}

  .v274AppBar{position:fixed;z-index:1400;left:0;right:0;top:0;height:calc(var(--v274-appbar) + var(--v274-safe-top));padding:var(--v274-safe-top) 12px 0;display:grid;grid-template-columns:42px 1fr auto;align-items:center;background:#ffffffeb;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid #eceef0}
  .v274Wordmark{justify-self:center;text-decoration:none;color:#151719;font-weight:950;font-size:18px;letter-spacing:.14em}
  .v274AppBarActions{display:flex;align-items:center;gap:2px}
  .v274IconBtn{position:relative;width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:#17191b;border-radius:12px;text-decoration:none;padding:9px}
  .v274IconBtn:active{background:#f0f2f3}
  .v274IconBtn svg{width:23px;height:23px}
  .v274BackBtn{justify-self:start}
  .v274CartBtn [data-v274-cart-badge]{position:absolute;right:2px;top:2px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#17191b;color:white;font-size:9px;font-weight:850;border:2px solid white}

  .v274BottomNav{position:fixed;z-index:1400;left:0;right:0;bottom:0;min-height:calc(var(--v274-bottomnav) + var(--v274-safe-bottom));padding:7px 8px var(--v274-safe-bottom);display:grid;grid-template-columns:repeat(5,1fr);align-items:start;background:#ffffffef;backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-top:1px solid #e7e9eb;box-shadow:0 -10px 30px #00000008}
  .v274BottomNav a{min-width:0;display:grid;justify-items:center;gap:2px;padding:3px 2px 0;text-decoration:none;color:#7a7f84;font-size:10px;font-weight:750;line-height:1}
  .v274BottomNav a svg{width:23px;height:23px}
  .v274BottomNav a.active{color:#151719}
  .v274BottomNav a.active span{font-weight:900}

  .v274SearchOverlay{position:fixed;z-index:1700;inset:0;display:block;background:#f8f9fa;transform:translateY(100%);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease;padding-top:var(--v274-safe-top)}
  .v274SearchOverlay.open{transform:none;opacity:1;pointer-events:auto}
  .v274SearchTop{height:64px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:6px;padding:8px 12px;background:#fff;border-bottom:1px solid #eceeef}
  .v274SearchTop form{height:46px;display:grid;grid-template-columns:24px 1fr 34px;align-items:center;gap:6px;background:#f1f3f4;border-radius:15px;padding:0 8px 0 12px}
  .v274SearchTop form>svg{width:20px;height:20px;color:#6b7075}
  .v274SearchTop input{width:100%;border:0!important;background:transparent!important;outline:0!important;padding:0!important;height:44px!important;font-size:16px!important}
  .v274ClearSearch{width:32px;height:32px;border:0;background:transparent;padding:7px;color:#757a7f}
  .v274ClearSearch svg{width:18px;height:18px}
  .v274SearchContent{padding:26px 18px}
  .v274SectionLabel{margin:0 0 12px;font-size:11px;font-weight:900;letter-spacing:.15em;color:#85898d}
  .v274QuickSearch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .v274QuickSearch a{display:flex;align-items:center;min-height:74px;padding:16px;border-radius:18px;background:#fff;border:1px solid #e7e9eb;text-decoration:none;color:#17191b;font-weight:850;box-shadow:0 8px 24px #00000005}
  .v274SearchEverything{margin-top:12px;min-height:58px;padding:0 16px;border-radius:16px;background:#17191b;color:white;text-decoration:none;display:flex;align-items:center;justify-content:space-between;font-weight:850}

  /* Home behaves like a native mobile feed rather than a squeezed desktop grid. */
  body.v274MobileApp.v26112Home .wrap{padding-left:12px!important;padding-right:12px!important}
  body.v274MobileApp .homePromoHero{margin-top:10px!important}
  body.v274MobileApp .promoViewport,body.v274MobileApp .promoSlide{min-height:228px!important;border-radius:18px!important}
  body.v274MobileApp .promoSlide{padding:24px 20px 42px!important;grid-template-columns:1fr!important}
  body.v274MobileApp .promoSlide h1{font-size:34px!important;line-height:1!important;margin:8px 0 10px!important}
  body.v274MobileApp .promoSlide p{font-size:14px!important;line-height:1.4!important;margin:0 0 16px!important;max-width:82%!important}
  body.v274MobileApp .promoCta{padding:9px 13px!important;font-size:12px!important}
  body.v274MobileApp .promoArt,body.v274MobileApp .promoMedia{right:-34px!important;bottom:-48px!important;width:150px!important;height:150px!important;opacity:.22!important}
  body.v274MobileApp .promoDots{bottom:10px!important}
  body.v274MobileApp .promoArrow{display:none!important}

  body.v274MobileApp .v26112Hero{display:block!important;padding-top:10px!important}
  body.v274MobileApp .v26112HeroCopy{min-height:auto!important;border-radius:18px!important;padding:26px 20px!important}
  body.v274MobileApp .v26112HeroCopy h1{font-size:39px!important}
  body.v274MobileApp .v26112HeroCopy>p:not(.v26112Kicker){font-size:14px!important;margin-top:16px!important}
  body.v274MobileApp .v26112HeroProducts{display:none!important}
  body.v274MobileApp .v26112HeroPromises{display:none!important}
  body.v274MobileApp .v26112HeroActions{margin-top:20px!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  body.v274MobileApp .v26112BenefitBar{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:8px!important;background:transparent!important;border:0!important;border-radius:0!important;padding-bottom:4px}
  body.v274MobileApp .v26112BenefitBar a{flex:0 0 78%;min-height:70px;border:1px solid #e5e7e9;border-radius:15px;scroll-snap-align:start}
  body.v274MobileApp .v26112MosaicSection,body.v274MobileApp .v26112ProductRail,body.v274MobileApp .v26112Discovery,body.v274MobileApp .v26112MoreSection{padding-top:22px!important}
  body.v274MobileApp .v26112MosaicGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
  body.v274MobileApp .v26112QuadCard{padding:12px!important;border-radius:17px!important}
  body.v274MobileApp .v26112QuadHead h3{font-size:16px!important}
  body.v274MobileApp .v26112QuadHead span{font-size:10px!important}
  body.v274MobileApp .v26112QuadItems{gap:6px!important}
  body.v274MobileApp .v26112MiniProduct{grid-template-rows:minmax(90px,1fr) auto!important}
  body.v274MobileApp .v26112MiniImage{border-radius:10px!important}
  body.v274MobileApp .v26112MiniMeta b{font-size:10px!important}
  body.v274MobileApp .v26112QuadFoot{font-size:11px!important;margin-top:10px!important}
  body.v274MobileApp .v26112SectionHead{margin-bottom:11px!important}
  body.v274MobileApp .v26112SectionHead h2{font-size:23px!important}
  body.v274MobileApp .v26112ProductRail .grid,
  body.v274MobileApp .v26112Discovery>.grid,
  body.v274MobileApp .v26112Shelf .grid,
  body.v274MobileApp .grid{scrollbar-width:none}
  body.v274MobileApp .v26112ProductRail .grid::-webkit-scrollbar,
  body.v274MobileApp .v26112Discovery>.grid::-webkit-scrollbar,
  body.v274MobileApp .v26112Shelf .grid::-webkit-scrollbar{display:none}
  body.v274MobileApp .v26112ProductRail .card,
  body.v274MobileApp .v26112Discovery .card,
  body.v274MobileApp .v26112Shelf .card{flex-basis:44vw!important;border-radius:16px!important}
  body.v274MobileApp .v26112FeatureGrid{display:flex!important;overflow-x:auto!important;gap:10px!important;scroll-snap-type:x mandatory}
  body.v274MobileApp .v26112Feature{flex:0 0 82%;min-height:150px!important;border-radius:18px!important;scroll-snap-align:start}
  body.v274MobileApp .v26112Finder{margin-top:22px!important;border-radius:18px!important;padding:24px 20px!important}

  /* Generic product/catalog cards become thumb-friendly. */
  body.v274MobileApp .productGrid,body.v274MobileApp .productsGrid,body.v274MobileApp .catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.v274MobileApp .card,body.v274MobileApp .productCard{border-radius:16px!important;overflow:hidden}
  body.v274MobileApp .card img,body.v274MobileApp .productCard img{max-height:none}

  /* Search filters behave like a native bottom sheet when the page exposes a filter panel. */
  .v274FilterButton{display:flex;align-items:center;gap:8px;margin:10px 14px 4px auto;min-height:42px;padding:0 14px;border:1px solid #dfe2e5;border-radius:999px;background:white;color:#17191b;font-weight:800}
  .v274FilterButton svg{width:18px;height:18px}
  .v274FilterPanel{position:fixed!important;z-index:1650!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;max-height:82dvh!important;overflow:auto!important;background:white!important;border-radius:24px 24px 0 0!important;padding:0 18px calc(18px + var(--v274-safe-bottom))!important;box-shadow:0 -22px 70px #0003!important;transform:translateY(105%)!important;transition:transform .28s cubic-bezier(.2,.7,.2,1)!important}
  .v274FilterPanel.open{transform:none!important}
  .v274FilterHead{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;min-height:58px;background:#fff;border-bottom:1px solid #eceeef}
  .v274FilterHead strong{font-size:17px}
  .v274FilterHead button{width:38px;height:38px;border:0;background:#f1f3f4;border-radius:12px;padding:9px}
  .v274FilterHead svg{width:20px;height:20px}

  /* Product actions stay reachable like a native commerce app. */
  .v274ProductDock{position:fixed;z-index:1390;left:10px;right:10px;bottom:calc(var(--v274-bottomnav) + var(--v274-safe-bottom) + 8px);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;padding:8px;border-radius:18px;background:#ffffffef;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px #0003;border:1px solid #eceeef}
  .v274ProductDock button{min-height:48px;border-radius:13px;font-weight:900;font-size:14px}
  .v274DockSecondary{background:#fff;border:1px solid #17191b;color:#17191b}
  .v274DockPrimary{background:#17191b;border:1px solid #17191b;color:#fff}

  /* Checkout uses an app-style single column and keeps the final action prominent. */
  body.v274CheckoutPage{padding-bottom:calc(18px + var(--v274-safe-bottom))!important}
  body.v274CheckoutPage .v274BottomNav{display:none!important}
  body.v274CheckoutPage .checkoutGrid,body.v274CheckoutPage .checkout-grid,body.v274CheckoutPage main>.wrap{grid-template-columns:1fr!important}
  body.v274CheckoutPage #checkoutForm,body.v274CheckoutPage .checkoutCard,body.v274CheckoutPage .orderSummary{border-radius:18px!important}
  body.v274CheckoutPage #orderSummary{position:static!important}
  body.v274CheckoutPage #payButton{min-height:52px!important;border-radius:15px!important;font-size:16px!important;font-weight:900!important}

  .v274InstallCard{display:grid;grid-template-columns:1fr auto 28px;gap:10px;align-items:center;margin:10px 12px 0;padding:14px;border-radius:18px;background:#17191b;color:#fff;box-shadow:0 14px 36px #0002}
  .v274InstallCard strong,.v274InstallCard small{display:block}.v274InstallCard small{margin-top:3px;opacity:.72;line-height:1.3}
  .v274InstallCard [data-install]{border:0;border-radius:999px;background:white;color:#17191b;padding:9px 12px;font-weight:900}
  .v274InstallClose{border:0;background:transparent;color:#fff;font-size:20px;opacity:.65}

  @supports(padding:max(0px)){
    .v274AppBar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
    .v274BottomNav{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  }
}

@media(max-width:390px){
  body.v274MobileApp .v26112MosaicGrid{grid-template-columns:1fr!important}
  body.v274MobileApp .v26112ProductRail .card,
  body.v274MobileApp .v26112Discovery .card,
  body.v274MobileApp .v26112Shelf .card{flex-basis:72vw!important}
}

@media(prefers-reduced-motion:reduce){
  .v274SearchOverlay,.v274FilterPanel{transition:none!important}
}