/* ============================================================================
   Smartoys — product-page "blocs" design system  (Layer 0: design tokens)
   ----------------------------------------------------------------------------
   Framework-agnostic. Consumed both by the server-rendered PHP partials
   (includes/modules/content/product_info/blocs/*) and by the Vue islands
   (frontend/src/islands/*) — the islands reference these same custom
   properties via var(--st-*) so the look stays in one place.

   Tokens transcribed from the design handoff:
   docs/features/design_handoff_bloc_occasion/  (the `ST` object in blocks.jsx).

   Everything is namespaced under .st-* so it cannot leak into the legacy
   Bootstrap-3 styles already on the page.
   ========================================================================== */

:root {
  --st-maroon: #8a2330;        /* primary: buttons, ribbons, accents, promo price */
  --st-maroon-dark: #7a1f2b;   /* hover on maroon buttons */
  --st-green: #8cc63f;         /* qty "+" button */
  --st-green-dark: #7eb637;
  --st-yellow: #f2d24e;        /* primary sell CTA */
  --st-yellow-dark: #d8b531;
  --st-yellow-ink: #3a3320;    /* text on yellow CTA */
  --st-ink: #222;              /* titles, new price */
  --st-page-bg: #ececec;
  --st-card-border: #e2e2e2;
  --st-label-gray: #6f6f6f;    /* neutral tab labels (NEUF, …) */
  --st-dark-gray: #3a3a3a;     /* "J'ACHÈTE" tab */
  --st-struck: #8c8c8c;        /* struck-through old price */
  --st-line: #e6e6e6;          /* <hr>, separators */
  --st-tint-bg: #fbf3f4;       /* maroon-tinted panels (points, "JE VENDS") */
  --st-tint-border: #efdfe1;
  --st-strip-bg: #f4f4f4;      /* "buy used" footer strip (variant B) */
  --st-radius: 6px;
  --st-card-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---- equal-width / equal-height row (brief §1 layout constraint) --------- */
.st-blocs-row {
  display: flex;
  gap: 16px;
  align-items: stretch;            /* both cards same height */
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
}
.st-blocs-row > .st-card {
  flex: 1 1 280px;                 /* same width, wrap to full width on mobile */
  min-width: 0;
}

/* ---- shared card shell --------------------------------------------------- */
.st-card {
  background: #fff;
  border: 1px solid var(--st-card-border);
  border-radius: var(--st-radius);
  box-shadow: var(--st-card-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.st-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.st-card hr { border: none; border-top: 1px solid var(--st-line); margin: 16px 0 12px; }

/* tab label that sits at the top of a card */
.st-tab {
  align-self: flex-start;
  background: var(--st-label-gray);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 4px 12px;
  border-radius: 5px;
}
.st-tab--maroon { background: var(--st-maroon); }
.st-tab--dark { background: var(--st-dark-gray); }

/* ---- buttons ------------------------------------------------------------- */
.st-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border-radius: 4px;
  padding: 13px 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
}
.st-btn .fa, .st-btn .fas, .st-btn i { margin-right: 8px; }
.st-btn--maroon { background: var(--st-maroon); color: #fff; }
.st-btn--maroon:hover { background: var(--st-maroon-dark); color: #fff; }
.st-btn--yellow {
  background: var(--st-yellow);
  color: var(--st-yellow-ink);
  border: 1px solid var(--st-yellow-dark);
  font-weight: 800;
}
.st-btn--yellow:hover { background: var(--st-yellow-dark); color: var(--st-yellow-ink); }
.st-btn--outline {
  background: #fff;
  color: var(--st-maroon);
  border: 2px solid var(--st-maroon);
  font-weight: 800;
  padding: 11px 14px;
  font-size: 15px;
}
.st-btn--outline:hover { background: var(--st-tint-bg); color: var(--st-maroon); }

/* ---- prices (NEUF card) -------------------------------------------------- */
.st-price { display: flex; align-items: flex-end; gap: 12px; justify-content: center; margin-top: 14px; }
.st-price__old { color: var(--st-struck); text-decoration: line-through; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.st-price__now { color: var(--st-ink); font-weight: 800; line-height: 1; font-size: 44px; letter-spacing: -1px; }
.st-price__now--promo { color: var(--st-maroon); font-size: 46px; }
.st-price__cents { font-size: 23px; }
.st-tag-line { text-align: center; font-weight: 800; letter-spacing: 1px; color: var(--st-ink); font-size: 15px; margin: 0 0 12px; }

/* ---- quantity stepper (progressive-enhancement target) ------------------- */
.st-qty { display: flex; justify-content: center; margin-top: 14px; }
.st-qty__btn {
  width: 46px; height: 38px; border: none; color: #fff; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.st-qty__btn--minus { background: var(--st-maroon); border-radius: 4px 0 0 4px; }
.st-qty__btn--plus { background: var(--st-green); border-radius: 0 4px 4px 0; }
.st-qty__btn[disabled] { opacity: .5; cursor: default; }
.st-qty__input {
  width: 86px; text-align: center; font-size: 17px; color: var(--st-ink);
  border: 1px solid #ddd; border-left: none; border-right: none;
  -moz-appearance: textfield;
}
.st-qty__input::-webkit-outer-spin-button,
.st-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- loyalty points strip (brief §6, recommended "bandeau bas") ---------- */
.st-points {
  display: flex; align-items: center; gap: 11px;
  background: var(--st-tint-bg);
  border: 1px solid var(--st-tint-border);
  border-radius: var(--st-radius);
  padding: 10px 12px;
  margin-top: 14px;
}
.st-points__icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--st-maroon); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.st-points__text { line-height: 1.25; font-size: 13.5px; color: var(--st-ink); }
.st-points__more {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--st-maroon); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
}

/* ---- bloc occasion — shared -------------------------------------------- */
.st-bloc h3, .st-bloc h4 { margin: 0 0 4px; font-weight: 800; color: var(--st-ink); line-height: 1.15; }
.st-bloc p { font-size: 13.5px; color: #555; line-height: 1.45; margin: 0 0 16px; }
.st-bloc__ribbon {
  background: var(--st-maroon); color: #fff;
  padding: 11px 18px; display: flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: .5px; font-size: 16px;
}
.st-bloc__ribbon i { font-size: 16px; }

/* Variant B — "Reprise cash" : ribbon + 3 steps + buy strip */
.st-steps { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 18px; }
.st-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.st-step__num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--st-maroon); color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.st-step__label { font-size: 12px; color: #444; text-align: center; font-weight: 600; line-height: 1.2; }
.st-step__chevron { align-self: flex-start; margin-top: 8px; color: #ccc; }
.st-bloc__buystrip {
  background: var(--st-strip-bg); border-top: 1px solid var(--st-line);
  padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.st-bloc__buystrip span { font-size: 13px; color: #666; }
.st-link { color: var(--st-maroon); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.st-link i { margin-left: 4px; font-size: 12px; }

/* Variant C — "Je vends / J'achète" : two stacked panels */
.st-panel { padding: 20px 18px; }
.st-panel--sell { background: var(--st-tint-bg); border-bottom: 1px solid var(--st-line); }
.st-panel--buy { background: #fff; }
.st-panel .st-tab { display: inline-block; margin-bottom: 0; }
.st-panel h4 { font-size: 15px; margin: 10px 0 6px; }       /* margin-top = gap under the pill */
.st-panel--sell h4 { font-size: 18px; margin: 10px 0 6px; }
.st-panel p { font-size: 13px; color: #666; margin-bottom: 14px; }

/* ============================================================================
   A/B reveal — both variants ship in the server HTML (crawlable, no cloaking,
   page-cache-safe). A tiny inline script sets data-st-ab on <html> pre-paint;
   these rules reveal exactly one. No-JS default: show B.
   ========================================================================== */
.st-bloc[data-ab-variant] { display: flex; flex-direction: column; flex: 1; }
.st-bloc[data-ab-variant="C"] { display: none; }                 /* no-JS default: B */
html[data-st-ab="B"] .st-bloc[data-ab-variant="C"] { display: none; }
html[data-st-ab="B"] .st-bloc[data-ab-variant="B"] { display: flex; }
html[data-st-ab="C"] .st-bloc[data-ab-variant="B"] { display: none; }
html[data-st-ab="C"] .st-bloc[data-ab-variant="C"] { display: flex; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
  .st-blocs-row { gap: 12px; }
  .st-blocs-row > .st-card { flex-basis: 100%; }
}