/*
 * Arromelle Pro - core styles
 * Colour and shape tokens come from the Customizer as CSS variables (see inc/dynamic-css.php).
 * Anything hard-coded here is structural, not brand.
 */

:root {
	--ap-line: rgba(46, 27, 19, .12);
	--ap-line-soft: rgba(46, 27, 19, .07);
	--ap-shadow-sm: 0 1px 1px rgba(46, 27, 19, .05), 0 8px 20px -14px rgba(46, 27, 19, .22);
	--ap-shadow-md: 0 1px 1px rgba(46, 27, 19, .06), 0 18px 40px -24px rgba(46, 27, 19, .3);
	--ap-shadow-brand: 0 10px 26px -14px rgba(var(--ap-primary-rgb), .5);
	--ap-shadow-accent: 0 10px 26px -14px rgba(var(--ap-accent-rgb), .6);
	--ap-placeholder: #F4ECE7;
	--ap-header-h: 74px;
	--ap-speed: 160ms;
	/* Floating controls stack from the bottom up so they never overlap. */
	--ap-float-gap: 12px;
	--ap-float-inset: 16px;
	--ap-float-bottom: 74px;
}

@media (min-width: 992px) {
	:root { --ap-float-bottom: 24px; }
}

/* ---------------------------------------------------------------- Base */

html { scroll-behavior: smooth; }

