/**
 * Frontend Common Styles
 * 
 * Shared styles for all product pages
 * 
 * @package FS_Product_Catalog
 */

/* CSS Variables */
:root {
	/* Colors */
	--fs-primary: #007bff;
	--fs-primary-hover: #0056b3;
	--fs-secondary: #6c757d;
	--fs-text: #333;
	--fs-text-light: #666;
	--fs-text-lighter: #999;
	--fs-border: #ddd;
	--fs-border-light: #eee;
	--fs-bg: #fff;
	--fs-bg-alt: #f8f9fa;
	--fs-bg-dark: #343a40;
	--fs-success: #28a745;
	--fs-danger: #dc3545;
	--fs-warning: #ffc107;
	--fs-info: #17a2b8;
	
	/* Spacing */
	--fs-gap: 2rem;
	--fs-gap-sm: 1rem;
	--fs-gap-lg: 3rem;
	--fs-gap-xl: 4rem;
	
	/* Layout */
	--fs-container-width: 1200px;
	--fs-sidebar-width: 280px;
	--fs-border-radius: 4px;
	--fs-border-radius-lg: 8px;
	
	/* Fluid Typography System */
	/* Base font size scales fluidly between 15px (mobile) and 17px (desktop) */
	--fs-font-size-base: clamp(15px, 0.9375rem + 0.3125vw, 17px);
	
	/* Font family */
	--fs-font-family: inherit;
	
	/* Relative font sizes based on container's base (using em for proper inheritance) */
	--fs-font-size-xs: 0.75em;   /* 12px at base 16px */
	--fs-font-size-sm: 0.875em;  /* 14px at base 16px */
	--fs-font-size: 1em;         /* 16px at base 16px - default */
	--fs-font-size-lg: 1.125em;  /* 18px at base 16px */
	--fs-font-size-xl: 1.25em;   /* 20px at base 16px */
	--fs-font-size-2xl: 1.5em;   /* 24px at base 16px */
	--fs-font-size-3xl: 1.875em; /* 30px at base 16px */
	--fs-font-size-4xl: 2.25em;  /* 36px at base 16px */
	--fs-font-size-5xl: 3em;     /* 48px at base 16px */
	
	/* Fluid heading sizes (relative to base font size using em) */
	--fs-h1: clamp(1.75em, 1.5em + 1.25vw, 2.5em);    /* ~28px - 40px at 16px base */
	--fs-h2: clamp(1.5em, 1.3em + 1vw, 2em);          /* ~24px - 32px at 16px base */
	--fs-h3: clamp(1.25em, 1.1em + 0.75vw, 1.75em);   /* ~20px - 28px at 16px base */
	--fs-h4: clamp(1.125em, 1em + 0.625vw, 1.5em);    /* ~18px - 24px at 16px base */
	--fs-h5: clamp(1em, 0.95em + 0.25vw, 1.25em);     /* ~16px - 20px at 16px base */
	--fs-h6: clamp(0.875em, 0.85em + 0.125vw, 1.0625em); /* ~14px - 17px at 16px base */
	
	/* Line heights */
	--fs-line-height: 1.6;
	--fs-line-height-tight: 1.3;
	--fs-line-height-relaxed: 1.8;
	
	/* Transitions */
	--fs-transition: 0.3s ease;
	--fs-transition-fast: 0.15s ease;
	
	/* Shadows */
	--fs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--fs-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--fs-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Apply base font size to plugin containers only (scoped to avoid theme conflicts) */
.fs-product-container,
.fs-product-archive-container,
.fs-product-single-layout {
	font-size: var(--fs-font-size-base);
}

/* Container */
.fs-product-container,
.fs-product-archive-container {
	max-width: var(--fs-container-width);
	margin: 0 auto;
	padding: var(--fs-gap);
}

/* Breadcrumbs */
.fs-product-breadcrumbs {
	margin-bottom: var(--fs-gap);
	font-size: var(--fs-font-size-sm);
}

.fs-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-breadcrumb-item {
	display: flex;
	align-items: center;
}

.fs-breadcrumb-item:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--fs-text-lighter);
}

.fs-breadcrumb-item a {
	color: var(--fs-primary);
	text-decoration: none;
	transition: color var(--fs-transition-fast);
}

.fs-breadcrumb-item a:hover {
	color: var(--fs-primary-hover);
	text-decoration: underline;
}

.fs-breadcrumb-item.active span {
	color: var(--fs-text-light);
}

/* Utility Classes */
.fs-text-center {
	text-align: center;
}

.fs-text-right {
	text-align: right;
}

.fs-mb-0 {
	margin-bottom: 0;
}

.fs-mb-1 {
	margin-bottom: var(--fs-gap-sm);
}

.fs-mb-2 {
	margin-bottom: var(--fs-gap);
}

.fs-mb-3 {
	margin-bottom: var(--fs-gap-lg);
}

.fs-mt-0 {
	margin-top: 0;
}

.fs-mt-1 {
	margin-top: var(--fs-gap-sm);
}

.fs-mt-2 {
	margin-top: var(--fs-gap);
}

.fs-mt-3 {
	margin-top: var(--fs-gap-lg);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
	:root {
		--fs-container-width: 100%;
	}
}

@media (max-width: 992px) {
	:root {
		--fs-gap: 1.5rem;
		--fs-gap-lg: 2.5rem;
		--fs-sidebar-width: 260px;
	}
}

@media (max-width: 768px) {
	:root {
		--fs-gap: 1rem;
		--fs-gap-lg: 2rem;
	}
	
	.fs-product-container,
	.fs-product-archive-container {
		padding: var(--fs-gap-sm);
	}
}

@media (max-width: 576px) {
	:root {
		--fs-gap-sm: 0.75rem;
		--fs-gap: 1rem;
		--fs-gap-lg: 1.5rem;
	}
}