/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* ==========================================================================
   IZZY DESIGN SYSTEM  (Phase 1 foundation, 2026-06)
   Token layer + namespaced .izzy-* components for the storefront redesign.
   Tokens use OKLCH. Neutrals are tinted, never pure black or white.
   Nothing here changes existing pages until a template/markup consumes it,
   except the .izzy-badge styles which upgrade the existing shop badges.
   ========================================================================== */

:root {
  /* --- Neutrals: paper (surfaces) --- */
  --izzy-paper:        oklch(0.985 0.004 80);   /* base surface, warm off-white */
  --izzy-paper-2:      oklch(0.962 0.005 80);   /* raised / hover surface */
  --izzy-paper-3:      oklch(0.928 0.006 80);   /* image placeholder, wells */

  /* --- Neutrals: ink (text) --- */
  --izzy-ink:          oklch(0.235 0.008 265);  /* primary text, near-black */
  --izzy-ink-2:        oklch(0.455 0.006 265);  /* secondary text */
  --izzy-ink-3:        oklch(0.620 0.005 265);  /* hints, struck price */

  /* --- Lines --- */
  --izzy-line:         oklch(0.885 0.005 80);
  --izzy-line-strong:  oklch(0.800 0.006 80);

  /* --- Brand + semantics ---
     IZZY reads black/mono today, so the primary brand colour is ink.
     --izzy-accent is the single place to introduce a brand colour later. */
  --izzy-brand:        var(--izzy-ink);
  --izzy-accent:       oklch(0.235 0.008 265); /* TODO: set to brand accent */

  --izzy-sale:         oklch(0.555 0.205 25);   /* discount / sale price */
  --izzy-sale-bg:      oklch(0.955 0.045 25);
  --izzy-lowstock:     oklch(0.560 0.130 65);   /* urgency amber */
  --izzy-lowstock-bg:  oklch(0.955 0.055 75);
  --izzy-success:      oklch(0.560 0.120 150);

  /* --- Type --- */
  --izzy-font:         inherit;                 /* defer to theme typography */
  --izzy-fs-label:     0.72rem;
  --izzy-fs-sm:        0.82rem;
  --izzy-fs-base:      0.95rem;
  --izzy-fs-lg:        1.18rem;
  --izzy-fw-regular:   400;
  --izzy-fw-medium:    600;

  /* --- Space, radius, motion, elevation --- */
  --izzy-gap:          clamp(10px, 1.2vw, 16px);
  --izzy-r-sm:         6px;
  --izzy-r-md:         10px;
  --izzy-r-lg:         14px;
  --izzy-ease:         cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --izzy-dur:          0.28s;
  --izzy-shadow:       0 6px 24px -12px oklch(0.235 0.02 265 / 0.28);
}

/* ==========================================================================
   BADGES  (active now: upgrades existing .shop-badge output)
   Replaces the old border-left side-stripe labels with clean pills.
   ========================================================================== */

.izzy-badge {
  display: inline-block;
  font-family: var(--izzy-font);
  font-size: var(--izzy-fs-label);
  font-weight: var(--izzy-fw-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--izzy-r-sm);
  margin: 0 0 8px;
  border: 0;
}
.izzy-badge--new        { background: var(--izzy-ink);         color: var(--izzy-paper); }
.izzy-badge--bestseller { background: var(--izzy-ink);         color: var(--izzy-paper); }
.izzy-badge--sale       { background: var(--izzy-sale);        color: var(--izzy-paper); }
.izzy-badge--lowstock   { background: var(--izzy-lowstock-bg); color: var(--izzy-lowstock); }
.izzy-badge--oos        { background: var(--izzy-paper-3);     color: var(--izzy-ink-2); }

/* ==========================================================================
   PRODUCT CARD primitives  (scaffold: consumed by the Phase 1 card template)
   ========================================================================== */

.izzy-card {
  position: relative;
  background: var(--izzy-paper);
  border: 1px solid var(--izzy-line);
  border-radius: var(--izzy-r-lg);
  overflow: hidden;
  transition: border-color var(--izzy-dur) var(--izzy-ease),
              box-shadow var(--izzy-dur) var(--izzy-ease);
}
.izzy-card:hover { border-color: var(--izzy-line-strong); box-shadow: var(--izzy-shadow); }

.izzy-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--izzy-paper-3);
  overflow: hidden;
}
.izzy-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--izzy-dur) var(--izzy-ease);
}
/* hover image swap: second gallery image fades in */
.izzy-card__media .izzy-card__img--alt { position: absolute; inset: 0; opacity: 0; }
.izzy-card:hover .izzy-card__img--alt   { opacity: 1; }

.izzy-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.izzy-card__badges .izzy-badge { margin: 0; }

.izzy-card__body { padding: 10px 12px 14px; }
.izzy-fit   { font-size: var(--izzy-fs-label); color: var(--izzy-ink-3); margin: 0 0 2px; }
.izzy-title { font-size: var(--izzy-fs-base); color: var(--izzy-ink); margin: 0 0 4px; font-weight: var(--izzy-fw-regular); }

