footer {
  margin-top: 30px !important;
}


#welcome {
  position: relative;
  height: 860px;
  background-image: url("../img/wlcmbcg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

#welcome h1 {
  position: absolute;
  top: 190px;
  z-index: 1; /* Tekst je ispod slike */
  width: 100%;
  text-align: center;
  font-size: 12vw; /* Dinamično skaliranje u odnosu na širinu ekrana */
  font-weight: bold;
  color: var(--thin-white);
  line-height: 0.95; /* Relativna visina koja prati promenu veličine fonta */
  white-space: nowrap; /* Sprečava automatsko prelamanje i forsira uvek tačno dva reda */
}

#welcome .zdravko-img {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%); /* Obezbeđuje tačno centriranje po horizontali */
  height: 700px; /* Slika ide od vrha do dna sekcije */
  z-index: 2; /* Slika je iznad teksta */
  object-fit: contain; /* Pomaže da se zadrži propocija slike */
  object-position: bottom; /* Poravnava sliku sa samim dnom sekcije */
}

#welcome .cutout-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 440px;
  height: 250px;
  background-color: var(--bcg-orange); /* Stavljamo svetlu pozadinu za sada */
  z-index: 3; /* Mora biti iznad slike kako bi se video */
  border-radius: 0px 10px 0px 0px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#welcome .cutout-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Dodajemo razmak između elemenata umesto linije */
}

#welcome .cutout-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  border-radius: 40px; /* Zaobljene ivice u obliku pilule */
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep-navy);
  cursor: pointer;
  transition: all 0.3s ease;
}

#welcome .cutout-list li:first-child {
  background-color: var(--bg-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Blaga senka na dugmetu "Šolje" */
  position: relative;
}

#welcome .cutout-list li:first-child::after {
  content: "";
  position: absolute;
  bottom: -17px; /* Postavlja liniju tačno u sredinu razmaka od 15px */
  left: 50%;
  transform: translateX(-50%); /* Savršeno centrira liniju */
  width: 95%; /* Linija ne ide od ivice do ivice, što daje elegantniji izgled */
  height: 1px;
  background-color: var(--text-black);
  border-radius: 2px;
}

#welcome .cutout-list li:hover {
  color: var(--primary-red);
  transform: translateX(
    5px
  ); /* Blago pomeranje celog elementa udesno na hover */
}

#welcome .cutout-list li:last-child {
  padding-right: 15px; /* Malo manji padding desno da bi centrirao krug strelice */
}

#welcome .cutout-list li:last-child .material-symbols-outlined {
  background-color: var(--bg-white);
  color: var(--primary-red);
  padding: 10px;
  border-radius: 50%; /* Strelice za "Majice" u savršenom krugu */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#welcome .cutout-list li:last-child:hover .material-symbols-outlined {
  background-color: var(--primary-red);
  color: var(--bg-white);
}

#products {
  min-height: 800px;
  height: auto; /* Omogućavamo sekciji da raste u zavisnosti od sadržaja */
  background-color: var(--bcg-orange);
  padding-bottom: 120px;

  /* Ravna sekcija (bez preseka sa welcome sekcijom) */
  margin-top: 0;
  padding-top: 120px;
  position: relative;
  z-index: 2;
}

#products h2 {
  text-align: center;
  padding-top: 50px;
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--deep-navy);
  margin-bottom: 180px; /* Dodajemo razmak između naslova i majica */
}

/* --- KARTICE ZA MAJICE --- */
.tshirts-layout {
  display: flex;
  justify-content: space-evenly; /* Raspoređuje ih na jednakim razmacima po celom ekranu */
  align-items: center;
  width: 100%; /* Omogućavamo da zauzmu punu širinu */
  max-width: 100%;
  padding: 0 20px; /* Mali padding da majice ne udare skroz u ivicu ekrana na manjim rezolucijama */
  margin-inline: auto;
}

.tshirt-card {
  width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/* --- NERAVAN EFEKAT (STAGGER) --- */
.tshirts-layout .tshirt-card:nth-child(2),
.tshirts-layout .tshirt-card:nth-child(4) {
  position: relative;
  top: -70px; /* Stavljamo negativnu marginu da ih podignemo u odnosu na ostale */
}

/* Osiguravamo da klasa za animaciju na skrol ne prepiše tranziciju za hover */
.tshirt-card.scroll-anim {
  transition:
    opacity 0.8s ease-out,
    translate 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    scale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.3s ease;
}

.tshirt-card:hover {
  transform: translateY(-15px) scale(1.05); /* Blago uveličavanje prilikom podizanja */
}

.tshirt-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(
    0 15px 25px rgba(0, 0, 0, 0.2)
  ); /* Lepa senka prati ivice majice */
}

/* --- SRCE (Majice) --- */
.tshirt-heart {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--primary-red);
  font-size: 2rem;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.tshirt-heart:hover {
  transform: scale(1.25);
}

/* --- OPCIJE BOJA --- */
.color-options {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.color-dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--text-black);
  transition:
    transform 0.2s ease,
    outline 0.2s ease;
}

