/*
Theme Name: Pareno
Theme URI: https://pareno.pl
Description: Motyw potomny Kadence dla sklepu Pareno. Paleta, kroje i odstępy przeniesione z demo zaakceptowanego przez klienta. Logika sklepu siedzi we wtyczce Pareno Core, nie tutaj.
Author: Pareno
Template: kadence
Version: 0.2.1
Requires PHP: 7.4
Text Domain: pareno
*/

/* ==========================================================================
   Zmienne przeniesione z demo, plik assets/styl.css.
   Wartości są przepisane jeden do jednego, nie przybliżone.
   Źródło: docs/demo-specyfikacja.md, sekcja 1 i 10.
   Charakter marki: premium, minimalizm, ciepła biel i piaskowe beże,
   jedno miedziane akcentowanie.
   ========================================================================== */

:root {
	--tlo:         #FAF7F2;   /* ciepła biel, tło strony */
	--tlo-2:       #F1EBE1;   /* sekcja przełamana, piaskowa */
	--tlo-3:       #E7DECF;   /* kadry zdjęć, awatary */
	--plaszcz:     #FFFFFF;   /* karty */
	--atrament:    #17130F;   /* tekst główny, przyciski */
	--atrament-2:  #443B32;   /* tekst drugorzędny */
	--przygasly:   #756A5E;   /* podpisy */
	--linia:       #E4DCD0;
	--linia-2:     #D6CABA;
	--miedz:       #8F5730;   /* akcent: cena, nadtytuły, ikony */
	--miedz-jasna: #C08A5E;
	--zielen:      #3F6B4A;   /* potwierdzenia */

	--r-s:  8px;
	--r-m:  14px;
	--r-l:  22px;
	--r-xl: 30px;

	--cien-1: 0 1px 2px rgba(23,19,15,.05), 0 8px 24px -12px rgba(23,19,15,.18);
	--cien-2: 0 2px 6px rgba(23,19,15,.06), 0 24px 60px -24px rgba(23,19,15,.28);
	--cien-3: 0 40px 80px -40px rgba(23,19,15,.45);

	--pas: 1240px;
	--luz: clamp(64px, 9vw, 128px);

	--tekst: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
	--tytul: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

	--gladko: cubic-bezier(.22, 1, .36, 1);
}

/* Demo nie ma trybu ciemnego i nie chcemy go tu wprowadzać tylnymi drzwiami.
   Kadence potrafi go włączyć, dlatego wymuszamy jasny schemat. */
:root {
	color-scheme: light;
}

/* Kadence trzyma własne zmienne globalne. Podpinamy je pod nasze,
   żeby elementy motywu, których nie stylujemy ręcznie, też trafiły w paletę. */
:root {
	--global-palette1: var(--miedz);
	--global-palette2: var(--miedz-jasna);
	--global-palette3: var(--atrament);
	--global-palette4: var(--atrament-2);
	--global-palette5: var(--przygasly);
	--global-palette6: var(--linia);
	--global-palette7: var(--tlo-2);
	--global-palette8: var(--tlo);
	--global-palette9: var(--plaszcz);
	--global-content-width: var(--pas);
}

/* ==========================================================================
   Podstawa
   ========================================================================== */

body {
	background: var(--tlo);
	color: var(--atrament);
	font-family: var(--tekst);
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--tytul);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.022em;
	color: var(--atrament);
}

/* Rozmiar hero z demo tylko tam, gdzie faktycznie jest nagłówek strony.
   Na listach wpisów i produktów tytuły są mniejsze, bo inaczej jeden wpis
   zajmuje cały ekran. */
h1,
.single .entry-title,
.page .entry-title,
.woocommerce-products-header__title {
	font-size: clamp(38px, 5.6vw, 68px);
	line-height: 1.08;
	letter-spacing: -.032em;
}

