/*
Theme Name: KoKonna

WooCommerce styles override - Nordic Minimalist Design
*/

/**
 * WooCommerce CSS Variables
 * Note: Using --font-primary from style.css for consistency
 */

/**
 * Smooth Scrolling for Size Guide anchor links
 */
html {
	scroll-behavior: smooth;
}

/**
 * WooCommerce Layout Adjustments
 */
.woocommerce-page .site-main {
	padding-top: calc(var(--header-height) + var(--spacing-lg));
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--spacing-lg);
}

.woocommerce .woocommerce-ordering select {
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-small);
}

/* 
 * Best Practice: Prevent horizontal overflow without breaking position: sticky
 * Instead of overflow-x: hidden (which breaks sticky), we:
 * 1. Use width: 100% with calc margins for full-width sections (not 100vw)
 * 2. Use overflow: hidden on specific full-width containers (like hero)
 * 3. Ensure all content respects viewport boundaries
 * 
 * Note: Avoid 100vw as it includes scrollbar width and causes horizontal scroll
 */

/* Ensure images don't cause overflow */
img {
	max-width: 100%;
	height: auto;
}

/**
 * Shop Page - Hero Section
 */

.shop-hero {
	position: relative;
	/* Full viewport width - break out of container 
	 * Best Practice: Use left/right instead of width: 100vw to avoid scrollbar issues
	 */
	width: 100%;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	height: 60vh;
	background-image: url('assets/images/hero_shop.webp');
	background-size: cover;
	background-position: center 65%; /* Keep sofa and frame visible */
	background-repeat: no-repeat;
	margin-bottom: var(--spacing-xxl); /* Breathing space below hero */
	display: flex;
	align-items: flex-end; /* Position content at bottom third */
	overflow: hidden; /* Prevent hero image from causing horizontal scroll */
}

.shop-hero__content {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--container-padding); /* Responsive padding: 16px mobile, 32px tablet, 64px desktop */
	padding-bottom: 10vh; /* Position text at lower half middle (25% from bottom) */
	text-align: left; /* Desktop: left-aligned */
}

.shop-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	color: #1A1A1A;
	margin: 0 0 var(--spacing-md);
	text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* Subtle white glow for readability */
	word-wrap: break-word; /* Prevent text overflow */
}

.shop-hero__subtitle {
	font-family: var(--font-primary);
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 400;
	color: #1A1A1A;
	margin: 0;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
	word-wrap: break-word; /* Prevent text overflow */
}

/* Mobile: Portrait crop (4:5) and consistent text positioning */
@media screen and (max-width: 768px) {
	.shop-hero {
		position: relative;
		height: 0;
		padding-bottom: 125%; /* 4:5 aspect ratio (5/4 = 1.25) */
		background-position: center center; /* Center for portrait crop */
	}

	.shop-hero__content {
		position: absolute; /* Need absolute positioning for proper placement in padded container */
		bottom: 5vh; /* Position at lower half middle (25% from bottom), same as desktop */
		left: 0;
		right: 0;
		text-align: left; /* Same as desktop: left-aligned */
		padding: 0 var(--container-padding); /* Keep consistent with desktop */
	}
	
	.shop-hero__title {
		font-size: clamp(1.5rem, 6vw, 2rem); /* Much smaller font size for mobile */
	}
	
	.shop-hero__subtitle {
		font-size: clamp(0.875rem, 3.5vw, 1rem); /* Much smaller subtitle for mobile */
	}
}

/**
 * Shop Page Layout & Styling
 */

/* Hide sidebar (blog widgets not suitable for shop page) */
.woocommerce-shop #secondary,
.post-type-archive-product #secondary {
	display: none;
}

/* Main content area - match homepage container width (no padding here, let children control) */
.woocommerce-shop #primary,
.post-type-archive-product #primary {
	width: 100%;
	max-width: 100%; /* Full width, let children define their own max-width */
	margin: 0 auto;
	padding: 0; /* No padding - children (.shop-hero__content, .guided-gallery) control their own padding */
}

/* Hide Shop page title (not needed with Hero section) */
.woocommerce-shop .page-title,
.post-type-archive-product .page-title {
	display: none;
}

/* Hide result count (only 4 products, not necessary to show) */
.woocommerce-shop .woocommerce-result-count,
.post-type-archive-product .woocommerce-result-count {
	display: none;
}

/* Hide sorting dropdown (only 4 products, not necessary) */
.woocommerce-shop .woocommerce-ordering,
.post-type-archive-product .woocommerce-ordering {
	display: none;
}

/* Hide default product grid (replaced by guided gallery) */
.woocommerce-shop ul.products,
.post-type-archive-product ul.products {
	display: none;
}

/**
 * ==========================================================================
 * Size Guide - Interactive Navigation
 * ==========================================================================
 * Visual size comparison with proportional frames
 * Allows users to quickly jump to specific product sizes
 */

.size-guide {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	margin-top: 60px; /* Space below Hero - Compact spacing (Solution A) */
	padding: 0 var(--container-padding);
	box-sizing: border-box;
}

.size-guide__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.5rem); /* Increased to match Related Products */
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em; /* Consistent with Related Products */
	color: var(--color-primary);
	text-align: left;
	margin: 0; /* Keep zero spacing - intentional design choice */
}

.size-guide__grid {
	display: flex;
	align-items: flex-end; /* Align frames to bottom */
	justify-content: flex-start; /* Left-align to match title */
	gap: 100px; /* Desktop spacing - generous breathing room */
}

.size-guide__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px; /* Tighter spacing for size → frame → scene */
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.size-guide__item:hover {
	transform: translateY(-4px);
}

.size-guide__item:hover .size-guide__frame {
	border-width: 5px; /* Extra thickness on hover for emphasis */
	border-color: #666666; /* Darker gray on hover */
	box-shadow: 
		inset 0 0 0 1px rgba(0, 0, 0, 0.03), /* Keep inner shadow */
		0 6px 16px rgba(0, 0, 0, 0.12); /* Enhanced outer shadow */
	background: linear-gradient(135deg, #FEFDF8 0%, #F5F5F0 100%); /* Inverted warm gradient for lift effect */
}

/* Proportional frames based on actual screen sizes
 * Base size: 4" = 40px, then scale proportionally
 */
.size-guide__frame {
	border: 4px solid #888888; /* Elegant light gray - softer and more refined */
	background: linear-gradient(135deg, #F5F5F0 0%, #FEFDF8 100%); /* Warm white gradient - matches body background */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03); /* Inner shadow for depth */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	aspect-ratio: 4 / 3; /* Landscape ratio for frames */
}

/* 4" Mini - Base size */
.size-guide__item--mini .size-guide__frame {
	width: 40px;
	height: 30px;
}

/* 7.3" Classic - 1.825x larger (7.3/4) */
.size-guide__item--classic .size-guide__frame {
	width: 73px;
	height: 55px;
}

/* 13.3" Large - 3.325x larger (13.3/4) */
.size-guide__item--large .size-guide__frame {
	width: 133px;
	height: 100px;
}

/* 28.5" Gallery - 7.125x larger (28.5/4) */
.size-guide__item--gallery .size-guide__frame {
	width: 285px; /* True proportional size: 40px × 7.125 */
	height: 214px; /* 285px ÷ 4:3 aspect ratio */
}

/* Size text (above frame) - e.g. "4″", "7.3″" */
.size-guide__size {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-main);
	text-align: center;
	white-space: nowrap;
	transition: color 0.3s ease;
}

/* Scene label (below frame) - e.g. "Desk", "Shelf" */
.size-guide__label {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text-light);
	text-align: center;
	white-space: nowrap; /* Allow text to extend beyond frame width */
	transition: color 0.3s ease;
}

.size-guide__item:hover .size-guide__size {
	color: var(--color-primary);
}

.size-guide__item:hover .size-guide__label {
	color: var(--color-primary);
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
	.size-guide {
		margin-top: 40px;
	}
	
	.size-guide__title {
		font-size: 1.5rem;
		/* No margin - keep title close to frames */
	}
	
	.size-guide__grid {
		gap: 30px; /* Mobile spacing - comfortable breathing room */
	}
	
	/* Portrait orientation for mobile - better horizontal space usage */
	.size-guide__frame {
		aspect-ratio: 3 / 4; /* Portrait ratio (vertical) */
		border-width: 3px; /* Thinner border for mobile (4px - 1px) */
	}
	
	.size-guide__item:hover .size-guide__frame {
		border-width: 4px; /* Mobile hover: 3px + 1px */
	}
	
	.size-guide__item--mini .size-guide__frame {
		width: 15px;  /* Base: 15px (portrait) */
		height: 20px;
	}
	
	.size-guide__item--classic .size-guide__frame {
		width: 28px;  /* 15px × 1.825 (approx 27.375px, rounded) */
		height: 37px;
	}
	
	.size-guide__item--large .size-guide__frame {
		width: 50px;  /* 15px × 3.325 (approx 49.875px, rounded) */
		height: 67px;
	}
	
	.size-guide__item--gallery .size-guide__frame {
		width: 107px; /* 15px × 7.125 (approx 106.875px, rounded) */
		height: 143px;
	}
	
	.size-guide__size {
		font-size: 12px; /* Slightly smaller on mobile */
	}
	
	.size-guide__label {
		font-size: 11px; /* Smaller scene text on mobile */
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.size-guide {
		margin-top: 60px;
	}
	
	.size-guide__grid {
		gap: 40px; /* Tablet spacing - balanced for medium screens */
	}
	
	/* Tablet uses same 40px base as desktop - no size override needed */
}

/**
 * ==========================================================================
 * Shop FAQ Section
 * ==========================================================================
 * Purpose: Frequently Asked Questions in accordion format
 * Positioned after Guided Gallery, before product grid
 * Design: Nordic minimalist, consistent with product page tech specs
 */
.shop-faq-section {
	width: 100%;
	max-width: 1400px; /* Match other sections */
	margin: 80px auto; /* Centered like Size Guide and Guided Gallery */
	padding: 0 var(--container-padding);
	box-sizing: border-box;
}

.shop-faq-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.5rem); /* Match Related Products */
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	color: var(--color-primary);
	text-align: left;
	margin: 0 0 var(--spacing-lg); /* 40px bottom spacing - tighter connection with content */
}

.shop-faq-item {
	border-bottom: 1px solid var(--color-border);
}

.shop-faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: var(--spacing-md) 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.shop-faq-header::-webkit-details-marker {
	display: none;
}

.shop-faq-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-text-light);
	transition: color var(--transition-base);
}

.shop-faq-item[open] .shop-faq-icon,
.shop-faq-item:hover .shop-faq-icon {
	color: var(--color-primary);
}

.shop-faq-label {
	flex: 1;
	font-weight: 500;
	font-size: 15px;
	color: var(--color-text-main);
	line-height: 1.5;
}

.shop-faq-toggle {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--color-text-light);
	transition: transform var(--transition-base);
}

.shop-faq-item[open] .shop-faq-toggle {
	transform: rotate(180deg);
}

.shop-faq-content {
	padding: 0 0 var(--spacing-md) 34px; /* Left padding to align with question text */
	color: var(--color-text-light);
	font-size: var(--font-size-small);
	line-height: 1.7;
}

.shop-faq-content p {
	margin: 0 0 var(--spacing-sm) 0;
}

.shop-faq-content p:last-child {
	margin-bottom: 0;
}

/* Mobile: Reduce spacing */
@media screen and (max-width: 767px) {
	.shop-faq-section {
		margin-top: 60px;
		margin-bottom: 60px;
	}
	
	.shop-faq-label {
		font-size: 14px;
	}
}

/**
 * ==========================================================================
 * Guided Gallery Layout - Zig-Zag Narrative Design
 * ==========================================================================
 * Transform shop page into a curated exhibition experience
 */

.guided-gallery {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	margin-top: 60px; /* Desktop/Tablet spacing between Size Guide and products */
	padding: 0 var(--container-padding); /* Responsive padding: 16px mobile, 32px tablet, 64px desktop */
	box-sizing: border-box; /* Include padding in width calculation */
}

.gallery-item {
	display: grid;
	grid-template-columns: 1fr; /* Mobile-first: single column */
	gap: var(--spacing-lg);
	align-items: center;
	scroll-margin-top: 100px; /* Offset for fixed header when scrolling to anchor */
	margin-bottom: var(--spacing-xxl);
}

/* Last item - reduce bottom margin */
.gallery-item:last-child {
	margin-bottom: var(--spacing-xxl);
}

/* Image on left, content on right */
.gallery-item--left .gallery-item__image {
	grid-column: 1;
	grid-row: 1;
}

.gallery-item--left .gallery-item__content {
	grid-column: 2;
	grid-row: 1;
}

/* Image on right, content on left */
.gallery-item--right .gallery-item__image {
	grid-column: 2;
	grid-row: 1;
}

.gallery-item--right .gallery-item__content {
	grid-column: 1;
	grid-row: 1;
}

/* Image Link Wrapper - Full-area clickable with hover effect */
.gallery-item__image-link {
	display: block;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

/* Remove any potential overlay effects */
.gallery-item__image-link::before,
.gallery-item__image-link::after {
	content: none !important;
	display: none !important;
}

/* Image Styling - 4:5 portrait ratio, no borders, full bleed */
.gallery-item__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5; /* Portrait orientation */
	overflow: hidden;
}

.gallery-item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth scale animation */
}

/* Image Hover Effect - Subtle scale-up only, NO filter/opacity changes */
.gallery-item__image-link:hover .gallery-item__image img {
	transform: scale(1.03);
	opacity: 1; /* Ensure full opacity on hover */
	filter: none; /* Remove any filters */
}

/* Force remove any white overlay or opacity effects */
.gallery-item__image-link:hover {
	opacity: 1;
	background: none;
}

.gallery-item__image-link:hover .gallery-item__image {
	opacity: 1;
}

/* Content Area - Left-aligned for Nordic reading flow */
.gallery-item__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; /* Left-align all content */
	padding: var(--spacing-sm); /* Default: 8px all around - fallback for any unmatched breakpoints */
	text-align: left; /* Ensure text content is left-aligned */
}

/* Guide Label - Small uppercase positioning tag */
.gallery-item__label {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 10px; /* Increased spacing for better separation */
	display: block;
}

/* Product Title - Serif, large, elegant */
.gallery-item__title {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 3.5vw, 2.125rem); /* Increased from 1.75rem to 1.875rem */
	font-weight: 450; /* Slightly bolder for more presence */
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-primary);
	margin: 0 0 20px; /* Increased spacing below title */
}

/* Narrative Description - Generous line height for readability */
.gallery-item__description {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75; /* Slightly tighter for better visual density */
	color: var(--color-text-body);
	margin: 0 0 20px; /* Increased spacing */
}

/* Specs - Small, subdued */
.gallery-item__specs {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-light);
	margin: 0 0 32px; /* Increased spacing before price */
}

/* Footer - Price and CTA (Unified vertical layout for all devices) */
.gallery-item__footer {
	display: flex;
	flex-direction: column; /* Vertical stacking on all devices */
	align-items: flex-start;
	gap: var(--spacing-md);
	width: 100%; /* Ensure footer takes full width of parent */
}

.gallery-item__price {
	font-family: var(--font-primary);
	font-size: 22px; /* Increased from 18px for stronger emphasis */
	font-weight: 600; /* Increased from 500 for more presence */
	color: var(--color-primary);
}

/**
 * Ghost Button - Nordic Design Style
 * Inspired by Scandinavian brands: COS, HAY, Byredo, Arket
 * Adaptive width for desktop (compact), full-width for mobile (touch-friendly)
 */
