/* ==========================================================================
   Chocolate & Tonk front-end enhancements
   Shipped and enqueued by the CxT Theme Setup plugin. Covers the rotating
   hero, the mega menus, the clickable collection tiles, the trust row, the
   Our Story section and the footer framing. Desktop breakpoint is 993px to
   match Kadence's own nav breakpoint.
   ========================================================================== */

:root {
	--cxt-olive: #9b9265;
	--cxt-olive-dark: #7f784f;
	--cxt-ink: #3a3b3e;
	--cxt-page: #eeeeee;
	--cxt-panel: #f1f0ec;
}

/* --------------------------------------------------------------------------
   1. Sticky header  (native CSS position:sticky, the way Shopify/Prestige does)
   The whole #masthead is sticky. A negative top equal to the announcement-row
   height (measured by cxt-frontend.js into --cxt-topbar-h) lets the top bar
   scroll off while the logo/nav row rests at the top.

   position:sticky normally fails here because the #wrapper ancestor has
   overflow:clip. The fix: clip only the horizontal axis (which is what stops
   the sideways white-space scroll) and leave the vertical axis visible, which
   is the only axis that disables vertical sticky. No JS scroll handler is
   involved, so there is nothing to toggle, stutter or drop in and out.
   -------------------------------------------------------------------------- */
#wrapper {
	/* !important is required: Kadence's global.min.css sets `#wrapper{overflow:clip}`
	   with the SAME specificity but loads AFTER this file, so without !important it
	   wins and re-clips the vertical axis, which silently kills the sticky header. */
	overflow-x: clip !important;
	overflow-y: visible !important;
}
#masthead.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: calc(-1 * var(--cxt-topbar-h, 0px));
	z-index: 999;
	background: var(--cxt-page);
}
/* Keep the pinned header clear of the WordPress admin bar when logged in. */
body.admin-bar #masthead.site-header {
	top: calc(32px - var(--cxt-topbar-h, 0px));
}
@media screen and (max-width: 782px) {
	body.admin-bar #masthead.site-header {
		top: calc(46px - var(--cxt-topbar-h, 0px));
	}
}

/* Use the full width of the header: logo hard left, cart hard right, nav
   spread out in the middle. */
@media (min-width: 993px) {
	.site-header-main-section-center .site-header-row-container-inner,
	.site-main-header-wrap .site-header-row-container-inner {
		max-width: none;
		padding-left: clamp(1.5rem, 3vw, 3.25rem);
		padding-right: clamp(1.5rem, 3vw, 3.25rem);
	}
	.header-navigation .menu > li.menu-item {
		margin: 0 clamp(0.4rem, 1vw, 1.1rem);
	}
	.header-navigation .menu > li.menu-item > a {
		letter-spacing: 0.16em;
	}
}

/* --------------------------------------------------------------------------
   1b. Announcement bar (rotating messages)
   -------------------------------------------------------------------------- */
.cxt-ann {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 1.4em;
}
.cxt-ann__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	pointer-events: none;
	padding: 0 2.5rem;
	white-space: nowrap;
}
.cxt-ann__msg.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.cxt-ann__msg a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Single-line scrolling ticker (mobile). Built by cxt-frontend.js which swaps
   the stacked messages for one continuous track (two identical copies) that
   translates by -50% for a seamless loop. */
.cxt-ann--marquee {
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cxt-ann--marquee .cxt-ann__track {
	display: inline-flex;
	flex: none;
	align-items: center;
	will-change: transform;
	animation: cxt-marquee 22s linear infinite;
}
.cxt-ann--marquee .cxt-ann__seq {
	display: inline-flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
}
.cxt-ann--marquee .cxt-ann__sep { padding: 0 1.3rem; opacity: 0.55; }
@keyframes cxt-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.cxt-ann--marquee .cxt-ann__track { animation: none; }
}
@media (max-width: 768px) {
	.cxt-ann__msg {
		white-space: normal;
		padding: 0 1rem;
		font-size: 10px;
		line-height: 1.3;
	}
}

/* --------------------------------------------------------------------------
   2. Mega menus (desktop only)
   Panels are injected into each category <li> by the JS. The list item is set
   to static so the absolutely-positioned panel resolves to the header row and
   spans its full width.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
	.site-header-row-container-inner { position: relative; }

	li.cxt-has-mega { position: static; }

	li.cxt-has-mega > a { position: relative; }
	li.cxt-has-mega:hover > a::after,
	li.cxt-has-mega:focus-within > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -16px;
		width: 34px;
		height: 2px;
		margin: 0 auto;
		background: var(--cxt-ink);
	}

	.cxt-mega {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--cxt-panel);
		border-top: 1px solid rgba(0, 0, 0, 0.07);
		box-shadow: 0 26px 42px -28px rgba(0, 0, 0, 0.32);
		padding: 2.6rem clamp(1.5rem, 4vw, 4rem) 3rem;
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	}
	li.cxt-has-mega:hover > .cxt-mega,
	li.cxt-has-mega:focus-within > .cxt-mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.cxt-mega__inner {
		max-width: 1280px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(230px, 0.9fr) 2fr;
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}

	.cxt-mega__label {
		margin: 0 0 1.3rem;
		font-size: 12px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #8b8a84;
	}

	.cxt-mega__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.cxt-mega__list.is-tall {
		column-count: 2;
		column-gap: 2rem;
	}
	.cxt-mega__list li { margin: 0; }
	.cxt-mega__list a {
		display: block;
		padding: 0.44rem 0;
		font-size: 15px;
		line-height: 1.4;
		color: var(--cxt-ink);
		text-decoration: none;
		transition: color 0.15s ease;
	}
	.cxt-mega__list a:hover { color: var(--cxt-olive); }

	.cxt-mega__features {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.2rem, 3vw, 2.2rem);
	}
	.cxt-mega__card { text-decoration: none; color: var(--cxt-ink); display: block; }
	.cxt-mega__thumb {
		position: relative;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		background: #e4e2da;
	}
	.cxt-mega__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.55s ease;
	}
	.cxt-mega__card:hover .cxt-mega__thumb img { transform: scale(1.05); }
	.cxt-mega__cap {
		display: block;
		margin-top: 0.85rem;
		text-align: center;
		font-size: 12px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--cxt-ink);
	}
}
@media (max-width: 992px) {
	.cxt-mega { display: none !important; }
}

/* Standard dropdowns (e.g. POLICIES): highlight the hovered item the same way
   the mega menu links respond, for a consistent, considered feel. */
.header-navigation .sub-menu li > a {
	transition: background 0.15s ease, color 0.15s ease;
}
.header-navigation .sub-menu li > a:hover,
.header-navigation .sub-menu li > a:focus,
.header-navigation .sub-menu li.current-menu-item > a {
	background: rgba(155, 146, 101, 0.18);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Rotating hero
   -------------------------------------------------------------------------- */
.cxt-hero {
	position: relative;
	width: 100%;
	height: clamp(460px, 86vh, 840px);
	overflow: hidden;
	background: #d9d4c6;
}
.cxt-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
	pointer-events: none;
}
.cxt-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.cxt-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);
}
/* Ken Burns: the active slide slowly drifts in, resetting each time it becomes
   active because the animation is only attached to .is-active. */
