/* ══════════════════════════════════════════════════════
   Nice Order – Frontend CSS v1.0.0
   ══════════════════════════════════════════════════════ */

/* ── CSS változók (brand színek JS-ből felülírhatók) ── */
:root {
  --no-primary:        #C49444;
  --no-primary-hover:  #8B6318;
  --no-primary-deep:   #5C3D0A;
  --no-card-bg:        #FDF8F0;
  --no-card-border:    rgba(196,148,68,0.22);
  --no-card-shadow:    0 2px 12px rgba(90,55,10,0.10);
  --no-card-shadow-h:  0 8px 28px rgba(90,55,10,0.18);
  --no-text:           #2A1F0A;
  --no-text-muted:     #7A5C30;
  --no-cream:          #FDF8F0;
  --no-cream-dark:     #F5EDD8;
  --no-radius:         14px;
  --no-transition:     180ms cubic-bezier(0.16,1,0.3,1);
}

/* ── Wrapper ─────────────────────────────────────────── */
.no-wrapper {
  --no-card-w: 200px;
  --no-card-img-h: 170px;
  --no-gap: 14px;
  position: relative;
  margin-block: 28px;
  font-family: inherit;
}

/* ── Header / Nav ────────────────────────────────────── */
.no-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-inline: 2px;
}
.no-header__title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--no-text);
  margin: 0;
}
/* Erős override – téma sticky h2 szabályait semlegesíti */
.no-wrapper .no-header__title,
.no-wrapper h2.no-header__title,
.entry-content .no-wrapper .no-header__title,
body .no-wrapper h2.no-header__title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.no-header__nav { display: flex; gap: 8px; }
.no-nav {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--no-primary);
  background: var(--no-cream);
  color: var(--no-primary-hover);
  cursor: pointer;
  transition: all var(--no-transition);
  flex-shrink: 0;
}
.no-nav:hover {
  background: var(--no-primary);
  border-color: var(--no-primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(140,90,20,.30);
}
.no-nav:disabled { opacity: .3; pointer-events: none; }

/* ── Scroll container ────────────────────────────────── */
.no-scroll-container {
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}
.no-scroll-container::-webkit-scrollbar { display: none; }
.no-track {
  display: flex; gap: var(--no-gap);
  padding-inline: 40px;
  width: max-content;
}

/* ── Kártya – alap ───────────────────────────────────── */
.no-card {
  position: relative;
  width: var(--no-card-w);
  flex-shrink: 0;
  background: var(--no-card-bg);
  border-radius: var(--no-radius);
  border: 1px solid var(--no-card-border);
  box-shadow: var(--no-card-shadow);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  outline: none;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.no-card:hover, .no-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--no-card-shadow-h);
  border-color: var(--no-primary);
}
.no-card:focus-visible { outline: 2px solid var(--no-primary); outline-offset: 3px; }

