/* =====================================================
   D.FOX — návrh webu (Kelynda)
   Tmavý gotický editoriál: noční černá, pergamen, ostružina a mech.
   Cormorant Garamond na nadpisy, Jost na text. Oblouky jako gotická okna,
   kresba ostružiny z kolekce Witch Harvest jako motiv.
   ===================================================== */
:root {
    --noc: #0F0E0D;
    --noc-2: #171513;
    --noc-3: #211E1B;
    --pergamen: #EDE5D8;
    --pergamen-2: #D9CFBF;
    --text-2: #BDB2A2;
    --text-3: #8F8576;
    --inkoust: #1A1714;
    --inkoust-2: #4A433B;
    --ostruzina: #7A2848;
    --vino: #591C19;
    --vino-2: #6f2824;
    --ostruzina-2: #96395D;
    --mech: #56644F;
    --linka: rgba(237, 229, 216, .14);
    --linka-tmava: rgba(26, 23, 20, .16);
    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --max: 1360px;
    --okraj: max(clamp(1.1rem, 5vw, 4.5rem), calc((100vw - var(--max)) / 2));
    --oblouk: 50% 50% 0 0 / 22% 22% 0 0;
    --ease: cubic-bezier(.22, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--noc); color: var(--pergamen);
    font: 400 1.05rem/1.75 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Jemné zrno jako na papíře */
body::after {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 300; line-height: .98; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--pergamen-2); }
:focus-visible { outline: 2px solid var(--ostruzina-2); outline-offset: 3px; }
::selection { background: var(--ostruzina); color: var(--pergamen); }

.nadtitul { font-family: var(--sans); font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.2rem; }

/* ---------- Tlačítka ---------- */
.tl {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.9rem;
    font: 500 .82rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, border-color .3s;
}
.tl-ostruzina { background: var(--vino); color: var(--pergamen); }
.tl-ostruzina:hover { background: var(--vino-2); }
.tl-vino { background: var(--vino); color: var(--pergamen); }
.tl-vino:hover { background: var(--vino-2); }
.tl-obrys { border-color: rgba(237, 229, 216, .4); color: var(--pergamen); }
.tl-obrys:hover { border-color: var(--pergamen); background: rgba(237, 229, 216, .06); }
.tl-svetle { border-color: rgba(237, 229, 216, .35); color: var(--pergamen); min-height: 44px; padding: 0 1.3rem; font-size: .74rem; }
.tl-svetle:hover { background: var(--pergamen); color: var(--noc); }
.tl-tmave { background: var(--inkoust); color: var(--pergamen); }
.tl-tmave:hover { background: var(--ostruzina); }

/* ---------- Lišta návrhu ---------- */