.cxt-hero__slide.is-active img {
	animation: cxtKenBurns 8s ease-out forwards;
	will-change: transform;
}
@keyframes cxtKenBurns {
	from { transform: scale(1.001); }
	to { transform: scale(1.09); }
}
.cxt-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34));
}
.cxt-hero__inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem 1.5rem;
}
.cxt-hero__title {
	color: #fff;
	max-width: 18ch;
	margin: 0 0 2.1rem;
	font-size: clamp(1.35rem, 2.9vw, 2.5rem);
	line-height: 1.35;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.cxt-hero__btn {
	display: inline-block;
	background: rgba(255, 255, 255, 0.96);
	color: var(--cxt-ink);
	padding: 0.95rem 2.8rem;
	border-radius: 2px;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}
.cxt-hero__btn:hover {
	background: var(--cxt-olive);
	color: #fff;
}
@media (prefers-reduced-motion: reduce) {
	.cxt-hero__slide.is-active img { animation: none; }
}
.cxt-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.cxt-hero__arrow:hover { background: rgba(255, 255, 255, 0.34); }
.cxt-hero__arrow--prev { left: clamp(0.75rem, 2vw, 1.75rem); }
.cxt-hero__arrow--next { right: clamp(0.75rem, 2vw, 1.75rem); }
.cxt-hero__dots {
	position: absolute;
	bottom: 1.4rem;
	right: 1.6rem;
	z-index: 3;
	display: flex;
	gap: 0.55rem;
}
.cxt-hero__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.85);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease;
}
.cxt-hero__dot.is-active { background: #fff; }
.cxt-hero__scroll {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50% 50% 0 0;
	background: var(--cxt-page);
	color: var(--cxt-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 18px;
}
@media (max-width: 768px) {
	.cxt-hero { height: 64vh; }
	.cxt-hero__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   4. Our Story two-column band
   -------------------------------------------------------------------------- */
.cxt-story.wp-block-columns {
	gap: 0 !important;
	margin-top: 0;
	margin-bottom: 0;
	align-items: stretch;
}
.cxt-story > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 6rem) clamp(1.75rem, 5vw, 5.5rem) !important;
}
.cxt-story > .wp-block-column:first-child p,
.cxt-story > .wp-block-column:first-child h6 {
	max-width: 46ch;
}
/* "Delivering across Gurugram, Delhi..." reads as part of the story: same size,
   weight and colour as the story paragraphs, not a small-caps heading. */
.cxt-story > .wp-block-column:first-child h6,
.cxt-story h6 {
	font-size: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--cxt-ink);
	line-height: 1.85;
	margin: 0 0 1.4rem;
}
.cxt-story > .wp-block-column:last-child {
	padding: 0 !important;
	min-height: 460px;
}
.cxt-story > .wp-block-column:last-child .wp-block-image,
.cxt-story > .wp-block-column:last-child figure {
	height: 100%;
	margin: 0;
}
.cxt-story > .wp-block-column:last-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 781px) {
	/* On phones the columns stack; show Suhasini's illustration ABOVE the text,
	   as on the Shopify mobile site (image is the last column, so reverse). */
	.cxt-story.wp-block-columns {
		flex-direction: column-reverse;
		/* A little breathing room between the hero carousel and the sketch.
		   !important is required: Gutenberg writes an inline style="margin-top:0"
		   on this block (block editor Dimensions setting), and inline styles
		   beat any external stylesheet rule regardless of specificity. */
		margin-top: 1.5rem !important;
	}
	.cxt-story > .wp-block-column:last-child { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   5. Clickable collection tiles with hover zoom
   -------------------------------------------------------------------------- */
.cxt-collections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.2vw, 2rem);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 2.2vw, 2rem);
}
.cxt-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	text-decoration: none;
}
.cxt-tile__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s ease;
}
.cxt-tile:hover .cxt-tile__img { transform: scale(1.07); }
.cxt-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	transition: background 0.3s ease;
}
.cxt-tile:hover::after { background: rgba(0, 0, 0, 0.36); }
.cxt-tile__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	text-align: center;
	padding: 1.5rem;
}
.cxt-tile__label {
	color: #fff;
	font-size: clamp(1.4rem, 2.6vw, 2.3rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
	margin: 0;
}
.cxt-tile__btn {
	display: inline-block;
	background: #fff;
	color: var(--cxt-ink);
	padding: 0.7rem 1.9rem;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}
.cxt-tile:hover .cxt-tile__btn {
	background: var(--cxt-olive);
	color: #fff;
}
@media (max-width: 768px) {
	.cxt-collections { grid-template-columns: 1fr; }
	.cxt-collections .cxt-tile:nth-child(5) { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------------------
   6. Trust row with icons
   -------------------------------------------------------------------------- */
.cxt-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	max-width: 1280px;
	margin: 6.5rem auto;
	padding: 0 2rem;
}
.cxt-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.6rem;
}
.cxt-trust__item img {
	width: 92px;
	height: 92px;
}
.cxt-trust__item span {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cxt-ink);
	line-height: 1.6;
	max-width: 22ch;
}
@media (max-width: 768px) {
	.cxt-trust { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; margin: 4rem auto; }
}

/* --------------------------------------------------------------------------
   7. Footer: one illustrated panel
   The illustration is painted on the whole .site-footer (image URL injected
   inline by the plugin) so the widgets AND the copyright line share a single
   continuous panel. The per-row backgrounds are cleared and the separate olive
   copyright bar is removed. Overlay is a single gradient on the footer, with
   all content lifted above it.
   -------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	background-size: cover !important;
	background-position: center 40% !important;
	background-repeat: no-repeat !important;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(40, 40, 32, 0.55), rgba(40, 40, 32, 0.72));
	pointer-events: none;
	z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }

/* Clear the per-row backgrounds and overlays set by the theme options, and
   drop the border that separated the old copyright bar. */
.site-footer .site-footer-row-container-inner,
.site-footer .site-top-footer-wrap,
.site-footer .site-bottom-footer-wrap,
.site-footer .site-footer-bottom-wrap {
	background: transparent !important;
	border: 0 !important;
}
.site-footer .site-top-footer-wrap::before { display: none !important; }
.site-footer .site-top-footer-wrap .site-footer-row-container-inner {
	padding-top: 4.5rem !important;
	padding-bottom: 2rem !important;
}
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
	padding-top: 0 !important;
	padding-bottom: 2.75rem !important;
}
@media (max-width: 768px) {
	/* Reframe the wide illustration onto Suhasini (she sits in the left third),
	   instead of the empty centre of the table, so the mobile footer reads as
	   "her, baking". Slightly lighter overlay so the sketch is visible. */
	.site-footer {
		background-position: 30% 42% !important;
		background-size: cover !important;
	}
	.site-footer::before {
		background: linear-gradient(rgba(40, 40, 32, 0.62), rgba(40, 40, 32, 0.82));
	}
	/* Round C&t stamp at the top of the footer, like the Shopify mobile footer.
	   The image ships in the plugin's assets folder next to this stylesheet. */
	.site-footer .site-top-footer-wrap .site-footer-row-container-inner::before {
		content: "";
		display: block;
		width: 84px;
		height: 84px;
		margin: 0 auto 0.4rem;
		background: url(stamp-6.png) center / contain no-repeat;
	}
}

