/* Section layouts — replicating spokar.com structure with PPTX modifications */

/* ========== HEADER ========== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition:
    background var(--t-base) var(--ease-out-quint),
    backdrop-filter var(--t-base) var(--ease-out-quint),
    padding var(--t-base) var(--ease-out-quint),
    border-color var(--t-base) var(--ease-out-quint);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--grey-100);
  padding: 0.75rem 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--slate);
  line-height: 0;
  transition: opacity var(--t-fast) var(--ease-out-quint);
}

.brand:hover { opacity: 0.75; }

.brand svg {
  display: block;
  height: 32px;
  width: auto;
  transition: height var(--t-base) var(--ease-out-quint);
}

.site-header.is-stuck .brand svg { height: 26px; }

.brand__name {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
  color: var(--slate);
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0.04em;
}

.lang-switcher__btn {
  color: var(--slate);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.lang-switcher__btn:hover {
  opacity: 1;
}

.lang-switcher__btn.is-active {
  opacity: 1;
  font-weight: 700;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out-quint);
}

.nav a:hover::after,
.nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Header icon row — account + cart icon-only links (replaces text "Kosik" CTA) */
.header-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 3px;
  color: var(--slate);
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint);
}

.header-icon:hover,
.header-icon:focus-visible {
  background: var(--grey-100);
  color: var(--slate);
  outline: none;
}

.header-icon__svg {
  width: 22px;
  height: 22px;
  display: block;
}

.header-icon__badge {
  position: absolute;
  top: 0.25rem;
  right: 0.15rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.header-icon__badge[hidden] {
  display: none;
}

/* Nav "Produkty" trigger — button styled like a nav link, opens mega-menu overlay */
.nav__trigger {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
  background: none;
  border: 0;
  padding: 0 0 2px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: inherit;
}

.nav__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out-quint);
}

.nav__trigger:hover::after,
.nav__trigger:focus-visible::after,
.nav__trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.nav__trigger-icon {
  width: 10px;
  height: 6px;
  transition: transform var(--t-fast) var(--ease-out-quint);
}

.nav__trigger[aria-expanded="true"] .nav__trigger-icon {
  transform: rotate(180deg);
}

/* Hamburger toggle — visible on mobile only, animates to X on open */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 32px;
  height: 28px;
  padding: 6px 4px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--slate);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--t-fast) var(--ease-out-quint),
    opacity var(--t-fast) var(--ease-out-quint);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 880px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { gap: 0.875rem; }
  .header-icons { gap: 0.125rem; }
  /* Lang switcher moves into the hamburger drawer on mobile */
  .site-header__inner > .lang-switcher { display: none; }
}

/* Products overlay — full-screen panel, vertical list of 6 products (img + name) */
.products-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  padding-top: 5.5rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out-quint);
}

.products-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.products-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.products-overlay__list > li {
  border-bottom: 1px solid var(--grey-100);
}

.products-overlay__list > li:first-child {
  border-top: 1px solid var(--grey-100);
}

.products-overlay__row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(0.875rem, 2vw, 1.5rem) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  color: var(--slate);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out-quint);
}

.products-overlay__list > li:hover,
.products-overlay__list > li:focus-within {
  background: var(--olive-soft);
}

.products-overlay__row:hover,
.products-overlay__row:focus-visible {
  outline: none;
}

.products-overlay__row:hover .spk-hero-mini,
.products-overlay__row:focus-visible .spk-hero-mini {
  transform: scale(1.05);
}

.products-overlay__name {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate);
}

/* Close button — sticks just below the header so it stays reachable while the
   overlay scrolls. Essential on mobile, where the "Produkty" trigger is hidden
   and there is no Escape key to dismiss the full-screen panel. */
.products-overlay__bar {
  position: sticky;
  top: var(--header-h, 3.5rem);
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 0.75rem;
}

.products-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--grey-100);
  border-radius: 999px;
  background: #fff;
  color: var(--slate);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out-quint),
              border-color var(--t-fast) var(--ease-out-quint);
}

.products-overlay__close svg { width: 20px; height: 20px; display: block; }

.products-overlay__close:hover,
.products-overlay__close:focus-visible {
  background: var(--olive-soft);
  border-color: var(--olive);
  outline: none;
}

/* Mobile menu drawer — slides in from right, hidden on desktop */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: var(--white);
  z-index: 99;
  box-shadow: -8px 0 32px rgba(30, 37, 43, 0.15);
  transform: translateX(100%);
  transition: transform var(--t-base) var(--ease-out-quint);
  overflow-y: auto;
  padding: 5.5rem 1.25rem 2rem;
}

@media (max-width: 880px) {
  .mobile-menu { display: block; }
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__products {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.mobile-menu__products a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.5rem;
  border-radius: var(--radius-md);
  color: var(--slate);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out-quint);
}

.mobile-menu__products a:hover,
.mobile-menu__products a:focus-visible {
  background: var(--grey-100);
  outline: none;
}

.mobile-menu__product-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--grey-100);
  display: grid;
  gap: 0.25rem;
}

.mobile-menu__links a {
  display: block;
  padding: 0.625rem 0.5rem;
  font-size: 0.95rem;
  color: var(--slate);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--t-fast) var(--ease-out-quint);
}

.mobile-menu__links a:hover,
.mobile-menu__links a:focus-visible {
  background: var(--grey-100);
  outline: none;
}

/* Lang switcher inside the drawer — larger touch targets, separated by a rule */
.mobile-menu__lang {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grey-100);
}

.mobile-menu__lang .lang-switcher {
  gap: 0.5rem;
  font-size: 1rem;
}

.mobile-menu__lang .lang-switcher__btn {
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-md);
}

.mobile-menu__lang .lang-switcher__btn:hover,
.mobile-menu__lang .lang-switcher__btn:focus-visible {
  background: var(--grey-100);
  outline: none;
}

/* Mini hero packshot — olive circle with static hero halves/center inside.
 * Used by .products-overlay (desktop) and .mobile-menu (drawer). No animation:
 * the wrapping panel fades in, the imagery itself stays still.
 *
 * Sized through the --overlay / --drawer context modifiers; halves and center
 * are absolutely positioned, hero variant decides which slots render. Per-SKU
 * modifiers mirror the PDP .product-animation--<sku> tuning at small scale.
 */
.spk-hero-mini {
  position: relative;
  display: block;
  border-radius: 50%;
  background: var(--olive);
  overflow: hidden;
  flex-shrink: 0;
  transform: scale(1);
  transition: transform 1200ms var(--ease-out-quint);
}

.spk-hero-mini--overlay {
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
}

.spk-hero-mini--drawer {
  width: 44px;
  height: 44px;
}

/* Split variant — only the "right" half (top of the packshot, where the brush
 * head sits) is shown, centered horizontally and bottom-aligned in the circle.
 * The source webps have transparent padding below the handle, so we render the
 * image at intrinsic ratio with a negative `bottom` offset to push the empty
 * pixels out of the circle (overflow: hidden on the wrapper clips them).
 *   - default (X / ORTO / SOLO) — full-height packshot, head just under apex
 *   - XD (children's brush, shorter) — head ends at 3/4 of the circle height
 */
