/* ANDALUS_FULLWIDTH_V2 (21 Oct 2026) — desktop only (>1024px).
   Two widths, not one:
   - FRAME = header, footer, product grids, video rails, the search/tools bar, category
     cards, Facebook posts: ~94% of the viewport, so wide screens have no empty gutters.
   - CONTENT = everything else (hero, services, steps, FAQ, forms, 2-column boxes):
     a centered column capped at --an-content-max, so text and cards keep their designed
     size instead of stretching with the screen.
   Product grids use auto-fill: a wider screen gets MORE cards per row (5 at 1920px,
   4 at 1440px), never bigger cards.
   offers.andalusfurniture.com (.ofr-*) is deliberately NOT covered: that sales page is
   designed around its own 1180px frame and spreads thin when widened.
   Loaded site-wide from includes/tracking-head.php. Mobile/tablet untouched. */
:root{
  --an-fullwidth:94%;
  --an-fullwidth-max:2400px;
  --an-content-max:1480px;   /* reading / content column */
  --an-card-min:260px;       /* product card min width in auto-fill grids: 5 cards at 1536px, 6 at 1920px */
}
@media (min-width:1025px){
  /* 1) Default: every page container is a CONTENT column (centered, capped). */
  html body :is(
    .wrap,
    .fbLatest .wrap,
    .an-product-tools>.wrap,
    .an-product-tools>.an-product-tools__wrap,
    .an-site-wrap,
    .an-cat-wrap,
    .an-info-wrap,
    .an-vrail__wrap,
    .mattressWrap,
    .mt-wrap,
    .sbx-wrap,
    .sst-wrap,
    .ang-wrap,
    .s10-wrap,
    .sb-wrap
  ){
    width:min(var(--an-fullwidth),var(--an-content-max))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }

  /* 2) FRAME: these sections' containers take the wide width. */
  html body :is(
    .an-site-header, .an-site-footer, .an-site-quick,
    .an-cat-categories,
    .start,                     /* homepage category cards row */
    .an-product-tools,          /* search / sort / category chips bar */
    .an-vrail, .an-vtours,      /* video rails */
    .an-cat-main,               /* category page product grid */
    .catalogBlock,              /* /live product grid */
    #catalog,                   /* /24 catalog grid + homepage catalog */
    .mt-results,                /* mattresses grid */
    .sst-models,                /* stainless tables grid */
    .fbLatest                   /* Facebook posts grid */
  ) > :is(.wrap,.an-site-wrap,.an-cat-wrap,.an-vrail__wrap,.mt-wrap,.sst-wrap,.an-product-tools__wrap),
  html body .an-site-wrap{
    width:min(var(--an-fullwidth),var(--an-fullwidth-max))!important;
  }

  /* 3) Product/catalog grids: more columns, same card size. */
  html body :is(
    .an-cat-grid,
    #catalog #grid,
    #anLive #catalog #productGrid.productGrid.grid,
    .mt-grid,
    .catalogGrid
  ){
    grid-template-columns:repeat(auto-fill,minmax(var(--an-card-min),1fr))!important;
  }
  html body .categoryPick{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}

  /* 4) Product cards on desktop: 4:3 photo box (photos are mostly landscape; the blurred
        backdrop added in PHP fills the box for portrait ones), so cards are shorter and
        rows are tighter. */
  html body :is(.an-cat-photo,.an-home-photo,.an-live-photo){--anp-ratio:4/3}
  html body :is(.an-cat-card,.product[data-product]){container-type:inline-size}
  /* Narrow cards (5–6 per row): WhatsApp button on its own row, details + icon-only share below. */
  @container (max-width:309px){
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details,
    html body #catalog .product .actions.threeActions{grid-template-columns:minmax(0,1fr) 48px!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .ask,
    html body #catalog .product .actions.threeActions > .ask{grid-column:1 / -1!important;grid-row:1!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-btn--details,
    html body #catalog .product .actions.threeActions > .productDetails{grid-column:1!important;grid-row:2!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-share,
    html body #catalog .product .actions.threeActions > .shareProduct{grid-column:2!important;grid-row:2!important;width:48px!important;min-width:48px!important;max-width:48px!important;padding:0!important}
    html body .an-cat .an-cat-card .an-cat-actions-row.pactions.has-details > .an-cat-share .an-cat-sr-only,
    html body #catalog .product .actions.threeActions > .shareProduct span{display:none!important}
  }

  /* 5) Reading blocks inside the content column stay at a readable line length. */
  html body :is(.seoText .wrap,.ang-wrap--wide){max-width:min(var(--an-fullwidth),1400px)!important}
  html body :is(.andalus-info-subtitle,.sst-models__note,.sbx-faq p,.contactCard p,.fbPostsEmpty p,.an-info-lead,.an-section-intro p,.an2-guide p,.seoText p,.ang-lead,.an-pd__specs-note){max-width:78ch;margin-inline:auto}
  html body :is(.faqAnswer,details>p){max-width:78ch}
}