/* Section headings on the homepage (Our Collections / Bestsellers). */
.home .wp-block-heading.has-text-align-center {
	letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   8. About Us (The Chocolate & Tonk Story)
   -------------------------------------------------------------------------- */
.cxt-about {
	max-width: 760px;
	margin: 0 auto;
	padding: 1rem 1.25rem 2rem;
}
.cxt-about__photo {
	margin: 0 0 2.5rem;
	text-align: center;
}
.cxt-about__photo img {
	width: 320px;
	max-width: 70%;
	height: auto;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
	aspect-ratio: 1 / 1;
}
.cxt-about__body p {
	margin: 0 0 1.4rem;
	line-height: 1.85;
	color: var(--cxt-ink);
}

/* --------------------------------------------------------------------------
   9. FAQ accordion
   -------------------------------------------------------------------------- */
.cxt-faq {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.cxt-faq__group { margin-bottom: 3.5rem; }
.cxt-faq__cat {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cxt-ink);
	margin: 0 0 0.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(58, 59, 62, 0.16);
}
.cxt-faq__item {
	border-bottom: 1px solid rgba(58, 59, 62, 0.12);
}
.cxt-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cxt-ink);
}
/* The theme fills all buttons with olive; neutralise it in every state so the
   question row never shows a coloured box (including when expanded/focused). */
.cxt-faq__q,
.cxt-faq__q:hover,
.cxt-faq__q:focus,
.cxt-faq__q:active,
.cxt-faq__q[aria-expanded="true"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	transform: none !important;
}
.cxt-faq__q:hover { color: var(--cxt-olive); }
.cxt-faq__q:focus-visible {
	outline: 2px solid rgba(155, 146, 101, 0.6) !important;
	outline-offset: 2px;
}
.cxt-faq__icon {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}
.cxt-faq__icon::before,
.cxt-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.cxt-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cxt-faq__q[aria-expanded="true"] .cxt-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}
.cxt-faq__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}
.cxt-faq__a-inner {
	padding: 0 0 1.6rem;
}
.cxt-faq__a-inner p {
	margin: 0;
	max-width: 68ch;
	line-height: 1.8;
	color: #5c5d60;
}

/* --------------------------------------------------------------------------
   10. Contact page (info + Say hi form)
   -------------------------------------------------------------------------- */
