/* ==========================================================================
   SUPREME LUXE — LAYOUT
   Containers and section rhythm. The approved files hand-tune spacing per
   section rather than deriving it from a scale (DESIGN_HANDOFF §5), so the
   modifiers below name real sections rather than abstract steps.
   ========================================================================== */

.container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.container--home    { max-width: var(--max-home); }     /* 1360 */
.container--product { max-width: var(--max-product); }  /* 1440 */
.container--bespoke { max-width: var(--max-bespoke); }  /* 1280 */

/* --- Sections ------------------------------------------------------------ */

.section {
  padding: var(--section-y) var(--pad-x-fixed);   /* 130px — Edit, Moment, Moments */
  background: var(--onyx);
}
.section--fluid { padding-left: var(--pad-x-fluid); padding-right: var(--pad-x-fluid); }

.section--build    { padding: var(--section-y) var(--pad-x-fixed); background: var(--burgundy); }
.section--trust    { padding: 90px var(--pad-x-fixed); background: var(--surface);
                     border-top: 1px solid var(--line-08); border-bottom: 1px solid var(--line-08); }
.section--included { padding: 80px var(--pad-x-fixed); background: var(--surface);
                     border-top: 1px solid var(--line-08); border-bottom: 1px solid var(--line-08); }
.section--related  { padding: 100px var(--pad-x-fixed); }
.section--reminder { padding: 110px var(--pad-x-fixed) 70px; }

/* Sections that are full-bleed media carry no padding of their own. */
.section--bleed { padding: 0; }

/* --- Section headers ----------------------------------------------------- */

.section-head { margin-bottom: 56px; }
.section-head__title { margin-top: 14px; font-size: var(--h2-section); color: var(--bone); }

/* Edit header puts a link opposite the title */
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* --- Offsets for fixed navs ---------------------------------------------- */

.has-fixed-nav { padding-top: var(--nav-h); }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  .section,
  .section--build,
  .section--related,
  .section--reminder {
    padding: var(--section-y-mobile) var(--pad-x-mobile) 46px;
  }
  .section--trust,
  .section--included { padding: 38px var(--pad-x-mobile); }

  /* Rails bleed to the screen edge; only the heading keeps the gutter. */
  .section--rail { padding-left: 0; padding-right: 0; }
  .section--rail .section-head { padding: 0 var(--pad-x-mobile); }

  .section-head { margin-bottom: 20px; }
  .section-head--split { margin-bottom: 20px; }
  .section-head__title { font-size: 23px; margin-top: 10px; }

  .has-fixed-nav { padding-top: 0; }
}

/* --- Horizontal snap rail (mobile Edit, occasions, related) -------------- */

.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px var(--pad-x-mobile) 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }