/* CRI-ONE — Magento echo, site-wide.
   The Magento theme's own tokens, applied to every non-store surface
   so the whole of cri-one.com reads as one calm, utilitarian voice.
   No overrides on the store itself — Magento already speaks this. */

:root {
  --ink:         #1a1a1a;   /* headings */
  --body:        #494949;   /* body copy */
  --muted:       #686868;   /* meta, captions */
  --hairline:    #e5e5e5;   /* dividers, borders */
  --surface-1:   #ffffff;   /* page paper */
  --surface-2:   #f5f5f5;   /* card/table fill */
  --code-bg:     #f0f0f0;
  --link:        #1979c3;   /* Magento's classic blue */
  --link-hover:  #006bb4;
  --success:     #006400;
  --warn:        #6f4400;
  --sans: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono: Menlo,Monaco,Consolas,'Courier New',monospace;
}

html, body {
  background: var(--surface-1);
  color: var(--body);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.2;
  margin: 1.4em 0 0.5em;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p, li, dd { color: var(--body); margin: 0 0 1em; }
small, .meta, .caption, figcaption, time { color: var(--muted); font-size: 0.86em; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--link); }
a:hover { color: var(--link-hover); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 2em 0; }

button, input[type="submit"], .btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 9px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #ffffff;
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
button:hover, input[type="submit"]:hover, .btn:hover {
  background: var(--link-hover);
  border-color: var(--link-hover);
}

input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], textarea, select {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 8px 12px;
  border: 1px solid #c2c2c2;
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(25, 121, 195, 0.15);
}

blockquote, .pullquote {
  border-left: 3px solid var(--hairline);
  padding: 12px 20px;
  margin: 1.5em 0;
  color: var(--muted);
  font-style: italic;
}

code {
  font-family: var(--mono);
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.9em;
}
pre {
  font-family: var(--mono);
  background: var(--code-bg);
  padding: 14px 18px;
  border-radius: 3px;
  overflow-x: auto;
  line-height: 1.5;
}

table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.95em; }
th { text-align: left; padding: 10px 12px; background: var(--surface-2); color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--hairline); }
td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); color: var(--body); }

img { max-width: 100%; height: auto; }

/* ── PRODUCT DESCRIPTIONS — scoped rhythm.
      Bright headings inside the copy, pale-cream around callouts,
      grey scaffolding around tables and metadata. Scoped so the
      Magento theme's own layout stays intact everywhere else. */

.product.attribute.description,
.category-description,
.cms-content,
.product-info-main .description,
.product.attribute.description .value {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  width: 100%;
  max-width: none;
}

/* ── WIKIPEDIA INFOBOX WRAP ──
   On wide screens, float the product info panel (price / SKU / stock /
   Add-to-Cart) to the top-right and let the description prose wrap
   around it — the way a Wikipedia article wraps around its right-side
   infobox. Below 1100px it collapses to normal stacked flow. */
@media (min-width: 1100px) {
  .product-info-main {
    float: right !important;
    width: 320px !important;
    margin: 0 0 20px 32px !important;
    padding: 20px !important;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 3px;
  }
  .product.attribute.description,
  .product.attribute.description .value,
  .cms-content { display: block; overflow: visible; }
  .product.attribute.description::after,
  .cms-content::after { content: ""; display: block; clear: both; }
  .product.attribute.description p,
  .cms-content p { text-align: justify; hyphens: auto; }
}

/* Give the long-form description generous vertical breathing */
.product.attribute.description > * + *,
.category-description > * + *,
.cms-content > * + *,
.product-info-main .description > * + * { margin-top: 0.9em; }

/* Bright: subheads inside descriptions get the link-blue accent
   underlined by a thin hairline — a subtle POP without shouting */
.product.attribute.description h2,
.product.attribute.description h3,
.category-description h2,
.category-description h3,
.cms-content h2,
.cms-content h3,
.product-info-main .description h2,
.product-info-main .description h3 {
  color: var(--link);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  letter-spacing: -0.01em;
}
.product.attribute.description h2, .category-description h2,
.cms-content h2, .product-info-main .description h2 { font-size: 1.4rem; }
.product.attribute.description h3, .category-description h3,
.cms-content h3, .product-info-main .description h3 { font-size: 1.15rem; }