/* Tytuł na liście wpisów i w kartach: rozmiar karty produktu z demo. */
.archive .entry-title,
.blog .entry-title,
.search .entry-title,
.home .entry-title,
.loop-entry .entry-title,
.entry-archive .entry-title {
	font-size: 21px;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.archive .entry-title a,
.blog .entry-title a,
.home .entry-title a,
.loop-entry .entry-title a {
	color: var(--atrament);
}

h2 {
	font-size: clamp(30px, 4.2vw, 48px);
}

h3 {
	font-size: 21px;
}

a {
	color: var(--miedz);
	text-underline-offset: 2px;
}

/* Szerokość treści z demo: maksymalnie 1240 px, 20 px marginesu z boku,
   poniżej 560 px marginesy schodzą do 16 px. */
.content-container,
.entry-content > .alignwide,
.site-container {
	width: min(100% - 40px, var(--pas));
	margin-inline: auto;
}

@media (max-width: 560px) {
	.content-container,
	.entry-content > .alignwide,
	.site-container {
		width: calc(100% - 32px);
	}
}

/* Nadtytuł sekcji: 12 px, wersaliki, miedź. W demo klasa .nadtytul. */
.pareno-nadtytul {
	display: block;
	margin-bottom: .5em;
	color: var(--miedz);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Lead pod nagłówkiem. */
.pareno-lid {
	max-width: 62ch;
	color: var(--atrament-2);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.7;
}

/* Sekcja przełamana piaskowym tłem, z kreskami nad i pod.
   W demo: pasek obietnic, Dlaczego, Opinie. */
.pareno-sekcja-alt {
	padding: var(--luz) 0;
	background: var(--tlo-2);
	border-top: 1px solid var(--linia);
	border-bottom: 1px solid var(--linia);
}

/* ==========================================================================
   Przyciski
   Podstawa z demo: pigułka 100 px, 15px/600, padding 15px 28px,
   po najechaniu unosi się o 2 px.
   ========================================================================== */

.wp-block-button__link,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 0;
	border-radius: 100px;
	background: var(--atrament);
	color: #FFFFFF;
	font-family: var(--tekst);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	text-transform: none;
	box-shadow: var(--cien-1);
	transition:
		transform .25s var(--gladko),
		background-color .2s,
		box-shadow .25s var(--gladko),
		color .2s,
		border-color .2s;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	transform: translateY(-2px);
	background: #2B231C;
	color: #FFFFFF;
	box-shadow: var(--cien-2);
}

.wp-block-button__link:active,
.button:active,
button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
}

/* Przycisk obwódkowy. W demo .btn-obwod. */
.pareno-btn-obwod,
.woocommerce a.button.wc-backward,
.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .6);
	border: 1px solid var(--linia-2);
	color: var(--atrament);
	box-shadow: none;
}

.pareno-btn-obwod:hover,
.woocommerce a.button.wc-backward:hover,
.is-style-outline .wp-block-button__link:hover {
	background: #FFFFFF;
	border-color: var(--atrament);
	color: var(--atrament);
}

/* Przycisk na ciemnym tle. W demo .btn-jasny. */
.pareno-btn-jasny {
	background: #FFFFFF;
	color: var(--atrament);
}

.pareno-btn-jasny:hover {
	background: var(--tlo-2);
	color: var(--atrament);
}

