/* ==========================================================================
   Solar Expert - WooCommerce styling
   Reuses the same colors/spacing language as the main site theme
   (--navy, --orange, .card, .btn) so the shop feels like one site.
   ========================================================================== */

.solarexpert-shop { padding: 50px 0 70px; }
.solarexpert-shop h1.page-title,
.solarexpert-shop .woocommerce-products-header__title { font-size: 34px; color: var(--navy); margin-bottom: 24px; }

/* Full-width category banner (sits above .solarexpert-shop, outside the container)
   - matches the homepage hero's look: light background, photo fading in from the
   right, navy heading + orange kicker label, instead of a dark overlay. */
.solarexpert-category-banner {
	background-color: #eef7fc;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
.solarexpert-category-banner-overlay {
	background: linear-gradient(90deg,#eef7fc 0%,rgba(238,247,252,.92) 35%,rgba(238,247,252,.4) 68%,rgba(238,247,252,.05) 100%);
	padding: 70px 0;
}
.solarexpert-category-banner .page-title {
	color: var(--navy);
	font-size: 42px;
	margin: 0;
}
@media (max-width: 600px) {
	.solarexpert-category-banner-overlay { padding: 45px 0; background: linear-gradient(90deg,#eef7fc 15%,rgba(238,247,252,.85) 60%,rgba(238,247,252,.3) 100%); }
	.solarexpert-category-banner .page-title { font-size: 30px; }
}

/* Shop grid */
.solarexpert-shop ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0 0 30px; padding: 0; }
/* WooCommerce's own CSS adds a :before/:after "clearfix" pair to ul.products,
   left over from its default float-based layout. Inside our grid, that
   generated content becomes a real (invisible) grid item sitting in the
   first cell, pushing every actual product over by one slot. Remove it. */
.solarexpert-shop ul.products:before,
.solarexpert-shop ul.products:after { content: none !important; display: none !important; }
.solarexpert-shop ul.products li.product {
	background: #fff; border: 1px solid #e2eaf1; border-radius: 15px; padding: 20px; text-align: center; transition: .2s;
	/* WooCommerce's own stylesheet sets a percentage width + float sized for its
	   default 4-column layout - override both so the card fills its grid cell. */
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.solarexpert-shop ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(8,43,73,.08); }
.solarexpert-shop ul.products li.product img { border-radius: 10px; margin-bottom: 12px; }
.solarexpert-shop ul.products li.product h2,
.solarexpert-shop ul.products li.product .woocommerce-loop-product__title { font-size: 16px; color: var(--navy); margin: 6px 0; }
.solarexpert-shop ul.products li.product .price { color: var(--orange); font-weight: 800; font-size: 16px; }
.solarexpert-shop ul.products li.product .price del { color: #94a3b8; font-weight: 500; margin-right: 6px; }

@media (max-width: 900px) { .solarexpert-shop ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .solarexpert-shop ul.products { grid-template-columns: 1fr; } }

/* Buttons - add to cart, checkout, view cart etc. */
.solarexpert-shop .button,
.solarexpert-shop a.button,
.solarexpert-shop input[type="submit"],
.solarexpert-shop .checkout-button,
.solarexpert-shop .wc-proceed-to-checkout a.checkout-button {
	background: var(--orange) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 9px;
	padding: 12px 22px;
	font-weight: 800;
	font-size: 14px;
	box-shadow: 0 9px 22px rgba(255,148,31,.25);
	transition: .2s;
}
.solarexpert-shop .button:hover,
.solarexpert-shop a.button:hover,
.solarexpert-shop input[type="submit"]:hover { background: var(--orange2) !important; }
.solarexpert-shop .button.added::after { display: none; }

/* View Details (shop loop) + WhatsApp enquiry (single product) */
.solarexpert-shop ul.products li.product .solarexpert-view-details { display: inline-block; margin-top: 10px; }
/* MADE MORE SPECIFIC TO OVERRIDE THE GENERAL BUTTON STYLE */
.solarexpert-shop a.button.solarexpert-whatsapp-enquiry {
	display: inline-flex; 
	align-items: center; 
	gap: 10px;
	font-size: 17px; 
	background: #1b9b56 !important;
	box-shadow: 0 5px 16px rgba(35, 141, 73, 0.38);
}
/* FIX THE HOVER STATE AS WELL */
.solarexpert-shop a.button.solarexpert-whatsapp-enquiry:hover { 
	background: #1ebe5a !important; 
}

/* Plain product description (replaces the tabbed Description/Reviews area) */
.solarexpert-shop .solarexpert-plain-description { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e2eaf1; color: var(--muted); font-size: 15px; line-height: 1.7; }
.solarexpert-shop .solarexpert-plain-description p { margin-bottom: 12px; }

/* Single product page */
.solarexpert-shop .summary .price { color: var(--orange); font-size: 26px; font-weight: 800; margin-bottom:20px; }
.solarexpert-shop .summary h1.product_title { color: var(--navy); font-size: 32px; margin-bottom: 12px; }
.solarexpert-shop .quantity input.qty { border: 1px solid #cbd5e1; border-radius: 9px; padding: 10px; width: 70px; text-align: center; }
.solarexpert-shop table.shop_attributes { border: 1px solid #e2eaf1; }
.solarexpert-shop table.shop_attributes th { color: var(--navy); background: var(--light); }

/* Star ratings - keep them but tint to the brand orange */
.solarexpert-shop .star-rating span::before,
.solarexpert-shop .woocommerce-product-rating .star-rating::before { color: var(--orange); }

/* Cart page */
.solarexpert-shop table.shop_table { border-collapse: collapse; width: 100%; }
.solarexpert-shop table.shop_table th { text-align: left; color: var(--navy); padding: 12px; background: var(--light); }
.solarexpert-shop table.shop_table td { padding: 12px; border-bottom: 1px solid #e2eaf1; }
.solarexpert-shop .cart-collaterals .cart_totals { background: var(--light); border-radius: 15px; padding: 22px; }
.solarexpert-shop .cart_totals h2 { color: var(--navy); font-size: 20px; }
.solarexpert-shop .cart_totals .order-total .amount { color: var(--orange); font-weight: 800; }

/* Checkout page */
.solarexpert-shop #customer_details .form-row label { font-weight: 700; color: var(--navy); font-size: 13px; }
.solarexpert-shop #customer_details input.input-text,
.solarexpert-shop #customer_details select,
.solarexpert-shop textarea { border: 1px solid #cbd5e1; border-radius: 9px; padding: 10px 12px; width: 100%; }
.solarexpert-shop #order_review_heading,
.solarexpert-shop #order_review { background: var(--light); border-radius: 15px; padding: 22px; }
.solarexpert-shop table.woocommerce-checkout-review-order-table th,
.solarexpert-shop table.woocommerce-checkout-review-order-table td { padding: 10px; }

/* My Account page */
.solarexpert-shop .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 20px; }
.solarexpert-shop .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #e2eaf1; }
.solarexpert-shop .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 0; color: var(--navy); font-weight: 700; }
.solarexpert-shop .woocommerce-MyAccount-navigation li.is-active a { color: var(--orange); }

/* Notices (added to cart, errors, etc.) */
.solarexpert-shop .woocommerce-message,
.solarexpert-shop .woocommerce-info { border-top-color: var(--orange); background: var(--light); }
.solarexpert-shop .woocommerce-error { border-top-color: #dc2626; background: #fef2f2; }


.related.products {
    clear: both !important;
    width: 100% !important;
    display: block !important;
    padding-top: 30px; /* Adjust spacing as needed */
}