/* =========================================================================
   AKVARELA CANDLE – scoped styly pro detail produktu a kategorii svíček
   -------------------------------------------------------------------------
   • Všechny třídy mají prefix .ac- a platí jen uvnitř kořenového prvku .ac
     (nic z toho nesahá na nativní prvky Shoptetu).
   • Sekce „NATIVNÍ OBLAST“ na konci jemně ladí okolí nativního bloku
     (pozadí, nadpis). Selektory je nutné ověřit proti HTML živé stránky.
   • Fonty: Fraunces (display) + Mulish (text). Mulish už Samba načítá;
     Fraunces se přidává jedním <link> v hlavičce (viz README).
   • Bez JavaScriptu. Sbalené bloky jsou nativní <details>.
   • Jednotky: px, ne rem. Samba nastavuje html { font-size: 10px }, takže
     1rem = 10px a vše v rem by se zmenšilo na 62,5 %. (Ověřeno na živém webu.)
   • Šířka: od 1440 px má kontejner Samby 1712 px, proto má kořen .ac vlastní
     max-width a centruje se. .category-perex centruje text, .ac ho vrací vlevo.
   ========================================================================= */

/* ---------- 0. Tokeny ---------- */
.ac {
  --ac-ivory: #faf6f0;
  --ac-sand: #f1e9dd;
  --ac-linen: #e3d6c4;
  --ac-bamboo: #c9a77c;
  --ac-wine: #7e2a36;
  --ac-wine-deep: #5c1e28;
  --ac-ink: #2a2420;
  --ac-ink-soft: #6b5f56;

  /* Tón motivu: pozadí pásu a barva citátu z dózy (nastavuje data-ac-tone). */
  --ac-tone: var(--ac-sand);
  --ac-quote: var(--ac-wine);

  --ac-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --ac-font-text: "Mulish", "Helvetica Neue", Arial, sans-serif;

  --ac-radius: 18px;
  --ac-radius-sm: 10px;

  font-family: var(--ac-font-text);
  color: var(--ac-ink);
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Barvy citátů odpovídají barvě nápisu na jednotlivých dózách. */
/* Tóny jsou záměrně velmi světlé (pozadí fotek a pásu péče), aby nekonkurovaly fotkám. */
.ac[data-ac-tone="sakura"]   { --ac-tone: #faf0f0; --ac-quote: #d4707f; }
.ac[data-ac-tone="kocky"]    { --ac-tone: #f6f0e8; --ac-quote: #6f5a4b; }
.ac[data-ac-tone="jezisek"]  { --ac-tone: #eff2ee; --ac-quote: #2f3a68; }
.ac[data-ac-tone="snehulak"] { --ac-tone: #f7eee9; --ac-quote: #c7463b; }

.ac *, .ac *::before, .ac *::after { box-sizing: border-box; }
.ac img { max-width: 100%; height: auto; display: block; }
.ac a { color: var(--ac-wine); text-decoration: none; }
.ac a:hover { color: var(--ac-wine-deep); }
.ac .ac-btn:hover, .ac .ac-card:hover, .ac .ac-chip:hover { text-decoration: none; }
.ac h1, .ac h2, .ac h3, .ac h4 { text-transform: none; }
.ac a:focus-visible, .ac summary:focus-visible, .ac button:focus-visible { outline: 2px solid var(--ac-wine); outline-offset: 3px; border-radius: 4px; }
.ac p { margin: 0 0 1em; }
.ac p:last-child { margin-bottom: 0; }
.ac ul, .ac ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 1. Rytmus a typografie ---------- */
/* !important záměrně: na živé Sambě dostává první <section> v popisu kategorie
   odjinud padding-top 140 px (zdroj pravidla se nepodařilo dohledat). */
.ac .ac-section { padding: 56px 0 0 !important; }
.ac .ac-section:first-child, .ac .ac-section--tight { padding-top: 24px !important; }
.ac-wrap { max-width: 1120px; margin: 0 auto; }
.ac-narrow { max-width: 640px; }

.ac-h1, .ac-h2, .ac-h3, .ac-display {
  font-family: var(--ac-font-display);
  font-weight: 400;
  color: var(--ac-ink);
  margin: 0 0 0.45em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ac-h1 { font-size: clamp(37px, 5vw, 61px); line-height: 1.05; font-variation-settings: "opsz" 144, "SOFT" 60; }
.ac-h2 { font-size: clamp(27px, 3.2vw, 37px); line-height: 1.15; font-variation-settings: "opsz" 96, "SOFT" 40; }
.ac-h3 { font-size: 20px; line-height: 1.3; font-weight: 500; }
.ac-lead { font-family: var(--ac-font-display); font-size: 21.5px; line-height: 1.35; font-weight: 400; margin: 0 0 0.6em; }
.ac-lede { font-size: 17.5px; line-height: 1.65; color: var(--ac-ink-soft); max-width: 40em; }
.ac-small { font-size: 14.5px; color: var(--ac-ink-soft); }

/* Řádek parametrů v próze: nahrazuje pás velkých čísel. */
.ac-specline {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ac-linen);
  font-family: var(--ac-font-display);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ac-ink);
  max-width: 34em;
}
.ac-specline span { color: var(--ac-ink-soft); }

/* Citát z dózy: jediný výrazný prvek stránky. Barva podle nápisu na dóze. */
.ac-quote {
  font-family: var(--ac-font-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(32px, 4.6vw, 53px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ac-quote);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
.ac-quote--long { font-size: clamp(25.5px, 3.4vw, 38.5px); }
.ac-quote cite { display: block; margin-top: 14px; font: 400 14.5px/1.4 var(--ac-font-text); font-style: normal; color: var(--ac-ink-soft); }

/* ---------- 2. Tlačítka a odkazy ---------- */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border-radius: 999px; border: 1px solid var(--ac-wine);
  background: var(--ac-wine); color: #fff !important;
  font: 600 15px/1.2 var(--ac-font-text);
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.ac-btn:hover { background: var(--ac-wine-deep); border-color: var(--ac-wine-deep); }
.ac-btn--ghost { background: transparent; color: var(--ac-wine) !important; }
.ac-btn--ghost:hover { background: rgba(126, 42, 54, .06); }

/* ---------- 3. Obrázky a placeholdery ---------- */
.ac-img { position: relative; overflow: hidden; border-radius: var(--ac-radius); background: var(--ac-tone); }
.ac-img img { width: 100%; height: 100%; object-fit: cover; }
.ac-img--render img { object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
/* PNG s průhledným pozadím (výřezy): celý obrázek na tónovaném podkladu, bez prolnutí. */
.ac-img--cut img { object-fit: contain; padding: 10%; }
.ac-ratio-45 { aspect-ratio: 4 / 5; }
.ac-ratio-34 { aspect-ratio: 3 / 4; }
.ac-ratio-32 { aspect-ratio: 3 / 2; }
.ac-ratio-11 { aspect-ratio: 1 / 1; }

/* Placeholder fotografie: označený, ale vizuálně klidný. */
.ac-ph {
  position: relative; overflow: hidden; border-radius: var(--ac-radius);
  background: linear-gradient(160deg, var(--ac-sand), var(--ac-linen));
  display: flex; align-items: flex-end; min-height: 160px;
}
.ac-ph::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(126, 42, 54, .35); border-radius: calc(var(--ac-radius) - 10px); pointer-events: none; }
.ac-ph__label { position: relative; margin: 20px; padding: 10px 14px; border-radius: 8px; background: rgba(250, 246, 240, .92); color: var(--ac-ink-soft); font-size: 13px; line-height: 1.4; }
.ac-ph__label strong { display: block; color: var(--ac-wine); font-weight: 700; margin-bottom: 2px; }

/* ---------- 4. Editorial mřížka (vizuální sekce) ---------- */
.ac-gallery { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "a b" "c c"; }
.ac-gallery > :nth-child(1) { grid-area: main; }
.ac-gallery > :nth-child(2) { grid-area: a; }
.ac-gallery > :nth-child(3) { grid-area: b; }
.ac-gallery > :nth-child(4) { grid-area: c; }
@media (min-width: 900px) {
  .ac-gallery { gap: 16px; grid-template-columns: 1.4fr 1fr 1fr; grid-template-areas: "main a b" "main c c"; }
}
.ac-gallery > * { min-width: 0; max-width: 100%; }
.ac-gallery .ac-ph, .ac-gallery .ac-img { height: 100%; }
.ac-gallery .ac-ratio-21 { aspect-ratio: 2.05 / 1; }
/* Na desktopu je hlavní políčko vysoké přes dva řádky; s poměrem 4:5 by vyšlo
   širší než sloupec a překrylo sousedy (stalo se na živém webu). Proto bez poměru. */
@media (min-width: 900px) { .ac-gallery > :first-child { aspect-ratio: auto; } }

/* ---------- 5. Dvousloupcová sekce ---------- */
.ac-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .ac-split { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- 6. Kroky výroby (skutečná posloupnost, proto číslované) ---------- */
.ac-steps { margin-top: 28px; counter-reset: ac-step; border-top: 1px solid var(--ac-linen); }
.ac-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--ac-linen); }
.ac-step::before { counter-increment: ac-step; content: counter(ac-step); font: 300 32px/1 var(--ac-font-display); color: var(--ac-bamboo); padding-top: 2px; }
.ac-step h3 { margin: 0 0 6px; font: 500 18.5px/1.3 var(--ac-font-display); }
.ac-step p { margin: 0; color: var(--ac-ink-soft); font-size: 15.5px; max-width: 40em; }
/* Na mobilu je číslo v 1. sloupci; nadpis i odstavec musí být ve 2., jinak
   odstavec spadne pod číslo do sloupce širokého 56 px (stalo se na živém webu). */
.ac-step h3, .ac-step p { grid-column: 2; }
@media (min-width: 900px) {
  .ac-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
  .ac-step { grid-template-columns: 1fr; gap: 10px; padding: 24px 0 28px; }
  .ac-step h3, .ac-step p { grid-column: auto; }
  .ac-step::before { font-size: 38.5px; }
}

/* ---------- 7. Vůně ---------- */
.ac-scents { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) { .ac-scents--3 { grid-template-columns: repeat(3, 1fr); } .ac-scents--2 { grid-template-columns: repeat(2, 1fr); } }
.ac-scent { position: relative; overflow: hidden; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--ac-linen); border-radius: var(--ac-radius); }
.ac-scent::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: var(--ac-scent-color, var(--ac-bamboo)); }
.ac-scent--sakura { --ac-scent-color: #e4a9b3; }
.ac-scent--vanoce { --ac-scent-color: #b8522f; }
.ac-scent--pernik { --ac-scent-color: #a9793f; }
.ac-scent__kicker { font-size: 14.5px; color: var(--ac-ink-soft); margin: 0 0 4px; }
.ac-scent h3 { margin: 0 0 10px; font: 400 27px/1.15 var(--ac-font-display); }
.ac-scent__mood { color: var(--ac-ink); margin: 0 0 18px; }
/* Noty: div > p > span, span (ne dl/dt/dd, editor Shoptetu je odstraňuje). */
.ac-scent__notes { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ac-linen); }
.ac-scent__notes p { display: grid; grid-template-columns: 84px 1fr; gap: 10px; margin: 0; font-size: 15px; color: var(--ac-ink); }
.ac-scent__k { color: var(--ac-ink-soft); padding-top: 1px; }
.ac-scent__for { margin-top: 16px; font-size: 14.5px; color: var(--ac-ink-soft); }
.ac-scent__for strong { color: var(--ac-ink); font-weight: 600; }
.ac-scent--wide .ac-scent__notes { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .ac-scent--wide { padding: 38px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .ac-scent--wide .ac-scent__notes { border-top: 0; border-left: 1px solid var(--ac-linen); padding: 0 0 0 40px; align-content: center; }
}

/* ---------- 8. Parametry ---------- */
/* Parametry: div > p > span, span (ne dl/dt/dd, editor Shoptetu je odstraňuje). */
.ac-params { margin: 24px 0 0; border-top: 1px solid var(--ac-linen); }
.ac-params p { display: grid; grid-template-columns: 1fr; gap: 2px 24px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ac-linen); font-size: 16px; }
.ac-params__k { color: var(--ac-ink-soft); font-size: 15px; }
@media (min-width: 720px) {
  .ac-params { columns: 2; column-gap: 48px; }
  .ac-params p { break-inside: avoid; grid-template-columns: 150px 1fr; }
}

/* ---------- 9. Důvody: text ve dvou sloupcích, bez boxů ---------- */
.ac-reasons { display: grid; gap: 22px 40px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ac-linen); }
@media (min-width: 720px) { .ac-reasons { grid-template-columns: repeat(2, 1fr); } }
.ac-reason { display: block; } /* bez ikon: inline SVG editor Shoptetu odstraňuje */
.ac-reason h3 { margin: 0 0 4px; font: 500 18.5px/1.3 var(--ac-font-display); }
.ac-reason p { margin: 0; font-size: 15.5px; color: var(--ac-ink-soft); max-width: 36em; }

/* ---------- 10. Péče a bezpečnost: prostý seznam v tónovaném pásu ---------- */
.ac-band { background: var(--ac-ivory); border-radius: var(--ac-radius); padding: 40px 22px; }
@media (min-width: 900px) { .ac-band { padding: 56px 64px; } }
.ac-band--tone { background: var(--ac-tone); }
.ac-care { margin-top: 24px; display: grid; gap: 0; }
@media (min-width: 720px) { .ac-care { grid-template-columns: repeat(2, 1fr); gap: 0 40px; } }
.ac-care li { padding: 14px 0; border-top: 1px solid rgba(42, 36, 32, .14); font-size: 15.5px; }
.ac-care strong { display: block; font-weight: 700; margin-bottom: 2px; }
.ac-note { margin-top: 28px; padding: 18px 0 0; border-top: 1px solid rgba(42, 36, 32, .14); font-size: 15px; color: var(--ac-ink-soft); max-width: 60em; }
.ac-note strong { color: var(--ac-ink); }

/* ---------- 11. FAQ (nativní <details>, bez JS) ---------- */
.ac-faq { margin-top: 24px; border-top: 1px solid var(--ac-linen); }
.ac-faq details { border-bottom: 1px solid var(--ac-linen); }
.ac-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 500 17.5px/1.35 var(--ac-font-display); color: var(--ac-ink); }
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-right: 4px; border-right: 1.5px solid var(--ac-wine); border-bottom: 1.5px solid var(--ac-wine); transform: rotate(45deg); transition: transform .2s; }
.ac-faq details[open] summary::after { transform: rotate(-135deg); }
.ac-faq details > div { padding: 0 0 20px; color: var(--ac-ink-soft); max-width: 60em; }

/* ---------- 12. Další motivy / hrnek ---------- */
.ac-related { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ac-related { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
/* Karta je <div>; odkaz v titulku se přes ::after roztáhne na celou kartu
   (editor Shoptetu nedovolí bloky uvnitř <a>). */
.ac-card { position: relative; display: block; color: inherit; text-decoration: none; }
.ac-card:hover .ac-card__title { color: var(--ac-wine); }
.ac-card__title a { color: inherit; text-decoration: none; }
.ac-card__title a::after { content: ""; position: absolute; inset: 0; }
.ac-card--feature .ac-btn { position: relative; z-index: 1; }
.ac-card__title { margin: 12px 0 2px; font: 500 17px/1.3 var(--ac-font-display); color: var(--ac-ink); }
.ac-card__meta { font-size: 13.5px; color: var(--ac-ink-soft); }
.ac-card--feature { grid-column: 1 / -1; display: grid; gap: 18px; align-items: center; padding: 20px; background: var(--ac-ivory); border-radius: var(--ac-radius); }
@media (min-width: 720px) { .ac-card--feature { grid-template-columns: 160px 1fr auto; padding: 22px 28px; } }
.ac-card--feature .ac-card__title { margin-top: 0; font-size: 21px; }
.ac-card--feature .ac-card__kicker { margin: 0 0 4px; font-size: 14.5px; color: var(--ac-ink-soft); }

/* ---------- 13. Rozcestník motivů (kategorie) ---------- */
.ac-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ac-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; min-height: 48px; border: 1px solid var(--ac-linen); border-radius: 999px; background: #fff; color: var(--ac-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.ac-chip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--ac-sand); mix-blend-mode: multiply; }
.ac-chip:hover { border-color: var(--ac-wine); color: var(--ac-wine); }

/* ---------- 14. Hero kategorie ---------- */
/* Mobil: první věc pod názvem kategorie je render svíčky (cover) přes celou šířku
   pásu, pak text, pak fotky nad sebou v plné šířce. Desktop: text vlevo, fotky
   vpravo, cover skrytý (lazy obrázek se v display:none nestahuje). */
.ac-hero { position: relative; overflow: hidden; padding: 0 0 28px; background: var(--ac-ivory); border-radius: var(--ac-radius); }
.ac-hero__cover { background: var(--ac-sand); }
.ac-hero__cover img { width: 100%; height: auto; display: block; padding: 6% 12% 2%; mix-blend-mode: multiply; }
.ac-hero__grid { display: grid; gap: 28px; padding: 24px 22px 0; }
.ac-hero__visual { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 -10px; }
@media (min-width: 900px) {
  .ac-hero { padding: 64px 64px 56px; }
  .ac-hero__cover { display: none; }
  .ac-hero__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 0; }
  .ac-hero__visual { grid-template-columns: 1.25fr 1fr; align-items: end; margin: 0; }
  .ac-hero__visual > :last-child { margin-bottom: 14%; }
}
.ac-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- 15. Bezpečnostní informace z etikety ---------- */
.ac-clp { margin-top: 16px; border-top: 1px solid var(--ac-linen); font-size: 14.5px; color: var(--ac-ink-soft); }
.ac-clp:last-child { border-bottom: 1px solid var(--ac-linen); }
.ac-clp summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--ac-ink); list-style: none; display: flex; justify-content: space-between; }
.ac-clp summary::-webkit-details-marker { display: none; }
.ac-clp summary::after { content: "+"; font-weight: 400; }
.ac-clp[open] summary::after { content: "–"; }
.ac-clp > div { padding: 0 0 16px; }
.ac-clp h4 { margin: 12px 0 4px; font-size: 14.5px; color: var(--ac-ink); }
.ac-clp ul { padding-left: 18px; list-style: disc; }
.ac-clp + .ac-clp { margin-top: 0; }

/* ---------- 16. Drobnosti ---------- */
.ac-grid-2 { display: grid; gap: 32px; }
@media (min-width: 720px) { .ac-grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (prefers-reduced-motion: reduce) { .ac * { transition: none !important; } }

/* =========================================================================
   NATIVNÍ OBLAST SHOPTETU (jemné ladění, OVĚŘIT selektory proti živé stránce)
   -------------------------------------------------------------------------
   Předpoklad: kategorie má URL /rucne-vyrabene-svicky/ → Samba dává
   <body class="… in-rucne-vyrabene-svicky …"> na kategorii i na detailech
   produktů v ní (ověřeno u kategorie Makronky: body.in-makronky).
   ========================================================================= */
body.in-rucne-vyrabene-svicky .p-detail h1,
body.in-rucne-vyrabene-svicky h1.category-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
body.in-rucne-vyrabene-svicky .p-detail .p-image-wrapper .p-image {
  background: #faf6f0;
  border-radius: 18px;
  overflow: hidden;
}
/* Sbalovač horního popisu („Chci se dozvědět víc“, doplněk fvstudio showmore)
   se spouští jen značkou #ShowMore# v textu popisu. Popis svíček ji neobsahuje,
   takže se nesbaluje a žádné CSS k tomu není potřeba (ověřeno u Makronek). */
