/* ==========================================================================
   Components
   Reusable UI pieces, alphabetical within each group.
   ========================================================================== */


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	--btn-bg: var(--green-500);
	--btn-fg: var(--white);
	--btn-border: transparent;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 50px;
	padding: 0 1.55rem;
	border: 1.5px solid var(--btn-border);
	border-radius: var(--radius-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: 0.9375rem;
	font-weight: var(--fw-bold);
	letter-spacing: -0.005em;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color var(--dur-2) var(--ease-out),
		border-color var(--dur-2) var(--ease-out),
		color var(--dur-2) var(--ease-out),
		box-shadow var(--dur-2) var(--ease-out),
		transform var(--dur-2) var(--ease-out);
}

.btn:hover {
	--btn-bg: var(--green-700);
	color: var(--btn-fg);
}

.btn:active {
	transform: translateY(1px) scale(0.99);
}

.btn__icon {
	flex: 0 0 auto;
	transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .icon--arrow-right {
	transform: translateX(3px);
}

.btn:hover .icon--arrow-up-right {
	transform: translate(2px, -2px);
}

.btn--primary {
	box-shadow: 0 12px 26px -14px rgb(44 128 46 / 0.75);
}

.btn--primary:hover {
	box-shadow: 0 16px 30px -14px rgb(12 94 44 / 0.7);
}

.btn--secondary {
	--btn-bg: var(--white);
	--btn-fg: var(--ink-900);
	--btn-border: var(--line-strong);
}

.btn--secondary:hover {
	--btn-bg: var(--white);
	--btn-fg: var(--green-700);
	--btn-border: var(--green-500);
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--ink-900);
	--btn-border: var(--line-strong);
}

.btn--ghost:hover {
	--btn-bg: var(--green-50);
	--btn-fg: var(--green-700);
	--btn-border: var(--green-200);
}

.btn--ghost .icon--whatsapp {
	color: var(--green-500);
}

.btn--light {
	--btn-bg: var(--white);
	--btn-fg: var(--green-700);
}

.btn--light:hover {
	--btn-bg: var(--green-50);
	--btn-fg: var(--green-700);
}

.btn--outline-light {
	--btn-bg: transparent;
	--btn-fg: var(--white);
	--btn-border: rgb(255 255 255 / 0.36);
}

.btn--outline-light:hover {
	--btn-bg: rgb(255 255 255 / 0.1);
	--btn-fg: var(--white);
	--btn-border: rgb(255 255 255 / 0.75);
}

/* WhatsApp actions use the brand green, not WhatsApp's own — no second green. */
.btn--whatsapp {
	box-shadow: 0 12px 26px -14px rgb(44 128 46 / 0.75);
}

.btn--sm {
	min-height: 44px;
	padding: 0 1.15rem;
	font-size: 0.875rem;
}

.btn--lg {
	min-height: 56px;
	padding: 0 1.9rem;
	font-size: 1rem;
}

.btn--block {
	width: 100%;
}

/* --- Round icon button --------------------------------------------------- */

.icon-btn {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	background: var(--white);
	color: var(--ink-900);
	transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, color var(--dur-2) ease, opacity var(--dur-2) ease;
}

.icon-btn:hover {
	border-color: var(--green-500);
	background: var(--green-50);
	color: var(--green-700);
}

.icon-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.icon-btn > span {
	display: grid;
	place-items: center;
}

/* Specificity matches `.icon-btn > span` above, so these always win. */
.icon-btn > .icon-btn__play,
.icon-btn.is-paused > .icon-btn__pause {
	display: none;
}

.icon-btn.is-paused > .icon-btn__play {
	display: grid;
}

/* --- Text link ----------------------------------------------------------- */

/* Padding widens the tap target to 44px; the negative margin keeps layout. */
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-block: 0.6rem;
	margin-block: -0.6rem;
	color: var(--green-500);
	font-weight: var(--fw-bold);
}

.text-link svg {
	transition: transform var(--dur-2) var(--ease-out);
}

.text-link:hover svg {
	transform: translateX(3px);
}


