/* =========================================================================
   THE BRADO — main stylesheet
   Design tokens (--brado-*) are injected inline by inc/customizer.php based
   on Theme Options, so this file only ever references var(--brado-*) and
   never hardcodes brand colors/fonts.
   ========================================================================= */

/* Fallback tokens (overridden by the inline block from the Customizer) */
:root {
	--brado-bg: #ffffff;
	--brado-surface: #ffffff;
	--brado-ink: #1c1a17;
	--brado-ink-on-ink: #fdfcfa;
	--brado-accent: #8f6d3a;
	--brado-accent-hover: #6e5228;
	--brado-muted: #6b6459;
	--brado-muted-2: #726b5e;
	--brado-body-text: #5c564b;
	--brado-border: rgba(28, 26, 23, .1);
	--brado-success: #2e7d4f;
	--brado-font-heading: 'Marcellus', serif;
	--brado-font-body: 'Jost', sans-serif;
	--brado-tracking: .14em;
	--brado-container: 480px;
	/* Design rule: square corners everywhere except category circles (50%,
	   set directly), filter chips/progress bars (999px, set directly), the
	   sticky buy bar's two buttons (6px, set directly) and small badges
	   (3–4px, set directly) — none of those use this token. */
	--brado-radius: 0;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	overflow-x: hidden;
	background: var(--brado-bg);
	background: color-mix(in srgb, var(--brado-ink) 6%, var(--brado-bg));
	color: var(--brado-body-text);
	font-family: var(--brado-font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brado-accent); text-decoration: none; }
a:hover { color: var(--brado-accent-hover); }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
/*
 * Browsers apply their own default padding/margin to <button> (varies
 * slightly per side, per browser) — without zeroing it here, every custom
 * button class that doesn't happen to override every single padding side
 * inherits a bit of that leftover default, which is exactly what caused
 * several buttons across the site (e.g. .brado-offer-card__copy, which
 * only sets padding-bottom) to have their text sitting slightly off-center.
 */
button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	line-height: normal;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--brado-font-heading);
	color: var(--brado-ink);
	margin: 0 0 .5em;
	font-weight: 400;
	line-height: 1.25;
}
p { margin: 0 0 1em; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--brado-ink); color: var(--brado-ink-on-ink); padding: 12px 20px;
}
.skip-link:focus { left: 10px; top: 10px; }

.brado-icon { width: 20px; height: 20px; flex: none; }
.brado-icon--star { width: 13px; height: 13px; color: var(--brado-accent); fill: var(--brado-accent); }

/* -------------------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------------------- */
/*
 * This theme is deliberately mobile-only: the design is shown at the same
 * fixed mobile width on every screen size (phone, tablet, desktop) rather
 * than reflowing into a separate desktop layout. On wider viewports the
 * mobile "screen" simply sits centered, framed by the body background.
 */
body {
	display: flex !important;
	justify-content: center !important;
}
.brado-site {
	width: 100% !important;
	max-width: var(--brado-container) !important;
	margin: 0 auto !important;
	background: var(--brado-bg);
	overflow-x: clip;
	min-height: 100vh;
	box-shadow: 0 0 60px rgba(0, 0, 0, .12);
}
/*
 * Forceful safety net: WordPress core blocks, Elementor, and WooCommerce
 * Blocks all commonly break an element out to the full browser viewport via
 * an .alignfull/.alignwide class or inline `width:100vw` style (used for
 * "full width" sections in a normal responsive site). This theme has no
 * separate desktop layout, so nothing — regardless of what plugin or block
 * generated it — is allowed to render wider than the mobile frame.
 */
.brado-site .alignfull,
.brado-site .alignwide {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.brado-main--boxed {
	margin: 0 auto;
	padding: 32px 20px 64px;
}
.brado-main--elementor { padding: 0; max-width: none; }

/* -------------------------------------------------------------------------
   Eyebrows / section headings / shared type helpers
   ------------------------------------------------------------------------- */
.brado-eyebrow {
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	color: var(--brado-accent);
}
.brado-eyebrow--on-media { color: var(--brado-gold-light); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); margin-bottom: 8px; }

.brado-heading { font-size: 20px; font-weight: 400; }

