/* v772 - HOME ALIGNMENT. Presentation only, scoped to .home-v2. Loads after css/369.
   One edge for everything: --hv-max (width) and --hv-gut (side gutter). Fixes found on review:
   1. Browse-by-Area was wider than Hot Deals / Top Savings (a width rule beat the other by specificity).
   2. The "What's new today" strip and the KPI row had their own narrower caps (1344 / 1500px).
   3. Hot Deals title block: page dots sat higher than the "View all deals" button; the two section heads
      (Hot Deals / Top Savings) did not share one baseline (the live dot made one kicker taller).
   4. The two columns ended at different heights (left cards stopped above the last savings row).
   5. The gold line under the hero ignored the width cap on ultra-wide screens.
   Roll back: remove the <link> to this file. */

/* 1+2 - every home block uses the same container */
.home-v2 .section,.home-v2 .section.tight,.home-v2 .hv2-kpis{width:100%;max-width:var(--hv-max);margin-inline:auto;box-sizing:border-box}
.home-v2 .hv2-kpis{padding-inline:var(--hv-gut)}
.home-v2 .pv-pulse{max-width:none}
.home-v2 .ha-grid,.home-v2 .hv2-duo,.home-v2 .areas-grid{width:100%;box-sizing:border-box}

/* 5 - hero underline follows the same edges */
.home-v2 .hero::after{left:max(var(--hv-gut),calc((100% - var(--hv-max))/2 + var(--hv-gut)));right:max(var(--hv-gut),calc((100% - var(--hv-max))/2 + var(--hv-gut)))}

/* 3 - section heads: one height, one baseline, controls centred on the same line */
.home-v2 .hv2-duo .section-head{align-items:flex-end;min-height:62px;margin-bottom:var(--hh-head,16px)}
.home-v2 .hv2-duo .section-head .kicker{display:inline-flex;align-items:center;box-sizing:border-box;min-height:22px;line-height:1}
.home-v2 .hv2-duo .section-head h2{margin:0;line-height:1.2}
.home-v2 .hv2-duo .link-more,.home-v2 .hv2-duo .dk-pager{box-sizing:border-box;height:32px;align-self:flex-end}
.home-v2 .hv2-duo .link-more{display:inline-flex;align-items:center;padding-block:0;border-bottom-width:1px}
.home-v2 .hv2-duo .dk-pager{align-items:center}

/* 4 - both columns end on the same line */
@media (min-width:1201px){
  .home-v2 .hv2-duo{align-items:stretch}
  .home-v2 .hv2-duo>.hv2-col{display:flex;flex-direction:column;min-width:0}
  .home-v2 .hv2-col-deals>.hv2-deal-grid{flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch}
  .home-v2 .hv2-col-deals .dk-d-in{height:100%}
  .home-v2 .hv2-col-rank>.ts-list,.home-v2 .hv2-col-rank>.hv2-rank{flex:1 1 auto}
  .home-v2 .hv2-col-rank .ts-row{flex:1 1 auto}
  .home-v2 .hv2-col-rank .hv2-rank{display:flex;flex-direction:column}
  .home-v2 .hv2-col-rank .hv2-rank li{flex:1 1 auto}
}