/* /var/www/karpatia/public/assets/css/style.css */
/* =======================================================================
   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(--k-green, var(--accent)) !important; }
.bg-karpatia-yellow  { background: var(--k-yellow, var(--accent-2)) !important; }
.bg-karpatia-green   { background-color: var(--k-green, var(--accent)) !important; }
.text-karpatia-yellow{ color: var(--k-yellow, 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;
  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
   ======================================================================= */
.cart-slot{ min-height:2.75rem; width:100%; }

.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); }

.cart-control.hidden,
.qty-bar.hidden,
.add-to-cart.hidden{ display:none !important; }

.qty-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  width:100%; height:2.75rem;
  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;
}

.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; }

#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; }

#toastStack > div{ box-shadow:var(--shadow); }

.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;
}

@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; }

#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; }

#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)
   ======================================================================= */

#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); }

.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
   ======================================================================= */
a:hover{ text-decoration:none; text-underline-offset:2px; }
small, .text-xs { letter-spacing:.2px; }
img[alt=""], img:not([alt]){ filter:saturate(.96) contrast(1.02); }

/* =======================================================================
   K-CAROUSEL – EGYSÉGES (site-wide, FLEX)
   ======================================================================= */
.k-carousel{ position:relative; }

.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;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.k-carousel .k-head .k-nav{
  position:static;
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  white-space:nowrap;
}

.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; }

.k-carousel .k-row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding-bottom:.25rem;
  scroll-padding-left:.5rem;
}

.k-carousel .k-row > .k-item{
  flex:0 0 auto;
  width:220px;
  scroll-snap-align:start;
}
@media (min-width:768px){
  .k-carousel .k-row > .k-item{ width:240px; }
}

.k-carousel .k-row{ scrollbar-width:none; }
.k-carousel .k-row::-webkit-scrollbar{ display:none; }


/* K-CAROUSEL – széli fehér "fade" / belevilágítás kikapcsolása */
.k-carousel::before,
.k-carousel::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.page-product .k-row > .k-item{ width:220px; }
@media (min-width:768px){
  .page-product .k-row > .k-item{ width:240px; }
}

/* =======================================================================
   TERMÉKOLDAL (scoped)
   ======================================================================= */
.page-product .k-card img,
.page-product .product-card img{
  height:176px;
}

.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; }

.page-product .qty-bar{
  border:1px solid #e5e7eb; background:#fff; box-shadow:none;
}

/* =======================================================================
   Desktop: stabil függőleges görgetősáv
   ======================================================================= */
@media (min-width: 1024px) {
  html { scrollbar-gutter: stable; }
}
@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); }

#siteHeader { position: relative; z-index: 50; }
#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; }

.product-tag,
.product-tag * { color:#000; }

/* /var/www/karpatia/public/assets/css/fbt.css */
.fbt-wrapper {
    background: #fff;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    overflow: hidden;
}
.fbt-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: left;
}
.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;
}
.fbt-add {
    margin-top: .75rem;
    background: #0f8a00;
    color: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 600;
    width: 100%;
}
.fbt-all-btn {
    margin-top: 1rem;
    width: 100%;
    padding: .85rem;
    background: #0c7a00;
    color: #fff;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
}

/* =======================================================================
   HEADER CSS – beemelve (korábban: /assets/css/header.css)
   ======================================================================= */
header#siteHeader{box-shadow:none!important;border:0!important;margin:0!important;background:#fff}
#mainMenu{margin:0!important;border:0!important}

i.fa,.fa-solid,.fa-regular,.fa-brands{font-style:normal!important}
.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fa-regular{font-family:"Font Awesome 6 Free";font-weight:400}
.fa-brands{font-family:"Font Awesome 6 Brands"}

.dropdown{transition:all .14s ease-in-out;transform-origin:top}
.dropdown.hidden{opacity:0;transform:scaleY(.96);pointer-events:none}

