/* ==========================================================================
   Iwan Photography — main stylesheet
   Fancy-but-light: warm off-white palette, serif display type, generous
   whitespace, full-bleed photography moments.
   ========================================================================== */

:root {
	--color-bg: #faf7f2;
	--color-bg-alt: #ffffff;
	--color-text: #2b2723;
	--color-text-muted: #837a6d;
	--color-accent: #ad875a;
	--color-accent-soft: #e7dac7;
	--color-border: #e9e2d6;
	--color-overlay: rgba(24, 19, 14, 0.38);
	--color-overlay-strong: rgba(20, 15, 10, 0.55);

	/* Footer — "Trendy & Metropolitan" palette */
	--color-footer-bg: #4d585b;      /* Charcoal */
	--color-footer-bg-alt: #3d474a;  /* slightly deeper, for subtle inner contrast */
	--color-footer-accent: #dbae58;  /* Gold */
	--color-footer-accent-2: #488a99; /* Dark Aqua */
	--color-footer-muted: #b4b4b4;   /* Gray */

	--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;

	--container-width: 1180px;
	--container-narrow: 1180px; /* unified with --container-width: every page now reads at the same 1180px column. */

	--header-height: 96px;
	--header-total-height: 140px; /* header-height + the site-header__inner padding (28px top + 16px bottom) */
	--transition-base: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

	/* Buttons — site-wide emerald green (Add to Cart / Check Availability,
	   404 back-home, pagination's current page, comment submit, etc).
	   Picked from the user's own swatch reference: base = swatch 3,
	   hover = swatch 2 (one step darker). */
	--color-button: #125f52;
	--color-button-dark: #0e4a3a;
}

/* --------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration: none;
}

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--color-text);
}

p { margin: 0 0 1.3em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1em;
	background: var(--color-text);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 10000;
	transition: top 0.2s ease;
}
.skip-link:focus { top: 1em; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}
.container--narrow { max-width: var(--container-narrow); }

.section-eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 1em;
}
.section-eyebrow--center { text-align: center; }

/* !important on the color trio — on WooCommerce pages, the plugin's own
   stylesheet styles `button.button`/`a.button`/`input.button` with its
   own purple brand color at a similar specificity, and source order
   isn't reliable since WC can enqueue after ours. Pinning the win here
   keeps every button (shop, cart, 404, pagination, comments) emerald. */
