/* ============================================================
   Pelagia Theme — WooCommerce Stylesheet
   assets/css/woocommerce.css
   ============================================================
   Loaded only when WooCommerce is active (see functions.php).
   Overrides WC defaults and extends theme design tokens to
   all shop, product, cart, checkout, and account pages.
   ============================================================ */


/* ── Store Notice ─────────────────────────────────────── */

.woocommerce-store-notice,
p.demo_store {
	background-color: var(--primary) !important;
	color:            var(--white) !important;
	font-family:      var(--font-sans) !important;
	font-size:        var(--text-sm) !important;
}

/* ── Breadcrumbs (WC) — we hide theirs, show ours ─────── */

.woocommerce .woocommerce-breadcrumb { display: none !important; }

/* ── Shop Notices ─────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
}

.woocommerce-error li {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
}

/* ── Product Archive / Shop Page ─────────────────────── */

.woocommerce .woocommerce-result-count {
	font-family: var(--font-sans);
	font-size:   var(--text-sm);
	color:       var(--gray-500);
	margin-bottom: var(--space-6);
}

.woocommerce .woocommerce-ordering {
	margin-bottom: var(--space-6);
}

.woocommerce .woocommerce-ordering select {
	font-family:      var(--font-sans);
	font-size:        var(--text-sm);
	border:           1px solid var(--gray-300);
	border-radius:    var(--radius);
	padding:          var(--space-2) var(--space-4);
	background-color: var(--white);
	color:            var(--gray-800);
	cursor:           pointer;
}

/* Product loop */
.woocommerce ul.products.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
}

.woocommerce ul.products li.product .button {
	width:         100%;
	margin-top:    var(--space-3);
	font-size:     var(--text-xs) !important;
	padding:       var(--space-2) var(--space-3) !important;
	min-height:    38px !important;
}

/* Star ratings */
.woocommerce .star-rating {
	color:       var(--primary);
	font-size:   var(--text-xs);
	margin:      var(--space-2) 0;
	line-height: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding:       0;
	font-size:     var(--text-sm) !important;
	font-weight:   600 !important;
	font-family:   var(--font-sans) !important;
	color:         var(--gray-900) !important;
	margin-bottom: var(--space-1);
	line-height:   var(--leading-snug) !important;
}

.woocommerce ul.products li.product .price {
	color:       var(--primary) !important;
	font-weight: 700 !important;
	font-size:   var(--text-sm) !important;
	font-family: var(--font-sans) !important;
}

.woocommerce ul.products li.product .price del {
	color:       var(--gray-400) !important;
	font-weight: 400 !important;
}

/* Sale badge */
.woocommerce span.onsale {
	background-color: var(--primary);
	border-radius:    var(--radius-sm);
	font-family:      var(--font-sans);
	font-size:        var(--text-xs);
	font-weight:      700;
	letter-spacing:   0.06em;
	text-transform:   uppercase;
	top:              var(--space-2);
	left:             var(--space-2);
	min-width:        auto;
	min-height:       auto;
	padding:          var(--space-1) var(--space-2);
	line-height:      1.4;
}

/* ── Single Product ──────────────────────────────────── */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li { margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
	width:         72px;
	height:        72px;
	object-fit:    cover;
	border-radius: var(--radius-sm);
	opacity:       0.6;
	border:        2px solid transparent;
	transition:    opacity var(--transition-fast), border-color var(--transition-fast);
	cursor:        pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity:      1;
	border-color: var(--primary);
}

.woocommerce div.product div.summary { }

.woocommerce div.product .product_title {
	font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl)) !important;
	font-family:    var(--font-sans) !important;
	letter-spacing: -0.03em !important;
	margin-bottom:  var(--space-4) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size:     var(--text-3xl) !important;
	font-weight:   700 !important;
	color:         var(--primary) !important;
	font-family:   var(--font-sans) !important;
	margin-bottom: var(--space-5) !important;
	display:       block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-family:   var(--font-serif);
	font-size:     var(--text-base);
	color:         var(--gray-700);
	line-height:   var(--leading-relaxed);
	margin-bottom: var(--space-6);
}

/* Quantity input */
.woocommerce .quantity .qty {
	font-family:      var(--font-sans);
	font-size:        var(--text-base);
	font-weight:      500;
	border:           1px solid var(--gray-300);
	border-radius:    var(--radius);
	width:            72px;
	height:           44px;
	text-align:       center;
	padding:          0 var(--space-3);
	background-color: var(--white);
}