.spk-hero-mini__pack {
  position: absolute;
  left: 50%;
  bottom: -5px;
  height: 100%;
  width: auto;
  transform: translateX(-50%);
}

.spk-hero-mini--xd .spk-hero-mini__pack {
  height: 75%;
}

.spk-hero-mini--solo .spk-hero-mini__pack {
  height: 90%;
}

/* Center variant — single packshot centered, breathing room around the edge. */
.spk-hero-mini__center {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14%;
  object-position: center;
}

/* XM — PDP packshot is 57% width; mirror the smaller center proportion. */
.spk-hero-mini--xm .spk-hero-mini__center {
  padding: 22%;
}

/* XML — square aspect ratio fills the circle too tightly; shrink by ~10%. */
.spk-hero-mini--xml .spk-hero-mini__center {
  padding: 19%;
}

/* Backdrop scrim shared by both overlays — locks body scroll, dims page */
body.has-overlay {
  overflow: hidden;
}

body.has-overlay::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(30, 37, 43, 0.4);
  z-index: 98;
  pointer-events: none;
  animation: spk-overlay-fade var(--t-base) var(--ease-out-quint);
}

@keyframes spk-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== HERO — 2-image animated composition (replica of spokar.com) ==========
 * Structure mirrors spokar.com .component-product-animation:
 *   1. __bg     — olive 1:1 circle, shifted down by mt-6 (5rem)
 *   2. __left   — fully rounded circle container @ top:5rem (clips falling handle)
 *   3. __right  — half-circle container (bottom radius only), top:0, tall enough that
 *                 the brush head pokes above the olive circle
 */

.hero {
  padding: clamp(7rem, 14vh, 9rem) 0 var(--section-py);
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 3;
  padding-left: 0.5rem;
}

/* product-title — matches live site .product-title: 4rem @ ≥1200px, weight 600, normal tracking */
.hero__title {
  font-size: calc(1.525rem + 3.3vw);
  line-height: 1.27;
  letter-spacing: normal;
  color: var(--slate);
  font-weight: 600;
  margin: 0;
}

@media (min-width: 1200px) {
  .hero__title { font-size: 4rem; }
}

/* product-perex — large lead matching .product-perex (2rem @ ≥1200px) */
.hero__perex {
  font-size: calc(1.325rem + 0.9vw);
  line-height: 1.4;
  color: var(--slate);
  font-weight: 400;
  max-width: none;
  margin: 0;
}

@media (min-width: 1200px) {
  .hero__perex { font-size: 2rem; }
}

/* Hero bullet list — distilled from PPTX bullets */
.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grey-600);
}

.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* Awards row beneath CTA — three logos in a horizontal strip, same height (per live site .product-header-logo) */
.hero__awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.hero__award {
  height: 4.375rem;
  width: auto;
  display: block;
}

/* === The animated 3-layer composition === */

.product-animation {
  position: relative;
  width: 100%;
  max-width: 33rem;
  margin: 0 auto;
  overflow: hidden;
}

/* Layer 1: olive background circle (1:1, pushed 5rem down — equivalent of mt-6) */
.product-animation__bg {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 5rem;
  background: var(--olive);
  border-radius: 50%;
}

/* Layer 2: LEFT clips falling handle inside a full circle, aligned to olive bg */
.product-animation__left {
  position: absolute;
  inset: 0;
  top: 5rem;
  border-radius: 50%;
  overflow: hidden;
}

/* Layer 3: RIGHT — taller than olive circle (top:0, full height) so the brush head pokes above. Clipped only on the bottom half. */
.product-animation__right {
  position: absolute;
  inset: 0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
}

/* Inner pictures slide from outside the clip mask into final position */
.product-animation__img-left {
  position: absolute;
  left: 36%;
  top: -20%;
  transform: translateX(-50%);
  transition: top 0.6s ease-in-out;
  width: 6.5rem;
  max-width: 6.5rem;
}

.product-animation.is-visible .product-animation__img-left { top: 0; }

.product-animation__img-right {
  position: absolute;
  left: 65%;
  bottom: -30%;
  transform: translateX(-50%);
  transition: bottom 0.6s ease-in-out;
  width: 6.5rem;
  max-width: 6.5rem;
}

.product-animation.is-visible .product-animation__img-right { bottom: 0; }

@media (max-width: 1199px) {
  .product-animation__img-left,
  .product-animation__img-right { width: 5.25rem; max-width: 5.25rem; }
}

/* === Per-product size modifiers (X stays on the base above) ===
   Tuned individually per SKU because each packshot's brush-to-canvas ratio differs;
   no global override — each line only fires when its own modifier class is present. */
.product-animation--xd .product-animation__img-left,
.product-animation--xd .product-animation__img-right,
.product-animation--solo .product-animation__img-left,
.product-animation--solo .product-animation__img-right {
  width: 7.15rem;
  max-width: 7.15rem;
}
@media (max-width: 1199px) {
  .product-animation--xd .product-animation__img-left,
  .product-animation--xd .product-animation__img-right,
  .product-animation--solo .product-animation__img-left,
  .product-animation--solo .product-animation__img-right { width: 5.78rem; max-width: 5.78rem; }
}

/* === Variant: single centered packshot (mezizubni — XM / XML) ===
 * Mirrors spokar.com .component-product-animation-11 .component-product-animation-center
 */