.button {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1em 2.4em;
	background: var(--color-button) !important;
	color: #fff !important;
	border: 1px solid var(--color-button) !important;
	border-radius: 999px;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.button:hover { background: var(--color-button-dark) !important; border-color: var(--color-button-dark) !important; }
.button--outline {
	background: transparent !important;
	color: var(--color-button) !important;
	border-color: var(--color-button) !important;
}
.button--outline:hover { background: var(--color-button) !important; color: #fff !important; }

/* --------------------------------------------------------------------
   Header — ALWAYS full-width, even where the body content beneath is
   contained. Logo centered, menus split either side. Stays fixed/sticky
   on every page; starts transparent and flips solid on scroll only on
   pages with a photo banner right behind it (see .has-page-banner below).
   ------------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	width: 100%;
	z-index: 1000;
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

/* Pages with no photo banner directly under the header: push the page's
   own content down by the header's height, since the header no longer
   takes up space in normal document flow now that it's fixed everywhere. */
body:not(.has-page-banner) {
	padding-top: var(--header-total-height);
}

/* Pages WITH a banner: header floats transparent over that photo until
   scrolled, exactly like the homepage. */
.site-header--overlay {
	background: transparent;
	border-bottom-color: transparent;
	transition: background var(--transition-base), border-color var(--transition-base);
}
.site-header--overlay.is-scrolled {
	background: var(--color-bg-alt);
	border-bottom-color: var(--color-border);
}
.site-header--overlay .site-header__logo-text,
.site-header--overlay .menu a {
	color: #fff;
	transition: color var(--transition-base);
}
.site-header--overlay.is-scrolled .site-header__logo-text,
.site-header--overlay.is-scrolled .menu a {
	color: var(--color-text);
}

.site-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 32px 16px;
	min-height: var(--header-height);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.site-header__logo {
	text-align: center;
	grid-column: 2;
}
.site-header__logo-link { display: inline-block; }
.site-header__logo-text {
	font-family: var(--font-display);
	font-size: 26px;
	letter-spacing: 0.06em;
	font-style: italic;
	white-space: nowrap;
}

/* Dual logo swap: DARK logo (Site Identity's own) is shown by default —
   every inner page, and the front page once scrolled. The LIGHT logo
   (uploaded separately) only shows for the first moment on the front
   page, while the header still floats transparently over the photo. */
.site-header__logo-img {
	max-height: 64px;
	width: auto;
	margin: 0 auto;
	display: block;
}
.site-header__logo-img--light { display: none; }

.site-header--overlay.has-light-logo:not(.is-scrolled) .site-header__logo-img--dark { display: none; }
.site-header--overlay.has-light-logo:not(.is-scrolled) .site-header__logo-img--light { display: block; }

.site-header__menu { grid-column: 1; }
.site-header__menu--right { grid-column: 3; }

.site-header__menu .menu {
	display: flex;
	gap: 28px;
}
.site-header__menu--right .menu { justify-content: flex-end; }

.site-header__menu .menu a {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-base), color var(--transition-base);
}
.site-header__menu .menu a:hover,
.site-header__menu .menu .current-menu-item > a {
	border-bottom-color: currentColor;
}

/* Dropdown submenus (desktop) — shown on hover or keyboard focus. */
.site-header__menu .menu li { position: relative; }
.site-header__menu .menu li.menu-item-has-children > a { padding-right: 14px; position: relative; }
.site-header__menu .menu li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}
.site-header__menu .menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 10px 0;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	box-shadow: 0 14px 32px rgba(20, 15, 10, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 200;
}
.site-header__menu--right .menu .sub-menu { left: auto; right: 0; }
.site-header__menu .menu li:hover > .sub-menu,
.site-header__menu .menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-header__menu .menu .sub-menu li { width: 100%; }
.site-header__menu .menu .sub-menu a {
	display: block;
	padding: 10px 22px;
	white-space: nowrap;
	color: var(--color-text);
	border-bottom: 0;
}
.site-header__menu .menu .sub-menu a:hover { color: var(--color-accent); }
.site-header__menu .menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}
.site-header__menu--right .menu .sub-menu .sub-menu { left: auto; right: 100%; }

.site-header__toggle {
	display: none;
	grid-column: 3;
	justify-self: end;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	flex-direction: column;
	gap: 5px;
}
.site-header__toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
}

.site-header__mobile-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 0 32px 24px;
	background: var(--color-bg-alt);
}
.site-header__mobile-menu.is-open { display: flex; }
.mobile-menu-list { display: flex; flex-direction: column; }
.mobile-menu-list a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mobile-menu-list .sub-menu {
	display: flex;
	flex-direction: column;
	padding-left: 18px;
}
.mobile-menu-list .sub-menu a {
	padding: 10px 0;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}

@media (max-width: 860px) {
	.site-header__menu--left,
	.site-header__menu--right { display: none; }
	.site-header__inner { grid-template-columns: auto 1fr auto; }
	.site-header__logo { grid-column: 2; }
	.site-header__toggle { display: flex; grid-column: 3; }
}

/* --------------------------------------------------------------------
   Hero slider wrapper (front page) — the slider itself is rendered by
   the Flows Slider plugin's own shortcode markup/CSS; this just gives
   it a positioning context for the down-arrow scroll cue, and styles
   the admin-only placeholder shown when no slider is configured yet.
   ------------------------------------------------------------------ */
