/**
 * WC Miele Sync — Overrides & Custom Components
 * Doplnok k miele-extracted.css (auto-generovaný z miele.sk).
 * Obsah: modálne okná, layout containment, wpautop ochrana,
 *         WoodMart theme fixy, skrytie broken artefaktov, responsive.
 */

/* ==========================================================================
   CSS Variables — miele.sk design tokens
   Scopované pod .miele-desc aby neovplyvňovali zvyšok stránky.
   ========================================================================== */

.miele-desc {
  /* Typography */
  --dcf-font-weight-lighter: 300;
  --dcf-font-weight-light: 300;
  --dcf-font-weight-medium: 500;
  --dcf-font-weight-bold: 700;
  --dcf-line-height: 1.5;
  --dcf-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Colors */
  --dcf-color-eerie-black: #1a1a1a;
  --dcf-color-battle-ship-gray: #848484;
  --dcf-color-silver--rgb: 238, 238, 238;
  --dcf-background-transparency: 1;

  /* Theme colors */
  --theme-color-text-regular: #1a1a1a;
  --theme-color-text-weaker: #666;
  --theme-color-text-weakest: #999;
  --theme-color-text-disabled: #ccc;
  --theme-color-text-contrast: #fff;
  --theme-color-text-links-default-hover: #b11e23;
  --theme-color-text-states-danger: #c62828;
  --theme-color-text-states-success: #2e7d32;
  --theme-color-backgrounds-surface: #fff;
  --theme-color-backgrounds-surface-raised: #f6f6f6;
  --theme-color-backgrounds-backdrop: rgba(0,0,0,0.65);
  --theme-color-backgrounds-extra-contrast: #1a1a1a;
  --theme-color-backgrounds-contrast: #333;
  --theme-color-backgrounds-primary-dark: #1a1a1a;
  --theme-color-backgrounds-disabled: #eee;
  --theme-color-backgrounds-states-danger: #ffebee;
  --theme-color-backgrounds-states-success: #e8f5e9;
  --theme-color-overlays-default: rgba(0,0,0,0.5);
  --theme-color-overlays-less-contrast: rgba(0,0,0,0.3);
  --theme-color-overlays-more-contrast: rgba(0,0,0,0.7);
  --theme-color-borders-regular: #e0e0e0;
  --theme-color-borders-weakest: #f0f0f0;
  --theme-color-borders-extra-contrast: #1a1a1a;
  --theme-color-borders-disabled: #eee;
  --theme-color-borders-states-danger: #c62828;
  --theme-color-borders-states-focus: #1a1a1a;

  /* Spacing */
  --theme-spacing-generic-xxxs: 0.125rem;
  --theme-spacing-generic-xxs: 0.25rem;
  --theme-spacing-generic-xs: 0.5rem;
  --theme-spacing-generic-s: 0.75rem;
  --theme-spacing-generic-m: 1rem;
  --theme-spacing-generic-l: 1.5rem;
  --theme-spacing-generic-xl: 2rem;
  --theme-spacing-generic-2xl: 3rem;
  --theme-spacing-generic-3xl: 4rem;
  --miele-spacing-04: 0.25rem;
  --miele-spacing-06: 0.375rem;

  /* Border */
  --theme-border-default-stroke-width: 1px;
  --theme-border-medium-stroke-width: 2px;

  /* Radius */
  --theme-radius-generic-small: 0.5rem;
  --theme-radius-generic-full: 9999px;
  --miele-border-radius-none: 0;

  /* Sizes */
  --theme-size-generic-s: 1rem;
  --theme-size-generic-sm: 1.5rem;
  --theme-size-generic-m: 2rem;
  --theme-size-generic-ml: 2.5rem;
  --theme-size-generic-l: 3rem;
  --theme-size-generic-xl: 4rem;

  /* Motion */
  --theme-motion-time-short-3: 200ms;
  --theme-motion-ease-out: cubic-bezier(0.0, 0, 0.2, 1);

  /* Grid */
  --dcf-grid-outer-gap: 1rem;
  --theme-grid-gutter-xs: 0.5rem;
  --theme-grid-gutter-s: 0.75rem;
  --theme-grid-gutter-m: 1rem;
  --theme-grid-gutter-ml: 1.25rem;
  --theme-grid-gutter-l: 1.5rem;
  --theme-grid-gutter-xl: 2rem;

  /* Shadow */
  --theme-shadow-generic-large: 0 4px 24px rgba(0,0,0,0.12);
}

