/* ==========================================================================
   Beny Autótöltő — egyedi dizájn (child theme)
   --------------------------------------------------------------------------
   1. Design tokenek (Elementor Kit #11 globális beállításai alapján)
   2. Alap segédosztályok (kiemelések)
   3. Lábléc (.beny-footer) — Elementor HTML widgetbe
   4. Fejléc (.beny-header) — konténer + 2 HTML widget + Menu Cart widget
   5. WooCommerce — készlet-jelvények, variációs chipek, kosár ikon gomb
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENEK
   --------------------------------------------------------------------------
   Forrás: Elementor > Webhely beállítások > Globális színek / betűtípusok
   (Kit ID: 11, uploads/elementor/css/post-11.css)

   A --beny-* változók elsősorban az Elementor globális változóira
   hivatkoznak, így ha az Elementorban módosítasz egy színt, itt is követi.
   A második érték a mentés pillanatában érvényes fallback.
   ========================================================================== */

:root {

  /* ---- Színek: Rendszer színek ---------------------------------------- */
  --beny-primary:        var(--e-global-color-primary,   #377DD4); /* Elsődleges       */
  --beny-secondary:      var(--e-global-color-secondary, #388883); /* Másodlagos       */
  --beny-text:           var(--e-global-color-text,      #414756); /* Szöveg           */
  --beny-accent:         var(--e-global-color-accent,    #7E90BC); /* Hangsúly         */

  /* ---- Színek: Egyedi színek ------------------------------------------ */
  --beny-text-2:         var(--e-global-color-df928d7,   #808D98); /* Szoveg-2         */
  --beny-button-hover:   var(--e-global-color-3222a74,   #1363CA); /* Button-hover     */
  --beny-on-dark:        var(--e-global-color-e9c654c,   #FFFFFF); /* Sotet-hatteren   */
  --beny-bg-light:       var(--e-global-color-7b5a35d,   #F3F9FF); /* vilagos-hatter   */
  --beny-bg-teal:        var(--e-global-color-c2f6208,   #E6F4F1); /* sotet-hatter     */
  --beny-bg-light-2:     var(--e-global-color-95f4a6c,   #DBECEA); /* vilagos-hatter-2 */

  /* ---- Származtatott színek (nem Elementor globálok) ------------------- */
  --beny-dark:           #1B2433; /* mély éjkék — lábléc háttér              */
  --beny-dark-2:         #232E41; /* lábléc alsó sáv / kártyák               */
  --beny-line-dark:      rgba(255, 255, 255, 0.10);
  --beny-muted-on-dark:  #A9B4C4; /* másodlagos szöveg sötét háttéren        */
  --beny-gradient:       linear-gradient(to right top, #388883, #008a99, #0089b1, #0085c7, #377dd4);
  --beny-gradient-lite:  linear-gradient(to right top, #ffffff, #fdfdff, #fafcff, #f7faff, #f3f9ff);

  /* ---- Betűcsaládok ---------------------------------------------------- */
  --beny-font-heading:   "Urbanist", sans-serif;
  --beny-font-body:      "Raleway", sans-serif;

  /* ---- Tipográfia: Rendszer betűtípusok ------------------------------- */
  /* Elsődleges */
  --beny-primary-size:   var(--e-global-typography-primary-font-size, 32px);
  --beny-primary-weight: var(--e-global-typography-primary-font-weight, 600);
  /* Másodlagos */
  --beny-secondary-weight: var(--e-global-typography-secondary-font-weight, 400);
  /* Szöveg */
  --beny-text-size:      var(--e-global-typography-text-font-size, 16px);
  --beny-text-weight:    var(--e-global-typography-text-font-weight, 400);
  /* Hangsúly */
  --beny-accent-size:    var(--e-global-typography-accent-font-size, 20px);
  --beny-accent-weight:  var(--e-global-typography-accent-font-weight, 600);

  /* ---- Tipográfia: Egyedi betűtípusok --------------------------------- */
  /* H1 — Urbanist 40 / 600 */
  --beny-h1-size:        var(--e-global-typography-cdc1d92-font-size, 40px);
  --beny-h1-weight:      var(--e-global-typography-cdc1d92-font-weight, 600);
  /* H2 — Urbanist 32 / 600 */
  --beny-h2-size:        var(--e-global-typography-6775ad2-font-size, 32px);
  --beny-h2-weight:      var(--e-global-typography-6775ad2-font-weight, 600);
  /* H3 — Urbanist 24 / 500, sormagasság 32px */
  --beny-h3-size:        var(--e-global-typography-3e8a347-font-size, 24px);
  --beny-h3-weight:      var(--e-global-typography-3e8a347-font-weight, 500);
  --beny-h3-line-height: var(--e-global-typography-3e8a347-line-height, 32px);
  /* Menu — Raleway 14 / 500, nagybetűs */
  --beny-menu-size:      var(--e-global-typography-b64f8aa-font-size, 14px);
  --beny-menu-weight:    var(--e-global-typography-b64f8aa-font-weight, 500);
  /* Szöveg-hangsúly — Raleway 16 / 500 */
  --beny-text-em-size:   var(--e-global-typography-e1cdc58-font-size, 16px);
  --beny-text-em-weight: var(--e-global-typography-e1cdc58-font-weight, 500);
  /* H2-capitalize — Urbanist 32 / 600, nagybetűs */
  --beny-h2caps-size:    var(--e-global-typography-f5d063e-font-size, 32px);
  --beny-h2caps-weight:  var(--e-global-typography-f5d063e-font-weight, 600);
  /* H-kiemelés — Urbanist 18 / 600, nagybetűs */
  --beny-hkiem-size:     var(--e-global-typography-ac43e1b-font-size, 18px);
  --beny-hkiem-weight:   var(--e-global-typography-ac43e1b-font-weight, 600);

  /* ---- Formák, térközök ------------------------------------------------ */
  --beny-radius-sm:      6px;
  --beny-radius:         10px;
  --beny-radius-lg:      20px;
  --beny-radius-pill:    50px;
  --beny-container:      1140px;
  --beny-transition:     0.2s ease;
}


/* ==========================================================================
   2. ALAP SEGÉDOSZTÁLYOK
   --------------------------------------------------------------------------
   Jelenleg az Elementor Kit egyedi CSS-ében is szerepelnek — ha ott
   törlöd őket, innen továbbra is működnek.
   ========================================================================== */

.highlight {
  background: var(--beny-gradient);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--beny-radius-sm);
  font-weight: 700;
}

.highlight-lite {
  background: var(--beny-gradient-lite);
  color: var(--beny-primary);
  padding: 4px 10px;
  border-radius: var(--beny-radius-sm);
  font-weight: 700;
}


/* ==========================================================================
   3. LÁBLÉC — .beny-footer
   --------------------------------------------------------------------------
   Elementor beállítás a befoglaló konténerhez:
   - Tartalom szélessége: Teljes szélesség
   - Padding: 0 minden oldalon, Gap: 0
   A háttér, a belső szélesség és a térközök innen jönnek.
   ========================================================================== */

.beny-footer {
  --bf-gutter: 24px;
  position: relative;
  background: var(--beny-dark);
  color: var(--beny-muted-on-dark);
  font-family: var(--beny-font-body);
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: lining-nums; /* a Raleway alapból "régi stílusú" számokat használ */
}

/* Vékony színátmenetes sáv a lábléc tetején */
.beny-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--beny-gradient);
}

.beny-footer *,
.beny-footer *::before,
.beny-footer *::after {
  box-sizing: border-box;
}

.beny-footer__inner {
  max-width: var(--beny-container);
  margin: 0 auto;
  padding: 0 var(--bf-gutter);
}

.beny-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--beny-transition);
}

.beny-footer a:hover,
.beny-footer a:focus-visible {
  color: var(--beny-on-dark);
}

.beny-footer a:focus-visible {
  outline: 2px solid var(--beny-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

:where(.beny-footer) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.beny-footer) p {
  margin: 0;
}

.beny-footer svg {
  flex-shrink: 0;
}

/* ---- 3.1 Előnyök sáv --------------------------------------------------- */

.beny-footer__perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 40px 0;
  border-bottom: 1px solid var(--beny-line-dark);
}

.beny-footer__perk {
  display: flex;
  align-items: center;
  gap: 14px;
}

.beny-footer__perk-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--beny-radius);
  background: rgba(55, 125, 212, 0.14);
  color: var(--beny-primary);
  flex-shrink: 0;
}

.beny-footer__perk:nth-child(even) .beny-footer__perk-icon {
  background: rgba(56, 136, 131, 0.18);
  color: #5BB5AE;
}

.beny-footer__perk-title {
  display: block;
  font-family: var(--beny-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--beny-on-dark);
  line-height: 1.3;
}

.beny-footer__perk-text {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

/* ---- 3.2 Fő rész: márka + menüoszlopok ---------------------------------- */

.beny-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 48px;
}

.beny-footer__brand-name {
  margin: 0 0 12px;
  font-family: var(--beny-font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--beny-on-dark);
}

.beny-footer__brand-name span {
  background: var(--beny-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* olvasható fallback, ha a background-clip nem támogatott */
  -webkit-text-fill-color: transparent;
}

.beny-footer__about {
  max-width: 34ch;
  margin-bottom: 24px;
}

.beny-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.beny-footer__contact svg {
  margin-top: 3px;
  color: var(--beny-primary);
}

.beny-footer__contact a {
  color: var(--beny-on-dark);
  font-weight: 500;
}

.beny-footer__contact a:hover {
  color: var(--beny-primary);
}

.beny-footer__contact small {
  display: block;
  font-size: 13px;
  color: var(--beny-text-2);
}

/* Közösségi média */
.beny-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.beny-footer__social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--beny-line-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--beny-on-dark) !important;
  transition: background var(--beny-transition), border-color var(--beny-transition), transform var(--beny-transition);
}

.beny-footer__social-link:hover,
.beny-footer__social-link:focus-visible {
  background: var(--beny-primary);
  border-color: var(--beny-primary);
  transform: translateY(-2px);
}

.beny-footer__social-link:focus-visible {
  border-radius: 50%;
}

.beny-footer__social-text {
  font-size: 13px;
  color: var(--beny-muted-on-dark);
}

.beny-footer__title {
  margin: 0 0 18px;
  font-family: var(--beny-font-body);
  font-size: var(--beny-menu-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beny-on-dark);
}

.beny-footer__links li + li {
  margin-top: 10px;
}

.beny-footer__links a {
  position: relative;
  display: inline-block;
}

.beny-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--beny-primary);
  transition: width var(--beny-transition);
}

.beny-footer__links a:hover::after {
  width: 100%;
}

/* Kategória-linkek: kis ikon előtag */
.beny-footer__cats a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.beny-footer__cats a::after {
  left: 28px;
}

.beny-footer__cats a:hover::after {
  width: calc(100% - 28px);
}

.beny-footer__cats svg {
  color: var(--beny-primary);
}

.beny-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: var(--beny-radius-pill);
  background: var(--beny-primary);
  color: var(--beny-on-dark) !important;
  font-size: var(--beny-menu-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--beny-transition);
}

.beny-footer__cta:hover,
.beny-footer__cta:focus-visible {
  background: var(--beny-button-hover);
}

/* ---- 3.3 Fizetés és szállítás sáv -------------------------------------- */

.beny-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--beny-line-dark);
}

