/* =========================================================
   HERO - O nás (lokálna brand paleta + Oxanium, scoped na .wb-hero-page)
========================================================= */

.wb-hero-page {
  --wb-brand-2:       #eb6414;
  --wb-muted:         rgba(29, 29, 27, .68);
  --wb-hero-bg:       var(--gs-50, #f9faf9);
  --wb-hero-photo-bg: #4d4d4d;
  --wb-font-display:  'Oxanium', 'DM Sans', system-ui, sans-serif;

  position: relative;
  font-family: var(--wb-font-display);
  min-height: clamp(340px, 46vw, 520px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--wb-hero-bg);
}

.wb-hero-page__media {
  position: absolute;
  inset: 0;
  left: 38%;
  background-color: var(--wb-hero-photo-bg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
}

/* hero slide background images (presunuté z inline style) */
.wb-hero-page__media--o-nas {
  background-image: url('https://jaside.sk/wp-content/uploads/2026/07/hero-s-bg.png');
}
.wb-hero-page__media--sprievodca {
  background-image: url('https://jaside.sk/wp-content/uploads/2026/07/hero-s-bg.png');
}

.wb-hero-page__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, var(--wb-hero-bg) 0%, var(--wb-hero-bg) 46%, rgba(245, 245, 245, .0) 68%);
}

.wb-hero-page__inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(20px, 6vw, 40px);
}

.wb-hero-page__content {
  max-width: 560px;
}

.wb-hero-page__title {
  margin: 0 0 18px;
}

.wb-hero-page__subtitle {
  margin: 0 0 16px;
}

.wb-hero-page__text {
  margin: 0;
}

@media (max-width: 860px) {
  .wb-hero-page { min-height: auto; flex-direction: column; }
  .wb-hero-page__media {
    position: relative;
    left: 0;
    inset: auto;
    height: 220px;
    clip-path: none;
    order: -1;
  }
  .wb-hero-page__panel { background: var(--wb-hero-bg); }
  .wb-hero-page__content { max-width: none; }
}

/* =========================================================
   STORY - Ako to celé začalo (lokálna brand paleta + Oxanium, scoped na .wb-story)
========================================================= */

.wb-story {
  --wb-muted:    rgba(29, 29, 27, .68);
  --wb-font-display: 'Oxanium', 'DM Sans', system-ui, sans-serif;

  position: relative;
  font-family: var(--wb-font-display);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 6vw, 40px);
}

.wb-story__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 464px;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.wb-story__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

.wb-story__title {
  margin: 0 0 24px;
}

.wb-story__text p {
  margin: 0 0 20px;
}
.wb-story__text p:last-child { margin-bottom: 0; }

.wb-story__media {
  position: relative;
  z-index: 1;
  line-height: 0;
}
.wb-story__media img {
  display: block;
  width: 100%;
  height: 452px;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 860px) {
  .wb-story__inner {
    grid-template-columns: 1fr;
  }
  .wb-story__media { order: -1; }
  .wb-story__media img { height: auto; aspect-ratio: 1 / 1; }
}

/* =========================================================
   REVIEWS - Skúsenosti našich zákazníkov (lokálna brand paleta + Oxanium, scoped na .wb-reviews)
========================================================= */

.wb-reviews {
  --wb-muted:      rgba(29, 29, 27, .68);
  --wb-font-display: 'Oxanium', 'DM Sans', system-ui, sans-serif;

  position: relative;
  font-family: var(--wb-font-display);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 6vw, 40px);
}

.wb-reviews__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.wb-reviews__head {
  max-width: 720px;
  margin: 0 0 44px;
}

.wb-reviews__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

.wb-reviews__title {
  margin: 0 0 18px;
}

.wb-reviews__text {
  margin: 0;
}

/* =========================================================
   PAGE BACKGROUND - zdieľané pozadie + oranžové kruhy prechádzajúce
   naprieč sekciami (story / reviews / showcase / cta), scoped na
   .wb-sections-bg. Kruhy sú v jednej spoločnej vrstve, nie sú
   orezané hranicou jednotlivej sekcie.
========================================================= */

.wb-sections-bg {
  position: relative;
  background: var(--gs-50, #f9faf9);
  overflow: hidden;
}

.wb-sections-bg__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wb-sections-bg__circle {
  position: absolute;
  border: 1.5px solid var(--bp-500, #f69f10);
  border-radius: 50%;
  opacity: .3;
}

.wb-sections-bg__circle--1 { width: 460px;  height: 460px;  top: -12%;  right: -8%; }
.wb-sections-bg__circle--2 { width: 260px;  height: 260px;  top: 18%;   left: -6%; }
.wb-sections-bg__circle--3 { width: 620px;  height: 620px;  top: 42%;   right: -14%; }
.wb-sections-bg__circle--4 { width: 340px;  height: 340px;  top: 68%;   left: 6%; }
.wb-sections-bg__circle--5 { width: 500px;  height: 500px;  top: 92%;   right: 10%; }

@media (max-width: 860px) {
  .wb-sections-bg__circle--1 { width: 300px; height: 300px; }
  .wb-sections-bg__circle--3 { width: 380px; height: 380px; }
  .wb-sections-bg__circle--5 { width: 320px; height: 320px; }
}

/* Jemnejší variant (napr. Sprievodca nákupom) - tenšia línia, nižšia opacita */
.wb-sections-bg--soft .wb-sections-bg__circle {
  border-width: 1px;
  opacity: .16;
}

/* =========================================================
   STEPS - Ako to funguje (5 krokov), scoped na .wb-step
   Farby a typografia preberané z root.css (wb-h2, wb-p, wb-black,
   wb-brand-2 ...), tu len layout + prvky, ktoré root nepokrýva
   (tlačidlo, pilulky výberu, dekoratívne kruhy).
========================================================= */

.wb-step {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 60px) clamp(20px, 6vw, 40px);
}
/* Desktop - medzera medzi krokmi je súčet horného+dolného paddingu
   dvoch susediacich .wb-step sekcií (až 120px na širokých obrazovkách,
   kde 6vw prekročí stropom 60px) - na mobile (viď @media 860px nižšie)
   sa toho nedotýkame, tam bola medzera v poriadku. */
@media (min-width: 861px) {
  .wb-step { padding-top: 32px; padding-bottom: 32px; }
}

.wb-step__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.wb-step--reverse .wb-step__inner {
  grid-template-columns: 1fr 1.62fr;
}

.wb-step__num {
  margin: 0 0 8px;
  font-weight: 700;
}

.wb-step__title { margin: 0 0 16px; }

.wb-step__text { margin: 0 0 20px; }
.wb-step__text:last-child { margin-bottom: 0; }

.wb-step__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wb-accent-brown);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: 16px 40px 12px;
  border-radius: 6px;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.wb-step__btn:hover { background: var(--wb-accent-brown-hover); opacity: 1; }