.product-animation--center .product-animation__center {
  position: absolute;
  inset: 0;
  top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.product-animation--center .product-animation__img-center {
  width: 70%;
  max-width: 14rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-animation--center.is-visible .product-animation__img-center {
  opacity: 1;
  transform: scale(1);
}
.product-animation--center .product-animation__img-center img {
  width: 100%;
  height: auto;
  display: block;
}

/* XM — single PNG slides up from below into the centered position, stays clipped inside the olive circle. */
.product-animation--xm .product-animation__img-center {
  width: 57%;
  max-width: 11.34rem;
  transform: translateY(110%);
  transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-animation--xm.is-visible .product-animation__img-center {
  transform: translateY(0);
}
.product-animation--xm .product-animation__img-center img {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
}

/* XML — same pattern as XM: slide up from below, clipped inside circle, drop-shadow. */
.product-animation--xml .product-animation__img-center {
  transform: translateY(110%);
  transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-animation--xml.is-visible .product-animation__img-center {
  transform: translateY(0);
}
.product-animation--xml .product-animation__img-center img {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
}

@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero__copy { padding-left: 0; }
  .product-animation { max-width: 20rem; }
  .product-animation__bg { margin-top: 3rem; }
  .product-animation__left { top: 3rem; }
  .product-animation__img-left,
  .product-animation__img-right { width: 3.75rem; max-width: 3.75rem; }
  .product-animation--xd .product-animation__img-left,
  .product-animation--xd .product-animation__img-right,
  .product-animation--solo .product-animation__img-left,
  .product-animation--solo .product-animation__img-right { width: 4.13rem; max-width: 4.13rem; }
  .product-animation--center .product-animation__center { top: 3rem; }
  .product-animation--center .product-animation__img-center { max-width: 10rem; }
  .product-animation--xm .product-animation__img-center { max-width: 8.1rem; }
}

/* ========== MARQUEE (PPTX addon) ========== */

.marquee {
  overflow: hidden;
  position: relative;
  background: var(--olive);
  padding: 1.1rem 0;
}

.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 32s linear infinite;
  font-size: clamp(1rem, 1vw + 0.6rem, 1.25rem);
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.02em;
}

.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
}

.marquee__star {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--slate);
  border-radius: 50%;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ========== ANATOMY — big bitmap + 3 popover buttons (replica) ========== */

.anatomy {
  background: var(--white);
  overflow-x: hidden;
}

.anatomy__head {
  text-align: center;
  margin-bottom: 0;
}

.anatomy__head h2 {
  margin: 0 auto 1.5rem;
  max-width: 18ch;
}

/* Full-width grey strip with brush image at 75% — matches .bg-secondary on live site */
.anatomy__stage {
  position: relative;
  background: var(--grey-100);
  padding: 4rem 0 0;
  margin-top: 3rem;
  text-align: center;
}

.anatomy__stage > img {
  width: 75%;
  max-width: none;
  height: auto;
  display: inline-block;
}

/* Mobile-first: spokar-micro is a campaign funnel where mobile traffic dominates,
 * so the anatomy section stays visible (spokar.com hides it on mobile). Per-SKU
 * mobile refinements live further down. */

/* Popover buttons — replica of spokar.com .btn-popover:
 *   font 1.375rem, blue text/icon, white pill, outlined plus circle,
 *   wide gap (2rem) between label and icon, no shadow. */
.anatomy__popover {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background: var(--white);
  border: none;
  border-radius: 1.7rem;
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--primary);
  cursor: pointer;
  z-index: 5;
  transition: background 400ms, color 400ms;
}

.anatomy__popover:hover,
.anatomy__popover[aria-expanded="true"] {
  background: var(--primary);
  color: var(--white);
}

.anatomy__popover .plus {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-spring);
}

.anatomy__popover[aria-expanded="true"] .plus {
  transform: rotate(45deg);
}

@media (max-width: 1199px) {
  .anatomy__popover { font-size: 1.15rem; gap: 1.25rem; }
  .anatomy__popover .plus { width: 2rem; height: 2rem; font-size: 1.1rem; }
}

/* ========== Popover positions — Playwright-tuned 2026-06-02 ==========
 * Each popover sits in EMPTY space beside the brush silhouette, never over it
 * (verified per-SKU with a pixel-mask overlap test), its + icon pointing at the
 * part. `.is-flip` mirror (flex row-reverse → + on the left, label on the right)
 * lets a popover hug the brush from the right side and spill its label into the
 * empty area. Desktop tuned @1440, mobile @390. Content cards (#pop-content,
 * shown only on click) sit next to their popover; they may overlap the brush
 * because they are a transient open state, not the resting popover. */

/* Flip mirror — applied only via SKU-prefixed selectors so it never leaks to a
 * sibling SKU's same data-pos. Desktop padding; mobile padding set in @767. */
.anatomy--x .anatomy__popover[data-pos="2"],
.anatomy--xm .anatomy__popover[data-pos="1"],
.anatomy--xm .anatomy__popover[data-pos="2"],
.anatomy--xm .anatomy__popover[data-pos="3"],
.anatomy--orto .anatomy__popover[data-pos="2"],
.anatomy--orto .anatomy__popover[data-pos="3"] {
  flex-direction: row-reverse;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
}

/* Fallback default (SPK-X) — real X positions live under .anatomy--x below */
.anatomy__popover[data-pos="1"] { top: 14%; left: 49%; }
.anatomy__popover[data-pos="2"] { top: 74%; left: 67%; }
.anatomy__popover[data-pos="3"] { top: 37%; left: 40%; }

/* SPK-X desktop — diagonal brush: bristles top-right, neck mid, handle bottom-left */
.anatomy--x .anatomy__popover[data-pos="1"] { top: 14%; left: 49%; } /* Vysoce kvalitní vlákna */
.anatomy--x .anatomy__popover[data-pos="3"] { top: 37%; left: 40%; } /* Malá hlava */
.anatomy--x .anatomy__popover[data-pos="2"] { top: 74%; left: 67%; } /* Ergonomické držadlo (flip) */
.anatomy--x #pop-content-1 { top: calc(14% + 3.5rem); left: 40%; }
.anatomy--x #pop-content-3 { top: calc(37% + 3.5rem); left: 22%; }
.anatomy--x #pop-content-2 { top: 44%; left: 56%; }

/* Popover content card — positioned per data-pos like the button */
.anatomy__popover-content {
  position: absolute;
  min-width: 240px;
  max-width: 280px;
  padding: 1.25rem 1.4rem;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 5px 18px -3px rgba(0, 0, 0, 0.16);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-600);
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  transition:
    opacity var(--t-base) var(--ease-out-quint),
    transform var(--t-base) var(--ease-spring);
  pointer-events: none;
  z-index: 10;
}

/* Content cards share transform-origin; per-SKU top/left set below */
#pop-content-1, #pop-content-2, #pop-content-3 { transform-origin: top left; }

.anatomy__popover[aria-expanded="true"] + .anatomy__popover-content {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.anatomy__popover-content h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate);
  margin-bottom: 0.4rem;
}

/* ========== Per-SKU anatomy overrides ==========
 * Default .anatomy__popover[data-pos] positions are tuned for SPK-X bitmap.
 * Each .anatomy--{sku} modifier shifts popovers (and their content cards) to
 * land on the matching bitmap. ORTO also overrides the stage background to
 * match its white anatomy.jpg packshot. */

.anatomy--orto .anatomy__stage {
  background: var(--white);
}

/* XM — diagonal interdental: wire+bristles top-centre, blue block bottom-left.
 * Empty space is the whole right side → all three popovers flip to the right.
 *   pos 1 = Polyamidová vlákna (wire tip)
 *   pos 2 = Nerezový spirálový drát (wire root)
 *   pos 3 = X-profilové držadlo (block) */
.anatomy--xm .anatomy__popover[data-pos="1"] { top: 9%;  left: 64%; }
.anatomy--xm .anatomy__popover[data-pos="2"] { top: 27%; left: 61%; }
.anatomy--xm .anatomy__popover[data-pos="3"] { top: 60%; left: 64%; }
.anatomy--xm #pop-content-1 { top: calc(9% + 3.5rem);  left: 62%; }
.anatomy--xm #pop-content-2 { top: calc(27% + 3.5rem); left: 60%; }
.anatomy--xm #pop-content-3 { top: 44%; left: 62%; }

/* XML — L-shape: cluster (L-bend/wire/bristles) crammed top-right, handle runs
 * down-left. Only the left side is clear → cascade of left-pointing popovers
 * hugging the brush's upper-left edge.
 *   pos 1 = L-shape krček (L-bend)
 *   pos 2 = Polyamidová vlákna (wire tip)
 *   pos 3 = Nerezový spirálový drát (wire) */
