/* === DREAMY — prostěradla jako jedna karta s variantami barva × rozměr × výška  ·  v1 · 2026-10-11 ===
 * Záhlaví (za popisky-textil.css): <link rel="stylesheet" href="/user/documents/upload/styles/popisky-textil-varianty.css?v=1">
 * Patří k popisky-textil-varianty.js (Zápatí). Schválil Tomáš 10. 10. 2026 (náhledy na kartě PIMA Royale 1209).
 * 1) Výběr barvy nahoře u objednávky (parametr Barva, id 304): tlačítka jako rozměr/výška + tečka barvy.
 *    Barva tečky = inline background-color od Shoptetu z kódu barvy hodnoty parametru (kód zadaný BEZ „#“).
 * 2) Popisek: přepínač barev v úvodu (.tx-hsw), štítek barvy na fotce (.tx-hcap), vzorník (.tx-vz).
 */

/* 1) výběr barvy u variant — rozměry převzaté z .db2bcfg-chip (varianty.css) */
#parameter-id-304 { display: flex !important; flex-wrap: wrap; gap: 8px; height: auto !important; }
#parameter-id-304 > span:first-child { display: none !important; } /* skrytý výchozí radio, jinak posune řádek o 8 px */
#parameter-id-304 label.advanced-parameter { display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; border: .8px solid rgb(240, 211, 226) !important; border-radius: 10px !important; background: #fff !important; box-shadow: rgba(20, 17, 24, .07) 0 1px 3px 0; font: 400 14px/15.4px Rubik, sans-serif; line-height: 15.4px !important; color: #141118; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#parameter-id-304 label.advanced-parameter:hover { border-color: #d90074 !important; }
#parameter-id-304 .advanced-parameter-inner { display: block !important; flex: none; width: 14px !important; height: 14px !important; min-width: 0 !important; border-radius: 50% !important; border: 0 !important; margin: 0 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
#parameter-id-304 .parameter-value { display: inline !important; }
#parameter-id-304 label:has(input:checked) { background: #d90074 !important; border-color: #d90074 !important; color: #fff !important; font-weight: 500; }
#parameter-id-304 label:has(input:checked) .advanced-parameter-inner { box-shadow: 0 0 0 2px #fff !important; }
#parameter-id-304 label::before, #parameter-id-304 label::after,
#parameter-id-304 .advanced-parameter-inner::before, #parameter-id-304 .advanced-parameter-inner::after { display: none !important; }

/* 2a) přepínač barev v úvodu popisku */
.tx-hsw { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.dpd .tx-hsw-l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.tx-hsw-b { display: flex; gap: 10px; }
.dpd .tx-hsw-b button { -webkit-appearance: none; appearance: none; cursor: pointer; width: 34px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--c) !important; font-size: 0; line-height: 0; color: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .2s; }
.dpd .tx-hsw-b button:hover { transform: scale(1.08); }
.dpd .tx-hsw-b button.is-on { outline-color: var(--pink); }
.tx-hsw-n { font-size: 15px; font-weight: 500; color: var(--ink); min-width: 96px; }
.dpd--pima .tx-hsw-l { color: var(--gold); }
.dpd--pima .tx-hsw-b button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.dpd--pima .tx-hsw-b button.is-on { outline-color: var(--gold); }
.dpd--pima .tx-hsw-n { color: #fff; }
.dpd .tx-hero-img img { transition: opacity .45s ease; }
.dpd .tx-hero-img img.tx-fade { opacity: 0; }
.tx-hero-img .tx-hcap { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(23, 21, 26, .72); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.2; }

/* 2b) vzorník barev („Vyberte barvu“) */
.tx-vz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.tx-vz-it { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: #fff; overflow: hidden; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tx-vz-it:hover { transform: translateY(-2px); border-color: var(--pink); }
.tx-vz-it.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.dpd .tx-vz-it img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto !important; border-radius: 0; }
.tx-vz-txt { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.dpd .tx-vz-txt h3 { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 16px !important; }
.tx-vz-txt h3 i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); font-size: 0; line-height: 0; color: transparent; }
.dpd .tx-vz-txt p { margin: 6px 0 0 !important; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--muted) !important; flex: 1; }
.dpd .tx-vz-btn { -webkit-appearance: none; appearance: none; align-self: flex-start; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--pink); }
.tx-vz-it.is-on .tx-vz-btn { color: var(--ink); }

/* mobil a tablet: JS přesune přepínač hned pod fotku (.tx-hsw--img), štítek na fotce je pak zbytečný */
@media (max-width: 991px) {
  .tx-hsw.tx-hsw--img { order: -1; margin: 14px 20px 0; }
  .tx-hero-img .tx-hcap { display: none; }
}
@media (max-width: 767px) {
  .tx-hsw { flex-wrap: nowrap; gap: 10px; }
  .tx-hsw.tx-hsw--img { margin: 14px 16px 0; }
  .tx-hsw-b { gap: 8px; }
  .dpd .tx-hsw-b button { width: 30px; height: 30px; }
  .tx-hsw-n { min-width: 0; white-space: nowrap; font-size: 14px; }
  .tx-vz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dpd .tx-vz-txt p { display: none; }
  .tx-vz-txt { padding: 10px 12px 12px; }
}