/* Phase 20T.5 — Wider shared public layout with deliberate gutters */
:root{--dvh-public-max-width:1560px;--dvh-public-gutter:clamp(18px,2.25vw,42px)}

/* Main shared public containers */
body .wrap{
  width:min(var(--dvh-public-max-width),calc(100% - (var(--dvh-public-gutter) * 2)))!important;
  max-width:none;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Product detail should benefit from the wider gallery/specification canvas. */
body .detail .wrap{
  width:min(var(--dvh-public-max-width),calc(100% - (var(--dvh-public-gutter) * 2)))!important;
}

/* Tracking gains breathing room for status/invoice/courier information, while its forms remain intentionally narrow. */
body.cataloguebody .trackwrap{
  width:min(1320px,calc(100% - (var(--dvh-public-gutter) * 2)))!important;
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.cataloguebody .trackform{max-width:680px}

/* Prevent very wide layouts from stretching individual product cards excessively. */
@media (min-width:1380px){
  body .catalogue .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body .public-category-chips{grid-auto-columns:minmax(190px,1fr)}
}

/* Header uses the same wider page edge alignment. */
body .dvh-shared-public-nav .navin{
  width:min(var(--dvh-public-max-width),calc(100% - (var(--dvh-public-gutter) * 2)))!important;
}

@media (max-width:900px){
  :root{--dvh-public-gutter:16px}
  body .wrap,
  body .detail .wrap,
  body.cataloguebody .trackwrap,
  body .dvh-shared-public-nav .navin{
    width:calc(100% - 32px)!important;
  }
}

@media (max-width:600px){
  :root{--dvh-public-gutter:12px}
  body .wrap,
  body .detail .wrap,
  body.cataloguebody .trackwrap,
  body .dvh-shared-public-nav .navin{
    width:calc(100% - 24px)!important;
  }
  body .catalogue .grid{grid-template-columns:1fr}
}

/* Phase 20T.6 — bring shared hero cards onto the wider public canvas. */
body .hero.dvh-public-hero--home,
body .cataloguehero.dvh-public-hero,
body .categoryhero.dvh-public-hero{
  width:min(var(--dvh-public-max-width,1560px),calc(100% - (var(--dvh-public-gutter,clamp(18px,2.25vw,42px)) * 2)))!important;
  max-width:none!important;
}

/* Give the homepage hero the same deliberate breathing room below as other page sections. */
body .hero.dvh-public-hero--home{
  margin-top:18px!important;
  margin-bottom:clamp(18px,1.45vw,26px)!important;
}

@media (max-width:900px){
  body .hero.dvh-public-hero--home,
  body .cataloguehero.dvh-public-hero,
  body .categoryhero.dvh-public-hero{
    width:calc(100% - 32px)!important;
  }
  body .hero.dvh-public-hero--home{margin-bottom:18px!important}
}

@media (max-width:600px){
  body .hero.dvh-public-hero--home,
  body .cataloguehero.dvh-public-hero,
  body .categoryhero.dvh-public-hero{
    width:calc(100% - 24px)!important;
  }
  body .hero.dvh-public-hero--home{
    margin-top:12px!important;
    margin-bottom:16px!important;
  }
}