/**
 * WooCommerce Minimal Custom Styles
 * Dynamic theme with CSS variables - Customizable via WordPress Customizer
 * No Bootstrap dependencies - Pure vanilla CSS
 */

/* CSS Variables - Can be changed via WordPress Customizer */
:root {
	--wc-brand-color: #C64193;
	--wc-fuchsia: #BFA86C;
	--wc-text-color: #000000;
	--wc-text-light: #666666;
	--wc-background: #ffffff;
	--wc-border-color: #e0e0e0;
	--wc-button-border-width: 2px;
}

/* ============================================
   VANILLA CSS GRID & FLEX UTILITIES
   Replaces Bootstrap grid system
   ============================================ */

/* Container - FORCE PROPER WIDTH AND PADDING */
.wc-container,
#main-content .wc-container,
body .wc-container,
body #main-content .wc-container {
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

.product-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 15px;
}

/* Grid System */
.wc-row {
	display: flex;
	flex-wrap: wrap;
	margin: -12px;
}

.wc-row.g-3 {
	margin: -12px;
}

.wc-row.g-4 {
	margin: -16px;
}

.wc-row.g-5 {
	margin: -24px;
}

.wc-row > * {
	padding: 12px;
}

.wc-row.g-4 > * {
	padding: 16px;
}

.wc-row.g-5 > * {
	padding: 24px;
}

/* Column Classes */
.wc-col {
	flex: 1 0 0%;
}

.wc-col-auto {
	flex: 0 0 auto;
	width: auto;
}

.wc-col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.wc-col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.wc-col-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.wc-col-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

/* Product Detail Grid - Single Product Page */
.product-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	margin-bottom: 4rem;
}

.product-col {
	flex: 1 1 calc(50% - 1.5rem);
	min-width: 300px;
}

@media (max-width: 768px) {
	.product-col {
		flex: 1 1 100%;
	}
}

/* ============================================
   COCON CUSTOM PRODUCT PAGE STYLING
   Using custom classes for better control
   ============================================ */

/* Single Product Container */
.cocon-product-single {
	padding: 2rem 0;
}

/* Breadcrumb */
.cocon-breadcrumb {
	margin-bottom: 1.5rem !important;
}

/* Product Grid - 2 Column Layout - MAXIMUM OVERRIDE FOR DIVI */
#main-content div.cocon-product-grid,
.woocommerce div.product .cocon-product-grid,
.woocommerce-page div.product .cocon-product-grid,
div.product .cocon-product-grid,
.cocon-product-grid,
body .cocon-product-grid,
body #main-content .cocon-product-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem !important;
	margin-bottom: 3rem !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	flex: none !important;
	clear: both !important;
}

/* Override any flexbox/float from WooCommerce/Divi */
.cocon-product-grid::before,
.cocon-product-grid::after,
#main-content .cocon-product-grid::before,
#main-content .cocon-product-grid::after {
	content: none !important;
	display: none !important;
}

#main-content .cocon-product-images-col,
.woocommerce div.product .cocon-product-images-col,
.cocon-product-images-col,
body .cocon-product-images-col,
body #main-content .cocon-product-images-col {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: unset !important;
	box-sizing: border-box !important;
	grid-column: 1 !important;
}

#main-content .cocon-product-info-col,
.woocommerce div.product .cocon-product-info-col,
.cocon-product-info-col,
body .cocon-product-info-col,
body #main-content .cocon-product-info-col {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: unset !important;
	box-sizing: border-box !important;
	grid-column: 2 !important;
}

/* Make images sticky on scroll - DISABLED for Chrome performance */
/* Re-enable after deploying scroll-performance-fix.js and scroll-performance.css */
.cocon-product-images-col {
	/* position: sticky; */
	/* top: 100px; */
	position: relative;
}

@media (max-width: 992px) {
	#main-content div.cocon-product-grid,
	.woocommerce div.product .cocon-product-grid,
	.woocommerce-page div.product .cocon-product-grid,
	div.product .cocon-product-grid,
	.cocon-product-grid,
	body .cocon-product-grid,
	body #main-content .cocon-product-grid {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
	
	#main-content .cocon-product-images-col,
	#main-content .cocon-product-info-col,
	body #main-content .cocon-product-images-col,
	body #main-content .cocon-product-info-col {
		grid-column: 1 !important;
	}
}

/* Product Images */
.cocon-product-images {
	width: 100%;
	max-width: 100%;
}

/* Product Info Section */
.cocon-product-info {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: 100%;
}

/* Product Title */
.cocon-product-title {
	margin-bottom: 0.75rem !important;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--wc-text-color);
	font-weight: 700 !important;
}

/* Product Rating */
.cocon-product-rating {
	margin-bottom: 0.75rem !important;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #f5f5f5;
}

/* Product Price */
.cocon-product-price {
	margin-bottom: 1rem !important;
	padding: 0.75rem 0 1rem 0;
	border-bottom: 1px solid #e0e0e0;
}

.cocon-price-large {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: #C64193 !important;
}

/* Product Description */
.cocon-product-description {
	margin-bottom: 1rem !important;
	padding: 0.75rem 0 !important;
	line-height: 1.6;
	color: var(--wc-text-color);
}

/* Add to Cart Section */
.cocon-product-cart {
	margin-bottom: 1rem !important;
	padding: 0.75rem 0 !important;
	border-top: 1px solid #f0f0f0;
}

