/* =========================================================
   Voile Lingerie — Main Stylesheet
   Design tokens first, then components, mobile-first responsive.
========================================================= */

:root{
	--voile-color-bg: #faf8f5;
	--voile-color-surface: #ffffff;
	--voile-color-text: #221f1c;
	--voile-color-text-muted: #6f6a63;
	--voile-color-accent: #282623;
	--voile-color-line: #e4dfd6;
	--voile-color-sale: #a13d2e;
	--voile-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--voile-font-sans: 'Jost', Helvetica, Arial, sans-serif;
	--voile-container: 1440px;
	--voile-gutter: clamp(16px, 3vw, 40px);
	--voile-radius: 2px;
	--voile-transition: 220ms ease;
}

/* -------------------- Base -------------------- */
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--voile-font-sans);
	color: var(--voile-color-text);
	background: var(--voile-color-bg);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
	font-family: var(--voile-font-serif);
	font-weight: 500;
	letter-spacing: .02em;
	margin: 0 0 .6em;
	color: var(--voile-color-accent);
}
h1{ font-size: clamp(2rem, 4vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
p{ margin: 0 0 1em; }
a{ transition: color var(--voile-transition), opacity var(--voile-transition); }
a:focus-visible, button:focus-visible, input:focus-visible{
	outline: 2px solid var(--voile-color-accent);
	outline-offset: 3px;
}
.screen-reader-text{
	position:absolute!important; clip:rect(1px,1px,1px,1px); word-wrap:normal!important;
	height:1px; width:1px; overflow:hidden;
}
.screen-reader-text:focus{
	background:#fff; color:#111; display:block; height:auto; left:8px; top:8px;
	padding:12px 18px; z-index:100000; width:auto; clip:auto!important;
}
.skip-link{ z-index: 999999; }

.voile-container{
	max-width: var(--voile-container);
	margin-inline: auto;
	padding-inline: var(--voile-gutter);
}

.voile-btn{
	display:inline-block;
	padding: 14px 32px;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 1px solid var(--voile-color-accent);
	background: var(--voile-color-accent);
	color: #fff;
	border-radius: var(--voile-radius);
}
.voile-btn:hover{ opacity:.85; }
.voile-btn--outline{
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.voile-section-title{
	text-align:center;
	margin-bottom: 2rem;
}

/* -------------------- Announcement bar -------------------- */
.voile-announcement-bar{
	background: var(--voile-color-accent);
	color:#fff;
	text-align:center;
	font-size:.75rem;
	letter-spacing:.08em;
	text-transform: uppercase;
}
.voile-announcement-bar a{ display:block; padding:.6em 1em; color:#fff; }

/* -------------------- Header -------------------- */
.site-header{
	position: sticky;
	top:0;
	z-index: 500;
	background: var(--voile-color-bg);
	border-bottom: 1px solid var(--voile-color-line);
}
.voile-header__row{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}
.voile-header__logo{ flex: 0 0 auto; }
.voile-logo-text{
	font-family: var(--voile-font-serif);
	font-size: 1.6rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.voile-header__logo img{ max-height: 46px; width:auto; }

.voile-header__nav{ flex: 1 1 auto; display:flex; justify-content:center; }
.voile-menu{ display:flex; gap: 1.75rem; flex-wrap: wrap; justify-content:center; }
.voile-menu a{
	font-size:.82rem;
	text-transform: uppercase;
	letter-spacing:.08em;
	position: relative;
	padding-bottom: 4px;
}
.voile-menu a::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	height:1px; background: currentColor;
	transform: scaleX(0); transform-origin:left;
	transition: transform var(--voile-transition);
}
.voile-menu a:hover::after, .voile-menu a:focus-visible::after{ transform: scaleX(1); }
.voile-menu .sub-menu{
	position:absolute; background: var(--voile-color-surface);
	border:1px solid var(--voile-color-line); padding: 1rem; display:none;
	min-width: 200px; margin-top: .75rem;
}
.voile-menu li{ position: relative; }
.voile-menu li:hover > .sub-menu,
.voile-menu li:focus-within > .sub-menu{ display:block; }
.voile-menu .sub-menu li{ margin-bottom:.5rem; }

.voile-header__icons{ display:flex; align-items:center; gap: 1rem; flex: 0 0 auto; }
.voile-icon-btn{
	background:none; border:none; color: inherit; position: relative;
	display:inline-flex; align-items:center; justify-content:center; padding:6px;
}
.voile-icon-btn .cart-count{
	position:absolute; top:-4px; right:-6px;
	background: var(--voile-color-accent); color:#fff;
	font-size:.62rem; width:16px; height:16px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}

.voile-header__menu-toggle{
	display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px;
}
.voile-header__menu-toggle span{ width:22px; height:1px; background: currentColor; display:block; }

.voile-search-panel{
	max-height:0; overflow:hidden; background: var(--voile-color-surface);
	transition: max-height var(--voile-transition);
}
.voile-search-panel.is-open{ max-height: 140px; padding-block: 1rem; }
.voile-search-form{ display:flex; gap: .5rem; padding-block: .5rem; }
.voile-search-form .search-field{
	flex:1; padding: .8rem 1rem; border:1px solid var(--voile-color-line); background:#fff;
}
.voile-search-form .search-submit{ background:none; border:1px solid var(--voile-color-line); padding: 0 1rem; }

/* -------------------- Cart drawer -------------------- */
.voile-cart-drawer{
	position: fixed; inset:0; z-index: 900; pointer-events:none;
}
.voile-cart-drawer.is-open{ pointer-events: auto; }
.voile-cart-drawer::before{
	content:""; position:absolute; inset:0; background: rgba(0,0,0,.35);
	opacity:0; transition: opacity var(--voile-transition);
}
.voile-cart-drawer.is-open::before{ opacity:1; }
.voile-cart-drawer__panel{
	position:absolute; top:0; right:0; bottom:0; width: min(420px, 92vw);
	background:#fff; padding: 2rem; transform: translateX(100%);
	transition: transform var(--voile-transition); overflow-y:auto;
}
.voile-cart-drawer.is-open .voile-cart-drawer__panel{ transform: translateX(0); }
.voile-cart-drawer__close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; }

/* -------------------- Hero -------------------- */
.voile-hero{ position: relative; }
.voile-hero__slides{ position: relative; height: min(88vh, 900px); }
.voile-hero__slide{
	position:absolute; inset:0; opacity:0; transition: opacity 600ms ease;
}
.voile-hero__slide.is-active{ opacity:1; }
.voile-hero__slide img{ width:100%; height:100%; object-fit: cover; }
.voile-hero__caption{
	position:absolute; left: var(--voile-gutter); bottom: 3rem; color:#fff;
	max-width: 460px; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.voile-hero__eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.75rem; }
.voile-hero__title{ color:#fff; }
.voile-hero__dots{
	position:absolute; bottom:1.25rem; left:50%; transform: translateX(-50%);
	display:flex; gap:.5rem;
}
.voile-hero__dots button{
	width:8px; height:8px; border-radius:50%; border:1px solid #fff; background: transparent;
}
.voile-hero__dots button[aria-selected="true"]{ background:#fff; }

/* -------------------- USP strip -------------------- */
.voile-usp-strip{ border-bottom: 1px solid var(--voile-color-line); background: var(--voile-color-surface); }
.voile-usp-strip__inner{
	display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap;
	padding: .9rem 0; font-size:.75rem; letter-spacing:.06em; text-transform: uppercase; text-align:center;
}

/* -------------------- Category grid -------------------- */
.voile-category-grid{ padding-block: clamp(3rem, 6vw, 6rem); }
.voile-grid{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	max-width: var(--voile-container);
	margin-inline: auto;
	padding-inline: var(--voile-gutter);
}
.voile-grid__item{
	position:relative; aspect-ratio: 3/4; overflow:hidden; display:block;
}
.voile-grid__item img{
	width:100%; height:100%; object-fit:cover;
	transition: transform 700ms ease;
}
.voile-grid__item:hover img{ transform: scale(1.05); }
.voile-grid__label{
	position:absolute; top:1.5rem; left:1.5rem; color:#fff;
	font-family: var(--voile-font-serif); font-size:1.3rem; letter-spacing:.05em;
	text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.voile-grid__cta{
	position:absolute; bottom:1.5rem; left:1.5rem; color:#fff;
	font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
	border-bottom: 1px solid #fff; padding-bottom:2px;
}

/* -------------------- Featured products / product cards -------------------- */
.voile-featured-products{ padding-block: clamp(2.5rem, 5vw, 5rem); }
ul.products, .voile-post-grid{
	display:grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	list-style:none; margin:0; padding:0;
}
.voile-product-card{ list-style:none; }
.voile-product-card__image{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--voile-color-line); }
.voile-product-card__image img{ width:100%; height:100%; object-fit:cover; transition: transform 700ms ease; }
.voile-product-card:hover .voile-product-card__image img{ transform: scale(1.04); }
.voile-badge{
	position:absolute; top:.75rem; left:.75rem; background: var(--voile-color-sale); color:#fff;
	font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; padding:.3em .7em;
}
.voile-product-card__title{
	font-family: var(--voile-font-sans); font-size:.95rem; font-weight:500;
	margin: .85rem 0 .25rem; color: var(--voile-color-text);
}
.voile-product-card__price{ font-size:.9rem; color: var(--voile-color-text-muted); }
.voile-product-card del{ opacity:.55; margin-right:.4em; }
.voile-product-card__quick-add{ margin-top:.6rem; }
.voile-product-card__quick-add a{
	display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
	border-bottom: 1px solid currentColor;
}

/* -------------------- About teaser -------------------- */
.voile-about-teaser{ padding-block: clamp(3rem, 6vw, 6rem); background: var(--voile-color-surface); }
.voile-about-teaser__inner{
	display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items:center;
}
.voile-about-teaser__text p{ color: var(--voile-color-text-muted); }

/* -------------------- Newsletter -------------------- */
.voile-newsletter{ background: var(--voile-color-accent); color:#fff; }
.voile-newsletter__inner{ text-align:center; padding-block: clamp(3rem, 5vw, 5rem); max-width: 640px; }
.voile-newsletter h2{ color:#fff; }
.voile-newsletter__form{ display:flex; gap: .5rem; margin: 1.5rem 0; }
.voile-newsletter__form input{
	flex:1; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.4); background: transparent; color:#fff;
}
.voile-newsletter__form input::placeholder{ color: rgba(255,255,255,.6); }
.voile-newsletter__form button{
	padding: 1rem 1.6rem; background:#fff; color: var(--voile-color-accent); border:none;
	text-transform: uppercase; letter-spacing:.1em; font-size:.78rem;
}
.voile-newsletter__disclaimer{ font-size:.72rem; opacity:.7; }
.voile-socials{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
.voile-socials span{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.voile-socials a{ color:#fff; }

/* -------------------- Footer -------------------- */
.site-footer{ background: var(--voile-color-bg); }
.voile-footer__columns{
	display:grid; grid-template-columns: repeat(5, 1fr); gap: 2rem;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.voile-footer__col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.voile-footer__col ul li{ margin-bottom:.6rem; }
.voile-footer__col a{ font-size:.85rem; color: var(--voile-color-text-muted); }
.voile-footer__col a:hover{ color: var(--voile-color-text); }
.voile-footer__col--logo{ display:flex; align-items:flex-start; justify-content:flex-end; }
.voile-footer__legal{
	border-top: 1px solid var(--voile-color-line);
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
	padding-block: 1.5rem; font-size:.75rem; color: var(--voile-color-text-muted);
}
.voile-legal-menu{ display:flex; gap: 1.5rem; flex-wrap:wrap; }

/* -------------------- Blog / single ------------------- */
.voile-single{ padding-block: 3rem; }
.voile-single__layout{ display:grid; grid-template-columns: 2.5fr 1fr; gap: 3rem; }
.voile-post-card__thumb{ display:block; aspect-ratio: 3/4; overflow:hidden; }
.voile-post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.voile-post-card__title a{ font-family: var(--voile-font-serif); }
.voile-post-card__meta{ font-size:.75rem; color: var(--voile-color-text-muted); margin: .5rem 0; }
.voile-link-arrow{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid currentColor; }

/* -------------------- Shop layout -------------------- */
.voile-shop-wrap{ padding-block: 2.5rem; }
.voile-shop__layout{ display:grid; grid-template-columns: 1fr 260px; gap: 3rem; }
.voile-shop__layout .voile-shop__main{ order:1; }
.woocommerce-products-header{ margin-bottom: 2rem; text-align:center; }

/* -------------------- Breadcrumbs -------------------- */
.voile-breadcrumbs ol{ display:flex; gap:.4rem; flex-wrap:wrap; font-size:.75rem; color: var(--voile-color-text-muted); margin: 1.5rem 0; }
.voile-breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.4rem; }

/* -------------------- Forms / widgets ------------------- */
.widget-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.widget{ margin-bottom: 2.5rem; }

/* -------------------- 404 -------------------- */
.voile-404{ text-align:center; padding-block: 6rem; }
.voile-404__search{ max-width:420px; margin: 2rem auto 0; }

/* =========================================================
   Responsive — tablet
========================================================= */
@media (max-width: 1024px){
	.voile-grid{ grid-template-columns: repeat(2, 1fr); }
	ul.products, .voile-post-grid{ grid-template-columns: repeat(3, 1fr); }
	.voile-footer__columns{ grid-template-columns: repeat(3, 1fr); }
	.voile-shop__layout{ grid-template-columns: 1fr; }
	.voile-shop__sidebar{ order: 2; }
	.voile-single__layout{ grid-template-columns: 1fr; }
	.voile-about-teaser__inner{ grid-template-columns: 1fr; }
}

/* =========================================================
   Responsive — mobile
========================================================= */
@media (max-width: 782px){
	.voile-header__nav{
		position: fixed; inset: 0 0 0 auto; width: min(320px, 88vw);
		background: var(--voile-color-bg); transform: translateX(100%);
		transition: transform var(--voile-transition); padding: 5rem 2rem 2rem;
		overflow-y:auto; z-index: 600;
	}
	.voile-header__nav.is-open{ transform: translateX(0); }
	.voile-menu{ flex-direction:column; align-items:flex-start; gap: 1rem; }
	.voile-menu .sub-menu{ position:static; border:none; padding:.5rem 0 0 1rem; display:none; }
	.voile-header__menu-toggle{ display:flex; }
	.voile-header__nav .sub-menu{ display:block; }

	.voile-grid{ grid-template-columns: 1fr 1fr; }
	ul.products, .voile-post-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
	.voile-footer__columns{ grid-template-columns: repeat(2, 1fr); }
	.voile-footer__col--logo{ justify-content:flex-start; grid-column: 1 / -1; }
	.voile-newsletter__form{ flex-direction:column; }
	.voile-hero__slides{ height: 70vh; }
	.voile-hero__caption{ max-width: 90%; bottom: 2rem; }
}

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

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce){
	*{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}