.brado-section-heading { text-align: center; padding: 8px 20px 0; }
.brado-section-heading .brado-heading { margin-top: 6px; margin-bottom: 4px; }
.brado-heading-rule {
	display: block;
	width: 36px; height: 1px;
	background: var(--brado-accent);
	margin: 10px auto 20px;
}

.brado-link-underline {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brado-accent);
	border-bottom: 1px solid var(--brado-accent);
	padding-bottom: 2px;
}
.brado-link-underline:hover { color: var(--brado-accent-hover); border-color: var(--brado-accent-hover); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.brado-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 30px;
	font-size: 12.5px;
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	border-radius: var(--brado-radius);
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	/* This is an <a>, not covered by the `button{}` line-height reset below —
	   without this it inherits body's 1.6 line-height, which flexbox then
	   centers instead of the glyph itself, offsetting the label vertically. */
	line-height: normal;
}
.brado-btn--primary { background: var(--brado-ink); color: var(--brado-ink-on-ink); }
.brado-btn--primary:hover { background: var(--brado-accent); color: var(--brado-ink-on-ink); }
.brado-btn--outline { border-color: var(--brado-ink); color: var(--brado-ink); }
.brado-btn--outline:hover { background: var(--brado-ink); color: var(--brado-ink-on-ink); }
.brado-btn--light { background: var(--brado-surface); color: var(--brado-ink); }
.brado-btn--light:hover { background: var(--brado-accent); color: var(--brado-ink-on-ink); }
.brado-btn--gold { background: var(--brado-accent); color: var(--brado-ink-on-ink); }
.brado-btn--gold:hover { background: var(--brado-accent-hover); }

/* -------------------------------------------------------------------------
   Announcement bar + header
   ------------------------------------------------------------------------- */
.brado-announcement-bar {
	position: relative;
	background: var(--brado-ink);
	color: var(--brado-gold-light);
	text-align: center;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	padding: 8px 12px;
	overflow: hidden;
}
.brado-announcement-bar[data-brado-announcement-rotate] {
	/*
	 * The message spans are position:absolute below (so they can stack for
	 * the cross-fade), which takes them out of flow and would otherwise
	 * collapse this container to 0 content height — fix the height
	 * explicitly instead (one line of text at this font-size/line-height,
	 * same as this rule's own padding above) and let the container's own
	 * top/bottom padding go to 0 since the spans supply their own via
	 * flex centering.
	 */
	height: calc(11px * 1.4 + 16px);
	padding-top: 0;
	padding-bottom: 0;
}
.brado-announcement-bar__msg {
	display: block;
}
.brado-announcement-bar[data-brado-announcement-rotate] .brado-announcement-bar__msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}
.brado-announcement-bar[data-brado-announcement-rotate] .brado-announcement-bar__msg.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.brado-announcement-bar[data-brado-announcement-rotate] .brado-announcement-bar__msg {
		transition: opacity .01ms;
		transform: none;
	}
}

.brado-header {
	background: var(--brado-surface);
	border-bottom: 1px solid var(--brado-border);
	position: relative;
	z-index: 40;
}
.brado-sticky-header .brado-header { position: sticky; top: 0; }

.brado-header__inner {
	max-width: var(--brado-container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
}

.brado-header__brand { flex: 1; text-align: center; }
.brado-wordmark {
	font-family: var(--brado-font-heading);
	font-size: 21px;
	letter-spacing: .26em;
	color: var(--brado-ink);
}
.custom-logo-link img { max-height: 48px; width: auto; margin: 0 auto; }
.brado-header__page-title {
	font-family: var(--brado-font-heading);
	font-size: 18px;
	letter-spacing: .14em;
	color: var(--brado-ink);
}

.brado-header__menu-toggle,
.brado-header__icon-btn,
.brado-header__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	color: var(--brado-ink);
	position: relative;
}
.brado-header__back { font-size: 18px; line-height: 1; }
.brado-header__menu-toggle .brado-icon--close { display: none; }
.brado-header__menu-toggle[aria-expanded="true"] .brado-icon--menu { display: none; }
.brado-header__menu-toggle[aria-expanded="true"] .brado-icon--close { display: block; }

