/* ============================================================================
   Homepage alignment + vertical rhythm                           (2026-09-28)

   Loaded LAST on the homepage (index.tpl), after home-premium.css,
   home-categories-premium.css and home-quality-premium.css, and only there.

   THE RULE: every block on the homepage sits on ONE column — the Bootstrap
   container's content box (12px inside the container on every side) — and
   every band is separated from the next by the same space.

   Measured before this file (live, 1440px, column = 72..1368):
     hero 28..1412 · demo banner 48..1392 · category tiles 180..1260 ·
     New products / Best sellers cards 202..1238 (a centred flex row) ·
     Popular products cards 136..888 at 1024px.
   Band spacing was 79px after some sections and 158px after others.

   --sk-wrap mirrors Bootstrap's .container max-width per breakpoint (verified
   against the rendered .container at 375/414/768/1024/1280/1440/1920), so a
   block that is not inside a .container (the hero and ps_banner are module
   output with no wrapper) can be given exactly the same box.
   ========================================================================== */

#index {
  /* One vertical rhythm for every band (home-premium.css reads this for the
     product rails, the trust band and the CTA): 28px a side on phones, 48px
     on desktop, so the space between two sections is 56px -> 96px. */
  --sk-section-y: clamp(1.75rem, 3.4vw, 3rem);
  --sk-wrap: 100%;
  --sk-gutter: 12px;
}

@media (min-width: 576px)  { #index { --sk-wrap: 540px; } }
@media (min-width: 768px)  { #index { --sk-wrap: 720px; } }
@media (min-width: 992px)  { #index { --sk-wrap: 960px; } }
@media (min-width: 1200px) { #index { --sk-wrap: 1140px; } }
@media (min-width: 1400px) { #index { --sk-wrap: 1320px; } }

/* ---------- 1. Hero: the slider's frame on the column ---------- */
/* !important on width/max-width: theme.css's "slider fix" block forces
   `#home-slider { width: 100% !important; max-width: 100% !important }`
   (specificity 1,0,0); this selector is 2,0,0, so it wins once both are
   important. */
#index #home-slider {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--sk-wrap) !important;
  margin-inline: auto !important;
  padding-inline: var(--sk-gutter) !important;
}

#index #home-slider .carousel.slide {
  max-width: none !important;
}

/* ---------- 2. Demo banner (ps_banner): on the column, and a band ---------- */
#index .page-home > a.banner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sk-wrap);
  margin-inline: auto !important;
  padding-inline: var(--sk-gutter) !important;
  padding-block: var(--sk-section-y) !important;
}

/* The hover used to scale the artwork 1.2%, which pushed it ~8px past the
   column on both sides; a lift alone keeps the edge. */
@media (hover: hover) {
  #index .page-home > a.banner:hover img {
    transform: translateY(-3px);
  }
}

/* ---------- 3. Category tiles: the full column, not a centred 1080px track ---------- */
#index .sk-cats {
  padding-block: var(--sk-section-y);
}

#index .sk-cats__grid {
  max-width: none;
  margin: 0;
}

/* Below 768px the grid had its own 16px gutter and ignored the 540px
   container from 576px: now it uses the same box as everything else. */
@media (max-width: 767.98px) {
  #index .sk-cats {
    padding-block: var(--sk-section-y);
  }
  #index .sk-cats > .container {
    max-width: var(--sk-wrap);
    padding-inline: var(--sk-gutter);
  }
}

/* 576-767px: in the 516px column five tiles would be ~93px and the longest
   names break to three lines, so the phone layout (3 + 2, the pair centred
   on the same tracks) carries on up to the tablet breakpoint. */
@media (min-width: 600px) and (max-width: 767.98px) {
  #index .sk-cats__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 1rem;
  }
  #index .sk-cats__item {
    grid-column: span 2;
  }
  #index .sk-cats__item:nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
  #index .sk-cats__item:nth-child(5):last-child {
    grid-column: 4 / span 2;
  }
  #index .sk-cats__item:nth-child(4):last-child {
    grid-column: 3 / span 2;
  }
  #index .sk-cats__name {
    font-size: 13px;
    margin-inline: 0;
  }
}

/* ---------- 4. Product rails: a real grid on the column ----------
   Was a centred flex row of 240-340px cards, so every rail had its own
   width and a 3-product rail floated in the middle under a left-aligned
   title. Now every rail is the same grid, starting on the column's left
   edge: 4 columns from 1200px, 3 from 768px, 2 on phones. A three-product
   rail uses three columns from 1200px (see below); a rail with one or two
   products leaves the last columns empty rather than blowing its cards up. */
#index .page-home .products.row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  align-items: stretch;
  gap: 12px;
  margin: 0 !important;
}

@media (min-width: 768px) {
  #index .page-home .products.row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.9vw, 24px);
  }
}

@media (min-width: 1200px) {
  #index .page-home .products.row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* A rail of exactly three products (New products, Best sellers today) fills
     the column with three cards instead of leaving the fourth column empty, so
     both of its edges line up with the rails above and below. */
  #index .page-home .products.row:has(> .product-miniature:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Neutralise the flex sizing of the old row, including its :has() variants
   for 1-, 2- and 3-product rails (those out-rank a plain selector, hence
   !important on the two properties that matter in a grid). */
#index .page-home .products.row > .product-miniature {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- 5. Last band -> footer: the same rhythm ----------
   The homepage's empty `footer.page-footer` (8-48px top margin) and
   #content-wrapper's 64px bottom padding added up to a 100-160px blank strip
   between the "Talk to us" panel and the footer. Homepage only. */
#index #content-wrapper {
  padding-bottom: var(--sk-section-y) !important;
}

#index #content-wrapper .page-footer {
  margin-top: 0 !important;
}