/* WooCommerce. Kirjutame üle ainult selle, mis disainiga ei haaku. */

.tt-pood { padding-block: var(--wp--preset--spacing--40); }

/* ---------- Arhiiv: päis ---------- */
.woocommerce-products-header { text-align: center; margin-bottom: 26px; }
.woocommerce-products-header__title { margin: 0; }
.woocommerce-products-header .term-description {
	margin: 12px auto 0;
	max-width: 56ch;
	color: var(--wp--preset--color--tekst-teine);
}
.tt-teeleib {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--silt);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silt);
	margin-bottom: 18px;
}
.tt-teeleib a { color: inherit; }

.woocommerce-result-count,
.woocommerce-ordering { color: var(--wp--preset--color--silt); font-size: 14px; }
.woocommerce-ordering select {
	min-height: var(--wp--custom--puute-min);
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	border: 1px solid var(--wp--preset--color--piire-vali);
	border-radius: var(--wp--custom--raadius--sm);
	background: var(--wp--preset--color--pind);
}

/* ---------- Toodete ruudustik ---------- */
.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10);
}

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
/* WC annab li-le protsentuaalse laiuse ja float'i. Meie ruudustik teeb
   veerud ise, nii et li peab oma lahtri ära täitma. Oma klass tõstab
   spetsiifilisust, et see kindlasti võidaks. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.tt-kaart,
.woocommerce-page ul.products li.product.tt-kaart {
	width: auto;
	max-width: none;
	min-width: 0;
	float: none;
	margin: 0;
	clear: none;
}
.tt-kaart__kirjeldus {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--tekst-teine);
}

/* WC lisab oma nupule omad stiilid - meie omad peavad peale jääma */
.woocommerce ul.products li.product .tt-nupp,
.woocommerce a.button.tt-nupp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--tegevus);
	color: #FFFFFF;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 18px;
	border-radius: var(--wp--custom--raadius--sm);
	min-height: var(--wp--custom--puute-min);
	margin: 0;
	text-decoration: none;
}
.woocommerce a.button.tt-nupp:hover { background: var(--wp--preset--color--tegevus-tekst); color: #FFFFFF; }
.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-left: 10px;
	font-size: 14px;
	font-weight: 600;
}
.woocommerce ul.products li.product .price { font-size: inherit; color: inherit; }

/* ---------- Üksik toode ---------- */
.woocommerce div.product { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; align-items: start; }

/* WC annab galeriile ja kokkuvõttele protsendilaiuse ja float'i.
   Ruudustik teeb veerud ise - lisame klassi, et spetsiifilisus võidaks. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary.entry-summary {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--wp--custom--raadius--lg); }
.woocommerce div.product .summary {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.woocommerce div.product .product_title { margin: 0; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--tekst);
	letter-spacing: var(--wp--custom--tahevahe--pealkiri);
}
.woocommerce div.product p.price del { color: var(--wp--preset--color--silt); font-weight: 400; }
.woocommerce div.product form.cart { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--tegevus);
	color: #FFFFFF;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	padding: 15px 24px;
	border: 0;
	border-radius: var(--wp--custom--raadius--sm);
	min-height: var(--wp--custom--puute-min);
}
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--wp--preset--color--tegevus-tekst); color: #FFFFFF; }
.woocommerce .quantity .qty {
	min-height: var(--wp--custom--puute-min);
	width: 80px;
	padding: 10px;
	font-family: inherit;
	font-size: 16px;
	border: 1px solid var(--wp--preset--color--piire-vali);
	border-radius: var(--wp--custom--raadius--sm);
	text-align: center;
}
.woocommerce div.product .product_meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--silt);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silt);
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--joon);
}
.woocommerce div.product .product_meta a { color: inherit; }

/* Sakid toote all */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--wp--preset--color--joon);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 4px;
	font-weight: 600;
	color: var(--wp--preset--color--silt);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--tekst);
	border-bottom-color: var(--wp--preset--color--tekst);
}
.woocommerce div.product section.related { grid-column: 1 / -1; }
.woocommerce div.product section.related > h2 { text-align: center; margin-bottom: 22px; }

/* ---------- Korv ja kassa ---------- */

/*
 * Korv, kassa ja konto EI käi WooCommerce'i malli kaudu, vaid on tavalised
 * lehed, mis renderdavad lühikoodi page.php kaudu. Seega ei saa nad
 * tt-pood ümbrist ja jäävad .tt-artikkel'i 760px lugemislaiusesse.
 * Korvitabel ja summad kõrvuti sinna ei mahu.
 *
 * NB: päris sait kasutab klassikalisi lühikoode, mitte WooCommerce'i
 * plokke. Need stiilid on kirjutatud klassikalise markupi vastu.
 */