.anatomy--xml .anatomy__popover[data-pos="1"] { top: 13%; left: 52%; }
.anatomy--xml .anatomy__popover[data-pos="3"] { top: 26%; left: 43%; }
.anatomy--xml .anatomy__popover[data-pos="2"] { top: 40%; left: 40%; }
.anatomy--xml #pop-content-1 { top: calc(13% + 3.5rem); left: 42%; }
.anatomy--xml #pop-content-3 { top: calc(26% + 3.5rem); left: 33%; }
.anatomy--xml #pop-content-2 { top: calc(40% + 3.5rem); left: 30%; }

/* ORTO — vertical pink handle + yellow U-cut bristles, narrow column mid-stage
 * with empty columns both sides → split popovers left/right of the brush.
 *   pos 1 = „U"-zástřih vláken (bristles, label left)
 *   pos 2 = Ultra jemná vlákna (bristles, flip right)
 *   pos 3 = Zaoblené prohnuté držadlo (handle, flip right) */
.anatomy--orto .anatomy__popover[data-pos="1"] { top: 13%; left: 25%; }
.anatomy--orto .anatomy__popover[data-pos="2"] { top: 24%; left: 59%; }
.anatomy--orto .anatomy__popover[data-pos="3"] { top: 54%; left: 53%; }
.anatomy--orto #pop-content-1 { top: calc(13% + 3.5rem); left: 12%; }
.anatomy--orto #pop-content-2 { top: calc(24% + 3.5rem); left: 52%; }
.anatomy--orto #pop-content-3 { top: 34%; left: 45%; }

/* SOLO — single-tuft horizontal brush, very thin. Taller centred stage opens a
 * band above and below; popovers tuck into the corners (handle left, tuft right).
 *   pos 1 = Jediný svazek vláken (tuft, above)
 *   pos 2 = Extra jemná vlákna (tuft, below)
 *   pos 3 = Ergonomická rukojeť (handle, above-left) */
.anatomy--solo .anatomy__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 2rem 0;
}
.anatomy--solo .anatomy__stage > img { width: 86%; }
.anatomy--solo .anatomy__popover[data-pos="3"] { top: 14%; left: 13%; }
.anatomy--solo .anatomy__popover[data-pos="1"] { top: 14%; left: 66%; }
.anatomy--solo .anatomy__popover[data-pos="2"] { top: 71%; left: 64%; }
.anatomy--solo #pop-content-3 { top: calc(14% + 3.5rem); left: 8%; }
.anatomy--solo #pop-content-1 { top: calc(14% + 3.5rem); left: 56%; }
.anatomy--solo #pop-content-2 { top: 44%; left: 56%; }

/* ========== Mobile anatomy (≤767px) ==========
 * Section stays visible on mobile (was hidden on spokar.com — micro campaign
 * funnel needs the edu content). Popovers shrink to fit + 44px touch target. */
@media (max-width: 767px) {
  .anatomy__stage {
    padding: 1.5rem 0.5rem 0;
  }

  .anatomy__stage > img {
    width: 95%;
    max-width: 420px;
  }

  .anatomy__popover {
    font-size: 0.82rem;
    gap: 0.4rem;
    padding: 0.4rem 0.4rem 0.4rem 0.75rem;
    min-height: 44px;
  }

  .anatomy__popover .plus {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }

  .anatomy__popover-content {
    min-width: 200px;
    max-width: calc(100vw - 2rem);
    font-size: 0.82rem;
    padding: 0.9rem 1.1rem;
  }

  .anatomy__popover-content h4 {
    font-size: 0.95rem;
  }

  /* Mobile flip set differs from desktop: X handle + ORTO handle go normal,
   * SOLO handle flips. Reset/override flex-direction + padding accordingly. */
  .anatomy--x .anatomy__popover[data-pos="2"],
  .anatomy--orto .anatomy__popover[data-pos="3"] {
    flex-direction: row;
    padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  }
  .anatomy--solo .anatomy__popover[data-pos="3"],
  .anatomy--xm .anatomy__popover[data-pos="1"],
  .anatomy--xm .anatomy__popover[data-pos="2"],
  .anatomy--xm .anatomy__popover[data-pos="3"],
  .anatomy--orto .anatomy__popover[data-pos="2"] {
    flex-direction: row-reverse;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  }
  /* Allow long labels to wrap on the narrow viewport (max-width set per popover) */
  .anatomy__popover { white-space: normal; text-align: left; }

  /* ---- SPK-X mobile — taller centred stage; popovers in top/bottom bands + left triangle ---- */
  .anatomy--x .anatomy__stage {
    display: flex; align-items: center; justify-content: center;
    min-height: 250px; padding: 1.5rem 0;
  }
  .anatomy--x .anatomy__stage > img { width: 90%; max-width: 420px; }
  .anatomy--x .anatomy__popover[data-pos="1"] { top: 1%;  left: 40%; max-width: 52%; }
  .anatomy--x .anatomy__popover[data-pos="3"] { top: 31%; left: 7%;  max-width: 38%; }
  .anatomy--x .anatomy__popover[data-pos="2"] { top: 80%; left: 8%;  max-width: 50%; }
  .anatomy--x #pop-content-1 { top: 21%; left: 5%; }
  .anatomy--x #pop-content-3 { top: 47%; left: 5%; }
  .anatomy--x #pop-content-2 { top: 54%; left: 5%; }

  /* ---- XM mobile — popovers flip into the empty right side ---- */
  .anatomy--xm .anatomy__popover[data-pos="1"] { top: 6%;  left: 65%; max-width: 33%; }
  .anatomy--xm .anatomy__popover[data-pos="2"] { top: 30%; left: 61%; max-width: 36%; }
  .anatomy--xm .anatomy__popover[data-pos="3"] { top: 62%; left: 62%; max-width: 34%; }
  .anatomy--xm #pop-content-1 { top: 24%; left: 5%; }
  .anatomy--xm #pop-content-2 { top: 48%; left: 5%; }
  .anatomy--xm #pop-content-3 { top: 44%; left: 5%; }

  /* ---- XML mobile — diagonal cascade hugging the brush's upper-left edge ---- */
  .anatomy--xml .anatomy__popover[data-pos="1"] { top: 5%;  left: 42%; max-width: 44%; }
  .anatomy--xml .anatomy__popover[data-pos="3"] { top: 20%; left: 25%; max-width: 46%; }
  .anatomy--xml .anatomy__popover[data-pos="2"] { top: 43%; left: 13%; max-width: 44%; }
  .anatomy--xml #pop-content-1 { top: 22%; left: 5%; }
  .anatomy--xml #pop-content-3 { top: 38%; left: 5%; }
  .anatomy--xml #pop-content-2 { top: 60%; left: 5%; }

  /* ---- ORTO mobile — split left/right of the narrow vertical brush ---- */
  .anatomy--orto .anatomy__popover[data-pos="1"] { top: 12%; left: 0%; }
  .anatomy--orto .anatomy__popover[data-pos="2"] { top: 26%; left: 60%; max-width: 36%; }
  .anatomy--orto .anatomy__popover[data-pos="3"] { top: 64%; left: 0%; max-width: 40%; }
  .anatomy--orto #pop-content-1 { top: 26%; left: 5%; }
  .anatomy--orto #pop-content-2 { top: 40%; left: 52%; }
  .anatomy--orto #pop-content-3 { top: 44%; left: 5%; }

  /* ---- SOLO mobile — taller centred stage; corners + flipped handle ---- */
  .anatomy--solo .anatomy__stage {
    min-height: 300px;
    padding: 1.5rem 0;
  }
  .anatomy--solo .anatomy__stage > img { width: 94%; max-width: none; }
  .anatomy--solo .anatomy__popover[data-pos="1"] { top: 11%; left: 46%; }
  .anatomy--solo .anatomy__popover[data-pos="2"] { top: 27%; left: 48%; }
  .anatomy--solo .anatomy__popover[data-pos="3"] { top: 72%; left: 6%; }
  .anatomy--solo #pop-content-1 { top: 25%; left: 5%; }
  .anatomy--solo #pop-content-2 { top: 41%; left: 5%; }
  .anatomy--solo #pop-content-3 { top: 52%; left: 5%; }
}

