/* ==========================================================================
   LAYOUT — Container, page structure, sidebar grids, utilities.
   ========================================================================== */

/* ---------- CONTAINER ---------- */

.container,
.otb-container {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}

.container--full-width {
  max-width: 100%;
  padding: 0;
}

/* Padding variants */
.container--p0  { padding-left: 0; padding-right: 0; }

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

@media (min-width: 670px) {
  .container,
  .otb-container {
    padding-left: var(--container-padding-medium);
    padding-right: var(--container-padding-medium);
  }
}

@media (min-width: 995px) {
  .container,
  .otb-container {
    width: 100%;
    max-width: var(--container-max-width);
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* ---------- NEUTRAL BACKGROUND (commerce, account pages) ---------- */
/* Single color that works with Stripe's default styling in forced light mode. */

.page-neutral-bg .main {
  background: #f0f0f0;
  padding-top: var(--spacing-lg);
}

/* ---------- SIDEBAR LAYOUTS ---------- */

.layout--with-sidebar {
  display: block;
}

@media (min-width: 995px) {
  .layout--with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-lg);
  }

  .layout--with-sidebar.layout--sidebar-first {
    grid-template-columns: 300px 1fr;
  }
}

/* ---------- UTILITIES ---------- */

.hidden { display: none !important; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .container--p0-mobile { padding-left: 0; padding-right: 0; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}