/* Home Page Styles */

/* CSS Variables */
:root {
	--bg-gradient: linear-gradient(135deg,#fff 0%,#f6f8fb 45%,#eef2f8 100%);
	--color-accent: #222; /* primary brand accent */
	--color-accent-alt: #5d3dfd; /* vibrant secondary */
	--color-border: #e2e6ea;
	--color-shadow: 32,40,48;
	--radius-sm: 6px;
	--radius-md: 14px;
	--radius-pill: 999px;
	--transition: .28s cubic-bezier(.4,.0,.2,1);
	--font-xs: .70rem;
	--font-sm: .78rem;
	--font-base: .9rem;
	--font-md: 1.1rem;
	--font-lg: 2.8rem;
}

body { background: var(--bg-gradient); font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Hero */
.home-hero { 
	position: relative; 
	padding: 6rem 2rem 5rem; 
	background: radial-gradient(circle at 70% 40%, rgb(93 61 253 / 9%), transparent 70%), var(--bg-gradient);
	text-align: center;
}

/* Compact Hero Variant */
.home-hero.compact {
	padding: 2rem 2rem 1.5rem;
	background: transparent;
}

.home-hero.compact .hero-title {
	font-size: 1.8rem;
	margin: 0 0 0.25rem;
}

.home-hero.compact .hero-sub {
	font-size: 0.85rem;
	margin: 0 0 1rem;
	opacity: 0.6;
}

.home-hero.compact .hero-buttons {
	gap: 0.75rem;
}

.hero-inner { max-width: 800px; margin: 0 auto; }

.hero-title { 
	font-size: var(--font-lg); 
	letter-spacing: .1em; 
	font-weight: 600; 
	margin: 0 0 .75rem; 
	text-transform: uppercase; 
}

.hero-sub { 
	font-size: var(--font-md); 
	letter-spacing: .15em; 
	margin: 0 0 2rem; 
	opacity: .75; 
	text-transform: uppercase;
}

.hero-buttons { 
	display: flex; 
	gap: 1rem; 
	justify-content: center; 
	flex-wrap: wrap;
}

/* Sections */
.home-section { padding: 3rem 0; }
.features-section { padding: 3rem 0; }

.section-title { 
	margin: 0 0 2rem; 
	font-size: 1.1rem; 
	text-transform: uppercase; 
	letter-spacing: .18em; 
	font-weight: 600; 
	text-align: center;
}

/* Product Grid */
.product-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
	gap: 2rem; 
}

.product-card { 
	background: #fff; 
	padding: 1rem; 
	border: 1px solid var(--color-border); 
	border-radius: var(--radius-md); 
	box-shadow: 0 6px 18px -6px rgb(var(--color-shadow), .18); 
	display: flex; 
	flex-direction: column; 
	gap: .75rem; 
	transition: var(--transition); 
}

.product-card:hover { 
	transform: translateY(-6px); 
	box-shadow: 0 14px 38px -10px rgb(var(--color-shadow), .25); 
}
.product-link { display: block; }

.product-thumb { 
	width: 100%; 
	height: 320px; 
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius-sm, 4px); 
	background: #fafafa; 
}

.product-meta { 
	text-align: center; 
	display: flex; 
	flex-direction: column; 
	gap: .25rem; 
}

.product-title { 
	font-size: var(--font-sm); 
	font-weight: 500; 
	letter-spacing: .05em; 
	margin: 0; 
	text-transform: uppercase; 
}

.product-price { 
	font-size: var(--font-xs); 
	margin: 0; 
	letter-spacing: .12em; 
	opacity: .65; 
}

.no-image { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	font-size: var(--font-sm); 
	height: 320px; 
	border: 1px dashed var(--color-border); 
	border-radius: var(--radius-sm); 
}

/* Supplemental Text Section */
.home-text-content { 
	background: #fff; 
	border: 1px solid var(--color-border); 
	padding: 2rem; 
	border-radius: var(--radius-md); 
	box-shadow: 0 8px 26px -10px rgb(var(--color-shadow), .18); 
	margin-bottom: 3rem;
}

.home-text-content h2, .home-text-content h3 { 
	letter-spacing: .14em; 
	text-transform: uppercase; 
	font-size: 1rem; 
}
.home-text-content p { line-height: 1.6; }

/* ===========================================
   ELEGANT SLIDESHOW
=========================================== */
.slideshow-container {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--color-border, #e2e6ea);
}

.slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--lyse-offwhite, #fbfcf8);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
}

.slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm, 0.78rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lyse-gray, #7a7a7a);
    background: var(--lyse-pale-pink, #f1e7e7);
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1rem 1rem;
    background: linear-gradient(to top, rgb(0 0 0 / 50%), transparent);
    text-align: center;
}

.slide-title {
    color: #fff;
    font-size: var(--font-xs, 0.7rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
}

/* Slideshow Dots */
.slideshow-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0 0.5rem;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--lyse-gray, #7a7a7a);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.dot:hover {
    transform: scale(1.2);
}

.dot.active {
    background: var(--lyse-black, #000);
    border-color: var(--lyse-black, #000);
}

/* Responsive */
@media (width <= 768px) {
    .slideshow-container {
        max-width: 100%;
        padding: 1rem;
        margin: 0 auto 1.5rem;
    }
    
    .slideshow {
        aspect-ratio: 4 / 5;
    }
}

/* Responsive */
@media (width <= 768px) {
	.home-hero { padding: 4rem 1.5rem 3rem; }
	.hero-title { font-size: 2rem; }
	.hero-sub { font-size: .95rem; }
	.hero-buttons { flex-direction: column; align-items: center; }
	.product-thumb, .no-image { height: 260px; }
	.product-grid { gap: 1.5rem; }
	.home-text-content { padding: 1.5rem; }
}