/**
 * Champagne - Main Stylesheet
 * Clean, modular, production-ready CSS for South Florida’s premier yacht & boating custom shop.
 *
 * All visual design lives here.
 * Organized by: base, layout, components, sections, responsive.
 *
 * @package Champagne
 */

/* ============================================
   CUSTOM FONTS (Self-hosted)
   ============================================ */

@font-face {
	font-family: 'Revans';
	src: url('../fonts/Revans-Normal.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Revans';
	src: url('../fonts/Revans-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Revans';
	src: url('../fonts/Revans-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* 
 * FONT LOADING – CHAMPAGNE
 * We are using a modern system sans (Inter / system stack) for a clean, premium, trustworthy feel.
 * For production, consider loading a high-quality variable font (Inter, Satoshi, or similar).
 * The old Revans files are no longer referenced by the design system.
 */
@font-face {
	font-family: 'Revans';
	src: url('../fonts/Revans-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ============================================
   ROOT VARIABLES
   ============================================ */

:root{
  --ink:#111827;
  --charcoal:#171f2b;
  --cream:#F5F1E7;
  --paper:#FAF7F0;
  --sand:#D7CCB8;
  --cigar:#8A6A3D;
  --brass:#C5A46D;
  --aqua:#3A6F71;
  --aqua-deep:#2A5F61;
  --coral:#A9745F;
  --muted:#6B7280;
  --line:rgba(17,24,39,.13);
  /* Map to existing for compatibility */
  --color-navy: #111827;
  --color-navy-dark: #171f2b;
  --color-navy-light: #1F2937;
  --color-navy-alt: #171f2b;
  --color-gold: #C5A46D;
  --color-gold-hover: #B2925D;
  --color-gold-dark: #8A6A3D;
  --color-offwhite: #F5F1E7;
  --color-cream: #F5F1E7;
  --color-sand: #D7CCB8;
  --color-teal: #3A6F71;
  --color-teal-light: #2A5F61;
  --color-text: #111827;
  --color-text-light: #F5F1E7;
  --color-white: #F5F1E7;
  --color-border: var(--line);
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-deep: var(--color-navy);
  --color-ink: var(--color-navy-dark);
  --color-accent: var(--color-gold);
  --color-accent-hover: var(--color-gold-hover);
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --container-max: 1180px;
  --header-height: 76px;
}

/* ============================================
   BASE / RESET
   ============================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	background-image: radial-gradient(circle at 20% 0%, rgba(197,164,109,.08), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.48), transparent 320px);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.serif{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.04em}

.topbar{background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:9px 12px}
.header-cart {font-size:12px; color:var(--color-gold); text-transform:uppercase; letter-spacing:.12em; margin-right:12px; }

.nav{position:sticky;top:0;z-index:10;background:rgba(250,247,240,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem; position:relative;}
.nav-inner > .site-brand {flex: 0 0 auto; min-width: 180px; white-space: nowrap;}
.nav-right {display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: flex-end;}
.site-nav {flex: 0 1 auto; display: flex; justify-content: flex-end; margin-left: auto;}
.site-header__actions {flex: 0 0 auto; margin-left: 1rem;}
.brand{font-family:Georgia,serif;font-size:24px;letter-spacing:-.03em}
.brand span{display:block;font-family:Inter,sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:-4px}
.links{display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#4B5563}
.site-nav.links .site-nav__list {display:flex;gap:28px;list-style:none;margin:0;padding:0}
.site-nav.links .site-nav__list > li > a {color:#4B5563;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.site-nav__list .sub-menu a { color: var(--color-white) !important; }
/* underline hover enabled using teal/aqua per request - removed the disable */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--brass);color:var(--ink);padding:14px 22px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transition:all .2s ease}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn:hover{background:var(--color-gold-hover);color:white}
.btn.dark:hover{background:var(--color-navy);color:white}
.btn.outline { background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); }
.btn.outline:hover{background:var(--color-navy);color:white;border-color:var(--color-navy)}

.artwork-hero .btn.outline {
  background: white;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.artwork-hero .btn.outline:hover {
  background: var(--color-navy);
  color: white;
  border-color: white;
}

.hero .btn.dark:hover {
  background: white;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.marquee{background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;display:flex;align-items:center;justify-content:center}
.marquee > div{display:inline-block;padding:8px 0;animation:marquee 20s linear infinite;font-size:13px;letter-spacing:.12em}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.hero{background:linear-gradient(90deg,var(--paper) 0 54%,var(--aqua) 54% 100%);min-height:720px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,transparent 0 60%,rgba(197,164,109,.24) 60% 60.4%,transparent 60.4%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.03fr .97fr;gap:52px;align-items:center;padding:72px 0}
.side-note{position:absolute;top:24px;right:24px;font-size:11px;letter-spacing:.2em;color:var(--brass);text-transform:uppercase}
.image-card{border-radius:8px;min-height:480px;background:var(--sand);box-shadow:0 20px 40px rgba(0,0,0,.12)}
.hero h1{font-size:clamp(48px,7vw,92px);line-height:.9;max-width:620px;margin:18px 0;color:var(--ink)}
.hero h1 .serif, .hero h1.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.04em}
.hero h1 em{font-style:italic;color:#8A6A3D}
.hero p{max-width:520px;font-size:17px;color:#4B5563;margin-bottom:28px}
.hero-actions{display:flex;gap:12px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--brass);font-weight:700}

.collections{padding:60px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-head h2{font-size:clamp(28px,3.8vw,42px)}
.section-head p{max-width:420px;color:var(--muted);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--cream);border:1px solid var(--line);border-radius:8px;position:relative;overflow:hidden}
.card .num{position:absolute;top:16px;right:18px;font-size:42px;font-weight:700;color:var(--brass);opacity:.15;line-height:1;z-index:2}
.card.one .num{color:var(--aqua)}
.card.two .num{color:var(--brass)}
.card.three .num{color:var(--coral)}
.card.four .num{color:var(--aqua-deep)}
.card .category-card__image {width:100%; display:block;}
.card .category-card__content {padding:22px 20px 26px;}
.card h3{font-size:15px;font-weight:700;margin:18px 0 8px}
.card p{font-size:13px;color:var(--muted);line-height:1.45}

/* Alternate background lightness for interior sections for visual separation */
.intro,
.hat-patches-section,
.instagram-feed {
	background: var(--paper);
}
.collections,
.package-section--charter,
.package-section--welcome {
	background: var(--cream);
}
/* Note: .categories-section (Collections by occasion.) uses --dark variant for ink bg + light text per design direction */


/* Make sure the feature split in hat-patches doesn't pick up extra feature styles that conflict with legacy content */
.hat-patches-section .feature-grid > div:last-child {
  padding-left: 0;
}
.hat-patches-section .feature h2 {
  /* reset if conflicting */
}

.feature{padding:72px 0;background:var(--paper)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.feature-grid > div:last-child {padding-left:1rem;}
.feature-img{min-height:420px;border-radius:8px; overflow:hidden;}
.feature h2{font-size:clamp(28px,4vw,42px);margin:12px 0 16px}
.feature .list{display:grid;gap:12px;margin-top:24px}
.feature .list > div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:15px}
.feature .list strong{font-weight:600}
.feature .list span{color:var(--brass);font-size:12px}

/* New stacked structure for package sections to match desired layout */
.section-visual {
	width: 100%;
	margin-bottom: 1.5rem;
}
.section-visual img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: cover;
}
.section-head {
	margin-bottom: 2rem;
}
.package-grid.three-col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}
.package-grid.three-col .package-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1rem;
}
.package-grid.three-col .package-card__image {
	height: 140px;
	margin-bottom: 0.5rem;
}
.package-grid.three-col .package-card h3 {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}
.package-grid.three-col .package-card p,
.package-grid.three-col .package-card__features {
	font-size: 0.85rem;
}

/* Ensure package cards inside split-right look good */
.split-right .package-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0;
}
.split-right .package-card__image {
  height: 120px;
  margin-bottom: 0.5rem;
}
.split-right .package-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.split-right .package-card p {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.split-right .package-card .package-card__features {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}
.split-right .package-card .sm-btn--outline {
  font-size: 0.7rem;
  padding: 6px 10px;
}

.quote{padding:64px 0;background:var(--ink);color:var(--cream);text-align:center}
.quote p{font-family:var(--font-serif);font-size:26px;max-width:620px;margin:0 auto 12px}

.footer{padding:48px 0;border-top:1px solid var(--line);background:var(--paper);font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr auto;gap:32px}
.footer h3{font-family:var(--font-serif);font-size:20px;margin-bottom:8px}

.intro{padding:72px 0;background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;align-items:start}
.intro h2{font-size:clamp(32px,4.5vw,48px);line-height:1.05;margin-top:8px}
.stat-row{display:flex;gap:32px;margin-top:28px}
.stat strong{display:block;font-size:28px;font-weight:700;color:var(--brass);line-height:1}
.stat span{font-size:13px;color:var(--muted)}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
	color: var(--color-gold);
}

h1, h2, h3, h4,
.section-label,
.section-heading h2,
.eyebrow {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 0.75em;
	font-weight: 700;
	letter-spacing: -0.018em;
}

h1 { 
	font-size: clamp(2.8rem, 7.5vw, 4.75rem); 
	letter-spacing: -0.035em;
}
h2 { 
	font-size: clamp(1.9rem, 5vw, 2.85rem); 
	letter-spacing: -0.025em;
}

p {
	margin: 0 0 1.25em;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 99999;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--color-deep);
	color: var(--color-white);
	font-weight: 600;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.sm-container {
	width: 100%;
	max-width: var(--container-max) !important;
	margin: 0 auto !important;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.home-panel {
	padding: 4.5rem 0;
}

.home-panel + .home-panel {
	padding-top: 3.5rem;
}

/* ============================================
   HOMEPAGE HERO (Image-based, matching live site)
   ============================================ */

/* Legacy homepage-hero styles disabled — using new .promo-block system for Champagne */
.homepage-hero {
	display: none !important;
}
	display: flex;
	align-items: center;
	color: var(--color-white);
}

.homepage-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.65) 100%);
	z-index: 1;
}

.homepage-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 580px;
	padding: 4.5rem 0 5.5rem;
	text-align: left;
}

/* Force hero content to left side within the normal content container on desktop */
@media (min-width: 768px) {
	.homepage-hero__inner {
		max-width: 560px;
		margin-right: auto;
		text-align: left;
	}
}

.homepage-hero h1 {
	font-size: clamp(2.9rem, 5.5vw, 4.6rem);
	margin-bottom: 1.25rem;
	line-height: 1.1;
}

.homepage-hero__text p {
	font-size: 1.1rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
	max-width: 520px;
	opacity: 0.92;
}

.homepage-hero .sm-btn {
	margin-top: 1.75rem;
}
.home-panel--cream  { 
	background: linear-gradient(160deg, var(--color-cream) 0%, #F0EDE3 100%); 
	color: var(--color-text); 
}
.home-panel--deep   { 
	background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); 
	color: var(--color-text-light); 
}
.home-panel--teal   { 
	background: linear-gradient(155deg, var(--color-teal) 0%, #333333 100%); 
	color: var(--color-white); 
}
.home-panel--ink    { 
	background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%); 
	color: var(--color-text-light); 
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
	position: relative;
	z-index: 100;
	/* Themed to mockup nav */
	background: transparent;
	color: var(--ink);
	/* border-bottom handled by .nav if needed */
}

.site-header__inner {
	display: flex;
	align-items: center;
	min-height: var(--header-height);
	gap: 1.5rem;
}

.site-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: Georgia, serif;
	font-size: 24px;
	letter-spacing: -.03em;
	color: var(--ink);
	line-height: 1;
	text-decoration: none;
}

.site-brand__logo-text { font-family: Georgia, serif; font-size: 24px; letter-spacing: -.03em; }
.site-brand__tagline { display: block; font-family: Inter, sans-serif; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: -4px; }

.site-brand__logo {
	max-height: 48px;
	width: auto;
}

.site-brand__logo--dark-bg {
	display: none;
}

.site-brand__logo--light-bg {
	display: inline-block;
}

/* Show relevant logo based on header background */
.header-dark .site-brand__logo--light-bg {
	display: none;
}

.header-dark .site-brand__logo--dark-bg {
	display: inline-block;
}

/* Legacy support for default text-based or dark logos that need inversion on light/dark contexts.
   Main logo now uses dedicated asset files (LOGO_Champagne_dark.webp / LOGO_Champagne_lights.webp) 
   chosen based on background. */
.site-brand__logo--default {
	filter: brightness(0) invert(1);
}

/* Generic text logo for foundation (replace with real logo in branded themes) */
.site-brand__logo-text {
	font-family: Georgia, serif;
	font-size: 24px;
	letter-spacing: -.03em;
	color: inherit;
	line-height: 1;
}

.site-brand__tagline {
	display: block;
	font-family: Inter, sans-serif;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: -4px;
}

.site-brand__text {
	white-space: nowrap;
}

.site-menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-navy);
	padding: 8px 16px;
	font-size: 0.9rem;
	border-radius: 2px;
	cursor: pointer;
}

.site-menu-toggle__icon {
	display: inline-block;
	width: 18px;
	height: 2px;
	background: currentColor;
	position: relative;
	margin-left: 8px;
}
.site-menu-toggle__icon::before,
.site-menu-toggle__icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}
.site-menu-toggle__icon::before { top: -6px; }
.site-menu-toggle__icon::after  { top: 6px; }

.site-nav {
	display: flex;
	align-items: center;
}

.site-nav__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2.1rem; /* increased spacing between nav links */
	font-size: 0.95rem;
	font-family: var(--font-sans);
	letter-spacing: 0.01em;
	white-space: nowrap; /* force all menu items to stay on one line */
}

.site-nav__list a {
	position: relative;
	color: #4B5563;
	opacity: 0.85;
	padding: 6px 0;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.site-nav__list a {
	/* underline via ::before so ::after remains free for dropdown caret on parents */
}

.site-nav__list a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 1px;
	width: 0;
	height: 2px;
	background: var(--aqua);
	transition: width 0.25s cubic-bezier(0.23, 1, 0.32, 1), left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	transform: translateX(-50%);
}

.site-nav__list a:hover,
.site-nav__list a:focus {
	opacity: 1;
}

.site-nav__list a:hover::before,
.site-nav__list a:focus::before {
	width: 2.25rem; /* short, elegant, premium underline - not full width or too long */
}

/* Active / Current page styling - short gold underline */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a {
	opacity: 1;
}

.site-nav__list .current-menu-item > a::before,
.site-nav__list .current_page_item > a::before {
	width: 2.25rem;
	background: var(--aqua);
}

/* Dropdown submenus (desktop hover) - consolidated nav */
.site-nav {
	position: relative;
}

.site-nav__list .menu-item-has-children {
	position: relative;
}

.site-nav__list .menu-item-has-children > a {
	padding-right: 1.1em; /* space for caret */
}

