/**
 * HECmania Cross-Variant widget — CSS PŘEVZATO Z PROTOTYPU v4
 * (`frontend/design-preview-inline.js`), tedy z podoby, kterou Lucky
 * schválil živě v prohlížeči (screenshot 2026-09-07 13:16).
 *
 * Zdrojem pravdy je tenhle prototyp, NE `approved-design-original.html`
 * — ten je starší artifact se 4 variantami, glow efektem a scrollbarem.
 * Schválená podoba má:
 *   - žádný glow, žádný scrollbar (všechny varianty vidět najednou)
 *   - stepper: číslo vlevo, oranžové ▲▼ nad sebou vpravo
 *   - dopravu (`.shkDetailStock`) v kartovém stylu pod panelem
 *   - 2-sloupcový layout stránky (vlevo fotka, vpravo panel)
 *
 * Prefixy `#hec-design-preview-*` z prototypu jsou přepsané na produkční
 * třídy — widget se vkládá přímo, bez demo obalu.
 */

.hec-layout-root { display: grid; grid-template-columns: 52% 1fr; gap: 32px; align-items: start; padding: 24px 0; }
.hec-layout-root .p-image-wrapper { position: static !important; top: auto !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; padding: 0 !important; }
.hec-layout-root .p-image-wrapper > .p-image { position: static !important; top: auto !important; width: 100% !important; max-width: 100% !important; }
.hec-layout-root .p-image-wrapper > .p-image > img { width: 100% !important; max-width: 100% !important; height: auto !important; }
.hec-layout-root .shkDetailStock { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 18px 20px; font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.hec-layout-root .hec-preview-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
* { box-sizing: border-box; }

/**
 * Barevné tokeny na `:root` — po přenosu z prototypu zůstal prázdný
 * selektor (`{ --orange: ... }`), takže se proměnné nikdy nedefinovaly
 * a steppery byly bílé na bílém (Lucky 2026-09-08).
 */
:root {
  --card-bg: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --text: #16171a;
  --muted: #5c5f63;
  --green: #4caf1f;
  --orange: #fd7e14;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.hec-xvariant-panel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 45px -20px rgba(20, 40, 10, 0.18);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hec-xvariant-rows { display: flex; flex-direction: column; }
/* `min-height` drží řádky stejně vysoké i u dvouřádkových názvů —
   jinak panel poskakuje (Lucky 2026-09-08). */
/* `minmax(120px, 1fr)` drží sloupec s názvem čitelně široký. S holým
   `1fr` ho sousední `auto` sloupce (cena, stepper) smáčkly tak, že se
   text lámal uvnitř slov — "e-li-quid / BLUE-BER-RY" na deset řádků
   (Lucky 2026-09-08). `hyphens: none` zakáže dělení uvnitř slov úplně. */
.hec-xvariant-row { display: grid; grid-template-columns: 38px minmax(120px, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 4px; min-height: 54px; border-bottom: 1px solid var(--border); }
.hec-xvariant-row:last-child { border-bottom: none; }
.hec-xvariant-row--unavailable { opacity: 0.5; }
.hec-xvariant-thumb { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #eee; }
/* Varianta bez obrázku ve feedu — prázdný rámeček drží mřížku řádku. */
.hec-xvariant-thumb--prazdny { background: #f4f4f2; border: 1px dashed var(--border); }

/* Přepínač síly nikotinu — řady mají po dvou silách, každá je vlastní
   sada produktů, takže přepnutí vede na detail v druhé síle. */
.hec-xvariant-sily { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 0 10px; }
.hec-xvariant-sily-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.hec-xvariant-sila { display: inline-block; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font-size: 12px; font-weight: 600; text-decoration: none; line-height: 1.5; }
a.hec-xvariant-sila:hover { border-color: var(--orange); color: var(--orange); }
.hec-xvariant-sila--aktivni { background: var(--orange); border-color: var(--orange); color: #fff; }
.hec-xvariant-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
/* `overflow-wrap` drží dlouhá slova uvnitř sloupce. Bez něj se
   "BLUEBERRY" (velkými, bez mezer) nezalomilo a rozstřelilo řádek
   na pět řádek na výšku (Lucky 2026-09-08, screenshot BAR FUEL). */
.hec-xvariant-name { font-size: 14px; font-weight: 700; color: var(--text);
  overflow-wrap: break-word; word-break: normal; hyphens: none; }
/* Název jako odkaz na detail varianty — bez podtržení, barva textu. */
a.hec-xvariant-name { text-decoration: none; }
a.hec-xvariant-name:hover { text-decoration: underline; }
.hec-xvariant-thumb-link { display: block; line-height: 0; }
/* Síla nikotinu — doplňuje se, když ji zkrácený název neobsahuje. */
.hec-xvariant-nikotin { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  background: #f0f0ee; color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: middle; }
.hec-xvariant-stock { font-size: 13px; color: var(--green); font-weight: 600; display: block; }
.hec-xvariant-stock .muted { color: var(--muted); font-weight: 400; display: block; font-size: 12px; }
.hec-xvariant-unavailable-badge { font-size: 11px; font-weight: 700; color: var(--muted); }
.hec-xvariant-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hec-xvariant-line-price { font-family: "Source Sans 3", sans-serif; font-size: 17px; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; }
.hec-xvariant-line-price-novat { font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.hec-xvariant-stepper { display: flex; align-items: center; gap: 4px; }
.hec-xvariant-input { width: 36px; height: 36px; text-align: center; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); font-size: 18px; font-weight: 700; }
.hec-xvariant-input::-webkit-outer-spin-button, .hec-xvariant-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hec-xvariant-pm { display: flex; flex-direction: column; gap: 2px; }
.hec-xvariant-btn { width: 24px; height: 17px; border: none; border-radius: 5px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.hec-xvariant-btn:hover { filter: brightness(1.08); }
.hec-xvariant-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.hec-xvariant-summary { border-top: 2px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.hec-xvariant-total-qty { font-family: "Source Sans 3", sans-serif; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.01em; text-align: right; }
.hec-xvariant-total-saved { font-family: "Source Sans 3", sans-serif; font-size: 13px; color: #2f6b0f; text-transform: uppercase; letter-spacing: 0.01em; text-align: right; }
.hec-tier-table { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.hec-tier-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; background: #f4f4f2; border-bottom: 1px solid rgba(0,0,0,0.1); }
.hec-tier-row:last-child { border-bottom: none; }
.hec-tier-range { font-weight: 600; color: var(--text); letter-spacing: 0.02em; display: grid; grid-template-columns: 48px auto; column-gap: 5px; }
.hec-tier-range-num { text-align: right; font-variant-numeric: tabular-nums; }
.hec-tier-range-unit { text-align: left; }
.hec-tier-price { font-weight: 700; text-align: right; color: var(--text); }
.hec-tier-savings { font-size: 12.5px; font-weight: 700; color: #2f6b0f; text-align: right; min-width: 44px; }
.hec-tier-row--active { background: linear-gradient(90deg, rgba(76,175,31,0.26), rgba(253,126,20,0.26)); box-shadow: inset 3px 0 0 var(--green); }
.hec-tier-row--active .hec-tier-range, .hec-tier-row--active .hec-tier-price { color: #16171a; font-weight: 800; }
.hec-xvariant-free-units, .hec-xvariant-gift { text-transform: uppercase; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px; font-size: 12px; font-weight: 750; padding: 6px 12px; border-radius: 8px; }
.hec-xvariant-free-units { background: rgba(76,175,31,0.14); color: #2f6b0f; }
.hec-xvariant-gift { background: rgba(253,126,20,0.14); color: #b45f00; }
.hec-xvariant-total-price { font-family: "Source Sans 3", sans-serif; font-size: 18px; font-weight: 700; margin-top: -4px; text-transform: uppercase; letter-spacing: 0.02em; text-align: right; color: var(--text); }
.hec-xvariant-add-button { width: 100%; border: none; border-radius: 6px; background: var(--green); color: #fff; font-size: 15px; font-weight: 700; padding: 15px 20px; cursor: pointer; text-transform: none; letter-spacing: normal; }
.hec-xvariant-add-button:hover { filter: brightness(1.05); }
.hec-xvariant-add-button:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 900px) { .hec-layout-root { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 600px) {
  .hec-xvariant-panel { padding: 14px; border-radius: 14px; }
  .hec-xvariant-row { grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb info stepper" "thumb price stepper"; gap: 8px 14px; padding: 16px 2px; }
  .hec-xvariant-thumb { grid-area: thumb; width: 48px; height: 48px; align-self: start; }
  .hec-xvariant-info { grid-area: info; }
  .hec-xvariant-price-block { grid-area: price; flex-direction: row; align-items: baseline; gap: 8px; }
  .hec-xvariant-stepper { grid-area: stepper; align-self: center; }
  .hec-xvariant-name { font-size: 15px; }
  .hec-xvariant-line-price { font-size: 20px; }
  .hec-tier-row { padding: 10px; font-size: 13px; }
  .hec-xvariant-total-price { font-size: 20px; }
}

/** Název produktu nad seznamem variant. */
.hec-xvariant-product-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 4px;
}

/**
 * Hláška „Přidej ještě X ks a dostaneš cenu Y" pod variantami
 * (Lucky 2026-09-08). CSS chybělo úplně — prototyp v4 tenhle prvek
 * odstranil, takže se při přenosu nepřenesl a badge byl neviditelný,
 * i když ho Worker vracel.
 */
.hec-xvariant-summary-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hec-xvariant-next-tier-badge {
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(253, 126, 20, 0.14);
  color: #b45f00;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/** Souhrnné hlášky (dárek, X+X zdarma) pod tabulkou pásem. */
.hec-xvariant-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hec-xvariant-message {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.hec-xvariant-message--next-free-units {
  color: #2f6b0f;
  font-weight: 600;
}

/** Chybová hláška (výpadek Workeru, selhání košíku). */
.hec-xvariant-error {
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(179, 38, 30, 0.1);
  color: #b3261e;
  font-size: 13px;
  line-height: 1.4;
}