.wb-step__btn:active { transform: scale(.98); }
.wb-step__btn svg { flex: none; }

.wb-step__options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0;
}
/* Text hneď po pilulkách (Krok 03 "Bez pasparty siaha motív..." a
   Krok 04 "Jemné plátno vyniká...") - options majú len 4px vlastného
   margin-bottom, pôsobilo to zlepené s pilulkami nad sebou. */
.wb-step__options + .wb-step__text { margin-top: 24px; }

.wb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gs-950);
  border: 1px solid var(--gs-950);
  background: transparent;
}
.wb-pill--active {
  border-color: var(--bp-600, #da7605);
  background: #f8f6f2;
}

.wb-step__media {
  position: relative;
  z-index: 1;
  line-height: 0;
}
.wb-step__media img {
  display: block;
  width: 100%;
  height: 452px;
  object-fit: cover;
  border-radius: 20px;
}
.wb-step__media--framed img {
  border-radius: 0;
  border: 10px solid var(--gs-950);
}

/* animovaná ukážka namiesto statickej fotky */
.wb-step__media:has(.wb-step__anim) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 452px;
  background: transparent;
}
.wb-step__anim { font-family: var(--wb-font, sans-serif); user-select:none; }

.jsd-cursor{ position:absolute; top:0; left:0; width:22px; height:22px;
  transform:translate(-50%,-46%); pointer-events:none; opacity:0;
  transition:left 1s ease-in-out, top 1s ease-in-out, opacity .5s ease, transform .14s ease;
  z-index:9; filter:drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.jsd-cursor.is-on{ opacity:1; }
.jsd-cursor.is-click{ transform:translate(-50%,-46%) scale(.82); }
.jsd-cursor.dragging{ transition:opacity .5s ease, transform .14s ease; }
.jsd-ripple{ position:absolute; top:0; left:0; width:12px; height:12px; margin:-6px 0 0 -6px;
  border:1.5px solid var(--bp-400); border-radius:50%; opacity:0; pointer-events:none; z-index:8; }
.jsd-ripple.is-fire{ animation:jsd-ripple .7s ease-out; }
@keyframes jsd-ripple{ 0%{opacity:.7;transform:scale(.4);} 100%{opacity:0;transform:scale(3);} }

/* Krok 01 - .jsd-motiv */
.jsd-motiv{ position:relative; width:min(420px,90%); aspect-ratio:1/1;
  display:grid; grid-template-columns:1fr 1fr; gap:18px; background:transparent; }
.jsd-card{ position:relative; display:grid; place-items:center;
  border:1.5px solid var(--gs-200); border-radius:10px; color:var(--gs-400);
  transition:border-color .45s ease, color .45s ease, background-color .45s ease, transform .3s ease; }
.jsd-card svg{ width:50%; height:50%; }
.jsd-card svg *{ vector-effect:non-scaling-stroke; }
.jsd-card.is-hover{ border-color:var(--gs-300); color:var(--gs-600); }
.jsd-card.is-press{ transition-duration:.12s; transform:scale(.985); }
.jsd-card.is-selected{ border-color:var(--bp-400); background:var(--bp-50); color:var(--bp-600); }

/* Krok 02 - .jsd-rozmer */
.jsd-rozmer{ position:relative; width:min(420px,90%); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  background:transparent; }
.jsd-stage{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:164px; }
.jsd-dim{ height:18px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--gs-500);
  margin-bottom:14px; font-variant-numeric:tabular-nums; transition:color .4s ease; }
.jsd-dim.is-set{ color:var(--bp-700); }
.jsd-frame{ box-sizing:content-box; padding:5px; border:1.5px solid var(--gs-300); border-radius:3px;
  transition:width .5s ease, height .5s ease, border-color .4s ease; width:75px; height:105px; }
.jsd-frame__inner{ width:100%; height:100%; border:1.25px solid var(--gs-200); border-radius:1px; transition:border-color .4s ease; }
.jsd-frame.is-empty{ border-style:dashed; border-color:var(--gs-300); }
.jsd-frame.is-empty .jsd-frame__inner{ border-style:dashed; }
.jsd-frame.is-set{ border-color:var(--bp-400); }
.jsd-frame.is-set .jsd-frame__inner{ border-color:var(--bp-200); }
.jsd-selectwrap{ position:relative; }
.jsd-select{ position:relative; width:224px; height:46px; border:1.5px solid var(--gs-200); border-radius:11px; background:#fff; transition:border-color .3s ease; }
.jsd-select.is-open{ border-color:var(--gs-300); }
.jsd-select__face,.jsd-select__input{ position:absolute; inset:0; display:flex; align-items:center; padding:0 15px; transition:opacity .25s ease; }
.jsd-select__face{ justify-content:space-between; font-size:13.5px; font-weight:600; color:var(--gs-500); }
.jsd-select__chev{ width:15px; height:15px; color:var(--gs-400); transition:transform .3s ease; }
.jsd-select.is-open .jsd-select__chev{ transform:rotate(180deg); }
.jsd-select__input{ justify-content:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--gs-500); opacity:0; pointer-events:none; }
.jsd-select.mode-input .jsd-select__face{ opacity:0; }
.jsd-select.mode-input .jsd-select__input{ opacity:1; }
.jsd-options{ position:absolute; top:calc(100% + 7px); left:0; right:0; border:1.5px solid var(--gs-200);
  border-radius:11px; background:#fff; padding:5px; display:flex; flex-direction:column; gap:1px; z-index:7;
  opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 8px 22px rgba(29,29,27,.07); }
.jsd-options.is-open{ opacity:1; transform:none; }
.jsd-opt{ padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--gs-600);
  font-variant-numeric:tabular-nums; transition:background-color .2s ease, color .2s ease; }