.brado-header__actions { display: flex; align-items: center; gap: 4px; }
.brado-header__cart { position: relative; }
.brado-cart-count {
	position: absolute;
	top: 2px; right: 0;
	min-width: 15px; height: 15px;
	background: var(--brado-accent);
	color: var(--brado-ink-on-ink);
	font-size: 9.5px;
	line-height: 15px;
	text-align: center;
	border-radius: 999px;
	padding: 0 3px;
}
.brado-cart-count:empty,
.brado-cart-count[data-brado-cart-count="0"] { display: none; }

.brado-header__search-panel { padding: 0 18px 16px; }
.brado-header__search-panel[hidden] { display: none; }

.brado-search-form { display: flex; border: 1px solid var(--brado-border); border-radius: var(--brado-radius); overflow: hidden; }
.brado-search-form__input { flex: 1; border: 0; padding: 12px 14px; background: var(--brado-surface); color: var(--brado-ink); }
.brado-search-form__submit { padding: 0 16px; color: var(--brado-muted); }

/* Off-canvas mobile menu drawer — slides in from the left over a scrim,
   pinned to the mobile "screen" frame itself (see .brado-sticky-atc for the
   same fixed-to-frame pattern), matching the design's 320px drawer. */
.brado-nav-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, background-color .3s ease;
}
.brado-nav-scrim.is-open {
	background: color-mix(in srgb, var(--brado-ink) 45%, transparent);
	opacity: 1;
	pointer-events: auto;
}
.brado-nav {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: 320px;
	max-width: 86vw;
	background: var(--brado-surface);
	box-shadow: 8px 0 32px rgba(0, 0, 0, .25);
	z-index: 91;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	opacity: 0;
	visibility: hidden;
	/*
	 * On a wide desktop viewport there's gray margin on either side of the
	 * centered mobile frame — translateX(-100%) alone only moves the drawer
	 * one drawer-width to the left of the frame's edge, which can still land
	 * inside that margin (visible) rather than truly off-screen. opacity +
	 * visibility guarantee it's actually hidden at rest regardless of
	 * viewport width; the visibility transition is delayed so the slide-out
	 * animation still plays before it disappears.
	 */
	transition: transform .3s ease-out, opacity .3s ease-out, visibility 0s linear .3s;
}
.brado-nav.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition: transform .3s ease-out, opacity .3s ease-out, visibility 0s linear 0s;
}

.brado-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--brado-border);
	flex: none;
}
.brado-drawer__header .brado-wordmark { font-size: 18px; letter-spacing: .26em; }
.brado-drawer__close { font-size: 22px; line-height: 1; color: var(--brado-ink); }

.brado-drawer__account { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--brado-bg); flex: none; }
.brado-drawer__avatar {
	flex: none;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--brado-accent);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--brado-font-heading);
	font-size: 15px;
	color: var(--brado-accent);
}
.brado-drawer__account-hello { font-size: 13px; color: var(--brado-ink); font-weight: 500; }
.brado-drawer__account-link { font-size: 11px; color: var(--brado-accent); letter-spacing: .04em; }

.brado-drawer__scroll { flex: 1; overflow-y: auto; padding: 8px 0; }
.brado-drawer__label { padding: 14px 20px 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brado-accent); }
.brado-drawer__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12.5px 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--brado-ink) 5%, transparent);
	color: var(--brado-ink);
	font-size: 14px;
	letter-spacing: .03em;
}
.brado-drawer__badge {
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--brado-accent);
	color: var(--brado-ink-on-ink);
	padding: 3px 8px;
	border-radius: 999px;
}
.brado-drawer__chevron { font-size: 13px; color: var(--brado-muted-2); }
.brado-drawer__custom-menu .brado-nav__list { display: flex; flex-direction: column; }
.brado-drawer__custom-menu .brado-nav__list a { display: block; padding: 12.5px 20px; color: var(--brado-ink); font-size: 14px; }

