/*
Theme Name: Bones Realms Hobbies
Theme URI: https://bonesrealmshobbies.com/
Author: Bones Realms Hobbies
Author URI: https://bonesrealmshobbies.com/
Description: A bespoke, hand-coded storefront theme for Bones Realms Hobbies — a UK online seller of trading card games, comics and collectibles. Built from scratch for UNCLE BONE TCG LTD, with full WooCommerce support and graceful fallbacks when WooCommerce is not installed.
Version: 1.0.41
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bones-realms
Tags: e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, wide-blocks
*/

/* ============================================================
   Bones Realms Hobbies — site styles
   Palette (v1.0.16 Royal Blue rebrand, from the final logo):
   base night blue #0A2540, deep shadow #071A30,
   royal #1663D9, bright #1D74F5, ice #7FB2FF, cyan #38BDF8,
   bone #F4F7FB. NOTE: the custom-property NAMES below are the
   v1.0.0 names kept for compatibility (--brh-purple now holds
   Royal, --brh-gold now holds Cyan, --brh-cream now holds the
   new Bone white) — the VALUES are the rebrand palette.
   ============================================================ */

:root {
	--brh-navy: #0A2540;
	--brh-deep: #071A30;
	--brh-navy-2: #0E2F52;
	--brh-navy-3: #14406E;
	--brh-purple: #1663D9;
	--brh-violet: #1D74F5;
	--brh-violet-soft: #E1EDFD;
	--brh-bone: #E9EFF7;
	--brh-cream: #F4F7FB;
	--brh-cream-bg: #F2F6FB;
	--brh-gold: #38BDF8;
	--brh-gold-dark: #1663D9;
	--brh-ink: #0D2438;
	--brh-muted: #54687E;
	--brh-line: #D7E2EF;
	--brh-card: #ffffff;
	--brh-radius: 14px;
	--brh-shadow: 0 10px 30px rgba(7, 26, 48, 0.10);
	--brh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--brh-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--brh-ink);
	background: var(--brh-cream-bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
iframe, video, embed, object { max-width: 100%; }
a { color: var(--brh-purple); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--brh-navy-2); }
h1, h2, h3, h4 { color: var(--brh-navy); line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.site-main { min-height: 55vh; }
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head p { color: var(--brh-muted); }

.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--brh-purple); margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brh-gold); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--brh-navy); color: var(--brh-cream); padding: 10px 18px;
}
.skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 13px 26px; border-radius: 999px;
	font-weight: 700; font-size: 0.98rem; text-decoration: none; text-align: center;
	border: 2px solid transparent; cursor: pointer; transition: all .18s ease;
}
.btn--gold { background: var(--brh-gold); color: var(--brh-navy); }
.btn--gold:hover, .btn--gold:focus { background: var(--brh-gold-dark); color: var(--brh-navy); }
.btn--purple { background: var(--brh-purple); color: #fff; }
.btn--purple:hover, .btn--purple:focus { background: var(--brh-navy-3); color: #fff; }
.btn--outline { border-color: var(--brh-bone); color: var(--brh-cream); background: transparent; }
.btn--outline:hover, .btn--outline:focus { background: rgba(233, 239, 247, 0.12); color: #fff; }
.btn--outline-dark { border-color: var(--brh-purple); color: var(--brh-purple); background: transparent; }
.btn--outline-dark:hover, .btn--outline-dark:focus { background: var(--brh-purple); color: #fff; }

/* ---------- Announcement bar ---------- */
.announcement {
	background: var(--brh-gold); color: var(--brh-navy);
	text-align: center; font-size: 0.86rem; font-weight: 700;
	padding: 8px 16px; letter-spacing: 0.01em;
}
.announcement p { margin: 0; }

/* ---------- Header ---------- */
.site-header {
	background: var(--brh-navy); color: var(--brh-cream);
	border-bottom: 3px solid var(--brh-purple);
	position: relative; z-index: 50;
}
.header-inner {
	display: flex; align-items: center; gap: 24px;
	padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.site-branding { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.site-branding .custom-logo { max-height: 64px; width: auto; }
.site-title { font-size: 1.45rem; font-weight: 900; margin: 0; line-height: 1.1; }
.site-title a { color: var(--brh-cream); text-decoration: none; }
.site-title a:hover { color: var(--brh-gold); }
.site-description { margin: 2px 0 0; font-size: 0.82rem; color: var(--brh-gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }

.primary-nav { margin-left: auto; }
.primary-nav ul {
	display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.primary-nav a {
	color: var(--brh-cream); text-decoration: none; font-weight: 600; font-size: 0.98rem;
	padding: 9px 13px; border-radius: 8px; display: block;
}
.primary-nav a:hover, .primary-nav a:focus,
.primary-nav .current-menu-item > a, .primary-nav .current_page_item > a {
	background: var(--brh-navy-3); color: var(--brh-gold);
}
.primary-nav ul ul {
	display: none; position: absolute; background: var(--brh-navy-2);
	min-width: 220px; border-radius: 10px; padding: 8px; box-shadow: var(--brh-shadow);
}
.primary-nav li { position: relative; }
.primary-nav li:hover > ul, .primary-nav li:focus-within > ul { display: block; }
.primary-nav ul ul a { padding: 8px 12px; }

.nav-toggle {
	display: none; margin-left: auto; background: var(--brh-navy-3);
	color: var(--brh-cream); border: 1px solid var(--brh-purple);
	border-radius: 9px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer;
}
.nav-toggle .nav-toggle-icon { display: inline-block; margin-right: 7px; }

.header-actions {
	display: flex; align-items: center; gap: 16px; width: 100%;
	padding: 0 0 12px; flex-wrap: wrap;
}
.header-actions .search-form { display: flex; gap: 0; flex: 1 1 260px; max-width: 440px; }
.search-form input[type="search"] {
	flex: 1; padding: 10px 14px; border: 1px solid var(--brh-line);
	border-radius: 999px 0 0 999px; font: inherit; font-size: 0.95rem; background: #fff; min-width: 0;
}
.search-form button, .search-form input[type="submit"] {
	padding: 10px 18px; border: 0; border-radius: 0 999px 999px 0;
	background: var(--brh-purple); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.search-form button:hover, .search-form input[type="submit"]:hover { background: var(--brh-navy-3); }
a.header-action {
	color: var(--brh-cream); text-decoration: none; font-weight: 700; font-size: 0.94rem;
}
a.header-action:hover { color: var(--brh-gold); }
.cart-count {
	display: inline-block; background: var(--brh-gold); color: var(--brh-navy);
	border-radius: 999px; min-width: 22px; text-align: center;
	font-size: 0.78rem; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(900px 420px at 85% -10%, rgba(29, 116, 245, 0.45), transparent 60%),
		radial-gradient(700px 380px at 5% 110%, rgba(56, 189, 248, 0.20), transparent 55%),
		var(--brh-navy);
	color: var(--brh-cream); overflow: hidden;
}
.hero-inner {
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px;
	align-items: center; padding-top: 72px; padding-bottom: 72px;
}
.hero h1 { color: #fff; font-size: 3rem; margin-bottom: 18px; }
.hero h1 .hero-accent { color: var(--brh-gold); }
.hero .eyebrow { color: var(--brh-gold); }
.hero-lead { font-size: 1.13rem; color: var(--brh-bone); max-width: 34em; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0 14px; }
.hero-note { font-size: 0.9rem; color: rgba(233, 239, 247, 0.75); margin: 0; }

/* (The hero's pure-CSS card/comic artwork that used to sit
   here was removed in v1.0.12 — see the showcase section at
   the end of this file.) */

/* ---------- Category tiles ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile {
	background: var(--brh-card); border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
	padding: 26px 22px; text-decoration: none; color: var(--brh-ink);
	box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05); transition: transform .16s ease, box-shadow .16s ease;
	display: flex; flex-direction: column; gap: 6px;
}
.tile:hover, .tile:focus { transform: translateY(-4px); box-shadow: var(--brh-shadow); color: var(--brh-ink); }
.tile .tile-mark {
	width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
	background: var(--brh-violet-soft); color: var(--brh-purple); font-size: 1.35rem; margin-bottom: 8px;
}
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--brh-muted); font-size: 0.94rem; }
.tile .tile-count { margin-top: auto; padding-top: 10px; font-size: 0.82rem; font-weight: 800; color: var(--brh-gold-dark); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Info / fallback panels ---------- */
.notice-panel {
	background: var(--brh-violet-soft); border: 1px dashed var(--brh-violet);
	border-radius: var(--brh-radius); padding: 30px; text-align: center; color: var(--brh-navy-2);
}
.notice-panel h3 { color: var(--brh-navy); }
.notice-panel p { max-width: 42em; margin-left: auto; margin-right: auto; }

/* ---------- Trust points ---------- */
.section--dark { background: var(--brh-navy-2); color: var(--brh-bone); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-head p { color: var(--brh-bone); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-point {
	background: var(--brh-navy-3); border: 1px solid var(--brh-purple);
	border-radius: var(--brh-radius); padding: 26px 22px;
}
.trust-point .trust-icon { font-size: 1.7rem; margin-bottom: 10px; }
.trust-point h3 { font-size: 1.12rem; }
.trust-point p { margin: 0; font-size: 0.95rem; color: var(--brh-bone); }

/* ---------- Live shows ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.channel {
	background: var(--brh-card); border: 1px solid var(--brh-line); border-top: 5px solid var(--brh-purple);
	border-radius: var(--brh-radius); padding: 28px 24px; box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
	display: flex; flex-direction: column; gap: 8px;
}
.channel h3 { margin: 0; }
.channel .channel-handle { font-weight: 800; color: var(--brh-purple); }
.channel p { color: var(--brh-muted); font-size: 0.96rem; }
.channel .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Closing CTA ---------- */
.cta-band {
	background: linear-gradient(135deg, var(--brh-purple), var(--brh-navy-3));
	border-radius: 20px; padding: 44px; color: var(--brh-cream); text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--brh-bone); max-width: 40em; margin-left: auto; margin-right: auto; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Content / posts ---------- */
.page-hero { background: var(--brh-navy); color: var(--brh-cream); padding: 44px 0; }
.page-hero h1 { color: #fff; margin-bottom: 6px; }
.page-hero .entry-meta, .page-hero p { color: var(--brh-bone); }
.content-area { padding: 48px 0 64px; }
.entry-content::after { content: ""; display: block; clear: both; }
.entry-content a { font-weight: 600; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card {
	background: var(--brh-card); border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
	overflow: hidden; box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05); display: flex; flex-direction: column;
}
.post-card .post-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card h2, .post-card h3 { font-size: 1.2rem; margin: 0; }
.post-card h2 a, .post-card h3 a { color: var(--brh-navy); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--brh-purple); }
.post-card p { color: var(--brh-muted); font-size: 0.96rem; margin: 0; }
.entry-meta { font-size: 0.85rem; color: var(--brh-muted); }
.read-more { margin-top: auto; font-weight: 700; }
.single-post .post-thumbnail, .page .post-thumbnail { margin-bottom: 26px; border-radius: var(--brh-radius); overflow: hidden; }
.post-navigation { margin-top: 36px; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagination { margin-top: 36px; text-align: center; }
.pagination .page-numbers {
	display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 8px;
	background: #fff; border: 1px solid var(--brh-line); text-decoration: none; font-weight: 700; color: var(--brh-navy);
}
.pagination .page-numbers.current { background: var(--brh-purple); color: #fff; border-color: var(--brh-purple); }
.page-links { margin-top: 20px; }
.comments-area { margin-top: 44px; background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius); padding: 28px; }
.comments-area ol { list-style: none; padding: 0; }
.comments-area li { margin-bottom: 18px; }
.comment-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--brh-line); border-radius: 10px; font: inherit; margin-bottom: 14px;
}
.comment-form input[type="submit"] {
	background: var(--brh-purple); color: #fff; border: 0; border-radius: 999px;
	padding: 12px 24px; font: inherit; font-weight: 700; cursor: pointer;
}

/* ---------- 404 / search ---------- */
.error-404, .no-results { text-align: center; padding: 70px 0; }
.error-404 .big-code { font-size: 5rem; font-weight: 900; color: var(--brh-purple); line-height: 1; }
.error-404 .search-form, .no-results .search-form { max-width: 460px; margin: 22px auto 0; display: flex; }
.error-404 .search-form input[type="search"], .no-results .search-form input[type="search"] { border-color: var(--brh-line); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brh-navy); color: var(--brh-bone); border-top: 3px solid var(--brh-purple); }
.footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-top: 36px; }
.footer-widgets .widget { background: var(--brh-navy-2); border-radius: var(--brh-radius); padding: 22px; }
.footer-widgets .widget-title { color: var(--brh-gold); font-size: 1.02rem; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 48px 0 34px; }
.footer-main h3 { color: var(--brh-gold); font-size: 1.02rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-main ul { list-style: none; padding: 0; margin: 0; }
.footer-main li { margin-bottom: 9px; }
.footer-main a { color: var(--brh-bone); text-decoration: none; }
.footer-main a:hover { color: var(--brh-gold); text-decoration: underline; }
.footer-brand p { font-size: 0.96rem; max-width: 30em; }
.footer-contact a { text-decoration: underline; }
.footer-bottom {
	border-top: 1px solid var(--brh-navy-3); padding: 20px 0 26px;
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font-size: 0.88rem; color: rgba(233, 239, 247, 0.8);
}
.footer-bottom p { margin: 0; }

/* ---------- WooCommerce ---------- */
.woocommerce .site-main, .woocommerce-page .site-main { background: var(--brh-cream-bg); }
.woocommerce .woocommerce-breadcrumb { padding: 18px 0 0; color: var(--brh-muted); font-size: 0.9rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--brh-purple); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 0; }
.woocommerce ul.products li.product {
	background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
	padding: 18px; margin: 0; width: auto; float: none; text-align: left;
	box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05); display: flex; flex-direction: column;
}
.woocommerce ul.products li.product a { text-decoration: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.05rem; color: var(--brh-navy); padding: 10px 0 4px; }
.woocommerce ul.products li.product .price { color: var(--brh-purple); font-weight: 800; font-size: 1.05rem; }
.woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--brh-purple); color: #fff; border-radius: 999px; font-weight: 700;
	padding: 12px 22px; border: 0; text-decoration: none; text-align: center;
}
.woocommerce ul.products li.product .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--brh-navy-3); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
	background: var(--brh-gold); color: var(--brh-navy);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--brh-gold-dark); color: var(--brh-navy); }
.woocommerce span.onsale {
	background: var(--brh-gold); color: var(--brh-navy); font-weight: 800;
	border-radius: 999px; min-height: 0; min-width: 0; line-height: 1.4; padding: 4px 12px; top: 12px; left: 12px;
}
.woocommerce .woocommerce-ordering select, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select {
	padding: 10px 12px; border: 1px solid var(--brh-line); border-radius: 10px; font: inherit; background: #fff;
}
.woocommerce div.product .product_title { font-size: 2rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--brh-purple); font-weight: 800; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
	border-top-color: var(--brh-purple); background: #fff;
}
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--brh-purple); }
.woocommerce table.shop_table { background: #fff; border-color: var(--brh-line); border-radius: var(--brh-radius); overflow: hidden; }
.woocommerce .quantity .qty { padding: 9px; border: 1px solid var(--brh-line); border-radius: 8px; }
.woocommerce nav.woocommerce-pagination { margin: 30px 0 50px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
	background: #fff; border: 1px solid var(--brh-line); border-radius: 8px; margin: 0 3px; padding: 9px 14px; color: var(--brh-navy); font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--brh-purple); color: #fff; border-color: var(--brh-purple); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--brh-purple); }

/* ============================================================
   WooCommerce polish — account, basket, checkout, notices,
   forms and single product (v1.0.1)
   ============================================================ */

/* ---------- Sold Out badge ---------- */
.woocommerce ul.products li.product { position: relative; }
.woocommerce div.product { position: relative; }
.brh-sold-out {
	position: absolute; top: 12px; right: 12px; z-index: 12;
	background: var(--brh-navy); color: var(--brh-gold);
	font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em;
	padding: 6px 12px; border: 2px solid var(--brh-gold); border-radius: 999px;
	box-shadow: 0 6px 16px rgba(7, 26, 48, 0.35); pointer-events: none;
}
.woocommerce div.product .brh-sold-out { top: 14px; right: auto; left: 14px; transform: translateY(46px); }
.woocommerce ul.products li.product.brh-out-of-stock img,
.woocommerce div.product.brh-out-of-stock .woocommerce-product-gallery img {
	filter: saturate(0.45); opacity: 0.88;
}
.woocommerce .outofstock .price, .woocommerce li.product.brh-out-of-stock .price { color: var(--brh-muted); }

/* ---------- Buttons (full set) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce .button.wc-backward, .woocommerce a.added_to_cart {
	line-height: 1.35; display: inline-block; transition: all .18s ease; font-size: 0.97rem;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .checkout-button, .woocommerce #place_order {
	background: var(--brh-gold); color: var(--brh-navy); font-weight: 800;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover { background: var(--brh-gold-dark); color: var(--brh-navy); }
.woocommerce button.button:disabled, .woocommerce button.button.alt:disabled,
.woocommerce input.button:disabled, .woocommerce a.button.disabled, .woocommerce button.button.disabled {
	opacity: 0.55; cursor: not-allowed;
}
.woocommerce a.added_to_cart { padding: 10px 6px 0; font-weight: 700; text-decoration: underline; }

/* ---------- Notices ---------- */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
	background: #fff; border: 1px solid var(--brh-line); border-radius: 12px;
	padding: 14px 18px 14px 46px; margin: 0 0 22px; box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
	font-size: 0.97rem; list-style: none;
}
.woocommerce .woocommerce-message { border-top: 3px solid #3d9970; }
.woocommerce .woocommerce-info { border-top: 3px solid var(--brh-purple); }
.woocommerce .woocommerce-error { border-top: 3px solid #b03030; }
.woocommerce .woocommerce-error::before { color: #b03030; }
.woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button { margin-left: 12px; }

/* ---------- Forms (account / checkout / general) ---------- */
.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { font-weight: 700; font-size: 0.94rem; margin-bottom: 6px; display: block; }
.woocommerce form .form-row .required { color: #b03030; text-decoration: none; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce form input.input-text,
.woocommerce .woocommerce-EditAccountForm input.input-text, .woocommerce input.input-text,
.woocommerce form.login input.input-text, .woocommerce form.register input.input-text,
.woocommerce form.checkout_coupon input.input-text {
	width: 100%; padding: 11px 13px; border: 1px solid var(--brh-line); border-radius: 10px;
	font: inherit; font-size: 0.97rem; background: #fff; color: var(--brh-ink);
}
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus, .woocommerce input.input-text:focus {
	border-color: var(--brh-violet); outline: 2px solid var(--brh-violet-soft); outline-offset: 0;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #b03030; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: #3d9970; }
.select2-container--default .select2-selection--single {
	height: 46px; border: 1px solid var(--brh-line); border-radius: 10px; background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px; padding-left: 13px; color: var(--brh-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.select2-dropdown { border-color: var(--brh-line); border-radius: 10px; overflow: hidden; }
.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
	padding: 26px; margin: 0 0 26px;
}
.woocommerce .woocommerce-form-login__rememberme { font-weight: 500; margin-right: 14px; }
.woocommerce .lost_password a, .woocommerce .woocommerce-privacy-policy-text { font-size: 0.92rem; color: var(--brh-muted); }
.woocommerce fieldset { border: 1px solid var(--brh-line); border-radius: 10px; padding: 18px; margin: 0 0 18px; }
.woocommerce fieldset legend { font-weight: 800; color: var(--brh-navy); padding: 0 8px; }

/* ---------- Tables (basket / orders / checkout review) ---------- */
.woocommerce table.shop_table { border: 1px solid var(--brh-line); border-collapse: separate; border-spacing: 0; width: 100%; margin: 0 0 26px; font-size: 0.96rem; }
.woocommerce table.shop_table th {
	background: var(--brh-navy-2); color: var(--brh-cream); font-weight: 800;
	padding: 12px 14px; text-align: left; border: 0;
}
.woocommerce table.shop_table td { padding: 13px 14px; border-top: 1px solid var(--brh-line); vertical-align: middle; background: #fff; }
.woocommerce table.shop_table tr:first-child td { border-top: 0; }
.woocommerce table.shop_table tfoot th { background: var(--brh-cream); color: var(--brh-navy); }
.woocommerce table.shop_table tfoot td { background: var(--brh-cream-bg); font-weight: 700; }

/* ---------- My Account ---------- */
.woocommerce-account .woocommerce::after { content: ""; display: block; clear: both; }
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: left; width: 26%; background: #fff; border: 1px solid var(--brh-line);
	border-radius: var(--brh-radius); overflow: hidden; box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 11px 14px; border-radius: 9px; text-decoration: none;
	color: var(--brh-ink); font-weight: 600; font-size: 0.96rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--brh-violet-soft); color: var(--brh-purple); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--brh-purple); color: #fff; font-weight: 800;
}
.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 70%; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-account .woocommerce-Address { background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius); padding: 22px; }
.woocommerce-account .woocommerce-Address .title h3 { margin-bottom: 4px; }
.woocommerce-account .woocommerce-Address address { font-style: normal; color: var(--brh-muted); line-height: 1.7; }
.woocommerce-account .order-again .button { margin-top: 6px; }
.woocommerce-account table.my_account_orders .button { margin: 2px 4px 2px 0; padding: 8px 14px; font-size: 0.88rem; }

/* ---------- Basket / Cart ---------- */
.woocommerce-cart .woocommerce-cart-form { margin-bottom: 8px; }
.woocommerce-cart table.shop_table .product-thumbnail img { max-width: 90px; width: 90px; border-radius: 10px; border: 1px solid var(--brh-line); }
.woocommerce-cart table.shop_table .product-name a { color: var(--brh-navy); font-weight: 700; text-decoration: none; }
.woocommerce-cart table.shop_table .product-name a:hover { color: var(--brh-purple); }
.woocommerce-cart .quantity .qty { width: 76px; text-align: center; padding: 9px 6px; }
.woocommerce-cart table.shop_table .product-remove a.remove {
	color: #b03030 !important; font-size: 1.25rem; line-height: 1; width: 30px; height: 30px;
	border-radius: 999px; display: inline-grid; place-items: center; background: #fdf0f0;
}
.woocommerce-cart table.shop_table .product-remove a.remove:hover { background: #b03030; color: #fff !important; }
.woocommerce-cart td.actions { background: var(--brh-cream-bg); }
.woocommerce-cart td.actions .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.woocommerce-cart td.actions .coupon label { font-weight: 700; }
.woocommerce-cart td.actions .coupon .input-text {
	width: 200px; max-width: 100%; height: 48px; max-height: 48px; box-sizing: border-box;
	padding: 11px 13px; border: 1px solid var(--brh-line);
	border-radius: 12px; font: inherit; background: #fff; float: none;
}
.woocommerce-cart .cart_totals {
	background: #fff; border: 1px solid var(--brh-line); border-top: 4px solid var(--brh-gold);
	border-radius: var(--brh-radius); padding: 24px; box-shadow: var(--brh-shadow);
}
.woocommerce-cart .cart_totals h2 { font-size: 1.35rem; }
.woocommerce-cart .cart_totals table.shop_table { border: 0; margin-bottom: 16px; }
.woocommerce-cart .cart_totals table.shop_table th { background: transparent; color: var(--brh-navy); padding: 10px 6px; }
.woocommerce-cart .cart_totals table.shop_table td { padding: 10px 6px; text-align: right; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td {
	font-size: 1.12rem; border-top: 2px solid var(--brh-line);
}
.woocommerce-cart .wc-proceed-to-checkout { padding: 6px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block; text-align: center; padding: 15px 22px; font-size: 1.02rem; border-radius: 999px; margin: 0;
}
.woocommerce-cart .cross-sells { margin-top: 30px; }
.woocommerce-cart .cart-empty, .woocommerce .return-to-shop { text-align: center; padding: 16px 0 30px; }
.woocommerce .woocommerce-shipping-calculator .input-text, .woocommerce .woocommerce-shipping-calculator select { margin-bottom: 10px; }

/* ---------- Checkout ---------- */
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius); padding: 24px; }
.woocommerce-checkout h3 { font-size: 1.25rem; margin-bottom: 16px; }
.woocommerce-checkout #order_review_heading { margin-top: 30px; }
.woocommerce-checkout .woocommerce-checkout-review-order { background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius); padding: 8px 24px 24px; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name { font-weight: 600; }
.woocommerce-checkout .woocommerce-checkout-payment {
	background: var(--brh-cream-bg); border: 1px solid var(--brh-line); border-radius: 12px; padding: 8px 20px 20px;
}
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods { list-style: none; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--brh-line); }
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li { margin-bottom: 10px; }
.woocommerce-checkout .woocommerce-checkout-payment .payment_box {
	background: #fff; border: 1px solid var(--brh-line); border-radius: 10px; padding: 14px 16px; margin-top: 10px; font-size: 0.94rem; color: var(--brh-muted);
}
.woocommerce-checkout .woocommerce-checkout-payment .payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; padding: 16px 22px; font-size: 1.05rem; border-radius: 999px; margin-top: 16px; float: none; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 0.92rem; color: var(--brh-muted); margin-top: 14px; }
.woocommerce .woocommerce-customer-details address {
	background: #fff; border: 1px solid var(--brh-line); border-radius: var(--brh-radius); padding: 20px; font-style: normal; line-height: 1.7;
}

/* ---------- Product loop extras ---------- */
.woocommerce .woocommerce-result-count { color: var(--brh-muted); font-size: 0.92rem; margin: 14px 0 20px; }
.woocommerce .woocommerce-ordering { margin: 10px 0 20px; }
.woocommerce .woocommerce-ordering select { max-width: 100%; }
.woocommerce ul.products li.product .star-rating, .woocommerce .star-rating { color: var(--brh-gold-dark); }
.woocommerce ul.products li.product .woocommerce-loop-category__title { font-size: 1.05rem; color: var(--brh-navy); padding: 10px 0 4px; }
.woocommerce ul.products li.product .woocommerce-loop-category__title .count { background: none; color: var(--brh-muted); }
.woocommerce .price del { color: var(--brh-muted); font-weight: 500; margin-right: 6px; }
.woocommerce .price ins { text-decoration: none; font-weight: 800; }

/* ---------- Single product ---------- */
.woocommerce div.product div.images { margin-bottom: 28px; }
.woocommerce div.product div.images img { border-radius: var(--brh-radius); border: 1px solid var(--brh-line); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 76px; float: none; }
.woocommerce div.product div.images .flex-control-thumbs li img { border-radius: 8px; }
.woocommerce div.product .summary .product_title { margin-bottom: 8px; }
.woocommerce div.product .summary .woocommerce-product-rating { margin-bottom: 10px; }
.woocommerce div.product p.stock { font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: #2e7d52; }
.woocommerce div.product .stock.out-of-stock { color: #b03030; font-size: 1.05rem; }
.woocommerce div.product form.cart { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin: 20px 0; }
.woocommerce div.product form.cart .quantity .qty { height: 100%; min-height: 48px; width: 84px; text-align: center; font-size: 1rem; }
.woocommerce div.product form.cart .single_add_to_cart_button { padding: 13px 30px; font-size: 1rem; }
.woocommerce div.product .product_meta { border-top: 1px solid var(--brh-line); padding-top: 14px; color: var(--brh-muted); font-size: 0.92rem; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce div.product .woocommerce-tabs { margin-top: 34px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--brh-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent; border: 0; border-radius: 10px 10px 0 0; margin: 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block; padding: 11px 18px; color: var(--brh-muted); font-weight: 700; text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--brh-navy-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brh-gold); }
.woocommerce div.product .woocommerce-tabs .panel {
	background: #fff; border: 1px solid var(--brh-line); border-top: 0;
	border-radius: 0 0 var(--brh-radius) var(--brh-radius); padding: 26px; margin: 0;
}
.woocommerce section.related, .woocommerce section.upsells { margin-top: 40px; }
.woocommerce section.related > h2, .woocommerce section.upsells > h2 { margin-bottom: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 30%; }
	.woocommerce-account .woocommerce-MyAccount-content { width: 66%; }
	.tile-grid, .trust-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-main { grid-template-columns: 1fr 1fr; }
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.hero h1 { font-size: 2.5rem; }
}
@media (max-width: 860px) {
	.hero-inner { grid-template-columns: 1fr; padding-top: 52px; padding-bottom: 52px; }
	.channel-grid { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; }
	.nav-toggle { display: inline-block; }
	.primary-nav { display: none; width: 100%; margin-left: 0; order: 3; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; gap: 2px; padding: 10px 0 16px; }
	.primary-nav ul ul { position: static; display: block; box-shadow: none; padding: 0 0 0 16px; }
	.primary-nav a { padding: 11px 10px; }
	.site-branding { flex: 1; }
	h1 { font-size: 2rem; }
	.section { padding: 46px 0; }
	/* WooCommerce stacks at tablet/mobile */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 22px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
	.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 1 44%; }
	.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; margin-bottom: 20px; }
	.woocommerce-cart .cart_totals { float: none; width: 100%; }
	.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: 100%; }
	.woocommerce table.shop_table { font-size: 0.92rem; }
	.woocommerce-cart td.actions .coupon .input-text { flex: 1 1 160px; width: auto; }
}
@media (max-width: 560px) {
	.tile-grid, .trust-grid, .post-grid, .footer-main { grid-template-columns: 1fr; }
	.hero h1 { font-size: 2.15rem; }
	.cta-band { padding: 32px 22px; }
	.header-actions .search-form { max-width: none; }
	body { font-size: 16px; }
	/* WooCommerce small screens */
	.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 10px; }
	.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 1 100%; }
	.woocommerce-cart .quantity .qty { width: 60px; }
	.woocommerce-cart .cart_totals, .woocommerce-checkout .woocommerce-checkout-review-order { padding: 16px; }
	.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { padding: 18px; }
	.woocommerce form.login, .woocommerce form.register, .woocommerce-account .woocommerce-Address { padding: 18px; }
	.woocommerce div.product .woocommerce-tabs .panel { padding: 18px; }
	.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; }
	.brh-sold-out { font-size: 0.68rem; padding: 5px 10px; }
}

