/*
 * FFP2.ee — klassikaline WooCommerce (ostukorv, kassa, konto).
 *
 * Miks see fail olemas on: kassa ja ostukorv kasutavad [woocommerce_checkout] /
 * [woocommerce_cart] shortcode'i, mitte plokke. theme.json stiilid ulatuvad ainult
 * plokkideni, seega klassikaline vorm jääks muidu WooCommerce'i vaikeilmesse.
 *
 * Plokk-kassale üleminek EI ole valik: Omniva pluginal puudub plokitugi, st
 * pakiautomaadi valik kaoks kassalt ära. Vt muudatused.md.
 *
 * Kõik värvid ja vahed viitavad theme.json-i tokenitele.
 */

/* --- Toote lühikirjeldus (tootelehel) ------------------------------------ */

/*
 * Lühikirjeldus tuleb woocommerce/product-summary plokist ja sisaldab HTML-i
 * (loendid, lõigud, rasvane tekst). Anname sellele selged vahed ja täpid.
 */
.ffp2ee-product-summary ul,
.ffp2ee-product-summary ol {
	margin: 0 0 1rem;
	padding-left: 1.3rem;
}

.ffp2ee-product-summary ul {
	list-style: disc;
}

.ffp2ee-product-summary ol {
	list-style: decimal;
}

.ffp2ee-product-summary li {
	margin-bottom: 0.4rem;
	line-height: 1.55;
}

.ffp2ee-product-summary p {
	margin: 0 0 0.85rem;
	line-height: 1.6;
}

.ffp2ee-product-summary > :last-child {
	margin-bottom: 0;
}

/* --- Tehnilised andmed (tootelehel) -------------------------------------- */

.ffp2ee-specs-section {
	max-width: 760px;
	margin: var(--wp--preset--spacing--60) auto 0;
	text-align: center;
}

.ffp2ee-specs-heading {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.ffp2ee-specs-sub {
	margin: 0 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}

.ffp2ee-specs {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	text-align: left;
}

.ffp2ee-specs__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30);
}

.ffp2ee-specs__row + .ffp2ee-specs__row {
	border-top: 1px solid var(--wp--preset--color--border);
}

.ffp2ee-specs__label {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Väärtus on tume ja paks — hea loetavus. */
.ffp2ee-specs__val {
	flex: 1 1 auto;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-align: right;
}

/* --- Vormiväljad --------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce table.cart td.actions .coupon input.input-text {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	box-shadow: none;
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.woocommerce form .form-row textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Fookus on nähtav ka siis, kui brauseri oma outline on maha surutud. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce table.cart td.actions .coupon input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.15);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Vigane väli peab paistma ilma värvi ainsa vihjeta — seetõttu ka paksem raam. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--wp--preset--color--danger);
	border-width: 2px;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--wp--preset--color--primary);
}

/* --- Sildid -------------------------------------------------------------- */

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--danger);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row .optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.woocommerce form .form-row {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
}

/* --- Sektsioonide pealkirjad --------------------------------------------- */

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout h3#order_review_heading,
.woocommerce .cart_totals h2,
.woocommerce-account h2 {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-checkout h3#order_review_heading {
	margin-top: var(--wp--preset--spacing--50);
}

/* --- Teated (sh „On sul kupong?" riba) ----------------------------------- */

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.woocommerce .woocommerce-info {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-soft);
}

.woocommerce .woocommerce-error {
	border-color: var(--wp--preset--color--danger);
	background-color: var(--wp--preset--color--base);
}

/* WooCommerce'i vaikeikoon on ::before-pseudoelement absoluutses positsioonis. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
	position: static;
	color: inherit;
}

.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* --- Kassa paigutus: vorm vasakul, tellimuse kokkuvõte paremal ----------- */

/*
 * form.checkout otsesed lapsed on #customer_details, #order_review_heading ja
 * #order_review. Paigutame need 2-veeru ruudustikku: andmed vasakul (2 rida
 * kõrge), kokkuvõte + makse paremal. Kupong/ekspress-maksed jäävad täislaiuses.
 */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		grid-template-areas:
			"details review-heading"
			"details review";
		align-items: start;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
	}

	.woocommerce-checkout form.checkout > #customer_details {
		grid-area: details;
	}

	.woocommerce-checkout form.checkout > #order_review_heading {
		grid-area: review-heading;
		margin-top: 0;
	}

	.woocommerce-checkout form.checkout > #order_review {
		grid-area: review;
		position: sticky;
		top: var(--wp--preset--spacing--30);
	}

	.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
		grid-column: 1 / -1;
	}
}

