/* ============================================================
S LÁSKOU TEREZA — design systém (.tp)
Veškeré stylování webu. Do obsahu stránek patří jen HTML
s třídami, žádné tagy.
============================================================ */
/* ---------- 1. TOKENY + ZÁKLAD ---------- */
:root{
--tp-pink:#E8A6B5; --tp-pink-soft:#F5D7DD; --tp-pink-pale:#FBEEF1; --tp-pink-deep:#C97A8C;
--tp-ink:#1A1416; --tp-ink-soft:#3D2E33; --tp-muted:#8B7479;
--tp-cream:#FBF7F4; --tp-paper:#FFFFFF; --tp-line:#EFE6E3; --tp-r:6px;
}
.tp,.tp *{ box-sizing:border-box; }
.tp{ font-family:'Inter',sans-serif; color:var(--tp-ink); line-height:1.6; background:var(--tp-cream); }
.tp img{ max-width:100%; display:block; }
.tp a{ color:inherit; }
.tp h1,.tp h2,.tp h3{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-0.02em; }
.tp em{ font-style:italic; color:var(--tp-pink-deep); }
.tp .tp-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
/* ---------- 2. TLAČÍTKA ---------- */
.tp .tp-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:100px;
font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
border:0; cursor:pointer; transition:all .2s; }
.tp .tp-btn-primary{ background:var(--tp-ink); color:var(--tp-cream); }
.tp .tp-btn-primary:hover{ background:var(--tp-pink-deep); transform:translateY(-1px); }
.tp .tp-btn-ghost{ background:transparent; color:var(--tp-ink); border:1px solid var(--tp-ink); }
.tp .tp-btn-ghost:hover{ background:var(--tp-ink); color:var(--tp-cream); }
.tp .tp-btn-pink{ background:var(--tp-pink); color:var(--tp-ink); }
.tp .tp-btn-pink:hover{ background:var(--tp-pink-deep); color:var(--tp-cream); }
/* ---------- 3. EYEBROW + HLAVIČKY SEKCÍ ---------- */
.tp .tp-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--tp-pink-deep); margin-bottom:24px; }
.tp .tp-eyebrow::before{ content:""; width:24px; height:1px; background:var(--tp-pink); }
.tp .tp-section{ padding:90px 0; }
.tp .tp-head{ text-align:center; margin-bottom:52px; }
.tp .tp-head .tp-eyebrow{ display:inline-block; }
.tp .tp-head .tp-eyebrow::before{ display:none; }
.tp .tp-title{ font-size:46px; line-height:1.1; margin:0 0 12px; }
.tp .tp-sub{ color:var(--tp-ink-soft); font-size:17px; max-width:580px; margin:0 auto; }
.tp .tp-section-cta{ text-align:center; margin-top:52px; }
/* ---------- 4. OBRÁZKOVÝ PLACEHOLDER (gradient – nahraď za ![]()
) ---------- */
.tp .tp-ph{ position:relative; border-radius:var(--tp-r); overflow:hidden;
background:linear-gradient(150deg,#F5D7DD,#E8A6B5 50%,#C97A8C); }
.tp .tp-ph-cap{ position:absolute; bottom:16px; left:16px; background:rgba(251,247,244,.92);
padding:7px 13px; border-radius:100px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--tp-ink-soft); font-weight:500; }
/* skutečná fotka v placeholderu: stačí vložit ![]()
dovnitř .tp-ph */
.tp .tp-ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media(max-width:960px){
.tp .tp-section{ padding:60px 0; }
.tp .tp-title{ font-size:34px; }
}
/* ---------- 5. HP: HERO ---------- */
.tp .tp-hero{ padding:72px 0 90px; position:relative; overflow:hidden; }
.tp .tp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.tp .tp-hero h1{ font-size:64px; line-height:1.05; margin:0 0 22px; }
.tp .tp-hero p{ font-size:17px; line-height:1.7; color:var(--tp-ink-soft); margin:0 0 32px; max-width:460px; }
.tp .tp-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.tp .tp-hero-photo{ aspect-ratio:4/5; max-height:600px; box-shadow:0 30px 60px -20px rgba(201,122,140,.35); }
.tp .tp-hero-photo .tp-ph{ width:100%; height:100%; }
@media(max-width:960px){
.tp .tp-hero-grid{ grid-template-columns:1fr; gap:44px; }
.tp .tp-hero h1{ font-size:42px; }
}
/* ---------- 6. HP: STRIP (pruh s tématy) ---------- */
.tp .tp-strip{ background:var(--tp-ink); color:var(--tp-cream); padding:18px 0; }
.tp .tp-strip-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 44px;
padding:0 24px; font-family:'Fraunces',serif; font-style:italic; font-size:21px; font-weight:300; }
.tp .tp-strip-row span{ display:inline-flex; align-items:center; gap:44px; }
.tp .tp-strip-row span::after{ content:"\273B"; color:var(--tp-pink); font-style:normal; font-size:13px; }
.tp .tp-strip-row span:last-child::after{ display:none; }
/* ---------- 7. HP: RECEPTY ---------- */
.tp .tp-recipes{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; }
.tp .tp-recipe{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.tp .tp-recipe .tp-ph{ aspect-ratio:4/5; margin-bottom:18px; transition:transform .4s ease; }
.tp .tp-recipe:hover .tp-ph{ transform:translateY(-4px); }
.tp .tp-recipe .r2{ background:linear-gradient(160deg,#FBEEF1,#D9B5BD); }
.tp .tp-recipe .r3{ background:linear-gradient(160deg,#E8A6B5,#C97A8C); }
.tp .tp-recipe .r4{ background:linear-gradient(160deg,#FAE5D8,#E8B8A0); }
.tp .tp-recipe .r5{ background:linear-gradient(160deg,#F5DCD2,#C9A28C); }
.tp .tp-recipe .r6{ background:linear-gradient(160deg,#FBEEF1,#E8A6B5); }
.tp .tp-tag{ position:absolute; top:14px; left:14px; background:rgba(251,247,244,.92); font-size:10px;
letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--tp-ink); padding:6px 12px; border-radius:100px; }
.tp .tp-meta{ display:flex; gap:10px; align-items:center; font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--tp-muted); margin-bottom:8px; font-weight:500; }
.tp .tp-meta .dot{ width:3px; height:3px; background:var(--tp-pink); border-radius:100px; }
.tp .tp-rname{ font-family:'Fraunces',serif; font-size:22px; line-height:1.25; margin:0 0 6px; }
.tp .tp-recipe:hover .tp-rname{ color:var(--tp-pink-deep); }
.tp .tp-rdesc{ font-size:14px; color:var(--tp-ink-soft); margin:0; line-height:1.55; }
@media(max-width:960px){ .tp .tp-recipes{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .tp .tp-recipes{ grid-template-columns:1fr; } }
/* ---------- 8. HP: O MNĚ ---------- */
.tp .tp-about{ background:var(--tp-pink-pale); padding:110px 0; }
.tp .tp-about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center; }
.tp .tp-about-photo{ position:relative; }
.tp .tp-about-photo .tp-ph{ aspect-ratio:4/5;
background:linear-gradient(160deg,#D9B5BD,#C97A8C 60%,#8B5560); box-shadow:0 30px 60px -25px rgba(201,122,140,.5); }
.tp .tp-about-frame{ position:absolute; inset:-16px; border:1px solid var(--tp-pink); border-radius:var(--tp-r); z-index:-1; }
.tp .tp-about h2{ font-size:50px; line-height:1.05; margin:0 0 26px; }
.tp .tp-about p{ font-size:17px; line-height:1.75; color:var(--tp-ink-soft); margin:0 0 18px; }
.tp .tp-sign{ font-family:'Fraunces',serif; font-style:italic; font-size:28px; color:var(--tp-pink-deep); margin-top:20px; display:inline-block; }
@media(max-width:960px){
.tp .tp-about{ padding:60px 0; }
.tp .tp-about-grid{ grid-template-columns:1fr; gap:44px; }
.tp .tp-about h2{ font-size:34px; }
}
/* ---------- 9. HP: EBOOKY ---------- */
.tp .tp-books{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:52px; }
.tp .tp-book{ background:var(--tp-paper); border-radius:8px; padding:32px; display:flex; flex-direction:column;
border:1px solid var(--tp-line); position:relative; transition:all .25s; }
.tp .tp-book:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -16px rgba(201,122,140,.25); border-color:var(--tp-pink); }
.tp .tp-book.feat{ border-color:var(--tp-pink-deep); background:linear-gradient(180deg,var(--tp-pink-pale),var(--tp-paper) 70%); }
.tp .tp-flag{ position:absolute; top:-12px; right:24px; background:var(--tp-ink); color:var(--tp-cream);
font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:100px; }
.tp .tp-cover{ aspect-ratio:3/4; border-radius:4px; margin-bottom:22px; position:relative; box-shadow:0 16px 32px -8px rgba(26,20,22,.25);
display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px; text-align:center; overflow:hidden; }
.tp .tp-cover::before{ content:""; position:absolute; inset:12px; border:1px solid currentColor; border-radius:2px; opacity:.4; }
.tp .tp-cover.c1{ background:linear-gradient(160deg,#F5D7DD,#E8A6B5); color:var(--tp-ink); }
.tp .tp-cover.c2{ background:linear-gradient(160deg,#2A2024,#1A1416); color:var(--tp-cream); }
.tp .tp-cover.cb{ background:linear-gradient(160deg,#C97A8C,#8B5560); color:var(--tp-cream); }
.tp .tp-cover-e{ font-size:10px; letter-spacing:.3em; text-transform:uppercase; font-weight:600; opacity:.85; margin-bottom:12px; position:relative; }
.tp .tp-cover-t{ font-family:'Fraunces',serif; font-style:italic; font-size:28px; line-height:1.1; margin:0 0 6px; position:relative; }
.tp .tp-cover-v{ font-family:'Fraunces',serif; font-size:60px; font-weight:300; line-height:1; margin:14px 0; opacity:.85; position:relative; }
.tp .tp-cover-a{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-top:auto; font-weight:500; position:relative; }
.tp .tp-book h3{ font-family:'Fraunces',serif; font-weight:500; font-size:22px; line-height:1.25; margin:0 0 8px; }
.tp .tp-book p{ font-size:14px; color:var(--tp-ink-soft); line-height:1.6; margin:0 0 20px; flex:1; }
.tp .tp-book-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:18px; border-top:1px solid var(--tp-line); }
.tp .tp-price{ font-family:'Fraunces',serif; font-size:28px; font-weight:500; color:var(--tp-ink); }
.tp .tp-price s{ font-size:14px; color:var(--tp-muted); font-weight:400; margin-right:8px; }
.tp .tp-buy{ background:var(--tp-ink); color:var(--tp-cream); font-size:12px; font-weight:600; letter-spacing:.12em;
text-transform:uppercase; padding:12px 18px; border-radius:100px; text-decoration:none; transition:background .2s; }
.tp .tp-buy:hover{ background:var(--tp-pink-deep); }
.tp .tp-ext{ background:var(--tp-paper); border:1px solid var(--tp-line); border-radius:12px; padding:32px 38px;
display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.tp .tp-ext h3{ font-family:'Fraunces',serif; font-size:26px; margin:0 0 8px; }
.tp .tp-ext p{ margin:0; color:var(--tp-ink-soft); font-size:15px; }
@media(max-width:960px){
.tp .tp-books{ grid-template-columns:1fr; }
.tp .tp-ext{ grid-template-columns:1fr; text-align:center; }
}
/* ---------- 10. HP: DUO (Pečeme spolu) ---------- */
.tp .tp-duo{ padding:90px 0; }
.tp .tp-duo-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; }
.tp .tp-duo .tp-ph{ aspect-ratio:5/4; background:linear-gradient(140deg,#FAE5D8,#E8B8A0 50%,#C97A8C);
box-shadow:0 30px 60px -25px rgba(201,122,140,.4); }
.tp .tp-duo h2{ font-size:42px; line-height:1.1; margin:0 0 22px; }
.tp .tp-duo p{ font-size:17px; line-height:1.75; color:var(--tp-ink-soft); margin:0 0 18px; }
@media(max-width:960px){
.tp .tp-duo{ padding:60px 0; }
.tp .tp-duo-grid{ grid-template-columns:1fr; gap:44px; }
.tp .tp-duo h2{ font-size:34px; }
}
/* ---------- 11. HP: NEWSLETTER ---------- */
.tp .tp-news{ background:var(--tp-ink); color:var(--tp-cream); padding:90px 0; text-align:center; }
.tp .tp-news-in{ max-width:600px; margin:0 auto; padding:0 32px; }
.tp .tp-news h2{ font-size:42px; line-height:1.1; margin:0 0 14px; color:var(--tp-cream); }
.tp .tp-news h2 em{ color:var(--tp-pink); }
.tp .tp-news p{ color:rgba(251,247,244,.75); font-size:16px; margin:0 0 32px; }
.tp .tp-news-form{ display:flex; gap:8px; background:rgba(251,247,244,.08); border:1px solid rgba(251,247,244,.18);
border-radius:100px; padding:6px; max-width:480px; margin:0 auto; }
.tp .tp-news-form input{ flex:1; background:transparent; border:0; padding:14px 22px; color:var(--tp-cream); font-family:inherit; font-size:15px; }
.tp .tp-news-form input::placeholder{ color:rgba(251,247,244,.45); }
.tp .tp-news-form input:focus{ outline:none; }
.tp .tp-news-form button{ background:var(--tp-pink); color:var(--tp-ink); border:0; border-radius:100px; padding:12px 26px;
font-family:inherit; font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.tp .tp-news-form button:hover{ background:var(--tp-cream); }
.tp .tp-news-foot{ margin-top:16px; font-size:12px; color:rgba(251,247,244,.5); }
@media(max-width:960px){ .tp .tp-news{ padding:60px 0; } .tp .tp-news h2{ font-size:34px; } }
/* ---------- 12. NATIVNÍ SHOPTET NEWSLETTER → tmavý design ----------
Styluje standardní modul "Odebírat newsletter" v patičce.
Dekorativní sekce .tp-news v obsahu HP se maže — tohle ji nahrazuje. */
.footer-newsletter-full-width{ background:#1A1416 !important; padding:90px 0; text-align:center; }
.footer-newsletter{ max-width:600px; margin:0 auto; padding:0 32px; float:none !important; width:auto !important; }
.footer-newsletter h2{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-0.02em;
font-size:42px; line-height:1.1; margin:0 0 14px; color:#FBF7F4; }
.footer-newsletter h2 em{ font-style:italic; color:#E8A6B5; }
.footer-newsletter .tp-news-sub{ color:rgba(251,247,244,.75); font-size:16px; margin:0 0 32px; }
.footer-newsletter form{ position:relative; max-width:480px; margin:0 auto; }
.footer-newsletter fieldset{ position:relative; margin:0; padding:0; border:0; }
.footer-newsletter fieldset br{ display:none; }
.footer-newsletter .validator-msg-holder{ margin:0; }
.footer-newsletter input[type=email]{ background:rgba(251,247,244,.08) !important; border:1px solid rgba(251,247,244,.18) !important;
border-radius:100px !important; height:56px !important; padding:0 170px 0 24px !important;
color:#FBF7F4 !important; font-size:15px; width:100% !important; max-width:none !important; }
.footer-newsletter input[type=email]::placeholder{ color:rgba(251,247,244,.45); }
/* tlačítko sedí uvnitř pilulky vpravo (šablona ho pozicuje absolutně) */
.footer-newsletter button[type=submit],.footer-newsletter input[type=submit]{
position:absolute !important; top:6px !important; right:6px !important; bottom:auto !important; left:auto !important;
height:44px !important; margin:0 !important; padding:0 26px !important;
background:#E8A6B5 !important; color:#1A1416 !important; border:0 !important; border-radius:100px !important;
font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.footer-newsletter button[type=submit]:hover,.footer-newsletter input[type=submit]:hover{ background:#FBF7F4 !important; }
.footer-newsletter label,.footer-newsletter .consents{ color:rgba(251,247,244,.5) !important; font-size:12px; }
.footer-newsletter .consents{ margin-top:14px; }
.footer-newsletter a{ color:#E8A6B5 !important; }
@media(max-width:960px){ .footer-newsletter-full-width{ padding:60px 0; } .footer-newsletter h2{ font-size:34px; } }
/* HP: content wrapper na krémovou, ať mezi sekcemi neprosvítá bílá */
.in-index .content-wrapper{ background:#FBF7F4 !important; padding-bottom:0 !important; }
/* ---------- 13. PATIČKA → krémový vzhled ---------- */
#footer,.footer{ background:#FBF7F4 !important; color:#3D2E33 !important; }
#footer a,.footer a{ color:#1A1416 !important; }
/* ---------- 14. HP: DYNAMICKÉ SEKCE (nativní výpisy → .tp karty) ----------
JS v zápatí staví z nativních výpisů (články rubriky Recepty, produkty
skupiny Titulní strana) karty do slotů #tp-slot-recepty / #tp-slot-ebooky
v uvítacím textu. Nativní výpisy se skryjí. */
body:has(#tp-slot-ebooky) .homepage-group-title,
body:has(#tp-slot-ebooky) .products-wrapper,
body:has(#tp-slot-recepty) .homepage-blog-wrapper{ display:none !important; }
/* obálka ebooku z reálné fotky produktu (fallback = typografická obálka .c1/.c2/.cb) */
.tp .tp-cover-link{ text-decoration:none; color:inherit; display:block; }
.tp .tp-cover.has-img{ padding:0; background:var(--tp-pink-pale); }
.tp .tp-cover.has-img::before{ display:none; }
.tp .tp-cover.has-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* ---------- 15. KATEGORIE (výpis produktů, /ebooky/) ---------- */
/* boční panel pryč — pro jednu kategorii se 3 produkty je to jen šum */
body.type-category .sidebar{ display:none !important; }
body.type-category .content{ width:100% !important; max-width:none !important; float:none !important; }
/* skrýt: blok Nejprodávanější, řazení, filtry ceny/skladu */
body.type-category .products-top-wrapper,
body.type-category #category-header,
body.type-category #filters-wrapper{ display:none !important; }
/* nadpis kategorie */
body.type-category h1.category-title{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-0.02em;
font-size:46px; text-align:center; color:#1A1416; margin:28px 0 44px; }
/* karty produktů */
body.type-category #products .product .p{ background:#FFFFFF; border:1px solid #EFE6E3; border-radius:8px;
padding:24px; transition:all .25s; }
body.type-category #products .product .p:hover{ transform:translateY(-6px);
box-shadow:0 24px 48px -16px rgba(201,122,140,.25); border-color:#E8A6B5; }
body.type-category #products .product a.image img{ border-radius:4px; }
body.type-category #products .product a.name,
body.type-category #products .product a.name span{ font-family:'Fraunces',serif; font-size:22px;
color:#1A1416; text-decoration:none; }
body.type-category #products .product a.name:hover span{ color:#C97A8C; }
body.type-category #products .product .price-final,
body.type-category #products .product .price-final strong{ font-family:'Fraunces',serif;
font-size:26px; font-weight:500; color:#1A1416; }
body.type-category #products .product .ratings-wrapper{ display:none; }
/* množství skrýt (ebook se kupuje 1×), tlačítko do pilulky */
body.type-category #products .product .quantity{ display:none !important; }
body.type-category #products .product .p-tools .btn{ background:#1A1416 !important; color:#FBF7F4 !important;
border:0 !important; border-radius:100px !important; text-transform:uppercase; letter-spacing:.12em;
font-weight:600; font-size:12px; padding:12px 22px !important; }
body.type-category #products .product .p-tools .btn:hover{ background:#C97A8C !important; }
body.type-category .itemsTotal{ color:#8B7479; font-size:13px; }
/* ---------- 16. BLOG / RUBRIKA (výpis článků, /recepty/) ---------- */
/* karty staví JS ze zápatí (třídy .tp-recipes/.tp-recipe ze sekce 7) */
body.type-posts-listing .sidebar{ display:none !important; }
body.type-posts-listing .content{ width:100% !important; max-width:none !important; float:none !important; }
body.type-posts-listing .sectionDescription h1{ font-family:'Fraunces',serif; font-weight:400;
letter-spacing:-0.02em; font-size:46px; text-align:center; color:#1A1416; margin:28px 0 12px; }
.tp.tp-blog-grid{ background:transparent; padding:28px 0 70px; }
body.type-posts-listing .itemsTotal{ color:#8B7479; font-size:13px; text-align:center; }
/* ============================================================
OVERRIDES NATIVNÍCH PRVKŮ ŠABLONY (mimo .tp obsah)
Pozn.: barvy košíku/tlačítek řešit primárně v administraci
(Vzhled → barvy šablony), tady jen to, co admin neumí.
============================================================ */
/* --- hlavička → krémové pozadí ---
POZOR: v této šabloně (template-14) je .header-top CELÁ hlavička,
ne horní pruh — proto krémová, ne tmavá. --- */
#header,.header,.header-top,.site-header,.header-content{ background:#FBF7F4 !important; }
.header-top a{ color:#1A1416 !important; }
/* --- logo: omezení velikosti (nahraný soubor je 1254×1254 px) --- */
.site-name img{ max-height:72px !important; width:auto !important; }
.site-name{ padding:12px 0; }
/* --- hlavní menu: font, verzálky, prostrkání --- */
#menu a,.menu-level-0>li>a,.menu-level-1>li>a,.navigation-in a,
nav.header-navigation a,.main-menu a,.navigation a{
font-family:'Inter',sans-serif !important;
text-transform:uppercase;
letter-spacing:.14em;
font-weight:500;
font-size:13px;
color:#1A1416 !important;
}
#menu a:hover,.menu-level-0>li>a:hover,.navigation-in a:hover,
nav.header-navigation a:hover,.navigation a:hover{ color:#C97A8C !important; }
/* aktivní / otevřená položka */
.menu-level-0>li.active>a,.menu-level-0>li:hover>a,.navigation li.active>a{
color:#C97A8C !important;
}
/* tlačítko "VÍCE" v menu */
.menu .more>a,.menu-more>a,.more-menu>a{ color:#1A1416 !important; }
/* --- lupa / ikony v hlavičce --- */
.header-search button,.search-button,.header .ico,.header-buttons svg{
color:#1A1416 !important;
}
/* ---------- 17. OPRAVA NATIVNÍHO NEWSLETTERU (v2.2) ----------
Šablona vykresluje nad inputem .
Tlačítko je pozicované absolutně vůči