/* Compact Home: reversible over version 440. Active only on phones in compact mode. */
@media(max-width:767px){
 html[data-page=home][data-home-scale=compact]{
  --hm-section-space:24px;--hm-block-space:8px;--hm-item-space:8px;
  --hm-panel-space:12px;--hm-product-width:160px;--home-card-gap:8px;
 }
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-visual{height:160px;min-height:160px;max-height:160px;border-radius:12px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-info{grid-template-rows:18px 16px auto;row-gap:3px;padding:6px 8px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-info h3{font-size:12px;line-height:18px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-card-description{font-size:11px;line-height:16px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-card-bottom{margin-top:2px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-prices{grid-template-rows:14px 22px;height:38px;min-height:38px;gap:2px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-previous-price{min-height:14px;height:14px;gap:4px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .product-previous-price del{font-size:11px;line-height:14px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .discount{font-size:10px;line-height:12px;padding:1px 4px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .price strong{font-size:15px;line-height:22px}
 html[data-page=home][data-home-scale=compact] #app .product-card:not(:where(.wholesale-section .product-card)) .price span{font-size:10px;line-height:14px}
 html[data-page=home][data-home-scale=compact] #app .product-card .favorite{width:44px;height:44px;min-width:44px;min-height:44px}
 html[data-page=home][data-home-scale=compact] #app .section-heading>.more{font-size:11px;min-width:44px;min-height:44px}

 /* Keep the image-led hero modest; retain its existing gestures and copy. */
 html[data-page=home][data-home-scale=compact] #app .hero-stage{height:clamp(96px,14.5svh,112px)}
 html[data-page=home][data-home-scale=compact] #app .hero-copy h2{font-size:16px;line-height:22px}
 html[data-page=home][data-home-scale=compact] #app .discovery-tile{height:140px;aspect-ratio:auto}
 html[data-page=home][data-home-scale=compact] #app .discovery-tile img{height:calc(100% - 28px)}

 /* Store identity remains legible at a smaller photographic card size. */
 html[data-page=home][data-home-scale=compact] #app .store-feature-rail>.store-feature{--store-card-width:144px;flex:0 0 144px;width:144px;min-width:144px;max-width:144px;height:224px;min-height:224px;max-height:224px}
 html[data-page=home][data-home-scale=compact] #app .featured-stores .store-identity h3{font-size:14px;line-height:22px;height:22px}
 html[data-page=home][data-home-scale=compact] #app .featured-stores .store-identity .store-preview-logo{width:30px;height:30px}
 html[data-page=home][data-home-scale=compact] #app .featured-stores .store-rating{font-size:11px;line-height:18px}
 html[data-page=home][data-home-scale=compact] #app .featured-stores .rating-count{font-size:10px;line-height:16px}

 /* The introduction occupies the heading row, leaving the product rail its full width. */
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;padding-block:12px}
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals)>.deal-heading{grid-column:1;grid-row:1;align-self:center;padding:0 14px 0 0;margin:0;min-width:0}
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals)>.deal-row{display:contents}
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals) .deals-side{grid-column:2;grid-row:1;position:static;inset:auto;width:auto;height:auto;min-height:28px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:6px;margin:0 0 0 14px;padding:0;opacity:1;filter:none;transform:none;transition:none}
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals) .deals-side>strong{font-size:10px;line-height:14px}
 html[data-page=home][data-home-scale=compact] #app .red-deals .deal-emblem{height:28px;font-size:28px}
 html[data-page=home][data-home-scale=compact] #app :is(.autumn-section,.timed-deals) .deals-side :is(.season-mark,.timed-mark){width:24px;height:24px}
 html[data-page=home][data-home-scale=compact] #app :is(.autumn-section,.timed-deals) .deals-side :is(.season-mark,.timed-mark) .icon{width:24px;height:24px}
 html[data-page=home][data-home-scale=compact] #app :is(.red-deals,.autumn-section,.timed-deals) .deal-row>.product-rail{grid-column:1/-1;grid-row:2;width:100%;min-width:0;padding:0 14px;scroll-padding-inline:14px;margin:0;gap:8px}
 html[data-page=home][data-home-scale=compact] #app .timed-deals{grid-template-columns:minmax(0,1fr)}
 html[data-page=home][data-home-scale=compact] #app .timed-deals>.deal-heading{grid-column:1;grid-row:1;padding-inline:14px}
 html[data-page=home][data-home-scale=compact] #app .timed-deals .deals-side{grid-column:1;grid-row:2;margin-inline:14px;justify-content:flex-start}
 html[data-page=home][data-home-scale=compact] #app .timed-deals .deal-row>.product-rail{grid-row:3}

 /* Geometry stays at the compact baseline; independently composed photos fit these frames. */
 html[data-page=home][data-home-scale=compact] #app .accessory-mobile-original{height:248px;aspect-ratio:auto;max-height:none;gap:8px}
 html[data-page=home][data-home-scale=compact] #app .accessory-mobile-original .accessory-photo{background-size:cover;background-position:center}
 html[data-page=home][data-home-scale=compact] #app .accessory-mobile-original .accessory-watch .accessory-photo{background-image:url('/assets/watch-compact-photo-20261028.webp');background-position:50% 45%}
 html[data-page=home][data-home-scale=compact] #app .accessory-mobile-original .accessory-bag .accessory-photo{background-image:url('/assets/bag-compact-photo-20261028.webp');background-position:50% 35%}
 html[data-page=home][data-home-scale=compact] #app .accessory-mobile-original .accessory-glasses .accessory-photo{background-image:url('/assets/glasses-compact-photo-20261028.webp')}
 html[data-page=home][data-home-scale=compact] #app [data-home-section=wholesale-banner] .snapp-banner.campaign>img{content:url('/assets/wholesale-compact-photo-20261028.webp');width:100%;object-fit:cover;object-position:center}
 html[data-page=home][data-home-scale=compact] #app .desktop-accessory-mosaic{gap:8px}
 html[data-page=home][data-home-scale=compact] #app .desktop-accessory-tile{aspect-ratio:1.35}
 html[data-page=home][data-home-scale=compact] #app .tools-section .tool-grid{gap:8px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-tool,.style-tool){height:164px;min-height:164px;aspect-ratio:auto;padding:12px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-tool,.style-tool) .tool-art{height:48px;flex-basis:48px;margin:0 0 8px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-tool,.style-tool) .tool-art svg{width:59px;height:48px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-tool,.style-tool) strong{font-size:13px;line-height:22px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-description,.tool-description){font-size:10px;line-height:17px;margin-top:4px}
 html[data-page=home][data-home-scale=compact] #app .tools-section :is(.photo-tool,.style-tool) .tool-cta{height:28px;min-height:28px;bottom:12px;left:12px;font-size:10px;line-height:18px;padding:5px 4px}
 html[data-page=home][data-home-scale=compact] #app .editorial-section .trend-card{flex:0 0 132px;width:132px;height:144px}
 html[data-page=home][data-home-scale=compact] #app .editorial-section .trend-card h3{font-size:12px;line-height:20px}
 html[data-page=home][data-home-scale=compact] #app .editorial-section .trend-card p{font-size:10px;line-height:16px}
 html[data-page=home][data-home-scale=compact] #app .wholesale-section .product-card{height:226px;grid-template-rows:160px 54px}
 html[data-page=home][data-home-scale=compact] #app .wholesale-section .product-card .product-visual{height:160px;min-height:160px;max-height:160px}
}