.brado-drawer__footer {
	flex: none;
	padding: 16px 20px;
	border-top: 1px solid var(--brado-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.brado-drawer__footer a:first-child { font-size: 11.5px; color: var(--brado-muted); letter-spacing: .04em; }
.brado-drawer__footer a:last-child { font-size: 11.5px; color: var(--brado-accent); letter-spacing: .06em; }

/* -------------------------------------------------------------------------
   Social links
   ------------------------------------------------------------------------- */
.brado-social-links { display: flex; gap: 14px; }
.brado-social-link { color: var(--brado-ink); }
.brado-social-link:hover { color: var(--brado-accent); }
.brado-footer .brado-social-link,
.brado-footer .brado-social-links { color: var(--brado-ink); }

/* -------------------------------------------------------------------------
   Hero (fallback homepage)
   ------------------------------------------------------------------------- */
.brado-hero {
	position: relative;
	height: 440px;
	display: flex;
	align-items: flex-end;
	background: var(--brado-ink);
	overflow: hidden;
}
.brado-hero__media { position: absolute; inset: 0; }
.brado-hero__image { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.brado-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 26px 22px 28px;
	background: linear-gradient(
		color-mix(in srgb, var(--brado-ink) 0%, transparent),
		color-mix(in srgb, var(--brado-ink) 45%, transparent) 30%,
		color-mix(in srgb, var(--brado-ink) 72%, transparent)
	);
	color: var(--brado-ink-on-ink);
}
.brado-hero__heading {
	color: var(--brado-ink-on-ink);
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 16px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* -------------------------------------------------------------------------
   Category tiles (fallback homepage)
   ------------------------------------------------------------------------- */
.brado-categories { padding: 30px 18px 8px; background: var(--brado-surface); }
.brado-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 10px;
}
.brado-category-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.brado-category-tile__image {
	width: 92px; height: 92px;
	border-radius: 50%;
	background: var(--brado-bg) center/cover no-repeat;
}
.brado-category-tile__label { font-size: 12px; letter-spacing: .06em; color: var(--brado-ink); }
.brado-categories__cta { text-align: center; padding: 18px 0 22px; }

/* -------------------------------------------------------------------------
   Product cards (shared: fallback bestsellers + WooCommerce loop)
   ------------------------------------------------------------------------- */
.brado-bestsellers { padding: 28px 18px 30px; background: var(--brado-bg); }
/*
 * :not(.elementor-grid) on every bare `ul.products` selector below is
 * load-bearing, not decoration — Elementor Pro's "WooCommerce Products"
 * widget renders the exact same `ul.products` markup WooCommerce's native
 * loop does (it just adds its own `.elementor-grid` class alongside), and
 * without this guard these !important rules hijack Elementor's own
 * grid-template-columns/column-count controls on any page using that
 * widget, producing a broken, uneven column layout instead of the
 * merchant's configured column count.
 */
.brado-bestsellers__grid,
ul.products:not(.elementor-grid) {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px 12px;
	margin: 0 !important;
	padding: 0 !important;
}
/*
 * Auto-placement alone was landing the 1st, 3rd, etc. item in column 2
 * instead of column 1 on this particular grid (WooCommerce's own
 * first/last row-boundary classes on li.product appear to confuse some
 * browsers' grid auto-placement here) — assigning columns explicitly by
 * position sidesteps that entirely instead of chasing the cause further.
 */
.brado-bestsellers__grid > :nth-child(odd),
ul.products:not(.elementor-grid) > li:nth-child(odd) { grid-column: 1; }
.brado-bestsellers__grid > :nth-child(even),
ul.products:not(.elementor-grid) > li:nth-child(even) { grid-column: 2; }

.brado-product-card,
li.product {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/*
	 * WooCommerce's own core CSS (woocommerce-smallscreen.css, active at
	 * <=768px — i.e. exactly the widths this theme actually runs at) sets
	 * `width: 48%; float: left/right; clear: both` on li.product for its
	 * own (non-CSS-Grid) 2-column layout. float/clear are ignored on grid
	 * items, but the explicit width isn't — it overrides this grid's
	 * natural column-stretch, so each card only fills half its column
	 * (leaving the other half blank) instead of the full cell. Resetting
	 * all three here is what actually fixes it, not just the grid on the
	 * parent.
	 */
	width: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
}
.brado-product-card__link { display: block; color: inherit; }
.brado-product-card__media { position: relative; display: block; }
.brado-product-card__image,
li.product .brado-product-card__image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--brado-radius);
	background: var(--brado-border);
}
.brado-product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.brado-product-card__badges {
	position: absolute;
	top: 8px; left: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.brado-badge {
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 8px;
}
.brado-badge--sale { background: var(--brado-accent); }
.brado-badge--label { text-transform: none; letter-spacing: .01em; font-size: 10px; font-weight: 600; }

.brado-wishlist-btn {
	position: absolute;
	bottom: 8px; right: 8px;
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	background: var(--brado-surface);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	color: var(--brado-accent);
}
.brado-wishlist-btn svg { width: 14px; height: 14px; }
.brado-wishlist-btn.is-active { color: var(--brado-accent); }
.brado-wishlist-btn.is-active svg { fill: var(--brado-accent); }

.brado-product-card__name,
.brado-product-card__body { font-size: 13px; color: var(--brado-ink); line-height: 1.3; display: block; }
/* Clamp to 2 lines and reserve that height even for 1-line titles, so a mix
   of short/long product names doesn't leave price/button rows misaligned
   between cards in the same grid row or slider. */
.brado-product-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: calc(13px * 1.3 * 2);
}
.brado-product-card__price,
li.product .price { font-size: 14px; font-weight: 500; color: var(--brado-ink); display: block; margin-top: 2px; }
.brado-product-card__price del,
li.product .price del { color: var(--brado-muted-2); font-weight: 400; text-decoration: line-through; margin-right: 6px; }
.brado-product-card__price ins,
li.product .price ins { text-decoration: none; }
/* Overlaid on the product image (bottom-left), mirroring the wishlist heart
   (bottom-right) — keeping it off the card's text block means cards with
   and without a rating still end up the exact same height. */
