/* ============================================================
   BASTLIK.CZ — Redesign produktové karty (pravý sloupec)
   Vložit do: Shoptet administrace -> Vzhled a obsah -> Editor ->
   HTML kód -> Záhlaví, obalené do <style>...</style>
   Scope: vše je schované pod .p-data-wrapper.
   Vlastní proměnné mají prefix --bstlpd-.
   Žádné nové HTML elementy se nevytváří.

   v7 — změny oproti v6:
   - +/- hover: definitivně jednobarevný. Skryté VŠECHNY potomky
     tlačítek (.decrease *, .increase *) — to byl ten vnitřní
     světlejší box. Ikonu kreslí ::before (není potomek), přístupnost
     drží aria-label ze šablony.
   - "Skladem" zarovnané: vynulované padding-left/margin-left/
     text-indent u všech vnořených elementů v hodnotových buňkách,
     takže kód / Skladem / datum lícují na stejný pixel.
   - cena: "od" zůstává menší, ale samotné číslo (.nowrap) je zpět
     na původní velikosti 32px — na cenovku už nesahám.
   ============================================================ */

.p-data-wrapper {
  --bstlpd-green: #9ccc00;
  --bstlpd-green-dark: #8bb400;
  --bstlpd-red: #d32f2f;
  --bstlpd-blue: #2563eb;
  --bstlpd-border: #e5e7eb;
  --bstlpd-bg-soft: #f9fafb;
  --bstlpd-text-muted: #6b7280;
  --bstlpd-text-dark: #111827;
  /* Písmo i typografie se řídí bastlik-inter-2.css.
     Nikdy sem nepiš konkrétní jméno fontu — mění se na jednom místě. */
  --bstlpd-font-heading: var(--template-font, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Karta ---------- */
.p-data-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--bstlpd-border);
  border-radius: 16px;
  padding: 40px 32px 24px 32px !important;
  max-width: 440px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: box-shadow .2s ease;
  align-self: flex-start !important;
  height: -moz-fit-content !important;
  height: fit-content !important;
}
.p-data-wrapper:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* ---------- Nadpis ---------- */
.p-data-wrapper .p-detail-inner-header h1 {
  font-family: var(--bstlpd-font-heading) !important;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bstlpd-text-dark);
  margin-bottom: 8px;
}

/* Hvězdičkové hodnocení v novém designu není -> schováme */
.p-data-wrapper .ratings-and-brand {
  display: none !important;
}

/* ---------- Blok variant / vyprodáno ---------- */
.p-data-wrapper .p-variants-block .variant-list {
  margin-bottom: 20px;
}
.p-data-wrapper .p-variants-block .variant-label {
  display: block;
  font-size: 14px;
  color: var(--bstlpd-text-dark);
  margin-bottom: 6px;
}
.p-data-wrapper .p-variants-block .sold-out-wrapper {
  margin-bottom: 18px;
}
.p-data-wrapper .p-variants-block .sold-out {
  color: var(--bstlpd-text-muted);
  font-size: 14px;
}

/* ---------- Tabulka parametrů -> CSS Grid (zarovnané sloupce) ---------- */
.p-data-wrapper table.detail-parameters {
  display: block !important;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--bstlpd-border);
}
.p-data-wrapper table.detail-parameters tbody {
  display: grid !important;
  grid-template-columns: 22px auto 1fr;
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  width: 100%;
}
.p-data-wrapper table.detail-parameters tr {
  display: contents !important;
}
.p-data-wrapper table.detail-parameters th,
.p-data-wrapper table.detail-parameters td {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
  font-size: 14px;
  text-align: left;
  justify-self: start;
}
/* DŮLEŽITÉ pro zarovnání hodnot: vynulovat vodorovné odsazení
   u VŠECH vnořených elementů v buňkách (span, div, .delivery-time…) */
.p-data-wrapper table.detail-parameters td,
.p-data-wrapper table.detail-parameters td * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
/* pojistka proti "dotted leader" pseudoelementům ze šablony */
.p-data-wrapper table.detail-parameters th::after,
.p-data-wrapper table.detail-parameters th::before,
.p-data-wrapper table.detail-parameters td::after,
.p-data-wrapper table.detail-parameters td::before {
  content: none !important;
  border: none !important;
}

