/*
Theme Name: Farmstead
Description: A custom theme for a pasture-raised meat chicken farm.
Version: 1.0.0
Author: McKee
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	/* Charcoals */
	--color-charcoal:      #2c2c2c;
	--color-charcoal-mid:  #444444;
	--color-charcoal-light:#666666;

	/* Beiges */
	--color-beige:         #f8f6ef;
	--color-beige-dark:    #efe9da;
	--color-beige-mid:     #e8e0cc;

	/* Yellows / Accent */
	--color-yellow:        #eece38;
	--color-yellow-dark:   #c9a800;
	--color-yellow-pale:   #fdf6cc;

	/* Neutrals */
	--color-white:         #ffffff;
	--color-gray-dark:     #2c2c2c;
	--color-gray:          #767676;
	--color-gray-mid:      #aaaaaa;
	--color-gray-light:    #e0ddd6;
	--color-gray-pale:     #f4f2ec;

	/* Legacy green aliases — mapped to new palette so existing rules still work */
	--color-green-dark:    #2c2c2c;
	--color-green:         #2c2c2c;
	--color-green-mid:     #444444;
	--color-green-light:   #aaaaaa;
	--color-green-pale:    #f8f6ef;
	--color-amber:         #eece38;
	--color-amber-dark:    #c9a800;
	--color-amber-light:   #f5df6e;
	--color-amber-pale:    #fdf6cc;
	--color-brown:         #767676;
	--color-cream:         #f8f6ef;
	--color-off-white:     #f4f2ec;

	/* Semantic aliases */
	--color-primary:       var(--color-charcoal);
	--color-secondary:     var(--color-beige);
	--color-accent:        var(--color-yellow);
	--color-text:          var(--color-charcoal);
	--color-text-muted:    var(--color-gray);
	--color-bg:            var(--color-white);
	--color-bg-alt:        var(--color-beige);
	--color-border:        var(--color-gray-light);

	/* Header tokens */
	--header-bg:           #2c2c2c;
	--header-menu-color:   #ffffff;
	--header-menu-hover:   #eece38;
	--header-menu-active:  #eece38;

	/* Typography */
	--font-heading:        'Bricolage Grotesque', 'system-ui', sans-serif;
	--font-body:           'Bricolage Grotesque', 'system-ui', sans-serif;
	--font-size-base:      1rem;
	--font-size-sm:        0.875rem;
	--font-size-lg:        1.125rem;
	--font-size-xl:        1.25rem;
	--font-size-2xl:       1.5rem;
	--font-size-3xl:       1.875rem;
	--font-size-4xl:       2.25rem;
	--font-size-5xl:       3rem;
	--line-height-tight:   1.2;
	--line-height-snug:    1.4;
	--line-height-normal:  1.6;
	--line-height-loose:   1.8;
	--font-weight-normal:  400;
	--font-weight-medium:  500;
	--font-weight-semibold:600;
	--font-weight-bold:    700;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-28: 7rem;

	/* Layout */
	--container-max:       1200px;
	--container-wide:      1400px;
	--container-narrow:    760px;
	--container-padding:   clamp(1rem, 4vw, 2rem);
	--grid-gap:            clamp(1rem, 3vw, 2rem);

	/* Borders & Radii */
	--radius-sm:    6px;
	--radius:       12px;
	--radius-lg:    20px;
	--radius-xl:    28px;
	--radius-full:  9999px;
	--border-width: 1px;

	/* Shadows — softer, more layered */
	--shadow-sm:   0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
	--shadow:      0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
	--shadow-md:   0 4px 8px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.10);
	--shadow-lg:   0 8px 16px rgba(0,0,0,.04), 0 24px 64px rgba(0,0,0,.12);

	/* Transitions */
	--transition:       200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow:  350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Modern CSS Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	list-style: none;
}

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

button {
	cursor: pointer;
	background: none;
	border: none;
}

table {
	border-collapse: collapse;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
	font-family:   var(--font-body);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-normal);
	line-height:   var(--line-height-normal);
	color:         var(--color-text);
	background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family:  var(--font-heading);
	font-weight:  var(--font-weight-bold);
	line-height:  var(--line-height-tight);
	color:        var(--color-green-dark);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

/* Heading sizes at smaller breakpoints handled in Responsive section below */

p {
	margin-bottom: var(--space-4);
	line-height:   var(--line-height-normal);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color:      var(--color-primary);
	transition: color var(--transition);
}

a:hover {
	color: var(--color-green-dark);
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

em,
i {
	font-style: italic;
}

/* ==========================================================================
   WooCommerce / Shop Preview Styling
   ========================================================================== */

.shop-preview-grid,
.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin: var(--space-12) 0;
}

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

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

.shop-preview-card,
.products .product {
	background: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.shop-preview-card:hover,
.products .product:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.shop-preview-card-image,
.products .product img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.shop-preview-card-body,
.products .product .woocommerce-loop-product__title,
.products .product .price,
.products .product .button {
	padding: var(--space-5);
}

.shop-preview-card-title,
.products .product .woocommerce-loop-product__title {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--space-3);
	color: var(--color-charcoal);
}

.shop-preview-card-price,
.products .product .price {
	display: inline-block;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-amber-dark);
}

.shop-preview-card-button,
.products .product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: calc(var(--space-3) + 0.125rem) var(--space-4);
	margin-top: var(--space-4);
	border-radius: var(--radius-full);
	border: 1px solid transparent;
	background-color: var(--color-yellow);
	color: var(--color-charcoal);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.shop-preview-card-button:hover,
.products .product .button:hover {
	background-color: var(--color-amber-dark);
	color: var(--color-white);
}

.product .onsale,
.shop-preview-card .product-badge,
.woocommerce-badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	padding: var(--space-2) var(--space-3);
	background: var(--color-yellow);
	color: var(--color-charcoal);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-full);
}

.product .woocommerce-loop-product__title,
.product .price,
.shop-preview-card-title,
.shop-preview-card-price {
	line-height: 1.3;
}

.shop-preview-card {
	position: relative;
}


small {
	font-size: var(--font-size-sm);
}

blockquote {
	border-left: 4px solid var(--color-accent);
	padding-left: var(--space-6);
	margin-left:  0;
	font-style:   italic;
	color:        var(--color-text-muted);
}

/* ==========================================================================
   Base Layout — Container & Grid
   ========================================================================== */

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

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: var(--container-narrow);
}

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

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
}

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

/* Grid breakpoints handled in Responsive section below */

.section-wrap {
	padding-block: var(--space-16);
}

.section-hero {
	padding-block: 0;
}

.section-wrap--sm {
	padding-block: var(--space-10);
}

.section-wrap--lg {
	padding-block: var(--space-24);
}

.section-title {
	text-align:    center;
	margin-bottom: var(--space-12);
}

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

/* ==========================================================================
   Availability Banner
   ========================================================================== */

.availability-banner {
	background-color: var(--color-amber);
	color:            var(--color-white);
	text-align:       center;
	padding:          var(--space-2) var(--container-padding);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-semibold);
	letter-spacing:   0.02em;
}

/* ==========================================================================
   Sticky Header & Nav
   ========================================================================== */

.site-header {
	position:         sticky;
	top:              0;
	z-index:          100;
	background-color: var(--color-white);
	border-bottom:    var(--border-width) solid var(--color-border);
	box-shadow:       var(--shadow-md);
}

.header-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	max-width:       var(--container-max);
	margin-inline:   auto;
	padding-inline:  var(--container-padding);
	padding-block:   0;
	gap:             var(--space-6);
	height:          150px;
}

/* Branding */
.site-branding .custom-logo {
	height:     150px;
	width:      auto;
	display:    block;
}

.site-branding .site-name {
	font-family: var(--font-heading);
	font-size:   var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color:       var(--color-green-dark);
	transition:  color var(--transition);
}

.site-branding .site-name:hover {
	color: var(--color-primary);
}

/* Primary nav */
.primary-navigation {
	display:         flex;
	align-items:     center;
	gap:             var(--space-4);
	justify-content: flex-end;
	flex:            1;
}

.primary-navigation #primary-menu {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
}

.primary-navigation #primary-menu li {
	position: relative;
}

.primary-navigation #primary-menu a {
	display:      block;
	padding:      var(--space-2) var(--space-3);
	font-size:    var(--font-size-xl);
	font-weight:  var(--font-weight-semibold);
	color:        var(--color-text);
	border-radius: var(--radius-sm);
	transition:   color var(--transition), background-color var(--transition);
	white-space:  nowrap;
}

.primary-navigation #primary-menu a:hover {
	color:            var(--color-primary);
	background-color: var(--color-green-pale);
	border-radius:    var(--radius-full);
}

.primary-navigation #primary-menu .current-menu-item > a,
.primary-navigation #primary-menu .current-menu-ancestor > a {
	background-color: transparent;
	color:            #eece38;
	border-radius:    0;
	text-decoration:  underline;
	text-decoration-color: #eece38;
	text-underline-offset: 4px;
}


/* Mobile submenu toggle — hidden on desktop, shown via media query */
.submenu-toggle { display: none; }

/* Kill any caret added by WooCommerce or other plugins */
.primary-navigation #primary-menu .menu-item-has-children > a::after,
.primary-navigation #primary-menu .menu-item-has-children > a::before {
	display: none !important;
}

/* Desktop dropdown sub-menu */
.primary-navigation #primary-menu .sub-menu {
	position:      absolute;
	top:           100%;
	left:          0;
	min-width:     200px;
	background:    var(--color-white);
	border:        none;
	border-radius: 0;
	box-shadow:    var(--shadow-md);
	padding:       var(--space-2) 0;
	z-index:       300;
	list-style:    none;
	margin:        0;
	overflow:      hidden;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(6px);
	transition:    opacity var(--transition), visibility var(--transition), transform var(--transition);
}

.primary-navigation #primary-menu li:hover > .sub-menu,
.primary-navigation #primary-menu li:focus-within > .sub-menu {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

.primary-navigation #primary-menu .sub-menu li {
	position: static;
	width:    100%;
}

.primary-navigation #primary-menu .sub-menu a {
	font-size:     var(--font-size-sm);
	color:         var(--color-text);
	border-radius: 0;
	padding:       var(--space-2) var(--space-5);
	white-space:   nowrap;
}

.primary-navigation #primary-menu .sub-menu a:hover,
.primary-navigation #primary-menu .sub-menu .current-menu-item > a {
	background-color: var(--color-yellow);
	color:            var(--color-charcoal);
}

/* Hamburger */
.menu-toggle {
	display:        none;
	flex-direction: column;
	justify-content:center;
	gap:            5px;
	width:          40px;
	height:         40px;
	padding:        var(--space-2);
	border-radius:  var(--radius-sm);
	transition:     background-color var(--transition);
}

.menu-toggle:hover {
	background-color: var(--color-green-pale);
}

.hamburger-bar {
	display:          block;
	width:            100%;
	height:           2px;
	background-color: var(--color-text);
	border-radius:    var(--radius-full);
	transition:       transform var(--transition-slow), opacity var(--transition-slow);
}

.menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
	background-color: var(--color-green-dark);
	background-image: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green) 100%);
	color:            var(--color-white);
	padding-block:    var(--space-24);
	text-align:       center;
}

.hero-inner {
	max-width:      var(--container-narrow);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--space-6);
}

.hero-headline {
	color:       var(--color-white);
	font-size:   var(--font-size-5xl);
	line-height: var(--line-height-tight);
}

.hero-subheadline {
	font-size:   var(--font-size-lg);
	line-height: var(--line-height-loose);
	color:       var(--color-green-light);
	max-width:   56ch;
	margin-bottom: 0;
}

.hero-cta {
	display:          inline-block;
	padding:          var(--space-4) var(--space-8);
	background-color: var(--color-accent);
	color:            var(--color-white);
	font-size:        var(--font-size-lg);
	font-weight:      var(--font-weight-bold);
	border-radius:    var(--radius);
	transition:       background-color var(--transition), transform var(--transition);
}

.hero-cta:hover {
	background-color: var(--color-amber-dark);
	color:            var(--color-white);
	transform:        translateY(-2px);
}

/* ==========================================================================
   Features Section
   ========================================================================== */

.features {
	background-color: var(--color-off-white);
}

.features-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
	display:        grid;
	grid-template-columns: repeat(3, 1fr);
	gap:            var(--grid-gap);
}

.feature {
	text-align:   center;
	padding:      var(--space-8);
	background:   var(--color-white);
	border-radius:var(--radius-lg);
	box-shadow:   var(--shadow-sm);
}

.feature-icon {
	width:            64px;
	height:           64px;
	margin-inline:    auto;
	margin-bottom:    var(--space-4);
	background-color: var(--color-green-pale);
	border-radius:    var(--radius-full);
}

.feature-heading {
	font-size:     var(--font-size-xl);
	margin-bottom: var(--space-3);
	color:         var(--color-green-dark);
}

.feature-description {
	font-size:  var(--font-size-sm);
	color:      var(--color-text-muted);
	line-height:var(--line-height-loose);
	margin-bottom: 0;
}

/* ==========================================================================
   About Teaser
   ========================================================================== */

.about-teaser-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	display:        grid;
	grid-template-columns: 1fr 1fr;
	gap:            var(--space-16);
	align-items:    center;
}

.about-teaser-image img {
	width:         100%;
	height:        420px;
	object-fit:    cover;
	border-radius: var(--radius-lg);
	box-shadow:    var(--shadow-md);
}

.about-teaser-content {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-6);
}

.about-teaser-heading {
	font-size: var(--font-size-4xl);
}

.about-teaser-text {
	font-size:   var(--font-size-lg);
	color:       var(--color-text-muted);
	line-height: var(--line-height-loose);
	margin-bottom: 0;
}

.about-teaser-link {
	display:          inline-block;
	align-self:       flex-start;
	padding:          var(--space-3) var(--space-6);
	border:           2px solid var(--color-primary);
	color:            var(--color-primary);
	font-weight:      var(--font-weight-semibold);
	border-radius:    var(--radius);
	transition:       background-color var(--transition), color var(--transition);
}

.about-teaser-link:hover {
	background-color: var(--color-primary);
	color:            var(--color-white);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
	background-color: var(--color-green-pale);
}

.testimonials-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.testimonials-heading {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.testimonials-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--grid-gap);
}

.testimonial-card {
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	padding:       var(--space-8);
	box-shadow:    var(--shadow-sm);
	display:       flex;
	flex-direction:column;
	gap:           var(--space-4);
}

.testimonial-rating {
	font-size: var(--font-size-xl);
	color:     var(--color-accent);
}

.testimonial-quote {
	border:      none;
	padding:     0;
	font-size:   var(--font-size-base);
	font-style:  italic;
	color:       var(--color-text);
	line-height: var(--line-height-loose);
	flex-grow:   1;
}

.testimonial-name {
	font-style:  normal;
	font-weight: var(--font-weight-semibold);
	font-size:   var(--font-size-sm);
	color:       var(--color-green-dark);
}

.testimonials-empty {
	text-align: center;
	color:      var(--color-text-muted);
}


/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.faq {
	background-color: var(--color-off-white);
}

.faq-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
}

.faq-heading {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.faq-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.faq-item {
	background:    var(--color-white);
	border-radius: var(--radius);
	border:        var(--border-width) solid var(--color-border);
	overflow:      hidden;
}

.faq-question {
	width:          100%;
	display:        flex;
	justify-content:space-between;
	align-items:    center;
	padding:        var(--space-5) var(--space-6);
	font-size:      var(--font-size-base);
	font-weight:    var(--font-weight-semibold);
	color:          var(--color-green-dark);
	text-align:     left;
	background:     none;
	border:         none;
	transition:     background-color var(--transition);
}

.faq-question:hover {
	background-color: var(--color-green-pale);
}

.faq-icon {
	width:            20px;
	height:           20px;
	flex-shrink:      0;
	border-radius:    var(--radius-full);
	background-color: var(--color-green-pale);
	position:         relative;
}

.faq-icon::before,
.faq-icon::after {
	content:          '';
	position:         absolute;
	inset:            0;
	margin:           auto;
	background-color: var(--color-primary);
	border-radius:    var(--radius-full);
	transition:       transform var(--transition-slow), opacity var(--transition-slow);
}

.faq-icon::before { width: 10px; height: 2px; }
.faq-icon::after  { width: 2px;  height: 10px; }

.faq-question[aria-expanded="true"] .faq-icon::after {
	transform: rotate(90deg);
	opacity:   0;
}

.faq-answer {
	padding:     0 var(--space-6) var(--space-5);
	font-size:   var(--font-size-base);
	color:       var(--color-text-muted);
	line-height: var(--line-height-loose);
}

/* ==========================================================================
   Latest Posts Grid
   ========================================================================== */

.latest-posts-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
}

.latest-posts-heading {
	margin-bottom: var(--space-6);
}

/* ---- Posts carousel ---- */
.posts-carousel {
	position: relative;
}

.posts-carousel-track-wrap {
	overflow: hidden;
}

.posts-carousel-track {
	display:    flex;
	gap:        var(--grid-gap);
	transition: transform 0.4s ease;
	will-change: transform;
}

.posts-carousel-track .post-card {
	flex:      0 0 calc((100% - 2 * var(--grid-gap)) / 3);
	min-width: 0;
}

.posts-carousel-controls {
	display:         flex;
	justify-content: center;
	gap:             var(--space-3);
	margin-top:      var(--space-6);
}

.carousel-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border-radius:   var(--radius-full);
	border:          1.5px solid var(--color-yellow);
	background:      transparent;
	color:           var(--color-charcoal);
	cursor:          pointer;
	transition:      background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}

