/* ============================================================
   skinspecialist.cz — ss-header-19.css — v19.1
   ----------------------------------------------------------------
   v19.1 patch (buttons nezarovnani po deployi v19):
     ROOT CAUSE: Shoptet ma vlastni CSS pravidla ktera lamala layout:
       1. `.form-group { position: relative }` — moje absolute .login-wrapper
          se kotvila na form-group misto na #customerLogin
       2. `.login-wrapper .btn { float: right }` — button vyplynul z flex flow
       3. `.login-wrapper .password-helper { float: left; width: 55% }` — helper plaval doleva
     FIX:
       - position: static !important na .form-group (anchor → #customerLogin)
       - float: none !important + width: 100% !important na btn + password-helper
       - gap: 0 + margin-top: 14px na btn (gap CSS se z neznameho duvodu zdvojuje na 28)
       - justify-content: flex-end na login-wrapper (pack content na dno)

   v19 — Login popup redesign (V1 "Balanced classic"):
     - 720 px width, 50/50 split (cream | white)
     - 4 px outer corners (web standard)
     - Heady 28px Rigane s italic akcenty
     - Sub-line italic 14px serif pod kazdym headem
     - Inputs 4px corners, white bg, sage focus
     - Zapomenute heslo NAD Prihlasit se (oba pushed na dno sloupce)
     - Registrovat ghost CTA na dne praveho sloupce — vertikalne zarovnan
     - Sage checkmark dots (ne zelene defaultni)
     - Sipka v top-right zarovnana na login icon centrum
     - Popup right edge zarovnan s login button right edge

   v18.3 patch (dim scrollovala mimo viewport + nezamykala interakci):
     A) .ss-dim.is-active: pointer-events:auto je BEZPECNE (stacking
        z v18.2 zarucuje, ze cart-wrapper z=9100 a popup z=9200 jsou
        nad dim v header contextu). Dim nyni blokuje klik na pozadi.
     B) html.ss-dim-active override: .ss-header + .ss-topbar + --hidden
        dostanou transform:none !important. Bez tohoto by scroll-condense
        posunul header transformaci a dim (uvnitr) by sel s nim.
     C) JS bonus: setupScrollCondense().megaOrCartOpen() bail rozsireno
        na ss-dim-active — state se behem dim nemeni vubec.

   v18.2 patch (cart & popup mely byt jedine svetle, ale dimnuly se taky):
     A) .ss-topbar: z-index ODSTRANEN. Topbar je nyni dite .ss-header
        (JS presun), v stacking contextu headeru se dimne s ostatnim chrome.
     B) .ss-actions: pridan position:relative — slouzi jako containing
        block pro position:absolute #login popup. Bez toho popup pocital
        top:100% vuci body → off-screen na vysce stranky.
     C) #login force-visible rule pridano (opacity 1, visibility visible,
        transform 0) pro is-open / popup-widget--open / display:block stavy.
     D) Dim element je nyni appendovan do .ss-header (ne body) v JS.
        V stacking contextu headeru z-index 9000 = nad header chrome,
        ale pod cart-wrapper (9100) a #login popupem (9200, po presunu
        do .ss-actions). Cart icon + dropdown + popup zustanou svetle.

   v18.1 patch (3 bugs po v18):
     A) Cart hover flicker — .ss-dim mela pointer-events:auto, zachytavala
        eventy. Fix: pointer-events:none stale.
     B) Spacing — .ss-header-main > .ss-container { gap: clamp(28px,3vw,56px) }.
     C) .ss-login zmenena z <a> na <button>.

   v18 changes (proti v17):
     1) Nav underline: width 0 -> 100% nahrazen transform: scaleX
        + origin flip (right -> left).
     2) Header-main spacing: pridan gap (nove zmeneno v v18.1, viz B).
     4) Dim overlay (.ss-dim) — 15 % black, sdileny mezi cart hover
        a login popup.
     5) Cart shipping strip — italic serif text + 3 px sage progress
        bar pod CTA v dropdown.
     6) Login popup restyling — restyluje Shoptet native #login.popup-widget.
   ============================================================ */


/* ============================================================
   0) DOPLNĚNÍ TOKENŮ (style.css token foundation + nové aliases)
   ============================================================ */
:root {
  --ss-white: #FFFEFB;
  --ss-off: #FBF8F2;
  --ss-cream-deep: #DAC6A4;
  --ss-sage-deep: #5C7A74;
  --ss-terracotta-deep: #856548;
  --ss-text: var(--ss-black);
  --ss-muted: rgba(15, 15, 15, .62);
  --ss-hint: rgba(15, 15, 15, .46);
  --ss-border: rgba(15, 15, 15, .08);
  --ss-border-mid: rgba(15, 15, 15, .14);
  --ss-hover: rgba(107, 139, 133, .10);
  --ss-dark: #2C2823;
  --ss-r: 4px;
  --ss-r-lg: 8px;
  --ss-shadow: 0 8px 32px rgba(15, 15, 15, .08), 0 2px 8px rgba(15, 15, 15, .04);
  --ss-ease: .3s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   1) SCHOVAT NATIVE SHOPTET HEADER
   ============================================================ */
.top-navigation-bar,
header#header,
nav#navigation,
.menu-helper,
.user-action,
#header .header-top,
#header .navigation-in,
.box-categories {
  display: none !important;
}

body {
  padding-top: 168px !important; /* topbar 36 + header-main 84 + nav 48 */
  transition: padding-top 320ms cubic-bezier(.4, 0, .2, 1);
}

/* SCROLL CONDENSE — při scrollu dolů se topbar + header-main schovají,
   zůstává jen nav lišta. Body padding klesne na 48px (nav výška). */
body.is-header-condensed {
  padding-top: 48px !important;
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

#content-wrapper,
.overall-wrapper,
.content-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ============================================================
   1.5) TOPBAR  (36px, value prop ribbon)
   ============================================================ */
.ss-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* v22: z-index 9300 — topbar musi byt NAD .ss-cart-wrapper (9100) i #login
     (9200), jinak pri rychlem scrollu kosik (header-main radek) prekryva horni
     listu. Hierarchicky ma byt horni lista nad header-main radkem.
     POZN.: behem dim (cart hover / login popup) se shodi na auto — viz
     `html.ss-dim-active .ss-topbar` nize — aby se topbar stale dimnul s chrome.
     Pod drawer (9500). Topbar je dite .ss-header (od v18.2), fixed top:0 drzi. */
  z-index: 9300;
  height: 36px;
  background: var(--ss-dark);
  display: flex;
  align-items: center;
  font-family: var(--ss-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(218, 198, 164, .85);
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}

body.is-header-condensed .ss-topbar {
  transform: translateY(-100%);
}

/* 3-col grid: levý filler · středová promise · pravý lang.
   Text v středovém sloupci = vizuálně centrovaný napříč topbar.

   POZOR: middle column NESMÍ být `auto` — `.ss-topbar-message` jsou
   absolutně positioned (inset:0) a do content-sizing nepřispívají,
   takže `auto` by zkolapsoval na 0. Proporční `2fr` (≈50% šířky). */
