/* ===================================================================

   DUDKOVE DORTY — sladký prezentačný web

   =================================================================== */



*, *::before, *::after { box-sizing: border-box; }



:root {

  --red: #B91C1C;

  --red-dark: #991616;

  --coral: #E55050;

  --pink: #FDDEDE;

  --pink-deep: #F4A0A0;

  --cream: #FFF5F0;

  --cream-light: #FFFBF7;

  --ink: #1C1917;

  --muted: #78716C;

  --yellow: #F5C563;

  --mint: #9FD8C5;

  --blue: #8FB8E8;

  --shadow-soft: 0 18px 40px -16px rgba(185, 28, 28, 0.22);

  --shadow-card: 0 12px 30px -12px rgba(28, 25, 23, 0.18);

}



html { scroll-behavior: smooth; }



body {

  background-color: var(--cream);

  color: var(--ink);

  font-family: 'DM Sans', system-ui, sans-serif;

  line-height: 1.7;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



img { max-width: 100%; height: auto; display: block; }



h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }



/* jemný posypkový bod pattern, použiteľný cez utilitu */

.sprinkle-bg {

  background-image:

    radial-gradient(circle, rgba(244,160,160,0.35) 2px, transparent 2.5px),

    radial-gradient(circle, rgba(245,197,99,0.30) 2px, transparent 2.5px);

  background-size: 38px 38px, 38px 38px;

  background-position: 0 0, 19px 19px;

}



/* ===================== HEADER ===================== */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: rgba(255, 251, 247, 0.92);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid #F6E2DC;

  padding: 0 2rem;

}



.site-header__inner {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 80px;

}



.site-logo img { height: 50px; width: auto; }



.brand { display: inline-flex; align-items: baseline; text-decoration: none; }

.brand-name {

  font-family: 'DM Sans', system-ui, sans-serif;

  font-size: 1.5rem;

  font-weight: 500;

  color: var(--ink);

  letter-spacing: 0.04em;

  white-space: nowrap;

  line-height: 1;

}

.brand-dot { color: var(--red); transition: opacity 0.2s; }

.brand:hover .brand-dot { opacity: 0.55; }

@media (max-width: 680px) { .brand-name { font-size: 1.3rem; } }



.site-nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  gap: 2.25rem;

  align-items: center;

}



.site-nav a {

  font-size: 0.9375rem;

  font-weight: 500;

  color: var(--ink);

  text-decoration: none;

  letter-spacing: 0.01em;

  position: relative;

  padding: 4px 0;

  transition: color 0.2s;

}



.site-nav a::after {

  content: '';

  position: absolute;

  left: 0; bottom: -2px;

  width: 0; height: 2px;

  background: var(--red);

  border-radius: 2px;

  transition: width 0.25s ease;

}



.site-nav a:hover { color: var(--red); }

.site-nav a:hover::after { width: 100%; }



.nav-cta {

  background: var(--red);

  color: #fff !important;

  padding: 0.6rem 1.4rem !important;

  border-radius: 100px;

  box-shadow: 0 8px 18px -8px rgba(185,28,28,0.6);

  transition: transform 0.18s, box-shadow 0.18s !important;

}

.nav-cta::after { display: none; }

.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(185,28,28,0.7); }



/* ===================== HERO ===================== */

.hero {

  position: relative;

  padding: 4rem 2rem 8rem;

  background:

    radial-gradient(ellipse 80% 60% at 70% 0%, #FFE8E0 0%, transparent 60%),

    var(--cream);

  overflow: hidden;

}



.hero__inner {

  max-width: 1140px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: center;

  position: relative;

  z-index: 2;

}



.hero__badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #fff;

  border: 1px solid #F6D5CE;

  color: var(--red);

  font-size: 0.8125rem;

  font-weight: 500;

  letter-spacing: 0.04em;

  padding: 0.5rem 1rem;

  border-radius: 100px;

  box-shadow: var(--shadow-card);

  margin-bottom: 1.5rem;

}

.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }



.hero h1 {

  font-size: clamp(2.6rem, 5.5vw, 4.25rem);

  font-weight: 700;

  line-height: 1.08;

  margin: 0 0 1.25rem;

  color: var(--ink);

}

.hero h1 em {

  font-style: italic;

  color: var(--red);

  position: relative;

}

.hero h1 em::after {

  content: '';

  position: absolute;

  left: 0; bottom: 4px;

  width: 100%; height: 10px;

  background: var(--pink);

  border-radius: 4px;

  z-index: -1;

  opacity: 0.7;

}



.hero p {

  font-size: 1.125rem;

  color: #57534E;

  max-width: 440px;

  margin: 0 0 2rem;

}



.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }



.btn-primary {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: var(--red);

  color: #fff;

  font-family: 'DM Sans', sans-serif;

  font-size: 0.9375rem;

  font-weight: 500;

  letter-spacing: 0.03em;

  text-decoration: none;

  padding: 0.95rem 2rem;

  border-radius: 100px;

  border: none;

  cursor: pointer;

  box-shadow: 0 12px 26px -10px rgba(185,28,28,0.65);

  transition: transform 0.18s, box-shadow 0.18s, background 0.2s;

}

