/* ═══════════════════════════════════════════════════════════════════
   SAVVY CANVAS — Classic-page skin overlay
   Applied to product.php, category.php, cart.php, etc. when the
   `use_canvas_storefront` feature flag is on.
   Scoped under `body.canvas-skin` so non-canvas pages are untouched.
   ═══════════════════════════════════════════════════════════════════ */

body.canvas-skin {
  /* Surface the Canvas design tokens inside the classic shell */
  --cv-bg-0: #060418;
  --cv-bg-1: #0d0930;
  --cv-bg-2: #1a1464;
  --cv-gold: #FF9500;
  --cv-gold-soft: #FFB340;
  --cv-gold-dim: rgba(255, 149, 0, 0.18);
  --cv-gold-glow: 0 0 40px rgba(255, 149, 0, 0.35);
  --cv-violet: #7c5cff;
  --cv-glass: rgba(255, 255, 255, 0.05);
  --cv-glass-2: rgba(255, 255, 255, 0.08);
  --cv-glass-border: rgba(255, 255, 255, 0.10);
  --cv-ink: #ffffff;
  --cv-ink-70: rgba(255, 255, 255, 0.72);
  --cv-ink-45: rgba(255, 255, 255, 0.45);
  --cv-ink-25: rgba(255, 255, 255, 0.25);
  --cv-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--cv-ink);
  background:
    radial-gradient(ellipse at 20% -10%, rgba(124,92,255,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 110%, rgba(255,149,0,0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--cv-bg-0) 0%, var(--cv-bg-1) 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Starfield texture */
body.canvas-skin::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 78% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 88% 80%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 20% 85%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 60% 40%, rgba(255,181,64,0.35), transparent);
  opacity: 0.5;
  z-index: 0;
}

/* Ensure content sits above the starfield */
body.canvas-skin > * { position: relative; z-index: 1; }

/* ═══ Text + link baseline ═══ */
body.canvas-skin,
body.canvas-skin p,
body.canvas-skin span,
body.canvas-skin div,
body.canvas-skin li {
  color: var(--cv-ink-70);
}
body.canvas-skin h1,
body.canvas-skin h2,
body.canvas-skin h3,
body.canvas-skin h4,
body.canvas-skin h5,
body.canvas-skin h6 {
  color: var(--cv-ink);
}
body.canvas-skin a:not(.lw-act):not(.lw-nav-link):not([class*="btn"]):not(.lw-logo) {
  color: var(--cv-gold-soft);
}
body.canvas-skin a:not(.lw-act):not(.lw-nav-link):not([class*="btn"]):not(.lw-logo):hover {
  color: var(--cv-gold);
}

/* ═══ Utility bar ═══ */
body.canvas-skin .lw-utility {
  background: linear-gradient(90deg, rgba(26,20,100,0.85), rgba(13,9,48,0.85), rgba(124,92,255,0.15)) !important;
  border-bottom: 1px solid rgba(255,149,0,0.22) !important;
  color: var(--cv-ink-70) !important;
}
body.canvas-skin .lw-utility a,
body.canvas-skin .lw-utility span {
  color: var(--cv-ink-70) !important;
}
body.canvas-skin .lw-utility a:hover { color: var(--cv-gold) !important; }
body.canvas-skin .lw-perks-pill {
  background: var(--cv-gold-dim) !important;
  color: var(--cv-gold) !important;
  border: 1px solid rgba(255,149,0,0.35) !important;
}

/* ═══ Header ═══ */
body.canvas-skin .lw-header {
  background: rgba(6,4,24,0.85) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--cv-glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,149,0,0.18), 0 8px 30px rgba(0,0,0,0.4) !important;
}
body.canvas-skin .lw-header img { filter: brightness(0) invert(1); }
body.canvas-skin .lw-act {
  color: var(--cv-ink-70) !important;
  border: 1px solid transparent !important;
}
body.canvas-skin .lw-act:hover {
  color: var(--cv-gold) !important;
  background: var(--cv-gold-dim) !important;
  border-color: rgba(255,149,0,0.3) !important;
}
body.canvas-skin .lw-act--cart:hover { box-shadow: var(--cv-gold-glow); }
body.canvas-skin .lw-cart-badge {
  background: var(--cv-gold) !important;
  color: #1a0e00 !important;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255,149,0,0.6);
}
body.canvas-skin .lw-act--perks { color: var(--cv-gold-soft) !important; }

/* Search component (classic) */
body.canvas-skin [class*="search"] input,
body.canvas-skin [class*="search-wrap"] input,
body.canvas-skin input[type="search"],
body.canvas-skin input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--cv-glass-border) !important;
  color: var(--cv-ink) !important;
}
body.canvas-skin input::placeholder { color: var(--cv-ink-45) !important; }
body.canvas-skin input:focus {
  border-color: var(--cv-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,149,0,0.12);
}