.jsd-opt.is-hl{ background:var(--gs-50); color:var(--gs-900); }
.jsd-opt.is-custom{ color:var(--bp-700); border-top:1px solid var(--gs-100); margin-top:3px; padding-top:11px; }
.jsd-opt.is-custom.is-hl{ background:var(--bp-50); color:var(--bp-700); }
.jsd-box{ min-width:40px; height:22px; padding:5px 7px; border:1.5px solid var(--gs-200); border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--gs-800); font-variant-numeric:tabular-nums; transition:border-color .3s ease; }
.jsd-box.is-focus{ border-color:var(--bp-400); }
.jsd-box .caret{ display:inline-block; width:1px; height:15px; background:var(--gs-700); margin-left:1px; opacity:0; }
.jsd-box.is-focus .caret{ opacity:1; animation:jsd-blink 1s steps(1) infinite; }
@keyframes jsd-blink{ 50%{opacity:0;} }
.jsd-times{ color:var(--gs-400); }
.jsd-ok{ display:inline-grid; place-items:center; width:30px; height:30px; margin-left:2px; border:1.5px solid var(--gs-200);
  border-radius:8px; color:var(--gs-400); transition:border-color .3s ease, background-color .3s ease, color .3s ease; }
.jsd-ok svg{ width:14px; height:14px; }
.jsd-ok.is-hover{ border-color:var(--gs-300); color:var(--gs-600); }
.jsd-ok.is-done{ border-color:var(--bp-500); background:var(--bp-500); color:#fff; }

/* Krok 03 - .jsd-pasparta */
.jsd-pasparta{ position:relative; width:min(420px,90%); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  background:transparent; }
.jsd-p-stage{ display:flex; flex-direction:column; align-items:center; }
.jsd-p-label{ height:18px; margin-bottom:14px; font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--gs-500); font-variant-numeric:tabular-nums; transition:color .4s ease; }
.jsd-p-label.is-set{ color:var(--bp-700); }
.jsd-p-frame{ width:184px; height:140px; box-sizing:border-box; padding:0; border:1.5px solid var(--gs-300);
  border-radius:3px; background:#fff; transition:border-color .4s ease; }
.jsd-p-image{ width:100%; height:100%; box-sizing:border-box; border:1px solid var(--gs-200);
  display:grid; place-items:center; color:var(--gs-400); transition:border-color .4s ease; }
.jsd-p-image svg{ width:54%; height:54%; }
.jsd-p-image svg *{ vector-effect:non-scaling-stroke; }
.jsd-p-frame.is-set .jsd-p-image{ border-color:var(--bp-300); }
.jsd-p-slider{ width:224px; }
.jsd-p-track{ position:relative; height:4px; border-radius:999px; background:var(--gs-200); }
.jsd-p-fill{ position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px; background:var(--bp-400); }
.jsd-p-tick{ position:absolute; top:50%; width:2px; height:9px; background:var(--gs-200); border-radius:1px; transform:translate(-50%,-50%); }
.jsd-p-handle{ position:absolute; top:50%; left:0; width:18px; height:18px; border-radius:50%;
  background:#fff; border:1.5px solid var(--gs-300); transform:translate(-50%,-50%);
  transition:border-color .2s ease, box-shadow .2s ease, width .15s ease, height .15s ease; }
.jsd-p-handle.is-grab{ border-color:var(--bp-500); width:22px; height:22px; box-shadow:0 0 0 4px rgba(246,159,16,.12); }
.jsd-p-ends{ display:flex; justify-content:space-between; margin-top:13px; font-size:12px; font-weight:600; color:var(--gs-400); }

/* Krok 04 / 05 - .jsd-platno (plátno aj rám zdieľajú rovnaký widget) */
.jsd-platno{ position:relative; width:min(420px,90%); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; gap:16px; background:transparent; }
.jsd-mat{ flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; }
.jsd-mat__sw{ width:100%; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  border:1.5px solid var(--gs-200); border-radius:11px; color:var(--gs-400);
  transition:border-color .45s ease, color .45s ease, background-color .45s ease, transform .3s ease; }
.jsd-mat__sw svg{ width:78%; height:78%; }
.jsd-mat__sw svg *{ vector-effect:non-scaling-stroke; }
.jsd-mat__name{ font-size:12.5px; font-weight:600; color:var(--gs-500); text-align:center; transition:color .4s ease; }
.jsd-mat.is-hover .jsd-mat__sw{ border-color:var(--gs-300); color:var(--gs-600); }
.jsd-mat.is-press .jsd-mat__sw{ transition-duration:.12s; transform:scale(.97); }
.jsd-mat.is-selected .jsd-mat__sw{ border-color:var(--bp-400); background:var(--bp-50); color:var(--bp-600); }
.jsd-mat.is-selected .jsd-mat__name{ color:var(--bp-700); }

/* Krok 05 (#jsdRam) má po odstránení "3D hliníkový" len 2 boxy namiesto 3 -
   bez tohto by ich .jsd-mat{flex:1} roztiahlo na celú šírku .jsd-platno a
   boli by neprimerane veľké oproti kroku 04. Obmedzením rastu (flex:0 1)
   a max-width ostanú v podobnej mierke ako 3 boxy v kroku 04, len
   vycentrované (justify-content:center je už na .jsd-platno). */
#jsdRam .jsd-mat{ flex:0 1 156px; }

@media (prefers-reduced-motion: reduce){ .jsd-cursor, .jsd-ripple{ display:none; } }

@media (max-width: 860px) {
  .wb-step__inner,
  .wb-step--reverse .wb-step__inner { grid-template-columns: 1fr; }
  /* Animácia/fotka VŽDY pod popisom - explicitné poradie na oboch
     stranách namiesto len "media: order:-1" (to dávalo médiá VŽDY
     hore, nezávisle od .wb-step--reverse variantu, kde je v DOM médium
     pred obsahom - tu teraz vyhráva poradie nastavené tu, nie zdrojové
     poradie v HTML). */
  .wb-step__content { order: 1; }
  .wb-step__media { order: 2; }
  .wb-step__media img { height: auto; aspect-ratio: 4 / 3; }
  .wb-step__media:has(.wb-step__anim) { height: auto; padding: 24px 0; }

  /* Kroky 2/3/4/5 (rozmer, pasparta, plátno, rám) centrujú svoj (kratší)
     obsah v štvorcovom boxe (aspect-ratio:1/1 zdedený z desktopu) -
     na mobile to nad aj pod skutočným obsahom necháva veľkú prázdnu
     medzeru. Krok 1 (motiv) tento problém nemá (mriežka 2×2 vyplní
     štvorec celý), preto sa ho netýka. Zrušením aspect-ratio na mobile
     sa výška animácie prispôsobí reálnemu obsahu namiesto vynúteného
     štvorca. */
  .jsd-rozmer,
  .jsd-pasparta,
  .jsd-platno {
    aspect-ratio: auto;
    width: 100%;
  }
}


/* HERO SLIDER - Domov teraz zdieľa presne ten istý slider ako /obchod/
   (.wb-shop-hero, Swiper.js - viď e-shop.css a archive-product.php).
   Predošlý samostatný .wb-hero-slider dizajn (vlastný fade+dots) je
   zámerne odstránený, aby oba slidery vyzerali jednotne. */

/* =========================================================
   ACCORDION - zdieľané prvky pre "Takto vzniká váš obraz"
   a "Časté otázky" (natívne <details>/<summary>).
   Flat, editorial list - deliči namiesto kariet s okrajom/tieňom.
========================================================= */

.wb-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--gs-200, #e6e6e5);
}

