.tlacidlo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.66rem 1.3rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 0.3s var(--von), color 0.3s var(--von), border-color 0.3s var(--von);
}

.tlacidlo--plne {
  background: var(--kakao);
  color: var(--krem-svetly);
}

.tlacidlo--plne:hover {
  background: var(--cokolada);
}

.tlacidlo--holy {
  border-color: var(--zlata);
  color: var(--kakao);
}

.tlacidlo--holy:hover {
  background: var(--zlata);
  color: var(--krem-svetly);
}

.sekcia--tma .tlacidlo--holy {
  color: var(--zlata-jemna);
}

.sekcia--tma .tlacidlo--holy:hover {
  background: var(--zlata);
  color: var(--cokolada);
}

.tlacidlo .ikona {
  width: 14px;
  height: 14px;
}

.odkaz {
  color: var(--bobula);
  text-decoration: underline;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--zlata);
}

.sekcia--tma .odkaz,
.pata .odkaz {
  color: var(--zlata-jemna);
}

.tel-tlacidlo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--linka);
  font-size: 0.85rem;
  white-space: nowrap;
  transition: border-color 0.3s var(--von);
}

.tel-tlacidlo:hover {
  border-color: var(--zlata);
}

.tel-tlacidlo__ikona {
  width: 15px;
  height: 15px;
  color: var(--bobula);
}

.podpis {
  margin: 1.5rem 0 0;
  font-family: var(--pismo-ruka);
  font-size: clamp(1.6rem, 2.5vw, 2.05rem);
  font-weight: 600;
  line-height: 1;
  color: var(--kakao);
}

.dovera {
  margin: 2.4rem 0 0;
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  color: var(--ink-mekky);
}

.dovera strong {
  color: var(--kakao);
  font-weight: 500;
}

/* Hero dvojica: veľký portrét a menší s presahom. */
.zhluk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 6 / 7;
}

.zhluk__kus {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-foto);
  box-shadow: var(--tien-foto);
  background: var(--piesok);
}

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

.zhluk__kus--hlavny {
  grid-column: 1 / 6;
  grid-row: 1 / 8;
  z-index: 1;
}

.zhluk__kus--vedlajsi {
  grid-column: 4 / 7;
  grid-row: 5 / 9;
  z-index: 2;
  outline: 9px solid var(--krem);
}

.pecat {
  position: absolute;
  left: -38px;
  bottom: 16%;
  z-index: 3;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--krem-svetly);
  border: 1px solid var(--zlata);
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--kakao);
  box-shadow: var(--tien-jemny);
}

/* Ponuka: štyri dlaždice ako v mockupe, ale s rozhodenou základňou. */
.karty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1.56vw, 1.1rem); /* predloha: 16 px pri 1024 */
  align-items: stretch;
}

.karta {
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--tien-jemny);
  transition: transform 0.4s var(--von), box-shadow 0.4s var(--von);
}

.karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--tien-foto);
}

.karta__foto {
  overflow: hidden;
  background: var(--ruzova-svetla);
  aspect-ratio: 16 / 10;
}

.karta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--von);
}

.karta:hover .karta__foto img {
  transform: scale(1.05);
}

.karta__telo {
  padding: 1.25rem 1.1rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  background: #f9f4ed; /* namerané z predlohy */
}

.karta__ikona {
  width: 23px;
  height: 23px;
  color: var(--zlata);
  margin-bottom: 0.5rem;
}

.karta__nazov {
  font-family: var(--pismo);
  font-weight: 400;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.karta__popis {
  margin: 0;
  color: var(--ink-mekky);
  font-size: 0.82rem;
  line-height: 1.65;
  max-width: 24ch;
}

.karta__cena {
  margin: 0.2rem 0 0;
  color: var(--zlata-tmava, #a9814f);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.karta__cena--caka {
  opacity: 0.55;
}

.karta__telo .tlacidlo {
  margin-top: auto;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Návrh na mieru — štvrtá dlaždica, iná ako ostatné tri. */
.karta--vyzva {
  background: var(--ruzova-svetla);
  border-color: var(--linka);
}

.karta--vyzva .karta__telo {
  background: transparent;
  justify-content: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.karta--vyzva .karta__ikona {
  width: 46px;
  height: 46px;
  margin-bottom: 0.9rem;
}

.karta--vyzva .tlacidlo {
  margin-top: 1.4rem;
}

/* Pás z galérie. */
.pasik {
  display: flex;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: clamp(1.2rem, 3vw, 3rem);
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--zlata) transparent;
}

.pasik__kus {
  flex: 0 0 clamp(180px, 20vw, 260px);
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-foto);
  scroll-snap-align: center;
  background: var(--piesok);
}

.pasik__kus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--von);
}