.hero-slider-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hero-slider-wrap__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 70vh;
	min-height: 480px;
	padding: 0 24px;
	background: linear-gradient(135deg, #3c342a, #241f19 60%, #4a3d2c);
}
.hero-slider-wrap__placeholder .hero-slide__eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-bottom: 0.9em;
	color: rgba(255,255,255,0.85);
}
.hero-slider-wrap__placeholder .hero-slide__title {
	font-size: clamp(32px, 5.5vw, 64px);
	font-style: italic;
	color: #fff;
	margin: 0;
}
.hero-slider-wrap__placeholder .hero-slide__hint {
	color: rgba(255,255,255,0.8);
	font-size: 14px;
	margin: 1em auto 0;
	max-width: 420px;
}

.hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	animation: iwanphoto-bounce 2.2s ease-in-out infinite;
}
.hero-scroll-cue__arrow {
	width: 12px; height: 12px;
	border-right: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(45deg);
}
@keyframes iwanphoto-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-scroll-cue { animation: none; }
}

/* --------------------------------------------------------------------
   Front page sections
   ------------------------------------------------------------------ */
.site-main--front { background: var(--color-bg); }

.front-section { padding: 108px 0; }
.front-intro { text-align: center; }
.front-intro__title { font-size: clamp(30px, 4vw, 44px); font-style: italic; }
.front-intro__desc { color: var(--color-text-muted); font-size: 18px; }

.front-services { background: var(--color-bg-alt); }

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}
.service-card {
	position: relative;
	display: block;
	border-radius: 4px;
	overflow: hidden;
}
.service-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--color-accent-soft);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
.service-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20,15,10,0.55) 0%, rgba(20,15,10,0.05) 55%);
	opacity: 0;
	transition: opacity var(--transition-base);
}
.service-card__title {
	position: relative;
	z-index: 1;
	color: #fff;
	font-style: italic;
	font-size: 22px;
	text-align: center;
	padding: 20px 16px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base);
}
.service-card__media:has(.service-card__title) { background-color: var(--color-text); }
.service-card__overlay,
.service-card__title { opacity: 1; transform: translateY(0); }
a.service-card:hover .service-card__media { transform: scale(1.02); }
a.service-card .service-card__media { transition: transform 0.6s ease; }
.service-card--empty .service-card__media {
	background: linear-gradient(135deg, var(--color-accent-soft), var(--color-border));
}
.service-grid__hint {
	text-align: center;
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 20px;
}

@media (max-width: 900px) {
	.service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.service-grid { grid-template-columns: 1fr; }
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 32px;
	margin-top: 48px;
}
.story-card__link { display: block; }
.story-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-accent-soft);
}
.story-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.story-card__link:hover .story-card__media img { transform: scale(1.05); }
.story-card__media--placeholder {
	background: linear-gradient(135deg, var(--color-accent-soft), var(--color-border));
}
.story-card__body { padding-top: 18px; text-align: center; }
.story-card__date {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.story-card__title {
	font-size: 22px;
	margin: 0.35em 0 0;
	font-style: italic;
}
.story-card__excerpt {
	color: var(--color-text-muted);
	font-size: 15px;
	margin: 0.6em 0 0;
}
.story-grid__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--color-text-muted);
	padding: 40px 0;
}
.front-cta { text-align: center; }
.front-cta__title { font-size: clamp(26px, 3.4vw, 38px); font-style: italic; }
.front-cta__actions { margin-top: 28px; }

@media (max-width: 900px) {
	.story-grid { grid-template-columns: repeat(2, 1fr); }
	.front-section { padding: 72px 0; }
}
@media (max-width: 560px) {
	.story-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Page banner (single / page templates)
   ------------------------------------------------------------------ */
.page-banner {
	position: relative;
	width: 100%;
	height: 56vh;
	min-height: 340px;
	overflow: hidden;
}
.page-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.15), var(--color-overlay-strong));
}
.page-banner__caption {
	position: absolute;
	left: 50%; bottom: 40px;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
	width: 100%;
}
.page-banner__title {
	color: #fff;
	font-size: clamp(28px, 4.5vw, 48px);
	font-style: italic;
	margin: 0.2em 0;
}
.page-banner--full img { height: 70vh; }
/* Single post header: keep the original full-resolution upload (no
   WordPress-generated crop) but still frame it at a consistent 16:9
   in the browser, via aspect-ratio instead of a fixed vh height. */