.wb-accordion__item {
  border-bottom: 1px solid var(--gs-200, #e6e6e5);
}

.wb-accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 2px;
  font-family: var(--wb-font, 'Oxanium', sans-serif);
  font-weight: 500;
  font-size: clamp(16px, 1.15vw, 19px);
  color: var(--gs-700, #41413f);
  transition: color .2s ease;
}
details.wb-accordion__item[open] > .wb-accordion__summary { color: var(--gs-950, #0b0b0a); }
.wb-accordion__summary::-webkit-details-marker { display: none; }
.wb-accordion__summary::marker { content: ""; }

.wb-accordion__label { flex: 1; }

.wb-accordion__index {
  flex: none;
  min-width: 40px;
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: var(--gs-400, #a5a5a1);
  transition: color .2s ease;
}
details.wb-accordion__item[open] > .wb-accordion__summary .wb-accordion__index { color: var(--bp-600, #da7605); }

.wb-accordion__icon {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
}
.wb-accordion__icon::before,
.wb-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gs-500, #747470);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .2s ease;
}
.wb-accordion__icon::before { width: 12px; height: 1.5px; }
.wb-accordion__icon::after  { width: 1.5px; height: 12px; }
details.wb-accordion__item[open] > .wb-accordion__summary .wb-accordion__icon::before,
details.wb-accordion__item[open] > .wb-accordion__summary .wb-accordion__icon::after {
  background: var(--bp-600, #da7605);
}
details.wb-accordion__item[open] > .wb-accordion__summary .wb-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.wb-accordion__content {
  padding: 0 2px 22px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .22s ease, transform .22s ease;
}
details.wb-accordion__item[open] > .wb-accordion__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .06s;
}
.wb-accordion__content p { margin: 0; }
.wb-accordion__content p + p { margin-top: 14px; }

.wb-accordion--steps .wb-accordion__content { padding-left: 56px; }

/* Skupina akordeónov (.js-accordion-group v HTML) - JS zabezpečí, že je
   naraz otvorená len jedna položka (viď script v domov.php) a pri procese
   navyše prepne aktívnu fotku (viď .wb-process__media). */

/* =========================================================
   PROCESS - Takto vzniká váš obraz, scoped na .wb-process
========================================================= */

.wb-process {
  font-family: var(--wb-font, 'Oxanium', sans-serif);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px);
}

.wb-process__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

.wb-process__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.wb-process__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

.wb-process__title { margin: 0; }

.wb-process__media {
  position: relative;
  min-width: 0;
  border-radius: var(--wb-radius, 22px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  background: var(--gs-200, #e6e6e5);
}
.wb-process__media-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.wb-process__media-img.is-active { opacity: 1; }

/* Bola 860px - o niečo užšia ako .wb-faq nižšie (980px), ktoré je v
   layoute hneď pod touto sekciou. Medzi 861-980px (bežná šírka
   tabletu) tak táto sekcia jediná ostávala v natesnanej dvojstĺpcovej
   desktopovej mriežke (1.62fr text : 1fr fotka), zatiaľ čo FAQ pod ňou
   sa už správne prepol na jeden stĺpec - odtiaľ "useknutá" fotka na
   tablete. Zjednotené na rovnakú hranicu ako .wb-faq. */
@media (max-width: 980px) {
  .wb-process__inner { grid-template-columns: 1fr; }
  .wb-process__media { order: -1; min-height: 260px; width: 100%; }
}

/* =========================================================
   FAQ - Časté otázky, scoped na .wb-faq
========================================================= */

.wb-faq {
  font-family: var(--wb-font, 'Oxanium', sans-serif);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px) clamp(32px, 4vw, 56px);
}

.wb-faq__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* zlatý rez - fotka : obsah ≈ 1 : 1.618 */
  grid-template-columns: 1fr 1.618fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.wb-faq__head {
  margin: 0 0 28px;
}

.wb-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

.wb-faq__title { margin: 0 0 18px; }
.wb-faq__text { margin: 0; }

.wb-faq__col { display: flex; flex-direction: column; min-width: 0; }

.wb-faq__media {
  position: sticky;
  top: 96px;
  min-width: 0;
  border-radius: var(--wb-radius, 22px);
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 3 / 4;
  background: var(--gs-200, #e6e6e5);
}
.wb-faq__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 980px) {
  .wb-faq__inner { grid-template-columns: 1fr; }
  .wb-faq__media { position: static; order: -1; aspect-ratio: 16 / 9; min-height: 240px; width: 100%; }

  /* .wb-faq--media-between (zatiaľ len frontend/pages/vlastny-obraz.php)
     - fotka nemá byť úplne navrchu, ale medzi popisom a otázkami.
     .wb-faq__col sa "rozpustí" (display:contents), takže jeho deti
     (head/akordeón) sa stanú priamymi položkami .wb-faq__inner vedľa
     fotky a dajú sa medzi sebou preusporiadať cez order. Ostatné
     stránky s [wb-faq] (bez tejto modifikátor triedy) sa nemenia. */
  .wb-faq--media-between .wb-faq__col { display: contents; }
  .wb-faq--media-between .wb-faq__head { order: 1; }
  .wb-faq--media-between .wb-faq__media { order: 2; margin-bottom: 8px; }
  .wb-faq--media-between .wb-accordion { order: 3; }
}


/* ============================================================
   REVIEWS CARDS (presunuté z components.php, Fáza 3)
   scoped na .wb-reviews-cards
   POZOR: @import url(Roboto) bol presunutý do root.css (vedľa
   Oxania), lebo @import musí byť prvé pravidlo v súbore.
============================================================ */

.wb-reviews-cards {
  --wb-brand-1:   #f69f10;
  --wb-black:     #1d1d1b;
  --wb-muted:     rgba(29, 29, 27, .68);
  --wb-card-bg:   var(--gs-50, #f9faf9);
  --wb-font-display: 'Oxanium', 'DM Sans', system-ui, sans-serif;

  font-family: var(--wb-font-display);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

/* Predtým plná sýta oranžová (#da7605) na pozadí aj orámovaní každej
   karty - vedľa zvyšku stránky (kde karty používajú neutrálne sivé
   orámovanie, napr. .payment_box/faq) to pôsobilo príliš výrazne/cudzo.
   Pozadie je teraz rovnaké neutrálne svetlosivé ako inde, orámovanie len
   jemný oranžový nádych (nízka opacity) namiesto plnej farby. */
.wb-review-card {
  background: var(--wb-card-bg);
  border: 1px solid rgba(218, 118, 5, .25);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wb-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 11, 10, .08);
}

.wb-review-card__quote {
  color: var(--wb-black);
  margin: 0;
  line-height: 0;
  transform: scaleY(-1);
}

.wb-review-card__text {
  margin: 0;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--wb-black);
}

.wb-review-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 11, 10, .1);
}

.wb-review-card__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(29, 29, 27, .12);
  overflow: hidden;
}
.wb-review-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-review-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: .01em;
  line-height: 1;
}

.wb-review-card__name {
  margin: 0;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  color: var(--wb-black);
}

.wb-review-card__date {
  margin: 0;
  font-size: .82rem;
  line-height: 1.2;
  color: var(--wb-muted);
}

@media (max-width: 980px) {
  .wb-reviews-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .wb-reviews-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   SHOWCASE - Naše realizácie (presunuté z components.php, Fáza 3)
   scoped na .wb-showcase
============================================================ */

.wb-showcase {
  --wb-brand-1:      #f69f10;
  --wb-black:        #1d1d1b;
  --wb-muted:        rgba(29, 29, 27, .68);
  --wb-font-display: 'Oxanium', 'DM Sans', system-ui, sans-serif;

  position: relative;
  font-family: var(--wb-font-display);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 6vw, 40px);
}

.wb-showcase__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.wb-showcase__head {
  margin: 0 0 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.wb-showcase__head-text { min-width: 0; max-width: 720px; }

.wb-showcase__eyebrow {
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
}

.wb-showcase__title {
  margin: 0 0 18px;
}

.wb-showcase__text {
  margin: 0;
}

.wb-showcase__nav {
  flex: none;
  display: none;
  gap: 12px;
}
.wb-showcase__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-brand-1);
  background: transparent;
  color: var(--wb-brand-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.wb-showcase__nav-btn:hover { background: var(--wb-brand-1); color: #fff; }
.wb-showcase__nav-btn:disabled { opacity: .35; cursor: default; background: none; color: var(--wb-brand-1); }
.wb-showcase__nav-btn--prev svg { transform: scaleX(-1); }

.wb-showcase__gallery-wrap {
  position: relative;
}

.wb-showcase__gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wb-showcase__gallery::-webkit-scrollbar { display: none; }

.wb-showcase__item {
  flex: none;
  width: 260px;
}
.wb-showcase__item img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 16px;
}

.wb-showcase__footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.wb-showcase__cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px 12px;
  border-radius: 6px;
  background: var(--wb-accent-brown);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.wb-showcase__cta:hover { background: var(--wb-accent-brown-hover); opacity: 1; }

@media (min-width: 640px) {
  .wb-showcase__nav { display: flex; }
}

@media (max-width: 640px) {
  .wb-showcase__item { width: 220px; }
  .wb-showcase__item img { height: 280px; }

  /* Na mobile nie sú šípky (nav sa skrýva pod 640px, viď vyššie) a
     galéria sa posúva prstom - pravý okraj preto nesmie vyzerať
     "useknuto". Na tablete/desktope šípky jasne naznačujú, že galéria
     pokračuje ďalej, takže tento prekryv tam nemá čo robiť - žije
     výhradne v tomto istom (max-width:640px) bloku.

     Zámerne BEZ backdrop-filter/blur - rozmazaná "hmla" bola priveľmi
     nápadná (vyzerala ako viditeľný smog/škvrna na fotke namiesto
     jemného prechodu). Obyčajný farebný gradient do pozadia sekcie,
     bez ostrého okraja masky, pôsobí prirodzenejšie - fotka sa akoby
     sama "stráca" smerom k okraju, väčšina prechodu je takmer
     nebadateľná a len posledný kúsok pri okraji naznačí, že tam
     obsah pokračuje mimo viditeľnú oblasť. */
  .wb-showcase__gallery-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 12px;
    width: 72px;
    pointer-events: none;
    background: linear-gradient(
      to right,
      transparent,
      rgba(249, 250, 249, .35) 60%,
      var(--gs-50, #f9faf9) 92%
    );
  }
}


/* ============================================================
   CTA - tmavá výzva k akcii (presunuté z components.php, Fáza 3)
   scoped na .wb-cta
   Referenčné plátno návrhu: 1440 x 374 px
============================================================ */

.wb-cta {
  --wb-brand-1:      #da7605;
  --wb-cta-bg:       #0b0b0a;
  --wb-cta-text:     #ffffff;
  --wb-cta-btn:      var(--wb-accent-brown, #894c29);
  --wb-cta-btn-hover:var(--wb-accent-brown-hover, #743e20);
  --wb-font-display: 'Oxanium', 'DM Sans', system-ui, sans-serif;

  font-family: var(--wb-font-display);
  padding: 0 clamp(20px, 6vw, 40px) clamp(32px, 4vw, 56px);
}

/* Centrovaný na rovnaký max-width ako ostatné sekcie (1280px) - na veľmi
   širokých obrazovkách tak čierny tvar sedí presne pod textom ostatných
   sekcií namiesto toho, aby bol "zarovnaný doľava" voči centrovanému obsahu. */
.wb-cta__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.wb-cta__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.wb-cta__content {
  position: relative;
  z-index: 1;
  /* 70% na tablet šírkach (641-1200px) nechávalo cca tretinu tmavej
     plochy úplne prázdnu (žiadny text ani tvar tam nesiaha) - sekcia
     tak vyzerala len na "pól obrazovky". 640px strop pre široké
     desktopy ostáva rovnaký. */
  max-width: min(88%, 640px);
  padding: clamp(28px, 5%, 40px) clamp(28px, 8%, 64px) clamp(28px, 6%, 52px) clamp(24px, 6vw, 40px);
}

.wb-cta__eyebrow {
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
}

.wb-cta__title {
  margin: 0 0 18px;
  color: var(--wb-cta-text);
}

.wb-cta__text {
  margin: 0 0 2%;
  color: var(--wb-cta-text);
}

.wb-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wb-cta-btn);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  padding: 16px 26px;
  border-radius: 6px;
  transition: background .2s ease, transform .2s ease;
}
.wb-cta__button:hover { background: var(--wb-cta-btn-hover); opacity: 1; }
.wb-cta__button:active { transform: scale(.98); }

/* --- varianta "brand" (.wb-cta--brand) --------------------------
   Rovnaký štýl ako .wb-btn--brand (bp-800, hover len zväčší ikonu,
   nie farbu) - zapína sa cez [wb-cta variant="brand"], zatiaľ len na
   frontend/pages/vlastny-obraz.php. Ostatné stránky s [wb-cta] (bez
   tohto atribútu) zostávajú na pôvodnom --wb-cta-btn/šípke. */
.wb-cta--brand .wb-cta__button {
  gap: 8px;
  padding: 12px 32px;
  background: var(--bp-800);
  font-weight: 600;
  font-size: 16px;
}
.wb-cta--brand .wb-cta__button:hover { background: var(--bp-800); }
.wb-cta--brand .wb-cta__button svg { transition: transform .2s ease; }
.wb-cta--brand .wb-cta__button:hover svg { transform: scale(1.333); }

/* Tablet (641-1200px) - rovnaký tvar ako desktop (SVG asymetricky
   zaoblený roh sa NEnahrádza, na rozdiel od mobilu nižšie), len bez
   ľavého paddingu sekcie - .wb-cta__inner tak siaha presne k ľavému
   okraju. Textový obsah zostáva zarovnaný rovnako ako na ostatných
   sekciách vďaka vlastnému ľavému paddingu .wb-cta__content (nemení sa
   tu, dedí sa z desktop pravidla vyššie). */
@media (min-width: 641px) and (max-width: 1200px) {
  .wb-cta { padding-left: 0; }
}

/* Mobil - svg tvar so scale non-uniform (preserveAspectRatio="none")
   sa pri tomto pomere stránky citeľne deformuje, preto nahrádzame
   jednoduchým zaobleným pravouholníkom namiesto natiahnutého tvaru
   z Figma. */
@media (max-width: 640px) {
  .wb-cta { padding: 0 clamp(16px, 5vw, 24px) 32px; }
  .wb-cta__shape { display: none; }
  .wb-cta__inner {
    background: var(--wb-cta-bg);
    /* oproti ostatným kartám na stránke (20-22px) by 32px pôsobilo
       nápadne veľké zaoblenie - zjednocujeme na rovnakú hodnotu ako
       napr. .wb-story__media img. */
    border-radius: 20px;
  }
  .wb-cta__content {
    max-width: none;
    padding: 28px 22px;
  }
  .wb-cta__button { width: 100%; justify-content: center; }
}


/* ============================================================
   MOTIFS - mriežka produktov/motívov (presunuté z components.php,
   Fáza 3; aktuálne nikde nepoužité, zatiaľ pripravená komponenta)
   scoped na .wb-motifs
============================================================ */

.wb-motifs {
  --wb-brand-1:      var(--bp-500, #f69f10);
  --wb-brand-2:      var(--bp-600, #da7605);
  --wb-black:        var(--gs-900, #1d1d1b);
  --wb-muted:        rgba(29, 29, 27, .68);
  --wb-font-display: var(--wb-font, 'Oxanium', sans-serif);

  position: relative;
  font-family: var(--wb-font-display);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 6vw, 40px);
}

.wb-motifs__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.wb-motifs__head {
  max-width: 720px;
  margin: 0 0 32px;
}

.wb-motifs__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--bp-500, #f69f10);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}

.wb-motifs__title { margin: 0 0 18px; }
.wb-motifs__text { margin: 0; }

.wb-motifs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Rovnaká karta ako v obchode (archive-product.php / e-shop.css
   ul.products li.product) - rovnaký radius, pomer fotky aj hover
   správanie (tlačidlo "Konfigurovať" vysúvajúce sa spod fotky),
   nie vlastný "lift" efekt karty. */
.wb-motif-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--gs-50, #f9faf9);
}

.wb-motif-card__frame {
  position: relative;
  overflow: hidden;
}

.wb-motif-card__media {
  aspect-ratio: 24 / 32;
  background: var(--gs-200, #e6e6e5);
}
.wb-motif-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wb-motif-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--wb-muted);
  font-size: .85rem;
  text-align: center;
}

/* tlačidlo - "vysunutie" spod fotky, orezané cez overflow:hidden na
   .wb-motif-card__frame, presne ako .wb-product-card__cta v obchode */
.wb-motif-card__cta {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--wb-brand-1, #f69f10);
  color: var(--gs-950, #0b0b0a);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transform: translateY(100%);
  transition: transform .25s ease;
  pointer-events: none;
}
.wb-motif-card:hover .wb-motif-card__cta {
  transform: translateY(0);
  pointer-events: auto;
}

.wb-motif-card__cat {
  margin: 16px 16px 4px;
  color: var(--wb-brand-2);
  font-size: 1rem;
}
.wb-motif-card__name {
  margin: 0 16px 16px;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--gs-950, #0b0b0a);
}

.wb-motifs__cta {
  margin: 32px 0 0;
  text-align: center;
}
.wb-motifs__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wb-brand-1);
  font-weight: 700;
  text-decoration: underline;
  transition: opacity .2s ease;
}
.wb-motifs__link:hover { opacity: .75; }

@media (max-width: 980px) {
  .wb-motifs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wb-motifs__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   SHOP PRODUCTS - homepage sekcia "Ponuka obrazov" (presunuté
   z components.php, Fáza 3)
   scoped na .wb-shop-products
============================================================ */

.wb-shop-products {
  --wb-brand-1: var(--bp-500, #f69f10);
  --wb-black:   var(--gs-900, #1d1d1b);
  --wb-font-display: var(--wb-font, 'Oxanium', sans-serif);

  position: relative;
  font-family: var(--wb-font-display);
  padding: clamp(32px, 4vw, 56px) clamp(20px, 6vw, 40px);
}
.wb-shop-products__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.wb-shop-products__head {
  max-width: 720px;
  margin: 0 0 32px;
}
.wb-shop-products__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  color: var(--wb-brand-1);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .03em;
}
.wb-shop-products__title { margin: 0 0 18px; }
.wb-shop-products__text { margin: 0; }

.wb-shop-products .wb-shop-content {
  padding: 0;
}

.wb-shop-products__cta {
  margin: 32px 0 0;
  text-align: center;
}
.wb-shop-products__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wb-brand-1);
  font-weight: 700;
  text-decoration: underline;
  transition: opacity .2s ease;
}
.wb-shop-products__link:hover { opacity: .75; }

/* =========================================================
   404 - Stránka nenájdená (presunuté z inline <style> v 404.php)
========================================================= */

.custom-404 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-100);
    color: var(--wb-black);
    padding: 80px 20px;
}