body.arromelle-pro {
	font-family: var(--ap-font-body);
	font-size: var(--ap-font-size);
	line-height: 1.6;
	color: var(--ap-ink);
	background: var(--ap-body-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.arromelle-pro h1, .arromelle-pro h2, .arromelle-pro h3,
.arromelle-pro h4, .arromelle-pro h5, .arromelle-pro h6 {
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--ap-ink);
	line-height: 1.25;
}

.arromelle-pro a { color: var(--ap-primary); text-decoration: none; }
.arromelle-pro a:hover { color: var(--ap-primary-dark); }

.arromelle-pro :focus-visible {
	outline: 2px solid var(--ap-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* padding-block, not the shorthand: these sit on .container and the shorthand
   would zero its gutters, letting the negative-margin .row overflow the viewport. */
.ap-content { padding-block: 32px 56px; }

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

.tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Buttons */

.arromelle-pro .btn {
	--bs-btn-font-weight: 600;
	border-radius: var(--ap-radius-sm);
	padding: .62rem 1.15rem;
	transition: transform var(--ap-speed) ease, box-shadow var(--ap-speed) ease, background-color var(--ap-speed) ease;
}

.arromelle-pro .btn-brand {
	background: var(--ap-primary);
	border: 1px solid var(--ap-primary);
	color: #fff;
	box-shadow: var(--ap-shadow-brand);
}
.arromelle-pro .btn-brand:hover,
.arromelle-pro .btn-brand:focus {
	background: var(--ap-primary-dark);
	border-color: var(--ap-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

.arromelle-pro .btn-outline-brand {
	background: transparent;
	border: 1px solid rgba(var(--ap-primary-rgb), .35);
	color: var(--ap-primary);
}
.arromelle-pro .btn-outline-brand:hover {
	background: rgba(var(--ap-primary-rgb), .07);
	border-color: var(--ap-primary);
	color: var(--ap-primary-dark);
}

/* Orange call to action - the one button on a screen that should be loudest. */
.arromelle-pro .btn-accent {
	background: var(--ap-accent);
	border: 1px solid var(--ap-accent);
	color: #fff;
	box-shadow: var(--ap-shadow-accent);
}
.arromelle-pro .btn-accent:hover,
.arromelle-pro .btn-accent:focus {
	background: var(--ap-accent-dark);
	border-color: var(--ap-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* Outlined button for use on the dark hero band. */
.arromelle-pro .btn-ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
}
.arromelle-pro .btn-ghost:hover,
.arromelle-pro .btn-ghost:focus {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

/*
 * Block buttons (WooCommerce Cart/Checkout blocks, the editor's Button block).
 * theme.json paints these through a :where() rule with zero specificity, which
 * `.arromelle-pro a` beats - that is how you end up with navy text on a navy
 * button. Restate the colours here at a specificity that actually holds.
 */
.arromelle-pro .wp-block-button__link,
.arromelle-pro .wp-element-button,
.arromelle-pro button.wp-element-button {
	background-color: var(--ap-primary);
	color: #fff;
	border-radius: var(--ap-radius-sm);
	font-weight: 600;
}
.arromelle-pro .wp-block-button__link:hover,
.arromelle-pro .wp-block-button__link:focus,
.arromelle-pro .wp-element-button:hover,
.arromelle-pro .wp-element-button:focus {
	background-color: var(--ap-primary-dark);
	color: #fff;
}
.arromelle-pro .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ap-primary);
}

/* ---------------------------------------------------------------- Top bar */
.ap-topbar {
	background: var(--ap-topbar-bg);
	color: var(--ap-topbar-text);
	font-size: .82rem;
}
.ap-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	flex-wrap: wrap;
}
.ap-topbar__left,
.ap-topbar__right {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	flex-wrap: wrap;
	min-width: 0;
}
.ap-topbar__message { margin: 0; opacity: .85; }
.ap-topbar a,
.ap-topbar__link { color: inherit; opacity: .92; }
.ap-topbar a:hover { color: inherit; opacity: 1; text-decoration: underline; }
.ap-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
/* A thin divider between the phone and the email, but not before the first item. */
.ap-topbar__left > * + * { position: relative; }
.ap-topbar__left > * + *::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background: currentColor;
	opacity: .28;
}
.ap-topbar__menu {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ap-topbar__menu a { white-space: nowrap; }

@media (max-width: 991.98px) {
	.ap-topbar__inner { min-height: 38px; }
	.ap-topbar__right { display: none; }
	.ap-topbar__message { display: none; }
}
@media (max-width: 575.98px) {
	.ap-topbar { font-size: .76rem; }
	.ap-topbar__left { gap: 6px 14px; }
	.ap-topbar__left > * + *::before { left: -7px; }
}

/* ---------------------------------------------------------------- Header */

.ap-header__main {
	background: var(--ap-surface);
	border-bottom: 1px solid var(--ap-line-soft);
}
.ap-header__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--ap-header-h);
}
.ap-header__brand { display: flex; align-items: center; margin-right: auto; min-width: 0; }

.ap-header__brand img,
.ap-header__brand .custom-logo {
	max-height: 46px;
	max-width: min(300px, 46vw);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}
@media (max-width: 991.98px) { .ap-header__brand img, .ap-header__brand .custom-logo { max-height: 36px; } }
@media (max-width: 575.98px)  { .ap-header__brand img, .ap-header__brand .custom-logo { max-height: 30px; max-width: 52vw; } }
.site-title a { color: var(--ap-ink); font-weight: 800; }
.site-description { font-size: .78rem; color: var(--ap-muted); }

.ap-header__search { flex: 1 1 auto; max-width: 560px; margin: 0 auto; }

.ap-header__actions { display: flex; align-items: center; gap: 6px; }

.ap-icon-btn {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 48px;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	color: var(--ap-ink);
	border-radius: var(--ap-radius-sm);
	font-size: 1.15rem;
	line-height: 1;
	transition: background var(--ap-speed) ease, color var(--ap-speed) ease;
}
.ap-icon-btn:hover { background: rgba(var(--ap-primary-rgb), .08); color: var(--ap-primary); }
.ap-icon-btn__label { font-size: .68rem; font-weight: 600; letter-spacing: .01em; }
@media (max-width: 575.98px) { .ap-icon-btn__label { display: none; } }

.ap-badge {
	position: absolute;
	top: 2px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ap-accent);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.ap-badge[data-count="0"] { display: none; }

.ap-header__search-mobile { background: var(--ap-surface); padding: 0 0 14px; }

/* On phones the account and wishlist icons live in the bottom action bar, so the
   header keeps only the burger, the brand, search and cart - and the site name fits. */
@media (max-width: 991.98px) {
	.ap-header__inner { gap: 10px; min-height: 62px; }
	.ap-header__actions { gap: 2px; }
	.ap-icon-btn { min-width: 42px; padding: 8px; }
	.site-title { font-size: 1.15rem; }
	.site-title a { white-space: nowrap; }
}
@media (max-width: 359.98px) {
	.site-title { font-size: 1rem; }
}
/* Sticky behaviour */
.has-sticky-header .ap-header__main.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	box-shadow: var(--ap-shadow-sm);
	animation: apSlideDown var(--ap-speed) ease;
}
@keyframes apSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------------- Primary nav */

.ap-nav {
	background: var(--ap-surface);
	border-bottom: 1px solid var(--ap-line);
}
.ap-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ap-nav__menu {
	display: flex;
	/* Bootstrap .navbar-nav defaults to column; only .navbar-expand-* undoes that. */
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}
.ap-nav__menu > li > .nav-link {
	display: block;
	padding: 13px 14px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ap-ink);
	border-radius: var(--ap-radius-sm) var(--ap-radius-sm) 0 0;
	position: relative;
}
.ap-nav__menu > li > .nav-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	background: var(--ap-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ap-speed) ease;
}
.ap-nav__menu > li:hover > .nav-link::after,
.ap-nav__menu > li > .nav-link.active::after { transform: scaleX(1); }
.ap-nav__menu > li:hover > .nav-link { color: var(--ap-primary); }