.cocon-product-cart form.cart {
	padding: 0.75rem 0 !important;
}

/* Product Meta (Categories, Tags, SKU) */
.cocon-product-meta {
	margin-top: 1.5rem !important;
	padding: 1rem 0 !important;
	border-top: 1px solid #e0e0e0 !important;
}

.cocon-product-meta > * {
	margin-bottom: 1rem;
}

.cocon-product-meta > *:last-child {
	margin-bottom: 0;
}

/* Product Tabs Section */
.cocon-product-tabs-section {
	margin-top: 3rem !important;
	padding-top: 2rem;
	border-top: 2px solid #e0e0e0;
}

.cocon-product-tabs {
	width: 100%;
}

/* Related Products Section */
.cocon-related-section {
	margin-top: 3rem !important;
	padding-top: 2rem;
	border-top: 2px solid #e0e0e0;
}

/* Product Tabs Section */
.product-tabs-section {
	width: 100%;
	margin-top: 4rem;
	margin-bottom: 4rem;
	padding-top: 3rem;
	border-top: 2px solid #e0e0e0;
}

/* Related Products Section */
.related.products {
	margin-top: 5rem !important;
	padding-top: 3rem;
	border-top: 2px solid #e0e0e0;
}

.related.products h2 {
	margin-bottom: 2.5rem !important;
}

/* Responsive columns */
@media (min-width: 768px) {
	.wc-col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	.wc-col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

@media (min-width: 992px) {
	.wc-col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	.wc-col-lg-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	
	.wc-col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Flex Utilities */
.wc-flex {
	display: flex;
}

.wc-flex-column {
	flex-direction: column;
}

.wc-flex-wrap {
	flex-wrap: wrap;
}

.wc-align-items-start {
	align-items: flex-start;
}

.wc-align-items-center {
	align-items: center;
}

.wc-align-items-stretch {
	align-items: stretch;
}

.wc-justify-content-between {
	justify-content: space-between;
}

.wc-justify-content-center {
	justify-content: center;
}

/* Gap Utilities */
.wc-gap-2 {
	gap: 8px;
}

.wc-gap-3 {
	gap: 12px;
}

.wc-gap-4 {
	gap: 16px;
}

/* Spacing Utilities - FORCE PADDING */
.wc-py-5,
#main-content .wc-py-5,
body .wc-py-5,
body #main-content .wc-py-5 {
	padding-top: 48px !important;
	padding-bottom: 48px !important;
}

.wc-mt-5 {
	margin-top: 48px;
}

.wc-mb-2 {
	margin-bottom: 8px;
}

.wc-mb-3 {
	margin-bottom: 8px;
}

.wc-mb-4 {
	margin-bottom: 10px;
}

/* Card Utilities */
.wc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	overflow: visible;
}

.wc-card-body {
	flex: 1 1 auto;
	padding: 1rem;
	overflow: visible;
}

/* Add to Cart Wrapper */
.wc-add-to-cart-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Category Section */
.product-meta,
.woocommerce div.product .product_meta {
	padding: 0 !important;
	border-top: 1px solid #e0e0e0;
}

.product_meta .posted_in,
.product_meta .tagged_as,
.product_meta .sku_wrapper {
	display: block;
	margin-bottom: 0.75rem;
	padding: 0.5rem 0;
	color: var(--wc-text-light);
}

/* ============================================
   WOOCOMMERCE PRODUCT GRID (Shop/Archive Pages)
   Styles for ul.products grid layout
   ============================================ */

/* Remove clearfix pseudo-elements that interfere with grid */
.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce-page ul.products::before {
	content: none !important;
	display: none !important;
}

/* Default Products Grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	margin: 0 !important;
	padding: 0;
	float: none !important;
	width: 100% !important;
	clear: none !important;
}

/* Column variations */
.woocommerce ul.products.columns-1,
.woocommerce-page ul.products.columns-1 {
	grid-template-columns: repeat(1, 1fr);
}

.woocommerce ul.products.columns-2,
.woocommerce-page ul.products.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.woocommerce ul.products.columns-5,
.woocommerce-page ul.products.columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.woocommerce ul.products.columns-6,
.woocommerce-page ul.products.columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

/* Responsive grid */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce-page ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce-page ul.products.columns-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce-page ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce-page ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce-page ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* ============================================
   !IMPORTANT DECLARATIONS EXPLAINED:
   
   Many !important rules below are necessary because:
   1. Divi generates dynamic CSS inline that can't be overridden otherwise
   2. WooCommerce applies inline styles that override regular CSS
   3. The Theme Customizer generates dynamic CSS with high specificity
   
   Without !important, these styles would be overridden by:
   - Inline styles from WooCommerce
   - Dynamic CSS from Divi Theme Customizer
   - JavaScript-added inline styles
   ============================================ */

/* Remove all border radius - Sharp corners everywhere */
.woocommerce *,
.product-card,
.product-card *,
.button,
.woocommerce-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-product-gallery__image,
.quantity input[type="number"],
.onsale,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.input-text,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea,
.form-row input,
.form-row select,
.form-row textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea,
.woocommerce .quantity .qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce #payment,
.woocommerce-checkout #payment,
.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce .woocommerce-form-login input,
.woocommerce .woocommerce-form-register input,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block *,
.wc-block-components-order-summary,
.wc-block-components-order-summary *,
.wc-block-components-totals-wrapper,
.wc-block-checkout__main {
	border-radius: 0 !important;
}