.woocommerce-cart .tt-artikkel,
.woocommerce-checkout .tt-artikkel,
.woocommerce-account .tt-artikkel,
.woocommerce-order-received .tt-artikkel {
	max-width: 1180px;
}

/*
 * WooCommerce kasutab korvi summade ja kassa kokkuvõtte pealkirjaks <h2>,
 * mis pärib meie sektsioonipealkirja 38px. Kõrvalkastis on see absurdne.
 */
.woocommerce .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce .woocommerce-billing-fields > h3,
.woocommerce .woocommerce-shipping-fields > h3,
.woocommerce .woocommerce-additional-fields > h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: var(--wp--preset--font-size--alapealkiri, 20px);
	line-height: 1.25;
	margin: 0 0 18px;
}

/* Tabel ja summad kõrvuti, ujumise asemel ruudustik. */
.woocommerce .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	width: 100%;
}
.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	max-width: 420px;
	margin-left: auto;
}

/* Kupongiväli. Vaikimisi on sisend 80px lai ja 29px kõrge - sinna ei
   mahu kupongikood ega saa sõrmega pihta. */
.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	float: left;
	width: 100%;
	max-width: 480px;
}
.woocommerce .coupon #coupon_code,
.woocommerce .coupon input.input-text {
	float: none;
	width: auto;
	flex: 1 1 220px;
	min-width: 0;
	min-height: var(--wp--custom--puute-min);
	padding: 10px 14px;
	font-size: 15px;
	border: 1px solid var(--wp--preset--color--joon);
	border-radius: var(--wp--custom--raadius--sm);
	background: var(--wp--preset--color--pind);
}

/*
 * Veerulaiused. Vaikimisi neelab tühi "eemalda" veerg kogu ülejäägi -
 * mõõdetult 545px risti jaoks ja 225px toote nime jaoks. Ülejääk peab
 * minema nimele, mitte ristile.
 */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove { width: 60px; text-align: center; }
.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail { width: 96px; }
.woocommerce table.cart th.product-name,
.woocommerce table.cart td.product-name { width: auto; }
.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal { width: 110px; white-space: nowrap; }
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity { width: 110px; }

/*
 * Korvi tegevusterida: kupong vasakul, "uuenda ostukorvi" paremal.
 *
 * NB: siin EI tohi panna display:flex lahtrile endale. See lülitab <td>
 * tabeliloogikast välja, colspan="6" lakkab kehtimast ja kogu rida kukub
 * esimese veeru laiusesse. Jääme ujumise juurde, mis colspan'i ei lõhu.
 */
.woocommerce table.cart td.actions {
	padding: 20px 0 0;
	border-bottom: 0;
}
.woocommerce table.cart td.actions::after {
	content: "";
	display: block;
	clear: both;
}
.woocommerce table.cart td.actions > .button,
.woocommerce table.cart td.actions > input[type="submit"] {
	float: right;
}

/* Tootepilt korvis. Vaikimisi tuli 32x46 - kriips, mitte pilt. */
.woocommerce table.cart td.product-thumbnail img,
.woocommerce table.shop_table td.product-thumbnail img {
	width: 72px;
	height: 72px;
	max-width: none;
	object-fit: cover;
	border-radius: var(--wp--custom--raadius--sm);
	display: block;
}

/* Eemaldamisrist. 23x23 on puutesihtmärgina liiga väike. */
.woocommerce table.cart a.remove,
.woocommerce table.shop_table a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--puute-min);
	height: var(--wp--custom--puute-min);
	font-size: 20px;
	line-height: 1;
	border-radius: 999px;
	color: var(--wp--preset--color--silt);
	text-decoration: none;
}
.woocommerce table.cart a.remove:hover,
.woocommerce table.shop_table a.remove:hover {
	background: var(--wp--preset--color--pind-vaikne);
	color: var(--wp--preset--color--tekst);
}

/* Koguse valik. */
.woocommerce .quantity input.qty {
	min-height: var(--wp--custom--puute-min);
	width: 76px;
	padding: 8px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--joon);
	border-radius: var(--wp--custom--raadius--sm);
	background: var(--wp--preset--color--pind);
	font-size: 15px;
}

/* Summade read. */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--joon);
	vertical-align: middle;
}
/* Silt vasakule, summa paremale - vaikimisi kleepusid kokku. */
.woocommerce .cart_totals table.shop_table th { width: 50%; text-align: left; }
.woocommerce .cart_totals table.shop_table td { text-align: right; white-space: nowrap; }
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
	border-bottom: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--tekst);
}
.woocommerce .wc-proceed-to-checkout { padding: 18px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; }

/* Kitsas ekraan: shop_table_responsive muutub kaartideks. Tabeli
   päis peidetakse ja iga lahter saab oma sildi - meie polsterdus
   peab sellega kaasa minema. */