.beny-footer__trust-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.beny-footer__trust-label {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beny-text-2);
}

.beny-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--beny-line-dark);
  border-radius: var(--beny-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 500;
  color: var(--beny-on-dark);
  white-space: nowrap;
}

.beny-footer__badge svg {
  color: var(--beny-primary);
}

/* ---- 3.4 Alsó sáv: copyright + jogi linkek ----------------------------- */

.beny-footer__bottom {
  background: var(--beny-dark-2);
  font-size: 13px;
  color: var(--beny-text-2);
}

.beny-footer__bottom .beny-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.beny-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.beny-footer__legal a:hover {
  color: var(--beny-on-dark);
}

/* ---- 3.5 Reszponzív ---------------------------------------------------- */

@media (max-width: 1024px) {
  .beny-footer__perks {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .beny-footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px 32px;
  }

  .beny-footer__brand {
    grid-column: 1 / -1;
  }

  .beny-footer__about {
    max-width: 60ch;
  }
}

@media (max-width: 767px) {
  .beny-footer {
    --bf-gutter: 16px;
  }

  .beny-footer__perks {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
    padding: 32px 0;
  }

  .beny-footer__perk {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .beny-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding: 40px 0 36px;
  }

  .beny-footer__trust,
  .beny-footer__bottom .beny-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .beny-footer__main {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   4. FEJLÉC — .beny-header
   --------------------------------------------------------------------------
   Elementor Theme Builder > Fejléc sablon. Felépítés:

   Konténer  — CSS osztály: beny-header
   │           Tartalom szélessége: Teljes szélesség, Irány: sor
   │           (padding, gap, háttér: hagyd alapértelmezetten — innen jön)
   ├─ HTML widget        — CSS osztály: beny-header__brand  (fejlec-logo.html)
   ├─ HTML widget        — CSS osztály: beny-header__nav    (fejlec-menu.html)
   └─ Menu Cart widget   — CSS osztály: beny-header__cart   (stílusát ne
                           állítsd a widgetben, innen kapja)

   Asztali: logó | menü (középen) | kosár
   ≤1024px: logó | kosár | hamburger — a menü lenyíló panelben
   ========================================================================== */

/* ---- 4.1 Ragadós fejléc ------------------------------------------------- */

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.admin-bar .elementor-location-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .elementor-location-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  /* a WP adminsáv itt már nem fix, együtt görög az oldallal */
  .admin-bar .elementor-location-header {
    top: 0;
  }
}

/* ---- 4.2 Konténer ------------------------------------------------------ */

.elementor .e-con.beny-header {
  --bh-height: 76px;
  --bh-gutter: 24px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 40px;
  min-height: var(--bh-height);
  padding: 0 max(var(--bh-gutter), calc((100% - var(--beny-container)) / 2));
  /* backdrop-filter / transform itt NEM használható: elrontaná a Menu Cart
     position: fixed oldalpaneljét */
  background: #fff;
  border-bottom: 1px solid rgba(65, 71, 86, 0.08);
  font-family: var(--beny-font-body);
  transition: box-shadow var(--beny-transition);
}

/* Vékony színátmenetes sáv a tetején — párban a lábléccel */
.elementor .e-con.beny-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--beny-gradient);
}