.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(185,28,28,0.7); }



.btn-ghost {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--ink);

  font-weight: 500;

  font-size: 0.9375rem;

  text-decoration: none;

  padding: 0.95rem 0.5rem;

  transition: color 0.2s, gap 0.2s;

}

.btn-ghost:hover { color: var(--red); gap: 12px; }



/* hero ilustrácia + plávajúce dekorácie */

.hero__art {

  position: relative;

  display: flex;

  justify-content: center;

}

.hero__art img.cake { width: min(94%, 420px); filter: drop-shadow(0 30px 40px rgba(185,28,28,0.18)); }

.hero__art img.photo {

  width: min(92%, 440px);

  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 32px;

  border: 7px solid #fff;

  box-shadow: 0 28px 56px -18px rgba(185,28,28,0.35);

  transform: rotate(-2deg);

}



.float { position: absolute; animation: floaty 4.5s ease-in-out infinite; }

.float--cherry { top: 6%; right: 8%; width: 56px; animation-delay: 0s; }

.float--heart { bottom: 16%; left: 2%; width: 44px; animation-delay: 1.2s; }

.float--star { top: 30%; left: 0%; width: 38px; animation-delay: 0.6s; }

.float--sprinkle { bottom: 6%; right: 12%; width: 50px; animation-delay: 1.8s; }



@keyframes floaty {

  0%, 100% { transform: translateY(0) rotate(0deg); }

  50% { transform: translateY(-14px) rotate(6deg); }

}



/* polevový scalloped predel na spodku hera */

.scallop {

  position: absolute;

  left: 0; right: 0; bottom: -1px;

  height: 56px;

  z-index: 1;

}



/* ===================== SEKCIE ===================== */

.section { padding: 5.5rem 2rem; position: relative; }

.section__inner { max-width: 1140px; margin: 0 auto; }



.section--cream-light { background: var(--cream-light); }

.section--pink { background: var(--pink); }

.section--dark { background: var(--ink); color: #fff; }



.section__head { text-align: center; max-width: 600px; margin: 0 auto 3rem; }

.section__head--left { text-align: left; margin-left: 0; }



.section__label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-family: 'DM Sans', sans-serif;

  font-size: 0.75rem;

  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--red);

  margin: 0 0 0.85rem;

}

.section__label::before, .section__label::after {

  content: '';

  width: 22px; height: 2px;

  background: var(--pink-deep);

  border-radius: 2px;

}

.section__head--left .section__label::before { display: none; }

.section--dark .section__label { color: var(--pink-deep); }



.section__title {

  font-size: clamp(1.9rem, 4vw, 3rem);

  font-weight: 700;

  line-height: 1.15;

  margin: 0 0 0.75rem;

}

.section__sub { font-size: 1.0625rem; color: var(--muted); margin: 0; }

.section--dark .section__sub { color: #A8A29E; }



/* ===================== KATEGÓRIE ===================== */

.categories-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 1.75rem;

}



.category-card {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  aspect-ratio: 4/3;

  text-decoration: none;

  display: block;

  box-shadow: var(--shadow-card);

  border: 3px solid #fff;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.category-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft); }

.category-card img { width: 100%; height: 100%; object-fit: cover; }



.category-card__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(28,25,23,0.78) 0%, rgba(28,25,23,0.15) 55%, transparent 100%);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 1.75rem;

}

.category-card__title {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 1.85rem;

  font-weight: 700;

  color: #fff;

  margin: 0 0 0.2rem;

}

.category-card__sub { font-size: 0.9rem; color: var(--pink); margin: 0; display: flex; align-items: center; gap: 6px; }

.category-card__arrow {

  position: absolute;

  top: 1.5rem; right: 1.5rem;

  width: 42px; height: 42px;

  background: #fff;

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-size: 1.1rem; color: var(--red);

  transform: translateX(8px); opacity: 0;

  transition: transform 0.3s, opacity 0.3s;

}

.category-card:hover .category-card__arrow { transform: translateX(0); opacity: 1; }



/* ===================== GALÉRIA ===================== */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 1.25rem;

}

.gallery-item {

  aspect-ratio: 1;

  overflow: hidden;

  border-radius: 20px;

  cursor: pointer;

  position: relative;

  box-shadow: var(--shadow-card);

  border: 3px solid #fff;

  transition: transform 0.28s ease, box-shadow 0.28s ease;

  padding: 0;

  background: none;

  width: 100%;

  display: block;

  font: inherit;

  -webkit-appearance: none;

  appearance: none;

}

.gallery-item.is-hidden { display: none; }

.gallery-item:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-soft); }

.gallery-more-wrap { text-align: center; margin-top: 2.75rem; }

