/*
Theme Name: My Website
Author: Ankita
Version: 1.0
*/

/* ==========================================================================
   Global reset
   ========================================================================== */

/* border-box everywhere so width/padding/border combos (e.g. .hero's
   width: 100% + padding) can never add up to more than their box's own
   width — the main cause of horizontal overflow on mobile. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Safety net: even a stray element that still manages to render wider than
   the viewport can no longer create a horizontal scrollbar/drag on the page. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* ==========================================================================
   Site header (announcement bar + main nav)
   ========================================================================== */

/* Sticks the whole header (announcement bar + nav) to the top of the viewport
   once the page scrolls. position: sticky keeps it in normal flow until then,
   so no extra body padding is needed to avoid a content jump. z-index keeps
   it above the hero's falling-ingredients animation. */
#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #FFFBF5; /* warm cream, matches the hero's warm palette */
	transition: box-shadow 0.2s ease-in-out;
}

/* .is-scrolled is toggled by header.php's scroll listener once window.scrollY > 0 */
#site-header.is-scrolled {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Thin announcement strip above the main nav */
.announcement-bar {
	background-color: #1F4D2C; /* dark green, matches hero CTA */
	color: #ffffff;
	text-align: center;
	padding: 8px 16px;
}

.announcement-bar p {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* Main header row: logo — nav — cart/hamburger, spaced across the width */
.site-header__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 32px;
}

/* Text logo — placeholder until a real logo image replaces it (see header.php comment) */
.site-header__logo {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #3B2412; /* dark brown, matches hero headline */
	text-decoration: none;
	white-space: nowrap;
}

/* Nav list, laid out horizontally on desktop */
.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav-list a {
	color: #3B2412;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: color 0.2s ease-in-out;
}

.site-header__nav-list a:hover,
.site-header__nav-list a:focus {
	color: #1F4D2C; /* dark green accent on hover */
}

/* Cart + hamburger sit together on the far right */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Cart icon with a small item-count badge */
.site-header__cart {
	position: relative;
	display: inline-flex;
	text-decoration: none;
	font-size: 1.4rem;
}

.site-header__cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 50%;
	background-color: #1F4D2C;
	color: #ffffff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Hamburger button — hidden on desktop, shown only by the mobile media query below */
.site-header__toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #3B2412;
	cursor: pointer;
	padding: 0;
}

/* Mobile: collapse the nav into a hamburger-triggered dropdown */
@media (max-width: 768px) {
	.site-header__toggle {
		display: block;
	}

	/* top: 100% positions this relative to #site-header (the nearest positioned
	   ancestor, via position: sticky), i.e. directly below the whole header */
	.site-header__nav {
		display: none; /* shown by adding .is-open, see header.php's toggle button handler */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #FFFBF5;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

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

	.site-header__nav-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 32px 16px;
	}

	.site-header__nav-list li {
		width: 100%;
	}

	.site-header__nav-list a {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid rgba(59, 36, 18, 0.1);
	}
}

/* #site-header is position: sticky, so an anchor jump straight to #best-sellers
   or #our-story would otherwise land with the sticky header overlapping the
   top of the section. This offsets the scroll position to clear it. */
#best-sellers,
#our-story {
	scroll-margin-top: 100px;
}

/* ==========================================================================
   Hero section
   ========================================================================== */

/* Full-width warm mustard/orange banner.
   position: relative + overflow: hidden turns this into the containing box
   for the absolutely-positioned falling ingredients layer below. */
.hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: #D2691E;
	padding: 64px 32px;
}

/* Constrain and center the two-column layout inside the banner.
   Needs its own stacking context (position + z-index) so it renders
   above the ingredients layer, which sits at z-index: 0. */
.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

/* Left column: headline, subheadline, CTA */
.hero__text {
	flex: 1 1 480px;
}

.hero__headline {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2.75rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	line-height: 1.2;
	margin: 0 0 16px;
}

.hero__subheadline {
	font-size: 1.05rem;
	font-weight: 300;
	color: #4a3423;
	margin: 0 0 28px;
}

/* Shop Now button */
.hero__cta {
	display: inline-block;
	background-color: #1F4D2C; /* dark green */
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 8px;
	transition: background-color 0.2s ease-in-out;
}

.hero__cta:hover,
.hero__cta:focus {
	background-color: #163a20; /* darker green on hover */
}

