/* ==========================================================================
   BIS Audio x Bang & Olufsen - dizajn systém
   Preklad Lovable návrhu (Tailwind v4 + tokeny) do klasického CSS.
   Monochromatická editorial báza (takmer čierna / teplá off-white),
   B&O modrá výhradne ako akcent (pásy, linky, focus).
   ========================================================================== */

/* --- Fonty -----------------------------------------------------------------
   Lovable používa "Jost". B&O originál používa "BeoSupreme" (bez diakritiky).
   Keďže potrebujeme slovenskú diakritiku, primárny je Poppins (aktuálny web),
   BeoSupreme necháme pripravený v stacku pre budúce nasadenie s dokompletovanou
   diakritikou. Poppins sa načítava už v layout.html.
--------------------------------------------------------------------------- */

:root {
  /* Základné plochy */
  --bo-background: #fbfbf9;            /* teplá off-white */
  --bo-foreground: #24262d;            /* takmer čierna, jemne modrastá */
  --bo-secondary: #f2f2ef;             /* svetlé pozadie kariet */
  --bo-sand: #ece7dd;                  /* teplé béžové (sand) — sekčné plochy */
  --bo-muted: #f2f2ef;
  --bo-muted-foreground: #77787d;      /* stlmený text */
  --bo-accent: #ededea;
  --bo-border: #e6e6e2;
  --bo-input: #e6e6e2;

  /* Tmavá editorial plocha (hero, banery, footer pás) */
  --bo-ink: #1c1e24;
  --bo-ink-foreground: #f6f6f4;

  /* Bang & Olufsen nová modrá - iba ako signálny akcent */
  --bo-blue: rgb(6, 13, 170);
  --bo-blue-foreground: #fbfbf9;

  --bo-ring: #2f4bb0;

  /* Font stacky */
  --bo-font-sans: "Jost", ui-sans-serif, system-ui, sans-serif;
  --bo-font-display: "Jost", ui-sans-serif, system-ui, sans-serif;

  /* Rádiusy */
  --bo-radius: 0.25rem;
}

/* --- Base ------------------------------------------------------------------ */

body.bo-theme {
  background-color: var(--bo-background);
  color: var(--bo-foreground);
  font-family: var(--bo-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Jost na celý web — vrátane formulárových prvkov a tlačidiel */
body.bo-theme,
body.bo-theme input,
body.bo-theme select,
body.bo-theme textarea,
body.bo-theme button,
body.bo-theme .btn,
body.bo-theme h1, body.bo-theme h2, body.bo-theme h3,
body.bo-theme h4, body.bo-theme h5, body.bo-theme h6 {
  font-family: var(--bo-font-sans);
}

body.bo-theme h1,
body.bo-theme h2,
body.bo-theme h3 {
  font-family: var(--bo-font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* --- Utility triedy (preklad @utility z Lovable) --------------------------- */

.bo-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bo-muted-foreground);
}

.bo-link-accent {
  color: var(--bo-blue);
  text-underline-offset: 4px;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/* Pill CTA - základ */
.bo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Svetlé pozadie (tmavý text/okraj) */
.bo-pill-light {
  border: 1px solid rgba(246, 246, 244, 0.7);
  color: var(--bo-ink-foreground);
  background-color: transparent;
}
.bo-pill-light:hover,
.bo-pill-light:focus {
  background-color: var(--bo-ink-foreground);
  color: var(--bo-ink);
}

/* Tmavé CTA pre svetlé plochy */
.bo-pill-dark {
  border: 1px solid rgba(36, 38, 45, 0.4);
  color: var(--bo-foreground);
  background-color: transparent;
}
.bo-pill-dark:hover,
.bo-pill-dark:focus {
  background-color: var(--bo-foreground);
  color: var(--bo-background);
  border-color: var(--bo-foreground);
}

/* B&O modrý signálny CTA - modrá až na hover (pre tmavé/obrazové plochy) */
.bo-pill-blue {
  border: 1px solid var(--bo-ink-foreground);
  background-color: transparent;
  color: var(--bo-ink-foreground);
}
.bo-pill-blue:hover,
.bo-pill-blue:focus {
  background-color: var(--bo-blue);
  border-color: var(--bo-blue);
  color: var(--bo-blue-foreground);
}

/* B&O modrý CTA pre svetlé plochy - tmavý text/okraj, modrá na hover */
.bo-pill-blue-light {
  border: 1px solid var(--bo-foreground);
  background-color: transparent;
  color: var(--bo-foreground);
}
.bo-pill-blue-light:hover,
.bo-pill-blue-light:focus {
  background-color: var(--bo-blue);
  border-color: var(--bo-blue);
  color: var(--bo-blue-foreground);
}

/* --- Pomocné farebné plochy ------------------------------------------------ */
.bo-bg-ink { background-color: var(--bo-ink); color: var(--bo-ink-foreground); }
.bo-bg-blue { background-color: var(--bo-blue); color: var(--bo-blue-foreground); }
.bo-bg-secondary { background-color: var(--bo-secondary); }
.bo-text-muted { color: var(--bo-muted-foreground); }

/* ==========================================================================
   HEADER - B&O slide-in navigácia (podľa BoNav.tsx)
   ========================================================================== */

/* Prepíšeme starú fixnú navbar výšku, aby náš header sadol na vrch */
body.bo-theme {
  /* header je fixný a priehľadný nad hero, obsah nezačína paddingom hore
     (hero je tmavé a header naň nalieha). Ostatné stránky bez hero dostanú
     odsadenie cez .bo-has-solid-header nižšie, ak bude treba. */
}

.bo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  color: var(--bo-ink-foreground);
}

/* Nad hero: priehľadné, svetlý (biely) obsah */
.bo-header.is-light {
  background-color: transparent;
  color: var(--bo-ink-foreground);
}

/* Po scrolle alebo pri otvorenom menu: solídne svetlé pozadie, tmavý text */
.bo-header.is-solid {
  background-color: rgba(251, 251, 249, 0.95);
  color: var(--bo-foreground);
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 1px 0 var(--bo-border);
}

.bo-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}
@media (min-width: 768px) {
  .bo-header__inner { padding: 1rem 2rem; }
}

/* Ľavá strana - hamburger */
.bo-header__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-size: 0.875rem;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.bo-header__menu-btn:hover { opacity: 1; }
.bo-header__menu-btn svg { width: 20px; height: 20px; }
.bo-header__menu-label { display: none; }
@media (min-width: 640px) { .bo-header__menu-label { display: inline; } }

/* Logo v strede — dvojica SVG (hlavné B&O + 1925) vertikálne, ako Lovable */
.bo-header__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0;
}
.bo-header__logo-main { height: 13px; width: auto; display: block; }
.bo-header__logo-1925 { height: 5px; width: auto; display: block; margin-top: 4px; }
@media (max-width: 767px) {
  .bo-header__logo-main { height: 9px; }
  .bo-header__logo-1925 { height: 4px; margin-top: 3px; }
}
@media (min-width: 768px) {
  .bo-header__logo-main { height: 15px; }
  .bo-header__logo-1925 { height: 6px; }
}
/* SVG sú biele — nad hero (is-light) ostávajú biele, v is-solid invert na tmavé */
.bo-header.is-solid .bo-header__logo-main,
.bo-header.is-solid .bo-header__logo-1925 { filter: brightness(0); }

/* Pravé ikony */
.bo-header__icons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  opacity: 0.95;
}
.bo-header__icons a,
.bo-header__icons button {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}
.bo-header__icons svg { width: 22px; height: 22px; }
/* ikona košíka (iconcart.html) má pevný čierny stroke - prepíšeme na currentColor */
.bo-header__icons .opencart svg path { stroke: currentColor; }
.bo-header__icons .opencart > a { position: relative; color: inherit; }
.bo-header__icons .opencart .basketcount {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--bo-blue);
  color: var(--bo-blue-foreground);
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.bo-header__icon-hide-sm { display: none; }
@media (min-width: 640px) { .bo-header__icon-hide-sm { display: inline-flex; } }

/* --- Slide-in panel -------------------------------------------------------- */
.bo-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(28, 30, 36, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bo-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.bo-menu-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1045;
  width: 100%;
  max-width: 48rem;
  background-color: var(--bo-background);
  color: var(--bo-foreground);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
}
.bo-menu-panel.is-open { transform: translateX(0); }

.bo-menu-panel__scroll {
  width: 100%;
  overflow-y: auto;
  padding: 6rem 0 2.5rem;
}
@media (min-width: 768px) {
  .bo-menu-panel__scroll { display: flex; }
}

.bo-menu-groups {
  list-style: none;
  margin: 0;
  padding: 0 1.5rem;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .bo-menu-groups {
    width: 16rem;
    border-right: 1px solid var(--bo-border);
    padding: 0 2rem;
  }
}

.bo-menu-group__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  padding: 0.75rem 0;
  font: inherit;
  font-size: 1.25rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.bo-menu-group__btn:hover { opacity: 1; }
.bo-menu-group.is-active > .bo-menu-group__btn { opacity: 1; }
.bo-menu-group__btn .bo-chevron { width: 16px; height: 16px; }
@media (min-width: 768px) { .bo-menu-group__btn .bo-chevron { display: none; } }

/* mobilné rozbalenie podskupiny */
.bo-menu-group__items {
  list-style: none;
  margin: 0;
  padding: 0 0 1rem 0.25rem;
  color: var(--bo-muted-foreground);
  display: none;
}
.bo-menu-group.is-active .bo-menu-group__items { display: block; }
@media (min-width: 768px) {
  .bo-menu-group__items { display: none !important; }
}
.bo-menu-group__items li { padding: 0.375rem 0; }
.bo-menu-group__items a { color: inherit; text-decoration: none; }
.bo-menu-group__items a:hover { color: var(--bo-foreground); }

.bo-menu-groups__aux {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--bo-muted-foreground);
}
.bo-menu-groups__aux a { display: block; color: inherit; text-decoration: none; padding: 0.25rem 0; }
.bo-menu-groups__aux a:hover { color: var(--bo-foreground); }

