/**
 * Base stylesheet for the Card Builder runtime.
 *
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║  Three-layer styling model                                    ║
 * ╠═══════════════════════════════════════════════════════════════╣
 * ║  1) `@layer ifc-base`  →  structural defaults + design tokens ║
 * ║                           (this file)                         ║
 * ║  2) UNLAYERED RESET    →  composite styling that MUST resist  ║
 * ║                           theme/Woo defaults — uses class-    ║
 * ║                           doubling (`.ifc-card.ifc-card`) for ║
 * ║                           a +10 specificity boost.            ║
 * ║  3) UNLAYERED SCHEMA   →  per-block rules emitted by          ║
 * ║                           StyleCompiler::generateCardCss()    ║
 * ║                           into `<style id="if-card-style">`,  ║
 * ║                           selector specificity 30.            ║
 * ╚═══════════════════════════════════════════════════════════════╝
 *
 * Why layers? Theme + WooCommerce rules ship UNLAYERED. CSS Cascade
 * Layers state: every layered rule LOSES against unlayered ones,
 * regardless of specificity. So:
 *   - layered base   <  unlayered theme        → theme wins
 *   - unlayered base <  unlayered schema (30)  → schema wins (specificity)
 *
 * That gives us exactly the right precedence:
 *   - schema rules from the builder ALWAYS win,
 *   - theme can adjust generic fallbacks (radius, padding) when sensible,
 *   - composite-specific styling (star colours, stock-pill states, button
 *     base) lives unlayered with a class-doubling boost so theme `<a>` /
 *     `.product .price` rules can't bleed in.
 *
 * The Card Builder iframe loads this same file so preview = production.
 */

@layer ifc-base, ifc-base-deep;

/* -------------------------------------------------------------------------- */
/* Layer 1 — Tokens + structural defaults                                     */
/* These are the values every card inherits unless its schema or the theme    */
/* overrides them.                                                            */
/* -------------------------------------------------------------------------- */
@layer ifc-base {
  .ifc-card {
    --ifc-color-text: #111827;
    --ifc-color-muted: #6b7280;
    --ifc-color-link: inherit;
    --ifc-color-bg: #ffffff;
    --ifc-color-border: #e5e7eb;
    --ifc-radius: 12px;
    --ifc-gap: 8px;
    --ifc-pad: 12px;

    --ifc-star-on: #f59e0b;
    --ifc-star-off: #d1d5db;

    --ifc-stock-in-fg: #15803d;
    --ifc-stock-in-bg: #dcfce7;
    --ifc-stock-out-fg: #b91c1c;
    --ifc-stock-out-bg: #fee2e2;
    --ifc-stock-pre-fg: #b45309;
    --ifc-stock-pre-bg: #fef3c7;

    --ifc-btn-bg: #111827;
    --ifc-btn-fg: #ffffff;
    --ifc-btn-border: transparent;
    --ifc-btn-radius: 8px;
    --ifc-btn-pad: 8px 14px;

    --ifc-badge-bg: #ef4444;
    --ifc-badge-fg: #ffffff;
    --ifc-badge-radius: 999px;

    --ifc-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.08);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ifc-gap);
    padding: var(--ifc-pad);
    border-radius: var(--ifc-radius);
    background: var(--ifc-color-bg);
    color: var(--ifc-color-text);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 160ms ease, transform 160ms ease;
  }
}

/* -------------------------------------------------------------------------- */
/* Mini-reset — neutralise common theme-inheritance leaks.                    */
/*                                                                            */
/* Themes love to put padding/margin on `a`, line-through on `del`, custom    */
/* font-weight on `h2-h6`, big margins on `<p>`, and so on. Inside a card     */
/* those defaults break the builder fidelity. We revert them on every        */
/* descendant of `.ifc-card`. Layered so explicit schema rules still win.    */
/* -------------------------------------------------------------------------- */
@layer ifc-base-deep {
  .ifc-card *,
  .ifc-card *::before,
  .ifc-card *::after {
    box-sizing: border-box;
  }
  .ifc-card a {
    color: inherit;
    text-decoration: none;
  }
  .ifc-card a:hover { text-decoration: none; }
  .ifc-card img {
    max-width: 100%;
    height: auto;
    border-style: none;
  }
  .ifc-card h1, .ifc-card h2, .ifc-card h3,
  .ifc-card h4, .ifc-card h5, .ifc-card h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: 1.3;
  }
  .ifc-card p { margin: 0; padding: 0; }
  .ifc-card ul, .ifc-card ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ifc-card button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    padding: 0;
  }
  .ifc-card del {
    text-decoration: line-through;
  }
  .ifc-card svg {
    display: inline-block;
    vertical-align: middle;
  }
}

