/**
 * bdp.css — pagina Model (design-pagina-model.md): hero, bara de pret,
 * randuri de componenta comutator, grila costumase, personalizare, bara CTA
 * sticky pe mobil, continut editorial. Plus stilizarea (nemodificata ca
 * limbaj vizual) a funnel-ului homepage.
 *
 * Foloseste variabile CSS native WoodMart (--wd-*, --btn-*, --color-*,
 * --bgcolor-*, --brdcolor-*) FARA fallback pe var() (design-pagina-model.md
 * sec.6 pct.4) — un fallback ar deveni dead code care se dezaliniaza
 * silentios de Theme Options.
 *
 * VERIFICAT LIVE (WoodMart 8.5.7): `--wd-gap`, `--wd-gap-sm`, `--wd-gap-lg`,
 * `--wd-prod-gap`, `--wd-trans-main` si `--color-error` NU sunt definite
 * niciodata pe `:root`. Primele trei exista doar ca atribute `style` inline
 * pe elementele native `.wd-grid-*` ale temei (generate per-instanta de
 * grid din Theme Options), inaccesibile de aici; celelalte nu au deloc
 * echivalent livrat de tema pe frontend. Conform regulii "ce nu are
 * echivalent in tema se defineste local" (design-pagina-model.md sec.2),
 * aceste cazuri au token propriu pe `.bdp-model`, NU fallback
 * `var(--wd-x, valoare)` inline repetat.
 *
 * Dark mode e gratuit pentru tot ce CITESTE `var(--wd-*)`: variabilele
 * WoodMart se flip-uiesc automat, nu se scrie niciun
 * `@media (prefers-color-scheme: dark)` propriu (design.md sec.4.5).
 *
 * Audit butoane (design.md sec.6 pct.2): WoodMart reseteaza global
 * `position: relative; display: inline-flex` si stiluri de fundal/radius pe
 * orice `<button>`/`.button`/`[type=submit]` (regula `:is()` din
 * base.css, aceeasi specificitate ca clasele proprii - castiga la ordinea
 * de incarcare, base.css se incarca DUPA bdp.css). Fiecare element propriu
 * randat ca `<button>` sau `<label>` cu radio nativ e izolat explicit cu
 * `!important` pe layout SI pe vizual (background/border-radius/color),
 * verificat live cu `getComputedStyle()` pe staging, nu presupus.
 */

/* ---------------------------------------------------------------------- */
/* Page-level template override (single-bdp-model.php)                     */
/* Elimina chrome-ul de blog (author, date, sidebar) si ofera full-width.  */
/* ---------------------------------------------------------------------- */

.bdp-single-model-page {
	max-width: 100% !important;
	padding: 0 !important;
}

.bdp-model-article {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* Ascunde explicit elementele de blog care WoodMart le injecteaza prin
   hook-uri pe orice tip de continut (chiar si cu template propriu,
   unele hook-uri persista pe `the_content`). */
.bdp-model-article .wd-single-footer,
.bdp-model-article .blog-single-post-navigation,
.bdp-model-article .related-posts-slider,
.bdp-model-article .wd-post-author-area,
.bdp-model-article .post-categories-list,
.bdp-model-article .entry-meta {
	display: none !important;
}

/* ---------------------------------------------------------------------- */
/* Tokens (design.md sec.2)                                                */
/* ---------------------------------------------------------------------- */

.bdp-model {
	/* Culori si tipografie - direct din WoodMart, fara fallback. */
	--bdp-ink: var( --wd-text-color );
	--bdp-line: var( --brdcolor-gray-300 );
	--bdp-surface: var( --bgcolor-white );
	--bdp-paper: var( --bgcolor-gray-100 );
	--bdp-accent: var( --wd-primary-color );
	--bdp-radius: var( --wd-brd-radius );
	--bdp-font: var( --wd-text-font );
	--bdp-font-title: var( --wd-title-font );

	/*
	 * Tokens FARA echivalent WoodMart pe :root (verificat live, vezi
	 * antetul fisierului) - valori proprii, nu fallback var(--wd-x, ...).
	 */
	--bdp-ink-2: rgba( 0, 0, 0, 0.55 );
	--bdp-ink-3: rgba( 0, 0, 0, 0.38 );
	--bdp-accent-bg: rgba( 73, 51, 209, 0.09 ); /* aprox 9% din --wd-primary-color, calculat static (fara color-mix, suport mai larg) */
	--bdp-radius-lg: calc( var( --bdp-radius ) + 10px );
	--bdp-gap: 18px;
	--bdp-gap-sm: 11px;
	--bdp-trans: 0.2s ease;

	display: block;
	color: var( --bdp-ink );
	font-family: var( --bdp-font );
}

/* Scala de spatiere (design.md sec.2): 4/8/11/14/18/24/34px - se refera direct
   la aceste valori in reguli, fara a introduce variabile suplimentare pentru
   fiecare treapta (ar fi peste bugetul de CSS propriu, design.md sec.7). */

/* prefers-reduced-motion: dezactiveaza toate tranzitiile/animatiile proprii
   (design.md sec.8) - bump pret, crossfade hero, deschidere grila costumase. */
@media ( prefers-reduced-motion: reduce ) {
	.bdp-model,
	.bdp-model * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Hero (design.md sec.4.2)                                                */
/* ---------------------------------------------------------------------- */

.bdp-model__hero {
	margin: 0 0 var( --bdp-gap ) 0;
}

.bdp-model__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var( --bdp-radius-lg );
	background: var( --bdp-paper );
}

.bdp-model__frame .bdp-model__hero-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block !important;
	margin: 0 !important;
	transition: opacity 0.18s ease;
}