.ss-topbar-container {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  height: 100%;
  gap: 24px;
}

.ss-topbar-promise {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  grid-column: 2;
  white-space: nowrap;
}

.ss-topbar-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #DAC6A4; /* cream-deep plné */
}

.ss-topbar-message.is-active {
  opacity: 1;
  transform: translateY(0);
}

.ss-topbar-lang {
  display: none !important;   /* single-language e-shop → jazykový přepínač pryč */
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 6px 10px;
  border-radius: 4px;
  flex-shrink: 0;
  grid-column: 3;
  justify-self: end;
  transition: background 200ms ease, color 200ms ease;
}

.ss-topbar-lang:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--ss-white);
}

.ss-topbar-lang svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  .ss-topbar-message {
    transition: none;
  }
}


/* ============================================================
   2) HEADER WRAPPER  (fixed top, dva pásy pod topbarem)
   ============================================================ */
.ss-header {
  position: fixed;
  top: 36px; /* pod topbarem */
  left: 0;
  right: 0;
  z-index: 9000;
  font-family: var(--ss-sans);
  background: var(--ss-white);
  box-shadow: 0 0 0 transparent;
  /* v21: condense přes animovaný `top` (ne transform) — header nesmí mít transform,
     jinak se z něj stane containing block a topbar (fixed dítě) přepne referenci
     viewport→header → skok/přetečení při scrollu nahoru. */
  transition: top 320ms cubic-bezier(.4, 0, .2, 1), transform 320ms cubic-bezier(.4, 0, .2, 1), box-shadow 250ms ease;
}

.ss-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(15, 15, 15, .08);
}

.ss-header--hidden {
  transform: translateY(-100%);
}

/* Condensed: header sjede na top:0 a celý se posune nahoru o výšku
   header-main (84px), tj. nav lišta vyleze přesně na pozici 0.
   Header-main část je tím schovaná nad viewport. */
body.is-header-condensed .ss-header {
  top: -84px;                 /* v21: dřív top:0 + transform:translateY(-84px) — transform pryč (viz výše) */
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ss-topbar,
  .ss-header {
    transition: none;
  }
}

.ss-container {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

/* v18.1 BUG FIX — header-main gap se aplikoval na .ss-header-main, ten ale
   ma jen jedno dite (.ss-container). Skutecna flex layout je v containeru.
   Scope-up na header-main, nav-container ma vlastni gap (28px) takze ne-ovlivnen. */
.ss-header-main > .ss-container {
  gap: clamp(28px, 3vw, 56px);
}


/* ============================================================
   3) HEADER MAIN  (84px: hamburger + logo + search + phone + actions)
   ============================================================ */
.ss-header-main {
  background: var(--ss-white);
  border-bottom: 1px solid var(--ss-border);
  height: 84px;
  display: flex;
  align-items: center;
  /* v18 BUG FIX #7: spacing logo / search / kontakt / actions */
  gap: clamp(20px, 3vw, 48px);
}

.ss-logo {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  flex-shrink: 0;
}

.ss-logo img {
  height: 68px;
  width: auto;
  max-width: 280px;       /* safety pro horizontální logo — nepřeteče */
  object-fit: contain;
  display: block;
  transition: transform 300ms ease;
}

.ss-logo:hover img {
  transform: scale(1.02);
}



/* ── SEARCH ──
   FIX BUG 1: flex 0 1 480px místo flex:1 — nestretchuje na celý řádek.
   Plus !important pro jistotu (Shoptet má .ss-search globální možná). */
.ss-search {
  flex: 0 1 480px !important;
  width: 100%;
  max-width: 480px !important;
  min-width: 0;
  position: relative;
}

.ss-search form {
  display: flex;
  align-items: center;
  border: 1px solid var(--ss-border-mid);
  background: var(--ss-canvas);
  border-radius: 4px;            /* hranaté, konzistentní s e-shopem (z 999px) */
  overflow: hidden;
  transition: border-color 250ms ease, background 250ms ease, box-shadow 250ms ease;
  width: 100%;
}

.ss-search form:focus-within {
  border-color: var(--ss-sage);
  background: var(--ss-white);
  box-shadow: 0 0 0 3px rgba(107, 139, 133, .12);
}

.ss-search-inner {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 4px 0 18px;
  min-width: 0;
}

.ss-search-inner input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-family: var(--ss-sans);
  font-size: 14px;
  color: var(--ss-text);
  outline: none;
  min-width: 0;
}

.ss-search-inner input::placeholder {
  color: var(--ss-hint);
}

.ss-search-submit {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  border-radius: 50%;
  color: var(--ss-muted);
  transition: color 200ms ease, background 200ms ease;
}

.ss-search-submit:hover {
  color: var(--ss-sage);
  background: var(--ss-white);
}

.ss-search form:focus-within .ss-search-submit {
  color: var(--ss-sage);
}

.ss-search-submit svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v22: lupa toggle — na desktopu skrytá (plná lišta funguje normálně),
   na mobilu (viz @media 900) je to jediný viditelný search prvek v rowu. */
.ss-search-toggle {
  display: none;
}
@keyframes ss-search-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── PHONE ── */
.ss-phone {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-right: 8px;
  line-height: 1.2;
}

.ss-phone-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ss-muted);
  margin-bottom: 2px;
}

.ss-phone-hours {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ss-muted);
  margin-top: 2px;
}

.ss-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ss-terracotta) !important;
  text-decoration: none !important;
  transition: color 250ms ease;
}

.ss-phone-number:hover {
  color: var(--ss-terracotta-deep) !important;
}

.ss-phone-number svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}