.gallery-more { display: inline-flex; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-item::after {

  content: '\2197';

  position: absolute;

  top: 12px; right: 12px;

  width: 34px; height: 34px;

  background: rgba(255,255,255,0.92);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  color: var(--red); font-size: 1rem;

  opacity: 0; transform: scale(0.6);

  transition: opacity 0.25s, transform 0.25s;

}

.gallery-item:hover::after { opacity: 1; transform: scale(1); }



/* Lightbox */

.lightbox {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(28,25,23,0.94);

  z-index: 1000;

  align-items: center;

  justify-content: center;

  padding: 2rem;

}

.lightbox.open { display: flex; }

.lightbox img { max-width: 86vw; max-height: 86vh; border-radius: 16px; border: 5px solid #fff; }

.lightbox-close {

  position: absolute;

  top: 1.5rem; right: 1.5rem;

  width: 48px; height: 48px;

  background: #fff;

  border: none; border-radius: 50%;

  color: var(--ink); font-size: 1.5rem;

  cursor: pointer; line-height: 1;

  display: flex; align-items: center; justify-content: center;

  z-index: 2;

  transition: transform 0.15s;

}

.lightbox-close:hover { transform: scale(1.08); }

.lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 54px; height: 54px;

  background: #fff;

  border: none; border-radius: 50%;

  color: var(--red); font-size: 1.8rem;

  cursor: pointer; line-height: 1;

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);

  transition: transform 0.15s, background 0.2s;

  z-index: 2;

}

.lightbox-nav:hover { transform: translateY(-50%) scale(1.1); background: var(--cream); }

.lightbox-prev { left: 2vw; }

.lightbox-next { right: 2vw; }

@media (max-width: 600px) {

  .lightbox-nav { width: 44px; height: 44px; font-size: 1.4rem; }

  .lightbox-prev { left: 0.5rem; }

  .lightbox-next { right: 0.5rem; }

}



/* ===================== O NÁS ===================== */

.about-grid {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 4rem;

  align-items: center;

}

.about-art { position: relative; }

.about-art img { width: 100%; max-width: 360px; margin: 0 auto; border-radius: 24px; border: 6px solid #fff; box-shadow: 0 26px 44px -18px rgba(185,28,28,0.3); }

.about-text p { font-size: 1.0625rem; line-height: 1.85; color: #44403C; margin: 0 0 1rem; }

.about-quote {

  font-family: 'Playfair Display', Georgia, serif;

  font-style: italic;

  font-size: 1.3rem;

  color: var(--red);

  line-height: 1.5;

  margin: 1.75rem 0 0;

  padding-left: 1.25rem;

  border-left: 3px solid var(--pink-deep);

}

.about-quote span { display: block; font-style: normal; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; color: var(--muted); margin-top: 0.5rem; }



/* štatistiky / dôvera */

.about-stats { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }

.about-stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--red); line-height: 1; }

.about-stat span { font-size: 0.85rem; color: var(--muted); }



/* ===================== KONTAKT ===================== */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: start;

}

.contact-info p { font-size: 1.0625rem; color: #A8A29E; margin: 0 0 0.5rem; }

.contact-phone {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #fff !important;

  font-size: 1.4rem;

  font-weight: 500;

  text-decoration: none;

  font-family: 'Playfair Display', serif;

  margin-top: 0.5rem;

}

.contact-phone .ic {

  width: 44px; height: 44px;

  background: var(--red);

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-size: 1.1rem;

}



.contact-card {

  position: relative;

  background: #fff;

  border-radius: 28px;

  padding: 2.5rem 2.25rem;

  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4);

}

.contact-card::before {

  content: '';

  position: absolute;

  top: -22px; right: 26px;

  width: 56px; height: 56px;

  background: url('../images/deco-cherry.svg') center/contain no-repeat;

  transform: rotate(8deg);

  filter: drop-shadow(0 6px 10px rgba(185,28,28,0.2));

}

.contact-form .form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}

.contact-form .form-field { display: flex; flex-direction: column; }

.contact-form label {

  display: block;

  font-family: 'DM Sans', sans-serif;

  font-size: 0.8125rem;

  font-weight: 500;

  color: var(--ink);

  margin: 0 0 7px;

}

.contact-form input,

.contact-form textarea {

  display: block;

  width: 100%;

  box-sizing: border-box;

  padding: 0.85rem 1.05rem;

  border: 1.5px solid #EFD9D4;

  border-radius: 14px;

  background: var(--cream-light);

  font-family: 'DM Sans', sans-serif;

  font-size: 1rem;

  line-height: 1.4;

  color: var(--ink);

  margin: 0 0 1.1rem;

  outline: none;

  -webkit-appearance: none;

  appearance: none;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.contact-form input::placeholder,

.contact-form textarea::placeholder { color: #B8A8A2; font-family: 'DM Sans', sans-serif; }

.contact-form input:focus,

.contact-form textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(229,80,80,0.12); }

.contact-form textarea { min-height: 130px; resize: vertical; }

.contact-form button { width: 100%; justify-content: center; margin-top: 0.25rem; }

.form-note { font-size: 0.8rem; color: var(--muted); margin: 0.85rem 0 0; text-align: center; }

@media (max-width: 480px) {

  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }

}

