/* =====================================================================
   AYATOP 1.3.2 - homepage / mobile refinement
   Loads AFTER premium.css. Fixes:
   1. premium.css was overriding the mobile rules of style.css (sidebar showed, hero squeezed)
   2. dark overlay only on the hero banner
   3. clean, consistent homepage blocks
   ===================================================================== */

/* ---------- 1. hero zone: sidebar/side panel only where there is room ---------- */
@media (max-width:1100px){
  .ay-zone{grid-template-columns:minmax(0,1fr)!important;gap:0}
  .ay-mk,.ay-rp{display:none!important}
}
@media (min-width:1101px){
  .ay-zone{grid-template-columns:240px minmax(0,1fr) 250px}
}

/* ---------- 2. hero banner on phones ---------- */
@media (max-width:760px){
  .ay-hero{min-height:0!important;aspect-ratio:9/8;max-height:460px;border-radius:18px}
  .ay-sl--img .ay-sl-copy{padding:0 18px 36px!important}
  .ay-sl--img h1,.ay-sl--img h2{font-size:clamp(22px,6.4vw,28px);line-height:1.25;margin-bottom:6px}
  .ay-sl--img p{font-size:14px;margin-bottom:14px;max-width:none}
  .ay-sl--img .ay-btn{padding:10px 24px;font-size:14px}
  .ay-pp{bottom:10px}
}

/* ---------- 3. category tiles: NO dark overlay, name sits under the photo ---------- */
.ay-cat{aspect-ratio:auto!important;display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:var(--ay-sh1);isolation:auto}
.ay-cat::after{display:none!important}
.ay-cat-img{position:relative;inset:auto;z-index:0;aspect-ratio:1/1;background:#F4F7F5;overflow:hidden}
.ay-cat-n{display:none}
.ay-cat-b{position:static;padding:12px 14px;color:var(--ay-ink);align-items:center;min-height:56px}
.ay-cat-b h3{color:var(--ay-ink);font-size:15px;font-weight:700;letter-spacing:0;line-height:1.3}
.ay-cat-go{width:30px;height:30px;font-size:15px}
.ay-cat:hover .ay-cat-go{transform:none;background:var(--ay-gd);color:#fff}
@media (max-width:760px){
  .ay-cat-b{padding:10px 12px;min-height:50px}
  .ay-cat-b h3{font-size:14px}
  .ay-cats{gap:10px}
}

/* ---------- 4. trust strip: compact ---------- */
.ay-bf b,.ay-bf span{display:block;line-height:1.35}
.ay-bf p{margin:0;line-height:1.35}
@media (max-width:760px){
  .ay-bf{padding:4px 0}
  .ay-bf div{align-items:center;padding:10px;gap:8px}
  .ay-bf i{width:32px;height:32px}
  .ay-bf b{font-size:12.5px}
  .ay-bf span{font-size:11px}
}

/* ---------- 5. promo banners and "On sale" band: light, no heavy dark blocks ---------- */
.ay-pb{margin-top:40px}
.ay-pb a,.ay-pb a:first-child,.ay-pb a:last-child{color:var(--ay-ink);box-shadow:none;border:1px solid var(--ay-ln);min-height:150px;padding:26px 30px;border-radius:22px}
.ay-pb a:first-child{background:var(--ay-gl)}
.ay-pb a:last-child{background:#FFF8E1}
.ay-pb b{color:var(--ay-gd)}
.ay-pb .ay-pill,.ay-pb a:hover .ay-pill{background:var(--ay-g);color:#fff}
.ay-pb .ay-cut--img{border-color:#fff;box-shadow:0 6px 16px rgba(7,61,45,.12)}
.ay-sec--deals{background:#F1F8F4;border:1px solid var(--ay-ln)}
.ay-sec--deals .ay-sh h2{color:var(--ay-ink)}
.ay-sec--deals .ay-sh h2::before{color:var(--ay-g)}
.ay-sec--deals .ay-sh a{background:var(--ay-g);color:#fff}
@media (max-width:760px){
  .ay-pb{margin-top:28px}
  .ay-pb a{padding:18px;min-height:120px}
}

/* ---------- 6. section rhythm ---------- */
.ay-sec{margin-top:44px}
@media (max-width:760px){.ay-sec{margin-top:30px}}

/* ---------- 7. product cards on phones ---------- */
@media (max-width:760px){
  .ay-grid{gap:10px}
  .ay-pc h3{font-size:13.5px;min-height:2.7em;padding-inline:10px}
  .ay-pc .ay-pr,.ay-pc small{padding-inline:10px}
  .ay-pc .ay-bt{margin-inline:10px;font-size:13px;min-height:40px}
}

/* ---------- 8. header: compact on phones ---------- */
@media (max-width:760px){
  .ay-hd{padding-block:8px;gap:8px;row-gap:8px}
  .ay-ac a{font-size:11.5px;padding:0 4px}
  .ay-ac a .ay-ic{width:21px;height:21px}
  .ay-sr{margin-top:0}
}

/* ---------- 9. floating buttons: smaller, stacked, never over content ---------- */
@media (max-width:760px){
  .ay-wa{width:44px;height:44px;bottom:calc(84px + env(safe-area-inset-bottom,0px));inset-inline-start:auto;inset-inline-end:14px}
  .ay-wa .ay-ic{width:22px;height:22px}
  .ay-fb{padding-bottom:76px}
}