.site-nav__list .menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-top-color: var(--aqua);
	border-bottom: none;
	opacity: 0.7;
	pointer-events: none;
}

.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-deep);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	z-index: 200;
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	white-space: normal;
}

.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

.site-nav__list .sub-menu .menu-item {
	margin: 0;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 0.45rem 1rem;
	font-size: 0.9rem;
	color: var(--color-white) !important;
	opacity: 0.9;
	border: none;
}

.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus {
	opacity: 1;
	background: rgba(63, 143, 139, 0.12);
	color: var(--aqua);
}

.site-nav__list .sub-menu a::after {
	display: none; /* no underline in dropdowns */
}

/* Current in submenu */
.site-nav__list .sub-menu .current-menu-item > a,
.site-nav__list .sub-menu .current_page_item > a {
	opacity: 1;
	color: var(--aqua);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-left: auto; /* Keeps actions on the far right when nav is centered */
}

.header-cart {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	color: var(--color-gold);
	opacity: 0.85;
}

.header-cart:hover { opacity: 1; }

.header-cart__count {
	background: var(--color-gold);
	color: var(--color-navy);
	font-weight: 700;
	font-size: 0.75rem;
	padding: 1px 7px;
	border-radius: 999px;
	min-width: 18px;
	text-align: center;
}

.header-cart:hover {
	color: var(--color-navy);
}

.header-cart:hover .header-cart__count {
	background: var(--color-navy);
	color: white;
}

.header-cta {
	/* styled via .sm-btn below */
}

/* ============================================
   BUTTONS
   ============================================ */

.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	font-size: 0.9rem;
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 2px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	white-space: nowrap;
}

.sm-btn--primary {
	background: var(--color-gold);
	color: var(--color-navy);       /* Midnight text on muted gold */
	border-color: var(--color-gold);
	font-weight: 600;
	letter-spacing: 0.3px;
}

.sm-btn--primary:hover {
	background: var(--color-gold-hover);
	border-color: var(--color-gold-hover);
	color: white;
}

.sm-btn--outline {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-navy);
	font-weight: 500;
}

.sm-btn--outline:hover {
	background: var(--color-navy);
	color: white;
	border-color: var(--color-navy);
}

/* Hero "Speak with our team" outline buttons on welcome/charter gift pages */
.hero--premium .hero__actions .sm-btn--outline {
	background: white;
	color: var(--color-navy);
	border: 2px solid var(--color-navy);
}

.hero--premium .hero__actions .sm-btn--outline:hover {
	background: var(--color-navy);
	color: white;
	border-color: white;
}

.sm-btn--large {
	padding: 16px 36px;
	font-size: 1.05rem;
}

/* ============================================
   TYPOGRAPHY & SECTIONS
   ============================================ */

.eyebrow {
	font-size: 0.85rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 1rem;
}

.section-label {
	font-size: 0.9rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 0.55rem;
}

.section-heading h2 {
	margin-bottom: 0.6rem;
}

.section-intro {
	font-size: 1.05rem;
	max-width: 52ch;
	opacity: 0.95;
}

.section-note {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* ============================================
   FIELD NOTES
   ============================================ */

.notes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 2.25rem;
}

.note-card {
	background: rgba(255,255,255,0.06);
	padding: 2rem 1.75rem;
	border-radius: 12px;
	border-left: 4px solid var(--color-accent);
}

.note-card p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
}

/* ============================================
   PRODUCT GRIDS (Homepage)
   ============================================ */

/* Base .products grid (neutralized on shop pages so our custom shop grid wins cleanly) */
.products {
	list-style: none;
	padding: 0;
}

body:not(.shop-page-layout) .products {
	margin: 2.5rem 0 1.5rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* SHOP STYLES MOVED TO AUTHORITATIVE BLOCK BELOW - SEE "SHOP PAGE (FRESH FROM SCREENSHOT-26)" */

/* Generic .product card styles removed for shop fresh start (homepage versions kept below) */

/* (removed old safety reset - consolidated below) */

.homepage-products .product {
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.03);
	overflow: hidden;
}

.homepage-products .product:hover {
	transform: translateY(-4px);
	border-color: rgba(255,255,255,0.25);
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.homepage-products .product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	padding: 1rem 1rem 0.25rem;
	color: var(--color-white);
}

.homepage-products .product .price {
	color: var(--color-accent);
	font-size: 0.95rem;
	padding: 0 1rem 0.75rem;
}

.homepage-products .product .button {
	background: rgba(255,255,255,0.08);
	color: var(--color-white);
	font-size: 0.75rem;
	padding: 10px;
	border-top: 1px solid rgba(255,255,255,0.1);
	transition: background 0.2s ease, color 0.2s ease;
}

.homepage-products .product .button:hover {
	background: var(--color-accent);
	color: var(--color-deep);
}

.homepage-products .product__image-placeholder {
	transition: transform 0.3s ease;
}

.homepage-products .product:hover .product__image-placeholder {
	transform: scale(1.03);
}

/* Section styling for Recent Vessel Artwork on homepage */
#recent-savage-portraits .section-label {
	color: var(--color-accent);
}

#recent-savage-portraits .section-heading h2 {
	color: var(--color-text-light);
}

/* Better "View all" links on homepage product sections */
.homepage-products .section-more a {
	color: var(--color-text-light);
	opacity: 0.75;
	font-size: 0.95rem;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.homepage-products .section-more a:hover {
	opacity: 1;
	color: var(--color-accent);
}

/* Orange header for Artifacts section on homepage */
#artifacts-from-the-water .section-heading h2 {
	color: var(--color-accent);
}

/* Legacy foundation featured grid styles removed in Champagne v1.0
   (No longer used after Phase 3–6 homepage rebuild) */

.featured-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,255,255,0.25);
	box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}

.featured-card__frame {
	background: var(--color-cream);
	padding: 12px;                 /* Creates the "mat" around the art */
	border: 1px solid rgba(0,0,0,0.08);
}

.featured-card__image {
	width: 100%;
	aspect-ratio: 4 / 5;           /* Slightly shorter 4:5 ratio */
	object-fit: contain;           /* No cropping — full image visible */
	background-color: var(--color-cream);     /* Matches the mat */
	display: block;
}



.featured-card__content {
	padding: 1rem 1.1rem 1.15rem;
	background: rgba(0,0,0,0.65);
}

.featured-card__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--color-white);
	margin: 0 0 0.35rem;
	line-height: 1.25;
}

.featured-card__cta {
	display: inline-block;
	font-size: 0.78rem;
	color: var(--color-accent);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.theme-foundation-featured-grid.columns-3,
	.theme-foundation-featured-grid.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.theme-foundation-featured-grid.columns-3,
	.theme-foundation-featured-grid.columns-4 {
		grid-template-columns: 1fr;
	}
}


	gap: 2rem 1.5rem;
}

.fine-art-print-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fine-art-print-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 25px rgba(0,0,0,0.09);
}

.fine-art-print-card__image-link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-cream);
}

.fine-art-print-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.fine-art-print-card:hover .fine-art-print-card__image {
	transform: scale(1.03);
}

.fine-art-print-card__content {
	padding: 1.1rem 1.25rem 1.35rem;
}

.fine-art-print-card__title {
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}

.fine-art-print-card__title a {
	color: #222;
	text-decoration: none;
}

.fine-art-print-card__price {
	font-size: 0.95rem;
	color: var(--color-accent);
	margin-bottom: 0.85rem;
	font-weight: 500;
}

.fine-art-print-card__content .sm-btn {
	width: 100%;
	text-align: center;
}

/* Footer Newsletter (small, right aligned) */
.newsletter-signup--footer {
	margin-left: auto;
	max-width: 260px;
}

.newsletter-signup--footer .newsletter-signup__heading {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 0.35rem;
	color: #ddd;
}

.newsletter-signup--footer .newsletter-signup__text {
	font-size: 0.75rem;
	line-height: 1.35;
	color: #aaa;
	margin-bottom: 0.65rem;
}

.newsletter-signup--footer .newsletter-signup__form {
	display: flex;
	gap: 6px;
}

.newsletter-signup--footer input[type="email"] {
	flex: 1;
	padding: 0.5rem 0.7rem;
	border: 1px solid #555;
	background: #222;
	color: #fff;
	font-size: 0.85rem;
	border-radius: 3px;
}

.newsletter-signup--footer input[type="email"]::placeholder {
	color: #aaa;
}

.newsletter-signup--footer button {
	padding: 0.5rem 0.9rem;
	font-size: 0.8rem;
	white-space: nowrap;
}

/* (removed generic .product:hover / .product a for clean shop reset) */

.product__image-placeholder {
	background: linear-gradient(135deg, var(--color-navy-dark), #061222);
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}







.giveaway-hero__deadline {
	font-size: 0.9rem;
	opacity: 0.8;
	margin-top: 0.75rem;
}

.giveaway-hero__trust {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
	font-size: 0.9rem;
	opacity: 0.85;
}

.giveaway-prize,
.giveaway-how,
.giveaway-why,
.giveaway-social {
	padding: 4.5rem 0;
}

.giveaway-section-heading h2 {
	text-align: center;
	margin-bottom: 2.5rem;
}

.prize-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.prize-details h3 {
	font-size: 1.65rem;
	margin-bottom: 1.25rem;
}

.prize-benefits {
	list-style: none;
	padding: 0;
	margin-bottom: 1.5rem;
}

.prize-benefits li {
	padding-left: 1.75rem;
	position: relative;
	margin-bottom: 0.65rem;
}

.prize-benefits li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: bold;
}

.prize-value {
	font-weight: 600;
	color: var(--color-teal);
}

.how-grid,
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.how-step {
	text-align: center;
}

.step-number {
	width: 52px;
	height: 52px;
	background: var(--color-teal);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 auto 1rem;
}

.why-card {
	background: #fff;
	padding: 1.75rem;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.testimonials {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.testimonial {
	background: #fff;
	padding: 1.75rem;
	border-radius: 10px;
}

.testimonial-author {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: #555;
}

/* === FORM === */
.giveaway-form-section {
	background: #fff;
	padding: 4rem 0 5rem;
}

.form-container {
	max-width: 620px;
	margin: 0 auto;
}

.form-header {
	text-align: center;
	margin-bottom: 2.25rem;
}

.form-header h2 {
	font-size: 2rem;
}

.form-subhead {
	color: #555;
}

.giveaway-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.form-group {
	margin-bottom: 1.25rem;
}

.form-group.full-width {
	grid-column: 1 / -1;
}

.form-group label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"] {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #d1c9b8;
	border-radius: 6px;
	font-size: 1rem;
}

.file-upload {
	border: 2px dashed #d1c9b8;
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
	position: relative;
	cursor: pointer;
}

.file-upload input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.file-upload-label {
	color: #555;
}

.upload-hint {
	display: block;
	font-size: 0.8rem;
	color: #888;
	margin-top: 4px;
}

.file-preview {
	margin-top: 1rem;
}

.file-preview img {
	max-height: 140px;
	border-radius: 6px;
}

.form-disclaimer {
	background: var(--color-cream);
	padding: 1.25rem;
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 1.5rem 0;
	color: #444;
}

.form-disclaimer p {
	margin-bottom: 0.75rem;
}

.form-disclaimer .terms-agree {
	font-weight: 500;
	margin-bottom: 0;
}

.giveaway-submit-btn {
	width: 100%;
	justify-content: center;
}

.form-note {
	text-align: center;
	font-size: 0.8rem;
	color: #777;
	margin-top: 1rem;
}

.form-success {
	background: #e6f4ea;
	border: 1px solid var(--color-accent);
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
}

.form-success h3 {
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.giveaway-final-cta {
	background: var(--color-teal);
	color: #fff;
	padding: 3.5rem 0;
	text-align: center;
}

.giveaway-final-cta h2 {
	margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
	.prize-grid,
	.how-grid,
	.why-grid,
	.testimonials {
		grid-template-columns: 1fr;
	}

	.giveaway-hero h1 {
		font-size: 2.4rem;
	}

	.giveaway-form .form-row {
		grid-template-columns: 1fr;
	}
}
	border-bottom: 1px solid var(--color-border);
}

.product__placeholder-text {
	font-size: 0.85rem;
	opacity: 0.6;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem 1rem 0.35rem;
	margin: 0;
}

.price {
	display: block;
	padding: 0 1rem 1rem;
	font-weight: 600;
	color: var(--color-accent);
	font-size: 0.95rem;
}

/* Prevent the generic price color from affecting the shop grid */
body.woocommerce .products .product .price {
	color: var(--color-accent) !important;
}

/* Generic .product .button rules removed - shop gets its own orange pill styles below */



/* ============================================
   STUDIO GRID
   ============================================ */

.studio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 2.5rem 0;
}

.studio-item {
	background: rgba(255,255,255,0.05);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.08);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.studio-item:hover {
	transform: translateY(-4px);
	border-color: rgba(255,255,255,0.2);
	box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.studio-item__image {
	height: 160px;
	background: linear-gradient(145deg, var(--color-navy-dark), #061222);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.studio-item__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: 
		linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%) -10px 0,
		linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%) -10px 0;
	background-size: 20px 20px;
}

.studio-item__label {
	font-size: 0.65rem;
	opacity: 0.55;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: rgba(0,0,0,0.3);
	padding: 4px 10px;
	border-radius: 999px;
}

.studio-item__caption {
	font-size: 0.9rem;
	padding: 1rem 1rem 1.1rem;
	margin: 0;
	line-height: 1.4;
	color: var(--color-text-light);
}

.studio-follow {
	text-align: center;
	margin-top: 0.5rem;
}

/* ============================================
   STUDIO SECTION - Instagram Feed Styling (Smash Balloon)
   Makes the feed match the existing .studio-item cards
   ============================================ */

.studio-instagram-feed {
	margin-top: 1.5rem;
}

/* Hide unnecessary Smash Balloon elements */
.studio-instagram-feed .sbi_header,
.studio-instagram-feed .sbi_load_btn,
.studio-instagram-feed .sbi_follow_btn,
.studio-instagram-feed .sbi_top {
	display: none !important;
}

/* Make each Instagram post match .studio-item */
.studio-instagram-feed .sbi_item {
	background: rgba(255, 255, 255, 0.05) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform 0.2s ease;
}

.studio-instagram-feed .sbi_item:hover {
	transform: translateY(-4px);
}

/* Image container styling */
.studio-instagram-feed .sbi_photo {
	position: relative;
	display: block;
	background: var(--color-navy-dark);
}

.studio-instagram-feed .sbi_img {
	width: 100% !important;
	height: auto !important;
	display: block;
	object-fit: cover;
}

/* Caption area under the image (styled like .studio-item__caption) */
.studio-instagram-feed .sbi_info {
	padding: 0.75rem 1rem !important;
	background: rgba(0, 0, 0, 0.35) !important;
	font-size: 0.85rem !important;
	color: #ddd !important;
	line-height: 1.35 !important;
	min-height: 48px;
	display: flex;
	align-items: center;
}