/* Force hide sidebar on shop pages */
.woocommerce-page #sidebar,
.post-type-archive-product #sidebar,
.tax-product_cat #sidebar,
.tax-product_tag #sidebar {
	display: none !important;
}

/* Force full width content on shop pages */
.woocommerce-page.et_full_width_page #left-area,
.post-type-archive-product.et_full_width_page #left-area,
.tax-product_cat.et_full_width_page #left-area,
.tax-product_tag.et_full_width_page #left-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* Override WordPress Block Button Styles for WooCommerce Buttons */
.woocommerce .wp-element-button,
.woocommerce-page .wp-element-button,
.woocommerce .wp-block-button__link,
.woocommerce-page .wp-block-button__link,
.woocommerce a.button.wp-element-button,
.woocommerce-page a.button.wp-element-button,
.woocommerce-cart a.button.wp-element-button,
.woocommerce-checkout a.button.wp-element-button {
	background-color: transparent !important;
	border: var(--wc-button-border-width) solid var(--wc-brand-color) !important;
	color: var(--wc-brand-color) !important;
	font-weight: 500 !important;
	padding: 0.75rem 1.5rem !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
}

.woocommerce .wp-element-button:hover,
.woocommerce-page .wp-element-button:hover,
.woocommerce .wp-block-button__link:hover,
.woocommerce-page .wp-block-button__link:hover,
.woocommerce a.button.wp-element-button:hover,
.woocommerce-page a.button.wp-element-button:hover,
.woocommerce-cart a.button.wp-element-button:hover,
.woocommerce-checkout a.button.wp-element-button:hover {
	background-color: var(--wc-brand-color) !important;
	color: var(--wc-background) !important;
	border-color: var(--wc-brand-color) !important;
}

/* Remove ALL ::after and ::before from buttons */
.btn-primary::after,
.btn-primary::before,
.single_add_to_cart_button::after,
.single_add_to_cart_button::before,
.button::after,
.button::before,
.woocommerce-button::after,
.woocommerce-button::before,
.woocommerce a.button::after,
.woocommerce a.button::before,
.woocommerce button.button::after,
.woocommerce button.button::before,
.woocommerce input.button::after,
.woocommerce input.button::before,
body.woocommerce a.button::after,
body.woocommerce a.button::before,
body.woocommerce button.button::after,
body.woocommerce button.button::before {
	display: none !important;
	content: none !important;
	visibility: hidden !important;
}

/* Consistent CTA Buttons - Width Based on Text Content */
.btn-primary,
.product-card .add-to-cart-btn,
.single_add_to_cart_button,
.button,
.woocommerce-button,
.checkout-button,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce-page a.button,
.woocommerce-page a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce-page button.button,
.woocommerce-page button.button.alt,
.woocommerce-page button.button.alt.disabled,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce-page input.button,
.woocommerce-page input.button.alt,
.woocommerce #place_order,
.woocommerce-page #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button,
.woocommerce-message a.button.wc-forward,
.wc-forward,
.woocommerce-cart .wc-proceed-to-checkout a.button,
.woocommerce .cart button[name="update_cart"],
.woocommerce .cart input.button,
.woocommerce table.cart td.actions .button,
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order,
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button {
	background-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	border: 2px solid #C64193 !important;
	color: #C64193 !important;
	font-weight: 500 !important;
	padding: 12px 32px !important;
	min-height: 48px !important;
	transition: all 0.3s ease;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: auto !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	cursor: pointer;
	text-align: center;
}

.btn-primary:hover,
.product-card .add-to-cart-btn:hover,
.single_add_to_cart_button:hover,
.button:hover,
.woocommerce-button:hover,
.checkout-button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce-page button.button:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page button.button.alt.disabled:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page input.button:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce-page #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-message a.button.wc-forward:hover,
.wc-forward:hover,
.woocommerce-cart .wc-proceed-to-checkout a.button:hover,
.woocommerce .cart button[name="update_cart"]:hover,
.woocommerce .cart input.button:hover,
.woocommerce table.cart td.actions .button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:hover,
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover {
	background-color: #C64193 !important;
	background: #C64193 !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #C64193 !important;
	box-shadow: none !important;
}

/* Single Product Add to Cart Button - Consistent with All CTAs */
.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 48px !important;
	min-height: 48px !important;
	padding: 12px 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.5 !important;
	width: auto !important;
	min-width: auto !important;
	white-space: nowrap !important;
}

/* ============================================
   COCON CUSTOM PRODUCT CARDS
   For shop/archive pages and related products
   ============================================ */

/* Product Card Container */
.cocon-product-card {
	border: none !important;
	transition: all 0.3s ease;
	background: var(--wc-background);
	box-shadow: none !important;
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.cocon-product-card:hover {
	box-shadow: none !important;
	transform: none;
}

/* Product Link */
.cocon-product-link {
	display: block;
	position: relative;
}

/* Product Image */
.cocon-product-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.cocon-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cocon-product-card:hover .cocon-product-image img {
	/* transform: scale(1.05); */ /* Disabled for better scroll performance */
	transform: none;
}

/* Sale Badge */
.cocon-sale-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--wc-fuchsia) !important;
	color: #ffffff !important;
	padding: 0.4rem 0.6rem !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	z-index: 2;
	display: inline-block !important;
	width: auto !important;
	max-width: fit-content !important;
	white-space: nowrap !important;
}

