/** Shopify CDN: Minification failed

Line 166:42 Unexpected "/"
Line 458:1 Expected identifier but found "."

**/
.testclass {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  border: 4px solid;
  border-image: linear-gradient(135deg, #a855f7, #ec4899) 1;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2), 0 0 40px rgba(236, 72, 153, 0.1);
  transition: all 0.3s ease-in-out;
}


.testclass:hover {
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.3), 0 0 50px rgba(236, 72, 153, 0.2);
}

.testclass input[type="radio"] + label.tee-radio-label {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: white !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 9999px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.2s ease !important;
  border: none !important;
  display: inline-block;
  text-align: center;
}



.testclass input[type="radio"] + label.tee-radio-label:hover {
  background: linear-gradient(135deg, #9333ea, #db2777);
  transform: scale(1.05);
}

.testclass .tee-radio {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  outline: none !important;
}

.testclass .tee-field__heading {
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 1rem;
  display: inline-block;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


.testclass .tee-radio.active label.tee-radio-label {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
  transform: scale(1.06);
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

.testclass .tee-radio:first-child label.tee-radio-label {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #a855f7 !important;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  position: relative;
  z-index: 1;
}

/* Belső fehér réteg */
.testclass .tee-radio:first-child label.tee-radio-label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: white;
  border-radius: inherit;
  z-index: -1;
}


label[for="layer-327838-11640446"]::after {
  content: "  ▶️";
}

label[for="layer-327838-11640447"]::after {
  content: "  🎵";
}


label[for="layer-327838-11640449"]::after {
  content: "  🖼️";
}


label[for="layer-327838-11640448"]::after {
  content: "  📁";
}

label[for="layer-327838-11640658"]::after {
  content: " 🙅‍♂️";
}

label[for*="Youtube video lejátszása"]::after {
  content: "  ▶️";
}

label[for*="Spotify dal lejátszása"]::after {
  content: "  🎵";
}

label[for*="Saját kép megjelenítése"]::after {
  content: "  📷";
}

label[for*="Saját fotó / video / hangfájl lejátszása"]::after {
  content: "  📹";
}

label[for*="Nem kérek, köszönöm"]::after {
  content: " 🙅‍♂️";
}

label[for*="Egyéb link megnyitása"]::after {
  content: " ✨";
}


.tee-radio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.tee-radio:has(#layer-327838-11640448) {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 1rem;
}

.tee-radio:has(input[type="radio"]#layer-327838-11640448:checked)::after {
  content: "Saját fájlt a rendelés leadása után fogsz tudni feltölteni, erről külön emailt fogunk küldeni a rendelés beérkezésekor 🙂";
  display: block;
  font-style: italic;
  font-size: 1.5rem;
  color: #6b7280;
  margin-top: 0.5rem;
  white-space: normal;
  padding-left: 0.25rem;
}

.tee-radio:has(#layer-385831-Saját fotó / video / hangfájl lejátszása) {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 1rem;
}

.testclass .tee-row .tee-radio:nth-of-type(4):has(input[type="radio"]:checked)::after {
  content: "A saját fájlt nem kell most azonnal kiválasztanod! Saját fájlt a rendelés leadása után ⚠️ fogsz tudni feltölteni, erről külön emailt fogunk küldeni a rendelés beérkezésekor 🙂";
  display: block;
    font-style: normal !important;
  font-size: 1.3rem !important;
  color: #111827 !important; /* sötétebb szürke */
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  margin-top: 0.75rem !important;
  line-height: 1.5 !important;
}



.testclass .tee-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


.testclass .tee-row .tee-radio:nth-of-type(1) {
  flex: 0 0 100%;
}


.testclass .tee-row .tee-radio:nth-of-type(4) {
  flex: 0 0 100%;
}

.testclass .tee-radio label.tee-radio-label {
  max-width: 100%;
  width: auto;
  white-space: nowrap;
}

.testclass .tee-clipart-checkmark {
  display: none !important;
}

.testclass .tee-radio.active label.tee-radio-label {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
  transform: scale(1.06);
  box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
  border: 2px solid #ffcc00 !important; /* például sárga keret */
}




/**************************************************/

.tee-option-inner .tee-radio {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}


/****************/


.tee-option-inner .tee-radio-label {
  background: transparent;
  color: #be185d; /* karakteres pinkes-piros */
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid #f472b6 !important;; /* kontrasztos, rózsás szegély */
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
}


.tee-option-inner .tee-radio-label:hover {
  background: #fce7f3;
  color: #9d174d;
  border-color: #ec4899;
}


.tee-option-inner .tee-radio.active .tee-radio-label {
  background: #fbcfe8;
  border-color: #db2777;
  color: #7a143f;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.25);
}



.testclass .tee-field__heading span:first-child {
  font-size: 1.8rem; /* nagyobb méret */
  color: #111827 !important;    /* sötét szín */
  font-weight: 800;
  text-transform: none;
  margin-right: 0;
  display: inline;   /* fontos! ne bontsa meg a sort */
}


.testclass .tee-field__heading::after {
  content: "Okozz extra meglepetést!💖 A falikép most már saját tartalmat is le tud játszani okostelefonon, ha szeretnéd! (pl. videó, saját hangfájl)";
  display: block;
  font-size: 1.2rem;
  color: #ec4899;
  font-weight: 500;
  margin-top: 0.5rem;
  line-height: 1.5;
}

.testclass .tee-field__heading span:first-child {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background-clip: initial !important;
  text-fill-color: initial !important;
  color: #111827 !important;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: none;
  margin-right: 0.5rem;
}

.testclass .tee-field__heading .tee-asterisk {
  margin-left:0.1rem;
}

/*30x40*/

.tee-option-inner label[title="nagy - 30x40 cm"]::after {
  content: "❤";
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  background: linear-gradient(135deg, #9333ea, #ec4899); 
  color: white;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
  font-weight: bold;
}

.tee-option-inner label[title="nagy - 30x40 cm"]:hover::before {
  content: "Legnépszerűbb méret!";
  position: absolute;
  top: -2rem;
  right: 0;
  background: #111827;
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* tooltip */


.testclass .tee-field__heading span:first-child {
  position: relative;
  display: inline-block;
}

.testclass .tee-field__heading {
  position: relative; 
}


.testclass .tee-field__heading span:first-child::after {
  content: "?";
  position: absolute;
  top: 0.1rem;
  right: -2.4rem;
  background: linear-gradient(135deg, #9333ea, #ec4899);
  color: white; 
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 5;
  font-weight: bold;
  cursor: help;
}

.testclass .tee-field__heading span:first-child::before {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: 2rem;
  right: -5rem;
  transform: none;
  width: 320px;
  max-width: 90vw;
  padding: 200px 1rem 1rem;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.6) 100%),
    url('/cdn/shop/files/okosposzter_emlekposzter_1_8.png?v=1743595512');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-color: white;
  color: white;
  font-size: 1.2rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  border-radius: 1rem;
  box-sizing: border-box;
  white-space: normal;
}



.testclass .tee-field__heading span:first-child:hover::before {
  content: "✨Ezt a funkciót aktiválva, amikor a faliképhez érintesz egy (NFC-képes) okostelefont, az általad kiválasztott tartalmat (videót, zenét vagy tetszőleges linket) fogja lejátszani az eszköz! ✨ Az Okosposzter funkció ára 790 Ft!";
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .testclass .tee-field__heading span:first-child::before {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 340px;
    padding: 200px 1rem 1rem;
    z-index: 999;
  }

 .testclass .tee-row .tee-radio:nth-of-type(4) label.tee-radio-label {
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.4 !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    min-height: unset !important;
    height: auto !important;
    display: block !important;
  }

}

.testclass .tee-radio label.tee-radio-label {
  white-space: normal !important;
  word-break: break-word;
  max-width: 100%;
  text-align: left;
}




/******************************/

.testclass + .tee-field {
  background: #f9f5ff;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 2px solid #e0d7f7;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.05);
  transition: all 0.3s ease-in-out;
  margin-bottom: 2rem;
}


..testclass + .tee-field:hover{
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.1);
  border-color: #c084fc;
}


.testclass + .tee-field {
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #4b5563;
  margin-bottom: 1rem;
  align-items: center;
  gap: 0.5rem;
}


.tee__input,
.tee__input--text {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  background: white;
  font-size: 1.1rem;
  color: #111827;
  transition: border-color 0.2s ease;
}

.tee__input:focus,
.tee__input--text:focus {
  border-color: #a855f7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

/* Spotify kereső gomb */
.tee-song__btn--search {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-left: 0.5rem;
}

.tee-song__btn--search:hover {
  background: linear-gradient(135deg, #9333ea, #db2777);
}

.tee-song__icon--search {
  fill: white;
  width: 1.2rem;
  height: 1.2rem;
}

.testclass + .tee-field .tee-input-hint.tee-font-italic {
  font-style: normal !important;
  font-size: 1.3rem !important;
  color: #111827 !important; 
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  margin-top: 0.75rem !important;
  line-height: 1.5 !important;
}


/* custom */

.custom-announcement {
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid;
  border-image: linear-gradient(135deg, #a855f7, #ec4899) 1;
  box-shadow: 0 0 5px rgba(168, 85, 247, 0.1), 0 0 10px rgba(236, 72, 153, 0.1);
  transition: all 0.3s ease-in-out;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2rem;
  position: relative;
  cursor:help;
}

/*.custom-announcement:hover {
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.2), 0 0 50px rgba(236, 72, 153, 0.2);
}*/

/* Cím + tooltip stílus */
.custom-announcement p {
  font-size: 1.8rem;
  font-weight: 800;
  position: relative;
  display: inline-block;
  color: #111827;
  margin: 0;
  padding-right: 2.5rem;
}

/* Tooltip gomb – kérdőjel */
.custom-announcement p::after {
  content: "?";
  position: absolute;
  top: 0.3rem;
  right: 0;
  background: linear-gradient(135deg, #9333ea, #ec4899);
  color: white;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  cursor: help;
  z-index: 5;
}

/* Tooltip tartalom (rejtett kép + szöveg) */
.custom-announcement p::before {
  content: "✨Ezt a funkciót aktiválva, amikor a faliképhez érintesz egy (NFC-képes) okostelefont, az általad kiválasztott tartalmat (videót, zenét vagy tetszőleges linket) fogja lejátszani az eszköz! ✨ Részleteket lejjebb találsz";
  position: absolute;
  top: 2.2rem;
  left: 2rem;
  width: 320px;
  max-width: 90vw;
  padding: 50px 1rem 1rem;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.6) 100%),
    url('/cdn/shop/files/okosposzter_emlekposzter_1_8.png?v=1743595512');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background-color: white;
  color: white;
  font-size: 1.2rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  border-radius: 1rem;
  box-sizing: border-box;
  white-space: normal;
}

/* Tooltip aktiválás hoverrel */
.custom-announcement p:hover::before {
  opacity: 1;
  pointer-events: auto;
}

/* Mobilbarát tooltip */
@media (max-width: 768px) {
  .custom-announcement p::before {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 340px;
  }
}



.tee-customization-form {
  border-radius: 10px;
}

#teeAtcButton {
  background-color: #30ba01;
  font-family: 'Montserrat';
  font-weight: 700;
  }
  
#teeAtcButton:hover {
  background-color: #59c733;
}

/* ==========================================================
   Okosposzter blokk – visszafogott, minimalista stílus (2026-10)
   A fenti .testclass szabályokat írja felül. A .testclass.testclass
   dupla osztály csak a nagyobb specificitás miatt kell.
   ========================================================== */

.testclass.testclass {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #c4b5fd, #f9a8d4) border-box;
  border: 1px solid transparent;
  border-image: none;
  border-radius: 14px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: none;
}

.testclass.testclass:hover {
  box-shadow: none;
}

/* Cím */
.testclass.testclass .tee-field__heading {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 1.2rem;
}

.testclass.testclass .tee-field__heading span:first-child {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937 !important;
}

/* Alcím */
.testclass.testclass .tee-field__heading::after {
  color: #6b7280;
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: 0.4rem;
}

/* Kérdőjel ikon */
.testclass.testclass .tee-field__heading span:first-child::after {
  background: #f3e8ff;
  color: #7c3aed;
  box-shadow: none;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.1rem;
  right: -2.3rem;
  top: 0.2rem;
}

/* Opciók elrendezése */
.testclass.testclass .tee-row {
  gap: 0.6rem;
}

/* Opció gombok */
.testclass.testclass .tee-radio input[type="radio"] + label.tee-radio-label,
.testclass.testclass .tee-radio label.tee-radio-label {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  height: 4.2rem !important;
  padding: 0 1.4rem !important;
  font-weight: 600 !important;
  font-size: 1.35rem;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.testclass.testclass .tee-radio input[type="radio"] + label.tee-radio-label:hover,
.testclass.testclass .tee-radio label.tee-radio-label:hover {
  background: #faf5ff !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
  transform: none !important;
}

/* Kiválasztott opció: halvány háttér + vékony színátmenetes keret */
.testclass.testclass .tee-radio.active input[type="radio"] + label.tee-radio-label,
.testclass.testclass .tee-radio.active label.tee-radio-label {
  background:
    linear-gradient(#fbf7ff, #fbf7ff) padding-box,
    linear-gradient(135deg, #a855f7, #ec4899) border-box !important;
  border: 1.5px solid transparent !important;
  color: #6d28d9 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* A régi „Nem kérek” fehér belső réteg kikapcsolása */
.testclass.testclass .tee-radio:first-child label.tee-radio-label::before {
  display: none;
}

/* ---- Sorrendtől független elrendezés ----
   Minden opció saját sorban, ugyanúgy, akárhányadik is. */
.testclass.testclass .tee-row .tee-radio {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 0;
}

.testclass.testclass .tee-row .tee-radio label.tee-radio-label {
  display: inline-flex !important;
  align-items: center !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  min-height: unset !important;
  height: auto !important;
}

/* A régi, sorszám alapján megjelenő megjegyzés kikapcsolása */
.testclass.testclass .tee-row .tee-radio:nth-of-type(4):has(input[type="radio"]:checked)::after {
  content: none;
}

/* Saját fájl megjegyzés: a gomb felirata alapján, bárhol is van */
.testclass.testclass .tee-row .tee-radio:has(input[value="id-680043"]:checked)::after {
  content: "A saját fájlt nem kell most azonnal kiválasztanod! Saját fájlt a rendelés leadása után fogsz tudni feltölteni, erről külön emailt fogunk küldeni a rendelés beérkezésekor 🙂";
  display: block;
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  background: #faf5ff;
  border-radius: 10px;
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 1.25rem !important;
  font-weight: 400;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}

/* ---- Felugró beviteli mezők (Spotify, YouTube, link stb.) ----
   Az Okosposzter blokk utáni mező, illetve bármelyik mező, amely
   a Teeinblue-ban „okos-mezo” CSS osztályt kap. */
.testclass.testclass + .tee-field:not(:has(.tee-row)),
.tee-field.okos-mezo.okos-mezo {
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 14px;
  box-shadow: none;
  padding: 1.4rem 1.6rem 1.3rem;
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
  font-family: inherit;
  font-weight: 400;
  font-size: 1.4rem;
  color: #374151;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)):hover,
.tee-field.okos-mezo.okos-mezo:hover {
  box-shadow: none;
  border-color: #ede9fe;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-field__heading,
.tee-field.okos-mezo.okos-mezo .tee-field__heading {
  font-size: 1.35rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input,
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input--text,
.tee-field.okos-mezo.okos-mezo .tee__input,
.tee-field.okos-mezo.okos-mezo .tee__input--text {
  height: 4.6rem;
  padding: 0 1.2rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 1.4rem;
  color: #111827;
  box-shadow: none;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input::placeholder,
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input--text::placeholder,
.tee-field.okos-mezo.okos-mezo .tee__input::placeholder,
.tee-field.okos-mezo.okos-mezo .tee__input--text::placeholder {
  color: #9ca3af;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input:focus,
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee__input--text:focus,
.tee-field.okos-mezo.okos-mezo .tee__input:focus,
.tee-field.okos-mezo.okos-mezo .tee__input--text:focus {
  border-color: #a78bfa;
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

/* Segédszöveg a mező alatt */
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-input-hint,
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-input-hint.tee-font-italic,
.tee-field.okos-mezo.okos-mezo .tee-input-hint,
.tee-field.okos-mezo.okos-mezo .tee-input-hint.tee-font-italic {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  margin-top: 0.6rem !important;
}

/* Spotify kereső gomb */
.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-song__btn--search,
.tee-field.okos-mezo.okos-mezo .tee-song__btn--search {
  background: #f3e8ff;
  border-radius: 10px;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-song__btn--search:hover,
.tee-field.okos-mezo.okos-mezo .tee-song__btn--search:hover {
  background: #e9d5ff;
}

.testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-song__icon--search,
.tee-field.okos-mezo.okos-mezo .tee-song__icon--search {
  fill: #7c3aed;
}

@media (max-width: 768px) {
  .testclass.testclass {
    padding: 1.3rem 1.2rem 1.2rem;
  }
}

/* ==========================================================
   Teeinblue űrlap – friss, egységes alapstílus (2026-10)
   A valódi Teeinblue-felépítésre írva (minta:
   /mnt/project-files/redesign/dom/). Csak a Teeinblue
   blokkon belül hat (#tee-artwork-form).
   A kosár gomb (#teeAtcButton) színe szándékosan változatlan.
   ========================================================== */

.tee-customization-wrapper {
  /* Teeinblue saját változói: kiválasztott szín, lekerekítés, árnyék nélkül */
  --tee-active-color: #7c3aed;
  --tee-primary-color: #7c3aed;
  --tee-radio-border-radius: 10px;
  --tee-clipart-border-radius: 12px;
  --tee-radio-active-box-shadow: none;
  --tee-clipart-active-box-shadow: none;
  --tee-clipart-active-border-width: 1px;
  --tf-text: #1f2937;
  --tf-muted: #4b5563;
  --tf-line: #e7e7ec;
  --tf-accent: #7c3aed;
  --tf-accent-soft: #f5f0ff;
}

/* Beviteli rész háttere */
.tee-customization-wrapper .tee-customization-form {
  background: #f7f7f9;
  border-radius: 16px;
  padding: 1.4rem;
}

.tee-customization-wrapper .tee-customization-form .tee-field {
  margin-bottom: 1.2rem;
}

.tee-customization-wrapper .tee-customization-form .tee-field:last-child {
  margin-bottom: 0;
}

/* Címek */
.tee-customization-wrapper .tee-field__heading,
.tee-customization-wrapper .tee-option__title {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tf-text);
  margin-bottom: 0.8rem;
}

.tee-customization-wrapper .tee-asterisk {
  color: #e11d48;
  margin-left: 0.2rem;
}

/* Segédszövegek: dőlt helyett normál, szürke */
.tee-customization-wrapper .tee-input-hint,
.tee-customization-wrapper .tee-upload-instruction {
  font-style: normal !important;
  letter-spacing: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tf-muted);
  margin-top: 0.6rem;
}

/* Szöveg- és dátummezők */
.tee-customization-wrapper .tee__input,
.tee-customization-wrapper .tee-field__select {
  min-height: 4.2rem;
  padding: 0 1.2rem;
  border: 1px solid var(--tf-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  color: var(--tf-text);
  box-shadow: none;
}

.tee-customization-wrapper .tee__input:focus,
.tee-customization-wrapper .tee-field__select:focus {
  border-color: #a78bfa;
  outline: none;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

/* Fotófeltöltés gomb */
.tee-customization-wrapper .tee-btn--upload {
  background: #fff;
  border: 1px dashed #c4b5fd;
  border-radius: 10px;
  color: var(--tf-accent);
  font-weight: 600;
}

/* Képes választók (keret, szöveg, emoji): a keretet a Teeinblue a dobozra
   (.tee-clipart) teszi, ezért csak azt formázzuk, a címkét nem */
.tee-customization-wrapper .tee-clipart {
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tee-customization-wrapper .tee-clipart:hover {
  border-color: #c4b5fd;
}

.tee-customization-wrapper .tee-clipart.active {
  border-color: var(--tf-accent);
  box-shadow: 0 0 0 1px var(--tf-accent);
}

.tee-customization-wrapper .tee-clipart-label {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}

.tee-customization-wrapper .tee-clipart-checkmark {
  width: 16px;
  height: 16px;
  border-radius: 8px 0 11px 0;
}

/* A képek a lekerekített kereten belül maradnak (a doboz nem vág le,
   hogy a Teeinblue névbuborékja látszódjon) */
.tee-customization-wrapper .tee-clipart-thumbnail {
  border-radius: 11px;
}

.tee-customization-wrapper .tee-clipart-row {
  gap: 0.6rem;
}

/* Méretválasztó: letisztult gombok */
.tee-customization-wrapper .tee-option-inner .tee-radio-label {
  background: #fff;
  color: var(--tf-text);
  border: 1px solid var(--tf-line) !important;
  border-radius: 10px;
  padding: 0.9rem 1.4rem;
  font-weight: 600;
  box-shadow: none;
}

.tee-customization-wrapper .tee-option-inner .tee-radio-label:hover {
  background: #fff;
  border-color: #c4b5fd !important;
  color: var(--tf-accent);
}

.tee-customization-wrapper .tee-option-inner .tee-radio.active .tee-radio-label {
  background: var(--tf-accent-soft);
  border-color: var(--tf-accent) !important;
  color: var(--tf-accent);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--tf-accent) inset;
}

/* „Legnépszerűbb” jelölés a 30x40-es méreten: jól látható címke a gomb
   tetején, és a gomb maga is kap egy halvány kiemelést */
.tee-customization-wrapper .tee-option-inner:has(label[title="nagy - 30x40 cm"]) {
  padding-top: 1rem;
  row-gap: 1.2rem;
}

.tee-customization-wrapper .tee-option-inner label[title="nagy - 30x40 cm"] {
  position: relative;
  border-color: #c4b5fd !important;
}

.tee-customization-wrapper .tee-option-inner label[title="nagy - 30x40 cm"]::after {
  content: "★ Legnépszerűbb";
  position: absolute;
  top: -1.1rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  padding: 0.25rem 0.8rem;
  border-radius: 9999px;
  border: 2px solid #fff;
  background: var(--tf-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  z-index: 2;
}

.tee-customization-wrapper .tee-option-inner label[title="nagy - 30x40 cm"]:hover::before {
  content: none;
}

/* Felár-összesítő („A választott opció a végösszeget … növeli”):
   sárga figyelmeztetés helyett barátságos, kiemelt sáv ajándék ikonnal */
.tee-customization-wrapper {
  --tee-additional-charge-bg-color: transparent;
  --tee-additional-charge-border-color: transparent;
}

.tee-price-addons.tee-price-addons {
  position: relative;
  display: block;
  margin: 1.6rem 0 1.2rem;
  padding: 1.8rem 1.4rem 1.8rem 6rem;
  background: linear-gradient(135deg, #f5f0ff 0%, #fdf2f8 100%);
  border: 1px solid #e4d8fd;
  border-radius: 14px;
  color: #374151;
  font-size: 1.35rem;
  line-height: 1.45;
  animation: tf-addon-in 0.35s ease-out;
}

.tee-price-addons.tee-price-addons::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 50%;
  margin-top: -1.7rem;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 10px;
  background: #7c3aed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center / 1.8rem 1.8rem no-repeat;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
}

.tee-price-addons.tee-price-addons b,
.tee-price-addons.tee-price-addons strong {
  color: #7c3aed;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes tf-addon-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tee-price-addons.tee-price-addons { animation: none; }
}

/* Alsó rész: ellenőrző pipa, előnézet, mennyiség */
.tee-customization-wrapper .tee-form-actions {
  margin-top: 1.6rem;
}

.tee-customization-wrapper .tee-checkbox__label {
  font-size: 1.3rem;
  color: var(--tf-text);
}

.tee-customization-wrapper .tee-btn--preview {
  background: #fff;
  color: var(--tf-text);
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  min-height: 4.8rem;
  font-weight: 600;
}

/* Hover: a Teeinblue sötét hátteret ad, ezért a szöveg fehér */
.tee-customization-wrapper .tee-btn--preview:hover,
.tee-customization-wrapper .tee-btn--preview:focus-visible {
  border-color: var(--tf-accent) !important;
  background: var(--tf-accent) !important;
  color: #fff !important;
}
.tee-customization-wrapper .tee-btn--preview:hover * { color: #fff !important; }

.tee-customization-wrapper .tee-quantity-group {
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* Kosár gomb: a szín marad, csak a forma lesz modernebb */
#teeAtcButton {
  min-height: 5.2rem;
  border-radius: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(48, 186, 1, 0.22);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

#teeAtcButton:hover {
  box-shadow: 0 8px 20px rgba(48, 186, 1, 0.28);
}

#teeAtcButton:active {
  transform: translateY(1px);
}

/* ==========================================================
   Upsell (Igen / Nem) kártyák
   Felismerés: bármely mező, amelyben pontosan két gomb van
   (Igen, Nem), vagy amely „upsell” CSS osztályt kap.
   Az első gomb az Igen, a második a Nem.
   ========================================================== */

/* Mezőnkénti szín + ikon (réteg-azonosító vagy CSS osztály alapján).
   Az alapértékek :where()-ben vannak, hogy a mezőnkénti színek felülírhassák. */
:where(.tee-customization-form .tee-field.upsell),
:where(.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up) {
  --u-from: #f6f1ff;
  --u-border: #e4d8fd;
  --u-accent: #7c3aed;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

.tee-customization-form .tee-field.tee-field--layer-385097,
.tee-customization-form .tee-field.upsell-digitalis {
  --u-from: #eef5ff;
  --u-border: #d6e6ff;
  --u-accent: #2563eb;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.tee-customization-form .tee-field.tee-field--layer-577859,
.tee-customization-form .tee-field.upsell-tores {
  --u-from: #ecfbf3;
  --u-border: #cdeedd;
  --u-accent: #059669;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.tee-customization-form .tee-field.tee-field--layer-604086,
.tee-customization-form .tee-field.upsell-okos,
.tee-customization-form .tee-field.testclass {
  --u-from: #f6f1ff;
  --u-border: #e4d8fd;
  --u-accent: #7c3aed;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

.tee-customization-form .tee-field.tee-field--layer-637891,
.tee-customization-form .tee-field.upsell-expressz {
  --u-from: #fff4e8;
  --u-border: #fde0c2;
  --u-accent: #ea580c;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}

/* Kártya */
.tee-customization-form .tee-field.upsell,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up {
  background: linear-gradient(135deg, var(--u-from) 0%, #fff 65%) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 1.2rem 1.4rem !important;
  margin-bottom: .8rem !important;
  font-weight: 400 !important;
  transition: border-color 0.2s ease;
}

/* „Igen” kiválasztva: keret a mező saját színében */
.tee-customization-form .tee-field.upsell:has(.tee-radio:first-child.active),
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up:has(.tee-radio:first-child.active) {
  border-color: var(--u-accent) !important;
}

/* Fejléc: ikon + cím */
.tee-customization-form .tee-field.upsell .tee-field__header,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-field__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem !important;
}

.tee-customization-form .tee-field.upsell .tee-field__header::before,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-field__header::before {
  content: "";
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 10px;
  background: #fff var(--u-icon) center / 1.8rem 1.8rem no-repeat;
  border: 1px solid var(--u-border);
}

.tee-customization-form .tee-field.upsell .tee-field__heading,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-field__heading {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
}

/* Gombok és leírás a kártya teljes szélességében (a termékoszlop keskeny,
   ezért nem húzzuk be őket az ikon mögé) */

.tee-customization-form .tee-field.upsell .tee-row,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tee-customization-form .tee-field.upsell .tee-row,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-row,
#teeFormInputs .testclass .tee-row {
  margin: 0 !important;
}

.tee-customization-form .tee-field.upsell .tee-radio,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio,
#teeFormInputs .testclass .tee-radio {
  position: relative;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
  margin: 0 !important;
}

.tee-customization-form .tee-field.upsell .tee-radio .tee-radio-label,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio .tee-radio-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 9.6rem !important;
  height: 4.2rem !important;
  padding: 0 1.6rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9999px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 1.4rem;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tee-customization-form .tee-field.upsell .tee-radio .tee-radio-label:hover,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio .tee-radio-label:hover {
  border-color: var(--u-accent) !important;
  color: var(--u-accent) !important;
}

/* Igen kiválasztva: teli gomb a mező színében, pipával */
.tee-customization-form .tee-field.upsell .tee-radio:first-child.active .tee-radio-label,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio:first-child.active .tee-radio-label {
  background: var(--u-accent) !important;
  border-color: var(--u-accent) !important;
  color: #fff !important;
}

.tee-customization-form .tee-field.upsell .tee-radio:first-child.active .tee-radio-label::before,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio:first-child.active .tee-radio-label::before {
  content: "✓";
  margin-right: 0.5rem;
  font-weight: 700;
}

/* Nem kiválasztva: semleges szürke */
.tee-customization-form .tee-field.upsell .tee-radio:nth-child(2).active .tee-radio-label,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio:nth-child(2).active .tee-radio-label {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* A Teeinblue zöld pipája helyett a fenti jelölés látszik */
.tee-customization-form .tee-field.upsell .tee-clipart-checkmark,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-clipart-checkmark {
  display: none !important;
}

.tee-customization-form .tee-field.upsell .tee-input-hint,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-input-hint {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  margin-top: 0.8rem !important;
}

/* ==========================================================
   Okosposzter: a kérdés, az opciók és a felugró mező
   egyetlen összefüggő, körvonalas dobozban.
   A Teeinblue ezeket egymás után, testvérként rakja ki:
   [Okosposzter kérdés] [.testclass opciók] [felugró mező]
   ========================================================== */

/* 1. A kérdés kártyája alul nyitott, ha alatta megjelennek az opciók */
#teeFormInputs .tee-field:is(.upsell, .tee-field--additional_option, .tee-up.tee-up.tee-up.tee-up.tee-up):has(+ .testclass) {
  border-bottom: none !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 1.2rem !important;
}

/* 2. Az opciók a doboz közepén */
#teeFormInputs .testclass.testclass {
  background: #fff !important;
  border: 1px solid var(--u-accent) !important;
  border-top: 1px dashed var(--u-border) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: none !important;
  margin: 0 0 1rem !important;
  padding: 1.4rem 1.6rem !important;
}

/* A kérdés kártyájának keretszíne igazodjon a dobozhoz */
#teeFormInputs .tee-field:is(.upsell, .tee-field--additional_option, .tee-up.tee-up.tee-up.tee-up.tee-up):has(+ .testclass) {
  border-color: var(--u-accent) !important;
}

/* Ha az opciók előtt NEM az Okosposzter Igen/Nem kártya áll (pl. egy fotómező),
   akkor az opciók önálló, felül is lekerekített dobozt kapnak */
#teeFormInputs .tee-field:not(.upsell, .tee-field--additional_option, .tee-up.tee-up.tee-up.tee-up.tee-up) + .testclass.testclass {
  border-top: 1px solid var(--u-accent, #7c3aed) !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  margin-top: .4rem !important;
}

/* 3. Ha van felugró mező (Spotify, YouTube, link), az is a dobozba kerül */
#teeFormInputs .testclass.testclass:has(+ .tee-field .tee__input, + .tee-field .tee-song__btn--search, + .tee-field input[type="text"]) {
  border-bottom: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

#teeFormInputs .testclass + .tee-field:not(:has(.tee-row)) {
  background: #fff !important;
  border: 1px solid #7c3aed !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: none !important;
  margin: 0 0 1rem !important;
  padding: 0 1.6rem 1.6rem !important;
}

/* Az Okosposzter opciók címe és alcíme kisebb, a dobozhoz illő */
#teeFormInputs .testclass .tee-field__heading span:first-child {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

/* Okosposzter opciók: a kiválasztott gomb teli lila, mint az upselleknél az „Igen” */
#teeFormInputs .testclass .tee-radio.active .tee-radio-label {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .tee-customization-wrapper .tee-customization-form {
    padding: 1.2rem;
    border-radius: 16px;
  }

  .tee-customization-form .tee-field.upsell,
.tee-customization-form .tee-field.tee-up.tee-up.tee-up.tee-up.tee-up {
    padding: 1.3rem 1.2rem !important;
  }

  #teeFormInputs .testclass.testclass {
    padding: 1.3rem 1.2rem !important;
  }

  #teeFormInputs .testclass + .tee-field:not(:has(.tee-row)) {
    padding: 0 1.2rem 1.4rem !important;
  }
}


/* ==========================================================
   „Újdonság” sáv – visszafogott, lekerekített kártya
   (a régi gradiens-keretes stílus felülírása)
   ========================================================== */
.custom-announcement.custom-announcement {
  display: block;
  margin: 0 0 1.2rem;
  padding: .9rem 1.2rem;
  background: linear-gradient(135deg, #f5f0ff 0%, #fdf2f8 100%);
  border: 1px solid #e4d8fd;
  border-image: none;
  border-radius: 12px;
  box-shadow: none;
  font-family: inherit;
}

.custom-announcement.custom-announcement p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.8rem;
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.4;
  color: #4c1d95;
}

.custom-announcement .ca-badge {
  flex: 0 0 auto;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.custom-announcement.custom-announcement p::after {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: #fff;
  color: #7c3aed;
  border: 1px solid #d9c8fb;
  box-shadow: none;
  font-size: 1.1rem;
}

/* ==========================================================
   Tömörebb termékoldal – kevesebb üres tér, kicsit kisebb betűk
   ========================================================== */
.product__info-container > * + * { margin: 1.2rem 0; }
.product__info-container .product-form { margin: 1.6rem 0; }

.product__title.product__title,
.product__title h1 {
  font-size: calc(var(--font-heading-scale) * 2.6rem);
  margin-bottom: 1rem;
}

@media screen and (min-width: 750px) {
  .product__title.product__title,
  .product__title h1 { font-size: calc(var(--font-heading-scale) * 3.2rem); }
}

.oursong-badge.oursong-badge { margin: 1.2rem 0; padding: 1rem 1.4rem; }

/* ==========================================================
   Teeinblue előnézet (bal oldali, rögzített kép) – asztali nézet
   A Teeinblue alapból 50px-re tapasztja fel; minimális felső rés,
   és a kép szélessége az ablak magasságához igazodik, hogy
   a négyzetes előnézet teljesen beférjen.
   ========================================================== */
@media (min-width: 768px) {
  .tee-gallery-content.tee-gallery-content {
    top: .8rem !important;
    max-width: calc(100vh - 1.6rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================
   Több fotós termékek (pl. Polaroid 7 fotóból): az egymás utáni
   fotófeltöltő mezők kettesével, egymás mellett.
   Csak ott kapcsol be, ahol legalább két fotómező követi egymást;
   minden más mező továbbra is teljes szélességű.
   ========================================================== */
#teeFormInputs:has(.tee-field--photo + .tee-field--photo) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}

#teeFormInputs:has(.tee-field--photo + .tee-field--photo) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo),
#teeFormInputs > .tee-field--photo + .tee-field--photo {
  grid-column: auto;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--tf-line, #e7e7ec);
  border-radius: 12px;
}

#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-field__heading,
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-field__heading {
  margin-bottom: .6rem;
  font-size: 1.3rem;
}

#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-btn--upload,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-btn--upload {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: .8rem .6rem;
  font-size: 1.25rem;
  text-align: center;
}

/* Keskeny kártyában (mobilon ~140 px) a Teeinblue fix 150 px-es „+” doboza és az egysoros
   gomb kilógna: a doboz töltse ki a kártyát négyzetként, a gomb szövege törhet */
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-photo-head,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-photo-head,
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-photo-action,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-photo-action {
  min-width: 0;
  max-width: 100%;
}
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-photo-label,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-photo-label {
  display: flex;
  flex: 0 1 auto;
  width: 100%;
  max-width: 15rem;
  min-width: 0;
  box-sizing: border-box;
}
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-photo-placeholder,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-photo-placeholder {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-btn--upload,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-btn--upload {
  height: auto !important;
  min-height: 4.4rem !important;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}
#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-btn--upload span,
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-btn--upload span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 420px) {
  /* Nagyon keskeny kártyán az ikon helyett a szövegnek jusson a hely */
  #teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-btn--upload::before,
  #teeFormInputs > .tee-field--photo + .tee-field--photo .tee-btn--upload::before { display: none; }
}

/* A „Ha nem sikerül a feltöltés…” tipp mezőnként ismétlődne: csak az elsőnél marad */
#teeFormInputs > .tee-field--photo + .tee-field--photo .tee-upload-instruction {
  display: none;
}

#teeFormInputs > .tee-field--photo:has(+ .tee-field--photo) .tee-upload-instruction {
  font-size: 1.1rem;
}

/* ==========================================================
   „Fénykép kiválasztása” gomb – enyhén kiemelt, lila árnyalat
   (#teeFormInputs előtag, hogy a Teeinblue alapstílusát legyőzze)
   ========================================================== */
#teeFormInputs .tee-btn--upload {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #f5f0ff !important;
  border: 1px solid #d9c8fb !important;
  border-radius: 10px !important;
  color: #6d28d9 !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(124, 58, 237, .08);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#teeFormInputs .tee-btn--upload::before {
  content: "";
  flex: 0 0 1.6rem;
  height: 1.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Ccircle cx='9' cy='10.5' r='1.8'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}

#teeFormInputs .tee-btn--upload:hover {
  background: #ede4ff !important;
  border-color: #a78bfa !important;
  box-shadow: 0 4px 12px -6px rgba(124, 58, 237, .45);
}

#teeFormInputs .tee-btn--upload:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

/* A „+” helyőrző doboz is kapjon halvány lila keretet */
#teeFormInputs .tee-photo-label {
  border-color: #e4d8fd !important;
  border-radius: 12px !important;
  transition: border-color .2s ease, background .2s ease;
}

#teeFormInputs .tee-photo-label:hover {
  border-color: #a78bfa !important;
  background: #fbf9ff;
}

/* „Fotó ismételt személyre szabása” (és áthelyezés) gomb – semleges,
   fekete-fehér párja a fotó gombnak, ceruza ikonnal */
#teeFormInputs .tee-btn--recustomize,
#teeFormInputs .tee-btn--reposition {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 0;
  margin: 0 !important;
  padding: .8rem 1.2rem;
  background: #fff !important;
  border: 1px solid #d4d4d8 !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease;
}

#teeFormInputs .tee-btn--recustomize::before,
#teeFormInputs .tee-btn--reposition::before {
  content: "";
  flex: 0 0 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4z'/%3E%3Cpath d='M14.5 5.5l3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

#teeFormInputs .tee-btn--recustomize:hover,
#teeFormInputs .tee-btn--reposition:hover {
  background: #f4f4f5 !important;
  border-color: #a1a1aa !important;
}

/* Feltöltött fotónál a két gomb egyforma szélességű, egymás alatt */
#teeFormInputs .tee-photo-action:has(.tee-btn--recustomize, .tee-btn--reposition) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
}

#teeFormInputs .tee-photo-action:has(.tee-btn--recustomize, .tee-btn--reposition) .tee-btn {
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}

/* ==========================================================
   Korábban feltöltött képek (előzmények) a fotómezőben:
   vízszintes csúszka helyett függőleges oszlop a fő kép mellett
   ========================================================== */
#teeFormInputs .tee-photo-head {
  align-items: flex-start;
  gap: .8rem;
}

#teeFormInputs .tee-photo-preview-history {
  flex-direction: column;
  flex: 0 0 auto;
  gap: .6rem;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: .2rem;
  scrollbar-width: thin;
  scrollbar-color: #d9c8fb transparent;
}

