/*
Windy Maquis — main stylesheet.
Design tokens, base styles, header/footer, homepage sections,
shop/category grid, and single product page.
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Colors */
	--color-paper: #f6f3ec;
	--color-ink: #2b2823;
	--color-accent: #3e5c63; /* Aegean blue-teal */
	--color-accent-cta: #b36a46; /* Sun-dried terracotta */
	--color-stone: #dcd5c6;
	--color-olive: #6b7256;
	--color-border: #d8cfbc;

	/* Typography stacks (system fonts for now — no external font requests) */
	--font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', serif;
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;

	/* Layout */
	--container-width: 1200px;

	/* Motion */
	--transition-base: 200ms ease;
}

/* ==========================================================================
   2. Base global styling
   ========================================================================== */

body {
	background-color: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-3);
}

p {
	margin: 0 0 var(--space-3);
}

a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--transition-base);
}

a:hover,
a:focus-visible {
	color: var(--color-accent-cta);
}

button,
.button,
a.button,
input[type='submit'],
input[type='button'] {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background-color: var(--color-accent-cta);
	color: var(--color-paper);
	border: none;
	padding: var(--space-2) var(--space-4);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition-base), opacity var(--transition-base);
}

button:hover,
.button:hover,
a.button:hover,
input[type='submit']:hover,
input[type='button']:hover {
	background-color: var(--color-ink);
	color: var(--color-paper);
}

figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.site-main {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-6) var(--space-4);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
	background-color: var(--color-paper);
	border-bottom: 2px solid var(--color-accent);
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}

.site-header__logo {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--color-ink);
	text-decoration: none;
}

.site-header__nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.site-header__nav a {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--transition-base);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.site-header__inner {
		padding: var(--space-4) var(--space-5);
	}
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-paper);
	border-top: 2px solid var(--color-accent);
}

.site-footer__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-6) var(--space-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
}

.site-footer__nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
}

.site-footer__nav a {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--transition-base);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
	color: var(--color-accent);
}

.site-footer__copyright {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-ink);
	opacity: 0.6;
	margin: 0;
}

/* ==========================================================================
   5. Homepage sections (Step 3)
   ========================================================================== */

/* Hero — full-screen photos, breaks out of the site-main container on purpose */
.home-hero {
	display: flex;
	flex-direction: column;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: calc(var(--space-6) * -1);
}

.home-hero__media-row {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.home-hero__media-row {
		flex-direction: row;
		min-height: 100vh;
	}
}

.home-hero__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--color-stone);
	overflow: hidden;
}

@media (min-width: 768px) {
	.home-hero__media {
		width: auto;
		aspect-ratio: auto;
		flex: 1 1 0%;
	}
}

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

.home-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-4);
	padding: var(--space-7) var(--space-4);
	max-width: 480px;
	margin-inline: auto;
}

.home-hero__tagline {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
	text-align: center;
}

@media (min-width: 1024px) {
	.home-hero__tagline {
		font-size: 2.25rem;
	}
}

.home-hero__cta.button {
	padding: var(--space-3) var(--space-6);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

/* Brand line */
.home-brand-line {
	max-width: 640px;
	margin-inline: auto;
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.home-brand-line p {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	color: var(--color-ink);
	margin: 0;
}

/* Featured categories */
.home-categories {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-5) var(--space-4) var(--space-7);
}

.home-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.home-categories__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.home-category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-ink);
}

.home-category-tile__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--color-stone);
	background-size: cover;
	background-position: center;
}

.home-category-tile__name {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-accent);
}

/* Product spotlight */
.home-spotlight {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-5) var(--space-4) var(--space-7);
}

.home-spotlight__heading {
	text-align: center;
	margin-bottom: var(--space-5);
	color: var(--color-accent);
}

.home-spotlight__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5) var(--space-4);
}

@media (min-width: 768px) {
	.home-spotlight__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.home-spotlight-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-ink);
}

.home-spotlight-card__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.home-spotlight-card__name {
	font-family: var(--font-serif);
	font-size: 0.95rem;
}