/* Product Card Body */
.cocon-product-card-body {
	flex: 1 1 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: visible;
}

/* Product Header (Title + Price Row) */
.cocon-product-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.5rem;
	padding-top: 1rem;
}

/* Card Title */
.cocon-card-title {
	flex: 1;
	margin: 0 !important;
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 700 !important;
	padding: 0 1rem;
}

.cocon-card-title a {
	color: var(--wc-text-color);
	text-decoration: none;
	font-weight: 700 !important;
	transition: color 0.3s ease;
}

.cocon-card-title a:hover {
	color: var(--wc-brand-color);
}

/* Card Price */
.cocon-card-price {
	color: #C64193 !important;
	font-weight: 600;
	font-size: 1.1rem;
	white-space: nowrap;
	padding-right: 1rem;
}

/* Card Description */
.cocon-card-description {
	color: var(--wc-text-light);
	line-height: 1.6;
	font-size: 0.95rem;
	flex: 1;
	padding: 0 1rem;
}

/* Add to Cart Button in Cards */
.cocon-add-to-cart-btn {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	text-align: center;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	position: relative !important;
}

/* Related Products Styling */
.cocon-related-products {
	margin-top: 5rem;
	padding-top: 3rem;
	border-top: 2px solid #e0e0e0;
}

.cocon-related-title {
	font-size: 1.75rem !important;
	margin-bottom: 2.5rem !important;
	color: var(--wc-text-color);
}

/* Products Grid */
.cocon-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.cocon-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.cocon-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.cocon-products-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Minimal Links */
a {
	color: var(--wc-brand-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Product Meta */
.product_meta {
	color: var(--wc-text-light);
}

.product_meta a {
	color: var(--wc-brand-color);
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
	color: var(--wc-text-light);
	margin-bottom: 2.5rem !important;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
}

.woocommerce-breadcrumb a {
	color: var(--wc-brand-color);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Product Tabs - Minimal with Underline */
.woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs {
	margin-top: 3rem;
	border: none !important;
}

.woocommerce-tabs ul.tabs {
	border: none !important;
	border-bottom: 1px solid var(--wc-border-color) !important;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	display: flex;
	gap: 0;
	background: transparent !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
	display: none !important;
}

.woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	position: relative;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--wc-text-light) !important;
	text-decoration: none;
	padding: 0.75rem 1.5rem;
	display: block;
	background: transparent !important;
	border: none !important;
	font-weight: 400;
	transition: color 0.3s ease;
	position: relative;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--wc-brand-color) !important;
	background: transparent !important;
	border: none !important;
}

.woocommerce-tabs ul.tabs li.active a {
	border-bottom: 2px solid var(--wc-brand-color) !important;
	font-weight: 700 !important;
}

/* Tab Content */
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 1.5rem 0 !important;
	border: none !important;
	background: transparent !important;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
	display: none;
}

/* Price - Pink Brand Color - MAXIMUM OVERRIDE */
.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price,
.product-price-wrapper .price,
.price-large,
.price-large .price,
.price-large .woocommerce-Price-amount,
.price-large .amount,
.text-primary .price,
.text-primary .woocommerce-Price-amount,
body .price,
body .woocommerce div.product p.price,
body .woocommerce div.product span.price,
body .product-price-wrapper .price,
body .price-large {
	color: #C64193 !important;
	font-weight: 600;
}

/* Override Bootstrap text-primary specifically */
.text-primary,
.price-large.text-primary,
div.text-primary {
	color: #C64193 !important;
}

/* Old/Strikethrough Price - Grey - MUST OVERRIDE GOLD */
.price del,
.price del .amount,
.price del .woocommerce-Price-amount,
.price del bdi,
.price-large del,
.price-large del .amount,
.price-large del .woocommerce-Price-amount,
.price-large del bdi,
del.price,
del .amount,
del .woocommerce-Price-amount,
del bdi,
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce .price del bdi,
.woocommerce-page .price del,
.woocommerce-page .price del .amount,
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .amount,
.woocommerce div.product p.price del bdi,
.woocommerce div.product span.price del,
.woocommerce div.product span.price del .amount,
.woocommerce div.product span.price del bdi,
body .price del,
body .price del .amount,
body .price del bdi,
body .price-large del,
body .price-large del .amount,
body .price-large del bdi,
body .woocommerce div.product p.price del,
body .woocommerce div.product p.price del .amount,
body .woocommerce div.product p.price del bdi,
body .woocommerce div.product span.price del,
body .woocommerce div.product span.price del .amount,
body .woocommerce div.product span.price del bdi,
.text-primary del,
.text-primary del .amount,
.text-primary del bdi,
.price-large.text-primary del,
.price-large.text-primary del .amount,
.price-large.text-primary del bdi {
	color: #808080 !important;
	opacity: 1 !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
}

.price ins,
.price ins .amount,
.woocommerce .price ins,
.woocommerce-page .price ins,
body .price ins,
body .price ins .amount,
body .woocommerce .price ins,
body .woocommerce-page .price ins {
	text-decoration: none !important;
	color: #C64193 !important;
	font-weight: 600 !important;
}