.gallery-item__cta {
	/* Layout - Adaptive width by default (desktop) */
	display: inline-block;
	padding: 12px 32px; /* Generous clickable area */
	text-align: center; /* Button text centered within button */
	
	/* Typography */
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	
	/* Ghost Button Style - Default State */
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 0; /* Sharp corners for Nordic aesthetic */
	
	/* Animation */
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

/* Hover State - Invert effect (High-end feel) */
.gallery-item__cta:hover {
	background: var(--color-primary);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Active State - Press feedback */
.gallery-item__cta:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Tablet - Two Column Layout with Minimal Padding (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.gallery-item {
		grid-template-columns: 1fr 1fr; /* Two columns for tablet */
		gap: var(--spacing-md); /* Smaller gap to save space */
		margin-bottom: var(--spacing-xxl);
	}
	
	/* Minimal padding to maximize content space */
	.gallery-item__content {
		padding: var(--spacing-sm); /* 8px all around - very minimal */
	}
}

/* Desktop - Two Column Zigzag Layout with Generous Padding (≥1024px) */
@media screen and (min-width: 1024px) {
	.gallery-item {
		grid-template-columns: 1fr 1fr; /* Two columns for desktop */
		gap: var(--spacing-xxl); /* Generous gap */
		margin-bottom: clamp(120px, 15vh, 150px);
	}
	
	/* Generous padding for elegant reading experience */
	.gallery-item__content {
		padding: var(--spacing-xl); /* 64px - creates beautiful whitespace */
	}
	
	/* Enhanced vertical spacing for desktop */
	.gallery-item__label {
		margin-bottom: 14px; /* More separation on desktop */
	}
	
	.gallery-item__title {
		margin-bottom: 24px; /* Increased spacing below title */
	}
	
	.gallery-item__description {
		margin-bottom: 28px; /* More breathing room */
		max-width: 520px; /* Limit line length for better readability */
	}
	
	.gallery-item__specs {
		margin-bottom: 40px; /* More space before price on desktop */
	}
}

/* Mobile - Single Column Stack (≤767px) */
@media screen and (max-width: 767px) {
	/* Tighter spacing between Size Guide and Guided Gallery on mobile */
	.guided-gallery {
		margin-top: 40px;
	}
	
	.gallery-item {
		grid-template-columns: 1fr; /* Single column */
		gap: var(--spacing-lg);
	}
	
	/* Stack: image first, content second */
	.gallery-item--left .gallery-item__image-link,
	.gallery-item--right .gallery-item__image-link {
		grid-column: 1;
		grid-row: 1;
	}
	
	.gallery-item--left .gallery-item__content,
	.gallery-item--right .gallery-item__content {
		grid-column: 1;
		grid-row: 2;
		padding: var(--spacing-sm) 0; /* Only vertical padding */
	}
	
	/* Typography adjustments */
	.gallery-item__title {
		font-size: clamp(1.5rem, 5vw, 1.75rem);
	}
	
	.gallery-item__description {
		font-size: 15px;
		line-height: 1.7;
	}
	
	/* Mobile: Full-width button for better touch target */
	.gallery-item__cta {
		display: block;
		width: 100%;
		padding: 14px 24px;
	}
}

/**
 * Shop tables
 */
table.shop_table_responsive thead {
	display: none;
}

table.shop_table_responsive tbody th {
	display: none;
}

table.shop_table_responsive tr td {
	display: block;
	text-align: right;
	clear: both;
}

table.shop_table_responsive tr td::before {
	content: attr(data-title) ": ";
	float: left;
}

table.shop_table_responsive tr td.product-remove a {
	text-align: left;
}

table.shop_table_responsive tr td.product-remove::before {
	display: none;
}

table.shop_table_responsive tr td.actions::before,
table.shop_table_responsive tr td.download-actions::before {
	display: none;
}

table.shop_table_responsive tr td.download-actions .button {
	display: block;
	text-align: center;
}

@media screen and (min-width: 48em) {

	table.shop_table_responsive thead {
		display: table-header-group;
	}

	table.shop_table_responsive tbody th {
		display: table-cell;
	}

	table.shop_table_responsive tr th,
	table.shop_table_responsive tr td {
		text-align: left;
	}

	table.shop_table_responsive tr td {
		display: table-cell;
	}

	table.shop_table_responsive tr td::before {
		display: none;
	}
}

/**
 * Products - Nordic Minimalist Grid
 */
ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products li.product {
	float: none;
	width: 100%;
	margin: 0;
	background: var(--color-bg-white);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}

ul.products li.product:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	text-decoration: none;
}

ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

ul.products li.product:hover img {
	transform: scale(1.05);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text-main);
	margin: 0 0 var(--spacing-xs);
	padding: var(--spacing-md) var(--spacing-md) 0;
}

ul.products li.product .price {
	display: block;
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text-main);
	padding: 0 var(--spacing-md) var(--spacing-md);
}

ul.products li.product .price del {
	color: var(--color-text-light);
	margin-right: var(--spacing-xs);
}

ul.products li.product .price ins {
	text-decoration: none;
}

ul.products li.product .button {
	display: none;
}

/* Star Rating in Product Loop */
ul.products li.product .star-rating {
	margin: 0 var(--spacing-md);
}

/* Responsive Product Grid */
@media screen and (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 1024px) {
	ul.products.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

/**
 * Single product
 */
.single-product div.product {
	position: relative;
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	float: left;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 2em;
	right: 1em;
	display: block;
	z-index: 99;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 1em;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	cursor: pointer;
	float: left;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 0.5;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
	width: 48.1%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
	width: 30.79667%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
	width: 22.15%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
	width: 16.96%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
	clear: both;
}

.stock:empty::before {
	display: none;
}

.stock.in-stock {
	color: var(--color-success);
}

.stock.out-of-stock {
	color: var(--color-error);
}

/**
 * Checkout
 */
@media screen and (min-width: 768px) {

	.col2-set .form-row-first {
		float: left;
		margin-right: 3.8%;
	}

	.col2-set .form-row-last {
		float: right;
		margin-right: 0;
	}

	.col2-set .form-row-first,
	.col2-set .form-row-last {
		width: 48.1%;
	}
}

/**
 * General WooCommerce components
 */

/**
 * Header cart
 */
.site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	text-decoration: none;
}

/* Force hide native mini cart (higher specificity without !important) */
.header-cart .site-header-cart .widget_shopping_cart,
.site-header-cart > .widget_shopping_cart {
	display: none;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.site-header-cart .product_list_widget {
	margin: 0;
	padding: 0;
}

/**
 * Star rating
 */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	line-height: 1.618;
	width: 5.3em;
	font-family: star;
	font-weight: 400;
}

.star-rating::before {
	content: "\53\53\53\53\53";
	opacity: 0.25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: var(--color-primary);
}

p.stars a {
	position: relative;
	height: 1em;
	width: 1em;
	text-indent: -999em;
	display: inline-block;
	text-decoration: none;
	margin-right: 1px;
	font-weight: 400;
}

p.stars a::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-family: star;
	content: "\53";
	color: #404040;
	text-indent: 0;
	opacity: 0.25;
}

p.stars a:hover ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars:hover a::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

p.stars.selected a.active::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

p.stars.selected a.active ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars.selected a:not(.active)::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	position: relative;
}

.woocommerce-tabs ul.tabs li a {
	padding: 1em 0;
	display: block;
}

.woocommerce-tabs .panel h2:first-of-type {
	margin-bottom: 1em;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
	text-align: right;
}

.woocommerce-password-strength.strong {
	color: #0f834d;
}

.woocommerce-password-strength.short {
	color: #e2401c;
}

.woocommerce-password-strength.bad {
	color: #e2401c;
}

.woocommerce-password-strength.good {
	color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
	box-shadow: inset 2px 0 0 #0f834d;
}

.form-row.woocommerce-invalid input.input-text {
	box-shadow: inset 2px 0 0 #e2401c;
}

.required {
	color: #f00;
}

/**
 * Notices - Nordic Minimal Style
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-success);
	color: var(--color-text-main);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	border-left-color: var(--color-text-light);
}

.woocommerce-error {
	border-left-color: var(--color-error);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--color-primary);
}

.demo_store {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: #3d9cd2;
	z-index: 9999;
}

@media screen and (min-width: 48em) {

	/**
	 * Header cart - Disabled native mini cart (using Side Cart plugin instead)
	 */
	.site-header-cart .widget_shopping_cart {
		display: none;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		left: -999em;
	}

	/* Prevent hover from showing native mini cart */
	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart.focus .widget_shopping_cart {
		display: none;
		visibility: hidden;
		opacity: 0;
		left: -999em;
	}
}

/**
 * WooCommerce widgets
 */

/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
	margin-bottom: 1.5em;
}

.widget_price_filter .price_slider_amount {
	text-align: right;
	line-height: 2.4;
}

.widget_price_filter .price_slider_amount .button {
	float: left;
}

.widget_price_filter .ui-slider {
	position: relative;
	text-align: left;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1em;
	height: 1em;
	cursor: ew-resize;
	outline: none;
	background: #4169e1;
	box-sizing: border-box;
	margin-top: -0.25em;
	opacity: 1;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -1em;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background: #4169e1;
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider-horizontal {
	height: 0.5em;
}

.widget_price_filter .ui-slider-horizontal .ui-slider-range {
	height: 100%;
}

/**
 * WooCommerce Buttons - Nordic Style
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--color-primary);
	color: #FFFFFF;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-btn);
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: 500;
	padding: 1em 2em;
	cursor: pointer;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: transparent;
	color: var(--color-primary);
	transform: translateY(-2px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	transform: translateY(0);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--color-primary);
	color: #FFFFFF;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: transparent;
	color: var(--color-primary);
}

/* ==========================================================================
   Single Product Page - Nordic Gallery Design
   ========================================================================== */

/**
 * Breadcrumb - Nordic Minimalist Style
 * Now positioned INSIDE .summary, above the product title
 */
.single-product .woocommerce-breadcrumb {
	/* Typography - Nordic Minimalist */
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 400;
	color: #999999;
	text-transform: uppercase;
	letter-spacing: 1px;
	
	/* Spacing - Give breadcrumb more independence from title */
	margin: 0 0 16px 0;
	padding: 0;
	
	/* Flexbox for alignment */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.single-product .woocommerce-breadcrumb .breadcrumb-item {
	display: inline;
}

.single-product .woocommerce-breadcrumb a {
	color: #999999;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.single-product .woocommerce-breadcrumb a:hover {
	color: var(--color-primary); /* #1A1A1A */
}

/* Breadcrumb separator - very light grey */
.single-product .woocommerce-breadcrumb .breadcrumb-separator {
	color: #E0E0E0;
	margin: 0 0.75em;
	font-weight: 300;
}

/**
 * Base Layout - Mobile First
 * Compact spacing - content starts close to header for connected feel
 */
.single-product div.product {
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding);
	padding-top: 40px;
	box-sizing: border-box; /* Include padding in width calculation */
}

.single-product div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin-bottom: var(--spacing-lg);
}

.single-product div.product .summary {
	width: 100%;
	float: none;
}

/**
 * Product Title - Playfair Display
 */
.single-product div.product .product_title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 var(--spacing-md);
	color: var(--color-text-main);
}

/**
 * Product Price - Large Inter
 */
.single-product div.product .price {
	font-family: var(--font-primary);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-bottom: var(--spacing-lg);
	color: var(--color-text-main);
}

.single-product div.product .price del {
	color: var(--color-text-light);
	font-size: 0.75em;
	margin-right: var(--spacing-sm);
}

.single-product div.product .price ins {
	text-decoration: none;
}

/**
 * Short Description - Clean Bullet Points
 */
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--color-text-light);
	margin-top: 24px; /* Separate from price */
	margin-bottom: 0; /* Space controlled by variations margin-top */
	font-size: var(--font-size-base);
	line-height: 1.6; /* Match homepage line-height */
}

.single-product div.product .woocommerce-product-details__short-description ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-product div.product .woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.5em;
}

.single-product div.product .woocommerce-product-details__short-description ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 6px;
	background-color: var(--color-text-light);
	border-radius: 50%;
}

/**
 * Key Features Line - Visual Enhancement
 * Nordic minimalist styling with clear hierarchy
 * Using spacing instead of border for cleaner look
 */
.single-product div.product .woocommerce-product-details__short-description .key-features-line {
	margin-top: 32px;
	margin-bottom: 0;
	padding-top: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #1A1A1A;
}

/* "Key features:" label - Small, uppercase, light grey */
.single-product div.product .woocommerce-product-details__short-description .key-features-label {
	display: block;
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #999999;
	margin-bottom: 8px;
}

/**
 * Variation Swatches - Nordic Minimalist Tag Style
 */
.single-product .variations {
	margin-top: 48px;
	margin-bottom: var(--spacing-lg);
}

.single-product .variations td {
	padding: var(--spacing-sm) 0;
}

.single-product .variations .label {
	padding-right: 24px;
	padding-bottom: 12px;
}

/* 
 * Style the label text to match KEY FEATURES style
 * Accept that the colon may be a different color - it's a minor detail
 */
body.single-product.woocommerce div.product .variations .label > label {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #999999;
	line-height: 1.2;
}

/**
 * Swatch Button Style - Unified Tag Design
 */
 