/* ── Kártya – kép ────────────────────────────────────── */
.no-card__img-wrap {
  position: relative; width: 100%;
  height: var(--no-card-img-h);
  overflow: hidden; background: var(--no-cream-dark);
  flex-shrink: 0;
}
.no-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; transition: transform 300ms ease; }
.no-card:hover .no-card__img { transform: scale(1.05); }
.no-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff;
  transition: background 200ms ease; pointer-events: none;
}
.no-card__overlay svg { opacity: 0; transform: scale(.7); transition: opacity 200ms, transform 200ms; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.no-card:hover .no-card__overlay { background: rgba(44,25,5,.30); }
.no-card:hover .no-card__overlay svg,
.no-card:focus-visible .no-card__overlay svg { opacity: 1; transform: scale(1); }

/* ── Badge-ek ────────────────────────────────────────── */
.no-card__badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.no-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 99px;
  line-height: 1.3; white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.no-badge--sale    { background: rgba(220,60,30,0.88);  color: #fff; }
.no-badge--new     { background: rgba(255,200,0,0.92);  color: #333; }
.no-badge--popular { background: rgba(50,50,50,0.80);   color: #ffd700; }

/* ── Kártya – body ───────────────────────────────────── */
.no-card__body { overflow: visible; padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.no-card__name { font-size: 13.5px; font-weight: 700; color: var(--no-text); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-card__desc { font-size: 11.5px; color: var(--no-text-muted); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-card__price { display: block; font-size: 15px; font-weight: 700; color: var(--no-primary-hover); margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(196,148,68,.20); }
.no-card__price del { color: var(--no-text-muted); font-weight: 400; font-size: 12px; margin-right: 4px; opacity: .7; }
.no-card__price ins { text-decoration: none; }

/* ── Kártya allergének ───────────────────────────────── */
.no-card__allergens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; margin-bottom: 3px; }
.no-allergen { position: relative; font-size: 14px; cursor: default; outline: none; padding: 1px 2px; border-radius: 4px; transition: background 130ms; }
.no-allergen:hover { background: rgba(140,90,20,.10); }
.no-allergen__tip {
  position: fixed;
  background: var(--no-primary-hover, #8B6318); color: #fff;
  font-size: 10.5px; font-weight: 500; padding: 4px 9px;
  border-radius: 4px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 140ms ease; z-index: 99999;
  /* kezdeti pozíció: viewport-on kívül, hogy mérni lehessen */
  top: -200px; left: -200px;
}
.no-allergen__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--no-primary-hover, #8B6318); pointer-events: none; }
/* tooltip megjelenítés: JS kezeli az opacity-t és pozíciót */
.no-allergen.no-open .no-allergen__tip { opacity: 1; }

/* ══ KÁRTYASTÍLUSOK ══════════════════════════════════════ */
/* Minimal */
.no-card-style--minimal .no-card { background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border-radius: 8px; }
.no-card-style--minimal .no-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #ccc; }
/* Bordered */
.no-card-style--bordered .no-card { border: 2px solid var(--no-primary); border-radius: 10px; }
/* Dark */
.no-card-style--dark .no-card { background: #1a1a2e; border-color: rgba(196,148,68,0.3); color: #e8e8e8; }
.no-card-style--dark .no-card__name { color: #f0f0f0; }
.no-card-style--dark .no-card__desc { color: #aaa; }
.no-card-style--dark .no-card__price { color: var(--no-primary); border-top-color: rgba(196,148,68,0.2); }
/* Glassmorphism */
.no-card-style--glassmorphism .no-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* ══ MODAL OVERLAY ═══════════════════════════════════════ */
.no-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.16,1,0.3,1), visibility 0ms linear 280ms;
}
.no-modal-overlay.no-modal--open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0.16,1,0.3,1), visibility 0ms linear 0ms;
}

/* ── Modal doboz ─────────────────────────────────────── */
.no-modal {
  position: relative; background: #fff;
  border-radius: 18px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  width: 100%; max-width: 860px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(28px) scale(0.96); opacity: 0;
  transition: transform 340ms cubic-bezier(0.16,1,0.3,1), opacity 280ms cubic-bezier(0.16,1,0.3,1);
}
.no-modal-overlay.no-modal--open .no-modal { transform: translateY(0) scale(1); opacity: 1; }
.no-modal-overlay.no-modal--closing .no-modal { transform: translateY(20px) scale(0.97); opacity: 0; transition: transform 240ms cubic-bezier(0.4,0,1,1), opacity 220ms cubic-bezier(0.4,0,1,1); }
.no-modal-overlay.no-modal--added .no-modal { transform: translateY(-30px) scale(1.02); opacity: 0; transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 280ms cubic-bezier(0.16,1,0.3,1); }

.no-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12); background: #f5f5f5; color: #666;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--no-transition); z-index: 10;
}
.no-modal__close:hover { background: #e8e8e8; color: #222; border-color: rgba(0,0,0,0.2); }

/* ── Modal belső ─────────────────────────────────────── */
.no-modal__inner { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; overflow: hidden; }
.no-modal__gallery { background: #f8f8f8; border-right: 1px solid rgba(0,0,0,0.07); display: flex; flex-direction: column; overflow: hidden; }
.no-modal__main-img-wrap { position: relative; flex: 1; overflow: hidden; min-height: 240px; }
.no-modal__main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms ease; }
.no-modal__main-img.no-loading { opacity: .4; }
.no-modal__thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }
.no-modal__thumbs::-webkit-scrollbar { display: none; }
.no-modal__thumb { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; opacity: .65; transition: all var(--no-transition); }
.no-modal__thumb:hover { opacity: 1; border-color: var(--no-primary); }
.no-modal__thumb.active { opacity: 1; border-color: var(--no-primary-hover); box-shadow: 0 0 0 1px var(--no-primary-hover); }

.no-modal__content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.no-modal__scroll { flex: 1; overflow-y: auto; padding: 26px 24px 16px; scrollbar-width: thin; scrollbar-color: rgba(196,148,68,0.3) transparent; min-height: 0; }
.no-modal__scroll::-webkit-scrollbar { width: 4px; }
.no-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.no-modal__scroll::-webkit-scrollbar-thumb { background: rgba(196,148,68,0.35); border-radius: 4px; }

.no-modal__title { font-size: clamp(1.1rem,2.5vw,1.45rem); font-weight: 700; color: #1a1a1a; margin: 0 0 8px; padding-right: 30px; line-height: 1.25; }
.no-modal__price { font-size: 1.3rem; font-weight: 700; color: var(--no-primary-hover); margin-bottom: 12px; }
.no-modal__price del { color: #999; font-weight: 400; font-size: 1rem; margin-right: 6px; opacity: .7; }
.no-modal__price ins { text-decoration: none; }
.no-modal__short-desc { font-size: .875rem; color: #555; line-height: 1.65; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-modal__short-desc:empty { display: none; }

/* Variációk */
.no-modal__variations { margin-bottom: 14px; }
.no-modal__variations:empty { display: none; }
.no-modal__variations select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid rgba(0,0,0,0.18); background: #fff; color: #222; font-size: .875rem; margin-top: 4px; cursor: pointer; transition: border-color var(--no-transition); }
.no-modal__variations select:focus { outline: none; border-color: var(--no-primary); }

/* Add-ons */
.no-modal__addons { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-modal__addons:empty { display: none; }

/* Allergének modal */
.no-modal__allergens { margin-bottom: 14px; padding: 11px 13px; background: #fffbf4; border-radius: 10px; border: 1px solid rgba(196,148,68,0.22); }
.no-modal__allergens:empty { display: none; }
.no-modal__allergens-title { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--no-primary-hover); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 9px; }
.no-modal__allergens-list { display: flex; flex-wrap: wrap; gap: 6px; }
.no-allergen-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: #fff; border: 1px solid rgba(196,148,68,0.28); font-size: .8rem; color: #333; font-weight: 500; }
.no-allergen-badge__icon { font-size: 14px; }
.no-allergen-badge__name { font-size: .78rem; color: #777; }

/* Értesítő */
.no-modal__notice { padding: 10px 14px; border-radius: 8px; font-size: .875rem; margin-bottom: 14px; font-weight: 500; }
.no-modal__notice.no-notice--success { background: #edf7ed; color: #2e6b2e; border: 1px solid #b5d8b5; }
.no-modal__notice.no-notice--error   { background: #fdecea; color: #8b1a1a; border: 1px solid #f5b8b8; }

/* Mennyiségválasztó */
.no-qty-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-qty-label { font-size: .8rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.no-qty { display: inline-flex; align-items: center; background: #f5f5f5; border-radius: 99px; border: 1.5px solid rgba(0,0,0,0.10); overflow: hidden; height: 40px; }
.no-qty__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #333; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: background var(--no-transition), color var(--no-transition); flex-shrink: 0; line-height: 1; user-select: none; }
.no-qty__btn:hover:not(:disabled) { background: var(--no-primary); color: #fff; }
.no-qty__btn:disabled { opacity: .3; cursor: not-allowed; }
.no-qty__val { min-width: 36px; text-align: center; font-size: .95rem; font-weight: 700; color: #1a1a1a; user-select: none; padding: 0 2px; }

/* ── Modal footer ────────────────────────────────────── */
.no-modal__footer { flex-shrink: 0; padding: 14px 24px 16px; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 8px; }

/* Zárva banner */
.no-modal__closed-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: #fef3f2; border: 1px solid #fca5a5; color: #991b1b; font-size: .9rem; font-weight: 600; }

.no-modal__cart-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 20px; border-radius: 10px; background: linear-gradient(135deg, var(--no-primary) 0%, var(--no-primary-hover) 100%); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; border: none; transition: all var(--no-transition); box-shadow: 0 4px 14px rgba(140,90,20,0.25); }
.no-modal__cart-btn:hover { background: linear-gradient(135deg, var(--no-primary-hover) 0%, var(--no-primary-hover, #8B6318) 100%); box-shadow: 0 6px 20px rgba(140,90,20,0.35); transform: translateY(-1px); }
.no-modal__cart-btn:active { transform: translateY(0); }
.no-modal__cart-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.no-modal__cart-btn.no-added { background: linear-gradient(135deg, #4a7c3f, #2e5c25); box-shadow: 0 4px 14px rgba(40,90,20,0.25); }
.no-modal__permalink { display: block; text-align: center; font-size: .8rem; color: #888; text-decoration: none; transition: color var(--no-transition); }
.no-modal__permalink:hover { color: var(--no-primary-hover); }

/* ── Loader ──────────────────────────────────────────── */
.no-modal__loader { position: absolute; inset: 0; background: rgba(255,255,255,0.88); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms; pointer-events: none; border-radius: 18px; }
.no-modal__loader.active { opacity: 1; pointer-events: all; }
.no-modal__spinner { width: 40px; height: 40px; border: 3px solid rgba(196,148,68,0.25); border-top-color: var(--no-primary); border-radius: 50%; animation: no-spin .7s linear infinite; }
@keyframes no-spin { to { transform: rotate(360deg); } }

/* ── Reszponzív ──────────────────────────────────────── */
@media (max-width: 600px) {
  .no-wrapper { --no-card-w: 155px; --no-card-img-h: 125px; }
  .no-card__name { font-size: 12.5px; }
  .no-card__price { font-size: 13.5px; }
  .no-track { padding-inline: 16px; }
  .no-scroll-container { mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%); }
  .no-modal-overlay { align-items: flex-end; padding: 0; }
  .no-modal { max-width: 100%; max-height: 93vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .no-modal-overlay.no-modal--closing .no-modal,
  .no-modal-overlay.no-modal--added .no-modal { transform: translateY(60px) scale(1); }
  .no-modal__inner { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .no-modal__gallery { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .no-modal__scroll { padding: 18px 16px 12px; }
  .no-modal__footer { padding: 12px 16px 14px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .no-wrapper { --no-card-w: 175px; --no-card-img-h: 145px; }
  .no-modal { max-width: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  .no-modal, .no-modal-overlay { transition: none !important; }
}


/* ══════════════════════════════════════════════════════
   Layout módok – Grid / Masonry / List
   ══════════════════════════════════════════════════════ */

/* ── GRID ────────────────────────────────────────────── */
.no-layout--grid .no-products-area { width: 100%; }
.no-grid {
  display: grid;
  grid-template-columns: repeat(var(--no-cols, 3), 1fr);
  gap: var(--no-gap, 18px);
}
.no-grid .no-card { width: auto; }
.no-grid .no-card__img-wrap { height: 180px; }

@media (max-width: 800px) {
  .no-grid { grid-template-columns: repeat(min(var(--no-cols,3), 2), 1fr); }
}
@media (max-width: 480px) {
  .no-grid { grid-template-columns: 1fr; }
  .no-grid .no-card__img-wrap { height: 200px; }
  .no-grid .no-card__img { object-position: center center; }
}

/* ── MASONRY ─────────────────────────────────────────── */
.no-layout--masonry .no-products-area { width: 100%; }
.no-masonry {
  columns: var(--no-cols, 3) 200px;
  column-gap: var(--no-gap, 16px);
}
.no-masonry .no-card--masonry {
  width: auto;
  break-inside: avoid;
  margin-bottom: var(--no-gap, 16px);
  display: flex;
  flex-direction: column;
}
.no-masonry .no-card--masonry .no-card__img-wrap {
  height: auto;
  aspect-ratio: auto;
}
.no-masonry .no-card--masonry .no-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 260px;
}
@media (max-width: 600px) {
  .no-masonry { columns: 2 140px; }
}

/* ── LIST ────────────────────────────────────────────── */
.no-layout--list .no-products-area { width: 100%; }
.no-list { display: flex; flex-direction: column; gap: 10px; }

.no-list-item {
  display: grid;
  grid-template-columns: 84px 1fr auto 28px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  background: var(--no-card-bg);
  border-radius: 12px;
  border: 1px solid var(--no-card-border);
  box-shadow: var(--no-card-shadow);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  outline: none;
}
.no-list-item:hover, .no-list-item:focus-visible {
  transform: translateX(3px);
  box-shadow: var(--no-card-shadow-h);
  border-color: var(--no-primary);
}
.no-list-item:focus-visible { outline: 2px solid var(--no-primary); outline-offset: 3px; }

.no-list-item__img-wrap {
  width: 84px; height: 84px;
  border-radius: 10px; overflow: hidden;
  background: var(--no-cream-dark); flex-shrink: 0;
}
.no-list-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-list-item__body { min-width: 0; }
.no-list-item__top  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.no-list-item__name { font-size: 14.5px; font-weight: 700; color: var(--no-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-list-item__desc { font-size: 12.5px; color: var(--no-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.no-list-item__badges { display: flex; gap: 4px; flex-wrap: nowrap; }
.no-list-item__price { font-size: 15px; font-weight: 700; color: var(--no-primary-hover); white-space: nowrap; text-align: right; }
.no-list-item__price del { display: block; font-size: 11px; font-weight: 400; color: var(--no-text-muted); opacity: .7; }
.no-list-item__price ins { text-decoration: none; }
.no-list-item__arrow { color: var(--no-primary); opacity: .55; transition: opacity 180ms, transform 180ms; }
.no-list-item:hover .no-list-item__arrow { opacity: 1; transform: translateX(2px); }

@media (max-width: 480px) {
  .no-list-item {
    grid-template-columns: 80px 1fr auto 24px;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px;
    align-items: start;
  }
  .no-list-item__img-wrap {
    width: 80px; height: 80px;
    grid-row: 1 / 3;
  }
  .no-list-item__body {
    grid-column: 2;
    grid-row: 1;
    padding-top: 2px;
  }
  .no-list-item__price-wrap {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  .no-list-item__cart-btn-wrap {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }
  .no-list-item__name { font-size: 13px; line-height: 1.3; }
  .no-list-item__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; color: var(--no-text-muted); margin-top: 3px; }
  .no-list-item__badges { margin-top: 4px; }
}

/* ── Layout váltó gombok (ha JS generálja) ───────────── */
.no-layout-switcher {
  display: flex; gap: 6px; align-items: center;
}
.no-layout-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream); color: var(--no-text-muted);
  cursor: pointer; transition: all 160ms ease;
}
.no-layout-btn:hover { border-color: var(--no-primary); color: var(--no-primary-hover); }
.no-layout-btn.active {
  background: var(--no-primary); border-color: var(--no-primary);
  color: #fff; box-shadow: 0 2px 8px rgba(140,90,20,.25);
}

/* ── Kategória tab-ok ────────────────────────────────── */
.no-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.no-cat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream); color: var(--no-text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 160ms ease; white-space: nowrap;
  outline: none;
}
.no-cat-tab:hover { border-color: var(--no-primary); color: var(--no-primary-hover); background: rgba(196,148,68,.07); }
.no-cat-tab.active {
  background: var(--no-primary); border-color: var(--no-primary);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(140,90,20,.20);
}
.no-cat-tab__icon { font-size: 15px; }
.no-cat-tab[disabled] { opacity: .5; pointer-events: none; }

/* Betöltő skeleton kategória váltáshoz */
.no-products-area.no-loading-area {
  position: relative; pointer-events: none;
}
.no-products-area.no-loading-area::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(253,248,240,.7);
  border-radius: 8px;
  z-index: 5;
  backdrop-filter: blur(2px);
}
.no-products-area.no-loading-area::before {
  content: "Betöltés…";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 13px; font-weight: 600;
  color: var(--no-primary-hover); z-index: 6;
  padding: 8px 18px; border-radius: 99px;
  background: rgba(253,248,240,.95);
  border: 1px solid var(--no-card-border);
  box-shadow: 0 2px 12px rgba(140,90,20,.12);
}

/* ── Autoplay progress sáv (carousel) ───────────────── */
.no-autoplay-bar {
  height: 3px; border-radius: 2px;
  background: rgba(196,148,68,.15);
  margin-top: 10px; overflow: hidden;
}
.no-autoplay-bar__fill {
  height: 100%; border-radius: 2px;
  background: var(--no-primary);
  transform-origin: left; transform: scaleX(0);
}
.no-autoplay-bar__fill.no-playing {
  animation: no-autoplay-fill linear forwards;
}
@keyframes no-autoplay-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Üres állapot ────────────────────────────────────── */
.no-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 48px 24px; text-align: center;
  color: var(--no-text-muted);
}
.no-empty-state span { font-size: 40px; }
.no-empty-state p    { font-size: 14px; }


/* ══════════════════════════════════════════════════════
   v2.1.0 – Mobil fixes: kategória csúszka, off-canvas nézet
   ══════════════════════════════════════════════════════ */

/* ── Kategória tab-ok: mobil horizontális csúszka ────── */
.no-cat-tabs {
  display: flex;
  flex-wrap: nowrap;           /* NEM törhet több sorba */
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* Halványul a széleken, jelzi a görgethetőséget */
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  scroll-snap-type: x proximity;
}
.no-cat-tabs::-webkit-scrollbar { display: none; }
.no-cat-tab {
  flex-shrink: 0;              /* Tab-ok NEM zsugorodnak */
  scroll-snap-align: start;
}

/* Ha az összes tab elfér: mask eltávolítása */
@media (min-width: 900px) {
  .no-cat-tabs {
    flex-wrap: nowrap;
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ── "További kategóriák" dropdown (csak desktop) ── */
.no-more-cats {
  display: none;
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .no-more-cats { display: inline-flex; align-items: center; }
}
.no-more-cats__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--no-primary, #C49444);
  background: transparent;
  color: var(--no-primary, #C49444);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, color 160ms;
  line-height: 1.4;
}
.no-more-cats__btn:hover {
  background: var(--no-primary, #C49444);
  color: #fff;
}
.no-more-cats__btn svg {
  transition: transform 200ms;
  flex-shrink: 0;
}
.no-more-cats.open .no-more-cats__btn svg {
  transform: rotate(180deg);
}
.no-more-cats__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 9999;
  flex-direction: column;
  gap: 2px;
}
.no-more-cats.open .no-more-cats__dropdown {
  display: flex;
}
.no-more-cats__dropdown .no-cat-tab {
  border-radius: 8px !important;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  flex-shrink: 0;
  scroll-snap-align: unset;
}



/* ── Header rearendezés mobilon ───────────────────────── */
.no-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
/* Cím: teljes sor mobilon ha van kategória */
.no-header__title { flex: 1 1 auto; } /* v3.7.17 */ /* v3.7.13: ne foglalja el az egész sort */
@media (min-width: 600px) {
  .no-header__title { flex: 1 1 auto; } /* v3.7.17 */
}
@media (min-width: 900px) {
  .no-header { flex-wrap: nowrap; align-items: center; }
}
/* Kategória tab-ok: teljes szélességű sor mobilon */
.no-cat-tabs {
  flex: 1 1 100%;
  
}
/* v3.7.17: order blokk eltávolítva – DOM sorrend elegendő */
/* Jobb oldali actions konténer: mindig a tabok UTÁN */
.no-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  order: 3; /* v3.7.15 */ /* v3.7.13: tabok elé kerül */
  flex-shrink: 0;
}
/* Jobb oldali vezérlők (carousel nyilak) */
.no-header__nav { order: 2; margin-left: auto; }
@media (min-width: 900px) { .no-header__nav { order: 3; } }

/* ── Desktop layout switcher ─────────────────────────── */
.no-layout-switcher--desktop {
  display: none; /* alapból rejtett */
  gap: 4px;
  order: 4;
  margin-left: 4px;
}
@media (min-width: 600px) {
  .no-layout-switcher--desktop { display: none !important; }
}
/* Mobilon a no-layout-dropdown-wrap rejtett, mobileBtn látszik */
@media (max-width: 599px) {
  .no-layout-dropdown-wrap { display: none !important; }
}

/* ── Mobil layout gomb ───────────────────────────────── */
.no-layout-mobile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream);
  color: var(--no-text-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  order: 2;
  margin-left: auto;
  white-space: nowrap;
}
.no-layout-mobile-btn:hover {
  border-color: var(--no-primary);
  color: var(--no-primary-hover);
  background: rgba(196,148,68,.07);
}
.no-layout-mobile-btn__label { font-size: 12px; }
.no-layout-mobile-btn__chevron { opacity: .6; }
@media (min-width: 600px) {
  .no-layout-mobile-btn { display: none; }
/* ── Layout dropdown: desktop megjelenítés ── */
@media (min-width: 600px) {
  .no-layout-dropdown-wrap { display: inline-flex !important; }
  .no-layout-mobile-btn    { display: none !important; }
}

}

/* ── Off-canvas overlay ──────────────────────────────── */
.no-layout-offcanvas {
  position: fixed; inset: 0;
  z-index: 999998;
  pointer-events: none;
  visibility: hidden;
}
.no-layout-offcanvas.no-offcanvas--open {
  pointer-events: auto;
  visibility: visible;
}
.no-layout-offcanvas__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 280ms ease;
}
.no-offcanvas--open .no-layout-offcanvas__backdrop {
  background: rgba(0,0,0,0.44);
}

.no-layout-offcanvas__panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  max-height: 60vh;
  overflow-y: auto;
}
.no-offcanvas--open .no-layout-offcanvas__panel {
  transform: translateY(0);
}

.no-layout-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: 0; background: #fff; z-index: 1;
  /* Húzó fül */
  background-image: radial-gradient(circle, #ddd 30%, transparent 30%);
  background-repeat: no-repeat;
  background-size: 36px 4px;
  background-position: center 8px;
  padding-top: 24px;
}
.no-layout-offcanvas__title {
  font-size: 15px; font-weight: 700; color: #1a1a1a;
}
.no-layout-offcanvas__close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: #f5f5f5; color: #555;
  cursor: pointer;
  transition: all 150ms ease;
}
.no-layout-offcanvas__close:hover { background: #eaeaea; color: #111; }

.no-layout-offcanvas__list {
  padding: 10px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-layout-offcanvas__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
  width: 100%;
}
.no-layout-offcanvas__item:hover { background: rgba(196,148,68,.07); border-color: rgba(196,148,68,.25); }
.no-layout-offcanvas__item.active {
  background: rgba(196,148,68,.12);
  border-color: var(--no-primary);
}
.no-layout-offcanvas__item-icon { color: var(--no-text-muted); flex-shrink: 0; }
.no-layout-offcanvas__item.active .no-layout-offcanvas__item-icon { color: var(--no-primary-hover); }
.no-layout-offcanvas__item-label {
  font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1;
}
.no-layout-offcanvas__item-check { color: var(--no-primary); flex-shrink: 0; margin-left: auto; }

/* ── no-loading-area: pointer-events kizárása ─────────── */
/* BUGFIX #1: az ::after pseudo-elem soha ne blokkolja a
   modal overlay fölötti kattintásokat. A modal z-index:99999,
   az ::after z-index:5 – tehát nem az okozza a hibát.
   Biztosítás: a loading overlay pointer-events:none marad,
   és az area-t sem blokkoljuk a modallal interakcióban. */
.no-products-area.no-loading-area { pointer-events: none; }
.no-products-area.no-loading-area::after { pointer-events: none; }

/* ── Korábbi inline desktop-switcher eltávolítása ──────── */
/* (az inject JS adja hozzá dinamikusan, de ha valaki
   kézzel írja a HTML-t, ez biztosítja a helyes megjelenést) */
.no-layout-switcher:not(.no-layout-switcher--desktop) { display: none; }


/* ══════════════════════════════════════════════════════
   v2.2.0 – Mobil: grid 1 oszlop, lista badge + desc fix
   ══════════════════════════════════════════════════════ */

/* ── GRID: mobilon 1 oszlop alapból ─────────────────── */
.no-grid {
  grid-template-columns: 1fr;          /* mobil: 1 oszlop */
}
@media (min-width: 480px) {
  .no-grid {
    grid-template-columns: 1fr 1fr;    /* tablet: 2 oszlop */
  }
}
@media (min-width: 700px) {
  .no-grid {
    /* desktop: a --no-cols változó érvényes (2-5) */
    grid-template-columns: repeat(var(--no-cols, 3), 1fr);
  }
}

/* Mobil 2 oszlopos override – JS adja hozzá a wrapper-re */
.no-wrapper.no-grid-cols-2 .no-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* ── LISTA: badge fix mobilon ────────────────────────── */
/*
  Struktúra változás:
  .no-list-item
    .no-list-item__img-wrap     ← kép, relatív pozíció
      .no-list-item__badges     ← MOST IDE kerül (absolute)
      img
    .no-list-item__body
      .no-list-item__top        ← csak a NÉV (badge nélkül)
      .no-list-item__desc       ← short desc
    .no-list-item__price
    .no-list-item__arrow

  CSS-sel oldjuk meg: a badge-ek a img-wrap-on belül
  abszolút pozícióban ülnek, a kép bal felső sarkán.
*/

/* Kép wrapper: relatív, hogy a badge abszolút lehessen */
.no-list-item__img-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Badge a képen belül – mobil */
.no-list-item__badges {
  position: absolute;
  top: 6px; left: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
}
.no-list-item__badges .no-badge {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.3;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* A no-list-item__top-ból kivesszük a badge-et (JS rendezi) */
.no-list-item__top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 3px;
}
/* Névbe nem kerül badge többé mobilon */
.no-list-item__top .no-list-item__badges {
  display: none; /* a régi helyen elrejtjük */
}

/* Short description mobilon: megjelenik */
.no-list-item__desc {
  font-size: 12px;
  color: var(--no-text-muted);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop: badge visszakerül a képre, desc marad */
@media (min-width: 600px) {
  .no-list-item__badges .no-badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .no-list-item__desc {
    -webkit-line-clamp: 2;
  }
}

/* ── Off-canvas: grid oszlopválasztó szekció ─────────── */
.no-offcanvas-section {
  padding: 12px 12px 4px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 4px;
}
.no-offcanvas-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--no-text-muted);
  margin: 0 0 8px 4px;
}
.no-offcanvas-cols {
  display: flex;
  gap: 8px;
  padding: 0 4px 12px;
}
.no-offcanvas-col-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fafafa;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.no-offcanvas-col-btn:hover {
  border-color: var(--no-primary);
  color: var(--no-primary-hover);
  background: rgba(196,148,68,.06);
}
.no-offcanvas-col-btn.active {
  border-color: var(--no-primary);
  background: rgba(196,148,68,.12);
  color: var(--no-primary-hover);
}
/* Grid preview ikonok */
.no-col-preview {
  display: grid;
  gap: 3px;
  width: 36px;
  height: 28px;
}
.no-col-preview--1 { grid-template-columns: 1fr; }
.no-col-preview--2 { grid-template-columns: 1fr 1fr; }
.no-col-preview span {
  background: currentColor;
  border-radius: 2px;
  opacity: .45;
}
.no-offcanvas-col-btn.active .no-col-preview span { opacity: .8; }

/* Grid oszlop szekció: csak grid nézetben látható */
.no-offcanvas-cols-section { display: none; }
.no-offcanvas--grid .no-offcanvas-cols-section { display: block; }


/* ── Lista item: kép wrapper méret biztosítása ────────── */
.no-list-item__img-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: visible; /* badge kilóghat */
}
.no-list-item__img-wrap img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Badge a képen – absolute pozíció ──────────────────── */
.no-list-item__img-wrap > .no-list-item__badges {
  position: absolute;
  top: -6px; left: -2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
}
.no-list-item__img-wrap > .no-list-item__badges .no-badge {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.3;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Eltávolítjuk a no-list-item__top-ból a régi badge-et ─ */
.no-list-item__top > .no-list-item__badges { display: none !important; }

/* Short desc: mindig látható mobilon ──────────────────── */
.no-list-item__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--no-text-muted);
  line-height: 1.45;
  margin-top: 2px;
  max-width: 100%;
}
@media (min-width: 600px) {
  .no-list-item__img-wrap { width: 90px; height: 90px; }
  .no-list-item__img-wrap img { width: 90px; height: 90px; }
  .no-list-item__img-wrap > .no-list-item__badges .no-badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .no-list-item__desc {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}

/* ── Grid: no-grid-cols-2 override mobilon ──────────────
   (a v2.2.0 CSS-ből ismétlés, de !important biztosítja) */
@media (max-width: 479px) {
  .no-wrapper.no-grid-cols-2 .no-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════
   v2.3.0 – Modal animáció stílusok
   Selector: #no-modal-overlay[data-animation="X"] .no-modal
   ══════════════════════════════════════════════════════ */

/* ALAP: az overlay maga mindig fade (láthatóság) */
#no-modal-overlay {
  transition: opacity 260ms ease, visibility 0ms linear 260ms;
}
#no-modal-overlay.no-modal--open {
  transition: opacity 260ms ease, visibility 0ms linear 0ms;
}

/* ── FADE (alapértelmezett) ──────────────────────────── */
#no-modal-overlay[data-animation="fade"] .no-modal,
#no-modal-overlay:not([data-animation]) .no-modal {
  opacity: 0;
  transform: none;
  transition: opacity 260ms cubic-bezier(0.16,1,0.3,1),
              transform 260ms cubic-bezier(0.16,1,0.3,1);
}
#no-modal-overlay[data-animation="fade"].no-modal--open .no-modal,
#no-modal-overlay:not([data-animation]).no-modal--open .no-modal {
  opacity: 1;
  transform: none;
}

/* ── SLIDE (alulról csúszik fel) ────────────────────── */
#no-modal-overlay[data-animation="slide"] .no-modal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 320ms cubic-bezier(0.16,1,0.3,1),
              transform 320ms cubic-bezier(0.16,1,0.3,1);
}
#no-modal-overlay[data-animation="slide"].no-modal--open .no-modal {
  opacity: 1;
  transform: translateY(0);
}
/* Bezáráskor visszafelé */
#no-modal-overlay[data-animation="slide"].no-modal--closing .no-modal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 220ms ease-in,
              transform 220ms ease-in;
}

/* ── ZOOM (középből nagyít) ─────────────────────────── */
#no-modal-overlay[data-animation="zoom"] .no-modal {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 280ms cubic-bezier(0.34,1.56,0.64,1),
              transform 280ms cubic-bezier(0.34,1.56,0.64,1);
}
#no-modal-overlay[data-animation="zoom"].no-modal--open .no-modal {
  opacity: 1;
  transform: scale(1);
}
#no-modal-overlay[data-animation="zoom"].no-modal--closing .no-modal {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 200ms ease-in,
              transform 200ms ease-in;
}

/* ── NONE (azonnali, nincs animáció) ────────────────── */
#no-modal-overlay[data-animation="none"] .no-modal {
  opacity: 0;
  transform: none;
  transition: none !important;
}
#no-modal-overlay[data-animation="none"].no-modal--open .no-modal {
  opacity: 1;
}
#no-modal-overlay[data-animation="none"] {
  transition: none !important;
}

/* ── Closing state: overlay fade out ───────────────── */
#no-modal-overlay.no-modal--closing {
  opacity: 0;
  transition: opacity 220ms ease-in, visibility 0ms linear 220ms;
}


/* ══════════════════════════════════════════════════════
   v2.4.0 – Tab kézrajz animáció + Rendezés UI
   ══════════════════════════════════════════════════════ */

/* ── Tab: SVG kézrajz aláhúzás ───────────────────────── */
.no-cat-tab {
  position: relative;
  overflow: visible; /* SVG kilóghat */
}

/* SVG aláhúzás – JS injektálja, CSS animálja */
.no-cat-tab .no-tab-underline {
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  width: 100%;
  height: 8px;
  pointer-events: none;
  overflow: visible;
}
.no-cat-tab .no-tab-underline path {
  fill: none;
  stroke: var(--no-primary, #C49444);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Kézrajz hatás: dash animáció */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: none;
}
.no-cat-tab.active .no-tab-underline path {
  animation: no-draw-line 0.42s cubic-bezier(0.16,1,0.3,1) forwards;
}
.no-cat-tab:not(.active) .no-tab-underline path {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.18s ease-in;
}

@keyframes no-draw-line {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

/* Aktív tab szöveg szín */
.no-cat-tab.active {
  color: var(--no-primary-hover, #8B6318);
  font-weight: 700;
  background: transparent;
  border-color: transparent;
}

/* ── Rendezés dropdown – desktop ─────────────────────── */
.no-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  order: 4;
  flex-shrink: 0;
}
.no-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  background: var(--no-cream, #FDF8F0);
  color: var(--no-text-muted, #7a6a52);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.no-sort-btn:hover,
.no-sort-btn.active {
  border-color: var(--no-primary, #C49444);
  color: var(--no-primary-hover, #8B6318);
  background: rgba(196,148,68,.08);
}
.no-sort-btn svg { flex-shrink: 0; }

/* Dropdown panel */
.no-sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 8px;
  min-width: 200px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.no-sort-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.no-sort-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 140ms ease;
  font-size: 13.5px; font-weight: 500;
  color: #2a1a06;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
}
.no-sort-option:hover { background: rgba(196,148,68,.08); }
.no-sort-option.active {
  background: rgba(196,148,68,.13);
  color: var(--no-primary-hover, #8B6318);
  font-weight: 700;
}
.no-sort-option__icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.no-sort-option__check {
  margin-left: auto;
  color: var(--no-primary, #C49444);
  flex-shrink: 0;
  opacity: 0;
}
.no-sort-option.active .no-sort-option__check { opacity: 1; }

/* Mobilon elrejtjük a desktop sort gombot */
@media (max-width: 599px) {
  .no-sort-wrap { display: none; }
}

/* ── Off-canvas: rendezés szekció ────────────────────── */
.no-offcanvas-sort-section { display: block; }

.no-offcanvas-sort-list {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.no-offcanvas-sort-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: left;
  width: 100%;
  font-size: 14px; font-weight: 600;
  color: #1a1a1a;
}
.no-offcanvas-sort-item:hover { background: rgba(196,148,68,.07); border-color: rgba(196,148,68,.2); }
.no-offcanvas-sort-item.active {
  background: rgba(196,148,68,.12);
  border-color: var(--no-primary, #C49444);
}
.no-offcanvas-sort-item__icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.no-offcanvas-sort-item__check {
  margin-left: auto;
  color: var(--no-primary, #C49444);
  flex-shrink: 0;
  opacity: 0;
}
.no-offcanvas-sort-item.active .no-offcanvas-sort-item__check { opacity: 1; }

/* ── Mobil off-canvas gomb neve: "Elrendezés" ─────────── */
/* (a JS dinamikusan állítja a szöveget, de ha show_sort is van,
   a gomb neve mindig "Elrendezés") */


/* ══════════════════════════════════════════════════════
   v2.5.0 – Keresősáv + Load More + Infinity scroll
   ══════════════════════════════════════════════════════ */

/* ── Keresősáv ───────────────────────────────────────── */
.no-search-bar {
  padding: 0 4px 16px;
  width: 100%;
}
.no-search-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  border-radius: 99px;
  padding: 10px 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.no-search-bar__inner:focus-within {
  border-color: var(--no-primary, #C49444);
  box-shadow: 0 0 0 3px rgba(196,148,68,.12);
}
.no-search-bar__icon {
  color: var(--no-text-muted, #9a8970);
  flex-shrink: 0;
  transition: color 180ms ease;
}
.no-search-bar__inner:focus-within .no-search-bar__icon {
  color: var(--no-primary, #C49444);
}
.no-search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  min-width: 0;
}
.no-search-bar__input::placeholder { color: #b0a090; }
/* Natív search X eltüntetése */
.no-search-bar__input::-webkit-search-cancel-button { display: none; }

.no-search-bar__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--no-primary, #C49444);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}
.no-search-bar__count.visible { opacity: 1; }

.no-search-bar__clear {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #9a8970;
  transition: background 150ms ease, color 150ms ease;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.no-search-bar__clear:hover { background: rgba(196,148,68,.1); color: var(--no-primary-hover,#8B6318); }

/* Keresési eredmény overlay */
.no-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.no-search-overlay.visible { opacity: 1; pointer-events: auto; }
.no-products-area { position: relative; }

/* Kereső empty state */
.no-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.no-search-empty__icon { font-size: 40px; }
.no-search-empty__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.no-search-empty__sub { font-size: 13px; color: #9a8970; max-width: 260px; }

/* ── Load More gomb ──────────────────────────────────── */
.no-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 16px 8px;
}
.no-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 99px;
  border: 2px solid var(--no-primary, #C49444);
  background: transparent;
  color: var(--no-primary-hover, #8B6318);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.no-load-more-btn:hover {
  background: var(--no-primary, #C49444);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,148,68,.28);
}
.no-load-more-btn:active { transform: translateY(0); }
.no-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.no-load-more-btn__count {
  background: rgba(196,148,68,.15);
  color: var(--no-primary-hover, #8B6318);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.no-load-more-btn:hover .no-load-more-btn__count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.no-load-more-btn.loading { pointer-events: none; }
.no-load-more-btn__spinner {
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 180ms ease;
}
.no-load-more-btn.loading .no-load-more-btn__spinner {
  opacity: 1;
  animation: no-spin 0.8s linear infinite;
}
@keyframes no-spin { to { transform: rotate(360deg); } }

/* Elrejtés ha nincs több */
.no-load-more-wrap[data-hidden="true"] { display: none; }

/* ── Infinity scroll sentinel ────────────────────────── */
.no-infinity-sentinel {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.no-infinity-spinner {
  color: var(--no-primary, #C49444);
  opacity: 0;
  animation: no-spin 0.9s linear infinite;
  transition: opacity 200ms ease;
}
.no-infinity-sentinel.loading .no-infinity-spinner { opacity: 1; }

/* ── Termék betöltés fade-in ─────────────────────────── */
@keyframes no-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.no-card--new {
  animation: no-card-in 0.32s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── Allergén tooltip overflow fix (v2.5.3) ─────────── */
/* A tooltip position:fixed – JS számolja a pozícióját,
   így soha nem vágódik le overflow:hidden szülőktől */
.no-allergen__tip {
  position: fixed !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 99999 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  background: var(--no-primary-hover, #8B6318);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.no-allergen__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--no-primary-hover, #8B6318);
}
.no-allergen:hover .no-allergen__tip,
.no-allergen:focus .no-allergen__tip {
  opacity: 1 !important;
}

/* no-card__body ne vágja le a tooltipet */
.no-card__body,
.no-card,
.no-card__allergens {
  overflow: visible !important;
}

/* Modal allergén pozíció – short desc fölött */
.no-modal__allergens {
  order: -1;
}
.no-modal__body-text {
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════════════════════
   Hierarchikus alkategória tab sor (v2.5.6)
   ════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   Nice Order – Frontend CSS v1.0.0
   ══════════════════════════════════════════════════════ */

/* ── CSS változók (brand színek JS-ből felülírhatók) ── */
:root {
  --no-primary:        #C49444;
  --no-primary-hover:  #8B6318;
  --no-primary-deep:   #5C3D0A;
  --no-card-bg:        #FDF8F0;
  --no-card-border:    rgba(196,148,68,0.22);
  --no-card-shadow:    0 2px 12px rgba(90,55,10,0.10);
  --no-card-shadow-h:  0 8px 28px rgba(90,55,10,0.18);
  --no-text:           #2A1F0A;
  --no-text-muted:     #7A5C30;
  --no-cream:          #FDF8F0;
  --no-cream-dark:     #F5EDD8;
  --no-radius:         14px;
  --no-transition:     180ms cubic-bezier(0.16,1,0.3,1);
}

/* ── Wrapper ─────────────────────────────────────────── */
.no-wrapper {
  --no-card-w: 200px;
  --no-card-img-h: 170px;
  --no-gap: 14px;
  position: relative;
  margin-block: 28px;
  font-family: inherit;
}

/* ── Header / Nav ────────────────────────────────────── */
.no-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-inline: 2px;
}
.no-header__title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--no-text);
  margin: 0;
}
/* Erős override – téma sticky h2 szabályait semlegesíti */
.no-wrapper .no-header__title,
.no-wrapper h2.no-header__title,
.entry-content .no-wrapper .no-header__title,
body .no-wrapper h2.no-header__title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.no-header__nav { display: flex; gap: 8px; }
.no-nav {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--no-primary);
  background: var(--no-cream);
  color: var(--no-primary-hover);
  cursor: pointer;
  transition: all var(--no-transition);
  flex-shrink: 0;
}
.no-nav:hover {
  background: var(--no-primary);
  border-color: var(--no-primary);
  color: #fff;
  box-shadow: 0 3px 10px rgba(140,90,20,.30);
}
.no-nav:disabled { opacity: .3; pointer-events: none; }

/* ── Scroll container ────────────────────────────────── */
.no-scroll-container {
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}
.no-scroll-container::-webkit-scrollbar { display: none; }
.no-track {
  display: flex; gap: var(--no-gap);
  padding-inline: 40px;
  width: max-content;
}

/* ── Kártya – alap ───────────────────────────────────── */
.no-card {
  position: relative;
  width: var(--no-card-w);
  flex-shrink: 0;
  background: var(--no-card-bg);
  border-radius: var(--no-radius);
  border: 1px solid var(--no-card-border);
  box-shadow: var(--no-card-shadow);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  outline: none;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.no-card:hover, .no-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--no-card-shadow-h);
  border-color: var(--no-primary);
}
.no-card:focus-visible { outline: 2px solid var(--no-primary); outline-offset: 3px; }

/* ── Kártya – kép ────────────────────────────────────── */
.no-card__img-wrap {
  position: relative; width: 100%;
  height: var(--no-card-img-h);
  overflow: hidden; background: var(--no-cream-dark);
  flex-shrink: 0;
}
.no-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; transition: transform 300ms ease; }
.no-card:hover .no-card__img { transform: scale(1.05); }
.no-card__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff;
  transition: background 200ms ease; pointer-events: none;
}
.no-card__overlay svg { opacity: 0; transform: scale(.7); transition: opacity 200ms, transform 200ms; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.no-card:hover .no-card__overlay { background: rgba(44,25,5,.30); }
.no-card:hover .no-card__overlay svg,
.no-card:focus-visible .no-card__overlay svg { opacity: 1; transform: scale(1); }

/* ── Badge-ek ────────────────────────────────────────── */
.no-card__badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.no-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 99px;
  line-height: 1.3; white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.no-badge--sale    { background: rgba(220,60,30,0.88);  color: #fff; }
.no-badge--new     { background: rgba(255,200,0,0.92);  color: #333; }
.no-badge--popular { background: rgba(50,50,50,0.80);   color: #ffd700; }

/* ── Kártya – body ───────────────────────────────────── */
.no-card__body { overflow: visible; padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.no-card__name { font-size: 13.5px; font-weight: 700; color: var(--no-text); line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-card__desc { font-size: 11.5px; color: var(--no-text-muted); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.no-card__price { display: block; font-size: 15px; font-weight: 700; color: var(--no-primary-hover); margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(196,148,68,.20); }
.no-card__price del { color: var(--no-text-muted); font-weight: 400; font-size: 12px; margin-right: 4px; opacity: .7; }
.no-card__price ins { text-decoration: none; }

/* ── Kártya allergének ───────────────────────────────── */
.no-card__allergens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; margin-bottom: 3px; }
.no-allergen { position: relative; font-size: 14px; cursor: default; outline: none; padding: 1px 2px; border-radius: 4px; transition: background 130ms; }
.no-allergen:hover { background: rgba(140,90,20,.10); }
.no-allergen__tip {
  position: fixed;
  background: var(--no-primary-hover, #8B6318); color: #fff;
  font-size: 10.5px; font-weight: 500; padding: 4px 9px;
  border-radius: 4px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 140ms ease; z-index: 99999;
  /* kezdeti pozíció: viewport-on kívül, hogy mérni lehessen */
  top: -200px; left: -200px;
}
.no-allergen__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--no-primary-hover, #8B6318); pointer-events: none; }
/* tooltip megjelenítés: JS kezeli az opacity-t és pozíciót */
.no-allergen.no-open .no-allergen__tip { opacity: 1; }

/* ══ KÁRTYASTÍLUSOK ══════════════════════════════════════ */
/* Minimal */
.no-card-style--minimal .no-card { background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border-radius: 8px; }
.no-card-style--minimal .no-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #ccc; }
/* Bordered */
.no-card-style--bordered .no-card { border: 2px solid var(--no-primary); border-radius: 10px; }
/* Dark */
.no-card-style--dark .no-card { background: #1a1a2e; border-color: rgba(196,148,68,0.3); color: #e8e8e8; }
.no-card-style--dark .no-card__name { color: #f0f0f0; }
.no-card-style--dark .no-card__desc { color: #aaa; }
.no-card-style--dark .no-card__price { color: var(--no-primary); border-top-color: rgba(196,148,68,0.2); }
/* Glassmorphism */
.no-card-style--glassmorphism .no-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

/* ══ MODAL OVERLAY ═══════════════════════════════════════ */
.no-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.16,1,0.3,1), visibility 0ms linear 280ms;
}
.no-modal-overlay.no-modal--open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 280ms cubic-bezier(0.16,1,0.3,1), visibility 0ms linear 0ms;
}

/* ── Modal doboz ─────────────────────────────────────── */
.no-modal {
  position: relative; background: #fff;
  border-radius: 18px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  width: 100%; max-width: 860px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(28px) scale(0.96); opacity: 0;
  transition: transform 340ms cubic-bezier(0.16,1,0.3,1), opacity 280ms cubic-bezier(0.16,1,0.3,1);
}
.no-modal-overlay.no-modal--open .no-modal { transform: translateY(0) scale(1); opacity: 1; }
.no-modal-overlay.no-modal--closing .no-modal { transform: translateY(20px) scale(0.97); opacity: 0; transition: transform 240ms cubic-bezier(0.4,0,1,1), opacity 220ms cubic-bezier(0.4,0,1,1); }
.no-modal-overlay.no-modal--added .no-modal { transform: translateY(-30px) scale(1.02); opacity: 0; transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 280ms cubic-bezier(0.16,1,0.3,1); }

.no-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12); background: #f5f5f5; color: #666;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--no-transition); z-index: 10;
}
.no-modal__close:hover { background: #e8e8e8; color: #222; border-color: rgba(0,0,0,0.2); }

/* ── Modal belső ─────────────────────────────────────── */
.no-modal__inner { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; overflow: hidden; }
.no-modal__gallery { background: #f8f8f8; border-right: 1px solid rgba(0,0,0,0.07); display: flex; flex-direction: column; overflow: hidden; }
.no-modal__main-img-wrap { position: relative; flex: 1; overflow: hidden; min-height: 240px; }
.no-modal__main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 200ms ease; }
.no-modal__main-img.no-loading { opacity: .4; }
.no-modal__thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; background: rgba(0,0,0,0.03); border-top: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; }
.no-modal__thumbs::-webkit-scrollbar { display: none; }
.no-modal__thumb { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; opacity: .65; transition: all var(--no-transition); }
.no-modal__thumb:hover { opacity: 1; border-color: var(--no-primary); }
.no-modal__thumb.active { opacity: 1; border-color: var(--no-primary-hover); box-shadow: 0 0 0 1px var(--no-primary-hover); }

.no-modal__content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.no-modal__scroll { flex: 1; overflow-y: auto; padding: 26px 24px 16px; scrollbar-width: thin; scrollbar-color: rgba(196,148,68,0.3) transparent; min-height: 0; }
.no-modal__scroll::-webkit-scrollbar { width: 4px; }
.no-modal__scroll::-webkit-scrollbar-track { background: transparent; }
.no-modal__scroll::-webkit-scrollbar-thumb { background: rgba(196,148,68,0.35); border-radius: 4px; }

.no-modal__title { font-size: clamp(1.1rem,2.5vw,1.45rem); font-weight: 700; color: #1a1a1a; margin: 0 0 8px; padding-right: 30px; line-height: 1.25; }
.no-modal__price { font-size: 1.3rem; font-weight: 700; color: var(--no-primary-hover); margin-bottom: 12px; }
.no-modal__price del { color: #999; font-weight: 400; font-size: 1rem; margin-right: 6px; opacity: .7; }
.no-modal__price ins { text-decoration: none; }
.no-modal__short-desc { font-size: .875rem; color: #555; line-height: 1.65; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-modal__short-desc:empty { display: none; }

/* Variációk */
.no-modal__variations { margin-bottom: 14px; }
.no-modal__variations:empty { display: none; }
.no-modal__variations select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid rgba(0,0,0,0.18); background: #fff; color: #222; font-size: .875rem; margin-top: 4px; cursor: pointer; transition: border-color var(--no-transition); }
.no-modal__variations select:focus { outline: none; border-color: var(--no-primary); }

/* Add-ons */
.no-modal__addons { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-modal__addons:empty { display: none; }

/* Allergének modal */
.no-modal__allergens { margin-bottom: 14px; padding: 11px 13px; background: #fffbf4; border-radius: 10px; border: 1px solid rgba(196,148,68,0.22); }
.no-modal__allergens:empty { display: none; }
.no-modal__allergens-title { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--no-primary-hover); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 9px; }
.no-modal__allergens-list { display: flex; flex-wrap: wrap; gap: 6px; }
.no-allergen-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: #fff; border: 1px solid rgba(196,148,68,0.28); font-size: .8rem; color: #333; font-weight: 500; }
.no-allergen-badge__icon { font-size: 14px; }
.no-allergen-badge__name { font-size: .78rem; color: #777; }

/* Értesítő */
.no-modal__notice { padding: 10px 14px; border-radius: 8px; font-size: .875rem; margin-bottom: 14px; font-weight: 500; }
.no-modal__notice.no-notice--success { background: #edf7ed; color: #2e6b2e; border: 1px solid #b5d8b5; }
.no-modal__notice.no-notice--error   { background: #fdecea; color: #8b1a1a; border: 1px solid #f5b8b8; }

/* Mennyiségválasztó */
.no-qty-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.no-qty-label { font-size: .8rem; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.no-qty { display: inline-flex; align-items: center; background: #f5f5f5; border-radius: 99px; border: 1.5px solid rgba(0,0,0,0.10); overflow: hidden; height: 40px; }
.no-qty__btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #333; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: background var(--no-transition), color var(--no-transition); flex-shrink: 0; line-height: 1; user-select: none; }
.no-qty__btn:hover:not(:disabled) { background: var(--no-primary); color: #fff; }
.no-qty__btn:disabled { opacity: .3; cursor: not-allowed; }
.no-qty__val { min-width: 36px; text-align: center; font-size: .95rem; font-weight: 700; color: #1a1a1a; user-select: none; padding: 0 2px; }

/* ── Modal footer ────────────────────────────────────── */
.no-modal__footer { flex-shrink: 0; padding: 14px 24px 16px; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 8px; }

/* Zárva banner */
.no-modal__closed-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: #fef3f2; border: 1px solid #fca5a5; color: #991b1b; font-size: .9rem; font-weight: 600; }

.no-modal__cart-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 20px; border-radius: 10px; background: linear-gradient(135deg, var(--no-primary) 0%, var(--no-primary-hover) 100%); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; border: none; transition: all var(--no-transition); box-shadow: 0 4px 14px rgba(140,90,20,0.25); }
.no-modal__cart-btn:hover { background: linear-gradient(135deg, var(--no-primary-hover) 0%, var(--no-primary-hover, #8B6318) 100%); box-shadow: 0 6px 20px rgba(140,90,20,0.35); transform: translateY(-1px); }
.no-modal__cart-btn:active { transform: translateY(0); }
.no-modal__cart-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.no-modal__cart-btn.no-added { background: linear-gradient(135deg, #4a7c3f, #2e5c25); box-shadow: 0 4px 14px rgba(40,90,20,0.25); }
.no-modal__permalink { display: block; text-align: center; font-size: .8rem; color: #888; text-decoration: none; transition: color var(--no-transition); }
.no-modal__permalink:hover { color: var(--no-primary-hover); }

/* ── Loader ──────────────────────────────────────────── */
.no-modal__loader { position: absolute; inset: 0; background: rgba(255,255,255,0.88); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms; pointer-events: none; border-radius: 18px; }
.no-modal__loader.active { opacity: 1; pointer-events: all; }
.no-modal__spinner { width: 40px; height: 40px; border: 3px solid rgba(196,148,68,0.25); border-top-color: var(--no-primary); border-radius: 50%; animation: no-spin .7s linear infinite; }
@keyframes no-spin { to { transform: rotate(360deg); } }

/* ── Reszponzív ──────────────────────────────────────── */
@media (max-width: 600px) {
  .no-wrapper { --no-card-w: 155px; --no-card-img-h: 125px; }
  .no-card__name { font-size: 12.5px; }
  .no-card__price { font-size: 13.5px; }
  .no-track { padding-inline: 16px; }
  .no-scroll-container { mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%); }
  .no-modal-overlay { align-items: flex-end; padding: 0; }
  .no-modal { max-width: 100%; max-height: 93vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .no-modal-overlay.no-modal--closing .no-modal,
  .no-modal-overlay.no-modal--added .no-modal { transform: translateY(60px) scale(1); }
  .no-modal__inner { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
  .no-modal__gallery { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .no-modal__scroll { padding: 18px 16px 12px; }
  .no-modal__footer { padding: 12px 16px 14px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .no-wrapper { --no-card-w: 175px; --no-card-img-h: 145px; }
  .no-modal { max-width: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  .no-modal, .no-modal-overlay { transition: none !important; }
}


/* ══════════════════════════════════════════════════════
   Layout módok – Grid / Masonry / List
   ══════════════════════════════════════════════════════ */

/* ── GRID ────────────────────────────────────────────── */
.no-layout--grid .no-products-area { width: 100%; }
.no-grid {
  display: grid;
  grid-template-columns: repeat(var(--no-cols, 3), 1fr);
  gap: var(--no-gap, 18px);
}
.no-grid .no-card { width: auto; }
.no-grid .no-card__img-wrap { height: 180px; }

@media (max-width: 800px) {
  .no-grid { grid-template-columns: repeat(min(var(--no-cols,3), 2), 1fr); }
}
@media (max-width: 480px) {
  .no-grid { grid-template-columns: 1fr; }
  .no-grid .no-card__img-wrap { height: 200px; }
  .no-grid .no-card__img { object-position: center center; }
}

/* ── MASONRY ─────────────────────────────────────────── */
.no-layout--masonry .no-products-area { width: 100%; }
.no-masonry {
  columns: var(--no-cols, 3) 200px;
  column-gap: var(--no-gap, 16px);
}
.no-masonry .no-card--masonry {
  width: auto;
  break-inside: avoid;
  margin-bottom: var(--no-gap, 16px);
  display: flex;
  flex-direction: column;
}
.no-masonry .no-card--masonry .no-card__img-wrap {
  height: auto;
  aspect-ratio: auto;
}
.no-masonry .no-card--masonry .no-card__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 260px;
}
@media (max-width: 600px) {
  .no-masonry { columns: 2 140px; }
}

/* ── LIST ────────────────────────────────────────────── */
.no-layout--list .no-products-area { width: 100%; }
.no-list { display: flex; flex-direction: column; gap: 10px; }

.no-list-item {
  display: grid;
  grid-template-columns: 84px 1fr auto 28px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 12px;
  background: var(--no-card-bg);
  border-radius: 12px;
  border: 1px solid var(--no-card-border);
  box-shadow: var(--no-card-shadow);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  outline: none;
}
.no-list-item:hover, .no-list-item:focus-visible {
  transform: translateX(3px);
  box-shadow: var(--no-card-shadow-h);
  border-color: var(--no-primary);
}
.no-list-item:focus-visible { outline: 2px solid var(--no-primary); outline-offset: 3px; }

.no-list-item__img-wrap {
  width: 84px; height: 84px;
  border-radius: 10px; overflow: hidden;
  background: var(--no-cream-dark); flex-shrink: 0;
}
.no-list-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.no-list-item__body { min-width: 0; }
.no-list-item__top  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.no-list-item__name { font-size: 14.5px; font-weight: 700; color: var(--no-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-list-item__desc { font-size: 12.5px; color: var(--no-text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.no-list-item__badges { display: flex; gap: 4px; flex-wrap: nowrap; }
.no-list-item__price { font-size: 15px; font-weight: 700; color: var(--no-primary-hover); white-space: nowrap; text-align: right; }
.no-list-item__price del { display: block; font-size: 11px; font-weight: 400; color: var(--no-text-muted); opacity: .7; }
.no-list-item__price ins { text-decoration: none; }
.no-list-item__arrow { color: var(--no-primary); opacity: .55; transition: opacity 180ms, transform 180ms; }
.no-list-item:hover .no-list-item__arrow { opacity: 1; transform: translateX(2px); }

@media (max-width: 480px) {
  .no-list-item {
    grid-template-columns: 80px 1fr auto 24px;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px;
    align-items: start;
  }
  .no-list-item__img-wrap {
    width: 80px; height: 80px;
    grid-row: 1 / 3;
  }
  .no-list-item__body {
    grid-column: 2;
    grid-row: 1;
    padding-top: 2px;
  }
  .no-list-item__price-wrap {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  .no-list-item__cart-btn-wrap {
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }
  .no-list-item__name { font-size: 13px; line-height: 1.3; }
  .no-list-item__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; color: var(--no-text-muted); margin-top: 3px; }
  .no-list-item__badges { margin-top: 4px; }
}

/* ── Layout váltó gombok (ha JS generálja) ───────────── */
.no-layout-switcher {
  display: flex; gap: 6px; align-items: center;
}
.no-layout-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream); color: var(--no-text-muted);
  cursor: pointer; transition: all 160ms ease;
}
.no-layout-btn:hover { border-color: var(--no-primary); color: var(--no-primary-hover); }
.no-layout-btn.active {
  background: var(--no-primary); border-color: var(--no-primary);
  color: #fff; box-shadow: 0 2px 8px rgba(140,90,20,.25);
}

/* ── Kategória tab-ok ────────────────────────────────── */
.no-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.no-cat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 99px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream); color: var(--no-text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 160ms ease; white-space: nowrap;
  outline: none;
}
.no-cat-tab:hover { border-color: var(--no-primary); color: var(--no-primary-hover); background: rgba(196,148,68,.07); }
.no-cat-tab.active {
  background: var(--no-primary); border-color: var(--no-primary);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(140,90,20,.20);
}
.no-cat-tab__icon { font-size: 15px; }
.no-cat-tab[disabled] { opacity: .5; pointer-events: none; }

/* Betöltő skeleton kategória váltáshoz */
.no-products-area.no-loading-area {
  position: relative; pointer-events: none;
}
.no-products-area.no-loading-area::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(253,248,240,.7);
  border-radius: 8px;
  z-index: 5;
  backdrop-filter: blur(2px);
}
.no-products-area.no-loading-area::before {
  content: "Betöltés…";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 13px; font-weight: 600;
  color: var(--no-primary-hover); z-index: 6;
  padding: 8px 18px; border-radius: 99px;
  background: rgba(253,248,240,.95);
  border: 1px solid var(--no-card-border);
  box-shadow: 0 2px 12px rgba(140,90,20,.12);
}

/* ── Autoplay progress sáv (carousel) ───────────────── */
.no-autoplay-bar {
  height: 3px; border-radius: 2px;
  background: rgba(196,148,68,.15);
  margin-top: 10px; overflow: hidden;
}
.no-autoplay-bar__fill {
  height: 100%; border-radius: 2px;
  background: var(--no-primary);
  transform-origin: left; transform: scaleX(0);
}
.no-autoplay-bar__fill.no-playing {
  animation: no-autoplay-fill linear forwards;
}
@keyframes no-autoplay-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Üres állapot ────────────────────────────────────── */
.no-empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 48px 24px; text-align: center;
  color: var(--no-text-muted);
}
.no-empty-state span { font-size: 40px; }
.no-empty-state p    { font-size: 14px; }


/* ══════════════════════════════════════════════════════
   v2.1.0 – Mobil fixes: kategória csúszka, off-canvas nézet
   ══════════════════════════════════════════════════════ */

/* ── Kategória tab-ok: mobil horizontális csúszka ────── */
.no-cat-tabs {
  display: flex;
  flex-wrap: nowrap;           /* NEM törhet több sorba */
  gap: 6px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* Halványul a széleken, jelzi a görgethetőséget */
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  scroll-snap-type: x proximity;
}
.no-cat-tabs::-webkit-scrollbar { display: none; }
.no-cat-tab {
  flex-shrink: 0;              /* Tab-ok NEM zsugorodnak */
  scroll-snap-align: start;
}

/* Ha az összes tab elfér: mask eltávolítása */
@media (min-width: 900px) {
  .no-cat-tabs {
    flex-wrap: nowrap;
    overflow: hidden;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ── "További kategóriák" dropdown (csak desktop) ── */
.no-more-cats {
  display: none;
  position: relative;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .no-more-cats { display: inline-flex; align-items: center; }
}
.no-more-cats__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--no-primary, #C49444);
  background: transparent;
  color: var(--no-primary, #C49444);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, color 160ms;
  line-height: 1.4;
}
.no-more-cats__btn:hover {
  background: var(--no-primary, #C49444);
  color: #fff;
}
.no-more-cats__btn svg {
  transition: transform 200ms;
  flex-shrink: 0;
}
.no-more-cats.open .no-more-cats__btn svg {
  transform: rotate(180deg);
}
.no-more-cats__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 9999;
  flex-direction: column;
  gap: 2px;
}
.no-more-cats.open .no-more-cats__dropdown {
  display: flex;
}
.no-more-cats__dropdown .no-cat-tab {
  border-radius: 8px !important;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  flex-shrink: 0;
  scroll-snap-align: unset;
}



/* ── Header rearendezés mobilon ───────────────────────── */
.no-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
/* Cím: teljes sor mobilon ha van kategória */
.no-header__title { flex: 1 1 auto; } /* v3.7.17 */ /* v3.7.13: ne foglalja el az egész sort */
@media (min-width: 600px) {
  .no-header__title { flex: 1 1 auto; } /* v3.7.17 */
}
@media (min-width: 900px) {
  .no-header { flex-wrap: nowrap; align-items: center; }
}
/* Kategória tab-ok: teljes szélességű sor mobilon */
.no-cat-tabs {
  flex: 1 1 100%;
  
}
/* v3.7.17: order blokk eltávolítva – DOM sorrend elegendő */
/* Jobb oldali vezérlők (carousel nyilak) */
.no-header__nav { order: 2; margin-left: auto; }
@media (min-width: 900px) { .no-header__nav { order: 3; } }

/* ── Desktop layout switcher ─────────────────────────── */
.no-layout-switcher--desktop {
  display: none; /* alapból rejtett */
  gap: 4px;
  order: 4;
  margin-left: 4px;
}
@media (min-width: 600px) {
  .no-layout-switcher--desktop { display: none !important; }
}
/* Mobilon a no-layout-dropdown-wrap rejtett, mobileBtn látszik */
@media (max-width: 599px) {
  .no-layout-dropdown-wrap { display: none !important; }
}

/* ── Mobil layout gomb ───────────────────────────────── */
.no-layout-mobile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--no-card-border);
  background: var(--no-cream);
  color: var(--no-text-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  order: 2;
  margin-left: auto;
  white-space: nowrap;
}
.no-layout-mobile-btn:hover {
  border-color: var(--no-primary);
  color: var(--no-primary-hover);
  background: rgba(196,148,68,.07);
}
.no-layout-mobile-btn__label { font-size: 12px; }
.no-layout-mobile-btn__chevron { opacity: .6; }
@media (min-width: 600px) {
  .no-layout-mobile-btn { display: none; }
}

/* ── Off-canvas overlay ──────────────────────────────── */
.no-layout-offcanvas {
  position: fixed; inset: 0;
  z-index: 999998;
  pointer-events: none;
  visibility: hidden;
}
.no-layout-offcanvas.no-offcanvas--open {
  pointer-events: auto;
  visibility: visible;
}
.no-layout-offcanvas__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 280ms ease;
}
.no-offcanvas--open .no-layout-offcanvas__backdrop {
  background: rgba(0,0,0,0.44);
}

.no-layout-offcanvas__panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  max-height: 60vh;
  overflow-y: auto;
}
.no-offcanvas--open .no-layout-offcanvas__panel {
  transform: translateY(0);
}

.no-layout-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: 0; background: #fff; z-index: 1;
  /* Húzó fül */
  background-image: radial-gradient(circle, #ddd 30%, transparent 30%);
  background-repeat: no-repeat;
  background-size: 36px 4px;
  background-position: center 8px;
  padding-top: 24px;
}
.no-layout-offcanvas__title {
  font-size: 15px; font-weight: 700; color: #1a1a1a;
}
.no-layout-offcanvas__close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: #f5f5f5; color: #555;
  cursor: pointer;
  transition: all 150ms ease;
}
.no-layout-offcanvas__close:hover { background: #eaeaea; color: #111; }

.no-layout-offcanvas__list {
  padding: 10px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-layout-offcanvas__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
  width: 100%;
}
.no-layout-offcanvas__item:hover { background: rgba(196,148,68,.07); border-color: rgba(196,148,68,.25); }
.no-layout-offcanvas__item.active {
  background: rgba(196,148,68,.12);
  border-color: var(--no-primary);
}
.no-layout-offcanvas__item-icon { color: var(--no-text-muted); flex-shrink: 0; }
.no-layout-offcanvas__item.active .no-layout-offcanvas__item-icon { color: var(--no-primary-hover); }
.no-layout-offcanvas__item-label {
  font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1;
}
.no-layout-offcanvas__item-check { color: var(--no-primary); flex-shrink: 0; margin-left: auto; }

/* ── no-loading-area: pointer-events kizárása ─────────── */
/* BUGFIX #1: az ::after pseudo-elem soha ne blokkolja a
   modal overlay fölötti kattintásokat. A modal z-index:99999,
   az ::after z-index:5 – tehát nem az okozza a hibát.
   Biztosítás: a loading overlay pointer-events:none marad,
   és az area-t sem blokkoljuk a modallal interakcióban. */
.no-products-area.no-loading-area { pointer-events: none; }
.no-products-area.no-loading-area::after { pointer-events: none; }

/* ── Korábbi inline desktop-switcher eltávolítása ──────── */
/* (az inject JS adja hozzá dinamikusan, de ha valaki
   kézzel írja a HTML-t, ez biztosítja a helyes megjelenést) */
.no-layout-switcher:not(.no-layout-switcher--desktop) { display: none; }


/* ══════════════════════════════════════════════════════
   v2.2.0 – Mobil: grid 1 oszlop, lista badge + desc fix
   ══════════════════════════════════════════════════════ */

/* ── GRID: mobilon 1 oszlop alapból ─────────────────── */
.no-grid {
  grid-template-columns: 1fr;          /* mobil: 1 oszlop */
}
@media (min-width: 480px) {
  .no-grid {
    grid-template-columns: 1fr 1fr;    /* tablet: 2 oszlop */
  }
}
@media (min-width: 700px) {
  .no-grid {
    /* desktop: a --no-cols változó érvényes (2-5) */
    grid-template-columns: repeat(var(--no-cols, 3), 1fr);
  }
}

/* Mobil 2 oszlopos override – JS adja hozzá a wrapper-re */
.no-wrapper.no-grid-cols-2 .no-grid {
  grid-template-columns: 1fr 1fr !important;
}

/* ── LISTA: badge fix mobilon ────────────────────────── */
/*
  Struktúra változás:
  .no-list-item
    .no-list-item__img-wrap     ← kép, relatív pozíció
      .no-list-item__badges     ← MOST IDE kerül (absolute)
      img
    .no-list-item__body
      .no-list-item__top        ← csak a NÉV (badge nélkül)
      .no-list-item__desc       ← short desc
    .no-list-item__price
    .no-list-item__arrow

  CSS-sel oldjuk meg: a badge-ek a img-wrap-on belül
  abszolút pozícióban ülnek, a kép bal felső sarkán.
*/

/* Kép wrapper: relatív, hogy a badge abszolút lehessen */
.no-list-item__img-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Badge a képen belül – mobil */
.no-list-item__badges {
  position: absolute;
  top: 6px; left: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
}
.no-list-item__badges .no-badge {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.3;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* A no-list-item__top-ból kivesszük a badge-et (JS rendezi) */
.no-list-item__top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 3px;
}
/* Névbe nem kerül badge többé mobilon */
.no-list-item__top .no-list-item__badges {
  display: none; /* a régi helyen elrejtjük */
}

/* Short description mobilon: megjelenik */
.no-list-item__desc {
  font-size: 12px;
  color: var(--no-text-muted);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop: badge visszakerül a képre, desc marad */
@media (min-width: 600px) {
  .no-list-item__badges .no-badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .no-list-item__desc {
    -webkit-line-clamp: 2;
  }
}

/* ── Off-canvas: grid oszlopválasztó szekció ─────────── */
.no-offcanvas-section {
  padding: 12px 12px 4px;
  border-top: 1px solid rgba(0,0,0,0.07);
  margin-top: 4px;
}
.no-offcanvas-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--no-text-muted);
  margin: 0 0 8px 4px;
}
.no-offcanvas-cols {
  display: flex;
  gap: 8px;
  padding: 0 4px 12px;
}
.no-offcanvas-col-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fafafa;
  cursor: pointer;
  transition: all 150ms ease;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.no-offcanvas-col-btn:hover {
  border-color: var(--no-primary);
  color: var(--no-primary-hover);
  background: rgba(196,148,68,.06);
}
.no-offcanvas-col-btn.active {
  border-color: var(--no-primary);
  background: rgba(196,148,68,.12);
  color: var(--no-primary-hover);
}
/* Grid preview ikonok */
.no-col-preview {
  display: grid;
  gap: 3px;
  width: 36px;
  height: 28px;
}
.no-col-preview--1 { grid-template-columns: 1fr; }
.no-col-preview--2 { grid-template-columns: 1fr 1fr; }
.no-col-preview span {
  background: currentColor;
  border-radius: 2px;
  opacity: .45;
}
.no-offcanvas-col-btn.active .no-col-preview span { opacity: .8; }

/* Grid oszlop szekció: csak grid nézetben látható */
.no-offcanvas-cols-section { display: none; }
.no-offcanvas--grid .no-offcanvas-cols-section { display: block; }


/* ── Lista item: kép wrapper méret biztosítása ────────── */
.no-list-item__img-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: visible; /* badge kilóghat */
}
.no-list-item__img-wrap img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Badge a képen – absolute pozíció ──────────────────── */
.no-list-item__img-wrap > .no-list-item__badges {
  position: absolute;
  top: -6px; left: -2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
}
.no-list-item__img-wrap > .no-list-item__badges .no-badge {
  font-size: 9px;
  padding: 2px 6px;
  line-height: 1.3;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* Eltávolítjuk a no-list-item__top-ból a régi badge-et ─ */
.no-list-item__top > .no-list-item__badges { display: none !important; }

/* Short desc: mindig látható mobilon ──────────────────── */
.no-list-item__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--no-text-muted);
  line-height: 1.45;
  margin-top: 2px;
  max-width: 100%;
}
@media (min-width: 600px) {
  .no-list-item__img-wrap { width: 90px; height: 90px; }
  .no-list-item__img-wrap img { width: 90px; height: 90px; }
  .no-list-item__img-wrap > .no-list-item__badges .no-badge {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .no-list-item__desc {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}

/* ── Grid: no-grid-cols-2 override mobilon ──────────────
   (a v2.2.0 CSS-ből ismétlés, de !important biztosítja) */
@media (max-width: 479px) {
  .no-wrapper.no-grid-cols-2 .no-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════
   v2.3.0 – Modal animáció stílusok
   Selector: #no-modal-overlay[data-animation="X"] .no-modal
   ══════════════════════════════════════════════════════ */

/* ALAP: az overlay maga mindig fade (láthatóság) */
#no-modal-overlay {
  transition: opacity 260ms ease, visibility 0ms linear 260ms;
}
#no-modal-overlay.no-modal--open {
  transition: opacity 260ms ease, visibility 0ms linear 0ms;
}

/* ── FADE (alapértelmezett) ──────────────────────────── */
#no-modal-overlay[data-animation="fade"] .no-modal,
#no-modal-overlay:not([data-animation]) .no-modal {
  opacity: 0;
  transform: none;
  transition: opacity 260ms cubic-bezier(0.16,1,0.3,1),
              transform 260ms cubic-bezier(0.16,1,0.3,1);
}
#no-modal-overlay[data-animation="fade"].no-modal--open .no-modal,
#no-modal-overlay:not([data-animation]).no-modal--open .no-modal {
  opacity: 1;
  transform: none;
}

/* ── SLIDE (alulról csúszik fel) ────────────────────── */
#no-modal-overlay[data-animation="slide"] .no-modal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 320ms cubic-bezier(0.16,1,0.3,1),
              transform 320ms cubic-bezier(0.16,1,0.3,1);
}
#no-modal-overlay[data-animation="slide"].no-modal--open .no-modal {
  opacity: 1;
  transform: translateY(0);
}
/* Bezáráskor visszafelé */
#no-modal-overlay[data-animation="slide"].no-modal--closing .no-modal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 220ms ease-in,
              transform 220ms ease-in;
}

/* ── ZOOM (középből nagyít) ─────────────────────────── */
#no-modal-overlay[data-animation="zoom"] .no-modal {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 280ms cubic-bezier(0.34,1.56,0.64,1),
              transform 280ms cubic-bezier(0.34,1.56,0.64,1);
}
#no-modal-overlay[data-animation="zoom"].no-modal--open .no-modal {
  opacity: 1;
  transform: scale(1);
}
#no-modal-overlay[data-animation="zoom"].no-modal--closing .no-modal {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 200ms ease-in,
              transform 200ms ease-in;
}

/* ── NONE (azonnali, nincs animáció) ────────────────── */
#no-modal-overlay[data-animation="none"] .no-modal {
  opacity: 0;
  transform: none;
  transition: none !important;
}
#no-modal-overlay[data-animation="none"].no-modal--open .no-modal {
  opacity: 1;
}
#no-modal-overlay[data-animation="none"] {
  transition: none !important;
}

/* ── Closing state: overlay fade out ───────────────── */
#no-modal-overlay.no-modal--closing {
  opacity: 0;
  transition: opacity 220ms ease-in, visibility 0ms linear 220ms;
}


/* ══════════════════════════════════════════════════════
   v2.4.0 – Tab kézrajz animáció + Rendezés UI
   ══════════════════════════════════════════════════════ */

/* ── Tab: SVG kézrajz aláhúzás ───────────────────────── */
.no-cat-tab {
  position: relative;
  overflow: visible; /* SVG kilóghat */
}

/* SVG aláhúzás – JS injektálja, CSS animálja */
.no-cat-tab .no-tab-underline {
  position: absolute;
  left: 0; right: 0;
  bottom: -5px;
  width: 100%;
  height: 8px;
  pointer-events: none;
  overflow: visible;
}
.no-cat-tab .no-tab-underline path {
  fill: none;
  stroke: var(--no-primary, #C49444);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Kézrajz hatás: dash animáció */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: none;
}
.no-cat-tab.active .no-tab-underline path {
  animation: no-draw-line 0.42s cubic-bezier(0.16,1,0.3,1) forwards;
}
.no-cat-tab:not(.active) .no-tab-underline path {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.18s ease-in;
}

@keyframes no-draw-line {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}

/* Aktív tab szöveg szín */
.no-cat-tab.active {
  color: var(--no-primary-hover, #8B6318);
  font-weight: 700;
  background: transparent;
  border-color: transparent;
}

/* ── Rendezés dropdown – desktop ─────────────────────── */
.no-sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  order: 4;
  flex-shrink: 0;
}
.no-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 99px;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  background: var(--no-cream, #FDF8F0);
  color: var(--no-text-muted, #7a6a52);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.no-sort-btn:hover,
.no-sort-btn.active {
  border-color: var(--no-primary, #C49444);
  color: var(--no-primary-hover, #8B6318);
  background: rgba(196,148,68,.08);
}
.no-sort-btn svg { flex-shrink: 0; }

/* Dropdown panel */
.no-sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 8px;
  min-width: 200px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.no-sort-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.no-sort-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 140ms ease;
  font-size: 13.5px; font-weight: 500;
  color: #2a1a06;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
}
.no-sort-option:hover { background: rgba(196,148,68,.08); }
.no-sort-option.active {
  background: rgba(196,148,68,.13);
  color: var(--no-primary-hover, #8B6318);
  font-weight: 700;
}
.no-sort-option__icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.no-sort-option__check {
  margin-left: auto;
  color: var(--no-primary, #C49444);
  flex-shrink: 0;
  opacity: 0;
}
.no-sort-option.active .no-sort-option__check { opacity: 1; }

/* Mobilon elrejtjük a desktop sort gombot */
@media (max-width: 599px) {
  .no-sort-wrap { display: none; }
}

/* ── Off-canvas: rendezés szekció ────────────────────── */
.no-offcanvas-sort-section { display: block; }

.no-offcanvas-sort-list {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.no-offcanvas-sort-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: left;
  width: 100%;
  font-size: 14px; font-weight: 600;
  color: #1a1a1a;
}
.no-offcanvas-sort-item:hover { background: rgba(196,148,68,.07); border-color: rgba(196,148,68,.2); }
.no-offcanvas-sort-item.active {
  background: rgba(196,148,68,.12);
  border-color: var(--no-primary, #C49444);
}
.no-offcanvas-sort-item__icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.no-offcanvas-sort-item__check {
  margin-left: auto;
  color: var(--no-primary, #C49444);
  flex-shrink: 0;
  opacity: 0;
}
.no-offcanvas-sort-item.active .no-offcanvas-sort-item__check { opacity: 1; }

/* ── Mobil off-canvas gomb neve: "Elrendezés" ─────────── */
/* (a JS dinamikusan állítja a szöveget, de ha show_sort is van,
   a gomb neve mindig "Elrendezés") */


/* ══════════════════════════════════════════════════════
   v2.5.0 – Keresősáv + Load More + Infinity scroll
   ══════════════════════════════════════════════════════ */

/* ── Keresősáv ───────────────────────────────────────── */
.no-search-bar {
  padding: 0 4px 16px;
  width: 100%;
}
.no-search-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--no-card-border, #e8e0d0);
  border-radius: 99px;
  padding: 10px 16px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.no-search-bar__inner:focus-within {
  border-color: var(--no-primary, #C49444);
  box-shadow: 0 0 0 3px rgba(196,148,68,.12);
}
.no-search-bar__icon {
  color: var(--no-text-muted, #9a8970);
  flex-shrink: 0;
  transition: color 180ms ease;
}
.no-search-bar__inner:focus-within .no-search-bar__icon {
  color: var(--no-primary, #C49444);
}
.no-search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  min-width: 0;
}
.no-search-bar__input::placeholder { color: #b0a090; }
/* Natív search X eltüntetése */
.no-search-bar__input::-webkit-search-cancel-button { display: none; }

.no-search-bar__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--no-primary, #C49444);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}
.no-search-bar__count.visible { opacity: 1; }

.no-search-bar__clear {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #9a8970;
  transition: background 150ms ease, color 150ms ease;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.no-search-bar__clear:hover { background: rgba(196,148,68,.1); color: var(--no-primary-hover,#8B6318); }

/* Keresési eredmény overlay */
.no-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.no-search-overlay.visible { opacity: 1; pointer-events: auto; }
.no-products-area { position: relative; }

/* Kereső empty state */
.no-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.no-search-empty__icon { font-size: 40px; }
.no-search-empty__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.no-search-empty__sub { font-size: 13px; color: #9a8970; max-width: 260px; }

/* ── Load More gomb ──────────────────────────────────── */
.no-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 16px 8px;
}
.no-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 99px;
  border: 2px solid var(--no-primary, #C49444);
  background: transparent;
  color: var(--no-primary-hover, #8B6318);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.no-load-more-btn:hover {
  background: var(--no-primary, #C49444);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,148,68,.28);
}
.no-load-more-btn:active { transform: translateY(0); }
.no-load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.no-load-more-btn__count {
  background: rgba(196,148,68,.15);
  color: var(--no-primary-hover, #8B6318);
  border-radius: 99px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}
.no-load-more-btn:hover .no-load-more-btn__count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.no-load-more-btn.loading { pointer-events: none; }
.no-load-more-btn__spinner {
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 180ms ease;
}
.no-load-more-btn.loading .no-load-more-btn__spinner {
  opacity: 1;
  animation: no-spin 0.8s linear infinite;
}
@keyframes no-spin { to { transform: rotate(360deg); } }

/* Elrejtés ha nincs több */
.no-load-more-wrap[data-hidden="true"] { display: none; }

/* ── Infinity scroll sentinel ────────────────────────── */
.no-infinity-sentinel {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.no-infinity-spinner {
  color: var(--no-primary, #C49444);
  opacity: 0;
  animation: no-spin 0.9s linear infinite;
  transition: opacity 200ms ease;
}
.no-infinity-sentinel.loading .no-infinity-spinner { opacity: 1; }

/* ── Termék betöltés fade-in ─────────────────────────── */
@keyframes no-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.no-card--new {
  animation: no-card-in 0.32s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── Allergén tooltip overflow fix (v2.5.3) ─────────── */
/* A tooltip position:fixed – JS számolja a pozícióját,
   így soha nem vágódik le overflow:hidden szülőktől */
.no-allergen__tip {
  position: fixed !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 99999 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  background: var(--no-primary-hover, #8B6318);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.no-allergen__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--no-primary-hover, #8B6318);
}
.no-allergen:hover .no-allergen__tip,
.no-allergen:focus .no-allergen__tip {
  opacity: 1 !important;
}

/* no-card__body ne vágja le a tooltipet */
.no-card__body,
.no-card,
.no-card__allergens {
  overflow: visible !important;
}

/* Modal allergén pozíció – short desc fölött */
.no-modal__allergens {
  order: -1;
}
.no-modal__body-text {
  display: flex;
  flex-direction: column;
}

/* Reszponzív */
} /* @media max-width:600px lezárása */


/* ── ÉTLAP off-canvas – minden képernyőméreten ───────────────────────────── */
.no-menu-mobile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1.5px solid var(--no-card-border, rgba(196,148,68,0.22));
  background: var(--no-cream, #FDF8F0);
  color: var(--no-text-muted, #7A5C30);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
  outline: none;
  flex-shrink: 0;
  height: 34px;           /* no-cat-tab magassággal megegyező */
  line-height: 1;
}
.no-menu-mobile-btn:hover {
  border-color: var(--no-primary, #c49444);
  color: var(--no-primary-hover, #8B6318);
  background: rgba(196,148,68,.07);
}
.no-menu-mobile-btn:focus-visible {
  outline: 2px solid var(--no-primary, #c49444);
  outline-offset: 3px;
}
.no-menu-mobile-btn:active { opacity: .85; }
.no-menu-mobile-btn__label {
  font-weight: 500;
  letter-spacing: .01em;
}

.no-menu-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  visibility: hidden;
}
.no-menu-offcanvas.no-menu--open {
  pointer-events: auto;
  visibility: visible;
}
.no-menu-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 260ms ease;
}
.no-menu--open .no-menu-offcanvas__backdrop {
  background: rgba(0,0,0,0.45);
}

.no-menu-offcanvas__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(260px, 80vw);
  background: #fff;
  box-shadow: 8px 0 30px rgba(0,0,0,0.18);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), opacity 220ms ease;
}

/* Animáció variánsok */
.no-menu-offcanvas--slide.no-menu--open .no-menu-offcanvas__panel {
  transform: translateX(0);
  opacity: 1;
}
.no-menu-offcanvas--fade .no-menu-offcanvas__panel {
  transform: translateX(-8px);
}
.no-menu-offcanvas--fade.no-menu--open .no-menu-offcanvas__panel {
  transform: translateX(0);
  opacity: 1;
}
.no-menu-offcanvas--scale .no-menu-offcanvas__panel {
  transform: translateX(-12px) scale(0.94);
}
.no-menu-offcanvas--scale.no-menu--open .no-menu-offcanvas__panel {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.no-menu-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.no-menu-offcanvas__title {
  font-weight: 700;
  font-size: 15px;
}
.no-menu-offcanvas__close {
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
}

.no-menu-offcanvas__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  overflow-y: auto;
}
.no-menu-offcanvas__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 8px 12px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}
.no-menu-offcanvas__item.active {
  background: var(--no-cream, #f6f1e7);
  border-color: var(--no-primary, #c49444);
}


/* Az ÉTLAP gomb minden képernyőméreten látható és működő */
/* @media (min-width: 900px) blokk szándékosan eltávolítva */


/* ══════════════════════════════════════════════════════
   v2.8.1 – Shake animáció kötelező mezőkhöz
   ══════════════════════════════════════════════════════ */

@keyframes no-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-7px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.no-shake {
  animation: no-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}

/* ── Modal notice: felül jelenik meg, nem a form alján ── */
.no-modal__notice {
  margin: 0 0 14px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  border: 1.5px solid transparent;
}
.no-modal__notice[hidden] { display: none; }
.no-notice--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.no-notice--success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.no-notice--info {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* ── Kötelező mező konténer kiemelt hiba state ── */
.no-shake .wc-pao-addon-name,
.no-shake > label,
.no-shake > legend {
  color: #b91c1c !important;
}
.no-shake .wc-pao-addon-wrap,
.no-shake {
  border-radius: 6px;
  outline: 2px solid rgba(185,28,28,0.25);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════
   v2.8.1 – ÉTLAP gomb: illeszkedik a no-cat-tab stílushoz
   ══════════════════════════════════════════════════════ */

/* Felülírjuk az előző v2.8.0 stílust */
.no-menu-mobile-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 12px !important;
  height: 32px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(0,0,0,0.13) !important;
  background: #fff !important;
  color: #3a3028 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 160ms ease !important;
  white-space: nowrap !important;
  outline: none !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
  letter-spacing: 0 !important;
}
.no-menu-mobile-btn:hover {
  background: #f5f0e8 !important;
  border-color: rgba(196,148,68,0.4) !important;
  color: #8B6318 !important;
}
.no-menu-mobile-btn:focus-visible {
  outline: 2px solid var(--no-primary, #c49444) !important;
  outline-offset: 2px !important;
}
.no-menu-mobile-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}
.no-menu-mobile-btn__label {
  font-weight: 500 !important;
  font-size: 13px !important;
}


/* ══════════════════════════════════════════════════════
   v2.8.4 – Gyors skeleton loader + loading overlay
   (AJAX race condition fix: vilagos visszajelzés)
   ══════════════════════════════════════════════════════ */

/* Loading overlay az area felett */
.no-loading-area {
  position: relative;
  pointer-events: none;
  min-height: 120px;
}
.no-loading-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.55);
  z-index: 10;
  border-radius: 8px;
  backdrop-filter: blur(1px);
  animation: no-fade-overlay 120ms ease both;
}
@keyframes no-fade-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Tab aktív állapot: ne villogjon click közben */
.no-cat-tab {
  transition: color 120ms ease, background 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease !important;
}

/* ══════════════════════════════════════════════════════
   v2.8.6 – Elfogyott / nem rendelhető termék kártya
   ══════════════════════════════════════════════════════ */

/* Szürkés, inaktív állapot */
.no-card--outofstock {
  opacity: 0.55;
  filter: grayscale(55%);
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Kép kissé sötétebb */
.no-card--outofstock .no-card__img {
  filter: brightness(0.82) saturate(0.5);
}

/* Overlay elrejtése elfogyottnál */
.no-card--outofstock .no-card__overlay {
  display: none !important;
}

/* ── "Nem rendelhető" badge ───────────────────────── */
.no-card__outofstock-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: inherit;
  z-index: 4;
  pointer-events: none;
}

/* SVG kereszt */
.no-card__outofstock-cross {
  width: 54px;
  height: 54px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

/* Felirat */
.no-card__outofstock-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(30, 20, 10, 0.65);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* Mobilon kisebb kereszt */
@media (max-width: 480px) {
  .no-card__outofstock-cross { width: 38px; height: 38px; }
  .no-card__outofstock-label { font-size: 0.65rem; }
}


/* ══════════════════════════════════════════════════════
   v2.10.0 – Header actions: Nézet + Rendezés dropdown
   ══════════════════════════════════════════════════════ */

.no-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.no-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Közös gombstílus */
.no-act-btn,
.no-act-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px 6px 9px;
    border-radius: 8px;
    border: 1.5px solid rgba(0,0,0,0.14);
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
    user-select: none;
}
.no-act-btn:hover,
.no-act-mobile-btn:hover {
    border-color: var(--no-primary, #C49444);
    background: #fafaf8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.no-act-btn[aria-expanded="true"] {
    border-color: var(--no-primary, #C49444);
    background: #fdf7ee;
}
.no-act-btn svg:last-child,
.no-act-mobile-btn svg:last-child {
    opacity: 0.45;
    transition: transform 0.18s;
}
.no-act-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); opacity: 0.7; }
.no-act-btn__lbl,
.no-act-mobile-btn__lbl { letter-spacing: 0.01em; }

/* Dropdown wrapper */
.no-act-wrap {
    position: relative;
}

/* Dropdown panel */
.no-act-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 175px;
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.09);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    z-index: 9999;
    padding: 4px;
    overflow: hidden;
}
.no-act-dropdown__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 7px;
    border: none;
    background: none;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    line-height: 1;
    transition: background 0.13s, color 0.13s;
}
.no-act-dropdown__item:hover { background: #f5f0e8; color: #111; }
.no-act-dropdown__item.active {
    background: #fdf6ec;
    color: var(--no-primary-hover, #a07830);
    font-weight: 700;
}
.no-act-item-icon { display: flex; align-items: center; opacity: 0.65; flex-shrink: 0; }
.no-act-dropdown__item.active .no-act-item-icon { opacity: 1; }
.no-act-item-lbl { flex: 1; }
.no-act-check { margin-left: auto; opacity: 0; color: var(--no-primary, #C49444); flex-shrink: 0; }
.no-act-dropdown__item.active .no-act-check { opacity: 1; }

/* Desktop: mobil gomb rejtve */
.no-act-mobile-btn { display: none; }

/* ── Mobilon ── */
@media (max-width: 899px) {
    .no-view-wrap,
    .no-sort-wrap:not(.no-sort-desktop) { display: none !important; }
    .no-act-mobile-btn { display: inline-flex; }
}

/* ── View offcanvas ── */
.no-view-offcanvas { display: none; }
.no-view-offcanvas.is-open { display: block; }

.no-view-oc__backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 99990;
}
.no-view-oc__panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 18px 18px 0 0;
    z-index: 99991;
    max-height: 80vh;
    overflow-y: auto;
    animation: noViewOcUp 0.27s cubic-bezier(0.16,1,0.3,1);
}
@keyframes noViewOcUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.no-view-oc__hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.no-view-oc__title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.no-view-oc__close {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.06); color: #555; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.14s;
}
.no-view-oc__close:hover { background: rgba(0,0,0,0.12); }
.no-view-oc__body { padding-bottom: 24px; }
.no-view-oc__sec-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: #aaa;
    padding: 14px 16px 6px; margin: 0;
}
.no-view-oc__sec-title + .no-view-oc__sec-title,
.no-view-oc__sort-list + .no-view-oc__sec-title {
    border-top: 1px solid rgba(0,0,0,0.06); margin-top: 4px;
}
.no-view-oc__layout-list,
.no-view-oc__sort-list {
    display: flex; flex-direction: column; gap: 2px; padding: 4px 8px;
}
.no-view-oc__item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 12px; border-radius: 10px;
    border: none; background: none; color: #333;
    font-size: 14px; font-weight: 500; cursor: pointer;
    text-align: left; line-height: 1;
    transition: background 0.13s, color 0.13s;
}
.no-view-oc__item:hover { background: #f5f0e8; }
.no-view-oc__item.active {
    background: #fdf6ec;
    color: var(--no-primary-hover, #a07830);
    font-weight: 700;
}
.no-view-oc__item-icon { display: flex; align-items: center; opacity: 0.65; }
.no-view-oc__item.active .no-view-oc__item-icon { opacity: 1; }
.no-view-oc__item-lbl { flex: 1; }
.no-view-oc__item .no-act-check { margin-left: auto; opacity: 0; color: var(--no-primary,#C49444); }
.no-view-oc__item.active .no-act-check { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   v3.5.0 – MINI CART
   ══════════════════════════════════════════════════════════ */

body.no-mc-body-lock { overflow: hidden; }

/* ── Kosár gomb ── */
.no-mc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1.5px solid rgba(0,0,0,.13);
    border-radius: 50%;
    background: #fff;
    color: #2b2a28;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto; /* v3.7.17: mobilon jobbra zár */ /* mobilon jobbra zár; 900px+ felülírja 0-ra */
    transition: background .18s, border-color .18s, box-shadow .18s, transform .14s;
}
.no-mc-btn:hover { background: #f5f3ef; border-color: rgba(0,0,0,.22); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.no-mc-btn:active { transform: scale(.93); }
.no-mc-btn svg { display: block; }

.no-mc-btn__badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    background: var(--no-accent, #b8860b);
    color: #fff; font-size: 10px; font-weight: 700;
    line-height: 18px; text-align: center;
    border-radius: 99px; border: 2px solid #fff;
    pointer-events: none;
    animation: no-mc-badge-pop .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes no-mc-badge-pop { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* ── Overlay ── */
.no-mc-overlay {
    position: fixed; inset: 0; z-index: 99990;
    display: flex; justify-content: flex-end;
    pointer-events: none;
}
.no-mc-overlay[aria-hidden="false"],
.no-mc--open { pointer-events: all; }

.no-mc-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .28s ease;
}
.no-mc--open .no-mc-backdrop { opacity: 1; }

/* ── Panel ── */
.no-mc {
    position: relative;
    width: min(420px, 100vw); height: 100%;
    background: #faf9f6;
    display: flex; flex-direction: column;
    box-shadow: -6px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
    will-change: transform;
    overflow: hidden;
}
.no-mc--open .no-mc { transform: translateX(0); }

/* ── Header ── */
.no-mc__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: #fff; flex-shrink: 0;
}
.no-mc__title {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700; color: #1a1917;
}
.no-mc__close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: transparent; color: #6b6a68; cursor: pointer;
    transition: background .15s, color .15s;
}
.no-mc__close:hover { background: #f0ede8; color: #1a1917; }

/* ── Body ── */
.no-mc__body {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 0; position: relative;
}
.no-mc__body::-webkit-scrollbar { width: 4px; }
.no-mc__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }

/* ── Loader ── */
.no-mc__loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(250,249,246,.8);
    opacity: 0; pointer-events: none;
    transition: opacity .18s; z-index: 2;
}
.no-mc__loader.active { opacity: 1; pointer-events: all; }
.no-mc__spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: var(--no-accent, #b8860b);
    border-radius: 50%;
    animation: no-mc-spin .7s linear infinite;
}
@keyframes no-mc-spin { to { transform: rotate(360deg); } }

/* ── Üres állapot ── */
.no-mc__empty {
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 52px 24px; text-align: center; gap: 6px;
}
.no-mc--empty .no-mc__empty {
    display: flex;
}
.no-mc__empty-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.no-mc__empty-title { font-size: 1rem; font-weight: 700; color: #1a1917; margin: 0; }
.no-mc__empty-sub   { font-size: .85rem; color: #999; margin: 0; }

/* ── Tételek ── */
.no-mc__items { list-style: none; margin: 0; padding: 0 0 4px; }
.no-mc__item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: relative;
    transition: background .15s, opacity .22s, transform .22s;
}
.no-mc__item:last-child { border-bottom: none; }
.no-mc__item:hover { background: rgba(0,0,0,.02); }
.no-mc__item--removing { opacity: 0; transform: translateX(32px); pointer-events: none; }

.no-mc__item-img-wrap {
    flex-shrink: 0; width: 60px; height: 60px;
    border-radius: 8px; overflow: hidden;
    background: #ede9e2; border: 1px solid rgba(0,0,0,.07);
}
.no-mc__item-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

.no-mc__item-body { flex: 1; min-width: 0; }
.no-mc__item-name {
    font-size: .875rem; font-weight: 600; color: #1a1917;
    margin: 0 0 3px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.no-mc__item-addons { list-style: none; margin: 0 0 5px; padding: 0; }
.no-mc__item-addons li {
    font-size: .73rem; color: #999; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.no-mc__item-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.no-mc__item-price {
    font-size: .85rem; font-weight: 700;
    color: var(--no-accent, #b8860b);
    margin-left: auto; white-space: nowrap;
}

/* Mennyiség */
.no-mc__item-qty {
    display: flex; align-items: center;
    border: 1.5px solid rgba(0,0,0,.13);
    border-radius: 99px; overflow: hidden; height: 28px;
}
.no-mc__qty-btn {
    width: 28px; height: 28px; border: none;
    background: transparent; font-size: 1rem; line-height: 1;
    color: #2b2a28; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s; padding: 0; flex-shrink: 0;
}
.no-mc__qty-btn:hover:not(:disabled) { background: rgba(0,0,0,.07); }
.no-mc__qty-btn:disabled { opacity: .3; cursor: default; }
.no-mc__qty-val {
    min-width: 22px; text-align: center;
    font-size: .8rem; font-weight: 600; color: #1a1917; padding: 0 2px;
}

/* Törlés */
.no-mc__item-remove {
    flex-shrink: 0; align-self: flex-start; margin-top: 2px;
    width: 26px; height: 26px; border: none; background: transparent;
    color: #ccc; cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s; padding: 0;
}
.no-mc__item-remove:hover { background: #fdecea; color: #c0392b; }

/* ── Footer ── */
.no-mc__footer {
    flex-shrink: 0; padding: 16px 20px 22px;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #fff;
    display: none; flex-direction: column; gap: 10px;
    position: relative; z-index: 10;
    pointer-events: auto;
}
.no-mc--has-items .no-mc__footer {
    display: flex;
}
.no-mc__checkout-btn,
.no-mc__cart-link {
    pointer-events: auto !important;
    position: relative;
    z-index: 11;
    cursor: pointer;
}
.no-mc__subtotal {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .875rem; color: #555;
}
.no-mc__subtotal-price { font-size: 1rem; font-weight: 700; color: #1a1917; }

.no-mc__checkout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px;
    background: var(--no-accent, #b8860b);
    color: #fff; font-size: .9rem; font-weight: 700;
    border-radius: 10px; text-decoration: none;
    letter-spacing: .02em;
    transition: background .18s, box-shadow .18s, transform .14s;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.no-mc__checkout-btn:hover {
    background: var(--no-accent-dark, #9a6f00);
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    transform: translateY(-1px); color: #fff;
}
.no-mc__checkout-btn:active { transform: translateY(0); }

.no-mc__cart-link {
    display: block; text-align: center;
    font-size: .8rem; color: #999;
    text-decoration: underline; text-underline-offset: 3px;
    transition: color .14s;
}
.no-mc__cart-link:hover { color: #333; }

/* ── Mobil ── */
@media (max-width: 480px) {
    .no-mc { width: 100vw; }
    .no-mc__header, .no-mc__footer { padding-left: 16px; padding-right: 16px; }
    .no-mc__item { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════
   v3.6.0 – Required Add-on validáció
   ══════════════════════════════════════════════════════════ */

@keyframes no-addon-shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-7px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-3px); }
    90%      { transform: translateX(2px); }
}

.no-addon-shake {
    animation: no-addon-shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-radius: 6px;
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}

.no-addon-error-msg {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fdecea;
    color: #c0392b;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 6px;
    border-left: 3px solid #e74c3c;
    animation: no-mc-badge-pop 0.2s ease both;
}
.no-addon-error-msg svg {
    flex-shrink: 0;
    color: #e74c3c;
}

/* ══════════════════════════════════════════════════════════
   v3.6.0 – Mini Cart: empty/footer display fix
   ══════════════════════════════════════════════════════════ */
.no-mc__empty { display: none; }

.no-mc__footer { display: none; }

/* ── Mini cart: fizetés gomb loading ── */
.no-mc-chk--loading {
    opacity: .75;
    cursor: not-allowed;
    pointer-events: none;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.no-mc-chk-spin {
    animation: no-mc-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes no-mc-spin {
    to { transform: rotate(360deg); }
}

/* v3.7.17: desktopon a kosár gomb margin-left:auto-ját töröljük */
@media (min-width: 900px) {
  .no-mc-btn { margin-left: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   v3.7.18 MASTER HEADER LAYOUT – minden korábbi szabályt felülír
   ══════════════════════════════════════════════════════════════ */

/* RESET – minden header elem order és margin-left nullázása */
.no-header > * { margin-left: 0 !important; }

/* MOBIL (alap, <900px): wrap, 2 sor */
.no-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
}

/* 1. sor: cím (bal) + kosár (jobb) */
.no-header__title   { order: 1 !important; flex: 1 1 auto !important; margin-left: 0 !important; }
.no-mc-btn          { order: 2 !important; flex: 0 0 auto !important; margin-left: auto !important; }

/* 2. sor: tabok (teljes szélesség) */
.no-cat-tabs        { order: 3 !important; flex: 1 1 100% !important; }

/* DESKTOP (≥900px): nowrap, egyetlen sor */
@media (min-width: 900px) {
  .no-header        { flex-wrap: nowrap !important; }
  .no-header__title { order: 1 !important; flex: 0 0 auto !important; }
  .no-cat-tabs      { order: 2 !important; flex: 1 1 auto !important; min-width: 0; overflow: hidden; }
  .no-more-cats     { order: 3 !important; flex: 0 0 auto !important; }
  .no-sort-wrap     { order: 4 !important; flex: 0 0 auto !important; margin-left: 0 !important; }
  .no-mc-btn        { order: 5 !important; flex: 0 0 auto !important; margin-left: 0 !important; }
}


/* ═══════════════════════════════════════════════════════
   v4.4.9 – Mini Cart: Nyitvatartás sáv + Infó panelek
   ═══════════════════════════════════════════════════════ */

/* ── Nyitvatartás sáv ────────────────────────────────── */
.no-mc__hours-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 0 2px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    transition: background 0.2s ease;
}

.no-mc__hours-bar.no-mc__hours--open {
    background: #f0faf3;
    color: #1a7a3a;
    border: 1px solid #c3e6cb;
}

.no-mc__hours-bar.no-mc__hours--closed {
    background: #fdf3f3;
    color: #9b2335;
    border: 1px solid #f5c6cb;
}

.no-mc__hours-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: no-mc-pulse 2s ease-in-out infinite;
}

.no-mc__hours--open .no-mc__hours-dot {
    background: #28a745;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
}

.no-mc__hours--closed .no-mc__hours-dot {
    background: #dc3545;
    box-shadow: none;
    animation: none;
}

@keyframes no-mc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.no-mc__hours-label {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.no-mc__hours-time {
    margin-left: auto;
    opacity: 0.75;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Infó panelek (accordion) ────────────────────────── */
.no-mc__info-panels {
    margin: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.no-mc__info-block {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.no-mc__info-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    gap: 8px;
    transition: background 0.15s ease;
    text-align: left;
}

.no-mc__info-trigger:hover {
    background: #f8f8f8;
}

.no-mc__info-trigger-label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.no-mc__info-icon {
    font-size: 15px;
    line-height: 1;
}

.no-mc__info-chevron {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #888;
}

.no-mc__info-trigger[aria-expanded="true"] .no-mc__info-chevron {
    transform: rotate(180deg);
}

/* Accordion: lentről felfelé nyílik */
.no-mc__info-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 0;
}

.no-mc__info-panel.no-mc__info-panel--open {
    max-height: 560px;
    opacity: 1;
    overflow-y: auto;
    /* Szép görgetősáv */
    scrollbar-width: thin;
    scrollbar-color: #d4d1ca transparent;
}

.no-mc__info-panel.no-mc__info-panel--open::-webkit-scrollbar {
    width: 4px;
}

.no-mc__info-panel.no-mc__info-panel--open::-webkit-scrollbar-track {
    background: transparent;
}

.no-mc__info-panel.no-mc__info-panel--open::-webkit-scrollbar-thumb {
    background: #d4d1ca;
    border-radius: 4px;
}

.no-mc__info-panel-inner {
    padding: 4px 14px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    border-top: 1px solid #f0f0f0;
}

.no-mc__info-panel-inner p { margin: 0 0 8px; }
.no-mc__info-panel-inner p:last-child { margin-bottom: 0; }
.no-mc__info-panel-inner ul,
.no-mc__info-panel-inner ol {
    margin: 6px 0;
    padding-left: 18px;
}
.no-mc__info-panel-inner li { margin-bottom: 4px; }
.no-mc__info-panel-inner a {
    color: var(--no-primary, #C49444);
    text-decoration: underline;
}
.no-mc__info-panel-inner strong { color: #333; }


/* ═══════════════════════════════════════════════════════
   v4.4.9 – Mini Cart: Kiszállítás infó tábla stílusok
   ═══════════════════════════════════════════════════════ */

.no-mc__info-panel-inner .shipping-box {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    color: inherit;
}

.no-mc__info-panel-inner .shipping-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.no-mc__info-panel-inner .shipping-table {
    width: 100%;
    border-collapse: collapse;
}

.no-mc__info-panel-inner .shipping-table caption {
    caption-side: top;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 700;
    padding-bottom: 10px;
    color: #28251d;
}

.no-mc__info-panel-inner .shipping-table thead th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a7974;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #ddd8d2;
}

.no-mc__info-panel-inner .shipping-table tbody tr {
    transition: background-color 0.15s ease;
}

.no-mc__info-panel-inner .shipping-table tbody tr:hover {
    background: #f3f7f7;
}

.no-mc__info-panel-inner .shipping-table td {
    padding: 10px 0;
    border-bottom: 1px solid #ece8e2;
    vertical-align: top;
}

.no-mc__info-panel-inner .shipping-table tbody tr:last-child td {
    border-bottom: none;
}

.no-mc__info-panel-inner .place-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #28251d;
    margin-bottom: 3px;
}

.no-mc__info-panel-inner .place-meta {
    display: block;
    font-size: 0.80rem;
    color: #7a7974;
}

.no-mc__info-panel-inner .fee-cell {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: #01696f;
    font-size: 0.90rem;
    vertical-align: middle;
}

.no-mc__info-panel-inner .car-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.no-mc__info-panel-inner .mobile-fee-label {
    display: none;
}

/* Mini cart panel – valódi táblázat layout */
.no-mc__info-panel-inner .shipping-table {
    display: table;
    width: 100%;
}

.no-mc__info-panel-inner .shipping-table thead {
    display: table-header-group;
}

.no-mc__info-panel-inner .shipping-table tbody {
    display: table-row-group;
}

.no-mc__info-panel-inner .shipping-table tr {
    display: table-row;
}

.no-mc__info-panel-inner .shipping-table th,
.no-mc__info-panel-inner .shipping-table td {
    display: table-cell;
}

.no-mc__info-panel-inner .shipping-table caption {
    white-space: normal;
    max-width: 100%;
}

.no-mc__info-panel-inner .place-meta {
    margin-bottom: 0;
}

.no-mc__info-panel-inner .fee-cell {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

/* mobile-fee-label/value elrejtve – valódi táblázat van */
.no-mc__info-panel-inner .mobile-fee-label {
    display: none;
}

.no-mc__info-panel-inner .mobile-fee-value {
    display: inline;
    font-size: 0.90rem;
    font-weight: 700;
    color: #01696f;
}

/* ═══════════════════════════════════════════════════════
   KERESÉSI TALÁLATOK — v4.4.9
   Desktop: mindig grid, eltérő kártyastílus
   Mobil:   mindig lista, eltérő stílus
   ═══════════════════════════════════════════════════════ */

/* Keresősáv aktív animáció */
.no-search-bar__inner--searching {
  border-color: var(--no-primary, #C49444) !important;
  box-shadow: 0 0 0 3px rgba(196,148,68,.18), 0 0 16px rgba(196,148,68,.12) !important;
  animation: no-search-pulse 1.4s ease-in-out infinite;
}
@keyframes no-search-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(196,148,68,.18), 0 0 16px rgba(196,148,68,.10); }
  50%      { box-shadow: 0 0 0 5px rgba(196,148,68,.28), 0 0 28px rgba(196,148,68,.20); }
}

/* Keresés ikona animáció */
.no-search-bar__inner--searching .no-search-bar__icon {
  color: var(--no-primary, #C49444);
  animation: no-search-icon-bounce 0.6s ease infinite alternate;
}
@keyframes no-search-icon-bounce {
  from { transform: scale(1);    opacity: .8; }
  to   { transform: scale(1.18); opacity: 1;  }
}

/* Gépelés indikátor (3 pötty) */
.no-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.no-typing-indicator span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--no-primary, #C49444);
  animation: no-typing-dot 1.0s ease-in-out infinite;
  display: inline-block;
}
.no-typing-indicator span:nth-child(2) { animation-delay: .16s; }
.no-typing-indicator span:nth-child(3) { animation-delay: .32s; }
@keyframes no-typing-dot {
  0%,80%,100% { transform: translateY(0);    opacity: .4; }
  40%          { transform: translateY(-5px); opacity: 1;  }
}

/* Skeleton shimmer kártyák keresés közben */
.no-search-skeleton {
  display: grid;
  grid-template-columns: repeat(var(--no-cols, 3), 1fr);
  gap: 14px;
  padding: 4px 0;
}
.no-search-skeleton__card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--no-card-border, #e8e0d0);
}
.no-search-skeleton__img {
  height: 160px;
  background: linear-gradient(90deg, #f3ede4 25%, #ede5d8 50%, #f3ede4 75%);
  background-size: 200% 100%;
  animation: no-shimmer 1.4s ease-in-out infinite;
}
.no-search-skeleton__body { padding: 12px; }
.no-search-skeleton__line {
  height: 12px; border-radius: 6px; margin-bottom: 8px;
  background: linear-gradient(90deg, #f3ede4 25%, #ede5d8 50%, #f3ede4 75%);
  background-size: 200% 100%;
  animation: no-shimmer 1.4s ease-in-out infinite;
}
.no-search-skeleton__line:nth-child(1) { width: 70%; }
.no-search-skeleton__line:nth-child(2) { width: 45%; animation-delay: .1s; }
.no-search-skeleton__line:nth-child(3) { width: 30%; height: 20px; margin-top: 10px; border-radius: 8px; animation-delay: .2s; }
@keyframes no-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobil skeleton: lista forma */
@media (max-width: 700px) {
  .no-search-skeleton {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .no-search-skeleton__card { display: flex; flex-direction: row; align-items: center; gap: 0; }
  .no-search-skeleton__img  { height: 70px; width: 80px; flex-shrink: 0; border-radius: 0; }
  .no-search-skeleton__body { flex: 1; padding: 10px 12px; }
}

/* ── Keresési találatok konténer ── */
.no-search-results {
  /* marker osztály — layout override-hoz */
}

/* DESKTOP: mindig grid, eltérő kártyastílus */
@media (min-width: 701px) {
  .no-search-results {
    display: grid !important;
    grid-template-columns: repeat(var(--no-cols, 3), 1fr) !important;
    gap: 14px !important;
  }
  /* Grid találat-kártya: kissé eltérő megjelenés */
  .no-search-results .no-card {
    border: 1.5px solid var(--no-primary, #C49444);
    border-opacity: 0.25;
    box-shadow: 0 2px 12px rgba(196,148,68,.10);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .no-search-results .no-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(196,148,68,.18);
    border-color: var(--no-primary, #C49444);
  }
  .no-search-results .no-card__img-wrap { height: 160px; }
  /* Találat badge a kártyán */
  .no-search-results .no-card { position: relative; }
  .no-search-results .no-card::before {
    content: '🔍';
    position: absolute; top: 8px; right: 8px;
    font-size: 11px;
    background: rgba(196,148,68,.15);
    border: 1px solid rgba(196,148,68,.3);
    border-radius: 99px;
    padding: 2px 7px;
    z-index: 2;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }
  .no-search-results .no-card:hover::before { opacity: 1; }
}

/* MOBIL: mindig lista, eltérő stílus */
@media (max-width: 700px) {
  .no-search-results {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* A grid kártyákat lista-itemként jelenítjük meg mobilon */
  .no-search-results .no-card {
    display: grid !important;
    grid-template-columns: 76px 1fr auto !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(196,148,68,.3) !important;
    background: var(--no-card-bg, #fff) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
    min-height: 76px !important;
  }
  .no-search-results .no-card__img-wrap {
    width: 76px !important;
    height: 76px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    grid-row: 1 / 3 !important;
  }
  .no-search-results .no-card__img-wrap img,
  .no-search-results .no-card__img { object-fit: cover; width: 76px; height: 76px; }
  .no-search-results .no-card__body {
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .no-search-results .no-card__name {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .no-search-results .no-card__price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--no-primary, #C49444) !important;
  }
  .no-search-results .no-card__desc,
  .no-search-results .no-card__allergens { display: none !important; }
  .no-search-results .no-card__footer {
    padding: 8px 10px 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .no-search-results .no-card__btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
}

/* Találatok staggered fade-in animáció */
.no-search-results .no-card {
  animation: no-result-in 0.36s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes no-result-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ════════════════════════════════════════════════════════
   SHOP LAYOUT — Desktop kosár sidebar
   v4.4.9
   Üres kosár → teljes széles rács
   Van item   → 2 oszlopos lista + 360px sticky sidebar
   ════════════════════════════════════════════════════════ */

/* ── Alap shop layout wrapper ───────────────────────── */
.no-shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0;
  align-items: start;
  transition: grid-template-columns 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Termékek oszlop ────────────────────────────────── */
.no-shop-layout__products {
  min-width: 0;
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Sidebar ─────────────────────────────────────────── */
.no-shop-sidebar {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(32px);
  transition:
    width       420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity     320ms cubic-bezier(0.16, 1, 0.3, 1) 80ms,
    transform   420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── VAN KOSÁR ÁLLAPOT (desktop ≥ 900px) ────────────── */
@media (min-width: 900px) {
  .no-wrapper--has-cart .no-shop-layout {
    grid-template-columns: 1fr 360px;
    gap: 24px;
  }

  .no-wrapper--has-cart .no-shop-sidebar {
    width: 360px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    overflow: visible;
  }

  /* Rácsnézet: marad az alapértelmezett oszlopszám (nem változtatjuk) */
  /* Lista nézetben 2 oszlopos elrendezés */
  .no-wrapper--has-cart .no-products-area .no-list-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── Sidebar belső ───────────────────────────────────── */
.no-shop-sidebar__inner {
  position: relative;
  top: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
  /* v4.4.9: overflow:visible – position:sticky megköveteli,
   * hogy egyetlen szülőn se legyen overflow:hidden/auto/scroll.
   * Belső görgetés az .no-shop-sidebar__items elemen marad. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  max-height: none;
  transition: top 200ms ease, max-height 200ms ease;
}

/* v4.4.9: Desktop sticky sidebar – attribútumtól független fallback. */
@media (min-width: 900px) {
  /* v4.4.9: !important + align-self:flex-start – téma override ellen */
  .no-wrapper--has-cart .no-shop-sidebar__inner {
    position: sticky !important;
    top: var(--no-sb-top, 80px) !important;
    max-height: calc(100vh - var(--no-sb-top, 80px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-self: flex-start;
  }
}

@media (min-width: 900px) {
  .no-wrapper[data-sidebar-sticky="yes"] .no-shop-sidebar__inner {
    position: sticky;
    top: var(--no-sb-top, 20px);
    max-height: calc(100vh - var(--no-sb-top, 20px) - 16px);
  }

  .no-wrapper[data-sidebar-sticky="no"] .no-shop-sidebar__inner {
    position: relative;
    top: auto;
    max-height: none;
  }
}

/* A sidebar maga is sticky kell legyen (a __inner önmagában sticky) */
.no-shop-sidebar {
  align-self: start; /* grid-ben: ne nyúljon ki a products magasságára */
}

/* Fejléc */
.no-shop-sidebar__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.no-shop-sidebar__header svg {
  color: var(--no-primary, #C49444);
}

/* Üres állapot */
.no-shop-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  color: #aaa;
  font-size: 0.85rem;
}
.no-shop-sidebar__empty span { font-size: 2rem; }
.no-shop-sidebar__empty p { margin: 0; }
.no-wrapper--has-cart .no-shop-sidebar__empty { display: none; }

/* Items lista */
.no-shop-sidebar__items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: 240px;
  scrollbar-width: thin;
  scrollbar-color: #e0dbd4 transparent;
}
.no-shop-sidebar__items::-webkit-scrollbar { width: 4px; }
.no-shop-sidebar__items::-webkit-scrollbar-track { background: transparent; }
.no-shop-sidebar__items::-webkit-scrollbar-thumb { background: #e0dbd4; border-radius: 4px; }

/* Item sor */
.no-sb-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 18px;
  gap: 8px;
  border-bottom: 1px solid #f5f3f0;
  font-size: 0.82rem;
  transition: background 160ms;
}
.no-sb-item:hover { background: #fdf9f2; }
.no-sb-item__name {
  flex: 1;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.no-sb-item__qty {
  color: #888;
  font-size: 0.78rem;
  white-space: nowrap;
}
.no-sb-item__price {
  font-weight: 700;
  color: var(--no-primary, #C49444);
  white-space: nowrap;
}
.no-sb-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  padding: 0 0 0 6px;
  font-size: 14px;
  line-height: 1;
  transition: color 160ms;
  flex-shrink: 0;
}
.no-sb-item__remove:hover { color: #e55; }

/* Végösszeg */
.no-shop-sidebar__totals {
  padding: 12px 18px 10px;
  border-top: 1px solid #f0ede8;
  flex-shrink: 0;
}
.no-shop-sidebar__discount-row,
.no-shop-sidebar__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  padding: 3px 0;
}
.no-shop-sidebar__total-row {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid #ede9e3;
}
.no-shop-sidebar__total-price {
  color: var(--no-primary, #C49444);
}
.no-shop-sidebar__discount-val { color: #4a7c3f; font-weight: 700; }

/* Rendelés gomb */
.no-shop-sidebar__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 18px 14px;
  padding: 13px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--no-primary, #C49444) 0%, var(--no-primary-hover, #a07030) 100%);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(140,90,20,0.25);
  transition: all 180ms cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}
.no-shop-sidebar__checkout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(140,90,20,0.35);
}
.no-shop-sidebar__checkout-arrow {
  margin-left: auto;
  opacity: 0.8;
}

/* Info panelek a sidebar-ban */
.no-shop-sidebar__info-panels {
  padding: 0 10px 6px;
  flex-shrink: 0;
}
.no-shop-sidebar__info-panels .no-mc__info-block {
  margin-bottom: 4px;
}

/* Nyitvatartás sáv */
.no-shop-sidebar__hours {
  margin: 4px 18px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
}

/* ── Lista kártyák (has-cart állapotban) ─────────────── */
@media (min-width: 900px) {
  .no-wrapper--has-cart .no-list-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ede9e3;
    background: #fff;
    transition: box-shadow 160ms, transform 160ms;
  }
  .no-wrapper--has-cart .no-list-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-1px);
  }
  .no-wrapper--has-cart .no-list-item__img-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }
  .no-wrapper--has-cart .no-list-item__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }
  .no-wrapper--has-cart .no-list-item__body {
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .no-wrapper--has-cart .no-list-item__name {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.3;
  }
  .no-wrapper--has-cart .no-list-item__desc {
    font-size: 0.75rem;
    color: #888;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .no-wrapper--has-cart .no-list-item .no-card__allergens {
    margin: 0 0 3px;
  }
  .no-wrapper--has-cart .no-list-item .no-card__allergens .no-allergen__icon {
    font-size: 11px;
  }
  .no-wrapper--has-cart .no-list-item__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .no-wrapper--has-cart .no-list-item__price {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--no-primary, #C49444);
  }
}

/* ── Mobilon a sidebar soha nem jelenik meg ─────────── */
@media (max-width: 899px) {
  .no-shop-sidebar { display: none !important; }
  .no-shop-layout { display: block !important; }
}

/* ── Sidebar item belső layout ───────────────────────── */
.no-sb-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.no-sb-item__addons-wrap {
  font-size: 0.72rem;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── v4.4.9: Korlátozott termék (no-card--restricted) ──────────────── */
.no-card--restricted {
    filter: grayscale(100%);
    opacity: .72;
    cursor: default !important;
    pointer-events: none;
}
.no-card--restricted:hover {
    transform: none !important;
    box-shadow: var(--no-card-shadow) !important;
}
.no-card--restricted .no-card__overlay { display: none !important; }
.no-card--restricted .no-card__img { transform: none !important; }

/* ── Átlós ribbon badge ─────────────────────────── */
.no-card__img-wrap {
    position: relative;
    overflow: hidden;
}
.no-badge--restricted {
    position: absolute;
    top: 22px;
    left: -38px;
    width: 160px;
    text-align: center;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 7px 0;
    transform: rotate(-45deg);
    transform-origin: center center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}
/* Lista nézetben is */
.no-list-item--restricted {
    filter: grayscale(100%);
    opacity: .72;
    cursor: default !important;
    pointer-events: none;
}
.no-list-item--restricted:hover { box-shadow: none !important; }

/* ════════════════════════════════════════════════════════════════════
   v4.4.9 – User Panel
   ════════════════════════════════════════════════════════════════════ */

/* ── Trigger gomb ── */
.no-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .18s, color .18s;
    flex-shrink: 0;
    order: 3;
    margin-left: 4px;
}
.no-user-btn:hover,
.no-user-btn:focus-visible {
    background: rgba(0,0,0,.07);
    outline: none;
}

/* ── Off-canvas overlay ── */
.no-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    pointer-events: none;
    visibility: hidden;
}
.no-up-overlay.no-up--open {
    pointer-events: auto;
    visibility: visible;
}
.no-up-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .28s ease;
}
.no-up--open .no-up-backdrop { opacity: 1; }

/* ── Panel ── */
.no-up {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 94vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
}
.no-up--open .no-up { transform: translateX(0); }

/* ── Header ── */
.no-up__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.no-up__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.no-up__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: #666;
    transition: background .15s;
}
.no-up__close:hover { background: #f0f0f0; color: #111; }

/* ── Body ── */
.no-up__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
.no-up__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}
.no-up__spinner {
    width: 28px; height: 28px;
    border: 3px solid #eee;
    border-top-color: #333;
    border-radius: 50%;
    animation: no-spin .7s linear infinite;
}
.no-up__error {
    padding: 24px 18px;
    color: #b00;
    font-size: 14px;
}

/* ── Content ── */
.no-up__content { padding: 0 0 8px; }

.no-up__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.no-up__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.no-up__profile-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}
.no-up__profile-email {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    word-break: break-all;
}

.no-up__section {
    padding: 14px 18px;
    border-bottom: 1px solid #f5f5f5;
}
.no-up__section:last-child { border-bottom: none; }
.no-up__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #999;
    margin-bottom: 6px;
}
.no-up__section-value {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
.no-up__section-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
.no-up__section-value a:hover { border-bottom-color: #333; }

/* ── Footer ── */
.no-up__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}
.no-up__account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}
.no-up__account-btn:hover { background: #333; color: #fff; }
.no-up__logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.no-up__logout-btn:hover { background: #fef2f2; color: #b00; border-color: #fca5a5; }

@media (prefers-color-scheme: dark) {
    .no-up { background: #1c1c1c; }
    .no-up__header { border-color: #2e2e2e; }
    .no-up__title { color: #f0f0f0; }
    .no-up__close { color: #aaa; }
    .no-up__close:hover { background: #2a2a2a; color: #fff; }
    .no-up__profile { border-color: #2a2a2a; }
    .no-up__profile-name { color: #f0f0f0; }
    .no-up__section { border-color: #252525; }
    .no-up__section-value { color: #ccc; }
    .no-up__footer { border-color: #2e2e2e; }
    .no-up__account-btn { background: #f0f0f0; color: #111; }
    .no-up__account-btn:hover { background: #fff; }
    .no-up__logout-btn { border-color: #3a3a3a; color: #999; }
    .no-up__logout-btn:hover { background: #2a1212; color: #f88; border-color: #5a2020; }
}


/* ════════════════════════════════════════════════════════
   v4.4.9: Mobil fiókom ikon – mini-cart-tal egy sorban
   A .no-auth-widget nincs az inline header order rendszerben
   → order:2-vel a mini-cart (order:3) elé kerül mobilon
   Desktop: a jobb oldali eszközök sorában jelenik meg (order:4)
   ════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .no-header .no-auth-widget,
  .no-header .no-auth-wrap {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .no-header .no-mc-btn {
    order: 3 !important;
    margin-left: 0 !important;
  }
}
@media (min-width: 900px) {
  .no-header .no-auth-widget,
  .no-header .no-auth-wrap {
    order: 4 !important;
    flex: 0 0 auto !important;
  }
}