.bdp-model__pill {
	position: absolute !important;
	left: 14px;
	bottom: 14px;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 8px );
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12px;
	font-weight: 600;
	color: var( --wd-title-color );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.12 );
}

.bdp-model__pill i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --bdp-accent );
	display: block;
}

.bdp-model__dots {
	position: absolute !important;
	right: 14px;
	bottom: 18px;
	display: flex !important;
	gap: 5px;
}

.bdp-model__dots b {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.55 );
	display: block;
	transition: width var( --bdp-trans );
}

.bdp-model__dots b.is-on {
	background: #fff;
	width: 15px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------------- */
/* Gallery thumbnails strip                                                */
/* ---------------------------------------------------------------------- */

.bdp-model__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 2px;
}

.bdp-model__thumbs::-webkit-scrollbar {
	display: none;
}

.bdp-model__thumb {
	position: relative !important;
	display: block !important;
	flex: none;
	width: 56px !important;
	height: 56px !important;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	overflow: hidden;
	cursor: pointer;
	background: var( --bdp-paper ) !important;
	transition: border-color 0.16s;
}

.bdp-model__thumb.is-active {
	border-color: var( --bdp-accent ) !important;
}

.bdp-model__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------- */
/* Lightbox                                                                */
/* ---------------------------------------------------------------------- */

.bdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bdp-lightbox[aria-hidden="false"] {
	pointer-events: auto;
	opacity: 1;
}

.bdp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	cursor: pointer;
}

.bdp-lightbox__content {
	position: relative;
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bdp-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 8px;
	display: block;
}

.bdp-lightbox__close {
	position: absolute !important;
	top: -40px;
	right: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.15 ) !important;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
}

.bdp-lightbox__prev,
.bdp-lightbox__next {
	position: absolute !important;
	top: 50%;
	transform: translateY( -50% );
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.15 ) !important;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	backdrop-filter: blur( 4px );
}

.bdp-lightbox__prev { left: -56px; }
.bdp-lightbox__next { right: -56px; }

@media ( max-width: 767px ) {
	.bdp-lightbox__prev { left: 8px; }
	.bdp-lightbox__next { right: 8px; }
	.bdp-lightbox__close { top: 8px; right: 8px; }
}

/* ---------------------------------------------------------------------- */
/* Sheet / identitate model                                                */
/* ---------------------------------------------------------------------- */

.bdp-model__sheet {
	padding: 0 0 var( --bdp-gap ) 0;
}

.bdp-model__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --bdp-ink-3 );
	margin: 0 0 7px 0;
}

.bdp-model__name {
	font-family: var( --bdp-font-title );
	font-weight: 300;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0 0 8px 0;
	color: var( --wd-title-color );
}

.bdp-model__tagline {
	color: var( --bdp-ink-2 );
	font-size: 14px;
	margin: 0 0 20px 0;
	max-width: 44ch;
}

/* ---------------------------------------------------------------------- */
/* Bara de pret (design.md sec.4.3)                                        */
/* ---------------------------------------------------------------------- */

.bdp-model__pricebar {
	display: flex;
	align-items: flex-end;
	gap: 11px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var( --bdp-line );
}