/* ==========================================================================
   Type pieces
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--green-500);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	letter-spacing: var(--track-wide);
	line-height: 1.2;
	text-transform: uppercase;
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand-gradient);
}

.text-accent {
	color: var(--green-500);
}

.section-head {
	display: grid;
	gap: var(--space-4);
	max-width: 46rem;
}

.section-head__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--track-tight);
	line-height: 1.08;
}

.section-head__lead {
	max-width: 38rem;
	color: var(--ink-500);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.section-head--center {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.section-head--on-dark .eyebrow {
	color: var(--green-glow);
}

.section-head--on-dark .eyebrow::before {
	background: var(--green-glow);
}

.section-head--on-dark .section-head__title {
	color: var(--white);
}

.section-head--on-dark .section-head__lead {
	color: rgb(255 255 255 / 0.82);
}


/* ==========================================================================
   Product plate — the frame every product photograph sits in
   ========================================================================== */

.plate {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--plate);
	isolation: isolate;
}

.plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Small pieces
   ========================================================================== */

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.8rem;
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	line-height: 1.2;
}

.tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green-400);
}

.stars {
	display: inline-flex;
	gap: 2px;
	color: var(--star);
}

.stars .icon {
	width: 18px;
	height: 18px;
}

.product-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.95rem 0.3rem 0.3rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.2;
	transition: border-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}

.product-chip:hover {
	border-color: var(--green-500);
	color: var(--green-700);
	box-shadow: var(--shadow-sm);
}

.product-chip__thumb {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--plate);
}

.product-chip__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Rating badge (hero) and spec card (hero) — floating white cards */

.rating-badge,
.spec-card {
	border: 1px solid rgb(255 255 255 / 0.8);
	border-radius: var(--radius-md);
	background: rgb(255 255 255 / 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-md);
}

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.2rem 0.85rem 0.95rem;
}

.rating-badge__score {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--brand-gradient);
	color: var(--white);
	font-size: 1.25rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
}

.rating-badge__meta {
	display: grid;
	gap: 0.15rem;
	color: var(--ink-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
}

.spec-card {
	padding: 1rem 1.1rem 1.1rem;
}

.spec-card__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	color: var(--ink-900);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
}

.spec-card__title .icon {
	color: var(--green-500);
}

.spec-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.spec-card__chips li {
	padding: 0.38rem 0.75rem;
	border: 1px solid var(--green-200);
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	line-height: 1.1;
}


/* ==========================================================================
   Brand (logo link)
   ========================================================================== */

.brand {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-radius: var(--radius-xs);
}


/* ==========================================================================
   Primary navigation (desktop) and dropdown panels
   ========================================================================== */

.primary-nav {
	display: none;
}

@media (min-width: 1200px) {
	.primary-nav {
		display: block;
		margin-inline: auto;
	}
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.1rem, -2.4rem + 2.6vw, 0.9rem);
}

.primary-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: var(--header-h);
	padding-inline: 0.65rem;
	color: var(--ink-900);
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	white-space: nowrap;
}

.primary-nav__link::after {
	content: "";
	position: absolute;
	right: 0.65rem;
	bottom: 22px;
	left: 0.65rem;
	height: 2px;
	border-radius: 2px;
	background: var(--green-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-3) var(--ease-out);
}

.primary-nav__link:hover,
.primary-nav__link[aria-expanded="true"] {
	color: var(--green-700);
}

.primary-nav__link:hover::after,
.primary-nav__link[aria-expanded="true"]::after {
	transform: scaleX(1);
}

.primary-nav__caret {
	color: var(--ink-400);
	transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) ease;
}

.primary-nav__link[aria-expanded="true"] .primary-nav__caret {
	color: var(--green-500);
	transform: rotate(180deg);
}

/* Never taller than the screen below the header: on a short laptop screen the
   panel scrolls instead of running off the bottom. */
.nav-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - var(--header-h));
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--space-5) var(--space-6);
	border-top: 1px solid var(--line);
	background: var(--white);
	box-shadow: 0 40px 60px -40px rgb(15 26 18 / 0.35);
}

@media (min-width: 1440px) {
	.nav-panel {
		padding-block: var(--space-6) var(--space-7);
	}
}

.nav-panel.is-open {
	animation: panel-in var(--dur-3) var(--ease-out);
}