.ap-nav .dropdown-menu {
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius-sm);
	box-shadow: var(--ap-shadow-md);
	padding: 8px;
	min-width: 230px;
}
.ap-nav .dropdown-item {
	border-radius: 8px;
	padding: 8px 12px;
	font-size: .9rem;
	font-weight: 500;
}
.ap-nav .dropdown-item:hover,
.ap-nav .dropdown-item:focus { background: rgba(var(--ap-primary-rgb), .08); color: var(--ap-primary-dark); }

/* Hover-open dropdowns on desktop only. */
@media (min-width: 992px) {
	.ap-nav .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
	.ap-nav .dropdown-submenu { position: relative; }
	.ap-nav .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-left: 2px; }
	.ap-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }
	.ap-nav .dropdown-submenu > .dropdown-item::after {
		content: "\f285";
		font-family: bootstrap-icons;
		float: right;
		font-size: .7rem;
		line-height: 1.6;
	}
}

.ap-nav__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(var(--ap-primary-rgb), .1);
	color: var(--ap-primary-dark);
	font-size: .84rem;
	font-weight: 600;
}
.ap-nav__pill:hover { background: rgba(var(--ap-primary-rgb), .16); color: var(--ap-primary-dark); }

/* ---------------------------------------------------------------- Search */

.ap-search { position: relative; }
.ap-search__group {
	display: flex;
	align-items: center;
	background: var(--ap-body-bg);
	border: 1px solid var(--ap-line);
	border-radius: 999px;
	padding: 4px 4px 4px 14px;
	transition: border-color var(--ap-speed) ease, box-shadow var(--ap-speed) ease;
}
.ap-search__group:focus-within {
	border-color: var(--ap-primary);
	box-shadow: 0 0 0 3px rgba(var(--ap-primary-rgb), .12);
	background: var(--ap-surface);
}
.ap-search__icon { color: var(--ap-muted); font-size: .95rem; }
.ap-search__input {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	padding: 8px 10px;
	font-size: .9rem;
	color: var(--ap-ink);
	min-width: 0;
}
.ap-search__input:focus { outline: none; }
.ap-search__input::-webkit-search-cancel-button { cursor: pointer; }
.ap-search__submit {
	border: 0;
	background: var(--ap-primary);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 999px;
	white-space: nowrap;
}
.ap-search__submit:hover { background: var(--ap-primary-dark); }

.ap-search__results {
	position: absolute;
	z-index: 1040;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--ap-surface);
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-md);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}
.ap-search__result {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ap-line-soft);
	color: var(--ap-ink);
}
.ap-search__result:last-of-type { border-bottom: 0; }
.ap-search__result:hover,
.ap-search__result.is-active { background: rgba(var(--ap-primary-rgb), .07); color: var(--ap-ink); }
.ap-search__result img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: none; }
.ap-search__result-title { font-size: .88rem; font-weight: 600; display: block; }
.ap-search__result-price { font-size: .82rem; color: var(--ap-primary); font-weight: 600; }
.ap-search__result-price del { color: var(--ap-muted); font-weight: 400; margin-right: 6px; }
.ap-search__result-stock { display: block; font-size: .78rem; color: var(--ap-sale); font-weight: 600; }
.ap-search__more {
	display: block;
	text-align: center;
	padding: 11px;
	font-size: .85rem;
	font-weight: 600;
	background: rgba(var(--ap-primary-rgb), .06);
}
.ap-search__msg { padding: 16px; text-align: center; color: var(--ap-muted); font-size: .88rem; margin: 0; }

/* ---------------------------------------------------------------- Breadcrumb & page header */

.ap-breadcrumb { background: transparent; padding: 14px 0 0; }
.ap-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	color: var(--ap-muted);
}
.ap-breadcrumb__item + .ap-breadcrumb__item::before {
	content: "/";
	margin-right: 6px;
	opacity: .5;
}
.ap-breadcrumb__item a { color: var(--ap-muted); }
.ap-breadcrumb__item a:hover { color: var(--ap-primary); }
.ap-breadcrumb__item span { color: var(--ap-ink); font-weight: 600; }

.ap-page-header { padding: 22px 0 6px; }
.ap-page-header__title { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin: 0; }
.ap-page-header__sub { color: var(--ap-muted); margin: 8px 0 0; max-width: 62ch; }

/* ---------------------------------------------------------------- Cards & content */

.ap-post-card,
.ap-post-row,
.ap-single,
.ap-comments,
.ap-sidebar .widget {
	background: var(--ap-surface);
	border: 1px solid var(--ap-line-soft);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-sm);
}

