/*
 * Chettuva Homepage 1.0.14 — mobile-first.
 * Every selector is .chp- prefixed; nothing here touches the theme,
 * other plugins or any global element, except six rules that only
 * load on this page (the stylesheet is enqueued only when the new
 * homepage renders): the `body` overflow rule, the
 * `#wpfront-scroll-top-container` rule that hides the WPFront
 * Scroll Top fish button here (it sat on top of the Combo Add to
 * Cart button on phones), the `#ast-scroll-top` rule that hides
 * Astra's own plain-chevron back-to-top button here (it is a
 * second, separate button from the fish — the v1.0.13 check caught
 * it appearing after scrolling), the `#colophon` rule that hides
 * Astra's footer here, the `.chettuva-footer-policies` /
 * `.chettuva-footer-business` rules that hide the Fixups plugin's
 * own policy-links bar here (it is rendered by `wp_footer`, not
 * inside #colophon), and the `.ht-ctc-chat` rule that hides the
 * Click to Chat floating WhatsApp bubble here (it is not in the
 * reference mockup, and it is what kept the phone number off one
 * line on phones; the WhatsApp order bar is the contact action
 * here). The fish, Astra's chevron, Astra's footer, the Fixups
 * policy bar and the WhatsApp bubble all still show on every
 * other page. This page renders the mockup's own navy footer
 * instead. Headings and body text inherit the theme fonts
 * (Fraunces headings, Inter body).
 *
 * Photos: assets/hero-banner.jpg (hero — his own photo: the jar
 * on the coastal scene with a bowl of shrimp; assets/hero-coast.jpg
 * is the earlier AI scene photo, kept as a fallback),
 * assets/chutney-banner.jpg (featured banner) and
 * assets/sunset-nets.jpg ("From the Arabian Sea" band) are scene
 * photos made for the mockup look. The product jars are always
 * the real live WooCommerce photos.
 */

.chp-main {
	background: #fff;
	overflow-x: hidden;
}

/* White header panel (his request, v1.0.23–v1.0.24): the logo
   and menus sit in a solid white bar above the hero, instead
   of the transparent header overlaying the hero photo. Astra's
   transparent header makes #masthead absolute with a
   transparent bar; on this page only, give the bar (and the
   masthead behind it) a white background and make the menu
   links, cart, social icons and hamburger navy, so they read
   on white. The logo (dark blue oval, white text) reads on
   white as-is. v1.0.24: the header is position: relative (in
   the normal flow) instead of absolute — with an opaque white
   header overlaying the hero, the header covered the top of
   the hero headline ("Taste of Arabian" was cut off, only
   "Sea" showed). In the flow the hero starts below the whole
   header, so nothing is ever cut off. The hero's top padding
   is reduced to match (it no longer has to clear an overlay).
   Other pages keep the site's normal header. */
.ast-theme-transparent-header #masthead {
	position: relative !important;
	background: #fff !important;
}
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar,
.ast-theme-transparent-header .ast-above-header,
.ast-theme-transparent-header .ast-below-header {
	background: #fff !important;
}
.ast-theme-transparent-header .main-header-menu .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .ast-menu-toggle,
.ast-theme-transparent-header #masthead .wpmenucart-contents,
.ast-theme-transparent-header #masthead .ast-header-social-1-wrap a,
.ast-theme-transparent-header #masthead .menu-toggle,
.ast-theme-transparent-header #masthead .mobile-menu-toggle-icon,
.ast-theme-transparent-header #masthead .ast-site-header-cart a {
	color: #063564 !important;
}
.ast-theme-transparent-header #masthead .ast-header-social-1-wrap svg,
.ast-theme-transparent-header #masthead .menu-toggle svg,
.ast-theme-transparent-header #masthead .ast-site-header-cart svg {
	fill: #063564 !important;
}

/* Blue trust strip above the white header (v1.0.25, his request):
   the reference mockup's navy strip — Free Home Delivery*,
   Hygienically Processed, No Added Preservatives* — rendered by
   chp_blue_strip() at the top of the body. The red WELCOME10
   strip (Fixups, #chettuva-offer-strip) is hidden on this page
   only, so visitors see one strip, the blue one, like the
   reference. This stylesheet loads on the homepage only, so the
   red strip still shows on every other page. */
