/*  Generated: 2026-05-15 15:07:44 */
/* ============================================================
   Category description card — CSS-only <details> based.
   Loaded conditionally from @layout.latte only when
   $categoryData->categories_description is non-empty.

   Whitelist: description-box, desc-summary-title, desc-summary-toggle,
   label-show, label-hide, desc-content, lead, brands, numbers,
   advice, warning, faq, desc-outro.

   Typography: eshop má html { font-size: 10px } → 1rem = 10px,
   body 1.4rem (14px), h2 1.8rem (18px), h3 1.6rem (16px).
   Karta DĚDÍ globální typography místo override — konzistence s
   produktovým listingem + ostatními karty na stránce.

   Tenant/group override: load order v @layout.latte umožňuje
   custom-stylesheet.css standardně override těchto pravidel.
   ============================================================ */

.description-box {
    margin: 1.25rem 0 1.75rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 24, 32, 0.04);
    color: #2a2f36;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

/* ----- Hlavička (summary) ----- */
.description-box > details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 8px;
}
.description-box > details > summary::-webkit-details-marker { display: none; }
.description-box > details > summary::marker { content: ""; }

.description-box .desc-summary-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1f26;
    line-height: 1.35;
}

.description-box .desc-summary-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: #f5f6f8;
    color: var(--primary-color, #1d6fcb);
    font-weight: 500;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.description-box .desc-summary-toggle::after {
    content: "";
    margin-left: 0.6rem;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}
.description-box > details[open] > summary .desc-summary-toggle::after {
    transform: rotate(180deg);
}
.description-box > details > summary:hover .desc-summary-toggle,
.description-box > details > summary:focus-visible .desc-summary-toggle {
    background: var(--primary-color, #1d6fcb);
    color: #fff;
}
.description-box > details > summary:focus-visible {
    outline: 2px solid var(--primary-color, #1d6fcb);
    outline-offset: 2px;
}

/* Přepínání label-show / label-hide */
.description-box .label-hide { display: none; }
.description-box > details[open] > summary .label-show { display: none; }
.description-box > details[open] > summary .label-hide { display: inline; }

/* ----- Obsahová část — full width karty, žádný max-width ----- */
.description-box .desc-content {
    padding: 0 1.6rem 1.6rem;
}
.description-box .desc-content > * + * { margin-top: 1.8rem; }

.description-box section h2 {
    margin: 0 0 0.8rem;
    color: #1a1f26;
    line-height: 1.4;
}
.description-box section p {
    margin: 0 0 0.8rem;
    line-height: 1.65;
}
.description-box section p:last-child { margin-bottom: 0; }
.description-box section ul,
.description-box section ol {
    margin: 0;
    padding-left: 2rem;
}
.description-box section li {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}
.description-box section li:last-child { margin-bottom: 0; }

/* numbered guide (<ol>) — výraznější číslování */
.description-box section ol {
    counter-reset: numguide;
    list-style: none;
    padding-left: 0;
}
.description-box section ol > li {
    counter-increment: numguide;
    position: relative;
    padding-left: 3rem;
    min-height: 2.4rem;
}
.description-box section ol > li::before {
    content: counter(numguide);
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color, #1d6fcb);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
}
.description-box section strong {
    font-weight: 600;
    color: #1a1f26;
}

/* ----- .lead úvod — hero text s decentní akcentní bočnicí ----- */
.description-box section.lead {
    padding: 1rem 1.4rem;
    border-left: 3px solid var(--primary-color, #1d6fcb);
    background: #f7f9fc;
    border-radius: 0 6px 6px 0;
}
.description-box section.lead p {
    margin: 0;
    color: #3a414b;
}

/* ----- .brands — horizontální pill badges ----- */
.description-box section.brands ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-left: 0;
    list-style: none;
}
.description-box section.brands li {
    margin: 0;
    padding: 0.5rem 1.2rem;
    background: #f3f5f8;
    border: 1px solid #e2e6ec;
    border-radius: 999px;
    line-height: 1.4;
}
.description-box section.brands li strong {
    color: var(--primary-color, #1d6fcb);
}

/* ----- .numbers — grid stat tiles ----- */
.description-box section.numbers ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1rem;
    padding-left: 0;
    list-style: none;
}
.description-box section.numbers li {
    margin: 0;
    padding: 1.2rem 1.4rem;
    background: #f7f9fc;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
}
.description-box section.numbers li strong {
    display: block;
    color: var(--primary-color, #1d6fcb);
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

/* ----- .advice — persona mini-karty ----- */
.description-box section.advice ul {
    display: grid;
    gap: 0.8rem;
    padding-left: 0;
    list-style: none;
}
.description-box section.advice li {
    margin: 0;
    padding: 1rem 1.4rem;
    background: #fafbfd;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
}
.description-box section.advice li strong {
    display: inline-block;
    color: var(--primary-color, #1d6fcb);
    margin-right: 0.3rem;
}

/* ----- .warning — jantarový callout (ne agresivní červená) ----- */
.description-box section.warning {
    position: relative;
    padding: 1.2rem 1.4rem 1.2rem 3.6rem;
    background: #fff8e6;
    border: 1px solid #f1e0a8;
    border-left: 4px solid #d99500;
    border-radius: 6px;
}
.description-box section.warning::before {
    content: "⚠";
    position: absolute;
    left: 1.2rem;
    top: 1rem;
    font-size: 1.8rem;
    color: #d99500;
    line-height: 1.4;
}
.description-box section.warning h2,
.description-box section.warning li strong {
    color: #8a5b00;
}

/* ----- .faq — vnořené accordion ----- */
.description-box section.faq details {
    margin: 0.6rem 0;
    border: 1px solid #e6e8ec;
    border-radius: 6px;
    background: #fff;
}
.description-box section.faq details + details { margin-top: 0.6rem; }

.description-box section.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
    color: #1a1f26;
    line-height: 1.4;
    min-height: 44px;
    border-radius: 6px;
}
.description-box section.faq summary::-webkit-details-marker { display: none; }
.description-box section.faq summary::marker { content: ""; }
.description-box section.faq summary::after {
    content: "+";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #f3f5f8;
    color: #1a1f26;
    font-size: 1.8rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.description-box section.faq details[open] > summary::after {
    content: "−";
    background: var(--primary-color, #1d6fcb);
    color: #fff;
}
.description-box section.faq summary:hover {
    background: #f9fafb;
}
.description-box section.faq summary:focus-visible {
    outline: 2px solid var(--primary-color, #1d6fcb);
    outline-offset: -2px;
}
.description-box section.faq p {
    margin: 0;
    padding: 0 1.4rem 1.2rem;
    color: #3a414b;
    line-height: 1.65;
}

/* ----- .desc-outro — uzavírací odstavec ----- */
.description-box .desc-outro {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid #e6e8ec;
    font-style: italic;
    color: #555c66;
}

/* ----- Animace (gated reduced-motion) ----- */
@media (prefers-reduced-motion: no-preference) {
    .description-box > details[open] > .desc-content,
    .description-box section.faq details[open] > p {
        animation: descBoxFadeIn 0.18s ease-out both;
    }
    @keyframes descBoxFadeIn {
        from { opacity: 0; transform: translateY(-2px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ----- Mobil ≤ 767 px ----- */
@media (max-width: 767px) {
    .description-box {
        margin: 1rem 0 1.25rem;
        line-height: 1.55;
    }
    .description-box > details > summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 1rem 1.2rem;
    }
    .description-box .desc-summary-title { font-size: 1.6rem; }
    .description-box .desc-summary-toggle { align-self: flex-end; }
    .description-box .desc-content { padding: 0 1.2rem 1.2rem; }
    .description-box section.numbers ul { grid-template-columns: 1fr; }
    .description-box section.warning { padding-left: 3.2rem; }
}