:root {
	--bg: #f8f6f4;
	--card: #ffffff;
	--muted: #8a7a6a;
	--accent: #f5ede5;
	--primary: #d8a07e;
	--radius: 18px;
	--gap: 22px;
	--max-width: 1121px;
	--container-padding: 28px;
	--shadow: 0 2px 0 rgba(0,0,0,0.02);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Header width constraint for the Новинки page */
.new-products-page h1{
	max-width: 1166px;
	margin: 22px auto; /* center and add some vertical spacing */
	padding: 0 var(--container-padding);
	box-sizing: border-box;
	font-size: 28px;
	text-align: left;
}

@media (max-width: 520px){
	.new-products-page h1{font-size:22px;margin:12px auto}
}

/* Make page background match site main background (uses same --bg as on index) */
html, body {
	background: var(--bg);
	overflow-x: hidden;
}

.pages {
	position: relative;
	width: 100%;
	height: 490px;
}

/* When we programmatically limit rows, allow smooth max-height transitions and hide overflow */
.products-container.rows-limited {
	overflow: hidden;
	transition: max-height 260ms ease;
}

/* Show-more button inserted by JS when products are truncated */
.show-more-btn {
	display: inline-block;
	margin: 18px auto 36px;
	padding: 8px 16px;
	/* subtle warm gradient based on site's primary color */
	background: linear-gradient(90deg, var(--primary), #c18e64);
	color: #fff;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	text-align: center;
	border: none;
	transition: background 320ms cubic-bezier(.2,.9,.2,1), transform 180ms ease, box-shadow 220ms ease;
	box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}
.show-more-btn:hover{
	transform: translateY(-3px);
	background: linear-gradient(90deg, #e5b88a, #b36f3f);
	box-shadow: 0 12px 30px rgba(16,24,40,0.10);
}
.show-more-btn:focus{
	outline: none;
	box-shadow: 0 0 0 6px rgba(211,160,120,0.12);
}

.page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	padding: 0 0px 10px;
	box-sizing: border-box;
	transition: transform 0.5s ease-in-out;
}

.page.active {
	display: flex;
	gap: 15px;
}

.product-card {
	flex: 0 0 255px;
	background: #ffffff; /* enforce white background for page cards */
	border-radius: var(--radius);
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	padding-bottom: 60px;
	flex-direction: column;
	justify-content: center;
	transition: transform 0.2s ease;
	height: 442px;
	max-width: 249px; /* limit card width to 255 */
	box-sizing: border-box;
}

/* Remove underline from product card links on listing pages (Новинки, Сумки, etc.) */
.products-container .product-card a {
	text-decoration: none;
	color: inherit;
}
.products-container .product-card a:hover,
.products-container .product-card a:focus,
.products-container .product-card a:active,
.products-container .product-card a:visited {
	text-decoration: none;
	color: inherit;
}
/* Keep an accessible focus style without showing underlines */
.products-container .product-card a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.product-card:hover {
	border: 1px solid #f7c89a;
}

@media (min-width: 920px) {
	.page {
		padding: 0 12px;
	}

	.carousel-btn.left {
		left: -44px;
	}

	.carousel-btn.right {
		right: -44px;
	}
}

/* Very small screens: force single-column product list */
@media (max-width: 362px) {
	.products-container {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: var(--gap);
	}

	.products-container .product-card {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* ensure page layout is stacked so filter remains above */
	.page-layout{ flex-direction: column; }
	.filters-column{ width:100%; }
	.content-column{ width:100%; }
}
/* Desktop-specific layout for the standalone new_products_page.php
	 Display product cards in three columns inside .products-container
*/
@media (min-width: 920px) {
	.products-container {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
		justify-content: center;
		align-items: stretch;
		max-width: var(--max-width);
		margin: 0; /* content column will be positioned by the page layout */
		box-sizing: border-box;
		max-height: 3994px !important;
	}
}

/* Layout for the page with a left filter column and a flexible content column.
   On wide screens the sidebar is fixed width (300px) and content takes remaining space.
   On small screens the layout stacks vertically and the filter appears above products. */
.page-layout{
	display:flex;
	flex-wrap: nowrap; /* prevent columns from wrapping unexpectedly */
	gap:24px;
	align-items:flex-start;
	max-width: calc(var(--max-width) + (var(--container-padding) * 2));
	margin: 0 auto;
	padding: 0 var(--container-padding);
	box-sizing: border-box;
}
.filters-column{
	flex: 0 0 300px;
}
.content-column{
	flex: 1 1 auto;
	min-width: 0; /* allow content to shrink inside flex layout */
}

/* Keep two-column layout down to 920px. Stack vertically only on smaller screens. */
@media (max-width: 735px){
	.page-layout{flex-direction:column;padding:0 12px}
	.filters-column{flex:0 0 auto;width:100%}
	.content-column{width:100%}
	.products-container{margin-top:12px}
    
}

@media (min-width: 736px) and (max-width: 800px){
	.product-img img {
        max-height: 200px;
    }
    .product-img { 
        max-height: 200px;
    }
    .product-card {
        max-height: 420px;
    }
}

.product-img {
	width: 100%;
	height: 251px;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
}

.product-img img {
	width: 249px;
	height: 249px;
	object-fit: cover;
	display: block;
	transition: opacity 240ms ease-in-out;
}

/* Fallback: some pages output the image directly inside .product-card (no .product-img wrapper)
	 Ensure those imgs receive the same sizing and border-radius
*/
.product-card > img {
	width: 100%;
	height: 255px;
	object-fit: cover;
	display: block;
	border-radius: var(--radius) var(--radius) 0 0;
	margin: 0 0 12px 0;
}

.product-code {
	color: var(--muted);
	font-size: 14px;
	margin: 0px 0 5px 0;
	padding-left: 5px;
}

.product-name {
	font-size: 16px;
	font-weight: 500;
	color: var(--primary);
	margin: 8px 0;
	height: 98px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	-webkit-box-orient: vertical;
	padding-left: 5px;
}

.product-availability {
	font-size: 14px;
	color: #4CAF50;
	position: absolute;
	bottom: 50px;
	left: 10px;
	margin: 0;
	padding-left: 0;
}

/* On the Sale page we nudge the availability badge inside product cards */
.sale-page .product-availability {
	bottom: 50px;
	left: auto;
	right: 8px;
	font-size: 12px;
	text-align: right;
}

.product-price {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	position: absolute;
	bottom: 20px;
	left: 10px;
	margin: 0;
	padding-left: 0;
}

.add-to-cart {
	background: #ffffff00;
	color: #fff;
	border: none;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	position: absolute;
	bottom: 10px;
	right: 10px;
	transition: background 0.3s;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-to-cart:hover {
	background: #f5ede5;
}

@media (min-width: 1124px) and (max-width: 1186px) {
  .product-card {
		max-width: 228px;
		padding-bottom: 62px;
		height: 425px;
	}
	.product-img img {
		max-height: 228px;
		max-width: 228px;
	}
	.product-img {
		max-height: 228px;
	}
	.page.active {
		height: 440px;
	}
	.pages {
		height: 440px;
	}
}

@media (min-width: 736px) and (max-width: 870px) {
	
	.product-img img {
		max-height: 189px;
		max-width: 189px;
	}
	.product-img { 
		max-height: 189px;
		max-width: 189px;
	}
	.product-card {
		max-height: 383px;
		max-width: 189px;
	}
}

@media (min-width: 736px) and (max-width: 1085px) {
	
.filters-column{
		flex:0 0 235px;
	} 
}

@media (min-width: 736px) and (max-width: 1123px) {
       .products-container {
		max-height: 6000px !important;
		}
}
@media (max-width: 920px) {
	.products-container {
		display: flex !important;
		gap: var(--gap);
		align-items: start;
		max-height: 6000px !important;
		flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
	}
}
    


/* Responsive */
@media (min-width: 700px) and (max-width: 920px) {
	.product-card {
		/* two columns layout for mid-size screens */
		flex: 0 0 calc(50% - (1 / 2 * var(--gap)));
	}
}

@media (max-width: 734px) {
	.product-card {
		flex: 0 0 calc(50% - (1 / 2 * var(--gap)));
	}
}



@media (max-width: 572px) {
	.product-card {
		max-width: 229px;
	}

}

/* Sale / discounted price styles used by sale products listing */
.product-price {
	/* stacked layout for old price above new price when present */
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: flex-start;
	position: absolute;
	bottom: 20px;
	left: 10px;
	margin: 0;
}

.product-price--old {
	text-decoration: line-through;
	color: #999;
	font-size: 14px;
	font-weight: 500;
}

.product-price--sale {
	color: #e11;
	font-weight: 700;
	font-size: 18px;
}


@media (max-width: 520px) {
	.product-card {
		max-width: 206px;
		padding-bottom: 62px;
		height: 399px;
	}
	.product-img img {
		height: 206px;
		max-width: 206px;
	}
	.product-img {
		height: 206px;
		max-width: 206px;
	}
	.page.active {
		height: 440px;
	}
	.pages {
		height: 440px;
	}

}

@media (max-width: 474px) {
	.product-card {
		max-width: 180px;
		height: 373px;
	}
	.product-img img {
		height: 180px;
		max-width: 180px;
	}
	.product-img {
		height: 180px;
		max-width: 180px;
	}
	.page.active {
		height: 400px;
	}
	.pages {
		height: 400px;
	}
	.sale-page .product-availability {
		font-size: 10px;
	}

}
@media (max-width: 422px) {
	.product-card {
		max-width: 170px;
		height: 359px;
	}
	.product-img img {
		height: 170px;
		max-width: 170px;
	}
	.product-img {
		height: 170px;
		max-width: 170px;
	}
	.product-name {
		font-size: 14px;
	}
	.product-code {
		font-size: 11px;
	}

}
@media (max-width: 402px) {
	.product-card {
		max-width: 168px;
	}

}
@media (max-width: 382px) {
	.product-card {
		max-width: 170px;
	}
	.product-name {
		font-size: 14px;
	}
	.product-code {
		font-size: 11px;
	}
	.product-img img {
		height: 170px;
		max-width: 170px;
	}
	.product-img {
		height: 170px;
		max-width: 170px;
	}
	.product-card {
		height: 359px;
	}
	.product-price {
		font-size: 16px;
	}
	.products-container {
		gap: 10px;
		display: flex;
		flex-direction: row;
        flex-wrap: wrap;
		justify-content: center;
	}
	.page-layout{
		padding: 0px 0px;
	}
}

@media (max-width: 362px) {
        .product-card {
        max-width: 162px;
	}
}

@media (max-width: 340px) {
	.product-card {
		/* small screens: allow wider single-column cards if needed */
		max-width: 249px;
	}
	.product-name {
		font-size: 16px;
	}
	.product-code {
		font-size: 14px;
	}
	.product-img img {
		height: 249px;
		max-width: 249px;
	}
	.product-img {
		height: 249px;
		max-width: 249px;
	}
	.product-card {
		height: 442px;
	}
	.page.active {
		height: 484px;
	}
	.pages {
		height: 484px;
	}
	.products-container {
		max-height: 11900px !important;
	}

}

/* Force two-column product layout for screens less than 920px.
	 This rule is placed at the end to ensure it overrides earlier layout rules
	 and provides a stable two-column grid for tablets and larger phones. */

/* No products message */
.no-products-message {
	text-align: center;
	padding: 40px 20px;
	font-size: 18px;
	color: var(--muted);
	background: var(--card);
	border-radius: var(--radius);
	margin: 20px 0;
	box-shadow: var(--shadow);
}

/* Product availability */
.product-availability {
	font-size: 14px;
	margin: 4px 0;
}
.product-availability.available {
	color: #28a745;
}
.product-availability.not-available {
	color: #dc3545;
}

/* No products message */
.no-products-message {
	text-align: center;
	padding: 40px 20px;
	font-size: 18px;
	color: var(--muted);
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin: 20px 0;
}
.no-products-message p {
	margin: 0;
	font-weight: 500;
}

/* Compact variant thumbnails on listing cards */
.product-color-previews {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 20px;
	padding-left: 6px;
	flex-wrap: wrap;
}
.product-variant-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: visible;
	border: 1px solid rgba(0,0,0,0.19);
	box-sizing: border-box;
	transition: transform .15s ease, box-shadow .15s ease;
}
.product-variant-ball {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;
	background-color: #f2f2f2; /* fallback */
}
.product-variant-swatch:hover .product-variant-ball,
.product-variant-swatch:focus .product-variant-ball {
	box-shadow: 0 8px 18px rgba(16,24,40,0.08);
	transform: translateY(-2px);
}

@media (max-width: 520px) {
	.product-variant-swatch { width: 28px; height: 28px; padding: 2px; }
	.product-variant-ball { width: 100%; height: 100%; }
}

/* Accessibility: ensure clickable swatches have a visible focus ring */
.product-variant-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }