/* ============================================================
   WOOCOMMERCE BRIDGE
   Styles WooCommerce's own markup (not our mockup classes) with
   the theme tokens, so native hooks, plugins and AJAX keep working.

   Specificity note: WooCommerce ships rules like
     .woocommerce ul.products li.product .woocommerce-loop-product__title
   so selectors here deliberately mirror that depth and are loaded
   afterwards, which lets them win without !important.

   Only enqueued when WooCommerce is active (functions.php).
   ============================================================ */

/* ---- loop toolbar: result count + catalog ordering ---- */
.pbp-page .woocommerce-result-count{
	margin:0;
	font-family:var(--body);
	font-size:13.5px;
	line-height:1.6;
	color:var(--plum-2);
}

.pbp-page .woocommerce-ordering{margin:0}
.pbp-page .woocommerce-ordering select,
.pbp-page .woocommerce-ordering .orderby{
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
	font-family:var(--body);
	font-size:14px;
	color:var(--plum);
	background-color:var(--white);
	border:1px solid var(--line-2);
	border-radius:var(--r-img);
	padding:11px 44px 11px 16px;
	max-width:100%;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4A87F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 15px center;
	background-size:15px 15px;
	transition:border-color .3s,box-shadow .3s;
}
.pbp-page .woocommerce-ordering select:focus{
	outline:none;
	border-color:var(--gold-2);
	box-shadow:0 0 0 3px rgba(216,195,170,.34);
}

/* ---- the product loop becomes our grid ---- */
.pbp-page ul.products{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
}
.pbp-page ul.products::before,
.pbp-page ul.products::after{display:none;content:none}

.pbp-page ul.products li.product{
	margin:0;
	padding:19px;
	width:auto;
	float:none;
	clear:none;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
}

/* image: fill the 1:1 media frame */
.pbp-page ul.products li.product a img,
.pbp-page ul.products li.product img{
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	object-fit:cover;
	margin:0;
	border-radius:0;
	filter:saturate(1.35);
	transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.pbp-page ul.products li.product:hover img{transform:scale(1.07)}

/* title */
.pbp-page ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--serif);
	font-size:21px;
	font-weight:600;
	color:var(--plum);
	line-height:1.14;
	letter-spacing:-.005em;
	margin:20px 0 10px;
	padding:0;
}
.pbp-page ul.products li.product .woocommerce-loop-product__title a{
	color:inherit;
	text-decoration:none;
	transition:color .3s;
}
.pbp-page ul.products li.product .woocommerce-loop-product__title a:hover{color:var(--gold-2)}

/* price */
.pbp-page ul.products li.product .price{
	font-family:var(--serif);
	font-size:19px;
	font-weight:600;
	color:var(--plum);
	margin:0;
	line-height:1.2;
}
.pbp-page ul.products li.product .price del{
	opacity:.45;
	font-size:.78em;
	margin-right:6px;
}
.pbp-page ul.products li.product .price ins{text-decoration:none}

/* add to cart only appears once a product actually has a price */
.pbp-page ul.products li.product .button,
.pbp-page .woocommerce a.button,
.pbp-page .woocommerce button.button,
.pbp-page .woocommerce input.button,
.pbp-page .woocommerce #respond input#submit{
	font-family:var(--body);
	font-size:11px;
	font-weight:500;
	letter-spacing:.2em;
	text-transform:uppercase;
	line-height:1;
	background:var(--plum);
	color:var(--cream);
	border:1px solid var(--plum);
	border-radius:999px;
	padding:14px 26px;
	cursor:pointer;
	transition:background .3s,color .3s,transform .3s;
}
.pbp-page ul.products li.product .button:hover,
.pbp-page .woocommerce a.button:hover,
.pbp-page .woocommerce button.button:hover{
	background:var(--ink);
	border-color:var(--ink);
	color:var(--cream);
	transform:translateY(-2px);
}
.pbp-page .woocommerce a.button.alt,
.pbp-page .woocommerce button.button.alt{
	background:var(--gold);
	border-color:var(--gold);
	color:var(--plum);
}

/* ---- pagination (renders only when products exceed per-page) ---- */
.pbp-page nav.woocommerce-pagination ul{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	margin:46px 0 0;
	padding:0;
	border:0;
}
.pbp-page nav.woocommerce-pagination ul li{border:0;margin:0;overflow:visible}
.pbp-page nav.woocommerce-pagination ul li a,
.pbp-page nav.woocommerce-pagination ul li span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	height:44px;
	padding:0 14px;
	border:1px solid var(--gold);
	border-radius:999px;
	font-family:var(--body);
	font-size:13px;
	color:var(--plum-2);
	transition:background .3s,color .3s,border-color .3s;
}
.pbp-page nav.woocommerce-pagination ul li a:hover{border-color:var(--gold-2);color:var(--plum)}
.pbp-page nav.woocommerce-pagination ul li span.current{
	background:var(--plum);
	border-color:var(--plum);
	color:var(--cream);
}

/* ---- notices ---- */
.pbp-page .woocommerce-message,
.pbp-page .woocommerce-info,
.pbp-page .woocommerce-error{
	background:var(--cream-2);
	border:1px solid var(--gold);
	border-radius:var(--r-img);
	color:var(--plum);
	font-size:14px;
	line-height:1.7;
	padding:16px 20px;
	margin:0 0 26px;
	list-style:none;
}
.pbp-page .woocommerce-error{border-color:#B4574E}
.pbp-page .woocommerce-message::before,
.pbp-page .woocommerce-info::before,
.pbp-page .woocommerce-error::before{color:var(--gold-2)}

/* ---- empty state ---- */
.pbp-page .woocommerce-no-products-found{
	text-align:center;
	padding:40px 0;
	color:var(--plum-2);
}

/* ---- responsive: mirror the home grid ---- */
@media (max-width:1080px){
	.pbp-page ul.products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
	.pbp-page ul.products{grid-template-columns:1fr}
	.pbp-page ul.products li.product{padding:16px}
	.pbp-page .woocommerce-ordering select{width:100%}
}
@media (prefers-reduced-motion:reduce){
	.pbp-page ul.products li.product img,
	.pbp-page ul.products li.product .button{transition:none}
	.pbp-page ul.products li.product:hover img{transform:none}
}