.studio-instagram-feed .sbi_caption {
	font-size: 0.85rem !important;
	color: #ddd !important;
	margin: 0 !important;
}

/* Responsive behavior to match .studio-grid */
@media (max-width: 900px) {
	.studio-instagram-feed .sbi_item {
		margin-bottom: 0.75rem !important;
	}
}

/* ============================================
   GIVEAWAY
   ============================================ */

.giveaway {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 6rem 0;
}

.giveaway__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.65) 100%);
	z-index: 1;
}

.giveaway .sm-container {
	position: relative;
	z-index: 2;
	color: #fff;
}

.giveaway__inner {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.giveaway .section-intro {
	margin: 0 auto 1.75rem;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
	background: var(--color-deep);
	color: var(--color-text-light);
	padding: 4rem 0 2rem;
	font-size: 0.95rem;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1.1fr auto;
	gap: 2rem 2.5rem;
	align-items: start;
}

.site-footer__brand {
	max-width: 260px;
}

.site-footer__brand .site-footer__logo-text {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.site-footer__brand p {
	font-size: 0.85rem;
	line-height: 1.45;
	opacity: 0.75;
	margin: 0.5rem 0 0;
}

.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.footer-nav__list a,
.site-footer__social a {
	color: var(--color-accent);
	opacity: 0.9;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.footer-nav__list a:hover,
.site-footer__social a:hover {
	opacity: 1;
	filter: saturate(1.5);
}

.site-footer__social {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.site-footer__contact a {
	color: var(--color-accent);
	opacity: 0.9;
}

.site-footer__contact a:hover {
	opacity: 1;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-intro {
	padding: 5rem 0 3rem;
	color: var(--color-white);
}

.contact-intro h1 {
	font-size: clamp(2.4rem, 5vw, 3.5rem);
	margin-bottom: 1.5rem;
}

.contact-intro__text {
	max-width: 680px;
	font-size: 1.15rem;
	opacity: 0.9;
}

.contact-intro__text .contact-details {
	margin-top: 1.5rem;
	font-size: 1rem;
	line-height: 1.7;
}

.contact-intro__text .contact-details a {
	color: inherit;
	text-decoration: underline;
}

.contact-form {
	padding: 4rem 0;
}

.contact-form__wrapper {
	max-width: 620px;
}

.contact-form h2 {
	margin-bottom: 1.5rem;
}

.contact-social {
	padding: 4rem 0;
	color: var(--color-text-light);
}

.contact-social__header {
	margin-bottom: 2rem;
}

.contact-social__header h2 {
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.contact-social__links {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.social-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: rgba(255,255,255,0.06);
	border-radius: 12px;
	text-decoration: none;
	color: var(--color-text-light);
	transition: background 0.2s ease, transform 0.2s ease;
}

.social-link:hover {
	background: rgba(255,255,255,0.1);
	transform: translateY(-2px);
}

.social-link__icon {
	color: var(--color-accent);
	flex-shrink: 0;
}

.social-link__text strong {
	color: var(--color-white);
}

.contact-closing {
	padding: 3rem 0 5rem;
	color: var(--color-text-light);
	text-align: center;
}

@media (max-width: 600px) {
	.social-link {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}





.artist-section + .artist-section {
	padding-top: 3.5rem;
}

.artist-section--cream {
	background: var(--color-cream);
	color: var(--color-text);
}

.artist-section--dark {
	background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
	color: var(--color-text-light);
}





@media (max-width: 900px) {
	.artist-companies__logos {
		grid-template-columns: repeat(4, 1fr);
		max-width: 800px;
	}
}

@media (max-width: 600px) {
	.artist-companies__logos {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem 1.25rem;
		max-width: 100%;
	}
}

@media (max-width: 900px) {
	.artist-intro .sm-container {
		flex-direction: column;
		gap: 2.5rem;
	}

	.artist-intro__image {
		flex: none;
		max-width: 380px;
		order: -1; /* Put image above text on mobile */
	}

	.artist-perspective__grid {
		grid-template-columns: 1fr;
	}

	.artist-intro__content,
	.artist-cta h2 {
		text-align: left;
	}
}

/* ============================================
   VESSEL ARTWORK (legacy savage-portraits) PAGE
   ============================================ */

.savage-hero {
	position: relative;
	min-height: 620px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
	display: flex;
	align-items: center;
}

.savage-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(5, 21, 21, 0.75) 0%, rgba(5, 21, 21, 0.45) 55%);
	z-index: 1;
}

.savage-hero__container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 4rem;
}

.savage-hero__image {
	flex: 0 0 42%;
	max-width: 420px;
}

.savage-hero__product-image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.savage-hero__content {
	flex: 1;
	max-width: 560px;
}

.savage-hero__badge {
	display: inline-block;
	background: rgba(255,255,255,0.12);
	padding: 6px 18px;
	border-radius: 999px;
	font-size: 0.8rem;
	letter-spacing: 1.5px;
	margin-bottom: 1rem;
}

.savage-hero__title {
	font-size: clamp(2.6rem, 5vw, 3.8rem);
	margin-bottom: 1rem;
	line-height: 1.1;
}

.savage-hero__subtitle {
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
	opacity: 0.95;
}

.savage-hero__description {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	opacity: 0.85;
}

.savage-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.savage-section {
	padding: 4.5rem 0;
}

.savage-section--cream {
	background: var(--color-cream);
	color: var(--color-text);
}

.savage-section--dark {
	background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
	color: var(--color-text-light);
}

/* Bottom Commission Section on Vessel Artwork page */
.savage-commission {
	padding: 5rem 0;
	margin-bottom: 0;
}

.savage-commission .sm-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* Inner spacing for commission section */
.savage-commission .savage-section__header {
	margin-bottom: 2.5rem;
}

.savage-commission__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 900px) {
	.savage-commission__content {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* Premium styling for the form card */
.savage-commission__form {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 2.25rem 2rem;
	backdrop-filter: blur(10px);
}

.savage-commission__form h3 {
	font-family: var(--font-display);
	font-size: 1.45rem;
	margin-bottom: 0.5rem;
	color: #fff;
}

.savage-form-intro {
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

/* Style the CF7 form when inserted */
.savage-commission__form .wpcf7 {
	margin: 0;
}

.savage-commission__form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.savage-commission__form .wpcf7-form input,
.savage-commission__form .wpcf7-form textarea,
.savage-commission__form .wpcf7-form select {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
}

.savage-commission__form .wpcf7-form input:focus,
.savage-commission__form .wpcf7-form textarea:focus {
	outline: none;
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.savage-commission__form .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}

.savage-commission__form .wpcf7-form .wpcf7-submit {
	margin-top: 0.5rem;
	background: #fff;
	color: var(--color-teal);
	font-weight: 600;
	border: none;
	padding: 14px 28px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.savage-commission__form .wpcf7-form .wpcf7-submit:hover {
	background: #f0f0f0;
	transform: translateY(-1px);
}

.savage-section__header h2 {
	margin-bottom: 1rem;
}

.savage-section__header--center {
	text-align: center;
}

.savage-intro {
	font-size: 1.15rem;
	max-width: 620px;
}

.savage-experience {
	padding: 4.5rem 0;
	background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
	color: var(--color-white);
}

/* (old consolidated comment removed) */

.savage-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 2.5rem;
}

.savage-step {
	background: rgba(255,255,255,0.05);
	padding: 1.75rem 1.5rem;
	border-radius: 16px;
}

.savage-step__number {
	font-family: var(--font-display);
	font-size: 1.35rem;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
}

.savage-step__title {
	font-size: 1.15rem;
	margin-bottom: 0.6rem;
}

.savage-step__text {
	font-size: 0.95rem;
	opacity: 0.85;
	margin: 0;
}

/* Product grids on this page */
.savage-portraits-page .products {
	margin-top: 2rem;
}

/* Reviews section */
.savage-reviews {
	padding: 4.5rem 0;
	background: var(--color-cream);
}

.savage-review {
	background: white;
	padding: 2rem;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.savage-review__quote {
	font-style: italic;
	margin-bottom: 1.25rem;
}

.savage-review__author {
	font-weight: 600;
}

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

	.savage-hero__container {
		flex-direction: column;
		gap: 2.5rem;
		text-align: center;
	}

	.savage-hero__image {
		max-width: 340px;
		order: -1; /* Image on top on mobile */
	}

	.savage-hero__actions {
		justify-content: center;
	}
}

@media (max-width: 600px) {
	.savage-steps {
		grid-template-columns: 1fr;
	}
}

.site-footer__legal {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.8rem;
	opacity: 0.65;
	text-align: center;
}

.footer-top-link {
	margin-left: 0.75rem;
	color: inherit;
	text-decoration: underline;
	opacity: 0.7;
}

.footer-top-link:hover {
	opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
	.products.columns-3,
	.products.columns-4,
	.studio-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.site-header__inner {
		display: flex; /* revert to flex for mobile layout */
		flex-wrap: wrap;
		gap: 1.25rem;
	}

	.site-nav {
		display: none;
		width: 100%;
		order: 3;
		background: var(--color-deep);
		padding: 1rem 0;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1rem 0;
	}

	.site-nav__list a {
		padding: 8px 0;
		font-size: 1rem;
		opacity: 0.9;
	}

	/* Hide underline on mobile vertical menu; use active color + indent instead */
	.site-nav__list a::before {
		display: none;
	}

	.site-nav__list a:hover,
	.site-nav__list a:focus {
		opacity: 1;
		padding-left: 4px;
		transition: padding-left 0.2s ease;
	}

	/* Mobile active state */
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a {
		opacity: 1;
		color: var(--color-gold);
	}

	.site-menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.site-header__actions {
		margin-left: auto;
	}

	/* Mobile: show submenus expanded and indented (no hover dropdowns) */
	.site-nav__list .menu-item-has-children > a::after {
		display: none; /* hide caret on mobile vertical */
	}

	.site-nav__list .menu-item-has-children > a {
		padding-right: 0; /* reset desktop caret space */
	}

	.site-nav__list .sub-menu {
		display: block;
		position: static;
		min-width: 0;
		border: none;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.25);
		padding: 0.25rem 0 0.5rem 0.75rem;
		margin-top: 0.1rem;
	}

	.site-nav__list .sub-menu a {
		padding: 0.35rem 0.75rem;
		font-size: 0.95rem;
		opacity: 0.85;
		color: var(--color-white);
	}

	.site-nav__list .sub-menu a:hover,
	.site-nav__list .sub-menu a:focus {
		background: transparent;
		padding-left: 1rem;
		opacity: 1;
	}

	.home-panel {
		padding: 3.5rem 0;
	}

	.giveaway {
		padding: 4.5rem 0;
	}

	.notes-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.products.columns-3,
	.products.columns-4 {
		grid-template-columns: 1fr;
	}

	.studio-grid {
		grid-template-columns: 1fr;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ============================================
   ACCESSIBILITY & UTILITIES
   ============================================ */

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

.site-menu-toggle:focus-visible {
	outline-color: var(--color-white);
}

/* WooCommerce basic overrides (homepage product cards) */
.woocommerce-active .products .price del {
	opacity: 0.6;
	text-decoration: line-through;
}

/* ============================================
   SHOP PAGE - FRESH START (from screenshot-26.png)
   Foundation folder only. Clean, premium, left-aligned.
   - Sidebar filters on left (exact match to current visual)
   - Products grid starts at NORMAL site content left boundary
     (same left edge as the "Shop" h1, the filter card title, logo, etc.)
   - 3-column practical grid, reasonable card sizes
   - Full uncropped product images (object-fit: contain, height auto)
   - Minimal transparent cards - NO strange borders or heavy shadows
   - Signature orange pill "Add to cart" buttons with white text
   - Teal prices + sale badges (var(--color-accent))
   - No diagnostic junk, no pink, no borders for testing
   ============================================ */

/* Main two-column shop layout (sidebar | products) */
.shop-page-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 1.5rem;
	align-items: start;
}

/* Filters sidebar card - clean, matches the "Filter Products" look in screenshot */
.shop-filters-sidebar .filter-card {
	background: #ffffff;
	border: 1px solid #e5e0d8;
	border-radius: 12px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.shop-filters-sidebar .filter-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: var(--color-text);
}

.shop-filters-sidebar .filter-section {
	margin-bottom: 1.1rem;
}

.shop-filters-sidebar .filter-section__label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 0.4rem;
}

.shop-filters-sidebar .price-range-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.shop-filters-sidebar .price-input-group input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d4cfc4;
	border-radius: 6px;
	font-size: 0.9rem;
}

.shop-filters-sidebar .price-range-separator {
	color: #888;
	font-size: 1rem;
}

.shop-filters-sidebar .filter-categories {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0 0;
}

.shop-filters-sidebar .filter-categories li {
	margin: 0.25rem 0;
}

.shop-filters-sidebar .filter-category-link {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--color-text);
	padding: 3px 0;
}

.shop-filters-sidebar .filter-category-link.is-active {
	color: var(--color-accent);
	font-weight: 600;
}

.shop-filters-sidebar .filter-count {
	opacity: 0.6;
	font-size: 0.8rem;
}

.shop-filters-sidebar .filter-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.1rem;
}

.shop-filters-sidebar .filter-apply-btn {
	padding: 10px 22px;
	font-size: 0.78rem;
}

.shop-filters-sidebar .filter-clear-link {
	font-size: 0.8rem;
	color: #666;
}

.shop-filters-sidebar .filter-clear-link:hover {
	color: var(--color-accent);
}

/* === PRODUCTS MAIN COLUMN - THE KEY ALIGNMENT FIX === */
.shop-products-main {
	/* Added a little left padding to create breathing room from the left sidebar (filters + promo card) */
	padding: 0 0 0 1.25rem !important;
	margin: 0 !important;
	text-align: left !important;
}

/* Also force any inner Woo wrapper left */
.shop-products-main .woocommerce {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Nuclear left alignment — make the entire product flow (title area + grid) start at the exact same left edge as the "Shop" h1 */
.shop-products-main .woocommerce,
.shop-products-main .woocommerce-result-count,
.shop-products-main .woocommerce-ordering,
.shop-products-main .woocommerce ul.products,
.shop-products-main .products {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Extra force on the results + sort header so it doesn't push visual reference right */
.shop-products-main .woocommerce-result-count,
.shop-products-main .woocommerce-ordering {
	margin-left: 0 !important;
	padding-left: 0 !important;
	float: none !important;
}

/* Shop page main title - reduced size for better proportion with larger sidebar */
.shop-products-main .woocommerce-products-header__title,
.shop-products-main .woocommerce h1 {
	font-size: 2.1rem !important;
	margin-bottom: 0.5rem !important;
}

/* Extra insurance: kill any remaining left space on the actual product items and their container */
.shop-products-main .woocommerce ul.products li.product,
.shop-products-main .products li.product {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Kill Woo default column widths and force our grid - LEFT ALIGNED cluster (fixed max track size so items don't get pushed right) */
body.woocommerce .shop-products-main .woocommerce ul.products,
body.woocommerce .shop-products-main .woocommerce .products,
.shop-products-main .products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(260px, 310px)) !important;
	gap: 1.25rem !important;
	padding: 0 !important;
	margin: 0.75rem 0 0 !important;   /* reduced top margin so cards sit tighter under the title */
	margin-left: -4px !important;    /* light pull to help align with "Shop" title (now that container has left padding) */
	padding-left: 0 !important;
	width: 100% !important;
	justify-content: flex-start !important;
	justify-items: start !important;
	list-style: none !important;
}

/* Product cards - minimal, transparent, premium, NO weird borders */
body.woocommerce .shop-products-main .woocommerce ul.products li.product,
.shop-products-main .products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	justify-self: start !important;
}

/* Defensive fix for phantom first grid item (this is almost certainly what you're seeing):
   Something is appearing as the very first child inside <ul class="products"> before the first <li class="product">.
   This element occupies the first grid cell, pushing content into the second column.
   The rules below hide any non-product element and force the first real product to column 1. */
body.woocommerce .shop-products-main .woocommerce ul.products > *:not(li.product),
.shop-products-main .products > *:not(li.product) {
	display: none !important;
}

/* Force the first real .product to start in column 1 */
body.woocommerce .shop-products-main .woocommerce ul.products li.product:first-of-type,
.shop-products-main .products li.product:first-of-type {
	grid-column: 1 !important;
}

/* Product images - FULL, uncropped, show everything */
body.woocommerce .shop-products-main .woocommerce ul.products li.product img,
.shop-products-main .products li.product img {
	width: 100% !important;
	height: auto !important;
	max-height: 380px !important;
	object-fit: contain !important;
	background: transparent !important;
	border-radius: 8px !important;
	margin-bottom: 0.75rem !important;
	display: block !important;
}

/* Title styling - clean, uses Revans for premium feel */
body.woocommerce .shop-products-main .woocommerce ul.products li.product .woocommerce-loop-product__title,
.shop-products-main .products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display) !important;
	font-size: 1.02rem !important;
	font-weight: 600 !important;
	padding: 0 !important;
	margin: 0 0 0.35rem !important;
	line-height: 1.25 !important;
	color: var(--color-text) !important;
}

/* Prices - teal as requested */
body.woocommerce .shop-products-main .woocommerce ul.products li.product .price,
.shop-products-main .products li.product .price,
body.woocommerce .shop-products-main .woocommerce .products .price {
	color: var(--color-accent) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0 !important;
	margin: 0 0 0.6rem !important;
}

body.woocommerce .shop-products-main .woocommerce ul.products li.product .price del,
.shop-products-main .products li.product .price del {
	color: #777 !important;
	opacity: 0.75 !important;
}

/* Sale badge - clean teal pill */
body.woocommerce .shop-products-main .woocommerce ul.products li.product .onsale,
.shop-products-main .products li.product .onsale {
	background: var(--color-accent) !important;
	color: #fff !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	padding: 5px 11px !important;
	border-radius: 999px !important;
	top: 12px !important;
	left: 12px !important;
}

/* === THE ORANGE PILL "ADD TO CART" BUTTONS - SIGNATURE STYLE === */
body.woocommerce .shop-products-main .woocommerce .products .button,
body.woocommerce .shop-products-main .woocommerce .products .button.add_to_cart_button,
.shop-products-main .products .button,
.shop-products-main .products .button.add_to_cart_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--color-accent) !important;
	color: #ffffff !important;
	border: 2px solid var(--color-accent) !important;
	border-radius: 999px !important;
	padding: 11px 26px !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.045em !important;
	text-decoration: none !important;
	margin-top: 0.35rem !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(255, 92, 0, 0.25) !important;
}