.ap-post-card { overflow: hidden; display: flex; flex-direction: column; }
.ap-post-card__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 300ms ease; }
.ap-post-card:hover .ap-post-card__media img { transform: scale(1.04); }
.ap-post-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ap-post-card__title a { color: var(--ap-ink); }
.ap-post-card__title a:hover { color: var(--ap-primary); }
.ap-post-card__excerpt { color: var(--ap-muted); font-size: .9rem; margin: 0; }
.ap-post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--ap-line-soft);
	font-size: .8rem;
	color: var(--ap-muted);
}

.ap-card__eyebrow {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ap-primary);
}

.ap-link-arrow { font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.ap-link-arrow i { transition: transform var(--ap-speed) ease; }
.ap-link-arrow:hover i { transform: translateX(3px); }

.ap-post-list { display: flex; flex-direction: column; gap: 20px; }
.ap-post-row { display: flex; gap: 20px; padding: 16px; }
.ap-post-row__media { flex: 0 0 260px; }
.ap-post-row__media img { width: 100%; height: 100%; max-height: 200px; object-fit: cover; border-radius: var(--ap-radius-sm); }
.ap-post-row__title a { color: var(--ap-ink); }
@media (max-width: 767.98px) {
	.ap-post-row { flex-direction: column; }
	.ap-post-row__media { flex: none; }
}

.ap-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: .8rem;
	color: var(--ap-muted);
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.ap-post-meta a { color: var(--ap-muted); }
.ap-post-meta a:hover { color: var(--ap-primary); }

.ap-single { padding: 26px; }
.ap-single__media { margin: 0 0 22px; }
.ap-single__media img { width: 100%; border-radius: var(--ap-radius-sm); }
.ap-single__content > *:last-child { margin-bottom: 0; }
.ap-single__content h2 { font-size: 1.45rem; margin-top: 1.6em; }
.ap-single__content h3 { font-size: 1.2rem; margin-top: 1.4em; }
.ap-single__content blockquote {
	border-left: 3px solid var(--ap-primary);
	background: rgba(var(--ap-primary-rgb), .05);
	padding: 14px 18px;
	border-radius: 0 var(--ap-radius-sm) var(--ap-radius-sm) 0;
	margin: 1.5em 0;
}
.ap-single__content img { border-radius: var(--ap-radius-sm); }
.ap-single__content table { width: 100%; border-collapse: collapse; }
.ap-single__content th, .ap-single__content td { border: 1px solid var(--ap-line); padding: 10px; }
.ap-single__tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-single__tags a {
	font-size: .78rem;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(var(--ap-primary-rgb), .08);
}

.ap-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.ap-postnav .nav-links { display: contents; }
.ap-postnav .nav-previous, .ap-postnav .nav-next {
	background: var(--ap-surface);
	border: 1px solid var(--ap-line-soft);
	border-radius: var(--ap-radius);
	padding: 14px 18px;
}
.ap-postnav .nav-next { text-align: right; }
.ap-postnav__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-muted); }
.ap-postnav__title { font-weight: 600; }
@media (max-width: 575.98px) { .ap-postnav { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Widgets */

.ap-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.ap-sidebar .widget { padding: 18px; }
.widget-title {
	font-size: .95rem;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ap-line-soft);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--ap-line-soft); font-size: .9rem; }
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { color: var(--ap-ink); }
.widget ul li a:hover { color: var(--ap-primary); }
.widget select,
.widget input[type="text"],
.widget input[type="search"] {
	width: 100%;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius-sm);
	padding: 8px 12px;
	font-size: .9rem;
}

/* ---------------------------------------------------------------- Pagination */

.ap-pagination { margin-top: 32px; display: flex; justify-content: center; }
.ap-pagination .page-link {
	border: 1px solid var(--ap-line);
	color: var(--ap-ink);
	margin: 0 3px;
	border-radius: var(--ap-radius-sm) !important;
	min-width: 40px;
	text-align: center;
	font-weight: 600;
	font-size: .88rem;
}
.ap-pagination .page-item.active .page-link,
.ap-pagination .page-link:hover {
	background: var(--ap-primary);
	border-color: var(--ap-primary);
	color: #fff;
}

/* ---------------------------------------------------------------- Empty states */

.ap-empty-state {
	text-align: center;
	background: var(--ap-surface);
	border: 1px dashed var(--ap-line);
	border-radius: var(--ap-radius);
	padding: 48px 24px;
}
.ap-empty-state i { font-size: 2.2rem; color: var(--ap-primary); opacity: .6; }
.ap-empty-state h2 { margin: 14px 0 6px; }
.ap-empty-state p { color: var(--ap-muted); }
.ap-empty-state__search { max-width: 460px; margin: 18px auto 0; }
.ap-empty { color: var(--ap-muted); font-size: .9rem; }

