/* Reklamní doplňky — samolepky, tašky a krabice.
   Používá se na detailu vína i na samostatné stránce Doplňky. Převzato z v2.
   Každý doplněk má vlastní tlačítko do košíku; bez něj to zadavatel odmítl
   už u první sady návrhů.
   Předloha: sekce `doplnky` v prototyp/v22/vino.html a doplnky.html */

.doplnky {
  background: var(--bg-pudr, hsl(345 30% 94%));
  padding: 6rem 2rem;
}
/* Samostatná stránka Doplňky: světlé pozadí, obsah ve dvou sloupcích
   a rychlý košík po boku. Panel je tentýž komponent jako u výpisu vín —
   sdílí i CSS v 20-katalog.css, protože se opravdu jedná o totéž. */
.doplnky--stranka { background: var(--bg-normal, hsl(36 40% 96%)); padding: 0 2rem 6rem; }
.doplnky--stranka .doplnky__obal { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
@media (max-width: 1080px) { .doplnky--stranka .doplnky__obal { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 900px) { .doplnky--stranka { padding: 0 1.5rem 3rem; } }

.doplnky__vlastnost { font-size: 0.8125rem; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 0.5rem; }
.doplnky__obal { max-width: var(--sirka-obalu, 78rem); margin: 0 auto; }
.doplnky__nadpis { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 1rem; }
.doplnky__veta { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 3rem; max-width: 46ch; }

/* Skupiny na samostatné stránce: samolepky, tašky, krabice. */
.doplnky__skupina { margin: 0 0 4rem; }
.doplnky__skupina:last-of-type { margin-bottom: 0; }
.doplnky__sekce { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 0.5rem; }
.doplnky__popis { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1.5rem; max-width: 52ch; }

.doplnky__mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 2rem; }
.doplnky__kus {
  background: var(--bg-karta, hsl(0 0% 100%));
  border-radius: var(--r-karta, 16px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05));
}
.doplnky__kus--vkosiku { box-shadow: 0 0 0 2px hsl(334 45% 26% / 0.22), var(--stin-karta, 0 2px 8px hsl(334 20% 30% / 0.05)); }

.doplnky__obrazek { position: relative; margin: 0 0 1rem; }
.doplnky__obrazek img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Štítek „Povinné k vínu" u samolepek — na kartě doplňku, v sekci Samolepka
   na homepage (pecet) i na detailu. Malý a jemný: má být vidět, ne křičet. */
.doplnky__povinne,
.pecet__povinne,
.detail__povinne {
  position: absolute; top: 0; left: 0;
  font-size: 0.6875rem; line-height: 1; font-weight: 500;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pilulka, 999px);
  background: var(--bg-pudr, hsl(345 30% 94%));
  border: 1px solid hsl(345 35% 86%);
  color: var(--c-akce, hsl(345 62% 36%));
  white-space: nowrap;
  pointer-events: none;
}
.detail__povinne { top: 1rem; left: 1rem; font-size: 0.75rem; }
.doplnky__stitek {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pilulka, 999px);
  border: 1px solid var(--c-zlata, hsl(40 55% 52%));
  background: hsl(40 55% 96%);
  color: var(--c-bordo, hsl(334 45% 26%));
}
.doplnky__nazev { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1rem; line-height: 1.35; margin: 0 0 0.25rem; }
.doplnky__nazev a { color: inherit; text-decoration: none; }
.doplnky__nazev a:hover, .doplnky__nazev a:focus-visible { color: var(--c-akce, hsl(345 62% 36%)); }
.doplnky__cena { font-size: 1.0625rem; font-weight: 700; margin: auto 0 0.25rem; font-variant-numeric: tabular-nums; }
.doplnky__cena span { font-size: 0.6875rem; font-weight: 400; color: var(--fg-muted, hsl(334 12% 42%)); }
.doplnky__min { font-size: 0.6875rem; line-height: 1.5; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 0.875rem; }
.doplnky__pozn { font-size: 0.6875rem; line-height: 1.5; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 0.875rem; }

/* Stejná mechanika jako u vín: dokud doplněk není v košíku, je vidět tlačítko;
   pak ho nahradí počítadlo, jehož číslo je stav košíku. */