/* pravá strana panelu - detail vybranej skupiny (desktop) */
.bo-menu-detail {
  display: none;
  flex: 1;
  padding: 0 2.5rem;
}
@media (min-width: 768px) {
  .bo-menu-detail { display: block; }
}
.bo-menu-detail__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  font-size: 1.125rem;
}
.bo-menu-detail__list li { margin-bottom: 0.75rem; }
.bo-menu-detail__list a {
  display: inline-block;
  color: var(--bo-muted-foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bo-menu-detail__list a:hover { color: var(--bo-foreground); }
/* jednotlivé detail bloky prepíname podľa aktívnej skupiny cez JS */
.bo-menu-detail__group { display: none; }
.bo-menu-detail__group.is-active { display: block; }

/* zamknutie scrollu tela pri otvorenom menu */
body.bo-menu-open { overflow: hidden; }

/* Podstránky bez hero: fixný solídny header — odsadenie rieši body.bo-no-hero nižšie */
body.bo-no-hero { padding-top: 3.5rem; }

/* ==========================================================================
   FOOTER - podľa Lovable index.tsx
   ========================================================================== */

.bo-footer {
  padding: 3.5rem 1.5rem;
  background-color: var(--bo-background);
  color: var(--bo-foreground);
}
@media (min-width: 768px) { .bo-footer { padding: 3.5rem; } }

.bo-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  font-size: 0.875rem;
}
/* na úzkych mobiloch kontakt aj podpora cez celú šírku (dlhé texty) */
.bo-footer__col--contact,
.bo-footer__col--support { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .bo-footer__grid { grid-template-columns: repeat(4, 1fr); }
  .bo-footer__col--contact,
  .bo-footer__col--support { grid-column: auto; }
}

.bo-footer__col-title { /* používa .bo-eyebrow */ margin: 0 0 1rem; }
.bo-footer__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.bo-footer__list li { margin-bottom: 0.5rem; }
.bo-footer__list a {
  color: var(--bo-muted-foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bo-footer__list a:hover { color: var(--bo-foreground); }

.bo-footer__contact { margin-top: 1rem; font-size: 0.875rem; color: var(--bo-muted-foreground); line-height: 1.7; }
.bo-footer__contact a { color: inherit; text-decoration: none; }
.bo-footer__contact a:hover { color: var(--bo-foreground); }

.bo-footer__socials { list-style: none; display: flex; gap: 0.75rem; padding: 0; margin: 1rem 0 0; }
.bo-footer__socials a { display: inline-flex; }
.bo-footer__socials img { width: 20px; height: 20px; }

/* Modrý B&O pás */
.bo-footer-bar {
  background-color: var(--bo-blue);
  color: var(--bo-blue-foreground);
  padding: 2.5rem 1.5rem;
}
@media (min-width: 768px) { .bo-footer-bar { padding: 2.5rem 3.5rem; } }
.bo-footer-bar__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bo-footer-bar__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.bo-footer-bar__copy { font-size: 0.75rem; opacity: 0.9; margin: 0; }
.bo-footer-bar__logo { height: 45px; width: auto; opacity: 0.95; }
/* biele logo na modrom páse - ak je logo tmavé, invertujeme */
.bo-footer-bar__logo { filter: brightness(0) invert(1); }

/* logo + "est. 1925" vertikálne pod sebou (ako v headeri) */
.bo-footer-bar__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  align-self: flex-start;
}
/* SVG "1925" je už biele -> žiadny invert, len opacita ako logo */
.bo-footer-bar__logo-1925 { height: 9px; width: auto; opacity: 0.95; display: block; }
@media (min-width: 768px) {
  .bo-footer-bar__logo-wrap { align-self: auto; align-items: flex-end; }
}

/* ==========================================================================
   HERO SLIDER - full-screen fade slider (podľa Lovable HeroSlider)
   Napojené na reálne dáta data.view[] z betaeditoru.
   ========================================================================== */

.bo-hero {
  position: relative;
  width: 100%;
  height: 94vh;
  min-height: 620px;
  overflow: hidden;
  background-color: var(--bo-ink);
}

.bo-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-out;
}
.bo-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.bo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 7s ease-out;
}
.bo-hero__slide.is-active .bo-hero__img { transform: scale(1.05); }

/* ľavý tmavý gradient pre čitateľnosť textu (silnejší, ako Lovable) */
.bo-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28,30,36,0.82) 0%, rgba(28,30,36,0.45) 40%, rgba(28,30,36,0.05) 75%, rgba(28,30,36,0) 100%);
}

.bo-hero__content {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem;
}
@media (min-width: 768px) { .bo-hero__content { padding: 0 3.5rem; } }

.bo-hero__text {
  max-width: 34rem;
  color: var(--bo-ink-foreground);
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
}
.bo-hero__slide.is-active .bo-hero__text {
  transform: translateY(0);
  opacity: 1;
}

.bo-hero__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 246, 244, 0.7);
  margin: 0 0 1rem;
}
.bo-hero__title {
  font-size: 2.75rem;
  line-height: 1.05;
  margin: 0;
}
@media (min-width: 768px) { .bo-hero__title { font-size: 4rem; } }
@media (min-width: 1280px) { .bo-hero__title { font-size: 4.5rem; } }
.bo-hero__desc {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  opacity: 0.88;
  line-height: 1.5;
}
@media (min-width: 768px) { .bo-hero__desc { font-size: 1.25rem; } }
.bo-hero__cta-wrap { margin-top: 2rem; }
.bo-hero__cta svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.bo-hero__cta:hover svg { transform: translateX(4px); }

/* Dolný ovládací riadok: šípka — čiarky — šípka, vycentrované dole */
.bo-hero__controls {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 3;
}

/* Šípky */
.bo-hero__arrow {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(246, 246, 244, 0.4);
  background: transparent;
  color: var(--bo-ink-foreground);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.bo-hero__arrow:hover { background-color: var(--bo-ink-foreground); color: var(--bo-ink); }
.bo-hero__arrow svg { width: 15px; height: 15px; }

/* Indikátory (čiarky) v strede riadku */
.bo-hero__dots {
  display: flex;
  gap: 0.5rem;
}
.bo-hero__dot {
  background: none;
  border: 0;
  padding: 0.75rem 0;
  cursor: pointer;
}
.bo-hero__dot span {
  display: block;
  height: 1px;
  width: 40px;
  background-color: rgba(246, 246, 244, 0.35);
  transition: background-color 0.2s ease;
}
.bo-hero__dot:hover span { background-color: rgba(246, 246, 244, 0.7); }
.bo-hero__dot.is-active span { background-color: var(--bo-blue); }

/* ==========================================================================
   HOMEPAGE SEKCIE (Lovable štýl)
   ========================================================================== */

/* Spoločný sekčný kontajner */
.bo-section {
  padding: 5rem 1.5rem;
}
@media (min-width: 768px) { .bo-section { padding: 5rem 3.5rem; } }

.bo-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.bo-section__title {
  font-size: 1.5rem;
  margin: 0;
}
@media (min-width: 768px) { .bo-section__title { font-size: 1.875rem; } }
.bo-section__title--center { text-align: center; width: 100%; }

.bo-section__link {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--bo-foreground);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.bo-section__link:hover { color: var(--bo-blue); }
.bo-section__link svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .bo-section__link { display: inline-flex; } }
.bo-section__link-mobile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--bo-foreground);
  text-decoration: none;
}
.bo-section__link-mobile svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .bo-section__link-mobile { display: none; } }

/* --- Kategórie (view-slider) — editorial karty 3:4 -------------------------- */
.bo-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .bo-cats { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.bo-cat {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}
.bo-cat__img-wrap {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background-color: var(--bo-secondary);
}
.bo-cat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease-out;
}
.bo-cat:hover .bo-cat__img { transform: scale(1.05); }
.bo-cat__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,30,36,0.6) 0%, rgba(28,30,36,0.1) 40%, transparent 70%);
}
.bo-cat__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: var(--bo-ink-foreground);
}
@media (min-width: 768px) { .bo-cat__label { padding: 1.25rem; } }
.bo-cat__label span { font-size: 1rem; }
@media (min-width: 768px) { .bo-cat__label span { font-size: 1.125rem; } }
.bo-cat__label svg {
  width: 20px;
  height: 20px;
  transform: translateX(-8px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.bo-cat:hover .bo-cat__label svg { transform: translateX(0); opacity: 1; }

/* --- Produkty (view-products) — packshot→lifestyle hover ------------------- */
.bo-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .bo-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .bo-products { grid-template-columns: repeat(5, 1fr); } }
.bo-product { position: relative; display: block; text-decoration: none; color: inherit; }
/* natiahnutý odkaz na celú kartu (klik = detail produktu) */
.bo-product__link { position: absolute; inset: 0; z-index: 1; }
.bo-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--bo-secondary);
}
.bo-product__img,
.bo-product__img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* packshot — produkt vycentrovaný na svetlom pozadí, nie orezaný */
.bo-product__img {
  object-fit: contain;
  object-position: center;
  padding: 8%;
  transition: opacity 0.5s ease;
}
/* hover lifestyle — vyplní celý sivý štvorec + odzoomovací efekt */
.bo-product__img-hover {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 0.6s ease, transform 0.9s ease-out;
}
.bo-product:hover .bo-product__img { opacity: 0; }
.bo-product:hover .bo-product__img-hover { opacity: 1; transform: scale(1); }
.bo-product__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  background: var(--bo-blue);
  color: var(--bo-blue-foreground);
  padding: 0.25rem 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bo-product__name { margin: 1rem 0 0; font-size: 0.875rem; color: var(--bo-foreground); }
/* žiadna modrá na hover — názov produktu ostáva tmavý (prebije globálny a:hover) */
.bo-product, .bo-product:hover, .bo-product:focus { color: var(--bo-foreground); }
.bo-product:hover .bo-product__name,
.bo-product:focus .bo-product__name { color: var(--bo-foreground); }
.bo-product__price { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--bo-muted-foreground); }
.bo-product__price del { color: var(--bo-muted-foreground); opacity: 0.7; margin-left: 0.4rem; }
/* farebné varianty (bodky) — každá má vlastný odkaz na variant, nad natiahnutým linkom */
.bo-product__colors { position: relative; z-index: 2; display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.bo-product__color {
  display: block; width: 14px; height: 14px; border-radius: 9999px;
  border: 1px solid var(--bo-border);
  background-size: cover; background-position: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.bo-product__color:hover { box-shadow: 0 0 0 1px var(--bo-foreground); transform: scale(1.15); }

/* --- Bigbanner — široký editorial banner ----------------------------------- */
.bo-bigbanner {
  position: relative;
  background-color: var(--bo-ink);
}
.bo-bigbanner__img-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) { .bo-bigbanner__img-wrap { aspect-ratio: 21 / 9; } }
.bo-bigbanner__img { width: 100%; height: 100%; object-fit: cover; }
.bo-bigbanner__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem;
}
@media (min-width: 768px) { .bo-bigbanner__content { padding: 3.5rem; } }
.bo-bigbanner__inner {
  max-width: 32rem;
  color: var(--bo-ink-foreground);
}
.bo-bigbanner__title { font-size: 2rem; margin: 0; }
@media (min-width: 768px) { .bo-bigbanner__title { font-size: 2.75rem; } }
.bo-bigbanner__text { margin: 1rem 0 0; opacity: 0.85; }
.bo-bigbanner__cta { margin-top: 2rem; }
/* gradient pre čitateľnosť (zľava) — jemnejší, ako Lovable editorial */
.bo-bigbanner__content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28,30,36,0.55) 0%, rgba(28,30,36,0.12) 45%, transparent 70%);
}
.bo-bigbanner__inner { position: relative; z-index: 1; }

/* --- Články (view-articles) ------------------------------------------------- */
.bo-articles {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) { .bo-articles { grid-template-columns: repeat(3, 1fr); } }
.bo-article { display: block; text-decoration: none; color: inherit; }
.bo-article__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--bo-secondary);
}
.bo-article__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.bo-article:hover .bo-article__img { transform: scale(1.05); }
.bo-article__eyebrow { margin: 1rem 0 0; }
.bo-article__title {
  margin: 0.5rem 0 0;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--bo-foreground);
  transition: opacity 0.2s ease;
}
/* žiadna modrá na hover — nadpis ostáva tmavý, len jemné stlmenie */
.bo-article,
.bo-article:hover,
.bo-article:focus { color: var(--bo-foreground); }
.bo-article:hover .bo-article__title,
.bo-article:focus .bo-article__title { color: var(--bo-foreground); opacity: 0.7; }
.bo-article__title a,
.bo-article__title a:hover { color: inherit; text-decoration: none; }