.carousel-btn:hover {
	background: var(--color-yellow);
	color:      #000;
}

.carousel-btn:disabled {
	opacity: 0.3;
	cursor:  not-allowed;
}

.carousel-btn:disabled:hover {
	background: transparent;
	color:      var(--color-charcoal);
}

.post-card {
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	overflow:      hidden;
	box-shadow:    var(--shadow-sm);
	display:       flex;
	flex-direction:column;
	transition:    box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
	box-shadow: var(--shadow-md);
	transform:  translateY(-3px);
}

.post-card-image {
	width:      100%;
	height:     200px;
	object-fit: cover;
}

.post-card-body {
	padding:        var(--space-5);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	flex-grow:      1;
}

.post-card-date {
	font-size:   var(--font-size-sm);
	color:       var(--color-text-muted);
	font-weight: var(--font-weight-medium);
}

.post-card-title {
	font-size: var(--font-size-xl);
}

.post-card-title a {
	color:      var(--color-green-dark);
	transition: color var(--transition);
}

.post-card-title a:hover {
	color: var(--color-primary);
}

.post-card-categories {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-2);
}

.post-card-categories li a {
	display:          inline-block;
	padding:          var(--space-1) var(--space-3);
	background-color: var(--color-green-pale);
	color:            var(--color-green-dark);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-medium);
	border-radius:    var(--radius-full);
	transition:       background-color var(--transition);
}

.post-card-categories li a:hover {
	background-color: var(--color-primary);
	color:            var(--color-white);
}

.post-card-excerpt {
	font-size:  var(--font-size-sm);
	color:      var(--color-text-muted);
	line-height:var(--line-height-normal);
	flex-grow:  1;
}

.post-card-excerpt p { margin-bottom: 0; }

.post-card-link {
	align-self:   flex-start;
	font-size:    var(--font-size-sm);
	font-weight:  var(--font-weight-semibold);
	color:        var(--color-primary);
	transition:   color var(--transition);
}

.post-card-link:hover {
	color: var(--color-green-dark);
}

.latest-posts-empty {
	text-align: center;
	color:      var(--color-text-muted);
}

/* ==========================================================================
   Blog Archive
   ========================================================================== */

.archive-inner {
	max-width:      var(--container-wide);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.archive-header {
	margin-bottom: var(--space-8);
}

/* ---- Blog sort bar (inside right column) ---- */
.blog-sort-bar {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             var(--space-2);
	margin-bottom:   var(--space-8);
}

.blog-filter-sort-label {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-gray);
	white-space: nowrap;
}

.blog-filter-sort-select {
	padding:          var(--space-1) var(--space-6) var(--space-1) var(--space-3);
	border:           1.5px solid var(--color-border);
	border-radius:    var(--radius-full);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-semibold);
	color:            var(--color-charcoal);
	background-color: var(--color-white);
	cursor:           pointer;
	transition:       border-color var(--transition);
	appearance:       none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right var(--space-3) center;
}

.blog-filter-sort-select:focus {
	outline:      none;
	border-color: var(--color-yellow);
}

.archive-title {
	font-size: var(--font-size-4xl);
}

.archive-description {
	margin-top: var(--space-4);
	color:      var(--color-text-muted);
	font-size:  var(--font-size-lg);
}

.no-posts {
	text-align: center;
	color:      var(--color-text-muted);
	padding:    var(--space-12) 0;
}

/* Pagination */
.nav-links {
	display:        flex;
	justify-content:center;
	gap:            var(--space-2);
	margin-top:     var(--space-12);
	flex-wrap:      wrap;
}

.nav-links a,
.nav-links span {
	display:          inline-block;
	padding:          var(--space-2) var(--space-4);
	border:           var(--border-width) solid var(--color-border);
	border-radius:    var(--radius);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-medium);
	color:            var(--color-text);
	transition:       background-color var(--transition), color var(--transition), border-color var(--transition);
}

.nav-links a:hover,
.nav-links .current {
	background-color: var(--color-primary);
	border-color:     var(--color-primary);
	color:            var(--color-white);
}

/* ==========================================================================
   Single Post
   ========================================================================== */

.single-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.single-featured-image {
	margin-bottom: var(--space-8);
	border-radius: var(--radius-lg);
	overflow:      hidden;
}

.single-featured-image .featured-image {
	width:      100%;
	max-height: 480px;
	object-fit: cover;
}

.single-post-header {
	margin-bottom: var(--space-8);
}

.single-post-title {
	font-size:     var(--font-size-4xl);
	margin-bottom: var(--space-4);
}

.single-post-meta {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         var(--space-4);
	font-size:   var(--font-size-sm);
	color:       var(--color-text-muted);
	padding-bottom: var(--space-6);
	border-bottom: var(--border-width) solid var(--color-border);
}

.post-author a {
	color:       var(--color-primary);
	font-weight: var(--font-weight-medium);
}

.post-categories {
	display:  flex;
	flex-wrap:wrap;
	gap:      var(--space-2);
}

.post-categories li a {
	display:          inline-block;
	padding:          var(--space-1) var(--space-3);
	background-color: var(--color-green-pale);
	color:            var(--color-green-dark);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-medium);
	border-radius:    var(--radius-full);
	transition:       background-color var(--transition);
}

.post-categories li a:hover {
	background-color: var(--color-primary);
	color:            var(--color-white);
}

.single-post-content {
	font-size:   var(--font-size-lg);
	line-height: var(--line-height-loose);
	max-width:   72ch;
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
	margin-top:    var(--space-8);
	margin-bottom: var(--space-4);
}

.single-post-content ul,
.single-post-content ol {
	padding-left:  var(--space-6);
	margin-bottom: var(--space-4);
}

.single-post-content ul { list-style: disc; }
.single-post-content ol { list-style: decimal; }

.single-post-content li {
	margin-bottom: var(--space-2);
}

.single-post-content img {
	border-radius: var(--radius);
	margin-block:  var(--space-6);
}

/* Post navigation */
.post-navigation {
	margin-top:   var(--space-12);
	padding-top:  var(--space-8);
	border-top:   var(--border-width) solid var(--color-border);
	display:      grid;
	grid-template-columns: 1fr 1fr;
	gap:          var(--grid-gap);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.post-navigation .nav-next {
	text-align: right;
}

.post-navigation .nav-label {
	display:     block;
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-text-muted);
}

.post-navigation .nav-title {
	display:     block;
	font-weight: var(--font-weight-semibold);
	color:       var(--color-primary);
	transition:  color var(--transition);
}

.post-navigation a:hover .nav-title {
	color: var(--color-green-dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-charcoal);
	color:      rgba(255,255,255,.65);
	margin-top: auto;
}

/* Main grid */
.footer-main {
	display:               grid;
	grid-template-columns: 1.4fr 1fr 1.6fr;
	gap:                   var(--space-12);
	max-width:             var(--container-max);
	margin-inline:         auto;
	padding-inline:        var(--container-padding);
	padding-block:         var(--space-16);
}

/* Brand column */
.footer-logo {
	display:       inline-block;
	margin-bottom: var(--space-4);
}

.footer-logo img,
.footer-logo .custom-logo {
	max-width:  200px;
	width:      100%;
	height:     auto !important;
	display:    block;
}

.footer-site-name {
	font-size:   var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color:       var(--color-white);
	line-height: 1;
}

.footer-tagline {
	font-size:   var(--font-size-sm);
	line-height: var(--line-height-loose);
	color:       rgba(255,255,255,.5);
	margin-bottom: var(--space-6);
}

/* Social icons */
.footer-socials {
	display: flex;
	gap:     var(--space-3);
}

.footer-social-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           38px;
	height:          38px;
	border:          1px solid rgba(255,255,255,.15);
	border-radius:   var(--radius-full);
	color:           rgba(255,255,255,.6);
	transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.footer-social-link:hover {
	background:   var(--color-yellow);
	border-color: var(--color-yellow);
	color:        var(--color-charcoal);
}

/* Nav column */
.footer-heading {
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-white);
	text-transform:uppercase;
	letter-spacing:0.08em;
	margin-bottom: var(--space-5);
	padding-bottom:var(--space-3);
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-menu {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-3);
}

.footer-menu a {
	font-size:  var(--font-size-sm);
	color:      rgba(255,255,255,.6);
	transition: color var(--transition);
}

.footer-menu a:hover { color: var(--color-yellow); }

/* Widget menu in footer col 2 — matches fallback .footer-heading / .footer-menu styles */
.footer-nav-col .widget-title {
	font-size:      var(--font-size-sm);
	font-weight:    var(--font-weight-bold);
	color:          var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom:  var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom:  1px solid rgba(255,255,255,.1);
}

.footer-nav-col .widget ul {
	list-style:     none;
	padding:        0;
	margin:         0;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.footer-nav-col .widget ul li {
	font-size: var(--font-size-sm);
	color:     rgba(255,255,255,.6);
}

.footer-nav-col .widget ul li a {
	font-size:  var(--font-size-sm);
	color:      rgba(255,255,255,.6);
	transition: color var(--transition);
}

.footer-nav-col .widget ul li a:hover { color: var(--color-yellow); }

/* Newsletter column */
.footer-newsletter-desc {
	font-size:     var(--font-size-sm);
	line-height:   var(--line-height-loose);
	color:         rgba(255,255,255,.5);
	margin-bottom: var(--space-5);
}

.footer-newsletter-row {
	display: flex;
	gap:     var(--space-2);
}

.footer-newsletter-input {
	flex:             1;
	background:       rgba(255,255,255,.08);
	border:           1px solid rgba(255,255,255,.15);
	border-radius:    var(--radius);
	padding:          var(--space-3) var(--space-4);
	font-size:        var(--font-size-sm);
	font-family:      inherit;
	color:            var(--color-white);
	outline:          none;
	transition:       border-color var(--transition);
}

.footer-newsletter-input::placeholder { color: rgba(255,255,255,.35); }

.footer-newsletter-input:focus {
	border-color: var(--color-yellow);
}

.footer-newsletter-btn {
	background:    var(--color-yellow);
	color:         #000;
	border:        none;
	border-radius: var(--radius);
	padding:       var(--space-3) var(--space-5);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
	font-family:   inherit;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background var(--transition), color var(--transition);
}

.footer-newsletter-btn:hover {
	background: #000;
	color:      var(--color-yellow);
}

.footer-socials-heading {
	margin-top: var(--space-5);
}

.footer-newsletter-note {
	font-size:   0.7rem;
	color:       rgba(255,255,255,.3);
	margin-top:  var(--space-3);
	margin-bottom: 0;
}

/* Bottom bar */
.footer-bottom {
	border-top:     1px solid rgba(255,255,255,.1);
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-5);
	display:        flex;
	justify-content:space-between;
	align-items:    center;
	gap:            var(--space-4);
}

.footer-copyright {
	font-size:     var(--font-size-sm);
	color:         rgba(255,255,255,.35);
	margin-bottom: 0;
}

.footer-bottom-nav a {
	font-size:  var(--font-size-sm);
	color:      rgba(255,255,255,.35);
	transition: color var(--transition);
}

.footer-bottom-nav a:hover { color: var(--color-yellow); }

/* ==========================================================================
   Responsive Breakpoints
   Breakpoints: 1280 | 1024 | 900 | 768 | 640 | 480
   ========================================================================== */

/* ------------------------------------------------------------------
   1280px — Large tablet / small laptop
   ------------------------------------------------------------------ */
@media ( max-width: 1280px ) {
	.header-inner,
	.footer-main,
	.footer-bottom {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------
   1024px — Tablet landscape
   ------------------------------------------------------------------ */
@media ( max-width: 1024px ) {
	/* Typography */
	h1 { font-size: var(--font-size-4xl); }
	h2 { font-size: var(--font-size-3xl); }

	/* Hero */
	.hero-headline  { font-size: var(--font-size-4xl); }
	.hero           { padding-block: var(--space-20); }

	/* About teaser: stack to single column */
	.about-teaser-inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.about-teaser-image img { height: 320px; }

	/* Page */
	.page-title     { font-size: var(--font-size-3xl); }
	.single-post-title { font-size: var(--font-size-3xl); }
	.archive-title  { font-size: var(--font-size-3xl); }
}

/* ------------------------------------------------------------------
   900px — Tablet portrait: 3-col grids → 2-col
   ------------------------------------------------------------------ */
@media ( max-width: 900px ) {
	/* Grids */
	.features-inner,
	.testimonials-grid,
	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-main { grid-template-columns: 1fr 1fr; }

	/* Base grid utilities */
	.grid-3,
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Post navigation */
	.post-navigation {
		grid-template-columns: 1fr;
	}
	.post-navigation .nav-next {
		text-align: left;
	}

	/* Section spacing */
	.section-wrap     { padding-block: var(--space-12); }
	.section-wrap--lg { padding-block: var(--space-16); }

	/* Single post */
	.single-inner,
	.page-inner {
		padding-block: var(--space-12);
	}

	/* Archive / Single article */
	.archive-inner,
	.single-article-wrap { padding-block: var(--space-12); }
}

/* ------------------------------------------------------------------
   768px — Mobile: hamburger menu activates
   ------------------------------------------------------------------ */
@media ( max-width: 768px ) {
	/* Header */
	.menu-toggle { display: flex; }

	.primary-navigation {
		position: relative;
		flex:     0 0 auto;
	}

	.primary-navigation #primary-menu {
		display:        none;
		flex-direction: column;
		align-items:    flex-start;
		position:       absolute;
		top:            calc(100% + var(--space-2));
		right:          0;
		min-width:      240px;
		background:     var(--color-charcoal);
		border:         none;
		border-radius:  var(--radius-lg);
		box-shadow:     var(--shadow-md);
		padding:        var(--space-3);
		z-index:        200;
	}

	.primary-navigation #primary-menu.is-open { display: flex; }

	.primary-navigation #primary-menu li { width: 100%; }

	.primary-navigation #primary-menu a {
		width:   100%;
		padding: var(--space-3) var(--space-4);
		color:   var(--header-menu-color);
	}

	.primary-navigation #primary-menu a:hover {
		color:            var(--header-menu-hover);
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* Mobile: flatten dropdowns into accordion */
	.primary-navigation #primary-menu .sub-menu {
		position:      static;
		opacity:       1;
		visibility:    visible;
		transform:     none;
		box-shadow:    none;
		border:        none;
		border-radius: 0;
		border-left:   2px solid rgba(255, 255, 255, 0.15);
		padding:       var(--space-1) 0 var(--space-1) var(--space-3);
		margin:        0 0 var(--space-1) var(--space-4);
		display:       none;
		background:    transparent;
	}

	.primary-navigation #primary-menu .sub-menu a {
		color: rgba(255, 255, 255, 0.75);
	}

	.primary-navigation #primary-menu .sub-menu.is-open {
		display: block;
	}

	/* Mobile sub-menu toggle button */
	.submenu-toggle {
		display:          flex;
		align-items:      center;
		justify-content:  center;
		position:         absolute;
		right:            var(--space-2);
		top:              50%;
		transform:        translateY(-50%);
		width:            32px;
		height:           32px;
		border-radius:    var(--radius-sm);
		background:       transparent;
		border:           none;
		cursor:           pointer;
		color:            var(--color-text);
		transition:       background-color var(--transition);
	}

	.submenu-toggle:hover {
		background-color: var(--color-green-pale);
	}

	.submenu-toggle svg {
		transition: transform var(--transition);
	}

	.submenu-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.primary-navigation #primary-menu .menu-item-has-children {
		display:  flex;
		flex-wrap: wrap;
		position: relative;
	}

	.primary-navigation #primary-menu .menu-item-has-children > a {
		flex: 1;
	}

	.primary-navigation #primary-menu .menu-item-has-children > .sub-menu {
		width: 100%;
	}

	/* Scrolled header enhancement */
	.site-header.is-scrolled { box-shadow: var(--shadow-md); }

	/* Typography */
	h1 { font-size: var(--font-size-3xl); }
	h2 { font-size: var(--font-size-2xl); }
	h3 { font-size: var(--font-size-xl); }

	/* Hero */
	.hero               { padding-block: var(--space-16); }
	.hero-headline      { font-size: var(--font-size-3xl); }
	.hero-subheadline   { font-size: var(--font-size-base); }
	.hero-cta           { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); }

	/* Page & single */
	.page-title         { font-size: var(--font-size-2xl); }
	.single-post-title  { font-size: var(--font-size-2xl); }
	.archive-title      { font-size: var(--font-size-2xl); }
	.single-post-content { font-size: var(--font-size-base); }
	.page-body          { font-size: var(--font-size-base); }

	/* Single post meta: stack */
	.single-post-meta {
		flex-direction: column;
		align-items:    flex-start;
		gap:            var(--space-2);
	}

	/* FAQ */
	.faq-question { font-size: var(--font-size-sm); }

	/* Footer */
	.footer-bottom { padding-block: var(--space-4); flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------
   640px — Small mobile: 2-col grids → 1-col
   ------------------------------------------------------------------ */
@media ( max-width: 640px ) {
	/* All grids go single column */
	.features-inner,
	.testimonials-grid,
	.posts-grid,
	.footer-main,
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	/* Spacing */
	.section-wrap,
	.section-wrap--lg { padding-block: var(--space-10); }
	.section-wrap--sm { padding-block: var(--space-8); }

	/* Hero */
	.hero             { padding-block: var(--space-12); }
	.hero-headline    { font-size: var(--font-size-2xl); }
	.hero-inner       { gap: var(--space-4); }

	/* About teaser */
	.about-teaser-image img { height: 220px; }

	/* Footer */
	.footer-main              { gap: var(--space-6); padding-block: var(--space-10); }
	.footer-newsletter-row    { flex-direction: column; }
	.footer-newsletter-btn    { width: 100%; }

	/* Cards */
	.post-card-image { height: 180px; }

	/* Pagination */
	.nav-links { gap: var(--space-1); }
	.nav-links a,
	.nav-links span { padding: var(--space-2) var(--space-3); }
}

/* ------------------------------------------------------------------
   480px — Extra small phones
   ------------------------------------------------------------------ */
@media ( max-width: 480px ) {
	/* Typography */
	h1 { font-size: var(--font-size-2xl); }
	h2 { font-size: var(--font-size-xl); }

	/* Hero */
	.hero-headline  { font-size: var(--font-size-xl); }

	/* Header */
	.site-branding .site-name        { font-size: var(--font-size-xl); }
	.site-branding .custom-logo      { height: 64px; }
	.header-inner                    { padding-block: var(--space-3); }

	/* Single post */
	.single-inner,
	.single-article-wrap,
	.page-inner,
	.archive-inner {
		padding-block: var(--space-8);
	}

	/* Testimonials */
	.testimonial-card { padding: var(--space-5); }

	/* Features */
	.feature { padding: var(--space-5); }

	/* FAQ */
	.faq-question  { padding: var(--space-4) var(--space-4); }
	.faq-answer    { padding: 0 var(--space-4) var(--space-4); }
}

/* ==========================================================================
   Page Template
   ========================================================================== */

.page-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.page-header {
	margin-bottom:  var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom:  2px solid var(--color-green-pale);
}

.page-title {
	font-size: var(--font-size-4xl);
}

.page-body {
	font-size:   var(--font-size-lg);
	line-height: var(--line-height-loose);
}

.page-body h2 {
	margin-top:    var(--space-10);
	margin-bottom: var(--space-4);
	font-size:     var(--font-size-3xl);
}

.page-body h3 {
	margin-top:    var(--space-8);
	margin-bottom: var(--space-3);
	font-size:     var(--font-size-2xl);
}

.page-body p {
	margin-bottom: var(--space-5);
}

.page-body ul,
.page-body ol {
	padding-left:  var(--space-6);
	margin-bottom: var(--space-5);
}

.page-body ul { list-style: disc; }
.page-body ol { list-style: decimal; }

.page-body li {
	margin-bottom: var(--space-2);
	line-height:   var(--line-height-loose);
}

.page-body a {
	color:           var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-body a:hover {
	color: var(--color-green-dark);
}

/* PDF links ---------------------------------------------------------------- */

.page-body a[href$=".pdf"],
.entry-content a[href$=".pdf"],
.single-content a[href$=".pdf"] {
	display:          inline-flex;
	align-items:      center;
	gap:              var(--space-2);
	text-decoration:  none;
	font-weight:      var(--font-weight-semibold);
	color:            var(--color-charcoal);
	background-color: var(--color-beige-dark);
	border:           1px solid var(--color-beige-mid);
	border-radius:    var(--radius-full);
	padding:          var(--space-2) var(--space-5);
	transition:       background var(--transition), border-color var(--transition), color var(--transition);
}

.page-body a[href$=".pdf"]::before,
.entry-content a[href$=".pdf"]::before,
.single-content a[href$=".pdf"]::before {
	font-family:  "Font Awesome 6 Free";
	font-weight:  400;
	content:      "\f1c1"; /* fa-file-pdf */
	font-size:    1.1em;
	color:        #b91c1c; /* red — universally recognised PDF colour */
	flex-shrink:  0;
}

.page-body a[href$=".pdf"]::after,
.entry-content a[href$=".pdf"]::after,
.single-content a[href$=".pdf"]::after {
	font-family:    "Font Awesome 6 Free";
	font-weight:    900;
	content:        "\f35d"; /* fa-arrow-up-right-from-square */
	font-size:      0.7em;
	color:          var(--color-charcoal-light);
	flex-shrink:    0;
	margin-left:    var(--space-1);
}

.page-body a[href$=".pdf"]:hover,
.entry-content a[href$=".pdf"]:hover,
.single-content a[href$=".pdf"]:hover {
	background-color: var(--color-yellow);
	border-color:     var(--color-yellow-dark);
	color:            var(--color-charcoal);
	text-decoration:  none;
}

.page-body a[href$=".pdf"]:hover::after,
.entry-content a[href$=".pdf"]:hover::after,
.single-content a[href$=".pdf"]:hover::after {
	color: var(--color-charcoal);
}

/* ==========================================================================
   Blog Feed — Hero-style archive cards
   ========================================================================== */

.archive-header {
	padding-block:  var(--space-12);
	border-bottom:  2px solid var(--color-green-pale);
	margin-bottom:  var(--space-10);
}

.archive-title {
	font-size:     var(--font-size-4xl);
	margin-bottom: var(--space-3);
}

.archive-description {
	font-size:    var(--font-size-lg);
	color:        var(--color-text-muted);
	margin-bottom:0;
}

.blog-feed {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-12);
}

/* Card */
.blog-card {
	display:       grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--radius-lg);
	overflow:      hidden;
	background:    var(--color-white);
	box-shadow:    var(--shadow-md);
	transition:    box-shadow var(--transition-slow), transform var(--transition-slow);
	min-height:    360px;
}

