/* product_grid.css
   Shared grid used for products (and optionally reviews)
*/

/* ---------------- Shared grid (Products + Reviews) ---------------- */
.rgrid
{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

/* 3 per row */
@media only screen and (max-width: 1200px)
{
	.rgrid
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 2 per row */
@media only screen and (max-width: 900px)
{
	.rgrid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 1 per row */
@media only screen and (max-width: 700px)
{
	.rgrid
	{
		grid-template-columns: 1fr;
		gap: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ---------------- Products inside grid ---------------- */
.rgrid .product
{
	position: relative;
	float: none;
	width: auto;
	margin: 0;
	display:flex;
	flex-direction:column;
}

/* On Sale full rows rule:
   - 4 cols / 3 cols: show only first 12
   - 2 cols / 1 col: show all 16
   Only applies when you use class="rgrid prod"
*/
.rgrid.prod > .product:nth-child(n+13)
{
	display: none;
}

@media only screen and (max-width: 900px)
{
	.rgrid.prod > .product:nth-child(n+13)
	{
		display: block;
	}
}

/* ---------------- Reviews inside grid (optional) ---------------- */
/* Only needed if you want reviews grid styling reusable on other pages.
   Safe to keep even if only index uses it.
*/
.rgrid.rev .review
{
	float: none;
	width: auto;
	margin: 0;
	cursor: pointer;
}

.rgrid.review-grid
{
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rgrid.review-grid .review
{
	float: none;
	width: auto;
	margin: 0;
	cursor: pointer;
}

.rgrid.rev .review-in
{
	margin: 0;
}

.rgrid.review-grid .review-in
{
	margin: 0;
}

@media only screen and (max-width: 1300px)
{
	.rgrid.review-grid
	{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 1200px)
{
	.rgrid.review-grid
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 900px)
{
	.rgrid.review-grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 700px)
{
	.rgrid.review-grid
	{
		grid-template-columns: 1fr;
	}
}

/* ---------- Product card spacing ---------- */
.p-card
{
	padding: 0;
	box-sizing: border-box;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	min-width:0;
}

.p-main-link,
.p-price-link
{
	display:block;
	color:inherit;
	text-decoration:none;
}

.rgrid .product .clickproduct:hover
{
	box-shadow:none;
	background:transparent;
}

.p-card:hover .p-title
{
	color:var(--decoz-pink-dark, #b97f89);
}

/* Keep your title styling but move it out of inline */
.p-title
{
	line-height: 1.3;
	height: calc(2.56em + var(--decoz-product-info-padding, 10px) + 8px);
	max-height: calc(2.56em + var(--decoz-product-info-padding, 10px) + 8px);
	overflow: hidden;
	margin: 0;
	padding: var(--decoz-product-info-padding, 10px) var(--decoz-product-info-padding, 10px) 8px var(--decoz-product-info-padding, 10px);
	font-size: var(--decoz-product-title-size, 25px);
	font-family: "Garet";
	color: black;
	font-weight: normal;
	box-sizing: border-box;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	contain:paint;
}

.p-revcount
{
	display:inline-flex;
	align-items:center;
	height:calc(var(--decoz-product-rating-size, 30px) + 6px);
	font-size: var(--decoz-product-review-size, 13px);
	font-family: "Garet";
	margin-left:6px;
	color:#000000;
	line-height:1;
	white-space:nowrap;
}

.p-no-rating
{
	display:none;
	font-size:calc(var(--decoz-product-review-size, 13px) - 1px);
	font-family:"Garet";
	color:#657389;
	line-height:1.2;
}

/* ---------- Price layout ---------- */
.p-price
{
	position: relative;
	display:flex;
	align-items:center;
	gap:7px;
	margin: 0;
	padding: 6px var(--decoz-product-info-padding, 10px) 2px var(--decoz-product-info-padding, 10px);
	line-height: 1.05;
	min-height: 34px;
	box-sizing: border-box;
	flex-wrap:nowrap;
}

.p-price-row
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin-top:0;
	padding-right:var(--decoz-product-info-padding, 10px);
	box-sizing:border-box;
	min-width:0;
}

.p-price-row .p-price-link
{
	flex:1 1 auto;
	min-width:0;
}

.p-price-row .p-price
{
	padding-right:0;
}

.p-now
{
	font-size:var(--decoz-product-title-size, 25px);
	font-family:"Garet";
	font-weight:normal;
	color:#000000;
	line-height:1;
	white-space:nowrap;
}

.p-price-sale .p-now
{
	color:var(--decoz-pink-dark, #9b5f6d);
}

.p-was
{
	font-family: "Garet";
	font-size: var(--decoz-product-old-price-size, 20px);
	color: #dc0000;
	position: static;
	line-height:1;
	white-space:nowrap;
	transform:translateY(-2px);
}

.p-save
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	color:#4f4f4f;
	font-family:"Garet";
	font-size:12px;
	font-weight:normal;
	line-height:1;
	padding:0;
	white-space:nowrap;
	box-sizing:border-box;
}

/* ---------- % OFF badge ---------- */
.p-img
{
	position: relative;
	width:100%;
	aspect-ratio:1 / 1;
	margin:0 0 5px 0;
	overflow:hidden;
}

.product-hover-img
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	z-index:1;
	transition:opacity 220ms ease;
	pointer-events:none;
}

.image-container.is-hovering-image .product-hover-img
{
	opacity:1;
}

.p-badge
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 3;
	background: #d6aab0;
	color: #fff;
	font-family: "Garet";
	font-size: 14px;
	padding: 6px 10px;
	line-height: 1;
}

@media only screen and (max-width: 700px)
{
	.p-badge
	{
		font-size: 12px;
		padding: 5px 8px;
	}
}

.wishlist
{
	width:34px;
	height:30px;
	padding:0;
	border-radius:0;
	cursor: pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	box-shadow:none;
	border:0;
	transition:transform 160ms ease;
}

.wishlist:hover
{
	background:transparent;
	transform:translateY(-1px);
}

.wishlist-on
{
	background:transparent;
}

.wishlist-heart
{
	width:24px;
	height:24px;
	display:block;
	overflow:visible;
}

.wishlist-heart-shape
{
	fill:transparent;
	stroke:var(--decoz-pink, #d6aab0);
	stroke-width:1.8;
	stroke-linejoin:round;
	stroke-linecap:round;
	transition:fill 160ms ease, stroke 160ms ease;
}

.wishlist-on .wishlist-heart-shape
{
	fill:var(--decoz-pink, #d6aab0);
	stroke:var(--decoz-pink-dark, #9b5f6d);
}

.wishlist:hover .wishlist-heart-shape
{
	stroke:var(--decoz-pink-dark, #9b5f6d);
}

.p-rating-row
{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:8px;
	padding:0 var(--decoz-product-info-padding, 10px) 10px var(--decoz-product-info-padding, 10px);
	box-sizing:border-box;
}

.p-rating
{
	margin:0;
	min-width:0;
	flex:1 1 auto;
}

.p-wishlist
{
	flex:0 0 auto;
}

.p-rating-line
{
	line-height:calc(var(--decoz-product-rating-size, 30px) + 6px);
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	min-width:0;
	overflow:hidden;
}

.p-star
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:calc(var(--decoz-product-rating-size, 30px) + 4px);
	height:calc(var(--decoz-product-rating-size, 30px) + 6px);
	font-family:Arial, sans-serif;
	font-size:calc(var(--decoz-product-rating-size, 30px) + 3px);
	line-height:1;
	color:#b9b9b9;
	text-rendering:geometricPrecision;
}

.p-star-on
{
	color:var(--decoz-pink, #d6aab0);
}

.p-star-off
{
	color:#d8d8d8;
}
@media only screen and (max-width: 1200px)
{
	.wishlist
	{
		width:32px;
		height:28px;
	}
}

@media only screen and (max-width: 700px)
{
	.wishlist
	{
		width:30px;
		height:26px;
	}
}

.rect-img 
{
	position:absolute;
	width:100%;
	object-fit:cover;
}

.progressive
{
	display:block;
	outline:none;
	overflow:hidden;
	position:relative;
}

.progressive::after 
{
	content:"";
	display:block;
	padding-bottom:100%;
}

.progressive img
{
	border:0;
	display:block;
	height:auto;
	max-width:none;
	width:100%;
}

.progressive img.preview
{
	filter:blur(2vw);
	transform:scale(1.05);
}

.progressive img.reveal
{
	animation:progressiveReveal 1s linear;
	left:0;
	position:absolute;
	top:0;
}

@keyframes progressiveReveal
{
	0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}
}