.woocommerce .quantity .qty:focus {
	border-color: var(--primary);
	box-shadow:   0 0 0 3px rgba(230,57,70,0.12);
	outline:      none;
}

/* Add to cart row */
.woocommerce form.cart {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--space-3);
	margin-bottom: var(--space-6);
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display:     flex;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: var(--space-6);
	padding:     0;
	list-style:  none;
	gap:         var(--space-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background:   transparent;
	border:       none;
	border-bottom:2px solid transparent;
	padding:      0;
	margin:       0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family:  var(--font-sans);
	font-size:    var(--text-sm);
	font-weight:  600;
	color:        var(--gray-600);
	padding:      var(--space-3) var(--space-4);
	display:      block;
	border-radius:0;
	background:   none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gray-900); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--primary); }

.woocommerce div.product .woocommerce-tabs .panel {
	font-family:   var(--font-serif);
	font-size:     var(--text-base);
	color:         var(--gray-700);
	line-height:   var(--leading-relaxed);
}
.woocommerce div.product .woocommerce-tabs .panel p { font-family: inherit; color: inherit; }

/* ── Reviews ─────────────────────────────────────────── */

#reviews #comments ol.commentlist {
	list-style:    none;
	padding:       0;
	display:       flex;
	flex-direction:column;
	gap:           var(--space-6);
}

#reviews #comments ol.commentlist li.comment .comment-text {
	background-color: var(--gray-50);
	border:           1px solid var(--gray-200);
	border-radius:    var(--radius);
	padding:          var(--space-5);
}

#reviews #comments ol.commentlist li.comment img.avatar {
	width:         50px;
	height:        50px;
	border-radius: 50%;
	object-fit:    cover;
}

/* ── Cart Page ───────────────────────────────────────── */

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--primary);
	color:            var(--white);
	font-size:        var(--text-base) !important;
	padding:          var(--space-4) var(--space-8) !important;
	border-radius:    var(--radius) !important;
	font-weight:      600 !important;
	min-height:       52px !important;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background-color var(--transition-fast), transform var(--transition-fast);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--primary-dark);
	transform:        translateY(-1px);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	border:        1px solid var(--gray-300);
	border-radius: var(--radius);
	height:        44px;
	padding:       0 var(--space-4);
	font-family:   var(--font-sans);
	font-size:     var(--text-sm);
}

/* ── Checkout ────────────────────────────────────────── */

.woocommerce-checkout #payment {
	border-radius:    var(--radius-lg);
	background-color: var(--gray-50);
	border:           1px solid var(--gray-200);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	padding: var(--space-4) var(--space-5);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--gray-200);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }

.woocommerce-checkout #payment .payment_box {
	background-color: var(--white);
	border-radius:    var(--radius);
	padding:          var(--space-4);
	font-family:      var(--font-sans);
	font-size:        var(--text-sm);
	color:            var(--gray-600);
}

.woocommerce-checkout #payment div.place-order {
	padding: var(--space-5);
}

.woocommerce-checkout #payment #place_order {
	width:            100%;
	background-color: var(--primary) !important;
	font-size:        var(--text-base) !important;
	min-height:       52px !important;
	border-radius:    var(--radius) !important;
}
.woocommerce-checkout #payment #place_order:hover {
	background-color: var(--primary-dark) !important;
}

/* Checkout fields */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--space-4);
}

.woocommerce-billing-fields__field-wrapper .form-row.form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce form .form-row label {
	font-family: var(--font-sans);
	font-size:   var(--text-sm);
	font-weight: 600;
	color:       var(--gray-700);
	margin-bottom: var(--space-2);
	display:     block;
}

/* ── Account Pages ───────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation {
	border:        1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow:      hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--gray-100);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border: none; }

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display:     block;
	padding:     var(--space-4) var(--space-5);
	font-family: var(--font-sans);
	font-size:   var(--text-sm);
	font-weight: 500;
	color:       var(--gray-700);
	transition:  background-color var(--transition-fast), color var(--transition-fast);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a {
	color: var(--primary);
	background-color: var(--gray-50);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background-color: var(--gray-50);
	color:            var(--primary);
}

/* ── Responsive WC ───────────────────────────────────── */

@media ( max-width: 780px ) {
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product .woocommerce-product-gallery {
		position: static;
	}

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 480px ) {
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}