/* =============================================================
   cri-one-store-match.css  v2.0
   Near-full visual match between the root cri-one.com site and
   the Magento store at /store/ (theme: CriOne/fluid, Luma base).

   v1.x only unified fonts, link color and page margins and
   deliberately left backgrounds alone. v2 adopts the store's
   full visual system: background, type scale, controls, tables,
   and footer chrome.

   ── ALL VALUES BELOW WERE MEASURED FROM THE LIVE STORE ────────
   (getComputedStyle on /store/bid-catalog-page.html and
    /store/autophi-collections/.../seed-series.html, 2026-07-25)

   Note on scale: the store renders with html{font-size:16px}
   while Luma authors in rem, so Luma's rem sizes land 1.6x
   larger than a stock Luma install. That is the real, live
   store look, so it is reproduced faithfully here. If you ever
   want it dialled back, scale --cri-scale below.

   ── SPECIFICITY CONTRACT ──────────────────────────────────────
   Base rules are written at `html body:where(:not(.cri-own-theme)) <element>` specificity
   (0,0,2 - 0,0,3). That is high enough to beat a page's own bare
   `body{}` / `h2{}` defaults, but LOWER than any class-based
   rule. So genuinely designed components on a page - the
   homepage .cgb-slider tile grid, auction dashboards, schedule
   widgets - keep their own styling automatically. No opt-out
   attribute is needed for them.

   Deliberate escape hatches that still exist:
     body.no-store-margins   - opt a page out of store margins
     .full-bleed             - opt one element out of margins
     .cri-keep               - opt an element out of the type reset
     body.cri-own-theme      - the page owns its whole palette. Nothing
                               in this file applies: no surface, ink,
                               type scale, controls or margins. Use it
                               for designs that are deliberately NOT the
                               store look (the neon music store, the
                               music page). Implemented with
                               :where(:not(...)) so the (0,0,N)
                               specificity contract above is unchanged.
   ============================================================= */

:root {
  /* ── surfaces ── */
  /* --cri-bg: #ffffff; */         /* page background                    */
  --cri-tint: #f4f4f4;       /* .page-footer                       */
  --cri-panel: #f0f0f0;      /* .nav-sections                      */
  --cri-bar: #6e716e;        /* .panel.wrapper + .copyright        */
  --cri-code-bg: #f6f6f6;    /* code / pre                         */

  /* ── ink ── */
  --cri-ink: #333333;        /* body text, headings                */
  --cri-muted: #575757;      /* footer + nav links                 */
  --cri-code-ink: #111111;

  /* ── lines ── */
  --cri-border: #cccccc;     /* buttons, pre, select               */
  --cri-border-input: #c2c2c2;

  /* ── accents ── */
  --cri-link: #006bb4;       /* Luma link blue                     */
  --cri-primary: #1979c3;    /* .action.primary                    */
  --cri-primary-hover: #006bb4;

  /* ── type ── */
  --cri-font: Arial, Helvetica, sans-serif;
  --cri-font-form: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cri-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  --cri-scale: 1;

  /* ── layout ── */
  --cri-maxw: 1280px;
  --cri-gutter: 20px;
}

/* =============================================================
   1. BASE  — store background, Arial, 16px, #333
============================================================= */
html {
  font-size: 16px;
}

html:not(:has(body.cri-own-theme)) {
  background: var(--cri-bg);
}

html body:where(:not(.cri-own-theme)) {
  background: var(--cri-bg);
  color: var(--cri-ink);
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  line-height: 1.6;
  margin: 0;
}

/* =============================================================
   2. TYPE SCALE  — measured from the store cascade
============================================================= */
html body:where(:not(.cri-own-theme)) h1,
html body:where(:not(.cri-own-theme)) .page-title {
  font-family: var(--cri-font);
  font-size: calc(28px * var(--cri-scale));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cri-ink);
  margin: 0 0 4px;
  padding: 0 0 8px;
}

html body:where(:not(.cri-own-theme)) h2 {
  font-family: var(--cri-font);
  font-size: calc(41.6px * var(--cri-scale));
  font-weight: 300;
  line-height: 1.1;
  color: var(--cri-ink);
  margin: 40px 0 32px;
}