.elementor .e-con.beny-header.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(27, 36, 51, 0.25);
}

.beny-header > .elementor-widget {
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.beny-header .beny-header__brand {
  flex: 0 0 auto;
}

.beny-header .beny-header__nav {
  flex: 1 1 auto;
  position: static; /* a mobil panel a konténerhez igazodjon */
}

.beny-header .beny-header__cart {
  flex: 0 0 auto;
}

/* ---- 4.3 Logó ---------------------------------------------------------- */

.beny-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.beny-logo__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--beny-radius);
  background: var(--beny-gradient);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(55, 125, 212, 0.6);
  transition: transform var(--beny-transition);
}

.beny-logo:hover .beny-logo__mark {
  transform: rotate(-8deg) scale(1.05);
}

.beny-logo__text {
  font-family: var(--beny-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--beny-dark);
  white-space: nowrap;
}

.beny-logo__text span {
  background: var(--beny-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.beny-logo:focus-visible {
  outline: 2px solid var(--beny-primary);
  outline-offset: 4px;
  border-radius: var(--beny-radius-sm);
}

/* ---- 4.4 Menü (asztali) ------------------------------------------------ */

.beny-nav {
  display: flex;
  justify-content: center;
}

.beny-nav__toggle {
  display: none;
}

.beny-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beny-nav__list li {
  margin: 0;
}

.beny-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--beny-radius-pill);
  font-family: var(--beny-font-body);
  font-size: var(--beny-menu-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beny-text);
  white-space: nowrap;
  transition: color var(--beny-transition), background var(--beny-transition);
}