.brado-product-card__rating {
	position: absolute;
	bottom: 8px; left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10.5px;
	color: var(--brado-ink);
	background: var(--brado-surface);
	border-radius: 999px;
	padding: 4px 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.brado-product-card__rating .brado-icon--star { width: 11px; height: 11px; }

/* -------------------------------------------------------------------------
   Promise band (fallback homepage)
   ------------------------------------------------------------------------- */
.brado-promise {
	padding: 38px 26px;
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	text-align: center;
}
.brado-promise .brado-eyebrow { letter-spacing: .22em; margin-bottom: 12px; }
.brado-promise__statement { font-family: var(--brado-font-heading); font-size: 22px; line-height: 1.4; color: var(--brado-ink-on-ink); max-width: 640px; margin: 0 auto; }
.brado-promise__badges { display: flex; justify-content: center; gap: 26px; margin-top: 24px; font-size: 11px; letter-spacing: .08em; opacity: .85; flex-wrap: wrap; }
.brado-promise__dot { color: var(--brado-accent); }

/* -------------------------------------------------------------------------
   Archive header (shop/category) — see brado_archive_header() in
   inc/woocommerce.php for the WooCommerce version of this markup.
   ------------------------------------------------------------------------- */
.brado-archive-header {
	text-align: center;
	padding: 10px 0 4px;
}
.brado-archive-header__title { font-size: 28px; margin-top: 6px; }
.brado-archive-header__desc { font-size: 13px; color: var(--brado-muted); margin-top: 10px; }
.brado-archive-meta {
	font-size: 11px;
	color: var(--brado-muted);
	margin: 6px 0 4px;
	letter-spacing: .04em;
}

/* Filter chips (product tags found in the current results) */
.brado-filter-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 14px 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.brado-filter-chips::-webkit-scrollbar { display: none; }
.brado-chip {
	flex: none;
	font-size: 11px;
	letter-spacing: .08em;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--brado-border);
	border-color: color-mix(in srgb, var(--brado-ink) 20%, transparent);
	color: var(--brado-ink);
	line-height: normal; /* see .brado-btn — anchor, not covered by the button{} reset */
}
.brado-chip.is-active { background: var(--brado-ink); color: var(--brado-ink-on-ink); border-color: var(--brado-ink); }
.brado-filter-chips.is-loading,
ul.products.is-loading { opacity: .5; transition: opacity .15s ease; pointer-events: none; }

/* Sort / Filter row — both sides sit in the same muted gray in the design,
   not the gold accent. */