.chp-blue-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 14px;
	background: #063564;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	padding: 8px 16px;
	text-align: center;
}
.chp-blue-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.chp-blue-item svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.chp-blue-sep {
	opacity: .5;
}
#chettuva-offer-strip {
	display: none !important;
}

/* Compact white header on phones (v1.0.25–v1.0.27, his request):
   the reference header is a single slim row (logo + icons), not
   the tall two-row header (logo row, then a cart row). Smaller
   logo + tighter bar, like the reference. v1.0.25 tried to lift
   the cart out of Astra's below-header row with absolute
   positioning — it never showed on his phone, and the empty
   below-header row still took up height. v1.0.27 replaces that:
   homepage-cart.js MOVES Astra's cart element (with its live
   count badge) into the primary bar's right section, next to
   the hamburger, and hides the empty below-header row — so the
   icons sit in the normal flow of the header row instead of
   being absolutely positioned. The rules below only space the
   moved icons; they do not position them. */
@media (max-width: 921px) {
	.ast-theme-transparent-header .site-logo-img .custom-logo-link img {
		width: 88px !important;
		height: auto !important;
		max-width: 88px !important;
	}
	.ast-theme-transparent-header .ast-primary-header-bar {
		min-height: 60px !important;
	}
	/* The moved cart (Astra's element, now in the header row)
	   and the account icon sit left of the hamburger. The order
	   is pinned (v1.0.28) — account, cart, hamburger — so a
	   WooCommerce re-render cannot put the cart after the
	   hamburger again. */
	.site-header-primary-section-right .chp-account-icon {
		order: -2 !important;
	}
	.site-header-primary-section-right .ast-site-header-cart {
		order: -1 !important;
	}
	.site-header-primary-section-right .ast-site-header-cart {
		margin-right: 10px;
	}
	.site-header-primary-section-right .chp-account-icon {
		margin-right: 10px;
	}
}

/* Visible menu row on phones (v1.0.26, his request): the reference
   header has a menu row (Home | Shop | Contact) below the logo
   row — on phones Astra hides the menu behind the hamburger, so
   this row (rendered in chp_render_homepage()) shows it instead.
   No "Our Story" (there is no such page). Mobile only; the
   desktop header already shows the menu. Home is underlined in
   orange, like the reference. */
.chp-mobile-menu {
	display: none;
}
@media (max-width: 921px) {
	.chp-mobile-menu {
		display: flex;
		justify-content: center;
		gap: 48px;
		background: #fff;
		border-bottom: 1px solid #e6edf3;
		padding: 6px 16px 8px;
	}
	.chp-mobile-menu-link {
		color: #063564;
		font-size: 17px;
		font-weight: 600;
		text-decoration: none;
		padding-bottom: 3px;
	}
	.chp-mobile-menu-current {
		border-bottom: 3px solid #f7941d;
	}
}

/* Account icon on phones (v1.0.26–v1.0.27): added by
   homepage-cart.js into the primary bar's right section, next
   to the cart and the hamburger — like the reference (account,
   cart, hamburger, left to right). It is a flex item in the
   header row (v1.0.27 moved it there with the cart, instead of
   the absolute positioning v1.0.26 used, which never showed).
   Hidden on desktop, where the header already has an account
   icon. */
.chp-account-icon {
	display: none;
}
@media (max-width: 921px) {
	.chp-account-icon {
		display: flex;
		align-items: center;
		color: #063564;
	}
	.chp-account-icon svg {
		width: 22px;
		height: 22px;
		display: block;
	}
}

/* "Added to cart" notices (v1.0.21–v1.0.22): a floating toast
   that slides up from the bottom of the screen. The static
   bar at the top sat under the transparent header, so the
   logo overlapped it (his screenshot) — the toast lives at
   the bottom instead, clear of the header, and fades away
   after a few seconds (see homepage-cart.js). The wrapper
   only renders when a notice exists. */
.chp-notices {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9999;
	padding: 0;
	pointer-events: none;
	animation: chp-toast-in 0.35s ease-out;
}
.chp-notices .woocommerce-message,
.chp-notices .woocommerce-error,
.chp-notices .woocommerce-info {
	pointer-events: auto;
	position: relative;
	margin: 0;
	background: #fff;
	border: 1px solid #dbe4ec;
	border-top: 3px solid #063564;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(6,53,100,0.20);
	padding: 14px 40px 14px 16px;
}
.chp-notices .chp-toast-close {
	/* Close button, added by homepage-cart.js. */
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #5b6b7a;
	cursor: pointer;
	padding: 0;
}
@keyframes chp-toast-in {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 768px) {
	.chp-notices {
		left: 0;
		right: 0;
		width: min(520px, calc(100vw - 32px));
		margin: 0 auto;
	}
}

