/**
Theme Name: Ruthmann
Author: Gravenor
Author URI: https://www.gravenor.ee
Description: desc here
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruthmann
Template: astra
*/

/* ===============================================================
   SISUKORD
   ---------------------------------------------------------------
   1. Üldine paigutus ja tüpograafia
   2. Pood ja kategooriad
   3. Tooteleht: paigutus
   4. Tooteleht: galerii
   5. Tooteleht: sisuplokid
   6. Konfiguraator (Spec Configurator plugin)
   7. Avalehe elemendid

   NB: kogu tootelehe paigutus on ainult siin failis. Ära lisa sama
   Kohandaja "Lisa CSS" alla — see laeb hiljem ja kirjutab siinse
   üle, mis teeb vigade otsimise väga raskeks.
   =============================================================== */


/* ===============================================================
   1. ÜLDINE PAIGUTUS JA TÜPOGRAAFIA
   =============================================================== */

@media (min-width: 922px) {
	.ast-container {
		max-width: 100%;
		padding: 0 60px;
	}
}

@media (min-width: 1200px) {
	.ast-plain-container.ast-no-sidebar #primary {
		margin-top: 0;
		margin-bottom: 0;
	}
}

body.elementor-page .ast-container {
	padding-left: 0;
	padding-right: 0;
}

.site-footer {
	height: 50px;
}

html body,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body button {
	font-family: 'Saira', sans-serif;
}

.kysi-pakkumist-vorm {
	flex-direction: column !important;
}

/* ===============================================================
   2. POOD JA KATEGOORIAD
   =============================================================== */

@media (min-width: 922px) {
	#secondary {
		width: 20%;
		padding-right: 20px !important;
	}
	body.woocommerce-shop #primary {
			width: 80%;
		}

	.ast-woo-shop-archive .site-content > .ast-container {
		max-width: 100%;
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #1a1a1a;
	font-size: 22px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	color: #1a1a1a;
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	margin-top: 1em;
	background: #F08A00;
	color: #fff;
	font-weight: 600;
}

/* Tehnilised näitajad tootekaardil */

.ruthmann-loop-specs {
	margin: 12px 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.ruthmann-loop-specs li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid #eee;
}

.ruthmann-loop-specs li:last-child {
	border-bottom: none;
}

.ruthmann-loop-specs__label {
	color: #666;
}

.ruthmann-loop-specs__value {
	font-weight: 600;
	white-space: nowrap;
	color: #1a1a1a;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	display:none!important;
}

/* Tootekaardi elementide järjekord
   Astra ehitab kaardi oma järjekorras, mistõttu WooCommerce'i hookide
   prioriteedid ei mõju. Flexbox order tõstab specid pealkirja järele. */

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap > * {
	order: 5;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	order: 1;
}

.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	order: 2;
}

.woocommerce ul.products li.product .ruthmann-loop-specs {
	order: 3;
}

.woocommerce ul.products li.product .price {
	order: 2;
}

/* Nupp alati kaardi alaservas
   Tootenimed on eri pikkusega, mistõttu nupp nihkub kaartide vahel
   eri kõrgusele. Kaart venitatakse ühtlaseks ja nupp surutakse alla
   automaatse ülemise marginaaliga. */

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product .specfg-loop-button {
	margin-top: auto;
}

.woocommerce-page .site-main ul.products li.product {
    width: 100%;
    border: 1px solid #d1dae5;
    padding: 10px;
}

/* ===============================================================
   3. TOOTELEHT: PAIGUTUS
   ---------------------------------------------------------------
   Grid, mitte flex: toote plokk sisaldab nii kõrvuti käivaid
   elemente (galerii + kokkuvõte) kui täislaiusega plokke (seotud
   tooted, tabid). Grid lubab mõlemat, ilma laiusi käsitsi
   arvutamata — flex-iga tuli gap iga kord laiusest maha lahutada
   ja täislaiusega plokid sattusid kolmandaks veeruks.

   !important on vajalik, kuna WooCommerce'i enda reeglid kasutavad
   float'i ja on üsna spetsiifilised (sh #content).
   =============================================================== */

body.single-product div.product {
	display: grid !important;
	grid-template-columns: 45% 1fr;
	gap: 40px;
	align-items: start;
}

body.single-product #content div.product div.images,
body.single-product div.product div.images {
	float: none !important;
	position: sticky !important;
	top: 100px;
	align-self: start;
	grid-row: 1;
	bottom: 40px;
}

body.single-product #content div.product div.summary,
body.single-product div.product div.summary {
	float: none !important;
	min-width: 0;
	grid-row: 1;
}

/* Peidab hiirega-peale-mine suurendatud pildi overlay, aga jätab galerii ja ikooni alles */
.woocommerce-product-gallery .zoomImg {
  display: none !important;
}

