/*
 * ============================================================
 *  08 – PRODUKTOVÝ POPIS – SALES-FIRST KOMPONENTY
 *  Projekt: PRIMAKOUPELNY.CZ  |  Poslední revize: 2026-04
 * ============================================================
 *
 *  DŮLEŽITÉ: Shoptet blokuje inline <svg> v HTML produktového
 *  popisu. Všechny ikony jsou proto definovány výhradně jako
 *  background-image: url("data:image/svg+xml,...") v CSS.
 *  HTML je čisté – žádný <svg> tag.
 *
 *  KONVENCE ICON TŘÍD (přidávají se k pd-spec__icon apod.):
 *    pd-icon--dims       rozměry (grid)
 *    pd-icon--sink       hloubka umyvadla
 *    pd-icon--widths     dostupné šířky (šipky)
 *    pd-icon--clock      čas / dodání
 *    pd-icon--drawer     zásuvkový systém
 *    pd-icon--shield     certifikace / ochrana
 *    pd-icon--assembled  smontované / monitor
 *    pd-icon--star       premium badge
 *    pd-icon--file       dokumentace / PUR
 *    pd-icon--cnc        CNC výroba
 *    pd-icon--eco        životní prostředí
 *    pd-icon--building   zkušenosti firmy
 *    pd-icon--phone      telefonní poradenství
 *    pd-icon--truck      doprava / montáž
 *    pd-icon--warranty   záruční servis
 *    pd-icon--warning    upozornění (trojúhelník)
 *
 * ============================================================
 */


/* =============================================================
   LOKÁLNÍ CUSTOM PROPERTIES
   ============================================================= */

