/* A sticky-t az Elementor header-wrapperre kell tenni: a .oc-header szülője
   csak akkora, mint a fejléc, ezért a benne lévő sticky elem kigörgetődik. */
.elementor-location-header{position:sticky;top:0;z-index:50}
.admin-bar .elementor-location-header{top:32px}
@media (max-width:782px){.admin-bar .elementor-location-header{top:46px}}

/* Öcotáj – egyedi stílusok. Az Elementor globális osztályai (oc-*) adják az alapot,
   ide csak az kerül, amit a builder nem tud: videó-borítás, fejléc-váltás, csúszka, modal. */

/* ---------- Hero videó ---------- */
.oc-hero-video{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block}
#hero .elementor-widget-html,#hero .elementor-widget-container{height:100%}
#tisztitas .elementor-widget-html,#tisztitas .elementor-widget-html>.elementor-widget-container{height:100%;width:100%}

/* ---------- Fejléc: fent átlátszó, görgetve krém ---------- */
.oc-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease}
.oc-header::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,59,33,.5) 0%,rgba(26,59,33,.22) 60%,transparent 100%)}
.oc-header.is-scrolled{background:rgba(255,242,208,.95);border-bottom-color:#F0E0B0;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.oc-header.is-scrolled::before,.oc-header.is-menu-open::before{display:none}
.oc-header.is-menu-open{background:rgba(255,242,208,.98);border-bottom-color:#F0E0B0}

/* a nem-főoldalakon a fejléc végig tömör */
body:not(.home) .oc-header{background:rgba(255,242,208,.95);border-bottom-color:#F0E0B0;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body:not(.home) .oc-header::before{display:none}

/* ---------- Horgonyok a ragadós fejléc alatt ---------- */
[id]{scroll-margin-top:96px}
.admin-bar [id]{scroll-margin-top:128px}

/* ---------- Fejléc: menü ---------- */
.oc-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease}
.oc-header::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,59,33,.5) 0%,rgba(26,59,33,.22) 60%,transparent 100%)}
.oc-header.is-scrolled{background:rgba(255,242,208,.95);border-bottom-color:#F0E0B0;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.oc-header.is-scrolled::before,.oc-header.is-menu-open::before{display:none}
body:not(.home) .oc-header{background:rgba(255,242,208,.95);border-bottom-color:#F0E0B0;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body:not(.home) .oc-header::before{display:none}

.oc-header .elementor-nav-menu .elementor-item{font-family:'Parkinsans',system-ui,sans-serif;
  font-size:15.5px;font-weight:600;line-height:1;padding:10px 14px;color:#fff;fill:#fff}
.oc-header .elementor-nav-menu--main .elementor-item:hover,
.oc-header .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#fff}
/* Menü-aláhúzás a designterv szerint: balról kinövő 2,5px-es sáv.
   A szelektorban benne van az Elementor pointer-osztálya is, különben az ő
   fade-animációja (opacity) felülírja a scaleX-et. */
.oc-header .elementor-nav-menu--main .elementor-item{position:relative}
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item:before{display:none}
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item:after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;top:auto;height:2.5px;width:auto;
  border:0;border-radius:2px;background-color:#32692D;opacity:1;
  transform:scaleX(0);transform-origin:left center;transition:transform .22s ease}
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item:hover:after,
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item.elementor-item-active:after,
.oc-header .elementor-nav-menu--main.e--pointer-underline li:hover > .elementor-item:after{transform:scaleX(1)}
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item.has-submenu:after{right:34px}
/* az Elementor horgony-scrollspy-ja két menüpontot is aláhúzna; a terven csak az aktuális oldal van jelölve */
.oc-header .elementor-nav-menu--main.e--pointer-underline .elementor-item-anchor.elementor-item-active:not(:hover):after{transform:scaleX(0)}
.oc-header .elementor-nav-menu--main .sub-arrow::after{transition:transform .2s ease}
.oc-header .elementor-nav-menu--main li:hover > .elementor-item .sub-arrow::after{transform:rotate(180deg)}
body.home .oc-header:not(.is-scrolled) .elementor-nav-menu--main.e--pointer-underline .elementor-item:after{background-color:#95C11F}
.oc-header.is-scrolled .elementor-nav-menu .elementor-item{color:#1B2A1E;fill:#1B2A1E}

body:not(.home) .oc-header .elementor-nav-menu .elementor-item{color:#1B2A1E;fill:#1B2A1E}
.oc-header .elementor-menu-toggle{color:#fff;background:transparent}
.oc-header.is-scrolled .elementor-menu-toggle,body:not(.home) .oc-header .elementor-menu-toggle{color:#1A3B21}

/* logó: fent fehér felirat + zöld embléma, görgetve teljes arculati szín */
.oc-header .e-svg svg{height:38px;width:auto;display:block}
body.home .oc-header:not(.is-scrolled):not(.is-menu-open) .e-svg .st1{fill:#fff}
body.home .oc-header:not(.is-scrolled) .e-svg .st1[d^="M41"],
body.home .oc-header:not(.is-scrolled) .e-svg .st2{fill:#68992F}

/* ---------- Mobil menü: teljes képernyős, CSAK nyitott állapotban ---------- */
@media (max-width:1100px){
  .oc-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown{
    display:block !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100vw !important;height:100dvh !important;max-height:100dvh !important;margin:0 !important;
    padding:104px 32px calc(56px + env(safe-area-inset-bottom)) !important;background:#FFF2D0 !important;
    overflow-y:auto;overscroll-behavior:contain;z-index:45}
  .oc-header .elementor-nav-menu--dropdown .elementor-item{font-size:18px;font-weight:700;color:#1A3B21;
    padding:16px 0;border-bottom:1px solid #F0E0B0}
  .oc-header .elementor-menu-toggle{position:relative;z-index:60;width:44px;height:44px;
    justify-content:flex-end;padding:0}
}

/* ---------- Lábléc ---------- */
.oc-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.oc-footer a:hover{color:#95C11F}
.oc-footer svg .st0,.oc-footer svg .st1,.oc-footer svg .st2,
.oc-footer svg .emb.st1,.oc-footer svg .emb.st2{fill:#fff}

/* ---------- Kártyák: a gomb-látszat ---------- */
.oc-btn-fake{pointer-events:none}

/* gombok: a keretszín a változatból jöjjön, ne az alaposztályból */
/* a designtervvel egyezően a keret inset box-shadow, nem border - így nem növeli a gombmagasságot */
body.home .oc-header:not(.is-scrolled) .oc-btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
body.home .oc-header:not(.is-scrolled) .oc-btn-ghost:hover{background:#fff;color:#1A3B21}
/* a kártyán belüli gomb-látszat ne nyúljon teljes szélességre */

/* a fejléc logó felirata a videó fölött fehér, görgetve arculati zöld */
body.home .oc-header:not(.is-scrolled):not(.is-menu-open) svg .st1{fill:#fff}
body.home .oc-header:not(.is-scrolled):not(.is-menu-open) svg .st2{fill:#95C11F}
.oc-header svg{height:38px;width:auto}

body.home .oc-header:not(.is-scrolled) svg .emb.st1{fill:#32692D}
body.home .oc-header:not(.is-scrolled) svg .emb.st2{fill:#68992F}

/* ---------- Előtte / utána csúszka ---------- */
.oc-ba{position:relative;width:100%;height:100%;min-height:420px;border-radius:56px 14px 14px 56px;overflow:hidden;
  background:#0f2415;user-select:none;touch-action:none}
.oc-ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.oc-ba-before{object-position:center 100%}
.oc-ba-after{object-position:center 35%;clip-path:inset(0 0 0 var(--pos,50%))}
.oc-ba-lbl{position:absolute;top:18px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;pointer-events:none}
.oc-ba-lbl--l{left:18px}
.oc-ba-lbl--r{right:18px;background:#95C11F;color:#1A3B21}
.oc-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);
  pointer-events:none;display:grid;place-items:center}
.oc-ba-handle svg{width:24px;height:24px;color:#1A3B21;background:#95C11F;border-radius:50%;padding:13px;
  box-sizing:content-box;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.oc-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.oc-ba-points p{padding-left:24px;position:relative}
.oc-ba-points p::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:#95C11F}

/* ---------- Statisztika-sáv: halvány embléma ---------- */
.oc-stats-emblem{position:absolute;pointer-events:none;opacity:.13}

/* ---------- Katalógus csempe ---------- */
.oc-cat-solid::after{content:"";position:absolute;right:-34px;bottom:-40px;width:210px;height:203px;opacity:.13;
  background:url('/wp-content/uploads/2026/10/ocotaj-embled.svg') center/contain no-repeat}

/* ---------- Kiemelt termékek: sárga kör a packshot mögött ---------- */
.oc-prod-ph::before{content:"";position:absolute;left:50%;top:52%;width:62%;aspect-ratio:1;border-radius:50%;
  background:#FFE08A;transform:translate(-50%,-50%);z-index:0}

/* ---------- Cégeknek: embléma a szegmens-kártyákon és a CTA-sávon ---------- */
.oc-seg::after,.oc-strip::before,.oc-strip::after{content:"";position:absolute;pointer-events:none;
  background:url('/wp-content/uploads/2026/10/ocotaj-embled-white.svg') center/contain no-repeat}
.oc-seg::after{right:-60px;bottom:-66px;width:230px;height:224px;opacity:.09;transform:rotate(-14deg)}
.oc-strip::before{right:-56px;top:-96px;width:320px;height:309px;opacity:.11;transform:rotate(-12deg)}
.oc-strip::after{left:34%;bottom:-104px;width:230px;height:222px;opacity:.07;transform:rotate(18deg)}

/* kézírásos kiemelés a „Úgy készítjük" címben */
.oc-script{font-family:'Dancing Script',cursive;font-style:normal;font-weight:700;font-size:1.25em;color:#68992F}

/* ---------- Rólunk: ISO jelzés ---------- */
.oc-iso{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.1px;padding:4px 8px;border-radius:7px;
  background:#32692D;color:#fff}

/* ---------- Kapcsolat ---------- */
.oc-contact-row{display:flex;align-items:center;gap:14px;text-decoration:none}
.oc-contact-ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto}
.oc-contact-ico svg{width:20px;height:20px;color:#fff}
.oc-contact-text{display:flex;flex-direction:column}
.oc-contact-text strong{color:#fff;font-size:17px;font-weight:700;line-height:1.3}
.oc-contact-text small{color:rgba(255,255,255,.7);font-size:13px;font-weight:500}
.oc-contact-row:hover .oc-contact-text strong{color:#95C11F}

/* ---------- Fluent Forms az arculathoz ---------- */
.oc-form-card .ff-el-group{margin-bottom:14px}
.oc-form-card .ff-el-input--label label{font-size:13.5px;font-weight:700;color:#1A3B21;margin-bottom:6px}
.oc-form-card .ff-el-form-control{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #E6ECDF;
  font-family:'Parkinsans',system-ui,sans-serif;font-size:15px;background:#fff;color:#1B2A1E;line-height:1.4}
.oc-form-card .ff-el-form-control:focus{border-color:#68992F;outline:none;box-shadow:0 0 0 3px rgba(149,193,31,.25)}
.oc-form-card textarea.ff-el-form-control{min-height:100px;resize:vertical}
.oc-form-card .ff-btn-submit{width:100%;justify-content:center;background:#95C11F !important;color:#1A3B21 !important;
  border:0;border-radius:999px;padding:15px 26px;font-family:'Parkinsans',system-ui,sans-serif;font-size:16px;
  font-weight:700;line-height:1;cursor:pointer;transition:background .18s ease,transform .18s ease}
.oc-form-card .ff-btn-submit:hover{background:#A6D22C !important;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(149,193,31,.35)}
.oc-form-card .ff-el-group.ff_list_inline .ff-el-form-check{display:flex;align-items:flex-start;gap:10px}
.oc-form-card .ff-el-form-check-input{width:18px;height:18px;margin-top:2px;accent-color:#32692D}
.oc-form-card .ff-el-tc label,.oc-form-card .ff-el-form-check-label{font-size:13px;color:#4A5A4D;line-height:1.5}
.oc-form-card .ff-el-is-error .ff-el-form-control{border-color:#AF1A18}
.oc-form-card .error-text{font-size:12.5px;color:#AF1A18}
.oc-quote-note{display:none;margin:0 0 14px;padding:8px 12px;border-radius:999px;background:#FFF2D0;
  font-size:13.5px;font-weight:700;color:#1A3B21}
.oc-quote-note.is-visible{display:inline-block}

/* ---------- Mobil finomhangolás ---------- */
@media (max-width:880px){
  .oc-ba{height:auto;min-height:0;aspect-ratio:4/3;border-radius:32px 10px 10px 32px}
  .oc-ba-lbl{font-size:11px;padding:6px 10px;top:12px}
  .oc-ba-lbl--l{left:12px}.oc-ba-lbl--r{right:12px}
}

/* GDPR sor: pipa és szöveg egy vonalban, rendes térközzel */
.oc-form-card .ff-el-group.ff-el-tc .ff-el-form-check,
.oc-form-card .ff_tc_wrapper .ff-el-form-check{display:flex;align-items:flex-start;gap:10px}
.oc-form-card .ff-el-form-check input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:#32692D}
.oc-form-card .ff-el-form-check label,.oc-form-card .ff_tc_label{margin:0;font-size:13px;color:#4A5A4D;line-height:1.5}
.oc-form-card .ff-el-group:last-of-type{margin-bottom:0}
/* a kapcsolat szekció zöldséges képe mobilon kisebb és alulról jön */
@media (max-width:880px){
  .oc-veg-art{height:auto !important;width:120% !important;right:-20% !important;bottom:-4% !important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
}

/* nyitott mobil menü: a fejléc sáv (logó + X) a panel fölött marad */
@media (max-width:1100px){
  .oc-header > .e-con,.oc-header .elementor-element-header-bar{position:relative;z-index:60}
  .oc-header .elementor-nav-menu--dropdown a.elementor-item,
  .oc-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .oc-header .elementor-nav-menu--dropdown a.elementor-item:hover,
  .oc-header .elementor-nav-menu--dropdown a.elementor-item:focus{background:transparent !important;color:#1A3B21 !important}
  .oc-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{color:#32692D !important}
  .oc-header .elementor-menu-toggle{color:#1A3B21}
  .oc-header:not(.is-scrolled):not(.is-menu-open) .elementor-menu-toggle{color:#fff}
}

@media (max-width:1100px){
  .oc-header .e-svg,.oc-header a[class*="logo"],.oc-header .elementor-element-logo{position:relative;z-index:60}
}

/* nyitott mobil menü: arculati színű logó a krém panelen, a bezáró X a jobb szélen */
.oc-header.is-menu-open svg .st1{fill:#32692D}
.oc-header.is-menu-open svg .emb.st1{fill:#32692D}
.oc-header.is-menu-open svg .emb.st2{fill:#68992F}
@media (max-width:1100px){
  .oc-header .elementor-widget-nav-menu{flex:0 0 auto;width:auto;margin-left:auto}
  .oc-header .elementor-widget-nav-menu > .elementor-widget-container{display:flex;justify-content:flex-end}
}

/* Hero: poszter azonnal, a videó csak desktopon és csak betöltés után */
.oc-hero-media{position:absolute;inset:0;width:100%;height:100%}
.oc-hero-poster,.oc-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.oc-hero-media video{opacity:0;transition:opacity .6s ease}
.oc-hero-media video.is-ready{opacity:1}

/* lead mobilon (a globális osztály csak alap variánst tárol) */
@media (max-width:880px){ .oc-lead{font-size:17px;max-width:100%} }

/* Fluent Forms küldés gomb: arculati pirula forma (erősebb szelektor az FF saját stílusa fölé) */
.oc-form-card .fluentform .ff-btn.ff-btn-submit,
.oc-form-card .fluentform button[type=submit],
.oc-form-card .frm-fluent-form .ff-btn-submit{border-radius:999px !important;background:#95C11F !important;color:#1A3B21 !important;
  border:0 !important;padding:15px 26px !important;font-weight:700 !important;font-size:16px !important;line-height:1 !important;width:100%}
.oc-form-card .fluentform .ff-btn.ff-btn-submit:hover{background:#A6D22C !important;
  transform:translateY(-2px);box-shadow:0 10px 28px rgba(149,193,31,.35)}

/* --- Fluent Forms: designterv-pontos mezőmetrika (FF saját CSS-e után töltődik) --- */
.oc-form-card .fluentform .ff-el-group{margin-bottom:16px}
.oc-form-card .fluentform .ff-el-group:last-of-type{margin-bottom:0}
.oc-form-card .fluentform .ff-el-input--label{margin-bottom:5px}
.oc-form-card .fluentform .ff-el-input--label label{font-size:13.5px;font-weight:700;color:#1A3B21;line-height:1.6;margin:0}
.oc-form-card .fluentform .ff-el-form-control{padding:13px 14px;font-size:15px;line-height:1.5;border-radius:12px;
  border:1.5px solid #E6ECDF;background:#fff;color:#1B2A1E}
.oc-form-card .fluentform textarea.ff-el-form-control{min-height:100px;line-height:1.5}
.oc-form-card .fluentform .ff-t-container{display:flex;gap:14px;margin:0}
.oc-form-card .fluentform .ff-t-cell{padding:0;flex:1 1 0;min-width:0}
.oc-form-card .fluentform .ff-t-container .ff-el-group{margin-bottom:16px}

/* --- Címsorok: a designtervvel egyező sortörés és em-alapú betűköz --- */
body .elementor h1,body .elementor h2,body .elementor h3,body .elementor h4{text-wrap:balance}
/* Fluent Forms csillag: a designban a felirat színével fut, nem pirosan elválasztva */
.oc-form-card .fluentform .ff-el-is-required.asterisk-right label:after,
.oc-form-card .fluentform .ff-el-input--label.ff-el-is-required label:after{color:#1A3B21;margin-left:2px}

/* --- Nyíl-ikon a nagy gombokon (a designterv .btn svg-je) --- */
.oc-btn.oc-arrow::after{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease}
.oc-btn.oc-arrow:hover::after{transform:translateX(3px)}

/* --- ISO tanúsítvány ikon --- */
.oc-cert-icon{display:block;line-height:0;color:#32692D}
.oc-cert-icon svg{width:42px;height:42px;display:block;margin-top:1px}
.oc-cert .elementor-widget-html{flex:0 0 auto}

/* --- Rólunk fotórács: a nagy kép töltse ki az oszlopot (az .elementor img{height:auto} ellenében) --- */
#rolunk .elementor-element.elementor-element-about-img-1,
#rolunk .elementor-element.elementor-element-about-img-1 img{height:100%;min-height:240px;object-fit:cover}
#rolunk .elementor-element.elementor-element-about-photos{align-content:stretch}

/* --- Az Elementor kiszedi a class/style attribútumot a szövegmezőkből: pótlás szelektorral --- */
#hero h1 span{color:#95C11F}
#hero a[href*="palyazat"]{color:#32692D;font-weight:700;text-decoration:underline}
#tisztitas .oc-ba-points strong{color:#fff}

/* --- Cégeknek legördülő: a designterv .dropdown-ja --- */
@media (min-width:881px){
  .oc-header .elementor-nav-menu--main .sub-arrow{margin-left:4px}
  .oc-header .elementor-nav-menu--main ul.sub-menu{min-width:278px;background:#fff;border:1px solid #E6ECDF;
    border-radius:18px;padding:10px;box-shadow:0 18px 50px rgba(26,59,33,.14);margin-top:8px}
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item{display:block;padding:11px 14px;
    border-radius:12px;font-weight:600;font-size:15px;color:#1B2A1E;line-height:1.35}
  /* hover, fókusz ÉS a horgony-scrollspy aktív állapota (különben az Elementor
     alapértelmezett #3f444b sötétszürke háttere jön elő, amikor a hivatkozott
     szekció a nézetben van) */
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus,
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active,
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.highlighted{
    background:#FBF7EA;color:#1A3B21}
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active:not(:hover),
  .oc-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.highlighted:not(:hover){
    background:transparent}
  .oc-header .elementor-nav-menu--main ul.sub-menu .oc-sub-desc{display:block;font-weight:400;font-size:13px;
    color:#6B7A6E;margin-top:2px}
  .oc-header .elementor-nav-menu--main ul.sub-menu li.oc-sub-all{border-top:1px solid #E6ECDF;margin-top:6px;padding-top:6px}
  .oc-header .elementor-nav-menu--main ul.sub-menu li.oc-sub-all a.elementor-sub-item{color:#32692D}
}
  /* legördülő-nyíl: vékony chevron a designterv szerint */
  .oc-header .elementor-nav-menu--main .sub-arrow i,
  .oc-header .elementor-nav-menu--main .sub-arrow svg{display:none}
  .oc-header .elementor-nav-menu--main .sub-arrow::after{content:"";display:inline-block;width:14px;height:14px;
    background:currentColor;vertical-align:-2px;
    -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}

/* --- Rólunk: a paradicsomos kép vágása a designterv szerint --- */
#rolunk .elementor-element-about-img-3,
#rolunk .elementor-element-about-img-3 img{object-position:72% 56%}

/* --- Mobil menü: almenü-nyíl és almenüpontok --- */
@media (max-width:880px){
  .oc-header .elementor-nav-menu--dropdown .sub-arrow i,
  .oc-header .elementor-nav-menu--dropdown .sub-arrow svg{color:#1A3B21;fill:#1A3B21}
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item{font-size:16px !important;font-weight:600;
    color:#32692D !important;padding-top:10px;padding-bottom:10px}
  .oc-header .elementor-nav-menu--dropdown .oc-sub-desc{display:none}
}

/* --- Űrlap mobilon: a két oszlop egymás alá (a designterv szerint) --- */
@media (max-width:600px){
  .oc-form-card .fluentform .ff-t-container{display:block}
  .oc-form-card .fluentform .ff-t-cell{width:100%}
}

/* A v4 stílusmotornak nincs white-space tulajdonsága, a designterv .btn-je viszont nowrap */
.oc-btn{white-space:nowrap}

/* ================= Designterv-pótlások (2026-10-01, Kristof listája) ================= */

/* 1. Mutatószám-doboz: háttérlevelek + elválasztó vonalak */
.oc-stats{position:relative;overflow:hidden}
.oc-stats::after,.oc-stats::before{content:"";position:absolute;pointer-events:none;
  background:url('/wp-content/uploads/2026/10/ocotaj-embled-white.svg') center/contain no-repeat}
.oc-stats::after{right:-70px;top:50%;width:330px;height:319px;opacity:.13;
  transform:translateY(-50%) rotate(-12deg)}
.oc-stats::before{left:-90px;bottom:-120px;width:260px;height:251px;opacity:.07;transform:rotate(14deg)}
.oc-stats > .elementor-element + .elementor-element{border-left:1px solid rgba(255,255,255,.2)}
.oc-stats > .elementor-element:first-child{padding-left:8px}
@media (max-width:600px){
  .oc-stats > .elementor-element + .elementor-element{border-left:0;border-top:1px solid rgba(255,255,255,.2)}
}

/* 2. Előtte/utána: a fogantyú korongja a vonal közepén üljön */
.oc-ba-handle{display:block}
.oc-ba-handle svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;padding:14px;box-sizing:border-box;border-radius:50%;background:#95C11F;color:#1A3B21;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* 3. Kiemelt termékek: kártya- és képhover, a packshot töltse ki a képmezőt */
.oc-prod-ph .elementor-element img,.oc-prod-ph img.prod-ph-img,.oc-prod-ph img{position:relative;z-index:1;width:100%;height:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(26,59,33,.18));transition:transform .35s ease}
.oc-prod-ph img.oc-mult{mix-blend-mode:multiply;filter:none}

/* 4. „300+ termék" csempe: finom hover, ahogy a többi kategórián */
.oc-link-arrow::after{content:"";display:inline-block;width:18px;height:18px;
  margin-left:8px;vertical-align:-3px;background:currentColor;transition:transform .18s ease;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.oc-cat-solid:hover .oc-link-arrow::after,.oc-link-arrow:hover::after{transform:translateX(4px)}

/* 5. Kiemelt termékek szekció: nagy halvány levél a háttérben */
#csomagolt{position:relative;overflow:hidden}
#csomagolt::after{content:"";position:absolute;right:-120px;bottom:-140px;width:520px;height:503px;
  pointer-events:none;opacity:.07;transform:rotate(-8deg);z-index:0;
  background:url('/wp-content/uploads/2026/10/ocotaj-embled.svg') center/contain no-repeat}
#csomagolt > .elementor-element{position:relative;z-index:1}

/* 6. Hol kapható: elforgatott szóvédjegy a háttérben */
#hol-kaphato{position:relative;overflow:hidden}
#hol-kaphato::before{content:"";position:absolute;left:-58px;top:50%;width:300px;height:127px;
  pointer-events:none;opacity:.1;transform:translateY(-50%) rotate(-90deg);z-index:0;
  background:url('/wp-content/uploads/2026/10/ocotaj-wordmark.svg') center/contain no-repeat}
#hol-kaphato > .elementor-element{position:relative;z-index:1}
@media (max-width:820px){#hol-kaphato::before{display:none}}

/* 7. Hírek: a „Minden bejegyzés" link nyila */
.oc-link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#32692D}

/* Lábléc alsó sor: a linkek a sor halvány színét öröklik, nem emelkednek ki */
.oc-footer [class*="footer-bottom"] a{color:inherit;font-weight:inherit;text-decoration:none}
.oc-footer [class*="footer-bottom"] a:hover{color:#95C11F}

/* =====================================================================
   EGYSÉGES HOVER-NYELV
   Kártya (bármi, ami egészében kattintható): 4px emelkedés + lágy árnyék,
     a benne lévő fotó 1.04-re nagyít.
   Gomb: tömör → 2px emelkedés + saját színű árnyék; keretes → kitöltődik.
   Szöveglink: szín vált, a nyíl 4px-et csúszik.
   Menü: csak az aláhúzás nő ki, a menüpont mérete NEM változik.
   Alapelv: hoveren a szöveg színe fotós vagy sötét felületen soha nem változik.
   ===================================================================== */

/* --- 1. Kártyák --- */
.oc-prod,.oc-cat,.oc-cat-solid,.oc-seg,.oc-news,.oc-collab,.oc-split{
  transition:transform .18s ease,box-shadow .18s ease}
.oc-prod:hover,.oc-cat:hover,.oc-cat-solid:hover,.oc-seg:hover,.oc-news:hover,.oc-collab:hover,.oc-split:hover{
  transform:translateY(-4px);box-shadow:0 20px 44px rgba(26,59,33,.14)}
.oc-prod img,.oc-cat img,.oc-news img,.oc-split img{transition:transform .4s ease}
.oc-prod:hover .oc-prod-ph img,.oc-cat:hover img,.oc-news:hover img,.oc-split:hover img{transform:scale(1.04)}

/* --- 2. A kit globális link-színe ne fesse át a kártyákat, csempéket, logót --- */
/* a szövegközi linkek továbbra is kapnak hovert */
.elementor p > a:hover,.elementor li > a:hover,.elementor td > a:hover{color:#68992F}

/* --- 3. Menüpontok: hoveren se nőjenek (az Elementor 13/20-as hover-paddingja ellen) --- */
.oc-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
.oc-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.oc-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
.oc-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted{
  padding:10px 14px;transition:color .15s ease}

/* --- 4. Szöveglinkek --- */
.oc-link-arrow{transition:color .18s ease}
.oc-link-arrow:hover{color:#1A3B21}

/* --- 5. A szövegközi link-hover ne szivárogjon a láblécbe és a sötét felületekre --- */
.oc-footer p > a:hover,.oc-footer li > a:hover,
.oc-footer [class*="footer-bottom"] p > a:hover{color:#95C11F}
.oc-seg p > a:hover,.oc-cat p > a:hover,#tisztitas p > a:hover{color:#95C11F}

/* --- 6. Mobil menü: az almenüpontok se kapjanak sötét Elementor-hátteret --- */
@media (max-width:1100px){
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item,
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus{
    background:transparent !important;color:#32692D !important}
}

/* --- 7. Fejléc keretes gombja: a tömör zöld kitöltés mindkét fejléc-állapotban --- */
.oc-header .oc-btn-ghost{transition:background .18s ease,color .18s ease,box-shadow .18s ease}

/* Mobil menü: ugyanez az Elementor-alapértelmezés a lenyitott almenüpontokon */
@media (max-width:1100px){
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
  .oc-header .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted,
  .oc-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .oc-header .elementor-nav-menu--dropdown a.elementor-item.highlighted{
    background:transparent !important;color:#32692D !important}
}

/* ===== Mobil javítások (2026-10-02, Kristof visszajelzése) ===== */

/* 1. A hero poszter/videó töltse ki a hero magasságát.
   Az .elementor img{height:auto} (0,1,1) erősebb volt a .oc-hero-poster-nél (0,1,0),
   ezért a kép a saját 16:9 arányán jelent meg, és alatta üres zöld sáv maradt. */
#hero .oc-hero-poster,
#hero .oc-hero-media video{height:100%;width:100%;object-fit:cover}

/* 2. Kategóriacímek: a hosszú magyar összetett szavak elválaszthatók legyenek
   (a <html lang="hu"> miatt a böngésző magyar szótárt használ). */
.oc-cat h3,.oc-cat-solid h3,.oc-prod h3,.oc-news h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

@media (max-width:480px){
  /* 3. Kategóriacsempe: kisebb belső margó, így a „Fűszernövények" is elfér */
  .oc-cat{padding:14px !important}
  .oc-cat h3{font-size:15px !important;line-height:1.25 !important}
  .oc-cat p,.oc-cat span{font-size:12.5px !important}

  /* 4. „300+ termék" csempe: a tartalom nem fért a négyzetbe, a „Megnézem" levágódott.
     A csempe négyzet marad (a rács ritmusa így egységes), a tartalom lett tömörebb. */
  .oc-cat-solid{padding:12px !important}
  .oc-cat-solid p:first-child{font-size:30px !important;line-height:1.15 !important;
    letter-spacing:-0.8px !important;margin-bottom:6px !important}
  .oc-cat-solid h3{font-size:14px !important;line-height:1.25 !important;margin-bottom:6px !important}
  .oc-cat-solid .oc-link-arrow{font-size:13px !important}
  .oc-cat-solid .oc-link-arrow::after{width:15px;height:15px;margin-left:6px}
}

/* 5. A packshot mögötti sárga kör telefonon tojás alakú volt: a ::before aspect-ratio-ját
   a konténer kinyújtotta. A képmező aránya fix 4:3, ezért a kört két százalékból
   méretezzük (61,5% szélesség = 82% magasság minden méretnél) – így mindig kör. */
.oc-prod-ph::before{width:61.5% !important;height:82% !important;aspect-ratio:auto !important}