/* ── ACTIONS (login icon-only + cart primary CTA) ── */
.ss-actions {
  /* v18.2: position:relative — slouzi jako containing block pro
     position:absolute #login popup (presunut sem JS z body rootu).
     Bez teto pozice popup pocital top:calc(100% + 12px) vuci viewportu
     a koncil na vysce stranky (mimo obrazovku). */
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.ss-cart-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* v19.2: .ss-login-wrapper — mirror .ss-cart-wrapper.
   Obaluje login button + #login popup. Wrapper drzi vse pohromade
   pro hover semantiku (mouse uvnitr = stay open). z-index 9100 nad dim. */
.ss-login-wrapper {
  position: relative;
  z-index: 9100;
  flex-shrink: 0;
}

/* Login: icon-only, kruhový hover sage. Premium pattern (Aesop, Glossier) —
   login je sekundární akce, jen ikona; popisek přes title/aria-label. */
.ss-login {
  /* v18.1: zmeneno z <a href="/login/"> na <button class="toggle-window">
     aby otevirala Shoptet popup misto navigace na /login/. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ss-text) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: background 250ms ease, color 250ms ease;
}

.ss-login:hover {
  background: rgba(107, 139, 133, .12);
  color: var(--ss-sage) !important;
}

.ss-login svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Cart: jediný filled CTA — auto-winner of attention.
   Padding zmenšen z 11/22 → 10/18 aby nedominoval příliš. */
.ss-cart {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ss-sage);
  color: var(--ss-white) !important;
  border: 0;
  border-radius: 4px;            /* sjednoceno s tlačítky e-shopu (z 999px pill) */
  padding: 10px 18px;
  font-family: var(--ss-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 250ms ease, transform 250ms ease;
}

.ss-cart:hover {
  background: var(--ss-sage-deep);
  transform: translateY(-1px);
}

.ss-cart svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.ss-cart-badge {
  background: var(--ss-terracotta);
  color: var(--ss-white);
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* v22.4: prázdný košík (count 0) — desktop badge schová (zachová původní chování),
   mobil ho ukáže (viz @media 900). JS přidává `.is-zero` při 0. */
.ss-cart-badge.is-zero {
  display: none !important;
}


/* ── CART DROPDOWN (hover popup; replikace FK chování) ── */
.ss-cart-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 420px;
  background: var(--ss-white);
  /* v19.3: sjednoceno na 4px (--ss-r) — match login popup. */
  border-radius: var(--ss-r);
  box-shadow: 0 16px 48px rgba(15, 15, 15, .18);
  border: 1px solid var(--ss-border);
  overflow: hidden;
  display: none;
  z-index: 10001;
  font-family: var(--ss-sans);
}

.ss-cart-dropdown.is-open {
  display: block;
  animation: ssCartFadeIn 250ms ease forwards;
}

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

.ss-cart-dropdown-inner {
  max-height: 360px;
  overflow-y: auto;
}

.ss-cart-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--ss-r);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
  z-index: 1;
}

.ss-cart-close:hover {
  background: var(--ss-canvas);
}

.ss-cart-close svg {
  width: 16px;
  height: 16px;
  stroke: var(--ss-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.ss-cart-close:hover svg {
  stroke: var(--ss-dark);
}

/* EMPTY STATE — 2 columns: ikona + text  |  kontakt */
.ss-cart-empty {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  min-height: 200px;
}

.ss-cart-empty-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  gap: 10px;
  text-align: center;
}

.ss-cart-empty-icon svg {
  width: 54px;
  height: 54px;
  stroke: var(--ss-terracotta);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ss-cart-empty-title {
  font-family: var(--ss-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ss-dark);
  margin: 0;
  line-height: 1.2;
}

.ss-cart-empty-desc {
  font-size: 13px;
  color: var(--ss-muted);
  margin: 0;
  line-height: 1.5;
}

.ss-cart-empty-divider {
  background: var(--ss-border);
  width: 1px;
}

.ss-cart-empty-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  gap: 16px;
}

.ss-cart-empty-right-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ss-dark);
  margin: 0 0 4px;
}

.ss-cart-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--ss-dark) !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: color 200ms ease;
}

.ss-cart-contact-item:hover {
  color: var(--ss-sage) !important;
}

.ss-cart-contact-item svg {
  width: 18px;
  height: 18px;
  stroke: var(--ss-terracotta);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* FILLED STATE — list položek + summary */
.ss-cart-filled {
  padding: 8px 20px 0;
}

.ss-cart-items {
  max-height: 240px;
  overflow-y: auto;
}

.ss-cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ss-border);
  align-items: flex-start;
}

.ss-cart-item:last-child {
  border-bottom: 0;
}

.ss-cart-item-image {
  width: 52px;
  height: 52px;
  border-radius: var(--ss-r);
  background: var(--ss-canvas);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--ss-border);
}

.ss-cart-item-image-placeholder {
  width: 52px;
  height: 52px;
  border-radius: var(--ss-r);
  background: var(--ss-canvas);
  flex-shrink: 0;
}

.ss-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-cart-item-name {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ss-dark);
  line-height: 1.35;
}

.ss-cart-item-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ss-muted);
}

.ss-cart-item-price {
  font-weight: 600;
  color: var(--ss-dark);
  white-space: nowrap;
}

.ss-cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--ss-border);
  margin-top: 4px;
}

.ss-cart-summary-label {
  font-size: 13px;
  color: var(--ss-muted);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-cart-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ss-dark);
}

/* FOOTER s "Přejít do košíku" */
.ss-cart-dropdown-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--ss-border);
  background: var(--ss-canvas);
}

.ss-cart-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ss-sage);
  color: var(--ss-white) !important;
  text-decoration: none !important;
  padding: 13px 20px;
  border-radius: var(--ss-r);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background 250ms ease;
}

.ss-cart-go:hover {
  background: var(--ss-sage-deep);
  color: var(--ss-white) !important;
}

.ss-cart-go svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}


/* ============================================================
   4) NAV LIŠTA  (48px: kategorie horizontal s mega panely)
   FIX BUG 2 + 3: nav force-show / hamburger force-hide nad 900px
   řešíme níže v sekci 9 RESPONSIVE.
   ============================================================ */
.ss-nav {
  background: var(--ss-dark);
  height: 48px;
  display: flex;
  align-items: center;
  position: relative; /* anchor pro mega-panel position:absolute */
}

.ss-nav-container {
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
}

.ss-nav-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  gap: 0;
  height: 100%;
}

.ss-nav-list--primary {
  flex: 0 1 auto;
  min-width: 0;
}

/* Sekundární skupina (Značky / Blog / B2B) — odsazená vpravo, jemně tlumená.
   POZOR: zde NESMÍ být position:relative — jinak by se ze <ul> stal containing
   block pro absolute mega panely uvnitř a panel by se "smrskl" na šířku ulu.
   Separator řešíme přes border-left místo ::before. */
.ss-nav-list--secondary {
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  padding-left: 14px;
  margin-left: 14px;
}

.ss-nav-list--secondary .ss-nav-trigger {
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(218, 198, 164, .72);
}

.ss-nav-list--secondary .ss-nav-item:hover .ss-nav-trigger,
.ss-nav-list--secondary .ss-nav-item.is-open .ss-nav-trigger,
.ss-nav-list--secondary .ss-nav-item--active .ss-nav-trigger {
  color: var(--ss-white);
}

/* POZOR: position:static (ne relative) — mega panel má být full-width
   relative to .ss-nav, ne k jednotlivému itemu. */
.ss-nav-item {
  position: static;
  display: flex;
}

.ss-nav-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ss-cream-deep);
  text-decoration: none !important;
  font-family: var(--ss-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  transition: color 250ms ease;
}

/* v18 BUG FIX #3: underline jede L->R + mizi dal DOPRAVA (origin flip).
   Pattern z ss-category-19.css .ss-cat-subcat — consistent across site. */
.ss-nav-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--ss-terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms cubic-bezier(.4, 0, .2, 1);
}

.ss-nav-item:hover .ss-nav-trigger,
.ss-nav-item.is-open .ss-nav-trigger,
.ss-nav-item--active .ss-nav-trigger {
  color: var(--ss-white);
}

.ss-nav-item:hover .ss-nav-trigger::after,
.ss-nav-item.is-open .ss-nav-trigger::after,
.ss-nav-item--active .ss-nav-trigger::after {
  transform: scaleX(1);
  transform-origin: left;
}