.ap-404 { text-align: center; padding: 40px 0 20px; }
.ap-404__code {
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--ap-primary);
	opacity: .16;
	letter-spacing: -.04em;
}
.ap-404__title { margin-top: -14px; }
.ap-404__text { color: var(--ap-muted); }
.ap-404__search { max-width: 480px; margin: 22px auto; }
.ap-404__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ap-404__products { margin-top: 46px; text-align: left; }

/* ---------------------------------------------------------------- Comments */

.ap-comments { padding: 24px; margin-top: 24px; }
.ap-comments__list { list-style: none; margin: 0 0 22px; padding: 0; }
.ap-comments__list .children { list-style: none; padding-left: 24px; }
.ap-comments__list li.comment { padding: 16px 0; border-bottom: 1px solid var(--ap-line-soft); }
.ap-comments .comment-author img { border-radius: 50%; margin-right: 10px; }
.ap-comments .comment-meta { font-size: .8rem; color: var(--ap-muted); }
.ap-comment-form input[type="text"],
.ap-comment-form input[type="email"],
.ap-comment-form input[type="url"],
.ap-comment-form textarea {
	width: 100%;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius-sm);
	padding: 10px 14px;
	font-size: .92rem;
}
.ap-comment-form label { font-size: .82rem; font-weight: 600; margin-bottom: 4px; display: block; }
.ap-comment-form .form-submit { margin-top: 12px; }

/* ---------------------------------------------------------------- Drawers */

.ap-drawer { width: min(430px, 94vw); border-left: 0; }
.ap-drawer .offcanvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ap-line-soft);
	background: var(--ap-surface);
}
.ap-drawer .offcanvas-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.2;
}
.ap-drawer .offcanvas-title i { font-size: 1.1rem; color: var(--ap-primary); line-height: 1; }

/*
 * Bootstrap's .btn-close is a background image with its own padding, which never
 * lines up with the title. Draw the cross with an icon font instead so it centres.
 */
.ap-drawer .btn-close {
	flex: none;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	opacity: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ap-muted);
	transition: background var(--ap-speed) ease, color var(--ap-speed) ease;
}
.ap-drawer .btn-close::before {
	content: "\f659";
	font-family: bootstrap-icons;
	font-size: 1rem;
	line-height: 1;
}
.ap-drawer .btn-close:hover,
.ap-drawer .btn-close:focus-visible {
	background: rgba(var(--ap-primary-rgb), .1);
	color: var(--ap-primary);
	opacity: 1;
}

