/* =============================================================
   Semarti, sklep i kategorie WooCommerce (Etap 6B)
   Ładowany tylko na sklepie, kategoriach i tagach produktów (patrz
   warunek w functions.php), nigdy na Home, Kontakt, Na zamówienie,
   O nas ani na pojedynczym produkcie, koszyku, checkout czy moim
   koncie. Literalne wartości HEX zgodne z paletą z Etapu 3B, ten sam
   wzorzec co semarti-header.css i semarti-footer.css.

   Dwie warstwy selektorów w tym pliku:
   1. Własne sekcje (.semarti-shop-*), w pełni kontrolowany markup.
   2. Natywne elementy WooCommerce/Blocksy (ul.products, .price, itd.),
      celowo NIE owinięte w żaden nowy wrapper, żeby nie tracić
      wbudowanego stronicowania, sortowania i AJAX koszyka. Część
      reguł ma !important, bo Blocksy dolącza własny, dynamicznie
      generowany CSS z wyższym priorytetem w kolejności ładowania.
   ============================================================= */

/* ── Zmienne ───────────────────────────────────────────────── */
:root {
	--ssw-dark:       #151413;
	--ssw-dark-grad:  linear-gradient(135deg, #151413 0%, #2A2520 100%);
	--ssw-light:      #FAF7F1;
	--ssw-light-warm: #F1E8D9;
	--ssw-white:      #FFFDF8;
	--ssw-primary:    #2A2520;
	--ssw-primary-h:  #3A3129;
	--ssw-accent:     #B88442;
	--ssw-accent-h:   #9F6F35;
	--ssw-text:       #1F1D1A;
	--ssw-text-2:     #6F675D;
	--ssw-border:     #E3D6C4;
	--ssw-radius:     8px;
	--ssw-radius-lg:  14px;
	--ssw-shadow-lg:  0 8px 40px rgba(0,0,0,.14);
	--ssw-t:          .25s ease;
	--ssw-max:        1200px;
	--ssw-px:         clamp(16px, 4vw, 48px);
}

.semarti-shop-container {
	max-width: var(--ssw-max);
	margin: 0 auto;
	padding: 0 var(--ssw-px);
}

/* ── Przyciski własnych sekcji ─────────────────────────────── */
.semarti-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 26px;
	border-radius: var(--ssw-radius);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--ssw-t);
	cursor: pointer;
	border: 2px solid transparent;
	line-height: 1;
	white-space: nowrap;
}
.semarti-shop-btn--primary {
	background: var(--ssw-primary);
	color: #fff !important;
	border-color: var(--ssw-primary);
}
.semarti-shop-btn--primary:hover {
	background: var(--ssw-primary-h);
	border-color: var(--ssw-primary-h);
	color: #fff !important;
	transform: translateY(-1px);
}
.semarti-shop-btn--outline-light {
	background: transparent;
	color: #fff !important;
	border-color: rgba(255,255,255,.35);
}
.semarti-shop-btn--outline-light:hover {
	border-color: rgba(255,255,255,.7);
	background: rgba(255,255,255,.1);
}

/* ══════════════════════════════════════════════════════════════
   HERO (sklep i kategorie)
══════════════════════════════════════════════════════════════ */

.semarti-shop-hero {
	background: var(--ssw-dark);
	position: relative;
	overflow: hidden;
	padding: clamp(48px,7vw,88px) 0;
	margin-bottom: clamp(32px,5vw,56px);
}

.semarti-shop-hero__bg-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(184,132,66,.10) 0%, transparent 55%),
		radial-gradient(ellipse at 10% 90%, rgba(10,16,20,.8) 0%, transparent 60%);
	pointer-events: none;
	z-index: 1;
}

.semarti-shop-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 780px;
}