/* Right column: product image / placeholder */
.hero__image {
	flex: 1 1 500px;
	display: flex;
	justify-content: center;
}

.hero__placeholder {
	width: 500px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #d9d9d9;
	color: #555555;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	border-radius: 8px;
}

/* Stack text above image on smaller screens */
@media (max-width: 768px) {
	/* Less vertical padding than desktop so the orange banner doesn't leave a big empty gap */
	.hero {
		padding: 40px 24px;
	}

	.hero__inner {
		flex-direction: column;
		text-align: center;
		gap: 28px; /* tighter than desktop's 48px now that text and image stack instead of sitting side by side */
	}

	/* Same issue as .hero__image below: flex-basis: 480px is a width hint on
	   desktop's row layout, but becomes a height basis once stacked into a
	   column — reset to auto so this box only takes the height its text needs. */
	.hero__text {
		flex: 0 1 auto;
		width: 100%;
	}

	.hero__headline {
		font-size: 1.75rem;
	}

	.hero__subheadline {
		font-size: 0.95rem;
	}

	.hero__cta {
		padding: 12px 28px;
	}

	/* flex-basis: 500px on .hero__image is a width hint on desktop's row layout,
	   but once .hero__inner switches to a column, the same 500px is read as a
	   height basis — forcing a tall empty box regardless of the smaller
	   placeholder inside it. Reset it to auto so height just follows content. */
	.hero__image {
		flex: 0 1 auto;
		justify-content: center;
	}

	/* Smaller fixed square instead of stretching to the full container width —
	   keeps the placeholder from dominating the screen and leaving dead space around it */
	.hero__placeholder {
		width: 240px;
		font-size: 1rem;
	}

	/* Fewer ingredients on mobile: keep the first 4, drop the rest for a lighter/less busy screen */
	.hero__ingredient:nth-child(n + 5) {
		display: none;
	}

	/* Slightly more subtle behind the smaller stacked layout, still clearly visible */
	.hero__ingredient {
		opacity: 0.3;
	}
}

/* ==========================================================================
   Hero decorative falling ingredients
   Emoji placeholders today; swap for transparent PNG spice images later —
   the .hero__ingredient class and animations don't need to change.
   ========================================================================== */

/* Full-bleed layer that sits behind .hero__inner (z-index: 0 vs. 1) and
   never intercepts clicks on the real hero content. */
.hero__ingredients {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Each ingredient falls top-to-bottom (ingredient-fall, via `top`) while
   independently swaying left-right and rocking slightly (ingredient-sway,
   via `transform`) — two separate properties so the animations don't fight.
   The custom properties below are the defaults; the front-page.php script
   overrides them per-element so ingredients don't all move in lockstep. */
.hero__ingredient {
	position: absolute;
	top: -10%;
	left: var(--start-left, 10%);
	font-size: 2rem;
	line-height: 1;
	opacity: 0.4;
	will-change: top, transform;
	animation-name: ingredient-fall, ingredient-sway;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-duration: var(--fall-duration, 12s), var(--sway-duration, 3s);
	animation-delay: var(--fall-delay, 0s), 0s;
}

/* Top-to-bottom drift, looping forever */
@keyframes ingredient-fall {
	from {
		top: -10%;
	}
	to {
		top: 110%;
	}
}

/* Gentle leaf-like left-right sway with a slight rotation */
@keyframes ingredient-sway {
	0%,
	100% {
		transform: translateX(-14px) rotate(-6deg);
	}
	50% {
		transform: translateX(14px) rotate(6deg);
	}
}

/* ==========================================================================
   Trust badges strip
   Emoji icons are placeholders today; swap each .trust-strip__icon for a
   real icon/SVG later — the layout and spacing won't need to change.
   ========================================================================== */

/* Cream background contrasts against the orange hero directly above it */
.trust-strip {
	background-color: #FFFBF5;
	padding: 48px 32px;
}

/* 4 equal columns on desktop */
.trust-strip__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.trust-strip__item {
	text-align: center;
	padding: 8px 24px;
	border-right: 1px solid rgba(59, 36, 18, 0.15); /* subtle divider between columns */
}

.trust-strip__item:last-child {
	border-right: none;
}

.trust-strip__icon {
	display: block;
	font-size: 2rem;
	margin-bottom: 12px;
}

.trust-strip__label {
	margin: 0 0 4px;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	font-size: 1rem;
}

.trust-strip__sub {
	margin: 0;
	font-size: 0.8rem;
	color: #1F4D2C; /* dark green accent */
}

/* Tablet: 2x2 grid */
@media (max-width: 900px) {
	.trust-strip__inner {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 24px;
	}

	.trust-strip__item {
		border-right: none;
	}

	/* Vertical divider between the two columns */
	.trust-strip__item:nth-child(odd) {
		border-right: 1px solid rgba(59, 36, 18, 0.15);
	}

	/* Horizontal divider between the two rows */
	.trust-strip__item:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(59, 36, 18, 0.15);
		padding-bottom: 24px;
	}
}

