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

  /*
   * Cards whose wrapper uses a non-default main-axis distribution
   * (space-between, center, end, …) need to fill their grid cell so
   * flex has room to distribute. Scoped to the products grid only —
   * never applied globally so standalone card previews stay
   * content-sized unless the author opts in via wrapper alignment.
   */
  .if-products-grid > .ifc-card.ifc-card--fill-cell,
  .if-products-grid > a.ifc-card.ifc-card--fill-cell {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
  }
}

/* -------------------------------------------------------------------------- */
/* 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 {
  /* Flex-centered "frame" around the <img>. This is the same shape Bricks
     uses on its native Image element: a wrapper whose dimensions/aspect
     are author-controlled, with the image centered both horizontally and
     vertically inside it. Authors can change its background (visible as
     letterboxing when the image doesn't fully cover the frame) and any
     flex props from the Style Builder's wrapper controls. */
  .ifc-card__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
    /* Default to a square frame so cards align in a grid even when the
       schema doesn't pick an aspect-ratio. The schema's option (1/1,
       4/3, 16/9, …) is emitted as inline `aspect-ratio` and wins via
       specificity; the "Auto" choice emits `aspect-ratio: auto` to
       drop back to the image's intrinsic ratio. */
    aspect-ratio: 1 / 1;
  }
  .ifc-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    /* max-* caps the image to the frame when authors switch to a smaller
       `object-fit: none` / explicit `width: auto` path; with the default
       width/height: 100% they are no-ops. */
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /* `object-position` defaults to 50% 50% but theme stylesheets
       sometimes ship a `top` override (typical for blog excerpts); pin
       it here so square-image-in-landscape-frame is centered without
       drifting to the top. */
    object-position: center center;
    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 {
  background: #049326;
  color: #fff;
  opacity: 1;
}
.ifc-card.ifc-card .ifc-card__add-to-cart.if-button.is-error,
.ifc-card.ifc-card .ifc-card__add-to-cart.js-add-to-cart.is-error {
  background: #c62828;
  color: #fff;
}

/* Loading spinner — animate the inner SVG while the request is in
   flight. Mirrors the legacy `.if-card__button.if-is-loading svg`
   rule but scoped to the schema card class so it doesn't bleed
   onto theme buttons. */
.ifc-card.ifc-card .ifc-card__add-to-cart.if-is-loading svg,
.ifc-card.ifc-card .ifc-card__add-to-cart.if-is-loading .ifc-card__add-to-cart-icon svg {
  animation: ifc-spin 0.6s linear infinite;
}

@keyframes ifc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Authors who want to keep their custom styling pristine can opt out
   of the animation by setting `disable_animation: true` on the
   add-to-cart block — the renderer adds `data-if-no-animation="1"`
   and we skip every transition state. The class-add side-effects
   from `if-add-to-cart.js` still fire (button is still disabled
   during the request), but visually nothing happens beyond the
   click. */
.ifc-card.ifc-card .ifc-card__add-to-cart[data-if-no-animation="1"].if-is-loading,
.ifc-card.ifc-card .ifc-card__add-to-cart[data-if-no-animation="1"].is-added,
.ifc-card.ifc-card .ifc-card__add-to-cart[data-if-no-animation="1"].is-error {
  background: inherit;
  color: inherit;
}
.ifc-card.ifc-card .ifc-card__add-to-cart[data-if-no-animation="1"].if-is-loading svg,
.ifc-card.ifc-card .ifc-card__add-to-cart[data-if-no-animation="1"].if-is-loading .ifc-card__add-to-cart-icon svg {
  animation: none;
}

.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. The 2.25em square is just a SANE DEFAULT — it's
 * what users want when they pick "Icon only" without thinking about
 * sizing. v1.1 added per-block Width / Height options whose inline
 * styles (specificity 1000) trump this rule, so the moment the user
 * sets `width: 100%` (or any explicit value) it takes over. Padding
 * stays 0 so the SVG sits flush; any padding declared via the
 * Design tab (specificity 30) wins.
 */
.ifc-card.ifc-card .ifc-card__button--icon,
.ifc-card.ifc-card .ifc-card__add-to-cart--icon {
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  min-width: 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;
  /* The wrapper sizes to its SVG child (whose dimensions come from
     `--ifc-btn-icon-glyph-size`). Pre-v1.1 we forced `width: 100%`
     so the wrapper would fill an icon-only button — that fights
     icon+text layouts where flex distributes children, producing
     the "icon takes half / label snaps right" bug. */
  flex: 0 0 auto;
}
.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;
}