.blog-card:hover {
	box-shadow: var(--shadow-lg);
	transform:  translateY(-3px);
}

/* Alternate image side every other card */
.blog-card:nth-child(even) {
	direction: rtl;
}
.blog-card:nth-child(even) .blog-card-body {
	direction: ltr;
}

/* Image */
.blog-card-image-wrap {
	position:   relative;
	display:    block;
	overflow:   hidden;
}

.blog-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image {
	transform: scale(1.03);
}

/* Placeholder when no featured image */
.blog-card-image-placeholder {
	width:            100%;
	height:           100%;
	min-height:       360px;
	background:       linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-green-mid) 100%);
	display:          flex;
	align-items:      center;
	justify-content:  center;
}

.blog-card-image-placeholder span {
	color:       var(--color-green-pale);
	font-family: var(--font-heading);
	font-size:   var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	opacity:     0.4;
	text-align:  center;
	padding:     var(--space-4);
}

/* Date badge overlaid on image */
.blog-card-date-badge {
	position:         absolute;
	bottom:           var(--space-5);
	left:             var(--space-5);
	background:       var(--color-accent);
	color:            var(--color-white);
	border-radius:    var(--radius);
	padding:          var(--space-2) var(--space-4);
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	line-height:      1;
	gap:              var(--space-1);
	box-shadow:       var(--shadow-sm);
}

.badge-day {
	font-size:   var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	font-family: var(--font-heading);
}

.badge-month {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Body */
.blog-card-body {
	padding:        var(--space-10);
	display:        flex;
	flex-direction: column;
	justify-content:center;
	gap:            var(--space-5);
}

.blog-card-meta {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--space-3);
}

.blog-card-category {
	display:          inline-block;
	padding:          var(--space-1) var(--space-3);
	background-color: var(--color-green-pale);
	color:            var(--color-green-dark);
	font-size:        var(--font-size-sm);
	font-weight:      var(--font-weight-semibold);
	border-radius:    var(--radius-full);
	transition:       background-color var(--transition), color var(--transition);
}

.blog-card-category:hover {
	background-color: var(--color-primary);
	color:            var(--color-white);
}

.blog-card-date {
	font-size:  var(--font-size-sm);
	color:      var(--color-text-muted);
}

.blog-card-title {
	font-size:   var(--font-size-3xl);
	line-height: var(--line-height-snug);
}

.blog-card-title a {
	color:      var(--color-green-dark);
	transition: color var(--transition);
}

.blog-card-title a:hover {
	color: var(--color-primary);
}

.blog-card-excerpt {
	font-size:   var(--font-size-base);
	color:       var(--color-text-muted);
	line-height: var(--line-height-loose);
}

.blog-card-excerpt p { margin-bottom: 0; }

.blog-card-link {
	display:      inline-block;
	align-self:   flex-start;
	font-weight:  var(--font-weight-semibold);
	font-size:    var(--font-size-base);
	color:        var(--color-primary);
	transition:   color var(--transition), gap var(--transition);
}

.blog-card-link:hover {
	color: var(--color-green-dark);
}

/* Responsive: blog feed */
@media ( max-width: 900px ) {
	.blog-card {
		grid-template-columns: 1fr;
		min-height:            unset;
	}

	.blog-card:nth-child(even) {
		direction: ltr;
	}

	.blog-card-image-wrap {
		height: 260px;
	}

	.blog-card-image-placeholder {
		min-height: 260px;
	}

	.blog-card-body {
		padding: var(--space-8);
	}

	.blog-card-title {
		font-size: var(--font-size-2xl);
	}
}

@media ( max-width: 640px ) {
	.blog-feed         { gap: var(--space-8); }
	.blog-card-image-wrap { height: 200px; }
	.blog-card-image-placeholder { min-height: 200px; }
	.blog-card-body    { padding: var(--space-6); }
	.blog-card-title   { font-size: var(--font-size-xl); }
	.blog-card-date-badge { bottom: var(--space-3); left: var(--space-3); }
}

/* ==========================================================================
   Blog Two-Column Layout (main + sidebar)
   ========================================================================== */

.blog-layout {
	display:               grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	gap:                   var(--space-12);
	align-items:           start;
}

.blog-main {
	min-width: 0;
}

/* ==========================================================================
   Blog Sidebar
   ========================================================================== */

.blog-sidebar {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-8);
	position:       sticky;
	top:            var(--space-6);
	min-width:      180px;
	max-width:      240px;
}

/* Widgets — no box, clean list style matching shop sidebar */
.blog-widget {
	background:  transparent;
	border:      none;
	border-radius: 0;
	padding:     0;
}

/* CTA widget gets a card treatment since it's promotional */
.blog-widget--cta {
	background:    var(--color-charcoal);
	border-radius: var(--radius-lg);
	padding:       var(--space-6);
}

.blog-widget--cta .blog-widget-title {
	color:        var(--color-white);
	border-color: rgba(255, 255, 255, 0.2);
}

.blog-widget--cta .blog-widget-text {
	color: rgba(255, 255, 255, 0.65);
}

.blog-widget-title {
	font-size:   var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color:       var(--color-charcoal);
	display:     block;
	box-sizing:  border-box;
	margin:      var(--space-6) 0;
	padding:     var(--space-4) 0 var(--space-3) 0;
	border-bottom: 2px solid var(--color-yellow);
}

.blog-widget-text {
	font-size:     var(--font-size-sm);
	color:         var(--color-gray);
	line-height:   var(--line-height-loose);
	margin-bottom: var(--space-4);
}

.blog-widget-link {
	display:         inline-block;
	font-size:       var(--font-size-base);
	font-weight:     var(--font-weight-bold);
	color:           var(--color-charcoal);
	text-decoration: none;
	padding:         var(--space-2) 0;
	border-bottom:   1px solid transparent;
	transition:      color var(--transition), border-color var(--transition);
}

.blog-widget-link:hover {
	color:        var(--color-yellow-dark);
	border-color: var(--color-yellow);
}

/* Category list */
.blog-widget-cat-list {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-1);
	font-weight: var(--font-weight-bold);
}

.blog-widget-cat {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-size:       var(--font-size-base);
	color:           var(--color-charcoal);
	text-decoration: none;
	padding:         var(--space-2) 0;
	border-bottom:   1px solid transparent;
	transition:      color var(--transition), border-color var(--transition);
}

.blog-widget-cat:hover {
	color:        var(--color-yellow-dark);
	border-color: var(--color-yellow);
}

.blog-widget-cat.is-active {
	color: var(--color-yellow-dark);
}

.blog-widget-cat-count {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color:       var(--color-gray);
}

/* Recent posts */
.blog-widget-recent {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-4);
}

.blog-widget-recent-item {
	display:     flex;
	gap:         var(--space-3);
	align-items: flex-start;
}

.blog-widget-recent-thumb {
	flex-shrink:   0;
	width:         56px;
	height:        56px;
	border-radius: var(--radius-sm);
	overflow:      hidden;
	display:       block;
}

.blog-widget-recent-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.blog-widget-recent-body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
	min-width:      0;
}

.blog-widget-recent-title {
	font-size:       var(--font-size-sm);
	font-weight:     var(--font-weight-bold);
	color:           var(--color-charcoal);
	text-decoration: none;
	line-height:     var(--line-height-snug);
	display:         -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:        hidden;
	padding:         var(--space-1) 0;
	border-bottom:   1px solid transparent;
	transition:      color var(--transition), border-color var(--transition);
}

.blog-widget-recent-title:hover {
	color:        var(--color-yellow-dark);
	border-color: var(--color-yellow);
}

.blog-widget-recent-date {
	font-size: 11px;
	color:     var(--color-gray);
}

/* Collapse sidebar below tablet */
@media ( max-width: 900px ) {
	.blog-layout,
	.single-layout {
		grid-template-columns: 1fr;
	}

	.blog-sidebar {
		position:  static;
		max-width: none;
		display:   grid;
		grid-template-columns: repeat(2, 1fr);
		gap:       var(--space-4);
	}
}

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

/* ==========================================================================
   Archive + Sidebar Layout
   ========================================================================== */

.archive-with-sidebar {
	display:               grid;
	grid-template-columns: 1fr 300px;
	gap:                   var(--space-12);
	align-items:           start;
}

/* Push header and feed to span full grid row before sidebar starts */
.archive-with-sidebar .archive-header {
	grid-column: 1 / -1;
}

.archive-with-sidebar .blog-feed {
	grid-column: 1;
	grid-row:    2;
}

.archive-with-sidebar .nav-links {
	grid-column: 1;
}

.archive-sidebar {
	grid-column: 2;
	grid-row:    2 / span 2;
	position:    sticky;
	top:         calc(80px + var(--space-6));
}

/* Widget area */
.widget-area {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-8);
}

.widget-area .widget {
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	padding:       var(--space-6);
	box-shadow:    var(--shadow-sm);
	border-top:    3px solid var(--color-primary);
}

.widget-area .widget-title {
	font-size:     var(--font-size-lg);
	font-family:   var(--font-heading);
	color:         var(--color-green-dark);
	margin-bottom: var(--space-4);
	padding-bottom:var(--space-3);
	border-bottom: var(--border-width) solid var(--color-border);
}

.widget-area ul {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-2);
}

.widget-area ul li {
	padding-bottom: var(--space-2);
	border-bottom:  var(--border-width) solid var(--color-gray-pale);
	font-size:      var(--font-size-sm);
}

.widget-area ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget-area ul a {
	color:      var(--color-text);
	transition: color var(--transition);
}

.widget-area ul a:hover {
	color: var(--color-primary);
}

.widget-area p {
	font-size:    var(--font-size-sm);
	color:        var(--color-text-muted);
	line-height:  var(--line-height-loose);
	margin-bottom:0;
}

/* Responsive: sidebar drops below feed */
@media ( max-width: 1024px ) {
	.archive-with-sidebar {
		grid-template-columns: 1fr 260px;
		gap: var(--space-8);
	}
}

@media ( max-width: 768px ) {
	.archive-with-sidebar {
		grid-template-columns: 1fr;
	}

	.archive-with-sidebar .blog-feed,
	.archive-sidebar {
		grid-column: 1;
	}

	.archive-sidebar {
		grid-row:  auto;
		position:  static;
	}
}

/* ==========================================================================
   Farmstead Full Restyle
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
body {
	background-color: var(--color-white);
	font-weight:      400;
	letter-spacing:   -0.01em;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.02em;
	font-weight:    700;
}

/* --- Section label badge — small pill above headings --------------------- */
.section-label {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--space-2);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-semibold);
	color:         var(--color-charcoal);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-full);
	padding:       var(--space-1) var(--space-4) var(--space-1) var(--space-3);
	margin-bottom: var(--space-4);
}

.section-label::before {
	content:       '';
	display:       block;
	width:         6px;
	height:        6px;
	background:    var(--color-yellow);
	border-radius: var(--radius-full);
	flex-shrink:   0;
}

/* --- Availability banner -------------------------------------------------- */
.availability-banner {
	background:    var(--color-yellow);
	color:         var(--color-charcoal);
	font-weight:   var(--font-weight-semibold);
	font-size:     var(--font-size-sm);
	letter-spacing:0.02em;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
	background-color: var(--header-bg);
	border-bottom:    1px solid rgba(255,255,255,0.1);
	box-shadow:       none;
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.site-branding .site-name {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	color:       var(--header-menu-color);
	font-size:   var(--font-size-xl);
}

.primary-navigation #primary-menu a {
	font-size:      var(--font-size-xl);
	font-weight:    var(--font-weight-semibold);
	color:          var(--header-menu-color);
	border-radius:  var(--radius-full);
	letter-spacing: 0;
	text-transform: uppercase;
}

.primary-navigation #primary-menu a:hover {
	background-color: transparent;
	color:            var(--header-menu-hover);
}

.primary-navigation #primary-menu .current-menu-item > a,
.primary-navigation #primary-menu .current-menu-ancestor > a {
	background-color:      transparent;
	color:                 var(--header-menu-active);
	border-radius:         0;
	text-decoration: none;
}

/* Dropdown panel always uses light styles regardless of header theme */
.primary-navigation #primary-menu .sub-menu {
	background: var(--color-white);
	border:     none;
}

