/* ============================================================
   skinspecialist.cz / bioby.cz — ss-znacky-1.css — v1
   PAGE: /znacky/ — dedicated brand listing
   Detection: body.in-znacky (type-category, Shoptet renderuje
   stránku jako kategorii; my však zobrazujeme curated brand
   listing místo produktů).

   ARCHITECTURE — REPLACE pattern (matches BASELINE §12):
   - Hide native .products / .product-list / .listSorting /
     .category-perex / .breadcrumbs-wrapper / .sidebar etc.
     gated by `body.in-znacky.ss-znacky-loaded`.
   - JS adds the class after render succeeds (graceful degradation:
     if JS fails, body class never added, native UI stays visible).
   - Inline JS setProperty('display','none','important') belt-and-
     suspenders against higher-specificity Shoptet rules.
   - Custom UI in fresh .ss-znacky-root parallel DOM tree.
   - 0 mutace native elementů. JS jen READ.

   DESIGN — Editorial alphabetical brand listing (Aesop-style):
   - Hero: italic Rigane "Značky." + tagline (17 kurátorovaných
     korejských a prémiových značek. Vše osobně vyzkoušené Tamarou.)
   - Filter chips: Vše / Korejské / Prémiové
   - A-Z sticky bar (scrollspy + click-to-letter)
   - Alphabetical groups: <letter> + grid of brand cards
   - Card: logo (grayscale .8 -> color hover) + name + 1-line
     description + "Zobrazit produkty ->" link
   - Card styling matches BASELINE §6 (cream backdrop, 10px radius,
     hover lift -3px, image scale 1.03, explicit transition list)

   TOKENS — inherited from style.css?v=11 (global).

   IMPORTANT — easing: ALL transitions use literal
   `cubic-bezier(.4, 0, .2, 1)`. NEVER `var(--ss-ease)` with
   duration prefix (BASELINE §13 hover-delay bug). Never `transition: all`.
   ============================================================ */


/* ============================================================
   1) PAGE BASELINE — applies INSTANTLY (no class gate) so cream
   canvas is in place during the brief FOUC window before JS
   replaces native UI.
   ============================================================ */
body.in-znacky {
  background: var(--ss-canvas, #F2EBDB) !important;
}

body.in-znacky .container.content-wrapper,
body.in-znacky #content-wrapper,
body.in-znacky .content-wrapper-in,
body.in-znacky main.content,
body.in-znacky main.content.narrow,
body.in-znacky .category-content-wrapper,
body.in-znacky .category-header {
  background: transparent !important;
  background-color: transparent !important;
}


/* ============================================================
   2) HIDE NATIVE — CLASS-GATED.
   ============================================================ */
body.in-znacky.ss-znacky-loaded .products,
body.in-znacky.ss-znacky-loaded .product-list,
body.in-znacky.ss-znacky-loaded #products,
body.in-znacky.ss-znacky-loaded .listSorting,
body.in-znacky.ss-znacky-loaded .breadcrumbs-wrapper,
body.in-znacky.ss-znacky-loaded .category-perex,
body.in-znacky.ss-znacky-loaded .category-description,
body.in-znacky.ss-znacky-loaded .sidebar.sidebar-left,
body.in-znacky.ss-znacky-loaded .sidebar-left,
body.in-znacky.ss-znacky-loaded .category-top,
body.in-znacky.ss-znacky-loaded .pagination-wrapper,
body.in-znacky.ss-znacky-loaded .pagination,
body.in-znacky.ss-znacky-loaded #products-pagination,
body.in-znacky.ss-znacky-loaded .listItemsTotal,
body.in-znacky.ss-znacky-loaded .itemsTotal,
body.in-znacky.ss-znacky-loaded .filters-wrapper,
body.in-znacky.ss-znacky-loaded .filters-unveil-button-wrapper,
body.in-znacky.ss-znacky-loaded .box-filters,
body.in-znacky.ss-znacky-loaded .category-content-wrapper,
body.in-znacky.ss-znacky-loaded h1.category-title:not(.ss-znacky-title),
body.in-znacky.ss-znacky-loaded #filters-wrapper {
  display: none !important;
}


/* ============================================================
   3) ROOT CONTAINER
   ============================================================ */
.ss-znacky-root {
  display: block;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 56px);
  box-sizing: border-box;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  color: var(--ss-text, #0F0F0F);
  background: var(--ss-canvas, #F2EBDB);
}


/* ============================================================
   4) BREADCRUMB
   ============================================================ */
.ss-znacky-root .ss-znacky-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 28px 0 0;
  width: 100%;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  box-sizing: border-box;
}

.ss-znacky-root .ss-znacky-crumbs a {
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  text-decoration: none;
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-crumbs a:hover {
  color: var(--ss-black, #0F0F0F);
}

.ss-znacky-root .ss-znacky-crumbs .sep {
  color: rgba(15, 15, 15, .18);
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 2px;
}

.ss-znacky-root .ss-znacky-crumbs .current {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   5) HERO — editorial centered title block
   ============================================================ */
.ss-znacky-root .ss-znacky-hero {
  padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}

.ss-znacky-root .ss-znacky-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ss-sage, #6B8B85);
  margin-bottom: 18px;
}

.ss-znacky-root .ss-znacky-eyebrow::before,
.ss-znacky-root .ss-znacky-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ss-sage, #6B8B85);
}