/* -------------------------------------------------------------------------- */
/* Layer 2 — Wrapper interaction states (UNLAYERED).                          */
/* Hover/focus needs to win against `.archive a:hover` etc. so we ship them   */
/* outside the layer with a doubled-class boost.                              */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card:hover { box-shadow: var(--ifc-shadow-hover); }
.ifc-card.ifc-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Containers                                                                 */
/* -------------------------------------------------------------------------- */
@layer ifc-base {
  .ifc-card__row,
  .ifc-card__col,
  .ifc-card__stack,
  .ifc-card__grid,
  .ifc-card__flex { display: flex; gap: var(--ifc-gap); min-width: 0; }
  .ifc-card__col,
  .ifc-card__stack { flex-direction: column; }
  .ifc-card__row { flex-direction: row; align-items: center; }
  .ifc-card__grid { display: grid; }
  .ifc-card__flex { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------- */
/* Image                                                                      */
/* -------------------------------------------------------------------------- */
@layer ifc-base {
  .ifc-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: inherit;
  }
  .ifc-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .ifc-card__image--placeholder {
    background: #f3f4f6;
  }
}

/* -------------------------------------------------------------------------- */
/* Title + text                                                               */
/* (Unlayered — themes love to apply heavy fonts/colors on h2-h6 and a.)      */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__title {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--ifc-color-text);
  line-height: 1.3;
  word-break: break-word;
}
.ifc-card.ifc-card .ifc-card__title a {
  color: inherit;
  text-decoration: none;
}
.ifc-card.ifc-card .ifc-card__title a:hover { text-decoration: underline; }
.ifc-card.ifc-card .ifc-card__text {
  color: var(--ifc-color-text);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* Price (unlayered — Woo's `.price` rules are notoriously aggressive)        */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  color: var(--ifc-color-text);
}
.ifc-card.ifc-card .ifc-card__price-current { font-weight: 600; }
.ifc-card.ifc-card .ifc-card__price-current--sale { color: #b91c1c; }
.ifc-card.ifc-card .ifc-card__price-original {
  color: var(--ifc-color-muted);
  font-weight: 400;
  text-decoration: line-through;
}

/* -------------------------------------------------------------------------- */
/* Rating (unlayered — star colours must NOT inherit theme link colour)       */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ifc-color-muted);
  font-size: 0.9em;
  line-height: 1;
}
.ifc-card.ifc-card .ifc-card__rating-stars {
  display: inline-flex;
  gap: 1px;
  letter-spacing: 0;
  font-size: 1em;
  line-height: 1;
}
.ifc-card.ifc-card .ifc-card__rating-stars .is-on  { color: var(--ifc-star-on); }
.ifc-card.ifc-card .ifc-card__rating-stars .is-off { color: var(--ifc-star-off); }
.ifc-card.ifc-card .ifc-card__rating-count { color: var(--ifc-color-muted); }

/* -------------------------------------------------------------------------- */
/* Stock pill (unlayered — pill bg/fg must survive themes restyling .status)  */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.4;
}
.ifc-card.ifc-card .ifc-card__stock--in {
  color: var(--ifc-stock-in-fg);
  background: var(--ifc-stock-in-bg);
}
.ifc-card.ifc-card .ifc-card__stock--out {
  color: var(--ifc-stock-out-fg);
  background: var(--ifc-stock-out-bg);
}
.ifc-card.ifc-card .ifc-card__stock--pre,
.ifc-card.ifc-card .ifc-card__stock--onbackorder,
.ifc-card.ifc-card .ifc-card__stock--backorder {
  color: var(--ifc-stock-pre-fg);
  background: var(--ifc-stock-pre-bg);
}
.ifc-card.ifc-card .ifc-card__stock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ifc-card.ifc-card .ifc-card__stock-icon svg {
  display: block;
  width: 0.7em;
  height: 0.7em;
}
.ifc-card.ifc-card .ifc-card__stock-label { display: inline-block; }

/* -------------------------------------------------------------------------- */
/* Badge                                                                      */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ifc-badge-fg);
  background: var(--ifc-badge-bg);
  border-radius: var(--ifc-badge-radius);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Buttons + add-to-cart                                                      */
/* (Unlayered — theme button defaults are rampant.)                           */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__button,
.ifc-card.ifc-card .ifc-card__add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ifc-btn-pad);
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--ifc-btn-radius);
  background: var(--ifc-btn-bg);
  color: var(--ifc-btn-fg);
  border: 1px solid var(--ifc-btn-border);
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
  /* In a flex row (`ifc-card__row` / `ifc-card__flex`) the button would
   * otherwise shrink to fit alongside a long price/label and break the
   * inner text across multiple lines. The builder iframe doesn't show
   * this because the iframe lives in a wide canvas, but on the frontend
   * the parent grid column is narrow. Lock the natural width with
   * `white-space: nowrap` + `flex-shrink: 0` so the visible text stays
   * on a single line. Users can still override either property from the
   * Design tab (specificity 30, source order later wins). */
  white-space: nowrap;
  flex-shrink: 0;
}
.ifc-card.ifc-card .ifc-card__button:hover,
.ifc-card.ifc-card .ifc-card__add-to-cart:hover { opacity: 0.92; }