/*
 * Kitsas ekraan. WooCommerce'i shop_table_responsive virnastab lahtrid
 * ridadeks, aga teeb kaks asja, mis meile ei sobi: peidab pisipildi
 * täiesti (display:none) ja jätab ülaltoodud veerulaiused kehtima, nii
 * et lahtrid jäävad 60-110px kitsasteks ribadeks. Siin ehitame iga
 * korvirea korralikuks kaardiks.
 */
@media (max-width: 768px) {
	.woocommerce table.cart,
	.woocommerce table.cart tbody,
	.woocommerce table.cart tr { display: block; width: 100%; }
	.woocommerce table.cart thead { display: none; }

	/* Iga toode omaette kaardiks. */
	.woocommerce table.cart tr.cart_item {
		position: relative;
		background: var(--wp--preset--color--pind);
		border: 1px solid var(--wp--preset--color--joon);
		border-radius: var(--wp--custom--raadius--md);
		padding: 16px 16px 8px;
		margin-bottom: 14px;
	}

	/* Laiuspiirangud maha - need olid lauaarvuti tabeli jaoks. */
	.woocommerce table.cart tr.cart_item td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		width: auto !important;
		text-align: right;
		padding: 10px 0;
		border-bottom: 1px solid var(--wp--preset--color--joon);
	}
	.woocommerce table.cart tr.cart_item td:last-child { border-bottom: 0; }

	.woocommerce table.shop_table_responsive tr td::before {
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--silt);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--silt);
		float: none;
		flex: 0 0 auto;
	}

	/* Pisipilt tagasi nähtavale - ostja tahab näha, mida ta ostab. */
	.woocommerce table.cart tr.cart_item td.product-thumbnail {
		display: block !important;
		border-bottom: 0;
		padding-bottom: 0;
	}
	.woocommerce table.cart tr.cart_item td.product-thumbnail::before { display: none; }
	.woocommerce table.cart td.product-thumbnail img {
		width: 100%;
		height: 160px;
		border-radius: var(--wp--custom--raadius--sm);
	}

	.woocommerce table.cart tr.cart_item td.product-name { text-align: left; font-weight: 600; }
	.woocommerce table.cart tr.cart_item td.product-name::before { display: none; }

	/* Eemaldamisrist kaardi ülanurka, mitte omaette ribaks. */
	.woocommerce table.cart tr.cart_item td.product-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 0;
		border-bottom: 0;
		background: rgba(255, 255, 255, 0.85);
		border-radius: 999px;
	}
	.woocommerce table.cart tr.cart_item td.product-remove::before { display: none; }

	.woocommerce table.cart td.actions { display: block; padding-top: 0; }
	.woocommerce table.cart td.actions > .button,
	.woocommerce table.cart td.actions > input[type="submit"] { float: none; width: 100%; margin-top: 10px; }
	.woocommerce .coupon { float: none; max-width: none; }
	.woocommerce .coupon .button { width: 100%; }
	.woocommerce .cart-collaterals .cart_totals { max-width: none; }
}

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--silt);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silt);
	border-bottom: 2px solid var(--wp--preset--color--tekst);
	padding: 0 12px 10px;
}
.woocommerce table.shop_table td {
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--joon);
	padding: 16px 12px;
}
.woocommerce table.shop_table img { border-radius: var(--wp--custom--raadius--sm); }
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-order,
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-coupon {
	background: var(--wp--preset--color--pind);
	border-radius: var(--wp--custom--raadius--lg);
	padding: 24px;
}
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--wp--custom--puute-min);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	border: 1px solid var(--wp--preset--color--piire-vali);
	border-radius: var(--wp--custom--raadius--sm);
	background: var(--wp--preset--color--pind);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	background: var(--wp--preset--color--pind-pehme);
	border-top: 0;
	border-left: 3px solid var(--wp--preset--color--tegevus);
	border-radius: var(--wp--custom--raadius--sm);
	padding: 16px 18px;
	color: var(--wp--preset--color--tekst);
}
.woocommerce .woocommerce-error { border-left-color: #8A1538; }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { content: none; }

/* ---------- Minu konto ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 24%;
	float: left;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--wp--custom--raadius--sm);
	text-decoration: none;
	color: var(--wp--preset--color--tekst-teine);
	font-weight: 500;
	min-height: var(--wp--custom--puute-min);
	box-sizing: border-box;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--pind-vaikne); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--pind);
}
.woocommerce-account .woocommerce-MyAccount-content { width: 72%; float: right; }

@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}

/* Galerii ei tohi kitsal ekraanil konteinerist välja ulatuda. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image {
	min-width: 0;
	max-width: 100%;
}