/* Mobile: single stacked column */
@media (max-width: 480px) {
	.trust-strip__inner {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.trust-strip__item {
		border-right: none;
		border-bottom: 1px solid rgba(59, 36, 18, 0.15);
		padding: 20px 16px;
	}

	.trust-strip__item:last-child {
		border-bottom: none;
	}
}

/* ==========================================================================
   Best Sellers product grid
   Product data is placeholder content today; the PHP array driving this
   markup will be swapped for a real WooCommerce product query later —
   these classes and the responsive grid can stay as is.
   ========================================================================== */

/* Cream background, matches the trust strip above it */
.best-sellers {
	background-color: #FFFBF5;
	padding: 64px 32px;
}

.best-sellers__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.best-sellers__header {
	text-align: center;
	margin-bottom: 40px;
}

.best-sellers__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	margin: 0 0 8px;
}

.best-sellers__subheading {
	font-size: 1rem;
	color: #4a3423;
	margin: 0;
}

/* 4 cards per row on desktop */
.best-sellers__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Card: white background, rounded corners, soft shadow, gentle lift on hover */
.product-card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.product-card__image {
	position: relative;
}

/* Corner badge, e.g. "Bestseller" / "New" */
.product-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background-color: #D2691E; /* warm hero orange, pops against the white card */
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

/* Gray placeholder box until real product photos are added */
.product-card__placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #d9d9d9;
	color: #555555;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 16px 20px 20px;
}

.product-card__name {
	margin: 0 0 6px;
	font-size: 1.1rem;
	font-weight: 700;
	color: #3B2412;
}

.product-card__description {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: #4a3423;
}

.product-card__price {
	margin: 0 0 8px;
}

.product-card__price-current {
	font-weight: 700;
	color: #1F4D2C; /* dark green accent */
	margin-right: 8px;
}

.product-card__price-old {
	font-size: 0.85rem;
	color: #999999;
	text-decoration: line-through;
}

.product-card__rating {
	margin: 0 0 16px;
	font-size: 0.8rem;
}

.product-card__stars {
	color: #D2691E;
	letter-spacing: 1px;
}

.product-card__reviews {
	color: #777777;
	margin-left: 4px;
}

/* Dark green rounded button, pushed to the bottom of the card so all
   cards align evenly regardless of description/name length */
.product-card__cta {
	display: block;
	margin-top: auto;
	text-align: center;
	background-color: #1F4D2C;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 0;
	border-radius: 8px;
	transition: background-color 0.2s ease-in-out;
}

.product-card__cta:hover,
.product-card__cta:focus {
	background-color: #163a20; /* darker green on hover */
}

/* Tablet: 2 cards per row */
@media (max-width: 900px) {
	.best-sellers__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 card per row */
@media (max-width: 480px) {
	.best-sellers__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Shop by Category
   Category tiles link to "#" placeholders today; these will point to real
   WooCommerce product category archives later — markup/classes stay as is.
   ========================================================================== */

/* Cream background, matches the sections above it */
.shop-by-category {
	background-color: #FFFBF5;
	padding: 64px 32px;
}

.shop-by-category__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.shop-by-category__header {
	text-align: center;
	margin-bottom: 40px;
}

.shop-by-category__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	margin: 0 0 8px;
}

.shop-by-category__subheading {
	font-size: 1rem;
	color: #4a3423;
	margin: 0;
}

/* 6 tiles in a row on desktop */
.shop-by-category__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

/* Whole tile is the clickable link; lift + scale up slightly on hover */
.category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
}

.category-tile:hover,
.category-tile:focus {
	transform: translateY(-4px) scale(1.05);
}