.bdp-model__price-big {
	font-family: var( --bdp-font-title );
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var( --wd-title-color );
	transition: transform 0.18s cubic-bezier( 0.2, 0.8, 0.3, 1.2 );
	display: inline-block;
}

.bdp-model__price-big.is-bump,
.bdp-model__cta-total b.is-bump {
	/* Al doilea selector tinteste `data-bdp-price-big-2` (bara CTA/totalul
	   de pe desktop) - bdp-model.js adauga `.is-bump` pe AMBELE elemente de
	   pret la orice schimbare de total (design.md sec.4.3), nu doar pe cel
	   din bara de pret principala. */
	transition: transform 0.18s cubic-bezier( 0.2, 0.8, 0.3, 1.2 );
	transform: scale( 1.06 );
}

.bdp-model__price-was {
	color: var( --bdp-ink-3 );
	font-size: 14px;
}

.bdp-model__save {
	margin-left: auto;
	background: var( --bdp-accent-bg );
	color: var( --bdp-accent );
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.bdp-model__price-context {
	font-size: 12.5px;
	color: var( --bdp-ink-2 );
	margin: 8px 0 0 0;
}

/* ---------------------------------------------------------------------- */
/* Randuri de componenta (design.md sec.4.4)                               */
/* ---------------------------------------------------------------------- */

.bdp-model__rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 18px 0 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.bdp-model__rows-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 11px 0;
}

.bdp-model__rows-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --wd-title-color );
}

.bdp-model__rows-count {
	font-size: 12px;
	color: var( --bdp-ink-3 );
}

.bdp-row {
	/* Elementul e <label> (radio nativ inauntru) sau <span aria-disabled>
	   pentru starile indisponibile - ambele au geometria proprie fortata cu
	   !important, conform design.md sec.6 pct.2. */
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 13px;
	width: 100%;
	min-height: 64px !important;
	padding: 11px 13px !important;
	background: var( --bdp-surface );
	border: 1px solid var( --bdp-line );
	border-radius: var( --bdp-radius-lg );
	cursor: pointer;
	transition: border-color 0.16s, box-shadow 0.16s;
	box-shadow: none;
}

.bdp-row::before,
.bdp-row::after {
	content: none !important; /* tema poate injecta pseudo-elemente de iconite in label/button */
}

.bdp-row input[type="radio"] {
	position: absolute !important;
	opacity: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bdp-row:focus-within {
	outline: none;
}

/* Doar la navigare cu tastatura (focus-visible) arata conturul,
   nu la clic de mouse/touch care ar crea un efect de dubla bordura. */
.bdp-row:has( input:focus-visible ) {
	outline: 2px solid var( --bdp-accent );
	outline-offset: 2px;
}

.bdp-row--base {
	cursor: default;
	background: var( --bdp-paper );
}

/*
 * Stare "pornit" a randului-comutator - fallback CSS-only fara JS (Req 3.5,
 * design.md sec.5): `:has()` e sursa de adevar structurala, `.is-on` e
 * adaugata de bdp-model.js pentru browsere fara suport `:has()` si
 * reproduce EXACT aceeasi stare.
 *
 * Randul "lumanare" e scopat pe `.bdp-model__rows` (fieldset-ul intreg), NU
 * pe el insusi: conform tabelului din design.md sec.1, lumanarea trebuie sa
 * apara "pornita" si cand radio-ul bifat e `set_complet` (lumanarea e
 * inclusa implicit in setul complet), desi radio-ul PROPRIU al randului
 * "lumanare" (`trusou_lumanare`) nu e cel bifat in acel caz.
 *
 * Randul "costumas" e "pornit" doar cand radio-ul lui propriu (`set_complet`)
 * e bifat - coincide mereu exact, deci `:has(input:checked)` direct pe rand
 * e suficient si corect.
 */
.bdp-model__rows:has( input[value="trusou_lumanare"]:checked, input[value="set_complet"]:checked ) [data-bdp-toggle="lumanare"],
.bdp-model__rows [data-bdp-toggle="costumas"]:has( input:checked ),
.bdp-row--toggle.is-on {
	border-color: var( --bdp-accent ) !important;
	box-shadow: 0 0 0 1px var( --bdp-accent ), 0 6px 18px -12px rgba( 0, 0, 0, 0.5 ) !important;
}

/* Fallback explicit pentru browsere care ignora :has() in selector group
   (un selector invalid in un grup comma-separated invalideaza tot grupul
   in unele implementari). */
.bdp-row.bdp-row--toggle.is-on {
	border-color: var( --bdp-accent ) !important;
	box-shadow: 0 0 0 1.5px var( --bdp-accent ) !important;
}

.bdp-row--unavailable {
	opacity: 0.45;
	cursor: not-allowed;
}

.bdp-row__thumb {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 9px;
	background: var( --bdp-paper );
	overflow: hidden;
}

.bdp-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdp-row__text {
	flex: 1;
	min-width: 0;
}

.bdp-row__text b {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --wd-title-color );
}