.custom-404 .container {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}

.custom-404 .code {
    font-size: 8rem;
    line-height: 1;
    font-family: var(--wb-font);
    color: var(--wb-brand-1);
    margin-bottom: 1rem;
}

.custom-404 .line {
    width: 80px;
    height: 1px;
    background: var(--gs-200);
    margin: 0 auto 2rem;
}

.custom-404 h1 {
    font-family: var(--wb-font);
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--wb-black);
}

.custom-404 p {
    color: var(--gs-500);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.custom-404 .btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--wb-brand-1);
    color: var(--gs-50);
    text-decoration: none;
    border-radius: 999px;
    transition: all .25s ease;
}

.custom-404 .btn:hover {
    background: var(--wb-brand-1-hover);
    color: var(--gs-50);
}


/* =========================================================
   VLASTNÝ OBRAZ - frontend/pages/vlastny-obraz.php
   (Figma node 493:4104) - komponenty použité len na tejto stránke.
========================================================= */

/* --- HERO - fotka na celú šírku, panel s textom sa "vytráca"
   sprava (gradient), aby bola vpravo vidieť fotku produktu. ------ */
.wb-photo-hero {
  position: relative;
  min-height: 362px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.wb-photo-hero__media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.wb-photo-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(218, 118, 5, .11), rgba(0, 0, 0, 0));
}
.wb-photo-hero__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(24px, 4vw, 40px) clamp(24px, 7vw, 100px);
  padding-right: clamp(200px, 30vw, 430px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(to right, var(--gs-50) 0%, rgba(249, 250, 249, 0) 100%);
}
.wb-photo-hero__title { margin: 0; }
.wb-photo-hero__subtitle { margin: 0; }
.wb-photo-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 860px) {
  /* vyššia sekcia, panel s textom stlačený až nadol - navrchu tak
     ostáva viditeľný pruh fotky (predtým panel siahal cez celú výšku
     a fotku úplne prekryl plnou bielou). Prechod bielej je teraz
     zhora nadol (rovnaký princíp ako gradient sprava na desktope). */
  .wb-photo-hero { min-height: 480px; }
  .wb-photo-hero__panel {
    padding-right: clamp(24px, 7vw, 100px);
    background: linear-gradient(to bottom, rgba(249, 250, 249, 0) 0%, var(--gs-50) 40%);
  }
}