/* Gray placeholder circle — swap the background/content for a real category photo later */
.category-tile__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin-bottom: 12px;
	border-radius: 50%;
	background-color: #d9d9d9;
	color: #555555;
	text-align: center;
	font-size: 0.75rem;
	padding: 8px;
}

.category-tile__name {
	font-weight: 700;
	color: #3B2412;
	font-size: 0.95rem;
	text-align: center;
}

/* Tablet: 3 per row (3x2 layout) */
@media (max-width: 900px) {
	.shop-by-category__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: 2 per row */
@media (max-width: 480px) {
	.shop-by-category__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Our Story
   ========================================================================== */

/* Soft warm cream tint — slightly deeper than the plain cream used in the
   trust strip / Best Sellers / Shop by Category sections, to set this section apart */
.our-story {
	background-color: #FBF0E4;
	padding: 64px 32px;
}

/* Two-column layout: image left, text right. DOM order already puts the
   image first, so stacking on mobile (below) needs no extra "order" rules. */
.our-story__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 64px;
}

.our-story__image {
	flex: 1 1 500px;
}

/* Gray placeholder box — swap for a real photo of the kitchen/founder/pickle-making later */
.our-story__placeholder {
	width: 500px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #d9d9d9;
	color: #555555;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	border-radius: 8px;
}

.our-story__text {
	flex: 1 1 480px;
}

.our-story__eyebrow {
	margin: 0 0 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #1F4D2C; /* dark green accent */
}

.our-story__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	line-height: 1.2;
	margin: 0 0 20px;
}

.our-story__paragraph {
	font-size: 1rem;
	line-height: 1.75; /* generous line-height for comfortable reading */
	color: #4a3423;
	margin: 0 0 20px;
}

/* Outlined button: transparent fill, dark green border/text, fills solid on hover */
.our-story__cta {
	display: inline-block;
	background-color: transparent;
	border: 2px solid #1F4D2C;
	color: #1F4D2C;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 30px;
	border-radius: 8px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.our-story__cta:hover,
.our-story__cta:focus {
	background-color: #1F4D2C;
	color: #ffffff;
}

/* Stack image above text on smaller screens */
@media (max-width: 768px) {
	.our-story__inner {
		flex-direction: column;
		text-align: center;
		gap: 32px;
	}
}

/* ==========================================================================
   Why Choose Us
   Emoji icons are placeholders today; swap each .feature-block__icon span
   for a real icon/SVG later — the layout and spacing won't need to change.
   ========================================================================== */

/* Dark green background with light/cream text — deliberately breaks from the
   cream/white sections above it to give the page some visual rhythm */
.why-choose-us {
	background-color: #1F4D2C;
	padding: 64px 32px;
}

.why-choose-us__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.why-choose-us__header {
	text-align: center;
	margin-bottom: 40px;
}

.why-choose-us__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #FFFBF5; /* cream, reads clearly on the dark green */
	margin: 0 0 8px;
}

.why-choose-us__subheading {
	font-size: 1rem;
	color: #cfe0d3; /* soft light-green tint, softer than pure white */
	margin: 0;
}

/* 4 feature blocks across on desktop */
.why-choose-us__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.feature-block {
	text-align: center;
}

.feature-block__icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: 16px;
}

.feature-block__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #FFFBF5;
}

.feature-block__description {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #cfe0d3;
}

/* Tablet: 2x2 grid */
@media (max-width: 900px) {
	.why-choose-us__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}
}

/* Mobile: single stacked column */
@media (max-width: 480px) {
	.why-choose-us__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
}

/* ==========================================================================
   Customer Reviews
   Testimonials are placeholder content today; the PHP array driving this
   markup will be swapped for real customer reviews later — the classes
   and responsive grid can stay as is.
   ========================================================================== */

/* Cream background, matches the other light sections on the page */
.customer-reviews {
	background-color: #FFFBF5;
	padding: 64px 32px;
}

.customer-reviews__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.customer-reviews__header {
	text-align: center;
	margin-bottom: 40px;
}

.customer-reviews__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	margin: 0 0 8px;
}

.customer-reviews__subheading {
	font-size: 1rem;
	color: #4a3423;
	margin: 0;
}

.customer-reviews__overall-stars {
	color: #D4A017; /* warm gold/amber */
	margin-right: 6px;
}

