/* ============================================================================
   GORY ARCHIVE — Product category / brand / search / shop archive layout
   Extracted from skp_render_product_archive_layout() inline <style> block.
   Enqueued via functions.php on is_tax() | is_shop() | is_search() | is_archive()
   ============================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.skp-brand-archive-page {
	padding-top: 10px;
	/* intentionally empty — outer wrapper only */
}

/* ── Two-column layout: sidebar + main ────────────────────────────────────── */
.skp-brand-layout {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding-bottom: 64px;
}

/* ── Left sidebar ─────────────────────────────────────────────────────────── */
.skp-brand-sidebar {
	flex: 0 0 20%;
	max-width: 20%;
	position: sticky;
	top: calc(var(--sgor-adminbar-offset, 0px) + var(--sgor-newsbar-h, 22px) + var(--sgor-header-h, 56px) + 20px);
	height: calc(100vh - var(--sgor-adminbar-offset, 0px) - var(--sgor-newsbar-h, 22px) - var(--sgor-header-h, 56px) - 20px);
	overflow: hidden;
}

.skp-brand-nav {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: #000 #fff;
}

.skp-brand-nav::-webkit-scrollbar        { width: 1px; height: 1px; }
.skp-brand-nav::-webkit-scrollbar-track  { background: transparent; }
.skp-brand-nav::-webkit-scrollbar-thumb  { background: #000; border-radius: 0; }
.skp-brand-nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ── Right main content ────────────────────────────────────────────────────── */
.skp-brand-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Fix card height to 5:7 ratio in archive context only.
   NOT in style.css so the empty-cart product section
   is not affected (cards there size to content). */
.skp-cat-archive ul.products li.skp-card .skp-card__inner {
	aspect-ratio: 5 / 7;
}

/* ── Sidebar nav menu ──────────────────────────────────────────────────────── */
.skp-brand-menu,
.skp-brand-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skp-brand-menu > li {
	border-bottom: 1px solid #e5e5e5;
}

.skp-brand-menu a {
	display: block;
	padding: 10px 0;
	color: #111;
	text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	line-height: 1.35;
	transition: color 120ms;
}

.skp-brand-menu a:hover {
	color: var(--gory-red, #d71d24);
}

.skp-brand-menu > li > a                                      { padding-left: 0; }
.skp-brand-menu > li > .sub-menu                              { display: none; padding-left: 0; }
.skp-brand-menu > li > .sub-menu > li > a                     { padding-left: 18px; }
.skp-brand-menu > li > .sub-menu > li > .sub-menu             { display: none; }
.skp-brand-menu > li > .sub-menu > li > .sub-menu > li > a   { padding-left: 36px; }
.skp-brand-menu .menu-item-has-children.is-open > .sub-menu  { display: block; }

.skp-brand-menu .current-menu-item > a,
.skp-brand-menu .current-menu-ancestor > a {
	color: var(--gory-red, #d71d24);
	font-weight: 600;
}

/* ── Page title ────────────────────────────────────────────────────────────── */
.skp-page-title-wrap {
	margin: 0 0 18px;
}

.skp-page-title {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: #111;
}

/* ── Term header: banner + short intro ─────────────────────────────────────── */
.skp-term-header {
	margin: 0 0 24px;
}

.skp-term-header__banner-wrap {
	margin: 0 0 18px;
}

.skp-term-header__banner {
	display: block;
	width: 100%;
	height: auto;
}

.skp-term-header__content {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #111;
}

/* ── Sorting row ───────────────────────────────────────────────────────────── */
.skp-brand-sorting {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 0 0 18px;
}

.skp-brand-sorting .woocommerce-ordering {
	float: none;
	margin: 0;
}

/* ── Product grid — override WooCommerce float layout ─────────────────────── */
.skp-cat-archive ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px !important;
	grid-auto-flow: row dense;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Remove WooCommerce clearfix pseudo-elements */
.skp-cat-archive ul.products::before,
.skp-cat-archive ul.products::after {
	content: none !important;
	display: none !important;
}



/* Reset WooCommerce per-item float + width overrides */
.skp-cat-archive ul.products > li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Hide WooCommerce pagination — load-more is used instead */
.woocommerce-pagination,
nav.woocommerce-pagination {
	display: none !important;
}

/* ── Load-more button ──────────────────────────────────────────────────────── */
.skp-load-more-wrap {
	display: flex;
	justify-content: center;
	margin: 32px 0 56px;
}

#skp-load-more {
	background: #d71d24;
	color: #fff;
	border: 0;
	padding: 14px 32px;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background 150ms, color 150ms;
}

#skp-load-more:hover {
	background: #b01720;
}

#skp-load-more[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ── Nowość badge (product "new" indicator) ─────────────────────────────────
   Use in templates: output a span with class "skp-card__badge skp-card__badge--nowosc"
   for products published within the last 30 days. The server/PHP template must
   decide when to render the badge; these styles only control appearance. ---------- */

/* Ensure image/media wrapper is a positioned ancestor so the badge can be placed.
   Add z-index:0 to avoid stacking context issues so absolutely-positioned badges
   can appear above the image. */
.skp-card__media {
    position: relative;
    z-index: 0;
}

/* Badge base */
.skp-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--gory-red, #d71d24);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Very high z-index to ensure badge is above image & overlays */
    z-index: 2147483647;
    /* keep pointer-events none so badge doesn't block clicks */
    pointer-events: none;
    /* Avoid forcing a new compositing layer on iOS Safari — let badges be clipped by .skp-card__media */
    will-change: auto;
    -webkit-transform: none;
    transform: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    white-space: nowrap;
}