body.woocommerce .shop-products-main .woocommerce .products .button:hover,
.shop-products-main .products .button:hover {
	background: var(--color-accent-hover) !important;
	border-color: var(--color-accent-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(255, 92, 0, 0.35) !important;
}

/* Results count + sorting - clean, left-leaning so they don't push visual weight right */
.shop-products-main .woocommerce-result-count {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 0.75rem 0;
}

.shop-products-main .woocommerce-ordering {
	margin-bottom: 0.75rem;
}

.shop-products-main .woocommerce-ordering select {
	font-size: 0.85rem;
	padding: 6px 10px;
	border-radius: 6px;
}

/* Optional: if you prefer sort on the right, remove this. Left for now to keep everything clustered left */
.shop-products-main .woocommerce-ordering {
	float: none !important;
}

/* Mobile: stack filters above products */
@media (max-width: 900px) {
	.shop-page-layout {
		grid-template-columns: 1fr;
	}
	.shop-filters-sidebar {
		margin-bottom: 1.5rem;
	}
	.shop-page-layout {
		gap: 1rem;
	}
	.shop-products-main .woocommerce ul.products,
	.shop-products-main .products {
		grid-template-columns: repeat(2, minmax(200px, 300px)) !important;
	}
}

@media (max-width: 520px) {
	.shop-products-main .woocommerce ul.products,
	.shop-products-main .products {
		grid-template-columns: minmax(260px, 100%) !important;
	}
}

/* (End of SHOP PAGE FRESH START block - single source of truth) */

/* ============================================
   CIRCULAR SALE BADGE - Top right corner of product cards
   ============================================ */
body.woocommerce .shop-products-main .woocommerce ul.products li.product,
.shop-products-main .products li.product {
	position: relative !important;
}

body.woocommerce .shop-products-main .woocommerce ul.products li.product .onsale,
.shop-products-main .products li.product .onsale {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;           /* override any left positioning */
	background: var(--color-accent) !important;
	color: #ffffff !important;
	font-size: 0.65rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	z-index: 2 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   FILTER CARD VERTICAL ALIGNMENT
   Top of "Filter Products" card should sit level with or just below the "Shop" title
   ============================================ */
.shop-filters-sidebar .filter-card {
	/* Adjust this value until the top edge of the filter card is level with or slightly below the "Shop" h1 */
	margin-top: 2.15rem;
}

/* ============================================
   FEATURED PROMO CARD (background image + content anchored at bottom)
   ============================================ */
.shop-filters-sidebar .shop-promo-card {
	position: relative;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.04);
	margin-top: 1.25rem;
	/* Fallback background if no image is set in Customizer */
	background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.65)), url('https://picsum.photos/id/1016/600/800');
}

/* Dark gradient overlay at bottom for text readability - starts lower to show more image */
.shop-filters-sidebar .shop-promo-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.08) 45%,
		rgba(0, 0, 0, 0.82) 78%
	);
	z-index: 1;
}

/* Content pushed to the bottom */
.shop-filters-sidebar .shop-promo-card__content {
	position: relative;
	z-index: 2;
	padding: 1.5rem 1.1rem 1.75rem; /* Increased bottom padding to push content lower */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	color: #ffffff;
}

.shop-filters-sidebar .shop-promo-card__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 0.35rem;
	color: #ffffff;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.shop-filters-sidebar .shop-promo-card__text {
	font-size: 0.85rem;
	line-height: 1.4;
	color: #f0f0f0;
	margin: 0 0 0.75rem;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.shop-filters-sidebar .shop-promo-card__btn,
.shop-filters-sidebar .filter-apply-btn {
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	padding: 9px 20px;
	font-size: 0.75rem;
	width: 100%;
	justify-content: center;
}

/* Hover treatment */
.shop-filters-sidebar .shop-promo-card:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.shop-filters-sidebar .shop-promo-card:hover .shop-promo-card__overlay {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.08) 40%,
		rgba(0, 0, 0, 0.85) 75%
	);
}

/* Teal button hover for shop sidebar (matches price/sale color) */
.shop-filters-sidebar .shop-promo-card__btn:hover,
.shop-filters-sidebar .filter-apply-btn:hover {
	background: #0b7a6b !important;
	border-color: #0b7a6b !important;
}

/* Mobile */
@media (max-width: 900px) {
	.shop-filters-sidebar .filter-card {
		margin-top: 0;
	}
	.shop-filters-sidebar .shop-promo-card {
		margin-top: 1rem;
		min-height: 240px;
	}
}



/* Hero */
.bruce-hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--color-deep) 0%, var(--color-teal) 100%);
	color: var(--color-white);
	text-align: center;
	padding: 4rem 1.5rem;
}

.bruce-hero__logo-img {
	max-height: 120px;
	width: auto;
	margin-bottom: 1.5rem;
	/* No filter: using the light logo version (LOGO_Champagne_lights.webp) which is appropriate for the dark hero background */
}

.bruce-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 7vw, 4.5rem);
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

.bruce-hero__tagline {
	font-size: 1.25rem;
	max-width: 520px;
	margin: 0 auto 2rem;
	opacity: 0.9;
	line-height: 1.4;
}

.bruce-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.bruce-btn,
.bruce-btn-outline {
	padding: 14px 32px;
	font-size: 0.95rem;
}

.bruce-btn-outline {
	border: 2px solid #fff;
	color: #fff;
	background: transparent;
}

.bruce-btn-outline:hover {
	background: #fff;
	color: var(--bruce-dark);
}

/* General Sections */
.bruce-section {
	padding: 4rem 0;
}

.bruce-section-title {
	font-family: var(--font-display);
	font-size: 2.25rem;
	margin-bottom: 1.5rem;
	color: var(--bruce-dark);
}

.bruce-section-title--light {
	color: #fff;
}

/* Product Grids */
.bruce-product-grid__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.5rem;
}

.bruce-view-all {
	color: var(--bruce-accent);
	font-weight: 600;
}

.bruce-products {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.75rem;
}

.bruce-product {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bruce-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.bruce-product__image img {
	width: 100%;
	height: auto;
	display: block;
}

.bruce-product__info {
	padding: 1rem 1.1rem 1.25rem;
}

.bruce-product__title {
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
	color: #222;
}

.bruce-product__price {
	color: var(--bruce-teal);
	font-weight: 600;
}

/* Pattern Section */
.bruce-pattern-section {
	position: relative;
	padding: 5rem 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.bruce-pattern-section__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 47, 51, 0.82);
}

.bruce-pattern-content {
	position: relative;
	z-index: 2;
	max-width: 620px;
	text-align: center;
	margin: 0 auto;
	color: #fff;
}

.bruce-pattern-content__text {
	font-size: 1.15rem;
	line-height: 1.6;
	margin-bottom: 2rem;
}

/* Instagram */
.bruce-instagram {
	background: var(--color-cream);
	padding: 4.5rem 0;
}

.bruce-instagram__header {
	text-align: center;
	margin-bottom: 2rem;
}

.bruce-instagram__subtitle {
	color: var(--bruce-teal);
	font-size: 1.1rem;
}

.bruce-instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.bruce-instagram-item {
	aspect-ratio: 1 / 1;
	background: #ddd;
	border-radius: 4px;
	overflow: hidden;
}

.bruce-instagram-item__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #222;
	color: #fff;
	font-size: 0.8rem;
	opacity: 0.6;
}

/* Responsive */
@media (max-width: 900px) {
	.bruce-products {
		grid-template-columns: repeat(2, 1fr);
	}

	.bruce-instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 520px) {
	.bruce-products {
		grid-template-columns: 1fr;
	}

	.bruce-instagram-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================
   PAST PROJECTS (Artifacts) - Simplified Cards + Lightbox
   ============================================ */

.past-projects-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.past-project-card {
	cursor: pointer;
	transition: transform 0.2s ease;
}

.past-project-card:hover {
	transform: translateY(-4px);
}

.past-project-image {
	overflow: hidden;
	border-radius: 6px;
	background: #f5f2e9; /* warm placeholder */
}

.past-project-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.past-project-card:hover .past-project-image img {
	transform: scale(1.03);
}

.past-project-caption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: #22868F;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
}

/* Lightbox Modal */
.project-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.project-lightbox[open],
.project-lightbox.show {
	display: flex;
}

.project-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.project-lightbox__content {
	position: relative;
	z-index: 2;
	max-width: min(50vw, 700px);
	max-height: 70vh;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
}

.project-lightbox__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: rgba(0,0,0,0.6);
	color: white;
	border: none;
	font-size: 28px;
	line-height: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
}

.project-lightbox__image {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-cream);
	padding: 20px;
}

.project-lightbox__image img {
	max-width: 100%;
	max-height: calc(70vh - 160px); /* leave room for info panel + padding */
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.project-lightbox__info {
	padding: 1.25rem 1.5rem 1.5rem;
	max-width: 600px;
	flex-shrink: 0;
}

/* Mobile adjustments for lightbox */
@media (max-width: 768px) {
	.project-lightbox__content {
		max-width: 85vw;
		max-height: 80vh;
	}
}

.project-lightbox__title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
	color: #222;
}

.project-lightbox__description {
	font-size: 0.95rem;
	line-height: 1.55;
	color: #444;
}

/* Responsive grid */
@media (max-width: 900px) {
	.past-projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.past-projects-grid {
		grid-template-columns: 1fr;
	}
}

/* Past Projects section - Centered copy, larger heading, orange label */
.past-projects .section-heading {
	text-align: center;
}

.past-projects .section-heading h2 {
	font-size: 2.75rem;
	letter-spacing: -0.025em;
}

.past-projects .section-label {
	color: var(--color-accent);
}

/* ============================================
   VESSEL ARTWORK – ORDERING PROCESS
   ============================================ */

#savage-portraits-process .process-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 2rem;
}

.process-card {
	background: rgba(255, 255, 255, 0.08);
	padding: 1.75rem 1.5rem;
	border-radius: 12px;
	border-left: 5px solid var(--color-accent);
	transition: transform 0.2s ease;
}

.process-card:hover {
	transform: translateY(-3px);
}

#savage-portraits-process .process-number {
	display: block;
	font-size: 5rem;
	font-weight: 800;
	line-height: 0.9;
	color: #fff;
	margin-bottom: 0.25rem;
	letter-spacing: -0.02em;
}

.process-title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 0 0 0.6rem;
	color: #fff;
}

.process-description {
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.85);
	margin: 0;
}

.process-cta {
	margin-top: 2rem;
	text-align: center;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.15);
}

.process-note {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	opacity: 0.7;
	color: #fff;
}

/* Mobile */
@media (max-width: 900px) {
	#savage-portraits-process .process-grid {
		grid-template-columns: 1fr;
	}

	#savage-portraits-process .process-number {
		font-size: 3.5rem;
	}
}

/* Make the section label orange in the Vessel Artwork process section */
#savage-portraits-process .section-label {
	color: var(--color-accent);
}



/* ============================================
   SHOP CATEGORY CARDS (below products - premium visual grid)
   Replaces the plain text list seen in screenshot-26
   ============================================ */

