/* ============================================================
   BAGNIARI STORE — Globální styly pro kategorie a stránky
   Verze: 1.0 | 2026-05
   Vložit do Shoptet: Vzhled → Editor → CSS
   ============================================================

   Obsah:
   1.  CSS proměnné (barvy, fonty, spacing)
   2.  Accordion / FAQ položka  (.bag-faq)
   3.  Sekční nadpis             (.bag-section-title)
   4.  Pill navigace / kotvy    (.bag-pills)
   5.  Identita blok            (.bag-identity)
   6.  Průvodce výběrem         (.bag-guide)
   7.  Krok průvodce            (.bag-guide__step)
   8.  Intro odstavec           (.bag-intro)
   9.  Responzivita
   ============================================================ */


/* ── 1. PROMĚNNÉ ─────────────────────────────────────────── */

:root {
  --bag-primary:        #E3916C;   /* terracotta — hlavní akcent */
  --bag-primary-light:  #FDF6F3;   /* světlé pozadí akcent */
  --bag-dark:           #2D2D2D;   /* tmavý text */
  --bag-text:           #444444;   /* tělo textu */
  --bag-border:         #E8E0DB;   /* rámeček */
  --bag-border-icon:    #D0CBC6;   /* rámeček ikony */
  --bag-white:          #FFFFFF;
  --bag-radius:         10px;
  --bag-radius-sm:      8px;
  --bag-radius-pill:    50px;
  --bag-step-size:      26px;
}


/* ── 2. ACCORDION / FAQ ──────────────────────────────────── */

/*
   HTML struktura:
   <div class="bag-faq">
     <div class="bag-faq__item">
       <button class="bag-faq__trigger" onclick="bagToggle(this)">
         <span class="bag-faq__icon" aria-hidden="true"></span>
         Text otázky
       </button>
       <div class="bag-faq__answer">
         <p>Text odpovědi...</p>
       </div>
     </div>
   </div>
*/

.bag-faq {
  margin: 48px 0 0;
}

.bag-faq__item {
  border: 1px solid var(--bag-border);
  border-radius: var(--bag-radius);
  margin-bottom: 8px;
  background: var(--bag-white);
  overflow: hidden;
}

.bag-faq__trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bag-dark) !important;
  line-height: 1.4 !important;
  transition: color 0.2s;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.bag-faq__trigger:hover {
  color: var(--bag-primary);
}

.bag-faq__trigger.is-open {
  color: var(--bag-primary);
}

/* Šipka v kroužku */
.bag-faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bag-border-icon);
  border-radius: 50%;
  background: var(--bag-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.bag-faq__trigger:hover .bag-faq__icon,
.bag-faq__trigger.is-open .bag-faq__icon {
  border-color: var(--bag-primary);
}

/* SVG šipka — vložena jako background nebo inline; při toggle se otáčí */
.bag-faq__icon svg {
  display: block;
  transition: transform 0.25s ease;
}

.bag-faq__trigger.is-open .bag-faq__icon svg {
  transform: rotate(180deg);
}

/* Obsah odpovědi */
.bag-faq__answer {
  display: none;
  padding: 0 18px 16px 58px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--bag-text);
}

.bag-faq__answer.is-open {
  display: block;
}

.bag-faq__answer p { margin: 0 0 10px; }
.bag-faq__answer p:last-child { margin-bottom: 0; }

.bag-faq__answer a {
  color: var(--bag-primary);
  text-decoration: underline;
}

.bag-faq__answer a:hover {
  text-decoration: none;
}

.bag-faq__answer ol,
.bag-faq__answer ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.bag-faq__answer li {
  margin-bottom: 6px;
}


/* ── 3. SEKČNÍ NADPIS ────────────────────────────────────── */

/*
   HTML: <h2 class="bag-section-title">Obecné</h2>
   Varianta bez barvy: <h2 class="bag-section-title bag-section-title--dark">...</h2>
*/

.bag-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--bag-primary);
  margin: 40px 0 12px;
  padding: 0;
}

.bag-section-title--dark {
  color: var(--bag-dark);
}

.bag-section-title--lg {
  font-size: 22px;
  margin: 48px 0 16px;
}


/* ── 4. PILL NAVIGACE / KOTVY ────────────────────────────── */

/*
   HTML:
   <ul class="bag-pills">
     <li><a href="/pcos/" class="bag-pill">PCOS</a></li>
     <li><a href="/chci-resit/" class="bag-pill bag-pill--filled">Všechna témata →</a></li>
   </ul>
*/

.bag-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}

.bag-pills li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bag-pills li::before {
  display: none !important;
}

.bag-pill,
.bag-pill:visited {
  display: inline-block !important;
  padding: 7px 16px !important;
  background: var(--bag-primary-light) !important;
  border: 1px solid var(--bag-primary) !important;
  border-radius: var(--bag-radius-pill) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bag-dark) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}