/* ============================================================
   Mobile polish (v1.0.2)
   Phone-first fixes layered over everything above. Desktop
   rules are untouched; all changes live in max-width media
   queries, plus two small base guards below (horizontal
   overflow and long-word wrapping). The main.js toggle contract
   is unchanged: .primary-nav.is-open + aria-expanded.
   ============================================================ */

/* Base guards: nothing wide (hero art, tables, embeds, long
   URLs in product titles) may push the page sideways. */
html, body { overflow-x: hidden; }
.entry-content, .woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: break-word;
}

/* ---------- Tablets & phones (≤860px) ---------- */
@media (max-width: 860px) {
	/* Announcement bar: centred, airy, never crowding the header. */
	.announcement { font-size: 0.82rem; line-height: 1.5; padding: 9px 14px; }

	/* Header: tighter rhythm, logo capped, branding may shrink. */
	.header-inner { gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; }
	.site-branding { flex: 1 1 auto; min-width: 0; gap: 10px; }
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 54px; width: auto; }
	.site-title { font-size: 1.25rem; }
	.site-description { font-size: 0.74rem; letter-spacing: 0.09em; }

	/* Hamburger: an unmistakably tappable 48px target. */
	.nav-toggle { min-height: 48px; padding: 12px 16px; font-size: 1rem; }

	/* Open nav = a clean full-width panel: separated, 48px rows,
	   sub-menus indented behind a purple rail. */
	.primary-nav {
		background: var(--brh-navy-2); border-top: 1px solid var(--brh-navy-3);
		border-radius: 0 0 12px 12px;
	}
	.primary-nav ul { gap: 0; padding: 8px; }
	.primary-nav li { border-bottom: 1px solid var(--brh-navy-3); }
	.primary-nav li:last-child { border-bottom: 0; }
	.primary-nav a {
		display: flex; align-items: center; min-height: 48px;
		padding: 12px; font-size: 1rem; border-radius: 8px;
	}
	.primary-nav ul ul {
		margin: 2px 0 8px 10px; padding: 4px 0 4px 16px;
		border-left: 2px solid var(--brh-purple); border-radius: 0;
		background: transparent;
	}
	.primary-nav ul ul a { min-height: 44px; font-size: 0.96rem; }

	/* Header actions: search gets its own full-width row, then
	   account / basket become full-height tappable pills. */
	.header-actions { gap: 10px; padding-bottom: 14px; }
	.header-actions .search-form { flex: 1 1 100%; max-width: none; }
	a.header-action {
		flex: 1 1 0; display: flex; align-items: center; justify-content: center;
		min-height: 44px; padding: 10px; background: var(--brh-navy-3);
		border: 1px solid var(--brh-purple); border-radius: 999px; text-align: center;
	}

	/* iOS Safari zooms on focus when an input is under 16px —
	   lift every form field (search, Woo, comments, WPForms). */
	.search-form input[type="search"],
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.woocommerce input.input-text,
	.woocommerce .woocommerce-ordering select,
	.woocommerce .quantity .qty,
	.woocommerce-cart td.actions .coupon .input-text,
	.comment-form input[type="text"], .comment-form input[type="email"],
	.comment-form input[type="url"], .comment-form textarea,
	.wpforms-container .wpforms-field input[type="text"],
	.wpforms-container .wpforms-field input[type="email"],
	.wpforms-container .wpforms-field input[type="tel"],
	.wpforms-container .wpforms-field input[type="number"],
	.wpforms-container .wpforms-field input[type="url"],
	.wpforms-container .wpforms-field textarea,
	.wpforms-container .wpforms-field select { font-size: 16px; }

	/* Hero: calmer scale, fluid headline. */
	.hero-inner { gap: 30px; }
	.hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
	.hero-lead { font-size: 1.04rem; }
	.section-head { margin-bottom: 28px; }

	/* Shop toolbar stacks: count on its own line, ordering
	   select full width with a 46px-tall touch area. */
	.woocommerce .woocommerce-result-count { float: none; margin: 6px 0 8px; }
	.woocommerce .woocommerce-ordering { float: none; width: 100%; margin: 0 0 18px; }
	.woocommerce .woocommerce-ordering select { width: 100%; min-height: 46px; }
	.woocommerce .woocommerce-breadcrumb { font-size: 0.84rem; line-height: 1.5; padding-top: 14px; }

	/* Product grid: a real 2-up grid on phones (the base grid
	   had no column count, so cards stacked full width). */
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.woocommerce ul.products li.product { padding: 12px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.99rem; }
	.woocommerce ul.products li.product .button {
		margin-top: auto; width: 100%; padding: 11px 10px; font-size: 0.92rem;
	}

	/* Two-column Woo layouts (checkout, account addresses,
	   thank-you) stack instead of squeezing. */
	.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 {
		float: none; width: 100%; margin-bottom: 18px;
	}

	/* Single product: comfortable buy button height. */
	.woocommerce div.product form.cart .single_add_to_cart_button { min-height: 52px; }

	/* Pagination links become proper touch targets. */
	.pagination .page-numbers,
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span { padding: 11px 14px; }

	/* WPForms (Contact page): fields truly full width. */
	.wpforms-container .wpforms-field input[type="text"],
	.wpforms-container .wpforms-field input[type="email"],
	.wpforms-container .wpforms-field input[type="tel"],
	.wpforms-container .wpforms-field input[type="number"],
	.wpforms-container .wpforms-field input[type="url"],
	.wpforms-container .wpforms-field textarea,
	.wpforms-container .wpforms-field select {
		width: 100%; max-width: 100%; padding: 11px 13px; border-radius: 10px;
	}
	.wpforms-container button[type="submit"] { min-height: 48px; padding: 12px 26px; }

	/* Footer: more breathing room, ≥44px menu link rows. */
	.footer-main { gap: 22px; }
	.footer-main li { margin-bottom: 4px; }
	.footer-main a { display: inline-block; padding: 7px 0; }
	.footer-widgets .widget { padding: 18px; }
}

