/* =========================================================================
   PEWC — personaliseerimisväljad tootelehel
   =========================================================================

   NB: siin muudetakse ainult VÄLJANÄGEMIST. Plugina templated jäävad
   puutumata, funktsionaalsus ja väljade loogika ei muutu. Nii ei teki
   plugina uuendustel hooldusvõlga.

   Klassid tulevad Product Extras for WooCommerce plugina enda markupist.
   ========================================================================= */

.pewc-product-extra-groups-wrap {
	margin: var(--wp--preset--spacing--40) 0;
}


/* -------------------------------------------------------------------------
   Väljagrupp — kaardina, mitte lahtise vormirullina
   ---------------------------------------------------------------------- */

.pewc-group-wrap {
	background: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.pewc-group-heading-wrapper {
	margin-bottom: var(--wp--preset--spacing--30);
}

.pewc-group-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.pewc-product-extra-groups {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pewc-item { margin: 0; }


/* -------------------------------------------------------------------------
   Väljasilt
   ---------------------------------------------------------------------- */

.pewc-field-label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--contrast);
}

.pewc-field-label .required {
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.pewc-description {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
	margin: 0.25rem 0 0.5rem;
	line-height: 1.5;
}

.pewc-field-price,
.pewc-checkbox-price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
	font-weight: 400;
}


/* -------------------------------------------------------------------------
   Sisestusväljad
   ---------------------------------------------------------------------- */

.pewc-form-field,
.pewc-item input[type="text"],
.pewc-item input[type="number"],
.pewc-item input[type="email"],
.pewc-item textarea,
.pewc-item select {
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.7rem 0.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pewc-item textarea { min-height: 6.5rem; resize: vertical; }

.pewc-form-field:focus,
.pewc-item input:focus,
.pewc-item textarea:focus,
.pewc-item select:focus {
	outline: 0;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(67 132 150 / 15%);
}

.pewc-form-field::placeholder { color: var(--wp--preset--color--contrast-soft); opacity: 0.7; }


/* -------------------------------------------------------------------------
   Raadionupud ja märkeruudud — tekstivalikud
   ---------------------------------------------------------------------- */

.pewc-radio-wrapper,
.pewc-checkbox-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.pewc-radio-form-label,
.pewc-checkbox-form-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	font-size: 0.9375rem;
	transition: border-color 160ms ease, background 160ms ease;
}

.pewc-radio-form-label:hover,
.pewc-checkbox-form-label:hover {
	border-color: var(--wp--preset--color--primary);
}

.pewc-radio-form-field:checked + .pewc-radio-form-label,
.pewc-radio-form-label:has(input:checked),
.pewc-checkbox-form-label:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
}


/* -------------------------------------------------------------------------
   Pildivalikud — värvid, materjalid, kirjastiilid
   ---------------------------------------------------------------------- */

/*
 * Pildivalikute PAIGUTUS jääb PEWC enda hooleks — plugin arvestab siin
 * grupi veergude seadega (`pewc-columns-N`) ja teeb seda õigesti.
 * Meie muudame ainult seda, kuidas üksik valik välja näeb.
 */

.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper {
	position: relative;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.4rem;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease;
}

.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper:hover {
	border-color: var(--wp--preset--color--secondary-deep);
	transform: translateY(-1px);
}

/* Silt on kogu kaardi klikitav pind */
.pewc-radio-image-wrapper > label,
.pewc-checkbox-image-wrapper > label {
	display: block;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

.pewc-radio-image-wrapper img,
.pewc-checkbox-image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

.pewc-radio-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
}

.pewc-radio-image-desc,
.pewc-radio-option-text {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: center;
	color: var(--wp--preset--color--contrast-soft);
}

.pewc-radio-image-wrapper:has(input:checked) .pewc-radio-image-desc,
.pewc-radio-image-wrapper:has(input:checked) .pewc-radio-option-text {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Tekstipõhine swatch (nt kirjastiili näidis) */
.pewc-text-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
}

/* Värvinäidis */
.pewc-hex {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid rgb(0 0 0 / 12%);
}


/* -------------------------------------------------------------------------
   Vihjenupp
   ---------------------------------------------------------------------- */

.pewc-tooltip-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.35rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
}


/* -------------------------------------------------------------------------
   Sammud, tabid, akordion — PEWC enda paigutusrežiimid
   ---------------------------------------------------------------------- */