.cxt-contact {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.cxt-contact__h {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 1.4rem;
}
.cxt-contact__info p {
	line-height: 1.9;
	color: var(--cxt-ink);
	margin: 0 0 1.2rem;
}
.cxt-contact__info a { color: var(--cxt-olive); text-decoration: none; }
.cxt-contact__info a:hover { text-decoration: underline; }
.cxt-contact__form { position: relative; }
.cxt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cxt-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}
.cxt-contact__form input,
.cxt-contact__form textarea {
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba(58, 59, 62, 0.25);
	border-radius: 6px;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--cxt-ink);
}
.cxt-contact__form textarea { margin-bottom: 1.2rem; resize: vertical; }
.cxt-contact__form input:focus,
.cxt-contact__form textarea:focus {
	outline: none;
	border-color: var(--cxt-olive);
}
.cxt-contact__btn {
	width: 100%;
	padding: 1.05rem 1.5rem;
	background: var(--cxt-ink);
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background 0.2s ease;
}
.cxt-contact__btn:hover { background: var(--cxt-olive); }
.cxt-contact__notice {
	padding: 0.85rem 1.1rem;
	border-radius: 6px;
	margin: 0 0 1.2rem;
	font-size: 14px;
}
.cxt-contact__notice.is-ok { background: rgba(155, 146, 101, 0.16); color: var(--cxt-ink); }
.cxt-contact__notice.is-err { background: rgba(170, 60, 60, 0.12); color: #8a2b2b; }
@media (max-width: 768px) {
	.cxt-contact { grid-template-columns: 1fr; }
	.cxt-contact__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. MOBILE REBUILD (<= 992px) — match the Shopify mobile experience.
   Everything below only applies on phones/small tablets. Desktop is untouched.
   ========================================================================== */
@media (max-width: 992px) {

	/* ---- 11.1 Mobile header: hamburger left, wordmark dead-centre, icons right.
	   The header layout (popup-toggle | mobile-logo | search + cart) is set in
	   the plugin's Step 2. Here we guarantee the logo is optically centred and
	   the two icon clusters are balanced, like Shopify. ---- */
	/* The main row is a 3-column flex: hamburger pinned left, the two icons
	   pinned right (space-between), and the wordmark absolutely centred so it
	   sits dead-centre regardless of how wide the side clusters are. */
	.site-mobile-header-wrap .site-main-header-inner-wrap {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		position: relative;
		width: 100%;
	}
	.site-mobile-header-wrap .site-header-main-section-left,
	.site-mobile-header-wrap .site-header-main-section-right {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}
	.site-mobile-header-wrap .site-header-main-section-right {
		justify-content: flex-end;
		gap: 0.1rem;
	}
	.site-mobile-header-wrap .site-header-main-section-center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		width: auto;
		pointer-events: none;
	}
	.site-mobile-header-wrap .site-header-main-section-center a { pointer-events: auto; }
	/* Bigger, centred wordmark to match Shopify. */
	.site-mobile-header-wrap .site-header-main-section-center img { max-height: 46px; width: auto; }
	.site-mobile-header-wrap .header-cart-button,
	.site-mobile-header-wrap .search-toggle-open,
	.site-mobile-header-wrap .menu-toggle-open {
		padding: 0.3rem;
		/* Match the cart's darker ink colour: Kadence sets its own color
		   directly on .search-toggle-open/.menu-toggle-open (rgb(111,113,117),
		   its default gray) at the same specificity as this rule, and it loads
		   after ours, so !important is required or the icons stay two-tone. */
		color: var(--cxt-ink) !important;
	}
	/* All three icons now forced to the SAME explicit pixel size (22px), since
	   they previously came from three different sources: cart ~19.2px (viewBox
	   auto-scaled), hamburger 20px, search 21px (font-size driven). Bigger is
	   fine, consistency is the point. */
	.site-mobile-header-wrap .search-toggle-open { font-size: 22px; }
	.site-mobile-header-wrap .menu-toggle-open { font-size: 22px; }
	.site-mobile-header-wrap .header-cart-button svg,
	.site-mobile-header-wrap .search-toggle-open .kadence-search-svg,
	.site-mobile-header-wrap .search-toggle-open svg,
	.site-mobile-header-wrap .menu-toggle-open svg {
		width: 22px;
		height: 22px;
	}
	/* Mobile sticky is the SAME native #masthead sticky defined in section 1
	   (no separate mobile mechanism, nothing to fight). Just make sure the
	   pinned logo row keeps a solid background so content never shows through. */
	.site-mobile-header-wrap .site-main-header-wrap {
		background: var(--cxt-page);
	}

	/* ---- 11.2 Announcement bar: legible, centred, clamped to 2 lines so a long
	   message can never spill down into the logo row. The top bar height is set
	   to 58px on mobile in the plugin's Step 2 to give two lines room. ---- */
	.cxt-ann__msg {
		font-size: 9.5px;
		line-height: 1.3;
		letter-spacing: 0.05em;
		padding: 0 1rem;
		white-space: normal;
	}

	/* ---- 11.3 Hero: taller and more immersive, matching Shopify's near-full
	   screen slide. Arrows stay hidden; dots + scroll chevron remain. ---- */
	.cxt-hero {
		height: clamp(520px, 82vh, 760px);
	}
	.cxt-hero__title {
		font-size: clamp(1.5rem, 6.2vw, 2rem);
		line-height: 1.34;
		letter-spacing: 0.12em;
		margin-bottom: 1.9rem;
		max-width: 15ch;
	}
	.cxt-hero__btn {
		padding: 0.85rem 2.3rem;
		font-size: 11px;
		letter-spacing: 0.2em;
	}
	.cxt-hero__dots { bottom: 1.6rem; left: 50%; right: auto; transform: translateX(-50%); }
	.cxt-hero__scroll { width: 52px; height: 52px; }

	/* ---- 11.4 Homepage rhythm: generous, centred spacing like Shopify. ---- */
	.cxt-story > .wp-block-column:first-child {
		text-align: center;
		/* Tighter top padding pulls the story text up close under the sketch;
		   tighter bottom padding pulls the OUR STORY button closer to the
		   collections that follow. */
		padding: 0.5rem 1.5rem 0.75rem !important;
	}
	.cxt-story > .wp-block-column:first-child p,
	.cxt-story > .wp-block-column:first-child h6 {
		margin-left: auto;
		margin-right: auto;
	}
	/* Centre the OUR STORY button on mobile. */
	.cxt-story > .wp-block-column:first-child .wp-block-buttons {
		display: flex;
		justify-content: center;
	}
	.cxt-story > .wp-block-column:first-child .wp-block-button,
	.cxt-story > .wp-block-column:first-child .wp-block-button__link {
		margin-left: auto;
		margin-right: auto;
	}
	.home .wp-block-heading.has-text-align-center {
		font-size: clamp(1.5rem, 6vw, 2rem);
		letter-spacing: 0.12em;
		/* Less gap above/below "Our Collections" and "Bestsellers". !important is
		   required: Kadence's own default heading spacing (a fixed 64px top /
		   40px bottom on this theme) is set via margin-block-start/end, a
		   different CSS property to margin-top/bottom that is resolved later in
		   the cascade, so it silently wins over a plain margin: declaration.
		   Top bumped 0.6rem->1.2rem 2026-08: 0.6rem read as too tight above
		   "Bestsellers" specifically (this same rule also governs the gap above
		   "Our Collections", which grows slightly too as a result). */
		margin: 1.2rem 0 1.2rem !important;
	}
	/* Collection tiles already stack single-column; give them a taller, more
	   photographic crop on phones. */
	.cxt-collections .cxt-tile { aspect-ratio: 4 / 3; }
	.cxt-tile__label { font-size: clamp(1.5rem, 6vw, 2rem); }

	/* ---- 11.5 Trust row: clean 2x2 grid (chosen over the Shopify slider). ---- */
	.cxt-trust {
		grid-template-columns: 1fr 1fr;
		gap: 2.6rem 1.4rem;
		margin: 3.5rem auto;
	}
	.cxt-trust__item img { width: 74px; height: 74px; }
	.cxt-trust__item span { font-size: 12px; }

	/* ---- 11.6 Menu drawer: full-height Shopify-style panel, big uppercase
	   items with divider lines, injected HOME / OUR STORY, LOGIN pinned bottom.
	   Markup: #mobile-drawer > .drawer-inner > .drawer-header (X) + .drawer-content. */
	/* Anchor the panel to the LEFT (hamburger is on the left), leaving a sliver
	   of the page on the right, like Shopify. Overrides Kadence's right side. */
	#mobile-drawer .drawer-inner {
		background: var(--cxt-page);
		left: 0 !important;
		right: auto !important;
		width: min(86vw, 360px) !important;
	}
	#mobile-drawer .drawer-overlay { background: rgba(0, 0, 0, 0.4); }
	#mobile-drawer .drawer-header {
		padding: 1.1rem 1.3rem 0.4rem;
	}
	#mobile-drawer .menu-toggle-close .toggle-close-bar { background: var(--cxt-ink); }
	#mobile-drawer .drawer-content {
		padding: 0.4rem 0 1.5rem;
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 64px);
	}
	#mobile-drawer #mobile-menu {
		margin: 0;
		padding: 0 1.3rem;
		list-style: none;
	}
	#mobile-drawer #mobile-menu > li.menu-item {
		border-bottom: 1px solid rgba(58, 59, 62, 0.12);
	}
	/* Smaller, quieter type for a classier feel. Cover BOTH the normal items
	   (direct <a>) and parent items whose link Kadence nests inside
	   .drawer-nav-drop-wrap (e.g. POLICIES) so the label always shows. */
	#mobile-drawer #mobile-menu > li.menu-item > a,
	#mobile-drawer #mobile-menu > li.menu-item > .drawer-nav-drop-wrap > a {
		display: block;
		padding: 0.95rem 0;
		font-size: 12.5px;
		font-weight: 400;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--cxt-ink);
		text-decoration: none;
	}
	/* Parent row: label on the left, expand toggle on the right, both visible. */
	#mobile-drawer #mobile-menu > li.menu-item > .drawer-nav-drop-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#mobile-drawer #mobile-menu > li.menu-item > .drawer-nav-drop-wrap > a {
		flex: 1 1 auto;
	}
	#mobile-drawer #mobile-menu .drawer-sub-toggle {
		flex: 0 0 auto;
		color: var(--cxt-ink);
		background: none;
		border: 0;
		padding: 0.5rem;
	}
	#mobile-drawer #mobile-menu .sub-menu {
		margin: 0 0 0.4rem;
		padding-left: 0.4rem;
	}
	#mobile-drawer #mobile-menu .sub-menu a {
		padding: 0.6rem 0;
		font-size: 11.5px;
		letter-spacing: 0.08em;
		text-transform: none;
		color: #6a6b6e;
	}


	/* ---- 11.7 Collection (product archive): 2-up grid, centred captions,
	   matching Shopify's collection page. ---- */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
		margin: 0 auto;
	}
	.woocommerce ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		text-align: center;
	}
	.woocommerce ul.products li.product a img {
		margin-bottom: 0.9rem;
		border-radius: 2px;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1.4;
		padding: 0;
	}
	.woocommerce ul.products li.product .price {
		font-size: 13px;
		color: #7c7d80;
		letter-spacing: 0.06em;
	}
	/* Archive title centred like "THE CLASSICS". */
	.woocommerce-products-header__title,
	.woocommerce .woocommerce-products-header__title {
		text-align: center;
		font-size: clamp(1.6rem, 7vw, 2.1rem);
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	/* ---- 11.8 Product page: full-bleed square image, size pills, big dark
	   ADD TO CART, roomy sections. ---- */
	.single-product div.product .woocommerce-product-gallery {
		width: 100% !important;
		margin-bottom: 1.5rem;
	}
	.single-product div.product .product_title {
		font-size: clamp(1.5rem, 6.5vw, 2rem);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: 1.25;
	}
	.single-product div.product p.price,
	.single-product div.product span.price {
		font-size: 1.15rem;
		color: #7c7d80;
	}
	/* Variation swatches / select as pills. */
	.single-product .variations td,
	.single-product .variations th { display: block; width: 100%; text-align: left; }
	.single-product .variations label { text-transform: none; font-size: 15px; }
	/* Select sizes to its widest option by default (~254px), which reads as broken
	   next to the full-width ADD TO CART pill. Force it to match. */
	.single-product .variations select {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 3rem;
		margin: 0;
	}
	.single-product .variations .reset_variations { font-size: 13px; }
	.single-product form.cart .button,
	.single-product .single_add_to_cart_button {
		width: 100%;
		padding: 1.05rem 1.5rem;
		background: var(--cxt-ink);
		color: #fff;
		border-radius: 40px;
		font-size: 13px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
	.single-product form.cart .quantity input.qty {
		height: 3rem;
	}
	.single-product .woocommerce-tabs h2,
	.single-product .woocommerce-Tabs-panel h2 {
		font-size: 15px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	/* ---- 11.9 Cart + delivery picker: centred "CART", clean picker card with
	   the date tiles in a row, big CHECKOUT pill. ---- */
	.woocommerce-cart .entry-title,
	.woocommerce-cart-form + * .cart_totals h2 {
		text-align: center;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
	.woocommerce-cart table.cart img { width: 72px; }
	.woocommerce-cart .actions .button,
	.wc-proceed-to-checkout .checkout-button {
		width: 100%;
		border-radius: 40px;
		padding: 1.05rem 1.5rem;
		background: var(--cxt-ink) !important;
		color: #fff !important;
		font-size: 13px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
	/* The delivery picker (cxt-delivery-picker plugin) renders as #cxt-picker-box
	   with date and slot DROPDOWNS (#cxt_date, #cxt_slot), not a tile grid. Give
	   the card a little less padding on phones and make the selects full width
	   and easy to tap. */
	#cxt-picker-box {
		padding: 1.25rem;
	}
	#cxt-picker-box #cxt_date,
	#cxt-picker-box #cxt_slot {
		width: 100%;
		min-height: 3rem;
	}

	/* ---- 11.10 Footer: compact and clean on phones. ---- */
	.site-footer .site-footer-row-container-inner { text-align: center; }
	.site-footer .widget { margin-bottom: 1.2rem; }
	.site-footer .widget:last-child { margin-bottom: 0; }
	.site-footer .site-top-footer-wrap .site-footer-row-container-inner {
		padding-top: 2rem !important;
		/* Tighter: pulls the copyright line up close under the @chocolateandtonk
		   / Stay in Touch block. */
		padding-bottom: 0.35rem !important;
	}
	.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
		padding-top: 0 !important;
		padding-bottom: 1.6rem !important;
	}
	.site-footer .widget-title,
	.site-footer .widgettitle,
	.site-footer h2,
	.site-footer h3 { margin-bottom: 0.85rem; }
	/* "Stay in Touch" now sits mid-content (see populate_footer_widgets()), not
	   as the widget's actual first-child title, so it does NOT get Kadence's
	   zero-margin-top reset that real widget titles get. One extra line
	   (~22px at this 14px/1.6 footer type) of breathing room above it, so it
	   reads as a clear break from the delivery-info paragraph before it. */
	.site-footer .cxt-stay-heading { margin-top: 1.4rem !important; }
	.site-footer p { margin-bottom: 0.55rem; line-height: 1.6; }
	.site-footer .menu li,
	.site-footer li { margin-bottom: 0.15rem; }
}

/* Extra squeeze for the smallest phones. */
@media (max-width: 400px) {
	.cxt-hero__title { font-size: 1.45rem; letter-spacing: 0.1em; }
	.woocommerce ul.products { gap: 1.2rem 0.75rem; }
	.cxt-trust { gap: 2.2rem 1rem; }
}

/* 12. Allergen and storage accordions on the product page ---------------- */
.cxt-infoblocks{margin:1.75rem 0 0;border-top:1px solid rgba(58,59,62,.14)}
.cxt-infoblock{border-bottom:1px solid rgba(58,59,62,.14)}
.cxt-infoblock__summary{list-style:none;cursor:pointer;padding:1rem 0;font-family:Montserrat,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#3a3b3e;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cxt-infoblock__summary::-webkit-details-marker{display:none}
.cxt-infoblock__summary::after{content:"+";font-size:1.1rem;font-weight:400;line-height:1;color:#9b9265;transition:transform .2s ease}
.cxt-infoblock[open] .cxt-infoblock__summary::after{content:"\2013"}
.cxt-infoblock__summary:hover{color:#9b9265}
.cxt-infoblock__summary:focus-visible{outline:2px solid #9b9265;outline-offset:3px}
.cxt-infoblock__body{padding:0 0 1.1rem}
.cxt-infoblock__body p{margin:0 0 .6rem;font-size:.92rem;line-height:1.65;color:#3a3b3e}
.cxt-infoblock__body p:last-child{margin-bottom:0}
@media (max-width:600px){.cxt-infoblock__summary{padding:.9rem 0;font-size:.74rem}.cxt-infoblock__body p{font-size:.88rem}}

/* 13. Header search + cart icons -----------------------------------------
   Kadence ships a small filled magnifier and a filled paper bag. Replaced
   with the outlined 24px pair from the old Shopify Prestige header, drawn as
   CSS masks so they inherit currentColor and every hover state, and so a
   Kadence update cannot revert them. Applies to the desktop and mobile
   headers, both of which use these same classes. ---------------------- */
.site-header .header-cart-button .kadence-svg-iconset svg,
.site-header .search-toggle-open .kadence-svg-iconset svg{display:none}
.site-header .header-cart-button .kadence-svg-iconset,
.site-header .search-toggle-open .kadence-svg-iconset{
	display:inline-block;width:24px;height:24px;vertical-align:middle;
	background-color:currentColor;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:24px 24px;mask-size:24px 24px}
.site-header .header-cart-button .kadence-svg-iconset{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7h13l-4 9H7.5L5 3H1'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7h13l-4 9H7.5L5 3H1'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E")}
.site-header .search-toggle-open .kadence-svg-iconset{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-miterlimit='10'%3E%3Cpath d='M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z'/%3E%3Cpath d='M15.857 15.858 21 21.001' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-miterlimit='10'%3E%3Cpath d='M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z'/%3E%3Cpath d='M15.857 15.858 21 21.001' stroke-linecap='round'/%3E%3C/svg%3E")}

/* 14. Header search drawer + live results ---------------------------------
   Kadence's drawer is a near-black full-screen overlay with a bare input.
   Restyled to a light blurred backdrop with a panel near the top, and a live
   results dropdown fed by the WooCommerce Store API (see cxt-frontend.js).
   The drawer is a flex row by default, which is why the display overrides
   below are needed before the results panel will sit under the input. ----- */
#search-drawer .drawer-overlay{background:rgba(238,238,238,.82)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#search-drawer .drawer-inner{background:transparent!important;box-shadow:none!important;color:#3a3b3e!important}
#search-drawer .drawer-content{display:block!important;max-width:720px;margin:0 auto;padding:0 1.25rem;position:absolute;top:14vh;left:0;right:0}
#search-drawer .drawer-header{position:absolute;top:1.1rem;right:1.5rem}
#search-drawer .search-toggle-close{color:#3a3b3e!important;opacity:.55}
#search-drawer .search-toggle-close:hover,#search-drawer .search-toggle-close:focus{opacity:1;color:#9b9265!important}
#search-drawer .search-form{display:block!important;width:100%;position:relative}
#search-drawer .search-form label{display:block!important;width:100%;margin:0}
#search-drawer .search-field{display:block!important;width:100%!important;box-sizing:border-box;background:#fff!important;border:1px solid rgba(58,59,62,.16)!important;border-radius:2px!important;box-shadow:0 10px 40px rgba(58,59,62,.09)!important;color:#3a3b3e!important;font-size:1.05rem!important;padding:1.1rem 3.2rem 1.1rem 1.25rem!important;height:auto!important}
#search-drawer .search-field:focus{border-color:#9b9265!important;outline:none!important}
#search-drawer .search-field::placeholder{color:#9a9a9a!important}
#search-drawer .kadence-search-icon-wrap{position:absolute!important;right:1.1rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#9b9265}
#search-drawer .search-submit{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cxt-search-results{width:100%;box-sizing:border-box;margin:.6rem 0 0;background:#fff;border:1px solid rgba(58,59,62,.12);border-radius:2px;box-shadow:0 14px 44px rgba(58,59,62,.12);overflow:hidden;display:none;max-height:62vh;overflow-y:auto}
.cxt-search-results.is-open{display:block}
.cxt-sr-item{display:flex;align-items:center;gap:.9rem;padding:.7rem .95rem;text-decoration:none;color:#3a3b3e;border-bottom:1px solid rgba(58,59,62,.07)}
.cxt-sr-item:last-of-type{border-bottom:0}
.cxt-sr-item:hover,.cxt-sr-item:focus{background:#f6f5f1;color:#3a3b3e}
.cxt-sr-thumb{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:2px;background:#eee}
.cxt-sr-name{font-size:.93rem;line-height:1.3}
.cxt-sr-price{margin-left:auto;font-size:.86rem;color:#7d7d7d;white-space:nowrap;padding-left:.75rem}
.cxt-sr-foot{display:block;padding:.75rem .95rem;text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#9b9265;text-decoration:none;background:#faf9f6}
.cxt-sr-foot:hover,.cxt-sr-foot:focus{background:#f2f0e9;color:#3a3b3e}
.cxt-sr-empty{padding:1.1rem .95rem;font-size:.9rem;color:#7d7d7d;text-align:center}
@media (max-width:600px){#search-drawer .drawer-content{top:15vh;padding:0 1rem}#search-drawer .drawer-header{top:.85rem;right:1rem}#search-drawer .search-field{font-size:1rem!important;padding:.95rem 3rem .95rem 1rem!important}.cxt-sr-thumb{width:44px;height:44px;flex:0 0 44px}.cxt-sr-name{font-size:.88rem}}

/* ==========================================================================
   16. SHOP FLOW POLISH — product, cart, checkout, thank you
   Feedback round 19 Aug 2026. Scoped to the four shop-flow templates so the
   editorial spacing on About / FAQ / Contact / policies is left alone.
   ========================================================================== */

/* ---- 16.1 The empty band under the header ------------------------------
   Kadence gives the page-title hero a 200px min-height and then puts an 80px
   margin above the content card, so on cart/checkout the first useful pixel
   sat ~280px below the header. Halved, roughly. The min-height rules come
   from Kadence's own inline <style> blocks (kadence-global-inline-css and
   kadence-content-css), which print after this file, hence !important. ---- */
/* Applied to EVERY page with a title band, not just the shop flow: About, FAQ,
   Contact and the policy pages carried the same 200px void. The homepage is
   excluded because its content-area margin is deliberately 0 (full-bleed hero)
   and an !important rule here would override that. */
body:not(.home) .entry-hero.page-hero-section .entry-header,
body:not(.home) .entry-hero-container-inner .entry-header {
	min-height: 112px !important;
}
body:not(.home) .content-area {
	margin-top: 36px !important;
	margin-bottom: 56px !important;
}
/* The thank-you page has almost no content, so the card padding reads as more
   dead space than it does on a full checkout form. */
body.woocommerce-order-received .entry-content-wrap {
	padding-top: 28px;
}
body.woocommerce-order-received .woocommerce-order > :first-child {
	margin-top: 0;
}
@media (max-width: 992px) {
	body:not(.home) .entry-hero.page-hero-section .entry-header,
	body:not(.home) .entry-hero-container-inner .entry-header {
		min-height: 84px !important;
	}
	body:not(.home) .content-area {
		margin-top: 24px !important;
		margin-bottom: 40px !important;
	}
}

/* ---- 16.2 Delivery picker: radio and checkbox alignment ----------------
   woocommerce_form_field() emits the radio input and its label as inline
   siblings, so the dot floated above the cap height of the text and the two
   options ran together. A two-column grid pairs each input with its own label
   and gives the rows real vertical rhythm. ---- */
#cxt_method_field > .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.6rem 0.7rem;
	margin-top: 0.55rem;
}
#cxt_method_field > .woocommerce-input-wrapper input[type="radio"] {
	margin: 0;
}
#cxt_method_field > .woocommerce-input-wrapper label.radio {
	margin: 0;
	padding: 0;
	line-height: 1.35;
	font-weight: 400;
	cursor: pointer;
}
/* One asterisk on "Method" is enough; repeating it on both options read as
   though each individual option was separately mandatory. */
#cxt_method_field label.radio .required,
#cxt_method_field label.radio abbr.required {
	display: none;
}
/* Deliberately NOT flex: the label holds a text node, a link and the required
   asterisk, and flex turns each of those into its own item, which eats the
   normal word spacing between them. Inline layout with a nudged checkbox keeps
   "I agree to the Terms & Conditions" reading as one sentence. */
#cxt_tnc_field label.checkbox {
	display: block;
	margin: 0;
	line-height: 1.4;
	font-weight: 400;
	cursor: pointer;
}
#cxt_tnc_field label.checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0 0.5rem 0 0;
	vertical-align: -3px;
	accent-color: var(--cxt-olive);
	cursor: pointer;
}
#cxt_tnc_field label.checkbox .required {
	text-decoration: none;
	margin-left: 0.15rem;
}
#cxt-picker-box .form-row { margin-bottom: 1.1rem; }
#cxt-picker-box .form-row:last-child { margin-bottom: 0; }
#cxt-picker-box h3 { margin-top: 0; }

/* ---- 16.3 Order notes ---------------------------------------------------
   "Additional information" was a bare heading sitting outside the picker
   card, so its text started 32px to the left of everything above it. The
   heading goes (the field label already says what the box is for) and the
   field gets the same card treatment as the picker, so the two blocks line
   up down the left edge. ---- */
.woocommerce-additional-fields > h3 { display: none; }
.woocommerce-additional-fields__field-wrapper {
	background: #ffffff;
	/* Same border token the picker card uses, so the two read as one system. */
	border: 1px solid var(--global-palette7, rgba(58, 59, 62, 0.14));
	border-radius: 4px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}
.woocommerce-additional-fields__field-wrapper .form-row { margin-bottom: 0; }
.woocommerce-additional-fields__field-wrapper textarea { min-height: 96px; }

/* ---- 16.4 Cart page: pincode check + delivery charge -------------------
   Sits inside Cart totals, directly above Proceed to checkout, so the real
   delivery charge is visible before anyone commits to the checkout form. ---- */
.cxt-cart-pin {
	margin: 0 0 1.1rem;
	padding: 1rem 1.1rem;
	background: #faf9f6;
	border: 1px solid rgba(58, 59, 62, 0.12);
	border-radius: 4px;
	text-align: left;
}
.cxt-cart-pin__label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cxt-ink);
}
.cxt-cart-pin__row { display: flex; gap: 0.5rem; }
.cxt-cart-pin__row input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(58, 59, 62, 0.25);
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--cxt-ink);
}
.cxt-cart-pin__row input:focus { outline: none; border-color: var(--cxt-olive); }
.cxt-cart-pin__row button {
	flex: 0 0 auto;
	padding: 0 1.2rem;
	border: 0;
	border-radius: 3px;
	background: var(--cxt-ink);
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.cxt-cart-pin__row button:hover,
.cxt-cart-pin__row button:focus { background: var(--cxt-olive); }
.cxt-cart-pin__msg {
	margin: 0.65rem 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: #6a6b6e;
}
.cxt-cart-pin__msg .woocommerce-Price-amount { font-weight: 600; color: inherit; }
.cxt-cart-pin.is-good .cxt-cart-pin__msg { color: #4f6b3a; }
.cxt-cart-pin.is-bad .cxt-cart-pin__msg { color: #a33b3b; }
.cxt-cart-pin.is-busy { opacity: 0.6; }
.cxt-cart-pin__note {
	margin: 0.5rem 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #8b8c8f;
}

/* ---- 16.5 Cart actions row ---------------------------------------------
   The Update cart button is gone: quantities now save themselves (see
   initCartAutoUpdate in cxt-frontend.js). The button stays in the DOM because
   WooCommerce's own submit handler needs it, so it is moved off-screen rather
   than display:none'd, which would be ignored by some screen readers reading
   the form. The row itself collapses to nothing. ---- */
body.woocommerce-cart .woocommerce-cart-form .actions {
	padding: 0 !important;
	border: 0;
}
body.woocommerce-cart .woocommerce-cart-form .actions [name="update_cart"] {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   17. SHOP FLOW, ROUND 2 (19 Aug 2026)
   Distraction-free checkout, cleaner payment list, multi-line pincode
   messages, compact homepage story.
   ========================================================================== */

/* ---- 17.1 Multi-line pincode messages ---------------------------------
   zone_message() returns one <span> per line instead of a run-on sentence,
   so each idea gets its own row. ---- */
/* DIRECT children only. wc_price() wraps every amount in nested <span>s, so an
   unscoped `span { display:block }` broke "above  RS  5,000" onto three lines. */
.cxt-cart-pin__msg > span { display: block; margin-bottom: 0.35rem; }
.cxt-cart-pin__msg > span:last-child { margin-bottom: 0; }
.cxt-cart-pin__msg a { color: inherit; text-decoration: underline; }
.cxt-cart-pin.is-idle .cxt-cart-pin__msg > span:last-child { color: #8b8c8f; }
#cxt-zone-msg > span { display: block; }
#cxt-zone-msg > span + span { margin-top: 0.3rem; }
#cxt-zone-msg a { color: inherit; text-decoration: underline; }

/* ---- 17.2 "Inclusive of all taxes" ------------------------------------ */
tr.cxt-tax-note td {
	padding: 0.2rem 0 0 !important;
	border: 0 !important;
	font-size: 12px;
	color: #8b8c8f;
	text-align: right;
}

/* ---- 17.3 Distraction-free checkout ------------------------------------
   Header, announcement bar, mega menus, title band and footer are all removed
   on the checkout page only. NOT on the thank-you page: once the order is paid
   we want the customer back inside the normal site. A slim bar carries the
   wordmark and a route back to the cart. ---- */
body.cxt-lean-checkout #masthead,
body.cxt-lean-checkout .site-footer,
body.cxt-lean-checkout .entry-hero { display: none !important; }
body.cxt-lean-checkout { background: #ffffff; }
body.cxt-lean-checkout .content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.cxt-lean-checkout .entry-content-wrap {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.cxt-lean-checkout .content-container {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cxt-cobar { background: #ffffff; border-bottom: 1px solid rgba(58, 59, 62, 0.12); }
.cxt-cobar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.cxt-cobar__home { display: inline-flex; align-items: center; text-decoration: none; }
/* Kadence ships `.woocommerce-page img { height: auto }` from a stylesheet that
   loads after this one and outranks a single-class selector, so the wordmark
   rendered at its full 300x133. !important is the fix. */
.cxt-cobar .cxt-cobar__logo {
	display: block;
	height: 46px !important;
	width: auto !important;
	max-width: 240px;
	margin: 0;
}
.cxt-cobar__back {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cxt-ink);
	text-decoration: none;
	white-space: nowrap;
}
.cxt-cobar__back:hover, .cxt-cobar__back:focus { color: var(--cxt-olive); }

/* ---- 17.4 Checkout two-column ------------------------------------------
   Built by initCheckoutLayout(). WooCommerce and Kadence float
   #customer_details / #order_review into their own 50-50 layout, which fights
   the grid, so every float is unwound first. ---- */
body.cxt-lean-checkout #customer_details,
body.cxt-lean-checkout .col2-set .col-1,
body.cxt-lean-checkout .col2-set .col-2,
body.cxt-lean-checkout #order_review,
body.cxt-lean-checkout #order_review_heading {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
}
.cxt-co-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	gap: 0 clamp(2rem, 4vw, 4.5rem);
	align-items: start;
	padding: 2.5rem 0 4rem;
}
.cxt-co-grid > form.checkout { min-width: 0; }
.cxt-co-side { min-width: 0; position: sticky; top: 1.5rem; }
.cxt-co-side__inner {
	background: #f6f5f1;
	border: 1px solid rgba(58, 59, 62, 0.1);
	border-radius: 6px;
	padding: 1.5rem;
}
.cxt-co-side #order_review_heading {
	margin: 0 0 1rem !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cxt-ink);
}
.cxt-co-side #order_review { margin: 0; }
.cxt-co-side .shop_table { background: transparent; border: 0; margin: 0; width: 100%; }
.cxt-co-side .shop_table thead { display: none; }
.cxt-co-side .shop_table th,
.cxt-co-side .shop_table td {
	border: 0;
	border-bottom: 1px solid rgba(58, 59, 62, 0.09);
	padding: 0.75rem 0;
	font-size: 14px;
	background: transparent;
	vertical-align: middle;
}
.cxt-co-side .shop_table tfoot .order-total th,
.cxt-co-side .shop_table tfoot .order-total td {
	border-bottom: 0;
	font-size: 16px;
	padding-top: 0.9rem;
}
.cxt-co-side td.product-name {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	line-height: 1.35;
}
.cxt-co-thumb {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(58, 59, 62, 0.1);
}
.cxt-co-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.cxt-co-name { flex: 1 1 auto; min-width: 0; }
.cxt-co-side .product-quantity {
	display: inline-block;
	margin-left: 0.35rem;
	font-weight: 600;
	color: #8b8c8f;
}
.cxt-co-side td.product-total {
	white-space: nowrap;
	text-align: right;
	/* The sibling product-name cell is display:flex, which takes it out of the
	   table's row box; without matching the border explicitly the rule under a
	   line item stopped short of the price. */
	border-bottom: 1px solid rgba(58, 59, 62, 0.09);
}
.cxt-co-side tfoot td { text-align: right; }

/* Coupon, moved into the rail (it is its own <form>, which is why the rail
   sits outside form.checkout rather than inside it). */
.cxt-co-side .woocommerce-form-coupon-toggle { margin: 0 0 0.9rem; }
.cxt-co-side .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: #6a6b6e;
}
.cxt-co-side .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.cxt-co-side form.checkout_coupon { margin: 0 0 1rem; padding: 0; border: 0; background: transparent; }
.cxt-co-side form.checkout_coupon p { margin: 0 0 0.5rem; }
.cxt-co-side form.checkout_coupon .form-row {
	width: 100% !important;
	float: none !important;
	margin: 0 0 0.5rem;
	padding: 0;
}
.cxt-co-side form.checkout_coupon input[type="text"] { width: 100%; }

/* Left column: quiet section rules instead of heavy cards. */
body.cxt-lean-checkout .woocommerce-billing-fields > h3,
body.cxt-lean-checkout #cxt-picker-box h3 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
}
body.cxt-lean-checkout #cxt-picker-box,
body.cxt-lean-checkout .woocommerce-additional-fields__field-wrapper {
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(58, 59, 62, 0.12);
	border-radius: 0;
	padding: 1.75rem 0 0;
	margin: 1.75rem 0 0;
}
body.cxt-lean-checkout .form-row label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #5c5d60;
	margin-bottom: 0.3rem;
}
body.cxt-lean-checkout .form-row input.input-text,
body.cxt-lean-checkout .form-row textarea,
body.cxt-lean-checkout .form-row select {
	border-radius: 6px;
	border: 1px solid rgba(58, 59, 62, 0.22);
}

/* ---- 17.5 Payment methods ----------------------------------------------
   One bordered list. WooCommerce emits the radio and its label as siblings
   inside each <li>, so the row is laid out as a grid: radio, label, and the
   payment box spanning the full width underneath. ---- */
#payment {
	background: transparent !important;
	border-radius: 0;
	margin: 1.75rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid rgba(58, 59, 62, 0.12);
}
#payment::before {
	content: "Payment";
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
	color: var(--cxt-ink);
}
#payment ul.payment_methods {
	border: 1px solid rgba(58, 59, 62, 0.18);
	border-radius: 6px;
	padding: 0;
	margin: 0 0 1.25rem;
	background: #fff;
	overflow: hidden;
	list-style: none;
}
#payment ul.payment_methods li.wc_payment_method {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(58, 59, 62, 0.14);
	list-style: none;
}
#payment ul.payment_methods li.wc_payment_method:last-child { border-bottom: 0; }
/* Custom radio rather than the native control.
   Something in the theme sets `background-color: transparent` on inputs, and a
   native radio with an author background-color loses its checked dot in Chrome
   entirely - it paints an empty ring whether selected or not, which is exactly
   the "the radio buttons don't really show what's selected" problem. Drawing it
   ourselves takes the browser's rendering out of the equation.

   This applies to the DELIVERY METHOD radios only. WooCommerce's payment list
   uses a different pattern (see 17.5a below) where the real input is clipped
   for screen readers and the visible control is drawn on the label. */
#cxt_method_field > .woocommerce-input-wrapper input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(58, 59, 62, 0.38);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: none;
	cursor: pointer;
	flex: none;
	float: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
#cxt_method_field > .woocommerce-input-wrapper input[type="radio"]:checked {
	border-color: var(--cxt-olive);
	background: var(--cxt-olive);
	/* The inset white ring is what reads as the dot. */
	box-shadow: inset 0 0 0 3.5px #ffffff;
}
#cxt_method_field > .woocommerce-input-wrapper input[type="radio"]:focus-visible {
	outline: 2px solid var(--cxt-olive);
	outline-offset: 2px;
}