#teeFormInputs .tee-photo-preview-history__item {
  border-radius: 8px;
  overflow: hidden;
}

#teeFormInputs .tee-photo-preview-history__image {
  height: 5.2rem;
  width: 5.2rem;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

#teeFormInputs .tee-photo-preview-history__item--active {
  box-shadow: 0 0 0 2px #7c3aed;
}

#teeFormInputs .tee-photo-preview-history__more {
  min-width: 5.2rem;
  padding: .2rem 0;
}

/* ==========================================================
   Upsell Igen/Nem → kompakt jelölőnégyzetes sor (a JS teszi rá a
   .tee-upsell-checkbox osztályt). [☐] Kérdés + ár ........ [ikon]
   Az egymás utáni upsellek egy összefüggő listát alkotnak.
   ========================================================== */
#teeFormInputs .tee-field.tee-upsell-checkbox {
  display: grid !important;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-areas: "box head" ". hint";
  column-gap: 1.2rem;
  align-items: center;
  margin: 0 0 1rem !important;
  padding: 1rem 1.2rem !important;
  background: #fff !important;
  border: 1px solid var(--tf-line, #e7e7ec) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}

#teeFormInputs .tee-field.tee-upsell-checkbox:hover { background: #fafafa !important; }

/* Összekapcsolt lista: a szomszédos sorok közös kerettel */
#teeFormInputs .tee-field.tee-upsell-checkbox:has(+ .tee-upsell-checkbox) {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox + .tee-field.tee-upsell-checkbox {
  margin-top: -1px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Bepipálva: halvány színes háttér és bal oldali színcsík */
#teeFormInputs .tee-field.tee-upsell-checkbox:has(.tee-radio:first-child.active),
#teeFormInputs .tee-field.tee-upsell-checkbox.is-checked {
  background: linear-gradient(90deg, var(--u-from) 0%, #fff 80%) !important;
  box-shadow: inset 3px 0 0 var(--u-accent) !important;
}

/* Fejléc: kérdés balra, ikon jobbra */
#teeFormInputs .tee-field.tee-upsell-checkbox > .tee-field__header {
  grid-area: head;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 !important;
  padding: 0 !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox > .tee-field__header::before {
  order: 2;
  flex: 0 0 2.8rem;
  width: 2.8rem !important;
  height: 2.8rem !important;
  border-radius: 8px !important;
  background-size: 1.6rem !important;
  margin: 0 !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-field__heading {
  order: 1;
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-asterisk { display: none; }

/* A jelölőnégyzet maga (a Teeinblue „Igen” opciója) */
#teeFormInputs .tee-field.tee-upsell-checkbox > .tee-field__input {
  grid-area: box;
  margin: 0 !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-row { margin: 0 !important; display: block !important; }
#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio { margin: 0 !important; outline: none !important; background: none !important; }
#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) { display: none !important; }

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:first-child .tee-radio-label {
  display: block !important;
  width: 2.2rem !important;
  min-width: 0 !important;
  height: 2.2rem !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:first-child .tee-radio-label span { display: none; }
#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:first-child .tee-radio-label::after { content: none !important; }

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:first-child .tee-radio-label::before {
  content: "" !important;
  display: grid !important;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 !important;
  box-sizing: border-box;
  border: 2px solid #c4c4cc;
  border-radius: 6px;
  background: #fff;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}

#teeFormInputs .tee-field.tee-upsell-checkbox:hover .tee-radio:first-child .tee-radio-label::before { border-color: var(--u-accent); }

#teeFormInputs .tee-field.tee-upsell-checkbox .tee-radio:first-child.active .tee-radio-label::before,
#teeFormInputs .tee-field.tee-upsell-checkbox.is-checked .tee-radio:first-child .tee-radio-label::before {
  content: "✓" !important;
  border-color: var(--u-accent);
  background: var(--u-accent);
}

/* Segédszöveg kisebben, a kérdés alatt */
#teeFormInputs .tee-field.tee-upsell-checkbox > .tee-input-hint {
  grid-area: hint;
  margin: .3rem 0 0 !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
}

/* Felár a kérdés végén az upsell saját színében (kék, zöld, lila, narancs) */
#teeFormInputs .tee-upsell-checkbox .tee-upsell-price {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .7rem;
  border-radius: 999px;
  background: var(--u-from, #f6f1ff);
  border: 1px solid var(--u-border, #e4d8fd);
  color: var(--u-accent, #7c3aed);
  font-size: .9em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}

#teeFormInputs .tee-upsell-checkbox:has(.tee-radio:first-child.active) .tee-upsell-price,
#teeFormInputs .tee-upsell-checkbox.is-checked .tee-upsell-price {
  background: var(--u-accent, #7c3aed);
  border-color: var(--u-accent, #7c3aed);
  color: #fff;
}

/* Okosposzter választók: kompakt, az upsell-listához illő kártyák (2 oszlop, ikon, lila kijelölés) */
#teeFormInputs .tee-field.testclass .tee-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem !important;
  margin: 0 !important;
}

#teeFormInputs .tee-field.testclass .tee-row .tee-radio {
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

#teeFormInputs .tee-field.testclass .tee-row .tee-radio::after { content: none !important; }

#teeFormInputs .tee-field.testclass .tee-radio label.tee-radio-label {
  display: flex !important;
  align-items: center;
  gap: .8rem;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 4.4rem !important;
  margin: 0 !important;
  padding: .7rem 1rem !important;
  background: #fff !important;
  border: 1px solid var(--tf-line, #e5e5ea) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: currentColor;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: normal !important;
  transition: border-color .15s ease, background .15s ease !important;
}

#teeFormInputs .tee-field.testclass .tee-radio label.tee-radio-label:hover {
  border-color: #c4b5fd !important;
  background: #fbf9ff !important;
}

#teeFormInputs .tee-field.testclass .tee-radio label.tee-radio-label::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  flex: 0 0 2.6rem;
  width: 2.6rem !important;
  height: 2.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px;
  background: #f3f4f6 var(--okos-icon, none) center / 1.5rem 1.5rem no-repeat;
}

#teeFormInputs .tee-field.testclass .tee-radio label.tee-radio-label::after { content: none !important; }

#teeFormInputs .tee-field.testclass .tee-radio.active label.tee-radio-label,
#teeFormInputs .tee-field.testclass .tee-radio:has(> input:checked) label.tee-radio-label {
  border-color: #7c3aed !important;
  background: #f6f1ff !important;
  box-shadow: inset 0 0 0 1px #7c3aed !important;
  color: #4c1d95 !important;
}

#teeFormInputs .tee-field.testclass .tee-radio[data-okos="youtube"] { --okos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='4' fill='%23ef4444'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='white'/%3E%3C/svg%3E"); }
#teeFormInputs .tee-field.testclass .tee-radio[data-okos="spotify"] { --okos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2322c55e'/%3E%3Cpath d='M7 9.5c3.5-1 7-.6 10 1M7.5 12.5c3-.8 6-.4 8.5 1M8 15.3c2.4-.6 4.6-.3 6.6.8' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
#teeFormInputs .tee-field.testclass .tee-radio[data-okos="own"] { --okos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E"); }
#teeFormInputs .tee-field.testclass .tee-radio[data-okos="link"] { --okos-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }

#teeFormInputs .tee-field.testclass .tee-radio.active label.tee-radio-label::before,
#teeFormInputs .tee-field.testclass .tee-radio:has(> input:checked) label.tee-radio-label::before { background-color: #fff; }

/* Saját fájl választásakor: rövid tájékoztató a választók alatt */
#teeFormInputs .tee-field.testclass .tee-row:has(.tee-radio[data-okos="own"] > input:checked)::after {
  content: "A saját fájlt nem kell most kiválasztanod! A rendelés leadása után tudod feltölteni, erről külön e-mailt küldünk 🙂";
  grid-column: 1 / -1;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: #f6f1ff;
  color: #4c1d95;
  font-size: 1.25rem;
  line-height: 1.45;
}

@media screen and (max-width: 360px) {
  #teeFormInputs .tee-field.testclass .tee-row { grid-template-columns: 1fr; }
}

/* ==========================================================
   Képes méretválasztó (assets/teeinblue-size-visual.js)
   Arányos keretrajz minden méretnél, a keret anyaga a kiválasztott színből.
   ========================================================== */
.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-option-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--size-count, 4), minmax(0, 1fr));
  gap: .6rem !important;
}