html body:where(:not(.cri-own-theme)) h3 {
  font-family: var(--cri-font);
  font-size: calc(28.8px * var(--cri-scale));
  font-weight: 600;
  line-height: 1.1;
  color: var(--cri-ink);
  margin: 32px 0 16px;
}

html body:where(:not(.cri-own-theme)) h4 {
  font-family: var(--cri-font);
  font-size: calc(22.4px * var(--cri-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--cri-ink);
  margin: 32px 0;
}

html body:where(:not(.cri-own-theme)) h5 {
  font-family: var(--cri-font);
  font-size: calc(19.2px * var(--cri-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--cri-ink);
  margin: 32px 0;
}

html body:where(:not(.cri-own-theme)) h6 {
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  font-weight: 700;
  line-height: 1.1;
  color: var(--cri-ink);
  margin: 32px 0;
}

html body:where(:not(.cri-own-theme)) p {
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  line-height: 1.6;
  color: var(--cri-ink);
  margin: 0 0 16px;
}

html body:where(:not(.cri-own-theme)) ul,
html body:where(:not(.cri-own-theme)) ol {
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  line-height: 1.6;
  color: var(--cri-ink);
  margin: 0 0 40px;
  padding-left: 40px;
}

html body:where(:not(.cri-own-theme)) li {
  margin-bottom: 16px;
}

html body:where(:not(.cri-own-theme)) ul ul,
html body:where(:not(.cri-own-theme)) ol ol,
html body:where(:not(.cri-own-theme)) ul ol,
html body:where(:not(.cri-own-theme)) ol ul {
  margin-bottom: 0;
}

html body:where(:not(.cri-own-theme)) blockquote {
  font-family: var(--cri-font-form);
  font-size: calc(22.4px * var(--cri-scale));
  line-height: 1.43;
  font-style: normal;
  color: var(--cri-ink);
  border-left: 0;
  margin: 0 0 20px 40px;
  padding: 0;
}

html body:where(:not(.cri-own-theme)) code,
html body:where(:not(.cri-own-theme)) kbd,
html body:where(:not(.cri-own-theme)) samp {
  font-family: var(--cri-mono);
  font-size: calc(19.2px * var(--cri-scale));
  background: var(--cri-code-bg);
  color: var(--cri-code-ink);
  padding: 2px 4px;
  border-radius: 0;
  white-space: nowrap;
}

html body:where(:not(.cri-own-theme)) pre {
  font-family: var(--cri-mono);
  font-size: calc(19.2px * var(--cri-scale));
  background: var(--cri-code-bg);
  color: var(--cri-code-ink);
  border: 1px solid var(--cri-border);
  padding: 10px;
  margin: 0 0 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

html body:where(:not(.cri-own-theme)) pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: inherit;
}

html body:where(:not(.cri-own-theme)) small {
  font-size: calc(12px * var(--cri-scale));
  line-height: 1.6;
}

html body:where(:not(.cri-own-theme)) hr {
  border: 0;
  border-top: 1px solid var(--cri-border);
  margin: 20px 0;
}

/* Opt one element (and its subtree) out of the type reset */
.cri-keep,
.cri-keep h1, .cri-keep h2, .cri-keep h3,
.cri-keep h4, .cri-keep h5, .cri-keep h6,
.cri-keep p, .cri-keep ul, .cri-keep ol, .cri-keep li {
  font: inherit;
  margin: revert;
  padding: revert;
  line-height: revert;
}

/* =============================================================
   3. LINKS  — Luma blue #006bb4, no underline until hover
============================================================= */
/* Specificity note: do NOT add :link/:visited here. A pseudo-class
   counts as a class, so `html body:where(:not(.cri-own-theme)) a:link` scores (0,1,3) and would
   outrank a page's own `.cta-btn { color:#fff }` (0,1,0) — turning
   white button labels store-blue on their dark fill. Plain
   `html body:where(:not(.cri-own-theme)) a` is (0,0,3): high enough to beat a bare `a {}` rule,
   low enough that any class-based component styling still wins.
   Author origin already beats the UA's :visited purple, so the
   bare selector is sufficient. :hover/:focus are wrapped in
   :where() to keep them at (0,0,3) for the same reason. */
html body:where(:not(.cri-own-theme)) a {
  color: var(--cri-link);
  text-decoration: none;
}

html body:where(:not(.cri-own-theme)) a:where(:hover) {
  color: var(--cri-primary-hover);
  text-decoration: underline;
}

html body:where(:not(.cri-own-theme)) a:where(:focus-visible) {
  outline: 2px solid var(--cri-primary);
  outline-offset: 2px;
}

/* Links sitting on the store's dark grey chrome stay white */
html body:where(:not(.cri-own-theme)) #crione-topnav a,
html body:where(:not(.cri-own-theme)) .copyright a,
html body:where(:not(.cri-own-theme)) .cri-copyright a,
html body:where(:not(.cri-own-theme)) .cri-on-dark a {
  color: #ffffff;
}

::selection {
  background: var(--cri-primary);
  color: #ffffff;
}

/* =============================================================
   4. CONTROLS  — Luma buttons + inputs
============================================================= */
html body:where(:not(.cri-own-theme)) button,
html body:where(:not(.cri-own-theme)) .cri-btn,
html body:where(:not(.cri-own-theme)) input[type="button"],
html body:where(:not(.cri-own-theme)) input[type="submit"],
html body:where(:not(.cri-own-theme)) input[type="reset"] {
  font-family: var(--cri-font-form);
  font-size: calc(22.4px * var(--cri-scale));
  font-weight: 600;
  line-height: 1.14;
  background: #eeeeee;
  color: var(--cri-ink);
  border: 1px solid var(--cri-border);
  border-radius: 3px;
  padding: 7px 15px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  box-shadow: none;
}

html body:where(:not(.cri-own-theme)) button:hover,
html body:where(:not(.cri-own-theme)) .cri-btn:hover,
html body:where(:not(.cri-own-theme)) input[type="button"]:hover,
html body:where(:not(.cri-own-theme)) input[type="submit"]:hover {
  background: #e2e2e2;
  border-color: #d6d6d6;
  color: #555555;
}

html body:where(:not(.cri-own-theme)) button:disabled,
html body:where(:not(.cri-own-theme)) .cri-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Primary action — store's blue CTA */
html body:where(:not(.cri-own-theme)) .action.primary,
html body:where(:not(.cri-own-theme)) .cri-btn-primary,
html body:where(:not(.cri-own-theme)) button.primary {
  font-family: var(--cri-font-form);
  font-size: calc(22.4px * var(--cri-scale));
  font-weight: 600;
  background: var(--cri-primary);
  border: 1px solid var(--cri-primary);
  border-radius: 3px;
  color: #ffffff;
  padding: 14px 17px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

html body:where(:not(.cri-own-theme)) .action.primary:hover,
html body:where(:not(.cri-own-theme)) .cri-btn-primary:hover,
html body:where(:not(.cri-own-theme)) button.primary:hover {
  background: var(--cri-primary-hover);
  border-color: var(--cri-primary-hover);
  color: #ffffff;
  text-decoration: none;
}

html body:where(:not(.cri-own-theme)) input[type="text"],
html body:where(:not(.cri-own-theme)) input[type="search"],
html body:where(:not(.cri-own-theme)) input[type="email"],
html body:where(:not(.cri-own-theme)) input[type="url"],
html body:where(:not(.cri-own-theme)) input[type="tel"],
html body:where(:not(.cri-own-theme)) input[type="number"],
html body:where(:not(.cri-own-theme)) input[type="password"],
html body:where(:not(.cri-own-theme)) input[type="date"],
html body:where(:not(.cri-own-theme)) input[type="datetime-local"],
html body:where(:not(.cri-own-theme)) input[type="time"],
html body:where(:not(.cri-own-theme)) textarea {
  font-family: var(--cri-font-form);
  font-size: calc(14px * var(--cri-scale));
  line-height: 1.43;
  background: #ffffff;
  color: #000000;
  border: 1px solid var(--cri-border-input);
  border-radius: 1px;
  padding: 0 9px;
  height: 32px;
  box-sizing: border-box;
  box-shadow: none;
}

html body:where(:not(.cri-own-theme)) textarea {
  height: auto;
  padding: 10px;
  min-height: 96px;
}

html body:where(:not(.cri-own-theme)) select {
  font-family: var(--cri-font-form);
  font-size: calc(14px * var(--cri-scale));
  line-height: 1.43;
  background: #ffffff;
  color: #000000;
  border: 1px solid var(--cri-border);
  border-radius: 1px;
  padding: 4px 25px 5px 10px;
  height: 32px;
  box-sizing: border-box;
}

html body:where(:not(.cri-own-theme)) input:focus,
html body:where(:not(.cri-own-theme)) textarea:focus,
html body:where(:not(.cri-own-theme)) select:focus {
  border-color: #999999;
  outline: 0;
  box-shadow: none;
}

html body:where(:not(.cri-own-theme)) label {
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  line-height: 1.6;
  color: var(--cri-ink);
}

/* =============================================================
   5. TABLES  — Luma data table
============================================================= */
html body:where(:not(.cri-own-theme)) table {
  font-family: var(--cri-font);
  font-size: calc(16px * var(--cri-scale));
  line-height: 1.6;
  color: var(--cri-ink);
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
}

html body:where(:not(.cri-own-theme)) th {
  font-weight: 700;
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--cri-border);
  vertical-align: top;
}

html body:where(:not(.cri-own-theme)) td {
  padding: 11px 10px;
  border-bottom: 1px solid #e8e8e8;
  vertical-align: top;
}

html body:where(:not(.cri-own-theme)) tbody tr:last-child td {
  border-bottom: 0;
}

/* Wide tables must scroll inside their own box, never the page */
html body:where(:not(.cri-own-theme)) .cri-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* =============================================================
   6. TOP NAV BAR  — matches the store's .panel.wrapper (#6e716e)
   (carried forward unchanged from v1.3 — already an exact match)
============================================================= */
#crione-topnav {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cri-bar) !important;
  padding: 4px 12px;
  min-height: 32px;
  border-bottom: 1px solid #585b58 !important;
  font-family: var(--cri-font);
  font-size: 12px;
}
#crione-topnav a,
#crione-topnav a:link,
#crione-topnav a:visited {
  color: #ffffff !important;
  text-decoration: none;
}
#crione-topnav a:hover {
  color: #eef1f4 !important;
  text-decoration: underline;
}
#crione-topnav .crione-nav-brand {
  color: #fff !important;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
}
#crione-topnav .crione-nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
#crione-topnav .crione-nav-links a {
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap;
}
#crione-topnav .crione-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff !important;
  font-size: 1.2em;
  cursor: pointer;
  padding: 2px;
}
#crione-topnav .crione-nav-rss {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
@media (max-width: 600px) {
  #crione-topnav {
    flex-wrap: wrap;
    padding: 4px 8px;
  }
  #crione-topnav .crione-nav-toggle {
    display: block;
  }
  #crione-topnav .crione-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
  }
  #crione-topnav.open .crione-nav-links {
    display: flex;
  }
  #crione-topnav .crione-nav-links a {
    text-align: left;
    padding: 4px 8px;
  }
}