.primary-navigation #primary-menu .sub-menu a {
	color:         var(--color-text);
	border-radius: 0;
	text-transform: none;
	font-size:     var(--font-size-sm);
	letter-spacing: 0;
}

.primary-navigation #primary-menu .sub-menu a:hover,
.primary-navigation #primary-menu .sub-menu .current-menu-item > a {
	background-color: var(--header-menu-active);
	color:            var(--color-charcoal);
}

/* --- Utility top bar ------------------------------------------------------ */

.header-topbar {
	background-color: #1e1e1e;
	border-bottom:    1px solid rgba(255, 255, 255, 0.08);
}

.header-topbar-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	max-width:       var(--container-max);
	margin-inline:   auto;
	padding-inline:  var(--container-padding);
	height:          40px;
}

.header-topbar-tagline {
	font-size:      var(--font-size-xs, 0.75rem);
	color:          rgba(255, 255, 255, 0.45);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Action icon group */
.header-actions {
	display:     flex;
	align-items: center;
	gap:         var(--space-1);
}

.header-action-btn {
	position:        relative;
	display:         flex;
	align-items:     center;
	gap:             var(--space-2);
	padding:         0 var(--space-3);
	height:          40px;
	color:           rgba(255, 255, 255, 0.7);
	background:      transparent;
	border:          none;
	cursor:          pointer;
	font-size:       var(--font-size-sm);
	font-family:     var(--font-body);
	font-weight:     var(--font-weight-medium, 500);
	letter-spacing:  0.02em;
	text-decoration: none;
	transition:      color var(--transition), background-color var(--transition);
	border-radius:   0;
	white-space:     nowrap;
}

.header-action-btn:hover {
	color:            var(--color-white);
	background-color: rgba(255, 255, 255, 0.08);
}

.header-action-btn[aria-expanded="true"] {
	color:            var(--color-yellow);
	background-color: rgba(255, 255, 255, 0.06);
}


/* Cart count badge */
.header-cart-count {
	display:          none;
	min-width:        18px;
	height:           18px;
	padding:          0 5px;
	border-radius:    var(--radius-full);
	background-color: var(--color-yellow);
	color:            var(--color-charcoal);
	font-size:        11px;
	font-weight:      var(--font-weight-bold);
	line-height:      18px;
	text-align:       center;
}

.header-cart-count.has-items {
	display: inline-block;
}

/* --- Header search bar ---------------------------------------------------- */

.header-search-bar {
	background-color: #1a1a1a;
	border-bottom:    1px solid rgba(255, 255, 255, 0.08);
	overflow:         hidden;
	max-height:       0;
	transition:       max-height 0.28s ease;
}

.header-search-bar:not([hidden]) {
	max-height: 80px;
}

.header-search-bar[hidden] {
	display:    block !important;
	max-height: 0;
}

.header-search-bar-inner {
	display:        flex;
	align-items:    center;
	gap:            var(--space-3);
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-3);
}

.header-search-form {
	display:  flex;
	flex:     1;
	position: relative;
}

.header-search-input {
	flex:             1;
	height:           40px;
	padding:          0 var(--space-5);
	padding-right:    50px;
	background-color: rgba(255, 255, 255, 0.07);
	border:           1px solid rgba(255, 255, 255, 0.15);
	border-radius:    var(--radius-full);
	color:            var(--color-white);
	font-size:        var(--font-size-base);
	font-family:      var(--font-body);
	transition:       border-color var(--transition), background-color var(--transition);
}

.header-search-input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.header-search-input:focus {
	outline:          none;
	border-color:     var(--color-yellow);
	background-color: rgba(255, 255, 255, 0.1);
}

.header-search-submit {
	position:        absolute;
	right:           3px;
	top:             50%;
	transform:       translateY(-50%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   var(--radius-full);
	background:      var(--color-yellow);
	color:           var(--color-charcoal);
	border:          none;
	cursor:          pointer;
	transition:      background-color var(--transition);
}

.header-search-submit:hover {
	background-color: var(--color-yellow-dark);
}

.header-search-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border-radius:   var(--radius-full);
	background:      rgba(255, 255, 255, 0.08);
	border:          none;
	color:           rgba(255, 255, 255, 0.55);
	cursor:          pointer;
	flex-shrink:     0;
	transition:      background-color var(--transition), color var(--transition);
}

.header-search-close:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color:            var(--color-white);
}

/* Hide topbar on mobile — actions accessible via nav */
@media ( max-width: 768px ) {
	.header-topbar { display: none; }

	.header-search-input { font-size: 16px; } /* prevent iOS zoom */
}

/* --- Buttons -------------------------------------------------------------- */
/* Primary filled button */
.hero-cta,
.about-teaser-link {
	display:       inline-block;
	background:    var(--color-yellow);
	color:         #000;
	border:        none;
	border-radius: var(--radius-full);
	padding:       var(--space-4) var(--space-8);
	font-family:   var(--font-body);
	font-size:     var(--font-size-base);
	font-weight:   700;
	transition:    background var(--transition), color var(--transition);
}

.hero-cta:hover,
.about-teaser-link:hover {
	background: #000;
	color:      var(--color-yellow);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
	background:    var(--color-charcoal);
	background-image: none;
	position:      relative;
	overflow:      hidden;
	padding-block: var(--space-24);
}

.hero--has-image {
	min-height: 520px;
	display:    flex;
	align-items: center;
	justify-content: center;
}

.hero--has-image .hero-inner {
	position: relative;
	z-index:  2;
}

.hero--has-image::before {
	display: none;
}

.hero::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: radial-gradient(ellipse at 75% 50%, rgba(238,206,56,.12) 0%, transparent 65%);
	pointer-events: none;
}

.hero-inner {
	position:  relative;
	z-index:   1;
	max-width: var(--container-max);
	gap:       var(--space-8);
}

.hero-headline {
	color:       var(--color-white);
	font-size:   clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 800;
	line-height: 1.05;
}

.hero-subheadline {
	color:     rgba(255,255,255,0.65);
	font-size: var(--font-size-lg);
}

/* --- Section backgrounds -------------------------------------------------- */
.section-wrap {
	background-color: var(--color-white);
}

.section-features,
.section-testimonials {
	background-color: var(--color-beige);
}

.features {
	background-color: transparent;
}

.testimonials {
	background-color: transparent;
}

/* --- Section headings ----------------------------------------------------- */
.features-inner h2,
.testimonials-heading,
.latest-posts-heading,
.faq-heading,
.archive-title,
.page-title,
.single-post-title {
	letter-spacing: -0.03em;
	font-weight:    800;
}

.testimonials-heading::after,
.latest-posts-heading::after,
.faq-heading::after {
	display: none;
}

/* --- Feature cards -------------------------------------------------------- */
.features-inner {
	background-color: transparent;
}

.feature {
	background:    var(--color-white);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
	transition:    transform var(--transition), box-shadow var(--transition);
}

.feature:hover {
	transform:  translateY(-5px);
	box-shadow: var(--shadow-md);
}

.feature-icon {
	background:      var(--color-yellow);
	border-radius:   var(--radius-full);
	width:           64px;
	height:          64px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.5rem;
	color:           var(--color-charcoal);
}

.feature-heading {
	color: var(--color-charcoal);
}

/* --- About teaser --------------------------------------------------------- */
.about-teaser {
	background-color: var(--color-white);
}

.about-teaser-image img {
	border-radius: var(--radius-lg);
}

.about-teaser-heading {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
}

/* --- Testimonials --------------------------------------------------------- */
.testimonial-card {
	background:    var(--color-white);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
}

.testimonial-rating { color: var(--color-yellow); }
.testimonial-name   { color: var(--color-charcoal); }

.testimonial-quote {
	font-size:   var(--font-size-base);
	font-weight: 400;
	color:       var(--color-gray);
	border:      none;
	padding:     0;
}

/* --- Post cards ----------------------------------------------------------- */
.post-card {
	background:    var(--color-beige);
	border:        1px solid transparent;
	border-radius: var(--radius-lg);
	box-shadow:    none;
}

.post-card:hover {
	border-color: var(--color-gray-light);
	box-shadow:   var(--shadow-sm);
	transform:    translateY(-4px);
}

.post-card-title a {
	color: var(--color-charcoal);
}

.post-card-categories li a {
	background-color: var(--color-yellow-pale);
	color:            var(--color-charcoal);
}

.post-card-categories li a:hover {
	background-color: var(--color-yellow);
}

.post-card-link {
	color: var(--color-charcoal);
	font-weight: var(--font-weight-semibold);
}

.post-card-link:hover {
	color: var(--color-gray);
}

/* --- Latest posts --------------------------------------------------------- */
.latest-posts-inner {
	background-color: var(--color-beige);
}

/* --- Blog feed cards ------------------------------------------------------ */
.blog-card {
	background:    var(--color-white);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
	box-shadow:    none;
}

.blog-card:hover {
	box-shadow: var(--shadow-md);
	transform:  translateY(-4px);
}

.blog-card-image-placeholder {
	background: linear-gradient(135deg, var(--color-charcoal), var(--color-charcoal-mid));
}

.blog-card-date-badge {
	background: var(--color-yellow);
	color:      var(--color-charcoal);
}

.badge-day,
.badge-month {
	color: var(--color-charcoal);
}

.blog-card-category {
	background-color: var(--color-yellow-pale);
	color:            var(--color-charcoal);
	font-size:        0.7rem;
	font-weight:      var(--font-weight-semibold);
	letter-spacing:   0.06em;
	text-transform:   uppercase;
}

.blog-card-category:hover {
	background-color: var(--color-yellow);
	color:            var(--color-charcoal);
}

.blog-card-title {
	color: var(--color-charcoal);
}

.blog-card-title a { color: var(--color-charcoal); }
.blog-card-title a:hover { color: var(--color-gray); }

.blog-card-link {
	position:         relative;
	display:          inline-block;
	padding:          var(--space-2) var(--space-6);
	border:           1.5px solid var(--color-charcoal);
	border-radius:    var(--radius-full);
	color:            var(--color-charcoal);
	font-weight:      var(--font-weight-semibold);
	font-size:        var(--font-size-sm);
	overflow:         hidden;
	transition:       color var(--transition-slow);
	z-index:          1;
}

.blog-card-link::after {
	content:    '';
	position:   absolute;
	top: 0; right: 0; bottom: 0;
	left:       auto;
	width:      0;
	background: var(--color-charcoal);
	transition: width var(--transition-slow);
	z-index:    -1;
}

.blog-card-link:hover { color: var(--color-white); }
.blog-card-link:hover::after { left: 0; right: auto; width: 100%; }

/* --- FAQ ------------------------------------------------------------------ */
.faq {
	background-color: var(--color-beige);
}

.faq-item {
	background:    var(--color-white);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
}

.faq-question { color: var(--color-charcoal); }

.faq-question[aria-expanded="true"] {
	background-color: var(--color-yellow);
	color:            var(--color-charcoal);
}

.faq-question[aria-expanded="true"] .faq-icon {
	background-color: rgba(0,0,0,.1);
}

.faq-icon::before,
.faq-icon::after {
	background-color: var(--color-charcoal);
}

/* --- Archive header ------------------------------------------------------- */
.archive-header {
	border-bottom-color: var(--color-gray-light);
}

/* --- Post meta ------------------------------------------------------------ */
.post-author a       { color: var(--color-charcoal); }
.post-categories li a {
	background-color: var(--color-yellow-pale);
	color:            var(--color-charcoal);
}
.post-categories li a:hover {
	background-color: var(--color-yellow);
	color:            var(--color-charcoal);
}

/* --- Pagination ----------------------------------------------------------- */
.nav-links a,
.nav-links span {
	border-radius: var(--radius-full);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-semibold);
}

.nav-links a:hover,
.nav-links .current {
	background-color: var(--color-yellow);
	border-color:     var(--color-yellow);
	color:            var(--color-charcoal);
}

/* --- Page header ---------------------------------------------------------- */
.page-header {
	border-bottom-color: var(--color-gray-light);
}

.page-body a {
	color: var(--color-charcoal);
	text-decoration-color: var(--color-yellow);
}

.page-body a:hover { color: var(--color-gray); }

/* --- Widgets -------------------------------------------------------------- */
.widget-area .widget {
	background:    var(--color-beige);
	border:        1px solid var(--color-gray-light);
	border-top:    3px solid var(--color-yellow);
	border-radius: var(--radius-lg);
	box-shadow:    none;
}

.widget-area .widget-title {
	color:         var(--color-charcoal);
	border-bottom-color: var(--color-gray-light);
	font-size:     var(--font-size-sm);
	letter-spacing:0.06em;
	text-transform:uppercase;
	font-weight:   var(--font-weight-bold);
}

.widget-area ul a { color: var(--color-charcoal); }
.widget-area ul a:hover { color: var(--color-gray); }

/* --- Footer --------------------------------------------------------------- */

/* --- Scrolled header ------------------------------------------------------ */
.site-header.is-scrolled {
	background-color: var(--header-bg);
}

/* ==========================================================================
   Shared Button Styles
   ========================================================================== */

.btn-primary-fill,
.btn-primary-outline {
	display:       inline-block;
	align-self:    flex-start;
	border-radius: var(--radius-full);
	font-weight:   var(--font-weight-bold);
	font-size:     var(--font-size-base);
	padding:       var(--space-3) var(--space-8);
	transition:    background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-primary-fill {
	background:   var(--color-yellow);
	color:        #000;
	border:       1.5px solid var(--color-yellow);
}

.btn-primary-fill:hover {
	background:   #000;
	border-color: #000;
	color:        var(--color-yellow);
}

.btn-primary-outline {
	background:   transparent;
	color:        var(--color-charcoal);
	border:       1.5px solid var(--color-charcoal);
}

.btn-primary-outline:hover {
	background:   var(--color-charcoal);
	border-color: var(--color-charcoal);
	color:        var(--color-yellow);
}

/* Light variants — for use on dark (charcoal) backgrounds */
.btn-primary-fill--light {
	background:   var(--color-white);
	color:        var(--color-charcoal);
	border-color: var(--color-white);
}

.btn-primary-fill--light:hover {
	background:   var(--color-yellow);
	border-color: var(--color-yellow);
	color:        var(--color-charcoal);
}

.btn-primary-outline--light {
	background:   transparent;
	color:        var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.btn-primary-outline--light:hover {
	background:   var(--color-white);
	border-color: var(--color-white);
	color:        var(--color-charcoal);
}

/* ==========================================================================
   Section background alternation
   ========================================================================== */

.section-features  { background-color: var(--color-charcoal); }
.section-why-us,
.section-experts   { background-color: var(--color-white); }
.section-products,
.section-faq       { background-color: var(--color-beige); }
.section-stats     { background-color: var(--color-charcoal); }
.section-our-farm  { background-color: var(--color-charcoal); }
.section-latest-posts { background-color: var(--color-beige); }

/* ==========================================================================
   Why Us
   ========================================================================== */

.why-us-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
	display:        grid;
	grid-template-columns: 1fr auto;
	gap:            var(--space-16);
	align-items:    center;
}


.why-us-content {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-6);
}

.why-us-heading {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
	line-height: 1.1;
}

.why-us-text {
	font-size:    var(--font-size-lg);
	color:        var(--color-gray);
	line-height:  var(--line-height-loose);
	margin-bottom:0;
}

.why-us-list {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-3);
}

.why-us-list li {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	font-size:   var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color:       var(--color-charcoal);
}

.why-us-list li::before {
	content:          '';
	display:          block;
	flex-shrink:      0;
	width:            8px;
	height:           8px;
	background:       var(--color-yellow);
	border-radius:    var(--radius-full);
}

/* Images */
.why-us-images {
	position:    relative;
	display:     flex;
	gap:         var(--space-4);
	width:       420px;
	flex-shrink: 0;
}

.why-us-image-primary img {
	width:         100%;
	height:        480px;
	object-fit:    cover;
	border-radius: var(--radius-lg);
	display:       block;
}

.why-us-image-secondary {
	position:  absolute;
	bottom:    var(--space-6);
	left:      -var(--space-8);
	width:     220px;
}

.why-us-image-secondary img {
	width:         100%;
	height:        180px;
	object-fit:    cover;
	border-radius: var(--radius-lg);
	border:        4px solid var(--color-white);
	box-shadow:    var(--shadow-md);
	display:       block;
}

.why-us-stat-badge {
	position:         absolute;
	bottom:           -var(--space-4);
	right:            -var(--space-4);
	background:       var(--color-yellow);
	border-radius:    var(--radius-lg);
	padding:          var(--space-4) var(--space-5);
	display:          flex;
	flex-direction:   column;
	align-items:      flex-start;
	gap:              var(--space-1);
	box-shadow:       var(--shadow-md);
}

.why-us-stat-badge .stat-number {
	font-size:   var(--font-size-2xl);
	font-weight: 800;
	color:       var(--color-charcoal);
	line-height: 1;
}

.why-us-stat-badge .stat-label {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
	line-height: 1.3;
}

/* ==========================================================================
   Stats / Core Values
   ========================================================================== */

.stats-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
	display:        grid;
	grid-template-columns: 7fr 3fr;
	gap:            var(--space-16);
	align-items:    flex-start;
}

.stats-content {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            var(--space-6);
}

.stats-heading {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
	line-height: 1.1;
	color:       var(--color-white);
}

.stats-subheading {
	font-size:   var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-white);
	line-height: var(--line-height-snug);
	margin:      0;
}

.stats-text {
	font-size:    var(--font-size-lg);
	color:        rgba(255,255,255,.6);
	line-height:  var(--line-height-loose);
	margin-bottom:0;
}