/* --- Kontakt banner (content-banner) --------------------------------------- */
.bo-contact {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .bo-contact { grid-template-columns: 5fr 7fr; } }
.bo-contact__text {
  background-color: var(--bo-ink);
  color: var(--bo-ink-foreground);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem;
}
@media (min-width: 768px) { .bo-contact__text { padding: 4rem 3rem; } }
.bo-contact__eyebrow { color: rgba(246,246,244,0.6); }
.bo-contact__title { font-size: 1.5rem; margin: 1rem 0 0; }
@media (min-width: 768px) { .bo-contact__title { font-size: 2rem; } }
.bo-contact__cta { margin-top: 2rem; align-self: flex-start; }
.bo-contact__media { min-height: 320px; }
.bo-contact__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- CTA / Newsletter tmavý blok (content-cta + content-newsletter) --------- */
.bo-cta {
  background-color: var(--bo-ink);
  color: var(--bo-ink-foreground);
  padding: 5rem 1.5rem;
}
@media (min-width: 768px) { .bo-cta { padding: 6rem 3.5rem; } }
.bo-cta__inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 768px) { .bo-cta__inner { grid-template-columns: repeat(2, 1fr); } }
.bo-cta__title { font-size: 1.5rem; margin: 0; }
@media (min-width: 768px) { .bo-cta__title { font-size: 2rem; } }
.bo-cta__text { margin: 1rem 0 0; font-size: 0.875rem; opacity: 0.8; max-width: 24rem; }
.bo-cta__list { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; opacity: 0.8; }
.bo-cta__list li { padding: 0.15rem 0; }
.bo-cta__cta { margin-top: 2rem; }
.bo-cta__form {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 24rem;
  border-bottom: 1px solid rgba(246,246,244,0.4);
  padding-bottom: 0.5rem;
}
.bo-cta__form input {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--bo-ink-foreground);
  font: inherit;
  font-size: 0.875rem;
}
.bo-cta__form input::placeholder { color: rgba(246,246,244,0.5); }
.bo-cta__form input:focus { outline: none; }
.bo-cta__form button {
  flex-shrink: 0; background: none; border: 0; color: inherit; cursor: pointer; line-height: 0;
}
.bo-cta__form button svg { width: 20px; height: 20px; }

/* --- Dvojica kariet na výšku (content-dual) — Lovable "dvojica na výšku" ---- */
.bo-dual {
  display: grid;
  gap: 1px;
  background-color: var(--bo-border);
}
@media (min-width: 768px) { .bo-dual { grid-template-columns: repeat(2, 1fr); } }
.bo-dual__card {
  position: relative;
  background-color: var(--bo-ink);
}
.bo-dual__img-wrap {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) { .bo-dual__img-wrap { aspect-ratio: 3 / 4; } }
.bo-dual__img { width: 100%; height: 100%; object-fit: cover; }
.bo-dual__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2rem;
  color: var(--bo-ink-foreground);
  background: linear-gradient(to top, rgba(28,30,36,0.8) 0%, transparent 100%);
}
@media (min-width: 768px) { .bo-dual__content { padding: 3rem; } }
.bo-dual__title { font-size: 1.5rem; margin: 0; }
.bo-dual__text { margin: 0.5rem 0 0; max-width: 24rem; font-size: 0.875rem; opacity: 0.85; }
.bo-dual__cta { margin-top: 1.5rem; }

/* --- Editoriál wide banner (content-editorial) — Lovable editorialWide ------
   Široký obrázok + popis a pill CTA POD obrázkom, vycentrované. */
.bo-editorial {
  padding-top: 5rem;
}
.bo-editorial__figure { margin: 0; }
.bo-editorial__img-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background-color: var(--bo-ink);
}
.bo-editorial__img { width: 100%; height: 100%; object-fit: cover; }
.bo-editorial__caption {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.bo-editorial__title { font-size: 1.5rem; margin: 0; }
@media (min-width: 768px) { .bo-editorial__title { font-size: 1.875rem; } }
.bo-editorial__text { margin: 1rem auto 0; max-width: 34rem; color: var(--bo-muted-foreground); }
.bo-editorial__cta { margin-top: 1.5rem; }
.bo-editorial__cta svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.bo-editorial__cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   NOVINKY / MAGAZÍN (view-news) — Lovable novinky.tsx
   ========================================================================== */

/* Hero featured banner */
.bo-news-hero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
  background-color: var(--bo-ink);
}
.bo-news-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
.bo-news-hero__overlay {
  position: absolute;
  inset: 0;
  /* tmavý zdola (text) + jemné stmavenie zhora (aby biely header/logo bol čitateľný) */
  background:
    linear-gradient(to top, rgba(28,30,36,0.85) 0%, rgba(28,30,36,0.30) 45%, rgba(28,30,36,0.20) 100%),
    linear-gradient(to bottom, rgba(28,30,36,0.45) 0%, rgba(28,30,36,0) 20%);
}
.bo-news-hero__content {
  position: relative;
  display: flex;
  height: 100%;
  align-items: flex-end;
  padding: 0 1.5rem 3.5rem;
}
@media (min-width: 768px) { .bo-news-hero__content { padding: 0 3.5rem 5rem; } }
.bo-news-hero__inner { max-width: 42rem; color: var(--bo-ink-foreground); }
.bo-news-hero__eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-news-hero__title { margin: 1rem 0 0; font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.1; overflow-wrap: break-word; }
@media (min-width: 768px) { .bo-news-hero__title { font-size: 3.75rem; } }
.bo-news-hero__excerpt { margin: 1.25rem 0 0; max-width: 36rem; font-size: 1rem; opacity: 0.85; }
@media (min-width: 768px) { .bo-news-hero__excerpt { font-size: 1.125rem; } }
.bo-news-hero__cta { margin-top: 2rem; }
.bo-news-hero__cta svg { width: 16px; height: 16px; transition: transform 0.3s ease; }
.bo-news-hero__cta:hover svg { transform: translateX(4px); }

/* Intro + filtre */
.bo-news-intro {
  padding: 4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 1px solid var(--bo-border);
  margin: 0 1.5rem;
}
@media (min-width: 768px) {
  .bo-news-intro { padding: 4rem 0 1.5rem; margin: 0 3.5rem; flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.bo-news-intro__lead { max-width: 34rem; }
.bo-news-intro__title { margin: 0.75rem 0 0; font-size: 1.5rem; }
@media (min-width: 768px) { .bo-news-intro__title { font-size: 1.875rem; } }
.bo-news-intro__text { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--bo-muted-foreground); }
.bo-news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}
.bo-news-filter {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 0.25rem;
  font: inherit;
  color: var(--bo-muted-foreground);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bo-news-filter:hover { color: var(--bo-foreground); }
.bo-news-filter.is-active { color: var(--bo-foreground); border-bottom-color: var(--bo-blue); }

/* Mriežka článkov */
.bo-news-grid {
  padding: 3.5rem 1.5rem;
  display: grid;
  gap: 3rem 1.5rem;
}
@media (min-width: 768px) { .bo-news-grid { padding: 3.5rem; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bo-news-grid { grid-template-columns: repeat(3, 1fr); } }
.bo-news-card { display: block; text-decoration: none; color: inherit; }
.bo-news-card__media { aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--bo-secondary); }
.bo-news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.bo-news-card:hover .bo-news-card__img { transform: scale(1.05); }
.bo-news-card__eyebrow { margin: 1rem 0 0; }
.bo-news-card__title { margin: 0.5rem 0 0; font-size: 1.125rem; line-height: 1.35; color: var(--bo-foreground); transition: opacity 0.2s ease; }
.bo-news-card:hover .bo-news-card__title { opacity: 0.7; }
.bo-news-card__excerpt { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--bo-muted-foreground); }

/* ==========================================================================
   BESTSELLERY (view-bestsellery) — Lovable bestsellery.tsx
   ========================================================================== */

/* Split header — body.bo-no-hero už dáva odsadenie pod fixný header,
   preto tu len jemný vnútorný priestor */
.bo-bs-header {
  position: relative;
  background-color: var(--bo-sand);
  padding-top: 2.5rem;
}
@media (min-width: 768px) { .bo-bs-header { padding-top: 3.5rem; } }
.bo-bs-header__grid {
  display: grid;
  gap: 2.5rem;
  padding: 0 1.5rem;
  align-items: end;
  padding: 0 1.5rem 3rem;
}
@media (min-width: 768px) {
  .bo-bs-header__grid { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding: 0 3.5rem; padding-bottom: 0; }
}
.bo-bs-header__text { padding-bottom: 1rem; }
@media (min-width: 768px) { .bo-bs-header__text { padding-bottom: 5rem; } }
.bo-bs-header__title { margin: 1.25rem 0 0; font-size: clamp(2rem, 11vw, 3rem); line-height: 0.95; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
@media (min-width: 768px) { .bo-bs-header__title { font-size: 4.5rem; } }
.bo-bs-header__title .accent { color: var(--bo-blue); }
.bo-bs-header__lead { margin: 1.5rem 0 0; max-width: 28rem; font-size: 0.875rem; color: var(--bo-muted-foreground); }
@media (min-width: 768px) { .bo-bs-header__lead { font-size: 1rem; } }
.bo-bs-header__badges {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bo-muted-foreground);
}
.bo-bs-header__media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background-color: var(--bo-secondary);
}
@media (min-width: 768px) { .bo-bs-header__media { aspect-ratio: 3 / 4; } }
.bo-bs-header__img { width: 100%; height: 100%; object-fit: cover; }
.bo-bs-header__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  background: linear-gradient(to top, rgba(28,30,36,0.7), transparent);
  padding: 1.5rem; color: var(--bo-ink-foreground);
}
.bo-bs-header__cap-eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-bs-header__cap-name { margin: 0.5rem 0 0; font-size: 1.25rem; }
.bo-bs-header__cap-price { margin: 0; font-size: 0.875rem; opacity: 0.8; }

/* Sticky filtre + sort */
.bo-bs-bar {
  position: sticky;
  top: 57px;
  z-index: 30;
  border-bottom: 1px solid var(--bo-border);
  background-color: rgba(251,251,249,0.92);
  backdrop-filter: blur(8px);
}
.bo-bs-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.5rem;
}
@media (min-width: 768px) { .bo-bs-bar__inner { padding: 1rem 3.5rem; } }
.bo-bs-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.bo-bs-filter { background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 0.25rem; font: inherit; color: var(--bo-muted-foreground); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.bo-bs-filter:hover { color: var(--bo-foreground); }
.bo-bs-filter.is-active { color: var(--bo-foreground); border-bottom-color: var(--bo-blue); }
.bo-bs-sort { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--bo-muted-foreground); }
.bo-bs-sort select {
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--bo-border);
  background: transparent;
  padding: 0.4rem 1.75rem 0.4rem 0.25rem;
  color: var(--bo-foreground);
  font: inherit;
  border-radius: 0;
  /* skry natívnu šípku, dáme vlastnú */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* vlastná šípka (chevron) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2324262d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
}
.bo-bs-sort select:focus { outline: none; border-bottom-color: var(--bo-blue); }
.bo-bs-sort select option {
  background-color: var(--bo-background);
  color: var(--bo-foreground);
}

