/* =========================================================
   Bro N Sis Paws - woo.css
   Wlasne style elementow WooCommerce. Domyslne arkusze Woo
   (general/layout/smallscreen) sa wylaczone w inc/shop.php,
   wiec wszystko co Woo drukuje stylujemy tutaj.
   ========================================================= */

/* --- Breadcrumbs --- */
.woocommerce-breadcrumb {
	font-family: var(--font-sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink-soft); margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.woocommerce-breadcrumb a { color: var(--ink-soft); }
.woocommerce-breadcrumb a:hover { color: var(--ink); }

/* --- Naglowek archiwum sklepu --- */
.woocommerce-products-header__title {
	font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .6rem;
}
.term-description { color: var(--ink-soft); max-width: 46rem; margin-bottom: 1.8rem; }
.term-description p { margin: 0; }

/* --- Licznik wynikow + sortowanie --- */
.woocommerce-result-count {
	font-family: var(--font-sans); font-size: .72rem; letter-spacing: .08em; color: var(--ink-soft);
	margin: 0 0 1.4rem; float: left;
}
.woocommerce-ordering { float: right; margin: 0 0 1.4rem; }
.woocommerce-ordering select {
	appearance: none; -webkit-appearance: none;
	border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white);
	font-family: var(--font-sans); font-size: .72rem; letter-spacing: .06em; color: var(--ink);
	padding: .6rem 2.4rem .6rem 1.1rem; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23211D18' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .8rem center;
}
.woocommerce-ordering select:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
.woocommerce ul.products { clear: both; }

/* --- Komunikaty (notices) --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	list-style: none; margin: 0 0 1.8rem; padding: 1.1rem 1.4rem;
	border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius-sm);
	background: var(--white); color: var(--ink);
	font-family: var(--font-sans); font-size: .9rem;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
}
.woocommerce-error { border-left-color: #A94438; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
	order: 2; background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: var(--radius-pill);
	font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .6rem 1.2rem;
}
.woocommerce-message .button:hover { background: transparent; color: var(--ink); }

/* --- Przyciski Woo (fallback dla wszystkiego, czego nie zlapaly inne reguly) --- */
.woocommerce .button, .woocommerce button.button,
.woocommerce-page .button, .wp-element-button {
	font-family: var(--font-sans);
	border-radius: var(--radius-pill);
}
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button:disabled {
	background: var(--cream-deep); color: var(--ink-soft); border-color: var(--line); border-radius: var(--radius-pill);
	cursor: not-allowed; opacity: 1; padding: 1rem 2.1rem;
}

/* --- Ilosc --- */
.quantity { display: inline-flex; }
.quantity .qty {
	width: 4.2rem; padding: .85rem .4rem; text-align: center;
	border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--white);
	font-family: var(--font-sans); font-size: .9rem; color: var(--ink);
}
.quantity .qty:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
.quantity .screen-reader-text { position: absolute; left: -9999px; }

/* --- Meta produktu (kategoria; SKU ukryte filtrem) --- */
.single-product .product_meta {
	margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
	font-family: var(--font-sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.single-product .product_meta a { color: var(--ink); }
.single-product .woocommerce-variation-availability p { margin: .4rem 0 0; }
.single-product .stock.out-of-stock { color: #A94438; }
.single-product .stock.in-stock { color: var(--ink-soft); }

/* --- Opinie / formularz komentarza --- */
#reviews .woocommerce-Reviews-title { font-size: 1.5rem; margin-bottom: 1.2rem; }
#reviews .commentlist { list-style: none; margin: 0 0 2rem; padding: 0; }
#reviews .commentlist li { border-bottom: 1px solid var(--line); padding-block: 1.4rem; }
#reviews .comment_container img.avatar { display: none; }
#reviews .meta { font-family: var(--font-sans); font-size: .74rem; color: var(--ink-soft); margin: 0 0 .4rem; }
#reviews .description p { margin: 0; }
#reviews .star-rating { color: var(--ink); }
#review_form .comment-reply-title { font-family: var(--font-serif); font-size: 1.3rem; display: block; margin-bottom: 1rem; }
#review_form p { margin: 0 0 1rem; }
#review_form label { display: block; font-family: var(--font-sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
#review_form input[type="text"], #review_form input[type="email"], #review_form textarea {
	width: 100%; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--white); font-family: var(--font-sans); font-size: .9rem; color: var(--ink);
}
#review_form input:focus, #review_form textarea:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
#review_form .form-submit input {
	background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: var(--radius-pill); cursor: pointer;
	font-family: var(--font-sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: .95rem 2.1rem;
	transition: background .2s ease, color .2s ease;
}
#review_form .form-submit input:hover { background: transparent; color: var(--ink); }

/* --- Formularze kont (logowanie / rejestracja / zapomniane haslo) --- */
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
	max-width: 30rem; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius);
	padding: clamp(1.6rem, 4vw, 2.6rem); margin-top: 1.5rem;
}
.woocommerce-form-row, .woocommerce form .form-row { margin: 0 0 1.1rem; padding: 0; }
.woocommerce form .form-row label {
	display: block; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem;
}
.woocommerce form .form-row label .required { color: #A94438; text-decoration: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
	width: 100%; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--white); font-family: var(--font-sans); font-size: .92rem; color: var(--ink); box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
