/* =============================================================================
   FILE: public/css/product-cards-v2.css
   AVL color-nuance system for Aura Elixir product cards.

   PHILOSOPHY
   Every product card carries a quiet visual signature drawn from the raw
   material's botanical character. The heritage palette (sage, forest,
   champagne, ivory) remains the dominant visual language. The plant color
   is a 4-7% saturation accent — a whisper, not a shout.

   IMPLEMENTATION
   1. Each product gets a `data-plant-family` attribute on the card root.
   2. CSS variables per family set the accent (--plant-accent) and a soft
      mist version (--plant-mist).
   3. Three places carry the accent:
      - Left edge accent strip (3px) — primary signature
      - Icon backdrop (radial gradient using --plant-mist)
      - Hover state lift glow (shadow tinted with --plant-accent at 12% alpha)

   DEFAULT BEHAVIOR
   Cards without a plant-family attribute fall through to a neutral sage tint.
   Cards never lose accessibility — text contrast meets WCAG AA against
   warm-ivory backgrounds in all themes.
   ============================================================================= */

/* ─── PLANT FAMILY COLOR MAP ────────────────────────────────────────────────
   Curated 14-family palette covering the Zayat catalog. Each family pair is
   (--plant-accent, --plant-mist). Mist values are 92-95% lightness — soft
   enough to function as background tints under text without contrast issues.
   ─────────────────────────────────────────────────────────────────────────── */

.product-card {
  /* Default — sage neutral, used when no data-plant-family matches */
  --plant-accent: #9caf88;  /* primary-sage */
  --plant-mist:   #e8ede4;  /* sage-mist */
}

/* Lavender, hyssop, sage, rosemary — the lavandulaceae & lamiaceae quiet purples */
.product-card[data-plant-family="lamiaceae"] {
  --plant-accent: #8b7ab0;
  --plant-mist:   #ede9f3;
}

/* Citrus — bergamot, sweet orange, grapefruit, lemon, lime */
.product-card[data-plant-family="citrus"] {
  --plant-accent: #d6a843;
  --plant-mist:   #f6efde;
}

/* Conifers — pine, spruce, fir, cedar, cypress */
.product-card[data-plant-family="conifer"] {
  --plant-accent: #4a6741;
  --plant-mist:   #e3eadf;
}

/* Eucalyptus, tea tree, niaouli, ravintsara — myrtaceae blue-green */
.product-card[data-plant-family="myrtaceae"] {
  --plant-accent: #5d8d92;
  --plant-mist:   #e1eced;
}

/* Roses, geranium — rosaceae & geraniaceae warm pinks */
.product-card[data-plant-family="rosaceae"] {
  --plant-accent: #c47a8c;
  --plant-mist:   #f4e5e9;
}

/* Frankincense, myrrh — burseraceae warm amber */
.product-card[data-plant-family="burseraceae"] {
  --plant-accent: #b8854b;
  --plant-mist:   #f1e6d6;
}

/* Chamomile, helichrysum, yarrow — asteraceae soft yellows */
.product-card[data-plant-family="asteraceae"] {
  --plant-accent: #c9a449;
  --plant-mist:   #f4ecd6;
}

/* Lotus, jasmine, ylang ylang — exotic absolutes warm rose-gold */
.product-card[data-plant-family="exotic_absolute"] {
  --plant-accent: #b58a6e;
  --plant-mist:   #f0e6dd;
}

/* Patchouli, vetiver, ginger — earth roots & rhizomes deep amber-brown */
.product-card[data-plant-family="root"] {
  --plant-accent: #8a6a4a;
  --plant-mist:   #ebe2d5;
}

/* Carrier oils — neutral oilseeds */
.product-card[data-plant-family="carrier"] {
  --plant-accent: #a89968;
  --plant-mist:   #f0eadc;
}

/* Hydrolats — pale water-clear */
.product-card[data-plant-family="hydrolat"] {
  --plant-accent: #95a8a3;
  --plant-mist:   #e4ebe9;
}

/* Crystals (accessory category) — quartz neutral */
.product-card[data-plant-family="crystal"] {
  --plant-accent: #a3a39c;
  --plant-mist:   #ececea;
}

/* Body care — warm honey */
.product-card[data-plant-family="bodycare"] {
  --plant-accent: #c9a06b;
  --plant-mist:   #f3e8d6;
}

/* Synergies / blends — heritage signature */
.product-card[data-plant-family="synergy"] {
  --plant-accent: #d4af37;  /* champagne-gold */
  --plant-mist:   #f5ecc9;
}

/* ─── CARD STRUCTURE ────────────────────────────────────────────────────────
   Refined card with quiet plant accent. Base structure unchanged from
   current implementation; this adds the accent layer on top.
   ─────────────────────────────────────────────────────────────────────────── */

.product-card {
  position: relative;
  background: var(--pure-white);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
  border: 1px solid var(--sage-mist);
  box-shadow: 0 2px 8px rgba(45, 62, 42, 0.04);
}

/* Left edge accent — the primary signature element. 3px strip drawn via
   ::before so it doesn't interfere with the card's own border. */
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--plant-accent);
  opacity: 0.7;
  transition: opacity 0.3s ease, width 0.3s ease;
  z-index: 2;
}

.product-card:hover::before {
  opacity: 1;
  width: 4px;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(45, 62, 42, 0.10),
    0 4px 12px color-mix(in srgb, var(--plant-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--plant-accent) 30%, var(--sage-mist));
}