/* Hide Tooltips - Comprehensive Coverage */
.woo-variation-swatches-tooltip,
.tawcvs-tooltip,
.variation-swatch-tooltip,
.tippy-box,
.tippy-tooltip,
[role="tooltip"],
.variations .button-variable-item::before,
.variations .button-variable-item::after,
.variations .tawcvs-swatches .swatch::before,
.variations .tawcvs-swatches .swatch::after {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.single-product .variations .tawcvs-swatches,
.single-product .variations .button-variable-wrapper {
	display: flex;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

/* ==========================================
   Base Swatch Button Style - Tag/Label Design
   ========================================== */

.single-product .variations .button-variable-item,
.single-product .variations .tawcvs-swatches .swatch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	
	/* Typography - Premium Inter Font */
	font-family: var(--font-primary) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1px !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	
	/* Layout - Generous Spacing */
	padding: 10px 24px !important;
	min-width: 140px !important;
	text-align: center !important;
	
	/* Default State: Light Tag */
	background: transparent !important;
	color: #1A1A1A !important;
	border: 1px solid #E5E5E5 !important;
	border-radius: 0 !important;
	
	/* Animation */
	cursor: pointer;
	transition: all 0.3s ease;
}

/* ==========================================
   Material Swatch Hover & Selected States
   (Unified for all materials)
   ========================================== */

.single-product .variations .button-variable-item:hover,
.single-product .variations .button-variable-item.selected,
.single-product .variations .button-variable-item.active,
.single-product .variations .tawcvs-swatches .swatch:hover,
.single-product .variations .tawcvs-swatches .swatch.selected,
.single-product .variations .tawcvs-swatches .swatch.active {
	background: #000 !important;
	color: #FFFFFF !important;
	border-color: #000 !important;
}

/* Disabled State (for any material) */
.single-product .variations .button-variable-item.disabled,
.single-product .variations .tawcvs-swatches .swatch.disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hide default select dropdown if swatches are active */
.single-product .variations select.tawcvs-select-wrapper,
.single-product .variations .tawcvs-select-wrapper {
	display: none;
}

/* Hide "Clear" reset link - keeps interface clean */
/* Note: This element is dynamically shown/hidden by WooCommerce JS with inline styles
   We handle visibility via JavaScript (see inc/woocommerce.php) instead of CSS !important */
body.single-product.woocommerce .variations .reset_variations,
body.single-product.woocommerce .variations_form .reset_variations {
	display: none;
	visibility: hidden;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/**
 * Quantity Input - Hidden for cleaner UI
 * (Customers rarely buy multiple frames at once)
 * Using specificity instead of !important
 */
body.single-product.woocommerce form.cart .quantity,
body.woocommerce.single-product .quantity,
body.single-product .woocommerce-variation-add-to-cart .quantity {
	display: none;
	visibility: hidden;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/**
 * Add to Cart Button - Nordic Invert Style (Full Width)
 * Using high specificity selectors to override WooCommerce defaults
 */
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button,
body.woocommerce.single-product div.product form.cart button.single_add_to_cart_button,
body.single-product div.product .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.single-product div.product .single_add_to_cart_button {
	/* Layout - Full Width */
	display: block;
	width: 100%;
	margin-top: 24px;
	text-align: center;
	
	/* Nordic Invert Style - Default State */
	background: var(--color-primary);
	color: #FFFFFF;
	border: 2px solid var(--color-primary);
	
	/* Typography */
	padding: 1em 3em;
	font-size: var(--font-size-base);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	
	/* Animation */
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base);
}

/* Hover State */
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button:hover,
body.woocommerce.single-product div.product form.cart button.single_add_to_cart_button:hover,
body.single-product div.product .woocommerce-variation-add-to-cart button.single_add_to_cart_button:hover,
.single-product div.product .single_add_to_cart_button:hover {
	background: transparent;
	color: var(--color-primary);
	transform: translateY(-2px);
}

/* Active State */
body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:active,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button.button:active,
body.woocommerce.single-product div.product form.cart button.single_add_to_cart_button:active,
body.single-product div.product .woocommerce-variation-add-to-cart button.single_add_to_cart_button:active,
.single-product div.product .single_add_to_cart_button:active {
	transform: translateY(0);
}

/**
 * Hide Express Checkout Buttons (GPay, Link, Apple Pay)
 */
body.single-product.woocommerce .wc-stripe-payment-request-wrapper,
body.single-product.woocommerce .woocommerce-checkout-payment .stripe-payment-request-button,
body.single-product.woocommerce #wc-stripe-payment-request-button-separator,
body.single-product.woocommerce .gpay-button,
body.single-product.woocommerce [id*="express-checkout"],
body.single-product.woocommerce .wc-stripe-upe-element,
body.single-product.woocommerce .woocommerce-form-coupon,
body.single-product.woocommerce form.cart .woocommerce-variation-add-to-cart ~ div:not(.kokonna-trust-badges):not(.kokonna-tech-specs) {
	/* Critical: Must use !important to override Stripe inline styles */
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	position: absolute !important;
	
	/* Supporting: Use !important to prevent any edge cases */
	opacity: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	left: -9999px !important;
	
	/* Insurance: No !important needed, just defense in depth */
	overflow: hidden;
	pointer-events: none;
}

/* Also hide via class patterns commonly used by payment plugins */
body.single-product.woocommerce .payment-request-buttons,
body.single-product.woocommerce .wc-stripe-express-checkout,
body.single-product.woocommerce .express-checkout-wrapper,
body.single-product.woocommerce .quick-checkout-buttons {
	/* Critical: Must use !important to override plugin inline styles */
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	position: absolute !important;
	
	/* Supporting: Use !important to prevent any edge cases */
	opacity: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	left: -9999px !important;
	
	/* Insurance: No !important needed, just defense in depth */
	overflow: hidden;
	pointer-events: none;
}

/**
 * Trust Badges - Part of "Purchase Group"
 * Clean design with space separation
 */
.kokonna-trust-badges {
	display: flex;
	align-items: center;
	margin-top: 18px;
	font-size: var(--font-size-small);
	color: var(--color-text-light);
}

body.single-product div.product .kokonna-trust-badges .trust-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

body.single-product div.product .kokonna-trust-badges .trust-item:first-child {
	margin-right: 30px;
}

body.single-product div.product .kokonna-trust-badges .trust-item svg {
	opacity: 0.7;
}

/**
 * Tech Specs Accordion
 */
.kokonna-tech-specs {
	margin-top: var(--spacing-xl);
	border-top: 1px solid var(--color-border);
	padding-top: var(--spacing-lg);
}

.kokonna-tech-specs .tech-specs-title {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #999999;
	margin: 0 0 var(--spacing-md);
}

.kokonna-tech-specs .tech-spec-item {
	border-bottom: 1px solid var(--color-border);
}

.kokonna-tech-specs .tech-spec-header {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.kokonna-tech-specs .tech-spec-header::-webkit-details-marker {
	display: none;
}

.kokonna-tech-specs .tech-spec-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-text-light);
}

.kokonna-tech-specs .tech-spec-label {
	flex: 1;
	font-weight: 500;
	color: var(--color-text-main);
}

.kokonna-tech-specs .tech-spec-toggle {
	display: flex;
	align-items: center;
	color: var(--color-text-light);
	transition: transform var(--transition-base);
}

.kokonna-tech-specs .tech-spec-item[open] .tech-spec-toggle {
	transform: rotate(180deg);
}

.kokonna-tech-specs .tech-spec-content {
	padding: 0 0 var(--spacing-md) calc(32px + var(--spacing-sm));
	color: var(--color-text-light);
	font-size: var(--font-size-small);
	line-height: 1.6;
}

.kokonna-tech-specs .tech-spec-content p {
	margin: 0;
}

.kokonna-tech-specs .tech-spec-content .no-spec {
	font-style: italic;
	opacity: 0.7;
}

/**
 * Vertical Image Gallery (No Slider, No Hover Effects)
 */
.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	display: block !important;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	margin-bottom: var(--spacing-md);
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* 
 * Remove ALL hover effects from gallery images
 * This targets any remaining <a> tags or overlays
 */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a {
	display: block;
	cursor: default;
	pointer-events: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a img {
	pointer-events: auto;
}

/* Remove any pseudo-element overlays (white hover effect) */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a::before,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a::after {
	content: none !important;
	display: none !important;
}

/* Hide thumbnail navigation (using vertical gallery instead) */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: none !important;
}

/* Hide zoom trigger */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Hide any zoom overlay images */
.single-product div.product .woocommerce-product-gallery .zoomImg,
.single-product div.product .woocommerce-product-gallery img.zoomImg {
	display: none !important;
}

/**
 * Hide Product Meta (Category/Tags)
 */
.single-product div.product .product_meta {
	display: none;
}

/**
 * Hide WooCommerce Tabs
 */
.single-product div.product .woocommerce-tabs {
	display: none;
}

/**
 * Hide Sidebar on Single Product Page
 * Using specificity instead of !important
 */
body.single-product.woocommerce #secondary,
body.single-product.woocommerce aside.widget-area,
body.woocommerce.single-product div.widget-area {
	display: none;
}

/**
 * Software Experience Section (KoKonna OS)
 * Positioned before Related Products to showcase software features
 * Uses Trust Bar layout style from homepage
 */
.kokonna-software-experience {
	position: relative;
	width: 100%;
	padding: var(--spacing-xxl) 0;
	background: #FFFFFF;
	border-top: 1px solid var(--color-border);
	box-sizing: border-box;
	/* Initial hidden state to prevent FOUC (Flash of Unstyled Content) */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* Visible state after JS migration */
.kokonna-software-experience.is-moved {
	visibility: visible;
	opacity: 1;
}

.kokonna-software-experience .container {
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-padding);
	box-sizing: border-box;
}

.kokonna-software-experience .software-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
}

.kokonna-software-experience .software-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--spacing-md);
}

.kokonna-software-experience .software-icon {
	flex-shrink: 0;
}

.kokonna-software-experience .software-icon img {
	width: 48px;
	height: 48px;
	opacity: 0.8;
}

.kokonna-software-experience .software-content {
	flex: 1;
}

.kokonna-software-experience .software-title {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--color-text-main);
	line-height: 1.4;
}

.kokonna-software-experience .software-description {
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	color: #666666;
}

/* Tablet Layout */
@media screen and (min-width: 768px) {
	.kokonna-software-experience .software-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-xl);
	}
	
	/* Change to left-align on tablet and up */
	.kokonna-software-experience .software-item {
		align-items: flex-start;
		text-align: left;
	}
}

/* Desktop Layout */
@media screen and (min-width: 1024px) {
	.kokonna-software-experience .software-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--spacing-lg);
	}
	
	.kokonna-software-experience .software-item {
		gap: var(--spacing-sm);
	}
}

/**
 * Related Products - Now OUTSIDE .product div (moved via PHP hook)
 * This fixes the sticky overlap issue
 */
.single-product .related.products {
	max-width: var(--container-max);
	width: 100%;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--container-padding);
	padding-top: var(--spacing-xxl);
	border-top: 1px solid var(--color-border);
	clear: both;
	box-sizing: border-box;
}

.single-product .related.products > h2 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.5rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: var(--spacing-xl);
	text-align: left;
}

/**
 * Related Products Cards - Match Homepage Style
 * Nordic minimalist design with transparent background
 */
.single-product .related.products ul.products li.product {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

.single-product .related.products ul.products li.product:hover {
	box-shadow: none;
}

/* Image wrapper for shadow effect */
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	position: relative;
	overflow: hidden;
}

.single-product .related.products ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Hover effect - shadow on image only, no white overlay */
.single-product .related.products ul.products li.product:hover img {
	transform: scale(1.05);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	opacity: 1;
}

/* Prevent any pseudo-element overlays */
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link::before,
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link::after {
	content: none;
	display: none;
}

/* Force remove any WooCommerce default overlays */
.single-product .related.products ul.products li.product a.woocommerce-LoopProduct-link,
.single-product .related.products ul.products li.product a {
	background: none;
	opacity: 1;
}

.single-product .related.products ul.products li.product:hover a.woocommerce-LoopProduct-link,
.single-product .related.products ul.products li.product:hover a {
	background: none;
	opacity: 1;
}

/* Title - bold and prominent */
.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-xs);
	padding: var(--spacing-md) 0 0 0;
}

/* Price - muted gray for lower visual weight */
.single-product .related.products ul.products li.product .price {
	display: block;
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text-light);
	padding: 0 0 var(--spacing-xs) 0;
}

.single-product .related.products ul.products li.product .price del {
	color: var(--color-text-light);
	margin-right: var(--spacing-xs);
}

.single-product .related.products ul.products li.product .price ins {
	text-decoration: none;
}

/* ==========================================================================
   Single Product - Desktop Layout (Nordic Gallery 60/40)
   ========================================================================== */
@media screen and (min-width: 1024px) {
	/* 
	 * Flexbox layout for Gallery + Summary only
	 * Related Products is now OUTSIDE .product div (via PHP hook)
	 * This ensures sticky stops at the end of gallery
	 */
	.single-product div.product {
		display: flex;
		gap: 0 var(--spacing-lg);
		align-items: flex-start;
	}

	/* Left Column: Gallery - 60% width */
	.single-product div.product .woocommerce-product-gallery {
		flex: 0 0 58%;
		max-width: 58%;
		margin-bottom: 0;
		padding-right: var(--spacing-lg);
	}

	/* 
	 * Right Column: Summary - 40% width, Sticky
	 * Sticky now correctly stops when gallery ends
	 * because Related Products is outside .product div
	 */
	.single-product div.product .summary {
		flex: 0 0 calc(42% - var(--spacing-lg));
		max-width: calc(42% - var(--spacing-lg));
		position: sticky;
		top: 100px;
		align-self: flex-start;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		padding-right: var(--spacing-md);
		
		/* Custom scrollbar */
		scrollbar-width: thin;
		scrollbar-color: var(--color-border) transparent;
	}

	.single-product div.product .summary::-webkit-scrollbar {
		width: 4px;
	}

	.single-product div.product .summary::-webkit-scrollbar-track {
		background: transparent;
	}

	.single-product div.product .summary::-webkit-scrollbar-thumb {
		background-color: var(--color-border);
		border-radius: 0;
	}
}

/**
 * Cart Page
 */
/*--------------------------------------------------------------
# Cart Page Redesign - Nordic Minimalist Design
# WooCommerce Block Editor Cart
--------------------------------------------------------------*/

/**
 * Cart Page Container - Full Width Layout
 */
.woocommerce-cart .entry-content {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--spacing-xl) var(--container-padding);
}

/**
 * Empty Cart - "New in store" Product Cards
 * Match Homepage Featured Products 4-column flexible layout
 * Nordic minimalist design with transparent background
 * Note: WooCommerce uses Blocks (wc-block-grid__products) for empty cart products
 */
.woocommerce-cart ul.products li.product,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product {
	background: transparent;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	border: 0 !important; /* Remove WooCommerce Blocks default borders that cause misalignment */
	/* Override WooCommerce Blocks default max-width constraint */
	max-width: none !important;
	width: 100% !important; /* Fill the grid cell */
	flex: 0 0 auto !important; /* Prevent flex shrinking */
}

.woocommerce-cart ul.products li.product:hover,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product:hover {
	box-shadow: none;
}

/* Image wrapper for shadow effect */
.woocommerce-cart ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product a.wc-block-grid__product-link,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-image {
	display: block !important;
	position: relative;
	overflow: hidden;
	width: 100% !important; /* Ensure wrapper fills the card */
	max-width: none !important; /* Remove any default max-width */
}

.woocommerce-cart ul.products li.product img,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product img,
body.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product img {
	display: block !important;
	width: 100% !important; /* Fill parent container width */
	height: auto !important; /* Auto height to maintain aspect ratio */
	aspect-ratio: 1 / 1 !important; /* Keep square shape */
	object-fit: cover !important;
	transition: transform 0.5s ease !important;
}

/* Hover effect - shadow on image only, no white overlay */
.woocommerce-cart ul.products li.product:hover img,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product:hover img {
	transform: scale(1.05);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	opacity: 1;
}

/* Prevent any pseudo-element overlays */
.woocommerce-cart ul.products li.product a.woocommerce-LoopProduct-link::before,
.woocommerce-cart ul.products li.product a.woocommerce-LoopProduct-link::after,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product a.wc-block-grid__product-link::before,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product a.wc-block-grid__product-link::after {
	content: none;
	display: none;
}

/* Force remove any WooCommerce default overlays */
.woocommerce-cart ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-cart ul.products li.product a,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product a.wc-block-grid__product-link,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product a {
	background: none;
	opacity: 1;
}

.woocommerce-cart ul.products li.product:hover a.woocommerce-LoopProduct-link,
.woocommerce-cart ul.products li.product:hover a,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product:hover a.wc-block-grid__product-link,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product:hover a {
	background: none;
	opacity: 1;
}

/* Title - bold and prominent */
.woocommerce-cart ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-title {
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-xs);
	padding: var(--spacing-md) 0 0 0;
}

/* Price - muted gray for lower visual weight */
.woocommerce-cart ul.products li.product .price,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price {
	display: block;
	font-size: var(--font-size-base);
	font-weight: 400;
	color: var(--color-text-light);
	padding: 0 0 var(--spacing-xs) 0;
}

.woocommerce-cart ul.products li.product .price del,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price del {
	color: var(--color-text-light);
	margin-right: var(--spacing-xs);
}

.woocommerce-cart ul.products li.product .price ins,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-price ins {
	text-decoration: none;
}

/* Hide "Add to cart" and "Select options" buttons - Match Related Products style */
.woocommerce-cart ul.products li.product .button,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .wp-block-button__link,
.woocommerce-cart .wc-block-grid__products li.wc-block-grid__product .add_to_cart_button {
	display: none !important;
}

/* Adjust grid layout to match Homepage Featured Products - Flexible layout */
.woocommerce-cart ul.products,
.woocommerce-cart .wc-block-grid__products {
	display: grid !important;
	grid-template-columns: 1fr !important; /* Mobile: 1 column by default */
	gap: var(--spacing-lg) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Tablet: 2 columns - flexible width */
@media screen and (min-width: 768px) {
	.woocommerce-cart ul.products,
	.woocommerce-cart .wc-block-grid__products {
		grid-template-columns: repeat(2, 1fr) !important; /* 2 flexible columns */
	}
}

/* Desktop: 4 columns - flexible width to adapt to container */
@media screen and (min-width: 1024px) {
	.woocommerce-cart ul.products,
	.woocommerce-cart .wc-block-grid__products {
		grid-template-columns: repeat(4, 1fr) !important; /* 4 flexible columns that adapt to page width */
	}
}

/**
 * HIDE "Edit" link for clean preview
 * This is WordPress admin edit link, not needed in frontend
 */
.woocommerce-cart .entry-footer,
.woocommerce-cart .edit-link,
.woocommerce-checkout .entry-footer,
.woocommerce-checkout .edit-link {
	display: none;
	visibility: hidden;
	opacity: 0;
	height: 0;
}

/* Cart Title - Match homepage Featured Products section style */
.woocommerce-cart .entry-header {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.woocommerce-cart .entry-title,
.woocommerce-cart h1.entry-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	text-align: left;
	margin: var(--spacing-lg) 0 var(--spacing-md); /* Further compressed: 32px top, 16px bottom */
	color: var(--color-primary);
}

/**
 * WooCommerce Blocks Cart - Two Column Layout (60/40 Split)
 */
.wc-block-cart.wc-block-components-sidebar-layout {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
	align-items: stretch;
}

@media screen and (min-width: 1024px) {
	.wc-block-cart.wc-block-components-sidebar-layout {
		flex-direction: row;
		gap: 5%;
	}
	
	.wc-block-cart__main {
		flex: 0 0 60%;
		max-width: 60%;
	}
	
	.wc-block-cart__sidebar {
		flex: 0 0 35%;
		max-width: 35%;
		position: sticky;
		top: 100px;
		align-self: flex-start;
	}
}

/**
 * Cart Items Table - Clean & Minimal
 * Nordic Style: No vertical borders, only horizontal lines
 */
.wc-block-cart-items {
	border: none;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: var(--spacing-lg);
}

/* Hide default caption */
.wc-block-cart-items caption {
	display: none;
}

/* Table Headers - Uppercase, Light Grey */
.wc-block-cart-items thead th {
	font-family: var(--font-primary);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #999999;
	border: none;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid #E5E5E5;
	padding: var(--spacing-md) var(--spacing-sm);
	text-align: left;
	background: transparent;
}

/* Cart Item Rows - Only bottom borders */
.wc-block-cart-items__row {
	border: none;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid #E5E5E5;
}

.wc-block-cart-items__row td {
	border: none;
	border-left: none;
	border-right: none;
	border-top: none;
	padding: var(--spacing-xl) var(--spacing-sm); /* More generous padding for breathing room */
	vertical-align: middle;
}

/* Product Thumbnail - Enforce perfect square, sharp corners */
.wc-block-cart-items__row td.wc-block-cart-item__image {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
	padding: var(--spacing-sm);
}

.wc-block-cart-item__image {
	position: relative;
	width: 100px;
	height: 100px;
	min-width: 100px;
	min-height: 100px;
	max-width: 100px;
	max-height: 100px;
	overflow: hidden;
	border-radius: 0;
	background: #F0F0F0;
	flex-shrink: 0;
}

.wc-block-cart-item__image img {
	width: 100px;
	height: 100px;
	min-width: 100px;
	min-height: 100px;
	max-width: 100px;
	max-height: 100px;
	object-fit: cover;
	border-radius: 0;
	border: none;
	display: block;
}

/* Product Name & Details */
.wc-block-cart-item__product a {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base);
}

