@layer shopv2;
/* shopv2 je deklarovaná pred vrstvou legacy (base.css), aby jej !important pravidlá nového obchodu vyhrali. */
/* ANASTASIA — design tokens.
   Single source of truth for the values that design/HANDOFF-v2.md describes.
   Brand colours are NOT hard-coded here: at build time build.mjs rewrites the
   brand hexes in styles.css into --site-* variables (see src/site-themes.mjs),
   so the whole surface keeps following the theme Lucia picks in the admin.
   This file only adds what the legacy stylesheet still lacks and documents the
   scale in one place. Loaded before /base.css, so these values win over the
   legacy :root block (legacy lives in the "legacy" cascade layer). */

/* Display serif for the italic half of the headings (homepage layout follows
   the reference: italic serif + uppercase sans in the same statement). */
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight:300 400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight:300 400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin-italic.woff2') format('woff2');
  font-weight:300 400;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin-ext-italic.woff2') format('woff2');
  font-weight:300 400;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-latin.woff2') format('woff2');
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Figtree';
  src:url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* r11: nadpisy vo Fraunces (Display, 300–400), text a UI vo Figtree (300–600). */
h1,h2,h3,h4,.lh-display,.lh-caps,.display{font-family:'Fraunces',Georgia,'Times New Roman',serif!important;font-weight:300}