.shop-category-cards {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid #e5e0d8;
}

.shop-category-cards__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.shop-category-cards__title {
	font-family: var(--font-display);
	font-size: 1.85rem;
	margin: 0;
}

.shop-category-cards__view-all {
	font-size: 0.85rem;
	color: var(--color-accent);
	letter-spacing: 0.02em;
}

.shop-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.35rem;
}

.category-card {
	display: block;
	background: #fff;
	border: 1px solid #e5e0d8;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
	transform: translateY(-3px);
	border-color: #d4cfc4;
	box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.category-card__image {
	height: 148px;
	background-size: cover;
	background-position: center;
	background-color: var(--color-cream);
}

.category-card__image--placeholder {
	background: linear-gradient(145deg, var(--color-cream), #F0EDE3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a89f8f;
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.category-card__content {
	padding: 1rem 1.1rem 1.15rem;
}

.category-card__name {
	font-family: var(--font-display);
	font-size: 1.02rem;
	margin: 0 0 0.2rem;
	color: var(--color-text);
}

.category-card__count {
	font-size: 0.78rem;
	color: #666;
}

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

@media (max-width: 520px) {
	.shop-category-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   HOMEPAGE NEW SECTIONS
   ============================================ */

/* Choose Your Style */
.choose-style-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.style-option {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.style-option:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.style-option__image img {
	width: 100%;
	height: auto;
	display: block;
}

.style-option__content {
	padding: 1.5rem;
}

.style-option__title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	margin-bottom: 0.75rem;
	color: var(--color-text);
	text-align: center;
}

.style-option__description {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #555;
	margin-bottom: 1.25rem;
}

/* Before & After Slider */
.before-after-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem;
	margin-top: 2rem;
}

.before-after-comparison {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}

.before-after__header {
	padding: 1rem 1.25rem 0.75rem;
	background: #188E9B;
	color: #fff;
	text-align: center;
	order: 2; /* moves header to bottom of the card */
}

.before-after__header h3 {
	margin: 0 0 0.25rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: #fff;
}

.before-after__header p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.92);
}

.before-after-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	user-select: none;
}

.before-after-slider__images {
	position: relative;
	width: 100%;
}

.before-after-slider__after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 0 0 50%);
}

.before-after-slider__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	background: #fff;
	cursor: ew-resize;
	transform: translateX(-50%);
	z-index: 2;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

.before-after-slider__handle-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}

.before-after-slider__handle-circle::before {
	content: '⟷';
	font-size: 14px;
	color: #333;
}

.before-after-slider__labels {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 12px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	pointer-events: none;
	z-index: 3;
}

/* FAQ Accordion */
.faq-accordion {
	max-width: 820px;
	margin: 2rem auto 0;
}

.faq-item {
	border-bottom: 1px solid #e5e0d8;
}

.faq-question {
	padding: 1.1rem 0;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-text);
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: '+';
	font-size: 1.4rem;
	line-height: 1;
	color: var(--color-accent);
	transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
	content: '−';
}

.faq-answer {
	padding: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
}

/* Responsive */
@media (max-width: 900px) {
	.choose-style-grid,
	.before-after-grid {
		grid-template-columns: 1fr;
	}
}

/* Scale down Choose Your Style cards */
.choose-style-grid {
	gap: 1.25rem;
}

.style-option__content {
	padding: 1.1rem;
}

.style-option__title {
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
	text-align: center;
}

.style-option__description {
	font-size: 0.85rem;
	margin-bottom: 0.9rem;
}

/* Center the CTA buttons in the style cards */
.style-option__content {
	text-align: left; /* keep text left-aligned */
}

.style-option .sm-btn {
	display: block;
	width: fit-content;
	margin: 0 auto;
}

/* Style cards - images scale to fill the full width of the card naturally (no forced cropping or side padding) */
.style-option__image {
	width: 100%;
	overflow: hidden;
}

.style-option__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Scale down Before & After cards + custom background */
#before-after {
	background: #0C4B52 !important;
}

.before-after-grid {
	gap: 1.5rem;
}

.before-after-comparison {
	box-shadow: 0 3px 15px rgba(0,0,0,0.08);
	display: flex;
	flex-direction: column;
}

.before-after__header {
	padding: 0.65rem 1rem 0.5rem;
	background: #188E9B;
	color: #fff;
	text-align: center;
	order: 2; /* moves header to bottom of card */
}

.before-after__header h3 {
	font-size: 1rem;
	color: #fff;
	margin-bottom: 0.15rem;
}

.before-after__header p {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.92);
}

/* Center FAQ section label + heading */
#faq .section-heading {
	text-align: center;
}

#faq .section-heading .section-label,
#faq .section-heading h2 {
	text-align: center;
}



/* Responsive */
@media (max-width: 900px) {
	.work-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.work-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   CHAMPAGNE HOMEPAGE - PROMO BLOCKS & SECTIONS
   ============================================ */

/* Stacked Promotional Blocks (Tees, Cards, Stickers, Drinkware) */
.promo-block {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.promo-block__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.promo-block__media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,25,47,0.88) 0%, rgba(10,25,47,0.65) 45%, rgba(10,25,47,0.35) 70%);
}

.promo-block__content {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding: 4rem 0;
}

.promo-block__inner h2 {
	font-size: clamp(2.4rem, 5.5vw, 3.6rem);
	color: var(--color-white);
	margin-bottom: 1.25rem;
	line-height: 1.1;
}

.promo-block__eyebrow {
	font-size: 0.8rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.promo-block__desc {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--color-text-light);
	max-width: 480px;
	margin-bottom: 1.75rem;
	opacity: 0.95;
}

.promo-block__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.promo-block__scroll {
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.5;
}

/* Category Cards */
.categories-section {
	padding: 5rem 0 4rem;
	/* background set via modifier (e.g. --dark) or default inheritance */
}

.categories-section .section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

.category-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}

.category-card__image {
	height: 220px;
	background-size: cover;
	background-position: center;
}

.category-card__content {
	padding: 1.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.category-card h3 {
	font-size: 1.35rem;
	margin-bottom: 0.6rem;
}

.category-card p {
	font-size: 0.95rem;
	color: #4a5568;
	line-height: 1.55;
	margin-bottom: 1.25rem;
	flex: 1;
}

.category-card .sm-btn {
	align-self: flex-start;
}

/* Featured Hat Patches Section */
.hat-patches-section {
	padding: 5rem 0;
	background: var(--color-white);
}

.hat-patches__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.hat-patches__image {
	width: 100%;
	height: 520px;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
}

.hat-patches__content h2 {
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	margin-bottom: 1.25rem;
}

.hat-patches__content p {
	max-width: 520px;
	font-size: 1.02rem;
	line-height: 1.65;
	margin-bottom: 1.5rem;
}

.hat-patches__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.hat-patches__features li {
	padding: 0.4rem 0 0.4rem 1.6rem;
	position: relative;
	font-size: 0.97rem;
}

.hat-patches__features li:before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-gold);
	font-weight: bold;
}

.hat-patches__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px) {
	.categories-grid {
		grid-template-columns: 1fr;
	}

	.hat-patches__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.hat-patches__image {
		height: 380px;
	}

	/* New premium hero + statement mobile */
	.hero--premium {
		min-height: 520px;
	}

	.hero--premium .hero__desc {
		font-size: 1rem;
	}

	.hero--premium .hero__actions {
		flex-direction: column;
	}

	.hero--premium .hero__actions .sm-btn {
		width: 100%;
		text-align: center;
	}

	.intro-statement {
		padding: 2.5rem 0 3rem;
	}

	.intro-statement__inner p {
		font-size: 1rem;
	}
}

@media (max-width: 600px) {
	.promo-block {
		min-height: 520px;
	}

	.promo-block__content {
		padding: 3rem 1rem;
	}

	.promo-block__actions {
		flex-direction: column;
	}

	.promo-block__actions .sm-btn {
		width: 100%;
		text-align: center;
	}
}
/* Additional premium refinements for Phase 3 stacked blocks */
.promo-block {
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.promo-block__inner {
	max-width: 580px;
}

.promo-block__eyebrow {
	color: var(--color-gold);
}

.promo-block__scroll {
	color: var(--color-gold);
	font-weight: 500;
	letter-spacing: 3px;
}

.category-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.hat-patches-section {
	border-top: 1px solid var(--color-border);
}

.hat-patches__features li {
	color: var(--color-text);
}
.promo-block__media-overlay {
	background: linear-gradient(
		95deg, 
		rgba(10, 25, 47, 0.92) 0%, 
		rgba(10, 25, 47, 0.78) 38%, 
		rgba(10, 25, 47, 0.42) 65%
	);
}
/* Phase 3 final polish - better content spacing and hierarchy */
.promo-block__content {
	padding-left: 2rem;
	padding-right: 2rem;
}

@media (min-width: 768px) {
	.promo-block__content {
		padding-left: 0;
	}
}

.promo-block__inner {
	padding-top: 2rem;
}

.category-card__content {
	padding: 1.5rem 1.5rem 1.75rem;
}

/* ============================================
   PREMIUM LUXURY HOMEPAGE REVISIONS
   Single elegant hero + refined collections + breathing room
   ============================================ */

/* Elegant single Hero */
.hero--premium {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-deep);
}

.hero--premium .hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero--premium .hero__media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		92deg,
		rgba(17, 24, 39, 0.88) 0%,
		rgba(17, 24, 39, 0.65) 45%,
		rgba(17, 24, 39, 0.25) 75%
	);
}

.hero--premium .hero__content {
	position: relative;
	z-index: 2;
	max-width: 680px;
	padding: 5rem 0;
}

.hero--premium h1 {
	font-size: clamp(2.5rem, 5.5vw, 3.6rem);
	line-height: 1.08;
	color: var(--color-offwhite);
	margin-bottom: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.hero--premium .hero__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 1rem;
	font-weight: 500;
}

.hero--premium .hero__desc {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--color-offwhite);
	max-width: 540px;
	margin-bottom: 2.25rem;
	opacity: 0.95;
}

.hero--premium .hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.hero--premium .hero__content {
		padding-left: 1.5rem;
	}
}

.hero--premium .hero__scroll-indicator {
	position: absolute;
	bottom: 2.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: 0.65;
}

.hero--premium .hero__scroll-line {
	width: 1px;
	height: 42px;
	background: linear-gradient(to bottom, var(--color-gold), transparent);
}

/* Intro Statement - luxury breathing room */
.intro-statement {
	padding: 4rem 0 4.5rem;
	background: var(--color-offwhite);
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.intro-statement__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.intro-statement__inner:before {
	content: '';
	position: absolute;
	top: -1.1rem;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 1px;
	background: var(--color-gold);
	opacity: 0.7;
}

.intro-statement__inner p {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin: 0;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

/* Premium refinements for the collections grid on home */
.categories-section--premium {
	padding-top: 6rem;
	padding-bottom: 5.5rem;
}

.categories-section--premium .section-header {
	margin-bottom: 3rem;
}

.categories-section--premium h2 {
	font-size: clamp(1.9rem, 4vw, 2.35rem);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Slightly more refined cards for luxury homepage */
.categories-section--premium .category-card {
	border-radius: 8px;
	border-color: var(--color-sand);
	box-shadow: 0 3px 12px rgba(17, 24, 39, 0.04);
}

.categories-section--premium .category-card__image {
	height: 245px;
}

.categories-section--premium .category-card:hover {
	border-color: var(--color-gold);
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
	transform: translateY(-2px);
}

.categories-section--premium .category-card h3 {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.categories-section--premium .category-card p {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--color-text-secondary);
}

.categories-section--premium .category-card .sm-btn {
	font-size: 0.78rem;
	padding: 9px 18px;
	font-weight: 500;
}

.categories-section--premium .category-card--featured {
	border-color: var(--color-gold);
	box-shadow: 0 4px 16px rgba(197, 164, 109, 0.12);
}

.categories-section--premium .category-card--featured .category-card__badge {
	background: var(--color-gold);
	color: var(--color-navy);
	font-weight: 600;
}

/* ============================================
   ALTERNATING DARK SECTIONS – CHARTER GUEST GIFTS + GUEST WELCOME
   Darker than offwhite but lighter than main navy for elegant rhythm
   ============================================ */

.package-section--dark {
	background: var(--color-offwhite);
	color: var(--color-text);
	padding: 5.5rem 0 5rem;
	border-top: 1px solid rgba(17, 24, 39, 0.06);
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

/* Padding for the package sections (charter guest gifts and guest welcome) to give breathing room */
.package-section--charter,
.package-section--welcome {
	padding-top: 5rem;
	padding-bottom: 5rem;
	border-top: 1px solid rgba(17, 24, 39, 0.06);
	border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

/* Old centered header styles removed for new visual intro treatment (kept for reference if needed elsewhere) */

.package-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-bottom: 3rem;
}

.package-card {
	background: #fff;
	border: 1px solid var(--color-sand);
	border-radius: 6px;
	padding: 1.25rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 15px rgba(17, 24, 39, 0.05);
}

.package-card h3 {
	color: var(--color-gold);
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.package-card p {
	font-size: 0.93rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin-bottom: 1rem;
	flex: 1;
}

.package-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.35rem 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

.package-card__features li {
	padding-left: 1.1rem;
	position: relative;
	margin-bottom: 0.2rem;
}

.package-card__features li:before {
	content: "–";
	position: absolute;
	left: 0;
	color: var(--color-gold);
}

.package-card .sm-btn--outline {
	margin-top: auto;
	font-size: 0.78rem;
	padding: 9px 16px;
	border-color: var(--color-navy);
	color: var(--color-navy);
	font-weight: 500;
}

.package-card .sm-btn--outline:hover {
	background: var(--color-navy);
	color: white;
	border-color: var(--color-navy);
}

/* ============================================
   VISUALLY DISTINCT PACKAGE SECTIONS + ATTENTION IMAGES
   Charter vs Welcome have different layouts, image placements, and card treatments
   ============================================ */

.package-visual-intro {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin-bottom: 3.25rem;
}

.package-section--charter .package-visual-intro {
	flex-direction: row;
}

.package-section--welcome .package-visual-intro {
	flex-direction: row-reverse;
}

.package-visual {
	flex: 0 0 47%;
	max-width: 520px;
}

.package-visual img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--color-sand);
	box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
	transition: transform 0.3s ease;
}

.package-visual img:hover {
	transform: scale(1.015);
}

.package-text {
	flex: 1;
}

.package-text h2 {
	font-size: clamp(1.85rem, 4.2vw, 2.5rem);
	color: var(--color-navy);
	margin-bottom: 0.85rem;
	line-height: 1.15;
}

.package-text .eyebrow {
	color: var(--color-gold);
	margin-bottom: 0.5rem;
}

.package-text .package-section__intro {
	max-width: none;
	margin: 0;
	text-align: left;
	font-size: 1.02rem;
	color: var(--color-text-secondary);
}

/* Card distinctions for visual separation */
.package-section--charter .package-card {
	border-top: 4px solid var(--color-gold);
}

.package-section--welcome .package-card {
	border-left: 4px solid var(--color-gold);
	padding-left: 1.4rem;
	background: rgba(255, 255, 255, 0.028);
}

.package-section--welcome .package-card__features li:before {
	content: "•";
	left: 0;
	color: var(--color-gold);
}

/* Package card images - example bundles isolated on matching dark background */
.package-card__image {
	width: 100%;
	height: 155px;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 0.85rem;
	flex-shrink: 0;
	position: relative;
}

.package-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.package-card:hover .package-card__image img {
	transform: scale(1.04);
}

@media (max-width: 768px) {
	.package-visual-intro {
		flex-direction: column !important;
	}

	.package-visual {
		flex: none;
		width: 100%;
		max-width: none;
	}

	.package-visual img {
		height: 240px;
	}
}

/* ============================================
   INSTAGRAM FEED SECTION (below Hat Patches)
   Premium grid with attention-grabbing visuals
   ============================================ */

.instagram-feed {
	background: var(--color-offwhite);
	padding: 5.5rem 0 6rem;
	border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.instagram-feed h2 {
	color: var(--color-navy);
}

.instagram-feed__header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.instagram-feed__header h2 {
	font-size: clamp(1.9rem, 4.2vw, 2.5rem);
	margin-bottom: 0.5rem;
	color: var(--color-navy);
}

.instagram-feed__header p {
	max-width: 520px;
	margin: 0 auto;
	font-size: 1rem;
	color: #4a5568;
}

.instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
	margin-bottom: 2.25rem;
}

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

@media (max-width: 600px) {
	.instagram-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
}

.instagram-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: #0a192f;
	box-shadow: 0 2px 8px rgba(10, 25, 47, 0.08);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.instagram-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(10, 25, 47, 0.15);
}

.instagram-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.instagram-item:hover img {
	transform: scale(1.08);
}

.instagram-item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 40%,
		rgba(10, 25, 47, 0.82) 75%
	);
	opacity: 0;
	transition: opacity 0.25s ease;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0.85rem;
	color: #fff;
}