/* XS mobile (≤480px) — popover content must not overflow viewport */
@media (max-width: 480px) {
  .anatomy__popover {
    font-size: 0.78rem;
    gap: 0.4rem;
  }

  .anatomy__popover-content {
    min-width: 180px;
    max-width: calc(100vw - 1.5rem);
    font-size: 0.78rem;
  }
}

/* ========== HARDNESS — 3 lime circles + brush at bottom (replica) ========== */

.hardness {
  background: var(--white);
}

.hardness__head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  margin-bottom: 4rem;
  align-items: end;
}

.hardness__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive-deep);
}

.hardness__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.hardness-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* Lime circle — 14.375rem replica; image vertically aligned to bottom and
 * allowed to poke beyond the circle (matches live site, no overflow clipping). */
.hardness-card__circle {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 14.375rem;
  height: 14.375rem;
  border-radius: 50%;
  background-color: var(--olive);
  margin-bottom: 1.5rem;
  position: relative;
}

.hardness-card__circle img {
  width: 4.5rem;
  height: auto;
}

.hardness-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Number — text-xl font-family-heading style (large, weight 600) */
.hardness-card__num {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0;
  margin-bottom: 1rem;
  font-family: var(--font-primary);
}

.hardness-card__caption {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--grey-600);
  max-width: 28ch;
}

@media (max-width: 880px) {
  .hardness__head { grid-template-columns: 1fr; gap: 1rem; }
  .hardness__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ========== SHOP / VARIANT SELECTOR — Apple-style step-by-step picker ========== */

.shop {
  background: var(--grey-100);
}

.shop__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas:
    "media head"
    "media panel";
  /* head sizes to its content; the panel row takes all remaining height. The
     sticky .shop__media spans both rows, so without this the grid splits the
     media's surplus height across both auto rows — inflating the head row and
     pushing the panel down. Revealing the price/CTA rows on the first pick then
     makes the panel tall enough to swallow the surplus, snapping it ~19px up
     (a visible upward jolt of the whole form on desktop). Pinning the panel row
     to 1fr keeps its top anchored at head-bottom regardless of panel height. */
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.5rem;
  align-items: start;
}

.shop__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shop__head h2 {
  margin: 0;
}

.shop__head .eyebrow {
  margin: 0;
}

.shop__media {
  grid-area: media;
  position: sticky;
  top: calc(var(--header-h, 48px) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shop__panel {
  grid-area: panel;
}

.shop__media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--white);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 4.25rem;
}

.shop__media-img {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity var(--t-base) var(--ease-out-quint);
}

.shop__media-img.is-loading {
  opacity: 0;
}

/* Label is positioned inside the media frame (Apple-style card with product
   image on top + name strip below). Absolute keeps it pinned regardless of
   frame aspect ratio, padding-bottom on the frame reserves the space.
   Background is transparent so the label reads as a caption on the white
   frame, not a contrasting chip. */
.shop__media-label {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: transparent;
  padding: 0.4rem 0.9rem;
  text-align: center;
}

.shop__media-label small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-600);
}

.shop__media-label strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate);
  line-height: 1.25;
}

.shop__panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.shop__group label.group-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.group-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  background: var(--slate);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

.group-label-text {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--slate);
}

.shop__group label.group-label .group-value {
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-600);
  font-weight: 600;
  margin-left: auto;
}

.shop__group label.group-label .group-value::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--grey-300);
  font-weight: 700;
}

.shop__group label.group-label .group-value:empty::before {
  content: none;
}

.pill-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 1.05rem 1.25rem;
  background: var(--white);
  border: 1.5px solid var(--grey-200);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  color: var(--slate);
  transition:
    border-color var(--t-fast) var(--ease-out-quint),
    background var(--t-fast) var(--ease-out-quint),
    box-shadow var(--t-fast) var(--ease-out-quint),
    transform var(--t-fast) var(--ease-out-quint);
}

.pill--swatch {
  grid-template-columns: auto 1fr auto;
}

/* Colour picker: swatch grid (no slug text inside pill — title is hidden but
   kept in DOM so JS reads it for group-value + media labels). Tile width
   reacts to balení: single-pack swatches are ~88 px, 3-pack mix tiles need
   ~130 px to fit three side-by-side silhouettes. auto-fill keeps the column
   count responsive to the picker panel width without breakpoints. */
.shop__group[data-attribute="pa_barva"] .pill-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.5rem;
}

.shop__group[data-attribute="pa_barva"][data-baleni-current="3-pack"] .pill-stack {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

/* Override the .pill grid layout: swatch tile is a flex column with the
   silhouette centred both axes, optional caption beneath. aspect-ratio keeps
   the tile square so the breathing space around the brush matches on all
   four sides regardless of how wide the column ends up. */
.pill--swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.55rem;
  gap: 0.25rem;
  aspect-ratio: 1 / 1;
}

.pill--swatch .pill__title {
  display: none;
}

.pill--swatch .pill__lead,
.pill--swatch .pill__body {
  flex: 0 0 auto;
}

.pill--swatch .pill__body {
  align-items: center;
}

/* Check overlay — small badge in the top-right corner so the pill stays a
   pure swatch tile without giving up a row to the indicator. */
.pill--swatch .pill__check {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
}

.pill--swatch[aria-checked="true"] {
  padding: 0.51rem;
}

.pill:hover {
  border-color: var(--slate);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}

.pill:active {
  transform: translateY(0);
}

.pill[aria-checked="true"] {
  border: 2px solid var(--slate);
  background: var(--olive-soft);
  padding: 1.01rem 1.21rem;
}

.pill[aria-checked="true"]:hover {
  transform: none;
}