.form-success {

  background: #EAF7F0; color: #0F6E56;

  border: 1px solid #B8E6D2;

  padding: 1rem 1.25rem; border-radius: 14px; margin-bottom: 1.25rem;

  font-size: 0.95rem;

}

.form-error {

  background: #FEF2F2; color: #991B1B;

  border: 1px solid #FECACA;

  padding: 1rem 1.25rem; border-radius: 14px; margin-bottom: 1.25rem;

  font-size: 0.95rem;

}



/* ===================== FOOTER ===================== */

.site-footer {

  background: var(--ink);

  color: #A8A29E;

  padding: 3rem 2rem 2.5rem;

  text-align: center;

  border-top: 1px solid #2A2522;

}

.site-footer__logo { font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.04em; color: #fff; margin: 0 0 0.5rem; }

.site-footer__logo .brand-dot { color: var(--coral); }

.site-footer a { color: var(--pink); text-decoration: none; }

.site-footer__row { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; font-size: 0.95rem; }

.site-footer__copy { font-size: 0.8125rem; color: #57534E; margin-top: 1rem; }



/* ===================== RESPONSIVE ===================== */

@media (max-width: 880px) {

  .hero__inner, .about-grid, .contact-grid { grid-template-columns: 1fr; }

  .hero { padding: 2.5rem 1.5rem 6rem; text-align: center; }

  .hero p { margin-left: auto; margin-right: auto; }

  .hero__actions { justify-content: center; }

  .hero__art { order: -1; margin-bottom: 1rem; }

  .hero__art img.cake { width: 260px; }

  .about-art { max-width: 300px; margin: 0 auto; }

}

@media (max-width: 680px) {

  .site-header { padding: 0 1rem; height: 68px; }

  .site-header__inner { height: 68px; }

  .site-nav { display: none; }

  .section { padding: 3.5rem 1.25rem; }

  .about-stats { justify-content: center; gap: 1.75rem; }

}



/* ===================== VÁNOČNÍ CUKROVÍ ===================== */

.vanoce-lead { max-width: 760px; margin: 0 auto 2.75rem; text-align: center; }

.vanoce-lead p { font-size: 1.0625rem; color: var(--ink); margin: 0 0 1rem; }

.vanoce-lead__note {

  display: inline-flex; align-items: center; gap: 0.5rem;

  font-size: 0.95rem; color: var(--red); font-weight: 500;

}

.vanoce-lead__note .dot {

  width: 8px; height: 8px; border-radius: 50%;

  background: var(--red); display: inline-block; flex: none;

}

.vanoce-photo { margin: 0 0 4rem; }

.vanoce-photo img {

  width: 100%; border-radius: 22px;

  box-shadow: var(--shadow-card);

}

.vanoce-photo figcaption {

  text-align: center; font-size: 0.85rem; color: var(--muted);

  margin-top: 0.9rem; letter-spacing: 0.02em;

}



.vanoce-druhy {

  list-style: none; margin: 0 0 4rem; padding: 0;

  display: grid; grid-template-columns: 1fr 1fr;

  column-gap: 3rem;

}

.druh {

  display: flex; align-items: baseline; gap: 1rem;

  padding: 1.1rem 0.8rem;

  margin: 0 -0.8rem;

  border-top: 1px solid #F1DED7;

}

.druh__num {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 0.95rem; font-weight: 700;

  color: var(--coral); flex: none; min-width: 1.6rem;

  letter-spacing: 0.04em;

}

.druh__body { display: flex; flex-direction: column; gap: 0.15rem; }

.druh__name {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 1.2rem; color: var(--ink); line-height: 1.25;

}

.druh__desc { font-size: 0.925rem; color: var(--muted); line-height: 1.5; }



.vanoce-order { max-width: 960px; margin: 0 auto; }

.vanoce-pricing {

  display: grid; grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem; margin-bottom: 2.5rem;

}

.price {

  background: #fff; border: 1px solid #F1DED7; border-radius: 18px;

  padding: 1.75rem 1.5rem; text-align: center;

  display: flex; flex-direction: column; gap: 0.4rem;

}

.price__label {

  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;

  color: var(--muted); font-weight: 600;

}

.price__value {

  font-family: 'Playfair Display', Georgia, serif;

  font-size: 1.9rem; color: var(--red); line-height: 1;

}

.price__note { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }



.vanoce-podminky {

  list-style: none; margin: 0 0 2.5rem; padding: 0;

  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;

}

.vanoce-podminky li {

  font-size: 0.925rem; color: var(--muted); line-height: 1.55;

  padding-left: 1.1rem; position: relative;

}

.vanoce-podminky li::before {

  content: ''; position: absolute; left: 0; top: 0.55em;

  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);

}

.vanoce-podminky strong { color: var(--ink); font-weight: 600; }

.vanoce-cta { text-align: center; }



@media (max-width: 880px) {

  .vanoce-druhy { grid-template-columns: 1fr; column-gap: 0; margin-bottom: 3rem; }

  .vanoce-pricing { grid-template-columns: 1fr; }

  .vanoce-podminky { grid-template-columns: 1fr; gap: 0.85rem; }

}



/* ----- interaktívna mapa fotky ----- */

.vanoce-photo__frame { position: relative; line-height: 0; }

.vp-marker {

  position: absolute; transform: translate(-50%, -50%);

  width: 30px; height: 30px; border-radius: 50%; padding: 0;

  background: rgba(185, 28, 28, 0.9); color: #fff; border: 2px solid #fff;

  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;

  font-size: 0.82rem; line-height: 1;

  display: grid; place-items: center; cursor: pointer;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);

  transition: transform .16s ease, background .16s ease;

  z-index: 2;

}

