/*
 * CELLO Content Shell v1.0
 * ---------------------------------------------
 * Purpose: give public Cello content pages the same visual content width as
 * Homepage Smart Bento (1440px), without changing Bootstrap .container
 * globally and without touching Account / Checkout / Footer / Navigation.
 *
 * Two utilities are provided:
 *   .cello-content-shell       -> Bootstrap .container (15px inner padding).
 *                                 Frame max 1470px so the CONTENT edge lands
 *                                 at the same 1440px visual width as Homepage.
 *   .cello-content-shell-plain -> custom containers without Bootstrap padding;
 *                                 exact Homepage shell behavior.
 */

:root {
  --cello-content-max: 1440px;
  --cello-content-gutter: 20px;
}

/* Bootstrap containers have 15px horizontal padding. 1470 - 30 = 1440. */
@media (min-width: 768px) {
  .container.cello-content-shell {
    width: min(1470px, calc(100% - 10px)) !important;
    max-width: 1470px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Keep Bootstrap's proven mobile geometry. This avoids disturbing rows,
   columns, carousels and legacy modules while remaining within 3-5px of the
   Homepage mobile edge. */
@media (max-width: 767px) {
  .container.cello-content-shell {
    width: auto !important;
    max-width: none !important;
  }
}

/* Plain custom shells match Homepage Smart Bento exactly. */
.cello-content-shell-plain {
  width: min(var(--cello-content-max), calc(100% - 40px)) !important;
  max-width: var(--cello-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .cello-content-shell-plain {
    width: min(calc(100% - 24px), var(--cello-content-max)) !important;
  }
}

@media (max-width: 480px) {
  .cello-content-shell-plain {
    width: calc(100% - 20px) !important;
  }
}

/* Nested legacy .container blocks inside an already-expanded shell must not
   re-introduce Bootstrap's 1170px desktop cap. */
.container.cello-content-shell-fill {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}