/* TrendishShop v189m — MOBILE ONLY delta.
   Desktop (min-width: 901px) is intentionally untouched. */

/* Extra menu markup exists only to support the mobile home layout; never show it on desktop. */
.home-after-hero-nav.mobile-home-menu-v189{display:none;}

/* ============================================================
   v189 — requested mobile home composition
   1) logo left, search centered, actions right
   2) cart separated from contact icon
   3) home slider fills phone width
   4) home menu moves below slider and shows all items in 2 rows
   Desktop remains unchanged except the intended home menu after hero.
   ============================================================ */
@media (max-width:900px){
  /* Header: left logo | center search | right actions */
  .site-header .header-main.header-standard-layout,
  body.home-overlay-layout .site-header.is-home-overlay .header-main.header-standard-layout{
    direction:ltr!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-areas:"logo search actions"!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    min-height:58px!important;
    column-gap:8px!important;
    row-gap:0!important;
    margin:0 auto!important;
    padding:8px 0!important;
  }

  .site-header .header-standard-logo,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo{
    grid-area:logo!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
    width:auto!important;
  }
  .site-header .header-standard-logo .site-logo-visual,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual{
    width:auto!important;
    max-width:78px!important;
  }
  .site-header .header-standard-logo .site-logo-visual img,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual img{
    width:auto!important;
    max-width:78px!important;
    height:32px!important;
    max-height:32px!important;
    object-fit:contain!important;
  }

  .site-header .header-standard-search,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-search{
    grid-area:search!important;
    justify-self:center!important;
    align-self:center!important;
    width:min(100%,190px)!important;
    max-width:190px!important;
    min-width:0!important;
    min-height:36px!important;
    margin:0!important;
  }

  .site-header .header-standard-actions,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-actions{
    grid-area:actions!important;
    direction:rtl!important;
    justify-self:end!important;
    justify-content:flex-start!important;
    align-self:center!important;
    gap:3px!important;
    min-width:0!important;
    margin:0!important;
  }
  .site-header .profile-login-link,
  .site-header .profile-menu-trigger,
  .site-header .contact-menu-trigger,
  .site-header .cart-link-minimal{
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
  }
  .site-header .header-cart-preview-v175{
    position:relative!important;
    margin-left:5px!important;
    flex:0 0 auto!important;
  }
  .site-header .cart-link-minimal{
    position:relative!important;
    z-index:2!important;
    transform:translateX(-1px)!important;
  }
  .site-header .cart-link-count{
    position:absolute!important;
    top:-4px!important;
    right:-4px!important;
    z-index:3!important;
  }

  /* On home, the header menu disappears; the real menu is rendered after slider. */
  body.home-overlay-layout .site-header.is-home-overlay .home-mobile-nav{
    display:none!important;
  }

  /* Full-width home slider on phones/tablets. */
  body.home-overlay-layout .hero.hero-home-standard{
    display:block!important;
    position:relative!important;
    width:100vw!important;
    max-width:100vw!important;
    height:clamp(170px,50vw,330px)!important;
    min-height:170px!important;
    max-height:330px!important;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    overflow:hidden!important;
    background:#f5f3f4!important;
  }
  body.home-overlay-layout .hero.hero-home-standard .slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    background:#f5f3f4!important;
  }
  body.home-overlay-layout .hero.hero-home-standard .slide.active{
    display:block!important;
  }
  body.home-overlay-layout .hero.hero-home-standard .slide:not(.active){
    display:block!important;
    pointer-events:none!important;
  }
  body.home-overlay-layout .hero.hero-home-standard .slide img{
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
  }
  body.home-overlay-layout .hero.hero-home-standard .slide::after,
  body.home-overlay-layout .hero.hero-home-standard .slide-content{
    display:none!important;
  }

  /* The home menu is immediately below the slider and fully visible. */
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    z-index:25!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
    border-top:0!important;
    border-bottom:1px solid #eee7eb!important;
    box-shadow:0 4px 14px rgba(34,21,28,.045)!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .nav-container{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:5px 6px 6px!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root{
    display:grid!important;
    direction:rtl!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-rows:minmax(38px,auto)!important;
    gap:2px 3px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    align-items:stretch!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root>.menu-item{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root>.menu-item>a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:5px 2px!important;
    color:#2d292d!important;
    background:transparent!important;
    font-size:clamp(9px,2.65vw,11.5px)!important;
    font-weight:700!important;
    line-height:1.35!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-shadow:none!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root>.menu-item>.submenu-toggle{
    position:absolute!important;
    left:0!important;
    bottom:1px!important;
    min-width:14px!important;
    min-height:14px!important;
    width:14px!important;
    height:14px!important;
    padding:0!important;
    font-size:9px!important;
    color:#777!important;
    background:transparent!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root>.menu-item>.submenu{
    position:fixed!important;
    z-index:140!important;
    top:78px!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    max-height:65dvh!important;
    overflow:auto!important;
    padding:8px!important;
    border:1px solid #ece7eb!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 18px 45px rgba(35,20,28,.14)!important;
  }
}

@media (max-width:480px){
  .site-header .header-main.header-standard-layout,
  body.home-overlay-layout .site-header.is-home-overlay .header-main.header-standard-layout{
    grid-template-columns:70px minmax(0,1fr) 101px!important;
    width:calc(100% - 14px)!important;
    column-gap:5px!important;
    min-height:54px!important;
    padding:6px 0!important;
  }
  .site-header .header-standard-logo .site-logo-visual,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual,
  .site-header .header-standard-logo .site-logo-visual img,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual img{
    max-width:68px!important;
  }
  .site-header .header-standard-logo .site-logo-visual img,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual img{
    height:29px!important;
    max-height:29px!important;
  }
  .site-header .header-standard-search,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-search{
    width:100%!important;
    max-width:160px!important;
    min-height:33px!important;
  }
  .site-header .header-standard-search input,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-search.search-minimal input{
    height:33px!important;
    padding:6px 7px!important;
    font-size:10.5px!important;
  }
  .site-header .header-standard-search button,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-search.search-minimal button{
    width:29px!important;
    min-width:29px!important;
    height:33px!important;
    min-height:33px!important;
  }
  body.home-overlay-layout .hero.hero-home-standard{
    height:clamp(155px,52vw,230px)!important;
    min-height:155px!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .nav-container{
    padding:4px 3px 5px!important;
  }
}

@media (max-width:340px){
  .site-header .header-main.header-standard-layout,
  body.home-overlay-layout .site-header.is-home-overlay .header-main.header-standard-layout{
    grid-template-columns:58px minmax(0,1fr) 96px!important;
    width:calc(100% - 10px)!important;
    column-gap:3px!important;
  }
  .site-header .header-standard-logo .site-logo-visual,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual,
  .site-header .header-standard-logo .site-logo-visual img,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual img{
    max-width:56px!important;
  }
  .site-header .header-standard-search input,
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-search.search-minimal input{
    font-size:9.5px!important;
  }
  body.home-overlay-layout .home-after-hero-nav.mobile-home-menu-v189 .menu-root>.menu-item>a{
    font-size:8.5px!important;
    padding-inline:1px!important;
  }
}

/* v189 visibility safeguard: home overlay used to force the logo white. */
@media (max-width:900px){
  body.home-overlay-layout .site-header.is-home-overlay .header-standard-logo .site-logo-visual img{
    opacity:1!important;
    filter:none!important;
  }
}