.pasik__kus:hover img {
  transform: scale(1.04);
}

.mozaika {
  columns: 4;
  column-gap: clamp(0.6rem, 1.1vw, 1rem);
  padding-inline: clamp(0.6rem, 1.1vw, 1rem);
}

.mozaika__kus {
  margin: 0 0 clamp(0.6rem, 1.1vw, 1rem);
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--r-foto);
  background: var(--piesok);
}

.mozaika__kus img {
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--von);
}

.mozaika__kus:hover img {
  transform: scale(1.04);
}

/* Panel: cenník aj „Prečo JuliCake". */
.panel {
  background: var(--ruzova);
  border: 1px solid var(--linka);
  border-radius: var(--r-foto);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--tien-jemny);
  height: 100%;
}

.panel--ruzovy {
  background: linear-gradient(165deg, var(--ruzova), var(--krem-svetly));
}

.panel__foto {
  border-radius: var(--r-foto);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--tien-jemny);
  background: var(--piesok);
}

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

.cennik__riadok {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0;
  font-size: 0.94rem;
}

.cennik__bodky {
  flex: 1;
  border-bottom: 1px dotted var(--linka);
  transform: translateY(-3px);
}

.cennik__cena {
  color: var(--bobula);
  white-space: nowrap;
}

.cennik__pozn {
  margin-top: 1rem;
  font-size: 0.76rem;
  color: var(--ink-mekky);
}

.preco {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.preco__polozka {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mekky);
}

.preco__ikona {
  width: 30px;
  height: 30px;
  color: var(--zlata);
}

.kontakt-riadok {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0;
  font-size: 1.02rem;
  width: fit-content;
  transition: color 0.25s var(--von);
}

.kontakt-riadok:hover {
  color: var(--bobula);
}

.kontakt-riadok__ikona {
  width: 18px;
  height: 18px;
  color: var(--zlata);
  flex-shrink: 0;
}

.kontakt__ig {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.kontakt__ig .ikona {
  width: 32px;
  height: 32px;
  color: var(--zlata);
}

.kontakt__ig-text {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mekky);
}

.kontakt__ig-handle {
  margin: 0 0 0.4rem;
  font-family: var(--pismo-display);
  font-size: 1.4rem;
  color: var(--ink);
}

.socialne {
  display: flex;
  gap: 0.55rem;
}

.socialne--kontakt {
  margin-top: 0.4rem;
}

.socialne__odkaz {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--linka);
  border-radius: 50%;
  color: var(--kakao);
  transition: background 0.3s var(--von), color 0.3s var(--von), border-color 0.3s var(--von);
}

.socialne__odkaz:hover {
  background: var(--kakao);
  border-color: var(--kakao);
  color: var(--krem-svetly);
}

.socialne__ikona {
  width: 17px;
  height: 17px;
}