/* ikonok csak a mobil panelben látszanak */
.beny-nav__link svg {
  display: none;
}

.beny-nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--beny-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.beny-nav__link:hover,
.beny-nav__link:focus-visible,
.beny-nav__link.is-active {
  color: var(--beny-primary);
}

.beny-nav__link:hover::after,
.beny-nav__link.is-active::after {
  transform: scaleX(1);
}

.beny-nav__link:focus-visible {
  outline: 2px solid var(--beny-primary);
  outline-offset: 2px;
}

/* ---- 4.5 Kosár (Elementor Menu Cart widget) ---------------------------- */

.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--beny-radius-pill);
  background: var(--beny-primary);
  color: var(--beny-on-dark);
  font-family: var(--beny-font-body);
  font-size: var(--beny-menu-size);
  font-weight: 600;
  line-height: 1.2;
  transition: background var(--beny-transition), transform var(--beny-transition);
}

.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button:hover {
  background: var(--beny-button-hover);
  transform: translateY(-1px);
}

.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-text,
.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-text .amount {
  color: inherit;
  font-variant-numeric: lining-nums tabular-nums;
}

.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-icon {
  color: inherit;
  font-size: 20px;
}

.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-icon svg {
  fill: currentColor;
}

/* Darabszám-jelvény */
.beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter] {
  background: var(--beny-secondary);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
  font-family: var(--beny-font-body);
  font-weight: 700;
  font-variant-numeric: lining-nums;
}