.color-dot.white {
  background-color: var(--bg-white);
}
.color-dot.black {
  background-color: var(--text-black);
}

.color-dot:hover {
  transform: scale(1.2);
}

.color-dot.active {
  outline: 2px solid var(--primary-red);
  outline-offset: 3px;
}

/* --- MODAL ZA IZBOR VELIČINE --- */
.size-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 45, 66, 0.7);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(4px);
}
.size-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.size-modal {
  background: var(--bg-white);
  border-radius: 25px;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.size-modal-overlay.active .size-modal {
  transform: translateY(0) scale(1);
}
.close-size-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--deep-navy);
  cursor: pointer;
  transition: transform 0.3s, color 0.3s;
}
.close-size-modal:hover {
  color: var(--primary-red);
  transform: rotate(90deg);
}
.size-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}
.size-modal-img-wrapper {
  width: 140px;
  height: 140px;
  background: var(--bcg-orange);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
.size-modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}
.size-modal-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--deep-navy);
  margin-bottom: 5px;
}
.size-modal-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-red);
  margin-bottom: 15px;
}
.size-modal-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-black);
  margin-bottom: 15px;
}
.size-modal-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 25px;
}
.size-modal-btn {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  border: 2px solid var(--text-black);
  background: var(--bg-white);
  color: var(--text-black);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.size-modal-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.size-modal-btn.active {
  background: var(--primary-red);
  color: var(--bg-white);
  border-color: var(--primary-red);
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(217, 4, 41, 0.3);
}
.size-modal-confirm {
  width: 100%;
  padding: 15px;
  border-radius: 30px;
  background: var(--medical-mint);
  color: var(--bg-white);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.size-modal-confirm:hover {
  background: var(--accent-orange);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(251, 133, 0, 0.3);
}

/* --- FUNNY CENE --- */
.funny-price-tag {
  margin-top: 15px;
  padding: 10px 25px;
  background-color: var(--primary-red);
  color: var(--bg-white);
  text-align: center;
  border: 3px dashed var(--accent-orange);
  border-radius: 10px 40px 10px 40px; /* Otkačeni, asimetrični oblik (sticker efekat) */
  box-shadow: 0 8px 15px rgba(217, 4, 41, 0.3);
  transition: all 0.3s ease;
}

.tshirt-card:hover .funny-price-tag {
  transform: scale(1.1) rotate(-5deg); /* Na hover cena poludi (malo se nakrivi) */
  border-color: var(--bg-white);
  background-color: var(--accent-orange);
  box-shadow: 0 10px 20px rgba(251, 133, 0, 0.4);
}

.funny-price-tag .price {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.funny-price-tag .funny-text {
  display: block;
  font-family:
    "Dancing Script", cursive; /* Rukopisni font koji već imamo uvezen */
  font-size: 1.6rem;
  color: var(--bcg-orange);
}

.tshirt-card:hover .funny-text {
  color: var(--bg-white);
}

/* --- DUGME ZA KORPU --- */
.add-to-cart {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 25px;
  background-color: var(--medical-mint);
  color: var(--bg-white);
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 76, 121, 0.3);
  transition: all 0.3s ease;
}

.add-to-cart:hover {
  background-color: var(--accent-orange);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(251, 133, 0, 0.4);
}

#drenovRecept {
  height: auto; /* Visina postolja */
  background: var(--deep-navy); /* Preuzeto sa exJoke sekcije */
  overflow: hidden;
  padding-bottom: 120px;

  /* Premium prelazi */
  border-radius: 80px 80px 0 0;
  margin-top: -80px;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.15); /* Malo jača senka na tamnoj pozadini */
  padding-top: 120px;
  position: relative;
  z-index: 3;
}

.recept-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1550px;
  width: 90%;
  margin: 0 auto;
  gap: 50px;
}

.recept-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.recept-content h2 {
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--accent-orange);
  line-height: 1.2;
  margin-bottom: 30px;
}

.recept-content .small-bordered {
  font-size: 2.2rem;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--bg-white);
  border-bottom: 7px solid var(--primary-red);
  padding-bottom: 2px;
  display: inline-block;
  margin-left: 15px;
  transform: translateY(
    -8px
  ); /* Malo podižemo da bi bilo vizuelno centrirano sa velikim slovima */
}

.recept-desc {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--bg-white);
  margin-bottom: 20px;
  max-width: 90%;
}

.recept-desc:last-of-type {
  margin-bottom: 40px;
}

/* --- DUGME ZA RECEPT --- */
.recept-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 35px;
  background-color: var(--primary-red);
  color: var(--bg-white);
  border: none;
  border-radius: 40px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recept-btn:hover {
  background-color: var(--bg-white);
  color: var(--primary-red);
  transform: translateY(-5px) scale(1.05);
}

/* --- DISCLAIMER RECEPTA --- */
.recept-disclaimer {
  margin-top: 25px;
  font-size: 0.8rem;
  color: rgba(253, 255, 252, 0.5);
  line-height: 1.4;
}