/* ─── ICON BADGE ────────────────────────────────────────────────────────────
   When a product has no photo, the icon stands in. The plant-mist creates
   a subtle radial backdrop so the icon doesn't float on bare white.
   ─────────────────────────────────────────────────────────────────────────── */

.product-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    135deg,
    var(--plant-mist) 0%,
    color-mix(in srgb, var(--plant-mist) 60%, var(--warm-ivory)) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card-image img {
  transform: scale(1.04);
}

/* No-photo fallback: hide broken image, let the gradient + icon show */
.product-card-image.no-photo img {
  display: none;
}

.product-icon {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--plant-accent);
  opacity: 0.6;
}

.product-card-image.no-photo .product-icon {
  display: flex;
}

/* ─── CARD BODY ─────────────────────────────────────────────────────────────  */

.product-card-body {
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.product-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--deep-forest);
  line-height: 1.3;
  letter-spacing: -0.005em;
  /* Truncation with slug-tail elision for verbose disambiguated names.
     The full name remains in the title attribute on hover. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3rem;
}

/* Hide the slug-tail suffix in card display. Pattern: ' · whatever' */
.product-title .slug-tail {
  display: none;
}

.product-description {
  font-size: 0.85rem;
  color: var(--warm-grey);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── SIZE SELECTOR ─────────────────────────────────────────────────────────  */

.size-selector {
  margin-top: 0.25rem;
}

.size-selector select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--sage-mist);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  color: var(--deep-forest);
  background: var(--warm-ivory);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.size-selector select:hover {
  border-color: var(--plant-accent);
}

.size-selector select:focus {
  outline: none;
  border-color: var(--plant-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plant-accent) 20%, transparent);
}

/* ─── PRICE DISPLAY ─────────────────────────────────────────────────────────  */

.product-price {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--deep-forest);
  line-height: 1;
  margin-top: 0.25rem;
}

.product-price .price-tax-note {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--warm-grey);
  margin-left: 0.25rem;
}

/* Hide the tier-grid by default on consumer view; show on hover or for pros */
.progressive-pricing {
  display: none;
}

.product-card[data-tier="professional"] .progressive-pricing,
.product-card[data-tier="bulk"] .progressive-pricing {
  display: block;
}

/* ─── BADGES ────────────────────────────────────────────────────────────────  */

.pricing-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.tier-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  background: var(--plant-mist);
  color: var(--deep-forest);
  letter-spacing: 0.02em;
}

.tier-badge.professional {
  background: color-mix(in srgb, var(--plant-accent) 30%, var(--warm-ivory));
}

.tier-badge.bulk {
  background: var(--champagne-gold);
  color: var(--deep-forest);
}

/* ─── CTA ROW ───────────────────────────────────────────────────────────────  */

.card-cta-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.75rem;
}

/* Qty stepper — clean, glyph-only buttons */
.card-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--sage-mist);
  border-radius: 10px;
  background: var(--pure-white);
  overflow: hidden;
  transition: border-color 0.2s;
}

.card-qty:hover {
  border-color: var(--plant-accent);
}

.card-qty-btn {
  width: 30px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  color: var(--deep-forest);
  font-weight: 400;
  transition: background 0.15s;
}

.card-qty-btn:hover {
  background: var(--plant-mist);
}

.card-qty input {
  width: 32px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--deep-forest);
  padding: 0;
  -moz-appearance: textfield;
}

.card-qty input::-webkit-outer-spin-button,
.card-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Primary CTA — Add to Cart */
.add-to-cart.card-add-btn {
  flex: 1;
  padding: 0.65rem 0.75rem;
  background: linear-gradient(135deg, var(--champagne-gold) 0%, #b8941f 100%);
  color: var(--pure-white);
  border: none;
  border-radius: 10px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.add-to-cart.card-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.30);
}

.add-to-cart.card-add-btn:active {
  transform: translateY(0);
}

.add-to-cart.card-add-btn[disabled] {
  background: var(--warm-grey);
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Secondary — View Product Details */
.view-product-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem;
  background: transparent;
  color: var(--deep-forest);
  border: 1.5px solid var(--sage-mist);
  border-radius: 10px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.view-product-btn:hover {
  border-color: var(--plant-accent);
  background: var(--plant-mist);
  color: var(--deep-forest);
}

/* ─── FEATURED / EXCLUSIVE RIBBON ───────────────────────────────────────────  */

.product-card.featured::after,
.product-card[data-featured="true"]::after {
  content: 'Featured';
  position: absolute;
  top: 0.75rem;
  right: -1.75rem;
  background: var(--champagne-gold);
  color: var(--deep-forest);
  font-family: var(--font-primary);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 2rem;
  transform: rotate(35deg);
  z-index: 3;
  box-shadow: 0 2px 4px rgba(45, 62, 42, 0.15);
}

/* ─── RESPONSIVE ────────────────────────────────────────────────────────────  */

@media (max-width: 640px) {
  .product-card-body {
    padding: 1rem 1rem 0.85rem;
  }

  .product-title {
    font-size: 1.05rem;
  }

  .product-price {
    font-size: 1.25rem;
  }

  .add-to-cart.card-add-btn {
    font-size: 0.8rem;
    padding: 0.6rem 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card::before,
  .product-card-image img,
  .add-to-cart.card-add-btn {
    transition: none;
  }
  .product-card:hover {
    transform: none;
  }
}