.pewc-tabs-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.pewc-tab {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.pewc-tab.active,
.pewc-tab.pewc-tab-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.pewc-step-buttons {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.pewc-next-step-button,
.pewc-prev-step-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	padding: 0.7em 1.4em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
}

.pewc-prev-step-button {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}


/* -------------------------------------------------------------------------
   Hinna kokkuvõte — PEIDETUD (Riinu otsus)

   PEWC kordab siin põhihinda, mis on lehel juba olemas. Valikute
   lisatasud on nähtavad valikute endi juures (+3.00€). Kui kunagi
   tahad kogusummat tagasi, kustuta see display:none plokk.
   ---------------------------------------------------------------------- */

.pewc-total-field,
.pewc-grand-total,
.pewc-product-total-price {
	display: none !important;
}


/* -------------------------------------------------------------------------
   Peidetud väljad — tingimuslik loogika
   ---------------------------------------------------------------------- */

.pewc-hidden-field { display: none; }


/* =========================================================================
   Ülekirjutused
   =========================================================================

   PEWC väljastab osa stiile kahest kohast, mis tavalist kaskaadi võidavad:

   1. Inline <style> plokk lehe sees, mis genereeritakse plugina admini
      kujundusseadetest (pealkirja suurus, swatch'ide äärise värv jne).
      See asub dokumendis meie failist hiljem.
   2. `style.css` reeglid suurema spetsiifilisusega, nt
      `.pewc-radio-images-wrapper:not(.pewc-component-wrapper)`.

   Võte: klassinime kordamine (`.x.x`). See tõstab spetsiifilisust ilma
   struktuuri kohta eeldusi tegemata. `.rz-product` ankrut siin kasutada ei
   saa, sest `.pewc-preset-style` asub DOM-is sellest kõrgemal.

   TAGAJÄRG: nende omaduste puhul ei mõju enam PEWC admini kujundusseaded —
   allikas on see fail. Kui tahad mõnda neist plugina alt juhtida, kustuta
   vastav reegel siit.
   ========================================================================= */

.rz-product .pewc-group-heading-wrapper .pewc-group-heading {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Swatch'ide ääris — PEWC inline: `.pewc-preset-style .pewc-radio-image-wrapper` */
.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper {
	border-color: var(--wp--preset--color--border);
}

.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper:hover {
	border-color: var(--wp--preset--color--secondary-deep);
}

.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper:has(input:checked),
.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper.checked,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.checked {
	border-color: var(--wp--preset--color--primary);
}

/* Sisestusväljad — PEWC inline: `.pewc-style-simple .pewc-item input[type="text"]` */
.pewc-item input.pewc-form-field.pewc-form-field,
.pewc-item textarea.pewc-form-field.pewc-form-field,
.pewc-item select.pewc-form-field.pewc-form-field {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.7rem 0.8rem;
}

/* Teksti-raadionupud ja märkeruudud */
.pewc-radio-form-label.pewc-radio-form-label.pewc-radio-form-label,
.pewc-checkbox-form-label.pewc-checkbox-form-label.pewc-checkbox-form-label {
	border-color: var(--wp--preset--color--border);
	border-radius: 0;
}

.pewc-radio-form-label.pewc-radio-form-label.pewc-radio-form-label:hover,
.pewc-checkbox-form-label.pewc-checkbox-form-label.pewc-checkbox-form-label:hover {
	border-color: var(--wp--preset--color--primary);
}

.pewc-item input.pewc-form-field.pewc-form-field:focus,
.pewc-item textarea.pewc-form-field.pewc-form-field:focus,
.pewc-item select.pewc-form-field.pewc-form-field:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(67 132 150 / 15%);
}



/* -------------------------------------------------------------------------
   Mobiil
   ---------------------------------------------------------------------- */

@media (max-width: 600px) {

	.pewc-group-wrap { padding: var(--wp--preset--spacing--30); }

	/* Sõrmesõbralik puutepind */
	.pewc-radio-form-label,
	.pewc-checkbox-form-label { padding: 0.7rem 1rem; }
}


/* =========================================================================
   Sammud-režiim (PEWC "Display groups as: Steps")
   ========================================================================= */

/* Samburiba — nummerdatud sammud nagu uues kujunduses */
.pewc-steps-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--wp--preset--spacing--30);
	counter-reset: rz-step;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0 0 var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.pewc-steps-wrapper .pewc-tab {
	counter-increment: rz-step;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-soft);
	cursor: pointer;
	background: none;
	border: 0;
	transition: color 160ms ease;
}