/* 3 cards across on desktop */
.customer-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Card: white background, rounded corners, soft shadow, gentle lift on hover */
.review-card {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	padding: 28px 24px;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.review-card__stars {
	display: block;
	color: #D4A017; /* warm gold/amber, matches the overall rating stars */
	letter-spacing: 2px;
	font-size: 1.1rem;
	margin-bottom: 12px;
}

.review-card__quote {
	font-style: italic;
	color: #4a3423;
	line-height: 1.6;
	margin: 0 0 20px;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Gray circular initial avatar placeholder — swap for a real customer photo later */
.review-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #d9d9d9;
	color: #555555;
	font-weight: 700;
	font-size: 0.9rem;
}

.review-card__name {
	font-weight: 700;
	color: #3B2412;
	font-size: 0.9rem;
}

/* Tablet: 2 cards per row */
@media (max-width: 900px) {
	.customer-reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 card per row */
@media (max-width: 480px) {
	.customer-reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Newsletter / WhatsApp CTA
   ========================================================================== */

/* Soft warm peach tint — a brand-colored band that stands out from the plain
   cream Customer Reviews section directly above it */
.newsletter-cta {
	background-color: #F6E1CD;
	padding: 64px 32px;
	text-align: center;
}

.newsletter-cta__inner {
	max-width: 600px;
	margin: 0 auto;
}

.newsletter-cta__heading {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412; /* dark brown */
	margin: 0 0 12px;
}

.newsletter-cta__subheading {
	font-size: 1rem;
	line-height: 1.6;
	color: #4a3423;
	margin: 0 0 32px;
}

/* Email input + Subscribe button, side by side on desktop */
.newsletter-cta__form {
	display: flex;
	gap: 12px;
	margin-bottom: 28px;
}

.newsletter-cta__input {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid rgba(59, 36, 18, 0.25);
	border-radius: 8px;
	background-color: #ffffff;
	color: #3B2412;
	font-size: 1rem;
}

.newsletter-cta__input::placeholder {
	color: #8a7361;
}

.newsletter-cta__input:focus {
	outline: none;
	border-color: #1F4D2C;
}

.newsletter-cta__submit {
	background-color: #1F4D2C;
	color: #ffffff;
	border: none;
	font-weight: 600;
	padding: 14px 28px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease-in-out;
}

.newsletter-cta__submit:hover,
.newsletter-cta__submit:focus {
	background-color: #163a20; /* darker green on hover */
}

/* "or" divider between the email form and the WhatsApp CTA */
.newsletter-cta__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #8a7361;
	font-size: 0.85rem;
	margin-bottom: 28px;
}

.newsletter-cta__divider::before,
.newsletter-cta__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: rgba(59, 36, 18, 0.2);
}

/* WhatsApp CTA — uses WhatsApp's own signature green, not the site's brand green */
.whatsapp-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #25D366;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	padding: 14px 32px;
	border-radius: 8px;
	transition: background-color 0.2s ease-in-out;
}

.whatsapp-cta:hover,
.whatsapp-cta:focus {
	background-color: #1DA851; /* darker WhatsApp green on hover */
}

/* Mobile: stack the email input and Subscribe button instead of side by side */
@media (max-width: 480px) {
	.newsletter-cta__form {
		flex-direction: column;
	}

	.newsletter-cta__submit {
		width: 100%;
	}
}

/* ==========================================================================
   Site footer
   ========================================================================== */

/* Dark brown background with cream text — deliberately different from the
   dark green Why Choose Us band higher up the page, for some visual variety */
#site-footer {
	background-color: #3B2412;
	color: #F3E6D8;
	padding-top: 56px;
}

.site-footer__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 32px;
}

/* 4 columns on desktop: brand column wider than the 3 link columns */
.site-footer__columns {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 40px;
	padding-bottom: 40px;
}

.footer-col__logo {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: #FFFBF5;
	margin: 0 0 8px;
}

.footer-col__tagline {
	font-size: 0.9rem;
	line-height: 1.5;
	color: #d8c3ac;
	margin: 0 0 16px;
}

.footer-col__social {
	display: flex;
	gap: 12px;
	font-size: 1.3rem;
}

.footer-col__social a {
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s ease-in-out;
}

.footer-col__social a:hover,
.footer-col__social a:focus {
	opacity: 1;
}

.footer-col__heading {
	font-size: 1rem;
	font-weight: 700;
	color: #FFFBF5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 16px;
}