.wc-block-cart-item__product a:hover {
	color: var(--color-text-light);
}

/**
 * Product Variation Details & Descriptions - SMART SOLUTION
 * Using :has() pseudo-class to conditionally show/hide based on content
 * 
 * Logic:
 * - Non-variable products: .metadata contains only text → HIDE
 * - Variable products: .metadata contains .product-details → SHOW
 */

/* Step 1: Hide ALL product metadata by default (removes short descriptions) */
.wc-block-components-product-metadata {
	display: none !important;
}

/* Step 2: SMART REVIVAL - Show metadata ONLY if it contains product-details (variation info) */
.wc-block-components-product-metadata:has(.wc-block-components-product-details) {
	display: block !important;
	margin-top: var(--spacing-xs);
}

/* Step 3: Style the variation details for readability */
.wc-block-components-product-details {
	font-size: 13px !important;
	color: var(--color-text-light) !important;
	line-height: 1.5;
}

/* Style the variation attribute name (FRAME MATERIAL:) */
.wc-block-components-product-details__name {
	display: inline-block;
	font-weight: 400;
	color: #999999;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
}

/* Style the variation attribute value (Wood, Aluminum) */
.wc-block-components-product-details__value {
	display: inline-block;
	font-weight: 500;
	color: var(--color-text-main);
	font-size: 13px;
	margin-left: 0.5em;
}

/* Quantity Controls */
.wc-block-components-quantity-selector {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.wc-block-components-quantity-selector button {
	width: 32px;
	height: 32px;
	border: 1px solid #E5E5E5;
	border-radius: 0;
	background: transparent;
	color: var(--color-text-main);
	cursor: pointer;
	transition: all var(--transition-base);
}

.wc-block-components-quantity-selector button:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.wc-block-components-quantity-selector input {
	width: 60px;
	padding: 8px;
	border: 1px solid #E5E5E5;
	border-radius: 0;
	text-align: center;
	font-family: var(--font-primary);
	font-size: 14px;
}

/* Remove Item Link - Subtle, low visual distraction, NO underline
 * Note: !important is used for properties that WooCommerce Blocks overrides
 * with high-specificity selectors. Only 8 properties need !important.
 */
.wc-block-cart-items .wc-block-cart-item__remove-link,
.wc-block-cart-items a.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link,
button.wc-block-cart-item__remove-link {
	display: inline-block;
	font-family: var(--font-primary);
	font-size: 12px !important; /* WooCommerce overrides this */
	font-weight: 400;
	color: #AAAAAA !important; /* WooCommerce overrides this */
	text-decoration: none !important; /* WooCommerce overrides this */
	text-decoration-line: none !important;
	text-decoration-style: none !important;
	border: none;
	border-bottom: none !important; /* For underline alternatives */
	box-shadow: none;
	background: none;
	transition: color var(--transition-base);
	padding: 4px 0 !important; /* WooCommerce overrides this */
	line-height: 1.6;
	letter-spacing: 0.02em;
}

/* Force remove underline on all link states */
.wc-block-cart-items .wc-block-cart-item__remove-link:link,
.wc-block-cart-items .wc-block-cart-item__remove-link:visited,
.wc-block-cart-items .wc-block-cart-item__remove-link:active {
	text-decoration: none !important;
	border-bottom: none !important;
}

.wc-block-cart-items .wc-block-cart-item__remove-link:hover,
.wc-block-cart-items a.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:hover {
	color: #666666 !important; /* WooCommerce overrides hover color */
	text-decoration: none !important;
	border-bottom: none !important;
	background: none;
}

/* Price Styling - Match homepage style (muted gray for lower visual weight) */
.wc-block-cart-item__total,
.wc-block-components-product-price {
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-text-light); /* Match homepage: muted gray, not aggressive */
}

/**
 * Cart Sidebar (Right Column) - Cart Totals
 * Nordic Style: Bone/Light grey background (#F5F5F0), generous padding
 * Create a "card" feeling with distinct visual weight
 */
.wc-block-cart__sidebar {
	width: 100%;
	background: #F5F5F0;
	padding: 48px;
	border-radius: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Cart Totals Heading - Clean, minimal */
.wp-block-woocommerce-cart-order-summary-block h2,
.wc-block-components-totals-wrapper h2 {
	font-family: var(--font-primary);
	font-size: 14px; /* Smaller, less aggressive */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px; /* Wider tracking for elegance */
	margin-bottom: var(--spacing-lg);
	color: var(--color-text-main); /* Not too dark, balanced */
}

/* Coupon/Discount Section */
.wc-block-components-totals-coupon {
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid #E5E5E5;
}

.wc-block-components-totals-coupon__button {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-primary);
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	padding: 10px 24px;
	cursor: pointer;
	transition: all var(--transition-base);
}

.wc-block-components-totals-coupon__button:hover {
	background: var(--color-primary);
	color: #FFFFFF;
}

/* Totals Lines (Subtotal, Fee, Tax) */
.wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-md) 0;
	border-bottom: 1px solid #E5E5E5;
	font-family: var(--font-primary);
	font-size: 14px;
}

.wc-block-components-totals-item__label {
	font-weight: 500;
	color: var(--color-text-main);
}

.wc-block-components-totals-item__value {
	font-weight: 400;
	color: var(--color-text-main);
}

/* Total (Estimated Total) - Prominent display */
.wc-block-components-totals-footer-item {
	display: flex;
	justify-content: space-between;
	padding: var(--spacing-lg) 0;
	border-bottom: none;
	font-family: var(--font-primary);
	font-size: 22px; /* Larger for emphasis */
	font-weight: 600;
	color: var(--color-primary);
	line-height: 1.4;
}

/* Tax included note - Smaller, muted */
.wc-block-components-totals-footer-item-tax {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-light);
	margin-top: var(--spacing-xs);
}

/**
 * HIDE Express Payment Buttons (Stripe, Google Pay, Apple Pay)
 * We only want the standard black "Proceed to Checkout" button
 */
.wc-block-components-express-payment,
.wc-block-components-express-payment__content,
.wc-block-components-express-payment__event-buttons,
#wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button,
.stripe-button-el,
.wc-block-components-express-payment-continue-rule {
	display: none;
	visibility: hidden;
	opacity: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

/**
 * Proceed to Checkout Button
 * Match Add to Cart button style: Nordic invert effect with 2px border
 * Note: !important needed to override WooCommerce Blocks inline styles
 */
.wc-block-components-checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-button.contained,
button.wc-block-components-checkout-button,
a.wc-block-components-checkout-button {
	/* Layout - Full Width */
	display: block !important;
	width: 100% !important;
	text-align: center;
	
	/* Nordic Invert Style - Default State (same as Add to Cart) */
	background: var(--color-primary) !important;
	background-color: var(--color-primary) !important;
	color: #FFFFFF !important;
	border: 2px solid var(--color-primary) !important;
	border-radius: 0 !important;
	
	/* Typography - Match Add to Cart exactly */
	padding: 1em 3em !important;
	font-family: var(--font-primary) !important;
	font-size: var(--font-size-base) !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	
	/* Behavior */
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base) !important;
}

/* Hover State - Nordic Invert Effect (same as Add to Cart) */
.wc-block-components-checkout-button:hover,
.wc-block-cart__submit-button:hover,
button.wc-block-components-checkout-button:hover,
a.wc-block-components-checkout-button:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	transform: translateY(-2px) !important;
}

/* Active State - Remove lift */
.wc-block-components-checkout-button:active,
.wc-block-cart__submit-button:active {
	transform: translateY(0) !important;
}

/* Ensure button text stays on one line */
.wc-block-cart__submit-container {
	width: 100%;
	margin-top: var(--spacing-md);
}

.wc-block-cart__submit-button a,
.wc-block-components-checkout-button a {
	width: 100%;
	white-space: nowrap;
}

/**
 * Cross-sells Section ("You may be interested in...")
 */
.wp-block-woocommerce-cart-cross-sells-block,
.wc-block-cart__cross-sells {
	margin-top: var(--spacing-xxl);
	padding-top: var(--spacing-xxl);
	border-top: 1px solid #E5E5E5;
}

.wp-block-woocommerce-cart-cross-sells-block h2 {
	font-family: var(--font-primary);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: var(--spacing-lg);
	color: var(--color-primary);
}

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--spacing-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Mobile Responsive (< 1024px)
 */
@media screen and (max-width: 1023px) {
	.wc-block-cart.wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
	}
	
	.wc-block-cart__sidebar {
		margin-top: var(--spacing-xl);
		position: relative;
		top: auto;
	}
	
	.wc-block-cart-item__image img {
	width: 80px;
		height: 80px;
	}
	
	.wc-block-cart-items__row td {
		padding: var(--spacing-md) var(--spacing-xs);
		font-size: 14px;
	}
}

/**
 * Tablet Optimization: Expand cart content width for better space utilization
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Override WooCommerce Blocks default width restriction for full-width cart area */
	.wc-block-cart__main {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/**
 * Mobile Fix: Prevent image and product info overlap
 */
@media screen and (max-width: 767px) {
	/* Remove right padding from image cell to prevent grid overflow */
	.wc-block-cart-items__row td.wc-block-cart-item__image {
		padding-right: 0 !important;
	}
	
	/* Add left margin to product info to create spacing from image */
	.wc-block-cart-items__row td.wc-block-cart-item__product {
		margin-left: 28px !important;
		padding-left: 0 !important;
	}
}

/**
 * Checkout Page
 */
.woocommerce-checkout .woocommerce {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/**
 * Checkout Page H1 Title - Match Cart Page Style
 * Keep consistent with Cart page for unified Nordic minimalist aesthetic
 */
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.entry-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	text-align: left;
	margin: var(--spacing-lg) 0 var(--spacing-md); /* 32px top, 16px bottom - matches Cart */
	color: var(--color-primary);
}

/**
 * Checkout Page H2 Section Titles - Match Privacy/Cookie Policy Style
 * Applied to: Contact information, Billing address, Payment options, Order summary
 * Same style as GDPR pages for clarity and consistency
 * WooCommerce Blocks uses specific class names: wc-block-components-checkout-step__title
 */
.woocommerce-checkout h2,
.woocommerce-checkout .woocommerce h2,
.woocommerce form.checkout h2,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--font-primary) !important; /* Inter - clean and readable */
	font-size: 1.75rem !important; /* 28px */
	font-weight: 600 !important;
	margin-top: 64px !important;
	margin-bottom: 24px !important;
	padding-top: 0 !important;
	color: var(--color-primary) !important;
	letter-spacing: -0.01em !important;
	border-top: none !important;
	text-align: left !important;
	font-style: normal !important; /* Override any italic */
}

/* First H2 - Reduced top margin for better flow after H1 */
.woocommerce-checkout h2:first-of-type,
.woocommerce form.checkout h2:first-of-type,
.wc-block-components-checkout-step__title:first-of-type {
	margin-top: 48px !important;
}

/* ============================================================================
   ORDER SUMMARY - GLOBAL NORDIC MINIMALIST OPTIMIZATION
   ============================================================================ */

/**
 * 1. Container & Borders - Sharp Corners
 */
.wc-block-components-order-summary,
.wc-block-components-order-summary-item,
.wc-block-components-totals-coupon,
.wc-block-components-totals-wrapper {
	border-radius: 0 !important;
}

/* Order Summary - Overall padding and spacing */
.wc-block-components-order-summary {
	padding: 24px !important;
}

/**
 * 2. Product Images - Sharp Corners & Responsive Sizing
 */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	border-radius: 0 !important;
	object-fit: cover !important;
}

/* Mobile: 60x60px */
@media (max-width: 767px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		width: 60px !important;
		max-width: 60px !important;
		height: 60px !important;
	}
}

/* Tablet: 64x64px */
@media (min-width: 768px) and (max-width: 1023px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		width: 64px !important;
		max-width: 64px !important;
		height: 64px !important;
	}
}

/* Desktop: 72x72px */
@media (min-width: 1024px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
		width: 72px !important;
		max-width: 72px !important;
		height: 72px !important;
	}
}

/**
 * 3. Typography Hierarchy - Product Name (Primary)
 */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--font-primary) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--color-text-main) !important;
	margin-top: 0 !important;
	margin-bottom: 4px !important;
}

/**
 * 4. Typography Hierarchy - Product Attributes (Secondary)
 */
.wc-block-components-order-summary-item__description dl,
.wc-block-components-order-summary-item__description .wc-item-meta {
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--color-text-secondary) !important;
	margin-top: 6px !important;
	line-height: 1.5 !important;
}

/* Attribute labels (e.g., "FRAME MATERIAL:") */
.wc-block-components-order-summary-item__description dt {
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	display: inline !important;
}

/* Attribute values (e.g., "Wood") */
.wc-block-components-order-summary-item__description dd {
	font-weight: 500 !important;
	margin-left: 4px !important;
	display: inline !important;
}

/**
 * 5. Price Hierarchy
 */
/* Individual product price (if shown) */
.wc-block-components-order-summary-item__individual-price {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--color-text-secondary) !important;
}

/**
 * Checkout Quantity Display - PHP Data Layer Approach
 * Optimized styling for "QUANTITY: 2" metadata
 */

/* Hide quantity badge on checkout (replaced by metadata) */
.wc-block-components-order-summary-item__quantity {
	display: none !important;
}

/* Hide product short descriptions on checkout (only show quantity + variations) */
.wc-block-components-product-metadata__description {
	display: none !important;
}

/* Style the "QUANTITY: 2" metadata */
.wc-block-components-product-metadata .wc-block-components-product-details {
	font-family: var(--font-primary) !important;
	font-size: 12px !important;
	margin-top: 4px !important;
	line-height: 1.6 !important;
}

/* "QUANTITY:" label */
.wc-block-components-product-metadata .wc-block-components-product-details__name {
	font-weight: 400 !important;
	color: #999999 !important; /* Light grey for label */
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* "2" value */
.wc-block-components-product-metadata .wc-block-components-product-details__value {
	font-weight: 500 !important;
	color: #666666 !important; /* Darker for the number */
	margin-left: 4px !important;
}

/* Product line total (right side) */
.wc-block-components-order-summary-item__total-price {
	font-family: var(--font-primary) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--color-text-main) !important;
}

/* Subtotal value */
.wc-block-components-totals-item__value {
	font-size: 16px !important;
	font-weight: 500 !important;
}

/* Total (final price) */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--color-primary) !important;
}

/**
 * 6. Spacing & Dividers
 */
.wc-block-components-order-summary-item {
	padding: 16px 0 !important;
	border-bottom: 1px solid #E5E5E5 !important;
}

.wc-block-components-order-summary-item:last-child {
	border-bottom: none !important;
}

/**
 * 8. Coupon Section - Sharp Corners
 */
.wc-block-components-totals-coupon-link {
	border-radius: 0 !important;
	font-family: var(--font-primary) !important;
	font-size: 14px !important;
	text-decoration: underline !important;
	color: var(--color-text-secondary) !important;
}

.wc-block-components-totals-coupon input {
	border-radius: 0 !important;
	border: 1px solid var(--color-border) !important;
	padding: 12px !important;
	font-family: var(--font-primary) !important;
}

.wc-block-components-totals-coupon button {
	border-radius: 0 !important;
}

.woocommerce form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-lg);
}

@media screen and (min-width: 1024px) {
	.woocommerce form.checkout {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce form.checkout .col2-set {
		grid-column: 1;
	}

	.woocommerce form.checkout .woocommerce-checkout-review-order {
		grid-column: 2;
		background: var(--color-bg-body);
		padding: var(--spacing-lg);
		border-radius: var(--radius-card);
	}
}

.woocommerce form .form-row {
	margin-bottom: var(--spacing-md);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: 500;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	width: 100%;
}

/**
 * Checkout Page Form Input Fields - Nordic Minimalist Style
 * Match My Account / Edit Address styling for consistency
 * Clean borders, generous padding, sharp corners
 */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce form.checkout input.input-text,
.woocommerce form.checkout textarea,
.woocommerce form.checkout select {
	width: 100%;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm); /* 0px - sharp corners */
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	background: var(--color-bg-white);
	color: var(--color-text-main);
	transition: all 0.2s ease;
	box-shadow: none;
}

