/* ==========================================================================
   Javed Pharmacy — main.css
   Hand-written, no framework. Variables are read from --jp-* custom
   properties injected by inc/design-tokens.php (see §6 of the brief) so
   values can later become admin-editable without touching this file.
   Breakpoints are explicit classes/media queries, not auto-fill hacks.
   ========================================================================== */

/* --------------------------------------------------------------------
   Breakpoints (reference, used in media queries throughout this file)
   small phone:  up to 480px
   phone:        481px - 767px
   tablet:       768px - 1023px
   desktop:      1024px+
   -------------------------------------------------------------------- */

/* Box-sizing reset — without this, form controls (button/input/select)
   use the browser's default border-box while every other element
   (including <a>) defaults to content-box, so two elements sharing the
   same class (e.g. .jp-btn on both a <button> and an <a>) end up
   different rendered sizes once padding/border are added. This is why
   "Add to Cart" (a <button>) and "View Details" (an <a>) previously
   didn't match — see .jp-product-card__actions .jp-btn. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: var(--jp-font-body-size, 16px);
	color: var(--jp-color-text, #1a1a1a);
	background: var(--jp-color-bg, #fff);
	line-height: 1.5;
}

/* Base link reset — without this, any <a> not covered by a more
   specific rule (buttons, nav items, etc.) falls back to the browser
   default blue/underline, which is wrong in dark contexts like the
   footer. Links inherit the surrounding text color; contexts that
   want an accent color/underline set it explicitly (e.g. footer menu
   items, category links). */
a {
	color: inherit;
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}

.jp-container {
	max-width: var(--jp-container-max-width, 1280px);
	margin: 0 auto;
	padding: 0 16px;
}

.jp-section {
	padding: var(--jp-section-spacing, 64px) 0;
}

.jp-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.jp-section__title {
	font-size: calc(1.75rem * var(--jp-font-heading-scale, 1));
	margin: 0 0 24px;
	font-weight: 700;
}
.jp-section__title--center {
	text-align: center;
}
.jp-section__title-accent {
	color: var(--jp-color-primary, #1c6b3f);
}
.jp-section__view-all {
	color: var(--jp-color-link, #1c6b3f);
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------------------
   Buttons — every button-zone button (§7) renders through this system
   so §6 style tokens apply consistently everywhere.
   -------------------------------------------------------------------- */
.jp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--jp-button-padding-y, 12px) var(--jp-button-padding-x, 24px);
	border-radius: var(--jp-button-radius, 6px);
	font-weight: var(--jp-button-font-weight, 600);
	font-size: 0.95rem;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
	white-space: nowrap;
	position: relative;
	overflow: hidden; /* clips the ripple span injected by micro-interactions.js */
}
/* Press feedback — a quick, subtle scale-down on tap/click so every
   button feels responsive to touch, not just to its eventual result.
   Guarded by prefers-reduced-motion at the bottom of this file. */
.jp-btn:active {
	transform: scale(.96);
}
@media (hover: hover) {
	.jp-btn--primary:hover,
	.jp-btn--secondary:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0,0,0,.12);
	}
}
/* Ripple: a short-lived circular fade injected at the click point by
   micro-interactions.js (position/size set inline via CSS custom
   properties), not a separate library. */
.jp-btn__ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	transform: scale(0);
	left: var(--jp-ripple-x, 50%);
	top: var(--jp-ripple-y, 50%);
	width: var(--jp-ripple-size, 100px);
	height: var(--jp-ripple-size, 100px);
	margin-left: calc(var(--jp-ripple-size, 100px) / -2);
	margin-top: calc(var(--jp-ripple-size, 100px) / -2);
	pointer-events: none;
	animation: jp-ripple .5s ease-out forwards;
}
.jp-btn--outline .jp-btn__ripple {
	background: rgba(28,107,63,.15);
}
@keyframes jp-ripple {
	to {
		transform: scale(1);
		opacity: 0;
	}
}
/* Brief confirmation state — toggled by cart.js right after a
   successful Add to Cart, instead of the button just silently
   returning to its normal label. */