/* Every box on this page sizes with border-box, so padding can
   never push a section wider than the screen. */
.chp-main,
.chp-main *,
.chp-main *::before,
.chp-main *::after {
	box-sizing: border-box;
}

/* This stylesheet only loads on the new homepage, so this only
   affects that page: never let it scroll sideways on phones.
   Both html and body need it — on iOS Safari, body alone does
   not stop the layout viewport widening when something overflows. */
html,
body {
	overflow-x: hidden;
}

/* There are TWO back-to-top buttons on this site, and both are
   hidden on this page only. The blue fish is the WPFront Scroll
   Top plugin's button (#wpfront-scroll-top-container; its JS adds
   .show after the page is scrolled 300px) — v1.0.7 hid the wrong
   element (#ast-scroll-top), which is why the fish still showed.
   Astra has its OWN plain-chevron button (#ast-scroll-top, a
   dark-navy circle with a white "^") — v1.0.8 removed the
   #ast-scroll-top rule as dead code, but the v1.0.13 check caught
   the chevron appearing after scrolling. Both are hidden here;
   both still show on the Shop and product pages. */
#wpfront-scroll-top-container,
#ast-scroll-top {
	display: none !important;
}

.chp-main img {
	max-width: 100%;
	height: auto;
}

/* Grid and flex children must be allowed to shrink below their
   content size, or a long word or a wide image can push the whole
   page wider than the screen. */
.chp-hero-inner > *,
.chp-feature-inner > *,
.chp-grid > *,
.chp-whatsapp-inner > * {
	min-width: 0;
}

/* Full-bleed navy/green sections: break out of the theme content
   container so the colour runs edge to edge. On phones the breakout
   is negative margins (the container's side padding is 20px; the
   -20px margins cancel it, and the inner padding below is 28px so
   the text sits clearly inside the edge). The 100vw version shifted
   the sections left on his iPhone and cut the text at the edge, so
   it is only used on wide screens, where the container hits its
   max-width and the breakout is needed (verified on desktop). */
.chp-bleed {
	width: auto;
	margin-left: -20px;
	margin-right: -20px;
}

@media (min-width: 1200px) {
	.chp-bleed {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* Buttons: brand orange, dark navy text. */
.chp-btn {
	display: inline-block;
	background: #F7941D;
	color: #063564;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.25;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	text-align: center;
}

.chp-btn:hover,
.chp-btn:focus {
	background: #e8850a;
	color: #063564;
	text-decoration: none;
}

/* 1. Hero */
.chp-hero {
	/* His own banner photo (assets/hero-banner.jpg): the Premium jar
	   on the coastal scene, bowl of shrimp in front — the jar is
	   baked into the photo, so there is no separate jar element.
	   Navy gradient: dark on the left where the headline sits,
	   lighter on the right where the jar sits. On phones the
	   background is biased right (75%) so the jar stays in frame
	   when the wide photo is cropped to phone width; on desktop
	   it is centred (see the 768px rule below). */
	background-image: linear-gradient(90deg, rgba(6, 53, 100, 0.88) 0%, rgba(6, 53, 100, 0.62) 55%, rgba(6, 53, 100, 0.30) 100%), url('hero-banner.jpg');
	background-size: cover;
	background-position: 75% center;
	color: #fff;
}

.chp-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	/* The copy sits in the left grid column, over the sea; the jar
	   (baked into the background photo) shows on the right. v1.0.24:
	   the header is now a white panel in the normal flow (not an
	   overlay), so the hero no longer needs the tall top padding
	   that used to clear the transparent header — just normal
	   section spacing. */
	padding: 48px 28px 40px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 12px;
}

/* Three-class selectors: the theme sizes headings (H1 64px, H2 48px,
   H3 24px) with selectors that beat a single class, so these need
   the extra weight to hold on phones. */
.chp-main .chp-hero .chp-hero-title {
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 12px;
	color: #fff;
}

.chp-hero-text {
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 18px;
	color: #dcebf7;
}

/* Blue wave swoosh under the headline, like his hero mockup. */
.chp-hero-wave {
	display: block;
	width: 170px;
	height: auto;
	margin: -2px 0 14px;
}

.chp-btn-hero {
	font-size: 14px;
	padding: 10px 18px;
}

@media (min-width: 768px) {
	.chp-hero {
		background-position: center 60%;
	}

	.chp-hero-inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 44px;
		/* Short banner, like the reference: the hero + trust row +
		   "Shop Our Bestsellers" heading must all be visible when
		   the page opens, without scrolling. Without the separate
		   jar element the hero would shrink to padding + copy
		   (about 300px), which crops the banner photo to a thin
		   slice — so the hero keeps a 480px min-height, which
		   still fits the above-the-fold target (480 + trust +
		   heading + strip + header is about 740px). */
		min-height: 480px;
		padding: 40px 24px 32px;
	}

	.chp-main .chp-hero .chp-hero-title {
		font-size: 50px;
	}

	.chp-hero-text {
		font-size: 17px;
		margin-bottom: 22px;
	}

	.chp-hero-wave {
		width: 210px;
		margin-bottom: 16px;
	}

	.chp-btn-hero {
		font-size: 16px;
		padding: 13px 28px;
	}
}