/* ---------- Phones (≤560px) ---------- */
@media (max-width: 560px) {
	.announcement { font-size: 0.78rem; padding: 8px 12px; }
	.wrap { padding: 0 16px; }
	.section { padding: 38px 0; }
	.section--tight { padding: 28px 0; }
	.content-area { padding: 34px 0 48px; }
	.page-hero { padding: 30px 0; }

	/* Header shrinks gracefully instead of wrapping awkwardly. */
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 46px; }
	.site-title { font-size: 1.08rem; }
	.site-description { font-size: 0.66rem; letter-spacing: 0.06em; }
	a.header-action { font-size: 0.92rem; }
	.search-form button, .search-form input[type="submit"] { padding: 10px 14px; }

	/* Hero: stacked full-width CTAs. */
	.hero-inner { padding-top: 38px; padding-bottom: 42px; gap: 26px; }
	.hero h1 { font-size: clamp(1.85rem, 9vw, 2.15rem); }
	.hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
	.hero-ctas .btn { width: 100%; }

	/* Category tiles stay 2-up on phones (this intentionally
	   overrides the v1.0.1 ≤560px single-column rule above);
	   only the padding and type shrink. */
	.tile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.tile { padding: 16px 14px; }
	.tile .tile-mark { width: 38px; height: 38px; font-size: 1.1rem; margin-bottom: 4px; }
	.tile h3 { font-size: 1rem; }
	.tile p { font-size: 0.86rem; }
	.tile .tile-count { font-size: 0.72rem; }

	.channel { padding: 22px 18px; }
	.channel .btn { align-self: stretch; }
	.cta-band { padding: 30px 20px; }
	.cta-band h2 { font-size: 1.45rem; }
	.notice-panel { padding: 22px 18px; }
	.error-404 .big-code { font-size: 3.6rem; }

	/* WooCommerce on small phones. */
	.woocommerce div.product .product_title { font-size: 1.55rem; }
	.woocommerce ul.products li.product .price { font-size: 0.98rem; }
	.woocommerce span.onsale { top: 10px; left: 10px; padding: 3px 9px; font-size: 0.74rem; }
	.woocommerce-cart table.shop_table .product-thumbnail img { max-width: 64px; width: 64px; }
	.woocommerce-cart td.actions .coupon { flex-direction: column; align-items: stretch; }
	.woocommerce-cart td.actions .coupon .input-text,
	.woocommerce-cart td.actions .coupon .button,
	.woocommerce-cart td.actions > .button { width: 100%; }
	/* In the stacked (column) layout the tablet rule's flex:1 1 160px
	   would stretch the field vertically — pin it to button height. */
	.woocommerce-cart td.actions .coupon .input-text { flex: 0 0 auto; height: 48px; max-height: 48px; }
	.woocommerce-cart td.actions > .button { margin-top: 10px; }
	.woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button {
		float: none; display: inline-block; margin: 8px 0 0;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 12px; font-size: 0.94rem; }

	/* Account order tables scroll sideways inside their card
	   rather than crushing or pushing the page wide. */
	.woocommerce-account table.shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	.wpforms-container button[type="submit"] { width: 100%; }

	/* Footer stacks and centres its closing line. */
	.footer-main { padding: 36px 0 26px; }
	.footer-brand p { max-width: none; }
	.footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

/* ---------- Small phones (≤400px) ---------- */
@media (max-width: 400px) {
	h2 { font-size: 1.55rem; }
	.nav-toggle { padding: 11px 13px; }
	.site-description { letter-spacing: 0.04em; }

	.tile { padding: 14px 12px; }
	.tile h3 { font-size: 0.94rem; }

	.woocommerce ul.products { gap: 10px; }
	.woocommerce ul.products li.product { padding: 10px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.92rem; }
	.woocommerce ul.products li.product .button { font-size: 0.86rem; padding: 10px 6px; }

	/* Badges slim down together so SOLD OUT (top-right) and the
	   Sale flash (top-left) cannot meet on a narrow card. */
	.brh-sold-out { font-size: 0.6rem; padding: 4px 8px; letter-spacing: 0.1em; border-width: 1px; }
	.woocommerce span.onsale { font-size: 0.68rem; padding: 2px 8px; }
}