/* -------- Řádek 1: Kód -------- */
.p-data-wrapper table.detail-parameters tbody > tr.p-code::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 22px;
  height: 22px;
}
.p-data-wrapper table.detail-parameters tbody > tr.p-code th {
  grid-row: 1;
  grid-column: 2;
}
.p-data-wrapper table.detail-parameters tbody > tr.p-code td {
  grid-row: 1;
  grid-column: 3;
}
.p-data-wrapper table.detail-parameters tbody > tr.p-code th,
.p-data-wrapper table.detail-parameters tbody > tr.p-code td {
  font-size: 13px;
  color: #9ca3af;
}
.p-data-wrapper table.detail-parameters tbody > tr.p-code td span {
  font-weight: 700;
  color: var(--bstlpd-text-muted);
}

/* -------- Řádek 2: Dostupnost -------- */
/* Výchozí stav = NEUTRÁLNÍ. Barvu i ikonu nastaví až JS podle
   skutečně viditelné dostupnosti (bastlik-availability-1.js).
   Bez JS zůstane šedá pomlčka — raději nic neříct než tvrdit
   skladem u vyprodaného zboží. */
.p-data-wrapper table.detail-parameters tbody > tr:nth-child(1)::before {
  content: "";
  grid-row: 2;
  grid-column: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #f1f3f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 12h12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  transition: background-color .15s ease;
}
.p-data-wrapper table.detail-parameters tbody > tr:nth-child(1) th {
  grid-row: 2;
  grid-column: 2;
}
.p-data-wrapper table.detail-parameters tbody > tr:nth-child(1) td {
  grid-row: 2;
  grid-column: 3;
}
.p-data-wrapper table.detail-parameters tbody > tr:nth-child(1) th .row-header-label {
  color: var(--bstlpd-text-muted);
  font-weight: 400;
  white-space: nowrap;
}
.p-data-wrapper table.detail-parameters tbody > tr:nth-child(1) th .row-header-label::after {
  content: ":" !important;
}
.p-data-wrapper .availability-label {
  font-weight: 700 !important;
}
/* amount ("(>5 ks)") — malá mezera za "Skladem" (vyšší specificita
   než plošné vynulování výše, aby se margin uplatnil) */
.p-data-wrapper table.detail-parameters td .availability-amount {
  color: var(--bstlpd-text-dark);
  margin-left: 6px !important;
}

/* -------- Řádek 3: Doručení -------- */
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row::before {
  content: "";
  grid-row: 3;
  grid-column: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #eff6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 002-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row th {
  grid-row: 3;
  grid-column: 2;
}
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row td {
  grid-row: 3;
  grid-column: 3;
}
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row th .delivery-time-label {
  color: var(--bstlpd-text-muted);
  font-weight: 400;
  white-space: nowrap;
}
/* Popisek přepsaný z "Můžeme doručit do" na kratší "Doručíme do".
   Byl to nejširší popisek v tabulce a určoval šířku celého sloupce
   s popisky — zkrácením se uvolní místo pro hodnoty.
   Původní text zůstává v HTML kvůli čtečkám, jen se nevykresluje. */
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row th .delivery-time-label {
  font-size: 0 !important;
}
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row th .delivery-time-label::after {
  content: "Doručíme do:";
  font-size: 14px;
  font-weight: 400;
  color: var(--bstlpd-text-muted);
  white-space: nowrap;
}
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row td,
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row .delivery-time {
  color: var(--bstlpd-text-dark);
  font-weight: 600;
  font-size: 13px;
}
.p-data-wrapper .show-tooltip.acronym {
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: default;
}

/* -------- Řádek 4: odkaz "Možnosti doručení" -------- */
.p-data-wrapper table.detail-parameters tbody > tr.shipping-options-row td {
  grid-row: 4;
  grid-column: 2 / 4;
  margin-top: -4px !important;
}
.p-data-wrapper table.detail-parameters tbody > tr.shipping-options-row a.shipping-options {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}
.p-data-wrapper table.detail-parameters tbody > tr.shipping-options-row a.shipping-options:hover {
  text-decoration: underline;
}

/* ---------- Nákupní zóna (šedý box) ---------- */
.p-data-wrapper .p-to-cart-block {
  background: var(--bstlpd-bg-soft) !important;
  border-radius: 12px;
  padding: 20px;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "price qty"
    "button button";
  row-gap: 16px;
  column-gap: 12px;
  align-items: center;
}

/* Cena */
.p-data-wrapper .p-final-price-wrapper {
  grid-area: price;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
}
.p-data-wrapper .price-final {
  font-size: 32px;
  font-weight: 800;
  color: var(--bstlpd-red) !important;
  line-height: 1.2;
}
.p-data-wrapper .price-measure:empty {
  display: none;
}
/* skryté cenové varianty nesmí zabírat výšku (jinak natahují
   cenový sloupec a cena je pak výš než blok s množstvím) */
