/* Homepage-only mobile composition. Desktop rules remain in style.css. */
@media(max-width:899px){
  .home-page main{padding-top:0;background:#f5f6fa}
  .home-page .promo-showcase{
    display:flex;
    flex-direction:column;
    gap:0;
    width:calc(100% - 40px);
    margin:0 auto;
    padding:0;
  }
  .home-page #promoCarousel{
    --mobile-banner-height:calc((100vw - 40px) * .45625);
    box-sizing:content-box;
    aspect-ratio:auto;
    width:100%;
    height:var(--mobile-banner-height)!important;
    min-height:0;
    margin:0 0 20px;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:10px;
    background:transparent;
    box-shadow:none;
  }
  .home-page #promoCarousel .splide__track{
    height:var(--mobile-banner-height)!important;
    border-radius:10px;
    background:#e9ebee;
  }
  .home-page #promoCarousel .splide__list,
  .home-page #promoCarousel .promo-banner-etari,
  .home-page #promoCarousel .promo-image-only,
  .home-page #promoCarousel .promo-image-only img{
    height:var(--mobile-banner-height)!important;
    min-height:0;
    border-radius:10px;
  }
  .home-page #promoCarousel .promo-image-only img{
    display:block;
    width:100%;
    object-fit:cover!important;
    object-position:center;
  }
  .home-page #promoCarousel .splide__arrows,
  .home-page #dealCarousel .splide__arrows{display:none!important}
  .home-page #promoCarousel .splide__pagination,
  .home-page #dealCarousel .splide__pagination{display:none!important}
  .home-page #promoCarousel .my-slider-progress,
  .home-page #dealCarousel .my-slider-progress{
    display:block;
    right:0;
    bottom:0;
    left:0;
    height:3px;
    overflow:hidden;
    border-radius:0 0 10px 10px;
    background:#dedee2;
  }
  .home-page #promoCarousel:not(.is-initialized) .my-slider-progress,
  .home-page #dealCarousel:not(.is-initialized) .my-slider-progress{visibility:hidden}
  .home-page #promoCarousel .my-slider-progress-bar,
  .home-page #dealCarousel .my-slider-progress-bar{background:var(--red,#cf0a2c)}
  .home-page .mobile-store-shortcuts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:24px 0 40px;
  }
  .home-page .mobile-store-shortcuts a{
    box-sizing:border-box;
    height:96px;
    gap:8px;
    border:0;
    border-radius:10px;
    background:#fff;
    box-shadow:none;
    font-size:16px;
    font-weight:500;
    line-height:16px;
  }
  .home-page .mobile-store-shortcuts i{color:var(--red,#cf0a2c);font-size:23px}
  .home-page #dealCarousel{
    box-sizing:border-box;
    width:100%;
    height:158px;
    min-height:158px!important;
    margin:0 0 20px;
    padding:0!important;
    overflow:hidden;
    border:0;
    border-radius:0 0 10px 10px;
    background:transparent;
    box-shadow:none;
  }
  .home-page #dealCarousel .deal-title{height:18px;justify-content:flex-start;margin:0 0 20px}
  .home-page #dealCarousel .deal-title h2{
    margin:0;
    font-size:18px;
    font-weight:800;
    line-height:18px;
  }
  .home-page #dealCarousel .deal-title:after{content:none}
  .home-page #dealCarousel .splide__track,
  .home-page #dealCarousel .splide__list,
  .home-page #dealCarousel .splide__slide{height:120px!important;min-height:0}
  .home-page #dealCarousel .splide__track{border-radius:10px}
  .home-page #dealCarousel .deal-product-link,
  .home-page #dealCarousel .home-deal-skeleton{
    box-sizing:border-box;
    display:grid!important;
    grid-template-columns:110px minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:100%;
    height:120px!important;
    min-height:0;
    margin:0;
    padding:10px;
    border:0;
    border-radius:10px;
    background:#fff;
  }
  .home-page #dealCarousel .deal-image-placeholder{
    box-sizing:border-box;
    width:110px;
    height:100px!important;
    min-height:0;
    margin:0!important;
    padding:0;
    border-radius:6px;
  }
  .home-page #dealCarousel .deal-image-placeholder img{
    width:100%;
    height:100%;
    max-height:100%;
    object-fit:contain;
  }
  .home-page #dealCarousel .deal-sale-label{display:none}
  /* Keep the original discount available to assistive technology; its visual
     copy sits beside the price on mobile, leaving the product photo clear. */
  .home-page #dealCarousel .deal-image-placeholder .deal-discount{
    position:absolute;
    width:1px;
    height:1px;
    min-height:0;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .home-page #dealCarousel .deal-inline-discount{
    display:inline-block;
    flex:none;
    padding:2px 3px;
    border-radius:4px;
    background:var(--red,#cf0a2c);
    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:12px;
  }
  .home-page #dealCarousel .deal-product-link .deal-empty{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    min-width:0;
    height:100px;
    padding:0;
    text-align:left;
  }
  .home-page #dealCarousel .deal-product-link .deal-empty>b{
    order:-1;
    display:-webkit-box;
    min-height:0;
    max-height:28px;
    flex:none;
    margin:0;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font-size:12px;
    font-weight:500;
    line-height:14px;
  }
  .home-page #dealCarousel .deal-prices{
    display:flex;
    flex:0 0 22px;
    min-height:22px;
    align-items:center;
    gap:4px;
    margin:0;
  }
  .home-page #dealCarousel .deal-current-price{
    flex:none;
    padding:0;
    background:transparent;
    color:#cf0c2c;
    font-size:18px;
    font-weight:800;
    line-height:22px;
    letter-spacing:-.5px;
  }
  .home-page #dealCarousel .deal-old-price{padding:0;font-size:10px;line-height:12px}
  .home-page #dealCarousel .deal-cashback{
    min-height:0;
    max-height:12px;
    flex:none;
    margin:0;
    padding:0 4px;
    overflow:hidden;
    font-size:9px;
    line-height:12px;
    white-space:nowrap;
  }
  .home-page #dealCarousel .deal-cta{
    display:flex;
    min-height:32px;
    flex:0 0 32px;
    align-self:flex-start;
    width:140px;
    max-width:100%;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:auto;
    padding:0 5px;
    border-radius:12px;
    background:#171717;
    color:#fff;
    font-size:13px;
    font-weight:500;
    line-height:14px;
  }
  .home-page #dealCarousel .deal-cta i{font-size:14px}
  .home-page #dealCarousel .deal-cta-desktop{display:none}
  .home-page #dealCarousel .deal-cta-mobile{display:inline}
  .home-page #dealCarousel .home-deal-lines{width:100%;padding:6px 0}
  .home-page #dealCarousel .home-deal-lines .skeleton-line{height:10px;margin:8px 0 0}
  .home-page #dealCarousel .home-deal-lines .skeleton-price{height:22px;margin:0 0 12px}
  .home-page #dealCarousel .home-deal-message{
    display:block!important;
    width:100%;
    height:120px!important;
    padding:0;
    border-radius:10px;
    background:#fff;
  }
  .home-page #dealCarousel .home-deal-empty,
  .home-page #dealCarousel .home-load-error{
    box-sizing:border-box;
    height:120px;
    min-height:0;
    gap:8px;
    margin:0;
    padding:12px;
    font-size:12px;
  }
  .home-page #dealCarousel [data-homepage-retry]{min-height:32px;padding:5px 18px;font-size:12px}
  .home-page .category-showcase:has(#catalog){
    width:calc(100% - 40px);
    margin:0 auto;
    padding-top:41px;
  }
  .home-page .category-showcase .section-head{height:18px;min-height:18px;align-items:flex-start;margin:0 0 20px}
  .home-page .category-showcase .section-head h2{
    margin:0;
    font-size:18px!important;
    font-weight:800;
    line-height:18px!important;
  }
  .home-page .category-showcase .section-head .all-categories-link{display:none!important}
  .home-page .category-showcase .row-scroll-controls{display:none!important}
  .home-page .horizontal-showcase.category-showcase .categories{gap:10px;padding-top:0}
  .home-page .horizontal-showcase.category-showcase .categories a{
    box-sizing:border-box;
    flex:0 0 136px;
    width:136px;
    height:156px;
    min-height:156px;
    padding:9px;
    border-radius:10px;
  }
  .home-page .horizontal-showcase.category-showcase .categories a em{height:99px;margin:0 0 8px}
  .home-page .horizontal-showcase.category-showcase .categories a b{font-size:10.5px;line-height:14px}
}

