/*
 * Konfigurator obrączek (vendor: konfigurator.zlotyskorpion.com)
 * Custom skin pod design system Wardajubiler.
 * Vendor markup zostaje (Bootstrap 4.5.2 + ich classes), nadpisujemy paletę, fonty, layout cards/buttons.
 *
 * Vendor markup mappings:
 *   .zs-colProduct          → mamy .product-card (white card, rounded, hover shadow)
 *   .zs-colProduct__image   → .product-card__image (aspect-ratio 1:1, object-fit cover)
 *   .zs-colProduct__header  → .product-card__category (small label, gray)
 *   .zs-colProduct__footer  → .product-card__price (bold, weight 600)
 *   .btn-primary/.btn-info  → nasze pill button (gold, border-radius 100px)
 *   .btn-warning            → nasze pill button (czarny CTA)
 */

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");

/* === Wardajubiler design tokens === */
:root {
	--wj-primary: #000000;
	--wj-gold: #D6BB6D;
	--wj-gold-hover: #c4a95c;
	--wj-bg: #F5F5F5;
	--wj-surface: #FFFFFF;
	--wj-text: #000000;
	--wj-text-muted: #676767;
	--wj-border-radius: 0.5rem;
	--wj-border-radius-pill: 100px;
	--wj-box-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.10);
	--wj-transition: 300ms ease;
	--wj-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wj-font-accent: 'Playfair Display', Georgia, serif;
}

/* === Self-host fonts (cross-origin OK by HTTP, served from our domain) === */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('https://wardajubiler.pl/wp-content/themes/wardajubiler/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('https://wardajubiler.pl/wp-content/themes/wardajubiler/assets/fonts/playfair-display-latin.woff2') format('woff2');
}

