/*
Theme Name:   M22 Child
Theme URI:    https://www.m22.lt
Description:  GeneratePress vaikine tema m22.lt parduotuvei. Visi savi stiliai ir kodas rasomi cia, kad islikai po temos atnaujinimu.
Author:       M22
Template:     generatepress
Version:      1.0.0
Text Domain:  m22-child
*/

/* Savi stiliai rasomi zemiau. */

/* ==========================================================================
   GLOBALUS STILIUS  (2026-09-23)
   Vienas sriftas (Inter), juoda ir balta, staciakampiai kampai.
   Spalva - tik virsutineje juostoje.
   Palete valdoma GeneratePress globaliose spalvose (Isvaizda > Tinkinti > Spalvos).
   Cia aprasomos tik komponentu detales, kuriu nustatymai neapima.
   Norint viska atsukti: istrinti si bloka + atstatyti GP nustatymus is
   'm22_gp_backup_pre_style'.
   ========================================================================== */

:root {
	--m22-riba:   #e3e3e3;   /* plonos ribos */
	--m22-pilka:  #8a8a8a;   /* antrinis tekstas */
	--m22-gutter: 50px;      /* soninis turinio tarpas (GP: content_left/right) */
	--m22-turinio-apacia: 72px;  /* GP content_bottom - reikia zemelapio pritraukimui */
	--m22-kortele: clamp(200px, 20vw, 260px);  /* produkto korteles plotis juostose.
	   Miniatiuros nuo 2026-09-23 yra 300x400, todel iki 300px nuotrauka
	   niekada nera ispuciama - tik mazinama, taigi isleika ryski.
	   Rodykliu vertikale skaiciuojama is sio kintamojo. */
}

/* --- Staciakampiai kampai visur --- */
button,
input,
select,
textarea,
.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce span.onsale,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-radius: 0;
}

/* --- Laukai: plona riba, be seseliu --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
	border: 1px solid var(--m22-riba);
	box-shadow: none;
}

/* ==========================================================================
   Produktu kortele (sarase)
   ========================================================================== */

/* Korteliu tinklelis.

   WooCommerce kortele deda kaip plaukiojancius (float) blokus su procentiniu
   plociu. Tada kiekviena kortele yra tokio auksto, kokio jos turinys, ir jei
   vieno pavadinimas trijų eiluciu, o kaimyno dvieju - kaina su mygtuku
   nusislenka zemiau. Kortelese viduje lygiavimas jau numatytas (zr. .price ir
   .button zemiau), bet jis veikia tik tada, kai pacios korteles vienodo
   auksto.

   Todel sarasas paverciamas tinkleliu (grid): jame vienos eiles langeliai
   savaime tempiasi iki auksciausio. Slankiojantiems sarasams (.m22-slider-section)
   ir rekomendacijoms tai netaikoma - ju taisykles failo apacioje perrasо sia. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 3.8%;
	row-gap: 2.992em;
	margin: 0 0 1em;
}

.woocommerce ul.products.columns-1 { grid-template-columns: minmax(0, 1fr); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* WooCommerce "clearfix" tinklelyje virstu tusciu langeliu */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

/* Nuimam float'us ir procentinius plocius - tinklelis juos jau paskirste */
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Telefone - dvi kortelės eilėje, siauresnis tarpas */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 32px;
	}
}

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

/* Vienodo dydzio nuotraukos. WooCommerce jau kerpa i 3:4 (200x267),
   todel naudojam ta pacia proporcija - kvadratas be reikalo paliktu tuscios vietos.
   Selektorius be "a", nes GP ideda nuotrauka i savo div.wc-product-image. */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .wc-product-image img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	background: #fff;
}

/* Pavadinimas: NE didziosiomis (tai h2, todel paveldi h2 stiliu) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	padding: 0;
	margin: 0 0 6px;
}

.woocommerce ul.products li.product .star-rating {
	font-size: 12px;
	margin: 0 0 6px;
}

/* Kaina nustumiama i korteles apacia, kad visose kortelese butu tame
   paciame aukstyje. Pavadinimai buna vienos, dvieju ar trijų eiluciu,
   todel be sito kainos "sokineja".

   Kaina guli NE tiesiogiai korteleje, o WooCommerce nuorodos viduje
   kartu su nuotrauka ir pavadinimu. Todel pati nuoroda paverciama
   flex stulpeliu ir istempiama per visa likusi auksti - tik tada
   "margin-top: auto" turi ka stumti. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.woocommerce ul.products li.product .price {
	margin: auto 0 14px !important;
	font-size: 15px;
	font-weight: 600;
	color: #000;
}

.woocommerce ul.products li.product .price del {
	color: var(--m22-pilka);
	font-weight: 400;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 600;
}

/* Mygtukas prilipdytas prie korteles apacios ir per visa plotį.
   Jei kaina yra, ji jau nustume viska zemyn - tada mygtukui tarpo
   nebereikia (zr. taisykle po siuo bloku). */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	width: 100%;
	text-align: center;
	padding: 13px 10px;
	line-height: 1.2;
}

.woocommerce ul.products li.product .added_to_cart {
	margin-top: 8px;
	font-size: 12px;
}

/* Nuolaidos zymeklis: be remelio ir be fono - tik uzrasas.
   body priesakyje - temos kurejo (inline) taisykle deda balta fona. */
body .woocommerce span.onsale {
	background: none;
	color: #000;
	border: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 4px 9px;
	min-width: 0;
	min-height: 0;
	line-height: 1.3;
	top: 10px;
	left: 10px;
	right: auto;
	margin: 0;
}

/* ==========================================================================
   Kategorijos puslapio virsus
   ========================================================================== */

.woocommerce-breadcrumb {
	font-size: 12px;
	letter-spacing: .3px;
	color: var(--m22-pilka);
	margin-bottom: 18px;
}

.woocommerce-breadcrumb a {
	color: var(--m22-pilka);
}

.woocommerce-breadcrumb a:hover {
	color: #000;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: 13px;
	color: var(--m22-pilka);
}

/* ==========================================================================
   Soniniai valdikliai (laikinai - veliau keliami i filtru stalciu)
   ========================================================================== */

.widget-area .widget .widget-title {
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--m22-riba);
}

.widget-area .widget ul li {
	font-size: 14px;
	line-height: 1.5;
	padding: 4px 0;
}

.widget-area .widget ul li a {
	color: #000;
}

.widget-area .widget .count {
	color: var(--m22-pilka);
	font-size: 12px;
}

/* ==========================================================================
   Produkto puslapis
   ========================================================================== */

/* Produkto pavadinimas - ne didziosiomis (skirtingai nei puslapiu antrastes) */
.woocommerce div.product .product_title {
	text-transform: none;
	letter-spacing: normal;
	font-size: 26px;
	line-height: 1.25;
	margin-bottom: 10px;
}

/* Kiekis virsuje, "I krepseli" po juo per visa stulpelio ploti */
.woocommerce div.product form.cart::after {
	content: "";
	display: block;
	clear: both;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	display: inline-flex;   /* GP eilute: -, laukelis, + */
	align-items: stretch;
	width: auto;
	margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 22px;
	font-weight: 600;
	color: #000;
}

.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .qty {
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-radius: 0;
}

/* "I krepseli" per visa desines stulpelio ploti - kaip pavyzdyje */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	float: none;
	display: block;
	width: 100%;
	padding: 16px 24px;
	font-size: 14px;
	letter-spacing: 1px;
}

/* ==========================================================================
   Poraste (juoda)
   ========================================================================== */

.site-footer .footer-widgets,
.site-footer .site-info {
	border-top: none;
}

/* Juodame fone visas tekstas baltas. Blokuose (adresas, meniu, soc. tinklai)
   spalva nenurodyta, todel jie paveldedavo juoda ir buvo nematomi. */
.site-footer .footer-widgets,
.site-footer .footer-widgets p,
.site-footer .footer-widgets li,
.site-footer .footer-widgets a,
.site-footer .footer-widgets strong,
.site-footer .footer-widgets h1,
.site-footer .footer-widgets h2,
.site-footer .footer-widgets h3,
.site-footer .footer-widgets h4,
.site-footer .footer-widgets h5,
.site-footer .footer-widgets h6 {
	color: #fff;
}

.site-footer .footer-widgets h1,
.site-footer .footer-widgets h2,
.site-footer .footer-widgets h3,
.site-footer .footer-widgets h4 {
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 14px;
}

.site-footer .footer-widgets ul {
	list-style: none;
	margin-left: 0;
}

.site-footer .footer-widgets li {
	padding: 4px 0;
	font-size: 14px;
}

.site-footer .footer-widgets p {
	font-size: 14px;
	line-height: 1.7;
}

.site-footer a:hover,
.site-footer .footer-widgets a:hover {
	color: var(--m22-pilka);
}

.site-footer .site-info {
	font-size: 12px;
	letter-spacing: .5px;
	color: var(--m22-pilka);
}

/* ==========================================================================
   Slapuku juosta (Cookie Notice)
   Spalvos nustatytos papildinio nustatymuose; cia tik teksto spalva
   mygtukuose - jos papildinys leisti keisti neduoda.
   ========================================================================== */

/* Papildinys naudoja .cn-button:not(.cn-button-custom) - specifiskesni
   selektoriu nei paprastas .cn-button, todel prirasom elemento varda. */
#cookie-notice button.cn-button,
#cookie-notice a.cn-button,
#cookie-notice button.cn-button:not(.cn-button-custom),
#cookie-notice a.cn-button:not(.cn-button-custom) {
	color: #000;
	border-radius: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 10px 20px;
}

#cookie-notice button.cn-button:hover,
#cookie-notice a.cn-button:hover {
	background-color: var(--m22-riba) !important;
}

#cookie-notice .cookie-notice-container {
	font-size: 13px;
	padding: 16px 20px;
}


/* --- Promo juosta virsuje --- */
.m22-promo {
	margin: 0;
	/* Dydi, stori, DIDZIASIAS ir tarpus tarp raidziu nustato GP
	   virsutines juostos tipografija (dabar 14px / 700). Cia nieko
	   neperrasom, kitaip nustatymas neveiktu. */
}

/* --- Soc. tinklu nuorodos porasteje --- */
.m22-social {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
}
.m22-social a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.m22-social a:hover {
	border-bottom-color: transparent;
}

/* ==========================================================================
   Produktu juostos (horizontalus slinkimas)
   Be jokios karuseliu bibliotekos: flex + scroll-snap.
   Telefone slenkama pirstu natūraliai, kompiuteryje - rodyklemis (zr. functions.php).
   ========================================================================== */

.m22-slider-section {
	position: relative;
}

.m22-slider-section ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 4px 0 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	list-style: none;
}

.m22-slider-section ul.products::before,
.m22-slider-section ul.products::after {
	content: none;
}

.m22-slider-section ul.products > li.product {
	flex: 0 0 var(--m22-kortele);
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
	float: none !important;
	clear: none !important;
}

