/* ============================================================================
   VITABOLIC — casetele de titlu de pagina (.trap / .mirror-trap)
   Se incarca DUPA main.css, care are sute de reguli !important.

   Problema reparata: in main.css caseta are `height:43px` si `line-height:43px`
   fixe, plus `letter-spacing:10px`. Pe telefon un titlu lung ("TRANSPORT SI
   LIVRARE") trece pe doua randuri, dar cutia ramane la 43px -> linia aurie de
   jos taie prin mijlocul textului, iar al doilea rand iese in afara.
   ============================================================================ */

html body .trap,
html body .mirror-trap{
	/* inaltimea creste cu textul, in loc sa fie blocata la 43px */
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.25 !important;

	display: block !important;
	box-sizing: border-box !important;

	/* letter-spacing adauga spatiu SI dupa ultima litera; il compensam
	   ca titlul sa ramana optic centrat */
	text-indent: 10px !important;

	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none !important;
}

/* --- tablete --- */
@media (max-width: 900px){
	html body .trap,
	html body .mirror-trap{
		font-size: 17px !important;
		letter-spacing: 6px !important;
		text-indent: 6px !important;
		padding: 14px 12px 12px !important;
	}
}

/* --- telefoane --- */
@media (max-width: 600px){
	html body .trap,
	html body .mirror-trap{
		font-size: 15px !important;
		letter-spacing: 3.5px !important;
		text-indent: 3.5px !important;
		padding: 13px 12px 11px !important;
		margin: 0 0 16px !important;
		width: 100% !important;
	}
}

/* --- telefoane inguste (iPhone SE, 360px) --- */
@media (max-width: 400px){
	html body .trap,
	html body .mirror-trap{
		font-size: 14px !important;
		letter-spacing: 2.5px !important;
		text-indent: 2.5px !important;
	}
}

/* elementele din interiorul casetei (ex. "Toate produsele >") nu trebuie
   sa mosteneasca spatierea mare a titlului */
html body .trap a,
html body .mirror-trap a,
html body .trap .onlyMobile,
html body .mirror-trap .onlyMobile{
	letter-spacing: normal !important;
	text-indent: 0 !important;
	line-height: 1.3 !important;
}

/* pastreaza sageata decorativa ascunsa si pe mobil (era deja oprita in main.css,
   dar la inaltime variabila ar reaparea taiata) */
html body .trap::after,
html body .mirror-trap::after{
	display: none !important;
}

/* ===== Pagini juridice (CMS) ===== */
html body .bar-content h2{
	font-family:'Oswald',Arial,sans-serif;font-size:19px;text-transform:uppercase;
	letter-spacing:1px;color:#191308;margin:26px 0 10px}
html body .bar-content h3{
	font-family:'Oswald',Arial,sans-serif;font-size:16px;color:#191308;margin:18px 0 8px}
html body .bar-content table{
	width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
html body .bar-content table th{
	background:#f4eee0;color:#191308;text-align:left;padding:9px 11px;
	border:1px solid #e6dcc4;font-weight:600}
html body .bar-content table td{
	padding:9px 11px;border:1px solid #e6dcc4;vertical-align:top;line-height:1.55}
html body .bar-content code{
	background:#f4eee0;color:#b8862f;padding:1px 6px;border-radius:4px;font-size:12.5px}

/* marcaj vizibil pentru ce a ramas de completat inainte de publicare —
   imposibil de ratat, tocmai ca sa nu ajunga asa in productie */
html body .vtbTodo{
	display:inline-block;background:#ffe8e8;color:#a32d2d;
	padding:1px 7px;border-radius:4px;border:1px dashed #e24b4a;
	font-size:12.5px;font-weight:600}

@media (max-width:700px){
	html body .bar-content table{display:block;overflow-x:auto;white-space:nowrap}
}

/* nota de obligatie de plata, deasupra butonului de comanda.
   Trebuie sa fie clar lizibila: e informatia care face ca apasarea butonului
   sa fie neechivoc o comanda cu plata. */
html body .vtbPayNote{
	display: block !important;
	clear: both !important;
	margin: 14px 0 10px !important;
	padding: 0 4px !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: #191308 !important;
	-webkit-text-fill-color: #191308 !important;
	text-align: center !important;
}