@keyframes panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.nav-panel > * {
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Categories mega menu: the three buying lanes across the full width, then
   the "Not sure" strip under them. Full width keeps every product name on one
   line (only the longest takes two), at every desktop size. */

.mega {
	display: grid;
	gap: var(--space-5);
}

/* Retail & Promotional has eight types in two columns; Food & Hospitality has
   the longest names, Industrial & Bulk the shortest. */
.mega__lanes {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr) minmax(0, 0.85fr);
	grid-template-rows: auto auto;
	column-gap: var(--space-5);
}

/* The lanes share one heading row, so their lists always start level, even
   if a heading ever wraps. */
.mega__lane {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	align-content: start;
}

.mega__lane-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.6rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--line);
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.mega__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: 0.6875rem;
	letter-spacing: 0;
}

.mega__list {
	display: grid;
	align-content: start;
	gap: 2px;
}

.mega__lane--retail .mega__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-3);
}

/* A link fills its row, so side-by-side items share one height. */
.mega__list > li {
	display: flex;
}

.mega__link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.7rem;
	min-height: 54px;
	padding: 0.35rem 0.45rem;
	border-radius: var(--radius-sm);
	color: var(--ink-900);
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	line-height: 1.25;
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}

.mega__link:hover {
	background: var(--green-50);
	color: var(--green-700);
}

/* Two balanced lines at most; "Non-Woven" never splits at its hyphen. */
.mega__name {
	min-width: 0;
	text-wrap: balance;
}

.mega__thumb {
	flex: 0 0 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--plate);
}

.mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-3) var(--ease-out);
}

.mega__link:hover .mega__thumb img {
	transform: scale(1.08);
}

/* The strip: the question and its line, the specialist button, "View all". */
.mega__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	padding: 1rem 1.25rem 1rem 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--brand-deep);
	color: var(--white);
}

.mega__aside-copy {
	display: flex;
	flex: 1 1 340px;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.75rem;
}

.mega__aside-title {
	color: var(--white);
	font-size: 1.0625rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.02em;
	line-height: 1.3;
	white-space: nowrap;
}

.mega__aside-text {
	color: rgb(255 255 255 / 0.84);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.mega__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.mega__all:hover {
	color: var(--green-glow);
}

/* Best Sellers panel */

.bestsellers {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
}

.bestsellers__list {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, minmax(0, 220px));
	gap: var(--space-5);
}

.bestsellers__card {
	display: grid;
	gap: 0.8rem;
	color: var(--ink-900);
	font-weight: var(--fw-bold);
}

.bestsellers__card:hover {
	color: var(--green-700);
}

.bestsellers__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--plate);
}

.bestsellers__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-4) var(--ease-out);
}

.bestsellers__card:hover .bestsellers__media img {
	transform: scale(1.05);
}

.bestsellers__placeholder {
	color: var(--green-500);
}

.bestsellers__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: var(--fw-bold);
}


/* ==========================================================================
   Header actions and mobile menu
   ========================================================================== */

.header-whatsapp .btn__label {
	display: none;
}

.header-whatsapp {
	width: 44px;
	padding: 0;
}

.header-quote {
	display: none;
}

@media (min-width: 480px) {
	.header-quote {
		display: inline-flex;
	}
}

@media (min-width: 1320px) {
	.header-whatsapp {
		width: auto;
		padding: 0 1.15rem;
	}

	.header-whatsapp .btn__label {
		display: inline;
	}
}

.menu-toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	color: var(--ink-900);
	transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
	border-color: var(--green-500);
	background: var(--green-50);
}

.menu-toggle__icon {
	display: grid;
}

.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: grid;
}

@media (min-width: 1200px) {
	.menu-toggle {
		display: none;
	}
}

.mobile-menu {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 99;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--line);
	background: var(--white);
	animation: drawer-in var(--dur-3) var(--ease-out);
}

.admin-bar .mobile-menu {
	top: calc(var(--header-h) + 46px);
}

@keyframes drawer-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (min-width: 1200px) {
	.mobile-menu {
		display: none !important;
	}
}

.mobile-menu__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-height: 100%;
	padding: var(--space-4) var(--gutter) var(--space-7);
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink-900);
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	letter-spacing: -0.015em;
	text-align: left;
}

.mobile-menu__caret {
	color: var(--ink-400);
	transition: transform var(--dur-2) var(--ease-out);
}

.mobile-menu__link[aria-expanded="true"] .mobile-menu__caret {
	color: var(--green-500);
	transform: rotate(180deg);
}