.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-radio {
  position: relative;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  min-width: 0;
  width: auto !important;
  height: auto !important;
}

.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-radio > input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}

.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-radio-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 1.4rem .4rem .8rem !important;
  text-align: center;
  line-height: 1.2;
}

/* az eredeti felirat helyett név + méret két sorban */
.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-radio-label > span:not([class^="tee-size"]) {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.tee-size-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 7.8rem;
  padding: .4rem 0 .3rem;
  overflow: visible;
}

/* A keret belseje teljesen a kép (nincs paszpartu): a nyomat kerettől keretig kitölti */
.tee-size-frame {
  --bw: 2px;
  display: block;
  box-sizing: border-box;
  position: relative;
  border: var(--bw) solid #1c1c1c;
  border-radius: 1px;
  background: linear-gradient(160deg, #c4b5fd 0%, #f9a8d4 55%, #fde68a 100%);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}


/* fehér keret: világos léc vékony szürke szegéllyel, belül is elválik a képtől */
.tee-option--size[data-frame="white"] .tee-size-frame {
  border-color: #fafafa;
  box-shadow: 0 0 0 1px #cfcfd4, inset 0 0 0 1px #d9d9de, 0 3px 6px -2px rgba(0, 0, 0, .25);
}

.tee-option--size[data-frame="oak"] .tee-size-frame {
  border-color: #dcb684;
  border-image: linear-gradient(135deg, #ecd0a4, #d2a56f 50%, #e4c08e) 1;
}

.tee-option--size[data-frame="walnut"] .tee-size-frame {
  border-color: #6e3a26;
  border-image: linear-gradient(135deg, #8a4a32, #5c2c1c 50%, #7a4029) 1;
}

/* vászonkép: nincs keret, oldalt látszik a vászon vastagsága */
.tee-option--size[data-frame="canvas"] .tee-size-frame {
  border: 0;
  box-shadow: 2px 2px 0 #b8b2a6, 3px 3px 5px -1px rgba(0, 0, 0, .3);
}

.tee-customization-wrapper .tee-option--size.tee-size-visual .tee-radio-label:hover .tee-size-frame { transform: translateY(-2px); }

.tee-size-text { display: flex; flex-direction: column; gap: .1rem; }
.tee-size-name { font-size: 1.3rem; font-weight: 700; text-transform: capitalize; }
.tee-size-dim { font-size: 1.1rem; font-weight: 500; color: var(--tf-muted, #6b7280); white-space: nowrap; }
.tee-radio.active .tee-size-dim { color: inherit; opacity: .8; }

@media screen and (max-width: 380px) {
  .tee-size-dim { white-space: normal; }
}

/* Termékfotó: csak a nagy előnézet látszik, bélyegképsor, lapozó (1 — 2) és nyilak nélkül */
.tee-gallery .tee-thumbnails,
.tee-gallery .tee-slider__dots,
.tee-gallery .tee-slider__button {
  display: none !important;
}

/* „Dal kiválasztása” mező: kiemelt kártya, de ajándék helyett hangjegy ikonnal */
.tee-customization-form .tee-field.tee-song-choice {
  --u-from: #fdf2f8;
  --u-border: #fbcfe8;
  --u-accent: #db2777;
  --u-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23db2777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}

/* Dal kiválasztása: mindkét gomb egyenrangú, a kiválasztott (bármelyik) kap színt és pipát */
.tee-customization-form .tee-field.tee-song-choice.tee-song-choice.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio.tee-radio.active .tee-radio-label {
  background: var(--u-accent) !important;
  border-color: var(--u-accent) !important;
  color: #fff !important;
}
.tee-customization-form .tee-field.tee-song-choice.tee-song-choice.tee-up.tee-up.tee-up.tee-up.tee-up .tee-radio.tee-radio.active .tee-radio-label::before {
  content: "✓";
  margin-right: 0.5rem;
  font-weight: 700;
}

/* „Új verzió” doboz (Oursong): könnyed kártya, színátmenetes címke, ikonos előnyök egy sorban */
.nv-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  margin: .4rem 0 1.2rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(120deg, #ecfdf5 0%, #eef6ff 100%);
  border: 1px solid #cdeee3;
  border-radius: 14px;
}

.nv-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem .35rem .7rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #10b981, #2563eb);
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .55);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.nv-badge svg { width: 1.4rem; height: 1.4rem; }

.nv-list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-list li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: #0f3d3a;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.nv-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 61, 58, .12);
}

.nv-ico svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: #0e9f6e;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nv-list li:nth-child(2) .nv-ico svg { stroke: #0891b2; }
.nv-list li:nth-child(3) .nv-ico svg { stroke: #2563eb; }
.nv-list li:nth-child(3) .nv-ico circle { fill: #2563eb; stroke: none; }

/* Olvashatóbb mellékszövegek az űrlapon: súgók, leírások, helykitöltők sötétebb szürkével */
.tee-customization-wrapper .tee-input-hint,
.tee-customization-wrapper .tee-input-hint.tee-font-italic,
.tee-customization-wrapper .tee-upload-instruction,
.tee-customization-wrapper .tee-field .tee-input-hint *,
#teeFormInputs .tee-field.tee-upsell-checkbox > .tee-input-hint {
  color: #4b5563 !important;
}

.tee-customization-wrapper input::placeholder,
.tee-customization-wrapper textarea::placeholder,
.tee-customization-wrapper .tee__input::placeholder,
.tee-customization-wrapper .tee-field .tee__input::placeholder,
.tee-customization-wrapper .tee-field .tee__input--text::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Upsell kártya kattintása natív címkével: bejelöletlenül az „Igen”, bejelölve a „Nem”
   címkéje fedi le az egész kártyát, így a Teeinblue valódi kattintást kap */
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox { position: relative !important; }
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox > .tee-field__input,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-row,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio-label { position: static !important; }

#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox:not(.is-checked) .tee-radio:first-child .tee-radio-label::after,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox.is-checked .tee-radio:nth-child(2) .tee-radio-label::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* a „Nem” gomb láthatatlan, csak a lefedő címkéje működik bejelölt állapotban */
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) .tee-radio-label {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 0 !important;
  overflow: visible !important;
}
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) .tee-radio-label::before,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) .tee-radio-label span { display: none !important; }
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox:not(.is-checked) .tee-radio:nth-child(2) .tee-radio-label::after { content: none !important; }

/* Okosposzter (testclass) választó: a leírás és az opciók közé „Válassz egyet:” felirat.
   A termékoldalon és a kosárból nyíló szerkesztőben is. */
.tee-customization-form .testclass .tee-field__input:has(.tee-radio + .tee-radio)::before {
  content: 'Válassz egyet:';
  display: block;
  margin: .4rem 0 .6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #374151;
}

/* „Kérhető extrák” felirat az upsell lista fölött (minden terméktípusnál) */
#teeFormInputs .tee-field.tee-upsell-checkbox.tee-upsell-first {
  margin-top: 3.2rem !important;
}
#teeFormInputs .tee-field.tee-upsell-checkbox.tee-upsell-first::before {
  content: "✨ Kérhető extrák";
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: .7rem;
  color: #1f2937;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}

/* Okosposzter választók mobilon: egy oszlop, egysoros gombok (nem törik 3-4 sorba) */
@media screen and (max-width: 749px) {
  #teeFormInputs .tee-field.testclass .tee-row { grid-template-columns: minmax(0, 1fr) !important; }
  #teeFormInputs .tee-field.testclass .tee-radio label.tee-radio-label {
    min-height: 4.4rem !important;
    padding: .6rem 1rem !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* „Kérhető extrák”: elkülönült csoport cím (Gabor kérése) – vékony elválasztó vonal fölötte,
   nagyobb, hangsúlyosabb cím, több térköz az előző mezőtől */
#teeFormInputs .tee-field.tee-upsell-checkbox.tee-upsell-first {
  margin-top: 6.4rem !important;
}
#teeFormInputs .tee-field.tee-upsell-checkbox.tee-upsell-first::before {
  right: 0;
  margin-bottom: 1.1rem;
  padding-top: 1.8rem;
  border-top: 1px solid #e5e7eb;
  color: #111827;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Okosposzter link / dal kereső mező: erősebb keret, jobban olvasható magyarázó szöveg (Gabor kérése) */
#teeFormInputs .testclass.testclass + .tee-field:not(:has(.tee-row)) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea),
#teeFormInputs .tee-field.okos-mezo.okos-mezo :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea) {
  border: 1.5px solid #9ca3af !important;
}
#teeFormInputs .testclass.testclass + .tee-field:not(:has(.tee-row)) :is(input, textarea):focus,
#teeFormInputs .tee-field.okos-mezo.okos-mezo :is(input, textarea):focus {
  border-color: #7c3aed !important;
}
#teeFormInputs .testclass.testclass + .tee-field:not(:has(.tee-row)) .tee-input-hint,
#teeFormInputs .tee-field.okos-mezo.okos-mezo .tee-input-hint {
  color: #374151 !important;
  font-size: 1.35rem !important;
}