:root {
  --pd-radius:        12px;
  --pd-radius-sm:     8px;
  --pd-shadow-card:   0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --pd-shadow-hover:  0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --pd-border:        #e8eef2;
  --pd-accent:        var(--color-primary, #00a8ee);
  --pd-accent-bg:     var(--color-primary-bg, #ecf5fe);
  --pd-text:          var(--color-text, #24242E);
  --pd-muted:         #64748b;
  --pd-green:         #16a34a;
  --pd-green-bg:      #f0fdf4;
  --pd-orange:        #ea580c;
  --pd-orange-bg:     #fff7ed;
  --pd-orange-border: #fed7aa;
}


/* =============================================================
   IKONY JAKO CSS DATA URI
   Barvy jsou URL-zakódovány: # → %23
   Všechny SVG: fill='none' stroke-linecap='round' stroke-linejoin='round'
   ============================================================= */

/* Sdílený mixin pro všechny icon kontejnery */
[class*="pd-icon--"] {
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
}

/* Rozměry / grid */
.pd-icon--dims {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E");
}

/* Umyvadlo / hloubka */
.pd-icon--sink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='10' rx='2'/%3E%3Cpath d='M8 8V5M16 8V5M12 18v4'/%3E%3C/svg%3E");
}

/* Šípky / šířky */
.pd-icon--widths {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 8 4 12 8 16'/%3E%3Cpolyline points='16 8 20 12 16 16'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
}

/* Hodiny */
.pd-icon--clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* Zásuvka / drawer */
.pd-icon--drawer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* Štít / certifikace – modrá */
.pd-icon--shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* Smontováno / monitor */
.pd-icon--assembled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

/* Hvězda – premium */
.pd-icon--star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  background-size: 26px 26px;
}

/* Štít + check – certifikace (zelená) */
.pd-icon--certified {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* Soubor / PUR */
.pd-icon--file {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/* CNC / nastavení */
.pd-icon--cnc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14'/%3E%3C/svg%3E");
}

/* Životní prostředí / list */
.pd-icon--eco {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22c1.25-1.25 2.2-2.7 3.35-4.25C7.5 15 12 8.5 20 3c0 0-11 0-15 9-1.1 2.5-1.5 5-1.5 5'/%3E%3Cpath d='M14 10c-1 2-3 4-5 5.5'/%3E%3C/svg%3E");
}

/* Budova / zkušenosti */
.pd-icon--building {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20'/%3E%3Cpath d='M4 10h16M4 6h16M4 14h16M4 18h16M10 22v-4h4v4'/%3E%3C/svg%3E");
}

/* Telefon */
.pd-icon--phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.58 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 8.56a16 16 0 0 0 5.91 5.91l1.27-.73a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Kamion / montáž */
.pd-icon--truck {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* Záruční servis */
.pd-icon--warranty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

/* Výstražný trojúhelník */
.pd-icon--warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-size: 18px 18px;
}


/* =============================================================
   SECTION LABEL
   ============================================================= */

.pd-section-label {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          #00a8ee;
  color:          var(--pd-accent, #00a8ee);
  margin:         0 0 14px;
}

.pd-section-label::after {
  content:    "";
  flex:       1;
  height:     1px;
  background: #d6f1fd;
  background: var(--color-primary-light, #d6f1fd);
}


/* =============================================================
   INTRO HERO
   ============================================================= */

.pd-intro {
  margin:        0 0 24px;
  padding:       22px 24px;
  background:    linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 60%, #f8fbff 100%);
  border-radius: var(--pd-radius, 12px);
  border:        1px solid var(--pd-border, #e8eef2);
  position:      relative;
  overflow:      hidden;
}

.pd-intro::before {
  content:       "";
  position:      absolute;
  right:         -60px;
  top:           -60px;
  width:         200px;
  height:        200px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(0,168,238,.07) 0%, transparent 70%);
  pointer-events: none;
}

.pd-intro__tagline {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          #00a8ee;
  color:          var(--pd-accent, #00a8ee);
  margin:         0 0 6px;
}

.pd-intro__title {
  font-size:   21px !important;
  font-weight: 800 !important;
  color:       #24242E !important;
  color:       var(--pd-text, #24242E) !important;
  margin:      0 0 8px !important;
  line-height: 1.2 !important;
}

.pd-intro__sub {
  font-size:   14px;
  color:       #64748b;
  color:       var(--pd-muted, #64748b);
  line-height: 1.65;
  margin:      0 0 18px;
  max-width:   520px;
}

.pd-intro__chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  list-style: none;
  padding:    0;
  margin:     0;
}

.pd-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 12px;
  background:    rgba(255,255,255,.85);
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
  border-radius: 999px;
  font-size:     12px;
  font-weight:   600;
  color:         #24242E;
  color:         var(--pd-text, #24242E);
  white-space:   nowrap;
}

.pd-chip--accent {
  background:   #ecf5fe;
  background:   var(--pd-accent-bg, #ecf5fe);
  border-color: #d6f1fd;
  color:        #0F86B8;
  color:        var(--color-primary-dark, #0F86B8);
}

.pd-chip--green {
  background:   #f0fdf4;
  border-color: #bbf7d0;
  color:        #15803d;
}

/* Tečka před chip--accent a chip--green (místo SVG ikony) */
.pd-chip--accent::before {
  content:       "";
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #0F86B8;
  flex-shrink:   0;
}

.pd-chip--green::before {
  content:       "✓";
  font-size:     10px;
  font-weight:   800;
  color:         #15803d;
  line-height:   1;
}


/* =============================================================
   PARAMETRY – mřížka
   ============================================================= */

.pd-specs {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            #E4E4E4;
  background:            var(--color-border, #E4E4E4);
  border:                1px solid #E4E4E4;
  border:                1px solid var(--color-border, #E4E4E4);
  border-radius:         var(--pd-radius, 12px);
  overflow:              hidden;
  margin:                0 0 24px;
}

.pd-spec {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  padding:        16px 18px;
  background:     #fff;
}

.pd-spec__icon {
  width:           36px;
  height:          36px;
  border-radius:   var(--pd-radius-sm, 8px);
  background-color: #ecf5fe;
  background-color: var(--pd-accent-bg, #ecf5fe);
  /* background-image přidáno třídou pd-icon--* */
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  flex-shrink:     0;
}

.pd-spec--accent {
  background: #ecf5fe;
  background: var(--pd-accent-bg, #ecf5fe);
}

.pd-spec--accent .pd-spec__icon {
  background-color: rgba(255,255,255,.6);
}

.pd-spec--accent .pd-spec__value { color: #00a8ee; color: var(--pd-accent, #00a8ee); }

.pd-spec__label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          #64748b;
  color:          var(--pd-muted, #64748b);
  line-height:    1.2;
}

.pd-spec__value {
  font-size:   15px;
  font-weight: 800;
  color:       #24242E;
  color:       var(--pd-text, #24242E);
  line-height: 1.2;
}

.pd-spec__note {
  font-size:  11px;
  color:      #64748b;
  color:      var(--pd-muted, #64748b);
  margin-top: -2px;
}

@media (max-width: 767px) { .pd-specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .pd-specs { grid-template-columns: 1fr; } }


/* =============================================================
   PROČ LETTY – feature karty
   ============================================================= */

.pd-why { margin: 0 0 24px; }

.pd-why__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}

.pd-feature-card {
  padding:       18px;
  background:    #fff;
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
  border-radius: var(--pd-radius, 12px);
  box-shadow:    0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  transition:    box-shadow .2s ease, transform .2s ease;
}

.pd-feature-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  transform:  translateY(-2px);
}

.pd-feature-card__icon {
  width:           42px;
  height:          42px;
  border-radius:   var(--pd-radius-sm, 8px);
  /* background-color a background-image dle modifikátoru */
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     22px 22px;
  margin-bottom:   12px;
}

.pd-feature-card__icon--blue  { background-color: #ecf5fe; background-color: var(--pd-accent-bg, #ecf5fe); }
.pd-feature-card__icon--green { background-color: #f0fdf4; background-color: var(--pd-green-bg, #f0fdf4); }
.pd-feature-card__icon--dark  { background-color: #f1f5f9; }

.pd-feature-card__title {
  font-size:   13px !important;
  font-weight: 700 !important;
  color:       #24242E !important;
  color:       var(--pd-text, #24242E) !important;
  margin:      0 0 6px !important;
  line-height: 1.3 !important;
}

.pd-feature-card__text {
  font-size:   12.5px;
  color:       #64748b;
  color:       var(--pd-muted, #64748b);
  line-height: 1.55;
  margin:      0;
}

@media (max-width: 767px)   { .pd-why__grid { grid-template-columns: 1fr; } }
@media (min-width: 500px) and (max-width: 767px) { .pd-why__grid { grid-template-columns: repeat(2, 1fr); } }


/* =============================================================
   STRONGMAX – dark premium blok
   ============================================================= */

.pd-strongmax {
  display:       grid;
  grid-template-columns: 52px 1fr;
  gap:           20px;
  align-items:   start;
  padding:       24px;
  background:    linear-gradient(135deg, #001f3d 0%, #003a5c 55%, #004e7a 100%);
  border-radius: var(--pd-radius, 12px);
  margin:        0 0 24px;
  position:      relative;
  overflow:      hidden;
}

.pd-strongmax::after {
  content:       "";
  position:      absolute;
  right:         -30px;
  bottom:        -30px;
  width:         160px;
  height:        160px;
  border-radius: 50%;
  border:        40px solid rgba(0,168,238,.07);
  pointer-events: none;
}

/* Badge – nahrazuje SVG hvězdičku */
.pd-strongmax__badge {
  width:           52px;
  height:          52px;
  border-radius:   var(--pd-radius-sm, 8px);
  background-color: rgba(0,168,238,.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8ee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     26px 26px;
  border:          1px solid rgba(0,168,238,.28);
  flex-shrink:     0;
}

.pd-strongmax__label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:          rgba(0,168,238,.75);
  margin:         0 0 4px;
}

.pd-strongmax__title {
  font-size:   17px !important;
  font-weight: 800 !important;
  color:       #fff !important;
  margin:      0 0 8px !important;
  line-height: 1.25 !important;
}

.pd-strongmax__text {
  font-size:   13px;
  color:       rgba(255,255,255,.70);
  line-height: 1.65;
  margin:      0 0 14px;
}

.pd-strongmax__pills {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  list-style: none;
  padding:    0;
  margin:     0;
}

.pd-strongmax__pill {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  background:    rgba(0,168,238,.10);
  border:        1px solid rgba(0,168,238,.20);
  border-radius: 999px;
  font-size:     11px;
  font-weight:   600;
  color:         rgba(255,255,255,.88);
}

.pd-strongmax__pill::before {
  content:       "";
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    #00a8ee;
  flex-shrink:   0;
}

@media (max-width: 560px) {
  .pd-strongmax { grid-template-columns: 1fr; gap: 12px; }
}


/* =============================================================
   GALERIE VZORNÍKŮ
   ============================================================= */

.pd-surfaces { margin: 0 0 24px; }

.pd-gallery {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    0 0 10px;
}

.pd-gallery-swatch a {
  display:       block;
  width:         82px;
  height:        82px;
  border-radius: var(--pd-radius-sm, 8px);
  overflow:      hidden;
  border:        2px solid transparent;
  box-shadow:    0 1px 4px rgba(0,0,0,.07);
  transition:    border-color .15s, transform .15s, box-shadow .15s;
}

.pd-gallery-swatch a:hover {
  border-color: #00a8ee;
  border-color: var(--pd-accent, #00a8ee);
  transform:    scale(1.06) translateY(-1px);
  box-shadow:   0 6px 18px rgba(0,168,238,.18);
}

.pd-gallery-swatch img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.pd-gallery-hint {
  font-size:   12px;
  color:       #64748b;
  color:       var(--pd-muted, #64748b);
  margin:      0 0 12px;
  font-style:  italic;
  display:     flex;
  align-items: center;
  gap:         6px;
}

.pd-gallery-hint::before {
  content:       "";
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #00a8ee;
  background:    var(--pd-accent, #00a8ee);
  flex-shrink:   0;
}

@media (max-width: 600px) {
  .pd-gallery-swatch a { width: 68px; height: 68px; }
}


/* =============================================================
   TECHNICKÉ FOTOGRAFIE
   ============================================================= */

.pd-photos {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  margin:      0 0 24px;
  align-items: flex-start;
}

.pd-photos img {
  border-radius: var(--pd-radius-sm, 8px);
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
  max-height:    190px;
  width:         auto;
  max-width:     100%;
  display:       block;
  transition:    box-shadow .2s;
}

.pd-photos img:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

.pd-main-photo {
  display:       block;
  max-width:     100%;
  border-radius: var(--pd-radius, 12px);
  margin:        0 0 24px;
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
}


/* =============================================================
   GARANCE KVALITY
   ============================================================= */

.pd-quality {
  margin:        0 0 24px;
  padding:       20px 22px;
  background:    #F9F9F9;
  background:    var(--color-bg-subtle, #F9F9F9);
  border-radius: var(--pd-radius, 12px);
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
}

.pd-quality__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   10px;
  list-style:            none;
  padding:               0;
  margin:                0;
}

.pd-quality-item {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
}

.pd-quality-item__icon {
  width:            30px;
  height:           30px;
  border-radius:    var(--pd-radius-sm, 8px);
  background-color: #fff;
  border:           1px solid #e8eef2;
  border:           1px solid var(--pd-border, #e8eef2);
  /* background-image přidáno třídou pd-icon--* */
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     15px 15px;
  flex-shrink:      0;
}

.pd-quality-item__text {
  font-size:   12.5px;
  line-height: 1.5;
  color:       #24242E;
  color:       var(--pd-text, #24242E);
}

.pd-quality-item__text strong {
  display:     block;
  font-size:   12px;
  font-weight: 700;
  margin-bottom: 2px;
}

@media (max-width: 560px) { .pd-quality__grid { grid-template-columns: 1fr; } }


/* =============================================================
   AKORDEON – čistě CSS šipka (žádný SVG v HTML)
   ============================================================= */

.pd-accordion {
  margin:        0 0 24px;
  border:        1px solid #e8eef2;
  border:        1px solid var(--pd-border, #e8eef2);
  border-radius: var(--pd-radius, 12px);
  overflow:      hidden;
}

.pd-accordion-item { border-top: 1px solid #e8eef2; border-top: 1px solid var(--pd-border, #e8eef2); }
.pd-accordion-item:first-child { border-top: 0; }

.pd-accordion-item summary {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     13px 18px;
  cursor:      pointer;
  user-select: none;
  list-style:  none;
  background:  #fff;
  transition:  background-color .15s;
}

.pd-accordion-item summary::-webkit-details-marker { display: none; }
.pd-accordion-item summary:hover { background: #F6F6F6; background: var(--color-bg-light, #F6F6F6); }
.pd-accordion-item[open] summary { background: #ecf5fe; background: var(--pd-accent-bg, #ecf5fe); }

.pd-accordion-item__num {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      #ecf5fe;
  background:      var(--pd-accent-bg, #ecf5fe);
  color:           #00a8ee;
  color:           var(--pd-accent, #00a8ee);
  font-size:       10px;
  font-weight:     800;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background .15s, color .15s;
}

.pd-accordion-item[open] .pd-accordion-item__num {
  background: #00a8ee;
  background: var(--pd-accent, #00a8ee);
  color:      #fff;
}

.pd-accordion-item__title {
  flex:        1;
  font-size:   13px;
  font-weight: 700;
  color:       #24242E;
  color:       var(--pd-text, #24242E);
}

/* Šipka dolů – čistě CSS, žádný SVG ani HTML */
.pd-accordion-item__arrow {
  width:       20px;
  height:      20px;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:  transform .25s ease;
}

.pd-accordion-item__arrow::before {
  content:       "";
  display:       block;
  width:         9px;
  height:        9px;
  border-right:  2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform:     rotate(45deg) translateY(-2px);
  transition:    transform .25s ease, border-color .15s;
}

.pd-accordion-item[open] .pd-accordion-item__arrow::before {
  transform:    rotate(-135deg) translateY(-2px);
  border-color: #00a8ee;
  border-color: var(--pd-accent, #00a8ee);
}

.pd-accordion-item__body {
  padding:     4px 18px 16px calc(18px + 22px + 12px);
  background:  #fff;
  font-size:   13px;
  line-height: 1.75;
  color:       #64748b;
  color:       var(--pd-muted, #64748b);
}

.pd-accordion-item__body p { margin: 0 0 8px; }
.pd-accordion-item__body p:last-child { margin-bottom: 0; }


/* =============================================================
   USP PRUH
   ============================================================= */

.pd-usp {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            #E4E4E4;
  background:            var(--color-border, #E4E4E4);
  border:                1px solid #E4E4E4;
  border:                1px solid var(--color-border, #E4E4E4);
  border-radius:         var(--pd-radius, 12px);
  overflow:              hidden;
  margin:                0 0 24px;
}

.pd-usp-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            6px;
  padding:        14px 10px;
  background:     #fff;
}

.pd-usp-item__icon {
  width:               36px;
  height:              36px;
  border-radius:       var(--pd-radius-sm, 8px);
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     20px 20px;
}

.pd-usp-item__title {
  font-size:   12px;
  font-weight: 700;
  color:       #24242E;
  color:       var(--pd-text, #24242E);
  line-height: 1.3;
}

.pd-usp-item__sub {
  font-size:  10.5px;
  color:      #64748b;
  color:      var(--pd-muted, #64748b);
  line-height: 1.4;
  margin-top: -3px;
}

@media (max-width: 767px) { .pd-usp { grid-template-columns: repeat(2, 1fr); } }


/* =============================================================
   NOTICE / UPOZORNĚNÍ
   ============================================================= */

.pd-notice {
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
  padding:       15px 18px;
  border-radius: var(--pd-radius, 12px);
  font-size:     13px;
  line-height:   1.65;
  border:        1px solid;
  margin:        0;
}

.pd-notice--warning {
  background:   #fff7ed;
  background:   var(--pd-orange-bg, #fff7ed);
  border-color: #fed7aa;
  border-color: var(--pd-orange-border, #fed7aa);
  color:        #431407;
}

.pd-notice__icon-wrap {
  width:            32px;
  height:           32px;
  border-radius:    var(--pd-radius-sm, 8px);
  background-color: #fed7aa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     18px 18px;
  flex-shrink:      0;
  margin-top:       1px;
}

.pd-notice__body strong {
  display:     block;
  font-size:   14px;
  font-weight: 800;
  color:       #9a3412;
  margin-bottom: 4px;
}


/* =============================================================
   MICRO-ANIMACE PŘI NAČTENÍ
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {
  .pd-intro     { animation: pd-in .35s ease both; }
  .pd-specs     { animation: pd-in .35s .05s ease both; }
  .pd-why       { animation: pd-in .35s .10s ease both; }
  .pd-strongmax { animation: pd-in .35s .15s ease both; }
  .pd-surfaces  { animation: pd-in .35s .20s ease both; }

  @keyframes pd-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}