.slovo__citat {
  margin: 0;
  font-family: var(--pismo-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.28;
  text-wrap: balance;
}

.znamka {
  font-size: 0.84rem;
}

.znamka strong {
  color: var(--zlata-jemna);
  font-weight: 400;
  letter-spacing: 0.16em;
}

.znamka sup {
  font-size: 0.62em;
  letter-spacing: 0;
  vertical-align: super;
  line-height: 0;
}

.text-stranka {
  max-width: var(--uzka);
  margin-inline: auto;
}

.text-stranka h1 {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  margin-bottom: 1.4rem;
}

.text-stranka h2 {
  margin-top: 2.8rem;
  margin-bottom: 0.7rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.text-stranka a {
  color: var(--bobula);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.text-zoznam {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem;
  list-style: disc;
  color: var(--ink-mekky);
}

.text-zoznam li {
  margin-bottom: 0.35rem;
}

.stranka-404 {
  min-height: 68vh;
  display: grid;
  place-content: center;
  text-align: center;
}

@media (max-width: 1100px) {
  .mozaika {
    columns: 3;
  }
}

@media (max-width: 860px) {
  .karty {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .zhluk {
    max-width: 520px;
    margin-inline: auto;
  }

  .pecat {
    left: -18px;
    width: 96px;
    height: 96px;
    font-size: 0.54rem;
  }
}

@media (max-width: 620px) {
  .karty {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .karta__popis {
    max-width: none;
  }

  .mozaika {
    columns: 2;
  }

  .pecat {
    display: none;
  }
}

/* Riadok „Prečo JuliCake?" mimo panela — štyri stĺpce, nie roztiahnuté na celú šírku. */
.preco--pas {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 820px;
  margin-inline: auto;
}

.preco--pas .preco__ikona {
  width: 34px;
  height: 34px;
}

@media (max-width: 620px) {
  .preco--pas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Prečo JuliCake: štyri konkrétne body ---- */
.preco {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.preco__polozka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  color: var(--ink);
}

.preco__ikona {
  width: 32px;
  height: 32px;
  color: var(--zlata);
}

.preco__nadpis {
  font-size: 1.1rem;
  margin: 0;
}

.preco__text {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-mekky);
}

/* ---- Cenník: zoznam, nie tabuľka (mobil) ---- */
.cennik {
  max-width: 780px;
  margin-inline: auto;
}

.cennik__zoznam {
  border-top: 1px solid var(--linka);
}

.cennik__riadok {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--linka);
  font-size: 0.92rem;
}

.cennik__nazov {
  flex: 0 1 auto;
}

.cennik__bodky {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--linka);
  transform: translateY(-4px);
}

.cennik__cena {
  color: var(--bobula);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cennik__cena--caka {
  color: var(--ink-mekky);
  opacity: 0.6;
}

.cennik__upozornenie {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--ruzova);
  border-left: 0;
  border-radius: var(--r-foto);
  font-size: 1rem;
  color: var(--ink);
}

.vcene {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linka);
}

.vcene__nadpis {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kakao);
  margin-bottom: 0.9rem;
}

.vcene__polozka {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--linka);
  font-size: 0.96rem;
}

.vcene__stav {
  color: var(--kakao);
  white-space: nowrap;
}

.vcene__polozka--caka .vcene__stav {
  opacity: 0.5;
}

/* ---- Objednávkový formulár ---- */
.objednavka {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.formular {
  display: grid;
  gap: 1.1rem;
  background: var(--krem-svetly);
  border: 1px solid var(--linka);
  border-radius: var(--r-foto);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--tien-jemny);
}

.pole {
  display: grid;
  gap: 0.4rem;
}

.pole--med {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pole label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kakao);
}

.pole__pozn {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-mekky);
  font-size: 0.8rem;
}

.pole input,
.pole select,
.pole textarea {
  font: inherit;
  font-size: 16px; /* pod 16px iOS pri fokuse zoomuje */
  color: var(--ink);
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: var(--r-foto);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.25s var(--von);
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  border-color: var(--zlata);
  outline: none;
}

.pole textarea {
  resize: vertical;
  min-height: 6rem;
}

.pole-dvojica {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.pole__chyba,
.formular__stav {
  margin: 0;
  font-size: 0.88rem;
  color: var(--bobula);
}

.formular__gdpr {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-mekky);
}