.pill__lead {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SOLO (single-tone) and legacy fallback — circular swatch */
.pill__swatch--circle,
.spokar-minicart-attr--color .pill__swatch {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* X / XD / ORTO — side-view SPOKAR X silhouette, aspect ~1:2 */
.pill__swatch--silhouette {
  display: inline-flex;
  width: 1.7rem;
  height: 3.4rem;
  flex-shrink: 0;
}
.pill__swatch--silhouette svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Single uniform outline — works on white pill, olive-soft active pill, etc. */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
}
/* Fills targeted globally — descendant selectors don't cross the <use> shadow
   DOM boundary, so the rules must match the cloned <path> elements directly. */
.silhouette-handle   { fill: var(--spk-body); }
.silhouette-bristles { fill: var(--spk-bristles); }

/* 3-pack Mix /1..4 — three swatches side by side with a slight overlap. */
.pill__lead--multi .pill__swatch--circle + .pill__swatch--circle {
  margin-left: -0.55rem;
}
.pill__lead--multi .pill__swatch--circle {
  box-shadow: inset 0 0 0 2px var(--white), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.pill__lead--multi .pill__swatch--silhouette + .pill__swatch--silhouette {
  margin-left: 0.1rem;
}

.pill__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pill__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--slate);
}

.pill__caption {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-600);
  line-height: 1.35;
}

.pill__trail {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.pill__price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.pill__price-main {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--slate);
  white-space: nowrap;
}

.pill__price-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--grey-600);
  white-space: nowrap;
  margin-top: 2px;
}

/* "/ks" suffix inside the bold "Od X Kč" price — lighter inline weight so the
   per-piece unit reads as a qualifier, not part of the headline number. */
.pill__price-main .pill__price-unit {
  font-weight: 400;
  color: var(--grey-600);
}

.pill__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--slate);
  color: var(--white);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--t-fast) var(--ease-spring),
    transform var(--t-fast) var(--ease-spring);
}

.pill__check svg {
  width: 0.9rem;
  height: 0.9rem;
}

.pill[aria-checked="true"] .pill__check {
  opacity: 1;
  transform: scale(1);
}

/* Sequential step gating: groups beyond the first start hidden and reveal in
   JS once every preceding group has a selection — a progressive funnel on both
   desktop and mobile. The colour group (X / XD) is covered by the same rule:
   its palette differs between single packs and 3-packs, so a half-shown step
   would be misleading anyway. */
.shop__group[aria-disabled="true"] {
  display: none;
}

/* Reveal each newly unlocked step with a subtle fade-up (desktop + mobile).
   `display` isn't animatable, so the keyframe carries the entrance. */
.shop__group:not([aria-disabled="true"]) {
  animation: shopGroupReveal var(--t-base, 280ms) var(--ease-out-quint, ease-out);
}

/* Colour pills filtered out by the selected balení (X / XD only).
   The `display: grid` rule on .pill would otherwise override [hidden]. */
.pill[hidden] {
  display: none;
}

/* Out-of-stock pill — stays visible but inert so the customer sees that the
   value exists and is unavailable, rather than having it silently vanish. */
.pill[data-out-of-stock="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--grey-100);
}

.pill[data-out-of-stock="true"]:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--grey-200);
}

.pill[data-out-of-stock="true"] .pill__title {
  text-decoration: line-through;
  text-decoration-color: var(--grey-300);
}

.pill__caption--oos {
  color: var(--burgundy);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 0.72rem;
}

.pill__caption:empty {
  display: none;
}

/* Wraps the price/notes card and the qty+button row. On desktop it just
   re-creates the 1.75rem panel gap the two rows had as separate panel children;
   the mobile reflow into a grid lives in the max-width:880px block below. */
.shop__buy {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.shop__price-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--white);
  border-radius: 3px;
}

/* Price card stays out of the layout until a price is settled (JS toggles the
   `hidden` attribute). Explicit rule mirrors the .pill[hidden] precedent so it
   wins over any future display rule on .shop__price; the trust notes beside it
   stay visible the whole time. */
.shop__price[hidden] {
  display: none;
}

.shop__price-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-600);
  margin-bottom: 0.3rem;
}

.shop__price-value {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--slate);
  font-weight: 700;
}

.shop__price-unit {
  font-size: 0.95rem;
  color: var(--grey-600);
  margin-left: 0.25rem;
}

.shop__cta-row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shop__cta-row .single_add_to_cart_button {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.shop__cta-row .single_add_to_cart_button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.shop__cta-row .single_add_to_cart_button:disabled:hover {
  --btn-bg: var(--primary);
  transform: none;
}

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--white);
  border: 1.5px solid var(--grey-200);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}

.qty-stepper__btn {
  width: 3rem;
  background: transparent;
  border: 0;
  color: var(--slate);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  transition: background var(--t-fast) var(--ease-out-quint);
}

.qty-stepper__btn:hover {
  background: var(--grey-100);
}

.qty-stepper__btn:active {
  background: var(--grey-200);
}

.qty-stepper__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Whole stepper is inert until a complete, purchasable variation is chosen —
   mirrors the disabled add-to-cart button (opacity 0.55). JS disables the input
   only in this locked state, so the container :has() is the signal; at qty
   bounds the input stays enabled and only the at-bound button greys (0.3). The
   inner reset keeps the buttons at the container's 0.55 instead of compounding
   to 0.55 × 0.3. */