.p-data-wrapper .price-final .price-final-holder.no-display,
.p-data-wrapper .price-final .price-final-holder.noDisplay {
  display: none !important;
}
/* U nevybrané varianty je "od" menší, ale samotná cena (.nowrap)
   zůstává v původní velikosti 32px — cenovku neměníme */
.p-data-wrapper .price-final .price-final-holder.default-variant {
  font-size: 18px;
  font-weight: 700;
}
.p-data-wrapper .price-final .price-final-holder.default-variant .nowrap {
  font-size: 32px;
}

/* Volič množství */
.p-data-wrapper .add-to-cart {
  grid-area: qty;
  align-self: center !important;
}
.p-data-wrapper .add-to-cart .quantity {
  display: flex !important;
  align-items: stretch !important;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  height: 44px;
  width: fit-content;
}
.p-data-wrapper .add-to-cart .quantity .decrease { order: 1; }
.p-data-wrapper .add-to-cart .quantity input.amount { order: 2; }
.p-data-wrapper .add-to-cart .quantity .increase { order: 3; }

.p-data-wrapper .add-to-cart .quantity input.amount {
  width: 40px;
  height: 100%;
  text-align: center;
  border: none !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--bstlpd-text-dark);
  outline: none;
  -moz-appearance: textfield;
  background: transparent !important;
  align-self: center;
}
.p-data-wrapper .add-to-cart .quantity input.amount::-webkit-outer-spin-button,
.p-data-wrapper .add-to-cart .quantity input.amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- tlačítka — necháváme původní znaky ze šablony (− / +),
   jen tlačítka srovnáme do řádku a doladíme vzhled. Pořadí je
   opět minus vlevo, číslo uprostřed, plus vpravo. */
.p-data-wrapper .add-to-cart .quantity .increase,
.p-data-wrapper .add-to-cart .quantity .decrease {
  background: none !important;
  border: none !important;
  width: 36px;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 22px;
  line-height: 1 !important;
  color: #4b5563 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s, color .15s;
  box-sizing: border-box !important;
}
/* stray ::before/::after ze šablony pryč — to dělalo tu druhou barvu */
.p-data-wrapper .add-to-cart .quantity .increase::before,
.p-data-wrapper .add-to-cart .quantity .decrease::before,
.p-data-wrapper .add-to-cart .quantity .increase::after,
.p-data-wrapper .add-to-cart .quantity .decrease::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* posun JEN znaménka nahoru (přes span), tlačítko i hover zůstávají celé */
.p-data-wrapper .add-to-cart .quantity .increase__sign,
.p-data-wrapper .add-to-cart .quantity .decrease__sign {
  display: block !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translateY(-2px);
}
.p-data-wrapper .add-to-cart .quantity .increase:hover,
.p-data-wrapper .add-to-cart .quantity .decrease:hover {
  background: var(--bstlpd-blue) !important;
  color: #ffffff !important;
}
.p-data-wrapper .add-to-cart .quantity .js-increase-tooltip,
.p-data-wrapper .add-to-cart .quantity .js-decrease-tooltip {
  display: none !important;
}

