/* Content pages on the storefront appearance (SPEC-050): About, Insights, Shipping, area pages.

   Why this is a file of its own and not part of storefront_design.css: Storefront::ThemeRegistry
   .fingerprint hashes storefront_design.css into every stored version 3 appearance revision. Change
   one byte of that file and each store's active appearance stops being "compatible", so the store
   renders the committed default instead of what its owner chose. This file is outside the
   fingerprint, so stored appearances keep working. Do not move these rules into that file.
   (For the same reason its opening comment still lists these pages as "default-only"; that
   comment is out of date and cannot be corrected.)

   Every rule is scoped to .appearance-v2, which version 2 and version 3 appearances both carry.
   A version 1 (legacy) appearance has no such class and is untouched; views give it their original
   classes through appearance_classes(themed, legacy:).

   <main> on these pages carries "appearance-content store-editorial" (appearance_content_class).
   The long prefix below is deliberate: it out-ranks every .appearance-content rule in
   storefront_design.css, so nothing here depends on which stylesheet loads last.

   Text colours come in validated pairs (Storefront::DesignSettings::PAIRS). Only these reach 4.5:1
   in every appearance a store can save:
     text, text-muted and accent    on surface or surface-raised
     accent-contrast                on accent
   text-muted on accent is not a pair: on the emphasis panel, muted text is accent-contrast too.
   Never lay a translucent surface over another surface behind text; the blend is not a pair. */