.qty-stepper:has(.qty-stepper__input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.qty-stepper:has(.qty-stepper__input:disabled) .qty-stepper__btn:disabled {
  opacity: 1;
}

.qty-stepper__input:disabled {
  cursor: not-allowed;
}

.qty-stepper__input {
  width: 3rem;
  border: 0;
  border-left: 1.5px solid var(--grey-200);
  border-right: 1.5px solid var(--grey-200);
  background: var(--white);
  color: var(--slate);
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper__input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.shop__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.85rem;
  color: var(--grey-600);
}

.shop__notes span::before {
  content: "✓";
  margin-right: 0.5rem;
  color: var(--primary);
  font-weight: 700;
}

.shop__atc-error {
  font-size: 0.85rem;
  color: var(--burgundy);
  margin-top: 0.5rem;
}

@media (max-width: 880px) {
  /* Tighter top padding on mobile so the head + packshot don't fill the first
     screen alone — the opening picker step (01) must share the initial view
     with the sticky media, not sit fully below the fold (Filip 2026-05-31). */
  .shop {
    padding-top: 2rem;
  }
  .shop__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "panel";
    /* Reset the desktop auto/1fr rows — the single-column stack uses three
       implicit auto rows (head, sticky media, panel); a leftover 1fr would
       stretch the media row. */
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0.5rem;
  }
  .shop__head {
    gap: 0.3rem;
    margin-bottom: 0.25rem;
  }
  .shop__head h2 {
    line-height: 1.15;
  }
  /* Sticky media pins right below the header. `--header-h` is published by
     landing.js (real header offsetHeight, ~48px default → ~40px stuck), so
     no extra padding is needed to hide a sub-pixel gap. Background still
     covers the band the user scrolls behind. */
  .shop__media {
    position: sticky;
    top: var(--header-h, 48px);
    z-index: 5;
    background: var(--grey-100);
    padding: 0 0 0.4rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Definite height (not aspect-ratio + max-height): iOS Safari refuses to
     resolve the image's `max-height: 100%` against an aspect-ratio-derived
     height, so the image grows to its content-box width and overflows the
     reserved label band. A concrete vh height makes the percentage resolvable.
     Visually identical on portrait phones — width always exceeds 42vh there, so
     the 1/1 aspect ratio never won and max-height already drove the height. */
  .shop__media-frame {
    aspect-ratio: auto;
    height: 38vh;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 1rem 3.25rem;
  }
  .shop__media-label {
    bottom: 0.5rem;
    left: 0.6rem;
    right: 0.6rem;
    padding: 0.35rem 0.85rem;
  }

  /* Auto-scroll offset — sticky media height + header + ~15px breathing
     gap. Used by JS scrollIntoView so the freshly unlocked step lands one
     finger-width below the pinned image, not buried 4rem under it.
     Breakdown: --header-h (sticky top) + 42vh (frame max-height) +
     0.4rem (shop__media padding-bottom) + ~1rem visible gap. */
  .shop__group,
  .shop__price-row {
    scroll-margin-top: calc(var(--header-h, 48px) + 38vh + 1.4rem);
  }

  /* Buy block reflow (Filip 2026-05-29): after the last pick the price sits on
     the left with the qty-stepper on its right, the add-to-cart button spans
     full width below, and the trust notes sit underneath. The price/notes card
     and the qty+button row are different DOM containers on desktop, so we drop
     their boxes with display:contents and place the four atoms via grid areas. */
  .shop__buy {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "price qty"
      "cart  cart"
      "notes notes";
    align-items: center;
    gap: 1rem 1.25rem;
  }
  .shop__price-row,
  .shop__cta-row {
    display: contents;
  }
  .shop__buy .shop__price {
    grid-area: price;
    min-width: 0;
  }
  /* The cs-CZ price formatter joins digits + "Kč" with non-breaking spaces, so
     a high total ("1 930 Kč" at qty 10) can never wrap and would overflow the
     1fr column on the narrowest phones. Scale the value down on mobile (capped
     at the 2rem desktop floor) so it always fits beside the stepper. */
  .shop__buy .shop__price-value {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .shop__buy .qty-stepper {
    grid-area: qty;
    justify-self: end;
  }
  .shop__buy .single_add_to_cart_button {
    grid-area: cart;
  }
  .shop__buy .shop__notes {
    grid-area: notes;
  }
}

@keyframes shopGroupReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .shop__media-frame {
    aspect-ratio: auto;
    height: 34vh;
    padding: 0.85rem 0.85rem 3rem;
  }
  .shop__media-label {
    bottom: 0.4rem;
    left: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.75rem;
  }
  .shop__media-label small {
    font-size: 0.65rem;
  }
  .shop__media-label strong {
    font-size: 0.92rem;
  }
  .shop__group,
  .shop__price-row {
    scroll-margin-top: calc(var(--header-h, 48px) + 34vh + 1.4rem);
  }
  .pill {
    padding: 0.95rem 1rem;
  }
  .pill[aria-checked="true"] {
    padding: 0.91rem 0.96rem;
  }
  .pill--swatch {
    padding: 0.4rem;
  }
  .pill--swatch[aria-checked="true"] {
    padding: 0.36rem;
  }
  .pill__title {
    font-size: 0.98rem;
  }
  .qty-stepper__btn,
  .qty-stepper__input {
    width: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill:hover {
    transform: none;
  }
  .shop__group:not([aria-disabled="true"]) {
    animation: none;
  }
}


/* ========== QUOTE (PPTX addon) ========== */

.quote {
  background: var(--white);
}

.quote__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.quote__body {
  position: relative;
  /* 5rem clears the ~69px-wide quote glyph sitting left of the text block. */
  padding-left: 5rem;
}

.quote__body::before {
  content: "\201C";
  position: absolute;
  /* Glyph ink at 11rem spans 25–71px below the em-box top; -1.75rem aligns it
     with the first text line (left of the text, not floating above it). */
  top: -1.75rem;
  left: -0.5rem;
  font-style: italic;
  font-size: 11rem;
  line-height: 1;
  color: var(--olive);
  font-weight: 900;
}

.quote__text {
  font-style: italic;
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
  color: var(--slate);
  font-weight: 400;
  max-width: 30ch;
}

.quote__attr {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-600);
  font-weight: 700;
}

.quote__attr::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--slate);
  display: inline-block;
}

.quote__media {
  aspect-ratio: 4 / 5;
  background: var(--grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.quote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .quote__grid { grid-template-columns: 1fr; }
}

/* ========== REVIEWS (PPTX addon) ========== */

.reviews {
  background: var(--grey-100);
}

.reviews__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 32rem;
}

.reviews__product {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reviews__product-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--slate);
}

.reviews__rating-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate);
}

.reviews__rating-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reviews__percent {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.review {
  padding: 2rem;
  background: var(--white);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.review__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.review__list li {
  display: flex;
  gap: 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--slate);
}

.review__list li::before {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.1em;
  display: inline-grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.review__list--pos li::before {
  content: "+";
  background: #c8eccd; /* soft green */
  color: #1f8a3a;
}

.review__list--neg li::before {
  content: "−";
  background: #f7d6d3; /* soft pink */
  color: #c0392b;
}

@media (max-width: 760px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

/* ========== DESIGN — gallery slider with sketches (replica) ========== */

.design {
  background: var(--white);
}

.design__head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.design__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive-deep);
}

/* Single-slide layout — viewport clips, track scrolls horizontally one slide at a time.
 * Nav buttons are white 3.5rem circles positioned outside the slide at top:45%. */
.design__carousel {
  position: relative;
  overflow-x: hidden;
}

.design__viewport {
  position: relative;
  margin: 0 auto;
  max-width: 56rem;
}

.design__track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.design__track::-webkit-scrollbar { display: none; }

.design-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.design-card img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Slider nav — flat 3px rectangular buttons (per user requirement, not 50%) */
.design__nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 3px;
  background: var(--white);
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 9px -3px rgba(0, 0, 0, 0.11);
  z-index: 5;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint);
}

.design__nav:hover {
  background: var(--slate);
  color: var(--white);
}

.design__nav--prev {
  left: -2.25rem;
}

.design__nav--prev svg {
  transform: rotate(180deg);
}

.design__nav--next {
  right: -2.25rem;
}

@media (max-width: 767px) {
  .design__nav--prev { left: -1.25rem; }
  .design__nav--next { right: -1.25rem; }
}

@media (max-width: 575px) {
  .design__nav { top: 30%; width: 3rem; height: 3rem; }
  .design__nav--prev { left: -1rem; }
  .design__nav--next { right: -1rem; }
}

@media (max-width: 760px) {
  .design__head { grid-template-columns: 1fr; }
}

/* ========== AWARDS (PPTX addon) ========== */

.awards {
  background: var(--grey-100);
}

.awards__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.awards__copy h2 {
  max-width: 14ch;
  margin-bottom: 1.5rem;
}

