/* ============================================================================
 * Akekart — Shared Card Foundation
 * assets/css/cards-foundation.css   ·   created E8 (2026-05-24)
 * ============================================================================
 *
 * PURPOSE
 *   The convergence foundation for Akekart's product-card surfaces. The
 *   marketplace currently has THREE independent card systems:
 *     · PDP      .r2-rcard      (styled by pdp.css — a 158px scroll-rail card)
 *     · Homepage .prod-card     (styled by index.php inline <style> — grid card)
 *     · Search   .product-card  (styled by search.php inline <style> — grid card)
 *   This file is the SHARED DESIGN LANGUAGE distilled from all three: the
 *   values they already agree on, expressed once as tokens + opt-in primitives.
 *
 * SAFETY CONTRACT  (why this file is zero-risk to ship)
 *   · It is PURELY ADDITIVE. As of E8 NO page loads it and NO markup uses it.
 *   · It does NOT touch pdp.css — the D22 cascade order is untouched.
 *   · All tokens are namespaced --ake-card-* — no collision with any existing
 *     custom property.
 *   · All classes are namespaced .akc-* (Akekart Card) — they do NOT match any
 *     existing class on the PDP (.r2-*), homepage (.prod-*) or search
 *     (.product-*) pages, so loading this file changes nothing until a page
 *     opts in by adding an .akc-* class.
 *   · Primitives are opt-in: a page adopts them one element at a time (E9),
 *     each change render-verified — the E5 best-selling discipline.
 *
 * ADOPTION (future — E9, not E8)
 *   A page opts in by (1) <link>-ing this file and (2) adding .akc-* classes
 *   to its card markup, or by setting the --ake-card-* tokens on its existing
 *   classes. Until then this file is inert.
 *
 * DERIVATION — the common denominators (see DEPLOY_E8.md §2 for the full table)
 *   radius     PDP 12-13px · home 12px · search 12px        => 12px
 *   border     PDP #e8edf4 · home #eaeaea · search #e8ecef  => #e8ecef
 *   hover lift home -4px · search -4px (PDP -3px, rail)      => -4px (grid)
 *   transition home .25s · search .25s (PDP .22s)            => .25s
 *   price      all three #0f172a / weight 800                => identical
 *   mrp        all three #94a3b8 line-through                => identical
 *   discount   all three #16a34a                             => identical
 *   title      all three -webkit-line-clamp:2, line-height ~1.4
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 1. DESIGN TOKENS  — the shared card language, as CSS custom properties.
 *    Scoped to :root. Reading a token costs nothing; a page only feels them
 *    once it applies an .akc-* class or references a token itself.
 * -------------------------------------------------------------------------- */
:root {
  /* surface */
  --ake-card-bg:            #ffffff;
  --ake-card-radius:        12px;
  --ake-card-radius-sm:     8px;          /* inner image box */
  --ake-card-border:        #e8ecef;      /* converged border colour */
  --ake-card-border-hover:  #dbeafe;      /* gentle blue on hover */

  /* elevation — resting flat, lift on hover (the value home+search agree on) */
  --ake-card-shadow:        0 1px 2px rgba(16,24,40,.04);
  --ake-card-shadow-hover:  0 10px 26px rgba(16,24,40,.075), 0 2px 6px rgba(16,24,40,.05);

  /* motion */
  --ake-card-transition:    .25s cubic-bezier(.4,0,.2,1);
  --ake-card-lift:          translateY(-4px);

  /* spacing rhythm */
  --ake-card-pad:           14px;
  --ake-card-gap:           6px;
  --ake-card-grid-gap:      13px;

  /* image box */
  --ake-card-img-bg:        #fafbfc;
  --ake-card-img-h:         140px;

  /* commerce typography — the price/mrp/discount trio all 3 systems share */
  --ake-card-price-color:   #0f172a;
  --ake-card-price-weight:  800;
  --ake-card-mrp-color:     #94a3b8;
  --ake-card-disc-color:    #16a34a;
  --ake-card-title-color:   #1e293b;
  --ake-card-title-lh:      1.4;

  /* badge / chip primitives */
  --ake-chip-radius:        4px;
  --ake-chip-pad:           2px 8px;
  --ake-chip-size:          10px;
}

