/* Samolepky na homepage. Pudrový panel místo plné tmavé plochy — teplejší a měkčí.
   Předloha: sekce `pecet` v prototyp/v22/index.html */

.pecet {
  background: var(--bg-pudr, hsl(345 30% 94%));
  padding: 6rem 2rem;
}
.pecet__obal {
  max-width: var(--sirka-obalu, 78rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 5rem;
  align-items: center;
}
.pecet__nadpis {
  font-family: var(--font-nadpis, Newsreader, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}
.pecet__veta { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0 0 1rem; max-width: 40ch; }
.pecet__pozn { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-muted, hsl(334 12% 42%)); margin: 0; max-width: 40ch; }
.pecet__odkaz { font-size: 0.9375rem; margin: 1rem 0 0; }
.pecet__odkaz a { color: var(--c-akce, hsl(345 62% 36%)); }

.pecet__mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; }
.pecet__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));
}
.pecet__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)); }
.pecet__obrazek { position: relative; margin: 0 0 1rem; }
.pecet__obrazek img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.pecet__nazev { font-family: var(--font-nadpis, Newsreader, Georgia, serif); font-weight: 500; font-size: 1.125rem; margin: 0 0 0.25rem; }
.pecet__nazev a { color: inherit; text-decoration: none; }
.pecet__nazev a:hover, .pecet__nazev a:focus-visible { color: var(--c-akce, hsl(345 62% 36%)); }
.pecet__cena { font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.pecet__cena span { font-size: 0.75rem; font-weight: 400; color: var(--fg-muted, hsl(334 12% 42%)); }

.pecet__akce { display: grid; gap: 0.5rem; }
.pecet__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; }
.pecet__pridat:hover, .pecet__pridat:focus-visible { background: var(--c-akce-tmava, hsl(345 62% 30%)); }
.pecet__pocitadlo { display: flex; align-items: center; height: var(--v-ovladani, 2.75rem); border-radius: var(--r-ovladani, 10px); background: hsl(340 24% 93%); }
.pecet__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; }
.pecet__krok:hover, .pecet__krok:focus-visible { background: hsl(340 30% 87%); }
.pecet__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; }
.pecet__jednotka { font-size: 0.6875rem; color: var(--fg-muted, hsl(334 12% 42%)); padding-right: 0.75rem; }

.pecet__davky { display: flex; gap: 0.3125rem; margin-top: 0.5rem; }
.pecet__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; }
.pecet__davka:hover, .pecet__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%); }

@media (max-width: 900px) {
  .pecet { padding: 3rem 1.5rem; }
  .pecet__obal { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
  .pecet { padding: 2.5rem 1rem; }
  .pecet__obal { gap: 1.5rem; }
  .pecet__kus { padding: 1.25rem; }
}
@media (max-width: 400px) { .pecet__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. */
.pecet__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; }
.pecet__dopocet:hover, .pecet__dopocet:focus-visible { color: var(--c-bordo, hsl(334 45% 26%)); }
.pecet__dopocet:disabled { opacity: 0.5; cursor: wait; }
.pecet__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; }
.pecet__dopocethlaska:empty { display: none; }