/* PRIVE CLINIC - eshop (stranka /eshop)
   Pouziju sa pre 404, pre nove stranky a vsade, kde nie je vlastny CSS subor.
   Zdroj: prive-clinic-informacie-o-firme-header-logo-eshop.txt
   Spolocne styly hlavicky/paticky su v assets/css/base.css */

:root {
      --bg: #F8F2EA;
      --card: #FFFDF9;
      --text: #2D2926;
      --text-soft: #6F6259;
      --line: #E5D7C3;
      --gold: #B8916A;
      --gold-deep: #7A5C42;
      --gold-light: #D4B896;
      --serif: 'Cormorant Garamond', 'Times New Roman', serif;
      --sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --container: 1240px;
    }


    *,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--bg);
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { color: inherit; text-decoration: none; }

    button { font-family: inherit; cursor: pointer; border: 0; }

    h1,
h2,
h3 { font-family: var(--serif); font-weight: 400; letter-spacing: .005em; }

    p { color: var(--text-soft); }

    .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }


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

    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    

    /* ================= SIMPLE TEXT CONTENT ================= */
    .page-hero {
      position: relative;
      min-height: 430px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding-top: 130px;
      background:
        linear-gradient(135deg, rgba(45,41,38,.79) 0%, rgba(45,41,38,.52) 52%, rgba(45,41,38,.75) 100%),
        radial-gradient(circle at 78% 18%, rgba(212,184,150,.34), transparent 38%),
        linear-gradient(135deg, #2D2926 0%, #5B4636 100%);
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,253,249,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,253,249,.045) 1px, transparent 1px);
      background-size: 82px 82px;
      mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
    }

    .page-hero::after {
      content: 'E-SHOP';
      position: absolute;
      right: -28px;
      bottom: 15px;
      color: rgba(255,253,249,.055);
      font-family: var(--serif);
      font-size: clamp(4.5rem, 14vw, 11rem);
      font-weight: 300;
      letter-spacing: .13em;
      line-height: 1;
      pointer-events: none;
    }

    .hero-content { position: relative; z-index: 1; padding: 60px 0 68px; max-width: 820px; }

    .breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: rgba(255,253,249,.57); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }

    .breadcrumb a:hover { color: var(--gold-light); }

    .breadcrumb svg { width: 12px; height: 12px; }

    .breadcrumb span { color: var(--gold-light); }

    .hero-content h1 { color: var(--card); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 300; line-height: 1.05; margin-bottom: 20px; }

    .hero-content h1 em { color: var(--gold-light); font-style: italic; }

    .hero-content .lead { max-width: 690px; color: rgba(255,253,249,.74); font-size: 1.05rem; }


    .text-section { padding: clamp(68px, 8vw, 110px) 0; }

    .text-content { width: 100%; max-width: 850px; margin: 0 auto; }

    .intro { color: var(--text-soft); font-size: 1.06rem; margin-bottom: 42px; }

    .text-block { padding: 32px 0; border-top: 1px solid var(--line); }

    .text-block:last-child { border-bottom: 1px solid var(--line); }

    .text-block h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.13; margin-bottom: 15px; color: var(--text); }

    .text-block h2 em { color: var(--gold-deep); font-style: italic; }

    .text-block p { margin: 0 0 12px; font-size: .98rem; }

    .text-block p:last-child { margin-bottom: 0; }

    .text-block strong { color: var(--text); font-weight: 700; }

    .text-block a { color: var(--gold-deep); border-bottom: 1px solid rgba(122,92,66,.42); }

    .text-block a:hover { color: var(--text); }

    .notice { margin-top: 32px; padding: 18px 20px; border-left: 2px solid var(--gold); background: rgba(239,227,212,.65); border-radius: 0 12px 12px 0; color: var(--text-soft); font-size: .92rem; }

    .notice strong { color: var(--text); }


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

    
    
    @media (max-width: 768px) {

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      .page-hero { min-height: 390px; padding-top: 112px; }

      .hero-content { padding: 54px 0 55px; }

      .page-hero::after { display: none; }

      .hero-content h1 { font-size: 2.65rem; }

      .text-section { padding: 58px 0 66px; }

      .text-block { padding: 27px 0; }

      .text-block h2 { font-size: 2rem; }
}

    @media (max-width: 520px) {

      .container { padding: 0 20px; }

      
      
      
      
      
      
      
      .text-block p { font-size: .95rem; }
}

    @media (prefers-reduced-motion: reduce) {

      *,
*::before,
*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

  

    /* ============================================================
       OSTRÉ LOGO V HEADERI
       Zlatý znak = pôvodná grafika.
       Text = živý HTML text, preto sa pri zmenšení nerozmazáva.
       ============================================================ */
    

    

    

    

    

    /* Na svetlom desktopovom headeri po scrollnutí zmeníme iba text na tmavý. */
    

    /* Mobilný header zostáva tmavý aj po scrollnutí. */
    

    




    /* Zvýraznený odkaz na nový E-shop v hlavnej navigácii */


/* ================== DOPLNKY PRE VYCHODZIU SABLONU ================== */

.text-block ul,
.text-block ol {
  margin: 0 0 18px 22px;
  color: var(--text-soft);
  font-size: .95rem;
}

.text-block li {
  margin-bottom: 8px;
}

.text-block li::marker {
  color: var(--gold);
}

.text-block h3 {
  font-size: 1.28rem;
  margin: 26px 0 12px;
}

.text-content img {
  border-radius: var(--radius-m);
  margin: 22px 0;
}

.text-content blockquote {
  margin: 24px 0;
  padding: 18px 24px;
  border-left: 2px solid var(--gold-light);
  background: rgba(212, 184, 150, .09);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text);
}

.text-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: .92rem;
}

.text-content th,
.text-content td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.text-content th {
  font-weight: 600;
  color: var(--text);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  background: var(--gold-deep);
  color: var(--card);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--radius-s);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.btn-gold:hover {
  background: var(--gold);
  color: var(--card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--radius-s);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.btn-outline:hover {
  background: var(--gold-deep);
  color: var(--card);
  transform: translateY(-2px);
}

.page-links {
  margin-top: 26px;
  font-size: .9rem;
  letter-spacing: .06em;
}

.page-links a {
  color: var(--gold-deep);
  padding: 0 6px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--d, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ================== E-SHOP ================== */

.eshop-section {
  padding: clamp(64px, 8vw, 110px) 0 clamp(72px, 9vw, 120px);
  background: var(--bg);
}

.eshop-panel {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.eshop-panel .eyebrow {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.eshop-panel h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  margin-bottom: 18px;
}

.eshop-panel h2 em {
  font-style: italic;
  color: var(--gold-deep);
}

.eshop-panel > p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: .98rem;
}

.eshop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.eshop-contact {
  list-style: none;
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  font-size: .88rem;
  color: var(--text-soft);
}

.eshop-contact li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.eshop-contact svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.eshop-contact a:hover {
  color: var(--gold-deep);
}

@media (max-width: 560px) {
  .eshop-actions .btn-gold,
  .eshop-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}