/* 2. Trust row */
.chp-trust {
	background: #f4f7fa;
	border-bottom: 1px solid #e6edf3;
}

.chp-trust-list {
	list-style: none;
	margin: 0 auto;
	padding: 14px 20px;
	max-width: 1200px;
	/* Mobile: all four across, icon above the text, like the mockup. */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.chp-trust-list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	font-size: 11px;
	line-height: 1.35;
	font-weight: 600;
	color: #063564;
}

.chp-trust-list svg {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	color: #063564;
}

@media (min-width: 768px) {
	.chp-trust-list {
		padding: 16px;
		gap: 12px;
	}

	.chp-trust-list li {
		flex-direction: row;
		text-align: left;
		justify-content: center;
		gap: 10px;
		font-size: 14px;
	}

	.chp-trust-list svg {
		width: 26px;
		height: 26px;
	}

	/* Dividers between the four points on desktop, like the mockup. */
	.chp-trust-list li + li {
		border-left: 1px solid #dbe4ec;
		padding-left: 16px;
	}
}

/* 3. Bestsellers */
.chp-bestsellers {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 20px 8px;
}

.chp-main .chp-bestsellers .chp-section-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 24px;
	color: #063564;
	margin: 0 0 20px;
}

.chp-main .chp-bestsellers .chp-section-title::before,
.chp-main .chp-bestsellers .chp-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #c9d6e2;
}

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

/* Bestseller carousel (v1.0.30, his request): the 8 cards are
   two pages of 4 — swipe left to load the bigger sizes. The
   track is a horizontal scroll-snap container; each page is
   one .chp-grid (2 columns on phones, 4 on desktop) exactly
   one track-width wide, so a swipe lands on the next page.
   The scrollbar is hidden (the dots show the page). The dots
   are buttons: tapping one scrolls to that page. */
.chp-carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* The pages sit flush against each other (no gap), so a
	   swipe moves exactly one page width. */
	gap: 0;
	/* Room above the cards for the badge pills: they sit 11px
	   above the card's top edge (see .chp-badge), and this
	   track's overflow would otherwise clip them — the
	   "BESTSELLER" text was cut off on his phone. */
	padding-top: 14px;
}
.chp-carousel-track::-webkit-scrollbar {
	display: none;
}
.chp-carousel-page {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.chp-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 16px 0 8px;
}
.chp-carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c9d6e2;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.chp-carousel-dot-active {
	background: #063564;
}

.chp-card {
	background: #fff;
	border: 1px solid #dbe4ec;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(6, 53, 100, 0.07);
	/* overflow visible (not hidden) so the badge pill can overlap
	   the card's top edge, like the brief's mockup. The photo keeps
	   the rounded corners through its own border-radius below. */
	overflow: visible;
	position: relative;
	/* Mobile: horizontal card like the mockup — photo left,
	   name/price right — and the Add to Cart button on its own
	   row spanning the full card width below. The button used to
	   sit inside the body, where the narrow body made "Add to
	   Cart" wrap to three lines; spanning the card gives it room
	   for one line. The rows are 1fr + auto: the top row grows
	   to fill the card (the cards in a row are all the same
	   height), so the button row stays exactly the button's
	   height — without the 1fr the stretch made the shortest
	   card's button (the combo) grow into a giant oval. */
	display: grid;
	grid-template-columns: 45% 1fr;
	grid-template-rows: 1fr auto;
}