.vp-marker:hover, .vp-marker:focus-visible, .vp-marker.is-active {

  background: var(--red); transform: translate(-50%, -50%) scale(1.3);

  outline: none; z-index: 3;

}

.druh { cursor: pointer; transition: background .16s ease; }

.druh.is-active { background: #FBE9E3; border-radius: 12px; }

.druh.is-active .druh__num,

.druh.is-active .druh__name { color: var(--red); }

.druh:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

@media (max-width: 560px) {

  .vp-marker { width: 23px; height: 23px; font-size: 0.7rem; border-width: 1.5px; }

}



/* ----- trvalý výber (klik) s čerešňou ----- */

.vp-marker.is-selected {

  background: var(--coral);

  transform: translate(-50%, -50%) scale(1.35);

  z-index: 4;

  box-shadow: 0 0 0 4px rgba(229, 80, 80, 0.35), 0 3px 12px rgba(0, 0, 0, 0.4);

  animation: vpPulse 1.7s ease-in-out infinite;

}

@keyframes vpPulse {

  0%, 100% { box-shadow: 0 0 0 4px rgba(229, 80, 80, 0.35), 0 3px 12px rgba(0, 0, 0, 0.4); }

  50%      { box-shadow: 0 0 0 10px rgba(229, 80, 80, 0), 0 3px 12px rgba(0, 0, 0, 0.4); }

}

.druh.is-selected {

  background: #FBE9E3;

  border-radius: 12px;

  box-shadow: inset 4px 0 0 var(--coral);

  padding-right: 2.4rem;

}

.druh.is-selected .druh__num,

.druh.is-selected .druh__name { color: var(--red); }

.druh.is-selected::after {

  content: '';

  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);

  width: 24px; height: 24px;

  background: url('../images/deco-cherry.svg') center/contain no-repeat;

  pointer-events: none;

}

.druh { position: relative; }



/* ===================== OBJEDNÁVKA VÁNOČNÍHO CUKROVÍ ===================== */

.section__inner--narrow { max-width: 780px; }

.order-msg { margin-bottom: 1.75rem; }



.btn-lg { padding: 1.15rem 2.6rem; font-size: 1.05rem; }



.order-form {

  background: #fff;

  border-radius: 26px;

  padding: 2.5rem 2.25rem;

  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.28);

}

.order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.order-form .form-field { display: flex; flex-direction: column; }

.order-form label {

  font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 500;

  color: var(--ink); margin: 0 0 7px;

}

.order-optional { color: var(--muted); font-weight: 400; }

.order-form input[type="text"],

.order-form input[type="email"],

.order-form input[type="number"],

.order-form textarea {

  display: block; width: 100%; box-sizing: border-box;

  padding: 0.85rem 1.05rem; border: 1.5px solid #EFD9D4; border-radius: 14px;

  background: var(--cream-light); font-family: 'DM Sans', sans-serif;

  font-size: 1rem; line-height: 1.4; color: var(--ink); margin: 0 0 1.1rem;

  outline: none; -webkit-appearance: none; appearance: none;

  transition: border-color .2s, box-shadow .2s;

}

.order-form input::placeholder, .order-form textarea::placeholder { color: #B8A8A2; }

.order-form input:focus, .order-form textarea:focus {

  border-color: var(--coral); box-shadow: 0 0 0 4px rgba(229, 80, 80, 0.12);

}

.order-form textarea { min-height: 110px; resize: vertical; }



.order-druhy { border: none; padding: 0; margin: 0.3rem 0 1.4rem; }

.order-druhy legend {

  font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 500;

  color: var(--ink); margin-bottom: 0.85rem; padding: 0;

}

.order-druhy__hint { color: var(--muted); font-weight: 400; }

.order-druhy__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1.5rem; }

.order-check {

  display: flex; align-items: center; gap: 0.7rem; cursor: pointer;

  padding: 0.5rem 0.25rem; font-size: 0.95rem; color: var(--ink); user-select: none;

  position: relative;

}

.order-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.order-check__box {

  flex: none; width: 22px; height: 22px; border-radius: 7px;

  border: 1.5px solid #E3BDB4; background: var(--cream-light);

  position: relative; transition: background .15s, border-color .15s;

}

.order-check__box::after {

  content: ''; position: absolute; left: 7px; top: 3px;

  width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;

  transform: rotate(45deg) scale(0); transition: transform .15s; transform-origin: center;

}

.order-check input:checked + .order-check__box { background: var(--red); border-color: var(--red); }