.formular__gdpr a {
  color: var(--bobula);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.formular__odoslat {
  justify-self: start;
}

.formular__odoslat[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.formular__hotovo {
  background: var(--ruzova);
  border-radius: var(--r-foto);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.formular__hotovo h3 {
  margin-bottom: 0.5rem;
}

.formular__hotovo p {
  margin: 0;
  color: var(--ink-mekky);
}

/* ---- Recenzie ---- */
.recenzie {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.recenzie__uvod {
  margin-inline: auto;
}

.recenzie__odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.8rem;
}

/* ---- Mapa ---- */
.mapa {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-foto);
  overflow: hidden;
  border: 1px solid var(--linka);
  line-height: 0;
}

.mapa iframe {
  width: 100%;
  height: clamp(260px, 34vw, 380px);
  border: 0;
}

.hodiny li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.94rem;
}

@media (max-width: 900px) {
  .preco {
    grid-template-columns: repeat(2, 1fr);
  }

  .objednavka {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .preco {
    grid-template-columns: 1fr;
  }

  .pole-dvojica {
    grid-template-columns: 1fr;
  }

  .cennik__riadok {
    flex-wrap: wrap;
  }

  .cennik__bodky {
    display: none;
  }

  .cennik__cena {
    margin-left: auto;
  }
}

/* ---- Hero pečať: kruh pri spodnom pravom rohu fotky, ako v predlohe ---- */
.hero__foto .pecat {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(1.2rem, 3.5vw, 2.6rem);
  left: auto;
  z-index: 3;
  width: clamp(96px, 10vw, 128px);
  height: clamp(96px, 10vw, 128px);
  border-radius: 50%;
  background: var(--krem-svetly);
  border: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--kakao);
  box-shadow: var(--tien-jemny);
}

.pecat__ikona {
  width: 18px;
  height: 18px;
  color: var(--zlata);
}

/* ---- Pásik galérie: šesť dlaždíc + guľaté tlačidlo, ako v predlohe ---- */
.pasik-obal {
  position: relative;
  width: min(100% - 2.5rem, var(--sirka));
  margin-inline: auto;
}

.pasik {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.45rem, 0.98vw, 0.75rem); /* predloha: 10 px pri 1024 */
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

.pasik__kus {
  margin: 0;
  aspect-ratio: 1.06; /* predloha má dlaždice takmer štvorcové */
  overflow: hidden;
  border-radius: 8px;
  background: var(--ruzova-svetla);
}

.pasik__kus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--von);
}

.pasik__kus:hover img {
  transform: scale(1.06);
}

.pasik__sipka {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: var(--kakao);
  color: var(--krem-svetly);
  box-shadow: var(--tien-jemny);
  transition: background 0.3s var(--von);
}

.pasik__sipka:hover {
  background: var(--cokolada);
}

.pasik__sipka .ikona {
  width: 18px;
  height: 18px;
}

/* ---- Trojica: cenník · fotka · Prečo ---- */
.trojica {
  display: grid;
  /* Predloha: 298 / 264 / 335 px pri obale 947 → 1,13 / 1 / 1,27. */
  grid-template-columns: 1.13fr 1fr 1.27fr;
  gap: clamp(1rem, 2.44vw, 1.7rem);
  align-items: stretch;
}

.trojica__foto {
  border-radius: 14px;
  overflow: hidden;
  background: var(--ruzova-svetla);
  box-shadow: var(--tien-jemny);
}

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

.panel {
  border-radius: 14px;
}

.panel__nadpis {
  font-family: var(--pismo-display);
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}

.panel--ruzovy {
  background: var(--ruzova);
  border-color: var(--linka);
}

.panel--ruzovy .panel__nadpis {
  text-align: center;
  font-family: var(--pismo);
  font-size: 1rem;
}

/* Prečo: štyri ikony v mriežke vnútri panela */
.preco--rad {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.2rem);
}