/* Mriežka 4 stĺpce */
.bo-bs-grid { padding: 3.5rem 1.5rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 3.5rem 1.5rem; }
@media (min-width: 768px) { .bo-bs-grid { padding: 3.5rem; grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .bo-bs-grid { grid-template-columns: repeat(4,1fr); } }
.bo-bs-card { }
.bo-bs-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background-color: var(--bo-secondary); }
.bo-bs-card__img, .bo-bs-card__hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bo-bs-card__img { object-fit: contain; padding: 8%; transition: opacity 0.5s; }
.bo-bs-card__hover { opacity: 0; transform: scale(1.12); transition: opacity 0.6s, transform 0.9s ease-out; }
.bo-bs-card:hover .bo-bs-card__img { opacity: 0; }
.bo-bs-card:hover .bo-bs-card__hover { opacity: 1; transform: scale(1); }
.bo-bs-card__tag { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 2; padding: 0.25rem 0.5rem; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; background: var(--bo-blue); color: var(--bo-blue-foreground); }
.bo-bs-card__tag.is-sale { background: var(--bo-foreground); color: var(--bo-background); }
.bo-bs-card__cta { position: absolute; inset-inline: 0.75rem; bottom: 0.75rem; z-index: 2; border-radius: 9999px; background: rgba(251,251,249,0.95); padding: 0.5rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bo-foreground); opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.bo-bs-card:hover .bo-bs-card__cta { opacity: 1; transform: translateY(0); }
.bo-bs-card__row { margin-top: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.bo-bs-card__name { font-size: 0.875rem; margin: 0; color: var(--bo-foreground); }
/* žiadna modrá na hover — názov produktu ostáva tmavý */
.bo-bs-card:hover .bo-bs-card__name,
.bo-bs-card__media:hover ~ * .bo-bs-card__name { color: var(--bo-foreground); }
.bo-bs-card__price { flex-shrink: 0; font-size: 0.875rem; margin: 0; }
.bo-bs-card__price del { color: var(--bo-muted-foreground); margin-right: 0.5rem; }
.bo-bs-card__blurb { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--bo-muted-foreground); }
.bo-bs-card__colors { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
.bo-bs-card__color { width: 16px; height: 16px; border-radius: 9999px; border: 1px solid var(--bo-border); background-size: cover; background-position: center; padding: 0; cursor: pointer; }

/* Showroom CTA */
.bo-bs-showroom { margin: 0 1.5rem 5rem; background-color: var(--bo-ink); color: var(--bo-ink-foreground); padding: 4rem 2rem; }
@media (min-width: 768px) { .bo-bs-showroom { margin: 0 3.5rem 5rem; padding: 4rem 3.5rem; } }
.bo-bs-showroom__inner { max-width: 36rem; }
.bo-bs-showroom__eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-bs-showroom__title { margin: 1rem 0 0; font-size: 1.5rem; }
@media (min-width: 768px) { .bo-bs-showroom__title { font-size: 1.875rem; } }
.bo-bs-showroom__text { margin: 0.75rem 0 0; font-size: 0.875rem; opacity: 0.8; }
.bo-bs-showroom__cta { margin-top: 2rem; }
.bo-bs-showroom__cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.bo-bs-showroom__cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   NADPIS KATEGÓRIE (view-bigtitle) — Lovable split header
   ========================================================================== */
.bo-cat-header {
  background-color: var(--bo-sand);
  padding-top: 2.5rem;
}
@media (min-width: 768px) { .bo-cat-header { padding-top: 3.5rem; } }
.bo-cat-header__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
  padding: 0 1.5rem 2.5rem;
}
@media (min-width: 768px) {
  .bo-cat-header__grid { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding: 0 3.5rem; padding-bottom: 0; }
}
.bo-cat-header__text { padding-bottom: 1rem; }
@media (min-width: 768px) { .bo-cat-header__text { padding-bottom: 4rem; } }
.bo-cat-header__eyebrow { margin: 0; }
.bo-cat-header__title {
  margin: 1rem 0 0;
  font-size: clamp(1.85rem, 10vw, 2.75rem);
  line-height: 0.98;
  text-transform: none;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
@media (min-width: 768px) { .bo-cat-header__title { font-size: 4rem; } }
.bo-cat-header__desc {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  color: var(--bo-muted-foreground);
}
.bo-cat-header__badges {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bo-muted-foreground);
}
/* produktová scéna vpravo — nižšia (širší pomer) */
.bo-cat-header__media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  background-color: var(--bo-secondary);
}
@media (min-width: 768px) { .bo-cat-header__media { aspect-ratio: 16 / 9; } }
.bo-cat-header__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-cat-header__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  background: linear-gradient(to top, rgba(28,30,36,0.7), transparent);
  padding: 1.5rem; color: var(--bo-ink-foreground);
}
.bo-cat-header__cap-eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-cat-header__cap-name { margin: 0.5rem 0 0; font-size: 1.25rem; }

/* ==========================================================================
   KONTAKT (content-kontakt) — Lovable kontakt.tsx
   ========================================================================== */

/* Hero */
.bo-kontakt-hero { position: relative; height: 62vh; min-height: 440px; width: 100%; overflow: hidden; background-color: var(--bo-ink); }
.bo-kontakt-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bo-kontakt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,30,36,0.85) 0%, rgba(28,30,36,0.35) 45%, rgba(28,30,36,0.30) 100%); }
.bo-kontakt-hero__content { position: relative; display: flex; height: 100%; align-items: flex-end; padding: 0 1.5rem 3.5rem; }
@media (min-width: 768px) { .bo-kontakt-hero__content { padding: 0 3.5rem 5rem; } }
.bo-kontakt-hero__inner { max-width: 42rem; color: var(--bo-ink-foreground); }
.bo-kontakt-hero__eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-kontakt-hero__title { margin: 1rem 0 0; font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.1; overflow-wrap: break-word; }
@media (min-width: 768px) { .bo-kontakt-hero__title { font-size: 3.75rem; } }
.bo-kontakt-hero__text { margin: 1.25rem 0 0; max-width: 36rem; font-size: 1rem; opacity: 0.85; }
@media (min-width: 768px) { .bo-kontakt-hero__text { font-size: 1.125rem; } }

/* Predajňa + mapa */
.bo-kontakt-store { padding: 4rem 1.5rem; }
@media (min-width: 768px) { .bo-kontakt-store { padding: 6rem 3.5rem; } }
.bo-kontakt-store__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 768px) { .bo-kontakt-store__grid { grid-template-columns: repeat(2,1fr); gap: 4rem; } }
.bo-kontakt-map { overflow: hidden; }
.bo-kontakt-map iframe { width: 100%; height: 380px; border: 0; display: block; }
@media (min-width: 768px) { .bo-kontakt-map iframe { height: 520px; } }
.bo-kontakt-store__title { margin: 0.75rem 0 0; font-size: 1.875rem; }
@media (min-width: 768px) { .bo-kontakt-store__title { font-size: 2.25rem; } }
.bo-kontakt-dl { margin: 2.5rem 0 0; display: flex; flex-direction: column; gap: 1.75rem; }
.bo-kontakt-dl__row { display: flex; gap: 1rem; }
.bo-kontakt-dl__icon { flex-shrink: 0; margin-top: 2px; color: var(--bo-blue); width: 20px; height: 20px; }
.bo-kontakt-dl__label { /* eyebrow */ margin: 0; }
.bo-kontakt-dl__val { margin: 0.35rem 0 0; color: var(--bo-muted-foreground); line-height: 1.6; }
.bo-kontakt-dl__val a { color: inherit; text-decoration: none; transition: color 0.2s; }
.bo-kontakt-dl__val a:hover { color: var(--bo-foreground); }
.bo-kontakt-store__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bo-kontakt-store__cta .bo-pill svg { width: 16px; height: 16px; transition: transform 0.3s; }
.bo-kontakt-store__cta .bo-pill:hover svg { transform: translateX(4px); }

/* Galéria showroomu (masonry) */
.bo-kontakt-gallery { padding: 0 1.5rem 4rem; }
@media (min-width: 768px) { .bo-kontakt-gallery { padding: 0 3.5rem 6rem; } }
.bo-kontakt-gallery__head { margin-bottom: 2rem; }
.bo-kontakt-gallery__title { margin: 0.75rem 0 0; font-size: 1.5rem; }
@media (min-width: 768px) { .bo-kontakt-gallery__title { font-size: 1.875rem; } }
.bo-kontakt-gallery__grid { display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 180px; gap: 0.75rem; }
@media (min-width: 768px) { .bo-kontakt-gallery__grid { grid-template-columns: repeat(4,1fr); grid-auto-rows: 220px; } }
.bo-kontakt-gallery__item { overflow: hidden; background-color: var(--bo-secondary); }
.bo-kontakt-gallery__item.is-big { grid-column: span 2; grid-row: span 2; }
.bo-kontakt-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.bo-kontakt-gallery__item:hover img { transform: scale(1.05); }

/* Centrála / fakturačné (sand) */
.bo-kontakt-info { background-color: var(--bo-sand); padding: 4rem 1.5rem; }
@media (min-width: 768px) { .bo-kontakt-info { padding: 5rem 3.5rem; } }
.bo-kontakt-info__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .bo-kontakt-info__grid { grid-template-columns: repeat(3,1fr); } }
.bo-kontakt-info__title { margin: 0.75rem 0 0; font-size: 1.5rem; }
.bo-kontakt-info__text { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--bo-muted-foreground); }
.bo-kontakt-info__text a { color: inherit; text-decoration: none; }
.bo-kontakt-info__text a:hover { color: var(--bo-foreground); }
.bo-kontakt-info__text .strong { color: var(--bo-foreground); }

/* ==========================================================================
   NÁKUPNÝ KOŠÍK (cart.html) — Lovable kosik.tsx
   ========================================================================== */
.bo-cart { color: var(--bo-foreground); }

/* Editoriálna hlavička */
.bo-cart__head {
  border-bottom: 1px solid var(--bo-border, #e2e0da);
  background-color: var(--bo-sand);
  padding: 2.5rem 1.5rem;
}
@media (min-width: 768px) { .bo-cart__head { padding: 3rem 3.5rem; } }
.bo-cart__head-inner {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.5rem;
}
.bo-cart__title { margin: 0.75rem 0 0; font-size: clamp(2rem, 9vw, 2.5rem); line-height: 0.95; font-weight: 400; overflow-wrap: break-word; }
@media (min-width: 768px) { .bo-cart__title { font-size: 3.75rem; } }
.bo-cart__title .accent { color: var(--bo-blue); }
.bo-cart__steps {
  display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0;
  list-style: none; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bo-muted-foreground);
}
.bo-cart__steps li.is-active { color: var(--bo-foreground); border-bottom: 1px solid var(--bo-blue); padding-bottom: 0.25rem; }

/* Telo: zoznam + sumár */
.bo-cart__body {
  display: grid; gap: 3rem; padding: 3rem 1.5rem;
}
@media (min-width: 768px) { .bo-cart__body { padding: 4rem 3.5rem; } }
@media (min-width: 1024px) {
  .bo-cart__body { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; }
}

.bo-cart__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bo-border, #e2e0da); }