.order-check input:checked + .order-check__box::after { transform: rotate(45deg) scale(1); }

.order-check input:focus-visible + .order-check__box { box-shadow: 0 0 0 4px rgba(229, 80, 80, 0.18); }

.order-check:hover .order-check__box { border-color: var(--coral); }



.order-druhy__count { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--muted); }

.order-druhy__count strong { color: var(--ink); }

.order-druhy__count.is-ok, .order-druhy__count.is-ok strong { color: #0F6E56; }

.order-druhy__count.is-warn, .order-druhy__count.is-warn strong { color: var(--red); }



.order-submit { width: 100%; justify-content: center; margin-top: 0.25rem; }



@media (max-width: 560px) {

  .order-row { grid-template-columns: 1fr; gap: 0; }

  .order-druhy__grid { grid-template-columns: 1fr; gap: 0.1rem; }

  .order-form { padding: 1.85rem 1.4rem; }

}



/* Informacni sekce: domaci vajecnak */

.eggnog { border-top: 1px solid #F6E2DC; scroll-margin-top: 80px; }

.eggnog__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }

.eggnog__photo { margin: 0; }

.eggnog__photo img { width: 100%; height: auto; aspect-ratio: 1; border: 6px solid #fff; border-radius: 24px; box-shadow: var(--shadow-card); }

.eggnog__copy .section__head { margin-bottom: 1.75rem; }

.eggnog__copy .section__title em { color: var(--red); font-weight: inherit; }

.eggnog__note { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; margin: 0; border-radius: 999px; background: var(--pink); color: var(--red-dark); font-size: 0.875rem; font-weight: 500; line-height: 1.5; }

.eggnog__note .dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--red); }

@media (max-width: 720px) {

  .eggnog__grid { grid-template-columns: 1fr; gap: 2rem; }

  .eggnog__copy { text-align: center; }

  .eggnog__copy .section__head { text-align: center; margin-left: auto; margin-right: auto; }

  .eggnog__copy .section__label::before { display: block; }

  .eggnog__photo { max-width: 520px; width: 100%; margin: 0 auto; }

}



/* Ceny a spolecna objednavka */

.eggnog__prices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }

.eggnog__prices .price { padding:1.25rem .75rem; }

.eggnog__prices .price__value { font-size:clamp(1.5rem,3vw,2rem); }