:root{
  /* --- Surfaces of the new homepage layout -------------------------------- */
  --lh-paper:#F5F2E8;
  --lh-ink:#313C2B;
  --lh-muted:#69705E;
  --lh-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --lh-sans:'Figtree','Helvetica Neue',sans-serif;

  /* --- Brand palette ------------------------------------------------------ */
  --ana-ink:var(--site-main,#313C2B);         /* text, dark background      */
  --ana-deep:var(--site-deep,#26321E);         /* deeper shade               */
  --ana-dark:var(--site-dark,#14200F);         /* deepest shade              */
  --ana-accent:var(--site-accent,#9C86C2);     /* lavender accent             */
  --ana-accent-deep:var(--site-accent-deep,#62527F);
  --ana-accent-light:var(--site-accent-light,#C9BCE0);
  --ana-cream:var(--site-cream,#F5F2E8);       /* cream text on dark         */
  --ana-paper:#F5F2E8;                        /* light surface              */
  --ana-forest:#313C2B;
  --ana-lavender:#9C86C2;
  --ana-lavender-light:#C9BCE0;
  --ana-surface-lavender:#E8E1F1;
  --ana-sage:#DCE7D9;
  --ana-olive:#748054;
  --ana-mint:#ECF3E7;
  --ana-muted:#69705E;                        /* muted on light             */
  --ana-muted-dark:#C4C7B6;                   /* muted on dark              */
  --ana-outline:#A3A894;
  --ana-divider:#BFC4B3;
  --ana-hairline:#D9D9C8;
  --ana-footer-top:#313C2B;
  --ana-footer-bottom:#313C2B;
  --ana-field-surface:#F7F5ED;

  /* --- Typography --------------------------------------------------------- */
  --ana-font:'Figtree','Helvetica Neue',sans-serif;
  --ana-weight-display:100;   /* display + statement */
  --ana-weight-light:200;     /* long-form subheads  */
  --ana-weight-body:300;      /* body                */
  --ana-weight-medium:400;    /* eyebrows, buttons   */
  --ana-tracking-display:-.04em;
  --ana-tracking-statement:-.035em;
  --ana-tracking-eyebrow:.18em;
  --ana-leading-body:1.65;

  /* --- Radii — the "leaf" corner is the brand signature -------------------- */
  --ana-radius-leaf:90px;     /* one corner, the rest stays square */
  --ana-radius-leaf-lg:160px;
  --ana-radius-leaf-sm:50px;
  --ana-radius-pill:29px;
  --ana-radius-menu:24px;
  --ana-radius-chip:20px;

  /* --- Motion ------------------------------------------------------------- */
  --ana-ease:cubic-bezier(.16,1,.3,1);        /* reveals, rolls, parallax */
  --ana-ease-soft:cubic-bezier(.22,1,.36,1);   /* soft UI transitions      */
  --ana-reveal:1100ms;
  --ana-reveal-stagger:80ms;

  /* --- Glass -------------------------------------------------------------- */
  --ana-glass:rgba(255,255,255,.09);
  --ana-glass-hover:rgba(255,255,255,.16);
  --ana-glass-border:rgba(255,255,255,.2);
  --ana-glass-border-hover:rgba(255,255,255,.32);
  --ana-glass-light:rgba(255,255,255,.42);
  --ana-glass-light-hover:rgba(255,255,255,.68);
  --ana-glass-light-border:rgba(255,255,255,.75);
  --ana-glass-blur:blur(14px) saturate(140%);
  --ana-glass-blur-heavy:blur(40px) saturate(170%) brightness(.52);

  /* --- Focus -------------------------------------------------------------- */
  --ana-focus-ring:2px solid var(--ana-accent);
  --ana-focus-offset:3px;
}

/* Legacy stylesheet still hard-codes a few focus outlines; make the whole
   surface use one visible focus treatment. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--ana-focus-ring);
  outline-offset:var(--ana-focus-offset);
}
/* Podstránky: bočná lišta príde plynulo až po zoskrolovaní, Menu je vždy len jedno (najprv v hlavičke, potom v lište). */
@media (max-width:999.98px){
  html body #ana-rail,
  html body .hero-rail,
  html body .left-rail,
  html body .rail-menu{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}
}
body:not(.lh-intro-page) #ana-rail{opacity:0;transform:translateX(-14px);pointer-events:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),background-color .45s ease,border-color .45s ease!important}
body.lh-chrome-in:not(.lh-intro-page) #ana-rail{opacity:1;transform:none;pointer-events:auto}
@media (min-width:761px) and (pointer:fine){
  body:not(.lh-intro-page) #lh-top .dch1{transition:opacity .4s ease}
  body.lh-chrome-in:not(.lh-intro-page) #lh-top .dch1{opacity:0;pointer-events:none}
}
/* Obsah podstránky ide vždy cez celú šírku, sklenená lišta sa po zoskrolovaní len vysunie ponad neho (ako na úvode). */
@media (min-width:1000px){
  body:not(.lh-intro-page) :is(.legacy-shell,.dc-root){--rail-pad:0px;--rail-neg:0px}
}

/* --- Cookies lišta a panel nastavení (globálne pravidlá) --- */
.cookie-banner[hidden],
.cookie-settings[hidden]{
  display: none !important;
}

.cookie-banner {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  max-height: 40vh !important;
  max-height: 40svh !important;
  overflow-y: auto !important;
  background: rgba(23, 51, 47, 0.96) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  color: #F7F4EC !important;
  border-top: 1px solid rgba(201, 163, 85, 0.35) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28) !important;
  font-family: Figtree, -apple-system, sans-serif !important;
  animation: cookie-banner-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

body.lh-chrome-in .cookie-banner {
  left: var(--rail-pad, 0px) !important;
}

.cookie-banner-inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 16px clamp(18px, 3.5vw, 44px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.cookie-banner-text {
  margin: 0 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  font-family: Figtree, -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #F7F4EC !important;
}

.cookie-banner-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.cookie-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 8px 20px !important;
  border: 1px solid rgba(201, 163, 85, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #F7F4EC !important;
  font-family: Figtree, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.cookie-btn:hover {
  background: rgba(201, 163, 85, 0.25) !important;
  border-color: #C9A355 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

.cookie-btn:focus-visible {
  outline: 2px solid #C9A355 !important;
  outline-offset: 2px !important;
}

@media (max-width: 860px) {
  .cookie-banner-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 14px 18px !important;
  }
  .cookie-banner-actions {
    justify-content: stretch !important;
    gap: 8px !important;
  }
  .cookie-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 480px) {
  .cookie-banner-actions {
    flex-direction: column !important;
  }
  .cookie-btn {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* Modal nastavení cookies */
.cookie-settings {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  background: rgba(12, 18, 10, 0.65) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.cookie-settings-inner {
  width: min(580px, 100%) !important;
  max-height: 86vh !important;
  max-height: 86svh !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #1A3834 0%, #122926 100%) !important;
  color: #F7F4EC !important;
  border: 1px solid rgba(201, 163, 85, 0.35) !important;
  border-radius: 24px !important;
  padding: 28px clamp(18px, 3.5vw, 32px) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  font-family: Figtree, -apple-system, sans-serif !important;
}

.cookie-settings-inner h2 {
  margin: 0 !important;
  font-family: Fraunces, Georgia, serif !important;
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 300 !important;
  color: #F7F4EC !important;
}

.cookie-categories {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.cookie-category {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 14px 16px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(201, 163, 85, 0.2) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  color: #F7F4EC !important;
}

.cookie-category input {
  margin: 3px 0 0 !important;
  width: 18px !important;
  height: 18px !important;
  accent-color: #C9A355 !important;
}

.cookie-category span {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.cookie-category strong {
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #F7F4EC !important;
}

.cookie-category small {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #C4C7B6 !important;
  overflow-wrap: anywhere !important;
}

.cookie-settings-detail {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #C4C7B6 !important;
}

.cookie-settings-detail a {
  color: #C9A355 !important;
  text-decoration: underline !important;
}

.cookie-settings-close {
  align-self: flex-start !important;
  min-height: 40px !important;
  padding: 8px 4px !important;
  background: transparent !important;
  border: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #C4C7B6 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* --- Plávajúce ouško zvuku (Desktop vpravo, Mobil vľavo dole) --- */
.ana-sound-tab {
  position: fixed !important;
  z-index: 85 !important;
  background: var(--site-main, #283020) !important;
  color: #fff !important;
  border: 0 !important;
  font: 600 11px/1 Figtree, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease, background-color .3s ease !important;
}

.ana-sound-tab.is-playing {
  background: var(--nv-gold, #c9a55c) !important;
  color: #2F3424 !important;
}

.ana-sound-tab .ana-sound-tab__note {
  font-size: 13px !important;
  line-height: 1 !important;
}

.ana-sound-tab.is-playing .ana-sound-tab__note {
  animation: anaSoundPulse 1.4s ease-in-out infinite !important;
}

@keyframes anaSoundPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.25); color: #fff; }
}

/* Mobil (< 1000px): jemné úzke ouško zvuku vľavo v spodnej tretine (neprekáža v obsahu) */
@media (max-width: 999.98px) {
  .ana-sound-tab {
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: clamp(96px, 16vh, 150px) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 11px 5.5px !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    box-shadow: 2px 4px 12px rgba(40, 48, 32, .28) !important;
    opacity: 0.92 !important;
  }
  .ana-sound-tab.is-playing {
    box-shadow: 2px 4px 14px rgba(201, 165, 92, .4) !important;
    opacity: 1 !important;
  }
  .ana-sound-tab:hover {
    transform: rotate(180deg) translateX(-2px) !important;
    opacity: 1 !important;
  }
  html.tab-smart-hide .ana-sound-tab {
    transform: rotate(180deg) translateX(55%) !important;
    opacity: 0.65 !important;
  }
  html.ana-menu-open .ana-sound-tab {
    transform: rotate(180deg) translateX(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .ana-sound-pop {
    display: none !important;
  }
}

/* Desktop (>= 1000px): ouško zvuku vpravo v doku pod Menu */
@media (min-width: 1000px) {
  .ana-sound-tab {
    top: var(--ana-sound-tab-top, calc(var(--ana-menu-tab-top, 27vh) + 60px)) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    writing-mode: vertical-rl !important;
    border-radius: 14px 0 0 14px !important;
    padding: 12px 7px !important;
    box-shadow: -2px 4px 14px rgba(40, 48, 32, .35) !important;
  }
  .ana-sound-tab.is-playing {
    box-shadow: -2px 4px 16px rgba(201, 165, 92, .45) !important;
  }
  .ana-sound-tab:hover {
    transform: translateX(-3px) !important;
  }
  html.tab-smart-hide .ana-sound-tab {
    transform: translateX(115%) !important;
    pointer-events: none !important;
  }
  html.ana-menu-open .ana-sound-tab {
    transform: translateX(115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}