.brado-sort-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 18px 14px;
	font-size: 11px;
	color: var(--brado-muted);
	letter-spacing: .06em;
}
.brado-sort-trigger { position: relative; display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.brado-sort-trigger__glyph { font-size: 12px; }
.brado-sort-select {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	opacity: 0;
	cursor: pointer;
}
.brado-filter-trigger { display: inline-flex; align-items: center; gap: 4px; color: inherit; }

/* Slide-in shop filters panel (Shop Sidebar widget area) */
.brado-shop-filters {
	position: fixed;
	top: 0; bottom: 0;
	right: 0;
	width: min(320px, 86vw);
	background: var(--brado-surface);
	box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
	z-index: 60;
	padding: 20px;
	overflow-y: auto;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
.brado-shop-filters.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition: transform .25s ease, opacity .25s ease, visibility 0s linear 0s;
}
.brado-shop-filters[hidden] { display: block; } /* toggled visually via transform, not [hidden], once JS has run */
.brado-shop-filters__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.brado-filter-backdrop {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, .35);
	z-index: 55;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.brado-filter-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------------------
   Blog / post listings
   ------------------------------------------------------------------------- */
.brado-post-list { display: flex; flex-direction: column; gap: 32px; }
.brado-post-card__thumb { border-radius: var(--brado-radius); overflow: hidden; margin-bottom: 14px; }
.brado-post-card__meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brado-muted); }
.brado-post-card__title { font-size: 20px; margin: 6px 0 10px; }
.brado-post-card__title a { color: var(--brado-ink); }

.brado-page__title { font-size: 28px; text-align: center; }
.brado-page__header { text-align: center; margin-bottom: 24px; }
.brado-page__thumbnail { border-radius: var(--brado-radius); overflow: hidden; margin-bottom: 24px; }
.brado-page__content { font-size: 15px; line-height: 1.8; }
.brado-page__content h2, .brado-page__content h3 { margin-top: 1.5em; }

.brado-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.brado-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px;
	border: 1px solid var(--brado-border);
	color: var(--brado-ink);
	border-radius: var(--brado-radius);
}
.brado-pagination .page-numbers.current { background: var(--brado-ink); color: var(--brado-ink-on-ink); border-color: var(--brado-ink); }

.brado-404 { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 60px; padding-bottom: 60px; }
.brado-404__search { max-width: 360px; width: 100%; margin-top: 16px; }
.brado-no-results { text-align: center; padding: 60px 0; }

/* -------------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------------- */
.brado-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--brado-border); }
.brado-comments__title { font-size: 20px; }
.brado-comment-list .comment-body { padding: 16px 0; border-bottom: 1px solid var(--brado-border); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	padding: 12px 14px;
	border-radius: var(--brado-radius);
	margin-bottom: 12px;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.brado-footer { background: var(--brado-surface); border-top: 1px solid var(--brado-border); margin-top: 48px; }
.brado-footer__widgets {
	max-width: var(--brado-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding: 40px 20px 20px;
}
.brado-widget-title { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

.brado-footer__base {
	text-align: center;
	padding: 30px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.brado-footer__widgets + .brado-footer__base { border-top: 1px solid var(--brado-border); }
.brado-footer__wordmark .brado-wordmark { font-size: 18px; letter-spacing: .28em; }
.brado-footer__menu-list { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--brado-muted); }
.brado-footer__menu-list a { color: var(--brado-muted); }
.brado-footer__copyright { font-size: 10.5px; color: var(--brado-muted-2); margin: 6px 0 0; }
.brado-footer__credit { font-size: 10.5px; color: var(--brado-muted-2); margin: 0; }
.brado-footer__credit a { color: var(--brado-muted-2); text-decoration: underline; }

/* -------------------------------------------------------------------------
   About page (page-templates/template-about.php)
   ------------------------------------------------------------------------- */
.brado-about__intro { padding: 40px 26px 30px; background: var(--brado-surface); text-align: center; }
.brado-about__heading { font-family: var(--brado-font-heading); font-size: 28px; line-height: 1.25; color: var(--brado-ink); margin: 12px 0 0; font-weight: 400; }
.brado-about__photo { height: 280px; background: var(--brado-border); overflow: hidden; }
.brado-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brado-about__content { padding: 30px 26px; background: var(--brado-surface); }
.brado-about__content p { font-size: 14px; line-height: 1.8; color: var(--brado-body-text); margin: 0 0 18px; }
.brado-about__content p:last-child { margin-bottom: 0; }
.brado-about__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--brado-ink); text-align: center; }
.brado-about__stat { padding: 24px 8px; }
.brado-about__stat + .brado-about__stat { border-left: 1px solid color-mix(in srgb, var(--brado-accent) 25%, transparent); }
.brado-about__stat-number { font-family: var(--brado-font-heading); font-size: 22px; color: var(--brado-accent); }
.brado-about__stat-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--brado-ink-on-ink); opacity: .6; margin-top: 4px; }
.brado-about__cta { padding: 34px 26px; background: var(--brado-surface); text-align: center; }
.brado-about__cta-heading { font-family: var(--brado-font-heading); font-size: 20px; color: var(--brado-ink); }
.brado-about__cta .brado-btn { margin-top: 18px; }

