/*
 * Connected homepage chrome follows the existing .cc-shell content edge.
 * Load after the base, theme and review styles. Percentages use the available
 * page width, so a reserved scrollbar does not introduce a horizontal offset.
 * General shell widths remain unchanged. The hero also uses this shared
 * width at tablet and wide-screen breakpoints.
 * The record section's outer tablet width cap is removed so its text shares
 * the page edge; its paragraphs and card retain their reading-width limits.
 */
body.option-connected {
  --cc-layout-gutter: max(56px, calc((100% - 1280px) / 2));
}

body.option-connected .site-header,
body.option-connected .site-footer,
body.option-connected .palette-review-tools {
  padding-inline: var(--cc-layout-gutter);
}

body.option-connected .cc-hero.cc-shell {
  width: calc(100% - var(--cc-layout-gutter) - var(--cc-layout-gutter));
}

@media (min-width: 1600px) {
  body.option-connected {
    --cc-layout-gutter: max(80px, calc((100% - 1320px) / 2));
  }
}

/* Preserve the existing full-navigation / menu breakpoint. */
@media (max-width: 1399px) {
  body.option-connected .site-nav {
    padding-inline: var(--cc-layout-gutter);
  }
}

@media (max-width: 1100px) {
  body.option-connected {
    --cc-layout-gutter: 36px;
  }
}

@media (max-width: 900px) {
  body.option-connected {
    --cc-layout-gutter: 24px;
  }

  body.option-connected .cc-record-grid {
    max-width: none;
  }
}

@media (max-width: 680px) {
  body.option-connected {
    --cc-layout-gutter: 20px;
  }
}