/* === Body === */
body {
	background-color: var(--wj-bg);
	font-family: var(--wj-font-sans);
	color: var(--wj-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === Product card (zs-colProduct) — clone of theme .product-card === */
.card.zs-colProduct {
	background-color: var(--wj-surface);
	border: none;
	border-radius: var(--wj-border-radius);
	overflow: hidden;
	transition: box-shadow var(--wj-transition), transform var(--wj-transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card.zs-colProduct:hover {
	box-shadow: var(--wj-box-shadow-hover);
}

/* Header label (model nr) — top, small uppercase-ish */
.card-header.zs-colProduct__header {
	background-color: transparent;
	border: none;
	padding: 1rem 1rem 0;
	font-family: var(--wj-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wj-text-muted);
	text-align: left;
	letter-spacing: 0.02em;
	order: 1; /* vendor reorders to 2 in original; we keep it visually on top */
}

/* Body — image */
.card-body.zs-colProduct__body {
	background-color: var(--wj-surface);
	padding: 0.75rem 1rem;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zs-colProduct__image,
.img-thumbnail.zs-colProduct__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: none;
	border-radius: var(--wj-border-radius);
	background-color: transparent;
	padding: 0;
	transition: transform var(--wj-transition);
}

/* Bootstrap .img-thumbnail strip (vendor uses it on hero image + color swatches in detail view) */
.img-thumbnail {
	background-color: transparent;
	border: none;
	padding: 0;
	border-radius: var(--wj-border-radius);
}

.card.zs-colProduct:hover .zs-colProduct__image {
	transform: scale(1.03);
}

/* Footer — price */
.card-footer.zs-colProduct__footer {
	background-color: transparent;
	border: none;
	padding: 0 1rem 1rem;
	color: var(--wj-text) !important;
	font-family: var(--wj-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	order: 3;
}

.zs-colProduct__footerPrice {
	font-family: var(--wj-font-sans);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.26;
	color: var(--wj-text);
}

/* Hide vendor "details" button inside product card — flow uses click on whole card */
.card .btn.btn-info.btn-sm.zs-colProduct__footerBtn,
.btn.btn-sm.btn-info {
	display: none;
}

/* === Buttons — outline pill (transparent + black border, swap on hover) === */
/* Match design system pattern z _wc-coupon.scss (.wc-block-components-totals-coupon__button). */
.btn-primary,
.btn-info,
.btn-secondary,
.btn-warning {
	background-color: transparent;
	color: var(--wj-primary);
	border: 1px solid var(--wj-primary);
	border-radius: var(--wj-border-radius-pill);
	text-transform: uppercase;
	font-family: var(--wj-font-sans);
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0.75rem 2rem;
	transition: background-color var(--wj-transition), color var(--wj-transition), transform var(--wj-transition);
}

.btn-primary:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-warning:hover,
.btn-primary:focus,
.btn-info:focus,
.btn-secondary:focus,
.btn-warning:focus {
	background-color: var(--wj-primary);
	color: var(--wj-surface);
	border-color: var(--wj-primary);
	box-shadow: none;
	transform: translateY(-1px);
}

.btn-secondary {
	height: 48px;
	line-height: 1;
	padding: 0 2.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.btn.btn-sm.btn-warning.zs-productColLeft__footerBtn.zs-productColLeft__footerBtn--yellow {
	font-weight: 700;
	padding: 0.625rem 1.5rem;
}

/* === Small button variants === */
.btn-sm,
.btn-group-sm > .btn {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.625rem 1.5rem;
	border-radius: var(--wj-border-radius-pill);
	letter-spacing: 0.05em;
}

/* Block-level buttons (e.g. .btn-block from search form) keep pill */
.btn-block {
	border-radius: var(--wj-border-radius-pill);
}

/* === Pagination — vendor default (Bootstrap), tylko active state nadpisany === */
.page-link {
	color: var(--wj-primary);
}

.page-link:hover {
	color: var(--wj-gold);
}

/* Active page — czarne tło + biały tekst zamiast vendor gold */
.page-item.active .page-link,
.page-item.zs-navList__item--active .page-link {
	background-color: var(--wj-primary);
	border-color: var(--wj-primary);
	color: var(--wj-surface);
	font-weight: 600;
}

/* === Search / filter form === */
.zs-form {
	background-color: var(--wj-surface);
	border-radius: var(--wj-border-radius);
	padding: 1.25rem 1.5rem;
}

.zs-form__col,
.zs-form__colName {
	font-family: var(--wj-font-sans);
	font-size: 0.875rem;
	color: var(--wj-text);
}

.zs-form__colName {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

/* Form controls — pill input style like our category-filters */
.custom-select,
.custom-select-sm,
.form-control,
.form-control-sm {
	border-radius: var(--wj-border-radius-pill);
	border: 1px solid #e2e2e2;
	font-family: var(--wj-font-sans);
	font-size: 0.8125rem;
	padding: 0.5rem 2.25rem 0.5rem 1rem;
	background-color: var(--wj-surface);
	background-position: right 0.875rem center;
	transition: border-color var(--wj-transition), box-shadow var(--wj-transition);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	height: auto;
	min-height: 2.25rem;
}

.form-control,
.form-control-sm {
	padding: 0.5rem 1rem;
}

.custom-select:focus,
.form-control:focus {
	border-color: var(--wj-gold);
	box-shadow: 0 0 0 0.15rem rgba(214, 187, 109, 0.25);
	outline: none;
}

/* Custom checkbox — gold tick */
.custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--wj-gold);
	background-color: var(--wj-gold);
}

.custom-control-label {
	font-family: var(--wj-font-sans);
	font-size: 0.875rem;
	color: var(--wj-text);
}

/* === Konfigurator — detail view (po kliknięciu w obrączkę) === */
/* Layout: 3 kolumny — left: hero image + meta + actions, middle: form, right: color swatches */

.zs-productWrapper {
	background-color: var(--wj-surface);
	border-radius: var(--wj-border-radius);
	padding: clamp(1.25rem, 1rem + 1.25vw, 2rem);
	margin-bottom: 1.5rem;
}

/* Title sekcji — "Konfigurator" + "Wzór: A-101" */
.zs-productForm__title,
.zs-productColLeft-headerTitle {
	font-family: var(--wj-font-accent);
	font-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
	font-weight: 700;
	color: var(--wj-text);
	letter-spacing: -0.01em;
	margin-top: 1.5rem;
}

.zs-productColLeft-headerTitle--bold {
	font-family: var(--wj-font-sans);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wj-text-muted);
}

/* Hero image — large product preview (transparent — no surrounding card) */
.zs-productColLeft__imageBox,
.col.zs-productColLeft__imageBox {
	background-color: transparent;
	border-radius: var(--wj-border-radius);
	padding: 0;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zs-productColLeft__image,
.img-thumbnail.zs-productColLeft__image {
	width: 100%;
	max-width: 280px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: none;
	padding: 0;
	background-color: transparent;
	border-radius: var(--wj-border-radius);
}

/* Width/thickness info pill */
.zs-productColLeft__ringWidth,
.zs-productColLeft__thicknessRing {
	font-family: var(--wj-font-sans);
	font-size: 0.875rem;
	color: var(--wj-text);
	margin-bottom: 0.25rem;
}

.zs-productColLeft__ringWidth--bold,
.zs-productColLeft__thicknessRing--bold {
	font-weight: 600;
	color: var(--wj-text);
}

/* Footer buttons col-left */
.zs-productColLeft__footer,
.zs-productColLeft__footerContainer {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 1rem;
}

/* Form section labels (Rozmiar, Oprawa, Napis...) */
.zs-menRingSize__name,
.zs-menEngraving__name,
.zs-productColMiddle__ringsNames,
.zs-productColMiddle__ringsSizes label,
.zs-productColMiddle__ringsSettings label,
.zs-productColMiddle__ringsInscriptions label,
.zs-productColMiddle__ringsFonts label {
	font-family: var(--wj-font-sans);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--wj-text);
	letter-spacing: 0.02em;
	margin-bottom: 0.375rem;
}

.zs-productColMiddle__breakLine {
	border: none;
	border-top: 1px solid #ececec;
	margin: 1rem 0;
}

/* Current price (big in middle column) */
.zs-ringDetails__currentPrice,
.zs-productColMiddle__ringsPricesWeights b {
	font-family: var(--wj-font-sans);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wj-text);
}

/* Color swatches column right — clean image cards, no thumbnails frame */
.zs-RingColor {
	background-color: var(--wj-surface);
	border-radius: var(--wj-border-radius);
	padding: 0.75rem;
	margin-bottom: 0.75rem;
	transition: box-shadow var(--wj-transition);
}

.zs-RingColor:hover {
	box-shadow: var(--wj-box-shadow-hover);
}

.zs-RingColor__link,
.img-thumbnail.zs-RingColor__link {
	padding: 0;
	border: none;
	background-color: transparent;
	border-radius: var(--wj-border-radius);
	max-width: 100%;
	height: auto;
}

.zs-RingColor__price,
.zs-RingColor__price--bold {
	font-family: var(--wj-font-sans);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wj-text);
	display: block;
	margin-top: 0.5rem;
}

/* Engraving font preview list */
.zs-engravingFont__fontList {
	margin-top: 0.5rem;
}

/* Information for client (notice) */
.zs-informationForClient {
	font-family: var(--wj-font-sans);
	font-size: 0.8125rem;
	color: var(--wj-text-muted);
	background-color: var(--wj-bg);
	padding: 0.625rem 0.875rem;
	border-radius: var(--wj-border-radius);
	margin-top: 0.75rem;
}

/* === Vertical rhythm — row gap między rzędami produktów === */
.zs-rowCol {
	margin-bottom: 1.5rem;
}

/* Vendor wstawia <br/> jako separator między cards — ukrywamy, mamy własny gap */
.zs-containerRow > br,
.zs-containerForm > br {
	display: none;
}

/* === Pagination POD produktami (vendor renderuje JĄ przed gridem) === */
.zs-containerForm {
	display: flex;
	flex-direction: column;
}

.zs-containerForm > .row,
.zs-containerForm > .zs-containerRow {
	order: 1;
}

.zs-containerForm > .zs-navContainer {
	order: 2;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* === Layout regulations from vendor (zachowane bez zmian funkcjonalnych) === */
.jumbotron {
	background-color: transparent;
	margin-bottom: 0;
}

@media (min-width: 576px) {
	.jumbotron {
		padding: 0;
	}
}

.breadcrumb {
	display: none;
}

.zs-productColMiddle .bg-light {
	padding: 1rem 0;
	margin-top: .28rem;
	background-color: transparent !important;
}

.col-md-6.bg-white.zs-productColMiddle {
	padding-right: 1.25rem;
	padding-left: 1.25rem;
	background-color: var(--wj-surface) !important;
	border-radius: var(--wj-border-radius);
}

@media (min-width: 1200px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1320px;
	}
}

/* Container i podstawowe wrappery — soft padding, brak hard borderów */
.zs-container {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

/* Vendor hardcodes <b class="zs-container__namePage">Parametry</b> — hide it. */
.zs-container__namePage {
	display: none;
}

/* Eliminate Bootstrap default vertical scrollbar inside iframe by smoothing layout */
html, body {
	overflow-x: hidden;
}