/* ---------- Hlavička ---------- */
.hlavicka { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 2rem; padding: .9rem var(--okraj); transition: background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.hlavicka.plna { background: rgba(15, 14, 13, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--linka); }
.znak { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.socialni-hlavicka { display: flex; gap: .3rem; margin-right: auto; padding-left: .9rem; margin-left: .3rem; border-left: 1px solid var(--linka); }
.socialni-hlavicka a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--text-2); border-radius: 50%; transition: color .25s, background .25s; }
.socialni-hlavicka a:hover { color: var(--pergamen); background: rgba(237, 229, 216, .08); }
.znak img { width: 30px; height: auto; }
.znak span { font-family: var(--serif); font-size: 1.45rem; letter-spacing: .18em; }
.menu { display: flex; gap: 1.8rem; }
.menu a { white-space: nowrap; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--text-2); transition: color .25s; }
.menu a:hover { color: var(--pergamen); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; cursor: pointer; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1px; background: var(--pergamen); transition: transform .3s, top .3s; }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- Úvod ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) var(--okraj) clamp(3rem, 6vw, 5rem); min-height: min(calc(100svh - 110px), 880px); }
.hero h1 { font-size: clamp(3.4rem, 8.4vw, 8.6rem); margin-bottom: 1.8rem; }
.hero h1 em { display: block; color: var(--pergamen-2); }
.hero-perex { max-width: 34rem; color: var(--text-2); font-size: 1.1rem; }
.hero-akce { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero-foto { justify-self: end; width: min(100%, 520px); }
.hero-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--oblouk); animation: vynorit 1.6s var(--ease) both; }
.hero-foto::before { content: ''; position: absolute; inset: -14px; border: 1px solid var(--linka); border-radius: var(--oblouk); pointer-events: none; }
/* Všechny fotky se ořezávají od horního okraje (hlava a horní část kousku zůstanou), jako hero. */
.hero-foto img, .produkt-foto img, .kat-dlazdice img, .atelier-fotky img, .o-mne-foto img,
.vybrany img, .galerie-hlavni img, .nahled img { object-position: 50% 0; }
.hero-foto figcaption { margin-top: 1rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); text-align: right; }
/* Velké logo lišky na středu za textem i fotkou — jemně, jako vytlačené do černé. */
.hero::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(60vw, 640px); aspect-ratio: 728 / 1021;
    transform: translate(-50%, -50%); background: url(../img/logo-velke.png) center / contain no-repeat; opacity: .08; pointer-events: none;
}
.hero-text, .hero-foto { position: relative; }
@keyframes vynorit { from { opacity: 0; transform: scale(1.04); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }


/* ---------- Sekce ---------- */
.sekce { padding: clamp(5rem, 10vw, 9rem) var(--okraj); }
.sekce-hlava { max-width: 46rem; margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }
.sekce-hlava h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); margin-bottom: 1.4rem; }
.sekce-hlava p:last-child { color: var(--text-2); max-width: 38rem; }

/* ---------- Kolekce ---------- */
.zalozky { display: flex; flex-wrap: wrap; gap: 0 2.6rem; border-bottom: 1px solid var(--linka); margin-bottom: 2.4rem; }
.zalozky button { position: relative; display: grid; gap: .25rem; padding: 0 0 1.2rem; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text-3); transition: color .3s; }
.zalozky button span { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; }
.zalozky button small { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.zalozky button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ostruzina-2); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.zalozky button[aria-selected="true"] { color: var(--pergamen); }
.zalozky button[aria-selected="true"]::after { transform: none; }
.zalozky button:hover { color: var(--pergamen-2); }
.kolekce-panel + .kolekce-panel { margin-top: 4rem; }
.js .kolekce-panel[hidden] { display: none; }
.js .kolekce-panel + .kolekce-panel { margin-top: 0; }
.panel-nazev { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin-bottom: 1.4rem; }
.panel-nazev small { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-top: .4rem; }
.js .panel-nazev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filtr { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtr button { padding: .55rem 1.1rem; background: none; border: 1px solid var(--linka); color: var(--text-2); font: 400 .82rem/1 var(--sans); letter-spacing: .08em; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.filtr button:hover { border-color: var(--pergamen-2); color: var(--pergamen); }
.filtr button[aria-pressed="true"] { background: var(--pergamen); border-color: var(--pergamen); color: var(--noc); }
.produkty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem clamp(1rem, 2vw, 1.8rem); }
.produkt { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.produkt[hidden] { display: none; }
.produkt-foto { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--oblouk); background: var(--noc-2); margin-bottom: 1rem; }
.produkt-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.produkt-druha { opacity: 0; }
.produkt:hover .produkt-druha, .produkt:focus-visible .produkt-druha { opacity: 1; }
.produkt:hover .produkt-foto img { transform: scale(1.03); }
.produkt-stitek { position: absolute; left: .7rem; bottom: .7rem; z-index: 1; padding: .35rem .6rem; background: rgba(15, 14, 13, .78); color: var(--pergamen); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.produkt-nazev { font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; }
.produkt-typ { font-size: .86rem; color: var(--text-3); margin-top: .2rem; }
.produkt-cena { margin-top: .5rem; font-size: .95rem; letter-spacing: .04em; color: var(--pergamen-2); }
.kolekce-ig { margin-top: 3rem; color: var(--text-2); }
.kolekce-ig a { color: var(--pergamen); }

/* ---------- Witch Harvest ---------- */
.harvest {
    padding: clamp(5rem, 10vw, 9rem) var(--okraj);
    background: radial-gradient(ellipse at 20% 30%, rgba(122, 40, 72, .28), transparent 60%), radial-gradient(ellipse at 90% 90%, rgba(86, 100, 79, .25), transparent 55%), var(--noc-2);
}
.harvest-hlava { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.harvest-hlava h2 { font-size: clamp(3rem, 6.4vw, 6rem); }
.harvest-kategorie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.kat-dlazdice { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; }
.kat-nazev { min-height: 2.6em; display: flex; align-items: flex-end; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--pergamen); }
.kat-dlazdice figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--noc); border-radius: var(--oblouk); }
.kat-dlazdice img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), opacity .4s; }
.kat-dlazdice:hover img { transform: scale(1.04); opacity: .9; }
.harvest-o { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); }
.harvest-model { justify-self: center; width: min(100%, 520px); }
.harvest-model img { width: 100%; height: auto; display: block; }
.harvest-text h2 { font-size: clamp(3.4rem, 7.4vw, 7rem); margin-bottom: 2rem; }
.harvest-perex { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.4; color: var(--pergamen); margin-bottom: 1.6rem; }
.harvest-text p:not(.harvest-perex):not(.nadtitul) { color: var(--text-2); margin-bottom: 1.1rem; max-width: 36rem; }
.harvest-text .tl { margin-top: 1rem; }

