/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; background: #f9fafb; color: #222; line-height: 1.6; }

/* Theme */
:root { 
  --primary:#f39200; 
  --primary-dark:#d37f00; 
  --secondary:#0056a3; 
  --secondary-dark:#003d73;
  --accent:#1e7e34; 
  --light-bg:#ffffff; 
  --border:#eee; 
  --shadow:0 6px 20px rgba(0,0,0,.08);
}

/* Typography */
h1 { font-size:2rem; margin:1rem 0; font-weight:700; }
h2 { font-size:1.6rem; margin:.8rem 0; font-weight:600; }
h3 { font-size:1.3rem; margin:.6rem 0; font-weight:600; }

/* Links */
a { color: var(--primary); text-decoration: none; transition:.2s; }
a:hover { text-decoration: underline; }

/* Buttons */
button, .btn { 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; border:none; 
  padding:.7rem 1.4rem; border-radius:.6rem; 
  cursor:pointer; transition: all .25s ease;
  font-weight:600; letter-spacing:.3px;
  box-shadow:0 4px 8px rgba(0,0,0,.12);
}
button:hover, .btn:hover { 
  transform:translateY(-2px) scale(1.02); 
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.btn-cart {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
  color:#fff;
}
.btn-cart:hover { background: var(--secondary-dark); }

/* Product grid */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1.5rem; margin:2rem 0; }