/* Focus state - highlight with primary color */
.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus,
.woocommerce form.checkout input.input-text:focus,
.woocommerce form.checkout textarea:focus,
.woocommerce form.checkout select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05);
}

/* Placeholder styling */
.woocommerce-checkout .woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout .woocommerce form .form-row textarea::placeholder,
.woocommerce form.checkout input.input-text::placeholder,
.woocommerce form.checkout textarea::placeholder {
	color: #999999;
	opacity: 1;
}

/* Disabled state */
.woocommerce-checkout .woocommerce form .form-row input.input-text:disabled,
.woocommerce-checkout .woocommerce form .form-row textarea:disabled,
.woocommerce-checkout .woocommerce form .form-row select:disabled,
.woocommerce form.checkout input.input-text:disabled,
.woocommerce form.checkout textarea:disabled,
.woocommerce form.checkout select:disabled {
	background: var(--color-bg-body);
	color: var(--color-text-secondary);
	cursor: not-allowed;
	opacity: 0.6;
}

/* Select dropdown styling */
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce form.checkout select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 48px;
}

/**
 * WooCommerce Blocks Checkout - Nordic Minimalist Input Fields
 * WooCommerce Blocks uses different selectors and requires !important to override
 * Apply to: Contact information, Billing address fields
 * Note: WooCommerce Blocks uses floating labels, so padding needs to accommodate label space
 */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input textarea,
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout textarea {
	width: 100% !important;
	padding: 24px 16px 8px !important; /* Top padding for floating label, bottom minimal */
	border: 1px solid var(--color-border) !important;
	border-radius: 0 !important; /* Sharp corners - Nordic style */
	font-size: var(--font-size-base) !important;
	font-family: var(--font-primary) !important;
	background: var(--color-bg-white) !important;
	color: var(--color-text-main) !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
}

/* WooCommerce Blocks - Focus state */
.wc-block-components-text-input input[type="text"]:focus,
.wc-block-components-text-input input[type="email"]:focus,
.wc-block-components-text-input input[type="tel"]:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-checkout input[type="text"]:focus,
.wc-block-checkout input[type="email"]:focus,
.wc-block-checkout input[type="tel"]:focus,
.wc-block-checkout textarea:focus {
	outline: none !important;
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05) !important;
}

/**
 * Form Validation - Error States
 * Clear visual feedback for validation errors
 */
/* Error state - Input fields */
.wc-block-checkout input.has-error,
.wc-block-checkout textarea.has-error,
.wc-block-checkout select.has-error,
.wc-block-components-text-input.has-error input,
.wc-block-components-combobox.has-error input,
.woocommerce-checkout input.woocommerce-invalid,
.woocommerce-checkout textarea.woocommerce-invalid,
.woocommerce-checkout select.woocommerce-invalid {
	border-color: #DC2626 !important;
	background-color: rgba(220, 38, 38, 0.02) !important;
}

/* Error message text */
.wc-block-components-validation-error,
.woocommerce-error,
.woocommerce-invalid-required-field,
.wc-block-components-text-input .wc-block-components-validation-error {
	color: #DC2626 !important;
	font-family: var(--font-primary) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	margin-top: 6px !important;
	line-height: 1.4 !important;
	display: block !important;
}

/* Error icon (if present) */
.wc-block-components-validation-error::before {
	content: "⚠ " !important;
	margin-right: 4px !important;
}

/* Error state focus - maintain red border */
.wc-block-checkout input.has-error:focus,
.wc-block-checkout textarea.has-error:focus,
.wc-block-checkout select.has-error:focus,
.woocommerce-checkout input.woocommerce-invalid:focus,
.woocommerce-checkout textarea.woocommerce-invalid:focus {
	border-color: #DC2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* WooCommerce Blocks - Select/Combobox styling */
.wc-block-components-combobox,
.wc-block-components-combobox input,
.wc-block-checkout select {
	border-radius: 0 !important;
	border: 1px solid var(--color-border) !important;
	padding: 16px !important;
	font-family: var(--font-primary) !important;
	background: var(--color-bg-white) !important;
}

/**
 * WooCommerce Blocks - Country/Region Select with Floating Label
 * Fix: Remove height restriction and adjust padding to match email input
 * This allows the select box to accommodate the floating label properly
 * Using multiple selectors for maximum specificity
 */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select,
select.wc-blocks-components-select__select {
	height: auto !important; /* Remove fixed height */
	min-height: 50px !important; /* Ensure minimum height matches other inputs */
	padding: 24px 16px 8px !important; /* Match email input: top padding for floating label */
}

/**
 * WooCommerce Blocks - Checkbox Styling (Sharp Corners)
 * Apply to: Newsletter checkbox, Terms checkbox, etc.
 */
.wc-block-checkout input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border: 1px solid #CCCCCC !important;
	border-radius: 0 !important; /* Sharp corners - Nordic style */
	background: transparent !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* Checkbox hover state */
.wc-block-checkout input[type="checkbox"]:hover,
.wc-block-components-checkbox input[type="checkbox"]:hover,
.woocommerce-checkout input[type="checkbox"]:hover {
	border-color: #999999 !important;
}

/* Checkbox checked state */
.wc-block-checkout input[type="checkbox"]:checked,
.wc-block-components-checkbox input[type="checkbox"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
	background-color: #1A1A1A !important;
	border-color: #1A1A1A !important;
}

/* Checkmark icon when checked */
.wc-block-checkout input[type="checkbox"]:checked::after,
.wc-block-components-checkbox input[type="checkbox"]:checked::after,
.woocommerce-checkout input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 5px !important;
	top: 2px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #FFFFFF !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

/* Checkbox focus state */
.wc-block-checkout input[type="checkbox"]:focus,
.wc-block-components-checkbox input[type="checkbox"]:focus,
.woocommerce-checkout input[type="checkbox"]:focus {
	outline: 2px solid #E5E5E5 !important;
	outline-offset: 2px !important;
}

/**
 * Checkout Page - Sharp Corners for All Container Boxes
 * Apply to: Payment option boxes, Billing address card, Payment accordion
 * Override the default 4px border-radius to maintain Nordic minimalist style
 */
.wc-block-components-radio-control__option,
.wc-block-components-address-card,
.wc-block-components-radio-control-accordion-option {
	border-radius: 0 !important;
}

/**
 * Billing Address Card - Vertical Center Alignment
 * Center align the Edit button with address content for better visual balance
 */
.wc-block-components-address-card {
	align-items: center !important;
}

/**
 * Place Order Button - Nordic Invert Style
 * Match site standard: Black background with white text, inverts on hover with lift effect
 */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
	/* Nordic Invert Style - Default State */
	background: var(--color-primary) !important;
	background-color: var(--color-primary) !important;
	color: #FFFFFF !important;
	border: 2px solid var(--color-primary) !important;
	border-radius: 0 !important;
	
	/* Typography - Match site standard */
	padding: 1em 3em !important;
	font-family: var(--font-primary) !important;
	font-size: var(--font-size-base) !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	
	/* Animation */
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            border-color var(--transition-base),
	            transform var(--transition-base) !important;
}

/* Hover State - Nordic Invert Effect */
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-checkout-place-order-button:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	transform: translateY(-2px) !important;
}

/* Active State - Remove lift */
.wc-block-components-checkout-place-order-button:active,
button.wc-block-components-checkout-place-order-button:active {
	transform: translateY(0) !important;
}

/**
 * Checkout Page Layout - Tablet Responsive (768-1023px)
 * 50/50 balanced layout for better Order Summary visibility
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Main checkout form - 50% width */
	.wc-block-components-sidebar-layout .wc-block-components-main {
		width: 50% !important;
		max-width: 50% !important;
	}
	
	/* Sidebar Order Summary - adapt to remaining space */
	.wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.wc-block-checkout__sidebar {
		width: auto !important;
		max-width: none !important;
		flex: 1 !important; /* Take remaining space */
	}
	
	/* Product details - adjust spacing for tablet */
	.wc-block-components-order-summary-item__description {
		margin-left: var(--spacing-md) !important;
		flex: 1 !important;
	}
}

/**
 * Checkout Page Layout - Desktop Responsive (≥1024px)
 * 55/45 balanced layout for optimal content distribution
 */
@media screen and (min-width: 1024px) {
	/* Main checkout form - 55% width */
	.wc-block-components-sidebar-layout .wc-block-components-main {
		width: 55% !important;
		max-width: 55% !important;
	}
	
	/* Sidebar Order Summary - adapt to remaining space (~45%) + Sticky positioning */
	.wc-block-components-sidebar-layout .wc-block-components-sidebar,
	.wc-block-checkout__sidebar {
		width: auto !important;
		max-width: none !important;
		flex: 1 !important; /* Take remaining ~45% space */
		position: sticky !important;
		top: 120px !important; /* Header height + spacing */
		align-self: flex-start !important;
		max-height: calc(100vh - 140px) !important; /* Prevent overflow */
		overflow-y: auto !important; /* Allow scrolling if content is too long */
	}
	
	/* Product details - more generous spacing for desktop */
	.wc-block-components-order-summary-item__description {
		margin-left: 20px !important; /* Increased from 16px for desktop */
		flex: 1 !important;
	}
	
	/* Order Summary - Enhanced padding for desktop */
	.wc-block-components-order-summary {
		padding: 32px !important; /* Increased from 24px */
	}
	
	/* Product items - More vertical breathing space */
	.wc-block-components-order-summary-item {
		padding: 20px 0 !important; /* Increased from 16px */
	}
	
	/* Product name - Slightly larger for desktop */
	.wc-block-components-order-summary-item__description .wc-block-components-product-name {
		font-size: 17px !important; /* Up from 16px */
	}
	
	/* Product attributes - Better readability on larger screens */
	.wc-block-components-order-summary-item__description dl,
	.wc-block-components-order-summary-item__description .wc-item-meta {
		font-size: 14px !important; /* Up from 13px */
		margin-top: 8px !important; /* Increased from 6px */
	}
	
	/* Price - Larger and more prominent on desktop */
	.wc-block-components-order-summary-item__total-price {
		font-size: 18px !important; /* Up from 16px */
	}
	
	/* Subtotal - Enhanced size */
	.wc-block-components-totals-item__value {
		font-size: 17px !important; /* Up from 16px */
	}
	
	/* Total (final price) - More prominent */
	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		font-size: 22px !important; /* Up from 20px */
	}
	
	/**
	 * Sticky Sidebar - Scrollbar styling (when content overflows)
	 * Nordic minimalist scrollbar design
	 */
	.wc-block-checkout__sidebar::-webkit-scrollbar {
		width: 6px;
	}
	
	.wc-block-checkout__sidebar::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.wc-block-checkout__sidebar::-webkit-scrollbar-thumb {
		background: #E5E5E5;
		border-radius: 0; /* Sharp corners */
	}
	
	.wc-block-checkout__sidebar::-webkit-scrollbar-thumb:hover {
		background: #CCCCCC;
	}
}

/* ============================================================================
   MY ACCOUNT PAGES - NORDIC MINIMALIST DESIGN
   ============================================================================ */

/**
 * My Account Login/Register Page - Nordic Two-Column Layout
 * Inspired by: COS, HAY, Byredo
 */

/* Hide the global "My account" page title only on login/register page (logged-out state) */
/* Use :not() to exclude logged-in dashboard and other subpages */
.woocommerce-account:not(:has(.woocommerce-MyAccount-navigation)) .entry-title {
	display: none;
}

/* Style H1 titles for logged-in My Account subpages (Addresses, Orders, etc.) */
/* Only apply when navigation is present (logged-in state) */
.woocommerce-account:has(.woocommerce-MyAccount-navigation) .entry-title {
	font-family: var(--font-display); /* Playfair Display */
	font-size: 3rem; /* 48px */
	font-weight: 400;
	font-style: italic;
	color: var(--color-primary); /* #1A1A1A */
	margin-top: 0;
	margin-bottom: 48px;
	letter-spacing: -0.01em;
	text-align: left;
	line-height: 1.2;
}

/* Add breathing space at bottom of content area (distance to footer) */
.woocommerce-account .site-main {
	margin-bottom: 120px; /* Generous space before footer */
}

/* Two-column layout for Login + Register (logged-out state) */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xxl); /* 48px */
	max-width: 100%;
	margin: 0;
}

@media screen and (min-width: 768px) {
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr 1fr;
		gap: 64px; /* Generous gap between columns */
	}
}

/* Login and Register columns */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	width: 100%;
	max-width: none;
	/* Flexbox for equal height columns */
	display: flex;
	flex-direction: column;
}

/* Replace "Login" with "Welcome Back" - Only on login/register page */
/* Exclude .woocommerce-Address to avoid affecting Addresses page */
.woocommerce-account .u-columns.col2-set .u-column1:not(.woocommerce-Address) h2 {
	position: relative;
	text-indent: -9999px; /* Hide original text completely */
	overflow: hidden;
	margin-top: 80px; /* Add breathing space above */
	margin-bottom: 48px; /* Space below heading */
}

.woocommerce-account .u-columns.col2-set .u-column1:not(.woocommerce-Address) h2::before {
	content: "Welcome Back";
	position: absolute;
	left: 0;
	top: 0;
	text-indent: 0; /* Reset text indent */
	font-size: 2rem; /* 32px */
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--color-primary);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Replace "Register" with "Join the Collection" - Only on login/register page */
/* Exclude .woocommerce-Address to avoid affecting Addresses page */
.woocommerce-account .u-columns.col2-set .u-column2:not(.woocommerce-Address) h2 {
	position: relative;
	text-indent: -9999px; /* Hide original text completely */
	overflow: hidden;
	margin-top: 80px; /* Add breathing space above */
	margin-bottom: 48px; /* Space below heading */
}

.woocommerce-account .u-columns.col2-set .u-column2:not(.woocommerce-Address) h2::before {
	content: "Join the Collection";
	position: absolute;
	left: 0;
	top: 0;
	text-indent: 0; /* Reset text indent */
	font-size: 2rem; /* 32px */
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--color-primary);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Login form styling */
.woocommerce-account .woocommerce-form-login {
	max-width: none; /* Full column width */
	margin: 0;
	padding: 0;
	/* Flexbox to fill column height and align button to bottom */
	display: flex;
	flex-direction: column;
	flex: 1; /* Take remaining space in column */
}

/* Form row spacing */
.woocommerce-account .woocommerce-form-login .form-row {
	margin-bottom: var(--spacing-lg); /* 24px */
}

/* Input labels - Minimalist art label aesthetic */
.woocommerce-account .woocommerce-form-login label {
	display: block;
	font-family: var(--font-primary); /* Inter */
	font-size: 11px; /* Smaller for subtle refinement */
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* 1.1px - Generous spacing for elegance */
	color: #999999; /* Lighter gray for subtlety */
	margin-bottom: 12px; /* More breathing space */
}

/* Required asterisk styling */
.woocommerce-account .woocommerce-form-login .required {
	color: #DC2626;
	margin-left: 2px;
}

/* Input fields - Ultra-minimal with bottom border only */
.woocommerce-account .woocommerce-form-login input.input-text {
	width: 100%;
	padding: 12px 0; /* Vertical padding only, no horizontal */
	border: none; /* Remove all borders */
	border-bottom: 1px solid var(--color-border); /* #E5E5E5 - Only bottom line */
	border-radius: 0;
	background: transparent; /* Transparent background for minimalism */
	font-family: var(--font-primary);
	font-size: var(--font-size-base); /* 16px */
	color: var(--color-text-main);
	transition: border-bottom-color 0.3s ease; /* Smooth transition */
	box-shadow: none;
}

/* Input focus state - Bottom line darkens smoothly */
.woocommerce-account .woocommerce-form-login input.input-text:focus {
	outline: none;
	border-bottom-color: var(--color-primary); /* #1A1A1A - Dark charcoal */
	background: transparent; /* Keep transparent */
	box-shadow: none;
}

/* Password field container - Position relative for button */
.woocommerce-account .woocommerce-form-login .password-input {
	position: relative;
}

/* Show password button - Nordic minimal style */
.woocommerce-account .woocommerce-form-login .show-password-input,
.woocommerce-account .woocommerce-form-login button[type="button"] {
	position: absolute;
	right: 0; /* Align to right edge (no input padding) */
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 8px 0; /* No horizontal padding */
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: 11px; /* Match label size */
	font-weight: 500;
	color: #999999; /* Low contrast gray */
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Match label spacing */
	transition: color 0.2s ease;
	min-width: auto;
	width: auto;
	height: auto;
}