/* ---------- Ateliér (světlá sekce) ---------- */
.atelier { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) var(--okraj); background: var(--pergamen); color: var(--inkoust); }
.atelier .nadtitul { color: var(--inkoust-2); }
.atelier h2 { font-size: clamp(3rem, 6.4vw, 5.8rem); margin-bottom: 1.8rem; }
.atelier h2 em { color: var(--ostruzina); }
.atelier-perex { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.35; margin-bottom: 1.2rem; }
.atelier-text > p:not(.nadtitul):not(.atelier-perex) { color: var(--inkoust-2); max-width: 34rem; }
.hodiny { margin: 2.2rem 0; padding: 1.6rem 0; border-block: 1px solid var(--linka-tmava); }
.hodiny p { color: var(--inkoust-2); }
.hodiny b { color: var(--inkoust); font-weight: 500; }
.hodiny-nadpis { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--inkoust) !important; margin-bottom: .4rem; }
.atelier-fotky { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.atelier-fotky figure { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--oblouk); }
.atelier-fotky figure:nth-child(2) { margin-top: 3rem; }
.atelier-fotky figure:nth-child(3) { margin-top: -3rem; }
.atelier-fotky img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Recenze ---------- */
.recenze-karusel { position: relative; margin-inline: calc(var(--okraj) * -1); padding-inline: var(--okraj); }
.recenze-pas { display: flex; gap: clamp(1rem, 2vw, 1.8rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.recenze-pas::-webkit-scrollbar { display: none; }
.recenze-pas:focus-visible { outline: 2px solid var(--pergamen); outline-offset: 4px; }
.recenze-pas .recenze-karta { flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.8rem)) / 3); scroll-snap-align: start; scroll-snap-stop: always; }
.recenze-sipka { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(237, 229, 216, .35); border-radius: 50%; background: rgba(15, 14, 13, .8); color: var(--pergamen); cursor: pointer; transition: background .25s, border-color .25s, opacity .25s; }
.recenze-sipka:hover:not(:disabled) { background: var(--vino); border-color: var(--pergamen); }
.recenze-sipka:disabled { opacity: .25; cursor: default; }
.recenze-sipka--predchozi { left: max(.5rem, calc(var(--okraj) / 2 - 23px)); }
.recenze-sipka--dalsi { right: max(.5rem, calc(var(--okraj) / 2 - 23px)); }
.recenze-tecky { display: flex; justify-content: center; gap: .55rem; margin-top: 1.6rem; }
.recenze-tecka { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(237, 229, 216, .28); cursor: pointer; transition: background .25s, transform .25s; }
.recenze-tecka[aria-current="true"] { background: var(--pergamen); transform: scale(1.25); }
@media (max-width: 860px) {
    .recenze-pas .recenze-karta { flex-basis: 100%; }
    .recenze-sipka { display: none; }
}
.recenze-karta { padding: 2.2rem 2rem; border: 1px solid var(--linka); background: var(--noc-2); display: flex; flex-direction: column; }
.hvezdy { color: #C9A35B; letter-spacing: .2em; margin-bottom: 1.2rem; }
.recenze-karta blockquote { font-family: var(--serif); font-size: 1.28rem; line-height: 1.5; color: var(--pergamen); flex: 1; }
.recenze-karta figcaption { margin-top: 1.6rem; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.recenze-vse { margin-top: 2.4rem; }
.recenze-vse a { color: var(--text-2); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--linka); padding-bottom: 3px; }
.recenze-vse a:hover { color: var(--pergamen); border-color: var(--pergamen); }

/* ---------- O mně ---------- */
.o-mne { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) var(--okraj); background: var(--noc-3); }
.o-mne-foto { position: relative; }
.o-mne-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--oblouk); filter: grayscale(.15); }
.o-mne-text h2 { font-size: clamp(3rem, 6vw, 5.4rem); margin-bottom: 2rem; }
.o-mne-text p:not(.nadtitul):not(.podpis) { color: var(--text-2); margin-bottom: 1.1rem; max-width: 38rem; }
.podpis { font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--pergamen-2); margin-top: 1rem; }