.ss-znacky-root .ss-znacky-title {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 22px;
}

.ss-znacky-root .ss-znacky-tagline {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(15, 15, 15, .82);
  max-width: 620px;
  margin: 0 auto;
}

.ss-znacky-root .ss-znacky-tagline em {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   6) FILTER CHIPS (Vse / Korejske / Premiove)
   ============================================================ */
.ss-znacky-root .ss-znacky-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 0 12px;
}

.ss-znacky-root .ss-znacky-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--ss-border-mid, rgba(15, 15, 15, .16));
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ss-black, #0F0F0F);
  cursor: pointer;
  transition:
    background-color .25s cubic-bezier(.4, 0, .2, 1),
    border-color .25s cubic-bezier(.4, 0, .2, 1),
    color .25s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-chip:hover {
  border-color: var(--ss-black, #0F0F0F);
}

.ss-znacky-root .ss-znacky-chip.is-active {
  background: var(--ss-black, #0F0F0F);
  border-color: var(--ss-black, #0F0F0F);
  color: #FAF6EE;
}

.ss-znacky-root .ss-znacky-chip-count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}

.ss-znacky-root .ss-znacky-chip.is-active .ss-znacky-chip-count {
  color: rgba(250, 246, 238, .7);
}


/* ============================================================
   7) A-Z STICKY BAR (Aesop pattern)
   IMPORTANT: top: clamp covers Shoptet fixed header (topbar 36px
   + main header ~132px desktop / ~64px mobile). Sticks BELOW
   the header so user always sees alphabet while scrolling brands.
   ============================================================ */
.ss-znacky-root .ss-znacky-az {
  position: sticky;
  top: clamp(64px, 12vw, 168px);
  z-index: 50;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 16px 12px;
  margin: 14px -1vw 0;
  background: rgba(242, 235, 219, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}

.ss-znacky-root .ss-znacky-az-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--ss-black, #0F0F0F);
  text-decoration: none;
  border-radius: 999px;
  transition:
    background-color .25s cubic-bezier(.4, 0, .2, 1),
    color .25s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-az-link:hover {
  background: var(--ss-cream, #E8DDC8);
  color: var(--ss-black, #0F0F0F);
}

.ss-znacky-root .ss-znacky-az-link.is-empty {
  color: rgba(15, 15, 15, .22);
  pointer-events: none;
  cursor: default;
}

.ss-znacky-root .ss-znacky-az-link.is-current {
  background: var(--ss-black, #0F0F0F);
  color: #FAF6EE;
}


/* ============================================================
   8) LETTER GROUP
   ============================================================ */
.ss-znacky-root .ss-znacky-group {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(20px, 2.5vw, 32px);
  /* offset for Shoptet fixed header + our sticky A-Z bar */
  scroll-margin-top: clamp(140px, 18vw, 240px);
}

.ss-znacky-root .ss-znacky-letter {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ss-terracotta, #9A7A5F);
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}


/* ============================================================
   9) BRAND CARDS GRID
   ============================================================ */
.ss-znacky-root .ss-znacky-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  width: 100%;
}

.ss-znacky-root .ss-znacky-card {
  display: flex;
  flex-direction: column;
  background: #FAF6EE;
  border: 1px solid rgba(15, 15, 15, .06);
  border-radius: 10px;
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(15, 15, 15, .04);
  /* Explicit transition list — never `transition: all`. */
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s cubic-bezier(.4, 0, .2, 1),
    background-color .35s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-card:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: rgba(15, 15, 15, .12);
  box-shadow: 0 14px 36px rgba(15, 15, 15, .08);
}

/* Logo area — fixed height for visual alignment.
   Grayscale + opacity .8 at rest, full color + opacity 1 on card hover. */
.ss-znacky-root .ss-znacky-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin: 0 0 18px;
  padding: 4px 0;
}

.ss-znacky-root .ss-znacky-card-logo img {
  max-width: 100%;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .78;
  transition:
    filter .4s cubic-bezier(.4, 0, .2, 1),
    opacity .4s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-card:hover .ss-znacky-card-logo img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.03);
}

/* Text fallback when no logo image — italic Rigane brand wordmark */
.ss-znacky-root .ss-znacky-card-logo-text {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ss-black, #0F0F0F);
  text-align: center;
  opacity: .82;
  transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-card:hover .ss-znacky-card-logo-text {
  opacity: 1;
}

.ss-znacky-root .ss-znacky-card-name {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 6px;
}

.ss-znacky-root .ss-znacky-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.ss-znacky-root .ss-znacky-card-tag {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(107, 139, 133, .12);
  color: var(--ss-sage-deep, #5A7E78);
}

.ss-znacky-root .ss-znacky-card-tag.is-premium {
  background: rgba(154, 122, 95, .12);
  color: var(--ss-terracotta-deep, #7E6248);
}

.ss-znacky-root .ss-znacky-card-desc {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 0 16px;
  flex: 1; /* push CTA to bottom */
}

.ss-znacky-root .ss-znacky-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ss-black, #0F0F0F);
  margin-top: auto;
  transition: gap .3s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-card:hover .ss-znacky-card-cta {
  gap: 12px;
}

.ss-znacky-root .ss-znacky-card-cta-arrow {
  display: inline-block;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--ss-terracotta, #9A7A5F);
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-card:hover .ss-znacky-card-cta-arrow {
  color: var(--ss-terracotta-deep, #7E6248);
}


/* ============================================================
   10) EMPTY STATE — when filter has no matching brands
   ============================================================ */
.ss-znacky-root .ss-znacky-empty {
  text-align: center;
  padding: clamp(48px, 6vw, 96px) 16px;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
}


/* ============================================================
   11) FOOTER NUDGE — call-to-action below grid
   ============================================================ */
.ss-znacky-root .ss-znacky-foot {
  padding: clamp(48px, 5vw, 80px) 0 clamp(56px, 6vw, 96px);
  text-align: center;
  border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  margin-top: clamp(32px, 4vw, 56px);
}

.ss-znacky-root .ss-znacky-foot-eyebrow {
  display: inline-block;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ss-sage, #6B8B85);
  margin-bottom: 14px;
}

.ss-znacky-root .ss-znacky-foot-title {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.02em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 16px;
  line-height: 1.1;
}

.ss-znacky-root .ss-znacky-foot-copy {
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(15, 15, 15, .76);
  max-width: 540px;
  margin: 0 auto 26px;
}

.ss-znacky-root .ss-znacky-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ss-black, #0F0F0F);
  color: #FAF6EE;
  padding: 15px 28px;
  font-family: var(--ss-sans, 'Manrope', -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ss-r, 6px);
  transition:
    background-color .35s cubic-bezier(.4, 0, .2, 1),
    gap .35s cubic-bezier(.4, 0, .2, 1);
}

.ss-znacky-root .ss-znacky-foot-cta:hover {
  background: var(--ss-terracotta-deep, #7E6248);
  gap: 20px;
}


/* ============================================================
   12) FADE-IN ON LOAD — only root sections, no per-card stagger
   (BASELINE §12 anti-pattern: no per-card stagger animations)
   ============================================================ */
@keyframes ss-znacky-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ss-znacky-root .ss-znacky-hero,
.ss-znacky-root .ss-znacky-filters,
.ss-znacky-root .ss-znacky-az,
.ss-znacky-root .ss-znacky-content,
.ss-znacky-root .ss-znacky-foot {
  animation: ss-znacky-fade-in .5s cubic-bezier(.4, 0, .2, 1) both;
}

.ss-znacky-root .ss-znacky-filters {
  animation-delay: .05s;
}

.ss-znacky-root .ss-znacky-az {
  animation-delay: .1s;
}

.ss-znacky-root .ss-znacky-content {
  animation-delay: .15s;
}

.ss-znacky-root .ss-znacky-foot {
  animation-delay: .2s;
}


/* ============================================================
   13) RESPONSIVE — sjednoceno s rest projektu
   ============================================================ */
@media (max-width: 1100px) {
  .ss-znacky-root .ss-znacky-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .ss-znacky-root .ss-znacky-az {
    margin: 14px 0 0;
    padding: 12px 8px;
  }

  .ss-znacky-root .ss-znacky-az-link {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .ss-znacky-root .ss-znacky-letter {
    font-size: clamp(34px, 6vw, 48px);
  }
}

@media (max-width: 768px) {
  .ss-znacky-root {
    padding: 0 16px;
  }

  .ss-znacky-root .ss-znacky-hero {
    padding: 36px 0 32px;
  }

  .ss-znacky-root .ss-znacky-eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
  }

  .ss-znacky-root .ss-znacky-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ss-znacky-root .ss-znacky-card {
    padding: 18px 18px 16px;
  }

  .ss-znacky-root .ss-znacky-card-logo {
    height: 80px;
    margin-bottom: 14px;
  }

  .ss-znacky-root .ss-znacky-card-logo img {
    max-height: 64px;
  }

  .ss-znacky-root .ss-znacky-card-logo-text {
    font-size: 22px;
  }

  .ss-znacky-root .ss-znacky-chip {
    padding: 8px 14px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .ss-znacky-root .ss-znacky-az {
    gap: 2px;
    padding: 10px 4px;
  }

  .ss-znacky-root .ss-znacky-az-link {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .ss-znacky-root .ss-znacky-grid {
    grid-template-columns: 1fr;
  }

  .ss-znacky-root .ss-znacky-card-logo {
    height: 88px;
  }
}


/* ============================================================
   14) REDUCED MOTION — bypass all transforms + animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ss-znacky-root *,
  .ss-znacky-root *::before,
  .ss-znacky-root *::after {
    animation: none !important;
    transition: none !important;
  }

  .ss-znacky-root .ss-znacky-card:hover {
    transform: none;
  }

  .ss-znacky-root .ss-znacky-card:hover .ss-znacky-card-logo img {
    transform: none;
  }
}