.izzy-price        { display: flex; align-items: baseline; gap: 8px; }
.izzy-price__now   { font-size: var(--izzy-fs-base); font-weight: var(--izzy-fw-medium); color: var(--izzy-ink); }
.izzy-price--sale .izzy-price__now { color: var(--izzy-sale); }
.izzy-price__was   { font-size: var(--izzy-fs-sm); color: var(--izzy-ink-3); text-decoration: line-through; }

/* Colour swatches */
.izzy-swatches { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.izzy-swatch   { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--izzy-line-strong); cursor: pointer;
                 transition: transform var(--izzy-dur) var(--izzy-ease); }
.izzy-swatch:hover, .izzy-swatch[aria-current="true"] { transform: scale(1.18); }
.izzy-swatches__more { font-size: var(--izzy-fs-label); color: var(--izzy-ink-3); }

/* Wishlist heart */
.izzy-wishlist {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--izzy-paper); border: 1px solid var(--izzy-line);
  color: var(--izzy-ink-2); cursor: pointer; padding: 0;
  transition: color var(--izzy-dur) var(--izzy-ease), transform var(--izzy-dur) var(--izzy-ease);
}
.izzy-wishlist:hover                { transform: scale(1.08); }
.izzy-wishlist[aria-pressed="true"] { color: var(--izzy-sale); }

/* Quick-add */
.izzy-quick-add {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2;
  font-family: var(--izzy-font); font-size: var(--izzy-fs-sm); font-weight: var(--izzy-fw-medium);
  padding: 9px 12px; border: 0; border-radius: var(--izzy-r-md);
  background: var(--izzy-ink); color: var(--izzy-paper); cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--izzy-dur) var(--izzy-ease), transform var(--izzy-dur) var(--izzy-ease);
}
.izzy-card:hover .izzy-quick-add,
.izzy-quick-add:focus-visible { opacity: 1; transform: translateY(0); }

/* Touch / no-hover devices: keep quick-add visible, drop hover-only reveals */
@media (hover: none) {
  .izzy-quick-add { opacity: 1; transform: none; position: static; margin-top: 10px; }
  .izzy-card__img--alt { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .izzy-card, .izzy-card__media img, .izzy-swatch, .izzy-wishlist, .izzy-quick-add { transition: none; }
}

/* ==========================================================================
   AVADA CARD INTEGRATION
   Wires the .izzy-* enhancements onto Avada's real card markup
   (.fusion-image-wrapper / .product-image-wrapper). JS injects the elements.
   ========================================================================== */

.izzy-meta { display: none !important; }

/* Hover image-swap layered over Avada's product image */
.fusion-image-wrapper .izzy-card__img--alt,
.product-image-wrapper .izzy-card__img--alt {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity var(--izzy-dur) var(--izzy-ease);
}
li.product:hover .izzy-card__img--alt { opacity: 1; }

/* Wishlist heart sits above Avada's rollover layer */
.fusion-image-wrapper .izzy-wishlist,
.product-image-wrapper .izzy-wishlist { z-index: 6; }
.izzy-wishlist .fa-heart,
.izzy-wishlist .fas,
.izzy-wishlist .far { font-size: 15px; line-height: 1; }

@media (hover: none) {
  .izzy-card__img--alt { display: none; }
}

/* Quick-add button + size tray on Avada cards */
.fusion-image-wrapper .izzy-quick-add,
.product-image-wrapper .izzy-quick-add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5;
  width: auto;
}
li.product:hover .izzy-quick-add { opacity: 1; transform: translateY(0); }
.izzy-quick-add.izzy-loading { opacity: 0.6; pointer-events: none; }

.izzy-sizes {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border-radius: var(--izzy-r-md);
  background: var(--izzy-paper); border: 1px solid var(--izzy-line);
}
.izzy-size {
  flex: 1 1 auto; min-width: 34px;
  font-family: var(--izzy-font); font-size: var(--izzy-fs-sm); font-weight: var(--izzy-fw-medium);
  padding: 7px 6px; cursor: pointer;
  background: var(--izzy-paper); color: var(--izzy-ink);
  border: 1px solid var(--izzy-line-strong); border-radius: var(--izzy-r-sm);
  transition: background var(--izzy-dur) var(--izzy-ease), color var(--izzy-dur) var(--izzy-ease);
}
.izzy-size:hover { background: var(--izzy-ink); color: var(--izzy-paper); }
.izzy-size.izzy-loading { opacity: 0.6; pointer-events: none; }
.izzy-size--oos {
  color: var(--izzy-ink-3); cursor: not-allowed;
  text-decoration: line-through; border-color: var(--izzy-line);
}
.izzy-size--oos:hover { background: var(--izzy-paper); color: var(--izzy-ink-3); }

@media (hover: none) {
  .fusion-image-wrapper .izzy-quick-add,
  .product-image-wrapper .izzy-quick-add { opacity: 1; transform: none; }
}