#searchWrap,#mobileSearchWrap{position:relative}
.search-suggest{position:absolute;top:100%;left:0;right:0;z-index:320;background:#fff;border:1px solid #e5e7eb;border-top:0;border-radius:0 0 .75rem .75rem;box-shadow:0 8px 20px rgba(0,0,0,.08);max-height:24rem;overflow-y:auto;display:none}
.search-suggest.open{display:block}
.sug-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;cursor:pointer}
.sug-item:hover,.sug-item.active{background:#f8fafc}
.sug-thumb{width:42px;height:42px;border-radius:.35rem;object-fit:cover;background:#f1f5e9;flex:0 0 42px}
.sug-name{font-size:.93rem;color:#0f172a;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.sug-price{font-weight:700;font-size:.93rem;color:#065f46;margin-left:auto}

.header-cart-btn{background:#f8c33b;color:#111827;border:1px solid #f9d34a;box-shadow:0 2px 5px rgba(0,0,0,.06)}

@media (max-width:767px){
  html,body{overflow-x:hidden;touch-action:manipulation;-ms-touch-action:manipulation}
  #mobileSearchWrap .search-suggest{position:fixed;max-height:60vh;z-index:330}
}

/* =======================================================================
   HEADER CSS – beemelve (korábban: /assets/css/header.css)
   ======================================================================= */

header#siteHeader{box-shadow:none!important;border:0!important;margin:0!important;background:#fff}
#mainMenu{margin:0!important;border:0!important}

i.fa,.fa-solid,.fa-regular,.fa-brands{font-style:normal!important}
.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fa-regular{font-family:"Font Awesome 6 Free";font-weight:400}
.fa-brands{font-family:"Font Awesome 6 Brands"}

.dropdown{transition:all .14s ease-in-out;transform-origin:top}
.dropdown.hidden{opacity:0;transform:scaleY(.96);pointer-events:none}

#searchWrap,#mobileSearchWrap{position:relative}
.search-suggest{
  position:absolute;top:100%;left:0;right:0;z-index:320;
  background:#fff;border:1px solid #e5e7eb;border-top:0;
  border-radius:0 0 .75rem .75rem;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  max-height:24rem;overflow-y:auto;display:none
}
.search-suggest.open{display:block}
.sug-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;cursor:pointer}
.sug-item:hover,.sug-item.active{background:#f8fafc}
.sug-thumb{width:42px;height:42px;border-radius:.35rem;object-fit:cover;background:#f1f5e9;flex:0 0 42px}
.sug-name{font-size:.93rem;color:#0f172a;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.sug-price{font-weight:700;font-size:.93rem;color:#065f46;margin-left:auto}

.header-cart-btn{background:#f8c33b;color:#111827;border:1px solid #f9d34a;box-shadow:0 2px 5px rgba(0,0,0,.06)}

@media (max-width:767px){
  html,body{overflow-x:hidden;touch-action:manipulation;-ms-touch-action:manipulation}
  #mobileSearchWrap .search-suggest{position:fixed;max-height:60vh;z-index:330}
}

/* /var/www/karpatia/public/assets/css/style.css */
/* =======================================================================
   AMAZON-LIKE HERO (Laravel) – kh- prefix
   ======================================================================= */

#amazonHero{
  --kh-max: var(--content-max, 1120px);
  --kh-h: clamp(180px, 22vw, 260px);
  --kh-grad-start: #066839; /* felülírható inline style varral a sectionön */
  --kh-grad-end:   #052e16; /* felülírható inline style varral a sectionön */
  --kh-dot-size: 12px;
  --kh-dot-long: 34px;

  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;
  margin-top:0;
  margin-bottom:0;
  overflow:visible;
  z-index:1;
}

#amazonHero .kh-rail{
  position:relative;
  width:100%;
  height:var(--kh-h);
  background:linear-gradient(
    180deg,
    var(--kh-grad-start) 0%,
    rgba(6,104,57,0.94) 25%,
    rgba(6,104,57,0.32) 85%,
    rgba(6,104,57,0.00) 100%
  );
  overflow:hidden;
}

#amazonHero .kh-slide{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
#amazonHero .kh-slide[data-active="1"]{ opacity:1; z-index:2; }

#amazonHero .kh-content{
  max-width:var(--kh-max);
  margin:0 auto;
  padding:14px 24px 26px;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

#amazonHero .kh-slide[data-type="greet"] .kh-content{ justify-content:center; }

#amazonHero .kh-title{
  color:#fff;
  font-weight:800;
  font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

#amazonHero .kh-sub{
  color:#fff;
  opacity:.9;
  margin-top:.25rem;
  font-size:clamp(12px,1.2vw,15px);
}

#amazonHero .kh-strip{
  display:flex;
  gap:10px;
  margin-top:12px;
  padding:0 4px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  opacity:0;
  transform:scale(.985);
  will-change:opacity, transform;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

#amazonHero .kh-strip[data-ready="1"]{
  opacity:1;
  transform:none;
  transition:opacity .24s ease, transform .24s ease;
}

#amazonHero .kh-strip::-webkit-scrollbar{ height:4px; }
#amazonHero .kh-strip::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; }

#amazonHero .kh-item{
  position:relative;
  flex:0 0 150px;
  scroll-snap-align:center;
  text-decoration:none;

  background:#fff;
  border-radius:14px;
  padding:9px;
  box-shadow:0 6px 14px rgba(15,23,42,.16);
  border:1px solid rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  transform-origin:center center;
}

#amazonHero .kh-item:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 26px rgba(15,23,42,.22);
}

#amazonHero .kh-skel{
  position:absolute;
  inset:9px;
  display:grid;
  grid-template-rows: 90px 12px 12px;
  gap:8px;
  pointer-events:none;
}