.recept-disclaimer span {
  color: rgba(253, 255, 252, 0.7);
  font-weight: 600;
}

/* --- SLIKA RECEPTA --- */
.recept-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#drenovRecept img {
  height: 750px; /* Smanjeno sa 900 na 750 kako bi se bolje uklopilo uz tekst, možeš modifikovati */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.4));
  transition: transform 0.4s ease;
}

/* --- SEKCIJA ZA ŠOLJE --- */
#solje {
  height: auto;
  background-color: var(
    --bg-white
  ); /* Bela pozadina za osveženje i kontrast u odnosu na prethodne sekcije */
  padding-bottom: 120px;

  /* Premium prelazi */
  border-radius: 80px 80px 0 0;
  margin-top: -80px;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.08);
  padding-top: 120px;
  position: relative;
  z-index: 4;
}

#solje h2 {
  text-align: center;
  padding-top: 50px;
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--deep-navy); /* Narandžasti naslov da iskoči na belom */
  margin-bottom: 120px;
}

.mugs-layout {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  margin-inline: auto;
}

.mug-card {
  width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* --- KARTICA ZA ŠOLJU (Dizajn sa pozadinom) --- */
.mug-bg {
  width: 100%;
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Bitno da bi se cena mogla apsolutno pozicionirati unutar njega */
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;

  border-radius: 25px;
}

/* Boje pozadina za svaku šolju redom (providne verzije 12%) */
.mugs-layout .mug-card:nth-child(1) .mug-bg {
  background-color: rgba(
    217,
    4,
    41,
    0.12
  ); /* 1. #d90429 (var(--primary-red)) */
}

.mugs-layout .mug-card:nth-child(2) .mug-bg {
  background-color: rgba(
    251,
    133,
    0,
    0.12
  ); /* 2. #fb8500 (var(--accent-orange)) */
}

.mugs-layout .mug-card:nth-child(3) .mug-bg {
  background-color: rgba(
    0,
    76,
    121,
    0.12
  ); /* 3. #004c79 (var(--medical-mint)) */
}

.mugs-layout .mug-card:nth-child(4) .mug-bg {
  background-color: rgba(43, 45, 66, 0.12); /* 4. #2b2d42 (var(--deep-navy)) */
}

.mug-card:hover .mug-bg {
  transform: translateY(
    -15px
  ); /* Pri prelazu miša ceo kontejner "iskoči" nagore */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.mug-bg img {
  width: 75%; /* Slika malo veća kako bi lepo ispunila novi viši prostor */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.1));
  transition: transform 0.4s ease;
}

.mug-card:hover .mug-bg img {
  transform: scale(1.1) rotate(5deg); /* Unutar okvira, šolja se malo okrene ka korisniku */
}

/* --- CENA (Gore desno) --- */
.mug-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--accent-orange);
  color: var(--bg-white);
  font-size: 1.1rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 12px;
  z-index: 2;
}

/* --- SRCE (Gore levo) --- */
.mug-heart {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--primary-red);
  font-size: 2rem;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.mug-heart:hover {
  transform: scale(1.25);
}

/* --- DASHED DUGME --- */
.mug-btn-dashed {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  padding: 10px 25px;
  background-color: transparent;
  color: var(--deep-navy);
  border: 2px dashed var(--deep-navy); /* Dashed bordura na dugmetu */
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mug-btn-dashed:hover {
  background-color: var(--deep-navy);
  color: var(--bg-white);
  border-style: solid; /* Na hover postaje puno dugme radi boljeg fidbeka */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(43, 45, 66, 0.3);
}

/* --- Boje dugmića koje prate pozadine šolja --- */
.mugs-layout .mug-card:nth-child(1) .mug-btn-dashed {
  color: var(--primary-red);
  border-color: var(--primary-red);
}
.mugs-layout .mug-card:nth-child(1) .mug-btn-dashed:hover,
.mugs-layout .mug-card:nth-child(1) .mug-btn-dashed.in-cart {
  background-color: var(--primary-red) !important;
  color: var(--bg-white) !important;
  border-color: var(--primary-red) !important;
  box-shadow: 0 8px 20px rgba(217, 4, 41, 0.3) !important;
}

.mugs-layout .mug-card:nth-child(2) .mug-btn-dashed {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}
.mugs-layout .mug-card:nth-child(2) .mug-btn-dashed:hover,
.mugs-layout .mug-card:nth-child(2) .mug-btn-dashed.in-cart {
  background-color: var(--accent-orange) !important;
  color: var(--bg-white) !important;
  border-color: var(--accent-orange) !important;
  box-shadow: 0 8px 20px rgba(251, 133, 0, 0.3) !important;
}

.mugs-layout .mug-card:nth-child(3) .mug-btn-dashed {
  color: var(--medical-mint);
  border-color: var(--medical-mint);
}
.mugs-layout .mug-card:nth-child(3) .mug-btn-dashed:hover,
.mugs-layout .mug-card:nth-child(3) .mug-btn-dashed.in-cart {
  background-color: var(--medical-mint) !important;
  color: var(--bg-white) !important;
  border-color: var(--medical-mint) !important;
  box-shadow: 0 8px 20px rgba(0, 76, 121, 0.3) !important;
}

.mugs-layout .mug-card:nth-child(4) .mug-btn-dashed {
  color: var(--deep-navy);
  border-color: var(--deep-navy);
}
.mugs-layout .mug-card:nth-child(4) .mug-btn-dashed:hover,
.mugs-layout .mug-card:nth-child(4) .mug-btn-dashed.in-cart {
  background-color: var(--deep-navy) !important;
  color: var(--bg-white) !important;
  border-color: var(--deep-navy) !important;
  box-shadow: 0 8px 20px rgba(43, 45, 66, 0.3) !important;
}

#exJoke {
  width: 100%;
  background: linear-gradient(
    to top,
    #6d1424,
    #991e32
  ); /* Tamniji gradijent preuzet sa recept sekcije */

  /* Ravna sekcija (bez preseka sa prethodnom) */
  margin-top: 0;
  padding: 120px 20px;
  position: relative;
  z-index: 5;
}