/* Bright: strong keywords lift to ink black */
.product.attribute.description strong,
.category-description strong,
.cms-content strong { color: var(--ink); }

/* Pale: blockquotes and pull-callouts sit on a warm-cream plate */
.product.attribute.description blockquote,
.category-description blockquote,
.cms-content blockquote {
  background: #faf6ee;
  border-left: 3px solid var(--link);
  padding: 16px 20px;
  margin: 1.4em 0;
  color: #2a2418;
  font-style: italic;
  font-family: Georgia, 'Iowan Old Style', serif;
}

/* Pale: first paragraph reads as a lede */
.product.attribute.description > p:first-of-type,
.category-description > p:first-of-type,
.cms-content > p:first-of-type {
  font-size: 1.06em;
  color: var(--ink);
}

/* Grey: dividers as thin hairlines */
.product.attribute.description hr,
.category-description hr,
.cms-content hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 1.8em 0;
}

/* Grey: tables inside descriptions get the same clean scaffold */
.product.attribute.description table,
.category-description table,
.cms-content table {
  border: 1px solid var(--hairline);
  margin: 1.2em 0;
  font-size: 0.95rem;
}
.product.attribute.description table th,
.category-description table th,
.cms-content table th {
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 600;
}
.product.attribute.description table td,
.category-description table td,
.cms-content table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

/* Lists — proper hanging indent so they don't look mashed */
.product.attribute.description ul,
.product.attribute.description ol,
.category-description ul, .category-description ol,
.cms-content ul, .cms-content ol {
  padding-left: 1.4em;
  margin: 0.6em 0 1em;
}
.product.attribute.description li,
.category-description li,
.cms-content li { margin: 0.35em 0; }

/* Links inside descriptions keep the Magento link blue with underline */
.product.attribute.description a,
.category-description a,
.cms-content a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product.attribute.description a:hover,
.category-description a:hover,
.cms-content a:hover { color: var(--link-hover); }

/* Small / meta / captions stay grey */
.product.attribute.description small,
.product.attribute.description .meta,
.product.attribute.description .caption,
.category-description small,
.cms-content small { color: var(--muted); font-size: 0.88em; }

/* Images inside descriptions get a hairline frame + centered block layout */
.product.attribute.description img,
.category-description img,
.cms-content img {
  display: block;
  margin: 1.2em auto;
  border: 1px solid var(--hairline);
  padding: 4px;
  background: var(--surface-1);
}

/* ── FLAGSHIP FAN STAGE — the "Twenty Flagship Items" strip was rendering
      as one wall of concatenated inline links. Give each card its own row
      with rank, title, and price properly spaced. Hide the duplicate
      .short / .tag labels that were carousel markers. */
html body .cri-fan-stage { display: block; }
html body .cri-fan-stage .cri-fan-card {
  display: flex !important;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--body);
  line-height: 1.4;
}
html body .cri-fan-stage .cri-fan-card:hover {
  background: var(--surface-2);
}
html body .cri-fan-stage .cri-fan-card > .short,
html body .cri-fan-stage .cri-fan-card > .tag { display: none !important; }
html body .cri-fan-stage .cri-fan-card > .rank {
  font-family: var(--mono);
  color: var(--muted);
  font-weight: 700;
  min-width: 2.4em;
  flex: 0 0 auto;
}
html body .cri-fan-stage .cri-fan-card > .title {
  color: var(--link);
  flex: 1 1 auto;
  font-weight: 600;
}
html body .cri-fan-stage .cri-fan-card:hover > .title { color: var(--link-hover); text-decoration: underline; }
html body .cri-fan-stage .cri-fan-card > .price {
  color: var(--ink);
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}
html body .cri-fan-stage .cri-fan-card.is-active {
  background: var(--surface-2);
  border-left: 3px solid var(--link);
  padding-left: 11px;
}

/* Rank-jump chip strip (01–20 buttons) sits as a clean flex row */
html body .cri-fan-jump {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}
html body .cri-fan-jump > * {
  font-family: var(--mono);
  padding: 6px 9px;
  min-width: 2.4em;
  text-align: center;
  border: 1px solid var(--hairline);
  color: var(--body);
  text-decoration: none;
  border-radius: 2px;
}
html body .cri-fan-jump > *:hover,
html body .cri-fan-jump > *.is-active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