.footer-col__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col__list a {
	color: #d8c3ac;
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s ease-in-out;
}

.footer-col__list a:hover,
.footer-col__list a:focus {
	color: #FFFBF5;
	text-decoration: underline;
}

/* "Need Help?" contact line */
.site-footer__help {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 24px 0;
}

.site-footer__help p {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #d8c3ac;
}

.site-footer__help strong {
	color: #FFFBF5;
}

.site-footer__help a {
	color: #FFFBF5;
	text-decoration: underline;
}

/* Payment icons row */
.site-footer__payments {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 24px 0;
	text-align: center;
}

.site-footer__payments-label {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: #d8c3ac;
}

.site-footer__payments-icons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Text placeholders standing in for real Visa/UPI/Mastercard payment icons */
.site-footer__payments-icons span {
	background-color: rgba(255, 255, 255, 0.08);
	color: #F3E6D8;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 6px 14px;
	border-radius: 4px;
}

/* Bottom bar: divider + centered copyright */
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px 0;
	text-align: center;
}

.site-footer__bottom p {
	margin: 0;
	font-size: 0.8rem;
	color: #b79c81;
}

/* Tablet: 2x2 grid */
@media (max-width: 900px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32px;
	}
}

/* Mobile: single stacked column, centered */
@media (max-width: 480px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-col__social {
		justify-content: center;
	}
}

/* ==========================================================================
   WooCommerce shop
   These selectors target WooCommerce's own markup/classes (ul.products,
   li.product, .star-rating, .price ins/del, etc.) since the plugin generates
   that HTML itself — there's no theme template to add custom classes to.
   A few rules use !important to reliably override WooCommerce's bundled
   frontend stylesheet regardless of which one loads last.
   ========================================================================== */

.shop-wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 32px;
	background-color: #FFFBF5;
}

/* Shop/category page heading, when WooCommerce outputs one */
.shop-wrapper .page-title,
.shop-wrapper .woocommerce-products-header__title {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412;
	text-align: center;
	margin: 0 0 24px;
}

/* "Showing X results" + sort dropdown row */
.shop-wrapper .woocommerce-result-count {
	color: #4a3423;
	font-size: 0.9rem;
	margin: 0 0 24px;
}

.shop-wrapper .woocommerce-ordering {
	margin: 0 0 24px;
}

.shop-wrapper .woocommerce-ordering select.orderby {
	background-color: #ffffff;
	color: #3B2412;
	border: 1px solid rgba(59, 36, 18, 0.25);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.9rem;
}

/* Result count and sort dropdown share one row on wider screens; ul.products
   clears the float below so the grid always starts on its own line. */
@media (min-width: 769px) {
	.shop-wrapper .woocommerce-result-count {
		float: left;
		margin-bottom: 0;
	}

	.shop-wrapper .woocommerce-ordering {
		float: right;
		margin-bottom: 0;
	}
}

/* Product grid: 4 per row on desktop.
   Flexbox + justify-content: flex-start instead of CSS Grid — WooCommerce's
   own stylesheet centers incomplete rows on ul.products, and grid's 1fr
   tracks would fight that. Flex with a fixed per-card width guarantees an
   incomplete last row (e.g. 3 items) stays left-aligned at normal card size
   instead of centering or stretching to fill the row. */
.shop-wrapper ul.products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 24px;
	list-style: none;
	clear: both;
	margin: 0 0 40px;
	padding: 0;
}

.shop-wrapper ul.products li.product {
	/* 4 columns, 3 gaps of 24px between them */
	width: calc((100% - (3 * 24px)) / 4) !important;
	flex: 0 0 auto;
	float: none !important;
	margin: 0 !important;
	position: relative;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	padding: 0 0 20px;
	text-align: center;
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.shop-wrapper ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.shop-wrapper ul.products li.product a {
	text-decoration: none;
}

.shop-wrapper ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 16px;
}

.shop-wrapper ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #3B2412;
	margin: 0 20px 8px;
}

.shop-wrapper ul.products li.product .star-rating {
	color: #D4A017; /* warm gold/amber, matches the home page reviews */
	font-size: 0.85rem;
	margin: 0 auto 8px;
}

.shop-wrapper ul.products li.product .price {
	display: block;
	font-size: 1rem;
	margin: 0 0 12px;
}