.bdp-row__text small {
	display: block;
	font-size: 12.5px;
	color: var( --bdp-ink-2 );
	margin-top: 1px;
}

.bdp-row__price {
	flex: none;
	text-align: right;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --wd-title-color );
	white-space: nowrap;
}

.bdp-row__price small {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: var( --bdp-ink-3 );
}

.bdp-row--unavailable .bdp-row__price {
	font-size: 12px;
	font-weight: 500;
	white-space: normal;
	text-align: right;
	max-width: 110px;
}

/* Comutator (knob) - randul lumanare/costumas. */
.bdp-row__knob {
	width: 44px;
	height: 26px;
	flex: none;
	border-radius: 999px;
	background: #ded7d0;
	position: relative;
	transition: background var( --bdp-trans );
}

.bdp-row__knob::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.18s cubic-bezier( 0.2, 0.8, 0.3, 1.1 );
}

.bdp-model__rows:has( input[value="trusou_lumanare"]:checked, input[value="set_complet"]:checked ) [data-bdp-toggle="lumanare"] .bdp-row__knob,
.bdp-model__rows [data-bdp-toggle="costumas"]:has( input:checked ) .bdp-row__knob,
.bdp-row--toggle.is-on .bdp-row__knob {
	background: var( --bdp-accent );
}

.bdp-model__rows:has( input[value="trusou_lumanare"]:checked, input[value="set_complet"]:checked ) [data-bdp-toggle="lumanare"] .bdp-row__knob::after,
.bdp-model__rows [data-bdp-toggle="costumas"]:has( input:checked ) .bdp-row__knob::after,
.bdp-row--toggle.is-on .bdp-row__knob::after {
	transform: translateX( 18px );
}

/* Bifa verde - randul de baza (trusou), inclus mereu, fara comutator. */
.bdp-row__check {
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: #2f6b47;
	color: #fff;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* Grila costumase (design.md sec.4.5)                                     */
/* ---------------------------------------------------------------------- */

.bdp-model__cos-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s cubic-bezier( 0.2, 0.8, 0.3, 1 );
	margin-top: -9px; /* se aliniaza vizual sub randul costumas, in acelasi flex al .bdp-model__rows */
}

/*
 * Deschidere fara JS (Req 3.5, design.md sec.5: "grila de costumase e
 * vizibila neconditionat" - trebuie sa reactioneze la starea REALA a
 * radio-ului, nu doar la preselectia initiala a serverului). `[data-open]`
 * e pastrat ca fallback pentru browsere fara suport `:has()`: bdp-model.js
 * il sincronizeaza la fiecare schimbare; `:has()` e sursa de adevar
 * CSS-only care functioneaza si fara niciun JS (ex. clic nativ pe radio-ul
 * "set_complet" fara ca JS sa ruleze deloc).
 */
.bdp-model__rows:has( input[value="set_complet"]:checked ) .bdp-model__cos-wrap,
.bdp-model__cos-wrap[data-open] {
	grid-template-rows: 1fr;
}

.bdp-model__cos-wrap > div {
	overflow: hidden;
}

.bdp-costumas-selector {
	margin: 9px 0 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.bdp-costumas-selector__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 8px;
}

.bdp-costumas-selector__option {
	position: relative !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 44px !important;
	border: 1px solid var( --bdp-line );
	border-radius: 11px;
	background: var( --bdp-surface );
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.16s, box-shadow 0.16s;
}

.bdp-costumas-selector__option:has( input:checked ) {
	border-color: var( --bdp-accent );
	box-shadow: 0 0 0 1px var( --bdp-accent );
}

.bdp-costumas-selector__option:has( input:focus-visible ) {
	outline: 2px solid var( --bdp-accent );
	outline-offset: 2px;
}

.bdp-costumas-selector__option input[type="radio"] {
	position: absolute !important;
	opacity: 0;
	width: 1px !important;
	height: 1px !important;
}