.awards__copy h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive-deep);
  display: block;
}

.awards__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.awards__designer {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
  padding: 0.85rem 1.25rem;
  background: var(--grey-100);
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate);
}

.awards__designer em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive-deep);
}

.awards__designer-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--olive);
  display: inline-grid;
  place-items: center;
  color: var(--slate);
  font-weight: 900;
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .awards__inner { grid-template-columns: 1fr; }
}

/* ========== COLORS — zigzag layout (replica of component-zigzag) ========== */

.colors {
  background: var(--white);
}

.zigzag {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.zigzag__media {
  overflow: hidden;
}

.zigzag__media img {
  width: 100%;
  height: auto;
  display: block;
}

.zigzag__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Match live site .zigzag-content margin-top for the overlap rhythm */
  margin-top: 5rem;
}

.zigzag__content h3 {
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
  line-height: 1.2;
  margin: 0;
}

.zigzag__content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--grey-600);
  max-width: 40ch;
}

/* Mirrored variant — image right, copy left (for alternating rhythm). */
.zigzag--reverse { grid-template-columns: 5fr 7fr; }
.zigzag--reverse .zigzag__content { order: -1; }

@media (max-width: 991px) {
  .zigzag { grid-template-columns: 1fr; }
  .zigzag__content { margin-top: 0; }
  .zigzag--reverse { grid-template-columns: 1fr; }
  .zigzag--reverse .zigzag__content { order: 0; }
}

/* ========== FAQ (PPTX addon) ========== */

.faq {
  background: var(--grey-100);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.faq__head {
  position: sticky;
  top: 110px;
  align-self: start;
}

.faq__head h2 {
  margin-bottom: 1.25rem;
}

.faq__head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive-deep);
}

@media (max-width: 760px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

/* ========== BANNER ESHOP (replica of component-banner-eshop) ========== */

.banner-eshop {
  background: var(--olive);
  padding: 0;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.banner-eshop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

.banner-eshop__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 3rem;
}

.banner-eshop__media img {
  width: 100%;
  max-width: 30rem;
  height: auto;
  display: block;
}

.banner-eshop__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 3.5rem 0;
  color: var(--slate);
}

.banner-eshop__copy h2 {
  margin: 0;
}

.banner-eshop__copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 36ch;
  color: var(--slate);
}

@media (max-width: 760px) {
  .banner-eshop__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .banner-eshop__copy {
    align-items: center;
    padding: 1rem 0 3rem;
  }
  .banner-eshop__media { order: 1; padding-top: 0; padding-bottom: 0; }
  .banner-eshop__copy { order: 0; padding-top: 3rem; }
}

/* ========== FOOTER ========== */

.footer {
  background: var(--slate);
  color: var(--white);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(211, 219, 65, 0.10), transparent 40%);
  pointer-events: none;
}

.footer__hero {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 32ch;
  margin-bottom: 4rem;
  color: var(--white);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--footer-line);
  position: relative;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__brand .brand,
.footer__brand .brand__name { color: var(--white); }

.footer__brand .brand svg { height: 44px; }

.footer__brand p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer__col h5 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__col a {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast) var(--ease-out-quint);
}

.footer__col a:hover {
  color: var(--olive);
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  display: inline-grid;
  place-items: center;
  color: var(--white);
  transition:
    background var(--t-fast) var(--ease-out-quint),
    color var(--t-fast) var(--ease-out-quint);
}

.footer__social a:hover {
  background: var(--white);
  color: var(--slate);
}

.footer__legal {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast);
}

.footer__legal a:hover {
  color: var(--olive);
}

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ========== PAGE / PROSE — universal layout for legal & info pages ==========
 * Used by page.php for /kontakt/, /obchodni-podminky/, /doprava-a-platba/,
 * /reklamace-a-odstoupeni/, /ochrana-osobnich-udaju/, /cookies/, /caste-dotazy/.
 *
 * Mobile-first: defaults target small viewports; min-width media queries upscale.
 * Reuses .card, .accordion, .accordion-item, .chevron, .accordion-body, .eyebrow. */

.page-content {
  padding-top: calc(var(--header-h, 72px) + 1.5rem);
  padding-bottom: var(--section-py);
}

.page-content__header {
  margin-bottom: 2rem;
}

.page-content__title {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  margin: 0;
}

/* Long-form text — full-width container, comfortable reading rhythm. */
.prose {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
}

/* base.css caps every <p> at 64ch — let everything fill the container. */
.prose p,
.prose ul,
.prose ol {
  max-width: none;
}

.prose > * + * {
  margin-top: 1.1rem;
}

.prose h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.3rem, 1.5vw + 0.9rem, 1.75rem);
}

.prose h3 {
  margin-top: 1.75rem;
  font-size: 1.15rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  list-style: revert;
}

.prose li + li {
  margin-top: 0.35rem;
}

.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(18, 74, 240, 0.35);
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-color: var(--primary);
}

.prose strong { font-weight: 700; color: var(--slate); }

.prose small { font-size: 0.85rem; color: var(--grey-600); }

.prose pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  background: var(--grey-100);
  padding: 1rem 1.1rem;
  border-radius: 3px;
  overflow-x: auto;
  white-space: pre;
}

/* Tables — overflow scroll on small screens to avoid layout breakage. */
.prose .table-wrap,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--grey-100);
}

.prose th {
  font-weight: 700;
  color: var(--slate);
  background: var(--grey-100);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .prose table { font-size: 0.95rem; }
  .prose th,
  .prose td { padding: 0.75rem 0.9rem; }
  .prose th { font-size: 0.78rem; }
}

/* Contact grid (cards on /kontakt/) — 1 col mobile, 3 cols ≥768px. */
.prose .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .prose .contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Contact card — base from .card (components.css) + olive top accent,
 * tighter typography hierarchy. Hover off (static info, not clickable). */
.prose .contact-grid .card {
  padding: 1.75rem 1.5rem;
  border-top: 3px solid var(--olive);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .prose .contact-grid .card { padding: 2rem; }
}

.prose .contact-grid .card:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(30, 37, 43, 0.04);
}

.prose .contact-grid .card .eyebrow {
  margin: 0;
  font-size: 0.7rem;
}

.prose .contact-grid .card h2 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.prose .contact-grid .card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Inline-block label so "Telefon:" / "E-mail:" line up nicely. */
.prose .contact-grid .card p strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--grey-600);
  display: inline-block;
  min-width: 6rem;
}

/* Prominent contact links — olive underline, slate text, no .prose primary blue. */
.prose .contact-grid .card a[href^="tel:"],
.prose .contact-grid .card a[href^="mailto:"],
.prose .contact-grid .card ul a {
  color: var(--slate);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--olive);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.prose .contact-grid .card a[href^="tel:"]:hover,
.prose .contact-grid .card a[href^="mailto:"]:hover,
.prose .contact-grid .card ul a:hover {
  text-decoration-color: var(--slate);
}

.prose .contact-grid .card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* FAQ accordion (reuses components.css .accordion-item). */
.prose .accordion {
  margin-top: 1.5rem;
}