/* Add "SHOW" text via CSS if button is empty */
.woocommerce-account .woocommerce-form-login button[type="button"]:empty::before {
	content: "SHOW";
}

.woocommerce-account .woocommerce-form-login .show-password-input:hover,
.woocommerce-account .woocommerce-form-login button[type="button"]:hover {
	color: var(--color-primary); /* Darken on hover */
}

.woocommerce-account .woocommerce-form-login .show-password-input:focus,
.woocommerce-account .woocommerce-form-login button[type="button"]:focus {
	outline: none;
}

/* Add padding to password input to prevent text overlap with button */
.woocommerce-account .woocommerce-form-login .password-input input[type="password"],
.woocommerce-account .woocommerce-form-login .password-input input[type="text"] {
	padding-right: 60px; /* Space for "SHOW" button */
}

/* Remember me checkbox row - Push to bottom for button alignment */
.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	margin-top: auto; /* Push this row (containing both remember me and button) to bottom */
}

/* Remember me checkbox row */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
	margin: 24px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme label {
	font-size: 13px; /* Reduced for lower visual weight */
	text-transform: none;
	letter-spacing: normal;
	color: #999999; /* Lighter gray - auxiliary color */
	margin-bottom: 0;
	cursor: pointer;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* Log in button - Nordic Invert Style (Match Add to Cart button exactly) */
.woocommerce-account .woocommerce-form-login .woocommerce-Button,
.woocommerce-account .woocommerce-form-login button[type="submit"] {
	/* Layout - Full Width */
	display: block;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 0;
	text-align: center;
	
	/* Nordic Invert Style - Default State */
	background: var(--color-primary);
	color: #FFFFFF;
	border: 2px solid var(--color-primary);
	
	/* Typography - Match Add to Cart exactly */
	padding: 1em 3em;
	font-size: var(--font-size-base);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	
	/* Animation - Match Add to Cart */
	cursor: pointer;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base);
}

/* Button hover state - Invert effect (Match Add to Cart & Place Order buttons) */
.woocommerce-account .woocommerce-form-login .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-login button[type="submit"]:hover {
	background: transparent;
	color: var(--color-primary);
	transform: translateY(-2px);
	/* Removed box-shadow to match Add to Cart & Place Order buttons */
}

/* Button active state */
.woocommerce-account .woocommerce-form-login .woocommerce-Button:active,
.woocommerce-account .woocommerce-form-login button[type="submit"]:active {
	transform: translateY(0);
}

/* Form positioning context for Lost password link */
.woocommerce-account .woocommerce-form-login {
	position: relative;
	/* Define positioning variables for Lost password link calculation */
	--username-input-height: 72px; /* Username row total height */
	--row-gap: 32px; /* Gap between Username and Password rows */
	--password-label-offset: 32px; /* Additional offset from flexbox/spacing */
	--lost-password-top: calc(var(--username-input-height) + var(--row-gap) + var(--password-label-offset)); /* Dynamic calculation: 136px */
}

/* Lost password link - Positioned next to Password label */
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
	position: absolute;
	top: var(--lost-password-top); /* Dynamically calculated position */
	right: 0;
	margin: 0;
	text-align: right;
	line-height: 17.6px; /* Match label line height exactly */
	font-size: 11px; /* Match label font size */
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a {
	font-family: var(--font-primary);
	font-size: 11px; /* Match label size */
	font-weight: 500; /* Match label weight */
	text-transform: uppercase; /* Match label style */
	letter-spacing: 0.1em; /* Match label letter-spacing */
	color: #999999; /* Match label color - auxiliary grey */
	text-decoration: none;
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a:hover {
	color: var(--color-primary);
	text-decoration: none; /* Keep clean */
}

/* Hide default WooCommerce error/info messages styling for cleaner look */
.woocommerce-account .woocommerce-form-login .woocommerce-error,
.woocommerce-account .woocommerce-form-login .woocommerce-message {
	margin-bottom: var(--spacing-lg);
}

/**
 * Register Form - Match Login styling
 */

/* Register form styling */
.woocommerce-account .woocommerce-form-register {
	max-width: none; /* Full column width */
	margin: 0;
	padding: 0;
	/* Flexbox to fill column height and align button to bottom */
	display: flex;
	flex-direction: column;
	flex: 1; /* Take remaining space in column */
}

/* Form row spacing */
.woocommerce-account .woocommerce-form-register .form-row {
	margin-bottom: var(--spacing-lg); /* 24px */
}

/* Input labels - Minimalist art label aesthetic (same as Login) */
.woocommerce-account .woocommerce-form-register label {
	display: block;
	font-family: var(--font-primary); /* Inter */
	font-size: 11px; /* Smaller for subtle refinement */
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* 1.1px - Generous spacing for elegance */
	color: #999999; /* Lighter gray for subtlety */
	margin-bottom: 12px; /* More breathing space */
}

/* Required asterisk */
.woocommerce-account .woocommerce-form-register .required {
	color: #DC2626;
	margin-left: 2px;
}

/* Input fields - Ultra-minimal with bottom border only (same as Login) */
.woocommerce-account .woocommerce-form-register input.input-text {
	width: 100%;
	padding: 12px 0; /* Vertical padding only, no horizontal */
	border: none; /* Remove all borders */
	border-bottom: 1px solid var(--color-border); /* #E5E5E5 - Only bottom line */
	border-radius: 0;
	background: transparent; /* Transparent background for minimalism */
	font-family: var(--font-primary);
	font-size: var(--font-size-base); /* 16px */
	color: var(--color-text-main);
	transition: border-bottom-color 0.3s ease; /* Smooth transition */
	box-shadow: none;
}

/* Input focus state - Bottom line darkens smoothly */
.woocommerce-account .woocommerce-form-register input.input-text:focus {
	outline: none;
	border-bottom-color: var(--color-primary); /* #1A1A1A - Dark charcoal */
	background: transparent; /* Keep transparent */
	box-shadow: none;
}

/* Privacy policy text - Clean minimalist footnote (PHP-powered, no JS flicker) */
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text {
	background-color: transparent !important; /* Remove grey background */
	border: none !important; /* Remove border */
	padding: 0 !important; /* Remove padding */
	margin-top: 8px; /* Tight text info grouping - related content */
	margin-bottom: 0; /* Let newsletter checkbox control spacing below */
	font-family: var(--font-primary); /* Inter */
	font-size: 14px; /* Improved readability - unified with password notice */
	line-height: 1.6;
	color: #999999; /* Auxiliary grey - system information level */
	text-align: left; /* Left-aligned */
}

/* Privacy policy link styling */
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text a,
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-link {
	color: #666666; /* Medium grey for link */
	text-decoration: underline; /* Underline for accessibility */
	text-underline-offset: 3px; /* Subtle offset */
	transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-text a:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-link:hover {
	color: var(--color-primary); /* Darken on hover */
}

/* Password setup notice - Clean info style */
.woocommerce-account .woocommerce-form-register p:not(.form-row):not(.woocommerce-privacy-policy-text) {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 1.6;
	color: #666666;
	margin: 16px 0 24px;
	padding: 12px 16px;
	background: #F5F5F5;
	border-left: 3px solid var(--color-primary);
}

/* Register button container - Push to bottom for alignment with Login button */
.woocommerce-account .woocommerce-form-register .form-row:has(button[type="submit"]) {
	margin-top: auto; /* Push button row to bottom */
}

/* Register button - Match Add to Cart button exactly */
.woocommerce-account .woocommerce-form-register .woocommerce-Button,
.woocommerce-account .woocommerce-form-register button[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0 !important;
	text-align: center;
	
	/* Nordic Invert Style */
	background: var(--color-primary);
	color: #FFFFFF;
	border: 2px solid var(--color-primary);
	
	/* Typography - Match Add to Cart exactly */
	padding: 1em 3em;
	font-size: var(--font-size-base);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	
	/* Animation - Match Add to Cart */
	cursor: pointer;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base);
}

/* Register button hover (Match Add to Cart & Place Order buttons) */
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover,
.woocommerce-account .woocommerce-form-register button[type="submit"]:hover {
	background: transparent;
	color: var(--color-primary);
	transform: translateY(-2px);
	/* Removed box-shadow to match Add to Cart & Place Order buttons */
}

/* Register button active */
.woocommerce-account .woocommerce-form-register .woocommerce-Button:active,
.woocommerce-account .woocommerce-form-register button[type="submit"]:active {
	transform: translateY(0);
}

/* ==========================================================================
   # Newsletter Subscription Checkbox (Registration Form)
   ========================================================================== */

/* Hide gray info boxes - They break the gallery aesthetic */
.woocommerce-account .woocommerce-form-register .woocommerce-info {
	display: none;
}

/* Newsletter subscription checkbox container */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe {
	margin-top: 35px; /* Independent module spacing - architectural breathing room */
	margin-bottom: 24px; /* Match Remember me spacing for visual consistency */
	padding: 0;
	border: none;
	background: none;
}

/* Checkbox label wrapper */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe label {
	display: flex;
	align-items: flex-start; /* Align checkbox to top of multi-line text */
	gap: 12px; /* Space between checkbox and text */
	cursor: pointer;
	margin-bottom: 0;
}

/* Custom checkbox - Replace browser default */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px; /* Prevent shrinking */
	border: 1px solid #CCCCCC; /* Slightly darker gray for better visibility */
	border-radius: 0; /* Sharp corners for minimal aesthetic */
	background: transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0;
	padding: 0;
	position: relative;
	top: 2px; /* Optical alignment with text */
}

/* Checkbox hover state */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe input[type="checkbox"]:hover {
	border-color: #999999; /* Slightly darker on hover */
}

/* Checkbox checked state */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe input[type="checkbox"]:checked {
	background-color: #1A1A1A; /* Dark charcoal fill */
	border-color: #1A1A1A;
}

/* Checkmark icon when checked */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Checkbox focus state - For keyboard accessibility */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe input[type="checkbox"]:focus {
	outline: 2px solid #E5E5E5;
	outline-offset: 2px;
}

/* Label text styling */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe .kokonna-newsletter-label-text {
	font-family: var(--font-primary); /* Inter */
	font-size: 16px; /* Larger - this is actionable content requiring user decision */
	font-weight: 400;
	line-height: 1.5; /* Better for multi-line text */
	color: #666666; /* Medium grey - stronger than system info, softer than body text */
	text-transform: none; /* Override label uppercase */
	letter-spacing: normal; /* Override label letter-spacing */
}

/* Highlight "30 Free AI Credits" */
.woocommerce-account .woocommerce-form-register .kokonna-newsletter-subscribe .kokonna-newsletter-label-text strong {
	font-weight: 500; /* Medium weight for emphasis */
	color: var(--color-primary); /* Dark charcoal for visual focus */
}

/* ==========================================================================
   # Weaken Privacy & Info Text (Reduce Visual Noise)
   ========================================================================== */

/* Note: Privacy policy text styles are now defined in the main section above (line ~3271)
   to avoid duplication and ensure consistent PHP-powered rendering without JS flicker */

/* Password info notice - Reduce prominence */
.woocommerce-account .woocommerce-form-register p:not(.form-row):not(.woocommerce-privacy-policy-text):not(.kokonna-newsletter-subscribe) {
	font-size: 14px; /* Improved readability - unified with privacy policy */
	line-height: 1.6;
	color: #999999; /* Auxiliary grey - system information level */
	margin: 12px 0; /* Tighter text info grouping */
	padding: 0; /* Remove any default padding */
	background: none; /* No background */
	border: none; /* No borders */
}

/**
 * My Account Layout Structure (Logged-in state)
 * Two-column layout: Navigation sidebar + Content area
 */

/* Desktop layout - Grid with navigation sidebar */
@media screen and (min-width: 768px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr); /* minmax(0, 1fr) allows content to shrink */
		gap: var(--spacing-lg);
	}
}

/* Tablet-specific optimizations (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Optimize content area padding for better width utilization */
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: var(--spacing-lg) !important; /* 32px instead of default 80px - more content space */
	}
	
	.woocommerce-MyAccount-navigation {
		padding: var(--spacing-lg) !important; /* 32px for consistency */
	}
	
	/* Reduce grid gap to maximize content area */
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		gap: var(--spacing-md); /* 16px instead of 32px */
	}
	
	/* Orders Table - Card Layout (same as mobile, but with optimized spacing) */
	.woocommerce-account .woocommerce-orders-table {
		display: block;
		width: 100%;
	}
	
	.woocommerce-account .woocommerce-orders-table thead {
		display: none;
	}
	
	.woocommerce-account .woocommerce-orders-table tbody {
		display: block;
		width: 100%;
	}
	
	.woocommerce-account .woocommerce-orders-table tr {
		display: block;
		width: 100%;
		margin-bottom: var(--spacing-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		padding: 20px 24px; /* Tablet: More spacious than mobile (16px) */
		background: var(--color-bg-white);
		box-sizing: border-box;
	}
	
	/* Tablet card layout: Ensure consistent row height for both th and td */
	.woocommerce-account .woocommerce-orders-table th,
	.woocommerce-account .woocommerce-orders-table td {
		display: block;
		text-align: right;
		padding: 16px 0; /* Fixed 16px padding top/bottom for consistent height */
		margin-bottom: 4px;
		border-bottom: none;
		font-weight: 400; /* Regular weight for all content */
		min-height: 26px; /* Ensure minimum content height (58px total with padding) */
		box-sizing: content-box; /* Padding adds to height */
	}
	
	/* Force order link to float right for proper alignment */
	.woocommerce-account .woocommerce-orders-table th a {
		float: right;
	}
	
	/* Show labels for both th and td */
	.woocommerce-account .woocommerce-orders-table th::before,
	.woocommerce-account .woocommerce-orders-table td::before {
		content: attr(data-title) !important;
		float: left !important;
		font-weight: 600 !important;
		color: var(--color-primary) !important;
		display: block !important; /* Force display - float makes it block anyway */
	}
	
	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		text-align: left;
		margin-top: var(--spacing-sm);
	}
	
	/* Addresses Page - Single column layout on tablet (same as mobile) */
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr !important; /* Force single column on tablet */
	}
}

/* Desktop - Optimize spacing for better content display (≥1024px) */
@media screen and (min-width: 1024px) {
	/* No padding on main - each component controls its own padding */
	
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 40px !important; /* 40px - balanced spacing for 1024px+ screens */
	}
	
	.woocommerce-MyAccount-navigation {
		padding: 40px !important; /* 40px for consistency with content area */
	}
	
	/* Reset orders table to standard table layout */
	.woocommerce-account .woocommerce-orders-table {
		display: table;
	}
	
	.woocommerce-account .woocommerce-orders-table thead {
		display: table-header-group;
	}
	
	.woocommerce-account .woocommerce-orders-table tbody {
		display: table-row-group;
	}
	
	.woocommerce-account .woocommerce-orders-table tr {
		display: table-row;
		padding: 0;
		margin-bottom: 0;
		border: none;
		border-radius: 0;
		background: transparent;
	}
	
	.woocommerce-account .woocommerce-orders-table td {
		display: table-cell;
		text-align: left;
		padding: 16px;
		margin-bottom: 0;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.woocommerce-account .woocommerce-orders-table td::before {
		content: none;
	}
	
	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		text-align: left;
		margin-top: 0;
	}
}

/* Logged-out layout - No grid, let .u-columns handle layout */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
	max-width: 100%;
}

/**
 * Navigation Sidebar - Nordic Gallery Index Style
 */
.woocommerce-MyAccount-navigation {
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 40px; /* Increased from 32px for more breathing space */
	height: fit-content;
	position: sticky;
	top: calc(var(--header-height) + var(--spacing-lg));
}

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

.woocommerce-MyAccount-navigation li {
	margin: 6px 0; /* Increased vertical spacing between items */
	border-bottom: none; /* Remove bottom borders for cleaner look */
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 18px 16px; /* Increased from 16px 8px for more space */
	color: var(--color-text-secondary);
	text-decoration: none;
	font-family: var(--font-primary); /* Explicitly set Inter font */
	font-size: 13px !important; /* Reduced from 16px for refined look */
	font-weight: 500 !important; /* Slightly stronger weight */
	letter-spacing: 0.1em !important; /* Key change: expanded letter spacing */
	text-transform: uppercase !important; /* Gallery index style */
	transition: all 0.2s ease;
	border-radius: var(--radius-sm);
}

.woocommerce-MyAccount-navigation a:hover {
	color: var(--color-primary);
	background: var(--color-bg-body);
	transform: translateX(4px);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-primary);
	font-weight: 600 !important; /* Stronger for active state */
	background: var(--color-bg-body);
}