.card { border:1px solid var(--border); border-radius:1rem; overflow:hidden; background:var(--light-bg); transition: transform .3s, box-shadow .3s; box-shadow: var(--shadow); display:flex; flex-direction:column;}
.card:hover { transform: translateY(-5px) scale(1.01); box-shadow:0 12px 24px rgba(0,0,0,.12); }
.card img { width:100%; height:200px; object-fit:cover; transition:.3s; }
.card img:hover { transform:scale(1.05); }
.card-body { padding:1rem; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.card-title { font-size:1.2rem; margin-bottom:.5rem; font-weight:600; }

.card-footer {
  display: flex;
  flex-wrap: wrap;             /* több elem egymás alatt is elfér, ha kell */
  justify-content: center;     /* középre rendezi */
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid #eee;
}

.card-footer form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.card-footer input[type="number"] {
  width: 70px;
  height: 32px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 4px;
}

.card-footer .btn-cart {
  background-color: #005bbb;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background 0.2s;
}

.card-footer .btn-cart:hover {
  background-color: #004999;
}

.price { font-weight:bold; color:var(--primary); margin:.5rem 0; font-size:1.1rem; }


/* Tables */
table { width:100%; border-collapse:collapse; margin:1.5rem 0; box-shadow: var(--shadow); border-radius:.5rem; overflow:hidden; background:#fff; }
th, td { padding:.8rem; text-align:left; border-bottom:1px solid #eee; }
th { background:#fafafa; font-weight:600; }
tr:hover { background:#fef6f0; }
tr:nth-child(even) { background:#fdfdfd; }

/* Forms */
form { display:grid; gap:1rem; margin:1.5rem 0; max-width:700px; }
form label { display:flex; flex-direction:column; font-weight:600; color:#333; }
form input, form select, form textarea { padding:.8rem; border:1px solid #ccc; border-radius:.4rem; font-size:1rem; margin-top:.3rem; }
form textarea { min-height:120px; resize:vertical; }
form button, form .btn { width:fit-content; }
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color: var(--primary);
  box-shadow:0 0 0 2px rgba(243,146,0,0.3);
}

/* HEADER */
header { 
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
  color: #fff; 
  position:sticky; top:0; z-index:100; backdrop-filter: blur(8px);
}
header nav { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 1rem; 
  display:flex; justify-content:space-between; align-items:center;
}
header nav .brand { display:flex; align-items:center; gap:.6rem; }
header nav .brand img { height:36px; }
header nav .brand a { font-weight:bold; font-size:1.3rem; color:#fff; letter-spacing:.5px; }
header nav ul { list-style:none; display:flex; gap:1.2rem; }
header nav ul li a { color:#fff; font-weight:500; }
header nav ul li a:hover { opacity:.8; }

/* Responsive navbar */
.nav-toggle { display:none; cursor:pointer; flex-direction:column; gap:4px; }
.nav-toggle span { display:block; width:25px; height:3px; background:#fff; border-radius:2px; }
@media (max-width:768px) {
  header nav ul { display:none; flex-direction:column; background:var(--primary-dark); position:absolute; top:60px; right:1rem; padding:1rem; border-radius:.5rem; box-shadow:var(--shadow); }
  header nav ul.show { display:flex; }
  .nav-toggle { display:flex; }
}

/* FOOTER */
footer {
  text-align:center;
  font-size:.9rem;
  padding:1rem;
  background: linear-gradient(135deg, var(--primary-dark), #333);
  color:#fff;
}
footer .container { max-width: 1200px; margin: 0 auto; }
footer a { color:#fff; font-weight:600; margin:0 .4rem; }
footer a:hover { text-decoration:underline; opacity:.85; }


/* Tooltip */
.tt { position: relative; display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; cursor: help; }
.tt:hover::after { content: attr(data-full); position: absolute; left: 0; top: 100%; z-index: 10; background: #111; color: #fff; padding: 6px 8px; border-radius: 6px; white-space: normal; width: 320px; box-shadow: 0 6px 18px rgba(0,0,0,.2); margin-top: 6px; }
.tt:hover::before { content: ''; position: absolute; left: 8px; top: 100%; border: 6px solid transparent; border-bottom-color: #111; transform: translateY(-1px); }

/* Alerts */
.alert { padding:.6rem .8rem; border-radius:.4rem; margin:.8rem 0; }
.alert-error { background:#fde8e8; color:#7a1f1f; border:1px solid #f5b5b5; }
.alert-success { background:#e8f9ed; color:#1f7a3a; border:1px solid #b5f5c9; }
.muted { color:#666; font-size:.95rem; }


/* Custom select arrow */
.select-sm { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(135deg, var(--primary), var(--primary-dark)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='white'><path d='M5.516 7.548l4.484 4.485 4.484-4.485 1.414 1.414-5.898 5.898-5.898-5.898z'/></svg>"); background-repeat: no-repeat, no-repeat; background-position: left top, right .6rem center; background-size: 0 0, 12px 12px; padding-right: 2rem; }
.select-sm:hover { border-color: var(--primary); }


/* Pagination */
.pagination { margin-top:1rem; text-align:center; }
.pagination .page { display:inline-block; padding:.4rem .7rem; margin: 0 .2rem; border:1px solid #ddd; border-radius:.4rem; background:#fff; text-decoration:none; }
.pagination .page:hover { background:#fef6f0; border-color:#f39200; }
.pagination .current { display:inline-block; padding:.4rem .7rem; margin: 0 .2rem; border:1px solid var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border-radius:.4rem; }

/* Badge-ek */
.badge { display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; font-weight:700; background:#eee; color:#333; border:1px solid #ddd; }
.badge--uj   { background:#eaf4ff; color:#0a4b8f; border-color:#cfe6ff; }
.badge--proc { background:#fff7e6; color:#8a5a00; border-color:#ffe0a3; }
.badge--ship { background:#e9fbef; color:#1e7e34; border-color:#c9f2d6; }
.badge--del  { background:#fdeaea; color:#7a1f1f; border-color:#f5c2c2; }

/* Kétoszlopos szekció */
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
@media (max-width: 992px) { .two-col { grid-template-columns: 1fr; } }

/* HERO */
.hero { background: radial-gradient(1200px 400px at 20% 20%, rgba(243,146,0,.18), transparent), linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding: 3rem 1rem; border-radius: 1rem; box-shadow: var(--shadow); }
.hero-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.hero h1 { font-size:2.2rem; margin-bottom:.4rem; }
.hero p  { opacity:.95; }
.hero-search { margin:1rem auto 0; display:flex; gap:.5rem; justify-content:center; }
.hero-search input { width: min(520px, 90%); padding:.9rem 1rem; border:none; border-radius:.6rem; }
.hero-search button { border-radius:.6rem; padding:.9rem 1.2rem; }
.hero-cta { margin-top:.8rem; }


/* ===== 🌙 SZEZONÁLIS HERO VARIÁCIÓK ===== */
/* ===== 🎃 HALLOWEEN ===== */
.hero.halloween {
  position: relative;
  background: radial-gradient(1000px 400px at 20% 20%, rgba(255,140,0,.25), transparent),
              linear-gradient(135deg, #1a0f0f, #3a1e00);
  color: orange;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,140,0,0.2);
}

/* Címsor */
.hero.halloween h1::before { content: "🎃 "; }

/* Keresőmező */
.hero.halloween .hero-search input {
  border: 2px solid orange;
  background: rgba(255,255,255,0.9);
  position: relative;
  z-index: 10;
}

/* Kereső gomb */
.hero.halloween .hero-search button {
  background: orange;
  color: #1a0f0f;
  border: none;
  box-shadow: 0 0 10px rgba(255,165,0,0.6);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}
.hero.halloween .hero-search button:hover {
  background: #ffb347;
  transform: scale(1.05);
}

/* Töklámpások */
.hero.halloween .pumpkin {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  animation: floatItem 6s ease-in-out infinite, flicker 5s ease-in-out infinite, drift 20s linear infinite;
  pointer-events: none;
  z-index: 5;
}

/* Töklámpások pozíciói – nem takarják a keresőt */
.hero.halloween .pumpkin.p1 {
  background-image: url('/images/icons/pumpkin1.svg');
  width: 70px; height: 70px;
  top: 20px; left: 5%;
  animation-delay: 0s;
}

.hero.halloween .pumpkin.p2 {
  background-image: url('/images/icons/pumpkin2.svg');
  width: 80px; height: 80px;
  bottom: 5%; left: 10%;
  animation-delay: 1s;
}

.hero.halloween .pumpkin.p3 {
  background-image: url('/images/icons/pumpkin3.svg');
  width: 65px; height: 65px;
  top: 15%; right: 10%;
  animation-delay: 2s;
}

.hero.halloween .pumpkin.p4 {
  background-image: url('/images/icons/pumpkin4.svg');
  width: 85px; height: 85px;
  bottom: 8%; right: 15%;
  animation-delay: 3s;
}

/* Középső tök — lejjebb és kicsit jobbra rakva, hogy ne legyen útban */
.hero.halloween .pumpkin.p5 {
  background-image: url('/images/icons/pumpkin5.svg');
  width: 60px; height: 60px;
  top: 68%; left: 55%;
  animation-delay: 4s;
}


/* ===== ✝️ MINDENSZENTEK ===== */
.hero.allsaints {
  position: relative;
  background: radial-gradient(900px 400px at 40% 30%, rgba(255,255,255,0.15), transparent),
              linear-gradient(135deg, #2c2c2c, #4f4f4f);
  color: #f8f8f8;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.1);
}

/* Címsor */
.hero.allsaints h1::before { content: "✝️ "; }

/* Keresőmező és gomb */
.hero.allsaints .hero-search input,
.hero.allsaints .hero-search button {
  position: relative;
  z-index: 10;
}
.hero.allsaints .hero-search input {
  border: 2px solid #ccc;
  background: rgba(255,255,255,0.85);
}
.hero.allsaints .hero-search button {
  background: #666;
  color: #fff;
  border: none;
  box-shadow: 0 0 10px rgba(255,255,255,0.4);
  transition: all 0.3s ease;
}
.hero.allsaints .hero-search button:hover {
  background: #888;
  transform: scale(1.05);
}

/* Lebegő díszek */
.hero.allsaints .saint {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.6;
  animation: floatItem 8s ease-in-out infinite, fadeGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

/* Mind a 14 dísz külön helyen */
.hero.allsaints .saint.s1  { background-image:url('/images/icons/mindenszentek1.svg');   width:85px; height:85px; top:8%; left:8%; animation-delay:0s; }
.hero.allsaints .saint.s2  { background-image:url('/images/icons/mindenszentek2.svg'); width:80px; height:80px; top:12%; right:10%; animation-delay:0.5s; }
.hero.allsaints .saint.s3  { background-image:url('/images/icons/mindenszentek3.svg'); width:70px; height:70px; bottom:12%; left:12%; animation-delay:1s; }
.hero.allsaints .saint.s4  { background-image:url('/images/icons/mindenszentek4.svg'); width:75px; height:75px; bottom:15%; right:15%; animation-delay:1.5s; }
.hero.allsaints .saint.s5  { background-image:url('/images/icons/mindenszentek5.svg'); width:65px; height:65px; top:45%; left:10%; animation-delay:2s; }
.hero.allsaints .saint.s6  { background-image:url('/images/icons/mindenszentek6.svg'); width:90px; height:90px; top:40%; right:12%; animation-delay:2.5s; }
.hero.allsaints .saint.s7  { background-image:url('/images/icons/mindenszentek7.svg'); width:70px; height:70px; bottom:8%; left:40%; animation-delay:3s; }
.hero.allsaints .saint.s8  { background-image:url('/images/icons/mindenszentek8.svg'); width:80px; height:80px; top:60%; right:45%; animation-delay:3.5s; }
.hero.allsaints .saint.s9  { background-image:url('/images/icons/mindenszentek9.svg'); width:75px; height:75px; top:30%; left:45%; animation-delay:4s; }
.hero.allsaints .saint.s10 { background-image:url('/images/icons/mindenszentek10.svg'); width:85px; height:85px; bottom:5%; right:30%; animation-delay:4.5s; }
.hero.allsaints .saint.s11 { background-image:url('/images/icons/mindenszentek11.svg'); width:65px; height:65px; top:25%; left:25%; animation-delay:5s; }
.hero.allsaints .saint.s12 { background-image:url('/images/icons/mindenszentek12.svg'); width:70px; height:70px; top:50%; right:25%; animation-delay:5.5s; }
.hero.allsaints .saint.s13 { background-image:url('/images/icons/mindenszentek13.svg'); width:80px; height:80px; bottom:18%; left:60%; animation-delay:6s; }
.hero.allsaints .saint.s14 { background-image:url('/images/icons/mindenszentek14.svg'); width:75px; height:75px; top:15%; right:35%; animation-delay:6.5s; }

/* ===== 🎄 KARÁCSONY ===== */
.hero.christmas {
  position: relative;
  background: radial-gradient(1000px 400px at 25% 25%, rgba(255,215,0,0.25), transparent),
              linear-gradient(135deg, #7a0000, #004d00);
  color: #fffbea;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.15);
}

/* Címsor */
.hero.christmas h1::before { content: "🎄 "; }

/* Keresőmező és gomb mindig felül marad */
.hero.christmas .hero-search input,
.hero.christmas .hero-search button {
  position: relative;
  z-index: 10;
}
.hero.christmas .hero-search input {
  border: 2px solid #ffcc00;
  background: rgba(255,255,255,0.95);
}
.hero.christmas .hero-search button {
  background: #ff0000;
  color: #fffbea;
  border: none;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero.christmas .hero-search button:hover {
  background: #e60000;
  transform: scale(1.05);
}

/* Lebegő díszek */
.hero.christmas .xmas {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  animation: floatItem 7s ease-in-out infinite, sparkle 5s ease-in-out infinite, drift 20s linear infinite;
  pointer-events: none;
  z-index: 5; /* mindig a háttér fölött, de az input alatt */
}

/* Mind a 8 külön pozícióban */
.hero.christmas .xmas.x1 { background-image:url('/images/icons/chrismass1.svg'); width:70px; height:70px; top:10%; left:5%; animation-delay:0s; }
.hero.christmas .xmas.x2 { background-image:url('/images/icons/chrismass2.svg'); width:75px; height:75px; top:20%; right:10%; animation-delay:1s; }
.hero.christmas .xmas.x3 { background-image:url('/images/icons/chrismass3.svg'); width:80px; height:80px; bottom:10%; left:12%; animation-delay:2s; }
.hero.christmas .xmas.x4 { background-image:url('/images/icons/chrismass4.svg'); width:85px; height:85px; bottom:12%; right:15%; animation-delay:3s; }
.hero.christmas .xmas.x5 { background-image:url('/images/icons/chrismass5.svg'); width:70px; height:70px; top:35%; left:20%; animation-delay:4s; }
.hero.christmas .xmas.x6 { background-image:url('/images/icons/chrismass6.svg'); width:75px; height:75px; top:40%; right:22%; animation-delay:5s; }
.hero.christmas .xmas.x7 { background-image:url('/images/icons/chrismass7.svg'); width:60px; height:60px; top:60%; left:45%; animation-delay:6s; }
.hero.christmas .xmas.x8 { background-image:url('/images/icons/chrismass8.svg'); width:70px; height:70px; bottom:5%; right:45%; animation-delay:7s; }


/* ===== 🌬 Közös lebegés animáció ===== */

/* Lebegés */
@keyframes floatItem {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-10px) scale(1.03); opacity: 1; }
}

/* Villódzó fény */
@keyframes flicker {
  0%, 100% { opacity: 0.8; }
  25% { opacity: 0.4; }
  50% { opacity: 1; }
  75% { opacity: 0.6; }
}

/* Finom oldalirányú mozgás – “szélfútta” hatás */
@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

/* INFO STRIP */
.trust-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.6rem; margin:1rem 0 1.2rem; }
.trust-strip > div { background:#fff; border:1px solid var(--border); border-radius:.6rem; padding:.7rem 1rem; box-shadow: var(--shadow); text-align:center; font-weight:600; }

/* CHIPS */
.chips { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1rem; }
.chip { display:inline-block; background:#fff; border:1px solid #eee; color:#333; padding:.45rem .8rem; border-radius:999px; text-decoration:none; box-shadow: var(--shadow); }
.chip:hover { background:#fef6f0; border-color: var(--primary); text-decoration:none; }

/* PROMÓ */
.promo { margin:1.5rem 0; }
.promo-card { background:#fff; border:1px solid var(--border); border-radius:1rem; padding:1.2rem; box-shadow: var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.promo-card h3 { margin:0; }

/* Max szélesség konténer */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Cím max 2 soron */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Szebb kategória chipek */
.chips-scroll { display:flex; gap:.6rem; overflow-x:auto; padding:.4rem .2rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.chips-scroll::-webkit-scrollbar { height: 8px; }
.chips-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 999px; }
.chip { scroll-snap-align: start; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius: 999px; background:#fff; border:1px solid #eee; box-shadow: var(--shadow); text-decoration:none; color:#333; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; will-change: transform; }
.chip:hover { transform: translateY(-2px); border-color: var(--primary); background: linear-gradient(180deg, #fff, #fff7ed); text-decoration:none; }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(243,146,0,.35); }
.chip-dot { width:.5rem; height:.5rem; border-radius:50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); flex: 0 0 auto; }
.chip-label { display:block; max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight:600; letter-spacing:.2px; }
@media (max-width: 520px) { .chip-label { max-width: 11ch; } }
#cookie-banner {
  font-size: .95rem;
  box-shadow: 0 -2px 6px rgba(0,0,0,.25);
}
#cookie-banner a { color:#ffd36a; font-weight:600; }
#cookie-banner button:hover {
  background:#d37f00;
}
/* --- Lightbox galéria --- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}
.lightbox-content { position: relative; max-width: 90%; max-height: 90%; }
.lightbox-img { max-width: 100%; max-height: 80vh; border-radius: .6rem; }
.lightbox-close {
  position: absolute; top: -10px; right: -10px;
  font-size: 2rem; color: #fff; cursor: pointer;
}
.lightbox-nav button {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2rem; background: rgba(0,0,0,.4); color: #fff;
  border: none; padding: .4rem .8rem; cursor: pointer;
}
.lightbox-nav .prev { left: -50px; }
.lightbox-nav .next { right: -50px; }

/* ===== NAVIGATION ===== */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  position: relative;
}

.main-nav .brand img {
  height: 50px;
}

.main-nav .nav-links {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav .nav-links a {
  color: #333;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  transition: all 0.2s ease;
}

.main-nav .nav-links a:hover {
  color: #007bff;
}

.main-nav .badge {
  background: #007bff;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

/* ===== MOBILE ===== */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .main-nav .nav-links {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 70px;
    right: 0;
    width: 220px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 1rem;
  }

  .main-nav .nav-links.active {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}
/* --- Menü gombok stílus finomítás --- */
header nav ul li a {
  color: #fff !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .8rem;
  border-radius: .4rem;
  transition: background .25s ease, transform .2s ease;
}

/* Hover: világosabb narancs háttér, enyhe emelés */
header nav ul li a:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Aktív / fókuszált link kiemelés */
header nav ul li a:focus-visible {
  outline: none;
  background: rgba(255,255,255,0.25);
}

/* Kosár badge kiemelés a narancs háttéren */
header nav ul li a .badge {
  background: #0056a3;
  color: #fff;
  border: 2px solid #fff;
  font-size: .8rem;
  padding: 0 .4rem;
  border-radius: 999px;
  margin-left: .3rem;
}

/* --- Mobilmenü láthatóság fix --- */
@media (max-width:768px) {
  header nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 65px;
    right: 1rem;
    background: var(--primary-dark);
    border-radius: .6rem;
    padding: 1rem;
    box-shadow: var(--shadow);
    z-index: 999; /* fontos! hogy ne legyen a háttér mögött */
  }

  header nav ul.show {
    display: flex;
  }

  header nav ul li a {
    color: #fff !important;
    font-size: 1.1rem;
    padding: .6rem 1rem;
    border-radius: .4rem;
  }

  header nav ul li a:hover {
    background: rgba(255,255,255,0.15);
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all .3s ease;
  }
}
.nav-toggle {
  position: relative;
  z-index: 2000; /* minden fölé kerül */
}
/* --- Mobilmenü végleges fix --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2001;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

.nav-menu li a {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.4rem;
  transition: background 0.25s ease;
}

.nav-menu li a:hover {
  background: rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 64px;
    right: 1rem;
    background: var(--primary-dark);
    border-radius: 0.6rem;
    padding: 1rem;
    box-shadow: var(--shadow);
    z-index: 2000;
  }

  .nav-menu.show { display: flex; }

  .nav-menu li a {
    font-size: 1.1rem;
    padding: 0.6rem 1rem;
    color: #fff !important;
  }
}

/* ===== TERMÉKOLDAL LAYOUT ===== */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* CSAK MOBILON */
@media (max-width: 768px) {
  .product-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .main-photo-wrap {
    position: relative;
  }

  .main-photo-wrap::after {
    content: "📷 Több kép – koppints";
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: .75rem;
    padding: 4px 8px;
    border-radius: 999px;
    pointer-events: none;
  }

  .thumb-gallery {
    display: none !important;
  }
}