/* Kinyíló kosár panel */
.beny-header .beny-header__cart .elementor-menu-cart__main {
  font-family: var(--beny-font-body);
  color: var(--beny-text);
}

.beny-header .beny-header__cart .elementor-menu-cart__product-name a {
  color: var(--beny-text);
  font-weight: 600;
}

.beny-header .beny-header__cart .elementor-menu-cart__product-name a:hover {
  color: var(--beny-primary);
}

.beny-header .beny-header__cart .elementor-menu-cart__product-price,
.beny-header .beny-header__cart .elementor-menu-cart__subtotal {
  color: var(--beny-primary);
  font-variant-numeric: lining-nums;
}

.beny-header .beny-header__cart .elementor-menu-cart__subtotal strong {
  font-family: var(--beny-font-heading);
  color: var(--beny-text);
}

.beny-header .beny-header__cart .elementor-menu-cart__footer-buttons .elementor-button {
  border-radius: var(--beny-radius-pill);
  font-family: var(--beny-font-body);
  font-size: var(--beny-menu-size);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--beny-transition), color var(--beny-transition);
}

.beny-header .beny-header__cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
  background: var(--beny-bg-light);
  color: var(--beny-primary);
}

.beny-header .beny-header__cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
  background: var(--beny-bg-light-2);
}

.beny-header .beny-header__cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--beny-primary);
  color: #fff;
}

.beny-header .beny-header__cart .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover {
  background: var(--beny-button-hover);
}

/* ---- 4.6 Tablet és mobil: hamburger menü ------------------------------- */