/* ── LONG-WORD BREAKING — stop URLs, SKUs, product codes, and long
      German-style compound words from overflowing containers. */
html, body,
html body p, html body li, html body td, html body th, html body dd, html body dt,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body a, html body blockquote {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* ── TABLE PERCENTS — every table fills its container; column widths
      distribute proportionally by default; wrap in a scroll shell
      when a table can't shrink below its content on narrow screens. */
html body table {
  width: 100% !important;
  max-width: 100%;
  table-layout: auto;
}
html body table th, html body table td {
  min-width: 0;      /* let cells actually shrink below content */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Percent-friendly two- and three-column layouts (auto-detected) */
html body table tr > td:only-child,
html body table tr > th:only-child { width: 100%; }
html body table tr > *:first-child:nth-last-child(2),
html body table tr > *:first-child:nth-last-child(2) ~ * { width: 50%; }
html body table tr > *:first-child:nth-last-child(3),
html body table tr > *:first-child:nth-last-child(3) ~ * { width: 33.333%; }
html body table tr > *:first-child:nth-last-child(4),
html body table tr > *:first-child:nth-last-child(4) ~ * { width: 25%; }
/* Horizontal scroll shell for wide/dense tables (Magento uses this class) */
html body .table-wrapper,
html body .table-scroll,
html body .data-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── FONT UNIFICATION — kill all custom / Google font families site-wide,
      force the Magento Open Sans stack on every element. */
body, body *,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body li, html body a, html body button, html body input,
html body textarea, html body select, html body label, html body div, html body span {
  font-family: var(--sans) !important;
}
code, code *, pre, pre * { font-family: var(--mono) !important; }

/* ── ICON FALLBACKS — luma-icons / icons-blank-theme font don't ship
      any more; swap ::before glyphs for readable unicode text that
      works in any font, hide the ones we don't need. */

/* Hide non-essential icon-buttons whose only purpose was a decorative glyph */
.action.towishlist, .action.tocompare { display: none !important; }

/* Give the essential UI icons a text glyph in the current font */
.action.nav-toggle::before {
  font-family: var(--sans) !important;
  content: "\2630" !important;   /* ☰ trigram for heaven / hamburger */
  font-size: 1.5em !important;
  line-height: 1 !important;
  color: currentColor !important;
}
.action.showcart::before {
  font-family: var(--sans) !important;
  content: "\1F6D2" !important;  /* 🛒 shopping trolley */
  font-size: 1.15em !important;
  color: currentColor !important;
}
.action.close::before, button.action.close::before {
  font-family: var(--sans) !important;
  content: "\00D7" !important;   /* × multiplication sign */
  font-size: 1.5em !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  color: currentColor !important;
}
.block-search .label::before, label[for="search"]::before,
.action.search::before, button.search::before {
  font-family: var(--sans) !important;
  content: "\1F50D" !important;  /* 🔍 magnifying glass */
  font-size: 1.1em !important;
  color: currentColor !important;
}
.filter-clear::before, .action.mailto.friend::before {
  font-family: var(--sans) !important;
  content: "" !important;
}

/* Hide any remaining empty <span> whose only styling was the broken
   icons-blank-theme font-family */
span[class]:empty,
span:not([class]):empty {
  font-family: var(--sans) !important;
}
[class*="icon-"]::before, [class*="ico-"]::before {
  font-family: var(--sans) !important;
}

/* ── MASTHEAD OVERLAY CLEARANCE — when the mobile cri-mast menu opens,
      let it PUSH content down instead of overlaying. Also give any
      content that lives directly under the masthead a bit of top
      breathing room so it's not visually stuck against the bar. */
@media (max-width: 900px) {
  html body .cri-mast .cri-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
  html body .cri-mast.nav-open { position: relative !important; }
  html body .cri-mast + *,
  html body .cri-mast ~ .page-wrapper,
  html body .cri-mast ~ main {
    padding-top: 8px !important;
  }
}

/* Also on desktop, give the page-wrapper a tiny breathing gap under masthead */
html body .cri-mast + .page-wrapper,
html body .cri-mast ~ .page-wrapper { margin-top: 4px; }