.order-form select { width:100%; padding:1rem; border:1px solid #e7dcd5; border-radius:12px; background:var(--cream-light,#FFFBF7); color:inherit; font:inherit; }

.order-form [hidden] { display:none !important; }

.order-eggnog p { margin-bottom:1rem; }

#eggnog-total { color:var(--red); font-weight:600; }


/* Domaci likery (1.7.0) */
.likery .eggnog__grid { grid-template-columns: 1.15fr 1fr; }
.likery__photo img { aspect-ratio: auto; }
.likery__list { display: grid; gap: 0.75rem; margin: 1.5rem 0; }
.likery__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid #F6E2DC; border-radius: 16px; box-shadow: var(--shadow-card); text-align: left; }
.likery__name { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.likery__name strong { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.likery__name span { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.likery__prices { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.likery__prices span { display: flex; flex-direction: column; align-items: center; min-width: 5.25rem; padding: 0.45rem 0.6rem; border-radius: 12px; background: var(--cream); color: var(--red); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.likery__prices small { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.order-likery { display: grid; gap: 0.25rem; }
.order-likery__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; align-items: end; padding: 0.5rem 0; border-bottom: 1px solid #F6E2DC; }
.order-likery__row:last-child { border-bottom: 0; }
.order-likery__name { font-weight: 600; padding-bottom: 1.15rem; }
.order-likery__row .form-field { margin-bottom: 0.5rem; }
@media (max-width: 900px) {
  .likery .eggnog__grid { grid-template-columns: 1fr; gap: 2rem; }
  .likery__photo { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 520px) {
  .likery__item { flex-direction: column; align-items: stretch; }
  .likery__prices span { flex: 1 1 0; }
  .order-likery__row { grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
  .order-likery__name { grid-column: 1 / -1; padding: 0.5rem 0 0.25rem; }
}

/* Interaktivni plakat s likery (1.7.1) */
.likery .section__head { text-align: center; margin-left: auto; margin-right: auto; }
.likery .section__title em { color: var(--red); font-weight: inherit; }
.likery-poster { max-width: 900px; margin: 0 auto 2rem; }
.likery-poster__frame { position: relative; line-height: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); border: 6px solid #fff; }
.likery-poster__frame img { width: 100%; height: auto; display: block; }
.likery-poster figcaption { margin-top: 1rem; text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.lp-spot { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 18px; cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.lp-spot--tag { border-radius: 10px; }
.lp-spot:hover, .lp-spot:focus-visible, .lp-spot.is-active { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 28px 6px rgba(245, 197, 99, 0.55); outline: none; }
.lp-spot--bottle::after { content: attr(data-label); position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 6px); padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(28, 25, 23, 0.82); color: #fff; font-size: 0.8rem; line-height: 1.2; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.lp-spot--bottle:hover::after, .lp-spot--bottle:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.lp-spot--bottle.is-active::after { opacity: 0; }
.lp-badge { position: absolute; top: 4%; right: 4%; min-width: 2.1rem; padding: 0.3rem 0.45rem; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1.1; box-shadow: 0 4px 12px rgba(185, 28, 28, 0.4); animation: lp-pop .25s ease; }
.lp-badge[hidden] { display: none; }
@keyframes lp-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lp-pop { position: absolute; z-index: 5; width: 240px; padding: 1rem 1rem 0.9rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -12px rgba(28, 25, 23, 0.45); line-height: 1.35; text-align: center; }
.lp-pop[hidden] { display: none; }
.lp-pop__close { position: absolute; top: 0.3rem; right: 0.45rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.2rem; }
.lp-pop__name { display: block; font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--ink); padding: 0 1rem; }
.lp-pop__meta { display: block; margin-top: 0.15rem; color: var(--red); font-weight: 600; }
.lp-pop__step { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 0.75rem; }
.lp-pop__step button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid #F6E2DC; background: var(--cream); color: var(--red); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.lp-pop__step button:hover { background: var(--pink); }
.lp-pop__count { min-width: 1.5rem; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.likery-cart { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.likery-cart__items { margin: 0; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--pink); color: var(--red-dark); font-size: 0.95rem; line-height: 1.5; }
.likery-cart__items strong { margin-left: 0.35rem; }
.likery-cart__items[hidden] { display: none; }
@media (max-width: 720px) {
  .likery-poster__frame { border-width: 4px; border-radius: 16px; }
  .lp-spot--bottle::after { display: none; }
  .lp-badge { min-width: 1.6rem; font-size: 0.7rem; padding: 0.2rem 0.3rem; }
  .likery-cart__items { border-radius: 16px; }
}

/* Zblizka: poskladejte si mix (1.8.0) */
.mix { margin: 0 0 4rem; }
.mix__head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }
.mix__title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 400; line-height: 1.2; margin: 0.6rem 0 0.75rem; color: var(--ink); }
.mix__sub { margin: 0; color: var(--muted); line-height: 1.6; }
.mix__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mix__photo { position: relative; margin: 0; line-height: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); background: var(--cream); }
.mix__photo img { width: 100%; height: auto; display: block; transition: transform .6s ease; }
.mix__photo:hover img { transform: scale(1.02); }
.mx-spot { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 22px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.mx-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(28, 25, 23, 0.3); animation: mx-pulse 2.4s ease-in-out infinite; transition: opacity .2s ease; }
.mx-spot:hover, .mx-spot:focus-visible { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 24px 4px rgba(245, 197, 99, 0.45); outline: none; }
.mx-spot:hover::before, .mx-spot:focus-visible::before, .mx-spot.is-picked::before { opacity: 0; }
.mx-spot.is-picked { box-shadow: 0 0 0 3px var(--red), 0 8px 24px -8px rgba(185, 28, 28, 0.55); background: rgba(185, 28, 28, 0.06); }
.mx-label { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(28, 25, 23, 0.82); color: #fff; font-size: 0.78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease, background-color .2s ease; }
.mx-check { display: none; font-size: 0.8rem; }
.mx-spot:hover .mx-label, .mx-spot:focus-visible .mx-label, .mx-spot.is-picked .mx-label { opacity: 1; transform: translate(-50%, 0); }
.mx-spot.is-picked .mx-label { background: var(--red); }
.mx-spot.is-picked .mx-check { display: inline; }
@keyframes mx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .mx-spot::before { animation: none; } .mix__photo img { transition: none; } }
.mix__bar { display: flex; align-items: center; justify-content: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; text-align: center; }
.mix__summary { margin: 0; color: var(--muted); line-height: 1.5; }
.mix__summary strong { color: var(--red); }
.mix__names { display: block; color: var(--ink); font-size: 0.9rem; }
@media (max-width: 720px) {
  .mix__photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.9rem; margin: 0 -1.25rem; padding: 0.25rem 1.25rem 1rem; scrollbar-width: none; }
  .mix__photos::-webkit-scrollbar { display: none; }
  .mix__photo { flex: 0 0 84%; scroll-snap-align: center; border-radius: 16px; }
  .mx-label { font-size: 0.72rem; }
}

/* Interaktivni plakat cukrovi (1.9.0) */
.cp { max-width: 900px; margin: 0 auto 1.5rem; }
.cp__frame { position: relative; line-height: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); border: 6px solid #fff; }
.cp__frame img { width: 100%; height: auto; display: block; }
.cp figcaption { margin-top: 1rem; text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.cp-spot { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.cp-spot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(28, 25, 23, 0.3); animation: mx-pulse 2.4s ease-in-out infinite; transition: opacity .2s ease; }
.cp-spot:hover, .cp-spot:focus-visible, .cp-spot.is-active { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 24px 4px rgba(245, 197, 99, 0.45); outline: none; }
.cp-spot:hover::before, .cp-spot:focus-visible::before, .cp-spot.is-active::before, .cp-spot.is-picked::before { opacity: 0; }
.cp-spot.is-picked { box-shadow: 0 0 0 3px var(--red); }
.cp-label { position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(28, 25, 23, 0.82); color: #fff; font-size: 0.78rem; font-weight: 500; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.cp-check { display: none; }
.cp-spot:hover .cp-label, .cp-spot:focus-visible .cp-label, .cp-spot.is-picked .cp-label { opacity: 1; transform: translate(-50%, 0); }
.cp-spot.is-picked .cp-label { background: var(--red); }
.cp-spot.is-picked .cp-check { display: inline; }
.cp-spot.is-active .cp-label { opacity: 0; }
.cp-pop { position: absolute; z-index: 6; width: 280px; max-width: calc(100% - 16px); border-radius: 18px; background: #fff; box-shadow: 0 22px 48px -14px rgba(28, 25, 23, 0.5); line-height: 1.45; overflow: hidden; }
.cp-pop[hidden] { display: none; }
.cp-pop__close { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 1; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cp-pop__img { height: 150px; background-repeat: no-repeat; background-color: var(--cream); }
.cp-pop__body { padding: 0.9rem 1.1rem 1.1rem; }
.cp-pop__name { display: block; font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--ink); }
.cp-pop__desc { margin: 0.3rem 0 0.9rem; color: var(--muted); font-size: 0.9rem; }
.cp-pop__add { width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--red); border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cp-pop__add.is-on { background: #fff; color: var(--red); }
.mix__bar { margin-bottom: 4rem; }
@media (max-width: 720px) {
  .cp__frame { border-width: 4px; border-radius: 16px; }
  .cp-label { display: none; }
  .cp-spot.is-picked .cp-label { display: inline-flex; font-size: 0.62rem; padding: 0.2rem 0.45rem; }
  .cp-pop__img { height: 120px; }
}

/* Spodni lista na mobilu (1.9.1) */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  #callnowbutton { display: none !important; }
  .mobile-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 12px 32px -10px rgba(28, 25, 23, 0.35); backdrop-filter: blur(8px); transform: translateY(calc(100% + 24px)); transition: transform .3s ease; }
  .mobile-bar.is-visible { transform: translateY(0); }
  .mobile-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px; border-radius: 999px; font-weight: 600; text-decoration: none; }
  .mobile-bar__call { flex: 0 0 38%; background: var(--cream); color: var(--red); }
  .mobile-bar__order { flex: 1 1 auto; background: var(--red); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: none; } }

/* Souhlas s cookies (1.9.2) */
.dd-consent { position: fixed; left: 16px; bottom: 16px; z-index: 95; max-width: 380px; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -12px rgba(28, 25, 23, 0.4); font-size: 0.88rem; line-height: 1.5; color: var(--ink); }
.dd-consent[hidden] { display: none; }
.dd-consent p { margin: 0 0 0.8rem; }
.dd-consent__btns { display: flex; gap: 0.5rem; justify-content: flex-end; }
.dd-consent__btns button { padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid #e7dcd5; background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.dd-consent__btns .is-primary { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 720px) { .dd-consent { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; } }

/* Telefon: detail druhu a likeru jako spodni panel, aby neprekryval plakat (1.9.4) */
@media (max-width: 720px) {
  .cp-pop, .lp-pop { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; z-index: 1001; box-shadow: 0 -10px 40px -8px rgba(28, 25, 23, 0.45); animation: dd-sheet-up .22s ease-out; }
  .lp-pop { padding-bottom: 1.1rem; }
  .lp-pop__step button { width: 2.8rem; height: 2.8rem; }
  .cp-pop__img { height: 110px; }
}
@keyframes dd-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cp-pop, .lp-pop { animation: none; } }

/* Telefon: kompaktni spodni panel, nahled ve stejnem pomeru jako na PC (280x150), aby vyrez sedel (1.9.5) */
@media (max-width: 720px) {
  .cp-pop { display: grid; grid-template-columns: 46% 1fr; column-gap: 0.85rem; row-gap: 0.6rem; align-items: center; padding: 0.75rem; border-radius: 18px; }
  .cp-pop__img { grid-column: 1; grid-row: 1 / span 2; width: 100%; height: auto !important; aspect-ratio: 280 / 150; border-radius: 12px; }
  .cp-pop__body { display: contents; }
  .cp-pop__name { grid-column: 2; grid-row: 1; align-self: end; padding-right: 1.9rem; font-size: 1.05rem; line-height: 1.2; }
  .cp-pop__add { grid-column: 2; grid-row: 2; align-self: start; padding: 0.55rem 0.6rem; font-size: 0.85rem; }
  .cp-pop__desc { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cp-pop__close { top: 0.4rem; right: 0.4rem; width: 1.8rem; height: 1.8rem; font-size: 1.05rem; background: var(--cream); }
  .lp-pop { padding: 0.75rem 0.9rem; }
  .lp-pop__step { margin-top: 0.5rem; }
}