.panel--ruzovy .preco__polozka {
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.panel--ruzovy .preco__nadpis {
  font-family: var(--pismo);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.panel--ruzovy .preco__text {
  font-size: 0.78rem;
  color: var(--ink-mekky);
}

/* ---- Instagram panel z predlohy ---- */
.kontakt__ig {
  background: linear-gradient(150deg, var(--ruzova) 0%, var(--ruzova-svetla) 100%);
  border: 1px solid var(--ruzova-syta);
  border-radius: 14px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;
}

.kontakt-pas__slovo .kontakt-riadok {
  font-size: 1rem;
}

@media (max-width: 1000px) {
  .trojica {
    grid-template-columns: 1fr;
  }

  .trojica__foto {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .pasik {
    grid-template-columns: repeat(3, 1fr);
  }

  .pasik__sipka {
    display: none;
  }
}

.panel--ruzovy .preco__polozka {
  gap: 0.6rem;
}

.panel--ruzovy .preco__nadpis {
  font-size: 0.68rem;
  line-height: 1.45;
  max-width: 12ch;
}

.hero__perex {
  max-width: 30ch;
  color: var(--ink-mekky);
  font-size: 1.02rem;
}

.znamka strong {
  font-weight: 200;
  letter-spacing: 0.3em;
  color: var(--zlata-jemna);
}

.znamka sup {
  color: var(--zlata-jemna);
}


/* Hero nadpis vo verzálkach — presne ako predloha. */
.hero__nadpis {
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(1.75rem, 3.25vw, 2.7rem);
  line-height: 1.08;
}

/* „V cene je / nie je" ako samostatný pás pod trojicou — inak by ľavý panel
   pretiahol celý riadok a pravý by ostal poloprázdny. */
.vcene {
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  background: var(--krem-svetly);
  border: 1px solid var(--linka);
  border-radius: 14px;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: var(--tien-jemny);
  border-top: 1px solid var(--linka);
  padding-top: clamp(1.3rem, 2.6vw, 2rem);
}

.vcene__zoznam {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1rem, 2vw, 2rem);
}

.vcene__polozka {
  border-bottom: 0;
  border-top: 1px dotted var(--linka);
  padding: 0.6rem 0;
}

.trojica__foto {
  align-self: stretch;
  min-height: 100%;
}

@media (max-width: 800px) {
  .vcene__zoznam {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Galéria podľa produktov ---- */
.skupina + .skupina {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--linka);
}

.skupina__hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.6rem;
}

.skupina__hlava .uvod {
  margin: 0.7rem 0 0;
  max-width: 46ch;
}

.skupina__fotky {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
}

.skupina__kus {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ruzova-svetla);
}

.skupina__kus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--von);
}

.skupina__kus:hover img {
  transform: scale(1.05);
}

.skupina__viac {
  margin: 1rem 0 0;
  font-size: 0.92rem;
}

/* ---- Podstránka produktu ---- */
.produkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.produkt__nadpis {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 0;
}

.produkt__text {
  color: var(--ink-mekky);
  max-width: 46ch;
}

.produkt__akcie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.produkt__obal {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ruzova-svetla);
  box-shadow: var(--tien-foto);
}

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

@media (max-width: 900px) {
  .skupina__fotky {
    grid-template-columns: repeat(3, 1fr);
  }

  .produkt {
    grid-template-columns: 1fr;
  }

  .produkt__obal {
    order: -1;
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .skupina__fotky {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Guľaté ikony v hlavičke — Instagram a telefón, ako v predlohe.
   Chýbalo im CSS, takže sa vykreslili bez rozmerov a boli neviditeľné. */
.ikony-hlavicka {
  display: flex;
  gap: 0.6rem;
}

.ikona-tlacidlo {
  width: 42px;
  height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--linka);
  border-radius: 50%;
  color: var(--kakao);
  transition: background 0.3s var(--von), color 0.3s var(--von), border-color 0.3s var(--von);
}

.ikona-tlacidlo:hover {
  background: var(--kakao);
  border-color: var(--kakao);
  color: var(--krem-svetly);
}

.ikona-tlacidlo .ikona {
  width: 18px;
  height: 18px;
}

/* Ťah štetca so srdiečkom pod ním — v predlohe je krátky a hrubší. */
.hero__ozdoba {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.5rem 0 0.65rem;
  width: clamp(230px, 26vw, 320px);
}

.hero__ozdoba .stetec {
  flex: 1;
  width: auto;
  margin: 0;
}

.hero__srdce {
  color: var(--ruzova-syta);
  font-size: 1.1rem;
  line-height: 1;
}

.hero__perex {
  line-height: 1.6;
  max-width: 34ch;
  font-size: 0.86rem;
  color: var(--ink);
  margin-bottom: 0;
}

.hero__foto .pecat {
  width: clamp(100px, 11.5vw, 140px);
  height: clamp(100px, 11.5vw, 140px);
  font-size: 0.62rem;
  gap: 0.15rem;
}

.pecat__srdce {
  color: var(--ruzova-syta);
  font-size: 0.9rem;
  line-height: 1;
}