.chp-card-image {
	position: relative;
	display: block;
	/* White, like the jar photos' own background, so the whole jar
	   shows on white instead of being cropped by the card. */
	background: #fff;
	overflow: hidden;
	/* Rounded on the card's left edge (the card itself is
	   overflow: visible so the badge can overlap its top edge,
	   so the photo carries its own corner radius). */
	border-radius: 14px 0 0 14px;
	flex: 0 0 45%;
}

.chp-card-image img {
	width: 100%;
	height: 100%;
	/* Contain, not cover: the full jar must be visible (on his
	   phone the cover crop cut the jar labels off at the sides). */
	object-fit: contain;
	display: block;
}

/* Small red pill badges at the card's top-left corner, like the
   brief's mockup ("Bestseller", "Sale!", "Combo Deal") — on the
   card itself, overlapping its top edge, not a diagonal ribbon
   across the photo. */
.chp-badge {
	position: absolute;
	top: -11px;
	left: 10px;
	z-index: 3;
	background: #d92b2b;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.chp-card-body {
	padding: 12px 14px 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.chp-main .chp-card .chp-card-name {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 2px;
	color: #063564;
}

.chp-card-name a {
	color: inherit;
	text-decoration: none;
}

.chp-card-malayalam {
	font-size: 12px;
	color: #5a6b7c;
	margin: 0 0 2px;
}

.chp-card-weight {
	font-size: 12px;
	color: #5a6b7c;
	margin: 0 0 8px;
	/* Weight lines stay to two lines so the cards keep the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.chp-card-price {
	/* 13px on phones (was 15px): the longest sale price,
	   "₹1,100.00" on the RTC 500g card, touched the card's
	   right edge at 15px — the text column is narrow on a
	   phone card. Desktop keeps 17px (see below). */
	font-size: 13px;
	font-weight: 800;
	color: #063564;
	margin: 0 0 8px;
}

.chp-card-price del {
	color: #8a97a5;
	font-weight: 400;
	margin-right: 6px;
}

.chp-card-price ins {
	text-decoration: none;
}

.chp-card .chp-btn {
	/* Full card width on its own grid row, so "Add to Cart"
	   (icon + divider + text) fits on one line. */
	grid-column: 1 / -1;
	margin: 4px 12px 12px;
	width: auto;
	padding: 9px 10px;
	font-size: 13px;
	white-space: nowrap;
	/* His orange gradient Add to Cart button: cart icon + divider
	   + white "Add to Cart", like the image he sent. Card buttons
	   only — the hero Shop Now and the banner Order Now buttons
	   keep the flat brand orange with dark navy text. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(180deg, #FF9E2C 0%, #FB7E0B 48%, #F26A00 100%);
	color: #fff;
	box-shadow: 0 4px 12px rgba(242, 106, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.chp-card .chp-btn:hover,
.chp-card .chp-btn:focus {
	background: linear-gradient(180deg, #F28C00 0%, #E56E00 48%, #D95F00 100%);
	color: #fff;
	text-decoration: none;
}

.chp-card .chp-out {
	grid-column: 1 / -1;
	margin: 4px 12px 12px;
	text-align: center;
}

.chp-cart-icon {
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
}

.chp-cart-div {
	width: 1px;
	height: 1.4em;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.7);
}

.chp-out {
	margin-top: auto;
	font-weight: 700;
	color: #b3261e;
}

@media (min-width: 900px) {
	.chp-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.chp-main .chp-bestsellers .chp-section-title {
		font-size: 32px;
	}

	/* Desktop: upright cards again — photo on top, details below,
	   button at the bottom. Back to flex (mobile uses grid). */
	.chp-card {
		display: flex;
		flex-direction: column;
	}

	.chp-card-image {
		flex: none;
		/* On desktop the photo is on top, so it carries the
		   card's top corners. */
		border-radius: 14px 14px 0 0;
	}

	.chp-card-image img {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.chp-card-body {
		padding: 14px 14px 0;
	}

	.chp-main .chp-card .chp-card-name {
		font-size: 16px;
	}

	.chp-card-malayalam {
		font-size: 14px;
	}

	.chp-card-weight {
		font-size: 13px;
	}

	.chp-card-price {
		font-size: 17px;
		margin-bottom: 12px;
	}

	.chp-card .chp-btn {
		padding: 11px 14px;
		font-size: 15px;
		/* Below the body now, with the body's side padding as
		   margins; the body's flex: 1 already pushes it to the
		   card bottom, so the buttons align across the row. */
		margin: 0 14px 16px;
	}

	.chp-card .chp-out {
		margin: 0 14px 16px;
	}
}

/* 4. Featured chutney powder banner */
.chp-feature {
	background-image: linear-gradient(90deg, rgba(6, 53, 100, 0.90) 0%, rgba(6, 53, 100, 0.65) 60%, rgba(6, 53, 100, 0.40) 100%), url('chutney-banner.jpg');
	background-size: cover;
	background-position: center;
	color: #fff;
	margin-top: 32px;
}

.chp-feature-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 28px;
	display: grid;
	/* Mobile: title left, checklist + button right, like the mockup. */
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: center;
}

.chp-main .chp-feature .chp-feature-title {
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
	color: #fff;
}

.chp-feature-malayalam {
	font-size: 14px;
	color: #dcebf7;
	margin: 6px 0 0;
}

.chp-checklist {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.chp-checklist li {
	position: relative;
	padding-left: 24px;
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.4;
}

.chp-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #F7941D;
	color: #063564;
	font-size: 11px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
}

.chp-feature-cta .chp-btn {
	font-size: 13px;
	padding: 10px 18px;
}

@media (min-width: 768px) {
	.chp-feature-inner {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 40px;
		padding: 44px 24px;
	}

	.chp-main .chp-feature .chp-feature-title {
		font-size: 34px;
	}

	.chp-feature-malayalam {
		font-size: 18px;
		margin-top: 6px;
	}

	.chp-checklist li {
		padding-left: 28px;
		margin-bottom: 8px;
		font-size: 15px;
	}

	.chp-checklist li::before {
		width: 20px;
		height: 20px;
		font-size: 13px;
		line-height: 20px;
	}

	.chp-feature-cta .chp-btn {
		font-size: 16px;
		padding: 13px 28px;
	}
}

/* 5. Customer reviews + "From the Arabian Sea" band, side by
   side like the brief's mockup (reviews left, sunset photo
   right); stacked on phones. The reviews are real ones he
   received on social media — Roy C Paul and Manikandan, each
   5 stars — shown in their exact words. */
.chp-reviews-sea {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 20px;
	display: grid;
	gap: 20px;
}

.chp-main .chp-reviews .chp-section-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 24px;
	color: #063564;
	margin: 0 0 20px;
}