/* Slightly smaller, tighter badge for very small cards (mobile) */
@media (max-width: 768px) {
    .skp-card__badge {
        font-size: 9px;
        padding: 3px 5px;
        top: 8px;
        left: 8px;
        border-radius: 0;
        /* Avoid layer promotion on iOS Safari so the badge gets clipped by .skp-card__media */
        will-change: auto !important;
        -webkit-transform: none !important;
        transform: none !important;
        backface-visibility: visible !important;
    }
}

/* Variant — subtle outline for light backgrounds (if needed) */
.skp-card__badge.skp-card__badge--outline {
    background: transparent;
    color: var(--gory-red, #d71d24);
    border: 2px solid currentColor;
    box-shadow: none;
}

/* ── Sale badge (yellow) ───────────────────────────────────────────────────
   Positioned below the primary "NOWOŚĆ" badge. The template should output
   a second badge element with class "skp-card__badge skp-card__badge--sale"
   containing the percentage text (e.g. "-30%"). If you need a wrapper or
   different markup adjust accordingly in the PHP template. ------------------ */

.skp-card__badge.skp-card__badge--sale {
    /* place below the new badge which sits at top:8px */
    top: 36px;
    left: 8px;
    background: #ffd400; /* bright yellow */
    color: #111; /* dark text for contrast */
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    z-index: 2147483647;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    white-space: nowrap;
}

/* If you want the percent text styled separately inside the badge, e.g.
   <span class="skp-card__badge skp-card__badge--sale"><span class="skp-sale__pct">-30%</span></span> */
.skp-card__badge.skp-card__badge--sale .skp-sale__pct {
    display: inline-block;
    font-weight: 900;
    margin-right: 0.25em;
    font-size: 12px;
}

/* Mobile: tighten spacing and reduce top offset so stacked badges don't overflow */
@media (max-width: 768px) {
    .skp-card__badge.skp-card__badge--sale {
        font-size: 9px;
        padding: 3px 5px;
        top: var(--sale-top-mb, 32px);
        left: 6px;
    }
}

/* ── Ekspert badge (green) ────────────────────────────────────────────────
   Positioned below NOWOŚĆ (top:8px) and sale (top:36px) badges.
   When only ekspert is shown it still sits at top:64px — acceptable because
   the badge stack always renders in DOM order, keeping a consistent layout. -- */

.skp-card__badge.skp-card__badge--ekspert {
    left: 8px;
    background: #1a8c3e; /* forest green */
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2147483647;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .skp-card__badge.skp-card__badge--ekspert {
        font-size: 9px;
        padding: 3px 5px;
        top: var(--ekspert-top-mb, 8px);
        left: 6px;
    }
}

/* If both badges are present and you prefer them stacked with a small gap,
   ensure enough room in the image area (the card uses aspect-ratio CSS already).
   If badges overlap interactive overlays, they are non-interactive (pointer-events:none). */


/* Accessibility: allow visually-hidden badge text if needed */
.skp-card__badge .sr-only {
\tposition: absolute;
\twidth: 1px;
\theight: 1px;
\tpadding: 0;
\tmargin: -1px;
\toverflow: hidden;
\tclip: rect(0,0,0,0);
\twhite-space: nowrap;
\tborder: 0;
}

/* ── Bottom SEO content: description + FAQ ─────────────────────────────────── */
.skp-term-bottom-content {
	margin: 48px 0 0;
}

.skp-term-bottom-content__section + .skp-term-bottom-content__section {
	margin-top: 32px;
}

.skp-term-bottom-content__title {
	margin: 0 0 14px;
	font-family: "Montserrat", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #111;
}

.skp-term-bottom-content__text {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.skp-term-bottom-content__text p   { margin: 0 0 16px; }
.skp-term-bottom-content__text ul,
.skp-term-bottom-content__text ol  { margin: 0 0 16px 24px; }

/* Description section: match FAQ sizing */
.skp-term-bottom-content__description .skp-term-bottom-content__text {
	font-size: 14px;
}

/* FAQ section: smaller font */
.skp-term-bottom-content__faq .skp-term-bottom-content__title {
	font-size: 18px;
}

.skp-term-bottom-content__faq .skp-term-bottom-content__text {
	font-size: 14px;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* 5 → 4 columns at 1200px */
@media (max-width: 1200px) {
	.skp-cat-archive ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 4 → 3 columns + sidebar stacks above grid at 1024px */
@media (max-width: 1024px) {
	.skp-brand-layout {
		display: block;
	}

	.skp-brand-sidebar {
		position: relative;
		top: auto;
		height: auto;
		max-width: none;
		overflow: visible;
		margin: 0 0 24px;
	}

	.skp-brand-nav {
		height: auto;
		overflow: visible;
		max-height: 320px;
		overflow-y: auto;
	}

	.skp-cat-archive ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Mobile (≤ 768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* ── Layout ── */
	.skp-brand-layout {
		width: 100%;
	}

	/* Hide sidebar entirely — the hamburger drawer already contains
	   the full category tree, so showing it here is redundant. */
	.skp-brand-sidebar {
		display: none;
	}

	/* ── Page title ── */
	.skp-page-title {
		font-size: 22px;
	}

	/* ── Grid: 2 columns with tighter gap ── */
		.skp-cat-archive ul.products {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px 18px !important; /* vertical x horizontal gap */
		}

		/* Product card appearance: border and background similar to single-product related cards */
		.skp-cat-archive ul.products .skp-card {
			background: var(--sgor-sp-bg, #fff);
			border: 1px solid var(--sgor-sp-border, #e5e5e5);
			border-radius: 0;
			overflow: hidden;
			transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
		}

		.skp-cat-archive ul.products .skp-card:hover {
			transform: translateY(-4px);
			border-color: #d7dde5;
			box-shadow: var(--sgor-sp-shadow, 0 6px 18px rgba(0,0,0,0.08));
		}

		/* Make image area visually match related cards */
		.skp-cat-archive ul.products .skp-card .skp-card__media {
			min-height: 180px;
			padding: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
		}

		/* Meta area: add top border and inner padding similar to related cards */
		.skp-cat-archive ul.products .skp-card .skp-card__meta {
			padding: 16px 18px 20px;
			border-top: 1px solid var(--sgor-sp-border, #e5e5e5);
		}

	/* ── Product card — scale everything down for 2-column mobile ── */

	/* Reduce meta padding and gap */
	.woocommerce li.skp-card .skp-card__meta {
		padding-top: 8px !important;
		gap: 3px !important;
	}

	/* Brand: subtle label, very small */
	.woocommerce li.skp-card .skp-card__brand {
		font-size: 10px !important;
	}

	/* Title: smaller, max 3 lines, no forced min-height */
	.woocommerce li.skp-card .skp-card__title {
		font-size: 12px !important;
		min-height: 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden !important;
	}

	/* Price: readable but compact */
	.woocommerce li.skp-card .skp-card__price,
	.woocommerce li.skp-card .skp-card__price * {
		font-size: 13px !important;
		font-weight: 600 !important;
	}

	/* ATC button: touch devices can't hover — hide the overlay button.
	   Users tap the card image/title to reach the product page. */
	.woocommerce li.skp-card .skp-card__actions {
		display: none !important;
	}

	/* ── Bottom content ── */
	.skp-term-bottom-content__title {
		font-size: 20px;
	}

	.skp-term-bottom-content__text {
		font-size: 15px;
	}

	/* ── Load-more ── */
	.skp-load-more-wrap {
		padding: 0 16px;
		margin-bottom: 40px;
	}

	#skp-load-more {
		width: 100%;
		padding: 16px;
	}

	/* Mobile: card inner scrolls — don't clip meta below image */
	.skp-cat-archive ul.products li.skp-card .skp-card__inner {
		aspect-ratio: auto !important;
		overflow: visible !important;
	}

	/* Mobile: image area becomes natural flow block (not padding-top trick) */
	.skp-cat-archive ul.products li.skp-card .skp-card__media {
		height: auto !important;
		padding-top: 0 !important;
		min-height: 160px;
		overflow: hidden;
	}

	/* Mobile: image link and image scale naturally in flow */
	.skp-cat-archive ul.products li.skp-card .skp-card__image-link {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		inset: auto !important;
		padding: 12px;
		box-sizing: border-box;
	}

	.skp-cat-archive ul.products li.skp-card .skp-card__image-link img {
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}

	/* Mobile: meta visible below image */
	.skp-cat-archive ul.products li.skp-card .skp-card__meta {
		padding-bottom: 8px !important;
	}

	/* Mobile: price spacing */
	.woocommerce li.skp-card .skp-card__price {
		margin-top: 4px !important;
		margin-bottom: 8px !important;
		display: block;
	}
}

/* ── Very small phones (≤ 400px) ─────────────────────────────────────────── */
@media (max-width: 400px) {
	.skp-cat-archive ul.products {
		gap: 8px !important;
	}

	.woocommerce li.skp-card .skp-card__title {
		font-size: 11px !important;
	}
}