@media (max-width: 1024px) {
  .elementor .e-con.beny-header {
    --bh-height: 68px;
    gap: 0 12px;
  }

  .beny-header .beny-header__brand { order: 1; margin-right: auto !important; }
  .beny-header .beny-header__cart  { order: 2; }
  .beny-header .beny-header__nav   { order: 3; flex: 0 0 auto; }

  .beny-nav__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(65, 71, 86, 0.14);
    border-radius: 50%;
    background: #fff;
    color: var(--beny-text);
    cursor: pointer;
    transition: background var(--beny-transition), border-color var(--beny-transition), color var(--beny-transition);
  }

  .beny-nav__toggle:hover,
  .beny-nav__toggle:focus-visible,
  .beny-nav.is-open .beny-nav__toggle {
    background: var(--beny-bg-light);
    border-color: var(--beny-primary);
    color: var(--beny-primary);
  }

  .beny-nav__burger {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
  }

  .beny-nav__burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
  }

  .beny-nav__burger span:nth-child(1) { top: 0; }
  .beny-nav__burger span:nth-child(2) { top: 5px; }
  .beny-nav__burger span:nth-child(3) { top: 10px; }

  .beny-nav.is-open .beny-nav__burger span:nth-child(1) { top: 5px; transform: rotate(45deg); }
  .beny-nav.is-open .beny-nav__burger span:nth-child(2) { opacity: 0; }
  .beny-nav.is-open .beny-nav__burger span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

  /* Lenyíló panel a fejléc alatt, teljes szélességben */
  .beny-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px max(var(--bh-gutter), calc((100% - var(--beny-container)) / 2)) 20px;
    background: #fff;
    border-bottom: 1px solid rgba(65, 71, 86, 0.08);
    box-shadow: 0 18px 30px -18px rgba(27, 36, 51, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .beny-nav.is-open .beny-nav__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .beny-nav__link {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--beny-radius);
    font-size: 15px;
  }

  .beny-nav__link svg {
    display: block;
    color: var(--beny-primary);
  }

  .beny-nav__link::after {
    display: none;
  }

  .beny-nav__link:hover,
  .beny-nav__link.is-active {
    background: var(--beny-bg-light);
  }
}

@media (max-width: 767px) {
  .elementor .e-con.beny-header {
    --bh-height: 62px;
    --bh-gutter: 16px;
  }

  .beny-logo__mark {
    width: 34px;
    height: 34px;
  }

  .beny-logo__text {
    font-size: 20px;
  }

  /* mobilon csak ikon + darabszám, részösszeg nélkül */
  .beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .beny-header .beny-header__cart .elementor-menu-cart__toggle .elementor-button-text {
    display: none;
  }
}

@media (max-width: 360px) {
  .beny-logo__mark {
    display: none;
  }
}


/* ==========================================================================
   5. WOOCOMMERCE
   --------------------------------------------------------------------------
   Korábban Code Snippets plugin CSS snippetjei voltak.
   ========================================================================== */

/* ---- 5.1 Készlet-jelvények a terméklistában ---------------------------- */
/* PHP: inc/woocommerce-keszletallapotok.php — 5) pont */

.wc-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .35rem .5rem;
  font-size: .75rem;
  border-radius: .35rem;
  background: var(--beny-secondary);   /* #388883 */
  color: var(--beny-bg-light-2);       /* #DBECEA */
}

.wc-badge--preorder {
  background: #FFD966;
  color: #5A4500; /* sötét szöveg — a világos a sárgán olvashatatlan volt */
}

.wc-badge--made-to-order {
  background: #44A28A;
  color: var(--beny-bg-light-2);
}

/* ---- 5.2 Variációs chipek a termékoldalon ------------------------------ */
/* „Products Linked by Variations” plugin elemei */

/* Chipek: egy sorban maradjanak */
.single-product .imgclasssmall,
.single-product .imgclasssmallactive {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-bottom: 22px !important;
  border-radius: 50px !important;
  background: transparent !important;
}