.mobile-menu__sub {
	display: grid;
	gap: 0.1rem;
	padding: 0.6rem 0 1rem;
	border-bottom: 1px solid var(--line);
}

.mobile-menu__sub a {
	display: block;
	padding: 0.55rem 0;
	color: var(--ink-700);
	font-weight: var(--fw-medium);
}

.mobile-menu__sub .mobile-menu__all {
	color: var(--green-500);
	font-weight: var(--fw-bold);
}

.mobile-menu__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: auto;
}

.mobile-menu__contact {
	display: grid;
	gap: 0.3rem;
	margin-top: 0.5rem;
	font-size: var(--fs-sm);
	text-align: center;
}


/* ==========================================================================
   Carousel — native scroll-snap, enhanced by carousel.js
   ========================================================================== */

.carousel {
	--carousel-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
	--slide-gap: var(--space-5);

	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--carousel-pad);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel:focus-visible {
	outline-offset: -3px;
}

.carousel__track {
	display: flex;
	gap: var(--slide-gap);
	width: max-content;
	padding-inline: var(--carousel-pad);
	padding-block: 6px 24px;
}

.carousel__slide {
	scroll-snap-align: start;
}

.carousel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

.carousel-nav {
	display: flex;
	gap: 0.6rem;
}

.carousel-nav.is-hidden {
	display: none;
}

.carousel__progress {
	position: relative;
	height: 3px;
	max-width: 360px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--line);
}

.carousel__progress span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--progress-x, 0%);
	width: var(--progress-w, 30%);
	border-radius: 3px;
	background: var(--brand-gradient);
	transition: left 180ms linear, width 180ms linear;
}

.carousel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-top: var(--space-5);
}

.carousel-foot .carousel__progress {
	flex: 1 1 auto;
}


/* ==========================================================================
   Tickers — product ticker and logo marquee
   ========================================================================== */

