/* =====================================================================
   SKS plain pages — port of Shopify's sections/main-page.liquid frame
   (Dawn base.css .page-width / .page-width--narrow / .h0 / .rte and
   section-main-page.css) + the policy page frame (Shopify's policy
   renderer: .shopify-policy__container 512 px, 20 px side padding).
   Dawn's rem values assume a 10 px root; converted to px here.
   Measured on the live store at 1280 px (docs/sks-pdp/GAPS.md #105):
     plain page : container 726 px, padding 28/28, h1 52 px / 67.6, mb 40
     policy     : container 512 px, h1 40 px / 52, mb 26.8
     guide      : container 1200 px, no h1 (the guide carries its own)
     bagpipe / trust / designed policy : full bleed, no auto h1
   ===================================================================== */
.sks-page { --page-width: 1200px; --media-radius: 0; }

.sks-page .page-width { max-width: var(--page-width); margin: 0 auto; padding: 0 15px; }
@media screen and (min-width: 750px) {
  .sks-page .page-width { padding: 0 50px; }
  .sks-page .page-width--narrow { padding: 0 90px; }
}
@media screen and (min-width: 990px) {
  .sks-page .page-width--narrow { max-width: 726px; padding: 0; }
}
.sks-page .page-fullbleed { width: 100%; }

/* page.json: padding_top / padding_bottom 28 (× .75 below 750 px) */
.sks-page .section-main-padding { padding-top: 21px; padding-bottom: 21px; }
@media screen and (min-width: 750px) {
  .sks-page .section-main-padding { padding-top: 28px; padding-bottom: 28px; }
}

.sks-page .page-title { margin-top: 0; }
.sks-page .main-page-title { margin-bottom: 30px; }
@media screen and (min-width: 750px) {
  .sks-page .main-page-title { margin-bottom: 40px; }
}
.sks-page .h0 {
  font-family: var(--font-heading-family, Assistant, sans-serif);
  font-weight: 400;
  letter-spacing: 0.6px;
  color: rgb(18, 18, 18);
  line-height: 1.3;
  word-break: break-word;
  font-size: 40px;
}
@media only screen and (min-width: 750px) {
  .sks-page .h0 { font-size: 52px; }
}

/* Cornerstone's theme.css loads after this file and colours headings #444; Dawn's are the foreground (18,18,18).
   (0,1,1) beats theme.css but stays below the designed pages' own rules, which load later. */
.sks-page :is(h1, h2, h3, h4, h5, h6) { color: rgb(18, 18, 18); }

/* Dawn .rte */
:where(.sks-page) .rte:after { clear: both; content: ''; display: block; }
:where(.sks-page) .rte > *:first-child { margin-top: 0; }
:where(.sks-page) .rte > *:last-child { margin-bottom: 0; }
:where(.sks-page .rte) table { table-layout: fixed; }
@media screen and (min-width: 750px) {
  :where(.sks-page .rte) table td { padding-left: 12px; padding-right: 12px; }
}
:where(.sks-page) .rte img { height: auto; max-width: 100%; border-radius: var(--media-radius); }
:where(.sks-page) .rte ul, :where(.sks-page) .rte ol { list-style-position: inside; padding-left: 20px; }
:where(.sks-page) .rte li { list-style: inherit; }
:where(.sks-page) .rte li:last-child { margin-bottom: 0; }
:where(.sks-page) .rte a { color: rgba(18, 18, 18, 0.85); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness .1s ease; }
:where(.sks-page) .rte a:hover { color: rgb(18, 18, 18); text-decoration-thickness: 2px; }
:where(.sks-page) .rte blockquote { display: inline-flex; }
:where(.sks-page) .rte blockquote > * { margin: -5px 0 -5px 0; }
:where(.sks-page .rte) h1, :where(.sks-page .rte) h2, :where(.sks-page .rte) h3, :where(.sks-page .rte) h4, :where(.sks-page .rte) h5 {
  font-family: var(--font-heading-family, Assistant, sans-serif); font-weight: 400; letter-spacing: 0.6px; color: rgb(18, 18, 18); line-height: 1.3;
}
:where(.sks-page .rte) h1 { font-size: 30px; }
:where(.sks-page .rte) h2 { font-size: 20px; }
:where(.sks-page .rte) h3 { font-size: 17px; }
:where(.sks-page .rte) h4 { font-size: 15px; }
@media only screen and (min-width: 750px) {
  :where(.sks-page .rte) h1 { font-size: 40px; }
  :where(.sks-page .rte) h2 { font-size: 24px; }
  :where(.sks-page .rte) h3 { font-size: 18px; }
  :where(.sks-page .rte) h4 { font-size: 16px; }
}
:where(.sks-page .rte) table { border-collapse: collapse; width: 100%; }
:where(.sks-page .rte) th, :where(.sks-page .rte) td { border: 1px solid rgba(18, 18, 18, 0.2); padding: 8px; text-align: left; vertical-align: top; }

/* Shopify's policy page frame (/policies/*) */
.sks-page .shopify-policy__container { max-width: 512px; margin: 0 auto; padding: 0 20px; }
.sks-page .shopify-policy__title h1 { font-size: 40px; line-height: 1.3; margin: 0 0 26.8px; font-family: var(--font-heading-family, Assistant, sans-serif); font-weight: 400; letter-spacing: 0.6px; color: rgb(18, 18, 18); }
.sks-page .shopify-policy__body { margin-bottom: 40px; }