/*
 * Corecturi care se aplica peste tot: antet, subsol si zonele temei parinte pe
 * care nu le randam noi. Fisierul asta e mic si se incarca pe toate paginile;
 * ce tine de o singura pagina sta in shop.css, home.css sau product.css.
 */

/* ---------- tinte de atingere ----------
 *
 * Masurat cu Playwright la 390 px: butonul de meniu avea 20x40 px, pastilele de
 * culoare de pe raft 20x20, iar cele de pe pagina de produs 30x30. Sub degete,
 * astea sunt tinte ratate. Nu marim si desenul, ci suprafata sensibila: un
 * pseudo-element intins peste tinta duce zona de atingere la 44 px fara sa
 * schimbe cum arata pagina.
 */

.etheme-elementor-off-canvas__toggle_button,
.etheme-elementor-off-canvas .elementor-button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Pastilele de culoare stau lipite una de alta, deci nu le putem da fiecareia
   o zona de 44 px: s-ar suprapune si vecina din dreapta ar fura atingerea.
   Marim desenul pana la minimul din WCAG 2.5.8 (24 px) si largim spatiul
   dintre ele, ca degetul sa aiba unde nimeri. */
.etheme-product-grid .st-swatch-preview {
	gap: 10px;
}

.etheme-product-grid .st-swatch-preview li,
.etheme-product-grid .st-swatch-preview li.type-color,
.etheme-product-grid .st-swatch-preview li .st-custom-attribute {
	width: 24px !important;
	height: 24px !important;
}

.hd-home .hd-cap__link,
.hd-home .hd-grila__item a {
	display: inline-block;
	padding-block: 13px;
}

.hd-home .hd-grila__item a { padding-block: 0; }

/* ---------- subsol ---------- */

/* Tema pune text-transform: capitalize pe titlurile din subsol, iar in romana
   iese "Livrare Si Retur" si "Intrebari Frecvente". Conjunctiile nu se scriu cu
   majuscula la mijloc de titlu. */
.menu-title.et-column-title,
.menu-title.et-column-title p,
.et_menu_list .menu-list-item a,
.et_menu_list .menu-list-item p {
	text-transform: none !important;
}

/* ---------- capul paginii de arhiva ----------
 *
 * Venea din demo cu o fotografie pe fundal si titlul centrat, alb pe negru. Cu
 * fundalul scos, ramane un cap de pagina in limbajul restului magazinului:
 * hartie calda, fir de navigare monospatiat, titlu aliniat la stanga.
 */
.elementor-location-archive .page-heading {
	padding-block: clamp(20px, 4vw, 44px) 0;
	text-align: left;
	background: transparent;
}

.elementor-location-archive .page-heading .a-center { text-align: left; }

.elementor-location-archive .page-heading h1,
.elementor-location-archive .page-heading .page-title {
	margin: 6px 0 0;
	font-size: clamp(26px, 4vw, 44px);
	font-weight: 500;
	letter-spacing: -.015em;
	color: oklch(0.235 0.013 60);
}

.elementor-location-archive .page-heading .woocommerce-breadcrumb,
.elementor-location-archive .page-heading .breadcrumbs {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: oklch(0.615 0.009 60);
}

/* ---------- capul paginii de arhiva, culori ----------
 *
 * Titlul si firul erau albe, pentru ca stateau peste o fotografie. Fotografia a
 * iesit, albul a ramas: scris alb pe hartie calda. Fortam culorile inapoi in
 * paleta si taiem inaltimea, care era de 270 px de spatiu aproape gol.
 */
.elementor-location-archive .page-heading .page-title,
.elementor-location-archive .page-heading h1,
.elementor-location-archive .page-heading .woocommerce-breadcrumb,
.elementor-location-archive .page-heading .woocommerce-breadcrumb a,
.elementor-location-archive .page-heading nav a,
.elementor-location-archive .page-heading nav {
	color: oklch(0.235 0.013 60) !important;
}