.bag-pill:hover {
  background: var(--bag-primary) !important;
  color: var(--bag-white) !important;
}

/* Vyplněná varianta (CTA pill) */
.bag-pill--filled,
.bag-pill--filled:visited {
  background: var(--bag-primary) !important;
  color: var(--bag-white) !important;
}

.bag-pill--filled:hover {
  background: #d4784f !important;
  color: var(--bag-white) !important;
}


/* ── 5. IDENTITA BLOK ────────────────────────────────────── */

/*
   HTML:
   <div class="bag-identity">
     <p class="bag-identity__title">Bagniari — přírodní doplňky stravy</p>
     <p class="bag-identity__text">Popis...</p>
     <ul class="bag-identity__benefits">
       <li>🌿 Přírodní složení</li>
     </ul>
   </div>
*/

.bag-identity {
  margin: 32px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--bag-border);
  border-left: 3px solid var(--bag-primary);
  border-radius: 0 var(--bag-radius-sm) var(--bag-radius-sm) 0;
  background: var(--bag-primary-light);
}

.bag-identity__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--bag-dark);
  margin: 0 0 6px;
}

.bag-identity__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--bag-text);
  margin: 0 0 16px;
}

.bag-identity__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--bag-border);
  padding-top: 14px;
}

.bag-identity__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bag-white);
  border: 1px solid var(--bag-border);
  border-radius: var(--bag-radius-pill);
  font-size: 13px;
  color: var(--bag-dark);
}


/* ── 6. PRŮVODCE VÝBĚREM ─────────────────────────────────── */

/*
   HTML:
   <div class="bag-guide">
     <button class="bag-guide__trigger" onclick="bagToggle(this)">
       <span class="bag-guide__title-wrap">
         <span class="bag-guide__book-icon" aria-hidden="true">📋</span>
         Průvodce výběrem — Jak vybrat...
       </span>
       <span class="bag-faq__icon" aria-hidden="true">
         <svg ...>...</svg>
       </span>
     </button>
     <div class="bag-guide__content">
       ...kroky...
     </div>
   </div>
*/

.bag-guide {
  margin: 12px 0 0;
  border: 1px solid var(--bag-border);
  border-radius: var(--bag-radius);
  background: var(--bag-white);
  overflow: hidden;
}

.bag-guide__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color 0.2s;
}

.bag-guide__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bag-dark);
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.bag-guide__book-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--bag-radius-sm);
  background: var(--bag-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.bag-guide__content {
  display: none;
  border-top: 1px solid var(--bag-border);
}

.bag-guide__content.is-open {
  display: block;
}


/* ── 7. KROK PRŮVODCE ────────────────────────────────────── */

/*
   HTML:
   <div class="bag-guide__step">
     <p class="bag-guide__step-title">
       <span class="bag-step-num">1</span>
       Název kroku
     </p>
     <p>Text kroku...</p>
   </div>
*/

.bag-guide__step {
  padding: 20px 24px;
  border-bottom: 1px solid #EFEFEF;
}

.bag-guide__step:last-child {
  border-bottom: none;
}

.bag-guide__step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bag-dark);
  margin: 0 0 10px;
}

.bag-guide__step p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--bag-text);
  margin: 0;
}

.bag-guide__step a {
  color: var(--bag-primary);
  text-decoration: underline;
}

/* Číslo kroku — oranžový kroužek */
.bag-step-num {
  flex-shrink: 0;
  width: var(--bag-step-size);
  height: var(--bag-step-size);
  border-radius: 50%;
  background: var(--bag-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--bag-white);
  line-height: 1;
}


/* ── 8. INTRO ODSTAVEC ───────────────────────────────────── */

/*
   HTML: <p class="bag-intro">Text...</p>
*/

.bag-intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--bag-dark);
  margin: 0 0 20px;
}

.bag-intro a {
  color: var(--bag-primary);
  text-decoration: underline;
}

.bag-intro a:hover {
  text-decoration: none;
}

/* Menší varianta — SEO perex nad FAQ */
.bag-intro--sm {
  font-size: 14px;
  line-height: 1.8;
  color: var(--bag-text);
  margin: 0 0 20px;
}


/* ── 9. RESPONZIVITA ─────────────────────────────────────── */

@media (max-width: 767px) {
  .bag-faq__trigger {
    font-size: 14px;
    padding: 12px 14px;
    gap: 10px;
  }

  .bag-faq__answer {
    font-size: 13px;
    padding: 0 14px 14px 50px;
  }

  .bag-guide__trigger {
    padding: 14px 16px;
  }

  .bag-guide__title-wrap {
    font-size: 14px;
    gap: 8px;
  }

  .bag-guide__book-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .bag-guide__step {
    padding: 16px;
  }

  .bag-guide__step-title {
    font-size: 14px;
  }

  .bag-identity {
    padding: 16px;
  }

  .bag-section-title {
    font-size: 18px;
  }

  .bag-section-title--lg {
    font-size: 20px;
  }
}