/* AJAX add-to-cart loading / success — mirrors legacy `.if-card__button` states. */
.ifc-card.ifc-card .ifc-card__add-to-cart.if-button.if-is-loading,
.ifc-card.ifc-card .ifc-card__add-to-cart.js-add-to-cart.if-is-loading {
  pointer-events: none;
}
.ifc-card.ifc-card .ifc-card__add-to-cart.if-button.is-added,
.ifc-card.ifc-card .ifc-card__add-to-cart.js-add-to-cart.is-added {
  opacity: 0.92;
}

.ifc-card.ifc-card .ifc-card__button--outline,
.ifc-card.ifc-card .ifc-card__add-to-cart--outline {
  background: transparent;
  color: var(--ifc-btn-bg);
  border-color: var(--ifc-btn-bg);
}
.ifc-card.ifc-card .ifc-card__button--ghost,
.ifc-card.ifc-card .ifc-card__add-to-cart--ghost {
  background: transparent;
  color: var(--ifc-btn-bg);
  border-color: transparent;
}
/*
 * Icon-only buttons. Dimensions are driven by CSS variables so users
 * can override them per-block from the Design tab / custom CSS without
 * fighting selector specificity:
 *   --ifc-btn-icon-size       — outer button square (default 2.25em)
 *   --ifc-btn-icon-glyph-size — inner SVG (default 1em)
 * Padding intentionally defaults to 0 so the SVG sits flush; if the
 * user sets padding on the block in the Design tab their schema rule
 * (specificity 30, source-order later) overrides this.
 */
.ifc-card.ifc-card .ifc-card__button--icon,
.ifc-card.ifc-card .ifc-card__add-to-cart--icon {
  width: var(--ifc-btn-icon-size, 2.25em);
  height: var(--ifc-btn-icon-size, 2.25em);
  padding: 0;
}

.ifc-card.ifc-card .ifc-card__button--sm { padding: 6px 10px; font-size: 0.8em; }
.ifc-card.ifc-card .ifc-card__button--lg { padding: 10px 18px; font-size: 1em; }

.ifc-card.ifc-card .ifc-card__button-icon,
.ifc-card.ifc-card .ifc-card__add-to-cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* So the inner SVG can scale to fill when icon-size is increased
     beyond the glyph default, instead of staying tiny in the middle. */
  width: 100%;
  height: 100%;
}
.ifc-card.ifc-card .ifc-card__button-icon svg,
.ifc-card.ifc-card .ifc-card__add-to-cart-icon svg {
  display: block;
  width: var(--ifc-btn-icon-glyph-size, 1em);
  height: var(--ifc-btn-icon-glyph-size, 1em);
}

.ifc-card.ifc-card .ifc-card__button-icon--start { order: -1; }
.ifc-card.ifc-card .ifc-card__button-icon--end   { order: 1; }
.ifc-card.ifc-card .ifc-card__button-label { display: inline-block; }

/* -------------------------------------------------------------------------- */
/* Taxonomy + attribute + meta                                                */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__attr,
.ifc-card.ifc-card .ifc-card__taxonomy,
.ifc-card.ifc-card .ifc-card__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--ifc-color-muted);
  font-size: 0.85em;
  line-height: 1.4;
}
.ifc-card.ifc-card .ifc-card__taxonomy-prefix {
  font-weight: 600;
  color: var(--ifc-color-text);
}
.ifc-card.ifc-card .ifc-card__taxonomy-term {
  color: inherit;
  text-decoration: none;
}
.ifc-card.ifc-card .ifc-card__taxonomy-term:hover { text-decoration: underline; }
.ifc-card.ifc-card .ifc-card__taxonomy-sep { color: var(--ifc-color-muted); }
.ifc-card.ifc-card .ifc-card__taxonomy-more { color: var(--ifc-color-muted); }

.ifc-card.ifc-card .ifc-card__taxonomy--pills .ifc-card__taxonomy-term {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ifc-color-border);
  color: var(--ifc-color-text);
}

/* -------------------------------------------------------------------------- */
/* Variation selector                                                         */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__variation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ifc-card.ifc-card .ifc-card__variation-pill {
  padding: 2px 8px;
  font-size: 0.8em;
  border-radius: 999px;
  background: var(--ifc-color-border);
  color: var(--ifc-color-text);
  border: 1px solid transparent;
  cursor: pointer;
}
.ifc-card.ifc-card .ifc-card__variation-pill:hover {
  border-color: var(--ifc-color-text);
}

/* -------------------------------------------------------------------------- */
/* Icons                                                                      */
/* -------------------------------------------------------------------------- */
.ifc-card.ifc-card .ifc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ifc-card.ifc-card .ifc-card__icon svg {
  display: block;
  width: 1em;
  height: 1em;
}