/* Ikona "pokaz haslo" korzystala z fontu ikon Woo (wylaczony) - chowamy. */
.woocommerce form .form-row .show-password-input { display: none; }
.woocommerce button.button[name="login"], .woocommerce button.button[name="register"],
.woocommerce-ResetPassword button.button {
	background: var(--ink); color: var(--cream); border: 1px solid var(--ink); border-radius: var(--radius-pill); cursor: pointer;
	font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: .95rem 2.1rem;
	transition: background .2s ease, color .2s ease;
}
.woocommerce button.button[name="login"]:hover, .woocommerce button.button[name="register"]:hover { background: transparent; color: var(--ink); }
.woocommerce-LostPassword { font-size: .85rem; }
.woocommerce-LostPassword a { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-form-login__rememberme { display: block; margin-bottom: 1rem; font-size: .85rem; }

/* --- Moje konto (po zalogowaniu) --- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a {
	display: inline-block; padding-bottom: .7rem;
	font-family: var(--font-sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--ink); border-bottom: 1px solid var(--ink); }
.woocommerce-MyAccount-content p { margin-top: 0; }
.woocommerce table.shop_table {
	width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	font-family: var(--font-sans); font-size: .9rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border-bottom: 1px solid var(--line); padding: .8rem 1rem; text-align: left;
}
.woocommerce table.shop_table thead th {
	font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-deep);
}

/* --- Paginacja sklepu --- */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 2.5rem; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: .4rem; list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
	border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: .78rem; color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --- Gwiazdki (bez arkuszy Woo ikony gwiazdek nie dzialaja z fontem Woo,
       wiec rysujemy prosto) --- */
.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em; font-size: .8rem; }
.star-rating::before { content: '\2606\2606\2606\2606\2606'; color: var(--ink-soft); float: left; top: 0; left: 0; position: absolute; letter-spacing: .1em; }
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before { content: '\2605\2605\2605\2605\2605'; top: 0; position: absolute; left: 0; color: var(--ink); letter-spacing: .1em; }

/* --- Wybor oceny w formularzu opinii ---
   Woo drukuje linki z tekstem ("1 z 5 gwiazdek") i liczy na wlasny font ikon,
   ktory wylaczylismy razem z arkuszami. Rysujemy gwiazdki sami, zostawiajac
   tekst dla czytnikow ekranu. */
p.stars { margin: 0 0 1.2rem; line-height: 1; }
p.stars span { display: inline-flex; gap: .25rem; }
p.stars a {
	display: inline-block;
	width: 1.5rem; height: 1.5rem;
	font-size: 0; /* chowa etykiete, ktora zostaje dostepna dla czytnikow */
	color: var(--line);
	text-decoration: none;
	transition: color .15s ease, transform .12s ease;
}
p.stars a::before {
	content: '\2605';
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	color: inherit;
}
p.stars a:hover { transform: translateY(-1px); }
/* najechanie: zapal wszystkie, zgas te za kursorem */
p.stars span:hover a { color: var(--ink); }
p.stars a:hover ~ a { color: var(--line); }
/* wybrana ocena: gwiazdka klikieta i wszystkie przed nia */
p.stars a.active,
p.stars a[aria-checked="true"],
p.stars a:has( ~ a.active ),
p.stars a:has( ~ a[aria-checked="true"] ) { color: var(--ink); }
p.stars a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- Drobiazgi układu po zdjęciu arkuszy Woo --- */
.woocommerce .clear { clear: both; }
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal;
}