/* ---------- Very small phones (≤350px): single column ---------- */
@media (max-width: 350px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.tile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Mobile redesign (v1.0.3)
   Interaction patterns only: slide-in drawer menu, a cleaner
   mobile header row, and a stronger mobile homepage (single
   hero CTA, 2x2 trust panel, full-width category cards).
   Colours, copy and branding remain Bones Realms' own.
   How the drawer works: the .nav-drawer wrapper is
   display:contents on desktop (its children — the primary
   nav — lay out exactly as before), and becomes a fixed
   slide-in panel at ≤860px. The drawer-only pieces (head,
   search, utility grid) and the mobile-only basket link are
   hidden on desktop. All v1.0.1/v1.0.2 fixes are preserved.
   ============================================================ */

/* ---------- Drawer scaffolding (all screens) ---------- */
.header-basket { display: none; }
.nav-drawer-head, .nav-drawer-search, .nav-drawer-utils { display: none; }
.nav-backdrop {
	position: fixed; inset: 0; z-index: 990;
	background: rgba(7, 26, 48, 0.55);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.nav-backdrop.is-open {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity .25s ease;
}
/* Scroll lock while the drawer is open (class set by main.js). */
body.brh-drawer-open { overflow: hidden; }

@media (min-width: 861px) {
	/* Desktop: the wrapper disappears and the primary nav is a
	   direct flex item of the header again — zero layout change. */
	.nav-drawer { display: contents; }
}

/* ---------- Tablets & phones (≤860px): the drawer ---------- */
@media (max-width: 860px) {
	.nav-drawer {
		display: flex; flex-direction: column;
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
		width: 86vw; max-width: 340px;
		background: var(--brh-cream-bg);
		box-shadow: -18px 0 44px rgba(7, 26, 48, 0.35);
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		transform: translateX(105%); visibility: hidden;
		transition: transform .28s ease, visibility 0s linear .28s;
	}
	/* Keep the drawer clear of the WordPress admin bar. */
	body.admin-bar .nav-drawer { top: 32px; }
	.nav-drawer.is-open {
		transform: none; visibility: visible;
		transition: transform .28s ease;
	}

	/* Drawer header: "MENU" + a big, obvious close button. */
	.nav-drawer-head {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 10px 12px 10px 20px; background: #fff;
		border-bottom: 2px solid var(--brh-navy);
	}
	.nav-drawer-title {
		font-size: 1rem; font-weight: 900; letter-spacing: 0.22em;
		text-transform: uppercase; color: var(--brh-navy);
	}
	.nav-drawer-close {
		flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
		background: #fff; border: 1px solid var(--brh-line); border-radius: 10px;
		color: var(--brh-navy); font-family: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
	}
	.nav-drawer-close:hover, .nav-drawer-close:focus { background: var(--brh-violet-soft); color: var(--brh-purple); }

	/* Search at the top of the drawer. */
	.nav-drawer-search { display: block; padding: 16px 18px 4px; }
	.nav-drawer-search .search-form { display: flex; width: 100%; }
	.nav-drawer-search .search-form label { flex: 1; display: flex; min-width: 0; }
	.nav-drawer-search .search-form input[type="search"] { width: 100%; }

	/* The primary menu inside the drawer: big separated rows
	   on cream — this replaces the v1.0.1/v1.0.2 dropdown panel. */
	.nav-drawer .primary-nav {
		display: block; width: auto; margin: 0; order: initial;
		background: transparent; border: 0; border-radius: 0; padding: 8px 0 12px;
	}
	.nav-drawer .primary-nav ul { display: block; padding: 0; margin: 0; gap: 0; }
	.nav-drawer .primary-nav li { border: 0; border-bottom: 1px solid var(--brh-line); }
	.nav-drawer .primary-nav li:last-child { border-bottom: 1px solid var(--brh-line); }
	.nav-drawer .primary-nav a {
		display: flex; align-items: center; min-height: 56px;
		padding: 14px 20px; border-radius: 0;
		color: var(--brh-navy); font-size: 1.06rem; font-weight: 700;
	}
	.nav-drawer .primary-nav a:hover, .nav-drawer .primary-nav a:focus {
		background: var(--brh-violet-soft); color: var(--brh-purple);
	}
	.nav-drawer .primary-nav .current-menu-item > a,
	.nav-drawer .primary-nav .current_page_item > a {
		background: var(--brh-violet-soft); color: var(--brh-purple);
		box-shadow: inset 4px 0 0 var(--brh-gold);
	}
	.nav-drawer .primary-nav ul ul {
		position: static; display: block; min-width: 0;
		margin: 0; padding: 0 0 8px 20px; border: 0; border-radius: 0;
		background: transparent; box-shadow: none;
	}
	.nav-drawer .primary-nav ul ul li { border-bottom: 0; }
	.nav-drawer .primary-nav ul ul a { min-height: 48px; font-size: 0.98rem; font-weight: 600; }

	/* Collapsible drawer groups (v1.0.15): the parent rows
	   (TCG, Comics) start with their sub-menu collapsed; the
	   parent link is the toggle — main.js initMenuParents()
	   owns its click (preventDefault + .is-expanded on the
	   <li> + aria-expanded), accordion-style, so opening one
	   group closes the other. The chevron sits at the row's
	   right edge and flips when open. Scoped to .nav-drawer
	   inside this ≤860px block only — the desktop nav and
	   its ≥861px hover mega menu are unaffected. */
	.nav-drawer .primary-nav .menu > li.menu-item-has-children > a {
		justify-content: space-between;
	}
	.nav-drawer .primary-nav .menu > li.menu-item-has-children > a::after {
		content: ""; flex: 0 0 auto; margin-left: 12px;
		width: 9px; height: 9px;
		border-right: 2.5px solid var(--brh-purple);
		border-bottom: 2.5px solid var(--brh-purple);
		transform: rotate(45deg);
		transition: transform 0.25s ease;
	}
	.nav-drawer .primary-nav .menu > li.menu-item-has-children.is-expanded > a::after {
		transform: rotate(225deg);
	}
	.nav-drawer .primary-nav .menu > li.menu-item-has-children > ul.sub-menu {
		max-height: 0; overflow: hidden; visibility: hidden;
		padding-top: 0; padding-bottom: 0;
		transition: max-height 0.3s ease, padding-bottom 0.3s ease, visibility 0s linear 0.3s;
	}
	.nav-drawer .primary-nav .menu > li.menu-item-has-children.is-expanded > ul.sub-menu {
		max-height: 360px; visibility: visible;
		padding-bottom: 8px;
		transition: max-height 0.3s ease, padding-bottom 0.3s ease, visibility 0s;
	}

	/* Utility buttons pinned to the foot of the drawer. */
	.nav-drawer-utils {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		margin-top: auto; padding: 18px;
		background: #fff; border-top: 1px solid var(--brh-line);
	}
	.nav-drawer-utils a {
		display: flex; align-items: center; justify-content: center;
		min-height: 48px; padding: 10px 8px; text-align: center;
		border: 1.5px solid var(--brh-navy); border-radius: 10px;
		color: var(--brh-navy); font-weight: 700; font-size: 0.95rem; text-decoration: none;
	}
	.nav-drawer-utils a:hover, .nav-drawer-utils a:focus {
		background: var(--brh-violet-soft); border-color: var(--brh-purple); color: var(--brh-purple);
	}

	/* Mobile header row: branding | Basket (with count) | ☰.
	   My Account moves into the drawer, so the actions row below
	   becomes search only. */
	.header-basket {
		display: inline-flex; align-items: center; gap: 7px;
		margin-left: auto; min-height: 44px; padding: 8px 2px;
		color: var(--brh-cream); font-weight: 700; font-size: 0.98rem; text-decoration: none;
	}
	.header-basket:hover, .header-basket:focus { color: var(--brh-gold); }
	.header-basket .cart-count {
		display: inline-grid; place-items: center;
		width: 23px; height: 23px; min-width: 23px; margin-left: 0; padding: 0;
		border-radius: 50%; font-size: 0.76rem;
	}
	.nav-toggle {
		margin-left: 8px; width: 48px; height: 48px; min-height: 48px; padding: 0;
		display: inline-grid; place-items: center;
		background: transparent; border: 2px solid var(--brh-bone); border-radius: 10px;
		font-size: 0; /* the "Menu" label is kept for screen readers only */
	}
	.nav-toggle .nav-toggle-icon { margin: 0; font-size: 1.35rem; line-height: 1; color: var(--brh-cream); }
	.header-actions { padding-top: 2px; }
	.header-actions a.header-action { display: none; }
}

/* Admin bar is taller on narrow admin screens. */
@media (max-width: 782px) {
	body.admin-bar .nav-drawer { top: 46px; }
}

/* ---------- Phones (≤560px): homepage ---------- */
@media (max-width: 560px) {
	/* Hero: wider feel, one strong primary CTA; the secondary
	   action drops to a quiet text link beneath it. */
	.hero .wrap { padding-left: 14px; padding-right: 14px; }
	.hero-inner { padding-top: 34px; }
	.hero .hero-ctas { gap: 12px; }
	.hero .hero-ctas .btn--gold { width: 100%; }
	.hero .hero-ctas .btn--outline {
		width: auto; align-self: center; min-height: 0; padding: 4px 6px;
		background: transparent; border: 0; border-radius: 0;
		color: var(--brh-gold); font-size: 0.98rem;
		text-decoration: underline; text-underline-offset: 3px;
	}

	/* Section headings: large, left-aligned, gold rule under. */
	.section-head { text-align: left; margin-left: 0; margin-right: 0; }
	.section-head .eyebrow { justify-content: flex-start; }
	.section-head h2 { font-size: 1.7rem; }
	.section-head h2::after {
		content: ""; display: block; width: 56px; height: 3px;
		border-radius: 2px; background: var(--brh-gold); margin-top: 12px;
	}

	/* Category tiles become large full-width cards: palette
	   gradient (or the category thumbnail, when one is set,
	   via the --brh-tile-bg custom property from the template)
	   with the name large at the bottom-left. */
	.tile-grid { grid-template-columns: 1fr; gap: 14px; }
	.tile {
		position: relative; overflow: hidden; min-height: 162px;
		justify-content: flex-end; gap: 4px; padding: 18px;
		border: 0; border-radius: 16px; color: var(--brh-cream);
		background-color: var(--brh-navy-3);
		background-image: var(--brh-tile-bg, none), linear-gradient(155deg, var(--brh-navy-3), var(--brh-purple));
		background-size: cover; background-position: center;
		box-shadow: 0 10px 24px rgba(7, 26, 48, 0.18);
	}
	.tile:nth-child(4n+2) { background-image: var(--brh-tile-bg, none), linear-gradient(155deg, var(--brh-purple), var(--brh-navy-2)); }
	.tile:nth-child(4n+3) { background-image: var(--brh-tile-bg, none), linear-gradient(155deg, var(--brh-navy-2), #14406E); }
	.tile:nth-child(4n)   { background-image: var(--brh-tile-bg, none), linear-gradient(155deg, #14406E, var(--brh-purple)); }
	.tile--has-thumb::before {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(180deg, rgba(7, 26, 48, 0.04) 30%, rgba(7, 26, 48, 0.85));
	}
	.tile > * { position: relative; z-index: 1; }
	.tile:hover, .tile:focus { transform: none; color: var(--brh-cream); }
	.tile .tile-mark {
		width: 40px; height: 40px; margin-bottom: 6px; font-size: 1.15rem;
		background: rgba(244, 247, 251, 0.16); color: var(--brh-gold);
	}
	.tile h3 { color: #fff; font-size: 1.32rem; }
	.tile p { color: var(--brh-bone); font-size: 0.9rem; }
	.tile .tile-count { padding-top: 4px; color: var(--brh-gold); font-size: 0.8rem; }
	.tile .tile-count::after { content: " \2192"; }

	/* Trust points: the four cards become one 2x2 panel with
	   hairline dividers (same copy, compact rendering). */
	.trust-grid {
		grid-template-columns: 1fr 1fr; gap: 0;
		background: var(--brh-navy-3); border: 1px solid var(--brh-purple);
		border-radius: var(--brh-radius); overflow: hidden;
	}
	.trust-point { background: transparent; border: 0; border-radius: 0; padding: 18px 15px; }
	.trust-point:nth-child(odd) { border-right: 1px solid var(--brh-purple); }
	.trust-point:nth-child(-n+2) { border-bottom: 1px solid var(--brh-purple); }
	.trust-point .trust-icon { font-size: 1.3rem; margin-bottom: 6px; }
	.trust-point h3 { font-size: 0.99rem; margin-bottom: 4px; }
	.trust-point p { font-size: 0.82rem; line-height: 1.5; }
}

/* ============================================================
   Fixes (v1.0.4)
   1) PRODUCT GRID. Root cause, in two layers: the base rule
   for ul.products declared display:grid but no
   grid-template-columns outside the phone breakpoints, so on
   desktop the grid had a single implicit column and every
   card stretched full width; and WooCommerce's own layout
   stylesheet — printed after this theme's — lays li.product
   out the classic way, with floats, percentage widths and
   .first / nth-child clears. On phones those widths and
   clears survived inside (and around) the intended grid,
   giving half-width cards stacked one per row, an empty left
   slot in the first row and other float/clear misalignment.
   The rules below therefore declare the grid explicitly at
   every width and fully neutralise float, clear, width,
   flex and margins on the items. !important is used only on
   the properties WooCommerce's later stylesheet also sets,
   so these win regardless of stylesheet load order.
   2) Loop images now fill the card top (they were rendering
   at natural thumbnail size, floating small in a tall card).
   3) Trust panel: the unbreakable email string forced its
   grid column to min-content width; columns are now
   minmax(0, 1fr) with wrapping allowed.
   4) Small-width nits: wrapper padding restated, the search
   button can no longer be squeezed ("Sear..."), the SOLD
   OUT badge never wraps, and category tiles pin their whole
   content group to the bottom on phones (the base
   margin-top:auto on .tile-count was absorbing the free
   space and defeating justify-content:flex-end).
   ============================================================ */

/* ---------- Product grid: explicit at every width ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	float: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important; display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important; max-width: none !important;
	float: none !important; clear: none !important;
	margin: 0 !important; flex: none !important;
	min-width: 0;
}
/* Equal-height cards: the product link grows, the button
   (a sibling after the link) pins to the card bottom. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block; flex: 1 1 auto;
}
.woocommerce ul.products li.product .button { margin-top: auto; }
/* Loop image fills the full card width at natural aspect. */
.woocommerce ul.products li.product a img {
	display: block; width: 100% !important; max-width: 100%; height: auto; margin: 0;
}
@media (max-width: 1020px) {
	.woocommerce ul.products, .woocommerce-page ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 860px) {
	.woocommerce ul.products, .woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px;
	}
}
@media (max-width: 350px) {
	.woocommerce ul.products, .woocommerce-page ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ---------- Sold Out badge: one slim pill, never wraps ---------- */
.brh-sold-out { white-space: nowrap; }

/* ---------- Search form: the button keeps its full label ---------- */
.search-form input[type="search"] { min-width: 0; flex: 1 1 auto; }
.search-form button, .search-form input[type="submit"] {
	flex: 0 0 auto; flex-shrink: 0; white-space: nowrap;
}
@media (max-width: 400px) {
	.search-form button, .search-form input[type="submit"] {
		padding: 10px 12px; font-size: 0.92rem;
	}
}

/* ---------- Phones (≤560px) ---------- */
@media (max-width: 560px) {
	/* Content wrapper keeps a real gutter so text can never
	   sit flush to (or clipped by) the screen edge. */
	.wrap { padding-left: 16px; padding-right: 16px; }

	/* Trust 2x2 panel: columns may shrink below min-content
	   and long unbreakable strings (the email address) wrap
	   instead of forcing the panel off-screen. */
	.trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust-point { min-width: 0; padding: 16px 12px; overflow-wrap: anywhere; }
	.trust-point p, .trust-point a { overflow-wrap: anywhere; }

	/* Category tiles: drop the auto top margin on the count
	   so justify-content:flex-end pins the whole group —
	   icon, name, text, count — to the bottom of the card. */
	.tile .tile-count { margin-top: 6px; }

	/* Shop cards at 2-up: compact title and a proportionate
	   pill button instead of tall wrapped text. */
	.woocommerce ul.products li.product { padding: 12px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.98rem; line-height: 1.25;
	}
	.woocommerce ul.products li.product .button {
		width: 100%; min-height: 44px; padding: 11px 14px; font-size: 0.9rem;
	}
	.brh-sold-out { font-size: 0.64rem; padding: 4px 9px; letter-spacing: 0.09em; border-width: 1px; }
}

/* ---------- Small phones (≤400px) ---------- */
@media (max-width: 400px) {
	.trust-point { padding: 14px 10px; }
	.woocommerce ul.products, .woocommerce-page ul.products { gap: 10px; }
}

/* ============================================================
   Fixes (v1.0.5)
   Three surgical follow-ups to the v1.0.4 verification:
   1) PRODUCT GRID AT ≤350px. The v1.0.2 (≤350px) rule and
   the v1.0.4 ≤350px rule both collapse ul.products to one
   column, so in ~320px previews (and the smallest real
   phones) cards stack full width and look broken. Products
   now stay 2-across at every phone width, with a tighter
   gap and slightly smaller card type down there. The
   !important matches the v1.0.4 grid block so this later
   rule wins the cascade at equal specificity.
   2) SEARCH BUTTON CLIPPED AT 320px ("Searc"). Root cause:
   WordPress's default search form wraps the input in a
   <label>, so inside the flex .search-form the LABEL is
   the flex item — not the input. Every flex / min-width
   rule so far targeted the input inside the label, which
   therefore could not shrink below its intrinsic width;
   the row overflowed and pushed the (correctly unshrink-
   able) submit button past the right edge, where the
   page's overflow-x guard clipped its final letter. The
   label is now the flexible, shrinkable item, and at
   ≤400px the form gets compact, decisive sizing so the
   full word "Search" always fits.
   3) CATEGORY TILES (≤560px). Only the count line sat at
   the bottom of the tall full-width cards: the base
   .tile-count margin-top:auto was still absorbing the
   free space despite the v1.0.4 attempt, splitting the
   content group (icon / name / subline at the top, count
   alone at the bottom). The tile's flex-end packing is
   now enforced with !important and every child's margins
   are normalised, so the whole stack sits at the bottom.
   ============================================================ */

/* ---------- 1) Products stay 2-across on the smallest phones ---------- */
@media (max-width: 350px) {
	.woocommerce ul.products, .woocommerce-page ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}
	.woocommerce ul.products li.product { padding: 10px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9rem; line-height: 1.25;
	}
	.woocommerce ul.products li.product .button {
		padding: 10px 6px; font-size: 0.84rem;
	}
}

/* ---------- 2) Search form: the label is the flex item ---------- */
.search-form label {
	flex: 1 1 auto; min-width: 0; display: flex;
}
.search-form input[type="search"] {
	flex: 1 1 auto; min-width: 0; width: 100%;
}
@media (max-width: 400px) {
	/* Applies to the header form and the drawer form alike —
	   both use the same .search-form markup. */
	.search-form { gap: 6px; }
	.search-form input[type="search"] {
		flex: 1 1 auto; min-width: 0;
		border-radius: 999px;
	}
	.search-form button, .search-form input[type="submit"] {
		flex: 0 0 auto; flex-shrink: 0; white-space: nowrap;
		padding: 0 10px; font-size: 0.85rem; min-height: 42px;
		border-radius: 999px;
	}
}

/* ---------- 3) Category tiles: whole stack pinned to the bottom ---------- */
@media (max-width: 560px) {
	.tile {
		display: flex; flex-direction: column;
		justify-content: flex-end !important;
	}
	.tile > * { margin-top: 0; }
	.tile .tile-mark { margin: 0 0 8px; }
	.tile h3 { margin: 0; }
	.tile p { margin: 2px 0 0; }
	.tile .tile-count {
		/* !important beats the base margin-top:auto that was
		   defeating justify-content:flex-end. */
		margin: 6px 0 0 !important; padding-top: 0;
	}
}

/* ============================================================
   v1.0.6 — straight mobile header + image-led category tiles
   A) MOBILE HEADER. The flex-with-wrap header let the menu
   toggle drop onto its own row under the branding while the
   search row stopped short — dead navy space, nothing lined
   up. At ≤860px .header-inner is now a real grid:
   "branding actions" / "search search". The basket link and
   the toggle are grouped in a .header-mobile-actions cell
   (display:contents on desktop, so the classic header is
   byte-for-byte the old layout), and the branding gains a
   clear two-line hierarchy: the site NAME as the primary
   cream line (a .site-name element rendered only when a
   custom logo is set — the logo carries the name on
   desktop) over the tagline as a smaller gold line.
   B) IMAGE-LED TILES. Categories with a thumbnail set are
   now image cards at EVERY width: front-page.php emits a
   real <img class="tile-img">, the card takes the image's
   4:3 aspect, all text children are hidden except the
   heading, which stays screen-reader-only (the image
   already carries the game name). The v1.0.3 treatment —
   thumbnail dimmed under a gradient with text over it on
   mobile only — is removed for these tiles. Tiles without
   a thumbnail keep the gradient + text design untouched.
   ============================================================ */

/* ---------- Scaffolding (all screens) ---------- */
.header-mobile-actions { display: contents; }
.site-name { display: none; }

/* ---------- B) Image-led category tiles (all widths) ---------- */
.tile--has-thumb {
	padding: 0; overflow: hidden; aspect-ratio: 4 / 3;
	background: var(--brh-navy-2);
}
.tile--has-thumb .tile-img {
	flex: 1 1 auto; min-height: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .3s ease, filter .3s ease;
}
.tile--has-thumb:hover .tile-img,
.tile--has-thumb:focus .tile-img { transform: scale(1.03); filter: brightness(1.06); }
/* Text children hidden — the image is the label. */
.tile--has-thumb .tile-mark,
.tile--has-thumb p,
.tile--has-thumb .tile-count { display: none; }
/* …except the heading, kept for screen readers only (higher
   specificity + !important so the ≤560px .tile > * rule from
   v1.0.3 can never drag it back into view). */
.tile--has-thumb h3 {
	position: absolute !important; width: 1px !important; height: 1px !important;
	margin: -1px !important; padding: 0 !important; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Phones: image tiles shed the v1.0.3/v1.0.5 full-width text
   card treatment (gradient stack, min-height, bottom-pinned
   text group, gradient overlay) and stay pure 4:3 images in
   the single-column tile grid. */
@media (max-width: 560px) {
	.tile--has-thumb {
		min-height: 0; padding: 0;
		background-image: none; background-color: var(--brh-navy-2);
		justify-content: normal;
	}
	.tile--has-thumb::before { content: none; display: none; }
	.tile--has-thumb > * { position: static; }
	.tile--has-thumb .tile-img { position: relative; z-index: 1; }
}

/* ---------- A) Mobile header grid (≤860px) ---------- */
@media (max-width: 860px) {
	.header-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "branding actions" "search search";
		align-items: center;
		column-gap: 12px; row-gap: 10px;
	}
	.site-branding { grid-area: branding; min-width: 0; }
	.site-branding-text { min-width: 0; overflow: hidden; }

	/* Name first, tagline beneath — both single-line, scaling
	   down before they would ever clip (ellipsis only as the
	   last resort, via overflow on the text stack). */
	.site-name {
		display: block; margin: 0;
		color: var(--brh-cream); font-weight: 900;
		font-size: 1.05rem; line-height: 1.12; letter-spacing: -0.01em;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.site-description {
		margin: 3px 0 0; font-size: 0.62rem; letter-spacing: 0.12em;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	/* One actions cell: Basket (text + count) and the 44px
	   hamburger, vertically centred on the branding row and
	   never allowed to wrap beneath it. */
	.header-mobile-actions {
		grid-area: actions; justify-self: end;
		display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
	}
	.header-basket { margin-left: 0; }
	.nav-toggle {
		margin-left: 0; flex: 0 0 auto;
		width: 44px; height: 44px; min-height: 44px;
	}

	/* Search owns the second row, edge to edge of the wrap. */
	.header-actions { grid-area: search; width: 100%; padding: 0; }
	.header-actions .search-form { flex: 1 1 auto; width: 100%; max-width: none; }
}

@media (max-width: 400px) {
	/* Scale the name before anything can clip. */
	.site-name { font-size: 0.95rem; }
	.site-description { font-size: 0.58rem; letter-spacing: 0.09em; }
	.header-mobile-actions { gap: 8px; }
}
/* ============================================================
   v1.0.7 — pro header at every width + compact mobile tiles
   A) DESKTOP HEADER (>860px). The v1.0.6 header read as two
   unbalanced rows and never showed the site name beside the
   logo (the .site-name line was mobile-only). Row 1 is now
   a single flex row: branding left (logo ~54px, name as the
   primary cream line at ~1.25rem, tagline gold beneath),
   the .header-actions search flexing through the centre
   (max ~560px), My Account / Basket right. The primary nav
   — a display:contents child of .header-inner via the
   drawer wrapper — takes order 3 and becomes row 2: full
   width, left-aligned, under a hairline, ~46px tall.
   B) MOBILE HEADER (≤860px). Pattern borrowed from a
   reference store's mobile header (layout only — our own
   branding and inline SVG icons): one slim icon row,
   [menu + search | logo lockup | account + basket], and NO
   permanent search bar. The .header-actions row is hidden;
   search lives in a pop-up panel (.search-panel) that the
   search toggle drops in directly under the header bar.
   Opening the drawer closes the pop-up (main.js).
   C) HERO ARTWORK (>860px). The card cluster could push
   the gold comic past the hero's right edge, where the
   hero's overflow guard clipped its text mid-word. The
   cluster is now constrained to its column and every card
   sits fully inside it, rotation overhang included.
   D) MOBILE CATEGORY TILES (≤860px). The full-width image
   cards felt huge; tiles now run 2-per-row at every phone
   width. Image tiles keep their pure-artwork 4:3 cards;
   text tiles (Sealed, Singles, fallbacks) go compact —
   description hidden, whole stack bottom-left at 4:3.
   ============================================================ */

/* ---------- Scaffolding (all screens) ---------- */
/* Mobile-only header pieces: inert until the ≤860px block. */
.search-toggle { display: none; }
.header-mobile-icons { display: none; }
.search-panel { display: none; }

/* ---------- A) Desktop header + C) hero (≥861px) ---------- */
@media (min-width: 861px) {
	/* Row 1: branding | centre search | account actions. */
	.header-inner {
		flex-wrap: wrap; gap: 0 28px;
		padding-top: 16px; padding-bottom: 10px;
	}
	.site-branding { order: 1; }
	.site-branding .custom-logo { max-height: 54px; }

	/* The name is the primary branding line at last —
	   the logo no longer has to carry it alone. */
	.site-name {
		display: block; margin: 0;
		color: var(--brh-cream); font-weight: 900;
		font-size: 1.25rem; line-height: 1.12; letter-spacing: -0.01em;
		white-space: nowrap;
	}
	.site-description { font-size: 0.68rem; margin-top: 3px; }

	.header-actions {
		order: 2; flex: 1 1 auto; width: auto;
		padding: 0; flex-wrap: nowrap; align-items: center; gap: 18px;
	}
	.header-actions .search-form {
		flex: 1 1 auto; max-width: 560px; margin-inline: auto;
	}
	a.header-action { flex: 0 0 auto; white-space: nowrap; }

	/* Row 2: the nav on its own hairline-divided row,
	   items at natural spacing from the left — no dead
	   navy space stranded on either side of the header. */
	.primary-nav {
		order: 3; width: 100%;
		margin: 14px 0 0; padding: 2px 0 6px;
		border-top: 1px solid var(--brh-navy-3);
	}
	.primary-nav ul { justify-content: flex-start; gap: 2px; }
	.primary-nav a { padding-top: 8px; padding-bottom: 8px; }

	/* C) Hero: less void up top. (The fenced card cluster
	   this section used to position was replaced by the
	   v1.0.12 booster-box showcase — see the end of file.) */
	.hero-inner { padding-top: 48px; padding-bottom: 56px; }
}

/* ---------- B) Mobile icon header + D) compact tiles (≤860px) ---------- */
@media (max-width: 860px) {
	/* One slim row: [left icons] [branding] [right icons].
	   This replaces the v1.0.6 "branding actions / search
	   search" grid — there is no search row any more. */
	.header-inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "left branding right";
		column-gap: 8px; row-gap: 0;
		padding-top: 10px; padding-bottom: 10px;
	}
	.site-branding {
		grid-area: branding; justify-self: center;
		gap: 8px; min-width: 0;
	}
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 40px; }

	/* Name fully readable at 390px: a touch smaller than
	   the v1.0.6 mobile size, tagline smaller beneath it. */
	.site-name { font-size: 0.98rem; }
	.site-description { font-size: 0.58rem; letter-spacing: 0.1em; }

	/* Left cluster: plain icon buttons, no border boxes. */
	.header-mobile-actions {
		grid-area: left; justify-self: start;
		display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
	}
	.nav-toggle {
		width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0;
		display: inline-grid; place-items: center;
		background: transparent; border: 0; border-radius: 8px;
		color: var(--brh-cream);
	}
	.nav-toggle .nav-toggle-icon { display: grid; place-items: center; margin: 0; }
	.search-toggle {
		display: inline-grid; place-items: center;
		width: 40px; height: 40px; padding: 0; margin: 0;
		background: transparent; border: 0; border-radius: 8px;
		color: var(--brh-cream); font: inherit; cursor: pointer;
	}
	.nav-toggle:hover, .nav-toggle:focus,
	.search-toggle:hover, .search-toggle:focus {
		background: rgba(233, 239, 247, 0.08); color: var(--brh-gold);
	}

	/* Right cluster: account + basket icon links, the
	   basket count a small gold badge overlapping its icon. */
	.header-mobile-icons {
		grid-area: right; justify-self: end;
		display: flex; align-items: center; gap: 4px;
	}
	.header-icon-link {
		position: relative; display: inline-grid; place-items: center;
		width: 40px; height: 40px; border-radius: 8px;
		color: var(--brh-cream); text-decoration: none;
	}
	.header-icon-link:hover, .header-icon-link:focus { color: var(--brh-gold); }
	.header-mobile-icons .cart-count {
		position: absolute; top: 0; right: -1px;
		display: inline-grid; place-items: center;
		min-width: 18px; height: 18px; padding: 0 4px; margin: 0;
		border-radius: 999px; font-size: 0.66rem; line-height: 1;
	}

	/* The old second row (inline search + text actions)
	   is gone on mobile — search lives in the pop-up. */
	.header-actions { display: none; }

	/* Search pop-up: absolutely positioned under the
	   header bar (the header is position:relative, so no
	   admin-bar offsets are needed), below the drawer and
	   its backdrop in z-order. Hidden state is visibility
	   + a small lift; .is-open (main.js) drops it in and
	   the input takes focus. The v1.0.5 label-flex fix on
	   .search-form applies to this form unchanged, so the
	   purple button keeps its full "Search" label. */
	.search-panel {
		display: block; position: absolute;
		top: 100%; left: 0; right: 0; z-index: 60;
		padding: 12px 0;
		background: var(--brh-navy-2);
		border-bottom: 3px solid var(--brh-purple);
		box-shadow: 0 18px 30px rgba(7, 26, 48, 0.35);
		opacity: 0; visibility: hidden; pointer-events: none;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.search-panel.is-open {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	.search-panel .search-form { display: flex; width: 100%; max-width: none; }

	/* D) Category tiles: compact 2-per-row at every phone
	   width (this block sits later in the file than the
	   v1.0.3 ≤560px and v1.0.2 ≤350px single-column tile
	   rules, so it overrides them at equal specificity). */
	.tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

	/* Text tiles go compact and take the same 4:3 shape
	   as the image cards, content stacked bottom-left —
	   :not() keeps these off the pure-artwork tiles. */
	.tile:not(.tile--has-thumb) {
		aspect-ratio: 4 / 3; min-height: 0;
		padding: 14px; gap: 4px; justify-content: flex-end;
	}
	.tile:not(.tile--has-thumb) .tile-mark {
		width: 30px; height: 30px; border-radius: 9px;
		font-size: 0.95rem; margin: 0 0 4px;
	}
	.tile:not(.tile--has-thumb) h3 { font-size: 1rem; margin: 0; }
	.tile:not(.tile--has-thumb) p { display: none; }
	.tile:not(.tile--has-thumb) .tile-count {
		margin-top: 6px; padding-top: 0; font-size: 0.7rem;
	}
}

/* ---------- Small phones (≤400px): scale before anything clips ---------- */
@media (max-width: 400px) {
	.header-inner { column-gap: 4px; }
	.site-branding { gap: 6px; }
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 36px; }
	.site-name { font-size: 0.9rem; }
	.site-description { font-size: 0.54rem; letter-spacing: 0.07em; }
	.tile:not(.tile--has-thumb) { padding: 12px; }
	.tile:not(.tile--has-thumb) h3 { font-size: 0.94rem; }
}

/* ============================================================
   v1.0.8 — buttons off the homepage, shop filter chips,
   mega menu, mobile name fit, footer redesign
   1) HOMEPAGE BUTTONS. The written homepage sections no
   longer print their block-editor CTA buttons at all
   (stripped in front-page.php via brh_strip_button_blocks);
   the rules here just restore the vertical rhythm of the
   written content once the buttons are gone — headings
   breathe instead of colliding with what sits above them.
   2) SHOP FILTER. Was a scrollable row of pill chips in
   v1.0.8; v1.0.10 replaces it with a classic category
   <select> dropdown (.brh-shop-filter, rendered by
   brh_shop_filter_dropdown() in functions.php) after the
   chip row proved wider than the desktop wrap and clipped
   its last chip with no way to scroll it into view. The
   replacement rules live under "2) Shop category filter"
   below — no chip styles remain.
   3) MEGA MENU (≥861px). Top-level parents no longer get
   the narrow 220px dropdown: their sub-menu becomes a
   panel spanning the wrap under the nav row — bone-cream,
   gold top hairline, soft shadow — with the child links
   as a grid of cards (auto-fit columns, so TCG's four
   children land 4-up and a two-child panel lands 2-up).
   The li is position:static and the panel anchors to
   .header-inner (position:relative), which IS the wrap;
   an invisible ::before bridge covers the gap between
   the nav row and the panel so hover never drops.
   Palette and structure are ours; only the wide-panel
   idea is borrowed. Mobile drawer sub-menus are static
   and indented (v1.0.3) and are untouched.
   4) MOBILE NAME FIT (≤860px). The tagline line is hidden
   on phones (it lives inside the logo badge artwork),
   logo ~36px, icon buttons ~38px, gaps ~6px, name at
   0.92rem — and a final squeeze at ≤400px (36px buttons,
   32px logo, 4px gaps, 12px header gutters, name 0.85rem
   with tightened spacing). Budget at 360px: 336px content
   width − 152px icon clusters − 8px column gaps − 36px
   logo/gap leaves ≈140px for the name, against ≈135px of
   900-weight text at 0.85rem — it fits on one line with
   no ellipsis from 360px up (the ellipsis CSS survives
   only as a sub-350px safety net). Desktop lockup
   (name + tagline) is unchanged.
   5) FOOTER. footer.php no longer renders the Footer Area
   widget row (no more "Archives / Categories" boxes) and
   prints a new .footer-grid: Contact Us / Explore /
   Help & Info / Shop columns plus the bone-cream Realm
   List newsletter card (form + handler in functions.php).
   The old .footer-main rules simply go inert.
   ============================================================ */

/* ---------- 1) Written homepage content: rhythm ---------- */
.front-content .entry-content > :first-child { margin-top: 0; }
.front-content .entry-content h2 { margin-top: 1.6em; }
.front-content .entry-content h2:first-child { margin-top: 0; }

/* ---------- 2) Shop category filter (v1.0.10) ----------
   Classic dropdown replacing the v1.0.8 chip row. Styled to
   sit naturally beside WooCommerce's own sort select (white,
   hairline border, 10px radius, ~44px tall); the row can
   never overflow the wrap: the container is capped and the
   select is allowed to shrink (min-width: 0). */
.brh-shop-filter {
	display: flex; align-items: center; gap: 10px;
	max-width: 100%; margin: 2px 0 14px; clear: both;
}
.brh-shop-filter label {
	flex: 0 0 auto; white-space: nowrap;
	font-size: 0.95rem; font-weight: 700; color: var(--brh-navy);
}
.brh-cat-filter {
	flex: 0 1 auto; min-width: 0; max-width: 100%;
	height: 44px; padding: 10px 38px 10px 12px;
	font: inherit; font-size: 1rem; color: var(--brh-navy);
	background-color: #fff; border: 1px solid var(--brh-line);
	border-radius: 10px; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}
.brh-cat-filter:hover { border-color: var(--brh-purple); }
.brh-cat-filter:focus {
	border-color: var(--brh-violet);
	outline: 2px solid var(--brh-violet-soft); outline-offset: 0;
}
@media (max-width: 560px) {
	.brh-shop-filter label { font-size: 0.9rem; }
	.brh-cat-filter { flex: 1 1 auto; height: 46px; }
}

/* ---------- 5) Footer redesign ---------- */
.footer-grid {
	display: grid; gap: 34px; padding: 48px 0 34px;
	grid-template-columns: 1.35fr 0.85fr 1fr 1.15fr 300px;
}
.footer-grid h3 {
	color: var(--brh-gold); font-size: 1.02rem;
	letter-spacing: 0.06em; text-transform: uppercase;
	margin: 0 0 14px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--brh-bone); text-decoration: none; }
.footer-grid a:hover, .footer-grid a:focus {
	color: var(--brh-gold); text-decoration: underline;
}
.footer-blurb { font-size: 0.96rem; margin: 0 0 14px; max-width: 26em; }
.footer-contact-list { margin-bottom: 18px; }
.footer-contact-list a { text-decoration: underline; }
/* Channel links (v1.0.14; tightened v1.0.15): platform
   logos only, no text. The lockups are dark/coloured for
   light backgrounds, so each logo sits on a bone-cream chip
   to stay legible on the navy footer; the row lives under
   the Phone line. v1.0.15 metrics are sized so all three
   chips share ONE row in the ~250–280px Contact column:
   chip padding 0 10px, gap 8px, logos 18px tall with the
   wide Whatnot lockup capped at 80px — row total ≈263px.
   flex-wrap stays as a safety net for very narrow screens. */
.footer-channel-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-channel-logos li { margin: 0; }
.footer-grid a.footer-channel-chip {
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px; padding: 0 10px; border-radius: 10px;
	background: var(--brh-cream);
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.footer-channel-chip img {
	display: block; height: 18px; width: auto; max-width: 80px;
	object-fit: contain;
}
.footer-grid a.footer-channel-chip:hover,
.footer-grid a.footer-channel-chip:focus {
	background: var(--brh-bone); text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
/* The newsletter card: bone-cream on the navy footer. */
.footer-newsletter {
	background: var(--brh-cream); color: var(--brh-navy);
	border-radius: 14px; padding: 24px; align-self: start;
}
.footer-newsletter h3 { color: var(--brh-navy); margin-bottom: 8px; }
.footer-newsletter p { color: var(--brh-ink); font-size: 0.94rem; margin: 0; }
.realm-list-form { display: flex; position: relative; margin-top: 14px; }
.realm-list-form input[type="email"] {
	flex: 1 1 auto; min-width: 0;
	padding: 11px 14px; font: inherit; font-size: 0.95rem;
	background: #fff; border: 1px solid var(--brh-line);
	border-radius: 999px 0 0 999px;
}
.realm-list-form button {
	flex: 0 0 auto; padding: 11px 18px;
	font: inherit; font-size: 1.05rem; font-weight: 800;
	background: var(--brh-gold); color: var(--brh-navy);
	border: 0; border-radius: 0 999px 999px 0; cursor: pointer;
}
.realm-list-form button:hover, .realm-list-form button:focus {
	background: var(--brh-gold-dark);
}
/* Honeypot: parked far off-screen, never seen or tabbed to. */
.realm-honeypot {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.realm-note { margin-top: 12px; font-weight: 700; }
.realm-list-form + .realm-note { margin-top: 12px; }
.footer-newsletter .realm-note { font-size: 0.9rem; }
.realm-note--ok { color: var(--brh-purple); }
.realm-note--err { color: #b03030; }

@media (max-width: 1100px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
	.footer-newsletter { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.footer-grid { padding: 38px 0 28px; }
}
@media (max-width: 480px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 3) Mega menu (≥861px) ---------- */
@media (min-width: 861px) {
	/* The panel anchors to the header's wrap-width box. */
	.header-inner { position: relative; }

	/* Parent items give up their relative box so the panel
	   can span the wrap, and gain a small gold caret. */
	.primary-nav .menu > li.menu-item-has-children { position: static; }
	.primary-nav .menu > li.menu-item-has-children > a::after {
		content: "▾"; margin-left: 6px;
		font-size: 0.72em; color: var(--brh-gold);
	}

	/* The panel: full wrap width under the nav row. */
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu {
		display: none; position: absolute;
		top: 100%; left: 20px; right: 20px; z-index: 200;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: 14px; min-width: 0; margin: 0; padding: 26px 28px 28px;
		background: var(--brh-cream);
		border-top: 3px solid var(--brh-gold);
		border-radius: 0 0 14px 14px;
		box-shadow: 0 30px 50px rgba(7, 26, 48, 0.35);
	}
	.primary-nav .menu > li.menu-item-has-children:hover > ul.sub-menu,
	.primary-nav .menu > li.menu-item-has-children:focus-within > ul.sub-menu {
		display: grid;
	}
	/* Invisible bridge over the nav-row/header-bottom gap,
	   so the pointer never leaves the hover path. */
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu::before {
		content: ""; position: absolute;
		top: -24px; left: 0; right: 0; height: 24px;
	}

	/* Child links as cards. */
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li { min-width: 0; }
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li > a {
		display: block; height: 100%; padding: 16px 18px;
		background: #fff; border: 1px solid var(--brh-line);
		border-top: 3px solid var(--brh-navy-3); border-radius: 10px;
		color: var(--brh-navy); font-size: 1.05rem; font-weight: 800;
		text-decoration: none;
	}
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li:nth-child(3n+2) > a {
		border-top-color: var(--brh-purple);
	}
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li:nth-child(3n) > a {
		border-top-color: var(--brh-gold);
	}
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li > a::after {
		content: "→"; margin-left: 8px; color: var(--brh-gold-dark);
	}
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu > li > a:focus {
		background: var(--brh-violet-soft); color: var(--brh-purple);
	}
	/* Anything nested deeper inside a card stays a plain
	   static list — the mega panel is a two-level design. */
	.primary-nav .menu > li.menu-item-has-children > ul.sub-menu ul {
		position: static; display: block; min-width: 0;
		margin: 0; padding: 6px 0 0 14px;
		background: transparent; border: 0; border-radius: 0; box-shadow: none;
	}
}

/* ---------- 4) Mobile header: the full name fits (≤860px) ---------- */
@media (max-width: 860px) {
	/* Tagline hidden on phones — it is already lettered
	   inside the logo badge artwork beside the name. */
	.site-description { display: none; }

	.site-branding { gap: 6px; }
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 36px; }
	.header-inner { column-gap: 6px; }
	.header-mobile-actions { gap: 6px; }
	.header-mobile-icons { gap: 6px; }
	.nav-toggle, .search-toggle, .header-icon-link {
		width: 38px; height: 38px; min-height: 38px;
	}
	.site-name { font-size: 0.92rem; }
}

@media (max-width: 400px) {
	/* Final squeeze (see the budget in the section header):
	   narrower header gutters, 36px buttons, 32px logo,
	   4px gaps, name at 0.85rem with tightened spacing. */
	.site-header .wrap { padding-left: 12px; padding-right: 12px; }
	.header-inner { column-gap: 4px; }
	.header-mobile-actions, .header-mobile-icons { gap: 4px; }
	.site-branding { gap: 4px; }
	.site-branding .custom-logo, .site-branding .custom-logo-link img { max-height: 32px; }
	.nav-toggle, .search-toggle, .header-icon-link {
		width: 36px; height: 36px; min-height: 36px;
	}
	.site-name { font-size: 0.85rem; letter-spacing: -0.02em; }
}


/* ============================================================
   v1.0.9 — Branded preloader
   Full-screen navy loading overlay, printed first in the
   body by header.php and driven by main.js (initPreloader).
   First visit of a session only:
   - functions.php prints a <head> script that marks <html>
     .brh-no-preload when sessionStorage.brh_seen is set or
     the visitor prefers reduced motion — the overlay then
     never renders (no flash).
   - Otherwise <html> gets .brh-preloading, which locks
     scroll until main.js finishes the hide sequence.
   Safety nets, layered so the overlay can NEVER trap
   anyone: main.js has a 2.8s hard failsafe; the overlay
   carries its own CSS fade-out at 3.6s in case the script
   never runs; the scroll lock releases itself in CSS at
   ~4.2s; a <noscript> style hides the overlay outright;
   any click dismisses it.
   ============================================================ */

/* Return visits / reduced motion: never shown. */
.brh-no-preload .brh-preloader { display: none !important; }

/* Scroll lock while loading — with its own timed release. */
html.brh-preloading {
	overflow: hidden;
	animation: brh-preloader-scroll-release 0.1s linear 4.2s forwards;
}
@keyframes brh-preloader-scroll-release {
	to { overflow: visible; }
}

.brh-preloader {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	background: var(--brh-navy);
	transition: opacity 0.45s ease;
	/* CSS-only failsafe (see section header). main.js cancels
	   this animation the moment it takes over. */
	animation: brh-preloader-failsafe 0.5s ease 3.6s forwards;
}
@keyframes brh-preloader-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* States set by main.js during the hide sequence. */
.brh-preloader.is-hidden { opacity: 0; pointer-events: none; }
.brh-preloader.is-gone { display: none; }

.brh-preloader-inner {
	text-align: center; padding: 24px;
	animation: brh-preloader-rise 0.6s ease both;
}
@keyframes brh-preloader-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* Logo inside a rotating gold ring. */
.brh-preloader-logo-wrap {
	position: relative;
	width: 148px; height: 148px;
	margin: 0 auto 22px;
	display: flex; align-items: center; justify-content: center;
}
.brh-preloader-ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 3px solid rgba(56, 189, 248, 0.22);
	border-top-color: var(--brh-gold);
	animation: brh-preloader-spin 1.1s linear infinite;
}
@keyframes brh-preloader-spin {
	to { transform: rotate(360deg); }
}
.brh-preloader-logo {
	max-width: 104px; max-height: 104px;
	width: auto; height: auto;
	animation: brh-preloader-pulse 1.6s ease-in-out infinite;
}
@keyframes brh-preloader-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
.brh-preloader-logo-fallback {
	color: var(--brh-cream);
	font-size: 1rem; font-weight: 900;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: 0 18px;
}

.brh-preloader-name {
	margin: 0;
	color: var(--brh-cream);
	font-size: 1.35rem; font-weight: 900;
	letter-spacing: 0.18em; text-transform: uppercase;
}
.brh-preloader-tag {
	margin: 9px 0 0;
	color: var(--brh-gold);
	font-size: 0.78rem; font-weight: 700;
	letter-spacing: 0.3em; text-transform: uppercase;
}
@media (max-width: 400px) {
	.brh-preloader-name { font-size: 1.08rem; letter-spacing: 0.12em; }
	.brh-preloader-tag { font-size: 0.68rem; letter-spacing: 0.22em; }
}

/* Loading bar: CSS eases the fill to 90%; main.js completes
   it to 100% (the .is-done rule out-specifies the running
   keyframe animation and retires it) when the page is ready. */
.brh-preloader-bar {
	width: 160px; height: 3px;
	margin: 26px auto 0;
	background: var(--brh-navy-3);
	border-radius: 999px; overflow: hidden;
}
.brh-preloader-bar-fill {
	display: block; height: 100%; width: 0;
	background: var(--brh-gold); border-radius: inherit;
	animation: brh-preloader-fill 1.2s ease-out forwards;
}
@keyframes brh-preloader-fill {
	to { width: 90%; }
}
.brh-preloader.is-done .brh-preloader-bar-fill {
	animation: none; width: 100%;
	transition: width 0.3s ease;
}

/* Reduced motion: no animation at all (the <head> script
   normally catches this first — this is the second net). */
@media (prefers-reduced-motion: reduce) {
	.brh-preloader { display: none !important; }
}


/* ============================================================
   v1.0.12 — Hero booster-box showcase
   The hero's three pure-CSS artwork cards (two purple
   "TRADING CARD" tiles + the gold "TALES FROM THE REALM"
   comic) are gone, markup and CSS alike — the owner wants
   real product up there, kept simple: exactly THREE booster
   boxes in a slow scrolling loop, nothing crazy.
   - front-page.php builds the slides: the first 3 published
     products with a featured image; leftover slots fill with
     thumbnailed category cards; if there is nothing at all
     the art area is skipped and .hero-inner--no-art below
     collapses the grid to one column.
   - The slide list is printed twice; the track animates
     0 → -50% linearly so the loop is seamless. Both groups
     carry the same right padding, so the halves are exactly
     equal in width.
   - The viewport fades at both edges (mask) and the hero
     itself is overflow-hidden, so the page can never gain
     a horizontal scrollbar from the track.
   - Hover pauses the drift; prefers-reduced-motion stops
     it entirely and the boxes just sit there, statically.
   ============================================================ */

/* No art available: hero copy takes the full width. */
.hero-inner--no-art { grid-template-columns: 1fr; }
.hero-inner--no-art .hero-copy { max-width: 46em; }

.hero-marquee {
	min-width: 0; max-width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hero-marquee-track {
	display: flex; width: max-content;
	animation: brh-hero-marquee 32s linear infinite;
}
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }
@keyframes brh-hero-marquee {
	to { transform: translateX(-50%); }
}
.hero-marquee-group {
	display: flex; gap: 16px; padding-right: 16px;
}

/* One framed box: cream card, photo, small name beneath. */
.hero-slide {
	flex: 0 0 188px; width: 188px;
	display: flex; flex-direction: column; gap: 9px;
	background: var(--brh-cream-bg);
	border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
	padding: 12px; text-decoration: none;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.hero-slide-media { display: block; }
.hero-slide-img {
	display: block; width: 100%; height: 240px;
	object-fit: contain;
}
.hero-slide-name {
	color: var(--brh-navy); font-size: 0.85rem; font-weight: 700; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* Phones: the marquee sits under the hero text (the ≤860px
   hero grid is already single-column), full wrap width,
   slightly smaller boxes. */
@media (max-width: 860px) {
	.hero-slide { flex-basis: 150px; width: 150px; padding: 10px; }
	.hero-slide-img { height: 182px; }
	.hero-slide-name { font-size: 0.8rem; }
	.hero-marquee-track { animation-duration: 26s; }
}

/* Reduced motion: no drift, boxes shown statically. */
@media (prefers-reduced-motion: reduce) {
	.hero-marquee-track { animation: none; }
}


/* ============================================================
   v1.0.13 — Channel logos, Cardmarket tile, menu parents
   1) The live-show channel cards lead with each platform's
      official logo wordmark (theme assets: assets/img/
      whatnot.png, ebay.png, tiktok.png) in a fixed-height
      zone at the top of the card, so the three cards line
      up. The old big text platform names are gone from
      front-page.php — the logo IS the name — and the
      handle line sits directly under the logo.
   2) The homepage tile grid ends with a Cardmarket tile
      (the owner sells singles via Cardmarket; its card
      image ships in the theme as assets/img/cardmarket.png).
      It uses the standard .tile--has-thumb treatment —
      deliberately no extra CSS here.
   3) Primary-menu dropdown parents (TCG, Comics) are
      hover-only labels: functions.php rewrites their href
      to "#" and main.js swallows the click. No CSS change
      needed — the mega menu is hover-driven already.
   ============================================================ */

.channel-logo {
	height: 64px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 2px;
}
.channel-logo img {
	height: 52px; width: auto; max-width: 78%;
	object-fit: contain; display: block;
}

@media (max-width: 560px) {
	.channel-logo { height: 56px; }
	.channel-logo img { height: 44px; }
}

/* ============================================================
   v1.0.16 — Royal Blue rebrand: final logo in the header
   The header mark/name treatment is replaced by the final
   logo lockup (theme asset assets/img/bones-realms-logo.svg,
   transparent master — the wordmark is part of the artwork).
   The lockup rides at the same 54px cap the v1.0.7 header gave
   the old logo. At phone widths the wide lockup would shrink
   past legibility, so ≤860px swaps to the fallback pairing:
   the BR icon (assets/img/br-icon.png) + the site name as
   text in Bone (--brh-cream). Everything else in the header
   (grid areas, icon clusters, search pop-up, drawer) is the
   v1.0.15 layout, untouched. The footer takes the Deep
   shadow tone so the page ends a step darker than the Base
   header. Preloader colours follow the tokens automatically;
   its mark is the BR icon (header.php).
   ============================================================ */
.brh-brand-link {
	display: inline-flex; align-items: center;
	text-decoration: none; min-width: 0;
}
/* v1.0.17 hardening: shop, product and basket pages carry
   the .woocommerce / .woocommerce-page body classes, and
   WooCommerce's own stylesheet rule ".woocommerce-page img
   { height: auto; max-width: 100%; }" (specificity 0-1-1)
   outranked the v1.0.16 bare ".brh-brand-lockup" rule
   (0-1-0) — so on exactly those pages the lockup fell back
   to height:auto with its width capped at the header width
   and rendered near natural size (~460px tall, wordmark
   overflowing). The homepage has no WooCommerce body class,
   which is why only it sized correctly. The sizing rule is
   now scoped under .site-branding (0-2-0, beating 0-1-1)
   and carries explicit max-height / max-width caps, so the
   54px cap holds on every template; the <img> keeps its
   width="2200" height="650" attributes (header.php), which
   reserve the aspect ratio before the SVG loads. */
.site-branding .brh-brand-lockup {
	display: block;
	height: 54px; max-height: 54px;
	width: auto; max-width: 100%;
}
.brh-brand-fallback { display: none; }
.site-footer { background: var(--brh-deep); }

@media (max-width: 860px) {
	.site-branding .brh-brand-lockup { display: none; }
	.brh-brand-fallback {
		display: inline-flex; align-items: center; gap: 8px; min-width: 0;
	}
	.brh-brand-icon { width: 36px; height: 36px; flex: 0 0 auto; display: block; }
}
@media (max-width: 400px) {
	.brh-brand-icon { width: 32px; height: 32px; }
	/* v1.0.17, the ~320px nit: give the fallback name a
	   little more room — slightly smaller type, tighter
	   tracking, a 6px icon gap — so more of the name fits
	   before the ellipsis. Scoped to the fallback pairing
	   only; the 32px icon is untouched. */
	.brh-brand-fallback { gap: 6px; }
	.brh-brand-fallback .site-name { font-size: 0.78rem; letter-spacing: -0.03em; }
}

/* ============================================================
   v1.0.18 — Subcategory hub on category archives
   The hub (functions.php: brh_subcategory_hub) reuses the
   homepage .tile-grid / .tile styles untouched — 4-across on
   desktop, 2-up on phones, image-led .tile--has-thumb cards
   and text tiles alike. The only archive-specific need is
   breathing room between the grid and the loop toolbar /
   product grid that follows it.
   ============================================================ */
.brh-subcat-hub { margin: 4px 0 30px; }

/* ============================================================
   Category banner (v1.0.20; full-bleed v1.0.22)
   Wide banner at the very top of top-level category
   archives (see brh_category_banner() in functions.php).
   woocommerce.php prints it BEFORE the .wrap container, as
   a direct child of <main>, so the banner spans the full
   width of the screen edge to edge (like the reference
   stores) with square corners — no side gaps. The bundled
   artwork is 1920x560; the display height is capped and
   the strip crops symmetrically via object-fit.
   ============================================================ */
.brh-cat-banner {
	margin: 0 0 26px;
	overflow: hidden; line-height: 0;
}
.brh-cat-banner img {
	display: block; width: 100%; height: auto; max-height: 360px;
	object-fit: cover; object-position: center;
}
@media (max-width: 560px) {
	.brh-cat-banner { margin-bottom: 18px; }
	.brh-cat-banner img { max-height: 180px; }
}

/* ============================================================
   v1.0.23 — Live Shows page (page-live-shows.php)
   Designed template for the Live Shows page: full-width hero
   over the Pokémon banner art, channel cards (reusing the
   homepage .channel-grid / .channel / .channel-logo styles),
   numbered steps, "what we open" game tiles and a deep-blue
   follow band. Scoped classes carry the brh-live- prefix.
   The hero is printed as a direct child of <main> — the
   same full-bleed pattern as .brh-cat-banner above — so it
   spans edge to edge with no breakout CSS and no risk of
   horizontal scrollbars.
   ============================================================ */

/* ---------- Hero ---------- */
.brh-live-hero {
	background-color: var(--brh-deep);
	background-size: cover; background-position: center;
	color: var(--brh-cream); text-align: center;
	padding: 84px 0 76px; overflow: hidden;
}
.brh-live-hero-inner { max-width: 760px; }
.brh-live-hero h1 {
	color: #fff; font-size: 3rem; margin: 18px 0 14px;
	text-shadow: 0 2px 18px rgba(7, 26, 48, 0.55);
}
.brh-live-sub {
	font-size: 1.13rem; color: var(--brh-bone); max-width: 34em;
	margin: 0 auto;
	text-shadow: 0 1px 12px rgba(7, 26, 48, 0.55);
}
.brh-live-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: #E63329; color: #fff;
	font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 14px 7px 11px; border-radius: 999px;
	box-shadow: 0 4px 14px rgba(7, 26, 48, 0.35);
}
.brh-live-dot {
	position: relative; width: 9px; height: 9px; border-radius: 50%;
	background: #fff; flex: none;
}
.brh-live-dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.65);
	animation: brh-live-pulse 1.8s ease-out infinite;
}
@keyframes brh-live-pulse {
	0% { transform: scale(1); opacity: 0.9; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.brh-live-dot::after { animation: none; }
}

/* ---------- Channel cards (page tweaks over .channel) ---------- */
.brh-live-channels .channel { text-align: left; }
.brh-live-channels .channel-logo { justify-content: flex-start; }

/* ---------- How it works ---------- */
.brh-live-steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.brh-live-step {
	background: var(--brh-card); border: 1px solid var(--brh-line);
	border-radius: var(--brh-radius); padding: 28px 24px;
	box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
	display: flex; flex-direction: column; gap: 8px;
}
.brh-live-step-num {
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center; margin-bottom: 6px;
	background: #7FB2FF; color: var(--brh-deep);
	font-size: 1.25rem; font-weight: 800;
}
.brh-live-step h3 { margin: 0; }
.brh-live-step p { margin: 0; color: var(--brh-muted); font-size: 0.96rem; }

/* ---------- What we open ---------- */
.brh-live-games {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.brh-live-game {
	background: linear-gradient(160deg, var(--brh-navy-3), var(--brh-navy));
	border: 1px solid var(--brh-navy-3); border-radius: var(--brh-radius);
	padding: 22px 16px; text-decoration: none; color: var(--brh-cream);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	text-align: center;
	transition: transform .16s ease, box-shadow .16s ease;
}
.brh-live-game:hover, .brh-live-game:focus {
	transform: translateY(-4px); box-shadow: var(--brh-shadow); color: #fff;
}
.brh-live-game-mark { color: var(--brh-gold); font-size: 1.3rem; line-height: 1; }
.brh-live-game-name { font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; }

/* ---------- Follow band ---------- */
.brh-live-follow {
	background: var(--brh-navy); color: var(--brh-cream);
	padding: 56px 0; text-align: center;
}
.brh-live-follow-inner { max-width: 720px; }
.brh-live-follow h2 { color: #fff; margin-bottom: 10px; }
.brh-live-follow p { color: var(--brh-bone); max-width: 38em; margin: 0 auto 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.brh-live-hero { padding: 60px 0 54px; }
	.brh-live-hero h1 { font-size: 2.3rem; }
	.brh-live-sub { font-size: 1.02rem; }
	.channel-grid.brh-live-channels { grid-template-columns: 1fr; }
	.brh-live-games { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.brh-live-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.brh-live-hero { padding: 46px 0 42px; }
	.brh-live-hero h1 { font-size: 1.9rem; }
	.brh-live-games { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.brh-live-follow { padding: 44px 0; }
}

/* ============================================================
   Help bubble (v1.0.24)
   Floating quick-answer assistant printed by footer.php and
   driven by initHelp() in main.js. Sits below the drawer /
   backdrop layer (990/1000) and far below the preloader, so
   nothing can be trapped behind it. Human help routes to the
   business WhatsApp — no third-party chat service, no data
   leaves the page.
   ============================================================ */
.brh-help {
	position: fixed; right: 18px; bottom: 18px; z-index: 940;
}
.brh-help-bubble {
	display: inline-flex; align-items: center; gap: 9px;
	height: 56px; padding: 0 22px 0 17px; border-radius: 999px;
	background: linear-gradient(135deg, var(--brh-purple), var(--brh-violet));
	color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 12px 32px rgba(7, 26, 48, 0.38);
	font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease;
}
.brh-help-bubble:hover, .brh-help-bubble:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(7, 26, 48, 0.42);
}
.brh-help-bubble svg { width: 24px; height: 24px; flex: none; }
.brh-help-panel {
	position: absolute; right: 0; bottom: 70px;
	width: min(362px, calc(100vw - 24px));
	max-height: min(580px, calc(100vh - 110px));
	display: flex; flex-direction: column;
	background: #fff; color: var(--brh-navy);
	border: 1px solid var(--brh-line); border-radius: 18px;
	box-shadow: 0 24px 60px rgba(7, 26, 48, 0.35);
	overflow: hidden;
}
.brh-help-panel[hidden] { display: none; }
.brh-help-panel.is-open { animation: brh-help-in .18s ease; }
@keyframes brh-help-in {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
.brh-help-head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
	background: linear-gradient(135deg, var(--brh-navy), var(--brh-navy-3));
	color: #fff; padding: 16px 18px;
}
.brh-help-title { margin: 0; font-size: 1.12rem; font-weight: 800; color: #fff; }
.brh-help-sub { margin: 3px 0 0; font-size: 0.88rem; color: var(--brh-bone); }
.brh-help-close {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35); background: transparent;
	color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.brh-help-close:hover, .brh-help-close:focus-visible { background: rgba(255, 255, 255, 0.14); }
.brh-help-messages {
	padding: 14px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 10px;
	background: var(--brh-cream-bg);
}
.brh-help-msg {
	max-width: 88%; padding: 10px 13px; border-radius: 14px;
	font-size: 0.92rem; line-height: 1.45;
}
.brh-help-msg--bot {
	align-self: flex-start; background: #fff;
	border: 1px solid var(--brh-line); border-bottom-left-radius: 4px;
}
.brh-help-msg--user {
	align-self: flex-end; background: var(--brh-purple); color: #fff;
	border-bottom-right-radius: 4px;
}
.brh-help-msg--bot a { font-weight: 700; color: var(--brh-purple); }
.brh-help-topics {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 12px 14px; background: #fff;
	border-top: 1px solid var(--brh-line);
}
.brh-help-topics button {
	border: 1px solid #C9D9F2; background: var(--brh-violet-soft);
	color: var(--brh-navy); border-radius: 999px; padding: 7px 12px;
	font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
	transition: background .14s ease, border-color .14s ease;
}
.brh-help-topics button:hover, .brh-help-topics button:focus-visible {
	background: #D3E4FC; border-color: var(--brh-ice);
}
.brh-help-actions {
	display: flex; gap: 10px; padding: 0 14px 14px; background: #fff;
}
.brh-help-wa, .brh-help-contact {
	border-radius: 12px; padding: 11px 10px;
	font-size: 0.9rem; font-weight: 800; text-align: center; text-decoration: none;
}
.brh-help-wa { flex: 1; background: #128C7E; color: #fff; }
.brh-help-wa:hover, .brh-help-wa:focus-visible { background: #0E7568; color: #fff; }
.brh-help-contact {
	border: 1px solid var(--brh-line); color: var(--brh-navy); background: #fff;
}
.brh-help-contact:hover, .brh-help-contact:focus-visible { background: var(--brh-cream-bg); }
@media (max-width: 560px) {
	.brh-help { right: 12px; bottom: 12px; }
	.brh-help-panel { bottom: 66px; }
	.brh-help-bubble { height: 52px; padding: 0 18px 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.brh-help-panel.is-open { animation: none; }
	.brh-help-bubble { transition: none; }
}

/* ============================================================
   Realm Points (v1.0.25)
   Loyalty rewards UI: basket/checkout panel, product-page
   earn hint, and the My Account points page. Logic lives in
   inc/rewards.php.
   ============================================================ */
.brh-points-panel {
	background: #fff; border: 1px solid var(--brh-line);
	border-left: 4px solid var(--brh-purple);
	border-radius: var(--brh-radius); padding: 18px 20px;
	margin: 0 0 26px; box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
}
.brh-points-panel p { margin: 0 0 8px; }
.brh-points-panel p:last-child { margin-bottom: 0; }
.brh-points-panel-title {
	font-size: 1.08rem; font-weight: 800; color: var(--brh-navy);
	margin: 0 0 6px;
}
.brh-points-form {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin-top: 10px;
}
.brh-points-form label { font-weight: 700; font-size: 0.94rem; }
.brh-points-form input[type="number"] {
	width: 110px; padding: 9px 10px; font: inherit;
	border: 1px solid var(--brh-line); border-radius: 10px;
}
.brh-points-earn-hint {
	display: inline-block; margin: 10px 0 0;
	background: var(--brh-violet-soft); color: var(--brh-navy);
	border-radius: 999px; padding: 6px 14px;
	font-size: 0.88rem; font-weight: 700;
}
.brh-points-hero {
	background: linear-gradient(135deg, var(--brh-navy), var(--brh-navy-3));
	color: #fff; border-radius: var(--brh-radius);
	padding: 26px 28px; margin-bottom: 26px; text-align: center;
}
.brh-points-hero-label { margin: 0; color: var(--brh-bone); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; }
.brh-points-hero-value { margin: 6px 0 2px; font-size: 3rem; font-weight: 800; line-height: 1; color: #fff; }
.brh-points-hero-sub { margin: 0; color: var(--brh-bone); }
.brh-points-rules { margin: 0 0 24px; padding-left: 20px; }
.brh-points-rules li { margin-bottom: 6px; }
.brh-points-log { list-style: none; margin: 0; padding: 0; }
.brh-points-log li {
	padding: 9px 2px; border-bottom: 1px solid var(--brh-line);
	font-size: 0.95rem;
}
.brh-points-log-date { color: var(--brh-muted); margin-right: 8px; }

/* ---------- Order self-service (v1.0.27) ---------- */
.brh-order-actions {
	margin: 22px 0; padding: 18px 20px; background: #fff;
	border: 1px solid var(--brh-line); border-radius: var(--brh-radius);
}
.brh-order-actions p { margin: 0 0 10px; }
.brh-order-actions p:last-child { margin-bottom: 0; }
.brh-return-form-wrap { margin: 10px 0 6px; }
.brh-return-form p { margin: 0 0 14px; }
.brh-return-form label { display: block; font-weight: 700; font-size: 0.94rem; margin-bottom: 6px; }
.brh-return-form input[type="text"], .brh-return-form input[type="email"],
.brh-return-form select, .brh-return-form textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--brh-line);
	border-radius: 10px; font: inherit; font-size: 0.97rem; background: #fff; color: var(--brh-ink);
	box-sizing: border-box;
}
.brh-return-form input:focus, .brh-return-form select:focus, .brh-return-form textarea:focus {
	border-color: var(--brh-violet); outline: 2px solid var(--brh-violet-soft); outline-offset: 0;
}
.brh-return-form button[type="submit"] { font: inherit; cursor: pointer; border: 0; }
.brh-form-small { font-size: 0.9rem; color: var(--brh-muted); }
.brh-form-note {
	padding: 14px 18px; border-radius: 12px; margin: 0 0 18px;
	border: 1px solid var(--brh-line); background: #fff;
}
.brh-form-note--ok { border-top: 3px solid #3d9970; }
.brh-form-note--err { border-top: 3px solid #b03030; }
.brh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Live seller proof + packaging standards (v1.0.31)
   Homepage proof strip above the live-channel cards, the
   per-channel rating badge, the dedicated packaging section
   (front-page.php #packaging-standards) and the footer proof
   strip (footer.php). Whatnot figures come from
   inc/seller-proof.php — refreshed from the public profile
   with a verified fallback.
   ============================================================ */
.brh-proof-strip {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 14px; margin: 0 0 14px;
}
.brh-proof-badge {
	display: flex; align-items: center; gap: 14px;
	background: #fff; border: 1px solid var(--brh-line);
	border-top: 4px solid var(--brh-gold);
	border-radius: var(--brh-radius); padding: 16px 18px;
	color: var(--brh-navy); text-decoration: none;
	box-shadow: 0 4px 14px rgba(7, 26, 48, 0.05);
	transition: transform .16s ease, box-shadow .16s ease;
}
.brh-proof-badge:hover, .brh-proof-badge:focus-visible {
	transform: translateY(-3px); box-shadow: var(--brh-shadow); color: var(--brh-navy);
}
.brh-proof-stars { color: #F59E0B; font-size: 1.05rem; letter-spacing: 0.08em; white-space: nowrap; }
.brh-proof-mark {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--brh-violet-soft); color: var(--brh-purple);
	font-size: 1.1rem; font-weight: 800;
}
.brh-proof-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brh-proof-main strong { font-size: 1.02rem; line-height: 1.3; }
.brh-proof-main span { color: var(--brh-muted); font-size: 0.9rem; line-height: 1.35; }
.brh-proof-note {
	text-align: center; color: var(--brh-muted);
	font-size: 0.88rem; margin: 0 0 30px;
}
.channel-badge {
	align-self: flex-start; margin: 0;
	background: var(--brh-violet-soft); color: var(--brh-navy) !important;
	border-radius: 999px; padding: 6px 12px;
	font-size: 0.86rem !important; font-weight: 800;
}

/* ---------- Packaging standards ---------- */
.brh-packaging { background: #fff; }
.brh-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.brh-pack-card {
	background: var(--brh-cream-bg); border: 1px solid var(--brh-line);
	border-top: 5px solid var(--brh-purple);
	border-radius: var(--brh-radius); padding: 26px 22px;
}
.brh-pack-icon { font-size: 1.7rem; margin-bottom: 10px; }
.brh-pack-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.brh-pack-card p { margin: 0; color: var(--brh-muted); font-size: 0.95rem; }
.brh-pack-checks {
	list-style: none; margin: 26px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.brh-pack-checks li {
	background: var(--brh-violet-soft); color: var(--brh-navy);
	border-radius: 999px; padding: 8px 15px;
	font-size: 0.88rem; font-weight: 700;
}
.brh-pack-checks li::before { content: "\2713  "; color: var(--brh-purple); font-weight: 800; }

/* ---------- Footer proof strip ---------- */
.footer-proof {
	border-top: 1px solid var(--brh-navy-3);
	margin-top: 30px; padding: 18px 0 2px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
	font-size: 0.9rem;
}
.footer-proof-label { font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.footer-proof a { color: var(--brh-bone); font-weight: 700; text-decoration: none; }
.footer-proof a:hover, .footer-proof a:focus-visible { color: var(--brh-gold); text-decoration: underline; }

@media (max-width: 1020px) {
	.brh-pack-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.brh-proof-strip { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.brh-pack-grid { grid-template-columns: 1fr; }
	.footer-proof { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   Shield branding (v1.0.32)
   The owner's new shield emblem (header.php prints
   assets/img/br-shield.png beside the site name as text at
   every width). The name needs an explicit display:block
   here: the v1.0.6 scaffolding rule hides .site-name
   globally because the old wide lockup artwork carried the
   name inside the image — the shield emblem does not.
   ============================================================ */
.brh-brand-link { gap: 10px; }
.site-branding .brh-brand-shield {
	display: block; height: 54px; max-height: 54px; width: auto;
}
.brh-brand-link .site-name {
	display: block; margin: 0;
	color: var(--brh-cream); font-weight: 900;
	font-size: 1.3rem; line-height: 1.12; letter-spacing: -0.01em;
	white-space: nowrap;
}
@media (max-width: 860px) {
	.site-branding .brh-brand-shield { height: 38px; max-height: 38px; }
	.brh-brand-link .site-name { font-size: 1.02rem; }
}
@media (max-width: 400px) {
	.brh-brand-link { gap: 7px; }
	.site-branding .brh-brand-shield { height: 34px; max-height: 34px; }
	.brh-brand-link .site-name { font-size: 0.9rem; letter-spacing: -0.02em; }
}

/* ============================================================
   Original wordmark beside the shield (v1.0.34)
   header.php now prints assets/img/br-wordmark.svg — the
   italic BONES REALMS / HOBBIES lettering from the original
   lockup — next to the shield, replacing the live-text name
   (v1.0.32/33). Scoped under .site-branding so WooCommerce's
   page image rule cannot stretch it (the v1.0.17 lesson).
   ============================================================ */
.site-branding .brh-brand-wordmark {
	display: block; height: 46px; max-height: 46px; width: auto;
}
@media (max-width: 860px) {
	.site-branding .brh-brand-wordmark { height: 32px; max-height: 32px; }
}
@media (max-width: 400px) {
	.site-branding .brh-brand-wordmark { height: 28px; max-height: 28px; }
}