.page-banner--ratio-16x9 { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
/* When a Flows Slider is chosen for this page instead of a plain featured
   image, let the slider use its own configured height rather than the
   fixed page-banner height above. */
.page-banner--slider { height: auto; min-height: 0; }

.post-meta__categories { display: block; }
.post-meta__categories a {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-soft);
	margin-right: 12px;
}
.post-meta__date {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.75);
}

/* --------------------------------------------------------------------
   Page / single content
   ------------------------------------------------------------------ */
.site-main--page,
.site-main--single { padding-bottom: 100px; }

.page-content__header,
.single-post__header {
	text-align: center;
	padding: 72px 0 24px;
}
.page-content__title,
.single-post__title {
	font-size: clamp(30px, 4.5vw, 46px);
	font-style: italic;
}
.single-post__header .post-meta__categories a { color: var(--color-accent); }
.single-post__header .post-meta__date { color: var(--color-text-muted); }

.entry-content { font-size: 18px; line-height: 1.85; padding-top: 40px; }
.entry-content h2 { font-size: 30px; margin-top: 1.6em; font-style: italic; }
.entry-content h3 { font-size: 24px; margin-top: 1.4em; }
.entry-content img { border-radius: 4px; margin: 1.6em 0; }
.entry-content a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent-soft); }
.entry-content blockquote {
	margin: 2em 0;
	padding: 0.2em 0 0.2em 28px;
	border-left: 2px solid var(--color-accent);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	color: var(--color-text-muted);
}

.page-content__body--full { padding: 60px 32px 0; max-width: 1180px; margin: 0 auto; }

.single-post__tags { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
	font-size: 12px;
	letter-spacing: 0.08em;
	padding: 6px 16px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text-muted);
	transition: border-color var(--transition-base), color var(--transition-base);
}
.tag-pill:hover { border-color: var(--color-accent); color: var(--color-accent); }

.single-post__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}
.single-post__nav-item--next { text-align: right; }
.single-post__nav-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 6px;
}
.single-post__nav-title { font-family: var(--font-display); font-style: italic; font-size: 19px; }

@media (max-width: 600px) {
	.single-post__nav { grid-template-columns: 1fr; text-align: left !important; }
	.single-post__nav-item--next { text-align: left; }
}

/* --------------------------------------------------------------------
   Related posts (bottom of single.php) — sits in the wider 1180px
   container, unlike the narrow 760px reading column above it.
   ------------------------------------------------------------------ */
