/* ==========================================================================
   MAGAZINUL

   WooCommerce își aduce propriile culori: mov pentru butoane, oliv pentru
   prețuri și pentru starea stocului, plus un galben-muștar pentru eticheta de
   reducere. Sunt culorile plugin-ului, nu ale nimănui. Aici sunt înlocuite cu
   ale noastre.

   Structura vine din modulul WooCommerce al GP Premium, activat pe 10 august.
   Fișierul ăsta nu rearanjează nimic, doar îmbracă.

   Se încarcă doar pe paginile de magazin: vezi `pmi_ro_e_pagina_de_magazin()`
   din `functions.php`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTOANE

   Toate butoanele din magazin arată ca butoanele din restul site-ului:
   pastile, cu fundal `ink` și hover violet. Fără asta, „Adaugă în coș" ar fi
   singurul buton albastru dintr-un site care nu are albastru.
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	min-block-size: 48px;
	padding: var(--pmi-sp-3) var(--pmi-sp-6);
	border: 2px solid transparent;
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
	font-family: inherit;
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	line-height: 1;
	transition: background-color var(--pmi-tranzitie), color var(--pmi-tranzitie);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--pmi-violet-500);
	color: var(--pmi-alb);
}

/* Butonul dezactivat trebuie să arate dezactivat, nu doar să nu răspundă. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background-color: var(--pmi-neutral-200);
	color: var(--pmi-neutral-500);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   2. PREȚURI
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--pmi-ink);
	font-weight: var(--pmi-greutate-accent);
}

/* Prețul vechi rămâne tăiat, dar stins: e o referință, nu o ofertă. */
.woocommerce .price del,
.woocommerce ul.products li.product .price del {
	color: var(--pmi-neutral-400);
	font-weight: var(--pmi-greutate-text);
	opacity: 1;
}

.woocommerce .price ins,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--pmi-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: var(--pmi-text-xl);
	line-height: var(--pmi-lh-xl);
}

/* --------------------------------------------------------------------------
   3. ETICHETE ȘI STARE
   -------------------------------------------------------------------------- */
.woocommerce span.onsale {
	inset-block-start: var(--pmi-sp-3);
	inset-inline-start: var(--pmi-sp-3);
	min-block-size: 0;
	min-inline-size: 0;
	padding: var(--pmi-sp-1) var(--pmi-sp-3);
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-tangerine-300);
	color: var(--pmi-alb);
	font-size: var(--pmi-text-2xs);
	font-weight: var(--pmi-greutate-accent);
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.woocommerce div.product .stock {
	color: var(--pmi-succes);
	font-size: var(--pmi-text-xs);
	font-weight: var(--pmi-greutate-accent);
}

.woocommerce div.product .out-of-stock {
	color: var(--pmi-eroare);
}

/* --------------------------------------------------------------------------
   4. LISTA DE PRODUSE

   Carduri, ca peste tot în site: chenar subțire, colț mare, imaginea cu
   proporție fixă. Fără proporție fixă, o copertă de carte înaltă și un afiș
   lat fac rândul să arate strâmb.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-2);
	padding: var(--pmi-sp-4);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
	text-align: start;
	transition: border-color var(--pmi-tranzitie);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--pmi-violet-500);
}

.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--pmi-fundal);
	border-radius: var(--pmi-raza-md);
	margin-block-end: var(--pmi-sp-3);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
	padding: 0;
}

/* Butonul stă la baza cardului, ca într-un rând de produse cu titluri de
   lungimi diferite să rămână toate pe aceeași linie. */
.woocommerce ul.products li.product .button {
	margin-block-start: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   5. PAGINA PRODUSULUI
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--pmi-text-secundar);
}

.woocommerce div.product .quantity .qty {
	min-block-size: 48px;
	border: 1px solid var(--pmi-neutral-300);
	border-radius: var(--pmi-raza-xs);
	font-size: var(--pmi-text-sm);
	font-family: inherit;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: var(--pmi-raza-sm) var(--pmi-raza-sm) 0 0;
	background-color: var(--pmi-neutral-100);
	border-color: var(--pmi-linie);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--pmi-fundal-card);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--pmi-ink);
	font-weight: var(--pmi-greutate-accent);
}

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--pmi-text-xs);
	color: var(--pmi-text-secundar);
}

/* --------------------------------------------------------------------------
   6. COȘ ȘI FINALIZAREA COMENZII

   Aici nu se experimentează. Tabelul rămâne tabel, câmpurile rămân câmpuri;
   se schimbă doar culorile și rotunjirile, ca omul să recunoască site-ul.
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border-color: var(--pmi-linie);
	border-radius: var(--pmi-raza-md);
}

.woocommerce table.shop_table th {
	color: var(--pmi-ink);
	font-weight: var(--pmi-greutate-accent);
}

.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	font-size: var(--pmi-text-lg);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	min-block-size: 48px;
	padding: var(--pmi-sp-3) var(--pmi-sp-4);
	border: 1px solid var(--pmi-neutral-300);
	border-radius: var(--pmi-raza-xs);
	/* 16 px, nu mai puțin: sub atât, Safari pe iPhone mărește pagina singur
	   când atingi câmpul, chiar în mijlocul plății. */
	font-size: var(--pmi-text-sm);
	font-family: inherit;
	background-color: var(--pmi-alb);
}

.woocommerce form .form-row textarea {
	min-block-size: 110px;
}

.woocommerce-checkout #payment {
	background-color: var(--pmi-neutral-100);
	border-radius: var(--pmi-raza-lg);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-color: var(--pmi-linie);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--pmi-fundal-card);
	border-radius: var(--pmi-raza-sm);
	font-size: var(--pmi-text-xs);
	color: var(--pmi-text-secundar);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-block-end-color: var(--pmi-fundal-card);
}

/* --------------------------------------------------------------------------
   7. MESAJE

   WooCommerce le pune o dungă colorată la stânga. Îi păstrăm forma, îi
   schimbăm culorile pe ale noastre.
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-block-start: 0;
	border-inline-start: 3px solid var(--pmi-violet-500);
	border-radius: var(--pmi-raza-sm);
	background-color: var(--pmi-violet-50);
	color: var(--pmi-text);
	font-size: var(--pmi-text-sm);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--pmi-violet-500);
}

.woocommerce-message {
	border-inline-start-color: var(--pmi-succes);
	background-color: var(--pmi-aqua-50);
}

.woocommerce-message::before {
	color: var(--pmi-succes);
}

.woocommerce-error {
	border-inline-start-color: var(--pmi-eroare);
	background-color: var(--pmi-tangerine-50);
}

.woocommerce-error::before {
	color: var(--pmi-eroare);
}

/* --------------------------------------------------------------------------
   8. COȘUL DIN ANTET
   -------------------------------------------------------------------------- */
.site-header .wc-menu-item .cart-contents {
	color: var(--pmi-ink);
}

.site-header .wc-menu-item .cart-contents:hover {
	color: var(--pmi-violet-500);
}

.site-header .wc-menu-item .number-of-items {
	background-color: var(--pmi-violet-500);
	color: var(--pmi-alb);
	font-size: var(--pmi-text-2xs);
	font-weight: var(--pmi-greutate-accent);
}