/* Arveldus- ja transpordiväljad laovad vasakusse veergu vertikaalselt. */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: auto;
	padding: 0;
}

/* Tellimuse kokkuvõte kaardina. */
.woocommerce-checkout #order_review {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
}

/* Eesnimi / perekonnanimi kõrvuti — aga mitte siis, kui ruumi napib. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: calc(50% - (var(--wp--preset--spacing--20) / 2));
	float: left;
}

.woocommerce form .form-row-last {
	float: right;
}

@media (max-width: 599px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
		float: none;
	}
}

/* --- Tellimuse kokkuvõte ja ostukorvi tabelid ---------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.9rem 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	background-color: var(--wp--preset--color--surface);
	font-weight: 600;
}

.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.woocommerce table.shop_table td.product-name a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
	color: var(--wp--preset--color--primary);
}

.woocommerce table.shop_table img {
	width: 56px;
	height: auto;
	border-radius: var(--wp--custom--radius--sm);
}

.woocommerce table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.cart td.product-remove a.remove:hover {
	background-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--base);
}

/* --- Koguse valija ------------------------------------------------------- */

.woocommerce .quantity input.qty {
	width: 4.5rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Makseviisid --------------------------------------------------------- */

.woocommerce-checkout #payment {
	border-radius: var(--wp--custom--radius--md);
	background-color: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin-bottom: 0.6rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--base);
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
	border-color: var(--wp--preset--color--primary);
}

/* :has() annab valitud makseviisile esiletõste ilma JS-ita. */
.woocommerce-checkout #payment ul.payment_methods li:has(input.input-radio:checked) {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-soft);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 0.8rem 0 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* --- Nupud --------------------------------------------------------------- */

/*
 * Woo lisab body-klassi woocommerce-block-theme-has-button-styles ja võtab
 * theme.json-i nupustiilid ise üle. Siin ainult see, mida see üle ei võta.
 */
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: 1rem 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-align: center;
	box-shadow: var(--wp--preset--shadow--primary-glow);
}

.woocommerce table.cart td.actions .button {
	padding: 0.7rem 1.2rem;
	font-size: var(--wp--preset--font-size--small);
}

/* --- Ostukorvi kokkuvõte ------------------------------------------------- */

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
}

.woocommerce .cart-collaterals .cart_totals table.shop_table {
	border: 0;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.woocommerce table.cart td.actions .coupon input.input-text {
	width: auto;
	min-width: 12rem;
}

/* --- Tühi ostukorv ------------------------------------------------------- */

.woocommerce .cart-empty {
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
}

.woocommerce .return-to-shop {
	padding-bottom: var(--wp--preset--spacing--40);
	text-align: center;
}

/* --- Kategooria filtriribad (poe arhiiv) --------------------------------- */

/*
 * Poe päises olev kategooriate „chip" rida. Aktiivne = roheline.
 * Kasutame lihtsat linkide gruppi (vt archive-product / taxonomy mall).
 */
.ffp2ee-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ffp2ee-cat-chips a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.ffp2ee-cat-chips a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.ffp2ee-cat-chips a.is-active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* --- Sorteerimise rippmenüü (poe „Vaikimisi järjestus") ------------------ */

.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select,
select.orderby {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	max-width: 100%;
	padding: 0.55rem 2.4rem 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2315241B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 14px;
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.woocommerce-ordering select:hover,
.wp-block-woocommerce-catalog-sorting select:hover,
select.orderby:hover {
	border-color: var(--wp--preset--color--primary);
}

.woocommerce-ordering select:focus,
.wp-block-woocommerce-catalog-sorting select:focus,
select.orderby:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.15);
}

/* --- Tasuta tarne edenemisriba (ostukorv) -------------------------------- */

.ffp2ee-freeship {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
}

.ffp2ee-freeship__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
	color: var(--wp--preset--color--contrast);
}

.ffp2ee-freeship__label strong {
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}

.ffp2ee-freeship__track {
	height: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-soft);
	overflow: hidden;
}

.ffp2ee-freeship__fill {
	height: 100%;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	transition: width var(--wp--custom--transition--base);
}

.ffp2ee-freeship.is-reached {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-soft);
}