/**

 * SJ Shop Theme — WooCommerce overrides.

 * Uses Color Scheme CSS variables from sj-theme engine.

 */



/* --------------------------------------------------------------------------

   Shop layout

   -------------------------------------------------------------------------- */



.site-main.woocommerce,

.woocommerce-shop-front {

	padding-top: 0;

}



.woocommerce .woocommerce-content,

.woocommerce-page .woocommerce-content {

	max-width: var(--content-width, 1200px);

	margin: 0 auto;

	padding: 1.5rem;

}



.woocommerce .woocommerce-products-header {

	margin-bottom: 1.5rem;

}



.woocommerce .woocommerce-products-header__title {

	margin: 0 0 0.5rem;

	font-size: clamp(1.75rem, 3vw, 2.25rem);

}



.woocommerce .woocommerce-result-count,

.woocommerce .woocommerce-ordering {

	margin: 0 0 1rem;

}



.woocommerce .woocommerce-before-shop-loop {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: space-between;

	gap: 1rem;

	margin-bottom: 1.5rem;

}



/* --------------------------------------------------------------------------

   Product grid — override WooCommerce column widths

   -------------------------------------------------------------------------- */



.woocommerce ul.products,

.woocommerce-page ul.products {

	display: grid !important;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 1.25rem;

	list-style: none;

	margin: 0 0 2rem;

	padding: 0;

	clear: both;

}



@media (min-width: 640px) {

	.woocommerce ul.products,

	.woocommerce-page ul.products {

		grid-template-columns: repeat(3, minmax(0, 1fr));

	}

}



@media (min-width: 1024px) {

	.woocommerce ul.products,

	.woocommerce-page ul.products {

		grid-template-columns: repeat(4, minmax(0, 1fr));

	}

}



.woocommerce ul.products::before,

.woocommerce ul.products::after,

.woocommerce-page ul.products::before,

.woocommerce-page ul.products::after {

	display: none;

	content: none;

}



.woocommerce ul.products li.product,

.woocommerce-page ul.products li.product {

	width: 100% !important;

	max-width: none !important;

	float: none !important;

	margin: 0 !important;

	border: 1px solid var(--color-border, #e5e7eb);

	border-radius: 8px;

	padding: 0.75rem;

	background: var(--color-bg_primary, #fff);

	display: flex;

	flex-direction: column;

}



.woocommerce ul.products li.product a img,

.woocommerce-page ul.products li.product a img {

	width: 100%;

	height: auto;

	max-height: 220px;

	aspect-ratio: 1 / 1;

	object-fit: cover;

	border-radius: 6px;

	margin-bottom: 0.75rem;

}



.woocommerce ul.products li.product .woocommerce-loop-product__link,

.woocommerce-page ul.products li.product .woocommerce-loop-product__link {

	display: block;

	overflow: hidden;

	border-radius: 6px;

}



.woocommerce ul.products li.product .woocommerce-loop-product__title {

	color: var(--color-text_primary, #111827);

	font-size: 1rem;

	margin: 0 0 0.5rem;

	padding: 0;

}



.woocommerce ul.products li.product .price {

	color: var(--color-primary, #007cba);

	font-weight: 600;

	margin-bottom: 0.75rem;

}



.woocommerce ul.products li.product .button {

	align-self: flex-start;

	margin-top: auto;

	white-space: nowrap;

}



/* --------------------------------------------------------------------------

   Buttons & notices

   -------------------------------------------------------------------------- */



.woocommerce a.button,

.woocommerce button.button,

.woocommerce input.button,

.woocommerce #respond input#submit {

	background: var(--color-primary, #007cba);

	color: #fff;

	border-radius: 6px;

	border: none;

}



.woocommerce a.button:hover,

.woocommerce button.button:hover,

.woocommerce input.button:hover,

.woocommerce #respond input#submit:hover {

	background: var(--color-primary_dark, #005a87);

	color: #fff;

}



.woocommerce-message,

.woocommerce-info {

	border-top-color: var(--color-primary, #007cba);

}



.woocommerce span.onsale {

	background: var(--color-accent, #10b981);

}



.woocommerce nav.woocommerce-pagination {

	margin-top: 1rem;

	text-align: center;

}



.woocommerce nav.woocommerce-pagination ul {

	display: inline-flex;

	gap: 0.5rem;

	list-style: none;

	padding: 0;

	margin: 0;

}



.woocommerce nav.woocommerce-pagination ul li a,

.woocommerce nav.woocommerce-pagination ul li span {

	display: inline-block;

	min-width: 2.25rem;

	padding: 0.35rem 0.65rem;

	border: 1px solid var(--color-border, #e5e7eb);

	border-radius: 6px;

	text-decoration: none;

}



.woocommerce nav.woocommerce-pagination ul li span.current {

	background: var(--color-primary, #007cba);

	border-color: var(--color-primary, #007cba);

	color: #fff;

}



/* Full-width shop catalog — no blog sidebar on product archives */

.woocommerce #secondary,

.woocommerce-page #secondary {

	display: none !important;

}



.woocommerce .site-main,

.woocommerce-page .site-main {

	width: 100%;

	max-width: var(--content-width, 1200px);

	margin: 0 auto;

}