.ticker,
.logo-marquee {
	--ticker-gap: var(--space-5);

	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker {
	display: grid;
	gap: var(--ticker-gap);
}

.ticker__row,
.logo-marquee {
	overflow: hidden;
}

.ticker__track,
.logo-marquee__track {
	display: flex;
	gap: var(--ticker-gap);
	width: max-content;
	animation: ticker-left var(--ticker-duration, 70s) linear infinite;
}

.ticker__row--right .ticker__track {
	animation-name: ticker-right;
}

@keyframes ticker-left {
	to {
		transform: translateX(calc(-50% - var(--ticker-gap) / 2));
	}
}

@keyframes ticker-right {
	from {
		transform: translateX(calc(-50% - var(--ticker-gap) / 2));
	}

	to {
		transform: translateX(0);
	}
}

/* The cursor never stops these (client preference): the product ticker slows
   under it (ticker.js) and the logo marquee keeps its pace. They stop only for
   their pause buttons... */
.ticker.is-paused .ticker__track,
.logo-marquee.is-paused .logo-marquee__track {
	animation-play-state: paused;
}

/* ...and while a keyboard user is inside, so a focused card can't slide away.
   Kept as its own rule: a browser without :has() drops only this one. */
.ticker:has(:focus-visible) .ticker__track {
	animation-play-state: paused;
}

/* Off-screen tickers do not animate at all. */
.ticker.is-offscreen .ticker__track,
.logo-marquee.is-offscreen .logo-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ticker,
	.logo-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ticker__row,
	.logo-marquee {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.ticker__track,
	.logo-marquee__track {
		padding-inline: var(--gutter);
		animation: none;
	}

	.ticker__track > [aria-hidden="true"],
	.logo-marquee__track > [aria-hidden="true"] {
		display: none;
	}
}


/* ==========================================================================
   Scroll reveal — only below-the-fold content is ever hidden, and only after
   reveal.js has confirmed it can reveal it again.
   ========================================================================== */

[data-reveal] {
	transition:
		opacity 0.9s var(--ease-out),
		transform 0.9s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-pending {
	opacity: 0;
	transform: translateY(26px);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal].is-pending {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Printing never triggers a scroll, so nothing may stay hidden on paper. */
@media print {
	[data-reveal].is-pending,
	.spec__rail.is-pending .spec-step {
		opacity: 1 !important;
		transform: none !important;
	}
}


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

.site-footer .brand__img {
	width: auto;
	height: 46px;
}

.site-footer__tagline {
	max-width: 30rem;
	margin-top: 1.4rem;
	color: rgb(255 255 255 / 0.84);
	font-size: var(--fs-sm);
	line-height: 1.75;
}

.site-footer__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.site-footer__social {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.site-footer__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 0.24);
	border-radius: 50%;
	color: var(--white);
	transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;
}

.site-footer__social a:hover {
	border-color: var(--white);
	background: var(--white);
	color: var(--green-700);
}

.site-footer__heading {
	margin-bottom: 1.3rem;
	color: var(--green-glow);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.site-footer__links {
	display: grid;
	gap: 0.75rem;
}

.site-footer__links a {
	/* A taller hit area for thumbs; the negative margin keeps the spacing. */
	display: inline-block;
	margin-block: -6px;
	padding-block: 6px;
	color: rgb(255 255 255 / 0.86);
	font-weight: var(--fw-medium);
}

.site-footer__links a:hover {
	color: var(--white);
	text-decoration: underline;
	text-decoration-color: var(--green-glow);
	text-underline-offset: 4px;
}

.site-footer__address {
	display: grid;
	gap: 0.95rem;
}

.site-footer__contact {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block: -4px;
	padding-block: 4px; /* a taller tap target; the margin keeps the spacing */
	color: rgb(255 255 255 / 0.88);
	line-height: 1.55;
}

.site-footer__contact:hover {
	color: var(--white);
}

.site-footer__contact .icon {
	flex: 0 0 18px;
	margin-top: 2px;
	color: var(--green-glow);
}

.site-footer__map {
	margin-top: 1.5rem;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--radius-md);
	background: rgb(255 255 255 / 0.06);
}

.site-footer__map iframe {
	width: 100%;
	height: 168px;
	border: 0;
}

.site-footer__map-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	color: var(--white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
}

.site-footer__map-link:hover {
	color: var(--green-glow);
}

.site-footer__map-link .stars .icon {
	width: 15px;
	height: 15px;
}

.site-footer__base {
	border-top: 1px solid rgb(255 255 255 / 0.12);
}

.site-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 1.5rem;
	color: rgb(255 255 255 / 0.78);
	font-size: var(--fs-xs);
}

.site-footer__legal {
	display: flex;
	gap: 1.25rem;
}

.site-footer__legal a {
	display: inline-block;
	margin-block: -8px;
	padding-block: 8px;
	color: rgb(255 255 255 / 0.84);
}

.icon-btn--sm {
	width: 44px;
	height: 44px;
}


/* ==========================================================================
   Print-method swatches — a small drawn picture of what each finish does.
   Illustrations, not photographs of a job. Size comes from the context.
   ========================================================================== */

.swatch {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
}

.swatch > span {
	position: absolute;
	inset: 0;
}

/* Screen: flat spot-colour layers seen through a fine mesh. */
.swatch--screen {
	background: linear-gradient(90deg, #0C5E2C 0 33.4%, #2C802E 33.4% 66.7%, #6AB937 66.7% 100%);
}

.swatch--screen > span {
	background:
		repeating-linear-gradient(0deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 5px);
}

/* Digital: a halftone of fine dots. */
.swatch--digital {
	background-color: var(--green-50);
	background-image:
		radial-gradient(var(--green-500) 30%, transparent 32%),
		radial-gradient(var(--green-300) 30%, transparent 32%);
	background-position: 0 0, 5px 5px;
	background-size: 10px 10px;
}

/* Flexographic: ink laid in fast, even bands by a flexible plate. */
.swatch--flexo {
	background: repeating-linear-gradient(135deg, #2C802E 0 6px, #49A231 6px 12px);
}

.swatch--flexo > span {
	background: linear-gradient(90deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 45%, rgb(12 94 44 / 0.25));
}

/* DTF: full colour on a glossy transfer film. */
.swatch--dtf {
	background: linear-gradient(135deg, #6AB937 0%, #2C802E 55%, #0C5E2C 100%);
}

.swatch--dtf > span {
	inset: 14% 14% auto auto;
	width: 72%;
	height: 72%;
	border: 1.5px solid rgb(255 255 255 / 0.7);
	border-radius: 9px;
	background: linear-gradient(125deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.12) 45%, rgb(255 255 255 / 0) 60%);
}

/* Rotogravure: ink held in tiny engraved cells. */
.swatch--rotogravure {
	background-color: var(--green-200);
	background-image: radial-gradient(#0C5E2C 36%, transparent 40%);
	background-size: 7px 7px;
}

/* Embroidery: thread worked into the fabric. */
.swatch--embroidery {
	background:
		repeating-linear-gradient(45deg, transparent 0 5px, #2C802E 5px 7.5px),
		repeating-linear-gradient(-45deg, transparent 0 5px, #6AB937 5px 7.5px),
		var(--green-50);
}

/* Sublimation: dye that becomes part of the fabric, edge to edge. */
.swatch--sublimation {
	background:
		radial-gradient(circle at 25% 25%, #6AB937 0%, rgb(106 185 55 / 0) 55%),
		radial-gradient(circle at 80% 75%, #0C5E2C 0%, rgb(12 94 44 / 0) 60%),
		#2C802E;
}

.swatch--sublimation > span {
	filter: blur(6px);
	background: radial-gradient(circle at 60% 30%, rgb(181 220 155 / 0.8), rgb(181 220 155 / 0) 45%);
}


/* ==========================================================================
   Photo pending — shown wherever a product has no client photo yet
   ========================================================================== */

.photo-pending {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.7rem;
	background:
		radial-gradient(closest-side, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0)),
		var(--plate);
	color: var(--green-500);
}

.photo-pending__icon {
	width: clamp(28px, 22%, 56px);
	height: auto;
	opacity: 0.85;
}

.photo-pending__note {
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--white);
	box-shadow: var(--shadow-xs);
	color: var(--ink-500);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	white-space: nowrap;
}


/* ==========================================================================
   Chip link — a compact link to another product page
   ========================================================================== */

.chip-link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--ink-900);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	line-height: 1.25;
	transition: border-color var(--dur-2) ease, color var(--dur-2) ease, background-color var(--dur-2) ease;
}

a.chip-link:hover {
	border-color: var(--green-500);
	background: var(--green-50);
	color: var(--green-700);
}


/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	color: var(--line-strong);
}

.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--ink-500);
}

.breadcrumbs a:hover {
	color: var(--green-700);
}

.breadcrumbs [aria-current="page"] {
	color: var(--ink-900);
}


/* ==========================================================================
   Prose — editor content
   ========================================================================== */

.prose {
	max-width: 46rem;
	color: var(--ink-700);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2 {
	margin-top: 1.8em;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--track-tight);
}

.prose h3 {
	margin-top: 1.5em;
	font-size: var(--fs-h3);
}

.prose ul,
.prose ol {
	padding-left: 1.25rem;
	list-style: revert;
}

.prose li + li {
	margin-top: 0.4em;
}

/* Everything below serves long-form text: blog posts, legal and plain pages.
   Product copy already matches it (pages/products.css). */

.prose > :first-child {
	margin-top: 0;
}

.prose h4 {
	margin-top: 1.4em;
	font-size: 1.0625rem;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
	margin-top: 0.6em;
}

.prose li::marker {
	color: var(--green-500);
}

.prose a {
	color: var(--green-600);
	font-weight: var(--fw-semi);
	text-decoration: underline;
	text-decoration-color: var(--green-200);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-2) ease;
}