/* =============================================================
   7. FOOTER CHROME  — matches .page-footer + .copyright
============================================================= */
html body:where(:not(.cri-own-theme)) > footer,
html body:where(:not(.cri-own-theme)) .page-footer,
html body:where(:not(.cri-own-theme)) .cri-footer {
  background: var(--cri-tint);
  color: var(--cri-ink);
  padding: 25px 0;
  margin-top: 40px;
  font-family: var(--cri-font);
}

html body:where(:not(.cri-own-theme)) > footer a,
html body:where(:not(.cri-own-theme)) .page-footer a,
html body:where(:not(.cri-own-theme)) .cri-footer a {
  color: var(--cri-muted);
  font-size: calc(14px * var(--cri-scale));
  line-height: 1.6;
  text-decoration: none;
}

html body:where(:not(.cri-own-theme)) > footer a:hover,
html body:where(:not(.cri-own-theme)) .page-footer a:hover,
html body:where(:not(.cri-own-theme)) .cri-footer a:hover {
  color: var(--cri-muted);
  text-decoration: underline;
}

html body:where(:not(.cri-own-theme)) .copyright,
html body:where(:not(.cri-own-theme)) .cri-copyright {
  background: var(--cri-bar);
  color: #ffffff;
  font-size: 12px;
  padding: 10px;
  text-align: center;
  display: block;
  margin: 0;
  max-width: none;
}