.ss-nav-trigger .ss-chev {
  width: 10px;
  height: 10px;
  transition: transform var(--ss-ease);
  opacity: .55;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ss-nav-item.is-open .ss-nav-trigger .ss-chev {
  transform: rotate(180deg);
}

/* Solo (bez chevronu) — pro Vyprodej / B2B */
.ss-nav-trigger--solo .ss-chev {
  display: none;
}

/* CTA varianta (Vyprodej / akcent) */
.ss-nav-item--cta .ss-nav-trigger {
  background: var(--ss-terracotta);
  color: var(--ss-white);
  margin: 8px;
  border-radius: var(--ss-r);
  padding: 0 18px;
  height: 32px;
  font-weight: 600;
}

.ss-nav-item--cta .ss-nav-trigger::after {
  display: none;
}

.ss-nav-item--cta .ss-nav-trigger:hover {
  background: var(--ss-terracotta-deep);
  color: var(--ss-white);
}

.ss-nav-spacer {
  margin-left: auto;
}


/* ============================================================
   5) MEGA PANEL  (full-width pod nav lištou)
   ============================================================ */
.ss-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ss-off);
  border-top: 1px solid var(--ss-border);
  box-shadow: var(--ss-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ss-ease), visibility var(--ss-ease), transform var(--ss-ease);
  z-index: 50;
  pointer-events: none;
}

.ss-nav-item.is-open .ss-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.ss-mega-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 32px 36px;
  display: grid;
  gap: 28px;
  align-items: stretch;
}

/* Layout varianty (na .ss-mega-panel) */
.ss-mega-panel--cols-7 .ss-mega-inner {
  grid-template-columns: repeat(7, minmax(0, 1fr)) 280px;
}
.ss-mega-panel--cols-4 .ss-mega-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 320px;
}
.ss-mega-panel--cols-3 .ss-mega-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 320px;
}
.ss-mega-panel--cols-2 .ss-mega-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr)) 320px;
}
.ss-mega-panel--cols-brands .ss-mega-inner {
  grid-template-columns: 1fr 320px;
}

/* --no-side varianta — když chybí promo aside, sloupce vyplní celou šířku */
.ss-mega-panel--no-side.ss-mega-panel--cols-7 .ss-mega-inner {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.ss-mega-panel--no-side.ss-mega-panel--cols-4 .ss-mega-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ss-mega-panel--no-side.ss-mega-panel--cols-3 .ss-mega-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ss-mega-panel--no-side.ss-mega-panel--cols-2 .ss-mega-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* MEGA COLUMN — flex column ujednocuje vertikální rytmus
   napříč sloupci s různě dlouhými nadpisy.
   Klíč k zarovnání "see-all" linků dole: ul má flex:1 (vyplní zbytek
   sloupce) a li.see-all má margin-top:auto (přitlačí se na spodek). */
.ss-mega-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.ss-mega-col h4,
.ss-mega-col .ss-l2 {
  display: flex;
  align-items: flex-end;
  min-height: 52px;          /* 2 řádky × 18px × ~1.45 line-height */
  font-family: var(--ss-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ss-dark);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ss-border);
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: color var(--ss-ease);
}

.ss-mega-col .ss-l2:hover {
  color: var(--ss-sage);
}

.ss-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ss-mega-col ul li {
  margin: 0;
}

.ss-mega-col ul a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(15, 15, 15, .78);
  text-decoration: none !important;
  transition: color var(--ss-ease), padding var(--ss-ease);
}

.ss-mega-col ul a:hover {
  color: var(--ss-sage);
  padding-left: 4px;
}

.ss-mega-col ul li.see-all {
  margin-top: auto;
  padding-top: 16px;
}

.ss-mega-col ul li.see-all a {
  padding: 10px 0 0;
  border-top: 1px solid var(--ss-border);
  font-weight: 500;
  color: var(--ss-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* SIMPLE LIST (cols-2 layout) */
.ss-list-col a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ss-border);
  font-size: 15px;
  color: var(--ss-text);
  text-decoration: none !important;
  transition: color var(--ss-ease), padding var(--ss-ease);
}

.ss-list-col a:last-child {
  border-bottom: 0;
}

.ss-list-col a:hover {
  color: var(--ss-sage);
  padding-left: 4px;
}

.ss-list-col a .arr {
  font-size: 11px;
  color: var(--ss-hint);
  transition: transform var(--ss-ease), color var(--ss-ease);
}

.ss-list-col a:hover .arr {
  transform: translateX(2px);
  color: var(--ss-sage);
}


/* ============================================================
   6) PROMO ASIDE  (right rail mega panelu)
   ============================================================ */
/* PROMO ASIDE — "nášivka" pattern: full-bleed do panel edges, low-opacity wash,
   text-link CTA. Default cream tint pro plain promo (Sety, Značky, Blog).
   Quiz varianta níže přepíše background na sage tint. */
.ss-mega-promo {
  background: rgba(232, 221, 200, .42);
  border-radius: 0;
  border-left: 1px solid rgba(15, 15, 15, .08);
  padding: 32px 32px 36px;
  margin: -32px -32px -36px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ss-mega-promo .ss-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ss-terracotta);
}

.ss-mega-promo h5 {
  font-family: var(--ss-serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
  color: var(--ss-dark);
}

.ss-mega-promo p {
  margin: 0;
  font-size: 14px;
  color: rgba(15, 15, 15, .72);
  line-height: 1.55;
}

/* CTA jako text-link s underline — premium pattern (Aesop, Diptyque) */
.ss-mega-promo .ss-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--ss-dark);
  border-radius: 0;
  background: transparent;
  color: var(--ss-dark);
  text-decoration: none !important;
  cursor: pointer;
  font-family: var(--ss-sans);
  letter-spacing: .04em;
  transition: color 250ms ease, border-color 250ms ease, gap 250ms ease;
}

.ss-mega-promo .ss-cta:hover {
  background: transparent;
  color: var(--ss-sage);
  border-bottom-color: var(--ss-sage);
  gap: 10px;
}

/* Quiz varianta — base je už nášivka pattern, jen override background tint
   (sage místo cream) a barvu border-left. */
.ss-mega-promo--quiz {
  background: rgba(107, 139, 133, .10);
  border-left-color: rgba(107, 139, 133, .22);
}

.ss-mega-promo--quiz::after {
  display: none;
}

.ss-mega-promo--quiz .ss-eyebrow::before {
  display: none;
}


/* ============================================================
   7) BRANDS GRID  (cols-brands layout — mega menu dropdown)
   ----------------------------------------------------------------
   v19.3 fix: auto-fit grid s min 150px + white-space: nowrap.
   Predtim repeat(4, 1fr) lamalo multi-word brandy ("Beauty of Joseon",
   "Cell By Cell") na novy radek protoze cells byly uzke (25% panel width).
   Auto-fit adapts column count podle dostupne sirky. Nowrap zabrani lomeni.
   ============================================================ */
.ss-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 20px;
}