.instagram-item:hover .instagram-item__overlay {
	opacity: 1;
}

.instagram-item__handle {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	opacity: 0.95;
}

.instagram-feed__cta {
	text-align: center;
}

.package-section__cta {
	text-align: center;
	margin-top: 1rem;
}

/* ============================================
   PACKAGE BUILDER LANDING PAGES
   Interactive bundle configurator with live preview + dynamic pricing
   ============================================ */

.bundle-builder {
	max-width: 1180px;
	margin: 0 auto;
}

.bundle-preview {
	background: var(--color-navy-alt);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	margin-bottom: 2rem;
	border: 1px solid rgba(255,255,255,0.08);
}

/* Image sizing consolidated below for both classed and direct-child safety */

.bundle-preview__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(to top, rgba(5,13,26,0.92) 0%, rgba(5,13,26,0.4) 70%, transparent 100%);
	color: #fff;
}

.bundle-preview__label {
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 0.25rem;
}

.bundle-preview__current {
	font-size: 1.05rem;
	font-weight: 600;
}

.bundle-config {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2.25rem;
	align-items: start;
}

@media (max-width: 900px) {
	.bundle-config {
		grid-template-columns: 1fr;
	}
}

.bundle-categories {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.bundle-category {
	background: var(--cream);
	border-radius: 6px;
	padding: 1.25rem 1.35rem;
	border: 1px solid rgba(10,25,47,0.08);
}

.bundle-category h3 {
	font-size: 1.05rem;
	margin-bottom: 0.15rem;
	color: var(--color-navy);
}

.bundle-category .category-subtitle {
	font-size: 0.8rem;
	color: #5c6b7f;
	margin-bottom: 1rem;
}

.bundle-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
}

@media (max-width: 600px) {
	.bundle-options {
		grid-template-columns: 1fr;
	}
}

/* Base card image + label styles for options (enhanced interactive states live later in file) */
.product-option img {
	width: 100%;
	height: 92px;
	object-fit: cover;
	border-radius: 3px;
	margin-bottom: 0.4rem;
	display: block;
}

.product-option .product-name {
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-navy);
	margin-bottom: 0.15rem;
}

.product-option .product-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-gold);
}

.bundle-summary {
	background: var(--color-navy-alt);
	color: #fff;
	border-radius: 8px;
	padding: 1.5rem;
	position: sticky;
	top: 100px;
	border: 1px solid rgba(255,255,255,0.1);
}

.bundle-summary h4 {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: var(--color-gold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bundle-summary__list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	font-size: 0.92rem;
}

.bundle-summary__list li {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.bundle-summary__list li:last-child {
	border-bottom: none;
}

.bundle-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 1.35rem;
	font-weight: 700;
	padding-top: 0.75rem;
	border-top: 2px solid rgba(201,162,39,0.35);
	margin-top: 0.5rem;
}

.bundle-summary__total .price {
	font-size: 1.65rem;
	color: var(--color-gold);
}

.bundle-summary .sm-btn {
	width: 100%;
	margin-top: 1.25rem;
}

.bundle-note {
	font-size: 0.75rem;
	opacity: 0.7;
	margin-top: 1rem;
	line-height: 1.4;
}

/* Ensure preview image is always properly sized even if class missed */
.bundle-preview > img,
.bundle-preview__image {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
	transition: opacity 0.25s ease;
	background: #0a192f;
}

/* Stronger menu-like selection feedback for product options */
.product-option {
	border: 2px solid transparent;
	border-radius: 6px;
	padding: 0.55rem;
	background: #f8f6f0; /* warm off-white for option cards */
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	position: relative;
}
.product-option:hover {
	border-color: rgba(201,162,39,0.45);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.product-option:active {
	transform: scale(0.985);
}
.product-option.selected {
	border-color: var(--color-gold);
	background: var(--paper);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}
.product-option.selected::after {
	content: '✓';
	position: absolute;
	top: 6px;
	right: 8px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 11px;
	line-height: 1;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Price change flash animation - makes "price changes with selections" obvious */
.bundle-summary__total .price {
	transition: color 0.1s ease, transform 0.1s ease;
}
.bundle-summary__total .price.price-updated {
	color: #fff;
	transform: scale(1.08);
	animation: cgPricePop 420ms ease-out forwards;
}
@keyframes cgPricePop {
	0%   { transform: scale(1.08); color: #fff; }
	35%  { transform: scale(1.02); color: var(--color-gold); }
	100% { transform: scale(1); color: var(--color-gold); }
}

/* Configurator page section backgrounds - alternate light (paper) / darker cream for visual separation below hero */
.configurator-section--main {
	background: var(--paper);
	padding: 3rem 0 4rem;
}
.configurator-section--how {
	background: var(--cream);
	padding: 3rem 0;
}
.configurator-section--examples {
	background: var(--paper);
	padding: 2.5rem 0 3.5rem;
}

/* Responsive for package sections */
@media (max-width: 900px) {
	.package-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.package-section--dark {
		padding: 4rem 0 3.5rem;
	}
}

/* ============================================
   PHASE 4: MID-PAGE CATEGORIES + HAT PATCHES REFINEMENTS
   ============================================ */

.categories-section {
	padding: 6rem 0 5rem;
	/* background set via modifier (e.g. --dark) or default inheritance */
}

.categories-section .section-header {
	margin-bottom: 3.25rem;
}

.categories-section h2 {
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	margin-top: 0.5rem;
}

.categories-grid {
	gap: 1.5rem;
}

.category-card {
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(10, 25, 47, 0.08);
	background: #fff;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(10, 25, 47, 0.1);
	border-color: rgba(10, 25, 47, 0.12);
}

.category-card__image {
	height: 210px;
	background-size: cover;
	background-position: center;
}

.category-card__content {
	padding: 1.5rem;
}

.category-card h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	color: var(--color-navy);
}

.category-card p {
	font-size: 0.92rem;
	line-height: 1.55;
	color: #4a5568;
	margin-bottom: 1.1rem;
}

.category-card .sm-btn {
	font-size: 0.8rem;
	padding: 10px 20px;
}

/* Hat Patches - Phase 4 Polish */
.hat-patches-section {
	padding: 5rem 0 5.5rem;
	background: #fff;
}

.hat-patches__grid {
	gap: 3rem;
	align-items: center;
}

.hat-patches__image {
	height: 480px;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(10, 25, 47, 0.12);
}

.hat-patches__content h2 {
	margin-bottom: 1rem;
	line-height: 1.15;
}

.hat-patches__content p {
	font-size: 1rem;
	max-width: 540px;
	margin-bottom: 1.35rem;
}

.hat-patches__features {
	margin-bottom: 1.75rem;
}

.hat-patches__features li {
	padding-left: 1.75rem;
	margin-bottom: 0.35rem;
}

.hat-patches__features li:before {
	color: var(--color-gold);
}

.hat-patches__actions .sm-btn {
	font-size: 0.85rem;
	padding: 12px 24px;
}

@media (max-width: 768px) {
	.hat-patches__image {
		height: 380px;
	}
}
.category-card--featured {
	border: 2px solid var(--color-gold);
}

.category-card--featured h3 {
	color: var(--color-navy);
}
/* Phase 4 - Section header refinements for mid-page */
.categories-section .eyebrow,
.hat-patches-section .eyebrow {
	letter-spacing: 2.5px;
	font-weight: 600;
	color: var(--color-gold);
}

/* ============================================
   PHASE 4 TARGETED POLISH - Categories + Hat Patches
   ============================================ */

/* Categories Section Polish */
.categories-section {
	padding: 5.25rem 0 4.75rem;
	background: var(--paper);
}

.categories-section .section-header {
	margin-bottom: 2.75rem;
}

.categories-section h2 {
	font-size: clamp(2rem, 4.8vw, 2.75rem);
	letter-spacing: -0.02em;
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (max-width: 768px) {
	.categories-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.category-card {
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(10,25,47,0.06);
	box-shadow: 0 2px 12px rgba(10,25,47,0.05);
	transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), 
	            box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),
	            border-color 0.2s ease;
}

.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(10,25,47,0.09);
	border-color: rgba(10,25,47,0.1);
}

.category-card__image {
	height: 205px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.category-card__image:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.0) 60%, rgba(10,25,47,0.12) 100%);
}

.category-card__content {
	padding: 1.35rem 1.4rem 1.5rem;
}

.category-card h3 {
	font-size: 1.22rem;
	margin-bottom: 0.45rem;
	font-weight: 700;
	color: var(--color-navy);
}

.category-card p {
	font-size: 0.9rem;
	line-height: 1.5;
	color: #475569;
	margin-bottom: 1rem;
}

.category-card .sm-btn {
	font-size: 0.78rem;
	padding: 9px 18px;
	letter-spacing: 0.3px;
}

/* Featured Illustration Card */
.category-card--illustration {
	border-color: rgba(201, 162, 39, 0.25);
}

.category-card--illustration:hover {
	border-color: var(--color-gold);
}

/* Hat Patches Section Polish */
.hat-patches-section {
	padding: 6rem 0 5.5rem; /* extra breathing room */
}

.hat-patches__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.75rem;
	align-items: center;
}

@media (max-width: 900px) {
	.hat-patches__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

.hat-patches__image {
	height: 460px;
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(10,25,47,0.11);
}

.hat-patches__content h2 {
	font-size: clamp(1.95rem, 4.2vw, 2.65rem);
	margin-bottom: 0.85rem;
	line-height: 1.15;
}

.hat-patches__content p {
	font-size: 0.98rem;
	max-width: 540px;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.hat-patches__features {
	margin: 0 0 1.6rem;
	padding-left: 0.25rem;
}

.hat-patches__features li {
	font-size: 0.93rem;
	padding: 0.32rem 0 0.32rem 1.65rem;
	line-height: 1.45;
}

.hat-patches__features li:before {
	content: "→";
	color: var(--color-gold);
	font-weight: 600;
	margin-right: 0.5rem;
}

.hat-patches__actions {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
}

.hat-patches__actions .sm-btn {
	font-size: 0.82rem;
	padding: 11px 22px;
}

@media (max-width: 600px) {
	.hat-patches__image {
		height: 340px;
	}
}
.category-card__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--color-gold);
	color: var(--color-navy);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border-radius: 2px;
	text-transform: uppercase;
}

/* Dark variant for Collections by occasion. section (bg dark, header text light) */
.categories-section--dark,
.categories-section.categories-section--dark {
	background: var(--ink) !important;
	color: var(--cream);
}
.categories-section--dark .section-head p,
.categories-section.categories-section--dark .section-head p {
	color: var(--cream) !important;
	opacity: 0.9;
}

/* Cards on dark section: dark cards with light text for full section inversion */
.categories-section--dark .category-card,
.categories-section.categories-section--dark .category-card {
	background: var(--color-navy-light) !important;
	color: var(--cream);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	border-color: rgba(255, 255, 255, 0.1);
}
.categories-section--dark .category-card:hover,
.categories-section.categories-section--dark .category-card:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	border-color: var(--color-gold);
}

/* Light text inside the dark cards */
.categories-section--dark .category-card h3,
.categories-section.categories-section--dark .category-card h3 {
	color: var(--cream) !important;
}
.categories-section--dark .category-card p,
.categories-section.categories-section--dark .category-card p {
	color: rgba(245, 241, 231, 0.85) !important; /* cream with slight transparency */
}

/* Subtle large numbers on dark cards - boost opacity a bit for visibility */
.categories-section--dark .card .num,
.categories-section.categories-section--dark .card .num {
	color: var(--brass);
	opacity: 0.3;
}

/* ============================================
   PHASE 5: WOOCOMMERCE STYLING - CHAMPAGNE
   ============================================ */

.woocommerce .products,
.shop-products-main .products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

@media (max-width: 900px) {
	.woocommerce .products,
	.shop-products-main .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.woocommerce .products,
	.shop-products-main .products {
		grid-template-columns: 1fr;
	}
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border: 1px solid rgba(10, 25, 47, 0.08);
	border-radius: 6px;
	padding: 0;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(10, 25, 47, 0.08);
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	border-radius: 0;
	margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-navy);
	padding: 0.85rem 1rem 0.25rem;
	margin: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--color-navy);
	font-weight: 600;
	padding: 0 1rem 0.75rem;
}

.woocommerce ul.products li.product .price ins {
	color: var(--color-gold);
	text-decoration: none;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	background: var(--color-gold);
	color: var(--color-navy);
	border: none;
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 20px;
	margin: 0;
	width: 100%;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--color-gold-hover);
	color: white;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--color-gold);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--color-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-navy);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	background: var(--color-cream);
	border-left: 4px solid var(--color-gold);
}

.shop-page-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2.25rem;
}

@media (max-width: 900px) {
	.shop-page-layout {
		grid-template-columns: 1fr;
	}
}

