/* =========================================================
   Pinklitter v123 Mobile Hero Polish Only
   Scope: mobile hero + header icon spacing only.
   Does NOT touch Dog/Cat, categories, carousel, desktop.
   ========================================================= */

@media (max-width: 767px){

  /* cart closer to burger */
  .header-actions{
    gap:2px !important;
  }

  .header-actions > .cart-btn,
  .header-actions > a.cart-btn,
  .header-actions > .mobile-menu-btn,
  .header-actions > button.mobile-menu-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    flex:0 0 40px !important;
    margin:0 !important;
  }

  /* Hero: keep full image, but scale typography so it fits in the short mobile hero */
  body.home .plx-hero{
    position:relative !important;
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
  }

  body.home .plx-hero-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    line-height:0 !important;
    border-radius:0 !important;
  }

  body.home .plx-hero-media img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    filter:none !important;
  }

  body.home .plx-hero-copy{
    position:absolute !important;
    z-index:5 !important;
    left:18px !important;
    top:25% !important;
    right:auto !important;
    bottom:auto !important;
    width:34% !important;
    max-width:34% !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  body.home .plx-kicker{
    display:inline-flex !important;
    max-width:100% !important;
    padding:.13rem .26rem !important;
    margin:0 0 .22rem !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.82) !important;
    color:#d92162 !important;
    font-size:clamp(4px, 1.05vw, 7px) !important;
    line-height:1.05 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
  }

  body.home .plx-hero h1{
    display:block !important;
    max-width:100% !important;
    margin:0 0 .22rem !important;
    color:#ffffff !important;
    font-size:clamp(13px, 4.05vw, 24px) !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
    text-shadow:0 2px 12px rgba(6,19,38,.14) !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-wrap:balance !important;
  }

  body.home .plx-hero p{
    display:block !important;
    max-width:100% !important;
    margin:0 0 .32rem !important;
    color:#ffffff !important;
    font-size:clamp(6px, 1.55vw, 10px) !important;
    line-height:1.38 !important;
    font-weight:800 !important;
    text-shadow:0 1px 10px rgba(6,19,38,.14) !important;
  }

  body.home .plx-hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:22px !important;
    height:22px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 4px !important;
    border-radius:999px !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:clamp(4px, 1.05vw, 7px) !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    gap:.10rem !important;
    overflow:hidden !important;
  }
}

@media (max-width: 420px){
  body.home .plx-hero-copy{
    left:14px !important;
    top:25% !important;
    width:35% !important;
    max-width:35% !important;
  }

  body.home .plx-kicker{
    font-size:4.5px !important;
    padding:.11rem .22rem !important;
    margin-bottom:.18rem !important;
  }

  body.home .plx-hero h1{
    font-size:clamp(12px, 4vw, 18px) !important;
    line-height:1.09 !important;
    margin-bottom:.18rem !important;
  }

  body.home .plx-hero p{
    font-size:5.8px !important;
    line-height:1.34 !important;
    margin-bottom:.24rem !important;
  }

  body.home .plx-hero-actions{
    gap:3px !important;
  }

  body.home .plx-hero-actions .plx-btn,
  body.home .plx-hero-actions a{
    min-height:19px !important;
    height:19px !important;
    font-size:4.8px !important;
    padding:0 3px !important;
  }
}