.ss-brands a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ss-text);
  text-decoration: none !important;
  transition: color var(--ss-ease);
  white-space: nowrap; /* zabrani lomeni multi-word brandu */
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-brands a:hover {
  color: var(--ss-sage);
}

.ss-brands a.featured {
  font-weight: 600;
}

.ss-brands a.featured::before {
  content: "★";
  color: var(--ss-sage);
  font-size: 12px;
}

.ss-brands-section h4 {
  font-family: var(--ss-serif);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ss-muted);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.ss-brands-section + .ss-brands-section {
  margin-top: 24px;
}


/* ============================================================
   8) HAMBURGER + MOBILE DRAWER
   ============================================================ */
.ss-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  cursor: pointer;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}

.ss-hb-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ss-text);
  border-radius: 2px;
  /* v20 fix: explicit list, literal cubic-bezier (was `transition: all 300ms ease` — BASELINE §10 anti-pattern + wrong easing). */
  transition:
    transform 300ms cubic-bezier(.4, 0, .2, 1),
    opacity 300ms cubic-bezier(.4, 0, .2, 1);
}

.ss-hb-line:last-of-type {
  width: 14px;
  align-self: flex-start;
}

.ss-hamburger.open .ss-hb-line:nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}

.ss-hamburger.open .ss-hb-line:nth-of-type(2) {
  opacity: 0;
}

.ss-hamburger.open .ss-hb-line:nth-of-type(3) {
  width: 20px;
  transform: translateY(-7px) rotate(-45deg);
}

/* DRAWER (off-canvas, slide z leva) */
.ss-drawer {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ss-ease), visibility var(--ss-ease);
  z-index: 9500;
}

.ss-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.ss-drawer-panel {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;                      /* v22.5: panel napravo → vyjíždí zprava */
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--ss-off);
  overflow-y: auto;
  transform: translateX(100%);   /* schovaný vpravo (bylo -100% vlevo) */
  transition: transform var(--ss-ease);
  display: flex;
  flex-direction: column;
}

.ss-drawer.is-open .ss-drawer-panel {
  transform: translateX(0);
}

/* v22.5: drawer head = horní zóna bez loga; X (close) je absolutně umístěný
   přesně na pozici hamburgeru (JS open() dorovná top/right). Head drží výšku
   header zóny (topbar 32 + header-main 64 = 96), aby content začal pod X. */
.ss-drawer-head {
  position: relative;
  /* v25: výška dána obsahem (free-shipping promo, varianta C). Padding-top drží
     řádek promo zhruba na úrovni X (ten je JS-posazený na pozici hamburgeru). */
  padding: 34px 18px 24px;
  border-bottom: 1px solid var(--ss-border);
  flex-shrink: 0;
}

/* v25: drawer free-shipping promo — varianta C (minimal linka, bez karty) */
.ss-drawer-ship__top {
  /* v26: bez emoji → normální textový tok (ne flex, jinak gap dělal mezeru
     mezi „od" a částkou). */
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ss-text);
  margin-bottom: 13px;
  margin-right: 54px;            /* uvolnit místo pro X vpravo */
}
.ss-drawer-ship__top em { font-style: normal; }
.ss-drawer-ship__bar {
  height: 4px;
  border-radius: 99px;
  background: var(--ss-cream, #E8DDC8);
  overflow: hidden;
  margin-bottom: 9px;
  margin-right: 54px;   /* v25: zarovnat s nadpisem a uvolnit místo pro X (nepodjet ho) */
}
.ss-drawer-ship__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ss-sage, #6B8B85);
  border-radius: 99px;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.ss-drawer-ship__hint {
  font-size: 12.5px;
  color: var(--ss-muted);
}
.ss-drawer-ship__hint b {
  color: var(--ss-terracotta-deep);
  font-weight: 700;
}

.ss-drawer-close {
  position: absolute;
  top: 44px;             /* default ≈ hamburger; JS dorovná na přesnou pozici */
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ss-text);
  transition: background var(--ss-ease), color var(--ss-ease);
  z-index: 2;
}

.ss-drawer-close:hover {
  background: var(--ss-canvas);
  color: var(--ss-dark);
}

.ss-drawer-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ss-drawer-search {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ss-border);
  flex-shrink: 0;
}

.ss-drawer-search form {
  display: flex;
  border: 1px solid var(--ss-border-mid);
  background: var(--ss-white);
  border-radius: 4px;            /* hranaté, konzistentní (z 999px) */
  overflow: hidden;
}

.ss-drawer-search input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 11px 18px;
  font-size: 14px;
  background: transparent;
  font-family: var(--ss-sans);
  min-width: 0;
}

.ss-drawer-search button {
  background: var(--ss-black);
  color: var(--ss-white);
  border: 0;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.ss-drawer-nav {
  flex: 1;
  padding: 8px 0;
}

.ss-drawer-nav details {
  border-bottom: 1px solid var(--ss-border);
}

.ss-drawer-nav details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ss-text);
  letter-spacing: .02em;
}

.ss-drawer-nav details > summary::-webkit-details-marker {
  display: none;
}

.ss-drawer-nav details > summary .ss-chev {
  width: 12px;
  height: 12px;
  transition: transform var(--ss-ease);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ss-drawer-nav details[open] > summary {
  color: var(--ss-sage);
}

.ss-drawer-nav details[open] > summary .ss-chev {
  transform: rotate(180deg);
}

.ss-drawer-nav .lvl-2 {
  padding: 0 18px 12px;
}

.ss-drawer-nav .lvl-2 a {
  display: block;
  padding: 8px 0 8px 14px;
  font-size: 13.5px;
  color: var(--ss-muted);
  text-decoration: none !important;
}

.ss-drawer-nav .lvl-2 a:hover {
  color: var(--ss-sage);
}

.ss-drawer-nav > a {
  display: block;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ss-text);
  text-decoration: none !important;
  border-bottom: 1px solid var(--ss-border);
}

.ss-drawer-nav > a:hover {
  color: var(--ss-sage);
}

.ss-drawer-foot {
  padding: 20px 18px;
  border-top: 1px solid var(--ss-border);
  background: var(--ss-canvas);
  flex-shrink: 0;
}

.ss-drawer-foot .ss-phone-label {
  display: block;
  margin-bottom: 4px;
}

.ss-drawer-foot .ss-phone-number {
  font-size: 20px;
}


/* ============================================================
   9) SHOPTET ARTEFAKTY — schovat
   ============================================================ */
.toggle-window-content,
[data-target="cart"].toggle-window-content,
.cart-window,
div[id*="cart-widget"],
div[class*="cart-widget"] {
  display: none !important;
  visibility: hidden !important;
}


/* ============================================================
   10) RESPONSIVE  — DESKTOP-FIRST FORCE-OVERRIDES
   FIX BUG 2: nav force-show nad 900px (i kdyby Shoptet JS chtěl skrýt)
   FIX BUG 3: hamburger force-hide nad 900px
   ============================================================ */