/* --- Editorial pages are not catalogues --------------------------------------------------------
   storefront_design.css makes every article, aside and .store-panel inside .appearance-content a
   catalogue card: padding from the spacing setting, and on article/aside a card-style border.
   Here an article is often only the page wrapper and panels keep their reading padding, so the
   page's own (Tailwind layer) values are restored. A panel opts in with a role class below. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial :is(article,aside,.store-panel) { padding:revert-layer; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial :is(article,aside):not(.store-panel,.store-panel-subtle,.store-panel-emphasis) {
  border:revert-layer; border-radius:revert-layer; box-shadow:revert-layer;
}

/* --- Panel roles (SPEC-050 §3.2) -----------------------------------------------------------------
   .store-panel           raised surface, text, border, corners
   .store-panel-subtle    surface, text, corners (add a border with utilities where one is wanted)
   .store-panel-emphasis  accent, with accent-contrast for everything inside it
   .store-panel-nested    a box inside the emphasis panel: no fill, an edge that reaches 3:1 */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel {
  background:var(--store-surface-raised); color:var(--store-text); border:1px solid var(--store-border); border-radius:var(--store-radius);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel-subtle {
  background:var(--store-surface); color:var(--store-text); border-radius:var(--store-radius);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel-emphasis {
  background:var(--store-accent); color:var(--store-accent-contrast); border:1px solid var(--store-accent); border-radius:var(--store-radius);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel-emphasis :is(*,a:not(.store-button):not(.vj-cta)) {
  color:var(--store-accent-contrast);
}
/* 88% of accent-contrast over the accent keeps the edge at 3:1 or better for every accent pair
   that passes validation (searched numerically; 80% does not). */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel-emphasis .store-panel-nested {
  background:transparent; border:1px solid color-mix(in srgb, var(--store-accent-contrast) 88%, transparent); border-radius:var(--store-radius);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-panel-emphasis :is(a,button,input,select,textarea):focus-visible {
  outline-color:var(--store-accent-contrast);
}
/* The card-style setting applies to panels as it does to catalogue cards. A panel that is itself
   a link keeps its edge under "flat" (a control must show where it ends) and gains a hover edge. */
.storefront-shell.appearance-v2.card_style-flat main.appearance-content.store-editorial :is(.store-panel,.store-panel-subtle,.store-panel-emphasis):not(a) {
  border-color:transparent; box-shadow:none;
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial a:is(.store-panel,.store-panel-subtle):hover { border-color:var(--store-accent); }
/* Links in running text are underlined, so they do not rely on colour alone. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial :is(p,li,dd,blockquote) a:not([class]) {
  text-decoration:underline; text-underline-offset:.2em;
}

/* ================================================================================================
   Row 182 — Insights listing and article (app/views/blog/*), including .store-article-body.
   Only row 182 edits between this header and its end marker.
   ================================================================================================ */

/* Long words and addresses break at the box edge instead of running past it or under a badge. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-wrap { overflow-wrap:anywhere; }

/* A listing card is one whole-card link. Cards fill the page column and <main> clips sideways
   overflow, so the usual ring (outside the box) loses its left and right sides on a phone. This one
   sits just inside the card's edge, whatever the width. It does not depend on hover. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial a.store-insight-card { color:var(--store-text); }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial a.store-insight-card:focus-visible { outline:3px solid var(--store-accent); outline-offset:-4px; }

/* --- The article body --------------------------------------------------------------------------
   Tailwind's reset removes every margin, size, bullet and number, and no typography plugin is
   installed, so the body is typeset here. Colours are the validated pairs on the raised panel:
   text, text-muted and accent on surface-raised; code and tables sit on surface. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body { max-width:70ch; font-size:1.0625rem; line-height:1.75; overflow-wrap:anywhere; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body :is(p,ul,ol,blockquote) { margin:0 0 1.15em; }

.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body :is(h2,h3,h4) {
  margin:1.9em 0 .6em; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:var(--store-text);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body h2 { font-size:1.65em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body h3 { font-size:1.35em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body h4 { font-size:1.15em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body :is(h2,h3) + :is(h3,h4) { margin-top:.9em; }

.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body ul { list-style:disc outside; padding-left:1.5em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body ol { list-style:decimal outside; padding-left:1.75em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body ul ul { list-style-type:circle; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body li { margin:.4em 0; padding-left:.2em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body li::marker { color:var(--store-accent); }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body li > :is(ul,ol) { margin:.4em 0 0; }

.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body blockquote {
  padding:.1em 0 .1em 1.1em; border-left:4px solid var(--store-accent); color:var(--store-text-muted); font-style:italic;
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body blockquote > p { margin:0 0 .6em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body blockquote > :last-child { margin-bottom:0; }

.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body a { color:var(--store-accent); text-decoration:underline; text-underline-offset:.2em; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body a:hover { text-decoration-thickness:2px; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body hr { margin:2em 0; border:0; border-top:1px solid var(--store-border); }

.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body :not(pre) > code {
  padding:.12em .45em; border-radius:var(--store-radius); background:var(--store-surface); color:var(--store-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
}

/* A code block or a table wider than the column scrolls inside this box and never widens the page.
   The box is added around each <pre> and <table> by ArticleBodyHelper: it is focusable, so a
   keyboard can scroll it, and labelled, so a screen reader can name it. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body .store-article-scroll {
  margin:0 0 1.15em; max-width:100%; overflow:auto; background:var(--store-surface); color:var(--store-text);
  border:1px solid var(--store-border); border-radius:var(--store-radius);
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body .store-article-scroll:focus-visible { outline:3px solid var(--store-accent); outline-offset:2px; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body pre {
  margin:0; padding:1.1em 1.3em; background:var(--store-surface); color:var(--store-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.875em; line-height:1.6;
  white-space:pre; overflow-wrap:normal; word-break:normal;
}
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body pre code { padding:0; border-radius:0; background:none; font-size:inherit; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body table { width:100%; border-collapse:collapse; font-size:.9em; line-height:1.5; overflow-wrap:normal; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body :is(th,td) { padding:.7em .95em; border-bottom:1px solid var(--store-border); text-align:left; vertical-align:top; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body thead th { background:var(--store-surface-raised); color:var(--store-text); font-weight:700; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body tbody tr:last-child td { border-bottom:0; }

/* The body starts and ends flush with its container. These come last: they must beat the spacing above. */
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body > :first-child { margin-top:0; }
.storefront-shell.appearance-v2 main.appearance-content.store-editorial .store-article-body > :last-child { margin-bottom:0; }

/* ===== end of row 182 ============================================================================ */


/* Rules shared by more than one page belong above the row 182 header, not between the two sections. */


/* ================================================================================================
   Row 183 — Shipping, area pages, the short About page, legacy header chips.
   Only row 183 edits between this header and its end marker.
   ================================================================================================ */

/* ===== end of row 183 ============================================================================ */