/* =======================================================================
   Kárpátia – Globális stílusok
   Egységes (Morrisons-szerű) gombok + termékkártyák + stabil kosár UI (SSR)
   ======================================================================= */

/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRdu3cOWxy40.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sourcesanspro/v23/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------- CSS változók --------- */
:root{
  /* Tipográfia, méretek */
  --ui-base: 17px;
  --ui-lg:   18px;
  --round:   14px;
  --shadow:  0 6px 22px rgba(0,0,0,.06);

  /* Színek */
  --accent:   #006633;   /* karpatia-green */
  --accent-2: #f8c33b;   /* karpatia-yellow (alap gombszín) */

  /* Amber skála (qty-sávhoz) */
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24;
  --amber-500:#f59e0b; --amber-600:#d97706;

  /* Layout */
  --content-max: 1120px;
  --content-pad: 16px;

  /* HERO */
  --hero-overshoot: 48px;
  --hero-radius: 16px;
  --hero-grad-top:#eaf7f0;
  --hero-grad-mid:#f7fbf9;
  --hero-grad-bot:#ffffff;
}

/* --------- Alap tipográfia --------- */
html { scroll-behavior:smooth; }
body {
  font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:var(--ui-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:#111;
  background:#fff;
}
@media (min-width:1024px){ body{ font-size:var(--ui-lg); } }

/* --------- Hasznos utilok --------- */
.tabular-nums { font-variant-numeric: tabular-nums; }
.scrollbar-hide { scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

/* Kis kiegészítő Tailwind-szerű segédosztályok (ha kell a markupban) */
.text-karpatia-green { color: var(--accent) !important; }
.bg-karpatia-yellow { background: var(--accent-2) !important; }

/* =======================================================================
   Egységes gomb-rendszer (Morrisons stílus)
   Használat: .btn [.btn--sm|.btn--lg|.btn--full] + szín: .btn-amber|.btn-ghost|.btn-outline|.btn-danger
   ======================================================================= */
.btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; line-height:1; letter-spacing:.1px;
  border-radius:calc(var(--round) - 6px);
  min-height:44px; padding:.55rem .9rem;
  border:1px solid transparent;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer; user-select:none; text-decoration:none; color:#111;
  background:#fff;
}
.btn:focus-visible{ outline:2px solid #111; outline-offset:2px; }
.btn:disabled, .btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none!important; }

.btn--sm{ min-height:36px; padding:.4rem .7rem; font-size:.95rem; }
.btn--lg{ min-height:48px; padding:.65rem 1rem; font-size:1.05rem; }
.btn--full{ width:100%; }

/* Színvariánsok */
.btn-amber{
  background:var(--accent-2); color:#1d1d1d;
  border-color:#f7cf00; box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.btn-amber:hover{ background:#ffef70; transform:translateY(-1px); }
.btn-amber:active{ transform:translateY(0); }

.btn-ghost{ background:#fff; color:#111; border-color:#e5e7eb; }
.btn-ghost:hover{ background:#f9fafb; }

.btn-outline{ background:#fff; color:#111; border-color:#d1d5db; }
.btn-outline:hover{ background:#f9fafb; border-color:#cbd5e1; }

.btn-danger{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.btn-danger:hover{ background:#fecaca; }

/* =======================================================================
   Termékkártya (Morrisons-szerű) – minden oldalon egységes
   ======================================================================= */
.product-card{
  position:relative;
  background:#fffbea;
  border:1px solid rgba(244,229,161,.9);
  border-radius:var(--round);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.product-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }

.product-card img{
  width:100%; height:12.5rem; /* ~200px – NINCS !important */
  object-fit:cover;
  border-top-left-radius:calc(var(--round) - 4px);
  border-top-right-radius:calc(var(--round) - 4px);
  transition:transform .25s ease-in-out;
}
.product-card:hover img{ transform:scale(1.03); }

.product-card .discount-badge{ position:absolute; z-index:30; pointer-events:none; }
.product-card .text-sm{ color:#333; font-weight:500; }
.product-card .text-lg{ color:var(--accent); font-weight:700; }

/* Kedvencek (szív) */
.fav-toggle{
  background:#fff;
  width:36px; height:36px; border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background-color .15s ease;
}
.fav-toggle:hover{ transform:scale(1.15); background:#fff4f4; }
.fav-toggle svg{ stroke:#555; transition:all .2s ease-in-out; }
.fav-toggle.text-red-500 svg{ fill:#e63946; stroke:#e63946; }

/* =======================================================================
   Kosár vezérlők – qty-bar (Morrisons) + visszafelé kompatibilitás
   FONTOS: itt nincs globális .hidden felülírás! Csak célzottan rejtünk.
   A markup SSR-ben adja hozzá/veszi el a .hidden osztályt.
   ======================================================================= */

/* A kártya alsó slotja – fix magasság, ne ugráljon */
.cart-slot{ min-height:2.75rem; width:100%; }

/* „Kosárba” gomb – egységes, a régi .add-to-cart osztállyal is működik */
.add-to-cart{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:44px;
  border-radius:calc(var(--round) - 6px);
  background:var(--accent-2); color:#1d1d1d;
  border:1px solid #f7cf00; box-shadow:0 2px 4px rgba(0,0,0,.05);
  font-weight:700;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.add-to-cart:hover{ background:#ffef70; transform:translateY(-1px); }

/* Csak a kosárvezérlők rejtése legyen erős – NEM globális .hidden! */
.cart-control.hidden,
.qty-bar.hidden,
.add-to-cart.hidden{ display:none !important; }

/* qty-bar: ALAP (amber) – site-wide default */
.qty-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  width:100%; height:2.75rem; /* 44px */
  border-radius:calc(var(--round) - 6px);
  overflow:hidden;
  border:1px solid #f4e5a1;
  background:#fffce2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.qty-bar .decrease,
.qty-bar .increase{
  display:flex; align-items:center; justify-content:center;
  width:100% !important; height:100% !important;
  border:0 !important; border-radius:0 !important;
  font-size:1.125rem; font-weight:800; line-height:1; cursor:pointer;
  transition:filter .12s ease;
  background:var(--amber-200);
}
.qty-bar .increase{ background:var(--amber-400); }
.qty-bar .decrease:hover{ filter:brightness(.98); }
.qty-bar .increase:hover{ filter:brightness(.97); }
.qty-bar .qty{
  display:flex; align-items:center; justify-content:center;
  min-width:3.25rem; padding:0 .75rem; background:#fff;
  color:var(--accent); font-weight:700;
}

/* Régi .cart-control (nem qty-bar) – semleges, kompakt */
.cart-control:not(.qty-bar){
  background:#fffce2; border:1px solid #f4e5a1;
  border-radius:calc(var(--round) - 6px);
  padding:.4rem .6rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem;
}
.cart-control:not(.qty-bar) button{
  background:#ffe300; color:#333;
  width:36px; height:36px; border-radius:8px;
  border:1px solid #f7cf00; font-size:18px; font-weight:700;
  transition:transform .12s ease, background-color .12s ease;
}
.cart-control:not(.qty-bar) button:hover{ background:#fff176; transform:scale(1.06); }
.cart-control:not(.qty-bar) .qty{ color:var(--accent); font-weight:700; }

/* =======================================================================
   Űrlamelemek, kosár oldal, egyéb segédstílusok
   ======================================================================= */
input, select, textarea{ min-height:42px; border-radius:10px !important; }

/* Kosár lista és összegzés */
#cartList [data-id] > img{
  width:96px !important; height:96px !important;
  border-radius:12px; object-fit:cover;
}
#cartList .qty{ font-size:1.05rem; }
#cartSummary{ border-radius:var(--round); box-shadow:var(--shadow); }
#cartSummary .border-amber-200{ border-radius:12px; }
#etaDate{ font-weight:800; }

/* Toast kártyák */
#toastStack > div{ box-shadow:var(--shadow); }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:999px; padding:.2rem .55rem;
  font-weight:700; font-size:.72rem; border:1px solid rgba(0,0,0,.08);
  background:#f3f4f6; color:#1f2937;
}

/* Skeleton */
@keyframes pulse-skel{ 0%{opacity:.85} 50%{opacity:.6} 100%{opacity:.85} }
.skeleton{ background:linear-gradient(90deg,#f5f5f5,#eeeeee,#f5f5f5); animation:pulse-skel 1.1s infinite; }

/* Bal oldali drawer (mobil menü) */
#leftDrawer{ will-change:transform; transition:transform .22s ease; transform:translateX(-100%); }
#leftDrawer.is-open{ transform:translateX(0); }
#drawerOverlay{ display:none; }
#drawerOverlay.is-open{ display:block; }

/* Mobil kosársáv */
#mobileCartBar .bar{
  background:#fff; border-top:1px solid #e5e7eb; box-shadow:0 -6px 14px rgba(0,0,0,.06);
  padding:.75rem 1rem;
}

/* =======================================================================
   HOMEPAGE – HERO + MARKET (PIAC-VÁLASZTÓ) SZEKCIÓ
   ======================================================================= */
.container, .market-container{
  max-width:var(--content-max);
  margin-inline:auto; padding-inline:var(--content-pad);
}

#homeIntro{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--hero-grad-top) 0%,var(--hero-grad-mid) 38%,var(--hero-grad-bot) 100%);
}
#homeCategories{ background:#fff; }

.hero-banner{
  position:relative; z-index:1;
  width:calc(100% + (var(--hero-overshoot) * 2));
  max-width:calc(var(--content-max) + (var(--hero-overshoot) * 2));
  margin-inline:calc(var(--hero-overshoot) * -1); margin-bottom:20px;
  background:transparent; border-radius:var(--hero-radius);
}
.hero-banner .hero-card{ background:transparent; box-shadow:var(--shadow); border-radius:var(--hero-radius); }

.hero-banner::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hero-grad-top) 60%, transparent) 0%,
    color-mix(in srgb, var(--hero-grad-mid) 30%, transparent) 60%,
    transparent 100%);
}

@media (max-width:640px){
  :root{ --hero-overshoot:24px; }
  .hero-banner{ margin-bottom:16px; }
}
#homeIntro .market-container{ padding-top:8px; padding-bottom:8px; }
#homeCategories .section-title{ margin-top:10px; }

/* =======================================================================
   FILTER UI – kétféle minta támogatása (régi #filterPanel + új #filterSheet)
   ======================================================================= */

/* Régi mobil filter drawer (category.php régi markuphoz) */
#filterPanel{ transition:transform .22s ease, opacity .22s ease; }
@media (max-width:767px){
  #filterPanel{
    position:fixed !important; left:0; right:0; bottom:0; top:auto;
    max-height:82vh; transform:translateY(110%); opacity:0;
    border-top-left-radius:16px; border-top-right-radius:16px; background:#fff;
    box-shadow:0 -10px 30px rgba(0,0,0,.2);
  }
  #filterPanel.is-open{ transform:translateY(0); opacity:1; }
  #filterBackdrop.is-open{ display:block !important; }
}
#filterBackdrop{ display:none; backdrop-filter:blur(1px); }

/* Új mobil sheet (#filterSheet) – ha használod az új markupot */
.sheet{ position:fixed; inset:0; display:none; z-index:60; }
.sheet.open{ display:block; }
.sheet .panel{
  position:absolute; inset-inline:0; bottom:0; background:#fff;
  border-top-left-radius:1rem; border-top-right-radius:1rem;
  box-shadow:0 -10px 30px rgba(0,0,0,.2);
  transform:translateY(100%); transition:transform .28s ease;
}
.sheet.open .panel{ transform:translateY(0); }
.sheet .scrim{ position:absolute; inset:0; background:rgba(0,0,0,.35); }

/* =======================================================================
   Egyéb apróságok
   ======================================================================= */

/* Link hover egységesen finom */
a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* Kisebb tipó finomhangolás */
small, .text-xs { letter-spacing:.2px; }

/* Kép placeholder figyelmes megjelenítése (ha kell) */
img[alt=""], img:not([alt]){ filter:saturate(.96) contrast(1.02); }

/* =======================================================================
   K-CAROUSEL – EGYSÉGES (site-wide, FLEX)
   Ez a blokk lecseréli a korábbi "Home carousels" grid-es verziót.
   ======================================================================= */
// public/assets/style.css — K-CAROUSEL – EGYSÉGES (site-wide, FLEX)

/* =======================================================================
   K-CAROUSEL – EGYSÉGES (site-wide, FLEX)
   Ez a blokk lecseréli a régi, grid-es carouselt. A nyilak mindig
   a cím mellett, egy sorban maradnak. A kártyák vízszintesen futnak.
   ======================================================================= */

.k-carousel{ position:relative; }

/* Fejléc: cím + nyilak egy sorban */
.k-carousel .k-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin:0 0 1rem 0;
  position:relative;
}
.k-carousel .k-head h2{
  margin:0;
  min-width:0;                /* enged zsugorodni, ne törje le a nyilakat */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.k-carousel .k-head .k-nav{
  position:static;            /* nem absolute, így egy sorban marad */
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;              /* ne törjön új sorba */
  white-space:nowrap;
}

/* Navigációs gombok */
.k-btn{
  display:grid; place-items:center;
  width:36px; height:36px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
}
.k-btn svg{ width:20px; height:20px; }
.k-btn:disabled,
.k-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* A vízszintes „sín” */
.k-carousel .k-row{
  display:flex;               /* vízszintes sor */
  flex-wrap:nowrap;           /* ne törjön új sorba */
  gap:12px;
  overflow-x:auto;            /* vízszintes görgetés */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding-bottom:.25rem;      /* kis hely a mobil scrollbar-nak */
  scroll-padding-left:.5rem;
}

/* Kártyaszélesség + snap */
.k-carousel .k-row > .k-item{
  flex:0 0 auto;              /* ne nyúljon, ne törjön le */
  width:220px;                /* mobil alap */
  scroll-snap-align:start;
}
@media (min-width:768px){
  .k-carousel .k-row > .k-item{ width:240px; } /* desktopon picit szélesebb */
}

/* Görgetősáv elrejtése (opcionális, egységes) */
.k-carousel .k-row{ scrollbar-width:none; }
.k-carousel .k-row::-webkit-scrollbar{ display:none; }

/* Finom perem-fade (látható, ha van overflow) */
.k-carousel::before,
.k-carousel::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:36px; pointer-events:none; z-index:2;
}
.k-carousel::before{
  left:0;
  background:linear-gradient(90deg,#fff 0%, rgba(255,255,255,0) 100%);
}
.k-carousel::after{
  right:0;
  background:linear-gradient(270deg,#fff 0%, rgba(255,255,255,0) 100%);
}

/* Product-oldali finomhangolás (ha a carousel ott fut) */
.page-product .k-row > .k-item{ width:220px; }
@media (min-width:768px){
  .page-product .k-row > .k-item{ width:240px; }
}
/* Ha valahol közvetlenül .product-card megy a sorba .k-item nélkül,
   a szülő úgyis meghatározza az elrendezést – itt nem erőltetünk szélességet. */

/* =======================================================================
   TERMÉKOLDAL (scoped): képmagasság + apróságok
   Add hozzá a fő <main> elemhez: class="page-product"
   ======================================================================= */

/* Termékoldal-specifikus képmagasság (felülírja az alapot) */
.page-product .k-card img,
.page-product .product-card img{
  height:176px;
}

/* A product oldalon használt kártya/karusszel apróságok */
.page-product .k-item{ width:220px; }
@media (min-width:768px){ .page-product .k-item{ width:240px; } }
.page-product .k-card{
  border-radius:.75rem; overflow:hidden; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  border:1px solid rgba(248,195,59,.35);
  display:flex; flex-direction:column;
}
.page-product .k-body{ padding:.75rem; display:flex; flex-direction:column; gap:.5rem; flex:1 1 auto; }
.page-product .k-title{
  font-weight:600; font-size:.95rem; line-height:1.25rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.5rem;
}
.page-product .k-price{ min-height:1.75rem; display:flex; align-items:baseline; gap:.5rem; }
.page-product .k-actions{ margin-top:auto; }
.page-product .cart-slot{ min-height:2.75rem; }
.page-product .add-to-cart{ height:2.75rem; }

/* qty-bar – product oldali finom változat (border/background) */
.page-product .qty-bar{
  border:1px solid #e5e7eb; background:#fff; box-shadow:none;
}

/* =======================================================================
   Desktop: stabil függőleges görgetősáv (ne ugráljon a layout)
   ======================================================================= */

/* Modern böngészőknek (Chrome, Edge, Firefox, új Safari): */
@media (min-width: 1024px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* Fallback régebbi böngészőkre:
   Mindig legyen "helye" a scroll sávnak desktopon, még akkor is,
   ha épp nincs szükség görgetésre. */
@media (min-width: 1024px) {
  html {
    overflow-y: scroll;
  }
}

/* =======================================================================
   Sticky header – JS-alapú (mobil + desktop)
   ======================================================================= */

:root {
  --site-header-h: 0px;
}

body.has-sticky-header {
  padding-top: var(--site-header-h);
}

/* Alap állapot: normál flow-ban van a header */
#siteHeader {
  position: relative;
  z-index: 50;
}

/* Amikor görgetésnél "ragad", fixen a tetején van */
#siteHeader.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
}

.tag-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #000;
  fill: none;
}

/* Ha mindenhol monokróm kell, extra biztosíték: */
.product-tag,
.product-tag * {
  color: #000;
}

/* /var/www/karpatia/public/assets/css/fbt.css */

/* Wrapper */
.fbt-wrapper {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow: hidden;
}

/* Title */
.fbt-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: left;
}

/* Slider container */
.fbt-slider {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
}

.fbt-slider::-webkit-scrollbar {
    display: none;
}

.fbt-item {
    min-width: 160px;
    max-width: 160px;
    background: #ffffff;
    border-radius: .75rem;
    padding: .75rem;
    text-align: center;
    scroll-snap-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.fbt-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: .75rem;
}

.fbt-price {
    margin-top: .5rem;
    font-size: .9rem;
    font-weight: 600;
}

.fbt-old {
    text-decoration: line-through;
    color: #888;
    margin-right: .35rem;
}

.fbt-new {
    color: #c62828;
    font-weight: 700;
}

/* Add to cart btn */
.fbt-add {
    margin-top: .75rem;
    background: #0f8a00;
    color: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 600;
    width: 100%;
}

/* Add all */
.fbt-all-btn {
    margin-top: 1rem;
    width: 100%;
    padding: .85rem;
    background: #0c7a00;
    color: #fff;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
}