/* ----------------------------------------------------------------------------
 * 2. PRIMITIVE — card shell  (.akc-card)
 *    The shared surface + elevation + hover behaviour. Opt-in.
 * -------------------------------------------------------------------------- */
.akc-card {
  background: var(--ake-card-bg);
  border: 1px solid var(--ake-card-border);
  border-radius: var(--ake-card-radius);
  box-shadow: var(--ake-card-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ake-card-transition),
              border-color var(--ake-card-transition),
              transform var(--ake-card-transition);
}
.akc-card:hover {
  box-shadow: var(--ake-card-shadow-hover);
  border-color: var(--ake-card-border-hover);
  transform: var(--ake-card-lift);
}
.akc-card:active { transform: translateY(-1px); }

/* ----------------------------------------------------------------------------
 * 3. PRIMITIVE — image wrapper  (.akc-imgwrap)
 * -------------------------------------------------------------------------- */
.akc-imgwrap {
  height: var(--ake-card-img-h);
  background: var(--ake-card-img-bg);
  border-radius: var(--ake-card-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.akc-imgwrap img {
  max-width: 100%;
  max-height: calc(var(--ake-card-img-h) - 16px);
  object-fit: contain;
  display: block;
}

/* ----------------------------------------------------------------------------
 * 4. PRIMITIVE — body / title  (.akc-body, .akc-title)
 * -------------------------------------------------------------------------- */
.akc-body {
  padding: var(--ake-card-pad);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ake-card-gap);
}
.akc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ake-card-title-color);
  line-height: var(--ake-card-title-lh);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * 5. PRIMITIVE — pricing row  (.akc-price-row + parts)
 *    The price / mrp / discount trio is byte-identical across all 3 systems.
 * -------------------------------------------------------------------------- */
.akc-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.akc-price {
  font-size: 17px;
  font-weight: var(--ake-card-price-weight);
  color: var(--ake-card-price-color);
}
.akc-mrp {
  font-size: 12px;
  color: var(--ake-card-mrp-color);
  text-decoration: line-through;
}
.akc-disc {
  font-size: 11px;
  font-weight: 700;
  color: var(--ake-card-disc-color);
}

/* ----------------------------------------------------------------------------
 * 6. PRIMITIVE — badge + chip  (.akc-badge, .akc-chip)
 *    Shared overlay-badge and info-chip primitives. Colour variants opt-in.
 * -------------------------------------------------------------------------- */
.akc-badge {
  position: absolute;
  top: 10px;
  font-size: var(--ake-chip-size);
  font-weight: 700;
  padding: var(--ake-chip-pad);
  border-radius: var(--ake-chip-radius);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.akc-badge--ad    { right: 10px; background: #eff6ff; color: #2874f0; }
.akc-badge--trend { left: 10px;  background: #dcfce7; color: #16a34a; }

.akc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 7px;
  border-radius: var(--ake-chip-radius);
  white-space: nowrap;
}
.akc-chip--free { color: #059669; background: #f0fdf4; border-color: #bbf7d0; }
.akc-chip--cod  { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.akc-chip--fast { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }

/* ----------------------------------------------------------------------------
 * 7. PRIMITIVE — grid container  (.akc-grid)
 *    Responsive auto-fill grid. min column width is a token so homepage (185px)
 *    and search (200px) can converge without one dictating the other.
 * -------------------------------------------------------------------------- */
.akc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--akc-grid-min, 190px), 1fr));
  gap: var(--ake-card-grid-gap);
}

/* ----------------------------------------------------------------------------
 * 8. RESPONSIVE — mobile rhythm. Two columns on small screens, the layout
 *    both homepage and search already converge on at <=768px.
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .akc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .akc-body { padding: 11px; }
}

/* ----------------------------------------------------------------------------
 * 9. ACCESSIBILITY — honour reduced-motion. Mirrors the PDP's D-STABILIZE
 *    behaviour so an adopting page is consistent with the PDP.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .akc-card { transition: none; }
  .akc-card:hover, .akc-card:active { transform: none; }
}