.ap-drawer .offcanvas-body {
	background: var(--ap-body-bg);
	padding: 8px 20px 20px;
	display: flex;
	flex-direction: column;
}
.ap-cart-drawer__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.ap-mobile-menu { list-style: none; margin: 0; padding: 0; }
.ap-mobile-menu li { border-bottom: 1px solid var(--ap-line-soft); }
.ap-mobile-menu li a {
	display: block;
	padding: 12px 4px;
	color: var(--ap-ink);
	font-weight: 600;
	font-size: .95rem;
}
.ap-mobile-menu .sub-menu { list-style: none; padding-left: 14px; }
.ap-mobile-menu .sub-menu a { font-weight: 500; font-size: .88rem; color: var(--ap-muted); }
.ap-mobile-nav__foot { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.ap-mobile-nav__call { text-align: center; font-weight: 600; }

/* ---------------------------------------------------------------- Footer */

.ap-footer {
	background: var(--ap-footer-bg);
	color: var(--ap-footer-text);
	margin-top: 56px;
}
.ap-footer__top { padding: clamp(40px, 5vw, 68px) 0 40px; }
/*
 * Flex, not grid: the number of footer columns depends on which widget areas
 * the store fills in, and auto-fit grid tracks leave holes when only one or two
 * are active.
 */
.ap-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 32px;
	align-items: flex-start;
}
.ap-footer__brand { flex: 1 1 280px; max-width: 360px; min-width: 0; }
.ap-footer__col { flex: 1 1 130px; min-width: 0; }
.ap-footer__logo { max-height: 46px; max-width: 100%; width: auto; height: auto; }
.ap-footer__brand-link { display: inline-block; }
.ap-footer__title { font-size: 1.35rem; font-weight: 800; color: #fff; }
.ap-footer__about { margin-top: 16px; font-size: .9rem; opacity: .82; max-width: 46ch; }
.ap-footer__about p:last-child { margin-bottom: 0; }

.ap-footer__contact {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: .88rem;
}
.ap-footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.ap-footer__contact i { font-size: .95rem; line-height: 1.5; opacity: .7; flex: none; }
.ap-footer__contact a { color: var(--ap-footer-text); }
.ap-footer__contact a:hover { color: #fff; }

.ap-footer .widget-title,
.ap-footer .footer-widget-title {
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 16px;
}
.ap-footer .widget { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ap-footer .widget + .widget { margin-top: 26px; }
.ap-footer .widget ul li { border-bottom: 0; padding: 6px 0; font-size: .9rem; }
.ap-footer .widget ul li a,
.ap-footer a { color: var(--ap-footer-text); }
.ap-footer .widget ul li a:hover,
.ap-footer a:hover { color: #fff; }

.ap-footer__gstin { margin: 0 0 6px; font-size: .9rem; }
.ap-footer__gstin span { display: block; color: #fff; font-weight: 600; }
.ap-footer__gstin code {
	font-size: .8rem;
	color: var(--ap-footer-text);
	opacity: .75;
	background: none;
	padding: 0;
	word-break: break-all;
}
.ap-footer__staff { margin: 18px 0 0; font-size: .9rem; }

.ap-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; }
.ap-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 22px;
	flex-wrap: wrap;
	font-size: .84rem;
}
.ap-footer__copy { margin: 0; opacity: .8; }
.ap-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 991.98px) {
	.ap-footer__grid { gap: 30px 28px; }
	.ap-footer__brand { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 575.98px) {
	.ap-footer__col { flex: 1 1 100%; }
	.ap-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- Mobile action bar + back to top */

.ap-mobile-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1035;
	display: flex;
	background: var(--ap-surface);
	border-top: 1px solid var(--ap-line);
	box-shadow: 0 -6px 20px -14px rgba(46, 27, 19, .5);
	padding-bottom: env(safe-area-inset-bottom);
}
.ap-mobile-bar__item {
	position: relative;
	flex: 1 1 0;
	border: 0;
	background: transparent;
	padding: 9px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--ap-muted);
	font-size: .66rem;
	font-weight: 600;
}
.ap-mobile-bar__item i { font-size: 1.15rem; }
.ap-mobile-bar__item:hover, .ap-mobile-bar__item:focus { color: var(--ap-primary); }
.ap-mobile-bar .ap-badge { top: 4px; right: 22%; }
@media (max-width: 991.98px) { body.arromelle-pro { padding-bottom: 58px; } }

/* ---------------------------------------------------------------- Floating controls */

/*
 * Three things can sit in the bottom corner: WhatsApp, back-to-top and toasts.
 * They share --ap-float-bottom (which clears the mobile action bar) and step up
 * from there, so no two ever cover each other.
 */

.ap-whatsapp {
	position: fixed;
	bottom: var(--ap-float-bottom);
	z-index: 1033;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .8);
	transition: transform var(--ap-speed) ease, box-shadow var(--ap-speed) ease;
}
.ap-whatsapp--right { right: var(--ap-float-inset); }
.ap-whatsapp--left { left: var(--ap-float-inset); }
.ap-whatsapp:hover,
.ap-whatsapp:focus-visible {
	color: #fff;
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .9);
}
.ap-whatsapp__icon { display: block; }
.ap-whatsapp__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.ap-to-top {
	position: fixed;
	right: var(--ap-float-inset);
	bottom: var(--ap-float-bottom);
	z-index: 1032;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--ap-primary);
	color: #fff;
	box-shadow: var(--ap-shadow-brand);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--ap-speed) ease, transform var(--ap-speed) ease, visibility var(--ap-speed) ease;
}
.ap-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* When the WhatsApp bubble is on the same side, back-to-top sits above it. */
body.has-whatsapp-right .ap-to-top {
	bottom: calc(var(--ap-float-bottom) + 56px + var(--ap-float-gap));
}

.ap-toast-stack {
	position: fixed;
	z-index: 1080;
	right: var(--ap-float-inset);
	bottom: calc(var(--ap-float-bottom) + 56px + var(--ap-float-gap));
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(320px, calc(100vw - 32px));
}
body.has-whatsapp-right .ap-toast-stack {
	bottom: calc(var(--ap-float-bottom) + 112px + var(--ap-float-gap) * 2);
}
.ap-toast {
	background: var(--ap-ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--ap-radius-sm);
	font-size: .86rem;
	box-shadow: var(--ap-shadow-md);
	display: flex;
	align-items: center;
	gap: 8px;
	animation: apToastIn 200ms ease;
}
.ap-toast--ok { background: var(--ap-primary); }
.ap-toast--err { background: var(--ap-sale); }
@keyframes apToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
	.ap-whatsapp { width: 50px; height: 50px; }
	.ap-whatsapp__icon { width: 25px; height: 25px; }
	body.has-whatsapp-right .ap-to-top { bottom: calc(var(--ap-float-bottom) + 50px + var(--ap-float-gap)); }
}

/* ---------------------------------------------------------------- Utilities */