.related-posts { padding: 24px 0 100px; }
.related-posts__title { text-align: center; font-size: clamp(24px, 3.2vw, 32px); font-style: italic; margin-bottom: 8px; }
.story-grid--related { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
/* Square crop here specifically — the general story-card (blog archive,
   front page) keeps its 4:5 portrait crop; only the related-posts pair
   goes square. Widening the grid's max-width (above) keeps each square's
   side close to the original 4:5 box's height, so it doesn't shrink. */
.story-grid--related .story-card__media { aspect-ratio: 1 / 1; }
@media (max-width: 560px) { .story-grid--related { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   Archive / category / tag / search grids
   ------------------------------------------------------------------ */
.site-main--archive { padding: 72px 0 100px; }
.archive-header { text-align: center; margin-bottom: 24px; }
.archive-header__title { font-size: clamp(28px, 4vw, 42px); font-style: italic; }
.archive-header__desc { color: var(--color-text-muted); margin: 0.6em auto 0; }
.archive-header__search,
.error-404__search { margin: 28px auto 0; max-width: 420px; }

.story-grid--archive { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .story-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .story-grid--archive { grid-template-columns: 1fr; } }

.site-search-form {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-text);
}
.site-search-form__input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: 16px;
	padding: 10px 4px;
	color: var(--color-text);
}
.site-search-form__input:focus { outline: none; }
.site-search-form__submit {
	background: none;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	padding: 8px;
}

/* --------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------ */
.site-pagination { margin-top: 56px; text-align: center; }
.site-pagination ul { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.site-pagination a,
.site-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 13px;
}
.site-pagination .current { background: var(--color-button); color: #fff; border-color: var(--color-button); }
.site-pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --------------------------------------------------------------------
   404
   ------------------------------------------------------------------ */
.site-main--404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 0;
}
.error-404__title { font-size: clamp(30px, 4.5vw, 44px); font-style: italic; }
.error-404__desc { color: var(--color-text-muted); max-width: 480px; margin: 0 auto; }
.error-404__search + .button { margin-top: 32px; }

/* --------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
	background: var(--color-footer-bg);
	color: rgba(255,255,255,0.82);
	padding: 90px 0 40px;
	text-align: center;
}
.site-footer__inner { max-width: 640px; margin: 0 auto; padding: 0 32px; }
.site-footer__top-menus {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px 32px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.site-footer__top-menu { flex: 1 1 auto; }
.site-footer__top-menu .site-footer__menu { margin: 0; }
.site-footer__top-menu--left .site-footer__menu { justify-content: flex-start; }
.site-footer__top-menu--right .site-footer__menu { justify-content: flex-end; }
@media (max-width: 640px) {
	.site-footer__top-menus { flex-direction: column; gap: 4px; margin-bottom: 28px; }
	.site-footer__top-menu--left .site-footer__menu,
	.site-footer__top-menu--right .site-footer__menu { justify-content: center; }
}
.site-footer__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 220px;
	max-height: 56px;
	margin: 0 auto 20px;
	filter: brightness(0) invert(1);
}
.site-footer__tagline { font-family: var(--font-display); font-style: italic; font-size: 20px; color: #fff; }
.site-footer__address { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: -6px; }
.site-footer__links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 24px 0; }
.site-footer__links a {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding-bottom: 3px;
}
.site-footer__links a:hover { border-color: var(--color-footer-accent); color: var(--color-footer-accent); }
.site-footer__widgets { margin: 24px 0; font-size: 14px; color: rgba(255,255,255,0.6); }
.site-footer__menu { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.site-footer__menu a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); transition: color var(--transition-base); }
.site-footer__menu a:hover { color: var(--color-footer-accent); }
.site-footer__copyright { font-size: 12px; color: var(--color-footer-muted); margin-top: 32px; }

/* --------------------------------------------------------------------
   Comments (kept simple & on-brand)
   ------------------------------------------------------------------ */
.comment-list { margin: 0 0 32px; }
.comment-list .comment { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	margin-bottom: 14px;
	background: var(--color-bg-alt);
}
.comment-respond .form-submit input {
	font-family: var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 12px 28px;
	background: var(--color-button);
	color: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.comment-respond .form-submit input:hover { background: var(--color-button-dark); }

/* --------------------------------------------------------------------
   WooCommerce — product pages are treated as service/package pages:
   a full-bleed photo banner with title + price overlaid, then the
   short description, description, and purchase button. Shop/category
   archives and the related-packages grid share one product-card style.
   ------------------------------------------------------------------ */
.site-main--shop { padding: 72px 0 100px; }
.site-main--product { padding: 0 0 0; }

/* Product banner (single product page) */
.product-banner {
	position: relative;
	width: 100%;
	height: 78vh;
	min-height: 460px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.product-banner__overlay {
	/* No gradient across the photo itself — the title/price box below
	   handles all the contrast, so the image shows at its true brightness. */
	display: none;
}
.product-banner__box {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	max-width: none;
	background: rgba(0, 0, 0, 0.7);
	padding: 28px 52px;
	text-align: center;
}
.product-banner__title {
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	font-style: italic;
	margin: 0 0 0.25em;
}
.product-banner__price,
.product-banner__price .amount,
.product-banner__price bdi {
	color: #fff;
	font-family: var(--font-body);
	font-size: 19px;
	letter-spacing: 0.04em;
}

/* Product summary — short description, description, purchase button.
   Same 1180px reading width as pages and posts. */
.product-summary { padding: 56px 0 40px; }
.product-summary__short-description { font-style: italic; color: var(--color-text-muted); margin-bottom: 1.4em; }

/* Price + purchase button sit together between the short description and
   the full description — made deliberately easy to spot: a bordered
   panel, the price large and in the accent color. */
.product-summary__purchase {
	margin: 8px 0 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.product-summary__price {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 30px);
	font-style: italic;
	color: var(--color-accent);
}
.product-summary__price .price ins { text-decoration: none; }
.product-summary__cart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.product-summary__cart .quantity { display: inline-block; }
.product-summary__cart .quantity .qty {
	width: 64px;
	padding: 0.85em 0.6em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 15px;
	background: var(--color-bg-alt);
}
/* !important throughout — WooCommerce's own bundled stylesheet styles
   `button.button`/`a.button` with its own purple brand color, and it was
   winning over our plain .single_add_to_cart_button.button rule despite
   our extra class, so this pins the win explicitly. */
.product-summary__cart .single_add_to_cart_button.button {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1em 2.4em;
	background: var(--color-button) !important;
	color: #fff !important;
	border: 1px solid var(--color-button) !important;
	border-radius: 999px;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.product-summary__cart .single_add_to_cart_button.button:hover {
	background: var(--color-button-dark) !important;
	border-color: var(--color-button-dark) !important;
}

/* Product cards — shared by the shop/category grid and the
   related-packages grid. Price + Add to Cart are hidden on the
   shop/category archive via content-product.php's own conditional. */
ul.products.product-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 44px 32px !important;
	margin: 48px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}
/* WooCommerce's own bundled stylesheet ships `ul.products li.product`
   with a fixed float + percentage width (for its own default column
   layout), at higher specificity than our card classes — it was
   overriding the grid track width and squashing every card down to a
   sliver, and stacking cards one per row instead of side by side.
   Reset those properties back to "let the grid decide". */
ul.products.product-card-grid li.product {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	list-style: none;
}
.product-card__link { display: block; }
.product-card__media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-accent-soft); }
/* !important pins the crop against WooCommerce's own bundled stylesheet,
   which ships a more specific `.woocommerce ul.products li.product a img`
   rule (width:100%; height:auto) that otherwise wins the cascade and
   leaves the image floating at its natural ratio inside the square box. */
.product-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.6s ease;
}
.product-card__link:hover .product-card__media img { transform: scale(1.05); }
.product-card__body { padding-top: 18px; text-align: center; }
.product-card__title { font-size: 22px; margin: 0.35em 0 0; font-style: italic; }
.product-card__price { color: var(--color-text-muted); font-size: 15px; margin: 0.5em 0 0; }
.product-card__cart { text-align: center; margin-top: 14px; }
.product-card__cart .button {
	font-size: 11px;
	padding: 0.8em 1.8em;
}
@media (max-width: 900px) { ul.products.product-card-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { ul.products.product-card-grid { grid-template-columns: 1fr !important; } }

/* Related packages section (bottom of single product page) — wider
   1180px container, same grid styling as the shop page. */
.related-packages { padding: 64px 0 100px; }
.related-packages__title { text-align: center; font-size: clamp(26px, 3.4vw, 36px); font-style: italic; margin-bottom: 8px; }
/* No column/width override here on purpose — it now inherits the same
   3-column, left-aligned grid as the shop page. With only 2 related
   items, they simply sit left-aligned in the first row instead of the
   3rd column ever showing (nothing to stretch or center around). */