/* 2. Vihjab kliendile, et pilti saab klõpsates suureks vaadata */
.woocommerce-product-gallery__image:hover {
  cursor: pointer;
}

@media (max-width: 991px) {
	body.single-product div.product {
		grid-template-columns: 1fr;
	}

	body.single-product div.product div.images,
	body.single-product div.product div.summary {
		position: static !important;
	}
	
	body.single-product div.product {
		grid-template-columns: 1fr;
	}

	body.single-product #content div.product div.images,
	body.single-product div.product div.images,
	body.single-product #content div.product div.summary,
	body.single-product div.product div.summary {
		/*
		 * grid-row: 1 hoiab töölaual mõlemat sama rea sees, et sticky
		 * galerii lõpeks koos kokkuvõttega. Mobiilis peavad nad aga
		 * üksteise alla minema, muidu tekib kõrvale kaudne veerg.
		 */
		grid-row: auto;
		position: static !important;
		width: auto !important;
	}
	.woocommerce-js div.product div.images {
    margin-bottom: 0px;
	}
}

/* ---------------------------------------------------------------
   Kokkuvõtte elementide järjekord
   ---------------------------------------------------------------
   Astra ehitab kokkuvõtte oma järjekorras ja WooCommerce'i hookide
   prioriteedid seda ei mõjuta. Flexbox order tõstab elemendid
   visuaalselt õigesse kohta, ilma HTML-i puutumata.

   Soovitud järjekord: teekond -> pealkiri -> hüved -> hind -> nupp
   --------------------------------------------------------------- */

.single-product .entry-summary,
.single-product .summary {
	display: flex;
	flex-direction: column;
}

/* Vaikimisi jäävad kõik elemendid oma järjekorda... */
.single-product .entry-summary > *,
.single-product .summary > * {
	order: 6;
}

/* ...ja ainult need tõstetakse ette. */

.single-product .entry-summary > .ast-breadcrumbs-wrapper,
.single-product .summary > .ast-breadcrumbs-wrapper,
.single-product .entry-summary > .ast-breadcrumbs,
.single-product .summary > .ast-breadcrumbs,
.single-product .entry-summary > .woocommerce-breadcrumb,
.single-product .summary > .woocommerce-breadcrumb {
	order: 1;
}

.single-product .entry-summary > .product_title,
.single-product .summary > .product_title {
	order: 2;
}

.single-product .entry-summary > .ruthmann-quick-stats,
.single-product .summary > .ruthmann-quick-stats {
	order: 3;
}

.single-product .entry-summary > .price,
.single-product .summary > .price {
	order: 4;
}

.single-product .entry-summary > .specfg-price-cta,
.single-product .summary > .specfg-price-cta {
	order: 5;
	margin-top: 8px;
}

/* ---------------------------------------------------------------
   Astra määrab galeriile ja kokkuvõttele fikseeritud laiused
   (.ast-woocommerce-container selektoritega). Grid-i veerud ei
   mõju, kuni need on peal — seega tühistame need ja laseme grid'il
   laiused määrata.
   --------------------------------------------------------------- */

@media (min-width: 922px) {
	.woocommerce #content .ast-woocommerce-container div.product div.images,
	.woocommerce .ast-woocommerce-container div.product div.images,
	.woocommerce-page #content .ast-woocommerce-container div.product div.images,
	.woocommerce-page .ast-woocommerce-container div.product div.images,
	.woocommerce #content .ast-woocommerce-container div.product div.summary,
	.woocommerce .ast-woocommerce-container div.product div.summary,
	.woocommerce-page #content .ast-woocommerce-container div.product div.summary,
	.woocommerce-page .ast-woocommerce-container div.product div.summary {
		width: auto;
	}
}

/* ===============================================================
   4. TOOTELEHT: GALERII
   ---------------------------------------------------------------
   Sticky element kleepub alles siis, kui see mahub ekraanile. Kui
   galerii on kõrgem, kerib see esmalt lõpuni ja pisipildid jäävad
   allapoole nähtavat ala. Piirame kogu galerii kõrguse ekraaniga ja
   laseme peapildil ülejäänud ruumi täita.
   =============================================================== */

/*.single-product div.product div.images.woocommerce-product-gallery {
	max-height: calc(100vh - 140px); /* 100vh miinus päis ja hingamisruum 
	display: flex;
	flex-direction: column;
}
*/



/* ---------------------------------------------------------------
   Galerii: peapildi kõrgus piiratud, pisipildid alati nähtaval
   ---------------------------------------------------------------
   Piirang on peapildi konteineril (.flex-viewport), mitte galeriil
   ega pildil endal — nii jäävad pisipildid piirangust välja ja on
   alati näha, ilma et FlexSlideri arvutatud mõõtudega võitleks.
   --------------------------------------------------------------- */