/* Struck-through original price */
.shop-wrapper ul.products li.product .price del {
	color: #b3261e;
	text-decoration: line-through;
	font-size: 0.85rem;
	opacity: 0.8;
	margin-right: 6px;
}

/* Current/sale price */
.shop-wrapper ul.products li.product .price ins {
	color: #1F4D2C;
	font-weight: 700;
	text-decoration: none;
}

/* "Sale!" badge WooCommerce automatically adds to discounted products */
.shop-wrapper ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background-color: #D2691E;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.shop-wrapper ul.products li.product .button,
.shop-wrapper ul.products li.product .add_to_cart_button {
	display: inline-block;
	margin: 4px 20px 0;
	background-color: #1F4D2C;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 10px 24px;
	border-radius: 8px;
	transition: background-color 0.2s ease-in-out;
}

.shop-wrapper ul.products li.product .button:hover,
.shop-wrapper ul.products li.product .add_to_cart_button:hover {
	background-color: #163a20;
}

/* "View cart" link WooCommerce injects next to Add to Cart after an AJAX add.
   It's a plain inline <a> by default (no display/margin of its own), so it
   was rendering right up against the Add to Cart button. Stacking it on its
   own line with margin-top gives both buttons a clear, easy-to-tap gap —
   same fix applies to related products since they reuse this markup. */
.shop-wrapper ul.products li.product .added_to_cart {
	display: block;
	margin: 12px 20px 0;
}

/* Pagination */
.shop-wrapper nav.woocommerce-pagination {
	text-align: center;
}

.shop-wrapper nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-wrapper nav.woocommerce-pagination a,
.shop-wrapper nav.woocommerce-pagination span {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
	background-color: #ffffff;
	color: #3B2412;
	text-decoration: none;
}

.shop-wrapper nav.woocommerce-pagination .current {
	background-color: #1F4D2C;
	color: #ffffff;
}

/* Tablet: 2 per row */
@media (max-width: 900px) {
	.shop-wrapper ul.products li.product {
		/* 2 columns, 1 gap of 24px between them */
		width: calc((100% - 24px) / 2) !important;
	}

	.shop-wrapper .woocommerce-result-count,
	.shop-wrapper .woocommerce-ordering {
		float: none;
		display: block;
		text-align: center;
	}
}

/* Mobile: 1 per row */
@media (max-width: 480px) {
	.shop-wrapper {
		padding: 32px 20px;
	}

	.shop-wrapper ul.products li.product {
		width: 100% !important;
	}
}

/* ==========================================================================
   WooCommerce buttons — site-wide
   Overrides WooCommerce's default purple with the brand's dark green on
   every button context (shop grid, single product, cart, checkout), not
   just the shop grid's own Add to Cart. Also sets the CSS custom properties
   newer WooCommerce/block styling reads for its accent color, as a defensive
   measure in case a future block or plugin references them directly.
   ========================================================================== */

.woocommerce {
	--wc-primary: #1F4D2C;
	--wc-primary-text: #ffffff;
	--wc-secondary: #1F4D2C;
	--wc-secondary-text: #ffffff;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.single_add_to_cart_button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart {
	background-color: #1F4D2C !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	padding: 12px 28px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color 0.2s ease-in-out !important;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce a.added_to_cart:hover {
	background-color: #163a20 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   WooCommerce single product page
   ========================================================================== */

/* Two-column layout: gallery left, summary right. Both are already siblings
   in WooCommerce's own markup (no template override needed) — flex items
   ignore any float WooCommerce's core stylesheet sets on them, so this wins
   without a specificity fight. */
.shop-wrapper div.product {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
	margin: 0 0 32px;
}

.shop-wrapper div.product .woocommerce-product-gallery {
	position: relative;
	flex: 1 1 440px;
	max-width: 500px;
	width: auto !important;
}

.shop-wrapper div.product .summary.entry-summary {
	flex: 1 1 440px;
	width: auto !important;
}

/* Gallery images */
.shop-wrapper div.product .woocommerce-product-gallery__wrapper {
	border-radius: 12px;
	overflow: hidden;
}

.shop-wrapper div.product .woocommerce-product-gallery img {
	border-radius: 12px;
}

.shop-wrapper div.product .flex-control-thumbs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.shop-wrapper div.product .flex-control-thumbs li img {
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease-in-out;
}

.shop-wrapper div.product .flex-control-thumbs li img.flex-active,
.shop-wrapper div.product .flex-control-thumbs li img:hover {
	opacity: 1;
}

/* "Sale!" badge, positioned over the gallery */
.shop-wrapper div.product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background-color: #D2691E;
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
}