/* ---------- Poptávka ---------- */
.poptavka { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding: clamp(5rem, 10vw, 9rem) var(--okraj); border-top: 1px solid var(--linka); }
.poptavka h2 { font-size: clamp(3rem, 6vw, 5.4rem); margin-bottom: 1.4rem; }
.poptavka-text > p:not(.nadtitul) { color: var(--text-2); max-width: 32rem; }
.kontakty { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: .9rem; }
.kontakty li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; color: var(--pergamen-2); }
.kontakty span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); padding-top: .25rem; }
.kontakty a { color: var(--pergamen); text-decoration: none; border-bottom: 1px solid var(--linka); }
.kontakty a:hover { border-color: var(--pergamen); }
.formular { display: grid; gap: 1.3rem; padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--linka); background: var(--noc-2); }
.vybrany { display: flex; align-items: center; gap: 1rem; padding: .9rem; border: 1px solid var(--ostruzina); background: rgba(122, 40, 72, .12); }
.vybrany img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--oblouk); }
.vybrany span { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.vybrany b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin: .15rem 0; }
.vybrany small { color: var(--text-2); font-size: .88rem; }
.pole-radek { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.pole { display: grid; gap: .45rem; }
.pole > span, .volby legend { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.pole small { letter-spacing: .04em; text-transform: none; }
.pole input, .pole textarea {
    width: 100%; font: inherit; color: var(--pergamen); background: transparent; border: 0; border-bottom: 1px solid rgba(237, 229, 216, .3);
    padding: .6rem 0; transition: border-color .25s; border-radius: 0;
}
.pole textarea { resize: vertical; }
.pole input:focus, .pole textarea:focus { outline: 0; border-color: var(--pergamen); }
.pole textarea::placeholder { color: var(--text-3); }
.pole [aria-invalid="true"] { border-color: var(--ostruzina-2); }
.volby { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.volby legend { width: 100%; margin-bottom: .7rem; padding: 0; }
.volby label { position: relative; cursor: pointer; }
.volby input { position: absolute; opacity: 0; }
.volby span { display: block; padding: .6rem 1.1rem; border: 1px solid var(--linka); font-size: .9rem; transition: background .25s, border-color .25s; }
.volby input:checked + span { background: var(--vino); border-color: var(--vino); }
.volby input:focus-visible + span { outline: 2px solid var(--ostruzina-2); outline-offset: 2px; }
.zaskrtnout { display: flex; gap: .7rem; align-items: center; color: var(--text-2); font-size: .95rem; cursor: pointer; }
.zaskrtnout input { accent-color: var(--vino); width: 18px; height: 18px; }
.formular .tl { justify-self: start; }
.formular-zprava { color: var(--pergamen-2); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }

/* ---------- Stránka produktu ---------- */
.detail { padding: clamp(1.4rem, 3vw, 2.4rem) var(--okraj) clamp(4rem, 8vw, 7rem); }
.drobky { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.drobky a { color: var(--text-3); text-decoration: none; }
.drobky a:hover { color: var(--pergamen); }
.drobky [aria-current] { color: var(--pergamen-2); }
.detail-mrizka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.galerie { position: sticky; top: 90px; max-width: 600px; }
.galerie-hlavni { position: relative; touch-action: pan-y; aspect-ratio: 3 / 4; overflow: hidden; background: var(--noc-2); border-radius: var(--oblouk); }
.galerie-hlavni img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.galerie-hlavni img.meni { opacity: .2; }
.galerie-nahledy { position: relative; display: flex; gap: .7rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; }
.nahled { flex: 0 0 78px; height: 104px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .55; transition: opacity .25s, border-color .25s; }
.nahled img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--oblouk); }
.nahled:hover { opacity: .85; }
.nahled.aktivni { opacity: 1; border-color: var(--pergamen-2); }
.detail-info { max-width: 560px; }
.detail-info h1 { font-size: clamp(3rem, 6vw, 5.4rem); margin-bottom: .4rem; }
.detail-typ { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--text-2); }
.detail-cena { font-family: var(--serif); font-size: 2.2rem; margin-top: 1.4rem; color: var(--pergamen); }
.detail-dostupnost { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; color: var(--text-2); font-size: .95rem; }
.detail-dostupnost i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.detail-dostupnost.skladem i { background: #7FA36E; box-shadow: 0 0 0 4px rgba(127, 163, 110, .16); }
.detail-akce { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 2.4rem; }
.detail-popis p { color: var(--text-2); margin-bottom: 1rem; }
.detail-parametry { margin: 2rem 0 0; border-top: 1px solid var(--linka); }
.detail-parametry div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linka); }
.detail-parametry dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); padding-top: .2rem; }
.detail-parametry dd { margin: 0; color: var(--pergamen-2); }
.detail-pomoc { margin-top: 1.8rem; color: var(--text-3); font-size: .92rem; }
.detail-pomoc a { color: var(--pergamen-2); }
.dalsi { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--linka); }
.dalsi h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 2.2rem; }

