/* Mobile Home spacing contract: section 32, related blocks 12, copy 4/8, campaign inset 16. */
@media(max-width:767px){
 html[data-page=home]{
  --hm-section-space:32px;
  --hm-block-space:12px;
  --hm-item-space:12px;
  --hm-small-space:8px;
  --hm-copy-space:4px;
  --hm-panel-space:16px;
  --hm-page-inset:14px;
  --hm-product-width:190px;
  --home-section-gap:var(--hm-section-space);
 }

 /* Keep empty space owned by the parent, rather than stacked with shelf padding. */
 html[data-page=home] #app .home-content{row-gap:var(--hm-section-space)}
 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 :is(.section-heading,.budget-heading){margin-bottom:var(--hm-block-space)}
 html[data-page=home] #app .section-heading p{margin-top:var(--hm-copy-space)}
 html[data-page=home] #app .product-rail{column-gap:var(--hm-item-space);padding-bottom:0}
 html[data-page=home] #app .category-rail{padding-bottom:0}
 html[data-page=home] #app .budget-tabs{padding-bottom:var(--hm-block-space);gap:var(--hm-small-space)}

 /* All retail product shelves, including budget and nested category items, share one scale. */
 html[data-page=home] #app .product-rail>.product-card,
 html[data-page=home] #app .product-rail>.category-feature-item{
  box-sizing:border-box;flex:0 0 var(--hm-product-width);width:var(--hm-product-width);
  min-width:var(--hm-product-width);max-width:var(--hm-product-width);align-self:start;
 }
 html[data-page=home] #app .product-rail>.product-card:not(:where(.wholesale-section .product-card)),
 html[data-page=home] #app .category-feature-item>.product-card{border:0;padding:6px;border-radius:12px}
 html[data-page=home] #app .category-feature-item>.product-card{width:100%}
 html[data-page=home] #app .product-card:not(:where(.wholesale-section .product-card)) .product-visual{border-radius:18px}
 html[data-page=home] #app .budget-product-rail>.product-card{box-shadow:inset 0 0 0 1px var(--home-border,#e4dfe2)}

 /* Editorial shelves do not add a second section gap above and below their content. */
 html[data-page=home] #app .category-feature{margin-inline:0;padding:0}
 html[data-page=home] #app .category-title-icon{width:28px;height:28px;flex-basis:28px}
 html[data-page=home] #app .category-title-icon .icon{width:18px;height:18px}
 html[data-page=home] #app .dedicated-store>.store-shelf-title{margin-bottom:var(--hm-block-space)}
 html[data-page=home] #app .dedicated-store .section-heading>.store-shelf-brand{display:flex;align-items:center;gap:var(--hm-small-space)}

 /* Campaigns retain their own color and illustration, with the same inner spacing. */
 html[data-page=home] #app :is(.red-deals,.autumn-section,.timed-deals){padding-block:var(--hm-panel-space)}
 html[data-page=home] #app :is(.red-deals,.autumn-section,.timed-deals)>.deal-heading{
  padding:0 var(--hm-page-inset);margin-bottom:var(--hm-block-space);
 }

 /* Discovery/store cards are separate families; their gutters follow the same tokens. */
 html[data-page=home] #app :is(.discovery-tiles,.accessory-mosaic,.tool-grid,.trend-rail,.store-feature-rail){gap:var(--hm-item-space)}
 html:is([data-page=home],[data-page=discounts]) #app .app-footer{margin-inline:calc(-1 * var(--hm-page-inset))}
}