.bo-cart-item {
  display: grid; grid-template-columns: 88px 1fr; gap: 1.25rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--bo-border, #e2e0da);
}
@media (min-width: 768px) { .bo-cart-item { grid-template-columns: 128px 1fr; gap: 2rem; padding: 2rem 0; } }

.bo-cart-item__media { display: block; overflow: hidden; background: var(--bo-secondary); aspect-ratio: 1 / 1; }
.bo-cart-item__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
.bo-cart-item__media--coupon {
  display: flex; align-items: center; justify-content: center;
  color: var(--bo-muted-foreground);
}

.bo-cart-item__main { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.bo-cart-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bo-cart-item__name {
  display: block; margin: 0.375rem 0 0; font-size: 1.125rem; font-weight: 600;
  color: var(--bo-foreground); text-decoration: none; line-height: 1.2;
}
@media (min-width: 768px) { .bo-cart-item__name { font-size: 1.25rem; } }
.bo-cart-item__variant { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--bo-muted-foreground); }
.bo-cart-item__stock { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--bo-muted-foreground); }

.bo-cart-item__remove {
  flex-shrink: 0; color: var(--bo-muted-foreground); background: none; border: 0;
  padding: 0.25rem; cursor: pointer; transition: color 0.2s ease; line-height: 0;
}
.bo-cart-item__remove:hover { color: var(--bo-blue); }

.bo-cart-item__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.bo-cart-item__price { font-size: 0.9375rem; text-align: right; }
.bo-cart-item__price .oldprice { display: block; font-size: 0.8em; color: var(--bo-muted-foreground); }
.bo-cart-item__price .accent { color: var(--bo-blue); }

/* QTY spinner v B&O štýle (zachované triedy .input-spinner/.qty-plus/.qty-minus/.item-qty) */
.bo-cart-qty.input-group.input-spinner {
  display: inline-flex; align-items: center; width: auto;
  border: 1px solid var(--bo-border, #d9d7d0); border-radius: 9999px; overflow: hidden;
}
.bo-cart-qty .input-group-prepend, .bo-cart-qty .input-group-append { display: flex; margin: 0; }
.bo-cart-qty .btn {
  border: 0; background: transparent; color: var(--bo-muted-foreground);
  padding: 0.5rem 0.85rem; line-height: 0; display: flex; align-items: center; border-radius: 0;
  transition: color 0.2s ease;
}
.bo-cart-qty .btn:hover { color: var(--bo-blue); background: transparent; }
.bo-cart-qty .item-qty.form-control {
  width: 2rem; min-width: 2rem; max-width: 2.5rem; text-align: center; border: 0;
  background: transparent; font-weight: 600; font-size: 0.875rem; color: var(--bo-foreground);
  padding: 0; height: auto; box-shadow: none;
}
.bo-cart-qty .item-qty.form-control:focus { box-shadow: none; outline: none; }

/* Pokračovať v nákupe */
.bo-cart__continue-row { margin-top: 2rem; }
.bo-cart__continue {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;
  color: var(--bo-muted-foreground); text-decoration: none; transition: color 0.2s ease;
}
.bo-cart__continue:hover { color: var(--bo-foreground); }
.bo-cart__continue svg { transition: transform 0.3s ease; }
.bo-cart__continue:hover svg { transform: translateX(4px); }

/* Sumár */
.bo-cart__summary-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .bo-cart__summary-wrap { position: sticky; top: 6rem; } }
.bo-cart-summary { border: 1px solid var(--bo-border, #e2e0da); padding: 1.5rem; }
@media (min-width: 768px) { .bo-cart-summary { padding: 2rem; } }
.bo-cart-summary__note { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--bo-muted-foreground); }
.bo-cart-summary__lines { margin: 1.5rem 0 0; }
.bo-cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; margin-bottom: 0.75rem; }
.bo-cart-summary__row dt { color: var(--bo-muted-foreground); }
.bo-cart-summary__row dd { margin: 0; }
.bo-cart-summary__row .accent { color: var(--bo-blue); }
.bo-cart-summary__row--total {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bo-border, #e2e0da);
  font-size: 1rem;
}
.bo-cart-summary__row--total dd strong { font-weight: 600; }

.bo-cart-summary__coupon {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem;
  border-bottom: 1px solid var(--bo-border, #e2e0da); padding-bottom: 0.5rem;
}
.bo-cart-summary__coupon input {
  flex: 1; border: 0; background: transparent; padding: 0.25rem 0; font-size: 0.875rem; color: var(--bo-foreground);
}
.bo-cart-summary__coupon input:focus { outline: none; }
.bo-cart-summary__coupon input::placeholder { color: var(--bo-muted-foreground); }
.bo-cart-summary__coupon button {
  flex-shrink: 0; border: 0; background: none; cursor: pointer;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bo-muted-foreground); transition: color 0.2s ease;
}
.bo-cart-summary__coupon button:hover { color: var(--bo-blue); }

.bo-cart-summary__checkout { width: 100%; margin-top: 2rem; }
.bo-cart-summary__checkout svg { transition: transform 0.3s ease; }
.bo-cart-summary__checkout:hover svg { transform: translateX(4px); }

.bo-cart-summary__benefits { margin: 2rem 0 0; padding: 0; list-style: none; }
.bo-cart-summary__benefits li {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
  font-size: 0.75rem; color: var(--bo-muted-foreground);
}
.bo-cart-summary__benefits svg { flex-shrink: 0; }

/* Osobné prevzatie (tmavý blok) */
.bo-cart-pickup { background-color: var(--bo-ink); color: var(--bo-ink-foreground); padding: 1.5rem; }
@media (min-width: 768px) { .bo-cart-pickup { padding: 2rem; } }
.bo-cart-pickup .bo-eyebrow { color: rgba(246, 246, 244, 0.7); }
.bo-cart-pickup__text { margin: 0.75rem 0 0; font-size: 0.875rem; opacity: 0.85; line-height: 1.5; }
.bo-cart-pickup__link {
  display: inline-block; margin-top: 1rem; font-size: 0.875rem;
  color: var(--bo-ink-foreground); text-decoration: underline; text-underline-offset: 4px;
}
.bo-cart-pickup__link:hover { color: #fff; }

/* ==========================================================================
   PRÁZDNY KOŠÍK — Lovable EmptyCart
   ========================================================================== */
.bo-emptycart { padding: 4rem 1.5rem; }
@media (min-width: 768px) { .bo-emptycart { padding: 6rem 3.5rem; } }
.bo-emptycart__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .bo-emptycart__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bo-emptycart__title { margin: 0; font-size: 1.875rem; line-height: 1.15; font-weight: 400; }
@media (min-width: 768px) { .bo-emptycart__title { font-size: 3rem; } }
.bo-emptycart__title .accent { color: var(--bo-blue); }
.bo-emptycart__lead { margin: 1.25rem 0 0; max-width: 28rem; font-size: 0.9375rem; color: var(--bo-muted-foreground); line-height: 1.6; }
.bo-emptycart__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.bo-emptycart__cta svg { transition: transform 0.3s ease; }
.bo-emptycart__cta a:hover svg { transform: translateX(4px); }
.bo-emptycart__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bo-emptycart__tile { position: relative; display: block; overflow: hidden; background: var(--bo-secondary); aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .bo-emptycart__tile--offset { margin-top: 2.5rem; } }
.bo-emptycart__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.bo-emptycart__tile:hover img { transform: scale(1.05); }
.bo-emptycart__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1rem;
  font-size: 0.875rem; color: var(--bo-ink-foreground);
  background: linear-gradient(to top, rgba(28,30,36,0.7), transparent);
}

/* ==========================================================================
   DETAIL PRODUKTU (view-product.html) — Lovable produkt.$slug.tsx
   ========================================================================== */
.bo-pdp { color: var(--bo-foreground); }

.bo-pdp__crumbs {
  padding: 1.5rem 1.5rem 0; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bo-muted-foreground);
}
@media (min-width: 768px) { .bo-pdp__crumbs { padding: 2rem 3.5rem 0; } }
.bo-pdp__crumbs a { color: var(--bo-muted-foreground); text-decoration: none; transition: color 0.2s ease; }
.bo-pdp__crumbs a:hover { color: var(--bo-foreground); }
.bo-pdp__crumbs span { margin: 0 0.5rem; }
.bo-pdp__crumbs .is-current { color: var(--bo-foreground); margin: 0; }

.bo-pdp__main { display: grid; gap: 2.5rem; padding: 2rem 1.5rem 5rem; }
@media (min-width: 768px) {
  .bo-pdp__main { grid-template-columns: 1.15fr 1fr; gap: 4rem; padding: 2rem 3.5rem 5rem; align-items: start; }
}

/* Galéria */
.bo-pdp__gallery { position: relative; background: var(--bo-secondary); aspect-ratio: 1 / 1; overflow: hidden; }
.bo-pdp__gallery .product-slider { opacity: 0; transition: opacity 0.5s ease; height: 100%; }
.bo-pdp__gallery .slide img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.bo-pdp__single-img { width: 100%; height: 100%; }
.bo-pdp__single-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.bo-pdp__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 3; padding: 0.25rem 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--bo-blue); color: var(--bo-blue-foreground);
}
.bo-pdp__tag.is-sale { background: var(--bo-foreground); color: var(--bo-background); }