/* ---------- Patička ---------- */
.pata { display: grid; justify-items: center; gap: 1rem; padding: 4.5rem var(--okraj) 3rem; border-top: 1px solid var(--linka); text-align: center; color: var(--text-3); }
.pata > p:first-of-type { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--text-2); }
.pata-odkazy { display: flex; gap: 1.8rem; }
.pata-odkazy a { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--pergamen-2); }
.pata-drobne { font-size: .8rem; }
.pata-drobne a { color: var(--text-2); }

/* ---------- Mobilní výzva ---------- */

/* ---------- Odhalení ---------- */
.js .odhal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .odhal.videt { opacity: 1; transform: none; }

/* ---------- Responzivita ---------- */
@media (max-width: 1100px) {
    .menu { gap: 1.2rem; }
    .produkty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .burger { display: block; }
    .menu {
        position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: .5rem var(--okraj) 1.6rem;
        background: rgba(15, 14, 13, .98); border-bottom: 1px solid var(--linka);
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s, visibility .3s;
    }
    .menu.otevrene { opacity: 1; visibility: visible; transform: none; }
    .menu a { padding: 1rem 0; border-bottom: 1px solid var(--linka); font-size: .86rem; color: var(--pergamen); }
    .hlavicka.menu-otevrene { background: rgba(15, 14, 13, .98); }
}
@media (max-width: 860px) {
    .hero, .harvest-o, .atelier, .o-mne, .poptavka, .detail-mrizka { grid-template-columns: minmax(0, 1fr); }
    .galerie { position: static; margin: 0 auto; }
    .harvest-kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero::before { top: 64%; width: min(100vw, 560px); }
    .hero { min-height: 0; }
    .hero-foto { order: -1; justify-self: center; width: min(86%, 440px); }
    .harvest-model { width: min(80%, 440px); }
    .o-mne-foto { width: min(80%, 420px); }
}
@media (max-width: 640px) {
    .jen-desktop { display: none; }
    .hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
    .hero-akce .tl { flex: 1 1 100%; }
    .produkty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem .9rem; }
    .produkt-nazev { font-size: 1.25rem; }
    .produkt-typ { font-size: .8rem; }
    .zalozky { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    .zalozky button small { display: none; }
    .zalozky button span { font-size: 1.6rem; }
    .socialni-hlavicka { padding-left: .5rem; margin-left: .1rem; }
    .socialni-hlavicka a { width: 34px; height: 34px; }
    .znak span { font-size: 1.25rem; }
    .detail-parametry div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .recenze-mrizka { grid-template-columns: minmax(0, 1fr); }
    .pole-radek { grid-template-columns: minmax(0, 1fr); }
    .kontakty li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .atelier-fotky figure:nth-child(2) { margin-top: 1.5rem; }
    .atelier-fotky figure:nth-child(3) { margin-top: -1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .odhal { opacity: 1; transform: none; }
}

/* ---------- Poptávka (košík), okno s volbami, děkovná stránka ---------- */
.hlavicka-cta span:not(:empty) { margin-left: .35rem; color: var(--ostruzina-2); }
.poptavka-vyzva { max-width: 34rem; }
.poptavka-vyzva > p:first-child { color: var(--text-2); margin-bottom: 1.6rem; }
.poznamka-demo { margin-top: 1.2rem; font-size: .88rem; color: var(--text-3); }
.potvrzeni { margin-top: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--mech); background: rgba(86, 100, 79, .15); font-size: .95rem; }
.potvrzeni a { color: var(--pergamen); margin-left: .4rem; }
.hp-pole { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.poptavka-stranka { padding: clamp(1.4rem, 3vw, 2.4rem) var(--okraj) clamp(4rem, 8vw, 7rem); max-width: none; }
.poptavka-hlava h1 { font-size: clamp(3rem, 6vw, 5.4rem); margin-bottom: 1rem; }
.poptavka-hlava > p:last-child { color: var(--text-2); max-width: 36rem; }
.poptavka-hlava { margin-bottom: 2.4rem; }
.mala-h { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; margin-bottom: 1.2rem; }
#poptavkaObsah { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.prazdna { padding: 3rem 0; color: var(--text-2); font-size: 1.1rem; }
.prazdna .tl { margin-top: 1rem; }
.polozky { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linka); }
.polozka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.5rem; padding: 1.3rem 0; border-bottom: 1px solid var(--linka); }
.polozka-info b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.polozka-typ { color: var(--text-3); font-size: .9rem; }
.polozka-volby { list-style: none; margin: .5rem 0 0; padding: 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; }
.polozka-cena { text-align: right; font-size: 1.05rem; white-space: nowrap; color: var(--pergamen-2); }
.polozka-cena small { display: block; color: var(--text-3); font-size: .8rem; }
.polozka-akce { grid-column: 1 / -1; display: flex; gap: 1.2rem; }
.polozka-akce button, .polozky-pridat button { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--linka); cursor: pointer; }
.polozka-akce button:hover, .polozky-pridat button:hover { color: var(--pergamen); border-color: var(--pergamen); }
.soucet { text-align: right; margin-top: 1.2rem; font-size: 1.1rem; }
.soucet b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.polozky-pridat { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-top: 1.6rem; }
.polozky-pridat a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ostruzina-2); border-bottom: 1px solid currentColor; text-decoration: none; }
.kontakt-form .pole select { width: 100%; font: inherit; color: var(--pergamen); background: var(--noc-2); border: 0; border-bottom: 1px solid rgba(237, 229, 216, .3); padding: .6rem 0; }
.pole select:focus, .pole select:focus-visible { outline: 0; border-color: var(--pergamen); }
.pole [aria-invalid="true"] { border-color: var(--ostruzina-2); }
.miry-nadpis { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; }
.miry-nadpis small { text-transform: none; letter-spacing: .04em; }
.pole small { display: block; color: var(--text-3); font-size: .82rem; letter-spacing: 0; text-transform: none; margin-top: .2rem; }
.souhlas { align-items: flex-start; }
.souhlas input { margin-top: .2rem; flex: none; }