/* Product title */
.shop-wrapper div.product .product_title {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 2rem;
	font-weight: 700;
	color: #3B2412;
	line-height: 1.2;
	margin: 0 0 12px;
}

.shop-wrapper div.product .woocommerce-product-rating .star-rating {
	color: #D4A017;
}

/* Price: struck-through original in muted gray, current/sale price in brand dark green */
.shop-wrapper div.product .summary > .price {
	display: block;
	font-size: 1.4rem;
	margin: 12px 0 20px;
}

.shop-wrapper div.product .summary > .price del {
	color: #999999;
	text-decoration: line-through;
	font-size: 1rem;
	opacity: 0.8;
	margin-right: 10px;
}

.shop-wrapper div.product .summary > .price ins {
	color: #1F4D2C;
	font-weight: 700;
	text-decoration: none;
}

.shop-wrapper div.product .woocommerce-product-details__short-description {
	color: #4a3423;
	line-height: 1.7;
	margin: 0 0 24px;
}

/* Quantity selector + Add to Cart form */
.shop-wrapper div.product form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 8px;
}

.shop-wrapper div.product .quantity {
	margin: 0;
}

.shop-wrapper div.product .quantity .qty {
	width: 70px;
	padding: 12px;
	border: 1px solid rgba(59, 36, 18, 0.25);
	border-radius: 8px;
	background-color: #ffffff;
	color: #3B2412;
	font-size: 1rem;
	text-align: center;
}

.shop-wrapper div.product .quantity .qty:focus {
	outline: none;
	border-color: #1F4D2C;
}

/* Trust badges row — markup injected by my_website_product_trust_badges() in functions.php */
.product-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	list-style: none;
	margin: 8px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(59, 36, 18, 0.12);
}

.product-trust-badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: #4a3423;
}

.product-trust-badges__icon {
	font-size: 1.1rem;
}

.product-trust-badges__label {
	font-weight: 600;
}

/* SKU / categories / tags meta line */
.shop-wrapper div.product .product_meta {
	font-size: 0.85rem;
	color: #8a7361;
	margin-top: 24px;
}

.shop-wrapper div.product .product_meta a {
	color: #1F4D2C;
	text-decoration: none;
}

.shop-wrapper div.product .product_meta a:hover {
	text-decoration: underline;
}

/* Description / Reviews tabs */
.shop-wrapper div.product .woocommerce-tabs {
	clear: both;
	margin-top: 56px;
}

.shop-wrapper div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid rgba(59, 36, 18, 0.12);
}

.shop-wrapper div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.shop-wrapper div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 20px;
	color: #8a7361;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.shop-wrapper div.product .woocommerce-tabs ul.tabs li.active a {
	color: #1F4D2C;
	border-bottom-color: #1F4D2C;
}

.shop-wrapper div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 24px 0;
	color: #4a3423;
	line-height: 1.7;
}

.shop-wrapper div.product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.4rem;
	color: #3B2412;
	margin: 0 0 16px;
}

/* Breadcrumb above the product title */
.shop-wrapper .woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: #8a7361;
	margin: 0 0 24px;
}

.shop-wrapper .woocommerce-breadcrumb a {
	color: #1F4D2C;
	text-decoration: none;
}

.shop-wrapper .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Related products — reuses the exact same ul.products / li.product card
   styles as the shop grid above (same selectors, so no duplicate rules
   are needed for the cards themselves); this just styles the heading and
   separates the section from the product content above it. */
.shop-wrapper .related.products {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid rgba(59, 36, 18, 0.12);
}

.shop-wrapper .related.products > h2 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #3B2412;
	text-align: center;
	margin: 0 0 32px;
}

/* Mobile: stack gallery above summary, same breakpoint the hero/Our Story sections use */
@media (max-width: 768px) {
	.shop-wrapper div.product {
		flex-direction: column;
	}

	.shop-wrapper div.product .woocommerce-product-gallery,
	.shop-wrapper div.product .summary.entry-summary {
		flex-basis: auto;
		max-width: 100%;
	}

	.shop-wrapper div.product .woocommerce-tabs ul.tabs {
		flex-wrap: wrap;
	}
}