/* Info panel */
.bo-pdp__info { }
@media (min-width: 768px) { .bo-pdp__info { position: sticky; top: 6rem; } }
.bo-pdp__headline { margin: 1.25rem 0 0; max-width: 28rem; font-size: 1.875rem; line-height: 1.05; font-weight: 400; }
@media (min-width: 768px) { .bo-pdp__headline { font-size: 2.75rem; } }
.bo-pdp__desc { margin: 1.5rem 0 0; max-width: 30rem; font-size: 0.9375rem; line-height: 1.6; color: var(--bo-muted-foreground); }
.bo-pdp__desc :is(h1,h2,h3,h4) { color: var(--bo-foreground); }
.bo-pdp__more { color: var(--bo-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Farebné varianty */
.bo-pdp__colors { margin-top: 2rem; }
.bo-pdp__swatches { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.bo-pdp__swatch-link { display: block; line-height: 0; }
.bo-pdp__swatch-link { flex-shrink: 0; }
.bo-pdp__swatches .select_option {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background-color: var(--bo-secondary);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: block; transition: box-shadow 0.2s ease; position: relative;
}
.bo-pdp__swatches .select_option .yith_wccl_value { display: block; width: 100%; height: 100%; }
.bo-pdp__swatches .select_option .yith_wccl_value img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-pdp__swatch-link:hover .select_option { box-shadow: 0 0 0 1px var(--bo-muted-foreground); }
.bo-pdp__swatches .select_option.selected {
  box-shadow: 0 0 0 1.5px var(--bo-blue), 0 0 0 3px var(--bo-background);
}
.bo-pdp__chosen { margin: 0.75rem 0 0; font-size: 0.875rem; }

/* Konfigurovateľné varianty */
.bo-pdp__variants { margin-top: 1.5rem; }
.bo-pdp__variants-title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.75rem; }
/* prebi Bootstrap .row/.col-* aby label a select boli pod sebou na plnú šírku */
.bo-pdp__variants .chosen-variant { display: block; margin: 0; }
.bo-pdp__variants .chosen-variant > [class^="col-"],
.bo-pdp__variants .chosen-variant > [class*=" col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
.bo-pdp__variants .category-picker { width: 100%; }
.bo-pdp__variant-label { display: block; font-size: 0.8125rem; color: var(--bo-muted-foreground); margin: 0.75rem 0 0.25rem; }
.bo-pdp__select {
  width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--bo-border, #d9d7d0);
  border-radius: 0; background-color: transparent; padding: 0.7rem 2.25rem 0.7rem 0.85rem;
  font: inherit; font-size: 0.875rem; line-height: 1.4; height: auto; min-height: 0;
  color: var(--bo-foreground); margin-bottom: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377787d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
}
.bo-pdp__select:focus { outline: none; border-color: var(--bo-blue); }
.bo-pdp__variant-imgs img { max-width: 100%; height: auto; }

/* Cena */
.bo-pdp__price { margin-top: 2rem; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.bo-pdp__oldprice { font-size: 0.9375rem; color: var(--bo-muted-foreground); text-decoration: line-through; }
.bo-pdp__price-now { font-size: 1.875rem; font-weight: 400; }
@media (min-width: 768px) { .bo-pdp__price-now { font-size: 2.25rem; } }
.bo-pdp__price-note { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--bo-muted-foreground); }

/* Akcie */
.bo-pdp__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.bo-pdp__actions .addtocart svg { transition: transform 0.3s ease; }
.bo-pdp__actions .addtocart:hover svg { transform: translateX(4px); }
.bo-pdp__listen { margin-top: 1rem; }

/* Benefity */
.bo-pdp__benefits {
  margin: 2.5rem 0 0; padding: 2rem 0 0; list-style: none;
  border-top: 1px solid var(--bo-border, #e2e0da);
  display: grid; gap: 1rem; font-size: 0.875rem; color: var(--bo-muted-foreground);
}
@media (min-width: 640px) { .bo-pdp__benefits { grid-template-columns: repeat(3, 1fr); } }
.bo-pdp__benefits li { display: flex; align-items: center; gap: 0.5rem; }
.bo-pdp__benefits svg { color: var(--bo-blue); flex-shrink: 0; }

/* ==========================================================================
   FILTER SORTIMENTOV (view-filter) — pills pod hlavičkou kategórie
   ========================================================================== */
/* Filter je vnútri .bo-section (má horizontálny padding), preto inner bez
   ďalšieho paddingu/centrovania — pills začínajú vľavo, zarovnané s produktmi. */
.bo-cat-filter {
  border-bottom: 1px solid var(--bo-border, #e2e0da);
  margin-bottom: 2.5rem;
}
.bo-cat-filter__inner {
  padding: 0 0 1rem; margin: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.bo-cat-filter__list {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
@media (min-width: 768px) { .bo-cat-filter__list { flex-wrap: wrap; gap: 0.5rem 2rem; } }
/* textové taby (ako na Limitovaných edíciách / bestselleroch): uppercase, podčiarknutie na aktívnom */
.bo-cat-filter__pill {
  display: inline-block; white-space: nowrap; cursor: pointer;
  font: inherit; background: none; border: 0;
  border-bottom: 1px solid transparent; border-radius: 0;
  padding: 0 0 0.3rem; margin: 0;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bo-muted-foreground, #77787d); text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bo-cat-filter__pill:hover,
.bo-cat-filter__pill:focus { color: var(--bo-foreground); outline: none; }
.bo-cat-filter__pill.is-active {
  color: var(--bo-foreground); border-bottom-color: var(--bo-blue);
}

/* ==========================================================================
   POKLADŇA (checkout.html) — Lovable pokladna.tsx
   ========================================================================== */
.bo-checkout { color: var(--bo-foreground); }
.bo-checkout__head { border-bottom: 1px solid var(--bo-border, #e2e0da); background: var(--bo-sand); padding: 2.5rem 1.5rem; }
@media (min-width: 768px) { .bo-checkout__head { padding: 3rem 3.5rem; } }
.bo-checkout__head-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.bo-checkout__title { margin: 0.75rem 0 0; font-size: clamp(2rem, 9vw, 2.5rem); line-height: 0.95; font-weight: 400; overflow-wrap: break-word; }
@media (min-width: 768px) { .bo-checkout__title { font-size: 3.75rem; } }
.bo-checkout__title .accent { color: var(--bo-blue); }
.bo-checkout__steps { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bo-muted-foreground); }
.bo-checkout__steps li.is-active { color: var(--bo-foreground); border-bottom: 1px solid var(--bo-blue); padding-bottom: 0.25rem; }

.bo-checkout__body { display: grid; gap: 3rem; padding: 3rem 1.5rem; }
@media (min-width: 768px) { .bo-checkout__body { padding: 4rem 3.5rem; } }
@media (min-width: 1024px) { .bo-checkout__body { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; } }

.bo-checkout__form { display: flex; flex-direction: column; gap: 3.5rem; }
.bo-checkout__section { border: 0; margin: 0; padding: 0; min-width: 0; }
.bo-checkout__section legend {
  margin-bottom: 1.5rem; padding: 0;
  float: none; width: auto; display: block; border: 0; font-size: inherit; line-height: inherit;
}

.bo-field-grid { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bo-field-grid { grid-template-columns: 1fr 1fr; } }
.bo-field { display: block; }
.bo-field--wide { grid-column: 1 / -1; }
.bo-field > span { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bo-muted-foreground); margin-bottom: 0.5rem; }
.bo-checkout .form-control {
  width: 100%; border: 0; border-bottom: 1px solid var(--bo-border, #d9d7d0); background: transparent;
  padding: 0.5rem 0; font: inherit; font-size: 0.875rem; color: var(--bo-foreground); border-radius: 0; box-shadow: none; height: auto;
  transition: border-color 0.2s ease;
}
.bo-checkout .form-control:focus { outline: none; border-bottom-color: var(--bo-blue); box-shadow: none; }
.bo-checkout .form-control::placeholder { color: var(--bo-muted-foreground); }
.bo-select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377787d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.25rem center; padding-right: 1.5rem; }
.bo-textarea { border: 1px solid var(--bo-border, #d9d7d0) !important; padding: 1rem !important; }
.bo-textarea:focus { border-color: var(--bo-blue) !important; }

.bo-checkout__check { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; cursor: pointer; }
.bo-checkout__check input { width: 1rem; height: 1rem; accent-color: var(--bo-blue); flex-shrink: 0; }
.bo-checkout__check--small { align-items: flex-start; font-size: 0.75rem; color: var(--bo-muted-foreground); gap: 0.625rem; }
.bo-checkout__check--small input { width: 0.875rem; height: 0.875rem; margin-top: 0.15rem; }
.bo-checkout__check-icon { display: inline-flex; align-items: center; color: var(--bo-blue); line-height: 0; }
.bo-checkout__check a { color: var(--bo-blue); text-decoration: underline; text-underline-offset: 2px; }
.bo-checkout__check.error span { color: #c0392b; }

/* Radio options (shipping / payment) */
.bo-checkout__options { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bo-border, #e2e0da); }
.bo-option { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--bo-border, #e2e0da); cursor: pointer; color: var(--bo-muted-foreground); }
.bo-option input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--bo-blue); flex-shrink: 0; }
.bo-option__icon { display: inline-flex; flex-shrink: 0; color: var(--bo-muted-foreground); line-height: 0; }
.bo-option.is-active .bo-option__icon { color: var(--bo-foreground); }
.bo-option__body { flex: 1; min-width: 0; }
.bo-option__title { display: block; font-size: 0.9375rem; color: var(--bo-foreground); }
.bo-option__note { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--bo-muted-foreground); }
.bo-option__price { flex-shrink: 0; font-size: 0.875rem; color: var(--bo-muted-foreground); white-space: nowrap; }
.bo-option__price.accent, .bo-option .accent { color: var(--bo-blue); }
.bo-option.is-active .bo-option__title { color: var(--bo-foreground); }
/* fieldset/kontajnery pokladne musia mať plnú šírku (fieldset má default min-width:min-content) */
.bo-checkout__section { display: block; width: 100%; min-width: 0; }
.bo-checkout__options { display: block; width: 100%; }
.bo-checkout__options > li { display: block; width: 100%; float: none; margin: 0; }

/* Mini-košík CTA "Zobraziť košík" — rovnaký pill ako v pokladni.
   Vysoká špecificita + !important, lebo tlačidlo je vnútri hlavičky (.opencart)
   kde header anchor štýly prepisujú border/farbu. */
.bo-header .bo-minicart__cta,
.bo-minicart .bo-minicart__cta,
a.bo-minicart__cta {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; margin-top: 1.5rem; padding: 0.9rem 1.75rem;
  border: 1px solid var(--bo-foreground, #24262d) !important;
  border-radius: 9999px !important;
  background-color: transparent !important;
  color: var(--bo-foreground, #24262d) !important;
  font-size: 0.9375rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.bo-header .bo-minicart__cta:hover, a.bo-minicart__cta:hover,
.bo-header .bo-minicart__cta:focus, a.bo-minicart__cta:focus {
  background-color: var(--bo-blue) !important;
  border-color: var(--bo-blue) !important;
  color: var(--bo-blue-foreground, #fbfbf9) !important;
}
a.bo-minicart__cta svg { transition: transform 0.3s ease; }
a.bo-minicart__cta:hover svg { transform: translateX(4px); }

/* Sumár */
.bo-checkout__summary-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .bo-checkout__summary-wrap { position: sticky; top: 6rem; } }
.bo-checkout-summary { border: 1px solid var(--bo-border, #e2e0da); padding: 1.5rem; }
@media (min-width: 768px) { .bo-checkout-summary { padding: 2rem; } }
.bo-checkout-summary__items { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.bo-checkout-summary__item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; font-size: 0.875rem; }
.bo-checkout-summary__variant { display: block; font-size: 0.75rem; color: var(--bo-muted-foreground); }
.bo-checkout-summary__price { flex-shrink: 0; white-space: nowrap; }
.bo-checkout-summary__lines { margin: 1.5rem 0 0; border-top: 1px solid var(--bo-border, #e2e0da); padding-top: 1.5rem; }
.bo-checkout-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; margin-bottom: 0.75rem; }
.bo-checkout-summary__row dt { color: var(--bo-muted-foreground); }
.bo-checkout-summary__row dd { margin: 0; }
.bo-checkout-summary__row--total { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bo-border, #e2e0da); font-size: 1rem; }
.bo-checkout-summary__consents { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bo-checkout__submit { width: 100%; margin-top: 1.5rem; border-radius: 9999px; }
input.bo-checkout__submit { -webkit-appearance: none; appearance: none; }
.bo-checkout-summary__benefits { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.bo-checkout-summary__benefits li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; font-size: 0.75rem; color: var(--bo-muted-foreground); }
.bo-checkout-summary__benefits svg { flex-shrink: 0; }

.bo-checkout-help { background: var(--bo-ink); color: var(--bo-ink-foreground); padding: 1.5rem; }
@media (min-width: 768px) { .bo-checkout-help { padding: 2rem; } }
.bo-checkout-help .bo-eyebrow { color: rgba(246,246,244,0.7); }
.bo-checkout-help__text { margin: 0.75rem 0 0; font-size: 0.875rem; opacity: 0.85; line-height: 1.5; }
.bo-checkout-help__text a { color: inherit; text-decoration: underline; }
.bo-checkout-help__link {
  display: inline-block; margin-top: 1rem; font-size: 0.875rem;
  color: var(--bo-ink-foreground); text-decoration: underline; text-underline-offset: 4px;
}
.bo-checkout-help__link:hover { color: #fff; }

.bo-checkout .alert-danger { background: #fdecea; color: #c0392b; padding: 0.85rem 1rem; font-size: 0.875rem; margin-bottom: 1.5rem; border-radius: 2px; }

/* ==========================================================================
   PDP GALÉRIA — ovládače carouselu v štýle hero slidera
   (kruhové šípky + vodorovné čiarkové indikátory, tmavé na svetlom pozadí)
   ========================================================================== */
.bo-pdp__gallery .slider-nav-container {
  position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 4; text-align: center;
}
.bo-pdp__gallery .slider-nav {
  display: inline-flex !important; align-items: center !important; gap: 1rem;
}

/* kruhové šípky — tvrdo prebi slick default (position:absolute; top:50%) aj navbar float */
.bo-pdp__gallery .slick-prev,
.bo-pdp__gallery .slick-next,
.bo-pdp__gallery .product-slider .slick-prev,
.bo-pdp__gallery .product-slider .slick-next {
  position: static !important; float: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important;
  width: 38px !important; height: 38px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid rgba(36, 38, 45, 0.25);
  background: transparent; cursor: pointer; flex-shrink: 0; line-height: 0; vertical-align: middle;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bo-pdp__gallery .slick-prev { order: 1; }
.bo-pdp__gallery .slider-nav .slick-dots { order: 2; }
.bo-pdp__gallery .slick-next { order: 3; }
.bo-pdp__gallery .slick-prev:hover,
.bo-pdp__gallery .slick-next:hover {
  background-color: var(--bo-foreground); border-color: var(--bo-foreground);
}
/* prekresli obsah šípky na SVG chevron (skry pôvodné ‹ › glyfy) */
.bo-pdp__gallery .product-slider .slick-prev:before,
.bo-pdp__gallery .product-slider .slick-next:before,
.bo-pdp__gallery .slick-prev:before,
.bo-pdp__gallery .slick-next:before {
  content: "" !important; font-family: inherit !important; font-size: 0 !important;
  display: block; width: 14px; height: 14px; opacity: 1 !important; color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
.bo-pdp__gallery .slick-prev:before,
.bo-pdp__gallery .product-slider .slick-prev:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.bo-pdp__gallery .slick-next:before,
.bo-pdp__gallery .product-slider .slick-next:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
.bo-pdp__gallery .slick-prev:hover:before,
.bo-pdp__gallery .product-slider .slick-prev:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.bo-pdp__gallery .slick-next:hover:before,
.bo-pdp__gallery .product-slider .slick-next:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* vodorovné čiarkové indikátory (ako hero __dots) — prebi staré .product-slider dots */
.bo-pdp__gallery .slick-dots,
.bo-pdp__gallery .product-slider .slick-dots {
  display: inline-flex !important; align-items: center !important; gap: 0.5rem;
  height: 38px !important; margin: 0 !important; padding: 0 !important; width: auto !important;
  list-style: none; align-self: center; vertical-align: middle;
}
.bo-pdp__gallery .slick-dots li,
.bo-pdp__gallery .product-slider .slick-dots li {
  display: inline-flex !important; align-items: center !important; justify-content: center;
  width: auto !important; height: 38px !important; margin: 0 !important; padding: 0 !important;
  vertical-align: middle; top: auto !important;
}
.bo-pdp__gallery .slick-dots li button,
.bo-pdp__gallery .product-slider .slick-dots li button {
  position: relative !important; width: 28px !important; height: 2px !important; padding: 0 !important;
  border: 0 !important; font-size: 0; text-indent: 0;
  background-color: rgba(36, 38, 45, 0.25) !important; cursor: pointer;
  transition: background-color 0.2s ease;
}
/* skry starú čiarku (::before) z pôvodnej témy */
.bo-pdp__gallery .slick-dots li button::before,
.bo-pdp__gallery .product-slider .slick-dots li button::before {
  content: "" !important; display: none !important;
}
.bo-pdp__gallery .slick-dots li button:hover,
.bo-pdp__gallery .product-slider .slick-dots li button:hover {
  background-color: rgba(36, 38, 45, 0.5) !important;
}
/* aktívny indikátor — B&O modrá */
.bo-pdp__gallery .slick-dots li.slick-active button,
.bo-pdp__gallery .product-slider .slick-dots li.slick-active button {
  background-color: var(--bo-blue) !important;
}

/* PDP galéria na mobile — navigácia POD obrázkom (nie prekrytie produktu).
   Slick potrebuje overflow:hidden na slick-list; preto NEmeníme slider samotný,
   len galérii pridáme spodný pruh (padding-bottom) a nav-container doň posunieme. */
@media (max-width: 767px) {
  .bo-pdp__gallery {
    aspect-ratio: auto;
    padding-bottom: 6rem;   /* miesto pre navigáciu pod obrázkom + odstup */
    background: transparent;
  }
  /* obrázková plocha ostáva štvorec so svojím pozadím a overflow */
  .bo-pdp__gallery .product-slider {
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--bo-secondary);
  }
  /* nav-container do spodného pruhu (pod obrázkom), stále absolútny ale mimo štvorca */
  .bo-pdp__gallery .slider-nav-container {
    bottom: 0; top: auto; left: 0; right: 0; transform: none !important;
    padding: 1.75rem 0 0.75rem; text-align: center;
  }
  .bo-pdp__gallery .slider-nav { gap: 0.75rem !important; background: none; }
  .bo-pdp__gallery .slick-prev,
  .bo-pdp__gallery .slick-next,
  .bo-pdp__gallery .product-slider .slick-prev,
  .bo-pdp__gallery .product-slider .slick-next {
    width: 32px !important; height: 32px !important;
  }
  .bo-pdp__gallery .slick-dots,
  .bo-pdp__gallery .product-slider .slick-dots { flex-wrap: nowrap; }
  .bo-pdp__gallery .slick-dots li button,
  .bo-pdp__gallery .product-slider .slick-dots li button { width: 20px !important; }
}

/* ==========================================================================
   PDP VLASTNOSTI (view-properties) — Lovable akordeón, biele pozadie
   ========================================================================== */
.bo-pdp-props { background: var(--bo-background, #fbfbf9); padding: 0 1.5rem 3rem; }
@media (min-width: 768px) { .bo-pdp-props { padding: 0 3.5rem 4rem; } }
.bo-pdp-props__inner { width: 100%; }

.bo-pdp-acc { border-top: 1px solid var(--bo-border, #e2e0da); }
.bo-pdp-acc:last-of-type { border-bottom: 1px solid var(--bo-border, #e2e0da); }
.bo-pdp-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 1.5rem 0; margin: 0; text-align: left;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bo-foreground); transition: color 0.2s ease;
}
.bo-pdp-acc__head:hover { color: var(--bo-blue); }
.bo-pdp-acc__title { flex: 1; }
.bo-pdp-acc__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.bo-pdp-acc__icon::before,
.bo-pdp-acc__icon::after {
  content: ""; position: absolute; background-color: currentColor;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bo-pdp-acc__icon::before { top: 50%; left: 0; width: 14px; height: 1.5px; transform: translateY(-50%); }
.bo-pdp-acc__icon::after { left: 50%; top: 0; width: 1.5px; height: 14px; transform: translateX(-50%); }
.bo-pdp-acc.is-open .bo-pdp-acc__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.bo-pdp-acc__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.bo-pdp-acc__list { margin: 0; padding: 0 0 1.75rem; }
.bo-pdp-acc__row { padding: 0.75rem 0; border-bottom: 1px solid var(--bo-border, #efece5); }
.bo-pdp-acc__row:last-child { border-bottom: 0; }
.bo-pdp-acc__row dt {
  margin: 0; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bo-muted-foreground); margin-bottom: 0.25rem;
}
.bo-pdp-acc__row dd { margin: 0; font-size: 0.9375rem; color: var(--bo-foreground); }
.bo-pdp-acc__row dd a { color: var(--bo-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Na stiahnutie */
.bo-pdp-files { padding-top: 2.5rem; }
.bo-pdp-files__grid { display: grid; gap: 1rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bo-pdp-files__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bo-pdp-files__grid { grid-template-columns: repeat(3, 1fr); } }
.bo-pdp-files__item {
  display: flex; align-items: center; gap: 0.85rem; padding: 1rem;
  border: 1px solid var(--bo-border, #e2e0da); text-decoration: none; color: var(--bo-foreground);
  transition: border-color 0.2s ease;
}
.bo-pdp-files__item:hover { border-color: var(--bo-foreground); }
.bo-pdp-files__item svg { flex-shrink: 0; color: var(--bo-muted-foreground); }
.bo-pdp-files__name { display: block; font-size: 0.875rem; }
.bo-pdp-files__dl { display: block; font-size: 0.75rem; color: var(--bo-muted-foreground); margin-top: 0.15rem; }

/* ==========================================================================
   PRODUCT CAROUSEL (content-carousel) — rovnaké ovládače ako PDP galéria
   ========================================================================== */
.product-carousel .slider-nav {
  display: inline-flex !important; align-items: center !important; gap: 1rem;
}
/* kruhové šípky */
.product-carousel .slick-prev,
.product-carousel .slick-next {
  position: static !important; float: none !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; margin: 0 !important;
  width: 38px !important; height: 38px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 9999px; border: 1px solid rgba(36, 38, 45, 0.25);
  background: transparent; cursor: pointer; flex-shrink: 0; line-height: 0; vertical-align: middle;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.product-carousel .slick-prev { order: 1; }
.product-carousel .slider-nav .slick-dots { order: 2; }
.product-carousel .slick-next { order: 3; }
.product-carousel .slick-prev:hover,
.product-carousel .slick-next:hover { background-color: var(--bo-foreground); border-color: var(--bo-foreground); }
.product-carousel .slick-prev:before,
.product-carousel .slick-next:before {
  content: "" !important; font-family: inherit !important; font-size: 0 !important;
  display: block; width: 14px; height: 14px; opacity: 1 !important; color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
.product-carousel .slick-prev:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.product-carousel .slick-next:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
.product-carousel .slick-prev:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.product-carousel .slick-next:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
/* vodorovné čiarkové indikátory, modrý aktívny */
.product-carousel .slick-dots {
  display: inline-flex !important; align-items: center !important; gap: 0.5rem;
  height: 38px !important; margin: 0 !important; padding: 0 !important; width: auto !important;
  list-style: none; align-self: center; vertical-align: middle;
}
.product-carousel .slick-dots li {
  display: inline-flex !important; align-items: center !important; justify-content: center;
  width: auto !important; height: 38px !important; margin: 0 !important; padding: 0 !important; top: auto !important;
}
.product-carousel .slick-dots li button {
  position: relative !important; width: 28px !important; height: 2px !important; padding: 0 !important;
  border: 0 !important; font-size: 0; text-indent: 0;
  background-color: rgba(36, 38, 45, 0.25) !important; cursor: pointer; transition: background-color 0.2s ease;
}
.product-carousel .slick-dots li button::before { content: "" !important; display: none !important; }
.product-carousel .slick-dots li button:hover { background-color: rgba(36, 38, 45, 0.5) !important; }
.product-carousel .slick-dots li.slick-active button { background-color: var(--bo-blue) !important; }

/* ==========================================================================
   PDP SHOWROOM PÁS (view-product-showroom) — lifestyle promo + CTA
   ========================================================================== */
.bo-pdp-showroom {
  position: relative; width: 100%; overflow: hidden;
  height: 60vh; min-height: 420px; max-height: 640px;
  background-color: var(--bo-ink);
}
.bo-pdp-showroom__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.bo-pdp-showroom__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,30,36,0.75) 0%, rgba(28,30,36,0.15) 45%, transparent 75%);
}
.bo-pdp-showroom__content {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 2rem 1.5rem; color: var(--bo-ink-foreground);
}
@media (min-width: 768px) { .bo-pdp-showroom__content { padding: 3.5rem; } }
.bo-pdp-showroom__eyebrow { color: rgba(246,246,244,0.7); margin: 0; }
.bo-pdp-showroom__title {
  margin: 0.75rem 0 0; max-width: 34rem; font-size: 1.5rem; line-height: 1.15; font-weight: 400;
  color: var(--bo-ink-foreground);
}
@media (min-width: 768px) { .bo-pdp-showroom__title { font-size: 2.25rem; } }
.bo-pdp-showroom__title .accent { color: var(--bo-blue-foreground); }
.bo-pdp-showroom__cta { margin-top: 2rem; }
.bo-pdp-showroom__cta svg { transition: transform 0.3s ease; }
.bo-pdp-showroom__cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   KROKOVÁ POKLADŇA (checkout.html) — stepper, panely, karty
   ========================================================================== */
/* plná modrá pill (Pokračovať / Objednať) */
.bo-pill-blue-solid {
  border: 1px solid var(--bo-blue); background-color: var(--bo-blue); color: var(--bo-blue-foreground);
}
.bo-pill-blue-solid:hover, .bo-pill-blue-solid:focus {
  background-color: #0a12c4; border-color: #0a12c4; color: var(--bo-blue-foreground);
}
input.bo-pill-blue-solid { -webkit-appearance: none; appearance: none; }

/* Hlavička so stepperom */
.bo-checkout__head-top {
  display: flex; flex-direction: column; gap: 2rem;
}
@media (min-width: 1024px) { .bo-checkout__head-top { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.bo-stepper { width: 100%; max-width: 48rem; }
.bo-stepper__list { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.bo-stepper__item { display: flex; align-items: center; flex: 1; }
.bo-stepper__item:last-child { flex: none; }
.bo-stepper__btn {
  display: flex; align-items: center; gap: 0.75rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.bo-stepper__btn:disabled { cursor: default; }
.bo-stepper__num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  border: 1px solid var(--bo-border, #d9d7d0); background: var(--bo-background); color: var(--bo-muted-foreground);
  font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease;
}
.bo-stepper__item.is-active .bo-stepper__num,
.bo-stepper__item.is-done .bo-stepper__num {
  border-color: var(--bo-blue); background: var(--bo-blue); color: var(--bo-blue-foreground);
}
.bo-stepper__item.is-done .bo-stepper__num { font-size: 0; }
.bo-stepper__item.is-done .bo-stepper__num::after {
  content: ""; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfbf9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.bo-stepper__label { display: none; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bo-muted-foreground); }
@media (min-width: 768px) { .bo-stepper__label { display: block; } }
.bo-stepper__item.is-active .bo-stepper__label,
.bo-stepper__item.is-done .bo-stepper__label { color: var(--bo-foreground); }
.bo-stepper__line { flex: 1; height: 2px; margin: 0 0.5rem; background: var(--bo-border, #e2e0da); align-self: flex-start; margin-top: 1.05rem; }
@media (min-width: 768px) { .bo-stepper__line { margin: 1.05rem 1rem 0; } }
.bo-stepper__line-fill { display: block; height: 100%; width: 0; background: var(--bo-blue); transition: width 0.5s ease; }
.bo-stepper__bar { margin-top: 1.5rem; height: 4px; border-radius: 9999px; overflow: hidden; background: var(--bo-border, #e2e0da); }
.bo-stepper__bar-fill { display: block; height: 100%; width: 25%; background: var(--bo-blue); transition: width 0.5s ease; }

/* Info banner */
.bo-checkout__infobar {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem;
  border: 1px solid rgba(6,13,170,0.2); background: rgba(6,13,170,0.03);
  font-size: 0.875rem; margin-bottom: 2.5rem;
}
.bo-checkout__infobar svg { color: var(--bo-blue); flex-shrink: 0; margin-top: 0.15rem; }
.bo-checkout__infobar p { margin: 0; }
.bo-checkout__infobar .accent { color: var(--bo-blue); }

/* Step panel (modrý ľavý okraj + číslo) */
.bo-step-panel { position: relative; border-left: 2px solid var(--bo-blue); padding-left: 1.5rem; }
@media (min-width: 768px) { .bo-step-panel { padding-left: 2.5rem; } }
.bo-step-panel__num {
  position: absolute; left: -11px; top: 0; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 9999px; background: var(--bo-blue); color: var(--bo-blue-foreground);
  font-size: 0.625rem; font-weight: 500;
}
.bo-step-panel__content { margin-top: 1.5rem; }

/* Radio karty (doručenie / platba) */
.bo-checkout__cards { display: grid; gap: 0.75rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .bo-checkout__cards { grid-template-columns: 1fr 1fr; } }
.bo-card-option {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem; cursor: pointer;
  border: 1px solid var(--bo-border, #d9d7d0); border-radius: 8px; padding: 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bo-card-option:hover { border-color: rgba(36,38,45,0.35); }
.bo-card-option.is-active { border-color: var(--bo-blue); background: rgba(6,13,170,0.04); }
.bo-card-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bo-card-option__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.bo-card-option__label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--bo-foreground); }
.bo-card-option__label svg { flex-shrink: 0; color: var(--bo-blue); }
.bo-card-option__check { flex-shrink: 0; color: var(--bo-blue); opacity: 0; transition: opacity 0.2s ease; }
.bo-card-option.is-active .bo-card-option__check { opacity: 1; }
.bo-card-option__note { font-size: 0.75rem; color: var(--bo-muted-foreground); }
.bo-card-option__price { font-size: 0.875rem; font-weight: 500; }
.bo-card-option__price.accent { color: var(--bo-blue); }

/* Rekapitulácia (krok 4) */
.bo-checkout-recap { display: grid; gap: 1.5rem 2rem; border-top: 1px solid var(--bo-border, #e2e0da); padding-top: 1.5rem; margin: 0; }
@media (min-width: 640px) { .bo-checkout-recap { grid-template-columns: repeat(3, 1fr); } }
.bo-checkout-recap dt { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bo-muted-foreground); }
.bo-checkout-recap dd { margin: 0.5rem 0 0; font-size: 0.875rem; }
.bo-checkout__note-block { margin-top: 3rem; }
.bo-checkout__note-block .bo-eyebrow { margin-bottom: 1.5rem; }
.bo-checkout__consents { margin-top: 3rem; }
.bo-checkout__consents .bo-eyebrow { margin-bottom: 1.5rem; }
.bo-checkout__consents .bo-checkout__check--small { margin-bottom: 0.75rem; }

/* Navigácia */
.bo-checkout__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--bo-border, #e2e0da); padding-top: 2rem; margin-top: 3rem;
}
.bo-checkout__back svg { transition: transform 0.3s ease; }
.bo-checkout__back:hover svg { transform: translateX(-4px); }
.bo-checkout__next svg { transition: transform 0.3s ease; }
.bo-checkout__next:hover svg { transform: translateX(4px); }
.bo-checkout__submit-wrap { display: inline-flex; }
.is-error { border-color: #c0392b !important; }

/* ==========================================================================
   AUTH — prihlásenie / registrácia (login-form, registration-form)
   ========================================================================== */
.bo-auth {
  display: flex; justify-content: center;
  padding: 4rem 1.5rem; background: var(--bo-background, #fbfbf9);
}
@media (min-width: 768px) { .bo-auth { padding: 6rem 3.5rem; } }
.bo-auth__card { width: 100%; max-width: 30rem; }
.bo-auth__card--wide { max-width: 52rem; }
.bo-auth--wide { }

.bo-auth__title { margin: 0.75rem 0 0; font-size: 2.25rem; line-height: 1; font-weight: 400; }
@media (min-width: 768px) { .bo-auth__title { font-size: 3rem; } }
.bo-auth__title .accent { color: var(--bo-blue); }
.bo-auth__lead { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--bo-muted-foreground); }

.bo-auth__form { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.bo-auth__form--wide { gap: 2.5rem; }

/* segmentový switcher (fyzická / právnická) */
.bo-auth__switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bo-auth__seg { position: relative; cursor: pointer; }
.bo-auth__seg input { position: absolute; opacity: 0; pointer-events: none; }
.bo-auth__seg span {
  display: block; text-align: center; padding: 0.85rem 1rem;
  border: 1px solid var(--bo-border, #d9d7d0); border-radius: 8px;
  font-size: 0.8125rem; font-weight: 500; color: var(--bo-muted-foreground);
  transition: all 0.2s ease;
}
.bo-auth__seg input:checked + span {
  border-color: var(--bo-blue); background: var(--bo-blue); color: var(--bo-blue-foreground);
}

.bo-auth__section { }
.bo-auth__section .bo-eyebrow { margin-bottom: 1.25rem; }
.bo-auth__section + .bo-auth__section { padding-top: 0.5rem; }

/* pole (label + input) — spoločné s pokladňou */
.bo-auth .bo-field > span { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bo-muted-foreground); margin-bottom: 0.5rem; }
.bo-auth .form-control {
  width: 100%; border: 0; border-bottom: 1px solid var(--bo-border, #d9d7d0); background: transparent;
  padding: 0.5rem 0 0.5rem 0.5rem; font: inherit; font-size: 0.875rem; color: var(--bo-foreground); border-radius: 0; box-shadow: none; height: auto;
  transition: border-color 0.2s ease;
}
.bo-auth .form-control:focus { outline: none; border-bottom-color: var(--bo-blue); box-shadow: none; }
.bo-auth select.form-control.bo-select {
  appearance: none; -webkit-appearance: none; line-height: 1.4; padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377787d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.25rem center;
}
.bo-auth .form-control.border-danger, .bo-auth .form-control.is-error { border-bottom-color: #c0392b; }
.bo-auth .error-message { display: none; margin-top: 0.35rem; font-size: 0.75rem; color: #c0392b; }

.bo-auth__consents { display: flex; flex-direction: column; gap: 0.75rem; }
.bo-auth__recaptcha { margin-top: 0.5rem; }
.bo-auth__submit { align-self: flex-start; margin-top: 0.5rem; }
.bo-auth__submit svg { transition: transform 0.3s ease; }
.bo-auth__submit:hover svg { transform: translateX(4px); }

.bo-auth__switch { margin-top: 2rem; font-size: 0.875rem; color: var(--bo-muted-foreground); text-align: center; }
.bo-auth__card--wide .bo-auth__switch { text-align: left; }
.bo-auth__switch a { color: var(--bo-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Bootstrap modaly nad B&O header (header má z-index:1050) — auth/error modaly
   ========================================================================== */
.modal-backdrop { z-index: 2000; }
.modal { z-index: 2010; }