.shop-filters-sidebar {
	background: #fff;
	padding: 1.5rem;
	border: 1px solid rgba(10,25,47,0.06);
	border-radius: 6px;
}

.filter-card__title {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	color: var(--color-navy);
}

.shop-promo-card {
	margin-top: 1.5rem;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}

.shop-category-cards__title {
	font-size: 1.35rem;
}

.shop-category-cards__subtitle {
	font-size: 0.85rem;
	opacity: 0.7;
	margin-top: 0.25rem;
	color: var(--color-navy);
}
.shop-intro {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.shop-intro__title {
	font-size: 1.8rem;
	margin-bottom: 0.4rem;
}

.shop-intro__text {
	max-width: 620px;
	font-size: 1rem;
	color: #4a5568;
}
/* Phase 6 Final Polish - Additional Responsiveness & Conversion */

/* Better mobile shop experience */
@media (max-width: 600px) {
	.shop-page-layout {
		gap: 1.5rem;
	}

	.shop-filters-sidebar {
		padding: 1rem;
	}

	.woocommerce ul.products li.product .button {
		padding: 14px;
		font-size: 0.85rem;
	}
}

/* Improved single product layout */
.woocommerce div.product .product_title {
	font-size: 2rem;
	line-height: 1.15;
}

.woocommerce div.product .price {
	font-size: 1.4rem;
}

/* Conversion-focused button states */
.woocommerce button.button.alt,
.woocommerce button.button {
	background: var(--color-gold);
	color: var(--color-navy);
	font-weight: 700;
}

.woocommerce button.button.alt:hover,
.woocommerce button.button:hover {
	background: var(--color-gold-hover);
	color: white;
}

/* ============================================
   SINGLE PRODUCT PAGE - LUXURY CUSTOM STYLING
   Matches the premium Champagne Graphics aesthetic + mockup structure
   (filter sidebar removed)
   ============================================ */

.product-page .product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(17,24,39,.08);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.product-page .product-card > * {
  min-width: 0;
  overflow: hidden;
}

.product-page .product-media .gallery-main {
  background: #fff;
  border-radius: 18px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(17,24,39,.06);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.product-page .product-media {
  width: 100%;
  max-width: 100%;
}

.product-page .product-media .woocommerce-product-gallery,
.product-page .product-media .woocommerce-product-gallery__wrapper,
.product-page .product-media .woocommerce-product-gallery__image {
  width: 100% !important;
  max-width: 100% !important;
}

.product-page .product-media img {
  max-width: 100% !important;
  height: auto;
}

.product-page .product-media img {
  max-width: 100% !important;
  height: auto;
}

.product-page .product-media .gallery-main img {
  max-width: 76%;
  height: auto;
  display: block;
  max-width: 100%; /* ensure no overflow */
}

.product-page .product-media,
.product-page .product-info {
  min-width: 0;
}

.product-page .product-media .search-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.8);
  font-size: 20px;
}

.product-page .product-media .thumbs {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.product-page .product-media .thumb {
  width: 72px;
  height: 86px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-page .product-media .thumb img {
  max-width: 80%;
  height: auto;
}

.product-page .product-media .thumb.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197,164,109,.2);
}

.product-page .product-info {
  padding-top: 4px;
  width: 100%;
  max-width: 100%;
}

.product-page .product-info > *,
.product-page .option-panel,
.product-page .variations_form,
.product-page form.cart,
.product-page .variations,
.product-page .variations td,
.product-page .variations th {
  max-width: 100%;
  box-sizing: border-box;
}

.product-page .product-info .eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--aqua-deep);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.product-page .product-info h1 {
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1.02;
  margin: 0 0 14px;
  color: var(--ink);
  letter-spacing: -.035em;
}

.product-page .product-info .price {
  font-size: 22px;
  color: #9a7b3f;
  font-weight: 850;
  margin-bottom: 22px;
}

.product-page .product-info .lede {
  font-size: 17px;
  color: #344054;
  max-width: 560px;
  margin-bottom: 26px;
}

.product-page .product-info .quick-list {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.product-page .product-info .quick-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #344054;
}

.product-page .product-info .quick-list li:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-top: 8px;
  flex: 0 0 auto;
}

.product-page .option-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  margin: 24px 0;
}

.product-page .option-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 12px;
}

/* Swatches styling */
.product-page .swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.product-page .swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1;
  user-select: none;
}

.product-page .swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--gold);
}

.product-page .swatch.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 164, 109, 0.3);
}

.product-page .swatch.text-swatch {
  width: auto;
  min-width: 42px;
  height: auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  line-height: 1.2;
}

/* Image swatches (for multi-color colorways - best for hats with 2-3 colors) */
.product-page .swatch.image-swatch {
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 8px; /* slightly rounded square for product preview feel */
  overflow: hidden;
}

.product-page .swatch.image-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Multi-color swatches using gradient (for colorways with 2-3 colors) */
.product-page .swatch.multi-color-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  position: relative;
  /* For 2-3 color hats, the inline gradient will show bands */
}

/* Multi-color swatch for 2-3 color colorways (hats etc).
   The PHP generates the gradient with equal bands.
   For better 3-color look, we can use a small overlay or leave as is. */
.product-page .swatch.multi-color-swatch {
  /* The gradient from PHP will handle the colors */
}

/* Optional enhancement: for 3 colors make it look more segmented */
.product-page .swatch.multi-color-swatch[data-colors-count="3"] {
  /* can add specific if we pass data */
}

/* Hide default Woo selects when using custom swatches */
.product-page .variations_form select[name^="attribute_"] {
  display: none !important;
}

.product-page .qty-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-page .qty-row select {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 16px;
  background: #fff;
  min-width: 104px;
}

.product-page .meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
}

.product-page .description-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 44px;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.product-page .description-grid > * {
  min-width: 0;
}

.product-page .desc-card,
.product-page .size-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 10px 34px rgba(17,24,39,.04);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.product-page .desc-card h2,
.product-page .size-card h2 {
  font-family: Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.product-page .desc-card p,
.product-page .size-card p {
  color: #475467;
  margin: 0 0 14px;
}

.product-page .specs {
  margin: 16px 0 0;
  padding-left: 19px;
  color: #344054;
}

.product-page .size-placeholder {
  border: 1px dashed rgba(47,91,87,.35);
  border-radius: 16px;
  padding: 20px;
  background: rgba(47,91,87,.045);
  margin-top: 18px;
}

.product-page .size-placeholder strong {
  color: var(--aqua-deep);
}

.product-page .also {
  margin-top: 70px;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.product-page .section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 42px;
  margin-bottom: 24px;
}

.product-page .section-title .eyebrow {
  margin-bottom: 8px;
}

.product-page .product-suggestions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.product-page .product-suggestions > * {
  min-width: 0;
  overflow: hidden;
}

/* Fix breadcrumb and suggested additions section to stay inside content boundary */
.product-page .breadcrumb,
.product-page .also .section-head {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  /* Align text/content with the .product-card's inner content (card has 24px padding) */
  padding-left: 24px;
  padding-right: 24px;
}

.product-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Force all product page content to stay within the sm-container boundary */
.product-page .product-card,
.product-page .description-grid,
.product-page .product-suggestions,
.product-page .product-media,
.product-page .product-info,
.product-page .woocommerce-product-gallery,
.product-page .woocommerce-product-gallery__wrapper,
.product-page .woocommerce-product-gallery__image {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.product-page .product-card,
.product-page .description-grid,
.product-page .product-suggestions {
  max-width: var(--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.product-page .suggestion {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(17,24,39,.05);
  max-width: 100%;
  box-sizing: border-box;
}

.product-page .suggestion-img {
  height: 190px;
  background: linear-gradient(180deg, #f7f3ea, #e3d9c6);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.product-page .suggestion-body {
  padding: 18px;
}

.product-page .suggestion h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.product-page .suggestion p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}

.product-page .mini-link {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 850;
  color: var(--aqua-deep);
}

@media (max-width: 980px) {
  .product-page .product-card {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .product-page .gallery-main {
    min-height: 380px;
  }
  .product-page .description-grid,
  .product-page .product-suggestions {
    grid-template-columns: 1fr 1fr;
  }
  .product-page .product-info h1 {
    font-size: 32px;
  }
}

@media (max-width: 640px) {
  .product-page .description-grid,
  .product-page .product-suggestions {
    grid-template-columns: 1fr;
  }
  .product-page .product-card {
    border-radius: 18px;
  }
  .product-page .gallery-main {
    min-height: 320px;
  }
  .product-page .product-info h1 {
    font-size: 31px;
  }
}

/* ============================================
   ARTWORK SERVICES PAGE
   Styles adapted from mockup, using theme variables and classes
   ============================================ */

.artwork-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main#primary-content.artwork-page .sm-container,
.artwork-page .sm-container {
  width: 100% !important;
  max-width: var(--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force artwork page content to stay inside .sm-container boundary (same pattern as product page) */
main#primary-content.artwork-page .artwork-service-card,
main#primary-content.artwork-page .artwork-project-card,
main#primary-content.artwork-page .artwork-step,
main#primary-content.artwork-page .artwork-faq-item,
main#primary-content.artwork-page .artwork-note-card,
main#primary-content.artwork-page .artwork-hero-card,
main#primary-content.artwork-page .artwork-image-panel,
main#primary-content.artwork-page .artwork-cta {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

main#primary-content.artwork-page .artwork-service-grid,
main#primary-content.artwork-page .artwork-project-grid,
main#primary-content.artwork-page .artwork-process,
main#primary-content.artwork-page .artwork-hero-inner,
main#primary-content.artwork-page .artwork-intro,
main#primary-content.artwork-page .artwork-split,
main#primary-content.artwork-page .artwork-faq,
main#primary-content.artwork-page .artwork-cta {
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Prevent grid children from overflowing their cells */
main#primary-content.artwork-page .artwork-service-card,
main#primary-content.artwork-page .artwork-project-card,
main#primary-content.artwork-page .artwork-step,
main#primary-content.artwork-page .artwork-faq-item,
main#primary-content.artwork-page .artwork-note-card {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure grid items in two-column layouts don't force width */
main#primary-content.artwork-page .artwork-hero-inner > *,
main#primary-content.artwork-page .artwork-intro > *,
main#primary-content.artwork-page .artwork-split > *,
main#primary-content.artwork-page .artwork-faq > * {
  min-width: 0;
}

.artwork-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(115deg, rgba(17,24,39,.92), rgba(47,86,82,.82)), url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&w=1800&q=80') center/cover;
  min-height: 620px;
  color: var(--cream);
}

.artwork-hero:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10%;
  height: 180px;
  background: var(--cream);
  transform: rotate(-2deg);
}

.artwork-hero-inner {
  position: relative;
  z-index: 2;
  padding: 92px 0 150px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .75fr);
  gap: 54px;
  align-items: end;
  width: 100%;
  max-width: 100%;
}

.artwork-hero .eyebrow {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 900;
  margin-bottom: 14px;
}

.artwork-hero h1 {
  font-family: Georgia, serif;
  font-size: 68px;
  line-height: .95;
  margin: 0 0 22px;
  max-width: 760px;
  font-weight: 700;
}

.artwork-hero p {
  font-size: 18px;
  max-width: 610px;
  color: rgba(245,241,231,.86);
  margin: 0 0 34px;
}

.artwork-hero-card {
  background: rgba(251,248,240,.10);
  border: 1px solid rgba(245,241,231,.22);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(16px);
}

.artwork-hero-card h3 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin: 0 0 10px;
}

.artwork-hero-card p {
  font-size: 14px;
  margin: 0;
  color: rgba(245,241,231,.78);
}

main#primary-content.artwork-page .artwork-intro {
  display: flex !important;
  flex-direction: row;
  gap: 40px;
  align-items: start;
}

main#primary-content.artwork-page .artwork-intro > div:first-child {
  flex: 0.8;
  min-width: 0;
}

main#primary-content.artwork-page .artwork-intro > p {
  flex: 1.2;
  min-width: 0;
}

.artwork-kicker {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aqua);
  font-weight: 900;
}

.artwork-intro h2 {
  font-family: Georgia, serif;
  font-size: 46px;
  line-height: 1.02;
  margin: 10px 0 0;
  color: var(--ink);
}

.artwork-intro p {
  font-size: 18px;
  color: #505967;
  margin: 0;
}

.artwork-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.artwork-service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 10px 24px rgba(17,24,39,.04);
  min-height: 260px;
  overflow: hidden;
}

.artwork-service-card .num {
  font-family: Georgia, serif;
  color: var(--gold);
  font-size: 34px;
}

.artwork-service-card h3 {
  font-size: 22px;
  margin: 18px 0 10px;
  color: var(--ink);
  overflow-wrap: break-word;
}

.artwork-service-card p {
  color: var(--muted);
  margin: 0;
  overflow-wrap: break-word;
}

.artwork-dark-band {
  background: var(--ink);
  color: var(--cream);
  margin-top: 40px;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Give consistent vertical spacing to main artwork sections */
.artwork-page .section {
  padding-top: 60px;
  padding-bottom: 60px;
  max-width: 100%;
}

.artwork-dark-band .section-title h2 {
  color: var(--cream);
}

.artwork-dark-band .section-title p {
  color: rgba(245,241,231,.72);
}

.artwork-section-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}

.artwork-section-title p {
  font-size: 17px;
  color: #5f6670;
  margin: 14px 0 0;
}

.artwork-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.artwork-step {
  border: 1px solid rgba(245,241,231,.15);
  border-radius: var(--radius);
  padding: 26px;
  background: rgba(245,241,231,.05);
}

.artwork-step span {
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .18em;
}

.artwork-step h3 {
  margin: 18px 0 8px;
}

.artwork-step p {
  color: rgba(245,241,231,.7);
  margin: 0;
  font-size: 14px;
}

main#primary-content.artwork-page .artwork-split {
  display: flex !important;
  flex-direction: row;
  gap: 24px;
  align-items: start;
}

main#primary-content.artwork-page .artwork-image-panel {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  flex: 1;
  max-width: 45%;
  min-width: 0;
}

.artwork-image-panel img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

main#primary-content.artwork-page .artwork-note-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  flex: 1.2;
  min-width: 0;
}

.artwork-note-card h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1.05;
  margin: 0 0 12px;
}

.artwork-checklist {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.artwork-checklist li {
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: #4d5661;
  font-size: 0.95em;
}

.artwork-checklist li:before {
  content: "•";
  position: absolute;
  left: 7px;
  color: var(--gold);
  font-size: 24px;
  line-height: 18px;
}

.artwork-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.artwork-project-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(17,24,39,.06);
}

.artwork-project-card img {
  height: 180px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.artwork-project-card div {
  padding: 24px;
}

.artwork-project-card h3 {
  margin: 0 0 8px;
}

.artwork-project-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.artwork-mini-link {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--aqua);
}

