/* Billy, the Bestlab helper (inc/billy.php). The figures are PNGs on a white
   ground: `multiply` drops the ground into the light panel behind them. */

.blf-billy{
	--blf-billy-bg:#EEF4FB;
	--blf-billy-h:150px;
	/* The panel hugs its copy and figure instead of stretching across the
	   page — a full-width row left Billy stranded at the far edge. */
	display:flex;align-items:center;gap:48px;
	width:fit-content;max-width:100%;box-sizing:border-box;
	padding:20px 32px;border-radius:var(--bl-radius);
	background:var(--blf-billy-bg);
	isolation:isolate;
}
.blf-billy__copy{flex:1 1 auto;min-width:0}
.blf-billy__title{margin:0 0 6px;font-size:1.3rem;color:var(--bl-navy)}
.blf-billy__text{margin:0 0 14px;color:var(--bl-ink);font-size:.95rem;max-width:52ch}
.blf-billy__text:last-child{margin-bottom:0}
.blf-billy__fig{flex:0 0 auto;line-height:0}
.blf-billy__img{display:block;height:var(--blf-billy-h);width:auto;mix-blend-mode:multiply}

/* Category grid: one whole row of the product grid. */
.blf-billy--grid{grid-column:1/-1;justify-self:start;margin:4px 0;border:1px solid #DCE6F3}
.blf-products.is-list .blf-billy--grid{margin:0}
/* Three or more columns (billy.js): two columns wide, the next cards beside
   it; full row height, copy on top and Billy in the lower corner. */
.blf-billy--grid.blf-billy--span{
	--blf-billy-h:190px;
	grid-column:span 2;justify-self:stretch;width:auto;margin:0;
	align-items:center;justify-content:space-between;gap:20px;
	padding:28px;
}
.blf-billy--span .blf-billy__title{font-size:1.55rem;margin-bottom:10px}
.blf-billy--span .blf-billy__text{font-size:1rem;margin-bottom:16px}
.blf-billy--span .blf-billy__fig{align-self:flex-end}
/* A narrow two-column panel (small desktop): no room beside the copy, so
   Billy shrinks into the bottom corner, level with the button. */
.blf-billy--grid.blf-billy--span{container-type:inline-size;position:relative}
@container (max-width:460px){
	.blf-billy--span .blf-billy__fig{position:absolute;right:18px;bottom:18px}
	.blf-billy--span .blf-billy__img{height:118px}
	.blf-billy--span .blf-billy__title{font-size:1.3rem}
	.blf-billy--span .blf-billy__text{font-size:.92rem}
	.blf-billy--span .blf-billy__list{font-size:.86rem;gap:8px}
}
/* The „how we help” points: only in the two-column panel. */
.blf-billy__list{display:none}
.blf-billy--span .blf-billy__list{display:grid;gap:10px;list-style:none;margin:0 0 22px;padding:0;font-size:.92rem;color:var(--bl-ink)}
.blf-billy--span .blf-billy__list li{position:relative;padding-left:26px;line-height:1.45}
.blf-billy--span .blf-billy__list li::before{
	content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
	background:var(--bl-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Product page: after the tabs, before „Önnek ajánljuk”. */
.blf-billy-section{padding:8px 0 28px}
.blf-billy--pdp{--blf-billy-h:170px;padding:22px 32px}
.blf-billy--pdp .blf-billy__title{font-size:1.45rem}

/* Szállítás és áruátvétel: the intro block on top of the page content. */
.blf-billy--intro{margin:0 0 28px}
.blf-billy--intro .blf-billy__title{font-size:1.5rem}

@media(max-width:640px){
	.blf-billy{--blf-billy-h:84px;width:auto;padding:16px;gap:12px}
	.blf-billy--pdp{--blf-billy-h:88px;padding:16px}
	.blf-billy__title,.blf-billy--pdp .blf-billy__title,.blf-billy--intro .blf-billy__title{font-size:1.1rem}
	.blf-billy__text{font-size:.88rem;margin-bottom:12px}
	.blf-billy .blf-btn{width:100%;justify-content:center}
	.blf-billy--intro{--blf-billy-h:100px}
}

/* ---- Céges ajánlatkérés (template-ceges-ajanlatkeres.php) ---------------- */

.blf-b2bq{padding-bottom:48px}
.blf-b2bq__head{margin:10px 0 24px;max-width:760px}
.blf-b2bq__title{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 8px}
.blf-b2bq__lead,.blf-b2bq__lead p{color:var(--bl-muted);font-size:1.02rem;margin:0}
.blf-b2bq__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:start}
.blf-b2bq__form{background:#fff;border:1px solid var(--bl-line);border-radius:var(--bl-radius);padding:24px;box-shadow:var(--bl-shadow)}
.blf-b2bq__form .blf-msg-form__fields{grid-template-columns:1fr}
.blf-b2bq__form .blf-msg-form__foot .blf-btn{width:100%;justify-content:center;padding-block:.85em}
.blf-b2bq__help{
	--blf-billy-bg:#EEF4FB;
	display:flex;flex-direction:column;
	background:var(--blf-billy-bg);border-radius:var(--bl-radius);padding:24px;isolation:isolate;
}
.blf-b2bq__help-title{font-size:1.25rem;margin:0 0 16px}
.blf-b2bq__tips{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.blf-b2bq__tip{display:flex;gap:12px;align-items:flex-start}
.blf-b2bq__tip strong{display:block;color:var(--bl-navy);font-size:.95rem}
.blf-b2bq__tip-icon{flex:0 0 auto;color:var(--bl-navy);margin-top:2px}
.blf-b2bq__tip-text{display:block;color:var(--bl-muted);font-size:.88rem;line-height:1.45;margin-top:2px}
/* The panel keeps its own height (not the form's) and stays in view
   below the sticky header while the form is filled in. */
.blf-b2bq__help{position:sticky;top:150px}
.blf-b2bq__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:20px}
.blf-b2bq__direct{margin:0 0 8px;font-size:.9rem;color:var(--bl-muted);line-height:1.5}
.blf-b2bq__direct a{display:flex;align-items:center;gap:7px;margin-top:6px;font-weight:600;color:var(--bl-blue)}
.blf-b2bq__direct svg{width:16px;height:16px;flex:0 0 auto}
.blf-b2bq__help .blf-billy__img{height:180px}

@media(max-width:900px){
	.blf-b2bq__grid{grid-template-columns:1fr}
	.blf-b2bq__help{position:static}
	.blf-b2bq__help .blf-billy__img{height:120px}
}
@media(max-width:520px){
	.blf-b2bq__form,.blf-b2bq__help{padding:18px 16px}
	.blf-b2bq__help .blf-billy__img{height:88px}
}