.chp-main .chp-reviews .chp-section-title::before,
.chp-main .chp-reviews .chp-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #c9d6e2;
}

.chp-review-list {
	display: grid;
	gap: 16px;
}

.chp-review {
	background: #eef4fa;
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba(6, 53, 100, 0.06);
}

.chp-review-stars {
	color: #f5a623;
	font-size: 20px;
	letter-spacing: 2px;
	margin: 0 0 10px;
}

.chp-review-quote {
	font-size: 16px;
	line-height: 1.55;
	color: #063564;
	font-style: italic;
	margin: 0 0 12px;
}

.chp-review-name {
	font-size: 15px;
	font-weight: 800;
	color: #063564;
	margin: 0;
}

/* The sunset band is now a rounded panel in this row (not a
   full-width band), like the mockup. */
.chp-sea {
	background-image: linear-gradient(rgba(6, 53, 100, 0.35), rgba(6, 53, 100, 0.35)), url('sunset-nets.jpg');
	background-size: cover;
	background-position: center;
	color: #fff;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chp-sea-inner {
	padding: 48px 28px;
	text-align: center;
}

.chp-sea-title {
	font-size: 26px;
	line-height: 1.25;
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

@media (min-width: 900px) {
	.chp-reviews-sea {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.chp-main .chp-reviews .chp-section-title {
		font-size: 28px;
	}

	.chp-sea-title {
		font-size: 32px;
	}
}

/* 6. WhatsApp order bar */
.chp-whatsapp {
	background: #e6f4ea;
	border-top: 1px solid #cfe8d4;
}

.chp-whatsapp-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	text-align: center;
}

.chp-whatsapp-link {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: #075e54;
	font-weight: 800;
	font-size: 17px;
	text-decoration: none;
}

/* The phone number must never split across lines (on his phone it
   broke as "+91" / "9847160717"). The link may wrap between the
   label and the number, but the number itself stays whole. */
.chp-wa-num {
	white-space: nowrap;
}

.chp-whatsapp-link svg {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	fill: #25D366;
}

.chp-whatsapp-site {
	color: #063564;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid #F7941D;
	border-radius: 999px;
	padding: 6px 16px;
	background: #fff;
}

/* The Click to Chat floating WhatsApp bubble is hidden on this
   page only. It is not in the reference mockup, and it sat on the
   bottom-right of the screen, which is what forced the 76px right
   padding on the WhatsApp bar and kept the phone number off one
   line on phones. The WhatsApp order bar below is the contact
   action on this page. The bubble still shows on every other
   page. */
.ht-ctc-chat {
	display: none !important;
}

@media (max-width: 600px) {
	/* With the floating bubble hidden, the bar uses the full
	   width again, so the number fits on one line at 14px. The
	   link is no-wrap: it must stay on one line (the number was
	   landing on a second line), and at 14px it fits with room
	   to spare. */
	.chp-whatsapp-link {
		font-size: 14px;
		white-space: nowrap;
	}

	.chp-whatsapp-link svg {
		width: 22px;
		height: 22px;
	}
}

/* 7. Navy footer (the mockup's 3-column footer). Astra's footer
   (#colophon) is hidden on this page only — it only carries the
   copyright and the policy links, which this footer carries
   instead (Quick Links). The Fixups plugin's own policy-links bar
   (.chettuva-footer-policies + .chettuva-footer-business) is a
   separate wp_footer output, NOT inside #colophon, so it needs
   its own hide rule — the v1.0.11 check caught it still showing
   below the new footer. Both still show on every other page. */
#colophon,
.chettuva-footer-policies,
.chettuva-footer-business {
	display: none !important;
}

.chp-footer {
	background: #063564;
	color: #fff;
}

.chp-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 28px 16px;
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 10px;
	align-items: start;
}

