/* Podstránka /kniha-z-detskych-kresieb/ (ku-) – redizajn 19. 10. 2026.
   Pastelové pásy, proces v šiestich krokoch s fotkami, makety knihy a pás kresieb. Ostatné stránky služby používajú kniha.css. */

.ku-hero, .ku-section, .ku-wall, .ku-final {
    --ku-line: rgba(48, 74, 69, .14);
    --ku-text: #3B524E;
    --ku-lavender: #EDEBF4;
    --ku-blue: #E6F1FC;
    --ku-butter: #FFF2D1;
    --ku-mint: #E7F3EF;
    --ku-radius: 14px;
    --ku-shadow: 0 12px 32px rgba(31, 45, 42, .10);
}

/* Spoločné */
.ku-section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; background: #fff; }
.ku-section--blue { background: var(--ku-blue); }
.ku-section--butter { background: var(--ku-butter); }
.ku-section--mint { background: var(--ku-mint); }
.ku-section--lavender { background: var(--ku-lavender); }
.ku-section--mist { background: #F6F8F6; }
.ku-hero h1, .ku-section h2, .ku-final h2 { font-family: 'Source Sans 3', sans-serif; font-weight: 900; letter-spacing: -.015em; }
.ku-section h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.ku-section h3 { font-family: 'Source Sans 3', sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.ku-section p, .ku-hero p, .ku-section li { color: var(--ku-text); font-size: 1.05rem; line-height: 1.65; }
.ku-head { max-width: 44rem; margin-bottom: 2.25rem; }
.ku-head p { margin-top: .8rem; }
.ku-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ku-subhead { margin: 3rem 0 1rem; }
.ku-muted { color: var(--muted) !important; font-size: .95rem !important; }
.ku-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; margin-top: 1.75rem; }
.ku-actions--center { justify-content: center; }
.ku-link { color: var(--primary); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ku-link:hover { color: var(--secondary-dark); }
.ku-promo-price { color: var(--secondary-dark); }
.ku-section s, .ku-hero s { color: var(--muted); font-weight: 400; }
.ku-checks { display: grid; gap: .7rem; margin-top: 1.25rem; }
.ku-checks li { position: relative; padding-left: 2rem; }
.ku-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--primary); }
.ku-checks li::after { content: ""; position: absolute; left: .42rem; top: .5em; width: .48rem; height: .26rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ku-checks strong { color: var(--heading); }

/* Úvod */
.ku-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--ku-lavender); }
.ku-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .ku-hero__grid { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; } }
.ku-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; color: var(--muted); font-size: .85rem; }
.ku-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--muted); }
.ku-crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: .2em; }
.ku-hero h1 { color: var(--heading); font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1.02; }
.ku-lead { max-width: 33rem; margin-top: 1.1rem; font-size: clamp(1.1rem, 1.6vw, 1.25rem) !important; }
.ku-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.ku-chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; color: var(--ku-text); font-size: .95rem !important; line-height: 1.3 !important; box-shadow: 0 2px 8px rgba(31, 45, 42, .06); }
.ku-chips i { color: var(--secondary); }
.ku-chips strong { color: var(--heading); }
.ku-note { margin-top: 1.25rem; color: var(--muted) !important; font-size: .95rem !important; }
.ku-note--warn { color: #8A4B10 !important; font-weight: 700; }
.ku-promo { max-width: 33rem; margin-top: 1rem; padding: .75rem 1rem; border-radius: 10px; background: #fff; font-size: .98rem !important; }
.ku-promo strong { color: var(--secondary-dark); }
.ku-hero__side { display: grid; gap: 1.5rem; align-content: center; }
.ku-hero__side .ku-xmas { max-width: none; margin-top: 0; }
.ku-hero__media { margin: 0; }
.ku-hero__open { display: block; width: 100%; height: auto; }
.ku-hero__photo { display: block; width: 100%; height: auto; border-radius: var(--ku-radius); box-shadow: var(--ku-shadow); }
.ku-hero__media figcaption { margin-top: .6rem; color: var(--muted); font-size: .85rem; line-height: 1.4; text-align: center; }
/* Vianočné termíny a akcia – jedno okienko pod tlačidlami */
.ku-xmas { display: grid; gap: .55rem; max-width: 33rem; margin-top: 1.5rem; padding: .9rem 1.1rem; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(31, 45, 42, .06); }
.ku-xmas p { display: flex; gap: .65rem; align-items: baseline; font-size: .97rem !important; line-height: 1.5 !important; }
.ku-xmas i { flex: 0 0 1rem; color: var(--secondary); }
.ku-xmas strong { color: var(--secondary-dark); }
.ku-xmas--warn p:first-child { color: #8A4B10 !important; font-weight: 700; }

/* Pás kresieb pod úvodom */
.ku-wall { overflow: hidden; padding: 1.25rem 0; background: #fff; }
.ku-wall__track { display: flex; gap: .9rem; width: max-content; animation: ku-wall 70s linear infinite; }
.ku-wall__track img { display: block; width: auto; height: clamp(9rem, 16vw, 13rem); border-radius: 8px; box-shadow: 0 6px 16px rgba(31, 45, 42, .12); }
.ku-wall:hover .ku-wall__track { animation-play-state: paused; }
@keyframes ku-wall { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .ku-wall { overflow-x: auto; }
    .ku-wall__track { animation: none; padding: 0 1.5rem; }
    .ku-wall__track [aria-hidden="true"] { display: none; }
}

/* Ako vznikne kniha – kroky s fotkou a číslom */
.ku-steps { display: grid; gap: 2.75rem 2rem; margin-top: 1rem; }
@media (min-width: 640px) { .ku-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ku-steps { grid-template-columns: repeat(3, 1fr); gap: 3.25rem 2.25rem; } }
.ku-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ku-step__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ku-radius); background: var(--ku-butter); box-shadow: var(--ku-shadow); }
.ku-step__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ku-step:first-child .ku-step__media img { object-position: 50% 35%; }
.ku-step__media--book { display: grid; place-items: center; padding: 1rem; background: var(--ku-blue); }
.ku-step__media--book img { height: auto; object-fit: contain; }
.ku-step__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: 1.1rem; border-radius: 50%; background: var(--primary); color: #fff; font-family: 'Source Sans 3', sans-serif; font-size: 1.1rem; font-weight: 900; }
.ku-step h3 { margin-top: .6rem; color: var(--heading); }
.ku-step p { max-width: 24rem; margin-top: .5rem; font-size: 1rem !important; }
.ku-timing { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 3rem; font-weight: 700; text-align: center; }
.ku-timing i { color: var(--secondary); }

/* Pozrite sa do knihy – dvojstrany na posúvanie */
.ku-spreads {
    --ku-edge: max(1.5rem, calc((100vw - 72rem) / 2 + 1.5rem));
    display: flex; gap: 1.5rem; overflow-x: auto; padding: .5rem var(--ku-edge) 1.5rem; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ku-edge);
    scrollbar-width: thin; scrollbar-color: rgba(48, 74, 69, .3) transparent;
}
.ku-spreads:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ku-spread { position: relative; flex: 0 0 min(56rem, 86vw); margin: 0; scroll-snap-align: start; }
.ku-spread img { display: block; width: 100%; height: auto; border-radius: 3px; background: #fff; box-shadow: 0 16px 36px rgba(31, 45, 42, .16); }
.ku-spread::after { content: ""; position: absolute; top: 0; left: 50%; width: 3rem; margin-left: -1.5rem; aspect-ratio: 3 / 15; height: calc(min(56rem, 86vw) / 2.976); background: linear-gradient(90deg, transparent, rgba(31, 45, 42, .08) 46%, rgba(31, 45, 42, .16) 50%, rgba(31, 45, 42, .05) 54%, transparent); pointer-events: none; }
.ku-spread figcaption { margin-top: .8rem; color: var(--muted); font-size: .9rem; text-align: center; }
.ku-spread figcaption span { margin: 0 .4rem; opacity: .5; }
.ku-swipe { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--muted) !important; font-size: .85rem !important; }
@media (min-width: 1200px) { .ku-swipe { display: none; } }
.ku-specs { display: grid; gap: 2rem; align-items: center; margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--ku-radius); background: #fff; box-shadow: var(--ku-shadow); }
@media (min-width: 900px) { .ku-specs { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.ku-specs__cover { margin: 0; }
.ku-specs__label { margin-bottom: .7rem; color: var(--heading) !important; font-weight: 800; font-size: 1rem !important; }
.ku-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .8rem; }
.ku-covers figure { margin: 0; }
.ku-covers img { display: block; width: 100%; height: auto; border-radius: 3px 6px 6px 3px; box-shadow: inset 4px 0 0 rgba(0, 0, 0, .08), 0 6px 16px rgba(31, 45, 42, .14); }
.ku-covers figcaption { margin-top: .4rem; color: var(--muted); font-size: .85rem; font-weight: 700; text-align: center; }
.ku-table__ex th, .ku-table__ex td { font-weight: 700; color: var(--heading); }
.ku-specs__cover img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 10px 26px rgba(31, 45, 42, .16); }
.ku-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.ku-gallery img { width: 100%; height: auto; border-radius: 8px; }

/* Cena */
.ku-price { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .ku-price { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.ku-price__text p { margin-top: .9rem; }
.ku-price__text .btn { margin-top: .6rem; }
.ku-price__card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--ku-radius); background: var(--ku-mint); }
.ku-price__big { margin-bottom: .75rem; color: var(--heading) !important; font-family: 'Source Sans 3', sans-serif; font-size: clamp(2.4rem, 5vw, 3.1rem) !important; font-weight: 900; line-height: 1.05 !important; }
.ku-price__big small { display: block; margin-top: .25rem; color: var(--ku-text); font-size: 1rem; font-weight: 700; }
.ku-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ku-table th, .ku-table td { padding: .75rem 0; border-bottom: 1px solid var(--ku-line); color: var(--ku-text); text-align: left; vertical-align: baseline; font-weight: 400; }
.ku-table tr:last-child th, .ku-table tr:last-child td { border-bottom: 0; }
.ku-table td { padding-left: 1rem; text-align: right; white-space: nowrap; color: var(--heading); font-weight: 700; }
.ku-table th small { display: block; color: var(--secondary-dark); font-size: .82rem; font-weight: 700; }
.ku-table__incl td { color: var(--primary); font-weight: 700; }
.ku-cards { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 700px) { .ku-cards { grid-template-columns: 1fr 1fr; } }
.ku-cards > :only-child { grid-column: 1 / -1; }
.ku-card { border-radius: var(--ku-radius); padding: 1.6rem; }
.ku-card--butter { background: var(--ku-butter); }
.ku-card--lavender { background: var(--ku-lavender); }
.ku-card p { margin-top: .5rem; }
.ku-card__price { color: var(--heading) !important; font-family: 'Source Sans 3', sans-serif; font-size: 1.6rem !important; font-weight: 900; }
.ku-card .ku-link { display: inline-block; margin-top: .75rem; }

/* Darček a škôlky – fotka vedľa textu */
.ku-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .ku-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.ku-split p { margin-top: .9rem; }
.ku-split__media { margin: 0; }
.ku-split__media img { display: block; width: 100%; height: auto; border-radius: var(--ku-radius); box-shadow: var(--ku-shadow); }
.ku-split__media figcaption { margin-top: .5rem; color: var(--muted); font-size: .8rem; }
@media (max-width: 899px) { .ku-split--flip .ku-split__media { order: -1; } }

/* Porovnanie */
.ku-table-wrap { overflow-x: auto; padding: .5rem 1.5rem; border-radius: var(--ku-radius); background: #fff; }
.ku-versus { width: 100%; min-width: 36rem; border-collapse: collapse; }
.ku-versus th, .ku-versus td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--ku-line); color: var(--ku-text); text-align: left; vertical-align: top; font-size: .98rem; line-height: 1.5; }
.ku-versus tbody tr:last-child th, .ku-versus tbody tr:last-child td { border-bottom: 0; }
.ku-versus thead th { color: var(--muted); font-size: .85rem; font-weight: 700; }
.ku-versus thead th:last-child, .ku-versus tbody td:last-child { color: var(--heading); font-weight: 700; }
.ku-versus tbody th { color: var(--heading); font-weight: 700; width: 22%; }
@media (max-width: 699px) {
    .ku-versus, .ku-versus tbody, .ku-versus tr, .ku-versus th, .ku-versus td { display: block; width: auto; min-width: 0; }
    .ku-versus thead { display: none; }
    .ku-versus tr { padding: .9rem 0; border-bottom: 1px solid var(--ku-line); }
    .ku-versus tbody tr:last-child { border-bottom: 0; }
    .ku-versus tbody th, .ku-versus td { border: 0; padding: .15rem 0; }
    .ku-versus tbody th { width: auto; }
    .ku-versus td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
}