.prose a:hover {
	text-decoration-color: currentColor;
}

.prose img {
	border-radius: var(--radius-md);
}

.prose figure {
	margin-inline: 0;
}

.prose figcaption {
	margin-top: 0.6rem;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	text-align: center;
}

.prose blockquote {
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--green-400);
	color: var(--ink-900);
	font-size: var(--fs-lead);
	font-weight: var(--fw-medium);
	line-height: 1.55;
}

.prose blockquote cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--ink-500);
	font-size: var(--fs-sm);
	font-style: normal;
}

.prose hr {
	height: 1px;
	margin-block: 2.2em;
	border: 0;
	background: var(--line);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.prose th,
.prose td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	color: var(--ink-900);
	font-weight: var(--fw-bold);
}

.prose .wp-block-table {
	position: relative;
	overflow-x: auto;
}

/* Headings jumped to from a table of contents clear the sticky header through
   the page's own scroll-padding (base.css); a margin here would double it. */


/* ==========================================================================
   Page hero — the copy-only hero of an inner page: breadcrumb, eyebrow pill,
   H1, lead and actions. Same language as the product and contact heroes.
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-5) clamp(2.5rem, 1.6rem + 2.5vw, 4rem);
	background:
		radial-gradient(45% 80% at 85% 30%, rgb(106 185 55 / 0.12) 0%, rgb(106 185 55 / 0) 70%),
		linear-gradient(180deg, var(--white) 0%, var(--white) 55%, var(--surface-2) 100%);
}

.page-hero .breadcrumbs {
	margin-bottom: var(--space-6);
}

.page-hero__copy {
	display: grid;
	justify-items: start;
	gap: var(--space-5);
	max-width: 44rem;
}

.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 36px;
	padding: 0.45rem 0.95rem 0.45rem 0.7rem;
	border: 1px solid var(--green-100);
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.page-hero__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green-400);
	box-shadow: 0 0 0 4px rgb(73 162 49 / 0.2);
}

.page-hero__title {
	color: var(--ink-900);
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
	font-weight: var(--fw-heavy);
	letter-spacing: -0.036em;
	line-height: 1.06;
}

.page-hero__lead {
	max-width: 36rem;
	color: var(--ink-500);
	font-size: var(--fs-lead);
	line-height: 1.6;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--space-2);
}

@media (max-width: 599px) {
	.page-hero__actions .btn {
		flex: 1 1 150px;
		padding-inline: 1rem;
	}
}


/* ==========================================================================
   Call-to-action panel — a closing "start your order" band in the brand's
   deep green, with Get a Quote and WhatsApp.
   ========================================================================== */