/* Magyarázó szövegek az egész űrlapon: másodlagos, de jól olvasható (Gabor kérése).
   A Teeinblue tee-text-muted osztálya halványít, ezt is felülírjuk. */
:is(#teeFormInputs, .tee-customization-form, .tee-customization-wrapper) .tee-field.tee-field .tee-input-hint,
:is(#teeFormInputs, .tee-customization-form, .tee-customization-wrapper) .tee-field.tee-field .tee-input-hint *,
:is(#teeFormInputs, .tee-customization-form, .tee-customization-wrapper) .tee-field.tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-input-hint,
:is(#teeFormInputs, .tee-customization-form) .tee-text-muted {
  color: #374151 !important;
  opacity: 1 !important;
}
:is(#teeFormInputs, .tee-customization-form, .tee-customization-wrapper) .tee-field.tee-field .tee-input-hint,
:is(#teeFormInputs, .tee-customization-form, .tee-customization-wrapper) .tee-field.tee-field.tee-up.tee-up.tee-up.tee-up.tee-up .tee-input-hint {
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
}

/* Okosposzter súgó (a „?” fölé húzva / koppintva): kompakt, fehér kártya, a magyarázó kép
   kicsiben a szöveg mellett (Gabor kérése). Az ár a Téma beállítások → Upsell árak →
   Okosposzter értékéből jön (snippets/upsell-prices.liquid, --okos-price). */
.custom-announcement.custom-announcement p::before,
.testclass.testclass .tee-field__heading span:first-child::before {
  width: 36rem;
  max-width: 92vw;
  min-height: 11.6rem;
  padding: 1.2rem 1.4rem 1.2rem 11.8rem;
  background:
    url('/cdn/shop/files/okosposzter_emlekposzter_1_8.png?v=1743595512') 1.2rem 1.2rem / 9.6rem 9.2rem no-repeat,
    #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.4rem;
  box-shadow: 0 18px 40px -16px rgba(17, 24, 39, .35);
  color: #1f2937;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
}
.custom-announcement.custom-announcement p:hover::before,
.testclass.testclass .tee-field__heading span:first-child:hover::before {
  content: "Érintsd a telefonod (bekapcsolt NFC funkcióval) a faliképhez, és lejátssza az általad választott videót, zenét vagy linket! ✨ Ára: " var(--okos-price, "1.290 Ft");
}
@media (max-width: 768px) {
  .custom-announcement.custom-announcement p::before,
  .testclass.testclass .tee-field__heading span:first-child::before {
    width: 92vw;
    max-width: 38rem;
    padding: 1.2rem 1.4rem 1.2rem 11.8rem;
  }
}

/* Az „Akár Okosposzter funkcióval is kérheted” sáv súgója ugyanaz a kártya */
.custom-announcement.custom-announcement p { position: relative; cursor: help; }
.custom-announcement.custom-announcement p::before { content: ""; top: calc(100% + .8rem); left: 0; }
.custom-announcement.custom-announcement p::before { position: absolute; transform: none; z-index: 50; }
@media (max-width: 768px) {
  .custom-announcement.custom-announcement p::before { width: calc(100vw - 4.8rem); max-width: 38rem; }
}

/* A láthatatlan (0×0-s) „Nem” gomb aktív állapotban se rajzoljon keretet/árnyékot:
   a Teeinblue aktív outline-ja kis lila pöttyként látszott a jelölőnégyzet mellett */
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2),
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2).active,
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio:nth-child(2) .tee-radio-label {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: none !important;
}
#teeFormInputs .tee-field.tee-field.tee-upsell-checkbox .tee-radio input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  outline: 0 !important;
  pointer-events: none !important;
}