@media (min-width: 901px) {
  .ss-nav {
    display: flex !important;
  }

  .ss-hamburger {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .ss-phone {
    display: none;
  }
}

@media (max-width: 900px) {
  body {
    padding-top: 96px !important; /* topbar 32 + header-main 64 */
  }

  /* Condensed mobile: schová se jen topbar, header-main zůstává viditelný
     (mobil nemá nav lištu — header-main je tu jediný viewport landmark). */
  body.is-header-condensed {
    padding-top: 64px !important;
  }

  body.is-header-condensed .ss-header {
    top: 0;
    transform: none;
  }

  .ss-topbar {
    height: 32px;
    font-size: 11.5px;
  }

  .ss-topbar-container {
    padding: 0 16px;
    gap: 0;
    /* v22.3: mobil = jeden sloupec na celou šířku. Desktop má 1fr 2fr 1fr
       (zpráva jen v prostředním 2fr ~50%), což je na mobilu moc úzké →
       text se ořezával z obou stran ("ždých 14 dní nové tipy na blo").
       Lang i levý filler jsou prázdné → zpráva může zabrat celou šířku. */
    grid-template-columns: 1fr;
  }

  .ss-topbar-promise {
    grid-column: 1;   /* mobil: středová promise přes celou šířku */
  }

  /* Lang switcher mobile schovaný — málo místa */
  .ss-topbar-lang {
    display: none;
  }

  .ss-header {
    top: 32px;
  }

  .ss-header-main {
    height: 64px;
  }

  .ss-container {
    padding: 0 16px;
    gap: 12px;
  }
  /* v24: PRAVÁ příčina rozprostřených ikon (lupa vlevo) — `.ss-header-main >
     .ss-container` (spec 0,2,0) má `gap: clamp(28px,3vw,56px)` a přebíjelo moje
     `.ss-container { gap:12px }` (0,1,0) → mezi ikonami bylo ~28px (ne 12) →
     široké rovnoměrné mezery, cluster roztažený do středu. Override stejnou
     specificitou + !important → uniform 12px → tight cluster, ikony vpravo. */
  .ss-header-main > .ss-container {
    gap: 12px !important;
  }

  /* v22.6: jedno (default — getLogoUrl už vrací horizontální) logo. Výška 34px
     → ~109px šířka (aspect 3.2). Logo 109 + 4 ikony 196 + gutters 32 = 337px
     < 360 → vznikne volné místo pro margin-right:auto grupování. Při 48px
     (=154px) se nevešlo (382px) → margin-right:auto neměl co roztáhnout → lupa vlevo. */
  .ss-logo { flex-shrink: 1; min-width: 0; }
  .ss-logo img {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    /* v27: vizuálně +25 % jen na mobilu (klient přidal white space do JPG → logo
       působilo malé). transform NEmění layout box (zůstává 34px/~109px), takže
       grupování 4 ikon zůstane netknuté — logo „přeroste" doprava do prázdné
       mezery, kde stejně nic není. */
    transform: scale(1.5);
    transform-origin: left center;
  }

  /* ── v22.3 / v22.4: MOBILNÍ HEADER REORDER + SEARCH ──
     Pořadí: Logo → Lupa → Účet → Košík → Menu (flexbox order, bez zásahu do DOM).
     v22.4 SYMETRIE: JEDINÝ auto margin = logo `margin-right:auto` → vytlačí
     všechny 4 ikony doprava jako jednu skupinu (dřív dvojitý auto na search
     i actions cluster rozdělil → lupa zůstala u loga). search/actions/hamburger
     bez auto. Stejné rozestupy: `.ss-actions gap` = container gap (12px) →
     mezi všemi 4 ikonami 12px. */
  .ss-logo { order: 1; margin-right: auto !important; }
  .ss-actions { order: 3; margin: 0 !important; gap: 12px; }
  .ss-hamburger { order: 4; margin: 0 !important; }

  /* SEARCH na mobilu = lupa toggle (40px) v rowu; `.ss-search` byl display:none.
     Toggle se přidává v JS (setupMobileSearch), klik rozbalí pill níže. */
  .ss-search {
    order: 2;
    margin: 0 !important;    /* žádný auto — grouping řeší logo margin-right:auto */
    display: flex !important;
    /* v23 PRAVÁ PŘÍČINA „lupa vlevo": base má `.ss-search{flex:0 1 480px !important;
       max-width:480px !important}` — to !important moje mobilní `flex:0 0 auto`
       (bez !important) NEPŘEBILO → search držel 480px basis, roztáhl se (DevTools
       ukázal div.ss-search = 210×40) a žral místo → lupa visela u jeho levého
       kraje. Fix: natvrdo 40px ikona (flex i max-width s !important). */
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    align-items: center;
    position: static;
  }
  .ss-search-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ss-text);
    border-radius: 4px;
  }
  .ss-search-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }
  .ss-search form { display: none; }   /* collapsed: lišta schovaná */

  /* expanded: floating search pill pod headerem (reuse base pill stylu; fixed →
     nehýbe rowem, žádný layout shift). Stejný princip jako cart dropdown. */
  .ss-search.is-open form {
    display: flex !important;
    position: fixed;
    top: 96px;               /* pod header-main (topbar 32 + main 64) */
    left: 16px;
    right: 16px;
    width: auto;
    margin: 0;
    z-index: 9600;
    box-shadow: 0 10px 24px rgba(15, 15, 15, .12);
    animation: ss-search-drop 240ms cubic-bezier(.4, 0, .2, 1);
  }
  body.is-header-condensed .ss-search.is-open form {
    top: 64px;               /* sbaleno: jen header-main (64) */
  }

  .ss-login {
    width: 36px;
    height: 36px;
  }

  /* v22.4: KOŠÍK = ikona bez pozadí + kolečko s počtem v rohu (jako účet /
     proteinaco). Pryč zelený button bg; badge vždy viditelný (i 0 — řeší JS). */
  .ss-cart {
    background: transparent !important;
    color: var(--ss-text) !important;
    padding: 0 !important;
    width: 40px;
    height: 40px;
    gap: 0;
    justify-content: center;
    position: relative;
    border-radius: 4px;
  }
  .ss-cart svg { width: 22px; height: 22px; }
  .ss-cart-text {
    display: none;
  }
  .ss-cart-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    width: auto;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 1;
    border: 1.5px solid var(--ss-white);   /* odděl od ikony */
    box-sizing: border-box;
    pointer-events: none;
  }
  .ss-cart-badge.is-zero {
    display: flex !important;   /* mobil ukáže i prázdný košík (0) */
  }

  .ss-cart-dropdown {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    border-radius: var(--ss-r);
  }

  .ss-cart-empty {
    grid-template-columns: 1fr;
  }

  .ss-cart-empty-divider {
    width: 100%;
    height: 1px;
  }

  .ss-nav {
    display: none;
  }

  .ss-hamburger {
    display: flex;
  }

  /* Mega panely v drawer řešíme přes <details>, nepotřebujeme je tu. */
  .ss-mega-panel {
    display: none !important;
  }
}


/* ============================================================
   ============================================================
   v18 ADDITIONS
   ============================================================
   ============================================================ */