.diky { max-width: 40rem; padding: 3rem 0; }
.diky h1 { font-size: clamp(3rem, 6vw, 5rem); margin-bottom: 1.4rem; }
.diky-cislo { font-size: 1.2rem; margin-bottom: 1.6rem; }
.diky-cislo b { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--pergamen); }
.diky .mala-h { margin-top: 2rem; }
.diky-kroky { padding-left: 1.2rem; color: var(--text-2); margin-bottom: 2rem; line-height: 1.9; }

.okno { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--linka); background: var(--noc-2); color: var(--pergamen); overflow-y: auto; }
.okno::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(3px); }
.okno-form { display: grid; gap: 1.2rem; padding: clamp(1.4rem, 4vw, 2rem); }
.okno-hlava { display: flex; justify-content: space-between; gap: 1rem; }
.okno-hlava h2 { font-size: 2.2rem; line-height: 1; }
.okno-typ { color: var(--text-2); margin-top: .5rem; }
.okno-zavrit { align-self: flex-start; width: 40px; height: 40px; background: none; border: 1px solid var(--linka); color: var(--pergamen); font-size: 1.4rem; cursor: pointer; }
.okno-pole { display: grid; gap: 1.1rem; }
.okno-volby { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.okno-volby legend { width: 100%; margin-bottom: .6rem; padding: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.okno-volby label { position: relative; cursor: pointer; }
.okno-volby input { position: absolute; opacity: 0; }
.okno-volby span { display: block; padding: .6rem 1.1rem; border: 1px solid var(--linka); font-size: .9rem; }
.okno-volby input:checked + span { background: var(--vino); border-color: var(--vino); }
.okno-volby input:focus-visible + span { outline: 2px solid var(--ostruzina-2); outline-offset: 2px; }
.okno .pole select { width: 100%; font: inherit; color: var(--pergamen); background: var(--noc-2); border: 0; border-bottom: 1px solid rgba(237, 229, 216, .3); padding: .6rem 0; }
.okno .pole input, .okno .pole textarea { width: 100%; }
.pole-mnozstvi input { max-width: 6rem; }
.okno-chyba { color: #E58AA6; font-size: .92rem; }
.okno-akce { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 960px) { #poptavkaObsah { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1200px) { .hlavicka-cta { display: inline-flex; min-height: 38px; padding: 0 .85rem; font-size: .66rem; letter-spacing: .12em; } }

/* Atribut hidden musí vyhrát nad display u .pole, .volby, .miry… */
[hidden] { display: none !important; }
button.tl-obrys, button.tl-svetle { background: transparent; color: var(--pergamen); font-family: var(--sans); }
button.tl-obrys:hover { background: rgba(237, 229, 216, .06); }

/* ---------- Právní stránky (zásady, cookies) ---------- */
.pata-pravni { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; font-size: .82rem; }
.pata-pravni a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--linka); }
.pata-pravni a:hover { color: var(--pergamen); }
.pravni { padding: clamp(1.4rem, 3vw, 2.4rem) var(--okraj) clamp(4rem, 8vw, 7rem); }
.pravni-text { max-width: 46rem; }
.pravni h1 { font-size: clamp(2.8rem, 5.4vw, 4.6rem); margin: .4rem 0 1rem; }
.pravni h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin: 2.6rem 0 .8rem; }
.pravni p, .pravni li { color: var(--text-2); }
.pravni p { margin-bottom: 1rem; }
.pravni ul { margin: 0 0 1rem 1.2rem; display: grid; gap: .4rem; }
.pravni a { color: var(--pergamen); }
.pravni .stav-dokumentu { font-size: .82rem; color: var(--text-3); letter-spacing: .04em; }
.pravni .doplnit { background: rgba(122, 40, 72, .35); padding: 0 .3rem; color: var(--pergamen); }
.tabulka-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.pravni table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pravni th, .pravni td { text-align: left; padding: .75rem .8rem .75rem 0; border-bottom: 1px solid var(--linka); vertical-align: top; color: var(--text-2); }
.pravni th { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); font-weight: 400; }