/* Hide Downloads tab - No digital products for physical frame business */
.woocommerce-MyAccount-navigation-link--downloads {
	display: none !important;
}

/* Log out link styling - De-emphasized, no red warning color */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 16px; /* Add top spacing to separate from other items */
	padding-top: 16px; /* Additional visual separation */
	border-top: 1px solid rgba(0, 0, 0, 0.06); /* Subtle divider line */
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #999999 !important; /* Muted gray instead of red */
	font-weight: 400 !important; /* Lighter weight to de-emphasize */
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #F5F5F5 !important; /* Subtle gray instead of pink */
	color: #666666 !important; /* Darker gray on hover, not red */
}

/**
 * My Account Content Area
 */
.woocommerce-MyAccount-content {
	background: var(--color-bg-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--spacing-xxl);
	min-height: 400px;
	min-width: 0; /* Critical: Allow content to shrink below min-content width */
}

/* Dashboard Welcome Message - Nordic Gallery Minimalist Style */
/* Higher specificity selector to override WooCommerce defaults */
/* Using Playfair Display Italic for artistic gallery aesthetics */
.woocommerce-account .woocommerce-MyAccount-content .kokonna-welcome-text {
	font-family: var(--font-display) !important; /* Playfair Display - Artistic font */
	font-size: 32px !important;
	font-weight: 400 !important;
	font-style: italic !important; /* Italic for gallery poster feeling */
	line-height: 1.3 !important;
	letter-spacing: -0.015em !important;
	color: #1A1A1A !important; /* Deep black for elegant presence */
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding-bottom: var(--spacing-xxl) !important; /* 80px breathing space */
	border-bottom: none !important; /* Remove divider line for pure minimalism */
}

/* User name styling - Keep italic but subtle differentiation */
.woocommerce-account .woocommerce-MyAccount-content .kokonna-welcome-text strong {
	font-weight: 400 !important; /* Same weight for consistent flow */
	font-style: italic !important; /* Maintain italic */
	color: #000000 !important; /* Pure black for name emphasis */
}

/* Radical Minimalism: Hide ALL default WooCommerce dashboard paragraphs except our custom welcome */
.woocommerce-account .woocommerce-MyAccount-content > p:not(.kokonna-welcome-text) {
	display: none !important;
}

/* Also hide any other default dashboard content that might appear */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Message,
/* Hide info boxes on most pages, but show on Downloads page */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info {
	display: block !important; /* Show on Downloads page */
}

/* Hide on other specific pages if needed */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info.hidden {
	display: none !important;
}

/**
 * Form Styling - Account Details
 */
.woocommerce-account .woocommerce-form-row {
	margin-bottom: var(--spacing-lg);
}

.woocommerce-account .woocommerce-form-row label {
	display: block;
	font-size: 11px; /* Same as login page */
	font-weight: 500;
	color: #999999; /* Light grey for minimal feel */
	margin-bottom: var(--spacing-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Match login page */
}

.woocommerce-account .woocommerce-form-row .required {
	color: #DC2626;
	margin-left: 2px;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input.input-text,
.woocommerce-account textarea {
	width: 100%;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	background: var(--color-bg-white);
	transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05);
}

.woocommerce-account .woocommerce-Input:disabled {
	background: var(--color-bg-body);
	color: var(--color-text-secondary);
	cursor: not-allowed;
}

/* Form Description Text - Minimal style */
.woocommerce-account .woocommerce-form-row em {
	display: block;
	margin-top: 8px !important;
	font-size: 13px !important; /* Slightly smaller */
	color: #999999 !important; /* Light grey */
	font-style: normal !important; /* No italic */
	line-height: 1.5 !important;
}

/* Password Change Fieldset - Nordic Minimal Style */
.woocommerce-account fieldset {
	border: none !important; /* Remove heavy border */
	border-bottom: 1px solid #F5F5F5 !important; /* Subtle bottom line only */
	border-radius: 0 !important; /* No rounded corners */
	padding: 24px !important; /* Consistent spacing */
	margin: 32px 0 24px 0 !important;
	background: #FAFAFA !important; /* Very light grey background */
}

.woocommerce-account fieldset legend {
	font-size: 12px !important; /* Small uppercase text */
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #666666 !important; /* Medium grey */
	padding: 0 !important;
	margin-bottom: 16px !important; /* Keep reasonable spacing between legend and content */
	margin-left: 0 !important;
}

/* Show/Hide Password Button - Copied from Login Page for consistency */
.woocommerce-account .woocommerce-EditAccountForm .password-input,
.woocommerce-account .show-password-input {
	position: relative;
}

/* Password input padding to prevent text overlap with button */
.woocommerce-account .woocommerce-EditAccountForm .password-input input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm .password-input input[type="text"],
.woocommerce-account .show-password-input .woocommerce-Input {
	padding-right: 60px; /* Space for "SHOW" button */
}

/* Show password button - Nordic minimal style (same as login page) */
.woocommerce-account .woocommerce-EditAccountForm .show-password-input,
.woocommerce-account .woocommerce-EditAccountForm button[type="button"],
.woocommerce-account .show-password-input button {
	position: absolute;
	right: 0; /* Align to right edge (no input padding) */
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 8px 0; /* No horizontal padding */
	cursor: pointer;
	font-family: var(--font-primary);
	font-size: 11px; /* Match label size */
	font-weight: 500;
	color: #999999; /* Low contrast gray */
	text-transform: uppercase;
	letter-spacing: 0.1em; /* Match label spacing */
	transition: color 0.2s ease;
	min-width: auto;
	width: auto;
	height: auto;
}

/* Add "SHOW" text via CSS if button is empty */
.woocommerce-account .woocommerce-EditAccountForm button[type="button"]:empty::before {
	content: "SHOW";
}

.woocommerce-account .woocommerce-EditAccountForm .show-password-input:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="button"]:hover,
.woocommerce-account .show-password-input button:hover {
	color: var(--color-primary); /* Darken on hover */
}

.woocommerce-account .woocommerce-EditAccountForm .show-password-input:focus,
.woocommerce-account .woocommerce-EditAccountForm button[type="button"]:focus,
.woocommerce-account .show-password-input button:focus {
	outline: none;
}

/**
 * Account Buttons (Login, Register, Save Changes, etc.)
 * Matched to Add to Cart button styling
 * Note: Exclude footer buttons using :not() selector
 * Note: Specific rules (login/register) have higher specificity and will override this
 */
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"]:not(.site-footer button):not(footer button):not([aria-label="Subscribe"]) {
	background: var(--color-primary);
	color: #FFFFFF;
	border: 2px solid var(--color-primary);
	padding: 1em 3em; /* Match Add to Cart: 1em top/bottom, 3em left/right */
	font-size: var(--font-size-base);
	font-weight: 500;
	font-family: var(--font-primary);
	letter-spacing: 0.02em; /* Match Add to Cart */
	text-transform: uppercase; /* Match Add to Cart */
	cursor: pointer;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base); /* Match Add to Cart */
	margin-top: var(--spacing-md);
}

.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button[type="submit"]:not(.site-footer button):not(footer button):not([aria-label="Subscribe"]):hover {
	background: transparent; /* Match Add to Cart invert effect */
	color: var(--color-primary); /* Match Add to Cart */
	transform: translateY(-2px); /* Match Add to Cart */
	box-shadow: none; /* No box-shadow to match Add to Cart */
}

/**
 * Orders Table
 */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--spacing-lg);
	table-layout: fixed; /* Force table to fit container width instead of content width */
}

.woocommerce-account .woocommerce-orders-table thead {
	background: var(--color-bg-body);
}

.woocommerce-account .woocommerce-orders-table th {
	text-align: left;
	padding: var(--spacing-md);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--color-border);
}

/* Unified border for tbody cells - Nordic minimalist consistency */
.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-orders-table tbody td {
	border-bottom: 1px solid #F5F5F5;
	font-weight: 400; /* Remove bold from order number for visual consistency */
}

.woocommerce-account .woocommerce-orders-table td {
	padding: var(--spacing-md);
	font-size: var(--font-size-base);
}

.woocommerce-account .woocommerce-orders-table tr:hover {
	background: var(--color-bg-body);
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
	text-decoration: underline;
}

/* Order Status Badge */
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
	font-weight: 500;
}

.woocommerce-account .woocommerce-orders-table .order-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 0;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
}

.woocommerce-account .order-status.status-completed {
	background: #ECFDF5;
	color: #059669;
}

.woocommerce-account .order-status.status-processing {
	background: #FEF3C7;
	color: #D97706;
}

.woocommerce-account .order-status.status-on-hold {
	background: #FEE2E2;
	color: #DC2626;
}

.woocommerce-account .order-status.status-pending {
	background: #F3F4F6;
	color: #6B7280;
}

/* Order Actions - Left aligned for text links (more natural flow) */
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	text-align: left;
}

/* Nordic Minimalist: Text link instead of button - lightweight & elegant */
.woocommerce-account .woocommerce-button.view {
	display: inline-block;
	padding: 0;
	background: none;
	border: none;
	color: #1A1A1A;
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	transition: all 0.2s ease;
}

/* Add arrow after "View" */
.woocommerce-account .woocommerce-button.view::after {
	content: '' !important;
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	vertical-align: middle;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M4 11.2H17.2l-3.7-3.7 1-1L20.1 12l-5.6 5.5-1-1 3.7-3.7H4z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: margin-left 0.2s ease, opacity 0.2s ease;
}

/* Subtle hover: lighter color + arrow moves right */
.woocommerce-account .woocommerce-button.view:hover {
	color: #666666;
}

.woocommerce-account .woocommerce-button.view:hover::after {
	transform: translateX(3px);
	opacity: 0.6;
}

/**
 * Addresses Page
 */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-lg);
}

@media screen and (min-width: 768px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

/* Address Cards - Nordic Minimalist Style */
.woocommerce-account .woocommerce-Address {
	background: var(--color-bg-body);
	border: none; /* Removed border for cleaner look */
	border-bottom: 1px solid #F5F5F5; /* Subtle bottom line only */
	border-radius: 0; /* Remove rounded corners for more minimalist feel */
	padding: 32px; /* Increased for better breathing space */
	display: flex; /* Use flexbox for reordering */
	flex-direction: column; /* Stack vertically */
}

/* Address title container: Use display:contents to flatten hierarchy for proper flexbox ordering */
.woocommerce-account .woocommerce-Address-title {
	display: contents; /* Makes children direct flex items of parent card */
}

/* Address titles: Consistent with Order Details page */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	font-family: var(--font-primary) !important; /* Inter, not Playfair */
	font-style: normal !important;
	font-size: 20px !important; /* Same as Order Details titles */
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: #1A1A1A !important;
	margin-bottom: 24px !important; /* Increased from 16px for better spacing */
	order: 1; /* Title at top */
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.9; /* Increased from 1.6 for better breathing */
	color: var(--color-text-secondary);
	margin-bottom: 0; /* Remove bottom margin - edit link will provide spacing */
	order: 2; /* Address content in middle */
}

/* First line of address (Name) - Semi-bold for visual hierarchy */
.woocommerce-account .woocommerce-Address address::first-line {
	font-weight: 600; /* Semi-bold for name */
	color: #1A1A1A; /* Slightly darker for emphasis */
}

/* Edit link: Pure text link style (consistent with Orders page "View" link) */
.woocommerce-account .woocommerce-Address .edit {
	display: inline-block;
	padding: 0 !important; /* No padding for text link */
	background: none !important; /* No background */
	border: none !important; /* No border */
	color: #1A1A1A !important;
	text-decoration: none !important;
	font-size: 14px; /* Slightly larger than View link for emphasis */
	font-weight: 400; /* Regular weight for minimal feel */
	letter-spacing: 0.02em; /* Subtle spacing */
	text-transform: none; /* Remove uppercase for softer appearance */
	transition: all 0.2s ease;
	margin-top: 16px; /* Spacing from address content above */
	order: 3; /* Edit link at bottom - after address content */
}

/* Add arrow after Edit text */
.woocommerce-account .woocommerce-Address .edit::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	vertical-align: middle;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M4 11.2H17.2l-3.7-3.7 1-1L20.1 12l-5.6 5.5-1-1 3.7-3.7H4z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Subtle hover: lighter color + arrow moves right */
.woocommerce-account .woocommerce-Address .edit:hover {
	background: none !important;
	color: #666666 !important; /* Lighter gray on hover */
	border: none !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-Address .edit:hover::after {
	transform: translateX(3px);
	opacity: 0.6;
}

/**
 * Edit Address Page (Billing/Shipping) - Nordic Minimalist Style
 */
/* Page title: Functional style (not artistic) - Override Playfair Display */
.woocommerce-account.woocommerce-edit-address h2,
.woocommerce-account.woocommerce-edit-address h3,
.woocommerce-edit-address h2,
.woocommerce-edit-address h3 {
	font-family: var(--font-primary) !important; /* Inter, not Playfair */
	font-style: normal !important;
	font-size: 20px !important; /* Same as other functional titles */
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: #1A1A1A !important;
	margin-top: 0 !important;
	margin-bottom: var(--spacing-lg) !important;
}

/* Form labels: Small uppercase style (same as Account Details) - scoped to main content area only */
.woocommerce-account.woocommerce-edit-address main label,
.woocommerce-edit-address main label {
	display: block;
	font-size: 11px !important; /* Same as Account Details */
	font-weight: 500 !important;
	color: #999999 !important; /* Light grey */
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-bottom: var(--spacing-xs) !important;
}

/* Form inputs and select boxes - scoped to main content area only */
.woocommerce-account.woocommerce-edit-address main input[type="text"],
.woocommerce-account.woocommerce-edit-address main input[type="email"],
.woocommerce-account.woocommerce-edit-address main input[type="tel"],
.woocommerce-account.woocommerce-edit-address main select,
.woocommerce-edit-address main input[type="text"],
.woocommerce-edit-address main input[type="email"],
.woocommerce-edit-address main input[type="tel"],
.woocommerce-edit-address main select {
	width: 100%;
	padding: var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	background: var(--color-bg-white);
	transition: all 0.2s ease;
}

.woocommerce-edit-address main input:focus,
.woocommerce-edit-address main select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05);
}

/* Select dropdown arrow styling - scoped to main content area only */
.woocommerce-edit-address main select {
	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='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

/* Select2 container: Match text input height exactly */
.woocommerce-edit-address .select2-container--default .select2-selection--single {
	height: auto !important; /* Override fixed height */
	min-height: 59.59px !important; /* Match text input height */
	padding: var(--spacing-md) !important; /* 16px - same as text inputs */
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	background: var(--color-bg-white) !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
}

/* Select2 rendered text inside container */
.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important; /* Remove default padding */
	line-height: 1.6 !important; /* Match text input line-height */
	color: #1A1A1A !important;
	font-size: var(--font-size-base) !important;
	font-family: var(--font-primary) !important;
}

/* Select2 arrow */
.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 16px !important; /* Match text input padding */
	top: 0 !important;
}

/* Select2 focus state: Match text input focus */
.woocommerce-edit-address .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.05) !important;
	outline: none !important;
}

/* Select2 dropdown styling (for enhanced select boxes) */
.select2-container--default .select2-results__option {
	padding: 12px 16px !important;
	font-size: 15px !important;
	font-family: var(--font-primary) !important;
	color: #1A1A1A !important;
	transition: all 0.2s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #FAFAFA !important; /* Light grey instead of blue */
	color: #1A1A1A !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: #F5F5F5 !important; /* Slightly darker grey for selected */
	color: #1A1A1A !important;
	font-weight: 500 !important;
}

/* Select2 dropdown container */
.select2-dropdown {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Hide search box in Select2 for country dropdown (only 4 options) */
.select2-search--dropdown {
	display: none !important;
}

/* Form row spacing */
.woocommerce-edit-address .form-row {
	margin-bottom: var(--spacing-lg);
}

/**
 * Downloads Page
 */
.woocommerce-account .woocommerce-Message--info {
	background: #EFF6FF;
	border-left: 4px solid #3B82F6;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-sm);
	color: #1E40AF;
	margin: var(--spacing-lg) 0;
}

/**
 * Payment Methods Page - Nordic Minimalist Style
 */

/* Info box: Minimal border + light background for subtle visibility */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	background: #FAFAFA !important; /* Very light grey background */
	border: 1px solid #F0F0F0 !important; /* Extremely subtle border */
	border-left: 2px solid #E5E5E5 !important; /* Left accent line for visual interest */
	padding: 24px !important; /* Increased breathing space */
	color: #666666 !important; /* Grey text to reduce visual weight */
	font-size: 15px !important;
	line-height: 1.6 !important;
	margin-bottom: 24px !important; /* Space before button */
	border-radius: 0 !important; /* No rounded corners for minimalism */
}