@media (max-width: 480px) {
  /* na úzkom telefóne sa 2 tlačidlá vedľa seba už nezmestia bez
     stláčania textu - preložíme ich pod seba na celú šírku */
  .wb-photo-hero { min-height: 560px; }
  .wb-photo-hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .wb-photo-hero__actions .wb-btn { justify-content: center; }
  /* ručný zalom v podnadpise je zámerný len pre desktop šírku textu -
     na mobile by prvý riadok pôsobil neprirodzene krátky */
  .wb-photo-hero__subtitle br { display: none; }

  /* väčší vertikálny padding na telefóne pre všetky tlačidlá v tomto
     štýle na stránke (hero, "Kontrola pred tlačou", posledná CTA). */
  .wb-btn--brand,
  .wb-btn--outline,
  .wb-cta--brand .wb-cta__button {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* väčšie, výraznejšie CTA tlačidlá - VÝLUČNE na vlastny-obraz.php
   (trieda z body_class() v šablóne), aby sa nezmenili rovnaké
   tlačidlá inde (napr. .wb-btn--brand na právnych stránkach). */
.wb-page-vlastny-obraz .wb-btn--brand,
.wb-page-vlastny-obraz .wb-btn--outline,
.wb-page-vlastny-obraz .wb-cta--brand .wb-cta__button {
  padding: 18px 44px;
  font-size: 18px;
}
@media (max-width: 480px) {
  .wb-page-vlastny-obraz .wb-btn--brand,
  .wb-page-vlastny-obraz .wb-btn--outline,
  .wb-page-vlastny-obraz .wb-cta--brand .wb-cta__button {
    padding: 20px 32px;
  }
}

/* --- INTRO - "Z fotografie, ktorú máte radi..." (text + 2 fotky
   cez seba). --------------------------------------------------- */
.wb-photo-intro {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px);
}
.wb-photo-intro__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.wb-photo-intro__content { flex: 1 1 0; min-width: 0; }
.wb-photo-intro__content > * + * { margin-top: 12px; }
.wb-photo-intro__head > * + * { margin-top: 8px; }
.wb-photo-intro__title { margin: 0; }
.wb-photo-intro__text { margin: 0; max-width: 565px; }

/* Rozmery/pozície oboch fotiek sú v % voči kontajneru (nie pevné px) -
   aspect-ratio drží pomer strán 478:444 pri akejkoľvek šírke, takže sa
   kompozícia plynulo zmenšuje na tablete/mobile namiesto orezania. */
.wb-photo-intro__media {
  position: relative;
  flex: none;
  width: 478px;
  max-width: 100%;
  aspect-ratio: 478 / 444;
}
.wb-photo-intro__media img {
  position: absolute;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.wb-photo-intro__media img:first-child { top: 0;     left: 0;     width: 65.5%; height: 85.6%; }
.wb-photo-intro__media img:last-child  { top: 18.5%; left: 44.8%; width: 55.2%; height: 81.5%; }

@media (max-width: 980px) {
  .wb-photo-intro__inner { flex-direction: column; }
  .wb-photo-intro__media { width: 100%; max-width: 478px; }
}

@media (max-width: 599px) {
  /* na telefóne len 1 fotka (bez druhej cez seba), zarovnaná na stred */
  .wb-photo-intro__media {
    position: static;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 313 / 380;
    margin: 0 auto;
  }
  .wb-photo-intro__media img:last-child { display: none; }
  .wb-photo-intro__media img:first-child {
    position: static;
    width: 100%;
    height: 100%;
  }
}

/* --- QUICKSTEPS - "Od fotografie k hotovému obrazu v 5
   jednoduchých krokoch" (4-stĺpcová mriežka, 2. a 4. stĺpec
   posunutý nižšie). ---------------------------------------------- */
.wb-quicksteps {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px);
}
.wb-quicksteps__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.wb-quicksteps__title { margin: 0; max-width: 827px; text-align: center; }
.wb-quicksteps__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.wb-quicksteps__item:nth-child(2n) { margin-top: 36px; }
/* flex + gap namiesto margin reťaze - rovnaké ako vo Figme
   (obrázok / textový blok / odkaz, každý po 12px od seba, viď node
   493:4126) a odolné voči budúcim margin:0 prepisom na potomkoch. */
.wb-quicksteps__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wb-quicksteps__media {
  display: block;
  width: 100%;
  aspect-ratio: 302 / 306;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.wb-quicksteps__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.wb-quicksteps__item-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.5;
  color: var(--wb-black);
}
.wb-quicksteps__item-text {
  margin: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--wb-black);
}
.wb-quicksteps__link { margin: 0; }

