/* Compact header, layered over the existing shop stylesheet. */
:root { --nav-bg:#fff; --nav-text:#222822; --nav-muted:#697167; --nav-line:#e2e7df; --nav-hover:#eef3e8; --nav-field:#f4f5f2; --nav-green:#3e661c; --nav-active:#d89026; }
html[data-theme="dark"] { --nav-bg:#222622; --nav-text:#edf0e9; --nav-muted:#a8b1a2; --nav-line:#394137; --nav-hover:#303a2b; --nav-field:#181b18; --nav-green:#ade365; }
.shop-header { padding:0; background:var(--nav-bg); color:var(--nav-text); border-bottom:0; }
.header-utility { display:flex; justify-content:space-between; gap:20px; padding:8px 28px; border-bottom:1px solid var(--nav-line); font-size:12px; color:var(--nav-muted); }
.header-utility ul { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px; list-style:none; margin:0; padding:0; }
.shop-header .header-utility a { color:var(--nav-muted); text-decoration:none; }
.shop-header .header-utility a:hover { color:var(--nav-green); }
.header-main { display:flex; align-items:center; gap:35px; padding:22px 28px; }
.shop-header #logo { flex:0 0 220px; width:220px; height:74px; margin:0; border-radius:5px; background-size:90% auto; }
.header-search { display:flex; align-items:center; flex:1; gap:10px; border:1px solid var(--nav-line); border-radius:6px; background:var(--nav-field); padding:0 12px; min-width:0; height:46px; }
.shop-header svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.header-search > svg { color:var(--nav-muted); }
.shop-header .header-search input { width:100%; height:40px; min-width:0; border:0; background:transparent; color:var(--nav-text); font-size:14px; }
.header-search button { border:0; background:transparent; padding:7px 0 7px 7px; color:var(--nav-muted); }
.shop-header #cart { display:flex; flex:0 0 auto; align-items:center; gap:12px; position:relative; float:none; width:auto; max-height:none; overflow:visible; margin:0 0 0 auto; padding:10px 14px; border:1px solid var(--nav-line); border-radius:6px; color:var(--nav-text); text-align:left; }
.shop-header #cart:hover { background:var(--nav-hover); text-decoration:none; }
.header-cart-icon { display:flex; position:relative; }
.header-cart-icon .count { position:absolute; top:-8px; right:-8px; background:#87ca2f; color:#19220f; font-size:10px; min-width:17px; line-height:17px; text-align:center; border-radius:20px; font-weight:bold; }
.header-cart-label { font-size:12px; line-height:1.4; color:var(--nav-muted); }
.header-cart-label strong { display:block; font-size:14px; color:var(--nav-text); }
.shop-header #cart .images { display:none; position:absolute; top:100%; right:0; z-index:30; min-width:230px; max-width:340px; padding:16px; border:1px solid var(--nav-line); border-radius:6px; background:var(--nav-bg); box-shadow:0 12px 30px #0003; }
.shop-header #cart:not(.empty):hover .images,
.shop-header #cart:not(.empty):focus-visible .images { display:flex; flex-wrap:wrap; gap:10px; }
.shop-header #cart .images img { max-width:60px; max-height:70px; object-fit:contain; }
.shop-header #cart .images .item { display:block; padding:0; margin:0; height:auto; }
.shop-header #cart .images .item img { display:block; }
.shop-header .shop-navigation { position:relative; width:auto; height:auto; min-height:0; padding:0 28px; line-height:normal; border-top:1px solid var(--nav-line); border-bottom:3px solid #87ca2f; }
.shop-header .shop-navigation::before,
.shop-header .shop-navigation::after { content:none; display:none; }
.shop-nav-row { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; }
.shop-nav-group { position:relative; }
.shop-nav-group summary,
.shop-header .shop-navigation .shop-nav-direct { display:flex; align-items:center; gap:9px; position:relative; padding:15px 17px; list-style:none; cursor:pointer; font-size:14px; font-weight:bold; color:var(--nav-text); text-decoration:none; }
.shop-nav-group summary::-webkit-details-marker { display:none; }
.shop-nav-group summary:hover,
.shop-nav-group[open] summary,
.shop-header .shop-navigation .shop-nav-direct:hover { background:var(--nav-hover); color:var(--nav-green); }
.shop-nav-group.current summary,
.shop-header .shop-navigation .shop-nav-direct.open { color:var(--nav-active); background:transparent; }
/* The active indicator replaces a segment of the existing divider. */
.shop-nav-group.current summary::after,
.shop-header .shop-navigation .shop-nav-direct.open::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:3px; background:var(--nav-active); }
.shop-header .shop-nav-chevron { width:17px; height:17px; color:var(--nav-muted); transition:transform .16s ease; }
.shop-nav-group[open] .shop-nav-chevron { transform:rotate(180deg); color:var(--nav-green); }
.shop-header .shop-navigation .shop-nav-dropdown { display:block; position:absolute; top:calc(100% + 3px); left:0; z-index:40; width:260px; margin:0; padding:6px; background:var(--nav-bg); border:1px solid var(--nav-line); border-radius:0 0 10px 10px; box-shadow:0 18px 40px #0003; list-style:none; max-height:70vh; overflow:auto; }
.shop-nav-group:not([open]) > .shop-nav-dropdown { display:none !important; }
.shop-header .shop-navigation li { display:block; }
.shop-header .shop-navigation .shop-nav-option { display:flex; align-items:center; gap:10px; position:relative; box-sizing:border-box; min-height:44px; padding:6px 8px; margin:0; border-radius:6px; white-space:normal; font-size:13px; line-height:1.4; color:var(--nav-text); text-decoration:none; background:transparent; }
/* Override the legacy 45px space reserved for background-image logos. */
.shop-header .shop-navigation .shop-nav-option { padding-left:8px !important; }
.shop-header .shop-navigation .shop-nav-option:hover,
.shop-header .shop-navigation .shop-nav-option.open { color:var(--nav-green); background:var(--nav-hover); }
.shop-header .shop-navigation a::before { display:none; content:none; }
.shop-platform-logo { display:flex; align-items:center; justify-content:center; box-sizing:border-box; flex:0 0 38px; width:38px; height:28px; border-radius:5px; background:#f8f9f6; border:1px solid #e0e5dc; overflow:hidden; }
.shop-platform-logo img { display:block; width:30px; height:22px; object-fit:contain; }
.shop-platform-name { flex:1; min-width:0; }
.shop-header .shop-nav-indicator { width:17px; height:17px; color:var(--nav-muted); opacity:.6; }
.shop-nav-option.open .shop-platform-logo { border-color:#9dcb64; }
.shop-header .shop-nav-option.open .shop-nav-indicator { opacity:1; color:var(--nav-green); }
/* Flat CMS links remain usable when JavaScript is unavailable. */
.shop-header .shop-navigation > ul { display:flex; flex-wrap:wrap; position:static; background:var(--nav-bg); }
.shop-header .shop-navigation > ul > li > a { display:block; padding:12px 15px; color:var(--nav-text); }
.shop-header a:focus-visible,
.shop-header button:focus-visible,
.shop-header summary:focus-visible,
.shop-header input:focus-visible { outline:2px solid #87ca2f; outline-offset:3px; }
#content-menu .top-level a { padding-left:0 !important; }
#content-menu .top-level a::before { display:none; }
#content-menu { gap:15px; align-items:center; border-bottom:1px solid var(--nav-line); padding-bottom:12px; margin-bottom:24px; }
#content-menu li a { border-radius:4px; }
@media(max-width:1000px) {
	.header-utility > span { display:none; }
	.header-utility { justify-content:flex-end; }
	.header-main { flex-wrap:wrap; gap:16px; }
	.shop-header #logo { flex-basis:190px; width:190px; height:62px; }
	.header-search { order:3; flex-basis:100%; }
	.shop-header .shop-navigation { padding-left:16px; padding-right:16px; }
}
@media(max-width:560px) {
	.header-utility { padding:8px 16px; }
	.header-utility ul { gap:6px 14px; font-size:11px; }
	.header-main { padding:16px; }
	.shop-header #logo { flex-basis:145px; width:145px; height:52px; }
	.shop-header #cart { padding:8px 10px; gap:10px; }
	.header-cart-label strong { font-size:12px; }
	.shop-nav-row { gap:0; }
	.shop-nav-group summary,
	.shop-header .shop-navigation .shop-nav-direct { font-size:12px; padding:12px 10px; gap:6px; }
	.shop-header .shop-navigation .shop-nav-dropdown { position:fixed; top:auto; left:16px; right:16px; width:auto; max-height:65vh; }
	#content-menu { flex-wrap:wrap; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .shop-header .shop-nav-chevron { transition:none; } }
/* Keep category links reachable on phones as well as in the grouped header. */
#content-menu { display:flex; }

/* Separate the current platform breadcrumb from the category tabs. */
#content-menu { gap:16px; line-height:30px; }
#content-menu .top-level { display:flex; align-items:center; gap:12px; }
#content-menu .top-level::after { content:'›'; color:var(--nav-muted); font-size:20px; font-weight:normal; }
#content-menu .top-level li a,
#content-menu .top-level li a.open,
html[data-theme="dark"] #content-menu .top-level li a,
html[data-theme="dark"] #content-menu .top-level li a.open {
	padding:0 !important;
	background:transparent;
	color:var(--nav-muted);
	font-size:12px;
	font-weight:normal;
	border:0;
	border-radius:0;
}
#content-menu > ul { gap:4px; }
#content-menu > ul li a {
	padding:4px 12px;
	line-height:26px;
	border:1px solid transparent;
	font-size:12px;
}
#content-menu > ul li a.open,
html[data-theme="dark"] #content-menu > ul li a.open {
	border-color:var(--nav-line);
	background:var(--nav-hover);
	color:var(--nav-green);
}
@media(max-width:560px) {
	#content-menu { gap:8px; }
	#content-menu .top-level { flex-basis:100%; }
	#content-menu .top-level::after { content:none; }
	#content-menu > ul li a { padding:4px 9px; }
}

.header-utility { align-items:center; }
.header-utility-tools { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px 18px; }
.header-utility .theme-controls { margin:0; }
.shop-header .theme-toggle { color:var(--nav-muted); font-size:12px; line-height:20px; padding:2px 6px; white-space:nowrap; }
.shop-header .theme-toggle:hover { color:var(--nav-green); background:var(--nav-hover); }
@media(max-width:560px) { .header-utility-tools { gap:4px 12px; } }

/* Full-width surfaces, with content kept inside the existing 1250px layout. */
.shop-header { max-width:none; --header-gutter:28px; --navigation-gutter:28px; }
.shop-header .header-utility,
.shop-header .header-main {
	padding-left:max(var(--header-gutter), calc((100% - 1250px) / 2 + var(--header-gutter)));
	padding-right:max(var(--header-gutter), calc((100% - 1250px) / 2 + var(--header-gutter)));
}
.shop-header .shop-navigation {
	padding-left:max(var(--navigation-gutter), calc((100% - 1250px) / 2 + var(--navigation-gutter)));
	padding-right:max(var(--navigation-gutter), calc((100% - 1250px) / 2 + var(--navigation-gutter)));
}
.site-footer {
	max-width:none;
	--footer-gutter:30px;
	padding-left:max(var(--footer-gutter), calc((100% - 1250px) / 2 + var(--footer-gutter)));
	padding-right:max(var(--footer-gutter), calc((100% - 1250px) / 2 + var(--footer-gutter)));
}
@media(max-width:1000px) { .shop-header { --navigation-gutter:16px; } }
@media(max-width:560px) {
	.shop-header { --header-gutter:16px; }
	.site-footer { --footer-gutter:20px; }
}

/* Product list controls retain their existing filtering and history behaviour. */
.list-ui { padding:0 0 20px; min-height:0; }
.list-filter { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-start; gap:12px 16px; text-align:left; padding:0 0 18px; }
.list-ui .field-group { display:flex; flex:1 1 180px; flex-direction:column; gap:6px; margin:0; color:var(--nav-muted); font-size:12px; font-weight:normal; }
.list-filter select,
.list-filter input { box-sizing:border-box; margin:0; padding:8px 11px; width:100%; min-width:0; height:38px; border:1px solid var(--nav-line); border-radius:5px; background:var(--nav-bg); color:var(--nav-text); font-size:13px; line-height:20px; }
.list-filter select:focus-visible,
.list-filter input:focus-visible { outline:2px solid #87ca2f; outline-offset:2px; }
.list-pages { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px; padding:4px 0 10px; }
.list-pages:empty { display:none; }
.list-pages .page { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--nav-line); border-radius:5px; background:var(--nav-bg); color:var(--nav-muted); font-family:inherit; font-size:13px; line-height:1; font-weight:normal; cursor:pointer; }
.list-pages .page.active,
html[data-theme="dark"] .list-pages .page.active { background:var(--nav-hover); border-color:var(--nav-green); color:var(--nav-green); font-weight:bold; }
.list-pages .page:hover:not(:disabled) { background:var(--nav-hover); color:var(--nav-green); }
.list-pages .page:disabled { opacity:.35; cursor:default; }
.list-pages .page:focus-visible { outline:2px solid #87ca2f; outline-offset:2px; }
.page-gap { padding:0 3px; color:var(--nav-muted); }
@media(max-width:560px) {
	.list-filter { gap:10px; }
	.list-ui .field-group { flex-basis:calc(50% - 10px); }
	.list-ui .field-group:last-child { flex-basis:100%; }
	.list-pages { gap:4px; }
	.list-pages .page { min-width:32px; height:36px; padding:0 6px; }
}
#content-menu .top-level:empty { display:none; }

/* Give the page content room below the full-width header divider. */
.shop-header { margin-bottom:24px; }
@media(max-width:560px) { .shop-header { margin-bottom:16px; } }

/* Keep the content away from viewport edges, including below the desktop breakpoint. */
#main { padding-left:28px; padding-right:28px; }
#content { min-width:0; }
@media(max-width:560px) {
	#main { padding-left:16px; padding-right:16px; }
}

/* Contact content can include light table backgrounds saved by the CMS editor. */
html[data-theme="dark"] .contact-content table {
	background:transparent !important;
	color:var(--nav-text);
}
html[data-theme="dark"] .contact-content table tr {
	background:transparent !important;
	border-color:var(--nav-line);
}
html[data-theme="dark"] .contact-content table tr:nth-child(even) {
	background:var(--nav-bg) !important;
}
html[data-theme="dark"] .contact-content table td,
html[data-theme="dark"] .contact-content table th {
	background:transparent !important;
	color:var(--nav-text) !important;
	border-color:var(--nav-line);
}

/* Tables saved in the page editor can carry inline light-theme backgrounds. */
html[data-theme="dark"] .text-content table,
html[data-theme="dark"] .text-content table tr,
html[data-theme="dark"] .text-content table td {
	background:transparent !important;
	color:var(--nav-text) !important;
	border-color:var(--nav-line);
}
html[data-theme="dark"] .text-content table th {
	background:var(--nav-hover) !important;
	color:var(--nav-green) !important;
	border-color:var(--nav-line);
	padding:5px 10px;
}
html[data-theme="dark"] .text-content table thead th {
	background:transparent !important;
	color:var(--nav-text) !important;
}

.catalog-enhanced .catalog-apply { display:none; }
.catalog-status { color:var(--nav-muted); font-size:13px; }
.catalog-status:not(:empty) { padding:8px 0 16px; }
.catalog-status button,
.catalog-apply { border:1px solid var(--nav-line); border-radius:5px; padding:8px 12px; background:var(--nav-bg); color:var(--nav-green); cursor:pointer; }
.catalog-empty { clear:both; padding:24px 0; color:var(--nav-muted); }
.list-pages .page.disabled { opacity:.35; cursor:default; }
.list-pages a.page { text-decoration:none; }
[data-server-list][aria-busy="true"] .list-items { opacity:.55; }

.regular-price { font-size:.65em; color:#666; white-space:nowrap; }
.sale-price { color:#c91f4b; white-space:nowrap; }
html[data-theme="dark"] .regular-price { color:var(--nav-muted); }
html[data-theme="dark"] .sale-price { color:#ff6688; }

/* Let each product row grow to fit its longest title and cart button. */
[data-server-list].products { margin-right:0; }
[data-server-list] .list-items {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:28px 25px;
}
[data-server-list] .list-items::before,
[data-server-list] .list-items::after { display:none; }
[data-server-list].products .item {
	width:auto;
	height:auto;
	min-width:0;
	float:none;
	display:block;
	padding:0;
	overflow-wrap:anywhere;
}
[data-server-list].products img { max-width:min(215px, 100%); }
[data-server-list].products .price { right:0; }
@media(max-width:1024px) {
	[data-server-list] .list-items {
		grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	}
}