.ex-joke-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: 50px;
  column-gap: 120px;
  max-width: 1500px;
  width: 95%;
  margin: 0 auto;
}

.joke-side {
  display: contents; /* Dozvoljava unutrašnjim elementima da budu direktno na Grid-u */
}

.him-side .image-frame {
  grid-column: 1;
  grid-row: 1; /* Obe slike idu u prvi red */
}

.him-side .text-content {
  grid-column: 1;
  grid-row: 2; /* Oba teksta idu ISPOD slika (drugi red) */
  align-self: start;
}

.her-side .text-content {
  grid-column: 2;
  grid-row: 2; /* Oba teksta idu ISPOD slika (drugi red) */
  align-self: start;
}

.her-side .image-frame {
  grid-column: 2;
  grid-row: 1; /* Obe slike idu u prvi red */
}

/* --- STIL ZA RAMOVE --- */
.image-frame {
  position: relative;
  max-width: 100%;
  width: 100%;
  transition: transform 0.3s ease;
}

.frame-shape {
  padding: 6px; /* Tanji okvir da deluje kao standardan 'border' */
  clip-path: url(#smooth-frame);
  -webkit-clip-path: url(#smooth-frame);
}

.him-side .frame-shape {
  background-color: var(--medical-mint);
  clip-path: url(#smooth-frame-down);
  -webkit-clip-path: url(#smooth-frame-down);
}

.him-side .frame-shape img {
  clip-path: url(#smooth-frame-down);
  -webkit-clip-path: url(#smooth-frame-down);
}

.her-side .frame-shape {
  background-color: var(
    --accent-orange
  ); /* Izmenjeno da se ne utopi u novu crvenu pozadinu */
}
.frame-shape img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  clip-path: url(#smooth-frame);
  -webkit-clip-path: url(#smooth-frame);
}

/* --- TEKST I HAJLAJTOVANJE --- */
.joke-title {
  color: var(--bcg-orange);
  font-size: 3.5rem;
  margin-bottom: 15px;
  text-align: left;
}

.joke-text {
  color: var(--thin-white);
  font-size: 1.25rem;
  line-height: 1.8;
  text-align: left;
  max-width: 100%;
  margin-bottom: 15px; /* Dodaje lep razmak između dva paragrafa */
}

.joke-text .highlight {
  color: var(--bcg-orange);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--bg-white);
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
  transition: color 0.3s ease;
}

.joke-text .highlight:hover {
  color: var(--bg-white);
  text-decoration-color: var(--bcg-orange);
}

/* --- DISCLAIMER --- */
.joke-disclaimer {
  margin-top: 80px;
  padding-top: 15px;
  border-top: 1px solid rgba(253, 255, 252, 0.1); /* Suptilna, jedva vidljiva linija */
  max-width: 1500px; /* Prati širinu celog grid kontejnera */
  width: 95%;
  margin-inline: auto;
  text-align: left;
}

.joke-disclaimer p {
  color: rgba(253, 255, 252, 0.4); /* Jako izbledela bela boja */
  font-size: 0.75rem; /* Sitna slova */
  line-height: 1.4;
}

.joke-disclaimer span {
  color: rgba(
    253,
    255,
    252,
    0.6
  ); /* Malo svetlija od ostatka teksta, ali ne prejaka */
  font-weight: 500;
}

#yt {
  background-color: #ff914d;
  position: relative;

  /* Premium prelazi */
  border-radius: 80px 80px 0 0;
  margin-top: -80px;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 605px;
  z-index: 6;
}
#yt::before {
  z-index: 2;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url("../img/ytBcg.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 910px;
  background-position: bottom center;
  margin-top: 250px;
}

#yt div {
  z-index: 10;
  position: relative;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
}

#yt h6 {
  z-index: 10;
  position: relative;
  font-size: 4.5rem;
  font-weight: bold;
  color: var(--thin-white);
  margin-bottom: 30px;
  line-height: 1.2;
}

#yt h6 span {
  z-index: 10;
  position: relative;
  color: var(--primary-red);
  text-decoration: underline;
  text-decoration-color: var(--bg-white);
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

#yt p {
  z-index: 10;
  position: relative;
  color: var(--thin-white);
  font-size: 1.25rem;
  line-height: 1.8;
  max-width: 85%;
  margin-bottom: 50px;
}

/* --- DUGME ZA YOUTUBE VIDEO --- */
.yt-btn {
  z-index: 10;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 40px;
  background-color: var(--primary-red);
  color: var(--bg-white);
  border: none;
  border-radius: 40px;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(217, 4, 41, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
}

.yt-btn .material-symbols-outlined {
  font-size: 2rem;
}

.yt-btn:hover {
  background-color: var(--bg-white);
  color: var(--primary-red);
}

/* --- SCROLL ANIMATIONS --- */
.scroll-anim {
  opacity: 0;
  transition:
    opacity 0.8s ease-out,
    translate 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    scale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: opacity, translate, scale;
}

/* Uklanjamo bounce (overshoot) efekat samo za sliku Zdravka Drena */
#welcome .zdravko-img.scroll-anim {
  transition:
    opacity 0.8s ease-out,
    translate 0.8s ease-out,
    scale 0.8s ease-out;
}

/* Definišemo početne pozicije na osnovu data-anim atributa */
.scroll-anim[data-anim="up"] {
  translate: 0 100px;
}
.scroll-anim[data-anim="down"] {
  translate: 0 -100px;
}
.scroll-anim[data-anim="left"] {
  translate: -150px 0;
}
.scroll-anim[data-anim="right"] {
  translate: 150px 0;
}
.scroll-anim[data-anim="scale"] {
  scale: 0.5;
  translate: 0 0;
}

.scroll-anim.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* --- RESPONSIVNOST: MAX-WIDTH 1500PX --- */
@media (max-width: 1500px) {
  /* Hero Sekcija */
  #welcome {
    height: 750px;
  }
  #welcome h1 {
    top: 160px;
    font-size: 12.8vw;
  }
  #welcome .zdravko-img {
    height: 600px;
  }
  #welcome .cutout-box {
    width: 380px;
    height: 220px;
    padding: 25px 30px;
  }
  #welcome .cutout-list {
    gap: 12px;
  }
  #welcome .cutout-list li {
    font-size: 1.3rem;
    padding: 12px 20px;
  }
  #welcome .cutout-list li:first-child::after {
    bottom: -13px;
  }

  /* Tipografija */
  #products h2, 
  #solje h2, 
  #drenovRecept .recept-content h2,
  #yt h6 {
    font-size: 4rem;
  }
  #drenovRecept .recept-content .small-bordered {
    font-size: 2rem;
  }
  .joke-title {
    font-size: 3.2rem;
  }
  .recept-desc, 
  .joke-text, 
  #yt p {
    font-size: 1.15rem;
  }
  .funny-price-tag .price {
    font-size: 1.8rem;
  }
  .funny-price-tag .funny-text {
    font-size: 1.4rem;
  }
  
  /* Dugmići */
  .add-to-cart,
  .mug-btn-dashed,
  .recept-btn,
  .yt-btn {
    padding: 12px 30px;
    font-size: 1.1rem;
  }

  /* Slike i kontejneri */
  .recept-content {
    flex: 1.2; /* Tekst sada uzima više mesta (60% prostora) */
  }
  .recept-image-wrapper {
    flex: 0.8; /* Kontejner sa slikom uzima manje mesta (40% prostora) */
  }
  #drenovRecept img {
    height: 500px; /* Smanjena visina slike */
  }
  .mug-bg {
    height: 400px;
  }
  .ex-joke-container {
    column-gap: 80px;
  }
  
  /* Podešavanje margine futera jer se slika u YT sekciji smanjuje/pomera */
  #yt {
    padding-bottom: 500px;
  }

}