.stats-buttons {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-4);
}

.section-label--light {
	color:        rgba(255,255,255,.8);
	border-color: rgba(255,255,255,.2);
}

.section-label--light::before { background: var(--color-yellow); }

.stats-grid {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
}

.stat-item {
	display:          flex;
	align-items:      center;
	gap:              var(--space-5);
	background:       rgba(255,255,255,.06);
	border:           1px solid rgba(255,255,255,.1);
	border-radius:    var(--radius-lg);
	padding:          var(--space-5) var(--space-6);
	transition:       background var(--transition);
}

.stat-item:hover { background: rgba(255,255,255,.1); }

.stat-icon {
	flex-shrink:      0;
	width:            48px;
	height:           48px;
	background:       var(--color-yellow);
	border-radius:    var(--radius-full);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	color:            var(--color-charcoal);
}

.stat-icon svg { width: 22px; height: 22px; }

.stat-content {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
}

.stat-content .stat-number {
	font-size:   var(--font-size-3xl);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1;
}

.stat-content .stat-label {
	font-size:  var(--font-size-sm);
	color:      rgba(255,255,255,.55);
	font-weight:var(--font-weight-medium);
}

/* ==========================================================================
   Our Farm (combined why-us + stats)
   ========================================================================== */

.our-farm-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
	display:        grid;
	grid-template-columns: 1fr 380px;
	gap:            var(--space-16);
	align-items:    start;
}

.our-farm-content {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-6);
}

.our-farm-heading {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
	line-height: 1.1;
	color:       var(--color-white);
}

.our-farm-subheading {
	font-size:   var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-white);
	line-height: var(--line-height-snug);
	margin:      0;
}

.our-farm-text {
	font-size:    var(--font-size-lg);
	color:        rgba(255, 255, 255, 0.6);
	line-height:  var(--line-height-loose);
	margin:       0;
}

.our-farm-list {
	list-style:     none;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
}

.our-farm-list li {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	font-size:   var(--font-size-base);
	font-weight: var(--font-weight-medium);
	color:       rgba(255, 255, 255, 0.85);
}

.our-farm-list li::before {
	content:       '';
	display:       block;
	flex-shrink:   0;
	width:         8px;
	height:        8px;
	background:    var(--color-yellow);
	border-radius: var(--radius-full);
}

.our-farm-buttons {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-4);
}

.our-farm-stats {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
	align-self:     center;
}

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

@media ( max-width: 600px ) {
	.our-farm-heading { font-size: var(--font-size-3xl); }
}

/* ==========================================================================
   Products Section
   ========================================================================== */

.products-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
}

.products-header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	margin-bottom:   var(--space-10);
	gap:             var(--space-6);
	flex-wrap:       wrap;
}

.products-heading {
	font-size:    var(--font-size-4xl);
	font-weight:  800;
	line-height:  1.1;
	margin-top:   var(--space-3);
	max-width:    24ch;
}

.products-coming-soon {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	gap:            var(--space-4);
	padding:        var(--space-16) var(--space-8);
	background:     var(--color-beige);
	border:         1px solid var(--color-border);
	border-radius:  var(--radius-lg);
	text-align:     center;
}


.products-coming-soon-title {
	font-size:   var(--font-size-3xl);
	font-weight: 800;
	color:       var(--color-charcoal);
	margin:      0;
	line-height: var(--line-height-tight);
}

.products-coming-soon-text {
	font-size:  var(--font-size-base);
	color:      var(--color-gray);
	max-width:  42ch;
	margin:     0;
	line-height: var(--line-height-loose);
}

.products-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--grid-gap);
}

.product-card {
	background:     var(--color-white);
	border-radius:  var(--radius-lg);
	border:         1px solid var(--color-gray-light);
	overflow:       hidden;
	transition:     transform var(--transition), box-shadow var(--transition);
	display:        flex;
	flex-direction: column;
}

.product-card:hover {
	transform:  translateY(-5px);
	box-shadow: var(--shadow-md);
}

.product-card-image {
	position:   relative;
	overflow:   hidden;
	height:     220px;
}

.product-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image img { transform: scale(1.05); }

.product-card-overlay {
	position:         absolute;
	inset:            0;
	background:       rgba(44,44,44,.55);
	display:          flex;
	align-items:      center;
	justify-content:  center;
	opacity:          0;
	transition:       opacity var(--transition);
}

.product-card:hover .product-card-overlay { opacity: 1; }

.product-card-cta {
	background:    var(--color-yellow);
	color:         var(--color-charcoal);
	border-radius: var(--radius-full);
	padding:       var(--space-2) var(--space-6);
	font-weight:   var(--font-weight-bold);
	font-size:     var(--font-size-sm);
	transition:    background var(--transition);
}

.product-card-cta:hover { background: var(--color-white); }

.product-card-body {
	padding:        var(--space-5);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
	flex:           1;
}

.product-card-rating { color: var(--color-yellow); font-size: var(--font-size-base); }
.product-card-name   { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-charcoal); min-height: 2.7rem; }
.product-card-desc   { font-size: var(--font-size-sm); color: var(--color-gray); line-height: var(--line-height-normal); margin-bottom: 0; }
.product-card-price  { font-size: var(--font-size-base); font-weight: 800; color: var(--color-charcoal); margin-top: auto; }

/* ==========================================================================
   Experts / Team
   ========================================================================== */

.experts-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  0;
}

.experts-header {
	margin-bottom: var(--space-10);
}

.experts-heading {
	font-size:  var(--font-size-4xl);
	font-weight:800;
	line-height:1.1;
	max-width:  28ch;
	margin-top: var(--space-3);
}

.experts-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--grid-gap);
}

.expert-card {
	background:    var(--color-beige);
	border-radius: var(--radius-lg);
	overflow:      hidden;
	border:        1px solid var(--color-gray-light);
	transition:    transform var(--transition), box-shadow var(--transition);
}

.expert-card:hover {
	transform:  translateY(-5px);
	box-shadow: var(--shadow-md);
}

.expert-card-image {
	position: relative;
	overflow: hidden;
	height:   280px;
}

.expert-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	object-position: top center;
	display:    block;
	transition: transform var(--transition-slow);
}

.expert-card:hover .expert-card-image img { transform: scale(1.04); }

.expert-card-placeholder {
	width:      100%;
	height:     100%;
	background: var(--color-beige);
	display:    flex;
	align-items:     center;
	justify-content: center;
}

.expert-card-social {
	position:  absolute;
	bottom:    var(--space-4);
	left:      50%;
	transform: translateX(-50%) translateY(8px);
	display:   flex;
	gap:       var(--space-2);
	opacity:   0;
	transition:opacity var(--transition), transform var(--transition);
}

.expert-card:hover .expert-card-social {
	opacity:   1;
	transform: translateX(-50%) translateY(0);
}

.expert-card-social a {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	background:      var(--color-yellow);
	color:           var(--color-charcoal);
	border-radius:   var(--radius-full);
	font-size:       var(--font-size-sm);
	font-weight:     var(--font-weight-bold);
	transition:      background var(--transition);
}

.expert-card-social a:hover { background: var(--color-white); }

.expert-card-body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.expert-card-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-charcoal); }
.expert-card-role { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-yellow-dark); }
.expert-card-bio  { font-size: var(--font-size-sm); color: var(--color-gray); line-height: var(--line-height-normal); margin-bottom: 0; }

/* ==========================================================================
   Latest Posts
   ========================================================================== */

.latest-posts-header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	margin-bottom:   var(--space-10);
	gap:             var(--space-6);
	flex-wrap:       wrap;
}

.latest-posts-heading {
	font-size:  var(--font-size-4xl);
	font-weight:800;
	line-height:1.1;
	margin-top: var(--space-3);
	max-width:  30ch;
}

.post-card {
	background:    var(--color-beige);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
	overflow:      hidden;
	box-shadow:    none;
}

.post-card-image-wrap {
	position: relative;
	height:   220px;
	overflow: hidden;
}

.post-card-image-wrap a { display: block; height: 100%; }

.post-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-card-image { transform: scale(1.05); }

.post-card-image-placeholder {
	width:      100%;
	height:     100%;
	background: linear-gradient(135deg, var(--color-charcoal), #444);
}

.post-card-date-chip {
	position:      absolute;
	top:           var(--space-4);
	left:          var(--space-4);
	background:    var(--color-yellow);
	color:         var(--color-charcoal);
	border-radius: var(--radius-full);
	padding:       var(--space-1) var(--space-3);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
}

.post-card-body {
	padding:        var(--space-5);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	flex-grow:      1;
	background:     var(--color-white);
}

.post-card-cat {
	display:          inline-block;
	background:       var(--color-yellow-pale);
	color:            var(--color-charcoal);
	border-radius:    var(--radius-full);
	padding:          var(--space-1) var(--space-3);
	font-size:        0.7rem;
	font-weight:      var(--font-weight-bold);
	text-transform:   uppercase;
	letter-spacing:   0.06em;
	align-self:       flex-start;
	transition:       background var(--transition);
}

.post-card-cat:hover { background: var(--color-yellow); }

.post-card-title { font-size: var(--font-size-xl); font-weight: 700; }
.post-card-title a { color: var(--color-charcoal); transition: color var(--transition); }
.post-card-title a:hover { color: var(--color-gray); }

.post-card-excerpt { font-size: var(--font-size-sm); color: var(--color-gray); line-height: var(--line-height-normal); }
.post-card-excerpt p { margin-bottom: 0; }

.post-card-readmore {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--space-2);
	align-self:    flex-start;
	margin-top:    auto;
	background:    var(--color-yellow);
	color:         #000;
	border-radius: var(--radius-full);
	padding:       var(--space-2) var(--space-6);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
	transition:    background var(--transition), color var(--transition);
}

.post-card-readmore:hover {
	background: #000;
	color:      var(--color-yellow);
}

/* ==========================================================================
   Newsletter Modal
   ========================================================================== */

.nl-modal {
	position:   fixed;
	inset:      0;
	z-index:    9999;
	display:    flex;
	align-items:     center;
	justify-content: center;
	padding:    var(--space-6);
}

.nl-modal[hidden] { display: none; }

.modal-open { overflow: hidden; }

.nl-modal-overlay {
	position:   absolute;
	inset:      0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(3px);
}

.nl-modal-box {
	position:      relative;
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	padding:       var(--space-10) var(--space-10);
	max-width:     440px;
	width:         100%;
	text-align:    center;
	box-shadow:    0 20px 60px rgba(0,0,0,.25);
	animation:     nl-modal-in .25s ease;
}

@keyframes nl-modal-in {
	from { opacity: 0; transform: translateY(16px) scale(.97); }
	to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.nl-modal-icon {
	width:           64px;
	height:          64px;
	background:      var(--color-yellow);
	border-radius:   var(--radius-full);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto var(--space-6);
	color:           var(--color-charcoal);
}

.nl-modal-title {
	font-size:     var(--font-size-2xl);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	margin-bottom: var(--space-3);
	line-height:   1.2;
}

.nl-modal-message {
	font-size:     var(--font-size-base);
	color:         #666;
	line-height:   var(--line-height-loose);
	margin-bottom: var(--space-8);
}

.nl-modal-btn {
	display:       inline-block;
	background:    var(--color-yellow);
	color:         #000;
	border:        none;
	border-radius: var(--radius);
	padding:       var(--space-3) var(--space-10);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-bold);
	font-family:   inherit;
	cursor:        pointer;
	transition:    background var(--transition), color var(--transition);
}

.nl-modal-btn:hover {
	background: #000;
	color:      var(--color-yellow);
}

@media ( max-width: 480px ) {
	.nl-modal-box { padding: var(--space-8) var(--space-6); }
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.contact-hero {
	background:      var(--color-charcoal);
	min-height:      520px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding-block:   var(--space-16);
	text-align:      center;
}

.contact-hero-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--space-4);
}

.contact-hero-title {
	font-size:   clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1.15;
}

.contact-hero-desc {
	font-size:  var(--font-size-lg);
	color:      rgba(255,255,255,.6);
	max-width:  52ch;
	margin:     0;
}

/* Body layout */
.contact-wrap {
	background:    var(--color-beige);
	padding-block: var(--space-16);
}

.contact-inner {
	display:               grid;
	grid-template-columns: 1fr 1.8fr;
	gap:                   var(--space-12);
	max-width:             var(--container-max);
	margin-inline:         auto;
	padding-inline:        var(--container-padding);
	align-items:           start;
}

/* Info column */
.contact-info-title {
	font-size:     var(--font-size-2xl);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	margin-bottom: var(--space-8);
}

.contact-info-item {
	display:       flex;
	gap:           var(--space-4);
	margin-bottom: var(--space-6);
}

.contact-info-icon {
	flex-shrink:     0;
	width:           44px;
	height:          44px;
	background:      var(--color-yellow);
	border-radius:   var(--radius-full);
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--color-charcoal);
}

.contact-info-text {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
	padding-top:    var(--space-2);
}

.contact-info-text strong {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color:       var(--color-charcoal);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.contact-info-text span,
.contact-info-text a {
	font-size:  var(--font-size-base);
	color:      var(--color-charcoal-mid, #555);
	transition: color var(--transition);
}

.contact-info-text a:hover { color: var(--color-charcoal); }

/* Socials in info col */
.contact-socials {
	margin-top:    var(--space-8);
	padding-top:   var(--space-6);
	border-top:    1px solid rgba(0,0,0,.1);
	display:       flex;
	flex-direction:column;
	gap:           var(--space-3);
}

.contact-socials-label {
	font-size:      var(--font-size-sm);
	font-weight:    var(--font-weight-bold);
	color:          var(--color-charcoal);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.contact-socials-links {
	display: flex;
	gap:     var(--space-3);
}

.contact-social-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	background:      var(--color-white);
	border:          1px solid rgba(0,0,0,.1);
	border-radius:   var(--radius-full);
	color:           var(--color-charcoal);
	transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.contact-social-btn:hover {
	background:   var(--color-yellow);
	border-color: var(--color-yellow);
}

/* Form column */
.contact-form-col {
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	padding:       var(--space-10);
	box-shadow:    var(--shadow-md);
}

.contact-notice {
	border-radius: var(--radius);
	padding:       var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-medium);
}

.contact-notice--success {
	background: #d1fae5;
	color:      #065f46;
	border:     1px solid #6ee7b7;
}

.contact-notice--error {
	background: #fee2e2;
	color:      #991b1b;
	border:     1px solid #fca5a5;
}

.contact-form-row {
	display:       flex;
	flex-direction:column;
	gap:           var(--space-5);
	margin-bottom: var(--space-5);
}

.contact-form-row--half {
	flex-direction: row;
}

.contact-form-group {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
	flex:           1;
}

.contact-form-group label {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.contact-form-group label span {
	color: var(--color-yellow-dark);
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
	width:         100%;
	background:    var(--color-beige);
	border:        1px solid rgba(0,0,0,.12);
	border-radius: var(--radius);
	padding:       var(--space-3) var(--space-4);
	font-size:     var(--font-size-base);
	font-family:   inherit;
	color:         var(--color-charcoal);
	outline:       none;
	transition:    border-color var(--transition), box-shadow var(--transition);
	appearance:    none;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
	border-color: var(--color-yellow);
	box-shadow:   0 0 0 3px rgba(238,206,56,.2);
}

.contact-form-group textarea {
	resize: vertical;
	min-height: 140px;
}

.contact-form-group select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C2C2C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right var(--space-4) center;
	padding-right:       var(--space-10);
}

.contact-submit {
	display:     inline-flex;
	align-items: center;
	gap:         var(--space-2);
	margin-top:  var(--space-2);
	cursor:      pointer;
	border:      none;
	font-family: inherit;
}

/* Responsive */
@media ( max-width: 900px ) {
	.contact-inner           { grid-template-columns: 1fr; }
	.contact-form-col        { padding: var(--space-8); }
}

@media ( max-width: 640px ) {
	.contact-form-row--half  { flex-direction: column; }
	.contact-hero            { padding-block: var(--space-12); }
	.contact-form-col        { padding: var(--space-6); }
}

/* ==========================================================================
   Shop Page
   ========================================================================== */

.shop-hero {
	background:    var(--color-charcoal);
	padding-block: var(--space-16);
	text-align:    center;
}

.shop-hero-inner {
	max-width:      var(--container-narrow);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--space-4);
}

.shop-hero-title {
	font-size:   clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1.1;
}

.shop-hero-desc {
	font-size:    var(--font-size-lg);
	color:        rgba(255,255,255,.6);
	max-width:    48ch;
	margin-bottom:0;
}

/* Shop Archive Layout */
.shop-archive-header {
	margin-bottom: var(--space-12);
}

.shop-archive-title {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
	color:       var(--color-charcoal);
	line-height: 1.1;
	margin-top:  var(--space-3);
}

.section-shop-archive .woocommerce-result-count,
.section-shop-archive .woocommerce-page .woocommerce-result-count {
	display: none !important;
}

.section-shop-archive .container {
	max-width: var(--container-wide) !important;
	width: 100% !important;
	margin-inline: auto !important;
	padding-inline: var(--container-padding);
}

.shop-archive-layout {
	display:               grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1.15fr);
	gap:                   var(--space-12);
	align-items:           start;
}

.shop-archive-sidebar {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-10);
	min-width:      180px;
	max-width:      240px;
}

.section-shop-archive .shop-archive-products {
	width: 100% !important;
}