/* Otázky */
.ku-faq { display: grid; gap: 2rem; }
@media (min-width: 900px) { .ku-faq { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.ku-faq__intro p { margin-top: .9rem; }
/* #faq: prebíja pravidlá #faq z hlavného styles.css */
#faq .ku-faq__list details { margin-bottom: .6rem; border: 0; border-radius: 10px; background: #F4F6F3; }
#faq .ku-faq__list summary { position: relative; display: block; padding: 1rem 3rem 1rem 1.2rem; color: var(--heading); font-weight: 700; font-size: 1.04rem; line-height: 1.4; cursor: pointer; list-style: none; }
#faq .ku-faq__list summary::-webkit-details-marker { display: none; }
#faq .ku-faq__list summary::after { content: "+"; position: absolute; right: 1.1rem; top: .75rem; color: var(--secondary-dark); font-size: 1.4rem; font-weight: 400; }
#faq .ku-faq__list details[open] summary::after { content: "–"; }
#faq .ku-faq__list details p { padding: 0 1.2rem 1.1rem; color: var(--ku-text); }

/* O nás */
.ku-about { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 800px) { .ku-about { grid-template-columns: 18rem 1fr; gap: 3.5rem; } }
.ku-about__photo { max-width: 18rem; margin: 0; }
.ku-about__photo img { display: block; width: 100%; height: auto; border-radius: var(--ku-radius); box-shadow: var(--ku-shadow); }
.ku-about p { margin-top: .9rem; }
.ku-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-weight: 700; }
.ku-stars { color: #E9A23B; letter-spacing: .1em; }
.ku-about__links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }

/* Záver */
.ku-final { padding: clamp(2.5rem, 6vw, 3.75rem) 0; background: var(--primary-dark); }
.ku-final__inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .ku-final__inner { grid-template-columns: 1fr auto; gap: 3rem; } }
.ku-final h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.15; }
.ku-final p { margin-top: .5rem; color: rgba(255, 255, 255, .85); }
.ku-final .ku-actions { margin-top: 0; }
.ku-btn-light { background: #fff !important; color: var(--primary-dark) !important; box-shadow: none !important; }
.ku-btn-light:hover { background: var(--accent) !important; }
.ku-link--light { color: #fff; }
.ku-link--light:hover { color: var(--accent); }

/* #cennik z hlavného styles.css farbí všetky ikony – v tlačidle necháme farbu tlačidla */
#cennik .btn i { color: inherit !important; }