/* --- RESPONSIVNOST: MAX-WIDTH 1279PX --- */
@media (max-width: 1279px) {
  /* Hero Sekcija */
  #welcome {
    height: 650px;
  }
  #welcome h1 {
    top: 140px;
    font-size: 12.3vw;
  }
  #welcome .zdravko-img {
    height: 520px;
  }
  #welcome .cutout-box {
    width: 320px;
    height: 190px;
    padding: 20px 25px;
  }
  #welcome .cutout-list {
    gap: 10px;
  }
  #welcome .cutout-list li {
    font-size: 1.15rem;
    padding: 10px 18px;
  }
  #welcome .cutout-list li:first-child::after {
    bottom: -11px;
  }

  /* Tipografija */
  #products h2, 
  #solje h2, 
  #drenovRecept .recept-content h2,
  #yt h6 {
    font-size: 3.3rem;
  }
  #drenovRecept .recept-content .small-bordered {
    font-size: 1.7rem;
  }
  .joke-title {
    font-size: 2.8rem;
  }
  .recept-desc, 
  .joke-text, 
  #yt p {
    font-size: 1.1rem;
  }
  .funny-price-tag .price {
    font-size: 1.6rem;
  }
  .funny-price-tag .funny-text {
    font-size: 1.3rem;
  }

  /* Dugmići */
  .add-to-cart,
  .mug-btn-dashed,
  .recept-btn,
  .yt-btn {
    padding: 10px 25px;
    font-size: 1.05rem;
  }

  /* Layout / Razmaci */
  #products h2 {
    margin-bottom: 120px;
  }
  #solje h2 {
    margin-bottom: 80px;
  }
  .tshirt-card, .mug-card {
    width: 24%;
  }
  #drenovRecept img {
    height: 400px; /* Dodatno proporcionalno smanjenje za sledeću rezoluciju */
  }
  .mug-bg {
    height: 380px;
  }
  .ex-joke-container {
    column-gap: 40px;
  }
  #yt p {
    max-width: 70%; /* Sužavamo tekst radi lakšeg čitanja */
  }
  #yt h6 {
    max-width: 75%; /* Sužavamo naslov kako bi lepše prelomio u dva reda */
  }
  #yt::before {
    margin-top: 220px;
    height: 700px;
  }
  #yt {
    padding-bottom: 440px;
  }
  footer {
    margin-top: 0px !important;
  }
}