/* ---- 17.5a The payment radio ------------------------------------------
   WooCommerce hides the real radio from sight for screen-reader users
   (position:absolute + clip:rect(1px,1px,1px,1px)) and paints the visible
   control as the label's ::before. Styling the input therefore does nothing -
   which is why the button never looked selected. Leave the accessible input
   alone and dress the pseudo-element instead. */
#payment ul.payment_methods li.wc_payment_method > label::before {
	content: "" !important;
	display: inline-block !important;
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	margin: 0 !important;
	border: 1.5px solid rgba(58, 59, 62, 0.38) !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	transition: border-color 0.15s ease, background 0.15s ease;
}
#payment ul.payment_methods li.wc_payment_method.is-selected > label::before,
#payment ul.payment_methods li.wc_payment_method:has(> input:checked) > label::before {
	border-color: var(--cxt-olive) !important;
	background: radial-gradient(circle at 50% 50%, var(--cxt-olive) 0 4.5px, #ffffff 5px) !important;
}
#payment ul.payment_methods li.wc_payment_method > label {
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 1.05rem 1.1rem !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cxt-ink);
	cursor: pointer;
	/* Kadence paints its own grey behind payment labels, which fights the
	   selected-row tint. */
	background: transparent !important;
}
/* The chosen row is unmistakable: olive rule down the left, tinted bed.
   .is-selected is set by JS as a fallback for browsers without :has(). */