.bdp-costumas-selector__tick {
	position: absolute !important;
	top: 6px;
	right: 6px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var( --bdp-accent );
	color: #fff;
	font-size: 10px;
	display: none !important;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.bdp-costumas-selector__option:has( input:checked ) .bdp-costumas-selector__tick {
	display: flex !important;
}

/* Browse selection card (dynamically inserted by JS) */
.bdp-costumas-selector__browse-pick {
	border-color: var( --bdp-accent ) !important;
	box-shadow: 0 0 0 1px var( --bdp-accent ) !important;
}

.bdp-costumas-selector__image {
	display: block;
	aspect-ratio: 1;
	background: var( --bdp-paper );
}

.bdp-costumas-selector__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdp-costumas-selector__meta {
	display: block;
	padding: 7px 8px 9px;
}

.bdp-costumas-selector__name {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --wd-title-color );
}

.bdp-costumas-selector__price {
	display: block;
	font-size: 11.5px;
	color: var( --bdp-ink-2 );
}

@media ( max-width: 359px ) {
	.bdp-costumas-selector__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ---------------------------------------------------------------------- */
/* Browse "+" button in costumas grid                                       */
/* ---------------------------------------------------------------------- */

.bdp-costumas-selector__browse {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 16px 8px !important;
	margin: 0 !important;
	border: 1px dashed var( --bdp-line ) !important;
	border-radius: 11px !important;
	background: var( --bdp-paper ) !important;
	cursor: pointer;
	transition: border-color 0.16s, background-color 0.16s;
	gap: 6px;
}

.bdp-costumas-selector__browse:hover {
	border-color: var( --bdp-accent ) !important;
	background: var( --bdp-surface ) !important;
}

.bdp-costumas-selector__browse-icon {
	font-size: 22px;
	font-weight: 300;
	color: var( --bdp-accent );
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --bdp-accent-bg );
}

.bdp-costumas-selector__browse-text {
	font-size: 11px;
	color: var( --bdp-ink-2 );
	font-weight: 500;
}

/* ---------------------------------------------------------------------- */
/* Browse sheet / modal (mobile: bottom sheet, desktop: centered modal)    */
/* ---------------------------------------------------------------------- */

.bdp-browse-sheet {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bdp-browse-sheet[aria-hidden="false"] {
	pointer-events: auto;
	opacity: 1;
}

.bdp-browse-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	cursor: pointer;
}