/* At narrow phone widths, show the full former price on its own line. */
@media(max-width:360px){
  .home-page #dealCarousel .deal-prices{flex:0 0 auto;flex-wrap:wrap;gap:0 4px}
  .home-page #dealCarousel .deal-old-price{flex:0 0 100%;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap}
  .home-page #dealCarousel .deal-cashback{display:none}
}

/* Let both purchase rows contribute to the card height. The legacy fixed
   379px height cannot contain the seasonal row's 210px media slot and CTAs. */
@media(max-width:899px){
  .home-page .horizontal-showcase #products .product.storefront-product-card,
  .home-page .horizontal-showcase .summer-hit-grid .product.storefront-product-card{
    height:auto;
    min-height:0;
    align-self:stretch;
  }
  .home-page .horizontal-showcase #products .product-purchase-actions,
  .home-page .horizontal-showcase .summer-hit-grid .product-purchase-actions{flex:none}
  /* Horizontal scrolling clips vertical shadows too. Reserve paint room
     inside the scroller, keeping the first card at its existing left/top. */
  .home-page .horizontal-showcase #products,
  .home-page .horizontal-showcase .summer-hit-grid{
    box-sizing:border-box;
    width:calc(100% + 24px);
    margin:-20px -12px 0;
    padding:24px 14px 40px 12px;
    scroll-padding-inline:12px 14px;
  }
  .home-page .horizontal-showcase #products .product:hover,
  .home-page .horizontal-showcase .summer-hit-grid .product:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(45,26,32,.1);
  }
  @media(pointer:coarse){
    .home-page .horizontal-showcase #products .product:hover,
    .home-page .horizontal-showcase .summer-hit-grid .product:hover{
      transform:none;
      box-shadow:0 5px 22px rgba(45,26,32,.055);
    }
  }
}