.semarti-shop-hero__breadcrumb {
	font-size: 12.5px;
	color: rgba(255,255,255,.55);
	margin-bottom: 18px;
}
.semarti-shop-hero__breadcrumb a {
	color: rgba(255,255,255,.7);
	text-decoration: none;
}
.semarti-shop-hero__breadcrumb a:hover { color: var(--ssw-accent); }

.semarti-shop-hero__label {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ssw-accent);
	margin-bottom: 14px;
}

.semarti-shop-hero__title {
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.01em;
	line-height: 1.15;
	margin: 0 0 16px;
}

.semarti-shop-hero__desc {
	font-size: clamp(15px, 1.6vw, 16.5px);
	color: rgba(255,255,255,.85);
	margin: 0 auto 14px;
	line-height: 1.65;
	max-width: 56ch;
}

.semarti-shop-hero__count {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
	margin: 0 0 28px;
}

.semarti-shop-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

@media (max-width: 560px) {
	.semarti-shop-hero__actions { flex-direction: column; align-items: stretch; }
	.semarti-shop-hero__actions .semarti-shop-btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   PASEK SORTOWANIA I LICZNIKA WYNIKÓW
══════════════════════════════════════════════════════════════ */

.woo-listing-top,
.woocommerce-products-header + .woo-listing-top {
	max-width: var(--ssw-max);
	margin: 0 auto clamp(20px,3vw,32px);
	padding: 0 var(--ssw-px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce-result-count {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ssw-text-2) !important;
	margin: 0 !important;
}

.woocommerce-ordering {
	margin: 0 !important;
}
.woocommerce-ordering select {
	border: 1px solid var(--ssw-border) !important;
	border-radius: var(--ssw-radius) !important;
	padding: 8px 14px !important;
	font-size: 13px !important;
	color: var(--ssw-text) !important;
	background-color: var(--ssw-white) !important;
}

@media (max-width: 480px) {
	.woo-listing-top { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   SIATKA PRODUKTÓW (natywna petla WooCommerce)
══════════════════════════════════════════════════════════════ */

ul.products {
	max-width: var(--ssw-max);
	margin: 0 auto !important;
	padding: 0 var(--ssw-px) !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
}
ul.products::before,
ul.products::after { display: none !important; }

ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--ssw-white);
	border: 1px solid var(--ssw-border);
	border-radius: var(--ssw-radius-lg);
	overflow: hidden;
	transition: var(--ssw-t);
	text-align: left !important;
	display: flex !important;
	flex-direction: column !important;
}
ul.products li.product:hover {
	box-shadow: var(--ssw-shadow-lg);
	transform: translateY(-2px);
}

ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product > a:first-child {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Zdjęcie produktu, kwadratowy kontener (Etap 6C).
   Blocksy wstrzykuje inline style="aspect-ratio: 3/4" bezpośrednio na
   znaczniku <img> przez własną funkcję miniatur w pętli produktów.
   Style inline mają najwyższy priorytet w CSS, więc jedyny pewny
   sposób ich nadpisania to !important na dokładnie tej samej
   właściwości. Bez tego zdjęcia (mimo że źródłowe pliki są kwadratowe,
   1200x1200) renderowały się w pionowym, przyciętym polu 3:4. */
ul.products li.product figure {
	margin: 0;
}

ul.products li.product .ct-media-container {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	background: var(--ssw-light-warm);
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

ul.products li.product .ct-media-container img,
ul.products li.product img {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain !important;
	background: transparent;
	display: block;
}

/* Tekstowa część karty, w kolumnie flex, żeby przycisk zawsze
   trzymał się dołu, niezależnie od długości tytułu. */
ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	margin: 16px 18px 6px !important;
	padding: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title a {
	color: var(--ssw-text) !important;
	text-decoration: none;
}

ul.products li.product .price {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--ssw-text) !important;
	margin: 0 18px 12px !important;
	display: block;
}
ul.products li.product .price ins { text-decoration: none; }
ul.products li.product .price .woocommerce-Price-amount,
ul.products li.product .price bdi { color: var(--ssw-text); }

/* Kategorie produktu, mniej dominujące, drobny, stonowany tekst. */
ul.products li.product .entry-meta,
ul.products li.product .meta-categories {
	margin: 0 18px 10px !important;
	padding: 0 !important;
	list-style: none;
}
ul.products li.product .entry-meta,
ul.products li.product .entry-meta a {
	font-size: 10.5px !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ssw-text-2) !important;
	text-decoration: none;
}

/* Wrapper przycisku Blocksy (.ct-woo-card-actions), przypięty do dołu
   karty przez margin-top: auto, żeby wszystkie przyciski w jednym
   rzędzie siatki lądowały na tej samej wysokości. */
ul.products li.product .ct-woo-card-actions {
	margin-top: auto !important;
	padding: 6px 18px 18px !important;
}

ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	background: var(--ssw-primary) !important;
	color: #fff !important;
	border: 2px solid var(--ssw-primary) !important;
	border-radius: var(--ssw-radius) !important;
	padding: 10px 14px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-align: center;
	transition: var(--ssw-t);
}
ul.products li.product .button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover {
	background: var(--ssw-primary-h) !important;
	border-color: var(--ssw-primary-h) !important;
	color: #fff !important;
}

/* Mobile: dwie kolumny zamiast jednej, żeby uniknąć ogromnych,
   pojedynczych kart i pustych przestrzeni. */
@media (max-width: 700px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
	ul.products li.product .ct-media-container {
		padding: 12px;
	}
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 12.5px !important;
		margin: 10px 12px 4px !important;
	}
	ul.products li.product .price {
		font-size: 13.5px !important;
		margin: 0 12px 8px !important;
	}
	ul.products li.product .entry-meta,
	ul.products li.product .meta-categories {
		margin: 0 12px 8px !important;
	}
	ul.products li.product .ct-woo-card-actions {
		padding: 4px 12px 12px !important;
	}
	ul.products li.product .button,
	ul.products li.product a.add_to_cart_button,
	ul.products li.product a.button {
		font-size: 11.5px !important;
		padding: 9px 10px !important;
	}
}