.bdp-browse-sheet__panel {
	position: relative;
	width: 100%;
	max-height: 85vh;
	background: var( --bdp-surface, #fff );
	border-radius: 20px 20px 0 0;
	display: flex;
	flex-direction: column;
	transform: translateY( 100% );
	transition: transform 0.3s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.bdp-browse-sheet[aria-hidden="false"] .bdp-browse-sheet__panel {
	transform: translateY( 0 );
}

.bdp-browse-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
	border-bottom: 1px solid var( --bdp-line, #eae4dd );
	flex: none;
}

.bdp-browse-sheet__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.bdp-browse-sheet__close {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var( --bdp-paper, #f7f7f7 ) !important;
	font-size: 22px;
	color: var( --bdp-ink, #1e1a18 );
	cursor: pointer;
}

.bdp-browse-sheet__body {
	overflow-y: auto;
	padding: 16px 20px 24px;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

.bdp-browse-sheet__loading {
	text-align: center;
	padding: 40px 0;
	color: var( --bdp-ink-2 );
	font-size: 14px;
}

.bdp-browse-sheet__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
}

.bdp-browse-sheet__item {
	position: relative !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var( --bdp-line, #eae4dd ) !important;
	border-radius: 12px !important;
	background: #fff !important;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.16s, box-shadow 0.16s;
	text-align: left;
}

.bdp-browse-sheet__item:hover {
	border-color: var( --bdp-accent ) !important;
}

.bdp-browse-sheet__item.is-selected {
	border-color: var( --bdp-accent ) !important;
	box-shadow: 0 0 0 1.5px var( --bdp-accent ) !important;
}

.bdp-browse-sheet__item-img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var( --bdp-paper );
}

.bdp-browse-sheet__item-meta {
	padding: 10px 12px 12px;
}

.bdp-browse-sheet__item-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --wd-title-color, #1e1a18 );
	margin-bottom: 4px;
}

.bdp-browse-sheet__item-price {
	display: block;
	font-size: 13px;
	color: var( --bdp-accent );
	font-weight: 500;
}

/* Desktop: centered modal instead of bottom sheet */
@media ( min-width: 768px ) {
	.bdp-browse-sheet {
		align-items: center;
	}

	.bdp-browse-sheet__panel {
		width: 560px;
		max-width: 90vw;
		max-height: 70vh;
		border-radius: 16px;
		transform: translateY( 20px ) scale( 0.97 );
	}

	.bdp-browse-sheet[aria-hidden="false"] .bdp-browse-sheet__panel {
		transform: translateY( 0 ) scale( 1 );
	}

	.bdp-browse-sheet__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* ---------------------------------------------------------------------- */
/* Personalizare (design.md sec.4.6)                                       */
/* ---------------------------------------------------------------------- */

.bdp-model__pers {
	margin: 18px 0 0 0 !important;
	padding: 14px !important;
	border: 1px solid var( --bdp-line ) !important;
	border-radius: var( --bdp-radius-lg );
	background: var( --bdp-surface );
}

.bdp-model__pers-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px 0;
}

.bdp-model__pers-top b {
	font-size: 14px;
	color: var( --wd-title-color );
}

.bdp-model__pers-chip {
	background: var( --bdp-accent-bg );
	color: var( --bdp-accent );
	font-size: 11.5px;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

.bdp-model__pers-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media ( min-width: 480px ) {
	.bdp-model__pers-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.bdp-personalization-field {
	margin: 0 !important;
}

/* Eroare de camp (design.md sec.4.6): bordura rosie + mesaj sub camp,
   adaugate de bdp-model.js la tentativa de submit cu campuri obligatorii
   goale. WoodMart nu expune --color-error pe frontend (verificat live) -
   se foloseste o valoare proprie, nu un fallback var() ghicit. */
.bdp-personalization-field.has-error input[type="text"],
.bdp-personalization-field.has-error input[type="date"] {
	border-color: #c0392b;
}

.bdp-personalization-field__err {
	display: block;
	font-size: 12px;
	color: #c0392b;
	margin-top: 5px;
}

.bdp-personalization-field__err:empty {
	display: none;
}

.bdp-personalization-field label {
	display: block;
	font-size: 12px;
	color: var( --bdp-ink-2 );
	margin-bottom: 5px;
}

.bdp-personalization-field input[type="text"],
.bdp-personalization-field input[type="date"] {
	width: 100%;
	min-height: 46px !important;
	padding: 11px 13px;
	border: 1px solid var( --bdp-line );
	border-radius: 10px;
	font-family: var( --bdp-font );
	font-size: 15px;
	background: var( --bdp-surface );
	color: var( --wd-title-color );
}

.bdp-personalization-field input[type="text"]:focus,
.bdp-personalization-field input[type="date"]:focus {
	outline: none;
	border-color: var( --bdp-accent );
	box-shadow: 0 0 0 3px var( --bdp-accent-bg );
}

.bdp-personalization-field__cnt {
	display: block;
	font-size: 11.5px;
	color: var( --bdp-ink-3 );
	margin-top: 5px;
	text-align: right;
}

/* ---------------------------------------------------------------------- */
/* Buton adauga in cos + bara CTA (design.md sec.4.7)                      */
/* ---------------------------------------------------------------------- */

.bdp-add-to-cart-btn {
	/* !important pe TOATE proprietatile vizuale, nu doar layout: elementul
	   e un <button> nativ, iar WoodMart base.css defineste
	   `:is(.btn, .button, button, [type=submit], [type=button])` cu
	   aceeasi specificitate (0,1,0) ca `.bdp-add-to-cart-btn`. La
	   specificitate egala castiga ordinea de incarcare, iar base.css se
	   incarca DUPA bdp.css - verificat live cu inspectarea CSSOM
	   (document.styleSheets). Border-radius/background/color fara
	   !important erau complet suprascrise de tema. */
	position: relative !important;
	display: inline-flex !important;
	flex: 1 1 auto;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50px !important;
	min-width: 44px !important;
	padding: 0.75em 1.75em !important;
	border: none !important;
	border-radius: 12px !important;
	background: var( --btn-accented-bgcolor ) !important;
	color: var( --btn-accented-color ) !important;
	font-family: var( --bdp-font );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.16s, transform 0.1s;
}

.bdp-add-to-cart-btn:hover {
	background: var( --btn-accented-bgcolor-hover ) !important;
	color: var( --btn-accented-color-hover ) !important;
}

.bdp-add-to-cart-btn:active {
	transform: scale( 0.985 );
}

.bdp-add-to-cart-btn:disabled,
.bdp-add-to-cart-btn.is-disabled {
	background: #cfc8c1 !important;
	opacity: 1;
	cursor: not-allowed;
	pointer-events: none;
}

.bdp-add-to-cart-btn.is-done {
	background: #2f6b47 !important;
}

.bdp-model__cta-bar {
	margin-top: 22px;
}

.bdp-model__hint {
	font-size: 12.5px;
	color: var( --wd-title-color );
	margin: 0 0 9px 0;
	min-height: 0;
}

.bdp-model__hint:empty {
	display: none;
}

.bdp-model__cta-row {
	display: flex;
	align-items: center;
	gap: 13px;
}

.bdp-model__cta-total {
	flex: none;
	display: none; /* pe desktop, langa buton; pe mobil, in bara sticky (regula de mai jos). */
}

.bdp-model__cta-total b {
	font-family: var( --bdp-font-title );
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	display: block;
	color: var( --wd-title-color );
}

.bdp-model__cta-total small {
	font-size: 11.5px;
	color: var( --bdp-ink-2 );
}

/* ---------------------------------------------------------------------- */
/* Trust badges (design.md mockup — sub personalizare, deasupra CTA)       */
/* ---------------------------------------------------------------------- */

.bdp-model__trust {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.bdp-model__trust > div {
	flex: 1;
	background: var( --bdp-surface );
	border: 1px solid var( --bdp-line );
	border-radius: 11px;
	padding: 11px 10px;
	text-align: center;
}

.bdp-model__trust b {
	display: block;
	font-size: 12.5px;
	color: var( --wd-title-color );
}

.bdp-model__trust small {
	font-size: 11px;
	color: var( --bdp-ink-2 );
}

/* ---------------------------------------------------------------------- */
/* Continut editorial (design.md sec.4.8)                                  */
/* ---------------------------------------------------------------------- */

.bdp-model__story {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var( --bdp-line );
	font-size: 14.5px;
	line-height: 1.65;
	color: var( --bdp-ink );
}

.bdp-model__story :first-child {
	margin-top: 0;
}

/* Linkurile catre produsele individuale (Req 11.5, class-bdp-internal-links.php)
   raman discrete, nu ca optiune concurenta cu CTA-ul principal. */
.bdp-model-article .bdp-internal-links,
.bdp-model .bdp-internal-links {
	margin-top: 14px;
	font-size: 12.5px;
	color: var( --bdp-ink-3 );
}

.bdp-model-article .bdp-internal-links__label,
.bdp-model .bdp-internal-links__label {
	display: inline;
	margin: 0 0.4em 0 0;
	padding: 0;
	font-size: 12.5px;
	color: var( --bdp-ink-3 );
}

.bdp-model-article .bdp-internal-links ul,
.bdp-model .bdp-internal-links ul {
	list-style: none !important;
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bdp-model-article .bdp-internal-links li,
.bdp-model .bdp-internal-links li {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bdp-model-article .bdp-internal-links li::before,
.bdp-model .bdp-internal-links li::before {
	content: none !important;
}

.bdp-model-article .bdp-internal-links li + li::before,
.bdp-model .bdp-internal-links li + li::before {
	content: " · " !important;
	color: var( --bdp-ink-3 );
}

.bdp-model-article .bdp-internal-links a,
.bdp-model .bdp-internal-links a {
	color: var( --bdp-ink-2 );
}

/* ---------------------------------------------------------------------- */
/* Sold out (design.md - mesaj cand Modelul e complet indisponibil)        */
/* ---------------------------------------------------------------------- */

.bdp-sold-out {
	/* WoodMart nu expune --color-error pe frontend (verificat live) - se
	   foloseste tonul de titlu, garantat definit, nu o culoare de eroare
	   inventata care ar putea contrazice paleta reala a temei. */
	color: var( --wd-title-color );
	font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Responsive - mobile-first, fara scroll orizontal fortat (Req 3.6)       */
/* ---------------------------------------------------------------------- */

/* Sub 1024px (mobil/tableta, design.md sec.3.1): bara CTA sticky de jos. */
@media ( max-width: 1023.98px ) {
	.bdp-model__cta-bar {
		position: sticky;
		bottom: 0;
		z-index: 30;
		margin: 22px calc( -1 * var( --bdp-gap-sm ) ) calc( -1 * var( --bdp-gap-sm ) );
		padding: 11px var( --bdp-gap-sm ) calc( 11px + env( safe-area-inset-bottom ) );
		background: rgba( 255, 255, 255, 0.92 );
		backdrop-filter: blur( 16px );
		border-top: 1px solid var( --bdp-line );
	}

	.bdp-model__cta-total {
		display: block;
	}
}

/* 1024px+ (desktop, design.md sec.3.2): doua coloane, hero sticky in stanga. */
@media ( min-width: 1024px ) {
	.bdp-model.bdp-package-selector {
		display: grid;
		grid-template-columns: 1.08fr 0.92fr;
		gap: 0 44px;
		align-items: start;
	}

	.bdp-model__hero {
		position: sticky;
		top: 24px;
		margin: 0;
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.bdp-model__frame {
		aspect-ratio: auto;
		height: min( 100vh - 48px, 760px );
	}

	.bdp-model__sheet {
		grid-column: 2;
		max-width: 560px;
		padding: 0;
	}

	.bdp-model__name {
		font-size: 52px;
	}

	.bdp-model__cta-bar {
		margin-top: 22px;
	}

	.bdp-model__cta-total {
		display: block;
		margin-left: auto;
	}

	.bdp-add-to-cart-btn {
		flex: none;
		max-width: 320px;
	}

	.bdp-model__cta-row {
		flex-direction: row-reverse;
	}
}

@media ( max-width: 480px ) {
	.bdp-model__rows,
	.bdp-costumas-selector__grid {
		/* Deja column/grid fix mai sus - nicio schimbare de directie necesara,
		   pastram doar garantia de latime 100% (Req 3.6, fara scroll orizontal). */
	}

	.bdp-row {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------- */
/* Funnel homepage in 3 pasi (Req 9.1-9.6) - limbaj vizual nemodificat      */
/* ---------------------------------------------------------------------- */

.bdp-funnel {
	--bdp-accent: var( --wd-primary-color );
	--bdp-gap: 18px;
	--bdp-gap-sm: 11px;
	--bdp-trans: 0.2s ease;
	font-family: var( --wd-text-font );
	color: var( --wd-text-color );
	content-visibility: auto;
}

.bdp-funnel__title {
	color: var( --wd-title-color );
	font-family: var( --wd-title-font );
}

.bdp-funnel__options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var( --bdp-gap-sm );
}

.bdp-funnel__option {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	min-width: 44px !important;
	padding: 0.75em 1.5em !important;
	margin: 0 !important;
	border: 1px solid var( --brdcolor-gray-300 ) !important;
	border-radius: var( --wd-brd-radius );
	background: var( --wd-main-bgcolor );
	color: var( --wd-text-color );
	cursor: pointer;
	transition: var( --bdp-trans );
}

.bdp-funnel__option::before,
.bdp-funnel__option::after {
	content: none !important;
}

.bdp-funnel__option:hover {
	border-color: var( --bdp-accent ) !important;
	color: var( --bdp-accent );
}

.bdp-funnel__back {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	min-height: 44px !important;
	padding: 0.5em 0.75em !important;
	margin: 0 0 var( --bdp-gap-sm ) 0 !important;
	border: none !important;
	background: transparent !important;
	color: var( --bdp-accent );
	cursor: pointer;
	text-decoration: underline;
}

.bdp-funnel__cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: var( --bdp-gap );
}

.bdp-funnel__card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 44px !important;
	text-decoration: none;
	color: var( --wd-text-color );
	border: 1px solid var( --brdcolor-gray-300 );
	border-radius: var( --wd-brd-radius );
	overflow: hidden;
	transition: var( --bdp-trans );
}

.bdp-funnel__card:hover {
	border-color: var( --bdp-accent );
}

.bdp-funnel__card img {
	width: 100%;
	height: auto;
	display: block;
}

.bdp-funnel__card-name {
	padding: 0.5em 0.75em 0;
	font-weight: 600;
	color: var( --wd-entities-title-color );
}

.bdp-funnel__card-price {
	padding: 0 0.75em 0.75em;
	color: var( --bdp-accent );
	font-size: 0.9em;
}

.bdp-funnel__empty {
	color: var( --wd-text-color );
}

@media ( max-width: 480px ) {
	.bdp-funnel__options {
		flex-direction: column;
	}

	.bdp-funnel__option {
		width: 100% !important;
	}
}