/* A belső elemek is örököljék a kerekítést és legyenek átlátszók */
.single-product .imgclasssmall a,
.single-product .imgclasssmallactive a,
.single-product .imgclasssmall .child_class_plugify,
.single-product .imgclasssmallactive .child_class_plugify {
  display: block !important;
  border-radius: inherit !important;
  background: transparent !important;
}

/* ---- 5.3 Termékkártya: kosár ikon gomb --------------------------------- */
/* PHP: inc/woocommerce-termekkartya.php
   Az ikon az ár sorában, jobbra zárva ül. Nem abszolút pozícionált, hanem
   a normál folyásban marad (így tartja a kártya belső margóját), és
   negatív felső margóval húzzuk fel az ár sorába.
   Az !important az Elementor Products widget gombbeállításai miatt kell. */

.woocommerce ul.products li.product {
  position: relative;
}

/* Az ár sora helyet hagy a gombnak */
.woocommerce ul.products li.product .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .35em;
  min-height: 44px;
  margin-bottom: 0 !important;
  padding-right: 56px;
  font-variant-numeric: lining-nums;
}

.woocommerce ul.products li.product a.beny-cart-btn {
  position: relative;
  z-index: 1;
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  margin: -44px 0 0 auto !important; /* = gombmagasság: az ár sorába kerül */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--beny-primary) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 6px 14px -8px rgba(55, 125, 212, 0.9);
  transition: background var(--beny-transition), transform var(--beny-transition), box-shadow var(--beny-transition);
}

.woocommerce ul.products li.product a.beny-cart-btn:hover,
.woocommerce ul.products li.product a.beny-cart-btn:focus-visible {
  background: var(--beny-button-hover) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 18px -8px rgba(19, 99, 202, 0.9);
}

.woocommerce ul.products li.product a.beny-cart-btn:focus-visible {
  outline: 2px solid var(--beny-primary);
  outline-offset: 3px;
}

/* Termékoldalra vivő gomb (elfogyott / nem vásárolható): visszafogottabb */
.woocommerce ul.products li.product a.beny-cart-btn--arrow {
  background: var(--beny-bg-light) !important;
  color: var(--beny-primary) !important;
  box-shadow: none;
}

.woocommerce ul.products li.product a.beny-cart-btn--arrow:hover {
  background: var(--beny-primary) !important;
  color: #fff !important;
}

.beny-cart-btn__icon {
  grid-area: 1 / 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.beny-cart-btn__icon--check {
  opacity: 0;
  transform: scale(0.5);
}

/* Betöltés közben: forgó gyűrű */
.woocommerce ul.products li.product a.beny-cart-btn.loading {
  opacity: 1 !important;
  pointer-events: none;
}

.woocommerce ul.products li.product a.beny-cart-btn.loading .beny-cart-btn__icon {
  opacity: 0;
}

.woocommerce ul.products li.product a.beny-cart-btn.loading::after {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  top: 12px !important;
  right: 12px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  font-size: 0 !important;
  animation: beny-spin 0.7s linear infinite !important;
}

/* Sikeres kosárba tétel: zöld pipa */
.woocommerce ul.products li.product a.beny-cart-btn.added {
  background: var(--beny-secondary) !important;
}

.woocommerce ul.products li.product a.beny-cart-btn.added::after {
  display: none !important;
}

.woocommerce ul.products li.product a.beny-cart-btn.added .beny-cart-btn__icon--cart-plus {
  opacity: 0;
  transform: scale(0.5);
}

.woocommerce ul.products li.product a.beny-cart-btn.added .beny-cart-btn__icon--check {
  opacity: 1;
  transform: none;
}

/* A „Kosár megtekintése” link helyett a fejléc kosara frissül */
.woocommerce ul.products li.product a.added_to_cart {
  display: none !important;
}

@keyframes beny-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product a.beny-cart-btn,
  .beny-cart-btn__icon {
    transition: none;
  }
}