/* ============================================================
   v18 — DIM OVERLAY (sdileny mezi cart hover a login popup)
   ============================================================ */
.ss-dim {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, .15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9000;
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear .35s;
}
.ss-dim.is-active {
  opacity: 1;
  visibility: visible;
  /* v18.3: pointer-events: auto je nyni BEZPECNE — dim je uvnitr .ss-header
     stacking contextu, cart-wrapper (z=9100) a #login popup (z=9200) jsou
     nad nim ve stejnem contextu, takze chytaji svoje hover/click eventy.
     Vsechno ostatni (page content, topbar/logo/search/nav v headeru) je
     pod dim → eventy zachyti dim → user nemuze interagovat s pozadim. */
  pointer-events: auto;
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear 0s;
}

/* v18.3: pri dim-active zrusime scroll-condense transformaci, aby header
   (a tim i dim element uvnitr) zustal pripnuty ve viewportu. Bez tohoto by
   user scrollnul → header se posune transform:translateY(-100%) → dim
   posune s nim → dim zmizel mimo viewport → user mohl interagovat s menu. */
html.ss-dim-active .ss-header,
html.ss-dim-active .ss-header.ss-header--hidden {
  transform: none !important;
}
html.ss-dim-active .ss-topbar {
  transform: none !important;
  /* v22: behem dim shodit topbar pod dim (9000), at se dimne spolu s chrome.
     Mimo dim ma topbar z-index 9300 (nad kosikem/loginem kvuli scroll prekryvu). */
  z-index: auto !important;
}

/* Cart wrapper a Shoptet native #login musi byt nad dim */
.ss-cart-wrapper { position: relative; z-index: 9100; }
#login.popup-widget,
.user-action-login.popup-widget {
  z-index: 9200 !important;
}


/* ============================================================
   v18 — CART FREE SHIPPING STRIP
   Editorial italic copy + 3 px sage progress bar pod CTA.
   ============================================================ */
.ss-cart-shipping {
  margin-top: 16px;
  text-align: center;
  padding: 0 4px;
}
.ss-cart-shipping__text {
  font-family: var(--ss-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ss-black);
  margin: 0 0 10px;
}
.ss-cart-shipping__text em {
  color: var(--ss-terracotta);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
}
.ss-cart-shipping__text--complete {
  color: var(--ss-sage-deep);
}
.ss-cart-shipping__text--complete em {
  color: var(--ss-sage-deep);
}
.ss-cart-shipping__progress {
  width: 100%;
  height: 3px;
  background: rgba(107, 139, 133, .22);
  border-radius: 999px;
  overflow: hidden;
}
.ss-cart-shipping__bar {
  height: 100%;
  background: var(--ss-sage);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   v19 — LOGIN POPUP (V1 "Balanced classic" — final design)
   ----------------------------------------------------------------
   - 720 px width, 50/50 split (cream | white)
   - 4 px outer corners (web standard)
   - Headiny 28px Rigane s italic akcentem ("zpět" / "pohodlnější")
   - Sub-line italic 14px serif pod kazdym headem
   - Inputs 4px corners, white bg, sage focus
   - Zapomenute heslo NAD Prihlasit se (oba pushed na dno sloupce)
   - Registrovat ghost CTA na dne praveho sloupce — vertikalne zarovnan
   - Sage checkmark dots (ne zelene)
   - Sipka v top-right zarovnana s login icon centrem
   ============================================================ */

/* Container — popup right edge zarovnan s login button right edge.
   v19.2: anchor = .ss-login-wrapper (40px wide, obsahuje JEN login button).
   right: 0 = pravy okraj wrapperu = pravy okraj login buttonu. Pristine. */
#login.popup-widget.login-widget {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 720px !important;
  max-width: 92vw !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 30px 70px rgba(15, 15, 15, .22) !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear .35s !important;
}

/* v19.3: Sipka odstranena (user request).
   Shoptet ma vlastni .popup-widget::before s content:"" (pouziva ji jako sipku).
   Explicitne hide pres display:none. */
#login.popup-widget.login-widget::before {
  display: none !important;
  content: none !important;
}

/* Hide Shoptet native arrow if any */
#login.popup-widget .popup-widget-arrow,
#login.popup-widget .popup-arrow,
#login.popup-widget .pin {
  display: none !important;
}

/* Force visible when JS opens popup */
#login.popup-widget.popup-widget--open,
#login.popup-widget.is-open,
#login.popup-widget[aria-hidden="false"],
#login.popup-widget[style*="display: block"],
#login.popup-widget[style*="display:block"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition:
    opacity .35s cubic-bezier(.4, 0, .2, 1),
    transform .35s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear 0s !important;
}

/* Inner grid: 50/50 split.
   v19.2 FIX: Shoptet aplikuje na .login-widget .popup-widget-inner padding: 20px
   + 1px border → vytvari bily ramecek kolem cream/white sloupcu. Override na 0. */
#login.popup-widget .popup-widget-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ss-white);
  border-radius: 4px;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
}

/* ========== LEFT COLUMN (#customerLogin) — cream, login form ========== */
#login #customerLogin {
  position: relative !important;
  padding: 36px 30px 120px !important;
  background: var(--ss-cream) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* Heading — JS replace text na 'Vitejte <em>zpet.</em>' */
#login #customerLogin h2,
#login #loginHeading {
  font-family: var(--ss-serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ss-black);
  margin: 0 0 6px;
  padding: 0;
  text-transform: none;
  text-align: left;
}
#login #customerLogin h2 em,
#login #loginHeading em { font-style: italic; }

/* Sub-line "Pokracujme v peci." — injected by JS */
.ss-login-subline {
  font-family: var(--ss-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--ss-muted);
  line-height: 1.45;
  margin: 0 0 22px;
}

#login .formLogin {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#login .formLogin fieldset {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 0;
  padding: 0;
  margin: 0;
}

/* v19.1 FIX: Shoptet defaultne nastavuje .form-group { position: relative }.
   To zlamavalo position:absolute .login-wrapper — kotvilo se na form-group
   misto na #customerLogin. Force static aby anchor byl #customerLogin (vyse). */
#login .formLogin .form-group {
  margin-bottom: 10px;
  position: static !important;
}
#login .formLogin .input-wrapper { position: relative; }
#login .formLogin .form-control {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--ss-sans);
  font-size: 14px;
  background: var(--ss-white);
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  color: var(--ss-black);
  transition: border-color .25s cubic-bezier(.4, 0, .2, 1);
}
#login .formLogin .form-control:focus { border-color: var(--ss-sage); }

/* login-wrapper = .lf-bottom: position:absolute na dne sloupce.
   Shoptet ma vlastni layout: btn { float: right } + password-helper { float: left; width: 55% }.
   Musime floaty zrusit (jinak vypadnou z flex flow). Dale gap:0 + justify-content:flex-end
   (gap: 14px se z neznameho duvodu zdvojuje na 28 → pouzivame margin-top na buttonu misto gapu). */