/* "Add payment method" button: Pure text link (consistent with Addresses page) */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button {
	background: none !important;
	border: none !important;
	color: #1A1A1A !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	text-transform: none !important;
	border-radius: 0 !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* Add arrow after button text */
.woocommerce-account .woocommerce-MyAccount-content .button::after,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	vertical-align: middle;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M4 11.2H17.2l-3.7-3.7 1-1L20.1 12l-5.6 5.5-1-1 3.7-3.7H4z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Subtle hover: lighter color + arrow moves right */
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover {
	color: #666666 !important;
	background: none !important;
	border: none !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover::after,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover::after {
	transform: translateX(3px);
	opacity: 0.6;
}

/* Payment Methods Table - Nordic Minimalist Style (consistent with Orders page) */
.woocommerce-account .woocommerce-MyAccount-paymentMethods {
	border: none !important; /* Remove outer border */
}

/* Table header: Small uppercase grey text */
.woocommerce-account .woocommerce-MyAccount-paymentMethods thead th {
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #666666 !important;
	border-bottom: 2px solid var(--color-border) !important;
	padding: 16px !important; /* Unified padding with td */
	background: var(--color-bg-body) !important;
	vertical-align: top !important; /* Top alignment for better readability */
}

/* Table body cells: Refined text with subtle bottom line */
.woocommerce-account .woocommerce-MyAccount-paymentMethods tbody td {
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--color-text-primary) !important;
	border-bottom: 1px solid #F5F5F5 !important;
	padding: 16px !important;
	vertical-align: top !important; /* Top alignment for better readability */
}

/* "Delete" link: Already styled by previous CSS, ensure left alignment */
.woocommerce-account .woocommerce-MyAccount-paymentMethods .button {
	text-align: left !important;
}

/**
 * Add Payment Method Page - Nordic Minimalist Style
 */

/* Test mode info paragraph: Consistent with Payment Methods page info box */
.woocommerce-account .payment_box p.testmode-info,
.woocommerce-account .payment_box p {
	background: #FAFAFA !important; /* Very light grey background */
	border: 1px solid #F0F0F0 !important; /* Extremely subtle border */
	border-left: 2px solid #E5E5E5 !important; /* Left accent line */
	padding: 20px 24px !important; /* Breathing space */
	color: #666666 !important; /* Grey text */
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin-bottom: 24px !important;
	border-radius: 0 !important;
}

/* Highlight "Test mode:" label */
.woocommerce-account .payment_box p strong {
	color: #1A1A1A !important;
	font-weight: 500 !important;
}

/* Radio button label styling */
.woocommerce-account .woocommerce-PaymentMethods label {
	font-size: 15px;
	color: #1A1A1A;
	font-weight: 400;
}

/* Fix: Remove excessive left spacing from payment methods list */
.woocommerce-account .woocommerce-PaymentMethods.payment_methods {
	margin-left: 0 !important; /* Remove default 48px margin */
	padding-left: 0 !important; /* Remove default 40px padding */
	list-style: none !important; /* Remove bullets */
}

/**
 * Order Details Page (View Order)
 */
.woocommerce-account .woocommerce-order-details {
	margin-top: var(--spacing-md); /* 16px for cleaner spacing */
}

/* Section titles: Functional & clear (not artistic like Dashboard welcome) */
.woocommerce-account .woocommerce-order-details__title {
	font-family: var(--font-primary) !important; /* Inter, not Playfair */
	font-style: normal !important; /* No italic */
	font-size: 20px !important; /* Increased from 18px for better presence */
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: #1A1A1A !important;
	margin-top: 16px !important; /* Restored for better spacing */
	margin-bottom: var(--spacing-lg) !important;
	padding-bottom: var(--spacing-md) !important;
	border-bottom: 1px solid #F5F5F5 !important; /* Lighter border */
}

/* Order Details Table - Nordic Minimalist: No outer border */
.woocommerce-account .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-xl);
	border: none; /* Remove outer border for cleaner look */
	border-radius: 0; /* Remove border radius */
}

.woocommerce-account .woocommerce-table--order-details thead {
	background: var(--color-bg-body);
}

.woocommerce-account .woocommerce-table--order-details th {
	text-align: left;
	padding: var(--spacing-md);
	font-size: var(--font-size-small);
	font-weight: 600;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce-account .woocommerce-table--order-details td {
	padding: var(--spacing-md);
	border-top: 1px solid #F5F5F5;
}

/* Table footer labels: Consistent with table header style */
.woocommerce-account .woocommerce-table--order-details tfoot th {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666666;
	background: var(--color-bg-body);
}

.woocommerce-account .woocommerce-table--order-details tfoot td {
	font-weight: 400;
	background: var(--color-bg-body);
}

.woocommerce-account .woocommerce-table--order-details .order-total th,
.woocommerce-account .woocommerce-table--order-details .order-total td {
	font-size: var(--font-size-large);
	font-weight: 600;
	color: var(--color-primary);
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

/* Product Link in Order */
.woocommerce-account .woocommerce-table--order-details .product-name a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
}

.woocommerce-account .woocommerce-table--order-details .product-name a:hover {
	text-decoration: underline;
}

/* Order Status Badge in Details */
.woocommerce-account .woocommerce-MyAccount-content mark {
	background: #ECFDF5;
	color: #059669;
	padding: 4px 12px;
	border-radius: 0;
	font-weight: 500;
	font-style: normal;
}

/* Billing Address Section */
.woocommerce-account .woocommerce-customer-details {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-xl);
}

@media screen and (min-width: 768px) {
	.woocommerce-account .woocommerce-customer-details {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account .woocommerce-column__title {
	font-family: var(--font-primary) !important; /* Inter */
	font-style: normal !important; /* No italic */
	font-size: 20px !important; /* Increased from 18px for better presence */
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	color: #1A1A1A !important;
	margin-top: 16px !important; /* Restored for better spacing */
	margin-bottom: var(--spacing-md) !important;
}

.woocommerce-account .woocommerce-customer-details address {
	background: var(--color-bg-body);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--spacing-lg);
	font-style: normal;
	line-height: 1.8;
	color: var(--color-text-secondary);
}

/**
 * Mobile Responsive Adjustments
 */
@media screen and (max-width: 767px) {
	/* Mobile layout - Use flexbox to reorder content */
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: flex;
		flex-direction: column;
	}
	
	/* Content (Welcome message) appears before Navigation on mobile */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		order: 2; /* Navigation second */
	}
	
	.woocommerce-account .woocommerce-MyAccount-content {
		order: 1; /* Content first */
	}
	
	/* Reduce padding on mobile for better content width */
	.woocommerce-MyAccount-navigation {
		position: static;
		margin-bottom: var(--spacing-lg);
		padding: var(--spacing-md) !important; /* 16px instead of 40px */
	}
	
	.woocommerce-MyAccount-content {
		padding: var(--spacing-md) !important; /* 16px instead of 32px */
	}
	
	/* Reduce padding for address cards on mobile */
	.woocommerce-account .woocommerce-Address {
		padding: var(--spacing-md) !important; /* 16px instead of 32px */
	}
	
	/* Reduce padding for forms on mobile */
	.woocommerce-account fieldset {
		padding: var(--spacing-md) !important; /* 16px instead of 24px */
	}
	
	/* Reduce padding for info boxes on mobile */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
		padding: var(--spacing-md) !important; /* 16px instead of 24px */
	}
	
	/* Make table responsive */
	.woocommerce-account .woocommerce-orders-table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.woocommerce-account .woocommerce-orders-table thead {
		display: none;
	}
	
	.woocommerce-account .woocommerce-orders-table tbody {
		display: block;
		width: 100%;
	}
	
	.woocommerce-account .woocommerce-orders-table tr {
		display: block;
		width: 100%;
		margin-bottom: var(--spacing-lg);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		padding: var(--spacing-md);
		background: var(--color-bg-white);
		box-sizing: border-box;
	}
	
	/* Mobile card layout: Ensure consistent row height for both th and td */
	.woocommerce-account .woocommerce-orders-table th,
	.woocommerce-account .woocommerce-orders-table td {
		display: block;
		text-align: right;
		padding: 12px 0; /* Fixed 12px padding for mobile (smaller than tablet's 16px) */
		border-bottom: none;
		font-weight: 400; /* Regular weight for all content */
		min-height: 26px; /* Ensure minimum content height (50px total with padding) */
		box-sizing: content-box; /* Padding adds to height */
		margin-bottom: 4px; /* Add spacing between rows for better readability */
	}
	
	/* Force order link to float right for proper alignment */
	.woocommerce-account .woocommerce-orders-table th a {
		float: right;
	}
	
	/* Show labels for both th and td */
	.woocommerce-account .woocommerce-orders-table th::before,
	.woocommerce-account .woocommerce-orders-table td::before {
		content: attr(data-title) !important;
		float: left !important;
		font-weight: 600 !important;
		color: var(--color-primary) !important;
		display: block !important; /* Float makes it block anyway */
	}
	
	.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		text-align: left;
		margin-top: var(--spacing-sm);
	}
	
	/* Order Details Table Mobile */
	.woocommerce-account .woocommerce-table--order-details {
		display: block;
	}
	
	.woocommerce-account .woocommerce-table--order-details thead {
		display: none;
	}
	
	.woocommerce-account .woocommerce-table--order-details tbody,
	.woocommerce-account .woocommerce-table--order-details tr,
	.woocommerce-account .woocommerce-table--order-details td {
		display: block;
		width: 100%;
	}
	
	.woocommerce-account .woocommerce-table--order-details tr {
		margin-bottom: var(--spacing-md);
		padding-bottom: var(--spacing-md);
		border-bottom: 1px solid var(--color-border);
	}
}

/**
 * =================================================================
 * CHECKOUT BUTTONS - UNIFIED STYLING (Match Add to Cart)
 * =================================================================
 * Applies to:
 * - WooCommerce mini-cart checkout button
 * - Side cart (xoo-wsc) checkout button
 * - All other checkout buttons
 */

/* Mini Cart & Side Cart Checkout Buttons */
.woocommerce-mini-cart__buttons .button.checkout,
.xoo-wsc-ft-btn.xoo-wsc-ft-btn-checkout,
.xoo-wsc-ft-btn.xoo-wsc-btn.xoo-wsc-ft-btn-checkout,
a.xoo-wsc-ft-btn-checkout,
a.button.checkout,
.checkout-button {
	/* Match Add to Cart button */
	background: var(--color-primary) !important;
	color: #FFFFFF !important;
	border: 2px solid var(--color-primary) !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--color-primary) !important;
	padding: 1em 3em !important; /* 16px top/bottom, 48px left/right at 16px font-size */
	font-size: var(--font-size-base) !important;
	font-weight: 500 !important;
	font-family: var(--font-primary) !important;
	letter-spacing: 0.02em !important; /* Match Add to Cart */
	text-transform: uppercase !important; /* Match Add to Cart */
	line-height: 1.5 !important; /* Fix vertical centering - match Add to Cart */
	cursor: pointer !important;
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            transform var(--transition-base) !important;
	text-decoration: none !important;
	display: inline-block !important;
}

/* Checkout Button Hover State - Match Add to Cart */
.woocommerce-mini-cart__buttons .button.checkout:hover,
.xoo-wsc-ft-btn.xoo-wsc-ft-btn-checkout:hover,
.xoo-wsc-ft-btn.xoo-wsc-btn.xoo-wsc-ft-btn-checkout:hover,
a.xoo-wsc-ft-btn-checkout:hover,
a.button.checkout:hover,
.checkout-button:hover {
	background: transparent !important;
	color: var(--color-primary) !important;
	transform: translateY(-2px) !important;
	box-shadow: none !important; /* No shadow to match Add to Cart */
}

/* Checkout Button Active State */
.woocommerce-mini-cart__buttons .button.checkout:active,
.xoo-wsc-ft-btn.xoo-wsc-ft-btn-checkout:active,
.xoo-wsc-ft-btn.xoo-wsc-btn.xoo-wsc-ft-btn-checkout:active,
a.xoo-wsc-ft-btn-checkout:active,
a.button.checkout:active,
.checkout-button:active {
	transform: translateY(0) !important;
}

/**
 * =================================================================
 * SIDE CART BADGE OPTIMIZATION
 * Refined typography + floating effect + perfect Flexbox centering
 * =================================================================
 */
 
.xoo-wsch-items-count,
.xoo-wsc-items-count {
	/* Typography refinement: More elegant number size */
	font-size: 10px !important;
	
	/* Floating effect: 1.5px white border creates physical separation (matches Side Cart white background) */
	box-shadow: 0 0 0 1.5px #FFFFFF !important;
	
	/* Font weight stays at 400 (already optimal) */
	
	/* Perfect geometric centering with Flexbox - no pixel-level deviation */
	display: flex !important;
	align-items: center !important;      /* Vertical centering */
	justify-content: center !important;  /* Horizontal centering */
	
	/* Remove line-height dependency for consistent cross-browser rendering */
	line-height: normal !important;
}


/**
 * =================================================================
 * SIDE CART QUANTITY CONTROLS - NORDIC MINIMALIST
 * Gallery aesthetic: Text-like interaction, no visual buttons
 * Design Reference: Bang & Olufsen, Teenage Engineering
 * 
 * ANTI-FOUC Strategy:
 * 1. Hide original "Qty:" text immediately via CSS
 * 2. Keep number visible but styled
 * 3. JS injects buttons with fade-in animation
 * =================================================================
 */

/* ANTI-FOUC: Hide original content, prepare for injection */
.xoo-wsc-sml-qty:not(.kokonna-qty-injected) {
	font-size: 0 !important; /* Hide "Qty:" text */
	opacity: 0.7 !important; /* Slight fade while waiting for JS */
	transition: opacity 0.15s ease !important;
}

.xoo-wsc-sml-qty:not(.kokonna-qty-injected) span {
	font-size: 13px !important; /* Keep number visible */
	display: inline-block !important;
}

/* Container layout AFTER injection */
.xoo-wsc-sml-qty.kokonna-qty-injected {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 13px !important;
	color: #1A1A1A !important;
	margin-top: 4px !important;
	opacity: 1 !important; /* Fade in after injection */
	transition: opacity 0.2s ease !important;
	animation: kokonnaFadeIn 0.2s ease !important; /* Smooth appearance */
}

@keyframes kokonnaFadeIn {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

/* Hide original "Qty:" label when injected - show via ::before instead */
.xoo-wsc-sml-qty.kokonna-qty-injected::before {
	content: 'Qty:' !important;
	color: #999999 !important;
	margin-right: -4px !important;
	font-family: 'Inter', sans-serif !important;
}

/* +/- Buttons: Invisible until hover (Gallery aesthetic) */
.kokonna-qty-btn {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #BBBBBB !important; /* Subtle grey - doesn't steal attention */
	cursor: pointer !important;
	font-size: 16px !important;
	line-height: 1 !important;
	transition: color 0.2s ease !important;
	font-family: 'Inter', sans-serif !important;
}

.kokonna-qty-btn:hover {
	color: #1A1A1A !important; /* Dark on hover - clear affordance */
}

.kokonna-qty-btn:disabled {
	opacity: 0.3 !important;
	cursor: not-allowed !important;
}

/* Quantity value: Clean number display with tabular nums */
.kokonna-qty-val {
	font-family: 'Inter', sans-serif !important;
	font-weight: 400 !important;
	min-width: 20px !important;
	text-align: center !important;
	color: #1A1A1A !important;
	
	/* Prevent layout shift when numbers change (9 → 10) */
	font-variant-numeric: tabular-nums !important;
}

/* Loading state - Subtle hint after debounce */
/* Allow continuous operations with subtle visual feedback */
.xoo-wsc-sml-qty[style*="opacity"] {
	transition: opacity 0.2s ease !important;
}

/* Quantity value update animation - Subtle color pulse */
.kokonna-qty-val {
	transition: color 0.15s ease !important;
}

.kokonna-qty-val.updating {
	animation: qtyColorPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth color pulse animation - Nordic minimalist aesthetic */
@keyframes qtyColorPulse {
	0% { 
		color: #1A1A1A;
	}
	50% { 
		color: #666666; /* Subtle brightening */
	}
	100% { 
		color: #1A1A1A;
	}
}

/* Ensure smooth interaction on mobile */
@media (max-width: 768px) {
	.kokonna-qty-btn {
		font-size: 18px !important; /* Slightly larger tap target */
		padding: 4px !important;
	}
}