#amazonHero .kh-skel .sk-img,
#amazonHero .kh-skel .sk-line{
  border-radius:8px;
  background:linear-gradient(90deg, rgba(15,23,42,.06) 0%, rgba(15,23,42,.12) 50%, rgba(15,23,42,.06) 100%);
  background-size:200% 100%;
  animation:khShimmer 1.1s linear infinite;
}

#amazonHero .kh-skel .sk-line.sk-2{ width:80%; }

#amazonHero .kh-item[data-ready="0"] img,
#amazonHero .kh-item[data-ready="0"] .kh-name,
#amazonHero .kh-item[data-ready="0"] .kh-price,
#amazonHero .kh-item[data-ready="0"] .kh-old{ visibility:hidden; }

#amazonHero .kh-item[data-ready="1"] .kh-skel{ display:none; }

@keyframes khShimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

#amazonHero .kh-item img{ width:100%; height:90px; object-fit:cover; border-radius:9px; }

#amazonHero .kh-name{
  margin-top:5px;
  font-size:11px;
  font-weight:600;
  color:#0f172a;
  line-height:1.3;
  max-height:calc(1.3em * 2);
  overflow:hidden;
  word-break:break-word;
}

#amazonHero .kh-price{ margin-top:2px; font-size:11px; font-weight:700; color:#047857; }
#amazonHero .kh-old{ font-size:9px; margin-left:4px; text-decoration:line-through; opacity:.6; }

@media(max-width:767px){
  #amazonHero{ --kh-h: 260px; }
  #amazonHero .kh-content{ padding:10px 12px 20px; }
}

#amazonHero .kh-dots{
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:6;
}

#amazonHero .kh-dots .kh-dot{
  position:relative;
  width:var(--kh-dot-size);
  height:var(--kh-dot-size);

  padding:0 !important;
  line-height:0;
  min-width:0;
  min-height:0;

  border-radius:999px !important;
  border:1px solid rgba(34,197,94,.9);
  background:#ffffff;
  cursor:pointer;
  box-sizing:border-box;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;

  box-shadow:0 0 3px rgba(0,0,0,.35);
  transition:width .22s ease, background .18s ease, border-radius .22s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  appearance:none;
  -webkit-appearance:none;
}

#amazonHero .kh-dots .kh-dot[data-active="1"]{
  width:var(--kh-dot-long);
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border-color:#22c55e;
  box-shadow:0 0 7px rgba(34,197,94,.85);
  transform:translateY(-1px);
}

#amazonHero .kh-dots .kh-dot .kh-dot-fill{ display:none; }