.home-spotlight-card__price {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	opacity: 0.8;
}

/* Supporting visual */
.home-supporting {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-5) var(--space-4) var(--space-7);
	text-align: center;
}

.home-supporting__image {
	width: 100%;
	max-width: 720px;
	margin: 0 auto var(--space-3);
}

.home-supporting__caption {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-ink);
	opacity: 0.75;
	margin: 0;
}

/* Newsletter (visual placeholder only) */
.home-newsletter {
	background-color: var(--color-stone);
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.home-newsletter__heading {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	margin: 0 0 var(--space-3);
}

.home-newsletter__form {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	max-width: 420px;
	margin-inline: auto;
}

.home-newsletter__input {
	flex: 1 1 220px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	background-color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-ink);
}

.home-newsletter__submit {
	flex: 0 0 auto;
}

/* ==========================================================================
   6. Single product page (native WooCommerce markup, restyled only —
   no template overrides, no core files touched)
   ========================================================================== */

.woocommerce-breadcrumb {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-ink);
	opacity: 0.6;
	margin-bottom: var(--space-5);
}

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

.woocommerce-breadcrumb a:hover {
	color: var(--color-accent);
}

div.product {
	display: flex !important;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	div.product {
		flex-direction: row !important;
		/* Keep wrap ON — the tabs/related-products rule just below
		   depends on it to push onto their own row. The actual bug
		   was that gallery (58%) + summary (42%) + this gap added up
		   to MORE than 100% of the row, so the browser correctly
		   wrapped summary onto its own line below the gallery too —
		   every time, regardless of screen width. Fixed by giving the
		   gallery/summary widths below room for the gap via calc(),
		   instead of a plain 58/42 split that left no space for it. */
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: var(--space-7);
	}

	/* The gallery + summary share one row (58% + 42% = 100%, no
	   room left), so anything else in .product — review tabs,
	   related products — is forced onto its own full-width row
	   below, instead of squeezing into a third flex column. */
	div.product .woocommerce-tabs,
	div.product > .related.products {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* Gallery — every photo shown full-size, one after another, as part
   of the normal page scroll (no nested scrolling box — that pattern
   caused visual glitches). On desktop, the whole page snaps between
   photos as you scroll past them; once you're past the last one,
   scrolling continues normally into the rest of the page. */
div.product div.woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	/* WooCommerce starts the gallery at opacity:0 and normally fades
	   it in via the script we intentionally disabled above — without
	   this override the whole gallery stays invisible forever. */
	opacity: 1 !important;
}

@media (min-width: 900px) {
	div.product div.woocommerce-product-gallery {
		/* Subtracting half the gap from each side (below too) means
		   58% + 42% + the real gap now actually equals 100%, instead
		   of overflowing it — that overflow was the actual bug. */
		flex: 0 0 calc(58% - (var(--space-7) / 2)) !important;
		width: auto !important;
	}

	/* The snap points belong to the page scroll, not a nested box. */
	body.single-product {
		scroll-snap-type: y proximity;
	}
}

div.product .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The height lives on this wrapper div, not the <img> itself —
   sized <img> tags get special browser handling (auto aspect-ratio
   from their width/height attributes) that fights an explicit
   height set directly on the image. A plain div doesn't have that
   problem, so this is the reliable way to force a full-height slide. */
div.product .woocommerce-product-gallery__image {
	width: 100% !important;
	margin: 0 !important;
	border: none !important;
}

@media (min-width: 900px) {
	div.product .woocommerce-product-gallery__image {
		/* Full screen height (100vh) cropped some photos too
		   aggressively — a moderate, consistent portrait ratio shows
		   much more of each actual photo instead of mostly background. */
		aspect-ratio: 4 / 5;
		height: auto;
		scroll-snap-align: start;
		/* Without this, a fast scroll/flick can sail past several
		   photos before settling — this forces a firm stop at every
		   single one, every time, regardless of scroll speed. */
		scroll-snap-stop: always;
	}
}

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

@media (min-width: 900px) {
	div.product .woocommerce-product-gallery__image img {
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Summary — simple sticky column beside the gallery on desktop */
div.product div.summary.entry-summary {
	width: 100% !important;
	float: none !important;
}

@media (min-width: 900px) {
	div.product div.summary.entry-summary {
		/* Same gap-aware calc as the gallery, so 58% + 42% + the real
		   gap adds up to exactly 100% instead of overflowing it. */
		flex: 0 0 calc(42% - (var(--space-7) / 2)) !important;
		width: auto !important;
		position: sticky !important;
		top: 100px !important;
		align-self: flex-start;
	}
}

.product_title.entry-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 2rem;
	margin: 0 0 var(--space-3);
}

.summary .price {
	font-family: var(--font-sans);
	font-size: 1.125rem;
	color: var(--color-ink) !important;
	margin: 0 0 var(--space-4);
}

.summary .price del {
	opacity: 0.5;
	margin-right: var(--space-2);
	text-decoration: line-through;
}

.summary .price ins {
	text-decoration: none;
}

.summary form.cart {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.summary .quantity .qty {
	width: 4rem;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	background-color: var(--color-paper);
	font-family: var(--font-sans);
	color: var(--color-ink);
}

.single_add_to_cart_button.button {
	background-color: var(--color-accent-cta) !important;
	color: var(--color-paper) !important;
	border: none !important;
}

.single_add_to_cart_button.button:hover {
	background-color: var(--color-ink) !important;
}

.product_meta {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-ink);
	opacity: 0.75;
}

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

/* Price and add-to-cart buttons, everywhere (shop grid, homepage
   spotlight, single product) — WooCommerce's own CSS is more
   specific than a plain .price/.button rule, so these need to
   win deliberately rather than being left to whichever loads last. */
.price {
	color: var(--color-ink) !important;
}

.price del {
	opacity: 0.5;
	text-decoration: line-through;
}

.price ins {
	text-decoration: none;
}

.button.add_to_cart_button,
.button.ajax_add_to_cart {
	background-color: var(--color-accent-cta) !important;
	color: var(--color-paper) !important;
	border: none !important;
}

.button.add_to_cart_button:hover,
.button.ajax_add_to_cart:hover {
	background-color: var(--color-ink) !important;
}

/* Reviews / description tabs on the single product page */
.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: var(--space-5);
	margin: 0 0 var(--space-5);
	padding: 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
	text-decoration: none;
	display: inline-block;
	padding-bottom: var(--space-2);
	opacity: 0.6;
}

.woocommerce-tabs ul.tabs li.active a {
	opacity: 1;
	color: var(--color-accent);
}

.woocommerce-tabs .panel {
	max-width: 640px;
}

#reviews #submit,
.woocommerce #respond input#submit {
	background-color: var(--color-accent-cta) !important;
	color: var(--color-paper) !important;
	border: none !important;
}

/* ==========================================================================
   7. Shop / category page (native WooCommerce archive, restyled only)
   ========================================================================== */

/* WooCommerce's default sidebar (search/pages/etc. widgets) isn't
   part of the design — a clean, wide product grid instead. */
#secondary.widget-area {
	display: none;
}

#primary.content-area {
	width: 100% !important;
	float: none !important;
}

.woocommerce-products-header__title {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	margin-bottom: var(--space-2);
}

.woocommerce-result-count {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-ink);
	opacity: 0.6;
}

.woocommerce-ordering select {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	background-color: var(--color-paper);
	color: var(--color-ink);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5) var(--space-4);
	list-style: none;
	margin: var(--space-5) 0 var(--space-7);
	padding: 0;
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product {
	text-align: left;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
	color: var(--color-ink);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin-bottom: var(--space-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	margin: 0 0 var(--space-1);
}

.woocommerce ul.products li.product .price {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	display: block;
}

.woocommerce ul.products li.product .button {
	margin-top: var(--space-3);
	font-size: 0.7rem;
	padding: var(--space-2) var(--space-3);
}

.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	gap: var(--space-2);
	padding: 0;
	margin: var(--space-5) 0 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-ink);
	padding: var(--space-2) var(--space-3);
	display: inline-block;
}