/* Tlačítko Do košíku */
.p-data-wrapper .add-to-cart-button {
  grid-area: button;
  width: 100%;
  background: var(--bstlpd-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  height: 48px;
  transition: background .15s, transform .1s;
}
.p-data-wrapper .add-to-cart-button:hover {
  background: var(--bstlpd-green-dark) !important;
}
.p-data-wrapper .add-to-cart-button:active {
  transform: scale(0.98);
}
.p-data-wrapper .add-to-cart-button::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   STABILITA LAYOUTU PŘI PŘEPÍNÁNÍ VARIANT

   Všechny potíže měly jednu příčinu: dlouhý kód se zalomil na
   dva řádky. Tím povyrostl první řádek, rozhodily se mezery
   a cenový blok pod tabulkou se posunul dolů. Když kód udržíme
   na jednom řádku, spraví se to všechno naráz.

   Zmenšování řeší jednotka cqi — počítá se ze šířky TÉTO tabulky,
   ne ze šířky okna. Písmo se tedy přizpůsobí skutečně dostupnému
   místu, nezávisle na zařízení i na tom, jak široký je zrovna
   sloupec s údaji.
   ============================================================ */

.p-data-wrapper table.detail-parameters {
  container-type: inline-size;
}

/* --- 1) sloupce: hodnota se lepí k popisku ---
   Čtvrtý sloupec 1fr spolkne zbylé místo, takže hodnota nesedí
   až u pravého okraje, ale hned vedle svého popisku. */
.p-data-wrapper table.detail-parameters tbody {
  grid-template-columns: 22px auto minmax(0, auto) 1fr;
  column-gap: 12px;
  row-gap: 12px;
}

/* --- 2) hodnoty vždy na jednom řádku ---
   Písmo se zmenší podle šířky tabulky. Spodní mez drží čitelnost,
   horní mez zajistí, že se na širokém displeji nenafoukne. */
.p-data-wrapper table.detail-parameters td,
.p-data-wrapper table.detail-parameters td * {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* Všechny tři hodnoty stejně velké. Strop 16px je horní hranice,
   které se dosáhne všude, kde je místo — dřív byl na 13,5px a to
   byl jediný důvod, proč zůstávaly drobné. Prostřední člen 4cqi
   se uplatní až na úzkých displejích, takže se chování na mobilu
   nemění. Spodní mez 10px drží čitelnost. */
.p-data-wrapper table.detail-parameters td,
.p-data-wrapper table.detail-parameters td * {
  font-size: clamp(10px, 4.3cqi, 18px);
}
.p-data-wrapper table.detail-parameters td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* u kódu vypnout tabulkové číslice — pod sebou s ničím nelícuje
   a proporční jsou o něco užší, takže se vejde víc */
.p-data-wrapper table.detail-parameters tbody > tr.p-code td,
.p-data-wrapper table.detail-parameters tbody > tr.p-code td * {
  font-feature-settings: "kern" 1, "zero" 1, "cv05" 1, "cv08" 1 !important;
  font-variant-numeric: normal !important;
  letter-spacing: 0 !important;
}

/* --- 3) stejně vysoké řádky i mezery mezi nimi --- */
.p-data-wrapper table.detail-parameters tbody > tr > th,
.p-data-wrapper table.detail-parameters tbody > tr > td {
  min-height: 1.7em;
  display: flex !important;
  align-items: center;
  min-width: 0;
}
.p-data-wrapper table.detail-parameters tbody > tr::before {
  align-self: center;
}
/* odkaz "Možnosti doručení" pod popiskem nesmí rozhodit řádek */
.p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row th {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

/* --- 4) nevybraná varianta: placeholder -> pomlčka ---
   Prvky označuje JS podle skutečného textu, ne CSS podle pozice. */
/* Pomlčka visí VŽDY na buňce, nikdy na vnořeném prvku.
   Dřív se označoval nejhlubší prvek s placeholderem — u kódu to
   byla buňka, u dostupnosti .availability-label, u doručení
   .delivery-time. Každá pomlčka tak měla jiné odsazení a k tomu
   se přidávaly mezerové uzly z HTML, takže na úzkém displeji
   nebyly pod sebou. Skrytím celého obsahu buňky mají všechny
   stejný počátek. */
.p-data-wrapper td[data-bstl-empty] {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  justify-content: flex-start !important;
}
.p-data-wrapper td[data-bstl-empty] > * {
  display: none !important;
}
.p-data-wrapper td[data-bstl-empty]::after {
  content: "\2014";
  display: block !important;
  font-size: clamp(10px, 4.3cqi, 18px) !important;
  line-height: 1 !important;
  color: var(--bstlpd-text-muted) !important;
  font-weight: var(--bstl-w-medium, 520) !important;
  letter-spacing: 0 !important;
  font-variant-numeric: normal !important;
}

/* --- 5) nákupní zóna drží výšku ve všech stavech --- */
.p-data-wrapper .p-to-cart-block {
  min-height: 9.5em;
}
.p-data-wrapper .p-final-price-wrapper {
  min-height: 3.2em;
  justify-content: center !important;
}

/* --- 6) velmi úzké displeje ---
   Pod 340px už ani zmenšené písmo nestačí, tam se popisek
   a hodnota poskládají pod sebe. */
@media (max-width: 340px) {
  .p-data-wrapper table.detail-parameters tbody {
    grid-template-columns: 20px minmax(0, 1fr);
    row-gap: 10px;
  }
  .p-data-wrapper table.detail-parameters tbody > tr > th,
  .p-data-wrapper table.detail-parameters tbody > tr > td {
    grid-column: 2;
    min-height: 1.4em;
  }
  .p-data-wrapper table.detail-parameters td,
  .p-data-wrapper table.detail-parameters tbody > tr.p-code td {
    font-size: 13px;
  }
}

/* ============================================================
   STAVY DOSTUPNOSTI — řídí JS bastlik-availability-1.js

   Proč JS a ne CSS:
   Shoptet drží v DOM dostupnost pro VŠECHNY varianty najednou
   a jen jednu zobrazuje. Selektor :has() prohledá i ty skryté,
   takže u produktu s jednou vyprodanou variantou hlásil vyprodáno
   i u variant, které jsou skladem. CSS neumí říct "ten viditelný".

   JS proto přečte skutečně viditelný .availability-label a nasadí
   na .p-data-wrapper jednu ze tří tříd:
     .bstl-av-in    skladem        zelená + fajfka
     .bstl-av-out   nedostupné     červená + křížek
     .bstl-av-none  nevybraná varianta   šedá + pomlčka
   ============================================================ */

/* ---------- SKLADEM ---------- */
.p-data-wrapper.bstl-av-in .availability-label {
  color: #2e7d32 !important;
}
.p-data-wrapper.bstl-av-in table.detail-parameters tbody > tr:nth-child(1)::before {
  background-color: #ecfdf5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* ---------- NEDOSTUPNÉ ---------- */
.p-data-wrapper.bstl-av-out .availability-label {
  color: var(--bstlpd-red) !important;
}
.p-data-wrapper.bstl-av-out table.detail-parameters tbody > tr:nth-child(1)::before {
  background-color: #fef2f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d32f2f' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.p-data-wrapper.bstl-av-out .p-to-cart-block {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ---------- NEVYBRANÁ VARIANTA — neutrální ----------
   Dokud si zákazník nevybere, netvrdíme nic. Žádná barva,
   žádná fajfka ani křížek. Text "Zvolte variantu" ztlumíme,
   ať nekřičí jako chybová hláška. */
.p-data-wrapper.bstl-av-none .availability-label,
.p-data-wrapper.bstl-av-none .availability-amount,
.p-data-wrapper.bstl-av-none .delivery-time {
  color: var(--bstlpd-text-muted) !important;
  font-weight: var(--bstl-w-medium, 520) !important;
}
.p-data-wrapper.bstl-av-none table.detail-parameters tbody > tr:nth-child(1)::before {
  background-color: #f1f3f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 12h12'/%3E%3C/svg%3E");
}

/* ---------- Odstranění zbytečné mezery pod tlačítkem ---------- */
.p-data-wrapper form#product-detail-form {
  margin: 0 !important;
  padding: 0 !important;
}
.p-data-wrapper .buttons-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.p-data-wrapper .cofidis-buttons-wrapper,
.p-data-wrapper .hledejceny-buttons-wrapper {
  display: none !important;
}

/* ---------- "Zeptat se" — doleva, hned pod boxem ---------- */
.p-data-wrapper .social-buttons-wrapper {
  margin-top: 12px !important;
  width: 100%;
}
.p-data-wrapper .social-buttons-wrapper .link-icons {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
}
.p-data-wrapper .social-buttons-wrapper .link-icons .print,
.p-data-wrapper .social-buttons-wrapper .link-icons .share {
  display: none !important;
}
.p-data-wrapper .social-buttons-wrapper .link-icons a.chat {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  margin: 0 !important;
  font-size: 13px;
  color: var(--bstlpd-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.p-data-wrapper .social-buttons-wrapper .link-icons a.chat:hover {
  color: var(--bstlpd-text-dark);
}
.p-data-wrapper .social-buttons-wrapper .link-icons a.chat::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ============================================================
   Responzivita — tablet + mobil
   ============================================================ */
@media (max-width: 768px) {
  .p-data-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .p-data-wrapper {
    padding: 32px 24px 20px 24px !important;
  }
  .p-data-wrapper .p-detail-inner-header h1 {
    font-size: 20px;
  }
  .p-data-wrapper table.detail-parameters tbody {
    grid-template-columns: 20px auto 1fr;
    column-gap: 8px;
  }
  /* menší text parametrů + hodnoty na jeden řádek (bez zalamování) */
  .p-data-wrapper table.detail-parameters th,
  .p-data-wrapper table.detail-parameters td {
    font-size: 13px;
  }
  .p-data-wrapper table.detail-parameters tbody > tr:nth-child(1) td,
  .p-data-wrapper table.detail-parameters tbody > tr.p-code td,
  .p-data-wrapper table.detail-parameters tbody > tr.delivery-time-row td {
    white-space: nowrap;
  }
  .p-data-wrapper .availability-label,
  .p-data-wrapper .availability-amount {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* cena a množství zůstávají vedle sebe na jednom řádku,
     jen tlačítko je pod nimi přes celou šířku */
  .p-data-wrapper .p-to-cart-block {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "price qty"
      "button button";
  }
  .p-data-wrapper .add-to-cart .quantity {
    width: -moz-fit-content;
    width: fit-content;
  }
}

@media (max-width: 380px) {
  .p-data-wrapper .price-final {
    font-size: 28px;
  }
}