.ap-loading { display: flex; justify-content: center; padding: 40px; color: var(--ap-primary); }

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 2000;
	background: #fff;
	padding: 10px 16px;
	border-radius: var(--ap-radius-sm);
	box-shadow: var(--ap-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.arromelle-pro *,
	.arromelle-pro *::before,
	.arromelle-pro *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* WordPress core alignment classes */
.alignwide { max-width: 1320px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-block-image figcaption { font-size: .82rem; color: var(--ap-muted); }
.sticky .ap-post-card { outline: 2px solid rgba(var(--ap-primary-rgb), .3); }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Mobile menu toggles */

.ap-mobile-menu li { position: relative; }
.ap-mobile-menu__toggle {
	position: absolute;
	top: 4px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: var(--ap-muted);
	border-radius: 8px;
}
.ap-mobile-menu__toggle:hover { background: rgba(var(--ap-primary-rgb), .08); color: var(--ap-primary); }
.ap-header__spacer { display: none; }

/* ---------------------------------------------------------------- Homepage sections */

.ap-home-section { padding: 54px 0 0; }
.ap-home-section:last-child { padding-bottom: 16px; }

.ap-eyebrow {
	display: block;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ap-primary);
	margin-bottom: 6px;
}

.ap-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.ap-section-head__text { min-width: 0; }
.ap-section-head__title { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0; }
.ap-section-head__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.ap-section-head__cta i { transition: transform var(--ap-speed) ease; }
.ap-section-head__cta:hover i { transform: translateX(3px); }

/* Stacked section headings read better centred on a narrow screen. */
@media (max-width: 767.98px) {
	.ap-home-section { padding-top: 38px; }
	.ap-section-head {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 14px;
	}
	.ap-section-head__text { width: 100%; }
	.ap-section-head__cta { align-self: center; }
	.ap-eyebrow { letter-spacing: .18em; }
}

/* Hero - shared */
.ap-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--ap-accent);
	border: 1px solid rgba(var(--ap-accent-rgb), .45);
	border-radius: 999px;
	padding: 7px 16px;
}
.ap-hero__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0; letter-spacing: -.025em; }
.ap-hero__text { margin: 0; max-width: 46ch; }
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Hero - dark band (default). Full-bleed colour, copy left, highlights card right. */
.ap-hero--dark {
	background: var(--ap-hero-bg);
	background-image: radial-gradient(120% 130% at 88% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%);
	color: #fff;
	padding: clamp(22px, 2.2vw, 34px) 0;
}
.ap-hero--dark .ap-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
}
.ap-hero--dark .ap-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
}
.ap-hero--dark .ap-hero__title { color: #fff; }
.ap-hero--dark .ap-hero__text { color: rgba(255, 255, 255, .78); }

/* Hero slider - square banners with their own call to action. */
.ap-hero__slider {
	position: relative;
	border-radius: var(--ap-radius);
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
	min-width: 0;
	/* The 1:1 slide drives the hero height - cap it so the next section stays in view. */
	max-width: var(--ap-hero-media-max, none);
}
.ap-hero__slides,
.ap-hero__slide { border-radius: inherit; }
.ap-hero__slide { position: relative; }
.ap-hero__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}
.ap-hero__slide-action {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 40px 20px 18px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
}
.ap-hero__slide-title {
	margin: 0;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.ap-hero__slide-action .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .5rem .95rem;
	font-size: .85rem;
}