.elementor-location-archive .page-heading .woocommerce-breadcrumb,
.elementor-location-archive .page-heading nav,
.elementor-location-archive .page-heading nav a {
	color: oklch(0.615 0.009 60) !important;
}

.elementor-location-archive .page-heading .page-title,
.elementor-location-archive .page-heading h1 {
	text-transform: none !important;
}

/* Capul avea 294 px, aproape toti goi. Padding-ul e pe .page-heading, nu pe
   containerul dinauntru, altfel tema il pune inapoi. */
.elementor-location-archive .page-heading,
.elementor-location-archive .page-heading .container,
.elementor-location-archive .page-heading .row {
	padding-block: 0 !important;
	min-height: 0 !important;
}

.elementor-location-archive .page-heading {
	padding-block: clamp(16px, 3vw, 30px) clamp(6px, 1.5vw, 14px) !important;
}

/* Capul de arhiva statea lipit de marginea ecranului: titlul si firul incepeau
   la 0 px, in timp ce cardurile de dedesubt respectau 15 px. */
.elementor-location-archive .page-heading .container {
	padding-inline: 15px !important;
}

@media (min-width: 1025px) {
	.elementor-location-archive .page-heading .container {
		padding-inline: clamp(20px, 4vw, 64px) !important;
	}
}

/* Butonul care deschide filtrele pe telefon era o pastila fara text, lipita de
   marginea din stanga, la jumatatea drumului dintre bara de sortare si prima
   vaza. Il tragem in rand cu restul si ii scriem ce face. */
@media (max-width: 1024px) {
	.elementor-location-archive .etheme-elementor-off-canvas__toggle_button {
		margin: 0 0 14px 15px;
		padding-inline: 16px;
		gap: 8px;
		border: 1px solid oklch(0.885 0.009 72);
		border-radius: 999px;
		color: oklch(0.235 0.013 60);
	}

	.elementor-location-archive .etheme-elementor-off-canvas__toggle_button::after {
		content: "Filtre";
		font-size: 13px;
		line-height: 1;
	}
}

/* Ultimele tinte sub 44 px, masurate la 390: legatura de pe logo (166x34) si
   randurile din lista subsolului (149x37). Nu marim desenul, doar zona pe care
   o prinde degetul. */
.elementor-widget-theme-etheme_site-logo > a,
.elementor-widget-theme-etheme_site-logo .elementor-widget-container > a,
.etheme-elementor-site-logo a,
.site-logo a,
a.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.etheme-icon-list-item-text,
.et_menu_list .menu-list-item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- banda de promisiuni din antet ----------
 *
 * Trei promisiuni pe un rand la desktop, doua randuri inghesuite la 390 px.
 * Pe telefon strangem spatiile si micsoram scrisul cat sa incapa pe o linie;
 * daca tot nu incape (ecrane sub 340 px, texte mai lungi), banda se deruleaza
 * lateral in loc sa se rupa in doua.
 */
@media (max-width: 640px) {
	.elementor-element-2f9abea7 .etheme-icon-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.elementor-element-2f9abea7 .etheme-icon-list::-webkit-scrollbar { display: none; }

	.elementor-element-2f9abea7 .etheme-icon-list-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.elementor-element-2f9abea7 .etheme-icon-list-item-text {
		font-size: 11px;
		letter-spacing: 0;
		min-height: 0;
	}

	/* Bifele mananca aproape 50 px din 390. Fara ele, cele trei promisiuni
	   incap pe un rand intreg si nu mai raman taiate la marginea din dreapta.
	   Rolul lor de separator il ia un punct. */
	.elementor-element-2f9abea7 .etheme-icon-list-item-icon { display: none; }

	.elementor-element-2f9abea7 .etheme-icon-list-item + .etheme-icon-list-item::before {
		content: "·";
		margin-right: 14px;
		opacity: .5;
	}
}