/* CRI-ONE store — channel-theme injection (Tier-1 CDN, immutable) */
/*                                                                  */
/* Ports the /channel/ crione_x design language onto /store/ pages: */
/*   * black-on-white minimal look                                  */
/*   * Arial family (baseline preserved from prior arial-only)      */
/*   * hairline #E5E5E5 borders, no rounded chrome                  */
/*   * black primary buttons, white-with-border secondary           */
/*   * underlined text links                                        */
/*                                                                  */
/* SAFETY: every rule scoped to body:not([class*='adminhtml-']) so  */
/* the Magento admin UI (icons, dark chrome) is untouched.          */

/* ═══════════════════════════════════════════════════════════════
   1. Arial family — preserved from prior arial-only baseline
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']),
html body:not([class*='adminhtml-']) *,
html body:not([class*='adminhtml-']) *::before,
html body:not([class*='adminhtml-']) *::after {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Icon-font passthroughs — preserved */
html body:not([class*='adminhtml-']) [class^='icon-'],
html body:not([class*='adminhtml-']) [class*=' icon-'],
html body:not([class*='adminhtml-']) .luma-icon,
html body:not([class*='adminhtml-']) ._icon-font,
html body:not([class*='adminhtml-']) .porto-icon,
html body:not([class*='adminhtml-']) .abs-icon {
  font-family: 'luma-icons', 'porto-icon', 'Admin Icons', 'MUI-Icons', inherit !important;
}
html body:not([class*='adminhtml-']) .material-icons { font-family: 'Material Icons' !important; }
html body:not([class*='adminhtml-']) .fa,
html body:not([class*='adminhtml-']) .fas,
html body:not([class*='adminhtml-']) .far,
html body:not([class*='adminhtml-']) .fab,
html body:not([class*='adminhtml-']) i[class*='fa-'] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. Design tokens — mirrors crione_x/style.css on /channel/
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) {
  --cx-ink:       #000000;
  --cx-paper:     #FFFFFF;
  --cx-line:      #E5E5E5;
  --cx-line-dark: #C7C7C7;
  --cx-muted:     #666666;
  --cx-hover:     #F5F5F5;
}

/* ═══════════════════════════════════════════════════════════════
   3. Body chrome — flatten background
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) {
  background: var(--cx-paper) !important;
  color:      var(--cx-ink)   !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

html body:not([class*='adminhtml-']) .page-wrapper,
html body:not([class*='adminhtml-']) .page-main {
  background: var(--cx-paper) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. Links — underlined black
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) a,
html body:not([class*='adminhtml-']) a:visited {
  color: var(--cx-ink) !important;
  text-decoration: underline !important;
}
html body:not([class*='adminhtml-']) a:hover {
  color: var(--cx-ink) !important;
  text-decoration: none !important;
}
/* Buttons that happen to be <a> should not carry the underline */
html body:not([class*='adminhtml-']) a.action,
html body:not([class*='adminhtml-']) a.button,
html body:not([class*='adminhtml-']) a.btn,
html body:not([class*='adminhtml-']) a.cgb-nav a,
html body:not([class*='adminhtml-']) .cgb-nav a {
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. Headings — lighter, tighter (LinkedIn/channel hero feel)
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) h1,
html body:not([class*='adminhtml-']) .page-title,
html body:not([class*='adminhtml-']) .page-title-wrapper h1 {
  font-weight: 300 !important;
  color: var(--cx-ink) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.1 !important;
}
html body:not([class*='adminhtml-']) h2,
html body:not([class*='adminhtml-']) h3,
html body:not([class*='adminhtml-']) h4 {
  font-weight: 700 !important;
  color: var(--cx-ink) !important;
  letter-spacing: -0.2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. Buttons — black primary, white-with-border secondary
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) button,
html body:not([class*='adminhtml-']) .action-primary,
html body:not([class*='adminhtml-']) .action.primary,
html body:not([class*='adminhtml-']) input[type='submit'],
html body:not([class*='adminhtml-']) input[type='button'],
html body:not([class*='adminhtml-']) .btn,
html body:not([class*='adminhtml-']) .tocart {
  background: var(--cx-ink) !important;
  color:      var(--cx-paper) !important;
  border: 1px solid var(--cx-ink) !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  text-transform: none !important;
  text-shadow: none !important;
  transition: background 0.1s ease, color 0.1s ease !important;
  cursor: pointer !important;
}
html body:not([class*='adminhtml-']) button:hover,
html body:not([class*='adminhtml-']) .action-primary:hover,
html body:not([class*='adminhtml-']) .action.primary:hover,
html body:not([class*='adminhtml-']) input[type='submit']:hover,
html body:not([class*='adminhtml-']) .btn:hover,
html body:not([class*='adminhtml-']) .tocart:hover {
  background: var(--cx-paper) !important;
  color:      var(--cx-ink) !important;
}