.section-shop-archive .woocommerce ul.products,
.section-shop-archive .woocommerce ul.products.columns-4,
.section-shop-archive .woocommerce-page ul.products.columns-4 {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
	grid-auto-flow: row !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-content: start !important;
	align-items: stretch !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: var(--space-5) !important;
}

.section-shop-archive .woocommerce ul.products li.product,
.section-shop-archive .woocommerce ul.products.columns-4 li.product,
.section-shop-archive .woocommerce-page ul.products.columns-4 li.product {
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
}

@media (max-width: 1300px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4 {
		grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
	}
}

@media (max-width: 1040px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4 {
		grid-template-columns: 1fr !important;
	}
}

.shop-archive-sidebar .widget {
	background:    var(--color-beige);
	border:        none;
	border-radius: var(--radius-lg);
	padding:       var(--space-6);
}

.shop-archive-sidebar .widget-title {
	font-size:     var(--font-size-lg);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	margin-bottom: var(--space-4);
}

.shop-archive-products {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.shop-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.shop-grid {
	display:               grid;
	grid-template-columns: repeat(4, minmax(240px, 1fr));
	gap:                   var(--space-8);
	margin-bottom:         var(--space-16);
}

.shop-card {
	background:    var(--color-beige);
	border-radius: var(--radius-lg);
	border:        1px solid var(--color-gray-light);
	overflow:      hidden;
	display:       grid;
	grid-template-columns: 1fr 1fr;
	min-width:     240px;
	transition:    box-shadow var(--transition);
}

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

.woocommerce ul.products li.product {
	display:        flex;
	flex-direction: column;
	min-width:      240px;
	margin:         0;
	padding:        0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product img {
	width:         100%;
	height:        auto;
	aspect-ratio:  1 / 1;
	object-fit:    cover;
	display:       block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display:        flex;
	flex-direction: column;
	height:         100%;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 5px var(--space-4);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-charcoal);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	width: 100%;
	border-radius: var(--radius-full);
	background: var(--color-yellow);
	color: var(--color-charcoal);
	border: 1px solid transparent;
	padding: var(--space-3) var(--space-4);
	text-align: center;
	transition: background var(--transition), color var(--transition);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
	background: var(--color-amber-dark);
	color: var(--color-white);
}

/* Shop grid product loop buttons — compact sizing */
.woocommerce.woocommerce-page ul.products li.product .button,
.woocommerce.woocommerce-page ul.products li.product .added_to_cart {
	width:      auto;
	padding:    10px var(--space-4);
	font-size:  var(--font-size-sm);
	margin:     10px auto 15px;
	display:    block;
}

.woocommerce.woocommerce-page ul.products li.product .button:hover,
.woocommerce.woocommerce-page ul.products li.product .added_to_cart:hover {
	background: var(--color-amber-dark);
	color:      var(--color-white);
}

.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	background: var(--color-yellow);
	color: var(--color-charcoal);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

/* Shop product grid — left alignment */
.woocommerce ul.products,
.shop-archive-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	grid-auto-flow: row !important;
	grid-auto-rows: auto !important;
	grid-auto-columns: minmax(240px, 1fr) !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-content: start !important;
	align-items: stretch !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	gap: var(--space-8) !important;
}

.woocommerce ul.products li.product,
.shop-archive-products ul.products li.product {
	grid-column: auto !important;
	grid-row: auto !important;
	grid-area: auto !important;
	order: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
	text-align: left !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.shop-archive-products ul.products li.product .woocommerce-loop-product__link {
	text-align: left !important;
}

/* Force smaller product widths on archive page */
.section-shop-archive .woocommerce ul.products,
.section-shop-archive .woocommerce ul.products.columns-4,
.section-shop-archive .woocommerce-page ul.products.columns-4,
.section-shop-archive .shop-archive-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
	grid-auto-columns: minmax(180px, 1fr) !important;
	grid-auto-flow: row !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-content: start !important;
	align-items: stretch !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: var(--space-5) !important;
}

.section-shop-archive .woocommerce ul.products li.product,
.section-shop-archive .woocommerce ul.products.columns-4 li.product,
.section-shop-archive .woocommerce-page ul.products.columns-4 li.product,
.section-shop-archive .shop-archive-products ul.products li.product {
	min-width: 180px !important;
	max-width: none !important;
	width: auto !important;
}

@media (max-width: 1300px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4,
	.section-shop-archive .shop-archive-products ul.products {
		grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
	}
}

@media (max-width: 1040px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4,
	.section-shop-archive .shop-archive-products ul.products {
		grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	.section-shop-archive .woocommerce ul.products,
	.section-shop-archive .woocommerce ul.products.columns-4,
	.section-shop-archive .woocommerce-page ul.products.columns-4,
	.section-shop-archive .shop-archive-products ul.products {
		grid-template-columns: 1fr !important;
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-align: left !important;
}

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

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	text-align: center;
}

/* Additional overrides for WooCommerce inline styles */
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product {
	text-align: left !important;
}

.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	text-align: left !important;
}

.woocommerce-page .woocommerce-loop-product__title,
.woocommerce .woocommerce-loop-product__title {
	text-align: left !important;
}

@media (max-width: 1024px) {
	.shop-grid,
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(240px, 1fr));
	}
	.shop-archive-layout {
		grid-template-columns: 30% 1fr;
	}
}

@media (max-width: 768px) {
	.shop-grid,
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
	.shop-card {
		grid-template-columns: 1fr;
	}
	.shop-archive-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.shop-archive-sidebar {
		order: 2;
	}
	.shop-archive-products {
		order: 1;
	}
}

.shop-card:hover { box-shadow: var(--shadow-md); }

.shop-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.shop-card-body {
	padding:        var(--space-8);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

.shop-card-top {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             var(--space-3);
}

.shop-card-name  { font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-charcoal); }
.shop-card-price { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-charcoal); white-space: nowrap; }
.shop-card-desc  { font-size: var(--font-size-sm); color: var(--color-gray); line-height: var(--line-height-loose); margin-bottom: 0; }

.shop-card-details {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        var(--space-2);
}

.shop-card-details li {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color:       var(--color-charcoal);
}

.shop-card-details li::before {
	content:       '';
	display:       block;
	flex-shrink:   0;
	width:         6px;
	height:        6px;
	background:    var(--color-yellow);
	border-radius: var(--radius-full);
}

.shop-note {
	background:    var(--color-beige);
	border-radius: var(--radius-lg);
	border:        1px solid var(--color-gray-light);
	padding:       var(--space-10);
	text-align:    center;
	display:       flex;
	flex-direction:column;
	align-items:   center;
	gap:           var(--space-6);
}

.shop-note p {
	max-width:    56ch;
	color:        var(--color-gray);
	font-size:    var(--font-size-lg);
	margin-bottom:0;
}

/* ==========================================================================
   Shop Archive Sidebar
   ========================================================================== */

.shop-archive-sidebar {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-8);
	position:       sticky;
	top:            var(--space-6);
}

.shop-archive-sidebar .widget {
	background:         transparent;
	padding:            0;
	transition:         box-shadow var(--transition), border-color var(--transition);
}

.shop-archive-sidebar .widget-title {
	font-size:       var(--font-size-lg);
	font-weight:     var(--font-weight-bold);
	color:           var(--color-charcoal);
	/* extend across the full widget area by negating the parent's horizontal padding */
	display:         block;
	box-sizing:      border-box;
	margin:          var(--space-6) 0;
	padding:         var(--space-4) 0 var(--space-3) 0;
	border-bottom:   2px solid var(--color-yellow);
}

.shop-archive-sidebar .widget ul,
.shop-archive-sidebar .widget ol {
	list-style:      none;
	padding:         0;
	margin:          0;
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-1);
	font-weight:     var(--font-weight-bold);
}

.shop-archive-sidebar .widget li {
	margin:          0;
	padding:         0;
}

.shop-archive-sidebar .widget a {
	display:        inline-block;
	color:          var(--color-charcoal);
	font-size:      var(--font-size-base);
	transition:     color var(--transition), background var(--transition);
	padding:        var(--space-2) 0;
	border-bottom:  1px solid transparent;
}

.shop-archive-sidebar .widget a:hover {
	color:          var(--color-yellow-dark);
	border-bottom:  1px solid var(--color-yellow);
}

.shop-archive-sidebar .widget input,
.shop-archive-sidebar .widget select {
	width:          100%;
	padding:        var(--space-3) var(--space-4);
	background:     var(--color-white);
	border:         1px solid var(--color-gray-light);
	border-radius:  var(--radius);
	font-size:      var(--font-size-base);
	transition:     border-color var(--transition), box-shadow var(--transition);
}

.shop-archive-sidebar .widget input:focus,
.shop-archive-sidebar .widget select:focus {
	outline:        none;
	border-color:   var(--color-yellow);
	box-shadow:     0 0 0 3px rgba(238,206,56,.2);
}

.shop-archive-sidebar .widget button {
	width:          100%;
	padding:        var(--space-3) var(--space-4);
	background:     var(--color-yellow);
	color:          var(--color-charcoal);
	border:         none;
	border-radius:  var(--radius-full);
	font-weight:    var(--font-weight-bold);
	font-size:      var(--font-size-base);
	cursor:         pointer;
	transition:     background var(--transition), color var(--transition);
}

.shop-archive-sidebar .widget button:hover {
	background:     var(--color-amber-dark);
	color:          var(--color-white);
}

/* Product search form — inline button with magnifying glass icon */
.shop-archive-sidebar .woocommerce-product-search {
	display:        flex;
	gap:            0;
	align-items:    stretch;
}

.shop-archive-sidebar .woocommerce-product-search .search-field {
	flex:           1;
	padding:        var(--space-3) var(--space-4);
	background:     var(--color-white);
	border:         1px solid var(--color-gray-light);
	border-radius:  var(--radius) 0 0 var(--radius);
	font-size:      var(--font-size-base);
	transition:     border-color var(--transition), box-shadow var(--transition);
}

.shop-archive-sidebar .woocommerce-product-search .search-field:focus {
	outline:        none;
	border-color:   var(--color-yellow);
	box-shadow:     0 0 0 3px rgba(238,206,56,.2);
}

.shop-archive-sidebar .woocommerce-product-search .search-button {
	width:          44px;
	height:         auto;
	padding:        0;
	background:     var(--color-yellow);
	color:          var(--color-charcoal);
	border:         1px solid var(--color-yellow);
	border-radius:  0 var(--radius) var(--radius) 0;
	font-size:      20px;
	line-height:    1;
	display:        flex;
	align-items:    center;
	justify-content: center;
	cursor:         pointer;
	transition:     background var(--transition), border-color var(--transition);
	flex-shrink:    0;
}

.shop-archive-sidebar .woocommerce-product-search .search-button:hover {
	background:     var(--color-amber-dark);
	border-color:   var(--color-amber-dark);
	color:          var(--color-white);
}

.shop-archive-sidebar .woocommerce-widget-layered-nav .woocommerce-widget-layered-nav__list,
.shop-archive-sidebar .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav__list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.shop-archive-sidebar .woocommerce-widget-layered-nav-list ul {
	list-style:     none;
	padding:        0 0 0 var(--space-4);
	margin:         0;
	border-left:    2px solid var(--color-gray-light);
	padding-left:   var(--space-5);
}

@media (max-width: 768px) {
	.shop-archive-sidebar {
		position:       static;
		gap:            var(--space-6);
	}
	
	.shop-archive-layout {
		grid-template-columns: 1fr;
		gap:                   var(--space-8);
	}
	
	.shop-archive-sidebar {
		order: 2;
	}
	
	.shop-archive-products {
		order: 1;
	}
}

/* ==========================================================================
   New section responsive
   ========================================================================== */

@media ( max-width: 1024px ) {
	.products-grid,
	.experts-grid { grid-template-columns: repeat(2, 1fr); }

	.why-us-inner,
	.stats-inner  { grid-template-columns: 1fr; gap: var(--space-10); }

	.stats-heading,
	.why-us-heading { font-size: var(--font-size-3xl); }
}

@media ( max-width: 900px ) {
	.posts-carousel-track .post-card {
		flex: 0 0 calc((100% - var(--grid-gap)) / 2);
	}
}

@media ( max-width: 560px ) {
	.posts-carousel-track .post-card {
		flex: 0 0 100%;
	}
}

@media ( max-width: 768px ) {
	.products-header,
	.latest-posts-header { flex-direction: column; align-items: flex-start; }

	.shop-card { grid-template-columns: 1fr; }
	.shop-card-image img { height: 220px; }
	.shop-grid { grid-template-columns: 1fr; }
}

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

	.why-us-image-primary img { height: 280px; }
	.why-us-image-secondary   { display: none; }
}

/* ==========================================================================
   Blog Page — 3-column card grid
   ========================================================================== */

/* Page hero — featured image overlay variant */
.page-hero--has-image,
.blog-page-hero--has-image {
	position: relative;
	overflow: hidden;
}

.page-hero-bg {
	position: absolute;
	inset:    0;
	z-index:  0;
}

.page-hero-bg-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.page-hero-overlay {
	position:   absolute;
	inset:      0;
	z-index:    1;
	background: rgba(0, 0, 0, 0.55);
}

.page-hero--has-image .page-hero-inner,
.blog-page-hero--has-image .blog-page-hero-inner {
	position: relative;
	z-index:  2;
}

/* Shared dark hero — blog page, inner pages */
.blog-page-hero,
.page-hero {
	background: var(--color-charcoal);
	text-align: center;
}

.blog-page-hero,
.page-hero {
	min-height:      520px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding-block:   var(--space-16);
}

/* Plain title-only hero — no featured image, half the height */
.page-hero:not(.page-hero--has-image),
.blog-page-hero:not(.blog-page-hero--has-image) {
	min-height: 260px;
}

.blog-page-hero-inner,
.page-hero-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	width:          100%;
}

.blog-page-title {
	font-size:   clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1.1;
	margin:      0;
}

.page-hero-title {
	font-size:   clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1.1;
	margin:      0;
}

.blog-page-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

/* 3-column grid */
.blog-cards-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--grid-gap);
	margin-bottom:         var(--space-12);
}

/* Card */
.blog-grid-card {
	background:    var(--color-white);
	border:        1px solid var(--color-gray-light);
	border-radius: var(--radius-lg);
	overflow:      hidden;
	display:       flex;
	flex-direction:column;
	transition:    transform var(--transition), box-shadow var(--transition);
}

.blog-grid-card:hover {
	transform:  translateY(-5px);
	box-shadow: var(--shadow-md);
}

/* Image */
.blog-grid-card-image-wrap {
	position:   relative;
	display:    block;
	height:     220px;
	overflow:   hidden;
	flex-shrink:0;
}

.blog-grid-card-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--transition-slow);
}

.blog-grid-card:hover .blog-grid-card-image { transform: scale(1.05); }

.blog-grid-card-placeholder {
	width:      100%;
	height:     100%;
	background: linear-gradient(135deg, var(--color-charcoal) 0%, #555 100%);
}

.blog-grid-card-date {
	position:      absolute;
	bottom:        var(--space-3);
	left:          var(--space-3);
	background:    var(--color-yellow);
	color:         var(--color-charcoal);
	border-radius: var(--radius-full);
	padding:       var(--space-1) var(--space-3);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
}

/* Body */
.blog-grid-card-body {
	padding:        var(--space-6);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-3);
	flex-grow:      1;
}

.blog-grid-card-cat {
	display:        inline-block;
	align-self:     flex-start;
	background:     var(--color-yellow-pale);
	color:          var(--color-charcoal);
	border-radius:  var(--radius-full);
	padding:        var(--space-1) var(--space-3);
	font-size:      0.7rem;
	font-weight:    var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition:     background var(--transition);
}

.blog-grid-card-cat:hover { background: var(--color-yellow); }

.blog-grid-card-title {
	font-size:   var(--font-size-xl);
	font-weight: 700;
	line-height: var(--line-height-snug);
}

.blog-grid-card-title a { color: var(--color-charcoal); transition: color var(--transition); }
.blog-grid-card-title a:hover { color: var(--color-gray); }

.blog-grid-card-excerpt {
	font-size:   var(--font-size-sm);
	color:       var(--color-gray);
	line-height: var(--line-height-loose);
	flex-grow:   1;
}

.blog-grid-card-excerpt p { margin-bottom: 0; }

/* Read More button */
.blog-grid-card-readmore {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--space-2);
	align-self:    flex-start;
	background:    var(--color-yellow);
	color:         #000;
	border-radius: var(--radius-full);
	padding:       var(--space-2) var(--space-6);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
	margin-top:    auto;
	transition:    background var(--transition), color var(--transition);
}

.blog-grid-card-readmore:hover {
	background: #000;
	color:      var(--color-yellow);
}

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

@media ( max-width: 600px ) {
	.blog-cards-grid { grid-template-columns: 1fr; }
	.blog-grid-card-image-wrap { height: 200px; }
}

/* ==========================================================================
   Single Post
   ========================================================================== */

/* Hero header */
.single-hero {
	background:    var(--color-charcoal);
	padding-block: var(--space-16);
	text-align:    center;
}

.single-hero-inner {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--space-5);
}

.single-hero-meta {
	display:         flex;
	align-items:     center;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             var(--space-3);
	font-size:       var(--font-size-sm);
	color:           rgba(255,255,255,.6);
}

.single-hero-sep {
	color: rgba(255,255,255,.3);
}