/* Quantity Input - Same Styling as Add to Cart Button */
.quantity input[type="number"],
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity input,
body .woocommerce div.product form.cart .quantity input,
input.qty,
.input-text.qty,
body input.qty,
body .input-text.qty,
body.woocommerce div.product form.cart .quantity input[type="number"],
body.woocommerce-page div.product form.cart .quantity input[type="number"] {
	border: 2px solid #C64193 !important;
	padding: 12px 32px !important;
	min-width: 48px !important;
	width: auto !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	text-align: center !important;
	color: #C64193 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	line-height: 1.5 !important;
	font-size: 16px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	vertical-align: middle !important;
	margin: 0 !important;
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.quantity input[type="number"]:hover,
.woocommerce .quantity .qty:hover,
.woocommerce div.product form.cart .quantity input:hover,
body .woocommerce div.product form.cart .quantity input:hover,
input.qty:hover,
.input-text.qty:hover,
body input.qty:hover,
body .input-text.qty:hover,
body.woocommerce div.product form.cart .quantity input[type="number"]:hover,
body.woocommerce-page div.product form.cart .quantity input[type="number"]:hover {
	background-color: #C64193 !important;
	background: #C64193 !important;
	color: #ffffff !important;
	border-color: #C64193 !important;
	box-shadow: none !important;
}

.quantity input[type="number"]:focus,
.woocommerce .quantity .qty:focus,
.woocommerce div.product form.cart .quantity input:focus,
body .woocommerce div.product form.cart .quantity input:focus,
input.qty:focus,
.input-text.qty:focus,
body input.qty:focus,
body .input-text.qty:focus,
body.woocommerce div.product form.cart .quantity input[type="number"]:focus,
body.woocommerce-page div.product form.cart .quantity input[type="number"]:focus {
	outline: none !important;
	border-color: #C64193 !important;
	background: transparent !important;
	color: #C64193 !important;
	box-shadow: none !important;
}

/* Add to Cart Form - Quantity and Button on Same Line */
.woocommerce div.product form.cart .wc-flex,
.woocommerce div.product form.cart .wc-add-to-cart-wrapper,
body .woocommerce div.product form.cart .wc-flex,
body .woocommerce div.product form.cart .wc-add-to-cart-wrapper {
	margin: 2rem 0 !important;
	align-items: stretch !important;
	display: flex !important;
	gap: 16px !important;
	flex-wrap: nowrap !important;
	border-top: 1px solid #f0f0f0;
}

.woocommerce div.product form.cart .quantity,
body .woocommerce div.product form.cart .quantity {
	margin: 0 !important;
	flex-shrink: 0;
	display: flex !important;
	align-items: stretch !important;
	width: auto !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
body .woocommerce div.product form.cart .single_add_to_cart_button {
	margin: 0 !important;
	flex-shrink: 0;
	flex-grow: 0;
	width: auto !important;
	min-width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap;
}

/* Ensure Bootstrap button styling is applied */
.single_add_to_cart_button.button,
body .single_add_to_cart_button.button {
	font-family: inherit;
	font-size: 16px;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.5;
}

/* Force same height for both elements */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .quantity input,
.woocommerce div.product form.cart .single_add_to_cart_button,
body .woocommerce div.product form.cart .quantity,
body .woocommerce div.product form.cart .quantity input,
body .woocommerce div.product form.cart .single_add_to_cart_button {
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	box-sizing: border-box !important;
}

/* Variable Products - Quantity and Button Layout */
.woocommerce div.product .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex !important;
	align-items: stretch !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
	margin-top: 1rem !important;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
	margin: 0 !important;
	display: flex;
	align-items: center;
}

.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	height: 48px !important;
}

/* Minimal Gallery */
.woocommerce-product-gallery__image {
	border: 1px solid var(--wc-border-color);
}

/* Shop Toolbar - Minimal Layout */
.woocommerce-toolbar,
.shop-toolbar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	margin-bottom: 2rem !important;
	gap: 1rem;
	width: 100% !important;
}

/* Before shop loop toolbar (contains result count and ordering) */
.woocommerce::before {
	content: none !important;
	display: none !important;
}

.woocommerce::after {
	content: none !important;
	display: none !important;
}

/* Result Count - Left side */
.woocommerce-result-count,
.woocommerce .woocommerce-result-count,
p.woocommerce-result-count {
	float: none !important;
	margin: 0 !important;
	text-align: left !important;
	color: var(--wc-text-light) !important;
	font-size: 14px !important;
	flex: 1 1 auto;
	display: inline-block !important;
	width: auto !important;
}

/* Ordering Dropdown - Right side */
.woocommerce-ordering,
.woocommerce .woocommerce-ordering,
form.woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto;
	display: inline-block !important;
}

/* Minimal Ordering Dropdown - No Border */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
	border: none !important;
	border-radius: 0 !important;
	padding: 0.5rem 2rem 0.5rem 0.75rem !important;
	background-color: var(--wc-background) !important;
	color: var(--wc-text-color) !important;
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	cursor: pointer;
	min-width: 200px;
}

.woocommerce-ordering select:focus,
.woocommerce .woocommerce-ordering select:focus {
	outline: none;
	border: none !important;
}