@media (max-width: 980px) {
  .wb-quicksteps__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .wb-quicksteps__item:nth-child(2n) { margin-top: 0; }
}
@media (max-width: 599px) {
  /* row-gap 40px bol odladený pre 2-stĺpcový tablet (medzera medzi
     pármi krokov) - v 1 stĺpci medzi každým krokom pôsobil zbytočne
     veľký, zúžené na rovnakú hodnotu ako gap medzi ostatnými sekciami. */
  .wb-quicksteps__grid { grid-template-columns: 1fr; row-gap: 32px; }
}

/* --- PHOTO SPLIT - jedna fotka + text, znovupoužiteľné pre
   "Stačí vám iba jedna fotografia" (--reverse dá fotku doprava). - */
.wb-photo-split {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px);
}
.wb-photo-split__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.wb-photo-split--reverse .wb-photo-split__inner { flex-direction: row-reverse; }
.wb-photo-split__media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 488 / 380;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.wb-photo-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-photo-split__content {
  flex: none;
  width: 752px;
  max-width: 100%;
}
.wb-photo-split__content > * + * { margin-top: 12px; }
.wb-photo-split__head > * + * { margin-top: 8px; }
.wb-photo-split__title { margin: 0; }
.wb-photo-split__text { margin: 0; max-width: 565px; }
.wb-photo-split__label {
  margin: 0;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.5;
  color: var(--wb-black);
}