/* Rodykles - tik ten, kur yra tikslus zymeklis (ne liestukiniai ekranai) */
button.m22-slider-arrow {
	position: absolute;
	top: 50%;                      /* bazine reiksme (hero, galerija) */
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	width: 30px;
	height: 60px;
	padding: 0;
	border: 0;                     /* be remelio */
	border-radius: 0;              /* be apskritimo */
	background: none;
	color: var(--contrast, #000);
	font-size: 40px;               /* buvo 20px */
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease;
}

button.m22-slider-arrow:hover {
	color: var(--contrast-2, #5a5a5a);
}

.m22-slider-arrow[hidden] {
	display: none !important;
}

/* Rodykle - 30px placio, norime 6px tarpelio iki produkto.
   Konteineris turi 50px sonini tarpa (--m22-gutter), todel poslinkis
   nuo jo krasto = 50 - 30 - 6 = 14px. */
button.m22-slider-arrow--prev { left: calc(var(--m22-gutter) - 36px); }
button.m22-slider-arrow--next { right: calc(var(--m22-gutter) - 36px); }

/* Produktu juostose rodykle statoma tiksliai ties nuotraukos viduriu:
   antraste (27) + jos marza (14) + saraso vidus (4) = 45px,
   pliusas puse nuotraukos aukscio = korteles plotis x 4/3 / 2. */
.m22-slider-section button.m22-slider-arrow {
	top: calc(45px + var(--m22-kortele) * 2 / 3);
}

@media (hover: hover) and (pointer: fine) {
	.m22-slider-section.is-scrollable .m22-slider-arrow {
		display: block;
	}
}

/* Juostos antraste su nuoroda "Rodyti daugiau" */
.m22-slider-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.m22-slider-head h2,
.m22-slider-head h1 {
	margin: 0;
}

.m22-slider-more {
	white-space: nowrap;
}


/* Antrastes virs slankikliu ("Naujienos:", "Nuolaidos:") - kaireje.
   WordPress vidiniam konteineriui prideda margin:auto, todel flex viduje
   jis atsistodavo per vidurį. Nuimam tik ta centravima. */
.m22-slider-head > .wp-block-group__inner-container {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	/* Idetas blokas gauna dar viena 50px sonini tarpa - del to antraste
	   nesutapdavo su produktais. */
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Hero juosta - teksto kortele + nuotrauka (pagal cultbeauty.com)
   Kiekviena skaidre vienodos sandaros: virsutinis uzrasas, antraste,
   tekstas ir DU mygtukai. Todel slankiklis atrodo vientisas, nepaisant to,
   kokia nuotrauka idesime.
   Telefone kortele atsiduria PO nuotrauka, mygtukai - per visa ploti.
   ========================================================================== */

.m22-hero {
	position: relative;
}

.m22-hero-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.m22-hero-track::-webkit-scrollbar {
	display: none;
}

.m22-hero-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	min-height: clamp(360px, 33vw, 520px);
}

/* --- Teksto kortele --- */

.m22-hero-text {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 40px clamp(24px, 4vw, 64px);
	background: var(--base-2, #f6f6f6);
}

/* Virsutinis uzrasas - vienintele vieta, kur naudojamas serifinis sriftas.
   Imamas sisteminis (Georgia), todel jokios papildomos uzklausos nera. */
.m22-hero-eyebrow {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(17px, 1.6vw, 25px);
	line-height: 1.1;
	color: var(--contrast, #000);
}

.m22-hero-title {
	margin: 0;
	font-size: clamp(25px, 3.1vw, 44px);
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--contrast, #000);
}

.m22-hero-desc {
	margin: 0;
	max-width: 44ch;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.6;
	color: var(--contrast, #000);
}

.m22-hero-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

a.m22-hero-btn,
a.m22-hero-btn:visited {
	display: inline-block;
	padding: 14px 26px;
	background: var(--contrast, #000);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease;
}

a.m22-hero-btn:hover,
a.m22-hero-btn:focus {
	background: var(--contrast-2, #5a5a5a);
	color: #fff;
}

/* --- Nuotrauka --- */

.m22-hero-img {
	flex: 0 0 50%;
	max-width: 50%;
	background-size: cover;
	background-position: center;
}

/* --- Rodykles --- */
/* Baltas staciakampis, nes rodykle gula ir ant sviesios korteles,
   ir ant nuotraukos - kitaip viena is ju butu nematoma. */
.m22-hero button.m22-slider-arrow {
	top: 50%;
	width: 34px;
	height: 54px;
	background: #fff;
	color: var(--contrast, #000);
	font-size: 32px;
}

.m22-hero button.m22-slider-arrow:hover {
	background: #fff;
	color: var(--contrast-2, #5a5a5a);
}

.m22-hero button.m22-slider-arrow--prev { left: 0; }
.m22-hero button.m22-slider-arrow--next { right: 0; }

/* Hero rodykles rodomos ir telefone (skirtingai nei produktu juostose,
   kur slenkama pirstu) - taip pat, kaip pavyzdyje. */
.m22-hero.is-scrollable button.m22-slider-arrow {
	display: block;
}

@media (max-width: 768px) {
	.m22-hero-slide {
		flex-direction: column;
		min-height: 0;
	}

	.m22-hero-img {
		order: 1;
		flex: none;
		max-width: 100%;
		width: 100%;
		aspect-ratio: 1 / 1;
	}

	.m22-hero-text {
		order: 2;
		flex: none;
		max-width: 100%;
		width: 100%;
		padding: 24px 44px 28px;
		gap: 10px;
		background: transparent;
	}

	.m22-hero-btns {
		align-self: stretch;
		flex-direction: column;
		gap: 10px;
	}

	a.m22-hero-btn {
		display: block;
		width: 100%;
		padding: 16px;
	}

	/* Rodykles salia antrastes, po nuotrauka.
	   Nuotrauka kvadratine ir per visa ploti, todel jos auksts = 100vw. */
	.m22-hero button.m22-slider-arrow {
		top: calc(100vw + 46px);
		width: 30px;
		height: 44px;
		font-size: 30px;
		background: transparent;
	}
}

@media (hover: hover) and (pointer: fine) {
	.m22-hero.is-scrollable .m22-slider-arrow {
		display: block;
	}
}

/* ==========================================================================
   Kategoriju plyteles (PLAUKAI / KUNAS)
   ========================================================================== */

.m22-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin: 70px 0;
}

a.m22-tile,
a.m22-tile:hover,
a.m22-tile:focus,
a.m22-tile:visited {
	color: #fff;
}

.m22-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(220px, 26vw, 340px);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}

.m22-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .3);
	transition: background-color .3s ease;
}

.m22-tile:hover::after {
	background: rgba(0, 0, 0, .45);
}

.m22-tile span {
	position: relative;
	z-index: 1;
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 300;
	letter-spacing: .14em;
}

/* Studijos sekcija */
.m22-studio {
	margin: 70px 0;
}

.m22-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 30px;
}

.m22-gallery img {
	width: 100%;
	height: 100%;
	max-height: 380px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Kontaktu puslapis
   ========================================================================== */

.m22-kontaktai h2 {
	margin-top: 34px;
	margin-bottom: 10px;
	font-size: 20px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.m22-kontaktai h2:first-child {
	margin-top: 0;
}

ul.m22-info {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.m22-info li {
	margin: 0 0 4px;
}

.m22-kontaktai-foto img {
	width: 100%;
	height: auto;
	display: block;
}

.m22-kontaktai-grid {
	gap: 50px;
	align-items: flex-start;
}

.m22-zemelapis {
	margin-top: 60px;
	line-height: 0;
}

.m22-zemelapis iframe {
	display: block;
	width: 100%;
}

/* --- Logotipo dydis (gyvoje svetaineje: 150x95) ---
   Svarbu: ijungtas navigation_as_header, todel logotipas yra .navigation-branding
   viduje, o GP Menu Plus jam inline nustato height:60px. Perrasom konkreciai. */
.navigation-branding img,
.site-header .site-logo img,
.site-logo img {
	width: auto !important;
	height: 72px !important;    /* buvo 95px - juosta buvo per aukstą */
	max-width: 150px !important;
}

@media (max-width: 768px) {
	/* Tema logotipui prideda 10px virsuje ir apacioje, o "height" skaiciuojamas
	   kartu su jais - todel is 54px likdavo vos 34px pacio zenklo. Pakraščius
	   nuimam ir aukstį nurodom pacio pieSinio: zenklas didesnis, o balta juosta
	   net zemesne nei buvo. */
	.navigation-branding img,
	.site-header .site-logo img,
	.site-logo img {
		height: 52px !important;
		max-width: 150px !important;
		padding: 0 !important;
	}
}

/* ==========================================================================
   Antrine juosta (parduotuves kategorijos)
   GP jai atskiros tipografijos nustatymo neturi, todel aprasom cia.
   ========================================================================== */

/* GP Premium main.min.css turi ta pati selektoriu su 13px ir kraunasi
   PO vaikines temos, todel prirasom elemento varda (nav.) - taip mūsų
   taisykle specifiskesne ir eiles tvarka nebesvarbi. */
nav.secondary-navigation .main-nav ul li a {
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 44px;
}

@media (max-width: 768px) {
	nav.secondary-navigation .main-nav ul li a {
		font-size: 14px;
		line-height: 48px;
	}
}

/* ==========================================================================
   Krepselis: lentele kaireje, sumos desineje (kaip buvo Elementor versijoje)
   ========================================================================== */

@media (min-width: 769px) {
	.woocommerce-cart .woocommerce::after {
		content: "";
		display: table;
		clear: both;
	}

	.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
		float: left;
		width: 62%;
		margin-bottom: 40px;
	}

	.woocommerce-cart .woocommerce > .cart-collaterals {
		float: right;
		width: 34%;
	}

	.woocommerce-cart .cart-collaterals .cart_totals {
		float: none;
		width: 100%;
	}

	.woocommerce-cart .cart-collaterals .cross-sells {
		float: none;
		width: 100%;
		clear: both;
	}
}

/* ==========================================================================
   Grozio studijos puslapis
   ========================================================================== */

.m22-plati-nuotrauka {
	margin: 0 0 34px;
}

.m22-plati-nuotrauka img {
	width: 100%;
	height: auto;
	display: block;
}

.m22-paslauga {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin: 46px 0 0;
	padding: 30px 24px;
	background-size: cover;
	background-position: center;
	position: relative;
	text-align: center;
}

.m22-paslauga::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .42);
}

.m22-paslauga h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: clamp(19px, 2.2vw, 28px);
	font-weight: 300;
	letter-spacing: .1em;
	line-height: 1.3;
}

.m22-tekstas {
	margin: 22px 0 0;
}

.m22-tekstas ul,
.m22-tekstas ol {
	margin-left: 1.2em;
}

.m22-tekstas p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Mobili versija
   ========================================================================== */

/* Filtrai telefone slepiami.
   Priezastis: GeneratePress soninis stulpelis telefone nukeliauja PO visomis
   prekemis (~5000px zemyn) ir prideda ~2200px tuscio slinkimo. Ten jie
   nepasiekiami ir tik ilgina puslapi.
   Kai prireiks - darysim atskira "Filtruoti" mygtuka su isslenkanciu skydeliu. */
@media (max-width: 768px) {
	.woocommerce #left-sidebar,
	.woocommerce-page #left-sidebar,
	body.woocommerce #right-sidebar,
	body.woocommerce-page #right-sidebar {
		display: none !important;
	}

	/* "I krepseli" per visa plotį - patogiau pirštu */
	.woocommerce div.product form.cart .button,
	.woocommerce div.product button.single_add_to_cart_button {
		width: 100%;
		min-height: 52px;
	}

	.woocommerce div.product form.cart .quantity {
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   Pataisymai 2026-09-22 (po paleidimo)
   ========================================================================== */

/* Plyteles PLAUKAI / KUNAS - be tarpo tarp ju */
.m22-tiles {
	gap: 0 !important;
	margin: 40px 0 !important;
}

/* Mazesni tarpai tarp sekciju */
.m22-slider-section {
	margin-top: 30px;
}

.m22-slider-section ul.products {
	padding-bottom: 12px;
}

.m22-slider-head {
	margin-bottom: 14px;
}

.m22-hero {
	margin-bottom: 34px;
}

.m22-studio {
	margin: 40px 0;
}

/* Galerija - slankiklis vietoj vienos po kitos */
.m22-gallery-slider {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin-top: 22px;
}

.m22-gallery-slider::-webkit-scrollbar {
	display: none;
}

.m22-gallery-slider img {
	flex: 0 0 clamp(260px, 42vw, 460px);
	width: auto;
	height: clamp(220px, 28vw, 360px);
	max-height: none;
	object-fit: cover;
	scroll-snap-align: start;
}

.m22-studio .m22-slider-arrow--prev { left: -18px; }
.m22-studio .m22-slider-arrow--next { right: -18px; }

@media (hover: hover) and (pointer: fine) {
	.m22-studio.is-scrollable .m22-slider-arrow {
		display: block;
	}
}

@media (max-width: 768px) {
	.m22-tiles {
		grid-template-columns: 1fr;
		margin: 26px 0;
	}
	.m22-slider-section { margin-top: 22px; }
}

/* ==========================================================================
   SEKCIJU RITMAS  (2026-09-23)
   Anksciau tarpai tarp dideliu bloku buvo 34 / 30 / 40 / 40 - nevienodi.
   Cia nustatomas vienas tarpas visiems. Blokas rasomas failo GALE, nes
   .m22-tiles turi savo margin su !important, o esant vienodam svoriui
   laimi vėliau aprasyta taisykle.
   ========================================================================== */

.entry-content > .m22-hero,
.entry-content > .m22-slider-section,
.entry-content > .m22-tiles,
.entry-content > .m22-studio,
.entry-content > .m22-plati-nuotrauka {
	margin-top: 64px !important;
	margin-bottom: 64px !important;
}

.entry-content > *:first-child {
	margin-top: 0 !important;
}

/* Paskutiniam blokui marza PALIEKAMA.
   Pagrindiniame puslapyje turinio sritis neturi apatinio tarpo, todel bu-
   tent si marza yra vienintelis atskyrimas nuo juodos porastes - ja nuemus
   turinys prisiliesdavo prie porastes. */

@media (max-width: 768px) {
	.entry-content > .m22-hero,
	.entry-content > .m22-slider-section,
	.entry-content > .m22-tiles,
	.entry-content > .m22-studio,
	.entry-content > .m22-plati-nuotrauka {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}
}

/* ==========================================================================
   SEKCIJU VIDINIAI TARPAI
   GeneratePress kiekvienam Gutenbergo grupes blokui prideda turinio parastes:
       .site-main .wp-block-group__inner-container { padding: 40px 50px 72px }
   Musu sekcijoms to nereikia - vertikalu ritma jau duoda 64px marza,
   o horizontalu - .site-content parastes. Be sito tarpai dvigubeja:
       64 (tarp sekciju) + 72 (vidus apacioje) + 40 (vidus virsuje) = 176px
   ========================================================================== */

/* Vertikalus tarpas nuimamas VISIEMS grupes blokams turinyje - taip pat
   idetiems (antrastes blokas buvo 139px: 40 + 27 + 72).
   Soniniai 50px paliekami: be ju turinys siauresniuose ekranuose prisiliestu
   prie krasto, o placiuose nesutaptu su kitu puslapio turiniu. */
.site-main .entry-content .wp-block-group__inner-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Rodykliu atskaitos taskas (jos idedamos cia, zr. functions.php) */
.site-main .m22-slider-section > .wp-block-group__inner-container,
.site-main .m22-studio > .wp-block-group__inner-container {
	position: relative;
}

/* ==========================================================================
   Grozio studija - ikurejos blokas (tekstas + nuotrauka salia)
   Anksciau nuotrauka ir tekstas buvo du atskiri blokai vienas po kito,
   o nuotrauka isitempdavo per visa ploti (1300x1950), todel tekstas
   atsidurdavo toli apacioje.
   ========================================================================== */

.m22-ikureja {
	display: grid;
	grid-template-columns: 0.8fr 1fr;   /* nuotrauka kaireje, siauresne */
	gap: clamp(24px, 3.5vw, 56px);
	align-items: center;
	margin: 48px 0;
}

.m22-ikureja .m22-plati-nuotrauka {
	order: 1;          /* nuotrauka kaireje */
	margin: 0;
	height: clamp(380px, 44vw, 620px);
	overflow: hidden;
}

.m22-ikureja .m22-tekstas {
	order: 2;          /* tekstas desineje */
	margin: 0;
}

.m22-ikureja .m22-plati-nuotrauka img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;   /* kad issilaikytu veidas */
}

/* Pirmoji eilute yra puslapio H1 (puslapio pavadinimas is virsaus pasalintas,
   todel H1 vaidmuo perduotas jai - kitaip puslapis liktu be antrastes).
   Vizualiai atrodo kaip paprasta teksto eilute. */
.m22-ikureja-antraste {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .5px;
	line-height: 1.45;
	text-transform: uppercase;
}

.m22-ikureja .m22-tekstas p:first-child {
	font-weight: 500;
	letter-spacing: .5px;
	margin-bottom: 14px;
}

.m22-ikureja .m22-tekstas p:last-child {
	margin-top: 18px;
	font-style: italic;
	color: var(--m22-pilka, #8a8a8a);
}

@media (max-width: 768px) {
	.m22-ikureja {
		grid-template-columns: 1fr;
		gap: 22px;
		margin: 32px 0;
	}

	/* Telefone nuotrauka virsuje - kaip ir hero juostoje */
	.m22-ikureja .m22-plati-nuotrauka {
		order: 1;
		height: clamp(330px, 92vw, 470px);
	}

	.m22-ikureja .m22-tekstas {
		order: 2;
	}
}

/* ==========================================================================
   Grozio studija - paslaugos (issiskleidziantys laukai) + registracija
   Naudojami <details>/<summary> - tai standartinis HTML, todel
   jokio JavaScript ir jokios bibliotekos nereikia.
   ========================================================================== */

.m22-paslaugos {
	display: grid;
	grid-template-columns: 1fr 0.62fr;
	gap: clamp(24px, 3.5vw, 56px);
	align-items: start;
	margin: 48px 0;
}

/* --- Issiskleidziantys laukai --- */

.m22-paslauga-toggle {
	border-bottom: 1px solid var(--m22-riba, #e3e3e3);
}

.m22-paslauga-toggle:first-child {
	border-top: 1px solid var(--m22-riba, #e3e3e3);
}

.m22-paslauga-toggle > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.35;
	text-transform: uppercase;
	transition: color .15s ease;
}

.m22-paslauga-toggle > summary::-webkit-details-marker {
	display: none;
}

.m22-paslauga-toggle > summary:hover {
	color: var(--m22-pilka, #8a8a8a);
}

/* Zenklas + / - desineje */
.m22-paslauga-toggle > summary::after {
	content: "+";
	flex: none;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
}

.m22-paslauga-toggle[open] > summary::after {
	content: "\2013";   /* bruksnys */
}

.m22-paslauga-turinys {
	padding: 0 2px 22px;
	font-size: 15px;
	line-height: 1.75;
}

.m22-paslauga-turinys strong {
	display: inline-block;
	margin-top: 12px;
	font-weight: 500;
}

.m22-paslauga-turinys > *:first-child strong {
	margin-top: 0;
}

/* --- Registracijos blokas --- */

.m22-registracija {
	position: sticky;
	top: 90px;
	background: var(--base-2, #f6f6f6);
	padding: clamp(24px, 2.6vw, 40px);
	text-align: center;
}

.m22-registracija-virsus {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.2;
}

.m22-registracija h2 {
	margin: 10px 0 14px;
	font-size: 21px;
	line-height: 1.25;
}

.m22-registracija p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
}

.m22-registracija .m22-hero-btn {
	display: block;
	width: 100%;
	text-align: center;
}

.m22-registracija .m22-hero-btn + .m22-hero-btn {
	margin-top: 10px;
	background: none;
	border: 1px solid var(--contrast, #000);
	color: var(--contrast, #000);
}

.m22-registracija .m22-hero-btn + .m22-hero-btn:hover {
	background: var(--contrast, #000);
	color: #fff;
}

@media (max-width: 768px) {
	.m22-paslaugos {
		grid-template-columns: 1fr;
		gap: 28px;
		margin: 32px 0;
	}

	.m22-registracija {
		position: static;
	}
}

/* Puslapio antraste per vidurį (Kontaktai) */
.m22-psl-antraste {
	text-align: center;
	margin-bottom: 60px;   /* buvo 26 - sukeista vietomis su tarpu iki zemelapio */
}

/* ==========================================================================
   Grozio studija - kontaktu eile virs zemelapio
   Trys stulpeliai: adresas / susisiekite / soc. tinklai.
   ========================================================================== */

.m22-kontaktai-eile {
	display: grid;
	/* auto-fit: stulpeliu tiek, kiek blokuose - Grozio studijoje trys,
	   Kontaktuose keturi. Atskiros taisykles nereikia. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin: 28px 0 0;
	text-align: center;
}


.m22-kontaktai-eile h3 {
	margin: 0 0 14px;
	font-size: 13px;
	letter-spacing: 1px;
}

.m22-kontaktai-eile p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
}

/* Soc. tinklai vienas po kito, ne salia. Be pabraukimo, storesni,
   su mazomis ikonomis. Ikonos - inline SVG kaukes, todel jokiu
   papildomu uzklausu ir spalva paveldima is teksto. */
.m22-kontaktai-eile .m22-social {
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.m22-kontaktai-eile .m22-social a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border-bottom: 0;
	padding-bottom: 0;
	font-weight: 600;
	text-decoration: none;
}

.m22-kontaktai-eile .m22-social a:hover {
	color: var(--m22-pilka, #8a8a8a);
}

.m22-kontaktai-eile .m22-social a::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.m22-kontaktai-eile .m22-social a[href*="facebook"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.54 2 9.68 3.66 9.68 6.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2C11.54 2 9.68 3.66 9.68 6.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73Z'/%3E%3C/svg%3E");
}

.m22-kontaktai-eile .m22-social a[href*="instagram"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.67 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.67-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0Zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84ZM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4Zm7.85-10.41a1.44 1.44 0 1 1-1.44-1.44 1.44 1.44 0 0 1 1.44 1.44Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.67 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.13-1.38.67-.67 1.08-1.34 1.38-2.13.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.38-2.13C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0Zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84ZM12 16a4 4 0 1 1 4-4 4 4 0 0 1-4 4Zm7.85-10.41a1.44 1.44 0 1 1-1.44-1.44 1.44 1.44 0 0 1 1.44 1.44Z'/%3E%3C/svg%3E");
}

.m22-kontaktai-eile .m22-social a[href*="tiktok"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 1 1 .77-5.06v-3.1a5.66 5.66 0 0 0-.77-.05A5.66 5.66 0 1 0 15.54 15.4V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3a4.3 4.3 0 0 1-3.24-1.48Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5 2.59 2.59 0 1 1 .77-5.06v-3.1a5.66 5.66 0 0 0-.77-.05A5.66 5.66 0 1 0 15.54 15.4V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3a4.3 4.3 0 0 1-3.24-1.48Z'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
	.m22-kontaktai-eile {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}


/* ==========================================================================
   Zemelapis - per visa ekrano ploti ir be tarpo iki juodos porastes
   Turinys yra 1300px juostoje, todel zemelapi "isvedam" i sonus
   neigiamomis marzomis: 50% (nuo tevo) - 50vw (nuo ekrano) = tikslus krastas.
   ========================================================================== */

.m22-zemelapis {
	margin-top: 28px;      /* buvo 60 - sukeista vietomis su antrastes tarpu */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	line-height: 0;        /* kad po iframe neliktu teksto eilutes tarpo */
}

/* Kai zemelapis yra paskutinis, nuimam turinio apatini tarpa -
   taip jis prisiglaudzia prie porastes be jokio tarpelio. */
.entry-content > .m22-zemelapis:last-child {
	margin-bottom: calc(-1 * var(--m22-turinio-apacia));
}

.m22-zemelapis iframe {
	display: block;
}

@media (max-width: 768px) {
	/* Telefone GP turinio apatinis tarpas yra 48px, ne 72px */
	.entry-content > .m22-zemelapis:last-child {
		margin-bottom: -48px;
	}
}

/* ==========================================================================
   Prekes zenklo produktai po tinklarascio straipsniu
   ========================================================================== */

.m22-zenklo-produktai {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--m22-riba, #e3e3e3);
}

.m22-zenklo-produktai .m22-slider-head {
	margin-bottom: 18px;
}

.m22-zenklo-produktai .m22-slider-head h2 {
	margin: 0;
}

.m22-zenklo-produktai .m22-slider-more {
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}

.m22-zenklo-produktai .m22-slider-more:hover {
	border-bottom-color: transparent;
}

/* ==========================================================================
   Prekiu zenklu juosta - dvi eilutes po penkias.
   Uzrasas guli ANT nuotraukos, todel po ja dedamas tamsus sluoksnis -
   kitaip ant sviesios nuotraukos teksto nesimatytu.
   ========================================================================== */

.m22-zenklai {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin: 64px auto;
	/* Blokas yra tiesioginis .entry-content vaikas, todel pats neturi
	   turinio juostos ribojimo - sulygiuojam su likusiu turiniu. */
	max-width: 1400px;
	padding-left: var(--m22-gutter, 50px);
	padding-right: var(--m22-gutter, 50px);
}

/* Kompiuteryje konteineris istirpsta - korteles tampa tinklelio dalimi */
.m22-zenklai-sarasas {
	display: contents;
}

.m22-zenklas {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--base-2, #f6f6f6);
	text-align: center;
	text-decoration: none;
}

.m22-zenklas img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform .4s ease;
}

/* Kol nuotrauka dar neatsiusta, kortele turi atrodyti kaip kortele, o ne
   kaip tuscia deze: tamsus fonas + baltas uzrasas. Tik ten, kur nuotrauka
   yra - uzrasu kortele turi savo fona. */
.m22-zenklas--nuotrauka {
	background: #3a3a3a;
}

/* Kortele gauna savo piesimo sluoksni.

   Telefone juosta slenkama i sonus, o Safari tokiuose konteineriuose
   kartais "pameta" turini slenkant puslapi - kortele akimirkai lieka
   balta. Atskiras sluoksnis tai stabilizuoja. */
.m22-zenklas {
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Tamsus sluoksnis - tik ten, kur yra nuotrauka */
.m22-zenklas--nuotrauka::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .34);
	transition: background-color .3s ease;
}

/* Prekes zenklo pavadinimas - to paties charakterio kaip hero antraste:
   didziosios, ploniau, su tarpais tarp raidziu. */
.m22-zenklas span {
	position: relative;
	z-index: 2;
	padding: 10px 14px;
	font-size: clamp(15px, 1.55vw, 23px);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}

/* --- Pirmoji kortele: kaip hero teksto kortele, tik be mygtuku --- */

.m22-zenklas--uzrasas {
	flex-direction: column;
	gap: 4px;
	background: var(--base-2, #f6f6f6);
	cursor: default;
	padding: 16px;
}

/* "mylim" - kursyvu, po antraste, kiek stambiau */
.m22-zenklas--uzrasas .m22-zenklas-virsus {
	padding: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(27px, 3.3vw, 48px);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.1;
	text-transform: none;
	color: var(--contrast, #000);
}

.m22-zenklas--uzrasas .m22-zenklas-antraste {
	padding: 0;
	font-size: clamp(15px, 1.55vw, 23px);
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--contrast, #000);
}

a.m22-zenklas:hover img {
	transform: scale(1.05);
}

a.m22-zenklas:hover::after {
	background: rgba(0, 0, 0, .18);
}

/* Jei nuotraukos nera - tekstas ant sviesaus fono, todel juodas */
.m22-zenklas:not(.m22-zenklas--nuotrauka):not(.m22-zenklas--uzrasas) span {
	color: var(--contrast, #000);
}

@media (max-width: 900px) {
	.m22-zenklai {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		margin: 40px 0;
	}
}

/* --------------------------------------------------------------------------
   Telefone: antraste virsuje, o devynios korteles - slenkama juosta.
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
	.m22-zenklai {
		display: block;
		margin: 40px 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Antraste nustoja buti kortele ir tampa iprastu uzrasu */
	.m22-zenklas--uzrasas {
		aspect-ratio: auto;
		background: none;
		padding: 0 0 18px;
		align-items: flex-start;
		text-align: left;
	}

	.m22-zenklas--uzrasas .m22-zenklas-antraste,
	.m22-zenklas--uzrasas .m22-zenklas-virsus {
		text-align: left;
	}

	/* Konteineris nebe "istirpes" - jis tampa juosta */
	.m22-zenklai-sarasas {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		/* Rato nebera (zr. functions.php), tad kortelės gali svelniai
		   prilipti prie krasto - slinkimas atrodo tvarkingiau. */
		scroll-snap-type: x proximity;
		scroll-behavior: auto;
		scrollbar-width: thin;
		/* kad juosta eitu iki pat krasto, o ne sustotu ties parastemis */
		margin-left: -16px;
		margin-right: -16px;
		padding: 2px 16px 12px;
	}

	/* 2026-09-26: telefone kortele buvo 46% juostos plocio - apie 158 px.
	   Nuotraukoje tokio dydzio prekes vos matyti. Dabar kortele uzima
	   beveik tris ketvirtadalius ekrano, o kitos krastas lieka matomas -
	   is karto aisku, kad juosta slenkama. */
	.m22-zenklai-sarasas > .m22-zenklas {
		flex: 0 0 72%;
		/* Ne "aspect-ratio".

		   Safari kortelės aukštį iš proporcijos skaičiuoja nepatikimai,
		   kai kortelė yra lanksčiosios (flex) juostos narys su procentiniu
		   pločiu: slenkant aukštis akimirkai suskaičiuojamas nuliu ir
		   kortelė dingsta - lieka balta vieta. Juostos plotis lygus ekrano
		   pločiui, tad 72 % pločio kvadratui atitinka 72vw aukščio. */
		aspect-ratio: auto;
		height: auto;
	}

	/* Kvadratas daromas tarpikliu: procentinis padding-top skaiciuojamas
	   nuo paties elemento plocio, todel kortele visada lygiasone,
	   nesvarbu, koks juostos plotis ar ekranas. */
	.m22-zenklai-sarasas > .m22-zenklas {
		scroll-snap-align: start;
	}

	.m22-zenklai-sarasas > .m22-zenklas::before {
		content: "";
		display: block;
		flex: 0 0 0;
		width: 0;
		padding-top: 100%;
	}

	.m22-zenklai-sarasas {
		gap: 12px;
	}
}

/* ==========================================================================
   Korteliu reakcija uzvedus pele
   Bendras nustatymas "nuorodos pabraukiamos uzvedus" tinka tekstui, bet ne
   nuotrauku kortelems - ten pabraukimas atrodo kaip klaida. Vietoj jo:
   nuotrauka prasisviesina ir kiek priartinama, uzrasas svelniai padideja.
   ========================================================================== */

a.m22-zenklas,
a.m22-zenklas:hover,
a.m22-zenklas:focus,
a.m22-zenklas:visited,
a.m22-tile,
a.m22-tile:hover,
a.m22-tile:focus,
a.m22-tile:visited {
	text-decoration: none;
}

/* --- Prekiu zenklu korteles --- */

.m22-zenklas span {
	transition: transform .3s ease;
}

a.m22-zenklas:hover span {
	transform: scale(1.05);
}

/* --- PLAUKAI / KUNAS plyteles --- */

.m22-tile::after {
	background: rgba(0, 0, 0, .38);
}

/* Uzvedus tamsus sluoksnis ne tamseja, o sviesėja - nuotrauka atsiskleidzia */
.m22-tile:hover::after {
	background: rgba(0, 0, 0, .16);
}

.m22-tile span {
	transition: transform .3s ease;
}

.m22-tile:hover span {
	transform: scale(1.05);
}

/* ==========================================================================
   Prekes zenklo kategorijoje - straipsnio ivadas
   ========================================================================== */

.m22-zenklo-ivadas {
	margin: 0 0 32px;
	padding: 22px 26px;
	background: var(--base-2, #f6f6f6);
}

.m22-zenklo-ivadas p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.7;
	max-width: 78ch;
}

a.m22-zenklo-daugiau,
a.m22-zenklo-daugiau:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	color: var(--contrast, #000);
}

a.m22-zenklo-daugiau::after {
	content: "→";
	font-size: 15px;
	line-height: 1;
	transition: transform .2s ease;
}

a.m22-zenklo-daugiau:hover {
	border-bottom-color: transparent;
	color: var(--contrast, #000);
}

a.m22-zenklo-daugiau:hover::after {
	transform: translateX(4px);
}

@media (max-width: 768px) {
	.m22-zenklo-ivadas {
		padding: 18px 18px;
		margin-bottom: 24px;
	}
}

/* Kai kategorija jau turi aprasyma - rodoma tik nuoroda, be fono */
.m22-zenklo-ivadas--tik-nuoroda {
	background: none;
	padding: 0;
	margin: 0 0 30px;
}

/* ==========================================================================
   Logotipas juodoje porasteje
   ========================================================================== */

/* Logotipas yra pirmasis is keturiu porastes stulpeliu - per vidurį. */
.m22-porastes-logo {
	margin: 0;
	text-align: center;
}

.m22-porastes-logo a {
	display: inline-block;
}

/* GP valdikliui prideda 40px tarpa is kaires (tarpas tarp stulpeliu).
   Tekstiniams stulpeliams tai gerai, bet logotipas del to atrodo
   pastumtas - siam vienam valdikliui ta tarpa nuimam. */
.footer-widgets .widget:has(.m22-porastes-logo) {
	padding-left: 0;
}

.m22-porastes-logo img {
	display: block;
	width: auto;
	height: 104px;
	max-width: 100%;
	margin: 0 auto;
	/* Logotipo PNG fonas baltas, o poraste juoda - apverciam spalvas,
	   taip nereikia laikyti antros, baltos logotipo versijos. */
	filter: invert(1);
}

@media (max-width: 768px) {
	.m22-porastes-logo img {
		height: 84px;
	}
}

/* Hero nuotrauka yra nuoroda i to zenklo prekes */
a.m22-hero-img {
	position: relative;
	display: block;
	text-decoration: none;
}

a.m22-hero-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background-color .3s ease;
}

a.m22-hero-img:hover::after {
	background: rgba(0, 0, 0, .1);
}


/* ==========================================================================
   Tinklarascio straipsnio nuotrauka

   Rodoma visa, neapkarpyta, siauresne uz teksto ploti. Taip nuotrauka
   islaiko savo proporcijas, todel tinka bet kokio formato kadrui.

   Blokas tema vadina .featured-image.page-header-image-single ir prideda
   .grid-container - todel butina nuimti jo max-width ir vidinius tarpus.
   ========================================================================== */

body.single-post .featured-image.page-header-image-single {
	max-width: 980px;
	width: 100%;
	height: auto;
	margin: 0 auto 34px;
	padding: 0;
	overflow: visible;
	line-height: 0;
}

body.single-post .featured-image.page-header-image-single img {
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

/* Telefone - per visa turinio ploti */
@media (max-width: 768px) {
	body.single-post .featured-image.page-header-image-single {
		max-width: none;
		margin-bottom: 26px;
	}
}

/* Nuoroda paslaugos toglio apacioje (pvz. i visas plauku proceduras) */

.m22-paslauga-nuoroda {
	margin: 18px 0 2px;
}

.m22-paslauga-nuoroda a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.m22-paslauga-nuoroda a::after {
	content: "\2192";
	font-size: 15px;
	transition: transform .2s ease;
}

.m22-paslauga-nuoroda a:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   Tinklarascio saraso irasai (kategorijos archyvas)

   Tema tarpa tarp irasu nustato selektoriumi
   ".one-container.archive .post:not(:last-child)" (svoris 0,5,0), todel
   paprastesne taisykle jo neperrasytu - cia selektorius specialiai stipresnis.

   Taip pat paslepiama tuscia irašo poraste: is jos isimta kategorijos zyma,
   bet pats elementas lieka ir palieka 11 px tarpa.
   ========================================================================== */

body.one-container.archive .site-main > article.post:not(:last-child),
body.one-container.blog .site-main > article.post:not(:last-child) {
	padding-bottom: 35px;
	margin-bottom: 0;
}

body.archive .site-main > article .entry-meta:not(:has(*)),
body.blog .site-main > article .entry-meta:not(:has(*)) {
	display: none;
}

/* Sarase: nuotrauka kaireje, antraste ir tekstas desineje.
   Taikoma tik tiems irasams, kurie turi nuotrauka - procedūros be nuotrauku
   lieka per visa ploti, o ja pridejus stulpeliai atsiranda savaime. */

body.archive .site-main > article .inside-article:has(.post-image),
body.blog .site-main > article .inside-article:has(.post-image) {
	display: grid;
	grid-template-columns: clamp(160px, 26%, 280px) 1fr;
	/* Paskutine eilute pasiima likuti. Be sito nuotraukos aukstis issidalytu
	   po eilutes ir antraste nuo teksto atitoltu. */
	grid-template-rows: auto 1fr;
	column-gap: 28px;
	align-items: start;
}

body.archive .site-main > article .inside-article > .post-image,
body.blog .site-main > article .inside-article > .post-image {
	grid-column: 1;
	grid-row: 1 / -1;
	margin: 0;
	line-height: 0;
}

body.archive .site-main > article .inside-article > .post-image img,
body.blog .site-main > article .inside-article > .post-image img {
	width: 100%;
	height: auto;
}

body.archive .site-main > article .inside-article:has(.post-image) > .entry-header,
body.archive .site-main > article .inside-article:has(.post-image) > .entry-summary,
body.archive .site-main > article .inside-article:has(.post-image) > .entry-meta,
body.blog .site-main > article .inside-article:has(.post-image) > .entry-header,
body.blog .site-main > article .inside-article:has(.post-image) > .entry-summary,
body.blog .site-main > article .inside-article:has(.post-image) > .entry-meta {
	grid-column: 2;
}

/* Telefone - nuotrauka virsuje, per visa ploti */
@media (max-width: 768px) {
	body.archive .site-main > article .inside-article:has(.post-image),
	body.blog .site-main > article .inside-article:has(.post-image) {
		display: block;
	}

	body.archive .site-main > article .inside-article > .post-image,
	body.blog .site-main > article .inside-article > .post-image {
		margin-bottom: 14px;
	}
}

/* Prekes puslapio skiltys. Isvaizda ta pati kaip paslaugu togliu. */

.m22-prekes-skiltys {
	clear: both;
	float: none;
	width: 100%;
	max-width: none;
	margin: 48px 0 64px;
}

.m22-prekes-skiltys .m22-prekes-skiltis > summary {
	font-size: 14px;
}

.m22-prekes-skiltys .m22-paslauga-turinys {
	padding-bottom: 22px;
	font-size: 15px;
	line-height: 1.65;
}

/* Tema pastraipoms deda 1.5em tarpa - prekes aprasyme jis per didelis,
   tekstas issibarsto. Cia tarpas standartinis, kaip iprastame tekste. */
.m22-prekes-skiltys .m22-paslauga-turinys p,
.m22-prekes-skiltys .m22-paslauga-turinys ul,
.m22-prekes-skiltys .m22-paslauga-turinys ol {
	margin-bottom: 0.85em;
}

.m22-prekes-skiltys .m22-paslauga-turinys p:last-child,
.m22-prekes-skiltys .m22-paslauga-turinys ul:last-child,
.m22-prekes-skiltys .m22-paslauga-turinys ol:last-child {
	margin-bottom: 0;
}

/* Poreikiai, plauku tipas ir fiksavimas - zymomis, be etikeciu.
   Pati reiksme pasako, kas tai, todel "Poreikis:" nebereikia. */
.m22-zymos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.m22-zyma {
	display: inline-block;
	padding: 6px 15px;
	border: 1px solid var(--m22-riba, #e3e3e3);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .2px;
	white-space: nowrap;
}

.m22-prekes-skiltys .m22-ispejimas {
	margin-top: 12px;
	color: var(--m22-pilka, #8a8a8a);
	font-size: 14px;
	line-height: 1.55;
}

/* Prekes puslapis: galerija siauresne, informacija platesne.
   WooCommerce numatytieji 48%/48% padaro nuotrauka per didele. */

/* Prekes blokas - du lygus stulpeliai.
   WooCommerce naudoja plaukiojancius 48%/48% su nelygiu tarpu, todel kraštai
   nesutampa. Cia vietoj ju - tinklelis is dvieju lygiu daliu. */
body.single-product div.product {
	display: grid;
	/* Riba dedama stulpeliams, o ne visam blokui - taip galerija ir
	   informacija lieka po 550 px, o skiltys bei "Panasus produktai"
	   issitiesia per visa turinio ploti.
	   Trecias, tuscias stulpelis surenka likusi ploti - be jo per visus
	   stulpelius issitempes elementas siektu tik 1148 px. */
	grid-template-columns: minmax(0, 550px) minmax(0, 550px) 1fr;
	column-gap: 80px;
	align-items: start;
}

/* "!important" butinas: GP Premium woocommerce.min.css uzsikrauna po
   vaikines temos ir nustato galerijai float bei width: 50%. */
body.single-product div.product > div.images,
body.single-product div.product > div.summary {
	float: none !important;
	width: 100% !important;
	max-width: none;
	margin: 0;
}

/* Visa kita (pranesimai, skiltys, panasus produktai) - per abu stulpelius */
body.single-product div.product > *:not(div.images):not(div.summary) {
	grid-column: 1 / -1;
}

/* Miniatiuros - visada viena eilute, kad ir kiek ju butu.
   Tinklelis su "grid-auto-flow: column" padalija ploti po lygiai, todel
   nesvarbu, ar nuotrauku dvi, ar penkios. */
/* Miniatiuros - viena salia kitos, be tarpu.

   Anksciau cia buvo tinklelis su vienodo plocio stulpeliais, bet
   FlexSlider pats nustato li plotį, todėl nuotrauka stulpelio
   neuzpildydavo ir tarp ju likdavo netolygus tarpai. Dabar flex:
   kiekvienas elementas dalinasi eile po lygiai, bet neplatesnis nei
   ketvirtadalis - tad dvi miniatiuros neissipucia per visa ploti. */
body.single-product div.product .flex-control-thumbs {
	display: flex;
	gap: 0;
	margin-top: 8px;
	padding: 0;
	list-style: none;
}

body.single-product div.product .flex-control-thumbs li {
	flex: 1 1 0;
	min-width: 0;
	max-width: 25%;
	width: auto !important;
	/* WooCommerce deda 5 px parastes is desines ir virsaus - del ju tarp
	   miniatiuru likdavo plyseliai. */
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none;
}

body.single-product div.product .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	display: block;
	opacity: .75;
	transition: opacity .15s ease;
}

body.single-product div.product .flex-control-thumbs li img:hover,
body.single-product div.product .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

@media (max-width: 768px) {
	body.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	/* WooCommerce forma turi 32 px apatine parašte - telefone ji tik
	   praplecia tarpa iki skilciu. */
	body.single-product div.product > div.summary form.cart {
		margin-bottom: 0;
	}

	body.single-product div.product > div.images,
	body.single-product div.product > div.summary {
		width: 100% !important;
	}

	body.single-product div.product .flex-control-thumbs {
		gap: 0;
	}

	/* Tarpai aplink skiltis. Prie ju dar prisideda tinklelio eiluciu
	   tarpas (24 px), todel cia jie mazesni nei kompiuteryje. */
	body.single-product .m22-prekes-skiltys {
		margin-top: 12px;
		margin-bottom: 8px;
	}
}

/* Kiekio laukas su uzrasu. Uzrasu plotis toks pat kaip variaciju lenteles
   etikeciu, kad "Tūris" ir "Kiekis" bei ju laukai butu vienoje linijoje. */

body.single-product table.variations th.label {
	width: 118px;
	padding-left: 0;
	text-align: left;
	vertical-align: middle;
}

body.single-product .m22-kiekis {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

body.single-product .m22-kiekis-uzrasas {
	flex: 0 0 118px;
	font-weight: 600;
}

body.single-product .m22-kiekis .quantity {
	margin: 0;
}

@media (max-width: 768px) {
	body.single-product table.variations th.label {
		width: 96px;
	}

	body.single-product .m22-kiekis-uzrasas {
		flex: 0 0 96px;
	}
}

/* Paslėptas pranesimas ekrano skaitytuvui (".reset_variations_alert") buvo
   1300 px plocio ir issikisdavo uz lango - atsirasdavo horizontalus slinkimas.
   Matomumui itakos nera, jis ir taip nerodomas. */
body.single-product .screen-reader-text {
	width: 1px !important;
	max-width: 1px !important;
}

/* Telefone "Panasus produktai" - slenkami i sona, o ne vienas po kito.
   Kitaip vienas puslapis issitempia per kelis ekranus. */

@media (max-width: 768px) {
	body.single-product .related.products ul.products,
	body.single-product .up-sells.products ul.products {
		display: flex;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Kortele isleidziama iki desinio krasto, kad matytusi, jog slenkasi */
		margin-right: calc(50% - 50vw);
		padding-right: 16px;
	}

	body.single-product .related.products ul.products::-webkit-scrollbar,
	body.single-product .up-sells.products ul.products::-webkit-scrollbar {
		display: none;
	}

	body.single-product .related.products ul.products li.product,
	body.single-product .up-sells.products ul.products li.product {
		flex: 0 0 62%;
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		scroll-snap-align: start;
	}
}

/* Naršymo kelias ("Pradžia / ... / prekė") - mazesnis ir kuklesnis.
   Telefone jis issitempdavo per keturias eilutes ir uzimdavo 97 px. */

body.single-product nav.woocommerce-breadcrumb {
	font-size: 12px;
	line-height: 1.5;
	margin-bottom: 18px;
	color: var(--m22-pilka, #8a8a8a);
}

body.single-product nav.woocommerce-breadcrumb a {
	color: inherit;
}

@media (max-width: 768px) {
	body.single-product nav.woocommerce-breadcrumb {
		font-size: 11px;
		margin-bottom: 14px;
		/* Ne daugiau dvieju eiluciu, galas - daugtaskiu.
		   Slenkama viena eilute atrodydavo tarsi nukirsta. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ==========================================================================
   Porastė telefone

   Kompiuteryje keturi stulpeliai, o telefone jie sugula vienas po kito.
   Tada kairioji lygiuote ir 40 px tarpai atrodo netvarkingai - logotipas
   centre, o visa kita prie krasto. Cia viskas centruojama ir suglaudinama.
   ========================================================================== */

@media (max-width: 768px) {
	body .footer-widgets .footer-widget-1,
	body .footer-widgets .footer-widget-2,
	body .footer-widgets .footer-widget-3,
	body .footer-widgets .footer-widget-4 {
		margin-bottom: 30px;
		text-align: center;
	}

	body .footer-widgets .footer-widget-4 {
		margin-bottom: 0;
	}

	body .footer-widgets .widget-title,
	body .footer-widgets .wp-block-heading {
		margin-bottom: 12px;
	}

	/* Meniu punktai - be papildomu tarpu is abieju pusiu */
	body .footer-widgets .menu li {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	body .footer-widgets .menu li a {
		display: inline-block;
		padding: 5px 0;
	}

	body .footer-widgets p {
		margin-bottom: 10px;
	}

	body .footer-widgets p:last-child {
		margin-bottom: 0;
	}

	/* Socialiniai tinklai - i viena centruota eilute */
	body .footer-widgets .m22-social {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 20px;
	}
}

/* Slaiderio sekcija be prekiu (pvz. "Nuolaidos", kai akciju nera) neturi
   likti su kabancia antraste. */
body .site-main .m22-slider-section:not(:has(li.product)) {
	display: none;
}

/* ==========================================================================
   Registracijos juosta po plauku proceduru straipsniais

   Tas pats blokas, kaip Grozio studijos puslapyje (.m22-registracija),
   tik ne siauras soninis stulpelis, o juosta per visa ekrano ploti -
   isvedama i sonus tuo paciu budu kaip zemelapis:
   50% (nuo tevo) - 50vw (nuo ekrano) = tikslus krastas.
   Vidus lieka siauras, kad tekstas butu skaitomas.
   ========================================================================== */

.m22-cta-juosta {
	margin: 56px calc(50% - 50vw) 44px;
	width: auto;
	padding: clamp(30px, 3.2vw, 46px) 20px;
	background: var(--base-2, #f6f6f6);
	text-align: center;
}

.m22-cta-vidus {
	max-width: 680px;
	margin: 0 auto;
}

.m22-cta-virsus {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.2;
}

/* Elemento vardas (h2.) - kad butu specifiskiau uz GP tipografija */
h2.m22-cta-antraste {
	margin: 10px 0 14px;
	font-size: clamp(19px, 1.9vw, 24px);
	line-height: 1.25;
}

.m22-cta-vidus p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.m22-cta-mygtukai {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

.m22-cta-mygtukai a.m22-hero-btn {
	min-width: 240px;
}

/* Antrinis mygtukas - tik kontūras. Elemento vardas butinas: a.m22-hero-btn
   yra 0,1,1, tad vien klase jo neperrasytu. */
a.m22-cta-antrinis,
a.m22-cta-antrinis:visited {
	background: none;
	border: 1px solid var(--contrast, #000);
	color: var(--contrast, #000);
}

a.m22-cta-antrinis:hover,
a.m22-cta-antrinis:focus {
	background: var(--contrast, #000);
	color: #fff;
}

@media (max-width: 768px) {
	.m22-cta-juosta {
		margin-top: 40px;
		margin-bottom: 32px;
	}

	.m22-cta-mygtukai a.m22-hero-btn {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   Soninis stulpelis - vienodi sarasai

   WooCommerce kategoriju ir zenklu sarasams deda kitokius tarpus nei
   atributu filtrams (29 px vs 22 px eilute). Suvienodinam - sarasai
   stovi vienas po kitu, todel skirtumas matosi is karto.

   Elemento vardas (ul./li.) butinas: WooCommerce stiliai kraunasi
   po vaikines temos.
   ========================================================================== */

.sidebar .widget ul li,
.sidebar .widget ul.product-categories li,
.sidebar .widget ul.woocommerce-widget-layered-nav-list li {
	margin-bottom: 7px;
	padding-top: 0;
	padding-bottom: 1px;
	line-height: 1.5;
}

/* Skaicius skliaustuose - kad nepratemptu eilutes aukscio */
.sidebar .widget ul li .count {
	line-height: inherit;
}

/* Sarašo punktai - is didziosios, ne visos didziosios.
   Didziosiomis lieka tik antrastes (.widget-title). */
.sidebar .widget ul li a {
	text-transform: none;
	letter-spacing: normal;
}

/* --- Variaciju pasirinkimas mygtukais --- */

/* Select lieka DOM'e (juo remiasi visa WooCommerce logika), tik nerodomas.
   Jei JS neisikrautu, mygtuku nebutu ir liktu iprastas sarasas. */
.m22-variacijos-paslepta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.m22-variacijos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.woocommerce div.product form.cart .m22-variacija,
.m22-variacija {
	min-width: 84px;
	margin: 0;
	padding: 12px 18px;
	background: transparent;
	border: 1px solid var(--m22-riba, #e3e3e3);
	border-radius: 0;
	color: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.woocommerce div.product form.cart .m22-variacija:hover,
.m22-variacija:hover {
	background: transparent;
	border-color: var(--m22-juoda, #1a1a1a);
	color: inherit;
}

.woocommerce div.product form.cart .m22-variacija.yra-pasirinkta,
.m22-variacija.yra-pasirinkta {
	border-color: var(--m22-juoda, #1a1a1a);
	box-shadow: inset 0 0 0 1px var(--m22-juoda, #1a1a1a);
}

.woocommerce div.product form.cart .m22-variacija:disabled,
.m22-variacija:disabled {
	border-style: dashed;
	color: var(--m22-pilka, #8a8a8a);
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Sandelyje nera. Mygtukas lieka paspaudziamas - pirkejas mato, kad toks
   dydis egzistuoja, o WooCommerce parodo savo pranesima. */
.woocommerce div.product form.cart .m22-variacija.nera,
.m22-variacija.nera {
	border-style: dashed;
	color: var(--m22-pilka, #8a8a8a);
	text-decoration: line-through;
}

/* "Isvalyti" nuoroda po mygtukais, o ne saliaselect */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

/* --- Sutikimas kasoje --- */

/* Paysera reikalauja, kad taisykles ir privatumo politika butu pateiktos
   hipersaitais. Tema nuorodas piesia ta pacia spalva kaip teksta ir be
   pabraukimo, todel jos atrodo kaip paprastas tekstas - cia jos
   isskiriamos.

   Spalva imama is GeneratePress globalaus "accent", o ne irasoma cia.
   Taip pakeitus sezonine spalva (Isvaizda -> Tinkinti -> Spalvos)
   pasikeicia ir sie saitai - zr. DIZAINO_SISTEMA.md, 9 skyrius. */
.woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce-privacy-policy-text a {
	color: var(--accent, #9c4a24);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-terms-and-conditions-checkbox-text a:hover,
.woocommerce-privacy-policy-text a:hover {
	color: var(--accent, #9c4a24);
	text-decoration: none;
}

/* Zvaigzdute, zyminti privaloma lauka */
.woocommerce-terms-and-conditions-wrapper .required {
	color: var(--accent, #9c4a24);
	text-decoration: none;
}

/* Prekes, kurios dar be kainos - "Siuo metu neturime" mygtuko vietoje */
.m22-nera {
	margin: 4px 0 24px;
}

.m22-nera p.stock {
	margin: 0;
	padding: 14px 18px;
	background: var(--base-2, #f6f6f6);
	color: var(--m22-pilka, #8a8a8a);
	font-size: 14px;
	letter-spacing: .5px;
	text-align: center;
	text-transform: uppercase;
}

/* ==========================================================================
   Registracijos juosta priglausta prie poraštės.

   Juosta pilka ir eina per visą plotį, poraštė juoda - tarp jų likęs baltas
   48 px ruožas (.site-content apatinis vidinis tarpas) atrodė kaip klaida.
   Nulinamas tik proceduru archyve: ten juosta visada paskutinis elementas.
   Straipsnyje ji ne paskutinė, todėl tarpas ten reikalingas.
   ========================================================================== */

.category-plauku-proceduros .site-content {
	padding-bottom: 0;
}
/* ==========================================================================
   Teisiniu puslapiu ir porastes smulkmenos (2026-09-26)
   Puslapiai: 175 taisykles, 173 apmokejimas, 169 pristatymas,
   171 grazinimas, 3 privatumas, 7445 slapukai.
   ========================================================================== */

/* 1. Vienodi tarpai visuose siuose puslapiuose.
      Dalis ju turi body klase .contained-content, kuri temoje nuima visus
      .site-content pakrascius - del to apmokejimo ir pristatymo tekstas
      buvo priglustas prie krastu, o kituose - ne. Cia suvienodinam:
      virsus 56, sonai 50, apacia 70 (kaip slapuku politikoje). */
body.one-container.page-id-175 .site-content,
body.one-container.page-id-173 .site-content,
body.one-container.page-id-169 .site-content,
body.one-container.page-id-171 .site-content,
body.one-container.page-id-3   .site-content,
body.one-container.page-id-7445 .site-content {
	padding: 56px 50px 70px;
}

@media (max-width: 768px) {
	body.one-container.page-id-175 .site-content,
	body.one-container.page-id-173 .site-content,
	body.one-container.page-id-169 .site-content,
	body.one-container.page-id-171 .site-content,
	body.one-container.page-id-3   .site-content,
	body.one-container.page-id-7445 .site-content {
		padding: 36px 16px 44px;
	}
}

/* 2. Porastes meniu: mazesni tarpai tarp punktu.
      Buvo li padding-top 4px + nuorodos 5px virsuje ir apacioje = ~18px. */
.site-footer .menu-footer-container .menu li {
	padding-top: 0;
	padding-bottom: 0;
}

.site-footer .menu-footer-container .menu a {
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 1.5;
}

/* 3. Rozine puslapio juostele (GP elementas "Rules Header", klase .page-hero).
      Rodoma tik siuose puslapiuose. Stacionariame ekrane 80px is virsaus ir
      apacios, telefone tai per daug - juostele uzimdavo ketvirtadali ekrano. */
@media (max-width: 768px) {
	.page-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	/* Kad ilgesnis pavadinimas neprisiliestu prie ekrano krastu */
	.page-hero .inside-page-hero {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 480px) {
	.page-hero {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* 4. Teisiniu puslapiu lenteles telefone netilpdavo i ekrana: ilgi slapuku
      vardai (wp_woocommerce_session_*) ar keturi stulpeliai nesikeldavo i
      kita eilute ir puslapis pradedavo slinktis i sona. */
body.page-id-7445 .entry-content table,
body.page-id-3 .entry-content table {
	width: 100%;
}

@media (max-width: 768px) {
	body.page-id-7445 .entry-content table,
	body.page-id-3 .entry-content table {
		table-layout: fixed;
		font-size: 13px;
	}

	body.page-id-7445 .entry-content table th,
	body.page-id-7445 .entry-content table td,
	body.page-id-3 .entry-content table th,
	body.page-id-3 .entry-content table td {
		padding: 6px 6px;
		word-break: break-word;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Slapuku politika: vardas - paskirtis - galiojimas */
	body.page-id-7445 .entry-content table th:first-child,
	body.page-id-7445 .entry-content table td:first-child {
		width: 42%;
	}

	body.page-id-7445 .entry-content table th:last-child,
	body.page-id-7445 .entry-content table td:last-child {
		width: 22%;
	}

	/* Privatumo politika: tikslas - duomenys - pagrindas - terminas */
	body.page-id-3 .entry-content table th:nth-child(1),
	body.page-id-3 .entry-content table td:nth-child(1) {
		width: 26%;
	}

	body.page-id-3 .entry-content table th:nth-child(2),
	body.page-id-3 .entry-content table td:nth-child(2) {
		width: 30%;
	}

	body.page-id-3 .entry-content table th:nth-child(3),
	body.page-id-3 .entry-content table td:nth-child(3) {
		width: 26%;
	}

	body.page-id-3 .entry-content table th:nth-child(4),
	body.page-id-3 .entry-content table td:nth-child(4) {
		width: 18%;
	}
}

/* ==========================================================================
   Slapuku sutikimo juostele (Complianz)
   Spalvos ir kampai sudeti pacio iskiepio nustatymuose; cia tik tai, ko ten
   nera: svetaines mygtuku tipografija ir zalio "Visada aktyvus" nuemimas.
   ========================================================================== */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 1px;
	padding: 13px 18px;
	transition: background-color .2s ease, color .2s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background-color: #5a5a5a;
	border-color: #5a5a5a;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* Zalia "Visada aktyvus" zyma nesiderina su juoda-balta juostele */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active {
	color: #5a5a5a;
}

/* Nuorodos i politikas - kaip svetaineje: juodos, pabrauktos */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   "Siuo metu neturime" prekiu sarase.
   Stovi ten, kur paprastai kaina, todel ir atrodo kaip kaina - tik pilkas
   ir neparyskintas, kad nesusimaisytu su tikra kaina.
   ========================================================================== */
.woocommerce ul.products li.product .m22-nera-sarase {
	display: block;
	margin: 20px 0 14px;
	font-size: 15px;
	line-height: 1.65;
	color: #8a8a8a;
}

/* ==========================================================================
   Akcijos zyme prekes puslapyje (vietoj juostos virsuje)
   ========================================================================== */
.single-product .summary .m22-akcijos-zyme {
	display: inline-block;
	margin-left: 12px;
	border: 0;
	background: none;
	color: #9C4A24;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Akciju juosta parduotuves virsuje - kad neprisiliestu prie rikiavimo */
.m22-akcijos-juosta {
	margin-bottom: 50px;
}

/* Telefone jos atsisakom: atidarius parduotuve pirmiausia matyti nuolaidu
   slankiklis, ir neaisku, i koki puslapi pataikei. Filtrai ir prekes
   svarbiau - nuolaidos vis tiek pasiekiamos per "%" meniu ir pradzios
   puslapyje. */
@media (max-width: 768px) {
	.m22-akcijos-juosta {
		display: none;
	}
}

/* ==========================================================================
   Puslapiu numeriai
   WooCommerce numatytieji - langeliai su remeliais ir alyvine dabartinio
   puslapio spalva. Cia paprasciau: juodas kvadratas dabartiniam, kiti be
   jokiu remeliu, visa eile per vidurį.
   ========================================================================== */
.woocommerce nav.woocommerce-pagination {
	margin-top: 60px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: var(--contrast);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 1px;
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus {
	background: var(--base-2);
	color: var(--contrast);
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: var(--contrast);
	color: var(--base-3);
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	min-width: 0;
	padding: 0 2px;
	background: none;
	color: var(--contrast-3);
}

/* ==========================================================================
   Filtrai telefone: mygtukas + issistumiantis skydelis
   ========================================================================== */
.m22-filtrai-mygtukas {
	display: none;
	width: 100%;
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--contrast);
	background: none;
	color: var(--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.m22-filtru-fonas {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.m22-filtru-uzdarymas {
	display: none;
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 4px 10px;
	border: 0;
	background: none;
	color: var(--contrast);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 768px) {
	.woocommerce .m22-filtrai-mygtukas,
	.woocommerce-page .m22-filtrai-mygtukas {
		display: block;
	}

	/* Tema soninį stulpelį telefone paslepia visai - cia ji grazinam,
	   bet jau kaip is sono issistumianti skydeli. */
	.inside-left-sidebar,
	.inside-right-sidebar {
		display: block !important;
	}

	#left-sidebar.widget-area,
	#right-sidebar.widget-area {
		display: block !important;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 88%;
		max-width: 360px;
		padding: 54px 22px 40px;
		background: var(--base-3);
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-102%);
		transition: transform .28s ease;
		float: none;
	}

	.m22-filtru-uzdarymas {
		display: block;
	}

	body.m22-filtrai-atverti #left-sidebar.widget-area,
	body.m22-filtrai-atverti #right-sidebar.widget-area {
		transform: none;
	}

	body.m22-filtrai-atverti .m22-filtru-fonas {
		opacity: 1;
		visibility: visible;
	}

	body.m22-filtrai-atverti {
		overflow: hidden;
	}

	/* Telefone uztenka vieno meniu - visas parduotuves sarasas jau yra
	   po mygtuku virsuje (Off Canvas). Juoda juosta su antruoju "Meniu"
	   tik atkartodavo ta pati ir valge ekrano auksti. */
	.secondary-navigation {
		display: none;
	}
}

/* ==========================================================================
   Rikiavimo sarasas
   Narsykles savas <select> sarasas piesiamas operacines sistemos, todel
   CSS jo nepasiekia. Vietoj jo - savas, tokio pat stiliaus kaip parduotuve.
   ========================================================================== */
/* Temos rodykle priklausė senajam <select> - su savu sarasu ji nebereikalinga */
.woocommerce-ordering.m22-rikiavimas-pakeistas::after {
	content: none;
}

.woocommerce-ordering.m22-rikiavimas-pakeistas select.orderby {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.m22-rikiavimas {
	position: relative;
	display: inline-block;
	min-width: 240px;
	text-align: left;
}

.m22-rikiavimas-mygtukas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--base);
	background: var(--base-3);
	color: var(--contrast);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.m22-rikiavimas-mygtukas::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--contrast);
	border-bottom: 1px solid var(--contrast);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}

.m22-rikiavimas.is-open .m22-rikiavimas-mygtukas::after {
	transform: translateY(2px) rotate(225deg);
}

.m22-rikiavimas.is-open .m22-rikiavimas-mygtukas {
	border-color: var(--contrast);
}

.m22-rikiavimas-sarasas {
	position: absolute;
	top: calc(100% - 1px);
	right: 0;
	left: 0;
	z-index: 60;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--contrast);
	background: var(--base-3);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

.m22-rikiavimas-sarasas li {
	margin: 0;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.m22-rikiavimas-sarasas li:hover,
.m22-rikiavimas-sarasas li:focus {
	background: var(--base-2);
}

.m22-rikiavimas-sarasas li.is-selected {
	background: var(--contrast);
	color: var(--base-3);
}

@media (max-width: 768px) {
	.m22-rikiavimas {
		display: block;
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   Mobilus meniu (Off Canvas)

   Isdestymas kaip didziosiose parduotuvese: uzrasai kaireje, rodykle
   desiniame krašte, o grupes atskirtos plonu bruksniu - is karto matyti,
   kur baigiasi kategorijos ir prasideda prekiu zenklai.

   Grupes pradzia zymima meniu punkto klase "m22-grupe" (irasoma
   valdymo skydelyje, meniu punkto CSS klasiu laukelyje).
   ========================================================================== */
#generate-slideout-menu .inside-navigation {
	display: block;
	padding: 0;
}

#generate-slideout-menu .slideout-exit {
	display: block;
	margin-left: auto;
	padding: 18px 20px;
}

#generate-slideout-menu ul.slideout-menu {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 40px;
}

#generate-slideout-menu ul.slideout-menu li {
	position: relative;
	width: 100%;
	text-align: left;
}

#generate-slideout-menu ul.slideout-menu li > a {
	display: block;
	padding: 15px 52px 15px 22px;
	text-align: left;
	line-height: 1.3;
	letter-spacing: .6px;
}

/* Rodykle desiniame krašte. Punktams su pomeniu ja piesia pati tema
   (mygtukas .dropdown-menu-toggle), likusiems - pridedam cia. */
#generate-slideout-menu ul.slideout-menu li:not(.menu-item-has-children) > a::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	color: var(--contrast-3);
}

#generate-slideout-menu .dropdown-menu-toggle {
	position: absolute;
	top: 0;
	right: 8px;
	padding: 15px 14px;
	line-height: 1.3;
}

/* Grupiu skirtukai */
#generate-slideout-menu ul.slideout-menu > li.m22-grupe {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--base);
}

/* Pomeniu - iytrauka ir smulkesnis sriftas, kad matytusi antras lygis */
#generate-slideout-menu ul.slideout-menu .sub-menu {
	padding: 0 0 8px;
	background: var(--base-2);
}

/* Tema slankiojanciam meniu numato JUODAS pomeniu juostas su BALTU tekstu
   (Tinkinimas -> Spalvos -> Slideout submenu). Mes fona pakeitem i sviesu,
   o tekstas liko baltas - ir pomeniu pasidare beveik nematomas. Todel
   spalvas nurodom cia, salia fono, kad jos visada eitu poroje. */
#generate-slideout-menu ul.slideout-menu .sub-menu li > a {
	padding: 10px 52px 10px 38px;
	font-size: 14px;
	letter-spacing: .3px;
	text-transform: none;
	color: var(--contrast);
}

#generate-slideout-menu ul.slideout-menu .sub-menu li > a:hover,
#generate-slideout-menu ul.slideout-menu .sub-menu li > a:focus,
#generate-slideout-menu ul.slideout-menu .sub-menu li.current-menu-item > a {
	background: var(--base);
	color: var(--contrast);
}

#generate-slideout-menu ul.slideout-menu .sub-menu .dropdown-menu-toggle,
#generate-slideout-menu ul.slideout-menu .sub-menu li > a::after {
	color: var(--contrast-3);
}

/* Isskleidus, virsutinis punktas nebeblunka - lieka juodas */
#generate-slideout-menu ul.slideout-menu > li.menu-item-has-children > a,
#generate-slideout-menu ul.slideout-menu > li.sfHover > a,
#generate-slideout-menu ul.slideout-menu > li > a:hover {
	color: var(--contrast);
}

#generate-slideout-menu ul.slideout-menu .sub-menu li > a::after {
	right: 26px;
	font-size: 18px;
}

/* Esamas puslapis buvo pilkas - atrode kaip neveikiantis. Vietoj blukinimo
   pazymim plonu bruksniu po uzrasu. */
#generate-slideout-menu ul.slideout-menu .current-menu-item > a,
#generate-slideout-menu ul.slideout-menu .current_page_item > a,
#generate-slideout-menu ul.slideout-menu .current-menu-ancestor > a,
#generate-slideout-menu ul.slideout-menu .current-menu-parent > a {
	color: var(--contrast);
}

#generate-slideout-menu ul.slideout-menu .current-menu-item > a,
#generate-slideout-menu ul.slideout-menu .current_page_item > a {
	font-weight: 600;
}

/* ==========================================================================
   Antraste telefone: meniu ir paieska kaireje, logotipas per vidurį,
   krepselis desineje.

   DEMESIO: prilipus prie virsaus tema perkrikstija elementa - #site-navigation
   tampa #sticky-placeholder, o virsuje atsiranda naujas #sticky-navigation.
   Todel tos pacios taisykles surasytos visiems trims: kitaip paslinkus puslapi
   isdestymas grizdavo i numatytaji ir juosta issipusdavo dvigubai.

   Tema visus elementus deda i viena flex eilute (.inside-navigation).
   Krepselis ir paieska sedi bendrame .menu-bar-items konteineryje, todel
   atskirti ju eiles tvarka neimanoma - display:contents ta konteineri
   "istirpdo", ir abu tampa tiesioginiais eilutes nariais.
   ========================================================================== */
@media (max-width: 768px) {
	#site-navigation .inside-navigation,
	#sticky-navigation .inside-navigation,
	#sticky-placeholder .inside-navigation,
	.navigation-stick .inside-navigation {
		justify-content: flex-start;
		gap: 2px;
	}

	#site-navigation .menu-bar-items,
	#sticky-navigation .menu-bar-items,
	#sticky-placeholder .menu-bar-items {
		display: contents;
	}

	#site-navigation .menu-toggle,
	#sticky-navigation .menu-toggle,
	#sticky-placeholder .menu-toggle {
		order: 1;
		margin: 0;
		padding-left: 12px;
		padding-right: 8px;
	}

	#site-navigation .menu-bar-item.search-item,
	#sticky-navigation .menu-bar-item.search-item,
	#sticky-placeholder .menu-bar-item.search-item {
		order: 2;
	}

	#site-navigation .navigation-branding,
	#sticky-navigation .navigation-branding,
	#sticky-placeholder .navigation-branding {
		order: 3;
		flex: 1 1 auto;
		justify-content: center;
		margin: 0;
		height: auto;
	}

	#site-navigation .inside-navigation,
	#sticky-navigation .inside-navigation,
	#sticky-placeholder .inside-navigation {
		min-height: 60px;
		align-items: center;
		/* Be sito eilute lauzosi: tuscias .main-nav ir paieskos forma
		   nukrenta i antra eilute ir balta juosta paauga dvigubai. */
		flex-wrap: nowrap;
	}

	/* Telefone meniu gyvena issistumianciame skydelyje, todel siai vietai
	   turinio nera - o tuscias blokas vis tiek uzima eilute. */
	#site-navigation .main-nav,
	#sticky-navigation .main-nav,
	#sticky-placeholder .main-nav {
		display: none;
	}

	#site-navigation .menu-bar-item.wc-menu-item,
	#sticky-navigation .menu-bar-item.wc-menu-item,
	#sticky-placeholder .menu-bar-item.wc-menu-item {
		order: 4;
		padding-right: 6px;
	}

	#site-navigation .main-nav,
	#sticky-navigation .main-nav,
	#sticky-placeholder .main-nav {
		order: 5;
	}

	/* Paieskos laukas issiskleidzia per visa antrastes plotį */
	#site-navigation .navigation-search,
	#sticky-navigation .navigation-search,
	#sticky-placeholder .navigation-search {
		order: 6;
	}
}

/* ==========================================================================
   Krepselis: mygtukas "Atnaujinti krepšelį"

   WooCommerce ji pateikia isjungta, kol kiekis nepakeistas. Tema mygtukams
   deda juoda fona, o isjungtam - juoda ir teksta: juoda ant juodo, t. y.
   pilkas staciakampis be jokio uzraso. Todel sitas mygtukas aprasomas
   atskirai: antraeilis, su remeliu, o isjungtas - blankus, bet skaitomas.
   ========================================================================== */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	background: none;
	border: 1px solid var(--contrast);
	color: var(--contrast);
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="update_cart"]:hover {
	background: var(--contrast);
	color: var(--base-3);
}

.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"][disabled],
.woocommerce input[name="update_cart"]:disabled {
	background: none;
	border-color: var(--base);
	color: var(--contrast-3);
	opacity: 1;
	cursor: default;
}

.woocommerce button[name="update_cart"]:disabled:hover,
.woocommerce button[name="update_cart"][disabled]:hover {
	background: none;
	color: var(--contrast-3);
}

/* ==========================================================================
   Pradzios puslapis telefone: nuotrauka tuoj po antraste

   "Sekciju ritmas" kiekvienai sekcijai duoda po 40px is virsaus ir apacios.
   Pirmajai sekcijai (hero) tas virsutinis tarpas prilimpa prie baltos
   antrastes juostos ir kartu atrodo kaip viena milziniska balta juosta -
   60px juosta + 40px tarpas. Pirmam blokui virsutinio tarpo nereikia.
   ========================================================================== */
@media (max-width: 768px) {
	.entry-content > .m22-hero:first-child,
	.entry-content > *:first-child {
		margin-top: 0 !important;
	}
}

/* ==========================================================================
   Slapuku nustatymu mygtukas porasteje
   Turi buti <button> (to reikia Complianz), bet atrodyti kaip paprasta
   porastes nuoroda - kad nesiskirtu nuo kaimynu saraše.
   ========================================================================== */
.m22-slapuku-nustatymai button.cmplz-manage-consent {
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	line-height: inherit;
	cursor: pointer;
	border-radius: 0;
}

.m22-slapuku-nustatymai button.cmplz-manage-consent:hover,
.m22-slapuku-nustatymai button.cmplz-manage-consent:focus {
	background: none;
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   Slapuku "Keisti pasirinkima" kampelis

   Complianz ji deda desineje apacioje - ten, kur ir rodykle "i virsu",
   todel jiedu uzlipdavo vienas ant kito. Perkeliam i kaire puse.

   Padeti nustatom patys (transform), o iskiepio animacija isjungiam:
   ji arba istumia kampeli visa i ekrana, arba paslepia visai, ir su
   media uzklausomis nesusitaria. Cia elgesys vienodas visur: kampelis
   pakistas po ekrano krastu, matosi tik virsutinis kraštelis, o
   uzvedus pele arba paliestus - issistumia visas.
   ========================================================================== */
#cmplz-manage-consent .cmplz-manage-consent {
	right: auto !important;
	left: 24px !important;
	bottom: 0 !important;
	display: block !important;
	animation: none !important;
	transform: translateY(34px);
	transition: transform .25s ease;
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus,
#cmplz-manage-consent .cmplz-manage-consent:active {
	transform: translateY(0);
}

/* Telefone - ne prie apacios, o prie kairiojo sono.

   Apacioje telefone susirenka viskas: juostu mygtukai, rodykle i virsu,
   "i krepseli". Todel cia kampelis atsistoja staciai prie kairiojo krasto,
   sirdyje virs apacios - siauras, apie 34 px plocio, nieko neuzstoja. */
@media (max-width: 768px) {
	#cmplz-manage-consent .cmplz-manage-consent {
		left: 0 !important;
		bottom: 80px !important;
		height: auto !important;
		min-width: 0 !important;
		width: auto !important;
		padding: 14px 9px !important;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		/* Kortele pasukta 180 laipsniu, todel jos "kaire" ekrane atsiduria
		   desineje. Apvalinam tas puses, kurios pasukus atsiduria toliau
		   nuo ekrano krasto. */
		border-radius: 0 !important;
		border-top-left-radius: 8px !important;
		border-bottom-left-radius: 8px !important;
		border-right: 0 !important;
		/* Juoda krastine ties svelniu fonu atrodo per kietai */
		border-color: #dcdcdc !important;
		/* Pilnas uzrasas "Keisti slapuku pasirinkima" staciai uzima 220 px
		   ir uzstoja turini. Telefone rodom trumpa - uztenka, nes salia
		   porasteje yra ir visas punktas. */
		font-size: 0 !important;
		line-height: 1;
	}

	#cmplz-manage-consent .cmplz-manage-consent::after {
		content: "Slapukai";
		font-size: 12px;
		font-weight: 500;
		letter-spacing: .5px;
	}

	#cmplz-manage-consent .cmplz-manage-consent:hover,
	#cmplz-manage-consent .cmplz-manage-consent:focus,
	#cmplz-manage-consent .cmplz-manage-consent:active {
		transform: rotate(180deg);
	}
}