/* Mobile homepage shell, measured against the approved 393 × 860 reference.
   The original form/input remain in place for touch focus and search behavior. */
/* Outrank the shared header-action icon rule outside the mobile breakpoint. */
.home-page .header .mobile-header-icon{display:none}

@media(max-width:899px){
  .home-page{padding-bottom:calc(62px + env(safe-area-inset-bottom));background:#f5f6fa}
  .home-page>.topline{display:block!important;height:30px;background:#252525}
  .home-page .topin{width:100%;height:30px;padding:0 20px;gap:0}
  .home-page .topline-left{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
  .home-page .top-city{display:flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:#ddd;font:700 12px/20px Manrope,Arial,sans-serif;cursor:pointer}
  .home-page .top-city i:first-child,.home-page .top-phone i{display:none}
  .home-page .top-city i:last-child{font-size:9px}
  .home-page .top-phone{margin:0;color:#ddd;font-size:12px;line-height:20px;white-space:nowrap}
  .home-page .topline .callback-link,.home-page .topline .top-socials,.home-page .topline-menu{display:none}

  .home-page>.header{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) 32px 32px!important;
    grid-template-rows:50px 40px!important;
    grid-template-areas:"catalog brand language cart" "search search search search"!important;
    align-items:center;
    gap:10px 12px!important;
    width:100%!important;
    height:110px!important;
    min-height:110px!important;
    margin:0!important;
    padding:0 20px 10px!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(to bottom,#cf0c2c 0 50px,#f5f6fa 50px 100%)!important;
    box-shadow:none!important;
    clip-path:none!important;
  }
  /* The desktop scrolled state uses a full-viewport spread shadow. This mobile
     header already spans the viewport and must not paint over page content. */
  body.home-page>.header,
  body.home-page>.header.is-scrolled,
  body.home-page>.header.has-search-open{box-shadow:none!important}
  .home-page .header .brand-logo{grid-area:brand;display:flex!important;align-items:center!important;width:100%!important;max-width:144px;height:44px!important;margin:0;overflow:visible!important}
  .home-page .header .brand-logo img{width:100%!important;height:44px!important;max-height:44px!important;object-fit:cover;object-position:center;transform:none!important}
  .home-page .header .catalog-btn{grid-area:catalog;display:flex!important;align-items:center;justify-content:flex-start;width:32px!important;min-width:32px!important;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important}
  .home-page .header .catalog-btn svg,.home-page .header .catalog-btn span,
  .home-page .header .account-action,.home-page .header .orders-action{display:none!important}
  .home-page .header .mobile-header-icon{display:block;font-size:26px;line-height:1}
  .home-page .header #cartButton{grid-area:cart;display:flex;align-items:center;justify-content:center;width:32px!important;min-width:32px!important;height:44px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important}
  .home-page .header #cartButton svg,.home-page .header #cartButton>span{display:none!important}
  .home-page .header #cartButton small{top:0;right:-6px;min-width:16px;padding:2px 4px;font-size:9px}
  .home-page .header .language-select{grid-area:language;width:32px!important;min-width:32px!important;height:44px!important;border:0!important;border-radius:0!important;background:transparent!important}
  .home-page .header .language-option{width:32px!important;height:44px!important;font-size:11px!important}
  .home-page .header .language-icon{display:none!important}

  .home-page .header .search{
    grid-area:search;order:initial!important;position:relative;display:flex;align-items:center;
    height:40px!important;min-height:40px!important;min-width:0!important;
    flex-basis:auto!important;margin:0!important;padding:0!important;
    border:1px solid #dcdde1!important;border-radius:10px!important;background:#fff!important;
  }
  .home-page .header .search:not(.is-open){width:100%!important}
  .home-page .header .search input{height:38px!important;min-height:0!important;width:100%;padding:0 34px 0 2px!important;font-size:16px!important;line-height:normal;font-weight:400;letter-spacing:0;color:#252525!important}
  .home-page .header .search input::placeholder{color:#858d9a;opacity:1}
  .home-page .header .search>button[type=submit]{display:grid;place-items:center;flex:none;width:40px!important;height:38px!important;margin:0!important;padding:0!important;border:0;border-radius:9px;background:transparent!important;color:#888!important;box-shadow:none!important}
  .home-page .header .search:not(.is-open)>button[type=submit]{display:none}
  .home-page .header .search:not(.is-open) input{padding-left:40px!important}
  .home-page .header .search .mobile-search-leading{position:absolute;left:12px;top:9px;font-size:21px;color:#888;pointer-events:none}
  .home-page .header .search.is-open .mobile-search-leading{display:none}
  .home-page .header .search>button[type=submit] .mobile-header-icon{font-size:21px}
  .home-page .header .desktop-search-icon{display:none}
  .home-page .header .search .site-search-clear{top:2px;right:4px}
  .home-page .header .search.is-open .site-search-clear{right:42px}
  .home-page .header .search.is-open>button[type=submit]{width:36px!important;height:34px!important;margin-right:2px!important;border-radius:8px;background:#252525!important;color:#fff!important}
  .home-page .header .search.is-open input{padding-left:8px!important}
  /* Keep the target under the finger through pointerdown, focus and pointerup. */
  .home-page .header .search.is-open{position:relative!important;inset:auto!important;width:100%!important;box-shadow:none!important}
  .home-page .site-search-panel{max-height:calc(100dvh - 210px - env(safe-area-inset-bottom))}
  .home-page .header .search:focus-within{border-color:#b30928!important;box-shadow:0 0 0 2px #cf0c2c1a}

  .home-page>.storefront-bottom-nav{
    position:fixed;z-index:80;inset:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    height:calc(62px + env(safe-area-inset-bottom));
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top:1px solid #e6e7e9;background:#fff;box-shadow:none;backdrop-filter:none;
  }
  .home-page .storefront-bottom-nav a,.home-page .storefront-bottom-nav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:0;min-height:48px;gap:5px;margin:0;padding:0;border:0;border-radius:0;background:transparent;
    color:#7c8795;font:600 10px/13px Manrope,Arial,sans-serif;text-decoration:none;cursor:pointer;
  }
  .home-page .storefront-bottom-nav i{font-size:25px;line-height:25px}
  .home-page .storefront-bottom-nav .active{color:#cf0c2c;font-weight:700}
  .home-page .storefront-bottom-nav small{position:absolute;top:3px;left:calc(50% + 7px);min-width:17px;padding:2px 4px;border-radius:5px;background:#cf0c2c;color:#fff;font:700 9px/1 Manrope,Arial,sans-serif}
  .home-page .header button:focus-visible,.home-page .topline button:focus-visible,
  .home-page .storefront-bottom-nav :focus-visible{outline:2px solid currentColor;outline-offset:2px}
}