/* Mobile responsive toolbar */
@media (max-width: 576px) {
	.woocommerce-toolbar,
	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start !important;
	}
	
	.woocommerce-result-count,
	.woocommerce-ordering {
		width: 100%;
	}
	
	.woocommerce-ordering select {
		width: 100%;
	}
}

/* WooCommerce Notices - Subtle & Elegant */
.woocommerce-notices-wrapper {
	margin-bottom: 1.5rem;
	position: relative;
	z-index: 999;
}

.woocommerce-notices-wrapper:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Subtle Notice Styles - Minimal Border, No Background */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 0.875rem 1.25rem !important;
	margin-bottom: 1rem !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--wc-text-color) !important;
	list-style: none !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Success Message - Subtle Green Left Border */
.woocommerce-message {
	border-left: 2px solid #C64193 !important;
}

/* Error Message - Subtle Red Left Border */
.woocommerce-error {
	border-left: 2px solid #dc3545 !important;
}

/* Info Message - Subtle Grey Left Border */
.woocommerce-info {
	border-left: 2px solid #999999 !important;
}

/* Hide Default Icons */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
}

/* Custom Content Container */
.cocon-cart-notice-content {
	flex: 1;
	font-size: 15px;
	color: #333333;
}

.cocon-cart-notice-content strong {
	color: #000000;
	font-weight: 600;
}

/* View Cart Button - Consistent CTA Styling */
.woocommerce-message a.button,
.woocommerce-message a.button.wc-forward,
.woocommerce-message .button,
.woocommerce-message .wc-forward,
.woocommerce-info a.button,
.woocommerce-error a.button,
body .woocommerce-message a.button,
body .woocommerce-message .wc-forward {
	background-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	border: 2px solid #C64193 !important;
	color: #C64193 !important;
	font-weight: 500 !important;
	padding: 12px 32px !important;
	min-height: 48px !important;
	font-size: 16px !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	white-space: nowrap !important;
	line-height: 1.5 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	width: auto !important;
	min-width: auto !important;
}

.woocommerce-message a.button:hover,
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-message .button:hover,
.woocommerce-message .wc-forward:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
body .woocommerce-message a.button:hover,
body .woocommerce-message .wc-forward:hover {
	background-color: #C64193 !important;
	background: #C64193 !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #C64193 !important;
	box-shadow: none !important;
}

/* Other Notice Links */
.woocommerce-info a,
.woocommerce-error a {
	color: var(--wc-brand-color) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}

.woocommerce-info a:hover,
.woocommerce-error a:hover {
	color: #000000 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 0.75rem 1rem !important;
		font-size: 14px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.woocommerce-message a.button,
	.woocommerce-message a.button.wc-forward {
		width: 100%;
		justify-content: center;
		margin-top: 0.5rem !important;
	}
}

/* CRITICAL: Override Divi Theme Customizer Button Styles */
/* These rules MUST come last to override dynamically generated Divi button styles */
body.woocommerce a.button.alt,
body.woocommerce-page a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce button.button.alt.disabled,
body.woocommerce-page button.button.alt,
body.woocommerce-page button.button.alt.disabled,
body.woocommerce input.button.alt,
body.woocommerce-page input.button.alt,
body.woocommerce #respond input#submit.alt,
body.woocommerce-page #respond input#submit.alt,
body.woocommerce #content input.button.alt,
body.woocommerce-page #content input.button.alt {
	background-color: transparent !important;
	background: transparent !important;
	border: var(--wc-button-border-width) solid var(--wc-brand-color) !important;
	color: var(--wc-brand-color) !important;
	font-weight: 500 !important;
	padding: 0.75rem 1.5rem !important;
}

body.woocommerce a.button.alt:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce button.button.alt.disabled:hover,
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page button.button.alt.disabled:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce-page input.button.alt:hover,
body.woocommerce #respond input#submit.alt:hover,
body.woocommerce-page #respond input#submit.alt:hover,
body.woocommerce #content input.button.alt:hover,
body.woocommerce-page #content input.button.alt:hover {
	background-color: var(--wc-brand-color) !important;
	background: var(--wc-brand-color) !important;
	color: var(--wc-background) !important;
	border-color: var(--wc-brand-color) !important;
}

/* WooCommerce Badges - Square with #BFA86C */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
span.onsale,
.onsale,
.badge,
.product-badge,
.woocommerce .badge,
.woocommerce-page .badge,
.woocommerce span.badge,
.woocommerce-page span.badge {
	background-color: #BFA86C !important;
	color: #ffffff !important;
	padding: 0.4rem 0.6rem !important;
	border-radius: 0 !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0.5px !important;
	min-width: auto !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	text-align: center !important;
	box-shadow: none !important;
}

/* Sale Badge Positioning */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	left: auto !important;
	margin: 0 !important;
	z-index: 9 !important;
	width: auto !important;
	max-width: fit-content !important;
}

/* Single Product Sale Badge */
.woocommerce div.product .onsale,
.woocommerce-page div.product .onsale {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
	left: auto !important;
	margin: 0 !important;
	z-index: 9 !important;
	width: auto !important;
	max-width: fit-content !important;
}

/* Responsive */
@media (max-width: 768px) {
	.product-card .product-header {
		flex-direction: column;
	}
}

/* ============================================
   CUSTOM PRODUCT GALLERY - Vertical Thumbnails with Navigation Arrows
   ============================================ */