.artwork-faq {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 50px;
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.artwork-faq-list {
  display: grid;
  gap: 14px;
}

.artwork-faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}

.artwork-faq-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.artwork-faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.artwork-cta {
  background: linear-gradient(115deg, rgba(17,24,39,.94), rgba(47,86,82,.9)), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') center/cover;
  border-radius: 32px;
  padding: 62px;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.artwork-cta h2 {
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1;
  margin: 0 0 12px;
}

.artwork-cta p {
  margin: 0;
  color: rgba(245,241,231,.76);
  max-width: 620px;
}

.artwork-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 38px 24px;
}

.artwork-foot-inner {
  max-width: 1180px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.artwork-foot-inner h3 {
  font-family: Georgia, serif;
  margin: 0 0 5px;
}

.artwork-foot-inner p {
  margin: 4px 0;
  color: #56606e;
  font-size: 13px;
}

@media (max-width: 900px) {
  main#primary-content.artwork-page .artwork-hero-inner,
  main#primary-content.artwork-page .artwork-intro,
  main#primary-content.artwork-page .artwork-split,
  main#primary-content.artwork-page .artwork-faq {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .artwork-hero h1 {
    font-size: 48px;
  }
  .artwork-service-grid,
  .artwork-project-grid,
  .artwork-process {
    grid-template-columns: minmax(0, 1fr);
  }
  .artwork-cta,
  .artwork-foot-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .artwork-section {
    padding: 32px 16px;
  }
  .artwork-hero {
    min-height: 480px;
  }
  .artwork-hero h1 {
    font-size: 36px;
  }
  .artwork-hero-inner {
    padding: 60px 0 100px;
  }
  .artwork-service-grid,
  .artwork-project-grid {
    grid-template-columns: 1fr;
  }
  .artwork-cta {
    padding: 40px 20px;
  }
}

/* Single Product Layout - exact structure requested */
.product-page .product-single-grid {
	display: grid;
	grid-template-columns: 58% 42%;
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 900px) {
	.product-page .product-single-grid {
		grid-template-columns: 1fr;
	}
}

/* Left column: Featured image + gallery below */
.product-page .product-left {
	position: relative;
}

.product-page .product-left .woocommerce-product-gallery {
	margin-bottom: 0;
}

/* Force gallery: main image on top, thumbnails below in a row */
.product-page .product-left .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 12px;
}

.product-page .product-left .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-page .product-left .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 1;
	max-width: 80px;
}

.product-page .product-left .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 0.6;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.product-page .product-left .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--brass);
}

/* Breadcrumbs */
.product-page .woocommerce-breadcrumb {
	font-size: 0.8rem;
	color: var(--muted);
	margin-bottom: 1.25rem;
}

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

.product-page .woocommerce-breadcrumb a:hover {
	color: var(--brass);
}

/* Product images */
.product-page .product-gallery-wrapper {
	background: var(--cream);
	padding: 1.5rem;
	border-radius: 10px;
	border: 1px solid var(--line);
}

.product-page .woocommerce-product-gallery {
	margin: 0;
}

.product-page .woocommerce-product-gallery__wrapper {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Summary / right column */
.product-page .product-right {
	background: var(--paper);
	padding: 1.75rem 2rem;
	border-radius: 10px;
	border: 1px solid var(--line);
}

.product-page .product-short-description {
	margin-bottom: 1.25rem;
	color: var(--ink);
	font-size: 0.98rem;
	line-height: 1.65;
}

/* Collapsible Product Options (the "filter") */
.product-page .product-options .options-collapsible {
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--cream);
}

.product-page .product-options .options-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ink);
	user-select: none;
}

.product-page .product-options .options-summary::-webkit-details-marker {
	display: none;
}

.product-page .product-options .options-arrow {
	font-size: 0.7rem;
	transition: transform 0.2s ease;
}

.product-page .product-options .options-collapsible[open] .options-arrow {
	transform: rotate(180deg);
}

.product-page .product-options .options-content {
	padding: 1rem;
	border-top: 1px solid var(--line);
	background: #fff;
}

.product-page .product_title {
	font-family: var(--font-serif);
	font-size: clamp(1.65rem, 2.8vw, 2.1rem);
	line-height: 1.15;
	margin-bottom: 0.35rem;
	color: var(--ink);
}

.product-page .woocommerce-product-details__short-description {
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0.75rem 0 1.25rem;
}

/* Price */
.product-page .price {
	font-size: 1.65rem;
	font-weight: 600;
	color: var(--brass);
	margin-bottom: 1.25rem;
}

/* Add to cart form */
.product-page .single_add_to_cart_button,
.product-page .variations_form .button {
	background: var(--brass);
	color: var(--ink);
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.85rem;
	border: none;
	transition: all 0.2s ease;
}

.product-page .single_add_to_cart_button:hover {
	background: var(--color-gold-hover);
	color: white;
	transform: translateY(-1px);
}

/* Variations and quantity */
.product-page .variations {
	margin-bottom: 1.25rem;
}

.product-page .variations label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--muted);
}

.product-page .quantity {
	margin-right: 0.75rem;
}

.product-page .quantity input {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 8px 12px;
	background: var(--cream);
}

.product-page .variations select {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 6px 10px;
	background: var(--cream);
	font-size: 0.9rem;
}

/* Below section */
.product-page .product-below {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.product-page .product-long-description,
.product-page .product-sizing-chart,
.product-page .product-related {
	margin-bottom: 2.5rem;
}

.product-page .product-long-description h3,
.product-page .product-sizing-chart h3,
.product-page .product-related h3 {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	margin-bottom: 1rem;
	color: var(--ink);
}

.product-page .product-related .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.product-page .product-related .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Make related cards look premium like shop cards */
.product-page .product-related .products li.product {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-page .product-related .products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.product-page .product-related .products li.product a {
	text-decoration: none;
}

.product-page .product-related .products .woocommerce-loop-product__title {
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.6rem 0.75rem 0.25rem;
	color: var(--ink);
}

.product-page .product-related .products .price {
	padding: 0 0.75rem 0.75rem;
	font-size: 0.95rem;
	color: var(--brass);
}

/* AGGRESSIVE FIX FOR ARTWORK CONTENT BOUNDARY - END OF FILE (force visible update after cache clear) */
main#primary-content.artwork-page .sm-container {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
main#primary-content.artwork-page .artwork-service-grid,
main#primary-content.artwork-page .artwork-project-grid,
main#primary-content.artwork-page .artwork-process,
main#primary-content.artwork-page .artwork-hero-inner,
main#primary-content.artwork-page .artwork-split,
main#primary-content.artwork-page .artwork-faq {
  max-width: 1180px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Specific extra force for services grid to stay in boundary */
#services .sm-container,
#services .artwork-service-grid {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
main#primary-content.artwork-page .artwork-service-card,
main#primary-content.artwork-page .artwork-project-card,
main#primary-content.artwork-page .artwork-step,
main#primary-content.artwork-page .artwork-faq-item,
main#primary-content.artwork-page .artwork-note-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ============================================
   SHOP PAGE (from mockup)
   Full hero + centered content boundary.
   All content constrained to --container-max (1180px).
   Converted styles, no layout inline styles.
   Uses theme vars + existing .btn / .eyebrow.
   ============================================ */

/* Boundary enforcement - follow artwork page pattern */
.shop-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main#primary-content.shop-page .sm-container,
main#primary-content.shop-page .shop-hero-inner,
.shop-page .shop-content {
  padding-top: 1rem;
}
.shop-page .shop-content,
.shop-page .filter-bar,
.shop-page .intro-row,
.shop-page .bundle-strip,
.shop-page .category-section,
.shop-page .product-grid,
.shop-page .wide-promo,
.shop-page .cta-inner {
  max-width: var(--container-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Grid children + cards must not escape cells */
.shop-page .product-grid > *,
.shop-page .bundle-strip > *,
.shop-page .filter-panel > *,
.shop-page .product-card,
.shop-page .bundle-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* HERO */
.shop-hero {
  background:
    linear-gradient(90deg, rgba(17,24,39,.78), rgba(17,24,39,.36)),
    url('https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&w=1800&q=80') center/cover;
  min-height: 390px;
  color: var(--cream);
  display: flex;
  align-items: center;
  width: 100%;
}
.shop-hero-inner {
  padding: 70px 0;
  width: 100%;
}
.shop-hero .eyebrow {
  color: var(--brass);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 14px;
}
.shop-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 7vw, 86px);
  line-height: .92;
  margin: 0 0 20px;
  letter-spacing: -.055em;
  max-width: 780px;
  font-weight: 700;
  color: var(--cream);
}
.shop-hero p {
  font-size: 18px;
  max-width: 650px;
  color: rgba(245,241,231,.9);
  margin: 0 0 30px;
}

/* FILTER BAR - collapsible details matching mockup, theme colors */
.filter-bar {
  margin: -42px auto 58px;
  position: relative;
  z-index: 2;
  background: #fffdf8;
  border: 1px solid rgba(17,24,39,.1);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(17,24,39,.08);
  overflow: hidden;
}
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 900;
  color: var(--ink);
}
.filter-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(58,111,113,.12);
  display: grid;
  place-items: center;
  color: var(--aqua);
  font-weight: 900;
}
.active-chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-right: auto;
}
.chip {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid rgba(17,24,39,.08);
  color: var(--muted);
}
.filter-bar[open] .expand-text:after { content: 'Hide Filters'; }
.filter-bar:not([open]) .expand-text:after { content: 'Show Filters'; }
.filter-panel {
  border-top: 1px solid var(--line);
  padding: 22px 24px 26px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr auto;
  gap: 22px;
  align-items: end;
  background: linear-gradient(180deg, rgba(245,241,231,.45), rgba(255,253,248,.85));
}
.filter-panel label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 9px;
}
.filter-panel input,
.filter-panel select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(17,24,39,.15);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font: inherit;
}
.filter-panel .price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.filter-panel form {
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
  align-items: inherit;
  width: 100%;
}
.filter-panel form > * {
  min-width: 0;
}

/* INTRO ROW */
.intro-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}
.intro-row h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.035em;
}
.intro-row p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
}

/* BUNDLE STRIP */
.bundle-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 70px;
}
.bundle-card {
  min-height: 300px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  color: var(--cream);
  box-shadow: 0 18px 45px rgba(17,24,39,.08);
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(255,255,255,.25);
}
.bundle-card:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,24,39,.05), rgba(17,24,39,.82));
  z-index: 1;
}
.bundle-card.arrival {
  background: url('../images/welcome-arrival-kit-bundle.jpg') center/cover;
}
.bundle-card.departure {
  background: url('../images/welcome-departure-keepsake-bundle.jpg') center/cover;
}
.bundle-content {
  position: relative;
  z-index: 2;
  padding: 34px;
  max-width: 540px;
}
.bundle-content h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1;
  margin: 8px 0 12px;
  letter-spacing: -.035em;
}
.bundle-content p {
  color: rgba(245,241,231,.86);
  margin: 0 0 20px;
}
.bundle-card .tag {
  display: inline-flex;
  background: rgba(197,164,109,.95);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
}

/* CATEGORY SECTIONS + PRODUCT GRID (4 col) */
.category-section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 26px;
}
.section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.035em;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 520px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product-card {
  background: #fffdf8;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17,24,39,.04);
  transition: .2s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(17,24,39,.08);
}
.product-img {
  height: 230px;
  background: linear-gradient(135deg, #f1eadc, #fbf8f1);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.product-img img {
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(17,24,39,.16));
}
.product-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(58,111,113,.9);
  color: var(--cream);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
}
.product-body {
  padding: 19px;
}
.product-body h3 {
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.product-body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px;
}
.product-card .price {
  font-weight: 900;
  color: var(--color-gold-dark);
  margin-bottom: 14px;
}
.small-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--ink);
}

/* WIDE PROMO */
.wide-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--ink);
  border-radius: 26px;
  overflow: hidden;
  color: var(--cream);
  margin: 60px 0;
  border: 1px solid rgba(197,164,109,.25);
}
.wide-promo .image {
  background: url('../images/South-Florida-Fishing-Sunset.webp') center/cover;
  min-height: 350px;
}
.wide-promo .copy {
  padding: 48px;
  align-self: center;
}
.wide-promo h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: .98;
  margin: 8px 0 18px;
  letter-spacing: -.04em;
}
.wide-promo p {
  color: rgba(245,241,231,.8);
  margin: 0 0 24px;
}

/* CTA BAND */
.cta-band {
  background: var(--aqua);
  color: var(--cream);
  padding: 64px 0;
  margin-top: 40px;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-inner h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -.035em;
}
.cta-inner p {
  margin: 0;
  color: rgba(245,241,231,.78);
  max-width: 620px;
}

/* RESPONSIVE - match mockup breakpoints */
@media (max-width: 980px) {
  .filter-panel {
    grid-template-columns: 1fr 1fr;
  }
  .bundle-strip,
  .wide-promo {
    grid-template-columns: 1fr;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .intro-row,
  .section-head,
  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 620px) {
  .filter-summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-panel {
    grid-template-columns: 1fr;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  .bundle-strip {
    gap: 16px;
  }
  .shop-hero h1 {
    font-size: 48px;
  }
  .shop-hero {
    min-height: 470px;
  }
}

/* Make sure old sidebar layout does not interfere on shop-page */
.shop-page .shop-page-layout {
  display: block;
}

/* Filtered results view (Woo content inside boundary) */
.shop-results {
  margin-bottom: 2rem;
}
.shop-results .section-head h2 {
  font-size: 28px;
}
.shop-results-head {
  margin-bottom: 1.25rem !important;
}
.shop-woo-results .woocommerce,
.shop-woo-results .products,
.shop-woo-results ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.shop-woo-results .products li.product,
.shop-woo-results ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.04) !important;
  min-width: 0 !important;
}
.shop-woo-results .products li.product > *,
.shop-woo-results ul.products li.product > * {
  min-width: 0;
  max-width: 100%;
}
.shop-woo-results .products li.product img,
.shop-woo-results ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain !important;
  background: linear-gradient(135deg, #f1eadc, #fbf8f1);
}
.shop-woo-results .woocommerce-loop-product__title,
.shop-woo-results .products li.product .woocommerce-loop-product__title {
  font-size: 16px !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
}
.shop-woo-results .price {
  padding: 0 16px 12px !important;
  color: var(--color-gold-dark) !important;
  font-weight: 700 !important;
}
.shop-woo-results .button {
  margin: 0 16px 16px !important;
  display: inline-flex !important;
}

/* Hide default Woo shop header title on our curated/filtered views to avoid duplicates */
.shop-page .woocommerce-products-header {
  display: none !important;
}
.shop-woo-results .woocommerce-result-count,
.shop-woo-results .woocommerce-ordering {
  display: none !important;
}

/* Make filter form grid items participate correctly */
.filter-panel form > div {
  min-width: 0;
}
.filter-panel button.btn {
  height: 44px;
  align-self: end;
}