/* ═══ Navigation ribbon ═══ */
body.canvas-skin .lw-nav {
  background: rgba(13,9,48,0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cv-glass-border) !important;
}
body.canvas-skin .lw-nav-link {
  color: var(--cv-ink-70) !important;
}
body.canvas-skin .lw-nav-link:hover {
  color: var(--cv-gold) !important;
  background: var(--cv-gold-dim) !important;
}
body.canvas-skin .lw-nav-icon { color: var(--cv-gold-soft); }

/* Mega menus */
body.canvas-skin .lw-mega {
  background: linear-gradient(180deg, rgba(13,9,48,0.98), rgba(6,4,24,0.98)) !important;
  border: 1px solid var(--cv-glass-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,149,0,0.1) inset !important;
  color: var(--cv-ink) !important;
}
body.canvas-skin .lw-mega h3,
body.canvas-skin .lw-mega h4 { color: var(--cv-ink) !important; }
body.canvas-skin .lw-mega a,
body.canvas-skin .lw-mega-pcard {
  color: var(--cv-ink-70) !important;
}
body.canvas-skin .lw-mega-subcats a {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cv-glass-border) !important;
}
body.canvas-skin .lw-mega-subcats a:hover {
  background: var(--cv-gold-dim) !important;
  border-color: var(--cv-gold) !important;
  color: var(--cv-gold) !important;
}
body.canvas-skin .lw-mega-pcard {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--cv-glass-border) !important;
  border-radius: 12px;
  transition: transform .2s, border-color .2s;
}
body.canvas-skin .lw-mega-pcard:hover {
  transform: translateY(-2px);
  border-color: var(--cv-gold) !important;
}
body.canvas-skin .lw-mega-pcard-title { color: var(--cv-ink) !important; }
body.canvas-skin .lw-mega-pcard-brand { color: var(--cv-ink-45) !important; }
body.canvas-skin .lw-mega-pcard-price {
  color: var(--cv-gold) !important;
  font-weight: 700;
}
body.canvas-skin .lw-mega-pcard-btn {
  background: var(--cv-gold) !important;
  color: #1a0e00 !important;
}
body.canvas-skin .lw-mega-footer {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid var(--cv-glass-border) !important;
}

/* ═══ Content sections (product/category body) ═══ */
body.canvas-skin .product-wrapper,
body.canvas-skin .content-section,
body.canvas-skin .section-wrapper,
body.canvas-skin .category-container,
body.canvas-skin main {
  color: var(--cv-ink-70);
}

body.canvas-skin .breadcrumb,
body.canvas-skin .breadcrumb a {
  color: var(--cv-ink-45) !important;
}
body.canvas-skin .breadcrumb a:hover { color: var(--cv-gold) !important; }