.jp-btn--success {
	background: #1f8a4c !important;
	border-color: #1f8a4c !important;
	color: #fff !important;
	animation: jp-btn-success-pulse .4s ease;
}
@keyframes jp-btn-success-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.05); }
	100% { transform: scale(1); }
}
.jp-btn--primary {
	background: var(--jp-color-button, #1c6b3f);
	color: #fff;
}
.jp-btn--primary:hover {
	background: var(--jp-color-button-hover, #144f2e);
}
.jp-btn--secondary {
	background: var(--jp-color-accent, #f2b632);
	color: #1a1a1a;
}
.jp-btn--outline {
	background: transparent;
	border-color: var(--jp-color-primary, #1c6b3f);
	color: var(--jp-color-primary, #1c6b3f);
}
.jp-btn--outline:hover {
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
}
.jp-btn--block {
	display: flex;
	width: 100%;
}

/* --------------------------------------------------------------------
   Top bar + Header
   -------------------------------------------------------------------- */
.jp-topbar {
	background: var(--jp-color-primary-dark, #144f2e);
	color: #fff;
	font-size: 0.8rem;
}
.jp-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	gap: 16px;
}
.jp-topbar__left { display: flex; gap: 20px; flex-wrap: wrap; }
.jp-topbar__right { display: flex; gap: 12px; align-items: center; }
.jp-topbar__hours { white-space: nowrap; }
@media (max-width: 767px) {
	.jp-topbar__left span:not(:first-child) { display: none; }
}

.jp-header {
	background: var(--jp-color-header-bg, #fff);
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	position: sticky;
	top: 0;
	z-index: 40;
	transition: box-shadow .2s ease;
}
/* Toggled by assets/js/micro-interactions.js once the page scrolls —
   gives the sticky header a bit of depth/separation from content
   instead of a hard flat line the whole time. */
.jp-header.is-scrolled {
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.jp-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 16px;
}
.jp-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.jp-header__logo img { max-height: 40px; }
.jp-header__logo-text {
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--jp-color-primary, #1c6b3f);
	white-space: nowrap;
}
.jp-header__search {
	flex: 1;
	display: none;
	align-items: stretch;
	max-width: 480px;
	margin: 0 auto;
}
.jp-header__search input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-right: none;
	border-radius: 6px 0 0 6px;
}
.jp-header__search button[type="submit"] {
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	border: none;
	padding: 0 16px;
	border-radius: 0 6px 6px 0;
}
.jp-header__search-close {
	display: none;
}
.jp-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}
.jp-header__account {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}
.jp-header__search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	color: var(--jp-color-text, #1a1a1a);
	width: 40px;
	height: 40px;
}
.jp-header__cart {
	display: none;
	position: relative;
	background: none;
	border: none;
	color: var(--jp-color-text, #1a1a1a);
}
.jp-header__cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	font-size: 0.65rem;
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}
.jp-header__hamburger {
	background: none;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.jp-header__hamburger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--jp-color-text, #1a1a1a);
}

/* ---- Mobile search: the toggle button opens .jp-header__search as a
   dropdown overlay below the header (aria-hidden driven, no extra JS
   beyond the existing generic wirePanel() in assets/js/off-canvas.js). ---- */
@media (max-width: 767px) {
	.jp-header__search[aria-hidden="false"] {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-width: none;
		margin: 0;
		padding: 12px 16px;
		background: var(--jp-color-header-bg, #fff);
		border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
		box-shadow: 0 4px 8px rgba(0,0,0,.06);
		z-index: 45;
	}
	.jp-header__search[aria-hidden="false"] .jp-header__search-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		font-size: 1.4rem;
		line-height: 1;
		background: none;
		border: none;
		color: var(--jp-color-text, #1a1a1a);
	}
}

@media (min-width: 768px) {
	.jp-header__search { display: flex; }
	.jp-header__search-close { display: none !important; }
	.jp-header__account { display: flex; }
	.jp-header__search-toggle { display: none; }
	.jp-header__cart { display: flex; }
}

/* --------------------------------------------------------------------
   Off-canvas nav — bottom sheet, not a full-height side panel.

   A left/right side panel stretches to the full viewport height even
   when the menu itself is five short links, which is what was reading
   as "empty" on tall phone screens. A bottom sheet sized to its own
   content (max-height as a ceiling, not a fixed height) doesn't have
   that problem — it's only ever as tall as the menu actually is — and
   it sidesteps the left-vs-right question entirely since it opens from
   the bottom, centered, rather than from either edge.
   -------------------------------------------------------------------- */
.jp-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
}
.jp-offcanvas[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}
.jp-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1; /* sits below the panel — markup order alone put it on top, dimming the panel too */
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity .2s ease;
}
.jp-offcanvas[aria-hidden="false"] .jp-offcanvas__backdrop { opacity: 1; }
.jp-offcanvas__panel {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: min(420px, 100%);
	max-height: 80vh;
	background: #fff;
	border-radius: 20px 20px 0 0;
	transform: translate(-50%, 100%);
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	padding: 10px 24px 28px;
	overflow-y: auto;
}
.jp-offcanvas[aria-hidden="false"] .jp-offcanvas__panel { transform: translate(-50%, 0); }
.jp-offcanvas__grabber {
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--jp-color-border, #e2e2e2);
	margin: 0 auto 14px;
}
.jp-offcanvas__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--jp-color-bg-alt, #f7f8f6);
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-offcanvas__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jp-offcanvas__menu li {
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-offcanvas__menu li:last-child {
	border-bottom: none;
}
.jp-offcanvas__menu a {
	display: block;
	padding: 14px 4px;
	font-weight: 600;
}

/* --------------------------------------------------------------------
   Cart popup — a centered modal (not a side drawer), see
   template-parts/mini-cart.php + cart-items.php for the "just added"
   banner, item list, totals, actions and Suggested Products layout
   this wraps.
   -------------------------------------------------------------------- */
.jp-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.jp-cart-drawer[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}
.jp-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0,0,0,.6);
	opacity: 0;
	transition: opacity .2s ease;
}
.jp-cart-drawer[aria-hidden="false"] .jp-cart-drawer__backdrop { opacity: 1; }
.jp-cart-drawer__panel {
	position: relative;
	z-index: 2;
	width: min(600px, 100%);
	max-height: 88vh;
	background: #fff;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	transform: scale(.94);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}
.jp-cart-drawer[aria-hidden="false"] .jp-cart-drawer__panel {
	transform: scale(1);
	opacity: 1;
}
.jp-cart-drawer__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	border: none;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--jp-color-text-muted, #6b6b6b);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jp-cart-drawer__banner {
	margin: 0;
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 16px 44px;
	font-size: 0.95rem;
}
.jp-cart-drawer__title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 0.95rem;
	margin: 18px 0 4px;
}
.jp-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 4px 24px 24px;
}
.jp-cart-drawer__empty {
	color: var(--jp-color-text-muted, #6b6b6b);
	text-align: center;
	margin-top: 40px;
}
.jp-cart-drawer__actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.jp-cart-drawer__actions .jp-btn {
	flex: 1;
}

/* --------------------------------------------------------------------
   Hero

   Text overlays the image at every screen size (mobile and desktop),
   left-aligned, occupying exactly the left 50% — the right 50% stays
   a clear, unobstructed view of the image. Order top-to-bottom:
   heading, accent line, blurb, trust icons, buttons last.

   The height is driven by the TEXT, not picked per breakpoint: the
   text panel sits in normal document flow (not absolutely
   positioned), so its own content — heading + blurb + icons + button
   — decides how tall the box is. The image is absolutely positioned
   to fill that exact box via object-fit: cover. Result: shrink or
   lengthen the copy, or drop in a differently-shaped image, and the
   box resizes to fit automatically — no per-device height/font number
   to go stale, and the button always lands at the true bottom because
   there's never leftover space below it.
   -------------------------------------------------------------------- */
.jp-hero {
	position: relative;
	background: var(--jp-color-bg-alt, #f7f8f6);
	overflow: hidden;
}
.jp-hero__slide {
	display: none;
}
.jp-hero__slide.is-active {
	display: block;
}
.jp-hero__media {
	position: relative;
	width: 100%;
}
.jp-hero__bg-image,
.jp-hero__image-placeholder {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	background: var(--jp-color-border, #e2e2e2);
}
.jp-hero__text-overlay {
	position: relative;
	z-index: 1;
	width: 50%;
	padding: clamp(16px, 4vw, 48px) clamp(14px, 3.5vw, 48px);
	background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,0) 100%);
}
.jp-hero__text {
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.jp-hero__heading {
	font-size: clamp(0.95rem, 4.6vw, 2.75rem);
	line-height: 1.2;
	margin: 0 0 clamp(6px, 1.2vw, 14px);
}
.jp-hero__heading-accent {
	color: var(--jp-color-primary, #1c6b3f);
}
.jp-hero__blurb {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: clamp(0.68rem, 2vw, 0.95rem);
	line-height: 1.4;
	margin: 0 0 clamp(6px, 1.2vw, 14px);
}
.jp-hero__trust-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px clamp(8px, 1.6vw, 20px);
	margin: 0 0 clamp(10px, 2vw, 20px);
	font-size: clamp(0.6rem, 1.7vw, 0.85rem);
}
.jp-hero__trust-item::before {
	content: "\2713";
	color: var(--jp-color-primary, #1c6b3f);
	margin-right: 6px;
	font-weight: 700;
}
.jp-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jp-hero__nav {
	display: none;
}
.jp-hero__dots {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: flex;
	gap: 8px;
	z-index: 5;
}
.jp-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--jp-color-border, #e2e2e2);
	padding: 0;
}
.jp-hero__dot.is-active {
	background: var(--jp-color-primary, #1c6b3f);
}

@media (min-width: 1024px) {
	.jp-hero__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: none;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0,0,0,.15);
		font-size: 1.4rem;
		z-index: 5;
	}
	.jp-hero__nav--prev { left: 16px; }
	.jp-hero__nav--next { right: 16px; }
}

/* --------------------------------------------------------------------
   Horizontally-scrollable row (categories, featured products, testimonials)
   -------------------------------------------------------------------- */
.jp-scroll-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}
.jp-scroll-row::-webkit-scrollbar { height: 4px; }
.jp-scroll-row::-webkit-scrollbar-track { background: transparent; }
.jp-scroll-row::-webkit-scrollbar-thumb {
	background: var(--jp-color-border, #e2e2e2);
	opacity: .5;
	border-radius: 4px;
}
.jp-scroll-row {
	scrollbar-width: thin; /* Firefox — dims/thins the native bar to match the muted webkit thumb above */
	scrollbar-color: var(--jp-color-border, #e2e2e2) transparent;
}
.jp-scroll-row > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/* Wrapper injected by assets/js/scroll-row.js — adds prev/next arrows
   on top of the native scroll row. Only visible below 1024px; above
   that .jp-scroll-row becomes a static grid (below) and there's
   nothing to scroll.

   Background matches the page background exactly (var(--jp-color-bg))
   rather than a contrasting white card, then uses an inset shadow to
   read as a shallow recessed groove the cards sit inside — like a slot
   carved into the page — instead of a separate panel floating on top
   of it. */
.jp-scroll-row-wrap {
	position: relative;
	background: var(--jp-color-bg, #fff);
	border-radius: 16px;
	padding: 14px 10px 18px;
	box-shadow:
		inset 0 3px 10px rgba(0,0,0,.07),
		inset 0 -2px 5px rgba(0,0,0,.03);
}

.jp-scroll-row__nav {
	display: none;
}
@media (min-width: 768px) {
	.jp-scroll-row-wrap.is-scrollable .jp-scroll-row__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 1px solid var(--jp-color-border, #e2e2e2);
		background: #fff;
		box-shadow: 0 2px 8px rgba(0,0,0,.15);
		font-size: 1.3rem;
		line-height: 1;
		color: var(--jp-color-text, #1a1a1a);
		cursor: pointer;
		z-index: 3;
	}
	.jp-scroll-row__nav:disabled {
		opacity: 0;
		pointer-events: none;
	}
	.jp-scroll-row__nav--prev { left: -6px; }
	.jp-scroll-row__nav--next { right: -6px; }
}

@media (min-width: 1024px) {
	.jp-scroll-row {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		overflow: visible;
	}
	.jp-featured-products-section .jp-scroll-row { grid-template-columns: repeat(6, 1fr); }
	.jp-category-grid-section .jp-scroll-row { grid-template-columns: repeat(8, 1fr); }
	.jp-usecase-grid-section .jp-scroll-row { grid-template-columns: repeat(8, 1fr); }
	.jp-testimonials-section .jp-scroll-row { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------
   Card grid — wrapping responsive grid (as opposed to .jp-scroll-row's
   horizontal scroll), used by the "View All Brands" directory page.
   -------------------------------------------------------------------- */
.jp-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (min-width: 640px) {
	.jp-card-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1024px) {
	.jp-card-grid { grid-template-columns: repeat(8, 1fr); }
}
.jp-card-grid .jp-category-card { width: 100%; }

/* --------------------------------------------------------------------
   Category card
   -------------------------------------------------------------------- */
.jp-category-card {
	/* Smaller on mobile so ~3 are visible/peeking at once instead of 2
	   — matches the density the desktop grid already has. Grows back
	   up at the tablet breakpoint below, then goes width:100% inside
	   the desktop static grid (§ rule further down). */
	width: 96px;
	text-align: center;
}
@media (min-width: 480px) {
	.jp-category-card { width: 120px; }
}
.jp-category-card__image {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--jp-card-radius, 10px);
	overflow: hidden;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	margin-bottom: 8px;
	transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
	.jp-category-card:hover .jp-category-card__image {
		transform: translateY(-3px);
		box-shadow: 0 8px 18px rgba(0,0,0,.1);
	}
}
.jp-category-card__image img { width: 100%; height: 100%; object-fit: cover; }
.jp-category-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--jp-color-bg-alt, #f7f8f6);
}
.jp-category-card__name {
	font-size: 0.78rem;
	font-weight: 600;
}
@media (min-width: 480px) {
	.jp-category-card__name { font-size: 0.85rem; }
}
@media (min-width: 1024px) {
	/* Scoped to the homepage scroll-row only — at this breakpoint
	   .jp-scroll-row switches from flex-wrap to a fixed-column grid
	   (rule below), so its cards should fill their grid cell. Left
	   unscoped, this would also hit .jp-category-card reused on the
	   "View All Categories/Brands" directory grid (via
	   template-parts/directory-grid.php) and force every card there to
	   100% width too — one giant card per row, the exact "enlarged
	   card" bug being fixed. */
	.jp-scroll-row > .jp-category-card { width: 100%; }
}

/* --------------------------------------------------------------------
   Product card (§8.1 / §8.2 — fixed-height containers)
   -------------------------------------------------------------------- */
.jp-product-card {
	position: relative; /* anchors the wishlist heart (Phase 8) */
	/* Smaller on mobile so ~2.5–3 are visible/peeking in the homepade
	   carousels instead of ~2 — matches the category/brand card fix
	   above. Grows back up at the tablet breakpoint, then goes
	   width:100% inside grids (archive/wishlist — both override this
	   with a more specific selector, so this base rule only affects
	   the horizontal-scroll carousels). */
	width: 152px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: var(--jp-card-radius, 10px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 480px) {
	.jp-product-card { width: 200px; }
}
@media (hover: hover) {
	.jp-product-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 28px rgba(0,0,0,.1);
		border-color: transparent;
	}
}
@media (min-width: 1024px) {
	/* Scoped to the homepage scroll-row only — see the identical note
	   on .jp-category-card above for why this can't be left unscoped
	   (it would force every .jp-product-card on the "View All
	   Products" archive grid to 100% width too). */
	.jp-scroll-row > .jp-product-card { width: 100%; }
}
.jp-product-card__image {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1; /* Square preset default — §8.1 image aspect ratio */
	background: var(--jp-color-bg-alt, #f7f8f6);
}
.jp-product-card__image img { width: 100%; height: 100%; object-fit: contain; }
.jp-product-card__placeholder { display: block; width: 100%; height: 100%; }
.jp-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	color: #fff;
}
.jp-badge--sale { background: #d33; }

.jp-product-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 8px;
}
@media (min-width: 480px) {
	.jp-product-card__body { padding: 12px; }
}
.jp-product-card__title {
	font-size: 0.8rem;
	font-weight: 600;
	/* Fixed-height title container: 2-line clamp so an uneven-length
	   product name never pushes the button row out of alignment with
	   its neighbors (§8.2). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.15em;
	margin-bottom: 6px;
}
@media (min-width: 480px) {
	.jp-product-card__title { font-size: 0.9rem; min-height: 2.4em; margin-bottom: 8px; }
}
.jp-product-card__price {
	margin-bottom: 6px;
}
.jp-product-card__price-old {
	text-decoration: line-through;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.72rem;
	margin-right: 6px;
}
.jp-product-card__price-now {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--jp-color-primary, #1c6b3f);
}
@media (min-width: 480px) {
	.jp-product-card__price-old { font-size: 0.8rem; }
	.jp-product-card__price-now { font-size: 1rem; }
}
.jp-free-delivery-nudge {
	background: var(--jp-color-bg-alt, #f7f8f6);
	color: var(--jp-color-primary, #1c6b3f);
	font-size: 0.68rem;
	font-weight: 600;
	padding: 3px 6px;
	border-radius: 6px;
	margin: 0 0 8px;
	display: inline-block;
}
@media (min-width: 480px) {
	.jp-free-delivery-nudge { font-size: 0.75rem; padding: 4px 8px; }
}
.jp-free-delivery-nudge[hidden] { display: none; }
.jp-product-card__rating {
	color: var(--jp-color-accent, #f2b632);
	font-size: 0.8rem;
	margin-bottom: 8px;
}
@media (min-width: 480px) {
	.jp-product-card__rating { font-size: 0.85rem; margin-bottom: 10px; }
}
.jp-product-card__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto; /* button row always sits at the bottom (§8.2) */
}
.jp-product-card__actions .jp-btn {
	width: 100%;
	font-size: 0.72rem;
	padding: 6px 8px;
}
@media (min-width: 480px) {
	.jp-product-card__actions .jp-btn { font-size: 0.8rem; padding: 8px 12px; }
}

/* --------------------------------------------------------------------
   Offers banner — DEFAULT / FALLBACK state (no active Offer CPT entry
   marked "Show on Homepage Banner"). Deliberately kept as the original
   pre-event-system look: simple split gradient block, theme-options
   driven. This is what a client sees before creating their first Offer,
   or any time no Offer is currently active — never a blank section.
   -------------------------------------------------------------------- */
.jp-offers-banner {
	position: relative;
	background: linear-gradient(120deg, var(--jp-color-primary, #1c6b3f), var(--jp-color-primary-dark, #144f2e));
	color: #fff;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.jp-offers-banner__text {
	padding: 32px 24px;
}
.jp-offers-banner__eyebrow { opacity: .9; margin: 0 0 4px; }
.jp-offers-banner__heading { font-size: 1.6rem; margin: 0 0 20px; }
.jp-offers-banner__image img { width: 100%; display: block; }
.jp-offers-banner__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--jp-color-accent, #f2b632);
	color: #1a1a1a;
	font-weight: 800;
	font-size: 0.75rem;
	padding: 10px;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
@media (min-width: 768px) {
	.jp-offers-banner { flex-direction: row; align-items: center; }
	.jp-offers-banner__text { flex: 1; padding: 40px; }
	.jp-offers-banner__image { flex: 1; }
}

/* --------------------------------------------------------------------
   Offer Hero — EVENT state, shown when an Offer (CPT: jp_offer) is
   marked "Show on Homepage Banner" and currently active (see
   inc/cpt-offer.php: jp_get_active_banner_offer()). Same "content
   defines the box, image fills it via position:absolute + object-fit:
   cover" technique as .jp-hero (assets/css/main.css §hero) — full-bleed
   event image with editable heading/subheading/badge/button text
   overlaid on top, not a 50/50 split. Deliberately a separate class set
   from .jp-offers-banner (the no-offer fallback above) so the two never
   fight over the same rules.
   -------------------------------------------------------------------- */
.jp-offer-hero {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--jp-color-bg-alt, #f7f8f6);
}
.jp-offer-hero__media {
	position: relative;
	width: 100%;
}
.jp-offer-hero__bg-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	background: var(--jp-color-border, #e2e2e2);
}
.jp-offer-hero__overlay {
	position: relative;
	z-index: 1;
	width: 62%;
	padding: clamp(20px, 4vw, 48px);
	background: linear-gradient(90deg, rgba(15,20,17,.82) 0%, rgba(15,20,17,.62) 60%, rgba(15,20,17,0) 100%);
	color: #fff;
	min-height: clamp(220px, 32vw, 340px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.jp-offer-hero__badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--jp-color-accent, #f2b632);
	color: #1a1a1a;
	font-weight: 800;
	font-size: 0.7rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 12px;
}
.jp-offer-hero__eyebrow { opacity: .9; margin: 0 0 4px; font-size: 0.9rem; }
.jp-offer-hero__heading { font-size: clamp(1.3rem, 4vw, 2.2rem); line-height: 1.2; margin: 0 0 16px; color: #fff; }
.jp-offer-hero__gift {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--jp-color-accent, #f2b632);
	margin: 0 0 16px;
}
@media (max-width: 599px) {
	.jp-offer-hero__overlay { width: 100%; background: linear-gradient(180deg, rgba(15,20,17,.35) 0%, rgba(15,20,17,.85) 75%); }
}

/* --------------------------------------------------------------------
   Gift add-on badge — product card / single product, shown when an
   active Offer targeting that product/category/brand has a gift add-on
   configured (inc/cpt-offer.php: enable_gift). Small and secondary to
   the price, never replaces the Sale badge.
   -------------------------------------------------------------------- */
.jp-badge--gift {
	background: var(--jp-color-accent, #f2b632);
	color: #1a1a1a;
}
.jp-product-card__gift-note,
.jp-product-gift-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jp-color-primary, #1c6b3f);
	margin: 4px 0 0;
}

/* --------------------------------------------------------------------
   Why choose us
   -------------------------------------------------------------------- */
.jp-why-us-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.jp-why-us-card {
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: var(--jp-card-radius, 10px);
	padding: 20px 12px;
	text-align: center;
}
.jp-why-us-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--jp-color-bg-alt, #f7f8f6);
	color: var(--jp-color-primary, #1c6b3f);
	margin-bottom: 10px;
}
.jp-why-us-card__icon svg { width: 20px; height: 20px; }
.jp-why-us-card__icon img { width: 24px; height: 24px; object-fit: contain; }
.jp-why-us-card__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
}
@media (min-width: 768px) {
	.jp-why-us-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	/* auto-fit rather than a fixed count — entries are unlimited (Theme
	   Options → Homepage — Why Choose Us), so this wraps cleanly whether
	   there are 4 entries or 14, instead of stretching/squeezing to a
	   hardcoded 6 columns. */
	.jp-why-us-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------------------
   Brand strip
   -------------------------------------------------------------------- */
.jp-brand-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
}
.jp-brand-strip__logo { max-height: 32px; opacity: .8; }
.jp-brand-strip__text { font-weight: 700; color: var(--jp-color-text-muted, #6b6b6b); }

/* --------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------- */
.jp-testimonial-card {
	width: 280px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: var(--jp-card-radius, 10px);
	padding: 20px;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
	.jp-testimonial-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 22px rgba(0,0,0,.08);
	}
}
@media (min-width: 1024px) {
	.jp-testimonial-card { width: 100%; }
}
.jp-testimonial-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.jp-testimonial-card__photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.jp-testimonial-card__name { display: block; font-size: 0.9rem; }
.jp-testimonial-card__location { display: block; font-size: 0.75rem; color: var(--jp-color-text-muted, #6b6b6b); }
.jp-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	font-size: 0.95em;
	vertical-align: middle;
}
.jp-stars__track {
	color: var(--jp-color-border, #e2e2e2);
	white-space: nowrap;
	letter-spacing: 1px;
}
.jp-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: 1px;
	color: var(--jp-color-accent, #f2b632);
}
.jp-stars--empty {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.8rem;
	font-style: italic;
}
.jp-stars__value {
	margin-left: 6px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--jp-color-text, #222);
	vertical-align: middle;
}
.jp-stars__count {
	margin-left: 4px;
	font-size: 0.8em;
	color: var(--jp-color-text-muted, #6b6b6b);
	vertical-align: middle;
}

/* Click-to-expand truncated text (§8.3) — line-clamp classes toggled by
   assets/js/expand-toggle.js. Kept generic so it's reusable across
   product descriptions, testimonials, offer terms. */
.jp-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	cursor: pointer;
}
.jp-clamp-3.is-expanded {
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.jp-footer {
	background: var(--jp-color-footer-bg, #0f3d24);
	color: #fff;
}
.jp-footer__strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 24px 16px;
	border-bottom: 1px solid rgba(255,255,255,.1);
	background: rgba(255,255,255,.03);
}
.jp-footer__strip-item strong { display: block; font-size: 0.85rem; }
.jp-footer__strip-item span { font-size: 0.8rem; opacity: .8; }
.jp-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding: 40px 16px;
}
.jp-footer__col h3 { font-size: 1rem; margin: 0 0 12px; }
.jp-footer__logo { font-size: 1.2rem; font-weight: 800; display: block; margin-bottom: 8px; }
.jp-footer__col--brand p { font-size: 0.85rem; opacity: .8; }
.jp-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.jp-footer__social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	transition: transform .15s ease;
}
.jp-footer__social-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}
.jp-footer__social-btn svg,
.jp-footer__social-btn img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}
.jp-footer__menu { list-style: none; margin: 0; padding: 0; }
.jp-footer__menu li { margin-bottom: 8px; font-size: 0.85rem; }
.jp-footer__menu a { opacity: .85; }
.jp-footer__bottom {
	text-align: center;
	padding: 16px;
	font-size: 0.8rem;
	border-top: 1px solid rgba(255,255,255,.1);
	opacity: .8;
}

@media (min-width: 768px) {
	.jp-footer__strip { grid-template-columns: repeat(4, 1fr); }
	.jp-footer__columns { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------
   WhatsApp floating action button
   -------------------------------------------------------------------- */
.jp-whatsapp-fab {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 30;
}

/* Cart FAB — mobile only (desktop keeps the cart icon in the header,
   see .jp-header__cart's display rules above). Stacked directly above
   the WhatsApp button: same size, 12px gap between them. */
.jp-cart-fab {
	display: flex;
	position: fixed;
	bottom: 84px;
	right: 20px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	border: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 30;
}
.jp-cart-fab .jp-header__cart-count {
	top: -4px;
	right: -4px;
}
@media (min-width: 768px) {
	.jp-cart-fab { display: none; }
}

/* --------------------------------------------------------------------
   Basic content fallback (index.php)
   -------------------------------------------------------------------- */
.jp-basic-content { max-width: 760px; margin: 0 auto; }

/* --------------------------------------------------------------------
   Archive / catalog listing (archive-product.php)
   -------------------------------------------------------------------- */
.jp-archive__heading {
	font-size: 1.6rem;
	margin: 0 0 20px;
}

.jp-archive__toolbar-mobile {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}
.jp-archive__toolbar-mobile select,
.jp-archive__toolbar-desktop select {
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	padding: 8px 10px;
	background: #fff;
}
.jp-archive__toolbar-mobile { flex-wrap: wrap; }
/* Capped instead of flex:1 — filling 100% of the remaining toolbar
   width looked fine on a narrow phone but stretched into an oddly
   wide, mostly-empty control on anything wider (tablets, landscape,
   larger phones). Still flexes down on very narrow screens. */
.jp-archive__toolbar-mobile select { flex: 1 1 auto; max-width: 220px; }

.jp-archive__toolbar-desktop {
	display: none;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.jp-archive__count {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.9rem;
}

.jp-archive__layout {
	display: block;
}

/* Filter sidebar: off-canvas on mobile (same interaction language as the
   main off-canvas nav, but scoped to this page and toggled by
   assets/js/archive-filters.js rather than off-canvas.js), a normal
   static sidebar on desktop. */
.jp-archive__filters {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: min(300px, 85vw);
	background: #fff;
	z-index: 90;
	padding: 20px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform .25s ease;
}
.jp-archive__filters.is-open {
	transform: translateX(0);
}
.jp-archive__filters-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 85;
	display: none;
}
.jp-archive__filters.is-open ~ .jp-archive__filters-backdrop {
	display: block;
}
.jp-archive__filters-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.jp-archive__filters-close {
	background: none;
	border: none;
	font-size: 1.6rem;
}

.jp-filter-group {
	margin-bottom: 24px;
}
.jp-filter-group h3 {
	font-size: 0.95rem;
	margin: 0 0 10px;
}
.jp-filter-tree,
.jp-filter-tree__children,
.jp-filter-flat {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jp-filter-tree > li {
	margin-bottom: 8px;
}
.jp-filter-tree__children {
	margin: 6px 0 0 20px;
}
.jp-filter-tree label,
.jp-filter-flat label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	margin-bottom: 6px;
	cursor: pointer;
}

/* Reuses the exact homepage .jp-product-card sizing (same class, same
   fixed width/breakpoints as the Featured Products carousel) instead of
   stretching cards to fill a fixed column count — that stretching was
   the actual "2 huge cards" complaint. flex-wrap lets cards keep their
   natural homepage width and simply wrap to as many per row as fit. */
.jp-archive__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* when the last row doesn't divide evenly (e.g. 4 cards fit but there's leftover width short of a 5th), split the remainder on both sides instead of leaving it all stranded on the right */
	gap: 14px 10px;
}
@media (min-width: 420px) {
	.jp-archive__grid { gap: 16px 14px; }
}
.jp-archive__grid[aria-busy="true"] {
	opacity: .5;
}
.jp-archive__empty {
	width: 100%;
	text-align: center;
	color: var(--jp-color-text-muted, #6b6b6b);
	padding: 40px 0;
}

.jp-archive__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}
.jp-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	padding: 0 8px;
	background: #fff;
	font: inherit;
	color: var(--jp-color-text, #1a1a1a);
}
.jp-archive__pagination .page-numbers:disabled {
	opacity: .4;
	cursor: default;
}
.jp-archive__pagination .page-numbers.dots {
	border: none;
	background: none;
}
.jp-archive__pagination .current {
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	border-color: var(--jp-color-primary, #1c6b3f);
}

@media (min-width: 1024px) {
	.jp-archive__toolbar-mobile { display: none; }
	.jp-archive__toolbar-desktop { display: flex; }

	.jp-archive__layout {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: 32px;
		align-items: start;
	}
	.jp-archive__filters {
		position: static;
		width: auto;
		transform: none;
		padding: 0;
		z-index: auto;
	}
	.jp-archive__filters-header { display: none; }
	.jp-archive__filters-backdrop { display: none !important; }
	.jp-archive__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
}
@media (min-width: 1280px) {
	.jp-archive__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* --------------------------------------------------------------------
   Single product page
   -------------------------------------------------------------------- */
.jp-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-bottom: 20px;
}
.jp-breadcrumbs a { color: var(--jp-color-link, #1c6b3f); }
.jp-breadcrumbs__current { color: var(--jp-color-text, #1a1a1a); }

.jp-single-product__layout {
	display: block;
}

.jp-product-gallery__main {
	aspect-ratio: 1 / 1;
	/* Capped and centered so the square doesn't stretch edge-to-edge on
	   mobile — full-viewport-width squares made the image dominate the
	   whole first screen before any product info was visible. */
	max-width: 380px;
	max-height: 380px;
	margin: 0 auto 12px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: var(--jp-card-radius, 10px);
	overflow: hidden;
	background: var(--jp-color-bg-alt, #f7f8f6);
}
.jp-product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.jp-product-gallery__placeholder { width: 100%; height: 100%; }

.jp-product-gallery__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
}
.jp-product-gallery__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border: 2px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	padding: 2px;
}
.jp-product-gallery__thumb.is-active {
	border-color: var(--jp-color-primary, #1c6b3f);
}
.jp-product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

.jp-single-product__info {
	margin-top: 24px;
}
.jp-single-product__title {
	font-size: 1.5rem;
	margin: 0 0 8px;
}
.jp-single-product__sku {
	font-size: 0.8rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin: 0 0 8px;
}
.jp-single-product__rating { margin-bottom: 12px; }
.jp-single-product__price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--jp-color-primary, #1c6b3f);
	margin-bottom: 8px;
}
.jp-single-product__price-old {
	text-decoration: line-through;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 1rem;
	font-weight: 400;
	margin-right: 10px;
}
.jp-single-product__availability {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 16px;
}
.jp-single-product__availability--in_stock { background: #e6f4ea; color: #1c6b3f; }
.jp-single-product__availability--out_of_stock { background: #fbe6e6; color: #c0392b; }
.jp-single-product__availability--coming_soon { background: #fff4e0; color: #a8710a; }

.jp-single-product__short-desc {
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-bottom: 20px;
}

.jp-single-product__actions {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.jp-qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	overflow: hidden;
}
.jp-qty-stepper button {
	background: var(--jp-color-bg-alt, #f7f8f6);
	border: none;
	width: 36px;
	height: 44px;
	font-size: 1.1rem;
}
.jp-qty-stepper input {
	width: 44px;
	height: 44px;
	border: none;
	border-left: 1px solid var(--jp-color-border, #e2e2e2);
	border-right: 1px solid var(--jp-color-border, #e2e2e2);
	text-align: center;
	-moz-appearance: textfield;
}
.jp-single-product__actions .jp-btn {
	flex: 1;
	min-width: 160px;
}
.jp-single-product__whatsapp {
	display: inline-block;
	color: #25D366;
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 24px;
}

.jp-single-product__tab-buttons {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	margin: 32px 0 20px;
}
.jp-single-product__tab-buttons button {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 4px;
	margin-right: 20px;
	font-weight: 600;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-single-product__tab-buttons button.is-active {
	color: var(--jp-color-primary, #1c6b3f);
	border-bottom-color: var(--jp-color-primary, #1c6b3f);
}
.jp-single-product__tab-panel { display: none; }
.jp-single-product__tab-panel.is-active { display: block; }

/* Reviews: independent section, always visible (not a tab panel — see
   single-product.php for why). Same top spacing the tab block used to
   have, plus a top border to read as its own section instead of just
   floating text under the tabs. */
.jp-single-product__reviews-section {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-single-product__reviews-heading {
	font-size: 1.2rem;
	margin: 0 0 16px;
}

.jp-clamp-6 {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jp-clamp-6.is-expanded {
	-webkit-line-clamp: unset;
	overflow: visible;
}
.jp-read-more-btn {
	background: none;
	border: none;
	color: var(--jp-color-link, #1c6b3f);
	font-weight: 600;
	padding: 8px 0;
}

.jp-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.jp-specs-table th,
.jp-specs-table td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-specs-table th {
	width: 40%;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-weight: 600;
}

.jp-related-products { padding-top: 0; }

/* --------------------------------------------------------------------
   Product reviews (single product page "Reviews" tab)
   -------------------------------------------------------------------- */
.jp-reviews__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-reviews__summary-score {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--jp-color-text, #1a1a1a);
}
.jp-reviews__summary-count {
	font-size: 0.85rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin: 4px 0 0;
}

.jp-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 28px;
}
.jp-reviews__empty {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.9rem;
}
.jp-review-card {
	display: flex;
	gap: 12px;
}
.jp-review-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}
.jp-review-card__body { flex: 1; min-width: 0; }
.jp-review-card__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 2px;
}
.jp-review-card__author { font-weight: 600; font-size: 0.9rem; }
.jp-review-card__date { font-size: 0.75rem; color: var(--jp-color-text-muted, #6b6b6b); }
.jp-review-card__content {
	font-size: 0.9rem;
	margin: 6px 0 0;
	line-height: 1.6;
	word-wrap: break-word;
}

/* "My Reviews" panel on My Account (§ My Reviews) — same building
   blocks as the public .jp-review-card, but stacked (no avatar) and
   with its own inline edit form toggled per-card. */
.jp-my-reviews {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.jp-review-card--mine {
	display: block;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-review-card--mine:last-child { border-bottom: none; padding-bottom: 0; }
.jp-review-card--mine .jp-review-card__author {
	color: var(--jp-color-primary, #1c6b3f);
	text-decoration: none;
}
.jp-review-card--mine .jp-review-card__author:hover { text-decoration: underline; }
.jp-review-card__actions {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}
.jp-badge--pending {
	background: #f2b632;
	color: #1a1a1a;
	display: inline-block;
	margin: 4px 0;
}
.jp-review-form--edit {
	margin-top: 12px;
	max-width: 480px;
}

.jp-review-form-wrap {
	padding-top: 20px;
	border-top: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-review-form__title { font-size: 1.05rem; margin: 0 0 14px; }
.jp-review-form__login-prompt,
.jp-review-form__already {
	font-size: 0.9rem;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-review-form__login-prompt a { color: var(--jp-color-primary, #1c6b3f); text-decoration: underline; }
.jp-review-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 480px;
}
.jp-review-form__error {
	color: #c0392b;
	font-size: 0.85rem;
	margin: 0;
}
.jp-review-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	font: inherit;
	resize: vertical;
}

/* Interactive star-rating input (write-a-review form). Radios reversed
   in markup (5..1) with the row itself reversed via flex-direction, so
   the natural ~sibling CSS selector can light up the hovered/checked
   star AND every star to its (visual) left — the classic star-rating
   trick, done with real radio inputs so it's keyboard-accessible and
   works with a tap on mobile, not just mouse hover. */
.jp-star-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
}
.jp-star-input input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.jp-star-input label {
	font-size: 2rem;
	line-height: 1;
	color: var(--jp-color-border, #e2e2e2);
	cursor: pointer;
	/* Larger-than-visual tap target for comfortable use on small
	   screens, since the star glyph itself is narrower than 44px. */
	padding: 6px 2px;
	transition: color .1s ease;
}
.jp-star-input input:checked ~ label,
.jp-star-input label:hover,
.jp-star-input label:hover ~ label {
	color: var(--jp-color-accent, #f2b632);
}
.jp-star-input input:focus-visible + label {
	outline: 2px solid var(--jp-color-primary, #1c6b3f);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (min-width: 1024px) {
	.jp-single-product__layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
	.jp-single-product__info { margin-top: 0; }
	/* Cap removed here — the gallery has its own dedicated column next
	   to product info, so it should fill it rather than stay small. */
	.jp-product-gallery__main { max-width: 100%; max-height: none; }
}

/* --------------------------------------------------------------------
   Cart drawer contents (template-parts/cart-items.php)
   -------------------------------------------------------------------- */
.jp-cart-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jp-cart-item {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-cart-item__image {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--jp-color-bg-alt, #f7f8f6);
	display: block;
}
.jp-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.jp-cart-item__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.jp-cart-item__title {
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.jp-cart-item__price {
	font-size: 0.8rem;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-cart-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
}
.jp-qty-stepper--sm button {
	width: 28px;
	height: 32px;
	font-size: 0.95rem;
}
.jp-qty-stepper--sm input {
	width: 34px;
	height: 32px;
	font-size: 0.85rem;
}
.jp-cart-item__remove {
	background: none;
	border: none;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 1.2rem;
	line-height: 1;
	padding: 4px 8px;
}
.jp-cart-item__remove:hover {
	color: #c0392b;
}
.jp-cart-item__line-total {
	flex: 0 0 auto;
	align-self: center;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}

.jp-cart-totals {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-cart-totals__free-delivery-hint {
	background: var(--jp-color-bg-alt, #f7f8f6);
	color: var(--jp-color-primary, #1c6b3f);
	font-size: 0.8rem;
	padding: 8px 10px;
	border-radius: 6px;
	margin: 0 0 12px;
}
.jp-cart-totals__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	margin-bottom: 6px;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-cart-totals__row--total {
	color: var(--jp-color-text, #1a1a1a);
	font-weight: 700;
	font-size: 1.05rem;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--jp-color-border, #e2e2e2);
}

.jp-btn.is-disabled {
	pointer-events: none;
	opacity: .5;
}

.jp-cart-suggested {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-cart-suggested__title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 0.85rem;
	margin: 0 0 14px;
	color: var(--jp-color-text-muted, #6b6b6b);
}
.jp-cart-suggested__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.jp-cart-suggested__grid .jp-product-card {
	width: 100%;
}
@media (min-width: 480px) {
	.jp-cart-suggested__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------
   Toast notification (assets/js/cart.js)
   -------------------------------------------------------------------- */
.jp-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	background: #1a1a1a;
	color: #fff;
	font-size: 0.85rem;
	padding: 10px 18px;
	border-radius: 999px;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 200;
	pointer-events: none;
}
.jp-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------
   Checkout (page-checkout.php) + Order Received (page-order-received.php)
   Phase 7. Order summary panel is JS-filled (see assets/js/checkout.js)
   and reuses .jp-cart-items / .jp-cart-totals rules above — same cache-
   safety reasoning as the cart drawer, see inc/cart.php.
   -------------------------------------------------------------------- */

.jp-checkout__title {
	font-size: calc(1.75rem * var(--jp-font-heading-scale, 1));
	margin-bottom: 24px;
}

.jp-checkout__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 1024px) {
	.jp-checkout__layout {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

.jp-checkout__section {
	margin-bottom: 28px;
}
.jp-checkout__section h2 {
	font-size: 1.1rem;
	margin-bottom: 14px;
}

.jp-form-field {
	display: block;
	margin-bottom: 14px;
}
.jp-form-field span {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 4px;
}
.jp-form-field input[type="text"],
.jp-form-field input[type="tel"],
.jp-form-field input[type="email"],
.jp-form-field input[type="file"],
.jp-form-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
}
.jp-form-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.jp-checkout__payment-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	cursor: pointer;
}

.jp-checkout__bank-details,
.jp-checkout__cod-note,
.jp-checkout__whatsapp-note {
	background: #f7f7f5;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 10px 0 18px;
}
.jp-checkout__bank-info {
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.jp-checkout__bank-info li {
	margin-bottom: 4px;
	font-size: 0.9rem;
}
.jp-checkout__payment-note {
	font-size: 0.85rem;
	opacity: .8;
	margin-top: 10px;
}
.jp-checkout__urgent-whatsapp {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: #25D366;
	font-weight: 600;
	font-size: 0.85rem;
}
.jp-checkout__urgent-whatsapp svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.jp-checkout__error {
	background: #f8d7da;
	color: #721c24;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}

.jp-checkout__summary {
	background: #f7f7f5;
	border-radius: 10px;
	padding: 20px;
}
.jp-checkout__summary h2 {
	font-size: 1.1rem;
	margin-bottom: 14px;
}

/* Order Received */
.jp-order-received__not-found,
.jp-order-received__confirmed {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.jp-order-received__summary {
	text-align: left;
	background: #f7f7f5;
	border-radius: 10px;
	padding: 20px;
	margin: 24px 0;
}
.jp-order-received__items {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.jp-order-received__items li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	font-size: 0.9rem;
}
.jp-order-received__totals div {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	padding: 3px 0;
}
.jp-order-received__totals-final {
	font-weight: 700;
	font-size: 1.05rem;
	border-top: 1px dashed var(--jp-color-border, #e2e2e2);
	margin-top: 6px;
	padding-top: 8px;
}

/* ==========================================================================
   Phase 8 — Customer Accounts
   Login/Register/Forgot-Password (page-login.php), My Account dashboard
   (page-my-account.php), and the site-wide wishlist heart (product-card.php
   / single-product.php). Reuses .jp-form-field, .jp-btn, .jp-badge etc.
   from the Checkout section above rather than redefining them.
   ========================================================================== */

/* --------------------------------------------------------------------
   Wishlist heart
   -------------------------------------------------------------------- */
.jp-wishlist-heart {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--jp-color-text-muted, #6b6b6b);
	cursor: pointer;
	transition: color .15s ease, transform .1s ease;
}
.jp-wishlist-heart:hover {
	transform: scale(1.08);
}
.jp-wishlist-heart:active {
	transform: scale(.9);
}
.jp-wishlist-heart.is-active {
	color: #d33;
}
.jp-wishlist-heart.is-active svg {
	fill: currentColor;
	/* Restarts every time .is-active is freshly added (toggled back on
	   after being off), giving the heart a little "pop" instead of a
	   flat color swap. */
	animation: jp-heart-pop .35s ease;
}
@keyframes jp-heart-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	65%  { transform: scale(.9); }
	100% { transform: scale(1); }
}
.jp-wishlist-heart--single {
	position: static;
	width: auto;
	height: auto;
	background: transparent;
	gap: 6px;
	padding: 0 4px;
	font-size: 0.9rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------
   Login / Register / Forgot Password (page-login.php)
   -------------------------------------------------------------------- */
.jp-account-auth {
	display: flex;
	justify-content: center;
}
.jp-account-auth__panel {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 12px;
	padding: 28px 24px;
}
.jp-account-auth__tabs {
	display: flex;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	margin-bottom: 20px;
}
.jp-account-auth__tab {
	flex: 1;
	background: none;
	border: none;
	padding: 10px 4px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	border-bottom: 2px solid transparent;
	cursor: pointer;
}
.jp-account-auth__tab.is-active {
	color: var(--jp-color-primary, #1c6b3f);
	border-bottom-color: var(--jp-color-primary, #1c6b3f);
}
.jp-account-auth__form {
	display: none;
}
.jp-account-auth__form.is-active {
	display: block;
}
.jp-account-auth__error {
	background: #f8d7da;
	color: #721c24;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}
.jp-account-auth__success {
	background: #d4edda;
	color: #155724;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}
.jp-account-auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	margin-bottom: 16px;
	cursor: pointer;
}
.jp-account-auth__channel-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.jp-account-auth__channel-toggle button {
	flex: 1;
	padding: 8px;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 6px;
	background: #fff;
	font-size: 0.85rem;
	cursor: pointer;
}
.jp-account-auth__channel-toggle button.is-active {
	background: var(--jp-color-primary, #1c6b3f);
	border-color: var(--jp-color-primary, #1c6b3f);
	color: #fff;
}
.jp-account-auth__otp-sent-to {
	font-size: 0.85rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-bottom: 14px;
}
.jp-account-auth__resend {
	display: block;
	width: 100%;
	background: none;
	border: none;
	color: var(--jp-color-link, #1c6b3f);
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	margin-top: 12px;
	cursor: pointer;
}
.jp-account-auth__resend:disabled {
	color: var(--jp-color-text-muted, #6b6b6b);
	cursor: default;
}
.jp-account-auth__hint {
	font-size: 0.85rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-bottom: 14px;
}
.jp-account-auth__divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.8rem;
	margin: 20px 0 14px;
}
.jp-account-auth__divider::before,
.jp-account-auth__divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-account-auth__divider span {
	padding: 0 10px;
}
.jp-form-hint {
	display: block;
	font-size: 0.75rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-top: 4px;
}

/* --------------------------------------------------------------------
   My Account dashboard (page-my-account.php)

   Signature element: the counter card (.jp-account-hero) — a greeting
   + stat row that always renders above the tab content, like walking
   up to the pharmacy counter and having your record pulled up. This
   is also the fix for "header and footer show up on the same screen
   when a tab is empty": every tab now has real content above the
   fold (hero + icon nav) regardless of what's in the panel below it,
   and empty panels are a full icon/heading/CTA state, not one line
   of text.
   -------------------------------------------------------------------- */
.jp-account-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	background: linear-gradient(135deg, var(--jp-color-bg-alt, #f7f8f6) 0%, #eef5f0 100%);
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
}
.jp-account-hero__avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}
.jp-account-hero__info {
	margin-right: auto;
}
.jp-account-hero__greeting {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 2px;
}
.jp-account-hero__meta {
	font-size: 0.85rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin: 0;
}
.jp-account-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jp-account-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 76px;
	background: #fff;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 12px;
	padding: 10px 14px;
	cursor: pointer;
	color: var(--jp-color-text-muted, #6b6b6b);
	transition: transform .15s ease, border-color .15s ease;
}
.jp-account-stat:hover {
	transform: translateY(-2px);
}
.jp-account-stat.is-active {
	border-color: var(--jp-color-primary, #1c6b3f);
	color: var(--jp-color-primary, #1c6b3f);
}
.jp-account-stat svg {
	width: 18px;
	height: 18px;
}
.jp-account-stat__num {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--jp-color-text, #1a1a1a);
	line-height: 1;
}
.jp-account-stat__label {
	font-size: 0.7rem;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.jp-account-hero { padding: 18px; }
	.jp-account-hero__stats { gap: 6px; }
	.jp-account-stat { min-width: 64px; padding: 8px 10px; }
}

.jp-my-account__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 1024px) {
	.jp-my-account__layout {
		grid-template-columns: 240px 1fr;
		align-items: start;
	}
}
.jp-my-account__nav {
	display: flex;
	overflow-x: auto;
	gap: 4px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	padding-bottom: 4px;
}
@media (min-width: 1024px) {
	.jp-my-account__nav {
		flex-direction: column;
		border-bottom: none;
		background: var(--jp-color-bg-alt, #f7f8f6);
		border-radius: 14px;
		padding: 10px;
		gap: 2px;
	}
}
.jp-my-account__nav button,
.jp-my-account__logout {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	text-align: left;
	padding: 10px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--jp-color-text-muted, #6b6b6b);
	white-space: nowrap;
	cursor: pointer;
	border-radius: 8px;
	text-decoration: none;
}
.jp-my-account__nav button svg,
.jp-my-account__logout svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.jp-my-account__nav button.is-active {
	color: var(--jp-color-primary, #1c6b3f);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
@media (max-width: 1023px) {
	.jp-my-account__nav button.is-active {
		background: var(--jp-color-bg-alt, #f7f8f6);
		box-shadow: none;
	}
}
.jp-my-account__logout {
	color: #c0392b;
	margin-top: 8px;
}
.jp-my-account__content {
	min-height: 320px;
}
.jp-my-account__panel {
	display: none;
}
.jp-my-account__panel.is-active {
	display: block;
}

/* Empty states — icon + heading + copy + CTA, not a single line of
   text, so a tab with nothing in it still reads as a designed place
   rather than a gap between the header and footer. */
.jp-account-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 56px 24px;
	background: var(--jp-color-bg-alt, #f7f8f6);
	border-radius: 14px;
}
.jp-account-empty__icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: var(--jp-color-primary, #1c6b3f);
	margin-bottom: 6px;
}
.jp-account-empty__icon svg {
	width: 24px;
	height: 24px;
}
.jp-account-empty h3 {
	margin: 0;
	font-size: 1.05rem;
}
.jp-account-empty p {
	margin: 0 0 10px;
	max-width: 34ch;
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.9rem;
}

.jp-order-history__row {
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-left: 3px solid var(--jp-color-border, #e2e2e2);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 14px;
}
.jp-order-history__row--delivered { border-left-color: #2f9e51; }
.jp-order-history__row--cancelled { border-left-color: #c0392b; }
.jp-order-history__row--out_for_delivery { border-left-color: var(--jp-color-accent, #f2b632); }
.jp-order-history__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.jp-order-history__date {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.85rem;
}
.jp-order-history__status {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--jp-color-bg-alt, #f7f8f6);
	text-transform: capitalize;
}
.jp-order-history__status--delivered { background: #d4edda; color: #155724; }
.jp-order-history__status--cancelled { background: #f8d7da; color: #721c24; }
.jp-order-history__items {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 0.85rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-bottom: 12px;
}
.jp-order-history__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.jp-order-history__total {
	font-weight: 700;
}

.jp-account-notice {
	background: var(--jp-color-bg-alt, #f7f8f6);
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 16px;
}

.jp-address-card {
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 12px;
	font-size: 0.9rem;
}
.jp-address-card__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.jp-badge--default {
	position: static;
	background: var(--jp-color-primary, #1c6b3f);
}
.jp-address-card__actions {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}
.jp-link-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--jp-color-link, #1c6b3f);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.jp-link-btn--danger {
	color: #c0392b;
}
.jp-address-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--jp-color-border, #e2e2e2);
}
.jp-address-form__actions {
	display: flex;
	gap: 10px;
}

.jp-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.jp-product-grid .jp-product-card {
	width: 100%;
}
@media (min-width: 768px) {
	.jp-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.jp-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.jp-account-profile-summary {
	background: var(--jp-color-bg-alt, #f7f8f6);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 24px;
	font-size: 0.9rem;
}
.jp-account-profile-summary p {
	margin: 0 0 6px;
}

/* --------------------------------------------------------------------
   Reduced motion — every hover-lift, press-scale, pulse, and pop added
   above collapses to an instant state change for anyone who's told
   their OS/browser they prefer reduced motion. Ripple injection is
   also skipped at the JS level (micro-interactions.js checks the same
   media query) so no ripple element is even created.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.jp-btn,
	.jp-btn:active,
	.jp-product-card,
	.jp-category-card__image,
	.jp-testimonial-card,
	.jp-wishlist-heart,
	.jp-header {
		transition: none !important;
		animation: none !important;
	}
	.jp-btn:active,
	.jp-btn--primary:hover,
	.jp-btn--secondary:hover,
	.jp-product-card:hover,
	.jp-category-card:hover .jp-category-card__image,
	.jp-testimonial-card:hover {
		transform: none !important;
	}
	.jp-wishlist-heart.is-active svg {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------
   "View All" directory pages (categories, brands) — template-parts/
   directory-grid.php. A dedicated hero band (not just an <h1> dropped
   on a blank page) plus a proper multi-column card grid with a real
   per-item product count, since a directory page's whole job is
   helping someone scan and jump — the count is what tells them
   whether a category is worth a click before they take it.
   -------------------------------------------------------------------- */
.jp-directory__hero {
	background: linear-gradient(180deg, var(--jp-color-bg-alt, #f7f8f6) 0%, var(--jp-color-bg, #fff) 100%);
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
	padding: 32px 0 40px;
}
.jp-directory__title {
	font-size: calc(2.1rem * var(--jp-font-heading-scale, 1));
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 14px 0 6px;
}
.jp-directory__title-accent {
	color: var(--jp-color-primary, #1c6b3f);
}
.jp-directory__subtitle {
	color: var(--jp-color-text-muted, #6b6b6b);
	font-size: 0.95rem;
	margin: 0 0 22px;
}
.jp-directory__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 420px;
	background: #fff;
	border: 1px solid var(--jp-color-border, #e2e2e2);
	border-radius: 999px;
	padding: 12px 18px;
	color: var(--jp-color-text-muted, #6b6b6b);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jp-directory__search:focus-within {
	border-color: var(--jp-color-primary, #1c6b3f);
	box-shadow: 0 0 0 3px rgba(28,107,63,.12);
}
.jp-directory__search svg { flex-shrink: 0; }
.jp-directory__search input {
	border: none;
	outline: none;
	font: inherit;
	width: 100%;
	color: var(--jp-color-text, #1a1a1a);
	background: transparent;
}

/* A–Z jump strip (brands only — see $show_alpha_nav). Single scrollable
   row on narrow screens rather than wrapping to many lines, since a
   wrapped 26-letter grid competes with the card grid below it for
   attention. */
.jp-directory__alpha-nav {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--jp-color-border, #e2e2e2);
}
.jp-directory__alpha-nav a,
.jp-directory__alpha-nav span {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	border-radius: 6px;
}
.jp-directory__alpha-nav a {
	color: var(--jp-color-text, #1a1a1a);
	transition: background-color .12s ease, color .12s ease;
}
.jp-directory__alpha-nav a:hover {
	background: var(--jp-color-primary, #1c6b3f);
	color: #fff;
}
.jp-directory__alpha-nav span {
	color: var(--jp-color-border, #e2e2e2);
}

/* The card grid — explicit column counts per breakpoint (not an
   auto-wrapping flex row), so rows always line up evenly regardless of
   how many items the last row happens to have. */
/* Reuses the exact homepage .jp-category-card component (same class,
   same width/sizing/breakpoints) so "View All Categories"/"View All
   Brands" look like a continuation of the homepage carousel rather than
   a differently-styled page — this was the actual UI/UX complaint:
   cards here used to be a totally different (and, at 2-per-row, blown
   up) horizontal list style. flex-wrap instead of a stretchy N-column
   grid means cards keep their natural homepage width instead of being
   stretched to fill a column. */
.jp-directory__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* same reasoning as .jp-archive__grid — split leftover row space evenly instead of stranding it on one side */
	gap: 20px 14px;
}
.jp-directory__grid-item {
	scroll-margin-top: 90px; /* so the A–Z anchor jump doesn't land under the sticky header */
}
.jp-directory__grid-item .jp-category-card__count {
	display: block;
	font-size: 0.72rem;
	color: var(--jp-color-text-muted, #6b6b6b);
	margin-top: 2px;
}

.jp-directory__empty-state,
.jp-directory__no-results {
	color: var(--jp-color-text-muted, #6b6b6b);
	text-align: center;
	padding: 40px 0;
}
[data-jp-directory-item][hidden] {
	display: none;
}