.single-hero-cat {
	display:        inline-block;
	background:     var(--color-yellow);
	color:          var(--color-charcoal);
	border-radius:  var(--radius-full);
	padding:        var(--space-1) var(--space-4);
	font-weight:    var(--font-weight-bold);
	font-size:      0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition:     background var(--transition);
}

.single-hero-cat:hover { background: var(--color-yellow-dark); }

.single-hero-date {
	color: var(--color-white);
}

.single-hero-author {
	color: var(--color-white);
}

.single-hero-author a {
	color:       rgba(255,255,255,.9);
	font-weight: var(--font-weight-semibold);
	transition:  color var(--transition);
}

.single-hero-author a:hover { color: var(--color-yellow); }

.single-hero-title {
	font-size:   clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	color:       var(--color-white);
	line-height: 1.15;
	width:       100%;
}

/* Two-column layout wrapper */
.single-article-wrap {
	max-width:      var(--container-wide);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

.single-layout {
	display:               grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	gap:                   var(--space-12);
	align-items:           start;
}

.single-main {
	min-width: 0;
}

/* Featured image */
.single-featured {
	margin-bottom: var(--space-8);
}

.single-featured-img {
	width:         100%;
	max-height:    520px;
	object-fit:    cover;
	border-radius: var(--radius-lg);
	display:       block;
}

/* Content */
.single-content-wrap {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-6);
}

.single-content {
	font-size:     var(--font-size-lg);
	line-height:   var(--line-height-loose);
	color:         var(--color-charcoal);
	margin-inline: 25px;
	text-align:    justify;
}

/* ---- Inline image alignment (block editor Align Left / Align Right) ---- */
.single-content .alignleft,
.entry-content .alignleft,
.page-content .alignleft {
	float:        left;
	margin-top:   var(--space-2);
	margin-right: var(--space-8);
	margin-bottom: var(--space-6);
	margin-left:  0;
	max-width:    45%;
	height:       auto;
	border-radius: var(--radius);
}

.single-content .alignright,
.entry-content .alignright,
.page-content .alignright {
	float:        right;
	margin-top:   var(--space-2);
	margin-left:  var(--space-8);
	margin-bottom: var(--space-6);
	margin-right: 0;
	max-width:    45%;
	height:       auto;
	border-radius: var(--radius);
}

.single-content .aligncenter,
.entry-content .aligncenter,
.page-content .aligncenter {
	display:       block;
	margin-inline: auto;
	margin-block:  var(--space-8);
	border-radius: var(--radius);
}

/* Clearfix so content area expands past floated images */
.single-content::after,
.entry-content::after,
.page-content::after {
	content: "";
	display: table;
	clear:   both;
}

/* wp-caption wrapper (image + optional caption) */
.single-content .wp-caption,
.entry-content .wp-caption,
.page-content .wp-caption {
	max-width: 100%;
}

.single-content .wp-caption-text,
.entry-content .wp-caption-text,
.page-content .wp-caption-text {
	font-size:  var(--font-size-sm);
	color:      var(--color-gray);
	text-align: center;
	margin-top: var(--space-2);
}

@media ( max-width: 640px ) {
	.single-content .alignleft,
	.single-content .alignright,
	.entry-content .alignleft,
	.entry-content .alignright,
	.page-content .alignleft,
	.page-content .alignright {
		float:     none;
		max-width: 100%;
		margin:    var(--space-6) auto;
		display:   block;
	}
}

.single-content h2,
.single-content h3,
.single-content h4 {
	margin-top:    var(--space-10);
	margin-bottom: var(--space-4);
	line-height:   var(--line-height-snug);
}

.single-content h2 { font-size: var(--font-size-3xl); }
.single-content h3 { font-size: var(--font-size-2xl); }
.single-content h4 { font-size: var(--font-size-xl); }

.single-content p  { margin-bottom: var(--space-6); }

.single-content blockquote {
	background:    var(--color-beige);
	border-left:   4px solid var(--color-yellow);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding:       var(--space-6) var(--space-8);
	margin:        var(--space-8) 0;
	font-size:     var(--font-size-xl);
	font-style:    italic;
	color:         var(--color-charcoal);
	line-height:   var(--line-height-loose);
}

.single-content blockquote p { margin-bottom: 0; }

.single-content ul,
.single-content ol {
	padding-left:  var(--space-6);
	margin-bottom: var(--space-6);
}

.single-content ul { list-style: disc; }
.single-content ol { list-style: decimal; }

.single-content li {
	margin-bottom: var(--space-2);
	line-height:   var(--line-height-loose);
}

.single-content a {
	color:                 var(--color-charcoal);
	text-decoration:       underline;
	text-decoration-color: var(--color-yellow);
	text-underline-offset: 3px;
	transition:            text-decoration-color var(--transition);
}

.single-content a:hover { text-decoration-color: var(--color-charcoal); }

.single-content img {
	width:         100%;
	border-radius: var(--radius-lg);
	margin-block:  var(--space-8);
}

/* Post footer: tags + share */
.single-post-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             var(--space-6);
	padding-top:     var(--space-8);
	margin-top:      var(--space-8);
	margin-inline:   25px;
	border-top:      1px solid var(--color-gray-light);
}

/* Tags */
.single-tags {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--space-2);
}

.single-tags-label {
	font-size:   var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.single-tag {
	display:        inline-block;
	background:     var(--color-yellow);
	color:          #000;
	border:         1px solid var(--color-yellow);
	border-radius:  var(--radius-full);
	padding:        var(--space-2) var(--space-5);
	font-size:      var(--font-size-base);
	font-weight:    var(--font-weight-medium);
	transition:     background var(--transition), color var(--transition), border-color var(--transition);
}

.single-tag:hover {
	background:   #000;
	border-color: #000;
	color:        var(--color-yellow);
}

/* Share */
.single-share {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
}

.single-share-label {
	font-size:   var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.single-share-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      var(--color-beige);
	color:           var(--color-charcoal);
	border:          1px solid var(--color-gray-light);
	border-radius:   var(--radius-full);
	font-size:       var(--font-size-base);
	font-weight:     var(--font-weight-bold);
    background:       transparent;
}

.single-share-btn:hover {
	background:   var(--color-yellow);
	border-color: var(--color-yellow);
	color:        var(--color-charcoal);
}

/* Responsive */
@media ( max-width: 768px ) {
	.single-hero-title  { font-size: var(--font-size-2xl); }
	.single-content     { font-size: var(--font-size-base); }
	.single-post-footer { flex-direction: column; align-items: flex-start; }
}

@media ( max-width: 480px ) {
	.single-hero { padding-block: var(--space-12); }
}

/* ==========================================================================
   WooCommerce — Single Product Page
   ========================================================================== */

.single-product-wrap {
	max-width:      var(--container-max);
	margin-inline:  auto;
	padding-inline: var(--container-padding);
	padding-block:  var(--space-16);
}

/* Two-column layout: gallery | summary */
.single-product-inner .product {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--space-16);
	align-items:           start;
}

/* ---- Gallery ---- */
.single-product-inner .woocommerce-product-gallery {
	float:    none !important;
	width:    100% !important;
	position: static;
}

/* Hide zoom trigger button */
.single-product-inner .woocommerce-product-gallery__trigger {
	display: none !important;
}

.single-product-inner .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width:         100%;
	height:        auto;
	border-radius: var(--radius-lg);
	display:       block;
}

.single-product-inner .flex-control-thumbs {
	display:    flex;
	gap:        var(--space-2);
	margin-top: var(--space-3);
	padding:    0;
	list-style: none;
}

.single-product-inner .flex-control-thumbs li {
	flex: 0 0 auto;
}

.single-product-inner .flex-control-thumbs img {
	width:         72px;
	height:        72px;
	object-fit:    cover;
	border-radius: var(--radius);
	border:        2px solid transparent;
	cursor:        pointer;
	transition:    border-color var(--transition);
}

.single-product-inner .flex-control-thumbs .flex-active {
	border-color: var(--color-yellow);
}

/* ---- Summary (right column) ---- */
.single-product-inner .summary {
	float:          none !important;
	width:          100% !important;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-5);
}

.single-product-inner .summary .product_title {
	font-size:   var(--font-size-4xl);
	font-weight: 800;
	line-height: 1.1;
	color:       var(--color-charcoal);
	margin:      0;
}

/* Breadcrumb */
.single-product-wrap .woocommerce-breadcrumb {
	font-size:     var(--font-size-sm);
	color:         var(--color-gray);
	margin-bottom: var(--space-4);
}

.single-product-wrap .woocommerce-breadcrumb a {
	color:      var(--color-gray);
	transition: color var(--transition);
}

.single-product-wrap .woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
}

/* Rating */
.single-product-inner .woocommerce-product-rating {
	display:     flex;
	align-items: center;
	gap:         var(--space-2);
}

/* ---- Star rating — Unicode replacement for missing WooCommerce icon font ---- */
.star-rating {
	overflow:        hidden;
	position:        relative;
	height:          1.2em;
	line-height:     1.2;
	font-size:       1rem;
	width:           5.7em;
	display:         inline-block;
	vertical-align:  middle;
}

.star-rating::before {
	content:        "★★★★★";
	color:          #ddd;
	position:       absolute;
	top:            0;
	left:           0;
	letter-spacing: 0.14em;
	white-space:    nowrap;
}

.star-rating span {
	overflow:   hidden;
	position:   absolute;
	top:        0;
	left:       0;
	color:      transparent;
	white-space: nowrap;
}

.star-rating span::before {
	content:        "★★★★★";
	color:          var(--color-yellow);
	position:       absolute;
	top:            0;
	left:           0;
	letter-spacing: 0.14em;
	white-space:    nowrap;
}

/* Price */
.single-product-inner .summary .price {
	font-size:   var(--font-size-3xl);
	font-weight: 800;
	color:       var(--color-charcoal);
}

.single-product-inner .summary .price ins {
	text-decoration: none;
	color:           var(--color-charcoal);
}

.single-product-inner .summary .price del {
	color:     var(--color-gray);
	font-size: var(--font-size-xl);
}

/* Short description */
.single-product-inner .woocommerce-product-details__short-description {
	font-size:   var(--font-size-base);
	color:       var(--color-gray);
	line-height: var(--line-height-loose);
	border-top:  1px solid var(--color-border);
	padding-top: var(--space-5);
}

.single-product-inner .woocommerce-product-details__short-description ul,
.single-product-inner .woocommerce-Tabs-panel ul {
	list-style:  disc;
	padding-left: var(--space-6);
	margin:      var(--space-3) 0;
}

.single-product-inner .woocommerce-product-details__short-description ol,
.single-product-inner .woocommerce-Tabs-panel ol {
	list-style:  decimal;
	padding-left: var(--space-6);
	margin:      var(--space-3) 0;
}

.single-product-inner .woocommerce-product-details__short-description li,
.single-product-inner .woocommerce-Tabs-panel li {
	margin-bottom: var(--space-1);
	color:         var(--color-gray);
}

/* Quantity + Add to cart */
.single-product-inner .cart {
	display:     flex;
	align-items: center;
	gap:         var(--space-4);
	flex-wrap:   wrap;
}

.single-product-inner .quantity input {
	width:         80px;
	padding:       var(--space-3) var(--space-4);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	font-size:     var(--font-size-base);
	font-family:   inherit;
	text-align:    center;
	color:         var(--color-charcoal);
	background:    var(--color-white);
}

.single-product-inner button.single_add_to_cart_button {
	display:       inline-block;
	background:    var(--color-yellow);
	color:         var(--color-charcoal);
	border:        none;
	border-radius: var(--radius-full);
	padding:       var(--space-3) var(--space-8);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-bold);
	font-family:   inherit;
	cursor:        pointer;
	transition:    background var(--transition), color var(--transition);
}

.single-product-inner button.single_add_to_cart_button:hover {
	background: var(--color-charcoal);
	color:      var(--color-yellow);
}

/* Product meta (categories, tags, SKU) */
.single-product-inner .product_meta {
	font-size:      var(--font-size-sm);
	color:          var(--color-gray);
	border-top:     1px solid var(--color-border);
	padding-top:    var(--space-4);
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

.single-product-inner .product_meta a {
	color:      var(--color-charcoal);
	transition: color var(--transition);
}

.single-product-inner .product_meta a:hover {
	color: var(--color-primary);
}

/* ---- Tabs (description, reviews, etc.) ---- */
.single-product-inner .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top:  0;
	padding-top: var(--space-10);
}

.single-product-inner .woocommerce-tabs ul.tabs {
	display:       flex;
	gap:           var(--space-2);
	list-style:    none;
	padding:       0;
	margin:        0 0 var(--space-8) 0;
	border-bottom: 1px solid var(--color-border);
}

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

.single-product-inner .woocommerce-tabs ul.tabs li a {
	display:       block;
	padding:       var(--space-3) var(--space-6);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-semibold);
	color:         var(--color-gray);
	border-bottom: 2px solid transparent;
	transition:    color var(--transition), border-color var(--transition);
}

.single-product-inner .woocommerce-tabs ul.tabs li.active a,
.single-product-inner .woocommerce-tabs ul.tabs li a:hover {
	color:        var(--color-charcoal);
	border-color: var(--color-yellow);
}

.single-product-inner .woocommerce-Tabs-panel {
	font-size:   var(--font-size-base);
	color:       var(--color-gray);
	line-height: var(--line-height-loose);
	width:       100%;
}

/* Hide redundant panel heading — tab label already identifies the section */
.single-product-inner .woocommerce-Tabs-panel h2 {
	display: none;
}

/* ---- Reviews tab ---- */

/* Review list */
.woocommerce-Reviews .commentlist {
	list-style: none;
	padding:    0;
	margin:     0 0 var(--space-10) 0;
}

.woocommerce-Reviews .commentlist .comment_container {
	display:    flex;
	gap:        var(--space-5);
	padding:    var(--space-6) 0;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-Reviews .commentlist .comment_container img.avatar {
	width:         52px;
	height:        52px;
	border-radius: var(--radius-full);
	flex-shrink:   0;
	object-fit:    cover;
}

.woocommerce-Reviews .comment-text {
	flex: 1;
}

.woocommerce-Reviews .comment-text .star-rating {
	margin-bottom: var(--space-2);
}

.woocommerce-Reviews .comment-text .meta {
	font-size:     var(--font-size-sm);
	color:         var(--color-gray);
	margin-bottom: var(--space-3);
}

.woocommerce-Reviews .comment-text .meta .woocommerce-review__author {
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.woocommerce-Reviews .comment-text .description p {
	font-size:   var(--font-size-base);
	color:       var(--color-gray);
	line-height: var(--line-height-loose);
	margin:      0;
}

/* Review form */
.woocommerce-Reviews #review_form_wrapper {
	border-top:  1px solid var(--color-border);
	padding-top: var(--space-8);
}

.woocommerce-Reviews #review_form .comment-reply-title {
	font-size:     var(--font-size-xl);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	margin-bottom: var(--space-6);
	display:       block;
}

.woocommerce-Reviews #review_form .comment-form-rating label,
.woocommerce-Reviews #review_form .comment-form-comment label,
.woocommerce-Reviews #review_form .comment-form-author label,
.woocommerce-Reviews #review_form .comment-form-email label {
	display:       block;
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-semibold);
	color:         var(--color-charcoal);
	margin-bottom: var(--space-2);
}

/* Form star selector */
.woocommerce-Reviews #review_form p.stars {
	margin: 0 0 var(--space-5) 0;
}

.woocommerce-Reviews #review_form p.stars span {
	display: flex;
	gap:     var(--space-1);
}

.woocommerce-Reviews #review_form p.stars a {
	display:     inline-block;
	width:       1.4em;
	height:      1.4em;
	text-indent: -9999px;
	overflow:    hidden;
	position:    relative;
	color:       transparent;
	font-size:   1.3rem;
	line-height: 1;
}

.woocommerce-Reviews #review_form p.stars a::before {
	content:     "★";
	color:       #ddd;
	text-indent: 0;
	position:    absolute;
	top:         0;
	left:        0;
	font-size:   1.3rem;
	line-height: 1;
	transition:  color var(--transition);
}

.woocommerce-Reviews #review_form p.stars a:hover::before,
.woocommerce-Reviews #review_form p.stars a.active::before,
.woocommerce-Reviews #review_form p.stars:hover a::before,
.woocommerce-Reviews #review_form p.stars a.star-1:hover ~ a::before {
	color: var(--color-yellow);
}

.woocommerce-Reviews #review_form p.stars a:hover::before,
.woocommerce-Reviews #review_form p.stars a:hover ~ a::before {
	color: #ddd;
}

.woocommerce-Reviews #review_form p.stars:hover a::before {
	color: var(--color-yellow);
}

.woocommerce-Reviews #review_form p.stars a:hover ~ a::before {
	color: #ddd !important;
}

/* Text inputs */
.woocommerce-Reviews #review_form textarea,
.woocommerce-Reviews #review_form input[type="text"],
.woocommerce-Reviews #review_form input[type="email"] {
	width:         100%;
	padding:       var(--space-3) var(--space-4);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	font-size:     var(--font-size-base);
	color:         var(--color-charcoal);
	background:    var(--color-white);
	transition:    border-color var(--transition);
	box-sizing:    border-box;
}

.woocommerce-Reviews #review_form textarea:focus,
.woocommerce-Reviews #review_form input[type="text"]:focus,
.woocommerce-Reviews #review_form input[type="email"]:focus {
	outline:      none;
	border-color: var(--color-yellow);
}

.woocommerce-Reviews #review_form textarea {
	min-height: 120px;
	resize:     vertical;
}

.woocommerce-Reviews #review_form p {
	margin-bottom: var(--space-5);
}