.doplnky__akce { display: grid; gap: 0.5rem; }
.doplnky__pridat { font: inherit; font-size: 0.9375rem; font-weight: 500; height: var(--v-ovladani, 2.75rem); padding: 0 0.75rem; border: none; border-radius: var(--r-ovladani, 10px); cursor: pointer; background: var(--c-akce, hsl(345 62% 36%)); color: hsl(36 40% 97%); transition: background-color 0.15s ease; }
.doplnky__pridat:hover, .doplnky__pridat:focus-visible { background: var(--c-akce-tmava, hsl(345 62% 30%)); }
.doplnky__pocitadlo { display: flex; align-items: center; height: var(--v-ovladani, 2.75rem); border-radius: var(--r-ovladani, 10px); background: hsl(340 24% 93%); }
.doplnky__krok { font: inherit; font-size: 1.0625rem; line-height: 1; width: var(--s-krok, 2.5rem); height: var(--v-ovladani, 2.75rem); border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); cursor: pointer; border-radius: var(--r-ovladani, 10px); transition: background-color 0.15s ease; }
.doplnky__krok:hover, .doplnky__krok:focus-visible { background: hsl(340 30% 87%); }
.doplnky__ks { font: inherit; font-size: 0.9375rem; font-weight: 500; flex: 1; min-width: 0; width: 100%; text-align: center; border: none; background: none; color: var(--c-bordo, hsl(334 45% 26%)); font-variant-numeric: tabular-nums; padding: 0; }
.doplnky__jednotka { font-size: 0.6875rem; color: var(--fg-muted, hsl(334 12% 42%)); padding-right: 0.75rem; }
.doplnky__davky { display: flex; gap: 0.3125rem; margin-top: 0.5rem; }
.doplnky__davka { flex: 1; font: inherit; font-size: 0.75rem; padding: 0.375rem 0; border: 1px solid var(--c-linka, hsl(334 12% 89%)); border-radius: var(--r-drobny, 8px); background: none; color: var(--fg-muted, hsl(334 12% 42%)); cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.doplnky__davka:hover, .doplnky__davka:focus-visible { border-color: var(--c-obrys, hsl(334 22% 70%)); color: var(--c-bordo, hsl(334 45% 26%)); background: hsl(36 40% 97%); }

.doplnky__vice { font-size: 0.9375rem; margin: 2rem 0 0; }
.doplnky__vice a { color: var(--c-akce, hsl(345 62% 36%)); }

@media (max-width: 900px) { .doplnky { padding: 3rem 1.5rem; } .doplnky__mrizka { gap: 1.5rem; } }

/* --- Úzké displeje — viz stejný blok v 20-katalog.css -------------------- */

@media (max-width: 600px) {
  .doplnky { padding: 2.5rem 1rem; }
  .doplnky--stranka { padding: 0 1rem 2.5rem; }
  .doplnky__mrizka { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
  .doplnky__kus { padding: 1rem; }
}

@media (max-width: 400px) {
  .doplnky { padding: 2rem 0.75rem; }
  .doplnky--stranka { padding: 0 0.75rem 2rem; }
  .doplnky__mrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .doplnky__kus { padding: 0.75rem; border-radius: 12px; }
  .doplnky__davky { gap: 0.25rem; }
  .doplnky__davka { font-size: 0.6875rem; padding: 0.3125rem 0; }
  .doplnky__jednotka { display: none; }
}

/* „Dopočítat k vínům" — vidět trvale; počet spočítá server podle lahví v košíku.
   Přesný počet zůstává hlavní cestou, dopočet je zkratka. */
.doplnky__dopocet { font: inherit; font-size: 0.75rem; background: none; border: none; padding: 0; color: var(--fg-muted, hsl(334 12% 42%)); cursor: pointer; text-align: center; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; margin-top: 0.625rem; }
.doplnky__dopocet:hover, .doplnky__dopocet:focus-visible { color: var(--c-bordo, hsl(334 45% 26%)); }
.doplnky__dopocet:disabled { opacity: 0.5; cursor: wait; }
.doplnky__dopocethlaska { font-size: 0.6875rem; line-height: 1.5; color: var(--c-bordo, hsl(334 45% 26%)); text-align: center; margin: 0.375rem 0 0; min-height: 1em; }
.doplnky__dopocethlaska:empty { display: none; }