/* Storefront harmonisation — demo-safe visual pass.
   Scope: spacing, title rhythm and container width only.
   Product cards, card content, Masonry sizing logic and Home composition are untouched. */

:root {
  --sf-page-top: clamp(28px, 3.4vw, 46px);
  --sf-page-bottom: clamp(34px, 4.2vw, 58px);
  --sf-section-gap: clamp(22px, 2.8vw, 36px);
  --sf-page-title: clamp(34px, 3.6vw, 50px);
}

/* Canonical public page header ------------------------------------------------
   One reusable component for /products, /categories, /collections (and any
   future top-level storefront page). It owns its own centred width so the
   breadcrumb/H1 start at the exact same x/y regardless of the body container. */
.sf-page-head {
  width: min(100vw, var(--max-w));
  max-width: var(--max-w);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-inline: var(--gutter);
  margin: 0 0 28px;
}
.sf-page-head__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sf-page-head__crumbs a {
  color: inherit;
  text-decoration: none;
}
.sf-page-head__crumbs a:hover { color: var(--ink); }
.sf-page-head__body {
  padding: 0 0 22px;
  border-bottom: 1px solid var(--rule);
}
.sf-page-head__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: var(--sf-page-title);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sf-page-head__subtitle {
  margin: 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sf-page-head__count {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: .78;
}

/* Shared page rhythm: keep Home-specific :has() rules intact via their
   higher specificity, while tightening the generic storefront shell. */
.cat-main {
  padding-top: var(--sf-page-top);
  padding-bottom: var(--sf-page-bottom);
}

/* The footer had a second large spacer on top of the already padded main.
   Reduce only that spacer; footer content/layout stays identical. */
.cat-foot {
  margin-top: clamp(24px, 3vw, 44px);
}

/* Common catalogue-family heading rhythm. */
.cat-main > .cat-crumbs:first-child {
  padding-top: 0;
  margin-bottom: 10px;
}
.cat-hero--slim {
  padding-bottom: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
/* One storefront title grammar. These pages previously used three
   different serif variables / weights, so equal font-size still looked
   inconsistent. Product names are deliberately excluded. */
.cat-h1--compact,
.rcg-hero__title,
.coll-public__hero h1,
.cart-page .cat-h1,
.checkout-page .cat-h1,
.success-card .cat-h1 {
  font-family: var(--serif) !important;
  font-size: var(--sf-page-title) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
}
.cat-hero--slim .cat-h1--compact {
  margin: 2px 0 8px !important;
}
.cat-hero--slim .cat-lede {
  margin-top: 5px;
}
.cat-hero--slim .cat-lede--count {
  margin-top: 7px;
}

/* /categories uses its own visual system; align only page-title rhythm
   and outer spacing, never the category cards/grid. */
.cat-main:has(> .rcg),
.cat-main:has(> .coll-public) {
  padding-top: 0;
  padding-bottom: 0;
}
.rcg {
  padding-top: var(--sf-page-top) !important;
  padding-bottom: 58px !important;
}
.rcg-hero {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
}
.rcg-hero__title {
  margin-bottom: 10px !important;
}

/* Public collections index: same heading scale / vertical rhythm.
   Cards, media and grid composition remain untouched. */
.coll-public {
  padding-top: var(--sf-page-top) !important;
  padding-bottom: 58px !important;
}
.coll-public__hero {
  margin-bottom: 28px !important;
}
.coll-public__hero h1 {
  margin-bottom: 10px !important;
}

/* Transactional pages keep their existing components and two-column layouts.
   Only align heading scale and remove surplus vertical air. */
.cart-page .cat-detail-head,
.checkout-page .cat-detail-head {
  margin-bottom: 24px !important;
}
.cart-page .cat-h1,
.checkout-page .cat-h1,
.success-card .cat-h1 {
  margin-top: 4px !important;
}
.checkout-layout {
  margin-top: 18px;
}

/* Product detail: preserve the PDP itself. Only tighten the outer rhythm. */
.sd {
  padding-bottom: 48px;
}
.sd .cat-crumbs {
  margin-bottom: 14px;
}

/* PDP recommendations now use .pc-grid--wide + masonry.js, exactly like
   catalogue listings. Keep only section rhythm here; grid width/columns/gaps
   are owned by masonry.css. */
.sd [data-testid="product-related"] {
  margin-top: 28px;
  margin-bottom: 0;
}
.sd [data-testid="product-related"] .sd-related-head {
  margin-bottom: 16px;
}
.sd [data-testid="product-related"] .sd-related-title {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  :root {
    --sf-page-top: 24px;
    --sf-page-bottom: 38px;
    --sf-page-title: clamp(30px, 8vw, 38px);
  }
  .cat-foot {
    margin-top: 28px;
  }
  .rcg {
    padding-top: var(--sf-page-top) !important;
    padding-bottom: 42px !important;
  }
  .coll-public {
    padding-top: var(--sf-page-top) !important;
    padding-bottom: 44px !important;
  }
  .sf-page-head {
    margin-bottom: 22px;
  }
  .sf-page-head__body {
    padding-bottom: 18px;
  }
  .sd {
    padding-bottom: 38px;
  }
}


/* =====================================================================
   HOME RESPONSIVE SAFETY CONTRACT
   Loaded last and cache-busted by asset_url(). Desktop (>=1024px) is
   intentionally untouched. Below 1024px the landing has one authoritative
   layout: full-width modules, horizontal no-wrap commerce rails, and a
   dedicated 2x2 category page carousel.
   ===================================================================== */
@media (max-width: 1023.98px) {
  body[data-page="home"] .rc-home-layout-grid {
    grid-template-columns:minmax(0,1fr) !important;
  }

  body[data-page="home"] .rc-home-layout-grid > [data-home-layout-key] {
    grid-column:1 / -1 !important;
    min-width:0 !important;
  }

  /* Product / collection rails: neutralise every legacy grid rule. */
  body[data-page="home"] .rc-home-layout-grid .rc-landing-carousel-shell,
  body[data-page="home"] .rc-home-layout-grid .rc-carousel.rc-landing-carousel-shell {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .rc-home-layout-grid .rc-landing-carousel-track,
  body[data-page="home"] .rc-home-layout-grid .rc-row--6.rc-landing-carousel-track,
  body[data-page="home"] .rc-home-layout-grid .rc-faves.rc-landing-carousel-track,
  body[data-page="home"] .rc-home-layout-grid .pc-grid--home.rc-landing-carousel-track,
  body[data-page="home"] .rc-home-layout-grid .rc-dyn-coll__row.rc-landing-carousel-track {
    --landing-gap:10px;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    grid-template-rows:none !important;
    grid-auto-flow:initial !important;
    grid-auto-columns:initial !important;
    grid-auto-rows:initial !important;
    gap:var(--landing-gap) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    align-items:stretch !important;
    scroll-snap-type:x proximity !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* One predictable mobile/tablet viewport: exactly two cards visible.
     This also keeps the terminal "Voir toute..." tile inside the rail. */
  body[data-page="home"] .rc-home-layout-grid .rc-landing-carousel-track > .rc-pcard,
  body[data-page="home"] .rc-home-layout-grid .rc-landing-carousel-track > .pc-card,
  body[data-page="home"] .rc-home-layout-grid .rc-landing-carousel-track > .rc-home-see-all-card {
    flex:0 0 calc((100% - var(--landing-gap)) / 2) !important;
    width:calc((100% - var(--landing-gap)) / 2) !important;
    min-width:calc((100% - var(--landing-gap)) / 2) !important;
    max-width:calc((100% - var(--landing-gap)) / 2) !important;
    height:auto !important;
    margin:0 !important;
    align-self:stretch !important;
    scroll-snap-align:start;
  }

  body[data-page="home"] .rc-home-layout-grid .rc-pcard__link,
  body[data-page="home"] .rc-home-layout-grid .pc-card-link {
    min-width:0 !important;
  }

  /* Attribute pills and variant swatches must stay compact inside the card,
     never become vertical full-size image stacks. */
  body[data-page="home"] .rc-home-layout-grid .pc-card-attrs {
    display:flex !important;
    flex-flow:row wrap !important;
    gap:5px 6px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  body[data-page="home"] .rc-home-layout-grid .rc-home-card-attrs {
    flex-flow:row nowrap !important;
    white-space:nowrap !important;
  }

  body[data-page="home"] .rc-home-layout-grid .rc-pcard-swatches,
  body[data-page="home"] .rc-home-layout-grid .pc-card-swatches {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body[data-page="home"] .rc-home-layout-grid .rc-pcard-swatches .pc-swatch,
  body[data-page="home"] .rc-home-layout-grid .pc-card-swatches .pc-swatch {
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    flex:0 0 19px !important;
  }

  body[data-page="home"] .rc-home-layout-grid .rc-pcard-swatches .pc-swatch--more,
  body[data-page="home"] .rc-home-layout-grid .pc-card-swatches .pc-swatch--more {
    width:auto !important;
    min-width:19px !important;
    flex:0 0 auto !important;
  }

  /* Categories: preserve the dedicated carousel. Each slide is always one
     self-contained 2x2 page; never a long vertical list. */
  body[data-page="home"] .rc-home-layout-grid >
  [data-home-layout-key="categories"] {
    height:auto !important;
    min-height:0 !important;
    grid-row:auto !important;
  }

  body[data-page="home"] [data-home-layout-key="categories"] .rc-home-cats-carousel-shell {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }

  body[data-page="home"] [data-home-layout-key="categories"] .rc-home-cats-carousel-track {
    --landing-gap:10px;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:var(--landing-gap) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  body[data-page="home"]
  .rc-home-layout--xl[data-home-layout-key="categories"]
  .rc-home-cats-carousel-track > .rc-home-cats-page {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    height:clamp(320px,72vw,460px) !important;
    box-sizing:border-box;
    scroll-snap-align:start;
  }

  body[data-page="home"] [data-home-layout-key="categories"] .rc-home-cat-card {
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
  }

  /* Progress indicator remains available on touch devices even though the
     desktop hover arrows are intentionally hidden there. */
  body[data-page="home"] .rc-carousel-progress {
    display:block;
    position:relative;
    width:96px;
    height:3px;
    margin:8px auto 0;
    border-radius:999px;
    background:rgba(23,18,15,.12);
    overflow:hidden;
    flex:0 0 auto;
  }
  body[data-page="home"] .rc-carousel-progress[hidden] {
    display:none !important;
  }
  body[data-page="home"] .rc-carousel-progress__thumb {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-radius:inherit;
    background:rgba(23,18,15,.62);
  }
}

@media (max-width: 680px) {
  body[data-page="home"] .rc-home-layout-grid {
    padding:14px 10px 48px !important;
  }
}