/* Secondary style — actions that are cancel/back/close */
html body:not([class*='adminhtml-']) .action.secondary,
html body:not([class*='adminhtml-']) .action-secondary,
html body:not([class*='adminhtml-']) button.secondary,
html body:not([class*='adminhtml-']) .btn.cancel,
html body:not([class*='adminhtml-']) .action.back,
html body:not([class*='adminhtml-']) .action.remind {
  background: var(--cx-paper) !important;
  color:      var(--cx-ink) !important;
  border: 1px solid var(--cx-ink) !important;
}
html body:not([class*='adminhtml-']) .action.secondary:hover,
html body:not([class*='adminhtml-']) .action-secondary:hover,
html body:not([class*='adminhtml-']) button.secondary:hover {
  background: var(--cx-ink) !important;
  color:      var(--cx-paper) !important;
}

/* Don't restyle icon-only close/toggle buttons that need transparent chrome */
html body:not([class*='adminhtml-']) button.action-close,
html body:not([class*='adminhtml-']) .action.close,
html body:not([class*='adminhtml-']) button.close,
html body:not([class*='adminhtml-']) .sidebar-additional button,
html body:not([class*='adminhtml-']) .amsearch-icon,
html body:not([class*='adminhtml-']) button[aria-label*='close' i] {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
}

/* Preserve the mega-menu (cgb-nav) chrome — it has its own palette */
html body:not([class*='adminhtml-']) .cgb-nav,
html body:not([class*='adminhtml-']) .cgb-nav *,
html body:not([class*='adminhtml-']) .cgb-nav *::before,
html body:not([class*='adminhtml-']) .cgb-nav *::after {
  background: unset;
  color: unset;
  border-color: unset;
}

/* ═══════════════════════════════════════════════════════════════
   7. Inputs — zero-radius, hairline border, black focus
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) input[type='text'],
html body:not([class*='adminhtml-']) input[type='email'],
html body:not([class*='adminhtml-']) input[type='password'],
html body:not([class*='adminhtml-']) input[type='tel'],
html body:not([class*='adminhtml-']) input[type='number'],
html body:not([class*='adminhtml-']) input[type='search'],
html body:not([class*='adminhtml-']) input[type='url'],
html body:not([class*='adminhtml-']) textarea,
html body:not([class*='adminhtml-']) select {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--cx-line-dark) !important;
  border-radius: 0 !important;
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  box-shadow: none !important;
}
html body:not([class*='adminhtml-']) input:focus,
html body:not([class*='adminhtml-']) textarea:focus,
html body:not([class*='adminhtml-']) select:focus {
  outline: none !important;
  border-color: var(--cx-ink) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. Product cards — flat + hairline border
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) .product-item,
html body:not([class*='adminhtml-']) .product-item-info,
html body:not([class*='adminhtml-']) .products-grid .product-item {
  background: var(--cx-paper) !important;
  border-radius: 0 !important;
}
html body:not([class*='adminhtml-']) .product-item .product-item-info {
  border: 1px solid var(--cx-line) !important;
  padding: 12px !important;
  transition: box-shadow 0.15s ease !important;
}
html body:not([class*='adminhtml-']) .product-item .product-item-info:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}
html body:not([class*='adminhtml-']) .product-item-name,
html body:not([class*='adminhtml-']) .product-item-name a {
  color: var(--cx-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body:not([class*='adminhtml-']) .price-box .price {
  color: var(--cx-ink) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. Modules / boxes / block containers — flatten
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) .block,
html body:not([class*='adminhtml-']) .box,
html body:not([class*='adminhtml-']) .box-content,
html body:not([class*='adminhtml-']) .messages,
html body:not([class*='adminhtml-']) .fieldset {
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body:not([class*='adminhtml-']) .fieldset > .legend,
html body:not([class*='adminhtml-']) .block-title,
html body:not([class*='adminhtml-']) .box-title {
  font-weight: 700 !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
}

/* Page-messages: kill Luma yellow, use hairline notice */
html body:not([class*='adminhtml-']) .messages .message {
  border-radius: 0 !important;
  border: 1px solid var(--cx-line) !important;
  background: var(--cx-hover) !important;
  color: var(--cx-ink) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. Footer — hairline + muted
   ═════════════════════════════════════════════════════════════ */
html body:not([class*='adminhtml-']) .page-footer,
html body:not([class*='adminhtml-']) .footer {
  background: var(--cx-paper) !important;
  color: var(--cx-muted) !important;
  border-top: 1px solid var(--cx-line) !important;
}
html body:not([class*='adminhtml-']) .page-footer a,
html body:not([class*='adminhtml-']) .footer a {
  color: var(--cx-muted) !important;
}
html body:not([class*='adminhtml-']) .page-footer a:hover,
html body:not([class*='adminhtml-']) .footer a:hover {
  color: var(--cx-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. Escape hatches — respect anything opted out
   ═════════════════════════════════════════════════════════════ */
html body.no-channel-theme,
html body.no-channel-theme *,
html body.no-channel-theme *::before,
html body.no-channel-theme *::after {
  all: revert !important;
}
html body:not([class*='adminhtml-']) .cri-keep,
html body:not([class*='adminhtml-']) .cri-keep *,
html body:not([class*='adminhtml-']) .cri-keep *::before,
html body:not([class*='adminhtml-']) .cri-keep *::after {
  all: revert !important;
}