@media (max-width: 980px) {
  .wb-photo-split__inner,
  .wb-photo-split--reverse .wb-photo-split__inner { flex-direction: column; }
  .wb-photo-split__media { flex: none; width: 100%; }
  .wb-photo-split__content { width: 100%; }
}

/* podporované formáty - pilulky (.PNG .JPG ...) */
.wb-format-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.wb-format-pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--gs-100);
  border: 1px solid var(--bp-500);
  border-radius: 4px;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .25);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--wb-black);
}

/* --- BENEFITS - "O kvalitu fotografie sa postaráme ešte pred
   výrobou" (text+CTA vľavo, checklist vpravo). ------------------- */
.wb-benefits {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 40px);
}
.wb-benefits__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
/* flex + gap namiesto margin reťaze - .wb-benefits__title/__text mali
   vlastné "margin:0" pravidlo v rovnakej špecifickosti ako
   ".wb-benefits__content > * + *", ktoré ho (kvôli poradiu v súbore)
   prepisovalo na 0 a medzera medzi podnadpisom a textom tak zmizla.
   flex+gap tomuto druhu konfliktu nepodlieha (viď aj .wb-quicksteps). */
.wb-benefits__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* NIE flex+gap - .wb-eyebrow má vlastný margin-bottom:8px (root.css) a
   v bežnom blokovom toku sa s margin-top nižšie správne "collapsne" na
   8px; vo flexe by sa margin+gap sčítali na 16px (viď wb-photo-intro__head/
   wb-photo-split__head, ktoré z rovnakého dôvodu tiež nie sú flex). */
.wb-benefits__head > * + * { margin-top: 8px; }
.wb-benefits__title { margin: 0; }
.wb-benefits__text { margin: 0; max-width: 565px; }

.wb-checklist {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wb-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.wb-checklist__icon {
  flex: none;
  margin-top: 6px;
  color: var(--bp-500);
}
.wb-checklist__item-title {
  margin: 0;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.5;
  color: var(--wb-black);
}
.wb-checklist__item-text {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--wb-black);
}

@media (max-width: 980px) {
  .wb-benefits__inner { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  /* tlačidlo na celú šírku, rovnaká medzera od textu nad ním ako od
     checklistu pod ním (predtým 12px hore / 40px dole - nesymetrické) -
     .wb-benefits__content má gap:12px medzi všetkými prvkami, preto tu
     dopĺňame len rozdiel do rovnakých 48px na oboch stranách. */
  .wb-benefits .wb-btn--brand {
    align-self: stretch;
    justify-content: center;
    margin-top: 36px;
  }
  .wb-benefits__inner { row-gap: 48px; }
}

/* --- FAQ akordeón (.wb-faq zdieľaný s domov.php) - varianta s
   väčším písmom otázky, bez čísla kroku. -------------------------- */
.wb-accordion--faq .wb-accordion__label {
  font-weight: 400;
  font-size: clamp(18px, 4vw, 25px);
}
.wb-accordion--faq .wb-accordion__content p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--wb-black);
}