/* Product detail — wrap panels in glass */
body.canvas-skin .product-main,
body.canvas-skin .product-gallery,
body.canvas-skin .product-details,
body.canvas-skin .content-section > .section-wrapper,
body.canvas-skin .specs-grid {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cv-glass-border);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.canvas-skin .product-gallery,
body.canvas-skin .product-details {
  padding: 20px;
}
body.canvas-skin .product-main {
  padding: 4px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Gallery */
body.canvas-skin .gallery-main,
body.canvas-skin .gallery-main img {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px;
}
body.canvas-skin .gallery-thumb {
  border: 1px solid var(--cv-glass-border) !important;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
body.canvas-skin .gallery-thumb.active {
  border-color: var(--cv-gold) !important;
  box-shadow: 0 0 0 2px var(--cv-gold-dim);
}

/* Title block */
body.canvas-skin .brand-badge {
  background: var(--cv-gold-dim) !important;
  color: var(--cv-gold-soft) !important;
  border: 1px solid rgba(255,149,0,0.35);
}
body.canvas-skin .product-title {
  color: var(--cv-ink) !important;
  font-family: 'Instrument Serif', 'Inter', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.canvas-skin .sku-info,
body.canvas-skin .sku-info span,
body.canvas-skin .sku-info strong { color: var(--cv-ink-45) !important; }

/* Price display */
body.canvas-skin [class*="price"],
body.canvas-skin .price,
body.canvas-skin .product-price,
body.canvas-skin .price-display {
  color: var(--cv-gold) !important;
}
body.canvas-skin [class*="price-rrp"],
body.canvas-skin .rrp {
  color: var(--cv-ink-45) !important;
  text-decoration: line-through;
}

/* Buttons */
body.canvas-skin button,
body.canvas-skin .btn,
body.canvas-skin [class*="btn-primary"],
body.canvas-skin [class*="add-to-cart"],
body.canvas-skin .buy-now {
  transition: all .2s var(--cv-ease-out);
}
body.canvas-skin .btn-primary,
body.canvas-skin [class*="btn-primary"],
body.canvas-skin .add-to-cart,
body.canvas-skin [class*="add-to-cart"] {
  background: var(--cv-gold) !important;
  color: #1a0e00 !important;
  border: 0 !important;
  font-weight: 700;
}
body.canvas-skin .btn-primary:hover,
body.canvas-skin [class*="btn-primary"]:hover,
body.canvas-skin .add-to-cart:hover,
body.canvas-skin [class*="add-to-cart"]:hover {
  box-shadow: var(--cv-gold-glow);
  transform: translateY(-1px);
}
body.canvas-skin .btn-secondary,
body.canvas-skin [class*="btn-secondary"],
body.canvas-skin .btn-outline {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cv-ink) !important;
  border: 1px solid var(--cv-glass-border) !important;
}
body.canvas-skin .btn-secondary:hover,
body.canvas-skin [class*="btn-secondary"]:hover,
body.canvas-skin .btn-outline:hover {
  border-color: var(--cv-gold) !important;
  color: var(--cv-gold) !important;
}

/* Specs / details */
body.canvas-skin .specs-table {
  background: transparent;
  color: var(--cv-ink-70);
}
body.canvas-skin .specs-table tr { border-bottom: 1px solid var(--cv-glass-border); }
body.canvas-skin .specs-table-label { color: var(--cv-ink-45) !important; }
body.canvas-skin .specs-table-value { color: var(--cv-ink) !important; }
body.canvas-skin .specs-grid {
  padding: 18px;
}
body.canvas-skin .spec-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--cv-glass-border);
  border-radius: 10px;
  padding: 12px;
}
body.canvas-skin .spec-label { color: var(--cv-ink-45) !important; }
body.canvas-skin .spec-value { color: var(--cv-ink) !important; }

body.canvas-skin .section-title {
  color: var(--cv-ink) !important;
  font-family: 'Instrument Serif', 'Inter', serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
}

body.canvas-skin .description-text,
body.canvas-skin .description-text * {
  color: var(--cv-ink-70) !important;
}
body.canvas-skin .description-text strong,
body.canvas-skin .description-text b { color: var(--cv-ink) !important; }

/* Generic product card fallback (for category / related products grids) */
body.canvas-skin [class*="product-card"],
body.canvas-skin [class*="category-card"],
body.canvas-skin .related-card,
body.canvas-skin .card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cv-glass-border) !important;
  color: var(--cv-ink) !important;
}
body.canvas-skin [class*="product-card"]:hover,
body.canvas-skin [class*="category-card"]:hover,
body.canvas-skin .related-card:hover,
body.canvas-skin .card:hover {
  border-color: var(--cv-gold) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px var(--cv-gold-dim) inset;
}

/* Form inputs across skinned pages */
body.canvas-skin textarea,
body.canvas-skin select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--cv-glass-border) !important;
  color: var(--cv-ink) !important;
}

/* Footer */
body.canvas-skin footer,
body.canvas-skin .lw-footer,
body.canvas-skin [class*="footer"] {
  background: rgba(6,4,24,0.6) !important;
  border-top: 1px solid var(--cv-glass-border) !important;
  color: var(--cv-ink-70) !important;
}

/* ═══ "Back to Savvy Canvas" floating pill ═══
   Rendered by the tiny JS below (injected at end of header.php in skin mode
   would bloat the file — cleaner to attach via CSS pseudo + a JS hook).
   We style it here; the canvas-skin.js inject is below. */
body.canvas-skin .cv-return-pill {
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 900;
  background: linear-gradient(135deg, var(--cv-gold), #ff6a00);
  color: #1a0e00;
  padding: 11px 18px;
  border-radius: 999px;
  font: 600 13px/1 'Inter', sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(255,149,0,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition: transform .18s var(--cv-ease-out), box-shadow .18s;
}
body.canvas-skin .cv-return-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255,149,0,0.55), 0 0 0 1px rgba(255,255,255,0.25) inset;
  color: #1a0e00 !important;
}
body.canvas-skin .cv-return-pill i { font-size: 12px; }

@media (max-width: 640px) {
  body.canvas-skin .cv-return-pill { bottom: 14px; left: 14px; padding: 10px 14px; font-size: 12px; }
}

/* Hide the classic chatbot widget if the Canvas chat is available —
   avoids two chat UIs competing. (The widget script still loads; we
   just suppress its FAB. Users reach chat via the Canvas flow.) */
body.canvas-skin #savvy-chat-widget,
body.canvas-skin #savvy-chatbot,
body.canvas-skin [id^="savvy-widget"] {
  display: none !important;
}