/* ==========================================================================
   HOME PAGE VERTICAL RHYTHM - one rule for the space between sections
   --------------------------------------------------------------------------
   Linked by Home/Index.cshtml. Phones for now (below 960px, where the hero pin turns the rows
   into white sheets); the desktop gets the same rule with its own step.

   THE RULE: 32px between what one section shows and what the next one shows - the last card,
   link or button of one, the title of the next. Nothing else.

   Before it, every section brought its own space and the page added them up differently:
     - the rows (home-showcase.css, home-posts.css) 32px above and below, the banner blocks
       (.spaceHomeSection) 24px below, the consult band 32px above plus 56px of padding;
     - inside one white sheet two 32px margins collapsed to 32, but between two sheets
       (hero-slider.js makes each body-level row a flow-root sheet, so no margin leaks out
       over the pinned banner) they stood side by side - 64;
     - so the same pair of sections read 24, 32, 57, 64 or 120 apart depending on where they
       happened to sit.
   Now no section owns a bottom margin, and each owns exactly one top margin of 32. A margin
   that starts a sheet stays inside it, one that follows a sibling meets no other margin, so
   every pair is 32 whatever wraps it. The wrappers (.size2) add nothing of their own.

   The cards in a row keep slots for a rating, a struck price and a colour rail so the row lines
   up; a slot that NO card in the row fills is dropped (the :has rules at the end), so a row
   carries no empty band under its cards that would read as extra space before the next one.
   ========================================================================== */

@media (max-width: 959.98px) {
    body.page-home {
        --tc-home-gap: 32px;
    }

    /* the wrappers: no space of their own (the hero pin script moves a wrapper's margins into
       its padding, so a margin here would come back as padding) */
    html body.page-home > .size2:not(.tc-home-pin) {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* every section: one top margin, no bottom one */
    html body.page-home > .size2:not(.tc-home-pin) > * {
        margin-top: var(--tc-home-gap);
        margin-bottom: 0;
    }

    /* the main banner: no space under it of its own. The pin script moves the banner's bottom
       margin into the first sheet as padding, which came on top of that sheet's first section's
       32 (63 in all); with none to move, the first section's own 32 is the whole gap. */
    html body.page-home > .tc-home-pin .vp-slider-full,
    html body.page-home > .tc-home-pin .vp-slider-full > section {
        margin-bottom: 0;
    }

    /* what a section used to carry inside itself */
    html body.page-home > .size2:not(.tc-home-pin) > .spaceHomeSection,
    html body.page-home > .size2:not(.tc-home-pin) > * > .spaceHomeSection {
        margin-bottom: 0;
    }

    html body.page-home > .size2:not(.tc-home-pin) > * > .spaceHomeSection {
        margin-top: 0;
    }

    /* the consult band: a white band with a glow, so its space is padding - the same 32 above
       its title (instead of 32 + 56) and below its button, where the footer's dark band begins */
    html body.page-home > .co.co-consult {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: var(--tc-home-gap);
        padding-bottom: var(--tc-home-gap);
    }

    /* ---- a row's cards: no slot that no card fills ---------------------------------------- */

    /* the rating / badge line */
    .tc-showcase__row:not(:has(.tc-sc-card__rate, .tc-sc-card__badge, .tc-sc-card__stock)) .tc-sc-card__meta {
        display: none;
    }

    /* the struck price under the price */
    .tc-showcase__row:not(:has(.tc-card__old-price)) .tc-sc-card .tc-card__pricing {
        grid-template-rows: auto;
        row-gap: 0;
    }

    /* the colour rail */
    .tc-showcase__row:not(:has(.tc-sc-swatches)) .tc-sc-card__foot {
        display: none;
    }
}