/* --- RESPONSIVNOST: MAX-WIDTH 1023PX --- */
@media (max-width: 1023px) {
  /* Hero Sekcija */
  #welcome {
    height: 650px;
  }
  #welcome h1 {
    top: 180px;
    font-size: 12.8vw;
  }
  #welcome .zdravko-img {
    height: 500px;
  }
  #welcome .cutout-box {
    width: 280px;
    height: 160px;
    padding: 15px 20px;
  }
  #welcome .cutout-list {
    gap: 8px;
  }
  #welcome .cutout-list li {
    font-size: 1.05rem;
    padding: 8px 15px;
  }
  #welcome .cutout-list li:last-child .material-symbols-outlined {
    padding: 8px;
    font-size: 1.2rem;
  }
  #welcome .cutout-list li:first-child::after {
    bottom: -9px;
  }

  /* Približavanje sekcije sa majicama Hero sekciji */
  #products {
    padding-top: 60px;
  }
  #products h2 {
    padding-top: 20px;
    margin-bottom: 80px;
  }

  /* Smanjenje preklapajućih sekcija (border-radius i preklapanje) */
  #drenovRecept, #solje, #yt {
    border-radius: 60px 60px 0 0;
    margin-top: -60px;
  }

  /* Recept sekcija - slika kao pozadina sa desne strane */
  .recept-container {
    position: relative;
    display: block; /* Vraćamo u standardni blok da apsolutno pozicioniranje radi idealno */
  }
  .recept-content {
    align-items: flex-start;
    position: relative;
    z-index: 2; /* Osiguravamo da tekst bude iznad slike */
  }
  .recept-content h2,
  .recept-content p {
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.75); /* Senka na tekstu za lakše čitanje preko slike */
  }
  .recept-image-wrapper {
    position: absolute;
    right: -120px; /* Gura sliku da "ispada" iz ekrana sa desne strane */
    top: 50%;
    transform: translateY(-50%); /* Savršeno je centrira po vertikali */
    z-index: 1; /* Slika ide ispod teksta */
    pointer-events: none; /* Sprečava da slika blokira klikove na tekst/dugme */
  }
  #drenovRecept img {
    height: 450px;
    opacity: 0.7; /* Još manja prozirnost za jasniji prikaz slike */
  }

  /* Majice i šolje - uvek 2 u redu sa ograničenom širinom */
  .tshirts-layout, .mugs-layout {
    flex-wrap: wrap;
    gap: 40px 20px;
  }
  .tshirt-card, .mug-card {
    width: 45%;
    max-width: 330px; /* Ograničava širinu kako kartice ne bi bile preglomazne */
  }
  .tshirts-layout .tshirt-card:nth-child(2),
  .tshirts-layout .tshirt-card:nth-child(4) {
    top: 0; /* Resetujemo negativni offset da bi ostali u ravni na 2 reda */
  }

  /* ExJoke - Stepenasti (Staggered) raspored za tablete */
  .ex-joke-container {
    display: flex;
    flex-direction: column;
    gap: 120px;
  }
  .joke-side {
    display: flex;
    flex-direction: column; /* Smeštamo ih u zasebne redove (Slika iznad teksta) */
    align-items: flex-start;
    gap: 0;
  }
  .her-side {
    flex-direction: column-reverse; /* Kod Bivše takođe slika iznad teksta vizuelno */
  }
  .joke-side .image-frame {
    flex: auto;
    width: 65%; /* Slika je uža i u svom je redu */
    align-self: flex-start; /* Deda slika ide LEVO */
    position: relative;
    top: -40px; /* Vizuelno podiže sliku bez povlačenja naslova i teksta naviše */
    z-index: 2; 
  }
  .her-side .image-frame {
    align-self: flex-end; /* Bivša slika ide DESNO */
  }
  .joke-side .text-content {
    flex: auto;
    width: 85%;
    align-self: flex-end; /* Tekst je DESNO i striktno ISPOD dedine slike */
    margin-top: -30px; /* Tekst se blago podvlači odozdo pod sliku za lepši vizuelni 3D prelaz */
    position: relative;
    z-index: 1;
  }
  .her-side .text-content {
    align-self: flex-start; /* Tekst je LEVO i striktno ISPOD Bivšine slike */
  }
  .joke-title, .joke-text {
    text-align: left;
  }
  .her-side .joke-title,
  .her-side .joke-text {
    text-align: left; /* Poravnanje teksta levo da prati njenu stranu */
  }
  #yt div {
    padding-top: 40px;
  }
  #yt::before {
    margin-top: 230px;
    height: 550px;
  }
  #yt {
    padding-bottom: 370px;
    padding-top: 0px;
  }
  #yt h6 {
    width: 100%;
    max-width: 720px;
    font-size: 3rem;
  }
  #yt p {
    max-width: 720px;
    width: 100%;
    font-size: 1.05rem;
  }
  .yt-btn {
    padding: 10px 20px;
    font-size: 1rem;
  }
  footer {
    margin-top: 0px !important;
  }
}