/* ---------- Oznámení o cookies ---------- */
.cookie-lista { position: fixed; z-index: 90; left: 1rem; bottom: 1rem; max-width: 26rem; display: grid; gap: 1rem;
    padding: 1.1rem 1.2rem; background: #1d1a17; border: 1px solid var(--linka); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.cookie-lista p { font-size: .88rem; line-height: 1.55; color: var(--text-2); margin: 0; }
.cookie-lista a { color: var(--pergamen); }
.cookie-lista .tl { justify-self: start; }
@media (max-width: 760px) { .cookie-lista { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; } }

.galerie-pocet { position: absolute; right: .8rem; bottom: .8rem; padding: .15rem .6rem; border-radius: 99px; background: rgba(15, 14, 13, .72); color: var(--pergamen); font-size: .78rem; letter-spacing: .06em; pointer-events: none; }
.galerie-sipka { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(237, 229, 216, .35); border-radius: 50%; background: rgba(15, 14, 13, .55); color: var(--pergamen); cursor: pointer; transition: background .25s, border-color .25s; }
.galerie-sipka:hover { background: rgba(15, 14, 13, .85); border-color: var(--pergamen); }
.galerie-sipka--predchozi { left: .8rem; }
.galerie-sipka--dalsi { right: .8rem; }
.galerie-hlavni:focus-visible { outline: 2px solid var(--pergamen); outline-offset: 3px; }

/* ---------- Stránka 404 ---------- */
.chyba404 { min-height: 70vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(3rem, 8vw, 7rem) var(--okraj); }
.chyba404 h1 { font-size: clamp(3.4rem, 8vw, 7rem); margin: .4rem 0 1.2rem; }
.chyba404 p { color: var(--text-2); max-width: 34rem; }
.chyba404-akce { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* ---------- Novinka a blog ---------- */
.atelier--bez-fotek { grid-template-columns: minmax(0, 1fr); }
.novinka-blog { margin-top: 1.6rem; }
.novinka-blog a { color: var(--inkoust-2); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--linka-tmava); padding-bottom: 3px; }
.novinka-blog a:hover { color: var(--inkoust); border-color: var(--inkoust); }
.blog { padding: clamp(1.4rem, 3vw, 2.4rem) var(--okraj) clamp(4rem, 8vw, 7rem); }
.blog h1 { font-size: clamp(2.8rem, 5.4vw, 4.6rem); margin: .4rem 0 2rem; }
.blog-prispevek { max-width: 50rem; padding: 2.4rem 0; border-top: 1px solid var(--linka); }
.blog-prispevek time { display: block; margin-bottom: .6rem; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.blog-prispevek h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.blog-prispevek p { color: var(--text-2); margin-bottom: 1rem; }
.blog-prispevek .blog-perex { font-family: var(--serif); font-size: 1.35rem; line-height: 1.4; color: var(--pergamen); }
.blog-fotky { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.blog-fotky figure { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--oblouk); }
.blog-fotky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.blog-box { margin: 1.4rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--linka); }

/* Úvod kolekce bez fotky */
.harvest-o--bez-fotky { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* Jak si vzít míry */
.miry-video { margin: 1.8rem 0 2.4rem; }
.miry-video video { display: block; width: min(100%, 380px); height: auto; margin: 0 auto; background: #000; }
.miry .pravni-text { margin: 0 auto; }
.miry .pravni-text > .nadtitul, .miry h1, .miry .miry-text { text-align: center; }