/* ========================================================================== Bestlab Fast — main stylesheet Single hand-written file. No framework. Mobile-first. ========================================================================== */ :root{ --bl-navy:#0B2C5A; --bl-blue:#1858A8; --bl-blue-d:#13497f; --bl-orange:#E8550D; --bl-orange-d:#cc480a; --bl-ink:#1A1F2B; --bl-muted:#6B7280; --bl-line:#E5E7EB; --bl-bg:#FFFFFF; --bl-soft:#F6F8FB; --bl-footer:#06294D; --bl-radius:10px; --bl-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10); --bl-shadow-lg:0 10px 30px rgba(11,44,90,.10); --bl-container:1280px; --bl-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ---- Reset-ish -------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--bl-font);color:var(--bl-ink);background:var(--bl-bg);line-height:1.6;font-size:16px} img{max-width:100%;height:auto;display:block} a{color:var(--bl-blue);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{color:var(--bl-navy);line-height:1.15;margin:0 0 .4em} button{font:inherit;cursor:pointer} ul{list-style:none;margin:0;padding:0} .container{width:100%;max-width:var(--bl-container);margin-inline:auto;} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .blf-skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:1000} .blf-skip:focus{left:8px;top:8px} /* ---- Buttons ---------------------------------------------------------- */ .blf-btn{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.25em;border-radius:8px;font-weight:600;font-size:.95rem;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;white-space:nowrap} .blf-btn:hover{text-decoration:none} .blf-btn--primary{background:var(--bl-blue);color:#fff} .blf-btn--primary:hover{background:var(--bl-blue-d)} .blf-btn--orange{background:var(--bl-orange);color:#fff} .blf-btn--orange:hover{background:var(--bl-orange-d)} .blf-btn--ghost{background:transparent;color:var(--bl-navy);border-color:var(--bl-line)} .blf-btn--ghost:hover{border-color:var(--bl-navy)} /* ---- Header ----------------------------------------------------------- */ /* ---- Info bar — announcement strip above the header ------------------- Sits outside .blf-header so it scrolls away while the header keeps sticking: an announcement does not earn permanent screen space. Content, tone and scheduling come from Bestlab Suite → Options → Menü → Info bar. */ .blf-infobar{background:var(--bl-navy);color:#fff;font-size:.86rem} .blf-infobar[hidden]{display:none} .blf-infobar--orange{background:var(--bl-orange)} .blf-infobar__inner{display:flex;align-items:center;justify-content:center;gap:14px; min-height:38px;padding-block:7px;padding-inline:16px} .blf-infobar__text{margin:0;line-height:1.35} .blf-infobar__link{display:inline-flex;align-items:center;gap:5px;flex:none; color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px} .blf-infobar__link:hover{color:#fff;opacity:.85;text-decoration:underline} .blf-infobar__close{display:flex;align-items:center;justify-content:center;flex:none; width:28px;height:28px;margin-left:auto;padding:0;border:0;border-radius:6px; background:none;color:#fff;opacity:.75} .blf-infobar__close:hover{opacity:1;background:rgba(255,255,255,.14)} .blf-infobar__close:focus-visible{outline:2px solid #fff;outline-offset:-2px} @media(max-width:640px){ /* Centring stops paying off once the text wraps; the close button keeps its own corner rather than being pushed under the message. */ .blf-infobar__inner{justify-content:flex-start;gap:10px;padding-inline:14px} .blf-infobar__text{font-size:.82rem} .blf-infobar__link{margin-left:0} } .blf-header{position:sticky;top:0;z-index:9000;background:#fff;border-bottom:1px solid var(--bl-line)} /* Secondary bar — non-sticky, under the header (Blog / Rólunk / Támogatás) */ .blf-subbar{background:var(--bl-soft);border-bottom:1px solid var(--bl-line)} .blf-subbar__inner{display:flex;align-items:center;min-height:42px;overflow-x:auto;scrollbar-width:none} .blf-subbar__inner::-webkit-scrollbar{display:none} .blf-subbar__menu{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;gap:28px;margin:0;padding:0;white-space:nowrap} .blf-subbar__menu .menu-item{margin:0} .blf-subbar__menu a{display:inline-flex;align-items:center;color:var(--bl-navy);font-size:.86rem;font-weight:600;padding:10px 0} .blf-subbar__menu a:hover{color:var(--bl-blue)} .blf-subbar__menu .current-menu-item>a,.blf-subbar__menu .current_page_item>a{color:var(--bl-blue)} .blf-header__bar{display:flex;align-items:center;gap:24px;min-height:72px} .blf-logo{font-weight:800;font-size:1.4rem;letter-spacing:.5px;display:inline-flex} .blf-logo__b{color:var(--bl-navy)} .blf-logo__l{color:var(--bl-blue)} .blf-logo--light .blf-logo__b{color:#fff} .blf-logo--light .blf-logo__l{color:#7db4ec} .blf-header__actions{display:flex;align-items:center;gap:10px;margin-left:auto} /* Tax switch (Nettó/Bruttó) labels — the suite ships them white, invisible on the white header. Use the navy header colour. */ /* Nettó/Bruttó labels — the suite ships them white; use navy in both the bar and the mobile menu copy of the switch. */ .blf-header .bl-label-text{color:var(--bl-navy)} .blf-header__bar{flex-wrap:nowrap} /* Secondary actions live in the slide-down menu on mobile only. */ .blf-nav__extra{display:none} .blf-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--bl-navy)} .blf-iconbtn:hover{background:var(--bl-soft)} /* Header cart + slide-in mini-cart drawer */ .blf-cart__toggle{position:relative} .blf-cart__count{position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bl-orange);color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff} .blf-cart__count[data-count="0"]{display:none} /* The drawer must sit above EVERYTHING (incl. the sticky header at z-index:9000). The panel is trapped in this container's stacking context, so the container is what has to win against the page — both are pinned to the max int so the cart drawer can never be overlapped. */ .blf-cart-drawer{position:fixed;inset:0;z-index:2147483647} .blf-cart-drawer[hidden]{display:none} .blf-cart-drawer__overlay{position:absolute;inset:0;z-index:0;background:rgba(11,44,90,.45);opacity:0;transition:opacity .25s} .blf-cart-drawer.is-open .blf-cart-drawer__overlay{opacity:1} .blf-cart-drawer__panel{position:absolute;top:0;right:0;z-index:2147483647;height:100%;width:min(400px,92vw);background:#fff;box-shadow:-10px 0 40px rgba(11,44,90,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)} .blf-cart-drawer.is-open .blf-cart-drawer__panel{transform:translateX(0)} .blf-cart-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--bl-line)} .blf-cart-drawer__head strong{font-size:1.1rem;color:var(--bl-navy)} .blf-cart-drawer__close{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--bl-muted);cursor:pointer;padding:0 4px} .blf-cart-drawer__close:hover{color:var(--bl-navy)} body.blf-cart-open{overflow:hidden} .blf-cart__body{display:flex;flex-direction:column;flex:1;min-height:0} .blf-cart__items{flex:1;overflow:auto;padding:8px 14px;margin:0} .blf-cart__item{display:flex;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--bl-line)} .blf-cart__thumb{flex:none;width:60px;height:60px;border-radius:8px;background:var(--bl-soft);overflow:hidden;display:flex;align-items:center;justify-content:center} .blf-cart__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .blf-cart__info{flex:1;min-width:0} .blf-cart__name{display:block;font-weight:600;color:var(--bl-navy);font-size:.92rem;line-height:1.3} .blf-cart__name:hover{color:var(--bl-blue)} .blf-cart__qty{display:block;color:var(--bl-muted);font-size:.85rem;margin-top:3px} .blf-cart__remove{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bl-muted);font-size:1.2rem;line-height:1;text-decoration:none;transition:background .15s,color .15s} .blf-cart__remove:hover{background:#fdecec;color:var(--bl-orange-d);text-decoration:none} .blf-cart__foot{border-top:1px solid var(--bl-line);padding:16px 20px;background:var(--bl-soft)} .blf-cart__subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px} .blf-cart__subtotal span{color:var(--bl-muted)} .blf-cart__subtotal strong{font-size:1.2rem;color:var(--bl-navy)} .blf-cart__cta{display:grid;grid-template-columns:1fr 1.4fr;gap:10px} .blf-cart__cta .blf-btn{justify-content:center} .blf-cart__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:48px 20px;color:var(--bl-muted)} .blf-cart__empty svg{color:#cbd5e1} .blf-cart__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px} .blf-cart__stepper{display:inline-flex;align-items:center;border:1px solid var(--bl-line);border-radius:8px;overflow:hidden} .blf-cart__step{width:28px;height:28px;border:0;background:#fff;color:var(--bl-navy);font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .blf-cart__step:hover{background:var(--bl-soft);color:var(--bl-blue)} .blf-cart__qtynum{min-width:32px;text-align:center;font-weight:700;color:var(--bl-navy);font-size:.9rem} .blf-cart__line{font-weight:700;color:var(--bl-navy);font-size:.92rem;white-space:nowrap} .blf-cart-drawer.is-busy .blf-cart__body{opacity:.55;pointer-events:none;transition:opacity .15s} .blf-cart__ship{padding:14px 20px;border-bottom:1px solid var(--bl-line);background:linear-gradient(180deg,#fff,var(--bl-soft))} .blf-cart__ship[hidden]{display:none} .blf-cart__ship-msg{margin:0 0 8px;font-size:.85rem;color:var(--bl-ink)} .blf-cart__ship-msg strong{color:var(--bl-orange)} .blf-cart__ship-msg--done{color:#1a8a3c;font-weight:600} .blf-cart__ship-track{display:block;height:7px;border-radius:999px;background:var(--bl-line);overflow:hidden} .blf-cart__ship-fill{display:block;height:100%;border-radius:999px;background:var(--bl-orange);transition:width .4s cubic-bezier(.4,0,.2,1)} .blf-cart__ship-fill--done{background:#1a8a3c} /* Nav + mega menu. Everything design-specific lives in mega-menu.css / mega-menu-classic.css — only one of the two is ever enqueued, so the two designs can reuse the same class names without fighting each other. */ .blf-menu{display:flex;gap:4px} .blf-menu > li{position:relative} .blf-menu > li > a{display:flex;align-items:center;gap:.35em;padding:14px 14px;font-weight:600;color:var(--bl-navy);font-size:.95rem} .blf-menu > li > a:hover{color:var(--bl-blue);text-decoration:none} .blf-menu .sub-menu{position:absolute;left:0;top:100%;min-width:240px;background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);box-shadow:var(--bl-shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top center;transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .24s cubic-bezier(.16,1,.3,1),visibility .24s} .blf-menu > li:hover > .sub-menu,.blf-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .blf-menu .sub-menu a{display:block;padding:9px 12px;border-radius:6px;color:var(--bl-ink);font-size:.92rem;transition:background .14s,color .14s,padding-left .14s} .blf-menu .sub-menu a:hover{background:var(--bl-soft);text-decoration:none;padding-left:15px} .blf-link-ico{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:9px} /* Chevron rotates while a parent's panel is open. */ .blf-menu > li.menu-item-has-children:hover > a .blf-caret, .blf-menu > li.menu-item-has-children:focus-within > a .blf-caret{transform:rotate(180deg)} /* Mega: a top item with the `mega` CSS class becomes a full-width panel whose direct children are columns (their own sub-items become the column links). */ .blf-menu > li.mega{position:static} .blf-menu > li.mega > .sub-menu{left:0;right:0;width:100%;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px 30px;padding:26px 28px} .blf-menu > li.mega > .sub-menu > li > a{padding:0 0 8px;font-weight:700;color:var(--bl-blue);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem} .blf-menu > li.mega > .sub-menu > li > a:hover{background:none;color:var(--bl-blue);padding-left:0} /* Column link lists render statically inside the mega panel (no nested flyout). */ .blf-menu > li.mega .sub-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;display:block;min-width:0;padding:0;border:0;box-shadow:none;background:none} .blf-menu > li.mega .sub-menu .sub-menu a{padding:7px 0;color:var(--bl-ink);font-weight:500} .blf-nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--bl-line);border-radius:8px;background:#fff;position:relative} /* ---- ÚJ SVG Hamburger menü animáció ---- */ .blf-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--bl-line); border-radius: 8px; background: #fff; padding: 0; } /* @media(max-width:900px) blokkon belül maradhat a display: block! */ .blf-hamburger { fill: var(--bl-navy); /* Szín a main.css változójából */ } .blf-hamburger .blf-line { transform-origin: center; /* Finom átmenet a méretre, eltolásra és forgatásra */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, x 0.3s ease, width 0.3s ease; } /* --- Amikor a menü NYITVA van (X ikon) --- */ .blf-nav-toggle[aria-expanded="true"] .blf-hamburger .mid { opacity: 0; /* Középső vonal eltűnik */ } .blf-nav-toggle[aria-expanded="true"] .blf-hamburger .top { x: 4px; /* Kihúzzuk balra, hogy középre kerüljön */ width: 16px; /* Megnöveljük a szélességet */ transform: translateY(5px) rotate(45deg); } .blf-nav-toggle[aria-expanded="true"] .blf-hamburger .bot { x: 4px; /* Kihúzzuk balra, hogy középre kerüljön */ width: 16px; /* Megnöveljük a szélességet */ transform: translateY(-5px) rotate(-45deg); } /* Search drawer + live autocomplete */ .blf-search{border-top:1px solid var(--bl-line);background:var(--bl-soft);padding:18px 0} .blf-searchform{position:relative;max-width:760px;margin-inline:auto} .blf-searchform--page{max-width:640px;margin:18px 0 0} .blf-searchform__field{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--bl-navy);border-radius:12px;padding:5px 6px 5px 14px;box-shadow:var(--bl-shadow)} .blf-searchform__field:focus-within{border-color:var(--bl-blue);box-shadow:0 0 0 4px rgba(24,88,168,.12)} .blf-searchform__icon{color:var(--bl-muted);flex:none} .blf-searchform__field input[type=search]{flex:1;border:0;outline:0;font-size:1.05rem;padding:10px 4px;background:transparent;min-width:0;color:var(--bl-ink)} .blf-searchform__btn{flex:none;background:var(--bl-blue);color:#fff;border:0;border-radius:8px;padding:11px 20px;font-weight:600;cursor:pointer;transition:background .15s} .blf-searchform__btn:hover{background:var(--bl-blue-d)} .blf-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--bl-line);border-radius:12px;box-shadow:var(--bl-shadow-lg);overflow:hidden;z-index:120} .blf-suggest.is-loading::after{content:"";position:absolute;top:0;left:0;width:40%;height:2px;background:linear-gradient(90deg,transparent,var(--bl-blue),transparent);animation:blf-load 1s linear infinite} @keyframes blf-load{0%{left:-40%}100%{left:100%}} .blf-suggest__list{margin:0;padding:6px} .blf-suggest__item a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;color:var(--bl-ink)} .blf-suggest__item a:hover,.blf-suggest__item.is-active a{background:var(--bl-soft);text-decoration:none} .blf-suggest__thumb{flex:none;width:46px;height:46px;border-radius:8px;background:var(--bl-soft);overflow:hidden;display:flex;align-items:center;justify-content:center} .blf-suggest__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .blf-suggest__meta{display:flex;flex-direction:column;min-width:0} .blf-suggest__name{font-weight:600;color:var(--bl-navy);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blf-suggest__price{color:var(--bl-orange);font-weight:700;font-size:.85rem} .blf-suggest__all{display:block;text-align:center;padding:12px;border-top:1px solid var(--bl-line);font-weight:600;color:var(--bl-blue);background:var(--bl-soft)} .blf-suggest__all:hover{background:#eef2f8;text-decoration:none} .blf-suggest__empty{padding:20px;text-align:center;color:var(--bl-muted)} /* Search results page */ .blf-searchpage__head{background:linear-gradient(180deg,#fff,var(--bl-soft));border-bottom:1px solid var(--bl-line);padding-block:40px} .blf-searchpage__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--bl-blue);margin:0 0 8px} .blf-searchpage__title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;margin:0} .blf-searchpage__q{color:var(--bl-orange)} .blf-searchpage__count{color:var(--bl-muted);margin:8px 0 0} .blf-searchpage__more{text-align:center;color:var(--bl-muted);margin-top:24px} .blf-searchpage__filters{margin-bottom:8px} .blf-searchpage__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0 20px;border-top:1px solid var(--bl-line)} .blf-searchpage__count-inline{color:var(--bl-muted);font-size:.9rem} .blf-searchpage__count-inline strong{color:var(--bl-navy)} .blf-searchpage__sort{display:flex;align-items:center;gap:10px;margin:0} .blf-searchpage__sort-label{color:var(--bl-muted);font-size:.9rem;font-weight:600} .blf-searchpage__sort select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--bl-line);border-radius:8px;padding:10px 36px 10px 14px;font-size:.92rem;font-weight:600;color:var(--bl-navy);cursor:pointer} .blf-searchpage__sort select:focus{outline:0;border-color:var(--bl-blue);box-shadow:0 0 0 3px rgba(24,88,168,.12)} .blf-noresults{text-align:center;padding:48px 20px;color:var(--bl-muted)} .blf-noresults svg{color:#cbd5e1} .blf-noresults h2{color:var(--bl-navy);margin:14px 0 6px} .blf-noresults__hint{margin-bottom:22px} .blf-noresults__block{margin:22px auto 0;max-width:660px} .blf-noresults__label{display:block;font-weight:700;color:var(--bl-navy);font-size:.9rem;margin-bottom:10px} .blf-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .blf-chip{display:inline-block;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--bl-line);color:var(--bl-navy);font-weight:600;font-size:.9rem;transition:border-color .15s,background .15s} .blf-chip:hover{border-color:var(--bl-blue);background:var(--bl-soft);text-decoration:none} .blf-chip--dym{border-color:var(--bl-orange);color:var(--bl-orange)} .blf-chip--dym:hover{background:#fff5ef} .blf-dym .blf-chip--dym{font-size:1rem;padding:10px 18px} .blf-noresults__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} /* ---- Benefits strip (under header, above hero) ------------------------ */ .blf-benefits{background:#fff;border-bottom:1px solid var(--bl-line)} .blf-benefits__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-block:18px} .blf-benefit{display:flex;align-items:center;gap:12px;min-width:0} .blf-benefit__icon{flex:none;width:34px;height:34px} .blf-benefit__text{display:flex;flex-direction:column;min-width:0} .blf-benefit__title{color:var(--bl-navy);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.25} .blf-benefit__note{color:var(--bl-muted);font-size:.78rem;line-height:1.3;margin-top:2px} /* ---- Hero ------------------------------------------------------------- */ .blf-hero{background:linear-gradient(180deg,#fff 0%,var(--bl-soft) 100%)} .blf-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:64px} /* Full-bleed background-image variant (text overlaid on the left) */ .blf-hero--bg{background:#eef2f6 center / cover no-repeat;position:relative;aspect-ratio:5/2;min-height:380px;display:flex;align-items:center} .blf-hero--bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.15) 56%,rgba(255,255,255,0) 72%);pointer-events:none} .blf-hero--bg .blf-hero__inner{display:block;width:100%;position:relative;z-index:1;padding-block:56px} .blf-hero--bg .blf-hero__copy{max-width:540px} .blf-hero__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--bl-orange);margin:0 0 14px} .blf-hero__title{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em} .blf-hero__accent{color:var(--bl-orange);display:block} .blf-hero__lead{font-size:1.1rem;color:var(--bl-muted);max-width:42ch;margin:18px 0 26px} .blf-hero__actions{display:flex;gap:12px;flex-wrap:wrap} .blf-hero__note{margin-top:26px;font-weight:700;font-size:.8rem;letter-spacing:.04em;color:var(--bl-navy)} .blf-hero__media{position:relative} .blf-hero__img{width:100%;aspect-ratio:5/6;max-height:560px;border-radius:14px;box-shadow:var(--bl-shadow-lg);object-fit:cover;object-position:center} /* ---- Sections --------------------------------------------------------- */ .blf-section{padding-block:56px} .blf-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap} .blf-section__title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:0} .blf-section__link{font-weight:600;font-size:.92rem;white-space:nowrap} .blf-grid{display:grid;gap:20px} .blf-grid--5{grid-template-columns:repeat(5,1fr)} /* ---- Cards ------------------------------------------------------------ */ .blf-card{background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s} .blf-card:hover{box-shadow:var(--bl-shadow-lg);transform:translateY(-3px);text-decoration:none} .blf-card__media{position:relative;display:block;background:var(--bl-soft);aspect-ratio:1/1;overflow:hidden} .blf-card__img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .blf-card__body{padding:16px} /* Equal-height product cards: clamp the title to two lines so the rows below it line up across cards, and push the price + link to the bottom. */ .blf-card--product{display:flex;flex-direction:column;height:100%} .blf-card--product .blf-card__body{display:flex;flex-direction:column;flex:1 1 auto} .blf-card__title{font-size:1rem;font-weight:700;margin:0 0 4px} .blf-card--product .blf-card__title{min-height:2.6em} .blf-card__title a{color:var(--bl-navy)} .blf-card__sub{color:var(--bl-muted);font-size:.85rem;margin:0 0 10px} .blf-card--product .blf-card__sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .blf-card__variations{display:inline-flex;align-items:center;gap:5px;margin:0 0 10px;padding:3px 10px;font-size:.74rem;font-weight:700;color:var(--bl-navy);background:var(--bl-soft);border:1px solid var(--bl-line);border-radius:999px;align-self:flex-start} .blf-card__variations svg{color:var(--bl-blue)} .blf-card__price{font-weight:800;color:var(--bl-navy);font-size:1.05rem;margin-bottom:10px} .blf-card--product .blf-card__price{margin-top:auto} .blf-card__price .amount{color:var(--bl-navy)} .blf-card__link{font-weight:600;font-size:.9rem;color:var(--bl-orange)} /* Category card variant (the top row in the design) */ .blf-card--cat{display:flex;flex-direction:column;padding:18px;position:relative} .blf-card--cat .blf-card__cat-name{display:block;font-weight:800;color:var(--bl-navy);text-transform:uppercase;font-size:.85rem;letter-spacing:.04em} .blf-card--cat .blf-card__cat-sub{display:block;color:var(--bl-muted);font-size:.8rem;margin-top:4px} .blf-card--cat .blf-card__media{background:transparent;margin:14px 0 0;aspect-ratio:4/3} .blf-card--cat .blf-card__arrow{position:absolute;right:16px;bottom:14px;color:var(--bl-blue);font-size:1.1rem} .blf-card--cat:hover .blf-card__arrow{color:var(--bl-orange)} /* ---- Process strip ---------------------------------------------------- */ .blf-process{background:var(--bl-soft);border-top:1px solid var(--bl-line);padding-block:56px} .blf-process__inner{display:grid;grid-template-columns:.9fr 2fr;gap:32px;align-items:center} .blf-process__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--bl-blue);margin:0 0 10px} .blf-process__title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800} .blf-process__lead{color:var(--bl-muted);margin:0 0 16px} .blf-process__link{font-weight:600;color:var(--bl-blue)} .blf-process__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:step} .blf-step{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);padding:18px 16px;min-height: 186px;} .blf-step__n{display:block;font-weight:800;color:var(--bl-blue);font-size:1.1rem;margin-bottom:8px} .blf-step__title{font-weight:700;color:var(--bl-navy);font-size:.92rem;text-transform:uppercase;letter-spacing:.02em} .blf-step__text{color:var(--bl-muted);font-size:.82rem;line-height:1.45;margin-top:8px} /* ---- Footer ----------------------------------------------------------- */ /* Back-to-top button (fixed, fades in after scrolling). */ .blf-totop{position:fixed;left:20px;bottom:20px;z-index:70;width:46px;height:46px;border-radius:50%;border:0;background:var(--bl-navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(11,44,90,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s,background .15s;cursor:pointer} .blf-totop.is-visible{opacity:1;visibility:visible;transform:none} .blf-totop:hover{background:var(--bl-blue)} .blf-totop[hidden]{display:none} /* ===== Footer — one cohesive dark surface ============================== */ .blf-footer{ position:relative; background: radial-gradient(90% 60% at 85% -10%,rgba(24,88,168,.45) 0%,transparent 60%), linear-gradient(180deg,#0a3160 0%,var(--bl-footer) 40%,#051d39 100%); color:#aebfd4; } /* Newsletter — a contained highlight CARD floating on the footer */ .blf-newsletter{padding-block:48px 40px;border-bottom:1px solid rgba(255,255,255,.07)} .blf-newsletter__inner{ position:relative;overflow:hidden; display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center; background:linear-gradient(125deg,var(--bl-navy) 0%,var(--bl-blue) 100%); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:40px 44px; box-shadow:0 22px 48px rgba(2,12,28,.40); } .blf-newsletter__inner::after{content:"";position:absolute;top:-55%;right:-6%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(232,85,13,.32),transparent 68%);pointer-events:none} .blf-newsletter__copy,.blf-newsletter__form{position:relative;z-index:1} .blf-newsletter__badge{display:inline-flex;align-items:center;gap:8px;background:var(--bl-orange);color:#fff;font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:14px;box-shadow:0 6px 16px rgba(232,85,13,.35)} .blf-newsletter__title{color:#fff;font-size:1.7rem;margin:0 0 .35em} .blf-newsletter__lead{color:#d6e2f1;margin:0;max-width:46ch} .blf-newsletter__form{margin:0} .blf-newsletter__row{display:flex;gap:10px} .blf-newsletter__field{flex:1 1 auto;min-width:0} .blf-newsletter__field input{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.25);background:#fff;border-radius:var(--bl-radius);padding:14px 16px;font-size:1rem;color:var(--bl-ink)} .blf-newsletter__field input::placeholder{color:#8a97a8} .blf-newsletter__field input:focus{outline:2px solid var(--bl-orange);outline-offset:1px} .blf-newsletter__btn{flex:none;white-space:nowrap;padding-inline:24px} .blf-newsletter__consent{display:flex;gap:8px;align-items:flex-start;margin-top:12px;color:#bccbe0;font-size:.8rem;line-height:1.45;cursor:pointer} .blf-newsletter__consent input{margin-top:3px;flex:none;accent-color:var(--bl-orange)} .blf-newsletter__consent a{color:#fff;text-decoration:underline} .blf-newsletter__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .blf-newsletter__status{margin:12px 0 0;font-size:.9rem;min-height:1.2em;color:#fff} .blf-newsletter__status.is-error{color:#ffd5c2} .blf-newsletter__status.is-success{color:#bff5d3;font-weight:600} .blf-newsletter.is-done .blf-newsletter__row,.blf-newsletter.is-done .blf-newsletter__consent{display:none} /* USP strip — no separate background, just spacing + check badges */ .blf-footer__usps{border-bottom:1px solid rgba(255,255,255,.07)} .blf-footer__usps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:30px} .blf-usp{display:flex;gap:12px;align-items:flex-start} .blf-usp__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(232,85,13,.14);border:1px solid rgba(232,85,13,.4);color:var(--bl-orange)} .blf-usp__title{display:block;color:#fff;font-size:.92rem;font-weight:600} .blf-usp__note{display:block;color:#90a4c2;font-size:.8rem;margin-top:1px} /* Main columns */ .blf-footer__main{display:grid;grid-template-columns:1.4fr 2fr;gap:32px;padding-block:48px} .blf-footer__tagline{color:#90a4c2;max-width:40ch;margin:.6em 0 0} .blf-footer__links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px} .blf-footer__links a{color:#c2d0e4;transition:color .15s ease} .blf-footer__links a:hover{color:#fff} /* Bottom bar */ .blf-footer__bottom{border-top:1px solid rgba(255,255,255,.07)} .blf-footer__bottom-inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px} .blf-copyright{margin:0;color:#8499b8;font-size:.85rem} .blf-footer__legal{display:flex;gap:18px;flex-wrap:wrap} .blf-footer__legal a{color:#8499b8;font-size:.85rem;transition:color .15s ease} .blf-footer__legal a:hover{color:#fff} /* ---- Generic content / Woo -------------------------------------------- */ .blf-main{padding-block:40px} .blf-shop{padding-block:40px} .woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0} .woocommerce ul.products li.product{margin:0;width:auto;text-align:left} /* ---- Responsive ------------------------------------------------------- */ /* Tablet landscape / small laptop */ @media(max-width:1080px){ .blf-grid--5{grid-template-columns:repeat(3,1fr)} .blf-process__steps{grid-template-columns:repeat(3,1fr)} .blf-benefits__grid{grid-template-columns:repeat(3,1fr);row-gap:18px} .woocommerce ul.products{grid-template-columns:repeat(3,1fr)} } /* Tablet portrait — collapse nav to the toggle + stack hero/process */ @media(max-width:900px){ .blf-header__cta{display:none} /* Higher specificity so it beats the later base `.blf-nav-toggle{display:none}` rule. */ .blf-header .blf-nav-toggle{display:flex;order:-1} /* Mobile bar = menu + logo + search + cart only; the rest moves into the menu. */ .blf-header__bar{gap:12px} .blf-header__actions{gap:6px} .blf-header__actions .bl-tax-switch-container, .blf-header__actions .blf-iconbtn--count, .blf-header__actions .blf-iconbtn--account{display:none} /* Slide-in drawer from the right + backdrop. */ .blf-nav{display:block;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(380px,86vw);height:100%;max-height:none;overflow:auto;background:#fff;transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);box-shadow:-14px 0 44px rgba(11,44,90,.20);z-index:120;padding:18px 14px 28px;-webkit-overflow-scrolling:touch} .blf-nav.is-open{transform:translateX(0)} .blf-nav-overlay{position:fixed;inset:0;background:rgba(11,44,90,.45);opacity:0;visibility:hidden;transition:opacity .28s ease;z-index:110} .blf-nav-overlay.is-on{opacity:1;visibility:visible} body.blf-nav-lock{overflow:hidden} /* The sticky header (z-index:100) is its own stacking context, which traps the drawer below it; the body-level overlay (z-index:110) would otherwise paint over the drawer — making it look dark and swallowing every tap. While the drawer is open, lift the whole header above the overlay so the drawer (and its close toggle) sit on top of the backdrop and stay interactive. */ body.blf-nav-lock .blf-header{z-index:130} .blf-header .blf-nav-toggle{z-index:130} /* Secondary actions block inside the menu */ .blf-nav__extra{display:flex;flex-direction:column;gap:2px;padding:10px 8px 14px;border-top:1px solid var(--bl-line);margin-top:10px} .blf-nav__extra .bl-tax-switch-container{padding:8px 12px;margin-bottom:6px} .blf-nav__extra-link{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;color:var(--bl-navy);font-weight:600;font-size:.95rem} .blf-nav__extra-link:hover{background:var(--bl-soft);text-decoration:none} .blf-nav__extra-link svg{color:var(--bl-blue);flex:none} .blf-nav__extra-link .blf-act-count{position:static;box-shadow:none;margin-left:auto} .blf-nav__extra-link .blf-act-count[data-count="0"]{display:none} .blf-nav__extra-cta{justify-content:center;margin-top:10px} /* Drawer list. The legacy WP-nav-walker submenus keep their accordion; the mega menu below uses its own drill-down instead. */ .blf-menu{flex-direction:column;gap:0;padding:2px 0} .blf-menu > li{position:static} .blf-menu > li > a,.blf-menu__top{padding:13px 10px;justify-content:flex-start;border-radius:8px;font-size:1rem} .blf-menu > li > a .blf-caret,.blf-menu__top .blf-caret{margin-left:auto;width:14px;height:14px;transition:transform .25s} .blf-menu > li.is-acc-open > a .blf-caret,.blf-menu > li.is-acc-open .blf-caret{transform:rotate(180deg)} .blf-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;box-shadow:none;border:0;border-radius:0;background:none;transition:max-height .3s ease;display:block!important;min-width:0;z-index:auto;border-left:2px solid var(--bl-line);margin:0 0 4px 12px;padding-left:12px} .blf-menu > li.is-acc-open > .sub-menu, .blf-menu > li.is-acc-open .sub-menu{max-height:3000px} .blf-hero__inner{grid-template-columns:1fr;padding-block:44px} .blf-hero__media{order:-1} .blf-process__inner{grid-template-columns:1fr} } /* Large phone */ @media(max-width:640px){ .blf-grid--5{grid-template-columns:repeat(2,1fr)} .blf-process__steps{grid-template-columns:repeat(2,1fr)} .blf-benefits__grid{grid-template-columns:repeat(2,1fr)} .blf-newsletter__inner{grid-template-columns:1fr;gap:24px;padding:28px 24px} .blf-newsletter__title{font-size:1.45rem} .blf-newsletter__row{flex-direction:column} .blf-newsletter__btn{width:100%} .blf-footer__usps-grid{grid-template-columns:repeat(2,1fr)} .blf-footer__main{grid-template-columns:1fr} .blf-footer__links{grid-template-columns:repeat(2,1fr)} .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} .blf-section{padding-block:40px} .blf-hero__actions .blf-btn{flex:1 1 auto;justify-content:center} .blf-hero--bg{aspect-ratio:4/3;min-height:auto;background-position:right center} .blf-hero--bg::before{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8))} } /* Small phone */ @media(max-width:460px){ .blf-benefits__grid{grid-template-columns:1fr} .blf-process__steps{grid-template-columns:1fr} .blf-footer__bottom-inner{flex-direction:column;align-items:flex-start} .blf-header__bar{gap:8px} .blf-logo{font-size:1.2rem} .blf-iconbtn{width:40px;height:40px} } /* ========================================================================== Single product (PDP) — custom Bestlab layout ========================================================================== */ .blf-muted{color:var(--bl-muted)} .blf-btn--block{display:flex;width:100%;justify-content:center} .blf-btn--lg{padding:.95em 1.4em;font-size:1rem} .blf-btn--outline{background:#fff;color:var(--bl-navy);border-color:var(--bl-line)} .blf-btn--outline:hover{border-color:var(--bl-blue);color:var(--bl-blue)} .blf-grid--4{grid-template-columns:repeat(4,1fr)} /* ---- Page chrome ------------------------------------------------------- */ .single-product .blf-product{background:#fff} .blf-pdp__head{padding-top:18px} /* ---- Breadcrumb ------------------------------------------------------- */ .blf-breadcrumb{font-size:.82rem;color:var(--bl-muted);padding:6px 0 4px} .blf-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none} .blf-breadcrumb__item{display:flex;align-items:center;gap:6px} .blf-breadcrumb__item:not(:last-child)::after{content:"/";color:var(--bl-line);margin-left:6px} .blf-breadcrumb a{color:var(--bl-muted)} .blf-breadcrumb a:hover{color:var(--bl-blue)} .blf-breadcrumb [aria-current="page"]{color:var(--bl-navy);font-weight:600} /* ---- Top: gallery + summary ------------------------------------------- */ .blf-pdp__top{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-block:24px 8px;align-items:start} /* Positioning context for the product badge overlay (.blupo-badge-container). */ .blf-pdp__gallery{position:relative} /* Custom gallery */ .blf-gallery{position:relative;display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start} /* No thumbnails (single image / empty) → one full-width column so the featured image fills the stage instead of being squeezed into the 72px thumbnail track. */ .blf-gallery--empty,.blf-gallery--single,.blf-gallery:not(:has(.blf-gallery__thumbs)){grid-template-columns:1fr} /* Thumbs pulled out of grid flow so the strip is capped to the stage height (top/bottom:0) and scrolls when there are more images than fit, instead of running taller than the main image. */ .blf-gallery:has(.blf-gallery__thumbs) .blf-gallery__stage{grid-column:2} .blf-gallery__thumbs{position:absolute;top:0;bottom:0;left:0;width:72px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bl-line) transparent} .blf-gallery__thumbs::-webkit-scrollbar{width:5px} .blf-gallery__thumbs::-webkit-scrollbar-thumb{background:var(--bl-line);border-radius:4px} .blf-gallery__thumb{flex:0 0 auto;padding:0;background:var(--bl-soft);border:2px solid var(--bl-line);border-radius:10px;overflow:hidden;aspect-ratio:1/1;transition:border-color .15s} .blf-gallery__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .blf-gallery__thumb:hover{border-color:#c5d2e2} .blf-gallery__thumb.is-active{border-color:var(--bl-blue)} .blf-gallery__stage{position:relative;background:var(--bl-soft);border:1px solid var(--bl-line);border-radius:14px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .blf-gallery__main{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:24px} .blf-gallery__zoom{position:absolute;top:14px;right:14px;z-index:8;width:40px;height:40px;border-radius:50%;border:1px solid var(--bl-line);background:rgba(255,255,255,.9);color:var(--bl-navy);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} .blf-gallery__zoom:hover{background:var(--bl-blue);color:#fff;border-color:var(--bl-blue)} /* When a badge occupies the same top-right corner, hide the zoom button so it doesn't overlap the badge. The main image stays clickable/tappable to open the lightbox (main.js binds the zoom to the image itself), so the function is preserved. */ .blf-gallery__stage:has(.blb-corner--top-right) .blf-gallery__zoom{display:none} /* Prev/next navigation over the main stage. */ .blf-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--bl-line);background:rgba(255,255,255,.9);color:var(--bl-navy);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s} .blf-gallery__nav:hover{background:var(--bl-blue);color:#fff;border-color:var(--bl-blue)} .blf-gallery__nav--prev{left:12px} .blf-gallery__nav--next{right:12px} /* Felirat (caption) + Leírás (description) for the current image. */ .blf-gallery__caption{margin-top:14px;display:flex;flex-direction:column;gap:3px} .blf-gallery__cap{font-weight:600;color:var(--bl-navy);font-size:14px} .blf-gallery__desc{color:#5b6b80;font-size:13px;line-height:1.5} /* Lightbox (carousel) */ .blf-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,18,38,.88);display:flex;align-items:center;justify-content:center;padding:32px} .blf-lightbox img{max-width:92vw;max-height:70vh;object-fit:contain;border-radius:8px} .blf-lightbox__close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1} .blf-lightbox__close:hover{background:rgba(255,255,255,.28)} .blf-lightbox__figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:92vw} .blf-lightbox__cap{display:flex;flex-direction:column;gap:4px;text-align:center;color:#fff;max-width:680px} .blf-lightbox__caption{font-weight:600;font-size:15px} .blf-lightbox__desc{font-size:13px;line-height:1.5;color:rgba(255,255,255,.82)} .blf-lightbox__count{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px} .blf-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s} .blf-lightbox__nav:hover{background:rgba(255,255,255,.28)} .blf-lightbox__prev{left:18px} .blf-lightbox__next{right:18px} /* Summary */ /* The element also carries WooCommerce's `summary entry-summary` classes, whose default stylesheet forces `float:right;width:48%` — which shrinks it inside the grid track. Override so it fills its column. */ .blf-pdp__summary{min-width:0;width:auto!important;float:none!important} .blf-pdp__eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:700;color:var(--bl-orange);margin:0 0 8px} .blf-pdp__title{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin:0 0 14px;color:var(--bl-navy)} .blf-rating{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--bl-muted);font-size:.9rem} .blf-rating:hover{text-decoration:none} .blf-rating__stars{display:inline-flex;gap:2px;color:var(--bl-orange)} .blf-star{display:block} .blf-rating__value{font-weight:700;color:var(--bl-navy)} .blf-pdp__excerpt{color:var(--bl-muted);font-size:1rem;margin-bottom:20px} .blf-pdp__excerpt p{margin:0 0 .6em} .blf-pdp__meta{display:flex;gap:48px;padding:18px 0;border-top:1px solid var(--bl-line);border-bottom:1px solid var(--bl-line);margin-bottom:20px} .blf-pdp__meta-item{display:flex;flex-direction:column;gap:3px} .blf-pdp__meta-label{font-size:.78rem;color:var(--bl-muted)} .blf-pdp__meta-value{font-weight:700;color:var(--bl-navy);font-size:.95rem} a.blf-pdp__brand{color:var(--bl-blue);text-decoration:none} a.blf-pdp__brand:hover{color:var(--bl-navy);text-decoration:underline} .blf-stock{display:inline-flex;align-items:center;gap:7px;font-weight:700} .blf-stock__dot{width:9px;height:9px;border-radius:50%;background:#16a34a} .blf-stock.is-in{color:#16a34a} .blf-stock.is-out{color:#9ca3af} .blf-stock.is-out .blf-stock__dot{background:#9ca3af} .blf-pdp__price{display:flex;align-items:baseline;gap:12px} .blf-pdp__price-amount{font-size:2rem;font-weight:800;color:var(--bl-navy)} .blf-pdp__price-amount .amount,.blf-pdp__price-amount bdi{color:var(--bl-navy)} .blf-pdp__price-amount del{color:var(--bl-muted);font-weight:600;font-size:1.2rem;opacity:.7} .blf-pdp__price-note{font-size:.85rem;color:var(--bl-muted)} /* nettó / bruttó suffix inline next to the price (the suite ships it on a new line). */ .blf-pdp__price-amount br{display:none} .blf-pdp__price-amount .bl-price-suffix{display:inline;margin-left:.4em;font-size:.5em;font-weight:700;color:var(--bl-muted);text-transform:uppercase;letter-spacing:.04em;vertical-align:middle} /* Purchase area */ .blf-pdp__buy{display:flex;flex-direction:column;gap:12px} .blf-pdp__buy .blf-cart{margin:0;display:flex;flex-direction:column;gap:12px} .blf-buyrow{display:flex;gap:12px;align-items:stretch} .blf-qty{display:inline-flex;align-items:center;border:1px solid var(--bl-line);border-radius:8px;overflow:hidden;background:#fff} .blf-qty__btn{width:42px;align-self:stretch;border:0;background:#fff;color:var(--bl-navy);font-size:1.2rem;line-height:1} .blf-qty__btn:hover{background:var(--bl-soft)} .blf-qty .quantity{margin:0} .blf-qty input.qty{width:54px;height:46px;border:0;border-left:1px solid var(--bl-line);border-right:1px solid var(--bl-line);text-align:center;font-weight:700;color:var(--bl-navy);-moz-appearance:textfield} .blf-qty input.qty::-webkit-outer-spin-button,.blf-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .blf-buyrow .single_add_to_cart_button{flex:1} .blf-pdp__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px} .blf-pdp__actions--single{grid-template-columns:1fr} /* ---- Option-engine purchase area (BLUPO) — themed to match Bestlab Fast ---- Scoped under .blf-pdp__buy so these win over the plugin's own single-class rules without needing !important (except where the plugin forces a value). */ .blf-pdp__buy .blupo-unified-container{display:flex;flex-direction:column;gap:14px} /* Simple products ship an empty options block — collapse it so it doesn't leave a big gap at the top of the card. */ .blf-pdp__buy .blupo-options-section{margin:0} .blf-pdp__buy .blupo-unified-container[data-product-type="simple"] .blupo-options-section{display:none} .blf-pdp__buy .blupo-default-options{margin:0;padding:0} /* Total price — a compact highlighted summary row. */ .blf-pdp__buy .blupo-total-price-section{margin:0} .blf-pdp__buy .blupo-price-display{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--bl-soft);border:1px solid var(--bl-line);border-radius:12px} .blf-pdp__buy .blupo-price-label{margin:0;color:var(--bl-muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .blf-pdp__buy .blupo-price-amount{color:var(--bl-navy)!important;font-size:1.55rem;font-weight:800;line-height:1.1;white-space:nowrap} .blf-pdp__buy .blupo-price-amount .woocommerce-Price-currencySymbol{font-size:1rem;font-weight:600} /* Quantity stepper + add-to-cart on one practical, responsive row. */ .blf-pdp__buy .blupo-actions-section{margin:0;display:flex;flex-direction:column;gap:10px} .blf-pdp__buy .blupo-quantity-selector{display:flex;align-items:stretch;flex-wrap:wrap;gap:0} .blf-pdp__buy .blupo-qty-btn{flex:0 0 auto;width:46px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bl-line);background:#fff;color:var(--bl-navy);font-size:1.35rem;line-height:1;cursor:pointer;transition:background .15s,color .15s} .blf-pdp__buy .blupo-qty-btn:hover{background:var(--bl-soft);color:var(--bl-blue)} .blf-pdp__buy .blupo-qty-minus{border-radius:10px 0 0 10px} .blf-pdp__buy .blupo-qty-plus{border-radius:0 10px 10px 0} .blf-pdp__buy .blupo-qty-input{flex:0 0 auto;width:54px;height:52px;text-align:center;border:1px solid var(--bl-line);border-left:0;border-right:0;background:#fff;color:var(--bl-navy);font-weight:700;font-size:1rem;margin:0;-moz-appearance:textfield} .blf-pdp__buy .blupo-qty-input::-webkit-outer-spin-button,.blf-pdp__buy .blupo-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .blf-pdp__buy .blupo-add-to-cart-button{flex:1 1 200px;margin-left:12px;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 24px;background:var(--bl-orange)!important;border:0!important;border-radius:10px!important;color:#fff!important;font-weight:700!important;font-size:1rem!important;line-height:1;cursor:pointer;box-shadow:none!important;transition:background .15s} .blf-pdp__buy .blupo-add-to-cart-button:hover{background:var(--bl-orange-d)!important} .blf-pdp__buy .blupo-add-to-cart-button .blupo-btn-icon{display:inline-flex;align-items:center} /* Stack the button under the stepper on very narrow summary columns. */ @media (max-width:560px){ .blf-pdp__buy .blupo-add-to-cart-button{flex-basis:100%;margin-left:0;margin-top:12px} } /* Native (no-option-engine) add-to-cart button keeps the same look. */ .single-product .single_add_to_cart_button{background:var(--bl-orange)!important;border:0!important;border-radius:8px!important;font-weight:600!important;color:#fff!important} .single-product .single_add_to_cart_button:hover{background:var(--bl-orange-d)!important} /* Variable PDP: use WooCommerce's own in-form quantity + add-to-cart (always present, plugin-version-independent). The option engine hides them and renders its own price/cart row — but that row's button sits outside the (now un-nested) variations_form, so it can't submit, and on variable products the engine omits its quantity stepper entirely. So we hide the engine's price/cart row and the redundant total box, then REVEAL + restyle the native controls. The single price shown in .blf-pdp__price is driven by main.js (range → variation price). */ .blf-pdp__buy .blupo-price-cart-row, .blf-pdp__buy .blupo-total-price-section{display:none!important} .blf-pdp__buy form.variations_form .woocommerce-variation-price{display:none!important} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart{display:flex!important;flex-wrap:wrap;align-items:stretch;gap:0;margin:0} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .quantity{display:flex!important;align-items:stretch;gap:0} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .qty{width:54px;height:52px;text-align:center;border:1px solid var(--bl-line);border-left:0;border-right:0;background:#fff;color:var(--bl-navy);font-weight:700;font-size:1rem;margin:0;-moz-appearance:textfield} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .qty::-webkit-outer-spin-button, .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .blf-pdp__buy form.variations_form .blf-qty__btn{flex:0 0 auto;width:46px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bl-line);background:#fff;color:var(--bl-navy);font-size:1.35rem;line-height:1;cursor:pointer;transition:background .15s,color .15s} .blf-pdp__buy form.variations_form .blf-qty__btn:hover{background:var(--bl-soft);color:var(--bl-blue)} .blf-pdp__buy form.variations_form .blf-qty__btn[data-step="-1"]{border-radius:10px 0 0 10px} .blf-pdp__buy form.variations_form .blf-qty__btn[data-step="1"]{border-radius:0 10px 10px 0} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button{display:inline-flex!important;flex:1 1 200px;margin-left:12px;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:0 24px;background:var(--bl-orange)!important;border:0!important;border-radius:10px!important;color:#fff!important;font-weight:700!important;font-size:1rem!important;line-height:1;cursor:pointer;box-shadow:none!important;transition:background .15s} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover{background:var(--bl-orange-d)!important} .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled, .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button:disabled{opacity:.5;cursor:not-allowed} @media (max-width:560px){ .blf-pdp__buy form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex-basis:100%;margin-left:0;margin-top:12px} } /* Variation selector: swatches only — drop the native