.cta-band {
	padding-block: var(--section-y);
}

.cta-panel {
	display: grid;
	gap: var(--space-5);
	align-items: center;
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	border-radius: var(--radius-2xl);
	background: var(--brand-deep);
	color: var(--white);
}

@media (min-width: 900px) {
	.cta-panel {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-7);
	}
}

.cta-panel__title {
	color: var(--white);
	font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.5rem);
	font-weight: var(--fw-heavy);
	letter-spacing: var(--track-tight);
	line-height: 1.12;
}

.cta-panel__text {
	max-width: 34rem;
	margin-top: var(--space-3);
	color: rgb(255 255 255 / 0.84);
	font-size: var(--fs-lead);
	line-height: 1.55;
}

.cta-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

@media (max-width: 599px) {
	.cta-panel__actions .btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}


/* ==========================================================================
   "[confirm: …]" highlight — off on every build; only shown when a developer
   turns on the b2p_show_pending filter (inc/product-fields.php).
   ========================================================================== */

mark.pending {
	padding: 0.05em 0.3em;
	border-radius: 4px;
	background: var(--pending);
	color: var(--ink-900);
	font-weight: var(--fw-semi);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}


/* ==========================================================================
   What we make — the range by buying lane. About Us, the Blogs page before
   its first post, and the 404 page (template-parts/about/range.php).
   ========================================================================== */

.about-range__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	margin-bottom: var(--space-7);
}

.about-range__grid {
	display: grid;
	gap: var(--space-4);
	align-items: start;
}

@media (min-width: 900px) {
	.about-range__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-5);
	}
}

.lane-card {
	padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background: var(--white);
}

.lane-card__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--line);
}

.lane-card__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--green-500);
	color: var(--white);
}

.lane-card__title {
	color: var(--ink-900);
	font-size: 1.1875rem;
	font-weight: var(--fw-heavy);
	letter-spacing: -0.018em;
	line-height: 1.25;
}

.lane-card__list {
	display: grid;
	gap: 0.15rem;
	margin-top: var(--space-3);
}

.lane-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-inline: -0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--radius-sm);
	color: var(--ink-900);
	transition: background-color var(--dur-2) ease;
}

.lane-item:hover {
	background: var(--green-50);
	color: var(--ink-900);
}

.lane-item__thumb {
	display: block;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.lane-item__thumb .photo-pending__icon {
	width: 22px;
	height: 22px;
}

.lane-item__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.35;
}

.lane-item__go {
	flex: 0 0 auto;
	color: var(--ink-400);
	transition: color var(--dur-2) ease, translate var(--dur-2) var(--ease-out);
}

.lane-item:hover .lane-item__go {
	translate: 2px -2px;
	color: var(--green-500);
}