/* Submit button */
.woocommerce-Reviews #review_form .form-submit input[type="submit"] {
	display:          inline-block;
	padding:          var(--space-3) var(--space-8);
	background:       var(--color-yellow);
	color:            var(--color-charcoal);
	border:           none;
	border-radius:    var(--radius-full);
	font-size:        var(--font-size-base);
	font-weight:      var(--font-weight-semibold);
	cursor:           pointer;
	transition:       background var(--transition), color var(--transition);
}

.woocommerce-Reviews #review_form .form-submit input[type="submit"]:hover {
	background: var(--color-amber-dark);
	color:      var(--color-white);
}

/* ---- Related products ---- */
.single-product-inner .related.products {
	grid-column:  1 / -1;
	display:      block !important;
	margin-top:   0;
	border-top:   1px solid var(--color-border);
	padding-top:  var(--space-10);
}

.single-product-inner .related.products > h2 {
	display:       block !important;
	width:         100%;
	font-size:     var(--font-size-4xl);
	font-weight:   800;
	line-height:   1.1;
	margin:        0 0 var(--space-8) 0;
	color:         var(--color-charcoal);
}

.single-product-inner .related.products ul.products {
	display:               grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap:                   var(--grid-gap) !important;
	list-style:            none !important;
	padding:               0 !important;
	margin:                0 !important;
	width:                 100% !important;
	float:                 none !important;
}

.single-product-inner .related.products ul.products li.product {
	float:          none !important;
	clear:          none !important;
	width:          100% !important;
	max-width:      none !important;
	min-width:      0 !important;
	margin:         0 !important;
	display:        flex !important;
	flex-direction: column !important;
	background:     var(--color-beige);
	border:         1px solid var(--color-border);
	border-radius:  var(--radius-lg);
	box-shadow:     var(--shadow-sm);
	overflow:       hidden;
	transition:     transform var(--transition), box-shadow var(--transition);
}

.single-product-inner .related.products ul.products li.product:hover {
	transform:  translateY(-2px);
	box-shadow: var(--shadow);
}

.single-product-inner .related.products ul.products li.product img {
	width:        100% !important;
	height:       auto !important;
	aspect-ratio: 1 / 1;
	object-fit:   cover;
	display:      block;
}

.single-product-inner .related.products ul.products li.product .woocommerce-loop-product__link {
	display:        flex;
	flex-direction: column;
	flex:           1;
	text-decoration: none;
}

.single-product-inner .related.products ul.products li.product .woocommerce-loop-product__title {
	font-size:   var(--font-size-lg) !important;
	font-weight: var(--font-weight-bold) !important;
	color:       var(--color-charcoal) !important;
	margin:      0 !important;
	padding:     var(--space-3) var(--space-4) var(--space-1) !important;
	text-align:  left !important;
}

.single-product-inner .related.products ul.products li.product .price {
	font-size:   var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-amber-dark);
	margin:      0 !important;
	padding:     var(--space-1) var(--space-4) var(--space-3) !important;
	text-align:  left !important;
}

.single-product-inner .related.products ul.products li.product .button,
.single-product-inner .related.products ul.products li.product .added_to_cart {
	display:       block !important;
	width:         calc(100% - var(--space-8)) !important;
	margin:        0 var(--space-4) var(--space-4) !important;
	border-radius: var(--radius-full) !important;
	background:    var(--color-yellow) !important;
	color:         var(--color-charcoal) !important;
	border:        1px solid transparent !important;
	padding:       var(--space-3) var(--space-4) !important;
	text-align:    center !important;
	font-weight:   var(--font-weight-semibold) !important;
	transition:    background var(--transition), color var(--transition) !important;
}

.single-product-inner .related.products ul.products li.product .button:hover,
.single-product-inner .related.products ul.products li.product .added_to_cart:hover {
	background: var(--color-amber-dark) !important;
	color:      var(--color-white) !important;
}

/* ---- Tags (moved to bottom via hook) — reuse blog tag styles ---- */
.single-product-inner .product_meta .tagged_as {
	display: none;
}

.single-product-tag-footer {
	grid-column:     1 / -1;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      var(--space-4);
}

.single-product-tag-footer .single-tags-label {
	font-size:   var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.single-product-tag-footer .single-tag {
	padding:   var(--space-1) var(--space-3);
	font-size: var(--font-size-sm);
}

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

	.single-product-inner .woocommerce-product-gallery {
		position: static;
	}

	.single-product-inner .related.products ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media ( max-width: 480px ) {
	.single-product-wrap {
		padding-block: var(--space-10);
	}

	.single-product-inner .summary .product_title {
		font-size: var(--font-size-2xl);
	}

	.single-product-inner .related.products ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404 {
	max-width:      640px;
	margin-inline:  auto;
	padding-block:  var(--space-16);
	text-align:     center;
}

.error-404-code {
	font-size:   8rem;
	font-weight: var(--font-weight-bold);
	line-height:  1;
	color:        var(--color-beige-mid);
	margin:       0 0 var(--space-4);
	letter-spacing: -0.04em;
}

.error-404-message {
	font-size:     var(--font-size-lg);
	color:         var(--color-charcoal-mid);
	margin-bottom: var(--space-10);
	line-height:   var(--line-height-relaxed);
}

.error-404-actions {
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--space-3);
	justify-content: center;
	margin-bottom:   var(--space-12);
}

.error-404-search {
	border-top:     1px solid var(--color-beige-mid);
	padding-top:    var(--space-8);
}

.error-404-search-label {
	font-size:     var(--font-size-sm);
	color:         var(--color-charcoal-light);
	margin-bottom: var(--space-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.error-404-search .search-form {
	display:        flex;
	gap:            var(--space-2);
	justify-content: center;
}

.error-404-search .search-field {
	flex:            1;
	max-width:       360px;
	padding:         var(--space-3) var(--space-4);
	border:          1px solid var(--color-beige-mid);
	border-radius:   var(--radius-full);
	font-size:       var(--font-size-base);
	font-family:     var(--font-body);
	background:      var(--color-white);
	color:           var(--color-charcoal);
}

.error-404-search .search-field:focus {
	outline:      2px solid var(--color-green);
	outline-offset: 2px;
	border-color: var(--color-green);
}

.error-404-search .search-submit {
	padding:       var(--space-3) var(--space-6);
	background:    var(--color-green);
	color:         var(--color-white);
	border:        none;
	border-radius: var(--radius-full);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-semibold);
	font-family:   var(--font-body);
	cursor:        pointer;
	transition:    background var(--transition);
}

.error-404-search .search-submit:hover {
	background: var(--color-green-dark, #3a6b3a);
}

@media ( max-width: 600px ) {
	.error-404-code { font-size: 5rem; }
	.error-404-search .search-form { flex-direction: column; align-items: stretch; }
	.error-404-search .search-field { max-width: 100%; }
}

/* ==========================================================================
   Search Results Page
   ========================================================================== */

.search-result-count {
	font-size:     var(--font-size-sm);
	color:         var(--color-charcoal-light);
	margin-bottom: var(--space-8);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.search-no-results {
	max-width:     600px;
	margin-inline: auto;
	text-align:    center;
	padding-block: var(--space-16);
}

.search-no-results-message {
	font-size:     var(--font-size-lg);
	color:         var(--color-charcoal-mid);
	margin-bottom: var(--space-8);
	line-height:   var(--line-height-relaxed);
}

.search-no-results .search-form {
	display:         flex;
	gap:             var(--space-2);
	justify-content: center;
	margin-bottom:   var(--space-8);
}

.search-no-results .search-field {
	flex:        1;
	max-width:   360px;
	padding:     var(--space-3) var(--space-4);
	border:      1px solid var(--color-beige-mid);
	border-radius: var(--radius-full);
	font-size:   var(--font-size-base);
	font-family: var(--font-body);
	background:  var(--color-white);
	color:       var(--color-charcoal);
}

.search-no-results .search-field:focus {
	outline:      2px solid var(--color-green);
	outline-offset: 2px;
	border-color: var(--color-green);
}

.search-no-results .search-submit {
	padding:       var(--space-3) var(--space-6);
	background:    var(--color-green);
	color:         var(--color-white);
	border:        none;
	border-radius: var(--radius-full);
	font-size:     var(--font-size-base);
	font-weight:   var(--font-weight-semibold);
	font-family:   var(--font-body);
	cursor:        pointer;
	transition:    background var(--transition);
}

.search-no-results .search-submit:hover {
	background: var(--color-green-dark, #3a6b3a);
}

.search-no-results-links {
	display:         flex;
	flex-wrap:       wrap;
	gap:             var(--space-3);
	justify-content: center;
}

@media ( max-width: 600px ) {
	.search-no-results .search-form { flex-direction: column; align-items: stretch; }
	.search-no-results .search-field { max-width: 100%; }
}

/* ==========================================================================
   WooCommerce My Account Pages
   ========================================================================== */

/* Two-column layout — override WooCommerce's float-based layout */
.woocommerce-account .page-body .woocommerce {
	display:               grid;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
	gap:                   var(--space-12);
	align-items:           start;
}

/* --- Navigation sidebar --- */
.woocommerce-MyAccount-navigation {
	float:    none !important;
	width:    100% !important;
	position: sticky;
	top:      var(--space-6);
}

.woocommerce-MyAccount-content {
	float:  none !important;
	width:  100% !important;
}

.woocommerce-MyAccount-navigation::before {
	content:       'My Account';
	display:       inline-block;
	font-size:     var(--font-size-lg);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	margin:        0 0 var(--space-2) 0;
	padding:       var(--space-4) 0 var(--space-3) 0;
	border-bottom: 2px solid var(--color-yellow);
}

.woocommerce-MyAccount-navigation ul {
	list-style:     none;
	padding:        0;
	margin:         0;
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
}

.woocommerce-MyAccount-navigation li {
	margin:  0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li a {
	display:         block;
	font-size:       var(--font-size-base);
	font-weight:     var(--font-weight-bold);
	color:           var(--color-charcoal);
	text-decoration: none;
	padding:         var(--space-2) 0;
	transition:      color var(--transition);
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	color: var(--color-yellow-dark);
}

/* --- Content area --- */
.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content p {
	line-height: var(--line-height-loose);
	color:       var(--color-charcoal);
}

/* Section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-3);
	border-bottom:  2px solid var(--color-yellow);
}

/* --- Notices --- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	padding:       var(--space-4) var(--space-5);
	border-radius: var(--radius);
	margin-bottom: var(--space-6);
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-semibold);
	list-style:    none;
	border-top:    none;
}

.woocommerce-account .woocommerce-message {
	background:  #f0fdf4;
	border-left: 4px solid #22c55e;
	color:       #166534;
}

.woocommerce-account .woocommerce-info {
	background:  #eff6ff;
	border-left: 4px solid #3b82f6;
	color:       #1e40af;
}

.woocommerce-account .woocommerce-error {
	background:  #fef2f2;
	border-left: 4px solid #ef4444;
	color:       #991b1b;
}

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
	padding:     var(--space-1) var(--space-4);
	font-size:   var(--font-size-sm);
	border-radius: var(--radius-full);
	float:       right;
	margin-left: var(--space-4);
	margin-top:  -2px;
}

/* --- Forms --- */
.woocommerce-account .woocommerce-form,
.woocommerce-account fieldset {
	border:  none;
	padding: 0;
	margin:  0;
}

.woocommerce-account .woocommerce-form legend,
.woocommerce-account fieldset legend {
	font-size:     var(--font-size-lg);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	padding:       var(--space-4) 0 var(--space-3) 0;
	margin-bottom: var(--space-6);
	border-bottom: 2px solid var(--color-yellow);
	width:         100%;
}

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
	margin-bottom: var(--space-5);
	display:       flex;
	flex-direction: column;
	gap:           var(--space-2);
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
	font-size:   var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color:       var(--color-charcoal);
}

.woocommerce-account .woocommerce-form-row label .required,
.woocommerce-account .form-row label .required {
	color:        var(--color-yellow-dark);
	margin-left:  2px;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
	width:         100%;
	background:    var(--color-beige);
	border:        1px solid rgba(0,0,0,.12);
	border-radius: var(--radius);
	padding:       var(--space-3) var(--space-4);
	font-size:     var(--font-size-base);
	font-family:   inherit;
	color:         var(--color-charcoal);
	outline:       none;
	transition:    border-color var(--transition), box-shadow var(--transition);
	appearance:    none;
	box-sizing:    border-box;
}

.woocommerce-account input[type="text"]:focus,
.woocommerce-account input[type="email"]:focus,
.woocommerce-account input[type="password"]:focus,
.woocommerce-account input[type="tel"]:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color: var(--color-yellow);
	box-shadow:   0 0 0 3px rgba(238,206,56,.2);
}

.woocommerce-account .woocommerce-form-row--wide,
.woocommerce-account .form-row-wide {
	width: 100%;
}

.woocommerce-account .woocommerce-form-row--first,
.woocommerce-account .woocommerce-form-row--last,
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last {
	display: inline-flex;
	width:   calc(50% - var(--space-3));
}

/* Checkbox rows */
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	cursor:      pointer;
	font-size:   var(--font-size-sm);
}

/* --- Buttons --- */
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display:         inline-flex;
	align-items:     center;
	gap:             var(--space-2);
	background:      var(--color-yellow);
	color:           #000;
	border:          1.5px solid var(--color-yellow);
	border-radius:   var(--radius-full);
	padding:         var(--space-3) var(--space-6);
	font-size:       var(--font-size-base);
	font-weight:     var(--font-weight-bold);
	font-family:     inherit;
	cursor:          pointer;
	text-decoration: none;
	transition:      background var(--transition), border-color var(--transition), color var(--transition);
}

.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover {
	background:   #000;
	border-color: #000;
	color:        var(--color-yellow);
}

/* --- Orders table --- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       var(--font-size-sm);
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table th {
	text-align:    left;
	padding:       var(--space-3) var(--space-4);
	font-size:     var(--font-size-xs, 11px);
	font-weight:   var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--color-gray);
	border-bottom:  2px solid var(--color-yellow);
	background:     transparent;
}

.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table td {
	padding:       var(--space-4);
	border-bottom: 1px solid var(--color-border);
	color:         var(--color-charcoal);
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce-table tbody tr:hover td {
	background: var(--color-beige);
}

.woocommerce-account .woocommerce-orders-table .button {
	padding:   var(--space-1) var(--space-4);
	font-size: var(--font-size-sm);
}

/* Order status badges */
.woocommerce-account .woocommerce-order-status {
	display:       inline-block;
	padding:       2px var(--space-3);
	border-radius: var(--radius-full);
	font-size:     11px;
	font-weight:   var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

mark.order-status {
	background: transparent;
	padding: 0;
}

.woocommerce-account mark.order-status.status-completed,
.woocommerce-account .wc-item-meta {
	color: #166534;
}

.woocommerce-account mark.order-status.status-processing {
	color: #1e40af;
}

.woocommerce-account mark.order-status.status-on-hold {
	color: #92400e;
}

.woocommerce-account mark.order-status.status-cancelled,
.woocommerce-account mark.order-status.status-refunded {
	color: #991b1b;
}

/* --- Address sections --- */

/* Override WooCommerce float layout on the two-column address wrapper */
.woocommerce-account .u-columns.woocommerce-Addresses {
	display:               grid !important;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--space-6);
}

.woocommerce-account .u-columns.woocommerce-Addresses::before,
.woocommerce-account .u-columns.woocommerce-Addresses::after {
	display: none;
}

/* Reset WooCommerce float on each address column */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
	float:  none !important;
	width:  100% !important;
}

.woocommerce-account .woocommerce-Address {
	background:    var(--color-beige);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding:       var(--space-6);
	height:        100%;
	box-sizing:    border-box;
}

.woocommerce-account .woocommerce-Address-title {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-bottom:   var(--space-4);
	padding-bottom:  var(--space-3);
	border-bottom:   2px solid var(--color-yellow);
}

/* Template outputs h2 inside the address title */
.woocommerce-account .woocommerce-Address-title h2 {
	margin:    0;
	padding:   0;
	border:    none;
	font-size: var(--font-size-base);
}

.woocommerce-account .woocommerce-Address-title .edit {
	font-size:     var(--font-size-sm);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-charcoal);
	border-bottom: 1px solid transparent;
	transition:    color var(--transition), border-color var(--transition);
	white-space:   nowrap;
	margin-left:   var(--space-4);
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
	color:        var(--color-yellow-dark);
	border-color: var(--color-yellow);
}

/* Address text content */
.woocommerce-account address {
	font-style:  normal;
	font-size:   var(--font-size-sm);
	color:       var(--color-charcoal);
	line-height: var(--line-height-loose);
}

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

	.woocommerce-MyAccount-navigation {
		position: static;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap:      wrap;
		gap:            var(--space-2);
	}

	.woocommerce-MyAccount-navigation li a {
		padding:       var(--space-1) var(--space-4);
		border:        1.5px solid var(--color-border);
		border-radius: var(--radius-full);
		font-size:     var(--font-size-sm);
	}

	.woocommerce-MyAccount-navigation li a:hover,
	.woocommerce-MyAccount-navigation li.is-active a {
		background:   var(--color-yellow);
		border-color: var(--color-yellow);
		color:        #000;
	}

	.woocommerce-account .u-columns.woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-form-row--first,
	.woocommerce-account .woocommerce-form-row--last,
	.woocommerce-account .form-row-first,
	.woocommerce-account .form-row-last {
		width: 100%;
		display: flex;
	}
}