/* Gallery Container */
.cocon-product-gallery {
	width: 100%;
	max-width: 100%;
}

/* Vertical Thumbnails Column */
.gallery-thumbnails {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 8px;
}

.gallery-thumbnail {
	width: 80px;
	height: 80px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;
}

.gallery-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-thumbnail:hover {
	border-color: var(--wc-brand-color);
}

.gallery-thumbnail.active {
	border-color: var(--wc-brand-color);
}

/* Main Image Wrapper */
.gallery-main-wrapper {
	width: 100%;
	position: relative;
}

.gallery-main-image {
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* 1:1 Aspect Ratio */
	background: #f5f5f5;
	overflow: hidden;
}

.gallery-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-image.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Navigation Arrows - Gold Square with White Icon */
.gallery-nav {
	position: absolute;
	bottom: 20px;
	width: 50px;
	height: 50px;
	background: #BFA86C;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: all 0.3s ease;
	padding: 0;
}

.gallery-nav:hover {
	background: #A8925C;
}

.gallery-nav svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.gallery-nav-prev {
	left: 20px;
}

.gallery-nav-next {
	right: 20px;
}

/* Responsive Gallery */
@media (max-width: 992px) {
	.gallery-thumbnails {
		flex-direction: row;
		overflow-x: auto;
		padding-right: 0;
		padding-bottom: 8px;
		width: 100%;
	}
	
	.gallery-thumbnail {
		width: 70px;
		height: 70px;
		flex-shrink: 0;
	}
	
	.cocon-product-gallery .row {
		flex-direction: column-reverse;
	}
	
	.gallery-nav {
		width: 40px;
		height: 40px;
		bottom: 15px;
	}
	
	.gallery-nav svg {
		width: 20px;
		height: 20px;
	}
	
	.gallery-nav-prev {
		left: 15px;
	}
	
	.gallery-nav-next {
		right: 15px;
	}
}

@media (max-width: 576px) {
	.gallery-thumbnail {
		width: 60px;
		height: 60px;
	}
	
	.gallery-nav {
		width: 36px;
		height: 36px;
		bottom: 10px;
	}
	
	.gallery-nav svg {
		width: 18px;
		height: 18px;
	}
	
	.gallery-nav-prev {
		left: 10px;
	}
	
	.gallery-nav-next {
		right: 10px;
	}
}

/* Override default WooCommerce gallery */
.woocommerce-product-gallery {
	display: none !important;
}

/* Hide default gallery if custom gallery exists */
.cocon-product-gallery ~ .woocommerce-product-gallery {
	display: none !important;
}

/* ============================================
   CUSTOM QUANTITY SELECTOR - Bordered Box Style with +/- Buttons
   ============================================ */

/* Quantity Wrapper - Bordered Container - EXACT HEIGHT MATCH */
.woocommerce div.product form.cart .quantity,
.woocommerce-cart table.cart td.quantity .quantity,
body .woocommerce div.product form.cart .quantity,
.woocommerce .quantity,
.quantity,
form.cart .quantity {
	position: relative !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	border: 2px solid #C64193 !important;
	background: transparent !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 144px !important;
	min-width: 144px !important;
	max-width: 144px !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
}

