/**
 * EURAYSTORE Phase 1 - Metronic-inspired storefront foundation (LOCAL ONLY).
 * Scope: buttons, prices, badges on homepage / category / product pages.
 * Constraints: flat colors only (NO gradients), no new dependencies,
 * no checkout/payment/module markup or behavior changes.
 * Load order: AFTER euray-client-ui.css (same head.tpl location).
 * Rollback: delete this file + its <link> line; no other change needed.
 * Poppins typeface is intentionally kept (no Inter activation in Phase 1).
 */

/* ============ 1. Canonical tokens ============ */
:root {
  --es-primary: #5E2EE6;
  --es-primary-hover: #4B20C9;
  --es-primary-soft: #F1EBFF;
  --es-accent: #14B8B8;
  --es-accent-hover: #0E9E9E;
  --es-accent-soft: #E4FAFA;
  --es-secondary: #7149E9;
  --es-ink: #101828;
  --es-muted: #667085;
  --es-line: #E8EBF1;
  --es-bg: #FFFFFF;
  --es-bg-soft: #F8FAFC;
  --es-danger: #B42318;
  --es-danger-soft: #FEF3F2;
  --es-success: #067647;
  --es-success-soft: #ECFDF3;
  --es-radius-sm: 8px;
  --es-radius-md: 12px;
  --es-radius-lg: 16px;
  --es-radius-pill: 999px;
  --es-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --es-shadow-md: 0 8px 24px rgba(94, 46, 230, 0.10);
  --es-shadow-cta: 0 4px 14px rgba(94, 46, 230, 0.28);
  --es-focus-ring: 0 0 0 3px rgba(94, 46, 230, 0.25);
}

/*
 * Alias mapping (DOCUMENTED, applied in Phase 2):
 * --lglg-color-primary (#5e2ee6) -> --es-primary (identical)
 * --lglg-color-text/muted/border/bg -> identical values, alias-safe later
 * --lglg-color-primary-dark (#0b5c48 green) / --lglg-color-primary-soft (#ecfdf5 greenish)
 *   intentionally NOT remapped here: they anchor the PDP declination system
 *   (hovers, focus rings, selected shadows). Only the add-to-cart shadow,
 *   which pairs a green glow with a purple button, is corrected below.
 */

/* Page scope: shop surfaces only. Checkout, payment-module and account
   bodies are deliberately excluded so payment flows render byte-identically.
   NOTE: no bare body color rule on purpose - inherited text color stays
   exactly as the theme renders it today. */

/* ============ 2. Buttons (shop surfaces) ============ */
:is(body#index, body#category, body#product) .btn-primary {
  background-color: var(--es-primary);
  border-color: var(--es-primary);
  color: #FFFFFF;
  border-radius: 10px;
}
:is(body#index, body#category, body#product) .btn-primary:hover,
:is(body#index, body#category, body#product) .btn-primary:focus {
  background-color: var(--es-primary-hover);
  border-color: var(--es-primary-hover);
  color: #FFFFFF;
}
:is(body#index, body#category, body#product) .btn-secondary {
  background-color: #FFFFFF;
  border-color: var(--es-line);
  color: var(--es-ink);
  border-radius: 10px;
}
:is(body#index, body#category, body#product) .btn-secondary:hover {
  border-color: var(--es-primary);
  color: var(--es-primary);
  background-color: var(--es-primary-soft);
}
:is(body#index, body#category, body#product) .btn:focus-visible,
:is(body#index, body#category, body#product) button:focus-visible,
:is(body#index, body#category, body#product) a:focus-visible {
  outline: none;
  box-shadow: var(--es-focus-ring);
}
/* Green glow paired with a purple CTA was unintentional: purple-tinted.
   ID-anchored (no body duplication: :is() already scopes the page). */
:is(body#index, body#category, body#product) .lglg-product-page #add-to-cart-or-refresh .product-add-to-cart .add-to-cart {
  box-shadow: var(--es-shadow-cta);
}
:is(body#index, body#category, body#product) #add-to-cart-or-refresh .add-to-cart:disabled {
  box-shadow: none;
}
/* Legacy teal link hover confined to shop surfaces, excluding the dark
   footer (white links there must stay readable on hover). */
:is(body#index, body#category, body#product) a:hover:not(.euray-footer a) {
  color: var(--es-primary);
}

/* ============ 3. Prices (miniatures + PDP) ============ */
/* NOTE: the PDP summary total (.product-prices .current-price .price) is
   deliberately untouched: 24px/700 orange (#EA580C, 3.0:1) passes WCAG
   AA-large and is owned by the product-page design system. */
:is(body#index, body#category, body#product) .product-miniature .product-price-and-shipping .price {
  color: var(--es-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:is(body#index, body#category, body#product) .product-miniature .product-price-and-shipping .regular-price,
:is(body#index, body#category, body#product) .product-prices .regular-price {
  color: var(--es-muted);
  text-decoration: line-through;
  font-weight: 400;
}

/* ============ 4. Badges and product flags (flat tints) ============ */
:is(body#index, body#category, body#product) .product-flags .product-flag,
:is(body#index, body#category, body#product) .product-miniature .product-flag,
:is(body#index, body#category, body#product) .product-flags li.product-flag {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
}
:is(body#index, body#category, body#product) .product-flags .new,
:is(body#index, body#category, body#product) .product-miniature .new {
  background-color: var(--es-primary-soft);
  color: var(--es-primary);
}
:is(body#index, body#category, body#product) .product-flags .on-sale,
:is(body#index, body#category, body#product) .product-miniature .on-sale {
  background-color: var(--es-accent-soft);
  color: #087F7F;
}
:is(body#index, body#category, body#product) .product-flags .discount,
:is(body#index, body#category, body#product) .product-miniature .discount,
:is(body#index, body#category, body#product) .discount-percentage {
  background-color: var(--es-danger-soft);
  color: var(--es-danger);
}
:is(body#index, body#category, body#product) .product-flags .out_of_stock,
:is(body#index, body#category, body#product) .product-miniature .out_of_stock {
  background-color: #F2F4F7;
  color: var(--es-muted);
}

/* ============ 5. Flat washes replacing gradients in scope ============ */
:is(body#index, body#category, body#product) a.homecat-visual {
  background-image: none;
  background-color: #F6F3FF;
}
:is(body#index, body#category, body#product) span.homecat-quick-icon,
:is(body#index, body#category, body#product) p.fa.fa-bolt,
:is(body#index, body#category, body#product) p.fa.fa-lock,
:is(body#index, body#category, body#product) p.fa.fa-comments-o,
:is(body#index, body#category, body#product) p.fa.fa-sliders {
  background-image: none;
}
:is(body#index, body#category, body#product) span.homecat-quick-icon {
  background-color: var(--es-accent-soft);
}
:is(body#index, body#category, body#product) p.fa.fa-bolt,
:is(body#index, body#category, body#product) p.fa.fa-lock,
:is(body#index, body#category, body#product) p.fa.fa-comments-o,
:is(body#index, body#category, body#product) p.fa.fa-sliders {
  background-color: var(--es-primary-soft);
}
:is(body#index, body#category, body#product) div.angarinfo-item {
  background-image: none;
  background-color: #FFFFFF;
  border: 1px solid var(--es-line);
}
:is(body#index, body#category, body#product) div.angarinfo-item::before {
  background-image: none;
  background-color: var(--es-primary);
}
:is(body#index, body#category, body#product) div.row.product_container {
  background-image: none;
}
:is(body#index, body#category, body#product) div.footer-container.euray-footer {
  background-image: none;
}