/* =============================================================================
   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;
  }
}

/* ─── GRID LOADING STATE ────────────────────────────────────────────────────── */

#productGrid.ae-loading {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* ─── CARD ENTRY ANIMATIONS ─────────────────────────────────────────────────── */
/* Four variants — assigned randomly per card by _renderProducts in script.js.
   Each starts invisible (opacity:0 baked into the keyframe from-state) so
   there is zero flash before the animation fires.                              */

@keyframes ae-fade-up {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes ae-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ae-slide-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes ae-slide-right {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.ae-card-enter {
  opacity: 0;
}
.ae-card-enter.ae-fade-up {
  animation: ae-fade-up    0.42s cubic-bezier(0.22, 0.68, 0, 1.2) forwards;
}
.ae-card-enter.ae-fade-in {
  animation: ae-fade-in    0.36s ease forwards;
}
.ae-card-enter.ae-slide-left {
  animation: ae-slide-left 0.38s cubic-bezier(0.22, 0.68, 0, 1.2) forwards;
}
.ae-card-enter.ae-slide-right {
  animation: ae-slide-right 0.38s cubic-bezier(0.22, 0.68, 0, 1.2) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ae-card-enter { animation: ae-fade-in 0.2s ease forwards; }
}

/* =============================================================================
   COLLECTION CAROUSEL
   Single centered label with left/right arrow navigation.
   Replaces the horizontal pill row and mobile dropdown.
   ============================================================================= */

.ae-collection-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 0 1rem;
  user-select: none;
}

.ae-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;   /* 44px — WCAG 2.5.5 minimum tap target */
  height: 2.75rem;
  border: 1px solid rgba(45, 62, 42, 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--forest, #2d3e2a);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.ae-carousel-arrow:hover {
  background: var(--sage-mist, rgba(156, 175, 136, 0.15));
  border-color: var(--forest, #2d3e2a);
  transform: scale(1.08);
}

.ae-carousel-arrow:active {
  transform: scale(0.94);
}

.ae-carousel-label {
  min-width: 10rem;
  text-align: center;
  overflow: hidden;
}

.ae-carousel-current {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--forest, #2d3e2a);
  white-space: nowrap;
}

/* Slide transition keyframes */
@keyframes ae-carousel-exit-left {
  from { opacity: 1; transform: translateX(0);      }
  to   { opacity: 0; transform: translateX(-24px);  }
}
@keyframes ae-carousel-exit-right {
  from { opacity: 1; transform: translateX(0);     }
  to   { opacity: 0; transform: translateX(24px);  }
}
@keyframes ae-carousel-enter-right {
  from { opacity: 0; transform: translateX(24px);  }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes ae-carousel-enter-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0);     }
}

.ae-carousel-current.ae-carousel-exit-left  { animation: ae-carousel-exit-left  0.16s ease forwards; }
.ae-carousel-current.ae-carousel-exit-right { animation: ae-carousel-exit-right 0.16s ease forwards; }
.ae-carousel-current.ae-carousel-enter-right{ animation: ae-carousel-enter-right 0.22s ease forwards; }
.ae-carousel-current.ae-carousel-enter-left { animation: ae-carousel-enter-left  0.22s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .ae-carousel-current[class*="ae-carousel-"] { animation: ae-fade-in 0.15s ease forwards; }
}

@media (max-width: 480px) {
  .ae-carousel-current { font-size: 1.2rem; letter-spacing: 0.06em; }
  .ae-carousel-label   { min-width: 8rem;   }
}

/* Carousel dot indicators */
.ae-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}
.ae-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-mist, rgba(156, 175, 136, 0.4));
  border: 1px solid rgba(45, 62, 42, 0.2);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.ae-carousel-dot.active {
  background: var(--champagne-gold, #c9a96e);
  border-color: var(--champagne-gold, #c9a96e);
  transform: scale(1.3);
}
.ae-carousel-dot:hover:not(.active) {
  background: rgba(45, 62, 42, 0.25);
}

/* Product card meta line — origin country + organic badge */
.product-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1;
  margin: -0.1rem 0 0.3rem;
}
.product-origin {
  color: var(--warm-grey, #888);
  font-style: italic;
}
.product-organic {
  color: #3a7a3a;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.product-type-tag {
  display: inline-block;
  background: rgba(45, 62, 42, 0.08);
  color: var(--deep-forest, #2d3e2a);
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.13em 0.5em;
  border-radius: 4px;
}
.product-dil-tag {
  display: inline-block;
  background: rgba(201, 169, 110, 0.15);
  color: #8a6234;
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.13em 0.5em;
  border-radius: 4px;
}