html body:where(:not(.cri-own-theme)) .copyright a,
html body:where(:not(.cri-own-theme)) .cri-copyright a {
  color: #ffffff;
  text-decoration: none;
}

/* =============================================================
   8. STORE-MATCHING PAGE MARGINS  (carried forward from v1.3)
   Mirrors the store's .page-main container:
     max-width: 1280px; padding: 0 20px; auto side margins.
   Applied to every direct child of <body> EXCEPT:
     - the sticky nav (#crione-topnav)  — stays full-width
     - <header> / <footer>              — carry full-bleed
                                          backgrounds of their own
     - .full-bleed                      — per-element opt-out
     - non-visual elements
   Opt a whole page out with class="no-store-margins" on <body>.
============================================================= */
body:not(.no-store-margins):not(.cri-own-theme) > *:not(#crione-topnav):not(header):not(footer):not(.full-bleed):not(script):not(style):not(noscript):not(template):not(link):not(meta) {
  max-width: var(--cri-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cri-gutter);
  padding-right: var(--cri-gutter);
  box-sizing: border-box;
}

/* =============================================================
   9. DARK-PAGE CONVERSION — deliberately NOT done here.

   videos.html and music/index.html were the site's two genuinely
   dark pages. Both drive their design from custom properties
   (--bg/--ink/--accent and --bg-primary/--text-primary), so the
   tempting fix is to retarget those properties from this file.

   Don't. Those names are not page-private: schedule/index.html,
   search/index.html and search/finder.html declare the SAME names
   with different meanings (e.g. the scheduler's --accent is its
   teal #1e5c78, and --line/--tint drive its layout). Redefining
   them globally would silently restyle pages this file has no
   business touching.

   Both dark pages were therefore converted at source — their own
   :root palettes now hold the store values, which also keeps each
   page self-consistent if this stylesheet ever fails to load.
============================================================= */