#amazonHero .kh-dots .kh-dot[data-active="1"] .kh-dot-fill{
  display:block;
  position:absolute;
  left:2px; right:2px; top:2px; bottom:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(34,197,94,.15), #22c55e);
  transform-origin:left center;
  transform:scaleX(0);
}

/* market kártyák szövegárnyék */
.after-hero-section .market-card span{
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 3px 12px rgba(0,0,0,.35);
}

/* =======================================================================
   Korhatár-badge (age-badge)
   ======================================================================= */

.product-card .media{
  position:relative;
  overflow:hidden;
  border-top-left-radius:0.75rem;
  border-top-right-radius:0.75rem;
}

.age-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:40;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  min-width:44px;
  padding:0 10px;

  border-radius:999px;
  background:#dc2626; /* piros */
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;

  box-shadow:0 10px 22px rgba(220,38,38,.25);
  border:2px solid rgba(255,255,255,.85);
}

/* /var/www/karpatia/public/assets/css/style.css */
/* =======================================================================
   CART PAGE – korábban inline volt a cart.blade.php-ben (MOST: ide költöztetve)
   ======================================================================= */

.page-cart{ overflow-x:hidden; }
@media (max-width:767px){ .page-cart{ overflow-x:hidden; } }

.page-cart .cart-row-grid{
  display:grid;
  gap:1rem;
  align-items:center;
  grid-template-columns:144px minmax(0,1fr) auto 7.5rem auto;
}

@media (max-width:767px){
  .page-cart .cart-row-grid{ display:none; }
  .page-cart #cartSummary{ display:none; }

  .page-cart .m-row{ display:grid; grid-template-columns:108px 1fr; gap:12px; }
  .page-cart .m-left{
    background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    display:flex; align-items:center; justify-content:center; padding:6px;
  }
  .page-cart .m-right{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:10px 12px; }
  .page-cart .m-title{ font-weight:700; line-height:1.25; word-break:break-word; }
  .page-cart .m-price-now{ color:#b91c1c; font-weight:800; font-size:20px; }
  .page-cart .m-price-was{ text-decoration:line-through; color:#6b7280; margin-left:.5rem; }

  .page-cart .qty-seg{
    display:grid; grid-template-columns:1fr 1fr 1fr;
    border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; margin-top:.35rem;
  }
  .page-cart .qty-seg .btn-qty{ height:44px; font-weight:800; font-size:20px; display:grid; place-items:center; }
  .page-cart .qty-seg .btn-minus{ background:#f3f4f6; }
  .page-cart .qty-seg .btn-plus{ background:#fef3c7; }
  .page-cart .qty-seg .qty-input{
    height:44px; width:100%; background:#fff; border:0; outline:0;
    text-align:center; font-weight:700;
  }
  .page-cart .qty-input::-webkit-outer-spin-button,
  .page-cart .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .page-cart .qty-input[type=number]{ -moz-appearance:textfield; }

  .page-cart .mobile-summary{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:12px; margin-bottom:12px; }
  .page-cart .mobile-summary .row{ display:flex; justify-content:space-between; align-items:center; margin:6px 0; font-size:14px; }
  .page-cart .mobile-summary .total{ font-size:18px; font-weight:800; }
  .page-cart .mobile-summary h3{ font-weight:700; margin:0 0 8px 0; font-size:16px; }

  .page-cart .ship-choice{ display:grid; gap:8px; margin-top:6px; }
  .page-cart .ship-choice label{
    display:flex; align-items:center; gap:8px;
    padding:8px; border:1px solid #e5e7eb; border-radius:10px; background:#fcfcfc;
  }
  .page-cart .ship-note{ font-size:12px; color:#6b7280; margin-top:4px; }
}

.page-cart .btn-checkout[disabled]{ opacity:.55; cursor:not-allowed; }

.page-cart .pct-badge{
  position:absolute; left:8px; top:8px;
  background:#dc2626; color:#fff; font-size:10px; font-weight:800;
  border-radius:6px; padding:2px 6px;
}
.page-cart .badge-18{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 6px; height:18px; font-size:10px; font-weight:700;
  border-radius:999px; background:#b91c1c; color:#fff; margin-left:6px;
}