/* min-width: 0 lets the grid columns shrink below their content;
   without it the longest no-wrap link ("Terms and Conditions")
   forced the grid wider than the screen and cut off
   "/chettuvafresh" at the right edge on phones. */
.chp-footer-brand,
.chp-footer-links,
.chp-footer-social {
	min-width: 0;
}

.chp-footer-logo {
	width: 72px;
	height: auto;
	display: block;
	margin-bottom: 6px;
}

.chp-footer-name {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	color: #fff;
}

.chp-footer-title {
	font-size: 13px;
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
}

.chp-footer-nav {
	font-size: 10px;
	line-height: 1.9;
	margin: 0;
}

.chp-footer-nav a {
	color: #dcebf7;
	text-decoration: none;
	white-space: nowrap;
}

.chp-footer-nav a + a::before {
	content: "|";
	margin: 0 5px;
	color: rgba(255, 255, 255, 0.35);
}

.chp-footer-handle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	margin: 0;
	color: #dcebf7;
}

.chp-footer-handle a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
}

.chp-footer-handle svg {
	width: 20px;
	height: 20px;
}

.chp-footer-copy {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 28px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 11px;
	color: #9db8cc;
	text-align: center;
}

@media (min-width: 768px) {
	.chp-footer-inner {
		padding: 36px 24px 24px;
		grid-template-columns: auto 1fr auto;
		gap: 40px;
	}

	.chp-footer-logo {
		width: 150px;
	}

	.chp-footer-name {
		font-size: 14px;
		max-width: 170px;
	}

	.chp-footer-title {
		font-size: 15px;
	}

	.chp-footer-nav {
		font-size: 14px;
	}

	.chp-footer-handle {
		font-size: 14px;
		gap: 8px;
	}

	.chp-footer-handle svg {
		width: 22px;
		height: 22px;
	}

	.chp-footer-copy {
		padding: 14px 24px 24px;
		font-size: 12px;
	}
}