/* --- RESPONSIVNOST: MAX-WIDTH 767PX (MOBILNI UREĐAJI) --- */
@media (max-width: 767px) {
  /* Hero Sekcija */
  #welcome {
    height: 570px;
    background-position: 65% center;
  }
  #welcome h1 {
    top: 200px;
    line-height: 1.12;
    font-size: 12.9vw;
  }
  #welcome .zdravko-img {
    top:132px;
    height: 330px;
  }
  #welcome .cutout-box {
    width: 100%;
    height: auto;
    padding: 30px 20px;
    border-radius: 40px 40px 0 0;
  }
  #welcome .cutout-list {
    flex-direction: row;
    gap: 15px;
  }
  #welcome .cutout-list li {
    flex: 1;
    justify-content: center;
    gap: 8px;
  }
  #welcome .cutout-list li:first-child::after {
    display: none;
  }

  /* Tipografija */
  #products h2, 
  #solje h2, 
  #drenovRecept .recept-content h2,
  #yt h6 {
    font-size: 2.5rem;
  }
  #drenovRecept .recept-content .small-bordered {
    font-size: 1.4rem;
    border-bottom-width: 5px;
    transform: translateY(-4px);
    margin-left: 10px;
  }
  .joke-title {
    font-size: 2.2rem;
  }
  .recept-desc, 
  .joke-text, 
  #yt p {
    font-size: 1.05rem;
  }
  .funny-price-tag {
    padding: 8px 15px;
  }
  .funny-price-tag .price {
    font-size: 1.35rem;
  }
  .funny-price-tag .funny-text {
    font-size: 1.1rem;
  }

  /* Dugmići za mobilni (Full width) */
  .add-to-cart,
  .mug-btn-dashed,
  .recept-btn,
  .yt-btn {
    padding: 10px 15px;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }

  /* Kontejneri i smanjivanje razmaka sekcija */
  #products {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  #products h2 {
    margin-bottom: 60px;
  }
  #drenovRecept, #solje, #yt {
    border-radius: 40px 40px 0 0;
    margin-top: -40px;
  }
  #drenovRecept, #solje {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #exJoke {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 15px;
    padding-right: 15px;
  }
  #yt {
    padding-top: 30px;
    padding-bottom: 60px;
  }

  /* Majice i šolje - 2 u redu na mobilnom */
  .tshirts-layout, .mugs-layout {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 15px;
  }
  .tshirt-card, .mug-card {
    width: 46%;
    max-width: none;
  }
  
  /* Slike i ostalo */
  #drenovRecept img {
    height: 350px;
    max-width: 100%;
  }
  .mug-bg {
    height: 250px;
  }
  .ex-joke-container {
    gap: 50px;
  }
  .joke-side {
    flex-direction: column; /* Vraćamo u kolonu za mobilne */
    align-items: center; /* Vraćamo sve u centar */
    gap: 30px;
  }
  .her-side {
    flex-direction: column-reverse; /* Slika iznad teksta i kod Bivše */
  }
  .joke-side .image-frame,
  .joke-side .text-content {
    width: 100%;
    align-self: center;
    margin-top: 0; /* Poništavamo vertikalno spuštanje */
    margin-left: 0;
    margin-right: 0;
    top: 0; /* Poništavamo vizuelno spuštanje za mobilne */
  }
  .joke-title, .joke-text, .her-side .joke-title, .her-side .joke-text {
    text-align: center; /* Vraćamo na centrirano za mobilne ekrane */
  }
  .joke-disclaimer {
    margin-top: 40px;
  }
  #yt::before {
    display: block;
    content: "\f167";
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    background-image: none;
    position: absolute;
    top: -20px;
    right: -30px;
    font-size: 12rem;
    color: rgba(253, 255, 252, 0.15);
    height: auto;
    margin-top: 0;
    transform: rotate(15deg);
    z-index: 1;
  }
  #yt::after {
    content: "\f167";
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    position: absolute;
    bottom: -30px;
    left: -40px;
    font-size: 16rem;
    color: rgba(253, 255, 252, 0.1);
    z-index: 1;
    transform: rotate(-15deg);
    pointer-events: none;
  }
  #yt {
    background-image: none;
    overflow: hidden;
  }
  #yt div {
    text-align: left;
    align-items: flex-start;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0 20px;
    margin: 0 auto;
  }
  #yt p {
    max-width: 95%;
    margin-bottom: 30px;
  }
  .yt-btn {
    width: 200px;
  }
  footer {
    margin-top: 0px !important;
  }
}