/* Dots sit inside the frame, clear of the button. */
.ap-hero__dots { margin: 0; top: 12px; bottom: auto; justify-content: flex-end; padding-inline-end: 14px; }
.ap-hero__dots [data-bs-target] {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .55);
	opacity: 1;
	transition: background var(--ap-speed) ease, width var(--ap-speed) ease;
}
.ap-hero__dots .active { background: #fff; width: 22px; border-radius: 999px; }

.ap-hero__arrow {
	width: 44px;
	opacity: 0;
	color: #fff;
	font-size: 1.3rem;
	transition: opacity var(--ap-speed) ease;
}
.ap-hero__slider:hover .ap-hero__arrow,
.ap-hero__slider:focus-within .ap-hero__arrow { opacity: .9; }
.ap-hero__arrow:hover { opacity: 1; }
/* Touch devices never hover, so keep the arrows visible there. */
@media (hover: none) { .ap-hero__arrow { opacity: .85; } }

@media (max-width: 991.98px) {
	/* Break the banner out of the container so it runs edge to edge on a phone. */
	.ap-hero__slider {
		order: 2;
		max-width: none;
		width: auto;
		margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
		border-radius: 0;
	}
	/* Keep the banner uncropped - the artwork carries its own text near the edges. */
	.ap-hero__slide img { aspect-ratio: 3 / 1; }
	.ap-hero__slides,
	.ap-hero__slide { border-radius: 0; }
	/* Too little room to float the CTA over a 3:1 strip; sit it underneath instead. */
	.ap-hero__slide-action {
		position: static;
		background: none;
		padding: 12px 0 0;
		align-items: stretch;
	}
	.ap-hero__slide-action .btn { width: 100%; justify-content: center; }
	.ap-hero__dots { top: 8px; padding-inline-end: 10px; }
}
@media (max-width: 575.98px) {
	.ap-hero__slide-action { padding: 34px 16px 16px; }
	.ap-hero__slide-title {
	margin: 0;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.ap-hero__slide-action .btn { width: 100%; justify-content: center; }
}

/* Between 992 and 1200 the full-size banner starves the copy column. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ap-hero--dark .ap-hero__inner { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
	.ap-hero--dark .ap-hero__inner { grid-template-columns: 1fr; }
}

/* Hero - light card with an optional image. */
.ap-hero--light { padding: 28px 0 0; }
.ap-hero--light .ap-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: var(--ap-surface);
	border: 1px solid var(--ap-line-soft);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-sm);
	overflow: hidden;
}
.ap-hero--light.ap-hero--text .ap-hero__inner { grid-template-columns: 1fr; }
.ap-hero--light .ap-hero__copy {
	padding: clamp(26px, 4vw, 54px);
	background: linear-gradient(160deg, rgba(var(--ap-primary-rgb), .07), rgba(var(--ap-primary-rgb), .01));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.ap-hero--light .ap-hero__text { color: var(--ap-muted); }
.ap-hero__media { background: var(--ap-placeholder); }
.ap-hero__media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
@media (max-width: 767.98px) {
	.ap-hero--light .ap-hero__inner { grid-template-columns: 1fr; }
	.ap-hero__media { order: -1; }
	.ap-hero__media img { min-height: 200px; max-height: 260px; }
}

@media (max-width: 575.98px) {
	.ap-hero__actions { gap: 10px; }
	.ap-hero__actions .btn { flex: 1 1 100%; }
}

/* Promise strip - a plain white band, not cards, so it reads as one row of facts. */
.ap-usp {
	margin-top: 54px;
	padding: 30px 0;
	background: var(--ap-surface);
	border-top: 1px solid var(--ap-line-soft);
	border-bottom: 1px solid var(--ap-line-soft);
}
.ap-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 32px;
}
.ap-usp__item { display: flex; align-items: flex-start; gap: 14px; }
.ap-usp__item i { font-size: 1.4rem; line-height: 1.2; color: var(--ap-accent); flex: none; }
.ap-usp__item strong { display: block; font-size: .92rem; line-height: 1.35; color: var(--ap-ink); }
.ap-usp__item span { display: block; margin-top: 2px; font-size: .82rem; color: var(--ap-muted); }
@media (max-width: 991.98px) { .ap-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .ap-usp__grid { grid-template-columns: 1fr; gap: 18px; } }

/* Category tiles */
.ap-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}
.ap-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 22px 16px 24px;
	background: var(--ap-surface);
	border: 1px solid var(--ap-line-soft);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-sm);
	color: var(--ap-ink);
	transition: transform var(--ap-speed) ease, box-shadow var(--ap-speed) ease, border-color var(--ap-speed) ease;
}
.ap-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ap-shadow-md);
	border-color: rgba(var(--ap-primary-rgb), .28);
	color: var(--ap-primary);
}
.ap-cat-card__media {
	width: 100%;
	max-width: 132px;
	aspect-ratio: 1 / 1;
	border-radius: var(--ap-radius-sm);
	overflow: hidden;
	background: var(--ap-placeholder);
	display: block;
	margin-bottom: 10px;
}
.ap-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-cat-card__name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ap-cat-card__count { font-size: .82rem; color: var(--ap-muted); }
@media (max-width: 575.98px) {
	.ap-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ap-cat-card { padding: 16px 10px 18px; }
	.ap-cat-card__name { font-size: .9rem; }
}

/* Promo banners */
.ap-promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ap-promo {
	position: relative;
	display: block;
	min-height: 210px;
	border-radius: var(--ap-radius);
	overflow: hidden;
	background: var(--ap-primary);
	box-shadow: var(--ap-shadow-sm);
	color: #fff;
}
.ap-promo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.ap-promo:hover img { transform: scale(1.04); }
.ap-promo__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px;
	height: 100%;
	justify-content: flex-end;
	background: linear-gradient(180deg, rgba(46, 27, 19, 0) 30%, rgba(46, 27, 19, .8) 100%);
	color: #fff;
}
.ap-promo__title { font-size: 1.3rem; font-weight: 700; }
.ap-promo__text { font-size: .9rem; opacity: .9; }
.ap-promo__cta { font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ap-promo:hover { color: #fff; }
@media (max-width: 767.98px) { .ap-promo-grid { grid-template-columns: 1fr; } }