/* Home M1–M5: phone-only visual refinement. Retail card photos keep their shared geometry. */
@media(max-width:767px){
 html[data-page=home]{--home-section-gap:32px;--hm-ink:#292327;--hm-muted:#6d626a;--hm-red:#e62e42}

 /* M1: readable secondary copy and prices, with stable rows for discounted/plain cards. */
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-info{display:grid;grid-template-rows:21px 18px auto;row-gap:4px;padding:8px 8px 7px}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-info h3{font-size:13px;line-height:21px;font-weight:750;color:var(--hm-ink)}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-card-description{font-size:11px;line-height:18px;color:var(--hm-muted);min-width:0;margin:0}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-card-bottom{margin-top:3px}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-prices{grid-template-rows:18px 24px;height:45px;min-height:45px;gap:3px}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .price strong{font-size:16px;line-height:24px;font-weight:800}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .price span{font-size:10px;line-height:16px;color:var(--hm-muted)}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-previous-price del{font-size:11px;line-height:18px;color:#766c73}

 /* M2/M5: 44px real touch target; the visible heart disc remains a quiet 28px. */
 html[data-page=home] #app .product-card .favorite{position:absolute;top:2px;right:2px;left:auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#716771;isolation:isolate;z-index:3;touch-action:manipulation}
 html[data-page=home] #app .product-card .favorite:before{content:'';position:absolute;inset:8px;border-radius:50%;background:#fffffff2;z-index:-1;pointer-events:none}
 html[data-page=home] #app .product-card .favorite .icon{width:16px;height:16px}
 html[data-page=home] #app .product-card .favorite.is-liked{color:var(--hm-red)}
 html[data-page=home] #app .product-card .favorite.is-liked:before,html[data-page=home] #app .product-card .favorite:active:before{background:#fff0f3}
 html[data-page=home] #app .product-card:has(.favorite) .product-category-badge{left:8px;right:auto;max-width:calc(100% - 60px)}
 html[data-page=home] #app .budget-tabs{gap:8px;padding:0 0 16px}
 html[data-page=home] #app .budget-tabs button{min-width:52px;min-height:44px;padding:11px 15px;border:0;border-radius:12px;background:#f5f2f4;box-shadow:none;font-size:11px;line-height:22px;color:#625860;touch-action:manipulation}
 html[data-page=home] #app .budget-tabs button[aria-pressed=true]{background:var(--hm-red);color:#fff;font-weight:700;box-shadow:none}
 html[data-page=home] #app .budget-tabs button:active{background:#fbe4e9;color:#a62036}

 /* M3: a narrower introduction reveals more of the next card without shrinking photos. */
 html[data-page=home] #app :is(.red-deals,.autumn-section,.timed-deals) .deal-row .deals-side{width:64px;padding:10px 3px;gap:8px}
 html[data-page=home] #app :is(.red-deals,.autumn-section,.timed-deals) .deal-row>.product-rail{padding-inline:68px 14px;scroll-padding-inline-start:0}
 html[data-page=home] #app :is(.red-deals,.autumn-section,.timed-deals) .deals-side>strong{font-size:10px;line-height:20px}
 html[data-page=home] #app .red-deals .deal-emblem{font-size:48px;height:49px}
 html[data-page=home] #app :is(.autumn-section,.timed-deals) .deals-side :is(.season-mark,.timed-mark){width:44px;height:44px}
 html[data-page=home] #app :is(.autumn-section,.timed-deals) .deals-side :is(.season-mark,.timed-mark) .icon{width:36px;height:36px}

 /* M4: one heading rhythm, with subtitle grouped under the title rather than under the action. */
 html[data-page=home] #app .home-content{row-gap:var(--home-section-gap)}
 html[data-page=home] #app .home-content>[data-home-section]{margin-block:0}
 html[data-page=home] #app .home-content>[data-home-section]>section{margin-block:0}
 html[data-page=home] #app .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
 html[data-page=home] #app .section-heading>div{display:block;min-width:0;flex:1}
 html[data-page=home] #app :is(.section-heading,.deal-heading) h2{font-size:15px;font-weight:800;line-height:26px;margin:0}
 html[data-page=home] #app .section-heading p{font-size:11px;line-height:20px;color:var(--hm-muted);margin:4px 0 0}
 html[data-page=home] #app .section-heading>.more{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;align-self:center;flex:0 0 auto;min-width:44px;min-height:44px;font-size:11px;line-height:20px;white-space:nowrap}
 html[data-page=home] #app .section-heading>.more .icon{width:14px;height:14px}
 html[data-page=home] #app .category-rail{padding-top:0;padding-bottom:4px}
 html[data-page=home] #app .budget-heading{gap:8px;margin-bottom:12px;align-items:center}
 html[data-page=home] #app .budget-heading h2{font-size:15px;line-height:26px}
 html[data-page=home] #app .budget-heading p{font-size:11px;line-height:20px;color:var(--hm-muted);margin-top:4px}
 html[data-page=home] #app .dedicated-store>.store-shelf-title{margin-bottom:12px}

 /* M5: matching, understated arrow discs; whole discovery tiles remain the touch target. */
 html[data-page=home] #app :is(.discovery-tile,.accessory-tile,.trend-card) .round-arrow{width:28px;height:28px;border-radius:50%;background:#fffffff2;color:#62545d;box-shadow:none}
 html[data-page=home] #app :is(.discovery-tile,.accessory-tile,.trend-card) .round-arrow .icon{width:14px;height:14px}
 html[data-page=home] #app :is(a,button,[role=button]):focus-visible{outline:2px solid var(--hm-red);outline-offset:3px}
 html[data-page=home] #app .favorite:focus-visible{outline-offset:-2px}
}