/* --- RESPONSIVNOST: MAX-WIDTH 499PX (MANJI MOBILNI UREĐAJI) --- */
@media (max-width: 499px) {
  /* Hero Sekcija */
  #welcome {
    height: 550px;
  }
  #welcome h1 {
    top: 130px;
    font-size: 12.8vw;
  }
  #welcome .zdravko-img {
    top: 130px;
    height: 300px;
  }
  #welcome .cutout-box {
    padding: 25px 15px;
    border-radius: 25px 25px 0 0;
  }
  #welcome .cutout-list {
    flex-direction: column;
    gap: 10px;
  }
  #welcome .cutout-list li {
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 1rem;
  }
  #welcome .cutout-list li:last-child .material-symbols-outlined {
    padding: 6px;
    font-size: 1.1rem;
  }

  /* Tipografija */
  #products h2, 
  #solje h2, 
  #drenovRecept .recept-content h2,
  #yt h6 {
    font-size: 2.1rem;
  }
  #drenovRecept .recept-content .small-bordered {
    font-size: 1.2rem;
    border-bottom-width: 4px;
    transform: translateY(-2px);
    margin-left: 5px;
  }
  .joke-title {
    font-size: 1.8rem;
  }
  .recept-desc, 
  .joke-text, 
  #yt p {
    font-size: 0.95rem;
  }
  .funny-price-tag {
    padding: 6px 10px;
  }
  .funny-price-tag .price {
    font-size: 1.15rem;
  }
  .funny-price-tag .funny-text {
    font-size: 1rem;
  }
  .color-options {
    gap: 10px;
  }
  .color-dot {
    width: 20px;
    height: 20px;
  }
  
  /* Modal responsivnost za najmanje ekrane */
  .size-modal {
    padding: 20px;
  }
  .size-modal-img-wrapper {
    width: 110px;
    height: 110px;
  }
  .size-modal-title {
    font-size: 1.5rem;
  }
  .size-modal-price {
    font-size: 1.3rem;
  }
  .size-modal-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Dugmići */
  .add-to-cart,
  .mug-btn-dashed,
  .recept-btn,
  .yt-btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .mug-btn-dashed,
  .add-to-cart {
    font-size: 0;
    gap: 0;
  }
  .mug-btn-dashed .material-symbols-outlined,
  .add-to-cart .material-symbols-outlined {
    font-size: 1.1rem;
    margin-right: 6px;
  }
  .mug-btn-dashed::after,
  .add-to-cart::after {
    content: "U korpu";
    font-size: 0.85rem;
  }
  .mug-btn-dashed.in-cart::after,
  .add-to-cart.in-cart::after {
    content: "Ukloni";
  }
  .mug-price {
    font-size: 0.9rem;
    padding: 4px 8px;
  }
  .mug-heart {
    font-size: 1.5rem;
  }

  /* Sekcije idu na punu širinu zbog pozadine */
  section {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* Sadržaj unutar sekcija ide na 97% i centrira se */
  .tshirts-layout,
  .mugs-layout,
  .recept-container,
  .ex-joke-container,
  .joke-side {
    width: 97% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Padding i prelazi sekcija (minimalizovani) */
  #products {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #drenovRecept, #solje, #yt {
    border-radius: 25px 25px 0 0;
    margin-top: -25px;
  }
  #drenovRecept, #solje {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #exJoke {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #products h2 {
    margin-bottom: 50px;
  }

  /* Slike i visine */
  .tshirts-layout, .mugs-layout {
    gap: 20px 10px;
  }
  .tshirt-card, .mug-card {
    width: 47%;
  }
  .recept-image-wrapper {
    right: -70px;
  }
  #drenovRecept img {
    height: 350px;
    opacity: 0.3;
  }
  .mug-bg {
    height: 180px;
  }
  #yt {
    padding-bottom: 50px;
  }
  #yt div {
    width: 97% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
  footer {
    margin-top: 0px !important;
  }
}