.pewc-steps-wrapper .pewc-tab::before {
	content: counter(rz-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	flex: 0 0 auto;
	transition: background 160ms ease, color 160ms ease;
}

.pewc-steps-wrapper .pewc-tab:hover { color: var(--wp--preset--color--contrast); }

.pewc-steps-wrapper .pewc-tab.active-tab {
	color: var(--wp--preset--color--contrast);
}

.pewc-steps-wrapper .pewc-tab.active-tab::before {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Sammunupud Edasi/Tagasi */
.pewc-step-buttons {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce .pewc-step-buttons a.pewc-next-step-button,
.pewc-step-buttons .pewc-next-step-button {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.6em;
	border-radius: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 160ms ease;
}

.woocommerce .pewc-step-buttons a.pewc-next-step-button:hover,
.pewc-step-buttons .pewc-next-step-button:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Tagasi-nupp tagasihoidlikum kui Edasi */
.woocommerce .pewc-step-buttons a.pewc-next-step-button[data-direction="previous"],
.pewc-step-buttons .pewc-next-step-button[data-direction="previous"] {
	background: transparent;
	color: var(--wp--preset--color--contrast-soft);
	border: 1px solid var(--wp--preset--color--border);
}

.woocommerce .pewc-step-buttons a.pewc-next-step-button[data-direction="previous"]:hover,
.pewc-step-buttons .pewc-next-step-button[data-direction="previous"]:hover {
	background: var(--wp--preset--color--base-soft);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 600px) {
	.pewc-steps-wrapper { gap: 0.25rem var(--wp--preset--spacing--20); }
	.pewc-steps-wrapper .pewc-tab { font-size: 0.75rem; }
	/* Kitsal ekraanil ainult numbrid, aktiivsel ka nimi */
	.pewc-steps-wrapper .pewc-tab:not(.active-tab) { font-size: 0; gap: 0; }
	.pewc-steps-wrapper .pewc-tab:not(.active-tab)::before { font-size: 0.75rem; }
}


/* -------------------------------------------------------------------------
   Mobiil: pildivalikud 2 kaupa kõrvuti
   (PEWC laob kitsal ekraanil ühe kaupa ja pildid lähevad hiiglaslikuks)
   ---------------------------------------------------------------------- */

@media (max-width: 782px) {

	.pewc-radio-images-wrapper.pewc-radio-images-wrapper:not(.pewc-component-wrapper),
	.pewc-checkboxes-images-wrapper.pewc-checkboxes-images-wrapper:not(.pewc-component-wrapper) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--20);
	}

	/* PEWC arvutab kaardi laiuse veeruseadest — grid'is peab olema 100% */
	.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper,
	.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper {
		width: 100%;
		max-width: none;
		margin: 0;
		box-sizing: border-box;
	}
}


/* =========================================================================
   Variatsiooninupud ja koguse stepper (variation-pills.js)
   ========================================================================= */

/* NB: width/min-width !important — muidu võidab mõni laiem select-reegel
   ja nähtamatu 896px kast venitab lehe horisontaalselt kerivaks
   (Riinu leitud viga 20.08). */
.rz-var-hidden {
	position: absolute !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip-path: inset(50%);
}

.rz-var-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.rz-var-pill {
	padding: 0.55rem 0.95rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease;
}

.rz-var-pill:hover { border-color: var(--wp--preset--color--primary); }

.rz-var-pill.is-active {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.rz-var-pill.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Variatsioonitabel ilma tabelivälimuseta */
form.variations_form table.variations,
form.variations_form table.variations td,
form.variations_form table.variations th {
	border: 0;
	padding: 0;
	margin: 0;
}

form.variations_form table.variations label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.9375rem;
}

form.variations_form .reset_variations {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
}

/* Koguse stepper */
.rz-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--base);
}

.rz-qty input[type="number"] {
	border: 0 !important;
	background: var(--wp--preset--color--base) !important;
	width: 3rem !important;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.rz-qty input[type="number"]::-webkit-outer-spin-button,
.rz-qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rz-qty-btn {
	width: 42px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 1.1rem;
	cursor: pointer;
	transition: color 160ms ease;
}

.rz-qty-btn:hover { color: var(--wp--preset--color--primary); }


/* -------------------------------------------------------------------------
   Valikunupud kompaktsemaks (Riinu tagasiside) + pikad valikud kõrvuti
   ---------------------------------------------------------------------- */

.rp-opt {
	padding: 0.55rem 0.95rem !important;
	font-size: 0.875rem !important;
}

/* Tehnika ja stiilivalikud: kaks kaarti kõrvuti, väiksem kiri */
.rp-field[data-key="tehnika"] .rp-options,
.rp-field[data-key="grav_stiil"] .rp-options,
.rp-field[data-key="temb_stiil"] .rp-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--20);
}

.rp-field[data-key="tehnika"] .rp-opt,
.rp-field[data-key="grav_stiil"] .rp-opt,
.rp-field[data-key="temb_stiil"] .rp-opt {
	justify-content: center;
	text-align: center;
	font-size: 0.8125rem !important;
	padding: 0.6rem 0.5rem !important;
}