#payment ul.payment_methods li.wc_payment_method.is-selected,
#payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
	background: #f6f5f1;
	box-shadow: inset 3px 0 0 var(--cxt-olive);
}
#payment ul.payment_methods li.wc_payment_method label img {
	max-height: 22px;
	width: auto;
	margin: 0 0 0 auto;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	float: none;
	border-radius: 3px;
}
#payment ul.payment_methods li.wc_payment_method label img ~ img { margin-left: 0.35rem; }
#payment div.payment_box {
	background: transparent !important;
	margin: 0;
	padding: 0 1.1rem 1.15rem;
	border-radius: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #5c5d60;
}
#payment div.payment_box::before,
#payment div.payment_box::after { display: none !important; }
/* Gateways emit empty wrappers that otherwise render as stray bordered boxes. */
#payment div.payment_box > div:empty,
#payment div.payment_box > p:empty,
#payment ul.payment_methods > li:empty,
#payment .wc-stripe-upe-element:empty,
#payment div.payment_box:empty { display: none !important; }
#payment .place-order { padding: 0; margin: 0; }
#payment #place_order {
	width: 100%;
	padding: 1.05rem 1.5rem;
	border-radius: 6px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
#payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }
#payment .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.6;
	color: #8b8c8f;
	margin-bottom: 0.75rem;
}
#payment .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cxt-ink);
}
#payment label.woocommerce-form__label-for-checkbox {
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.45;
	margin: 0;
}
#payment .woocommerce-form__input-checkbox {
	width: 16px;
	height: 16px;
	margin: 0 0.5rem 0 0;
	vertical-align: -3px;
	accent-color: var(--cxt-olive);
}
.cxt-co-secure { margin: 0.85rem 0 0; text-align: center; font-size: 12px; color: #8b8c8f; }

/* ---- 17.6 Checkout on phones -------------------------------------------
   Summary first, so the customer sees what they are paying for before the
   form. Sticky is dropped; there is no room for it. ---- */
@media (max-width: 900px) {
	.cxt-co-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 1.5rem 0 2.5rem;
	}
	.cxt-co-side { position: static; order: -1; }
	.cxt-co-grid > form.checkout { order: 1; }
	.cxt-cobar__inner { padding: 0.9rem 1.1rem; }
	.cxt-cobar .cxt-cobar__logo { height: 38px !important; }
	.cxt-cobar__back { font-size: 10px; letter-spacing: 0.12em; }
	.cxt-co-thumb { flex: 0 0 46px; width: 46px; height: 46px; }
	body.cxt-lean-checkout .content-container { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---- 17.7 Homepage Our Story: compact ----------------------------------
   The text was capped at a 46-character measure inside an 832px column with
   90px of padding and 32px between paragraphs, which is why it read as sparse
   ribbons of type. Wider measure, tighter gaps, less padding. ---- */
.cxt-story > .wp-block-column:first-child {
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 3rem) !important;
}
.cxt-story p,
.cxt-story h6 {
	max-width: 62ch;
	margin-bottom: 0.8rem !important;
}
.cxt-story p:last-of-type { margin-bottom: 1.2rem !important; }
.cxt-story .wp-block-buttons { margin-top: 1.3rem; }

/* Stripe's Optimised Checkout renders its own bordered white card inside the
   payment box, which reads as a box inside a box inside a box. Flatten it. */
#payment .wc-upe-form,
#payment .wc-payment-form,
#payment .wc-stripe-upe-element {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}
#payment .woocommerce-SavedPaymentMethods { margin: 0; padding: 0; }