@media (max-width: 360px) {
	ul.products {
		gap: 10px !important;
	}
	ul.products li.product .woocommerce-loop-product__title {
		font-size: 11.5px !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   PASEK ZAUFANIA
══════════════════════════════════════════════════════════════ */

.semarti-shop-trust {
	background: var(--ssw-light-warm);
	padding: clamp(24px,3.5vw,36px) 0;
	margin-top: clamp(40px,6vw,64px);
}

.semarti-shop-trust__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(20px,4vw,48px);
}

.semarti-shop-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.semarti-shop-trust__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ssw-primary);
	color: var(--ssw-accent);
	font-size: 12px;
	flex-shrink: 0;
}

.semarti-shop-trust__text {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ssw-text);
}

/* ══════════════════════════════════════════════════════════════
   CTA DOLNE
══════════════════════════════════════════════════════════════ */

.semarti-shop-cta {
	background: var(--ssw-dark-grad);
	padding: clamp(48px,7vw,80px) 0;
}

.semarti-shop-cta__inner {
	text-align: center;
}

.semarti-shop-cta__title {
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	color: #fff;
	margin: 0 auto 16px;
	max-width: 36ch;
}

.semarti-shop-cta__text {
	font-size: clamp(15px, 1.7vw, 16.5px);
	color: rgba(255,255,255,.82);
	max-width: 52ch;
	margin: 0 auto 28px;
	line-height: 1.65;
}

.semarti-shop-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

@media (max-width: 480px) {
	.semarti-shop-cta__actions { flex-direction: column; align-items: stretch; }
	.semarti-shop-cta__actions .semarti-shop-btn { width: 100%; text-align: center; }
	.semarti-shop-trust__inner { flex-direction: column; align-items: flex-start; padding-left: var(--ssw-px); }
}