.single-product div.product div.images .flex-viewport {
	max-height: 60vh;
	overflow: hidden;
}

.single-product div.product div.images .flex-viewport img {
	max-height: 60vh;
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
	object-fit: contain;
}

.woocommerce-js div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    border: 1px solid #e0e0e0;
}

/* Mobiilis piirangut pole vaja — seal kerib leht tervikuna */
@media (max-width: 921px) {
	.single-product div.product div.images.woocommerce-product-gallery {
		max-height: none;
		display: block;
	}

	.single-product div.product div.images .woocommerce-product-gallery__image,
	.single-product div.product div.images .woocommerce-product-gallery__image img {
		height: auto !important;
	}
}


/* ===============================================================
   5. TOOTELEHT: SISUPLOKID
   =============================================================== */
body.single-product #content {
	padding-top:40px;
	padding-bottom: 40px;
}

.woocommerce-js div.product .product_title {
	margin: 0 0 5px;
	font-size: 38px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price {
	color: #1a1a1a !important;
	font-family: 'Saira', sans-serif !important;
	font-size: 30px !important;
	font-weight: 600 !important;
}

body.single-product section.related.products {
	display:none;
}

/* --- Hüved (kiirstatistika) ------------------------------------ */

.ruthmann-quick-stats {
	display: flex;
	gap: 12px;
	margin: 16px 0;
	flex-wrap: nowrap;
}

.ruthmann-quick-stat {
	/*
	 * flex-basis: 0 tähendab, et kastid jagavad ruumi võrdselt sisu
	 * pikkusest sõltumata. Ilma selleta saaks pikema sildiga kast
	 * rohkem ruumi kui lühem.
	 */
	flex: 1 1 0;
	min-width: 0;
	background: #f6f6f6;
	padding: 15px;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ruthmann-quick-stat .stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	line-height: 1.3;
}

.ruthmann-quick-stat .stat-value {
	font-size: 18px;
	font-weight: 600;
	color: var( --specfg-brand, #1a1a1a );
	line-height: 1.2;
}

/* Kitsal ekraanil kaks rida, et tekst ei muutuks loetamatuks */
@media (max-width: 600px) {
	.ruthmann-quick-stats {
		flex-wrap: wrap;
	}

	.ruthmann-quick-stat {
		flex: 1 1 calc(50% - 6px);
	}
}

/* --- Lühikirjeldus --------------------------------------------- */

.woocommerce-product-details__short-description {
	padding: 30px 0 40px;
	border-top: 1px solid #e0e0e0!important;
	border-bottom: 1px solid #e0e0e0!important;
}

body.single-product ul {
	padding-top: 20px;
}

/* --- Tehniliste andmete tabel ---------------------------------- */

.ruthmann-specs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 40px 0;
}

.ruthmann-specs-table th,
.ruthmann-specs-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e0e0e0!important;
}

.ruthmann-specs-table th {
	font-weight: 600;
	width: 40%;
}

.ruthmann-specs-table tbody > tr:nth-child(odd) > td,
.ruthmann-specs-table tbody > tr:nth-child(odd) > th {
	background-color: hsla(0, 0%, 50%, 0.071);
}

/* --- Kirjeldus -------------------------------------------------- */

.ruthmann-description {
	margin: 40px 0;
	padding: 30px 0;
	line-height: 1.6;
	border-top: 1px solid #e0e0e0!important;
	border-bottom: 1px solid #e0e0e0!important;
}


/* ===============================================================
   6. KONFIGURAATOR (Spec Configurator plugin)
   ---------------------------------------------------------------
   Baaskujundus tuleb pluginast (assets/css/configurator.css). Siia
   lisa ainult see, mida tahad Ruthmanni jaoks teistmoodi — teema
   CSS laeb hiljem, seega sama spetsiifilisusega reegel kirjutab
   plugina oma üle.

   Värve ei pea siin muutma: need tulevad plugina seadetest
   (Seaded -> Kujundus) muutujatena --specfg-brand jne.

   Kui tahad kogu plugina kujunduse välja lülitada ja nullist teha:
       add_filter( 'specfg_enqueue_default_styles', '__return_false' );
   =============================================================== */

.specfg-price-cta {
	margin: 0 0 40px;
}

.specfg-price-cta__button {
	padding: 18px 20px;
	font-size: 17px;
	font-weight: 600;
	transition: background 0.15s ease;
}


/* ===============================================================
   7. AVALEHE ELEMENDID
   =============================================================== */

.avaleht-kategooria {
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.avaleht-kategooria:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #F08A00 !important;
}

.avaleht-kategooria:hover .pilt {
	border-color: #fff !important;
}

.avaleht-br2ndid {
	clip-path: polygon(13% 0%, 100% 0%, 100% 100%, 0% 100%);
}