/* Custom +/- Buttons - Order matters for layout */
.quantity button.minus,
.quantity .minus,
.woocommerce .quantity button.minus,
.woocommerce .quantity .minus {
	order: 1 !important;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-right: 2px solid #C64193 !important;
	border-radius: 0 !important;
	color: #C64193 !important;
	font-size: 20px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* Quantity Input - Center Number Display */
.quantity input[type="number"],
.woocommerce .quantity .qty,
.woocommerce div.product form.cart .quantity input,
body .woocommerce div.product form.cart .quantity input,
input.qty,
.input-text.qty,
body input.qty,
body .input-text.qty,
body.woocommerce div.product form.cart .quantity input[type="number"],
body.woocommerce-page div.product form.cart .quantity input[type="number"],
.quantity input.input-text.qty.text {
	order: 2 !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
	text-align: center !important;
	color: #C64193 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: text !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	-moz-appearance: textfield !important;
	-webkit-appearance: none !important;
}

.quantity button.plus,
.quantity .plus,
.woocommerce .quantity button.plus,
.woocommerce .quantity .plus {
	order: 3 !important;
	width: 48px !important;
	min-width: 48px !important;
	max-width: 48px !important;
	height: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-left: 2px solid #C64193 !important;
	border-radius: 0 !important;
	color: #C64193 !important;
	font-size: 20px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* Hide default spinner buttons */
.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

.quantity input[type="number"]:hover,
.quantity input[type="number"]:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: #C64193 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.quantity button.minus:hover,
.quantity button.plus:hover,
.quantity .minus:hover,
.quantity .plus:hover {
	background-color: #C64193 !important;
	color: #ffffff !important;
}

.quantity button.minus:focus,
.quantity button.plus:focus,
.quantity .minus:focus,
.quantity .plus:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Add to Cart Button - Clean Bordered Style - EXACT HEIGHT MATCH */
.woocommerce div.product form.cart .single_add_to_cart_button,
body .woocommerce div.product form.cart .single_add_to_cart_button,
.single_add_to_cart_button,
button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce-page button.single_add_to_cart_button {
	background-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	border: 2px solid #C64193 !important;
	color: #C64193 !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	text-transform: capitalize !important;
	letter-spacing: normal !important;
	padding: 0 32px !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	width: auto !important;
	min-width: 200px !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body .woocommerce div.product form.cart .single_add_to_cart_button:hover,
.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
	background-color: #C64193 !important;
	background: #C64193 !important;
	color: #ffffff !important;
	border-color: #C64193 !important;
	box-shadow: none !important;
}

/* Cart Form Layout - Quantity and Button Side by Side - FORCE ALIGNMENT */
.woocommerce div.product form.cart,
body .woocommerce div.product form.cart,
form.cart,
div.product form.cart {
	display: flex !important;
	align-items: stretch !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	margin-top: 1.5rem !important;
}

/* Ensure quantity and button are on same row and same height */
.woocommerce div.product form.cart > *:not(.variations),
body .woocommerce div.product form.cart > *:not(.variations),
form.cart > .quantity,
form.cart > .single_add_to_cart_button {
	margin: 0 !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
}

/* Responsive - Stack on Mobile */
@media (max-width: 576px) {
	.woocommerce div.product form.cart,
	body .woocommerce div.product form.cart {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	
	.woocommerce div.product form.cart .quantity,
	body .woocommerce div.product form.cart .quantity {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
	
	.woocommerce div.product form.cart .single_add_to_cart_button,
	body .woocommerce div.product form.cart .single_add_to_cart_button {
		width: 100% !important;
		min-width: 100% !important;
	}
}

/* ============================================
   CHECKOUT - Place Order Button
   ============================================ */

/* Place Order Button - Match Add to Cart Style */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order,
#place_order,
button#place_order,
.woocommerce button#place_order,
.woocommerce-page button#place_order,
body.woocommerce #payment #place_order,
body.woocommerce-checkout #payment #place_order {
	background-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	border: 2px solid #C64193 !important;
	color: #C64193 !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	text-transform: capitalize !important;
	letter-spacing: normal !important;
	padding: 0 48px !important;
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:hover,
#place_order:hover,
button#place_order:hover,
body.woocommerce #payment #place_order:hover,
body.woocommerce-checkout #payment #place_order:hover {
	background-color: #C64193 !important;
	background: #C64193 !important;
	color: #ffffff !important;
	border-color: #C64193 !important;
	box-shadow: none !important;
}

/* Payment Box Styling */
.woocommerce #payment,
.woocommerce-checkout #payment {
	background: transparent !important;
	border-radius: 0 !important;
}

.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: #f5f5f5 !important;
	border-radius: 0 !important;
	color: #666666 !important;
}

.woocommerce #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #f5f5f5 !important;
}

/* ============================================
   WOOCOMMERCE BLOCKS - Cart/Checkout Blocks Components
   ============================================ */

/* Sale Badge - Square with no border radius */
.wc-block-components-product-badge,
.wc-block-components-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-grid__product-sale-badge {
	background-color: #BFA86C !important;
	color: #ffffff !important;
	padding: 0.4rem 0.6rem !important;
	border-radius: 0 !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	font-size: 12px !important;
	line-height: 1 !important;
	letter-spacing: 0.5px !important;
	min-width: auto !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	text-align: center !important;
	box-shadow: none !important;
}

/* Quantity Selector - Match Product Page Style but Smaller */
.wc-block-components-quantity-selector,
.wc-block-cart-item__quantity,
.wc-block-components-quantity-selector__input-wrapper,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	position: relative !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	border: none !important;
	background: transparent !important;
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
	margin: 0 16px 0 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: auto !important;
	max-width: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	vertical-align: middle !important;
	box-sizing: border-box !important;
	gap: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Quantity Buttons - Minus */
.wc-block-components-quantity-selector__button--minus,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:first-child {
	order: 1 !important;
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid #C64193 !important;
	border-radius: 0 !important;
	color: #C64193 !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* Quantity Input */
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector input[type="number"],
.wc-block-cart-item__quantity input.wc-block-components-quantity-selector__input {
	order: 2 !important;
	border: 1px solid #C64193 !important;
	border-left: none !important;
	border-right: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	max-height: 34px !important;
	text-align: center !important;
	color: #C64193 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: text !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	-moz-appearance: textfield !important;
	-webkit-appearance: none !important;
}

/* Quantity Buttons - Plus */
.wc-block-components-quantity-selector__button--plus,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:last-child {
	order: 3 !important;
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid #C64193 !important;
	border-radius: 0 !important;
	color: #C64193 !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
}

/* Hide spinner buttons on quantity input */
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

/* Hover States */
.wc-block-components-quantity-selector__input:hover,
.wc-block-components-quantity-selector__input:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: #C64193 !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__button--minus:hover,
.wc-block-components-quantity-selector__button--plus:hover,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover {
	background-color: #C64193 !important;
	color: #ffffff !important;
}

.wc-block-components-quantity-selector__button--minus:focus,
.wc-block-components-quantity-selector__button--plus:focus,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Remove any wrapper/container borders from WooCommerce blocks */
.wc-block-cart-item__quantity > *:not(input):not(button),
.wc-block-components-quantity-selector > *:not(input):not(button),
div[class*="wc-block"][class*="quantity"] > div,
div[class*="wc-block"][class*="quantity"] > span {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ============================================
   CART PAGE - All cart styling handled by coconpm-cart.css
   ============================================ */