/* -------------------------------------------------------------------------
   Contact page (page-templates/template-contact.php)
   ------------------------------------------------------------------------- */
.brado-contact__intro { padding: 36px 26px 24px; background: var(--brado-surface); text-align: center; }
.brado-contact__heading { font-family: var(--brado-font-heading); font-size: 26px; color: var(--brado-ink); margin: 10px 0 0; font-weight: 400; }
.brado-contact__hours { font-size: 12.5px; color: var(--brado-muted); margin: 8px 0 0; }

.brado-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 24px; background: var(--brado-surface); }
.brado-contact__card { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--brado-border); padding: 18px 14px; text-align: center; color: inherit; }
.brado-contact__card-icon { font-size: 18px; }
.brado-contact__card-label { font-size: 12px; color: var(--brado-ink); margin-top: 8px; letter-spacing: .04em; }
.brado-contact__card-sub { font-size: 10.5px; color: var(--brado-muted); margin-top: 3px; }

.brado-contact__form-wrap { padding: 26px 20px 30px; background: var(--brado-bg); }
.brado-contact__form-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brado-ink); margin-bottom: 16px; }
.brado-contact__form { display: flex; flex-direction: column; gap: 12px; position: relative; }
.brado-contact__field {
	height: 48px;
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	padding: 0 14px;
	font-size: 12.5px;
	color: var(--brado-ink);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}
.brado-contact__field::placeholder { color: var(--brado-muted-2); }
.brado-contact__field--select { appearance: none; }
.brado-contact__field--textarea { height: 110px; padding: 12px 14px; resize: vertical; }
.brado-contact__submit {
	height: 52px;
	margin-top: 4px;
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-radius: var(--brado-radius);
}
.brado-contact__submit:hover { background: var(--brado-accent); }
.brado-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.brado-contact__notice { font-size: 12px; padding: 10px 14px; margin: 0 0 14px; border-left: 3px solid var(--brado-accent); background: var(--brado-surface); }
.brado-contact__notice--success { border-left-color: var(--brado-success); color: var(--brado-success); }
.brado-contact__notice--error { border-left-color: #b3261e; color: #b3261e; }

/* -------------------------------------------------------------------------
   Elementor compatibility
   ------------------------------------------------------------------------- */
.brado-elementor-built .brado-main--boxed { max-width: none; padding: 0; }

/* Homepage "Shop by Category" grid (see the Elementor content on the front
   page) — Elementor's own nested-column width CSS wasn't taking effect for
   this structure, so the 3-column layout is forced here instead, scoped to
   the custom CSS class assigned to that column in the Elementor data. */
.brado-eb-category-grid.elementor-column .elementor-widget-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 12px;
}
.brado-eb-category-grid .elementor-widget-image-box { width: auto; margin: 0; }
.brado-eb-category-grid .elementor-image-box-img {
	display: inline-block;
	width: 76px;
	height: 76px;
	max-width: none;
}
.brado-eb-category-grid .elementor-image-box-img a { display: block; width: 100%; height: 100%; }
.brado-eb-category-grid .elementor-image-box-img img {
	/*
	 * Elementor's own frontend CSS sets `.elementor img { max-width: 100% }`
	 * — a *different* property than width, so it isn't overridden just by
	 * this rule winning on `width`. Since the actual grid cell here is
	 * narrower than 76px, that 100% resolved to less than 76px and capped
	 * the image down regardless of the width set below. max-width: none
	 * is what actually removes that cap.
	 */
	max-width: none;
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 50%;
}