/* =============================================================
   10. HOMEPAGE HERO — PRESERVED
   The .cgb-slider tile grid is the homepage's signature art and
   is explicitly kept (2026-07-25 decision). Its own class-based
   rules already outrank everything above, but the base font-size
   bump (14px -> 16px) would still reflow the tile metrics, so the
   slider keeps its own baseline.
============================================================= */
html body:where(:not(.cri-own-theme)) .cgb-slider,
html body:where(:not(.cri-own-theme)) #cgb-tagcloud {
  font-size: 14px;
}

/* =============================================================
   11. BLOG TOC WIDGET FIX  (carried forward from v1.3)
   The theme has `.single .cri-one-toc { position: sticky }` but a
   plugin restyles the widget as a compact inline-block button, so
   the sticky rule leaves a tiny pill floating over the content.
============================================================= */
.single .cri-one-toc,
.single-post .cri-one-toc,
.cri-one-toc {
  position: static !important;
  top: auto !important;
  margin-top: 14px !important;
}
#cri-one-toc-wrap {
  position: static !important;
}

/* =============================================================
   12. RESPONSIVE  — store drops to a single column under 768px
============================================================= */
@media (max-width: 768px) {
  html body:where(:not(.cri-own-theme)) h2 { font-size: calc(32px * var(--cri-scale)); margin-top: 28px; }
  html body:where(:not(.cri-own-theme)) h3 { font-size: calc(24px * var(--cri-scale)); }
  html body:where(:not(.cri-own-theme)) ul,
  html body:where(:not(.cri-own-theme)) ol { padding-left: 24px; }
  html body:where(:not(.cri-own-theme)) table { font-size: calc(14px * var(--cri-scale)); }
  html body:where(:not(.cri-own-theme)) th,
  html body:where(:not(.cri-own-theme)) td { padding: 8px 6px; }
  html body:where(:not(.cri-own-theme)) .action.primary,
  html body:where(:not(.cri-own-theme)) .cri-btn-primary { padding: 12px 14px; }
}

@media (max-width: 480px) {
  html body:where(:not(.cri-own-theme)) button,
  html body:where(:not(.cri-own-theme)) .cri-btn,
  html body:where(:not(.cri-own-theme)) .action.primary,
  html body:where(:not(.cri-own-theme)) .cri-btn-primary { font-size: calc(18px * var(--cri-scale)); }
}