/* ==========================================================================
   Base — wrapper isolation
   ========================================================================== */

.miele-desc {
  /* CSS containment — layout/style sa neprelieva do/z WoodMart */
  contain: layout style;
  /* Nový stacking context — z-index neleakuje */
  isolation: isolate;
  /* Izolácia od galérie — clear floats, vlastný z-index context, neprekrýva Swiper */
  clear: both;
  position: relative;
  z-index: 1;

  /* Base typography — explicitné hodnoty, nie dedenie z WoodMart */
  font-family: var(--dcf-font-family);
  font-size: 16px;
  color: var(--theme-color-text-regular);
  line-height: var(--dcf-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Hard reset — WoodMart CSS bleed prevention.
   WoodMart má globálne selektory na p, a, img, h1-h6, ul, li, table, button
   ktoré prepisujú miele štýly cez kaskádu. */
.miele-desc p,
.miele-desc a,
.miele-desc img,
.miele-desc button,
.miele-desc h1, .miele-desc h2, .miele-desc h3,
.miele-desc h4, .miele-desc h5, .miele-desc h6,
.miele-desc ul, .miele-desc ol, .miele-desc li,
.miele-desc table, .miele-desc tr, .miele-desc td, .miele-desc th,
.miele-desc span, .miele-desc div, .miele-desc section {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  list-style: none;
  text-transform: none;
  letter-spacing: normal;
}

.miele-desc a {
  color: var(--theme-color-text-regular);
}
.miele-desc a:hover {
  text-decoration: underline;
}

.miele-desc button {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.miele-desc h1, .miele-desc h2, .miele-desc h3,
.miele-desc h4, .miele-desc h5, .miele-desc h6 {
  font-weight: var(--dcf-font-weight-bold);
  line-height: 1.2;
}

.miele-desc *, .miele-desc *::before, .miele-desc *::after {
  box-sizing: border-box;
}

.miele-desc img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* wpautop protection — WP pridáva prázdne <p> a <br> */
.miele-desc > br,
.miele-desc > p:empty,
.miele-desc p br:only-child {
  display: none;
}

/* ==========================================================================
   Sections — padding/spacing medzi raw sekciami
   ========================================================================== */

.miele-desc > section,
.miele-desc > div[class*="hls-"],
.miele-desc > ul.dcf-list {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* ==========================================================================
   dcf-list — feature bullet list
   ========================================================================== */

.miele-desc .dcf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.miele-desc .dcf-list li {
  border-top: 1px solid var(--theme-color-borders-regular);
  padding: 1rem 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.miele-desc .dcf-list li:last-child {
  border-bottom: 1px solid var(--theme-color-borders-regular);
}

.miele-desc .dcf-list a {
  color: var(--theme-color-text-regular);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.miele-desc .dcf-list a:hover {
  color: var(--theme-color-text-links-default-hover);
}

.miele-desc .dcf-list sup {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
}

/* ==========================================================================
   Accordions — _miele-accordion + natívne <details>
   ========================================================================== */

.miele-desc [class*="miele-accordion"] {
  border-bottom: 1px solid var(--theme-color-borders-regular);
}

/* summary je klikateľný header; label-and-icon je vnorený span */
.miele-desc [class*="miele-accordion__summary"] {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 1.125rem;
  font-weight: var(--dcf-font-weight-bold);
  user-select: none;
  list-style: none; /* skryť natívnu <details> šípku */
}
/* Skryť natívnu <details> marker šípku */
.miele-desc [class*="miele-accordion__summary"]::-webkit-details-marker { display: none; }
.miele-desc [class*="miele-accordion__summary"]::marker { display: none; content: ""; }

.miele-desc [class*="miele-accordion__summary"]:hover {
  color: var(--theme-color-text-links-default-hover);
}

/* Plus/minus ikona — LEN na summary (nie na vnorenom label-and-icon) */
.miele-desc [class*="miele-accordion__summary"]::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform var(--theme-motion-time-short-3) var(--theme-motion-ease-out);
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Otvorený stav — <details open> alebo JS .is-open */
.miele-desc details[open] > [class*="miele-accordion__summary"]::after,
.miele-desc [class*="miele-accordion__summary"].is-open::after {
  content: "\2212"; /* minus */
}

/* Obsah akordiónu — skrytý defaultne, JS animuje max-height */
.miele-desc [class*="miele-accordion__content"] {
  overflow: hidden;
  transition: max-height 250ms var(--theme-motion-ease-out);
}

/* Skryť pôvodnú SVG ikonu akordiónu (broken bez sprite) */
.miele-desc [class*="miele-accordion__icon"] {
  display: none !important;
}

/* Akordióny v tmavej sekcii — biele texty, biele bordery */
.miele-desc .hls-section--dark [class*="miele-accordion"] {
  border-bottom-color: rgba(255,255,255,0.2);
}
.miele-desc .hls-section--dark [class*="miele-accordion__summary"] {
  color: #fff;
}
.miele-desc .hls-section--dark [class*="miele-accordion__summary"]::after {
  color: #fff;
}

/* ==========================================================================
   Tabs — dcf-tab (downloads section)
   ========================================================================== */

.miele-desc .dcf-tabs {
  margin-top: 1rem;
}

.miele-desc [class*="dcf-tabs-header__wrapper"] {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--theme-color-borders-regular);
  gap: 0;
}

.miele-desc [class*="dcf-tabs-header__wrapper"]::-webkit-scrollbar { display: none; }

.miele-desc .dcf-tab-header {
  flex-shrink: 0;
}

.miele-desc .dcf-tab-header-button {
  background: none;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: var(--dcf-font-weight-medium);
  color: var(--theme-color-text-weakest);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.miele-desc .dcf-tab-header-button:hover {
  color: var(--theme-color-text-regular);
}

.miele-desc .dcf-tab-header--selected .dcf-tab-header-button,
.miele-desc .dcf-tab-header.active-tab .dcf-tab-header-button {
  color: var(--theme-color-text-regular);
  font-weight: var(--dcf-font-weight-bold);
  border-bottom-color: var(--theme-color-text-regular);
}

/* Tab content — skrytý defaultne */
.miele-desc .dcf-tab-content {
  display: none;
  padding: 1.5rem 0;
}

.miele-desc .dcf-tab-content.is-active {
  display: block;
}

/* ==========================================================================
   Spec tables — table__item / table__label / table__value
   ========================================================================== */

.miele-desc .table__item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--theme-color-borders-weakest);
  gap: 1rem;
}

.miele-desc .table__label {
  color: var(--theme-color-text-weaker);
  flex: 0 0 50%;
  font-size: 0.9375rem;
}

.miele-desc .table__value {
  font-size: 0.9375rem;
  text-align: right;
  flex: 1;
}

/* ==========================================================================
   Feature cards — carousel + highlighted cards
   ========================================================================== */

/* Carousel → responsive grid (namiesto horizontal scroll) */
.miele-desc [class*="miele-carousel__slides"],
.miele-desc .hls-product-features .dcf-horizontal-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
  overflow: visible;
}

.miele-desc .dcf-carousel-item {
  width: auto;
  max-width: none;
  flex: none;
}

/* Highlighted feature card */
.miele-desc .hls-highlighted-feature-card {
  border-radius: var(--theme-radius-generic-small);
  overflow: hidden;
  height: 100%;
}

.miele-desc .hls-highlighted-feature-card img {
  width: 100%;
  display: block;
  border-radius: var(--theme-radius-generic-small) var(--theme-radius-generic-small) 0 0;
}

/* Dark context card */
.miele-desc .dcf-ctx-dark {
  background: var(--theme-color-backgrounds-extra-contrast);
  color: var(--theme-color-text-contrast);
}

.miele-desc .dcf-ctx-dark .hls-content-line__content {
  color: var(--theme-color-text-contrast);
}

/* Feature card (non-highlighted) */
.miele-desc .hls-feature-card {
  padding: 1.5rem;
}

.miele-desc .hls-feature-card img {
  border-radius: var(--theme-radius-generic-small);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Downloads — hls-download-section
   ========================================================================== */

.miele-desc .hls-download-section {
  padding: 2rem 0;
}

/* Nadpis sekcie — "Súbory na stiahnutie" */
.miele-desc .hls-download-section h2,
.miele-desc .hls-download-section .dcf-h2,
.miele-desc .hls-download-section .dcf-h2-child > * {
  font-size: 1.5rem;
  font-weight: var(--dcf-font-weight-lighter, 300);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.875rem;
  display: block;
  color: var(--theme-color-text-regular);
}

.miele-desc .hls-download-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--theme-color-borders-weakest);
  gap: 1rem;
}

/* Popis súboru — "Vyhlásenie o zhode EÚ", "Produktový list", typ "PDF" */
.miele-desc [class*="hls-download-list-item--description"],
.miele-desc .hls-download-list-item .dcf-h5,
.miele-desc .hls-download-list-item .dcf-h5-child > * {
  font-size: 1rem;
  font-weight: var(--dcf-font-weight-medium, 500);
  line-height: 1.375rem;
  color: var(--theme-color-text-regular);
  overflow-wrap: anywhere;
}

/* Typ dokumentu label pod popisom */
.miele-desc [class*="hls-download-list-item--type"],
.miele-desc .hls-download-list-item [class*="description"] + [class*="type"] {
  font-size: 0.875rem;
  color: var(--theme-color-text-weaker, #666);
  line-height: 1.25rem;
}

/* Download link/button */
.miele-desc .dcf-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--theme-color-borders-extra-contrast);
  border-radius: var(--theme-radius-generic-small);
  background: none;
  color: var(--theme-color-text-regular);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.miele-desc .dcf-button:hover {
  background: var(--theme-color-backgrounds-surface-raised);
}

/* Download item s obrázkom (energy label) */
.miele-desc [class*="hls-download-list-item--with-image"] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.miele-desc [class*="hls-download-list-item--with-image"] img {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

.miele-desc [class*="hls-download-list-item--with-image"] [class*="description"] {
  font-weight: var(--dcf-font-weight-light, 300);
}

/* ==========================================================================
   Accessories — Zhodné produkty a príslušenstvo
   ========================================================================== */

.miele-desc [class*="hls-accessories-wrapper"] {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding: 1rem 0;
}

.miele-desc [class*="hls-accessories-wrapper-item"] {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 280px;
  display: flex;
  align-items: stretch;
}

/* Product tile */
.miele-desc [class*="dcf-product-tile"] {
  display: flex;
  flex-direction: column;
  background: var(--theme-color-backgrounds-surface, #fff);
  border: 1px solid var(--theme-color-borders-weakest, #f0f0f0);
  border-radius: var(--theme-radius-generic-small, 0.5rem);
  overflow: hidden;
  width: 100%;
  text-decoration: none;
  color: var(--theme-color-text-regular);
  transition: box-shadow 0.2s;
}

.miele-desc [class*="dcf-product-tile"]:hover {
  box-shadow: var(--theme-shadow-generic-large);
}

.miele-desc [class*="dcf-product-tile"] img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tile body — názov, cena */
.miele-desc [class*="dcf-product-tile-body"] {
  padding: 0.75rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.miele-desc [class*="dcf-product-tile-body"] [class*="dcf-h5"],
.miele-desc [class*="dcf-product-tile-body"] h3,
.miele-desc [class*="dcf-product-tile-body"] h4 {
  font-size: 0.875rem;
  font-weight: var(--dcf-font-weight-medium, 500);
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

.miele-desc [class*="dcf-product-tile-body"] [class*="price"],
.miele-desc [class*="dcf-product-tile-body"] [class*="Price"] {
  font-size: 1rem;
  font-weight: var(--dcf-font-weight-bold, 700);
  margin-top: auto;
}

/* Buy section — skryť na eshope (lokálne ceny/dostupnosť sú iné) */
.miele-desc [class*="dcf-product-tile-buy-section"] {
  display: none;
}

/* Accessories section nadpis */
.miele-desc [class*="hls-accessories"] > h2,
.miele-desc [class*="hls-accessories"] > .dcf-h2,
.miele-desc [class*="hls-accessories"] > .dcf-h2-child > *,
.miele-desc h2.hls-section-heading {
  font-size: 1.5rem;
  font-weight: var(--dcf-font-weight-lighter, 300);
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.875rem;
  color: #1a1a1a; /* dcf-h2 dedí white z :root CSS var, accessories je na light pozadí */
}

/* Footnote anchory — nefunkčné mimo miele.sk (odkazujú na #hls-footnote-section) */
.miele-desc [data-content-type="footnote"],
.miele-desc a.hls-footnote-anchor,
.miele-desc sup:has(> a.hls-footnote-anchor) {
  display: none !important;
}

/* ==========================================================================
   Content line wrapping — hls-content-line
   ========================================================================== */

.miele-desc .hls-content-line {
  display: inline;
}

.miele-desc .hls-content-line__content {
  display: inline;
}

/* ==========================================================================
   Modálne okná — custom (inject_expanded_content)
   ========================================================================== */

.miele-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--theme-color-backgrounds-backdrop, rgba(0,0,0,0.65));
  z-index: 999999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.miele-modal-overlay.miele-modal-visible {
  opacity: 1;
}

.miele-modal-box {
  background: #fff;
  border-radius: var(--theme-radius-generic-small, 0.5rem);
  max-width: 860px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.25s ease;
  box-shadow: var(--theme-shadow-generic-large, 0 4px 24px rgba(0,0,0,0.12));
}

.miele-modal-visible .miele-modal-box {
  transform: translateY(0);
}

.miele-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.miele-modal-close:hover {
  background: #f0f0f0;
}

.miele-modal-image {
  width: 100%;
  display: block;
  background: var(--theme-color-backgrounds-surface-raised, #f6f5f4);
}

.miele-modal-image img {
  width: 100%;
  display: block;
  border-radius: var(--theme-radius-generic-small, 0.5rem) var(--theme-radius-generic-small, 0.5rem) 0 0;
}

.miele-modal-body {
  padding: 32px 40px;
}

.miele-modal-body h3 {
  font-size: 1.5rem;
  font-weight: var(--dcf-font-weight-bold, 700);
  margin: 0 0 1rem;
  line-height: 1.3;
}

.miele-modal-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-color-text-weaker, #666);
  margin-bottom: 0.5rem;
}

.miele-modal-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--theme-color-text-regular, #1a1a1a);
}

.miele-modal-text p { margin: 0 0 1rem; }
.miele-modal-text p:last-child { margin: 0; }

/* Video v modáli */
.miele-modal-video {
  position: relative;
  background: #000;
  border-radius: var(--theme-radius-generic-small, 0.5rem);
  overflow: hidden;
  margin-top: 1.5rem;
  cursor: pointer;
}

.miele-modal-video img {
  width: 100%;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.miele-modal-video:hover img { opacity: 0.7; }

.miele-play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.miele-play-overlay::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 20px solid #1a1a1a;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

.miele-modal-video:hover .miele-play-overlay {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Video element po kliknutí */
.miele-modal-video video {
  width: 100%;
  display: block;
}

/* Modal trigger button — "Čítať viac" */
.miele-modal-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem 0;
  color: var(--theme-color-text-regular);
  font-size: 0.875rem;
  font-weight: var(--dcf-font-weight-medium, 500);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.miele-modal-trigger:hover {
  color: var(--theme-color-text-links-default-hover, #b11e23);
}

/* ==========================================================================
   Skrytie broken artefaktov — framework zvyšky bez funkcionality
   ========================================================================== */

/* Tooltips — panely skryť, triggery ponechať (obsahujú viditeľný text) */
.miele-desc [class*="miele-tooltip__panel"],
.miele-desc [class*="miele-tooltip__content"],
.miele-desc [class*="tooltip-content"],
.miele-desc [class*="tooltip__panel"] { display: none !important; }
/* Tooltip trigger text — podčiarknutý ako na miele.sk */
.miele-desc [class*="hls-content-line__link"],
.miele-desc [class*="miele-tooltip__trigger"],
.miele-desc .miele-keyword {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: text;
}

/* Klikateľné tooltip triggery s obsahom z NUXT — cursor pointer */
.miele-tooltip-trigger {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--theme-color-text-links-default, #333);
  text-underline-offset: 3px;
  cursor: pointer;
  color: inherit;
  transition: color 0.15s ease;
}
.miele-tooltip-trigger:hover {
  color: var(--theme-color-text-links-default-hover, #b11e23);
  text-decoration-color: currentColor;
}

/* ⓘ info ikona v tech-details tabuľke — vizuálne odlíšená od keyword triggerov.
   PREČO .miele-desc prefix: hard reset .miele-desc span { margin:0 } má specificitu (0,1,1)
   a bez prefixu by prepísal margin-left. S prefixom máme (0,2,0) > (0,1,1). */
.miele-desc .miele-tooltip-icon {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #555;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.miele-desc .miele-tooltip-icon:hover {
  background: #b11e23;
  color: #fff;
  text-decoration: none;
}

/* Tooltip popup — malý card zobrazený pri kliku na trigger */
.miele-tooltip-popup {
  display: none;
  position: absolute;
  z-index: 10000;
  max-width: 380px;
  min-width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  overflow: hidden;
  animation: miele-tooltip-fade 0.15s ease;
}
.miele-tooltip-popup.miele-tooltip-visible {
  display: block;
}
@keyframes miele-tooltip-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tooltip obrázok — nad headerom */
.miele-tooltip-image {
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  background: #f5f5f5;
}
.miele-tooltip-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 180px;
}

.miele-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.miele-tooltip-header strong {
  font-size: 14px;
  color: #222;
}
.miele-tooltip-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 0 2px;
  line-height: 1;
  margin-left: 12px;
}
.miele-tooltip-close:hover {
  color: #333;
}
.miele-tooltip-body {
  padding: 12px 14px;
  max-height: 300px;
  overflow-y: auto;
}
.miele-tooltip-body p {
  margin: 0 0 0.5rem;
}
.miele-tooltip-body p:last-child {
  margin: 0;
}

/* Skeleton loadery */
.miele-desc [class*="skeleton"] { display: none !important; }

/* Screen reader only */
.miele-desc .sr-only,
.miele-desc [class*="screen-reader-only"] {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Carousel controls — nefunkčné bez miele.sk JS */
.miele-desc [class*="dcf-carousel-control"],
.miele-desc [class*="miele-carousel-control-bar"],
.miele-desc [class*="miele-carousel-navigation"] { display: none !important; }

/* In-page navigation */
.miele-desc [class*="nav-inpage"] { display: none !important; }

/* Dividers — ponechať v dark sections, skryť v light (artefakty) */
.miele-desc > [class*="hls-divider"],
.miele-desc .hls-section--light [class*="hls-divider"] { display: none !important; }

/* Prázdne elementy */
.miele-desc > div:empty,
.miele-desc > span:empty:not([class]) { display: none; }

/* ==========================================================================
   Extra features — unmatchnuté NUXT karty (fallback grid)
   ========================================================================== */

.miele-desc .miele-extra-features {
  padding: 2rem 0;
}

.miele-desc .miele-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.miele-desc .miele-extra-card {
  background: var(--theme-color-backgrounds-surface-raised, #f6f5f4);
  border-radius: var(--theme-radius-generic-small, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.miele-desc .miele-extra-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.miele-desc .miele-extra-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.miele-desc .miele-extra-card__body h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: var(--dcf-font-weight-bold, 700);
  line-height: 1.3;
}

.miele-desc .miele-extra-card__body p {
  flex: 1;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--theme-color-text-secondary, #525252);
}

/* Benefit image injektovaný do feature kariet */
.miele-desc .miele-benefit-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
  border-radius: var(--theme-radius-generic-small, 8px);
}

/* Section spacing */
.miele-desc > ._miele-section + ._miele-section,
.miele-desc > [class*="hls-section"] + [class*="hls-section"] {
  margin-top: 2.5rem;
}

/* Prázdne accordions/tabs — CSS fallback */
.miele-desc details[class*="miele-accordion"]:has(> [class*="content"]:empty) { display: none; }
.miele-desc .dcf-tab-content:empty { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .miele-desc .table__item {
    flex-direction: column;
    gap: 0.25rem;
  }

  .miele-desc .table__value {
    text-align: left;
  }

  .miele-desc .dcf-tab-header-button {
    font-size: 0.75rem;
    padding: 0.625rem 0.875rem;
  }

  .miele-modal-body {
    padding: 20px 24px;
  }

  .miele-modal-body h3 {
    font-size: 1.25rem;
  }

  .miele-desc [class*="miele-carousel__slides"],
  .miele-desc .miele-extra-grid {
    grid-template-columns: 1fr;
  }

  .miele-desc [class*="hls-accessories-wrapper-item"] {
    min-width: 200px;
    max-width: 240px;
  }

  .miele-desc .hls-download-list-item {
    flex-wrap: wrap;
  }

  .miele-desc [class*="miele-accordion__summary"],
  .miele-desc [class*="miele-accordion__label-and-icon"],
  .miele-desc summary {
    font-size: 1rem;
  }
}

/* 480px breakpoint removed — grid handles responsive layout */

/* ==========================================================================
   SEO Description Assembler — AI-generovaný obsah v excerpt a content
   ========================================================================== */

/* ── Miele krátky popis: features (subtitle + specs z miele.sk) ── */
/* PREČO dvojitá špecificita: WoodMart base.min.css resetuje font-size:100% na * */
body .woocommerce div.product .miele-short-features,
body .elementor .miele-short-features,
.miele-short-features {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #000 !important;
}

body .woocommerce div.product .miele-short-features strong,
body .elementor .miele-short-features strong,
.miele-short-features strong {
  font-size: inherit !important;
  color: #000 !important;
}

/* ── Miele krátky popis: SEO perex (AI generovaný text) ── */
body .woocommerce div.product .seo-short-intro,
body .elementor .seo-short-intro,
.seo-short-intro {
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #333 !important;
}

body .woocommerce div.product .seo-short-intro p,
body .elementor .seo-short-intro p,
.seo-short-intro p {
  font-size: 14px !important;
  color: #333 !important;
}

.seo-short-intro .seo-inline-title {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.seo-product-content {
  margin-bottom: 2em;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.seo-product-content p {
  margin-bottom: 0.8em;
}

.miele-details-title {
  font-size: 22px;
  font-weight: 600;
  margin: 1.5em 0 0.8em;
  color: #1a1a1a;
}

/* ==========================================================================
   FAQ Accordion — natívny HTML5 details/summary, žiadny JS
   ========================================================================== */

.miele-faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}

.miele-faq-item[open] {
  border-color: #ccc;
}

.miele-faq-question {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1d2327;
  cursor: pointer;
  list-style: none;
  background: #f9f9f9;
  transition: background 0.15s;
}

/* Natívny disclosure marker nie je konzistentný medzi prehliadačmi */
.miele-faq-question::-webkit-details-marker {
  display: none;
}

/* Skry starú inline SVG ikonu (ostala v DB z predošlých importov) */
.miele-faq-question .miele-faq-icon {
  display: none !important;
}

.miele-faq-question::after {
  content: '+';
  float: right;
  font-size: 20px;
  font-weight: 300;
  color: #666;
  line-height: 1;
  transition: transform 0.2s;
}

.miele-faq-item[open] .miele-faq-question::after {
  content: '−';
}

.miele-faq-question:hover {
  background: #f0f0f0;
}

.miele-faq-answer {
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

.miele-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Feature hover tooltip (.emshop-feature-tooltip — built by msc-product.js,
   appended to <body>). Hardened so the Tailwind base/reset can't bleed a
   color onto the body text or break the card containment. Matches the
   original emshop.sk look: white rounded card, image top, dark title,
   grey contained body text.
   ========================================================================== */
.emshop-feature-tooltip {
  width: min(340px, calc(100vw - 20px)) !important;
  box-sizing: border-box;
}

.emshop-feature-tooltip,
.emshop-feature-tooltip * {
  box-sizing: border-box;
}

.emshop-feature-tooltip-inner {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

.emshop-feature-tooltip-image {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.emshop-feature-tooltip-group {
  margin: 10px 14px 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #8c0014 !important;
}

.emshop-feature-tooltip-title {
  margin: 10px 14px 6px !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.emshop-feature-tooltip-text {
  margin: 0 14px 14px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: #555 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}