#login .formLogin .login-wrapper {
  position: absolute !important;
  bottom: 32px !important;
  left: 30px !important;
  right: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* v19.1 FIX: Zrusit Shoptet floats na login-wrapper detech */
#login .formLogin .login-wrapper > .btn,
#login .formLogin .login-wrapper > button,
#login .formLogin .login-wrapper > .password-helper,
#login .formLogin .btn-login,
#login .formLogin button[type="submit"],
#login .formLogin .password-helper {
  float: none !important;
  width: 100% !important;
}

/* Submit — natural HTML order = po helperu (nepouzivame order:-1).
   margin-top: 14px vytvari vizualni gap nad submit (gap CSS property se zdvojuje, viz vyse). */
#login .formLogin .btn-login,
#login .formLogin button[type="submit"] {
  width: 100% !important;
  padding: 14px !important;
  margin-top: 14px !important;
  background: var(--ss-black) !important;
  color: var(--ss-white) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--ss-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1);
}
#login .formLogin .btn-login:hover,
#login .formLogin button[type="submit"]:hover {
  background: var(--ss-terracotta-deep);
}

/* Password helper — sloupec, jen Zapomenute heslo (Nova registrace skryta).
   ORDER -1: Shoptet rendruje submit PRED helperem v HTML. Order:-1 na helperu
   ho posune VIZUALNE nad submit. Submit zustava posledni v .login-wrapper
   → jeho spodni okraj sedi na dne sloupce, vertikalne zarovnan s pravym CTA. */
#login .formLogin .password-helper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  order: -1;
}
#login .formLogin .password-helper a {
  color: var(--ss-terracotta-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  align-self: flex-start;
  padding-bottom: 1px;
}
/* Skryt "Nova registrace" link — pravy sloupec ma vlastni CTA */
#login .formLogin .password-helper a[href*="registrace"],
#login .formLogin .password-helper a[href*="register"] {
  display: none;
}

/* ========== RIGHT COLUMN (.ss-login-signup-panel) — white, signup ========== */
#login .popup-widget-inner::after {
  content: '';
  display: none;
}
.ss-login-signup-panel {
  position: relative !important;
  padding: 36px 30px 120px !important;
  background: var(--ss-white) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
.ss-login-signup-panel h3 {
  font-family: var(--ss-serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ss-black);
}
.ss-login-signup-panel h3 em { font-style: italic; }
.ss-login-signup-panel .ss-sub {
  font-family: var(--ss-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ss-muted);
  margin: 0 0 22px;
}
.ss-login-signup-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ss-login-signup-panel li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--ss-black);
}
.ss-login-signup-panel li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ss-sage) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Bottom CTA — position:absolute (matches LEFT login-wrapper).
   Stejne `bottom: 32px` jako .login-wrapper → buttony presne v rovine. */
.ss-login-signup-panel .ss-bottom {
  position: absolute !important;
  bottom: 32px !important;
  left: 30px !important;
  right: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ss-login-signup-panel a.ss-login-signup-cta {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--ss-sage-deep);
  border: 1px solid var(--ss-sage);
  border-radius: 4px;
  font-family: var(--ss-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition:
    background-color .35s cubic-bezier(.4, 0, .2, 1),
    color .35s cubic-bezier(.4, 0, .2, 1);
}
.ss-login-signup-panel a.ss-login-signup-cta:hover {
  background: var(--ss-sage);
  color: var(--ss-white);
}

/* v19.3 MOBILE: Popupy nedávají smysl na mobilu — UX je lepší navigation
   na dedikovanou stránku. Hide oba popupy + dim. Click handler na .ss-login
   v JS pak udela navigation na /login/. Cart icon je uz <a href="/kosik/">
   takze nativni klik navigates. */
@media (max-width: 768px) {
  #login.popup-widget.login-widget,
  .ss-cart-dropdown {
    display: none !important;
  }
  /* Dim element taky skryt — popup ho neaktivuje na mobilu, ale defensive */
  .ss-dim {
    display: none !important;
  }
}

/* ============================================================
   v22 — NOTIFIKACE "Pridano do kosiku" (Shoptet .messages)
   Shoptet renderuje hlasky do `.messages { position:fixed; top:0;
   z-index:1003 }`. Nas fixed header ma z-index 9000 → toast byl
   prekryty a necitelny. Fix: toast NAD header (z-index 9600) a
   posadit ho POD header (top = vyska headeru v danem stavu,
   konstanty = body padding-top: 168 desktop / 48 sbaleno,
   96 mobil / 64 mobil sbaleno). Plati pro vsechny hlasky.
   Success barva → brand `--ss-sage-deep` + bily text (kontrast
   ~4.75:1, WCAG AA) misto native shoptet barvy. `background-color`
   (ne shorthand), aby zustala pripadna ikona/checkmark.
   ============================================================ */
.messages {
  top: 168px !important;    /* desktop expanded: topbar 36 + main 84 + nav 48 */
  z-index: 9600 !important; /* nad .ss-header (9000), pod top vrstvou (10001) */
  /* v22.1: `top` animuje stejnych 320ms (a stejny easing) jako header a
     body padding-top → toast se pri condense hybe SYNCHRONNE s nav listou.
     Bez toho top skocil okamzite (168→48), zatimco nav lista jeste 320ms
     dojizdela → toast (z-index 9600) ji na okamzik prekryl. Stejna delta
     (desktop −120px), stejny easing = nulovy prekryv. Jen `top` —
     opacity fade na .msg-success (jiny element) zustava netknut. */
  transition: top 320ms cubic-bezier(.4, 0, .2, 1) !important;
}
body.is-header-condensed .messages {
  top: 48px !important;     /* sbaleno: viditelna jen nav lista (48) */
}
.messages .msg-success {
  background-color: #6B8B85 !important;   /* přesná brand sage (--ss-sage) */
  color: var(--ss-white, #FFFEFB) !important;
  border-color: #6B8B85 !important;
  opacity: 1 !important;          /* native melo 0.99 -> plne nepruhledne */
  padding: 14px 0 !important;     /* svisle 14px (uzsi pas ~49px); horizontal 0 -> gutter resi .container nize */
}
/* v22.2: zarovnat text notifikace s obsahem webu. Native `.container` mel
   max-width:none → na sirsich obrazovkach se text rozjel k levemu okraji,
   nezarovnany s nav/logem. Dame mu identicky layout jako `.ss-container`
   (max-width 1500 + margin auto + padding 32) → text zacina na stejnem
   gutteru (38px @1512) jako nav. Overeno: delta nav vs notif = 0. */
.messages .msg-success .container {
  max-width: 1500px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
.messages .msg-success a {
  color: var(--ss-white, #FFFEFB) !important;
  text-decoration: underline !important;
}

@media (max-width: 900px) {
  .messages {
    top: 96px !important;   /* mobil expanded: topbar 32 + header-main 64 */
  }
  body.is-header-condensed .messages {
    top: 64px !important;   /* mobil sbaleno: header-main zustava (64) */
  }
  .messages .msg-success .container {
    padding: 0 16px !important;   /* mobil gutter = .ss-container 16px */
  }
}