/* ==========================================================================
   Karta produktu
   Uwaga: w demo karty generuje JavaScript z tablicy PRODUKTY. Tutaj to samo
   rysuje pętla WooCommerce, więc stylujemy znaczniki Woo, a nie znaczniki demo.
   Proporcje zdjęcia 4:3, promień 22 px, unoszenie o 6 px przy najechaniu.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--plaszcz);
	border: 1px solid var(--linia);
	border-radius: var(--r-l);
	text-align: left;
	transition:
		transform .35s var(--gladko),
		box-shadow .35s var(--gladko),
		border-color .25s;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-6px);
	border-color: var(--linia-2);
	box-shadow: var(--cien-2);
}

.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	margin: 0;
	object-fit: cover;
	background: var(--tlo-3);
	border-radius: 0;
	transition: transform .7s var(--gladko);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.045);
}

/* Treść karty. Odstępy z demo: 22px 22px 24px. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .pareno-lead-time,
.woocommerce ul.products li.product .button {
	margin-inline: 22px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: 22px;
	padding: 0;
	font-family: var(--tytul);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.woocommerce ul.products li.product .price {
	color: var(--miedz);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: -.01em;
}

.woocommerce ul.products li.product .price del {
	margin-right: .4em;
	color: var(--przygasly);
	font-size: 14px;
	font-weight: 400;
}

/* Stopka karty dociśnięta do dołu, tak jak w demo. */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	margin-bottom: 24px;
	padding: 12px 20px;
	font-size: 14px;
	align-self: flex-start;
}

/* Cena "od X zł" na listingu ma być spokojniejsza niż cena na karcie produktu. */
.woocommerce ul.products li.product .price .from,
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* ==========================================================================
   Karta pojedynczego produktu
   ========================================================================== */

.single-product .summary .price {
	color: var(--miedz);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.022em;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--przygasly);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.7;
}

.single-product .woocommerce-product-gallery img {
	border-radius: var(--r-xl);
	background: var(--tlo-3);
}

/* Miniatury tkanin. Wtyczka swatches renderuje je jako listę. */
.variations .pareno-swatches,
.variations ul.variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Próbka tkaniny: kółko, tak jak sześć kółek pod nazwą produktu w demo. */
.variations ul.variable-items-wrapper li {
	border-radius: 50%;
	overflow: hidden;
}

/* Tabela wymiarów. */
.pareno-wymiary,
.woocommerce table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}

.pareno-wymiary th,
.pareno-wymiary td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: .6em .8em;
	border-bottom: 1px solid var(--linia);
	text-align: left;
}

.pareno-wymiary th,
.woocommerce table.shop_attributes th {
	width: 45%;
	color: var(--przygasly);
	font-weight: 600;
}

/* ==========================================================================
   Formularze
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 14px 16px;
	background: var(--plaszcz);
	border: 1px solid var(--linia-2);
	border-radius: var(--r-m);
	color: var(--atrament);
	font-family: var(--tekst);
	font-size: 16px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	border-color: var(--miedz);
	box-shadow: 0 0 0 3px rgba(143, 87, 48, .12);
}

/* ==========================================================================
   Stopka
   ========================================================================== */

.site-footer,
.site-footer-wrap {
	background: var(--atrament);
	color: rgba(244, 239, 232, .72);
}

.site-footer h2,
.site-footer h3,
.site-footer h4 {
	color: #FFFFFF;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.site-footer a {
	color: rgba(244, 239, 232, .72);
}

.site-footer a:hover {
	color: #FFFFFF;
}

/* ==========================================================================
   Nagłówek
   Uwaga z demo: menu mobilne musi być position: absolute, nie fixed.
   Nagłówek ma backdrop-filter, a to czyni z niego blok odniesienia dla
   elementów fixed i menu ląduje w złym miejscu ekranu.
   ========================================================================== */

.site-header-wrap {
	background: rgba(250, 247, 242, .82);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
}

.site-header-row-container-inner {
	transition: height .25s var(--gladko);
}

/* Po przewinięciu Kadence dokłada klasę na body. */
.site-header.item-is-stuck .site-header-wrap,
.kadence-sticky-header.item-is-fixed .site-header-wrap {
	border-bottom: 1px solid var(--linia);
	box-shadow: 0 8px 24px -20px rgba(23, 19, 15, .5);
}

@media (max-width: 880px) {
	.mobile-navigation,
	.site-header .mobile-toggle-open-container + .header-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var(--tlo);
	}
}

/* ==========================================================================
   Szacunek dla ustawień dostępności
   Demo to ma, więc przenosimy.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}