/* ============================================================================
   ONEEXISTS — Layout
   Containers, grid, section rhythm. Consumed by every template part.
   ============================================================================ */

/* Container — one class, five modifiers */
.oe-container {
  width: 100%;
  max-width: var(--oe-container-md);
  margin-inline: auto;
  padding-inline: var(--oe-gutter);
}
.oe-container--xs   { max-width: var(--oe-container-xs); }
.oe-container--sm   { max-width: var(--oe-container-sm); }
.oe-container--md   { max-width: var(--oe-container-md); }
.oe-container--xl   { max-width: var(--oe-container-xl); }
.oe-container--2xl  { max-width: var(--oe-container-2xl); }
.oe-container--full { max-width: 100%; padding-inline: 0; }

/* Sections — vertical rhythm */
.oe-section {
  padding-block: var(--oe-section-y);
}
.oe-section--sm { padding-block: var(--oe-section-y-sm); }
.oe-section--lg { padding-block: var(--oe-section-y-lg); }
.oe-section--flush-top { padding-top: 0; }
.oe-section--flush-bottom { padding-bottom: 0; }
.oe-section--flush { padding: 0; }

/* Section backgrounds */
.oe-section--paper { background: rgb(var(--oe-bg-alt)); }
.oe-section--muted { background: rgb(var(--oe-bg-muted)); }
.oe-section--dark  { background: rgb(var(--oe-bg-dark)); color: rgb(var(--oe-text-inverse)); }
.oe-section--dark h1, .oe-section--dark h2, .oe-section--dark h3, .oe-section--dark h4, .oe-section--dark h5 {
  color: rgb(var(--oe-text-inverse));
}
.oe-section--dark .oe-eyebrow { color: rgb(var(--oe-silver)); }

/* Stack — vertical spacing utility */
.oe-stack > * + * { margin-top: var(--oe-gap); }
.oe-stack--xs > * + * { margin-top: var(--oe-gap-xs); }
.oe-stack--sm > * + * { margin-top: var(--oe-gap-sm); }
.oe-stack--lg > * + * { margin-top: var(--oe-gap-lg); }
.oe-stack--xl > * + * { margin-top: var(--oe-gap-xl); }

/* Cluster — horizontal spacing utility (for chip rows, meta lines) */
.oe-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oe-gap-sm);
}
.oe-cluster--sm { gap: var(--oe-gap-xs); }
.oe-cluster--lg { gap: var(--oe-gap); }

/* Grid — column classes; product / collection / footer / editorial share this */
.oe-grid {
  display: grid;
  gap: var(--oe-gap);
}
.oe-grid--gap-sm { gap: var(--oe-gap-sm); }
.oe-grid--gap-lg { gap: var(--oe-gap-lg); }
.oe-grid--gap-xl { gap: var(--oe-gap-xl); }

.oe-grid--2 { grid-template-columns: 1fr; }
.oe-grid--3 { grid-template-columns: 1fr; }
.oe-grid--4 { grid-template-columns: repeat(2, 1fr); }
.oe-grid--5 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 40rem) {
  .oe-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48rem) {
  .oe-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .oe-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .oe-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .oe-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .oe-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .oe-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Two-up editorial split — image / text */
.oe-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--oe-gap-xl);
  align-items: center;
}
@media (min-width: 48rem) {
  .oe-split { grid-template-columns: 1fr 1fr; }
  .oe-split--wide-image { grid-template-columns: 1.4fr 1fr; }
  .oe-split--wide-text  { grid-template-columns: 1fr 1.4fr; }
}
.oe-split--reverse { direction: rtl; }
.oe-split--reverse > * { direction: ltr; }

/* Full-bleed within a constrained parent */
.oe-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Aspect ratio utilities — used on hero + product image blocks */
.oe-ratio-1-1  { aspect-ratio: 1 / 1; }
.oe-ratio-5-6  { aspect-ratio: 5 / 6; }
.oe-ratio-4-5  { aspect-ratio: 4 / 5; }
.oe-ratio-5-4  { aspect-ratio: 5 / 4; }
.oe-ratio-3-2  { aspect-ratio: 3 / 2; }
.oe-ratio-16-9 { aspect-ratio: 16 / 9; }
.oe-ratio > img,
.oe-ratio-1-1 > img,
.oe-ratio-5-6 > img,
.oe-ratio-4-5 > img,
.oe-ratio-5-4 > img,
.oe-ratio-3-2 > img,
.oe-ratio-16-9 > img { width: 100%; height: 100%; object-fit: cover; }

/* Hairline divider */
.oe-hairline { border-bottom: var(--oe-border-hair); }
.oe-hairline-top { border-top: var(--oe-border-hair); }