/**
 * Maison Vessel - HikaMarket overrides
 *
 * Restyles the HikaMarket frontend (vendor listing, vendor detail page,
 * vendor cpanel, order/product/category management cards, toolbars,
 * pagination, status labels, cpanel statistics, etc.) to match the
 * Maison Vessel design system.
 *
 * Every colour, font and surface is wired to the template's CSS custom
 * properties (--ink, --paper, --bone, --gold, --line, --mute, --ok,
 * --danger, --serif, --sans), so the active style preset (luxury,
 * editorial, futuristic, etc.) automatically cascades into HikaMarket
 * pages without per-preset overrides.
 *
 * Companion to hikashop.css. Loaded via joomla.asset.json on every
 * front-end page; the rules only fire on pages that actually contain
 * HikaMarket markup.
 */

/* ─── Vendor listing page ─────────────────────────────────────────── */
/* The component output is wrapped by HikaMarket in a single
   .hikamarket_vendors_listing_main div with the merchant-set
   main_div_name as id, and renders a 12-col `.hk-row-fluid` grid of
   `.hikamarket_vendor` cards. We swap the default Bootstrap-2-style
   grid for a CSS grid so the cards stay even-height and the gap
   tracks the rest of the design system. */
.hikamarket_vendors_listing_main,
.hikamarket_vendor_listing {
	font-family: var(--sans);
	color: var(--ink);
}
.hikamarket_vendor_listing > .hikamarket_vendors {
	display: block;
}
.hikamarket_vendor_listing .hk-row-fluid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	row-gap: 40px;
	margin: 0;
}
@media (max-width: 1100px) {
	.hikamarket_vendor_listing .hk-row-fluid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.hikamarket_vendor_listing .hk-row-fluid { grid-template-columns: repeat(2, 1fr); gap: 16px; row-gap: 32px; }
}
@media (max-width: 480px) {
	.hikamarket_vendor_listing .hk-row-fluid { grid-template-columns: 1fr; }
}
/* Reset the hkc-md-* span widths inside the grid — the grid handles
   sizing now, but the hk-row-fluid > hkc-md-* rule from HikaMarket
   would otherwise force a fractional float width. */
.hikamarket_vendor_listing .hk-row-fluid > [class*="hkc-md-"] {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.hikamarket_vendor_listing .hikamarket_vendor {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	padding: 0;
	min-height: auto;
}
.hikamarket_vendor_listing .hikamarket_container {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}
.hikamarket_vendor_listing .hikamarket_subcontainer,
.hikamarket_vendor_listing .hikamarket_subcontainer_border {
	background: var(--bone);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 18px 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
	text-align: left;
}
/* Vendor logo / image frame */
.hikamarket_vendor_listing .hikamarket_vendor_image {
	position: relative;
	aspect-ratio: 4 / 3;
	height: auto !important;
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.04) 0 1px, transparent 1px 12px),
		var(--line);
	overflow: hidden;
	margin: 0;
}
.hikamarket_vendor_listing .hikamarket_vendor_image a {
	display: block;
	width: 100%;
	height: 100%;
}
.hikamarket_vendor_listing .hikamarket_vendor_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hikamarket_vendor_listing .hikamarket_vendor:hover .hikamarket_vendor_image img {
	transform: scale(1.03);
}
.hikamarket_vendor_listing .hikamarket_vendor_name {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.005em;
	line-height: 1.2;
	color: var(--ink);
	display: block;
}
.hikamarket_vendor_listing .hikamarket_vendor_name a {
	color: var(--ink);
	text-decoration: none;
}
.hikamarket_vendor_listing .hikamarket_vendor_name a:hover {
	color: var(--gold);
}

/* ─── Vendor detail (show) page ───────────────────────────────────── */
#hikamarket_vendor_page,
.hikamarket_vendor_page {
	font-family: var(--sans);
	color: var(--ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 0;
}
#hikamarket_vendor_top h1,
.hikamarket_vendor_page h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 48px;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 24px;
}
#hikamarket_vendor_page .hikamarket_vendor_image {
	background: var(--bone);
	border: 1px solid var(--line);
	padding: 12px;
	margin: 0 0 16px;
}
#hikamarket_vendor_page .hikamarket_vendor_image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
#hikamarket_vendor_page .hikamarket_vendor_contact {
	margin: 0 0 16px;
}
#hikamarket_vendor_page .hikamarket_vendor_vote {
	margin: 0 0 16px;
}
#hikamarket_vendor_page .hikamarket_vendor_fields {
	margin: 0 0 24px;
}
#hikamarket_vendor_page .hikamarket_vendor_fields dl.hikam_options {
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
#hikamarket_vendor_page .hikamarket_vendor_fields dl.hikam_options > dt {
	font-family: var(--sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	width: 200px;
	padding: 6px 16px 6px 0;
	text-align: left;
}
#hikamarket_vendor_page .hikamarket_vendor_fields dl.hikam_options > dd {
	margin-left: 200px;
	padding: 6px 0;
	color: var(--ink);
	font-size: 14px;
}
#hikamarket_vendor_page .hikamarket_vendor_custom_name { color: var(--mute); }
#hikamarket_vendor_page .hikamarket_vendor_custom_value { color: var(--ink); }

#hikamarket_vendor_description {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
	margin: 24px 0;
	max-width: 720px;
}
#hikamarket_vendor_description h1,
#hikamarket_vendor_description h2,
#hikamarket_vendor_description h3 {
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink);
	margin: 24px 0 12px;
}
#hikamarket_vendor_description a {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hikamarket_vendor_map {
	margin: 24px 0;
	border: 1px solid var(--line);
}

/* ─── Vendor contact button ───────────────────────────────────────── */
#hikamarket_vendor_page .hikamarket_contactvendor_popup,
#hikamarket_vendor_page .hikashop_cart_button.hikabtn-primary,
.hikamarket_vendor_contact .hikabtn,
.hikamarket_vendor_contact a[class*="hikabtn"] {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	padding: 12px 22px !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#hikamarket_vendor_page .hikamarket_contactvendor_popup:hover,
.hikamarket_vendor_contact .hikabtn:hover,
.hikamarket_vendor_contact a[class*="hikabtn"]:hover {
	background: var(--gold) !important;
	color: var(--on-gold, var(--paper)) !important;
	border-color: var(--gold) !important;
}

/* ─── Vendor CPanel (logged-in vendor management) ─────────────────── */
#hikamarket_cpanel_main {
	font-family: var(--sans);
	color: var(--ink);
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 0;
}
.hikamarket_cpanel_title h1,
#hikamarket_cpanel_main h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 36px;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0 0 8px;
}
#hikamarket_cpanel_main h2 {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 24px;
}
#hikamarketcpanel {
	margin-top: 24px;
}

/* CPanel sidebar with vendor action icons.

   Mirrors the HikaShop user-cpanel sidebar treatment from hikashop.css
   (the .hikashop_cpanel_main_interface block): a vertical hairline list
   of horizontal `icon | LABEL` rows, hairline divider between rows,
   bone hover, ink active. Same structural markup is reused by
   HikaMarket's vendor cpanel (same class names — .hika_cpanel_side_bar,
   .hika_cpanel_icons, .hika_cpanel_icon, .hk-icon.fa-stack.fa-2x with
   <i> child, .hikashop_cpanel_button_text), so we lift the rules
   verbatim and re-anchor them under #hikamarket_cpanel_main / the
   .hikamarketcpanel parent. */
#hikamarket_cpanel_main .hika_cpanel_side_bar,
.hikamarketcpanel .hika_cpanel_side_bar {
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
}
#hikamarket_cpanel_main .hika_cpanel_icons,
.hikamarketcpanel .hika_cpanel_icons {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	gap: 0;
}

#hikamarket_cpanel_main .hika_cpanel_icon,
#hikamarket_cpanel_main a.hika_cpanel_icon,
.hikamarketcpanel .hika_cpanel_icon,
.hikamarketcpanel a.hika_cpanel_icon {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	min-height: 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	color: var(--mute);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	transition: background .15s ease, color .15s ease;
	transform: none;
}
#hikamarket_cpanel_main .hika_cpanel_icon:last-child,
.hikamarketcpanel .hika_cpanel_icon:last-child {
	border-bottom: 0;
}
#hikamarket_cpanel_main .hika_cpanel_icon:hover,
#hikamarket_cpanel_main .hika_cpanel_icon:focus,
.hikamarketcpanel .hika_cpanel_icon:hover,
.hikamarketcpanel .hika_cpanel_icon:focus {
	background: var(--bone) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
	transform: none;
	text-decoration: none !important;
}
#hikamarket_cpanel_main .hika_cpanel_icon_active,
.hikamarketcpanel .hika_cpanel_icon_active {
	background: var(--ink) !important;
	color: var(--bone) !important;
}
#hikamarket_cpanel_main .hika_cpanel_icon_active:hover,
.hikamarketcpanel .hika_cpanel_icon_active:hover {
	background: var(--ink) !important;
	color: var(--bone) !important;
}

/* FontAwesome stack — sized to a fixed 36px square so the row stays at
   a predictable height regardless of which glyph the controller picks.
   The stack/fa-2x cascade is overridden so the icon doesn't blow up to
   4em. */
#hikamarket_cpanel_main .hk-icon.fa-stack,
#hikamarket_cpanel_main .hika_cpanel_icon .hk-icon,
#hikamarket_cpanel_main .hika_cpanel_icon .fa-stack,
.hikamarketcpanel .hk-icon.fa-stack,
.hikamarketcpanel .hika_cpanel_icon .hk-icon,
.hikamarketcpanel .hika_cpanel_icon .fa-stack {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	margin: 0 18px 0 0 !important;
	color: var(--ink);
	position: static !important;
	vertical-align: middle;
	background: transparent !important;
}

/* Recolour the stack layers like the HikaShop sidebar does:
   the outer (`fa-stack-2x`) glyph reads as the muted outline,
   the inverse `fa-stack-1x.fa-inverse` punches the cutout in --paper,
   the inner `fa-stack-1x:not(.fa-inverse)` glyph is ink. Hover/active
   flip these to keep contrast against the dark fill. Single-icon
   buttons (just one <i> child) inherit `var(--ink)` from the wrapper. */
#hikamarket_cpanel_main .hk-icon.fa-stack > .fa-stack-2x,
.hikamarketcpanel .hk-icon.fa-stack > .fa-stack-2x {
	position: static !important;
	width: auto !important;
	font-size: 1em !important;
	line-height: 1 !important;
	color: var(--mute);
}
#hikamarket_cpanel_main .hk-icon.fa-stack > .fa-stack-1x,
.hikamarketcpanel .hk-icon.fa-stack > .fa-stack-1x {
	position: static !important;
	width: auto !important;
	font-size: 1em !important;
	line-height: 1 !important;
}
#hikamarket_cpanel_main .hk-icon.fa-stack > .fa-stack-1x.fa-inverse,
.hikamarketcpanel .hk-icon.fa-stack > .fa-stack-1x.fa-inverse {
	color: var(--paper);
}
#hikamarket_cpanel_main .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse),
.hikamarketcpanel .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse) {
	color: var(--ink);
}
#hikamarket_cpanel_main .hika_cpanel_icon:hover .hk-icon.fa-stack > .fa-stack-2x,
.hikamarketcpanel .hika_cpanel_icon:hover .hk-icon.fa-stack > .fa-stack-2x {
	color: var(--ink);
}
#hikamarket_cpanel_main .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-2x,
.hikamarketcpanel .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-2x {
	color: var(--bone);
}
#hikamarket_cpanel_main .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x.fa-inverse,
.hikamarketcpanel .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x.fa-inverse {
	color: var(--ink);
}
#hikamarket_cpanel_main .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse),
.hikamarketcpanel .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse) {
	color: var(--bone);
}

/* Single-glyph rows (no fa-stack-2x / -1x — just one <i>) inherit the
   row colour. */
#hikamarket_cpanel_main .hika_cpanel_icon i.fa,
#hikamarket_cpanel_main .hika_cpanel_icon i.fas,
#hikamarket_cpanel_main .hika_cpanel_icon i.far,
#hikamarket_cpanel_main .hika_cpanel_icon i.fab,
.hikamarketcpanel .hika_cpanel_icon i.fa,
.hikamarketcpanel .hika_cpanel_icon i.fas,
.hikamarketcpanel .hika_cpanel_icon i.far,
.hikamarketcpanel .hika_cpanel_icon i.fab {
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	width: auto !important;
}

/* Legacy 48px PNG variant (when a button has no `fa` key the controller
   falls back to a sprite-style background image). Keep it the same
   visual size as the FA glyphs and invert the dark PNG on the dark
   active row so the icon stays visible. */
#hikamarket_cpanel_main .hika_cpanel_icon .hkicon-48,
.hikamarketcpanel .hika_cpanel_icon .hkicon-48 {
	display: inline-block !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 18px 0 0 !important;
	padding: 0 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	background-color: transparent !important;
}
#hikamarket_cpanel_main .hika_cpanel_icon_active .hkicon-48,
.hikamarketcpanel .hika_cpanel_icon_active .hkicon-48 {
	filter: invert(1) brightness(1.4);
}

/* Label — inherits row typography. */
#hikamarket_cpanel_main .hika_cpanel_icon .hikashop_cpanel_button_text,
.hikamarketcpanel .hika_cpanel_icon .hikashop_cpanel_button_text {
	display: block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	line-height: 1.35;
}

/* CPanel main data area */
.hika_cpanel_main_data {
	background: var(--paper);
}

/* CPanel statistics panels */
.hikamarket_cpanel_statistics_top {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.hikamarket_cpanel_statistics_top > [class*="hkc-md-"] {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}
.hikamarket_cpanel_statistics_top .hkc-md-3  { grid-column: span 3; }
.hikamarket_cpanel_statistics_top .hkc-md-4  { grid-column: span 4; }
.hikamarket_cpanel_statistics_top .hkc-md-6  { grid-column: span 6; }
.hikamarket_cpanel_statistics_top .hkc-md-8  { grid-column: span 8; }
.hikamarket_cpanel_statistics_top .hkc-md-9  { grid-column: span 9; }
.hikamarket_cpanel_statistics_top .hkc-md-12 { grid-column: span 12; }
@media (max-width: 768px) {
	.hikamarket_cpanel_statistics_top { grid-template-columns: 1fr; }
	.hikamarket_cpanel_statistics_top > [class*="hkc-md-"] { grid-column: span 1 !important; }
}

/* ─── Generic panels (statistics, cards, sections) ────────────────── */
.hikamarket_panel {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 16px;
}
.hikamarket_panel_heading {
	background: var(--bone) !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 12px 16px !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
}
/* Google Charts hard-codes a `<rect fill="#ffffff">` underneath the
   plot area as the chart canvas background. That stays white on every
   preset (jarring on the dark ones — futuristic, computer, nordic).
   Override the SVG paint with `fill: var(--paper)` and force the same
   on every `[fill="#ffffff"]` rect inside HikaMarket panels so the
   chart canvas tracks the active surface. CSS `fill` takes precedence
   over presentation attribute `fill="#ffffff"`. */
.hikamarket_panel svg rect[fill="#ffffff"],
.hikamarket_panel svg rect[fill="#FFFFFF"],
.hikamarket_panel svg rect[fill="#fff"],
[id^="hikamarket_dashboard_stat_"] svg rect[fill="#ffffff"],
[id^="hikamarket_dashboard_stat_"] svg rect[fill="#FFFFFF"],
[id^="hikamarket_dashboard_stat_"] svg rect[fill="#fff"],
[id^="hikamarket_chart_"] svg rect[fill="#ffffff"],
[id^="hikamarket_chart_"] svg rect[fill="#FFFFFF"],
[id^="hikamarket_chart_"] svg rect[fill="#fff"] {
	fill: var(--paper) !important;
}
/* Recolour Google Charts' default text fills (axis labels, tooltip
   text) so they are legible on dark presets too. */
.hikamarket_panel svg text[fill="#222222"],
.hikamarket_panel svg text[fill="#444444"],
.hikamarket_panel svg text[fill="#000000"],
[id^="hikamarket_dashboard_stat_"] svg text[fill="#222222"],
[id^="hikamarket_dashboard_stat_"] svg text[fill="#444444"],
[id^="hikamarket_dashboard_stat_"] svg text[fill="#000000"] {
	fill: var(--ink) !important;
}
/* And the gridlines / axis lines (light grey by default — invisible on
   dark presets). */
.hikamarket_panel svg path[stroke="#cccccc"],
.hikamarket_panel svg line[stroke="#cccccc"],
[id^="hikamarket_dashboard_stat_"] svg path[stroke="#cccccc"],
[id^="hikamarket_dashboard_stat_"] svg line[stroke="#cccccc"] {
	stroke: var(--line) !important;
}

.hikamarket_panel_body {
	padding: 16px !important;
	color: var(--ink);
}
.hikamarket_empty_chart {
	color: var(--mute);
	font-family: var(--sans);
	font-size: 14px;
}

/* ─── HikaMarket cards (product, category, order, discount, plugin) */
/* HikaShop's hikashop.css ships `.hk-card { background-color: #fff }`
   (specificity 0,1,0) and loads after our hikamarket.css, so a bare
   `.hk-card-vendor-order { background: var(--paper) }` rule loses the
   cascade tie. Chain the base class to bump specificity to (0,2,0)
   and use `!important` on the surfaces to beat both that and
   HikaShop's `.hk-card-default > .hk-card-header { background-color: #f5f5f5 }`
   (specificity 0,2,1, but `!important` outranks). */
.hk-card.hk-card,
.hk-card.hk-card-default,
.hk-card.hk-card-product,
.hk-card.hk-card-category,
.hk-card.hk-card-vendor-order,
.hk-card.hk-card-discount,
.hk-card.hk-card-plugin {
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 12px;
	color: var(--ink);
}
.hk-card.hk-card > .hk-card-header,
.hk-card.hk-card-default > .hk-card-header,
.hk-card.hk-card-vendor-order > .hk-card-header,
.hk-card-product > .hk-card-header,
.hk-card-category > .hk-card-header,
.hk-card-vendor-order > .hk-card-header,
.hk-card-discount > .hk-card-header,
.hk-card-plugin > .hk-card-header {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	padding: 10px 16px;
	font-family: var(--sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hk-card.hk-card > .hk-card-footer,
.hk-card.hk-card-default > .hk-card-footer {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border-top: 1px solid var(--line) !important;
	color: var(--ink) !important;
}
.hk-card-product .hk-card-body,
.hk-card-category .hk-card-body,
.hk-card-vendor-order .hk-card-body,
.hk-card-discount .hk-card-body,
.hk-card-plugin .hk-card-body,
.hk-card.hk-card > .hk-card-body {
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	padding: 12px 16px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
}

/* Bootstrap-flavoured `.hk-well` block (HikaShop / HikaMarket use it
   for the user-points box and similar callouts) — same `#f5f5f5`
   default. */
.hk-well {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink) !important;
}
.hk-card-product .hkm_product_price,
.hk-card-vendor-order .hkm_order_price {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* Vendor-order cards (rendered on the vendor's order list). The
   header is a 2-column row with date+clock-icon on the left and the
   total+credit-card icon on the right; the body is a 4-column row
   with order number + customer email, status pill, billing, shipping. */
.hk-card-vendor-order {
	margin-bottom: 16px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.hk-card-vendor-order:hover {
	border-color: var(--ink);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.hk-card-vendor-order .hk-card-header {
	padding: 0;
}
.hk-card-vendor-order .hk-card-header > a {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	color: var(--ink) !important;
	text-decoration: none !important;
	background: transparent;
}
.hk-card-vendor-order .hk-card-header > a:hover {
	background: var(--line);
}
.hk-card-vendor-order .hkm_order_date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 50%;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
}
.hk-card-vendor-order .hkm_order_price {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 1 1 50%;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	text-align: right;
}
.hk-card-vendor-order .hk-card-header i.fa,
.hk-card-vendor-order .hk-card-header i.fas,
.hk-card-vendor-order .hk-card-header i.far {
	color: var(--mute);
	font-size: 12px;
}

.hk-card-vendor-order .hk-card-body {
	padding: 16px;
}
.hk-card-vendor-order .hk-card-body .hk-row-fluid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 16px;
	align-items: start;
}
@media (max-width: 768px) {
	.hk-card-vendor-order .hk-card-body .hk-row-fluid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.hk-card-vendor-order .hk-card-body .hk-row-fluid { grid-template-columns: 1fr; }
}
.hk-card-vendor-order .hk-card-body [class*="hkc-sm-"] {
	width: auto;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.hk-card-vendor-order .hkc-sm-4 { grid-column: span 2; }
.hk-card-vendor-order .hkc-sm-3 { grid-column: span 1; }
.hk-card-vendor-order .hkc-sm-2 { grid-column: span 1; }
@media (max-width: 768px) {
	.hk-card-vendor-order .hkc-sm-4 { grid-column: 1 / -1; }
	.hk-card-vendor-order .hkc-sm-3,
	.hk-card-vendor-order .hkc-sm-2 { grid-column: span 1; }
}

/* Order number block — large serif italic for the reference, with the
   customer email row underneath in the muted sans. */
.hk-card-vendor-order .hkm_order_number {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hk-card-vendor-order .hkm_order_number > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	color: var(--ink) !important;
	text-decoration: none !important;
	letter-spacing: -0.005em;
}
.hk-card-vendor-order .hkm_order_number > a:hover {
	color: var(--gold) !important;
}
.hk-card-vendor-order .hkm_order_number > a i.fa,
.hk-card-vendor-order .hkm_order_number > a i.far {
	font-size: 14px;
	color: var(--mute);
	margin-right: 0 !important;
}
.hk-card-vendor-order .hika_order_number_value {
	font-family: var(--serif);
	font-style: italic;
}
.hk-card-vendor-order .hkm_order_customer {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.hk-card-vendor-order .hkm_order_customer i.fa,
.hk-card-vendor-order .hkm_order_customer i.fas {
	font-size: 11px;
	color: var(--mute);
}

/* Status column — the order-label pill is already styled (see "Status
   labels" section); just centre it in its column. */
.hk-card-vendor-order .hkm_order_status {
	display: flex;
	align-items: flex-start;
	padding-top: 4px;
}

/* Billing / shipping columns — small address text, no chrome. The
   blocks are rendered as plain divs by HikaMarket and may contain
   only whitespace when the order has no addresses. CSS `:empty` does
   NOT match whitespace-only elements, so we don't try to auto-hide
   them — instead we keep them transparent and let the grid carry the
   layout: an empty cell just leaves blank space in its column. */
.hk-card-vendor-order .hkm_order_billing,
.hk-card-vendor-order .hkm_order_shipping {
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.45;
	color: var(--mute);
}

/* ─── Tables (listings, statistics, options) ──────────────────────── */
table.hikam_table {
	width: 100%;
	max-width: 100%;
	color: var(--ink);
	background: var(--paper);
	border-spacing: 0;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 14px;
}
table.hikam_table.hikam_bordered,
table.hikam_table.hikam_bordered td,
table.hikam_table.hikam_bordered > thead > tr > th {
	border: 1px solid var(--line);
}
table.hikam_table th,
table.hikam_table.hikam_bordered > thead > tr > th {
	background: var(--bone) !important;
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}
table.hikam_table tr.row0,
table.hikam_table > tbody > tr:nth-of-type(odd) {
	background: var(--paper) !important;
}
table.hikam_table tr.row1,
table.hikam_table > tbody > tr:nth-of-type(even) {
	background: var(--bone) !important;
}
table.hikam_table tbody tr.row0:hover,
table.hikam_table tbody tr.row1:hover,
table.hikam_table tbody tr:hover {
	background: var(--line) !important;
}
table.hikam_table td {
	padding: 12px 14px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	vertical-align: middle;
}

/* ─── Toolbar ─────────────────────────────────────────────────────── */
.hikam_toolbar {
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 8px 12px !important;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.hikam_toolbar .hikabtn,
.hikam_toolbar a.hikabtn,
.hikam_toolbar button.hikabtn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 8px 14px !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	margin: 0 !important;
}
.hikam_toolbar .hikabtn:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
/* Icons inside toolbar buttons inherit the button's current colour
   (ink by default, paper on hover) so they stay legible against the
   filled hover background. The base toolbar icon size is overridden
   from HikaMarket's stock 28px to a more proportional 14px. */
.hikam_toolbar .hikabtn .fa,
.hikam_toolbar .hikabtn i.fa,
.hikam_toolbar .hikabtn i.fas,
.hikam_toolbar .hikabtn i.far,
.hikam_toolbar .hikabtn i.fab {
	color: inherit !important;
	font-size: 13px !important;
	line-height: 1;
}
/* Keep label and icon on the same baseline; HikaMarket sometimes wraps
   the label in `.btnName` as block, which would push the icon onto its
   own line inside the inline-flex button. */
.hikam_toolbar .hikabtn .btnName {
	display: inline;
	line-height: 1;
}
/* HikaMarket nests the buttons inside `.hikam_toolbar_btn` and floats
   the right-aligned group with `.hikam_toolbar_right` (followed by a
   `clear:both` div). Make the inner wrapper a flex container too so
   the `margin-left: auto` trick can push the right-aligned actions to
   the far end without relying on float, then hide the now-redundant
   clearfix div. */
.hikam_toolbar .hikam_toolbar_btn {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.hikam_toolbar .hikam_toolbar_btn > .hikam_toolbar_right,
.hikam_toolbar .hikam_toolbar_right {
	margin-left: auto;
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.hikam_toolbar .hikam_toolbar_btn > div[style*="clear"] { display: none; }
.hikam_toolbar div.sep {
	background: var(--line);
	width: 1px !important;
	display: inline-block;
	margin: 0 8px;
}
.hikam_toolbar .hikam_btn_16 div.sep,
.hikam_toolbar .hikam_btn_32 div.sep,
.hikam_toolbar .hikam_btn_48 div.sep {
	height: 24px;
}

/* ─── Breadcrumb ──────────────────────────────────────────────────── */
/* HikaMarket's frontend_default.css ships
   `.hikam_breadcrumb { background-color: #f5f5f5 }` at the same
   specificity (0,1,0) as our override and loads later in the cascade,
   so a plain `.hikam_breadcrumb { background: var(--bone) }` rule
   loses the tie. Force the surface with `!important` plus an explicit
   `background-color` longhand. */
.hikam_breadcrumb {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 10px 14px;
	margin: 4px 0;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink) !important;
}
.hikam_breadcrumb a {
	color: var(--ink);
	text-decoration: none;
}
.hikam_breadcrumb a:hover { color: var(--gold); }
.breadcrumb_sep {
	color: var(--mute);
	padding: 0 8px;
}
.hikam_breadcrumb .breadcrumb_el {
	color: var(--ink);
	font-weight: 500;
}

/* ─── Category explorer (breadcrumb + collapsible tree popup) ─────── */
/* HikaMarket renders a "click-to-expand" breadcrumb on the
   product-listing page that drops down a category tree built by
   `otree.js`. The popup is an absolutely-positioned panel below the
   breadcrumb, opened by toggling `.explorer_open` on the wrapper. */
.hikam_breadcrumb_explorer {
	position: relative;
	z-index: 30;
}
.hikam_breadcrumb_explorer .hikam_breadcrumb {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.hikam_breadcrumb_explorer .hikam_breadcrumb:hover {
	background: var(--line);
}
.hikam_breadcrumb_explorer .hikam_breadcrumb .breadcrumb_el {
	flex: 1 1 auto;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
}

/* The "expand" icon (folder-open by default). Recolour from
   #337ab7 (default Bootstrap blue) to the muted token, and rotate
   subtly when the explorer is open as an extra affordance. */
.hikam_breadcrumb_explorer .breadcrumb_expand_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	float: none !important;
	color: var(--mute) !important;
	font-size: 13px;
	transition: color 0.15s ease, transform 0.2s ease;
}
.hikam_breadcrumb_explorer:hover .breadcrumb_expand_icon,
.hikam_breadcrumb_explorer.explorer_open .breadcrumb_expand_icon {
	color: var(--ink) !important;
}
.hikam_breadcrumb_explorer.explorer_open .breadcrumb_expand_icon {
	transform: scale(1.05);
}

/* When open, lift the breadcrumb chrome to the ink fill so it reads
   as the active "header" of the popup below. The default
   `background-color: #c0d6ed` (light blue) doesn't track the preset. */
.hikam_breadcrumb_explorer.explorer_open .hikam_breadcrumb {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: var(--paper) !important;
}
.hikam_breadcrumb_explorer.explorer_open .hikam_breadcrumb .breadcrumb_el,
.hikam_breadcrumb_explorer.explorer_open .hikam_breadcrumb .breadcrumb_expand_icon {
	color: var(--paper) !important;
}

/* The dropdown panel. Override the default hover-to-open: that's
   triggered too easily and pops up while the merchant just passes the
   mouse. Restrict the open state to the explicit `.explorer_open`
   class added on click. Also recolour the chrome and remove the
   forced `overflow: scroll` so short trees don't get unnecessary
   scrollbars. */
.hikam_breadcrumb_explorer .hikam_category_explorer {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	min-width: 280px;
	width: auto;
	max-width: none;
	min-height: 0;
	max-height: 60vh;
	overflow: auto !important;
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
	padding: 8px 14px;
	z-index: 60;
}
.hikam_breadcrumb_explorer:hover .hikam_category_explorer { display: none; }
.hikam_breadcrumb_explorer.explorer_open .hikam_category_explorer {
	display: block !important;
}

/* Tree rows inside the explorer. The `.oTree` block is themed already
   in the autocomplete section above; here we tighten the rhythm and
   give selected rows the ink fill so the active category is obvious. */
/* `.oTree` is reused beyond the breadcrumb category-explorer (it also
   renders the product-access tree on the vendor product-edit page,
   the category-picker, and the import wizards). Style every instance
   with the same hairline-row treatment, then add a couple of
   explorer-only refinements below. */
.oTree {
	display: block;
	width: 100%;
	clear: both;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	margin: 0;
}
.oTree .oTreeNode {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0;
	margin: 0;
	min-height: 22px;
	white-space: nowrap;
}
/* Empty `.clip` placeholders (childless or display:none) shouldn't
   add vertical rhythm — collapse them. */
.oTree .clip:empty { display: none; }
/* Tree connector / folder icons (line.gif, join.gif, joinbottom.gif,
   plus.gif, minus.gif, folder.gif, folderopen.gif). They're small
   and bake their own grey/yellow palette into the GIF, so we can't
   recolour them from CSS. `mix-blend-mode: luminosity` lets them
   visually blend with the active surface regardless of preset. */
.oTree .oTreeNode > img,
.oTree .oTreeNode > a > img {
	vertical-align: middle;
	margin: 0 !important;
	flex-shrink: 0;
	mix-blend-mode: luminosity;
	opacity: 0.65;
}
/* Inline checkbox (used by the product-access tree). Tint via
   accent-color and align to the row baseline so it sits flush with
   the connector + folder icons + label. */
.oTree .oTreeNode > input[type="checkbox"] {
	margin: 0 4px 0 2px !important;
	accent-color: var(--ink);
	flex-shrink: 0;
}
/* Indent spacers (the .e1, .e2 ... .e6 placeholders) used when a
   tree row is rendered inside a deep subtree. Keep them as fixed-
   width inline blocks so the column alignment matches the explorer
   defaults. */
.oTree .oTreeNode > .e1,
.oTree .oTreeNode > .e2,
.oTree .oTreeNode > .e3,
.oTree .oTreeNode > .e4,
.oTree .oTreeNode > .e5,
.oTree .oTreeNode > .e6 {
	display: inline-block;
	flex-shrink: 0;
}
.oTree .oTreeNode > a {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 2px 8px !important;
	color: var(--ink) !important;
	background: transparent !important;
	font-size: 13px !important;
	line-height: 18px !important;
	border-radius: 0 !important;
	white-space: nowrap;
	text-decoration: none !important;
}
.oTree .oTreeNode > a:hover {
	background: var(--bone) !important;
	color: var(--ink) !important;
	text-decoration: none !important;
}
.oTree .oTreeNode > a.node:hover,
.oTree .oTreeNode > a.nodeSel:hover {
	color: var(--ink) !important;
	text-decoration: none !important;
}
.oTree .oTreeNode > a.nodeSel {
	background: var(--ink) !important;
	color: var(--paper) !important;
	font-weight: 500;
}
.oTree .oTreeNode > a.nodeSel:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
}
/* Hide HikaMarket's line / join / joinbottom connector GIFs — they're
   small grey 19×19 sprites that add visual noise without aiding the
   hierarchy on a hairline-themed surface. The `.e1`–`.e6` indent
   spacers + `.clip { padding-left }` carry the nesting cue, plus the
   chevron toggles below mark expandable rows. */
.oTree .oTreeNode > img[src*="line.gif"],
.oTree .oTreeNode > img[src*="join.gif"],
.oTree .oTreeNode > img[src*="joinbottom.gif"] {
	display: none !important;
}

/* Anchor-wrapped expand/collapse glyphs (plus.gif / minus.gif /
   plusbottom.gif / minusbottom.gif). Replace the bundled GIF with a
   CSS-mask chevron painted in the active palette. The chevron points
   right when the branch is collapsed (plus*) and rotates 90° when
   expanded (minus*), so the toggle reads as a familiar disclosure
   triangle. */
.oTree .oTreeNode > a:has(> img:only-child) {
	width: 18px;
	height: 18px;
	padding: 0 !important;
	background: transparent !important;
	position: relative;
	flex-shrink: 0;
	margin: 0 2px 0 0;
}
/* Rows that don't have an expand/collapse toggle (leaves, or the
   master "all" row in the access tree) need to reserve the same
   18px+2px column at the start so the checkbox / folder / label
   columns align across every row of the tree. Use a leading
   `::before` flex item gated on the absence of an inner anchor with
   only an `<img>` child. */
.oTree .oTreeNode:not(:has(> a:has(> img:only-child)))::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 2px 0 0;
	flex-shrink: 0;
}
.oTree .oTreeNode > a:has(> img:only-child):hover {
	background: transparent !important;
}
/* Hide the underlying sprite — kept in the DOM so HikaMarket's JS can
   still toggle the src attribute, but we paint the chevron ourselves. */
.oTree .oTreeNode > a > img[src*="plus.gif"],
.oTree .oTreeNode > a > img[src*="plusbottom.gif"],
.oTree .oTreeNode > a > img[src*="minus.gif"],
.oTree .oTreeNode > a > img[src*="minusbottom.gif"] {
	visibility: hidden;
}
.oTree .oTreeNode > a:has(> img[src*="plus.gif"])::after,
.oTree .oTreeNode > a:has(> img[src*="plusbottom.gif"])::after,
.oTree .oTreeNode > a:has(> img[src*="minus.gif"])::after,
.oTree .oTreeNode > a:has(> img[src*="minusbottom.gif"])::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	background-color: var(--mute);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 1.5L6 4.5 3 7.5'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 1.5L6 4.5 3 7.5'/></svg>") no-repeat center / contain;
	transform: translate(-50%, -50%);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
/* Expanded state — the GIF has flipped from plus.gif to minus.gif */
.oTree .oTreeNode > a:has(> img[src*="minus.gif"])::after,
.oTree .oTreeNode > a:has(> img[src*="minusbottom.gif"])::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.oTree .oTreeNode > a:has(> img:only-child):hover::after {
	background-color: var(--ink);
}

/* Folder & root icons — keep them as ambient hierarchy hints, just
   subtler so the label is the primary read. Pair the muted opacity
   with a small right margin so the row doesn't look cramped. */
.oTree .oTreeNode > img[src*="folder"],
.oTree .oTreeNode > img[src*="world"] {
	opacity: 0.5;
	margin: 0 4px 0 0 !important;
	mix-blend-mode: luminosity;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.oTree .oTreeNode > a.nodeSel ~ img[src*="folder"],
.oTree .oTreeNode:hover > img[src*="folder"],
.oTree .oTreeNode:hover > img[src*="world"] {
	opacity: 0.9;
}

/* Make the entire row act as the click target — the toggle and label
   each have their own click handler, so painting the hover surface on
   the row instead of just the label gives a more clickable feel. */
.oTree .oTreeNode {
	cursor: default;
	transition: background 0.12s ease;
	padding-left: 4px;
	padding-right: 8px;
}
.oTree .oTreeNode:hover {
	background: var(--bone);
}
/* When a row contains the selected (`a.nodeSel`) link we want the
   selection fill to read as the dominant state — keep the ink fill
   on the link, but also paint the rest of the row in the same ink
   so the pill doesn't visually float in mid-row. */
.oTree .oTreeNode:has(> a.nodeSel) {
	background: var(--ink);
}
.oTree .oTreeNode:has(> a.nodeSel) > a.nodeSel {
	background: transparent !important;
	color: var(--paper) !important;
}
.oTree .oTreeNode:has(> a.nodeSel):hover {
	background: var(--ink);
}
.oTree .oTreeNode:has(> a.nodeSel) > a:has(> img:only-child)::after,
.oTree .oTreeNode:has(> a.nodeSel) > img[src*="folder"],
.oTree .oTreeNode:has(> a.nodeSel) > img[src*="world"] {
	background-color: var(--paper);
	mix-blend-mode: normal;
	opacity: 0.85;
}

/* The label `<a>` should fill the rest of the row so the hover
   highlight extends visually rather than stopping at the text. */
.oTree .oTreeNode > a.node,
.oTree .oTreeNode > a.nodeSel {
	flex: 1 1 auto;
	min-width: 0;
}

/* Indent rules — fall-back left padding for descendant containers so
   the nesting reads clearly even with the connector lines hidden. */
.oTree .clip { padding-left: 16px; }

/* ─── Pagination ──────────────────────────────────────────────────── */
.hikamarket_listing_pagination,
.hikamarket_vendors_pagination {
	color: var(--mute);
	font-family: var(--sans);
	font-size: 12px;
	text-align: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.hikamarket_listing_pagination ul.pagination {
	display: inline-flex;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}
.hikamarket_listing_pagination .list-footer .limit {
	color: var(--ink);
	font-weight: 500;
	margin-bottom: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 11px;
}
.hikamarket_listing_pagination .list-footer .limit select,
.hikamarket_listing_pagination .list-footer .limit .inputbox {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 6px 10px;
	font-family: var(--sans);
	font-size: 13px;
}
.hikamarket_listing_pagination .list-footer .pagenav,
.hikamarket_listing_pagination .list-footer a.pagenav {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	font-family: var(--sans) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hikamarket_listing_pagination .list-footer a.pagenav:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
.hikamarket_listing_pagination .list-footer span.pagenav {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
.hikamarket_listing_pagination .list-footer .counter,
.hikamarket_listing_pagination .hikashop_results_counter,
.hikamarket_listing_pagination .hikamarket_results_counter {
	color: var(--mute);
	margin-top: 12px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ─── Status / order labels ───────────────────────────────────────── */
/* Map HikaMarket's seven hard-coded status colours onto template
   tokens so they harmonise with each preset. We keep the semantic
   meaning (created = neutral, confirmed = success, etc.) but pull
   colours from the palette instead of bright stock colours. */
span.hk-label,
span.order-label {
	background: var(--mute) !important;
	color: var(--paper) !important;
	border-radius: 0 !important;
	padding: 4px 10px !important;
	font-family: var(--sans);
	font-size: 10px !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.2;
	text-shadow: none !important;
	display: inline-block;
}
span.hk-label-grey,
span.order-label-created {
	background: var(--mute) !important;
}
span.hk-label-green,
span.order-label-confirmed {
	background: var(--ok) !important;
	color: var(--paper) !important;
}
span.hk-label-blue,
span.order-label-shipped {
	background: var(--ink) !important;
	color: var(--paper) !important;
}
span.hk-label-orange,
span.order-label-cancelled {
	background: var(--gold) !important;
	color: var(--on-gold, var(--paper)) !important;
}
span.hk-label-red,
span.order-label-refunded {
	background: var(--danger) !important;
	color: var(--paper) !important;
}
span.hk-label-black,
span.order-label-all {
	background: var(--ink) !important;
	color: var(--paper) !important;
}
span.hk-label-light,
span.order-label-pending {
	background: var(--bone) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
}
.hk-icon-green  { color: var(--ok) !important; }
.hk-icon-blue   { color: var(--ink) !important; }
.hk-icon-orange { color: var(--gold) !important; }
.hk-icon-red    { color: var(--danger) !important; }

/* ─── Tabs ────────────────────────────────────────────────────────── */
ul.hikam_tabs {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
ul.hikam_tabs > li {
	float: none;
	margin: 0 -1px -1px 0;
}
ul.hikam_tabs > li > a {
	display: block;
	padding: 10px 18px;
	background: var(--bone);
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
ul.hikam_tabs > li > a:hover,
ul.hikam_tabs > li > a:focus {
	background: var(--line);
	color: var(--ink);
	border-color: var(--line);
}
ul.hikam_tabs > li.active > a,
ul.hikam_tabs > li.active > a:hover,
ul.hikam_tabs > li.active > a:focus {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
	border-bottom-color: var(--paper);
}

/* ─── Form fields & sections (vendor edit, product edit, etc.) ────── */
fieldset.hikam_field {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 12px;
	margin-bottom: 12px;
}
fieldset.hikam_field legend {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mute);
	padding: 0 8px;
}
fieldset.hikam_field label,
fieldset.hikam_field span.faux-label {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
}
.hikamarket_section_container {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0;
	margin-bottom: 8px;
}
h3.hikamarket_section_toggle,
.hikamarket_section_toggle {
	background: var(--bone) !important;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 12px 16px !important;
	margin: 0 !important;
}
.hikamarket_section_toggle:hover {
	background: var(--line) !important;
}
.hikamarket_section_toggle.hk_closed {
	background: var(--bone) !important;
}

/* ─── Definition lists (vendor info, address, options) ────────────── */
/* HikaMarket's default `dl.hikam_options` uses a Bootstrap-2-era float
   layout (`dt { float: left; width: 120px; }` + `dd { margin-left: 130px }`)
   which puts the label on the same baseline as the first row of the
   value. When the value is a multi-row widget (oTree, namebox, address
   block) the dt sits visually next to the first row only and the rest
   of the rows feel orphaned. Convert the dl into a 2-column grid with
   the label top-aligned in column 1 and the value flowing in column 2.
   Same treatment applied to HikaShop's `dl.hika_options` (no "m") which
   the price-edit popup inside the product form uses. */
dl.hikam_options,
dl.hikam_suboptions,
dl.hika_options,
dl.hika_suboptions {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 8px 24px;
	align-items: start;
	margin: 0 0 16px;
	font-family: var(--sans);
	color: var(--ink);
}
dl.hikam_options.large,
dl.hika_options.large {
	grid-template-columns: 240px minmax(0, 1fr);
}
dl.hikam_options > dt,
dl.hika_options > dt,
dl.hikam_suboptions > dt,
dl.hika_suboptions > dt {
	grid-column: 1;
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	color: var(--mute);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: left !important;
	line-height: 1.4;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	min-height: 0;
}
dl.hikam_options > dd,
dl.hika_options > dd,
dl.hikam_suboptions > dd,
dl.hika_suboptions > dd {
	grid-column: 2;
	margin: 0 !important;
	padding: 4px 0 !important;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	min-height: 0;
	float: none !important;
}
@media (max-width: 768px) {
	dl.hikam_options,
	dl.hikam_suboptions,
	dl.hika_options,
	dl.hika_suboptions {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	dl.hikam_options > dt,
	dl.hikam_options > dd,
	dl.hika_options > dt,
	dl.hika_options > dd {
		grid-column: 1;
	}
}

/* ─── Address blocks ──────────────────────────────────────────────── */
#hikamarket_user_addresses_show .hikamarket_user_address,
#hikamarket_user_shipping_addresses_show .hikamarket_user_address,
#hikamarket_user_billing_addresses_show .hikamarket_user_address,
#hikamarket_user_addresses_show .hikashop_address_edition {
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
	margin: 0 8px 8px 0 !important;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
}

/* ─── Order edit blocks ───────────────────────────────────────────── */
div.hikamarket_order_edit_block {
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	margin: 4px 0 !important;
	color: var(--ink);
}
div.hikamarket_order dl label {
	font-weight: 500;
	color: var(--mute);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ─── Dropdown menus (.hkdropdown / .hkdropup) ────────────────────── */
/* HikaMarket ships a Bootstrap-style dropdown stylesheet
   (media/com_hikamarket/css/dropdown.css) with hard-coded white
   surfaces, light-grey hover, and bright blue active state. Recolour
   the surface and every interactive state so dropdowns sit on the
   active preset's palette (notably dark presets — futuristic, computer,
   nordic — where the white surface jars). */
.hkdropdown-menu {
	background-color: var(--paper) !important;
	background-clip: padding-box;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	color: var(--ink);
}
.hkdropdown-menu > li > a,
.hkdropdown-menu > li > span,
.hkdropdown-header {
	color: var(--ink) !important;
	background: transparent !important;
	font-family: var(--sans);
	font-size: 13px;
}
.hkdropdown-header {
	color: var(--mute) !important;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.hkdropdown-menu > li > a:hover,
.hkdropdown-menu > li > a:focus {
	background: var(--bone) !important;
	color: var(--ink) !important;
}
.hkdropdown-menu > .active > a,
.hkdropdown-menu > .active > a:hover,
.hkdropdown-menu > .active > a:focus {
	background: var(--ink) !important;
	color: var(--paper) !important;
}
.hkdropdown-menu > .disabled > a,
.hkdropdown-menu > .disabled > a:hover,
.hkdropdown-menu > .disabled > a:focus {
	color: var(--mute) !important;
	background: transparent !important;
}
.hkdropdown-menu .divider {
	background-color: var(--line) !important;
	margin: 6px 0 !important;
}

/* ─── Generic HikaMarket buttons (registration, save, etc.) ───────── */
/* HikaMarket's frontend_default.css line 1536 ships
   `body.com_hikamarket button.btn { margin-bottom: 9px }` to give
   stand-alone form buttons breathing room from the next field. That
   adds a stray 9px gap below the calendar trigger button (the `📅`
   next to a date input) so the button no longer aligns with the
   bottom of the input. Zero out the margin selectively for buttons
   that sit inside flex / inline-flex input groups where alignment
   matters more than rhythm. */
body.com_hikamarket .field-calendar button.btn,
body.com_hikamarket .field-calendar > button,
body.com_hikamarket .hk-input-group button.btn,
body.com_hikamarket .hkinput-group button.btn,
body.com_hikamarket .input-group button.btn,
body.com_hikamarket .hk-input-group .hikabtn,
body.com_hikamarket .hkinput-group .hikabtn,
body.com_hikamarket .input-group .hikabtn {
	margin-bottom: 0 !important;
}
body.com_hikamarket button.btn,
body.com_hikamarket .hikabtn,
body.com_hikamarket a.hikabtn,
body.com_hikamarket button.hikabtn {
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 10px 18px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body.com_hikamarket button.btn:hover,
body.com_hikamarket .hikabtn:hover,
body.com_hikamarket a.hikabtn:hover {
	background: var(--gold);
	color: var(--on-gold, var(--paper));
	border-color: var(--gold);
}
/* Secondary / inverted variant */
body.com_hikamarket .hikabtn-secondary,
body.com_hikamarket a.hikabtn-secondary {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--line);
}
body.com_hikamarket .hikabtn-secondary:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* ─── Form controls inside HikaMarket forms ──────────────────────── */
/* Use `background-color` (longhand) rather than the `background`
   shorthand so the chevron `background-image`/`background-repeat`
   from template.css's `select {}` rule survives. The shorthand would
   reset background-image to `none` and background-repeat to `repeat`,
   which made the chevron SVG tile across the field on dark presets. */
body.com_hikamarket input[type="text"],
body.com_hikamarket input[type="number"],
body.com_hikamarket input[type="email"],
body.com_hikamarket input[type="url"],
body.com_hikamarket input[type="password"],
body.com_hikamarket input[type="search"],
body.com_hikamarket input[type="tel"],
body.com_hikamarket textarea,
body.com_hikamarket select {
	background-color: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 8px 10px;
	font-family: var(--sans);
	font-size: 14px;
	box-shadow: none;
}
body.com_hikamarket input[type="text"]:focus,
body.com_hikamarket input[type="number"]:focus,
body.com_hikamarket input[type="email"]:focus,
body.com_hikamarket input[type="password"]:focus,
body.com_hikamarket textarea:focus,
body.com_hikamarket select:focus {
	border-color: var(--ink);
	outline: 0;
}

/* ─── Nameboxes (HikaMarket tag-style multi-input + autocomplete) ──── */
/* HikaMarket uses a "namebox" widget for tag-style multi-value fields
   (vendor categories, product categories, ACL group selectors, etc.).
   The default look is a Bootstrap-2-era white-gradient container with
   grey-gradient pills and a blue-on-white autocomplete popup. Recolour
   the whole widget to the template tokens. */

/* Outer container — the field surface that holds the pills + the
   trailing typing input. Same look as a regular input. */
div.nameboxes,
body.com_hikamarket div.nameboxes {
	background: var(--paper) !important;
	background-image: none !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 4px 6px !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	min-height: 38px !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* Individual tag pill. Override the multi-stop linear-gradient with a
   flat bone surface, hairline border, squared corners. */
div.nameboxes div.namebox {
	background: var(--bone) !important;
	background-image: none !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	padding: 3px 22px 3px 8px !important;
	margin: 2px !important;
	min-height: 22px;
	line-height: 16px !important;
	font-size: 12px !important;
	letter-spacing: 0.04em;
	box-shadow: none !important;
	background-clip: padding-box !important;
}

/* Selected (focused) pill — flips to ink fill so the merchant can see
   which tag is currently active for keyboard navigation. */
div.nameboxes div.namebox-focus,
div.nameboxes div.namebox.namebox-focus {
	background: var(--ink) !important;
	background-image: none !important;
	border-color: var(--ink) !important;
	color: var(--paper) !important;
}

/* Hovered pill — subtle bone-line surface. */
div.nameboxes div.namebox-hover,
div.nameboxes div.namebox.namebox-hover {
	background: var(--line) !important;
	background-image: none !important;
	border-color: var(--line) !important;
	color: var(--ink) !important;
}

/* Typing input — transparent so the field surface shows through. */
div.nameboxes div.nametext input,
div.nameboxes div.nametext input:focus {
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	padding: 4px 6px !important;
	min-height: 28px;
	outline: 0 !important;
}
div.nameboxes div.nametext input.placeholder {
	color: var(--mute) !important;
}

/* Close / edit buttons on each pill. HikaMarket uses a 9×9 sprite PNG
   (`background: url('../images/close.png') !important`) which we'd
   have to override with same-specificity rules; instead, hide the
   sprite entirely and render a text "×" / pencil glyph via ::before.
   Specificity of the text-glyph rule is bumped by chaining the class
   (`.namebox.namebox`) so we beat HikaMarket's same-specificity rule
   in the cascade tie regardless of stylesheet load order. */
div.nameboxes div.namebox.namebox a.closebutton,
div.nameboxes div.namebox.namebox a.editbutton {
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 14px !important;
	height: 14px !important;
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--mute) !important;
	font-family: var(--sans) !important;
	font-size: 14px !important;
	line-height: 14px !important;
	font-weight: 500 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.15s ease;
}
div.nameboxes div.namebox.namebox a.closebutton::before {
	content: '\00D7';
	display: inline-block;
	line-height: 1;
}
div.nameboxes div.namebox.namebox a.editbutton {
	right: 22px !important;
}
div.nameboxes div.namebox.namebox a.editbutton::before {
	content: '\270E';
	font-size: 11px;
	display: inline-block;
	line-height: 1;
}
div.nameboxes div.namebox.namebox a.closebutton:hover,
div.nameboxes div.namebox.namebox a.closebutton:focus,
div.nameboxes div.namebox.namebox a.editbutton:hover,
div.nameboxes div.namebox.namebox a.editbutton:focus {
	color: var(--ink) !important;
	background: transparent !important;
}
/* Selected pill: invert the glyph so it stays visible against the dark fill. */
div.nameboxes div.namebox-focus.namebox a.closebutton,
div.nameboxes div.namebox-focus.namebox a.closebutton:hover,
div.nameboxes div.namebox-focus.namebox a.editbutton,
div.nameboxes div.namebox-focus.namebox a.editbutton:hover {
	color: var(--paper) !important;
}

/* ─── Namebox autocomplete popup ──────────────────────────────────── */
div.namebox-popup,
body.com_hikamarket div.namebox-popup {
	position: relative;
}
div.namebox-popup div.namebox-popup-container {
	position: absolute;
	right: 0;
	left: 0;
	min-width: 300px;
	height: auto;
	min-height: 130px;
	z-index: 50;
}
div.namebox-popup div.namebox-popup-content {
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	overflow: auto;
	z-index: 50;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
}
/* Suggestion rows (HikaMarket renders them as <div> children of the
   popup-content). Highlight on hover and on the active row. */
div.namebox-popup div.namebox-popup-content > div,
div.namebox-popup div.namebox-popup-content a {
	display: block;
	padding: 8px 12px !important;
	color: var(--ink) !important;
	border-bottom: 1px solid var(--line);
	background: transparent !important;
	cursor: pointer;
	text-decoration: none !important;
}
div.namebox-popup div.namebox-popup-content > div:last-child,
div.namebox-popup div.namebox-popup-content a:last-child {
	border-bottom: 0;
}
div.namebox-popup div.namebox-popup-content > div:hover,
div.namebox-popup div.namebox-popup-content a:hover,
div.namebox-popup div.namebox-popup-content .selected,
div.namebox-popup div.namebox-popup-content .active,
div.namebox-popup div.namebox-popup-content .hover {
	background: var(--bone) !important;
	color: var(--ink) !important;
}

/* Resize handle (`.oresize`) at the bottom of the popup — used by the
   user to make the suggestions list taller. The default is a 4px
   high grey bar; recolour to a hairline that thickens on hover so it
   reads as a draggable affordance. */
div.namebox-popup div.oresize,
div.namebox-popup-resize,
.namebox-popup-resize {
	right: 33%;
	bottom: 4px;
	width: 33%;
	height: 4px;
	max-width: 33%;
	max-height: 4px;
	cursor: ns-resize !important;
	border: 0 !important;
	background: var(--line) !important;
	transition: background 0.15s ease, height 0.15s ease, max-height 0.15s ease;
}
div.namebox-popup div.oresize:hover,
.namebox-popup-resize:hover {
	background: var(--mute) !important;
	height: 6px;
	max-height: 6px;
}

/* ACL popup variant (used by HikaMarket vendor-user ACL editor) reuses
   the same chrome but is positioned absolutely with a fixed size. */
div.acl-popup-content {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
}

/* ─── oTree / oList / oListTable (autocomplete tree + table) ──────── */
/* Inside a namebox-popup HikaMarket renders either a tree (`.oTree`),
   a list (`.oList`), or a table (`.oList table.oListTable`). The
   default look (otree.css) is white with light-grey thead and bright
   blue (#0066CC / #289CC9) selection states. Recolour every surface
   so the popup tracks the active preset. */
.oTree {
	font-family: var(--sans) !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	background: transparent !important;
}
.oTree a,
.oTree span {
	color: var(--ink) !important;
	font-size: 12px !important;
	text-decoration: none !important;
}
.oTree a.node:hover,
.oTree a.nodeSel:hover {
	color: var(--ink) !important;
	background: var(--bone) !important;
	text-decoration: none !important;
}
.oTree a.nodeSel {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

.oList {
	background: var(--paper) !important;
	color: var(--ink) !important;
}
.oList > ul { margin: 0 !important; padding: 0 !important; }
.oList li { margin: 0; padding: 0; list-style: none; }
.oList a {
	display: block;
	padding: 8px 12px !important;
	color: var(--ink) !important;
	background: transparent !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--line);
}
.oList li:last-child a { border-bottom: 0; }
.oList a:hover,
.oList a.sel {
	background: var(--bone) !important;
	color: var(--ink) !important;
	text-decoration: none !important;
}
.oList em {
	font-weight: 600;
	font-style: normal;
	color: var(--gold);
}

/* Table-mode autocomplete (`<table class="oListTable">`).
   HikaMarket's otree.js renders this both inside `.oList` AND as a
   bare table inside `.namebox-popup-content` depending on the field
   type, so we drop the `.oList` ancestor from our selectors. The
   class is chained twice (`.oListTable.oListTable`) to push specificity
   past HikaMarket's same-specificity rule (the `.oList table.oListTable
   th` default — its `.oList` ancestor would otherwise win on cascade
   order). */
table.oListTable.oListTable {
	width: 100% !important;
	border-collapse: collapse !important;
	background: var(--paper) !important;
	color: var(--ink) !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
}
.oListTable.oListTable thead,
.oListTable.oListTable thead tr,
.oListTable.oListTable th,
.oListTable.oListTable thead th,
table.oListTable.oListTable th {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	background-image: none !important;
	color: var(--ink) !important;
	font-family: var(--sans) !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	padding: 10px 12px !important;
	border-bottom: 1px solid var(--line) !important;
}
.oListTable.oListTable td,
table.oListTable.oListTable td {
	padding: 8px 12px !important;
	border-top: 1px solid var(--line) !important;
	color: var(--ink) !important;
	background: var(--paper) !important;
}
.oList tr.oListLine { background: var(--paper) !important; }
.oList tr.oListLine:hover,
.oList tr.oListLine:hover td {
	background: var(--bone) !important;
	color: var(--ink) !important;
	cursor: pointer;
	text-decoration: none !important;
}
.oList li.oListSelected a,
.oList tr.oListSelected,
.oList tr.oListSelected td {
	background: var(--ink) !important;
	color: var(--paper) !important;
	text-decoration: none !important;
}
.oList tr.oListBlocked { background: var(--bone) !important; opacity: 0.6; }
.oList li.oListLoadMore,
.oList tr.oListLoadMore td {
	background: var(--bone) !important;
	color: var(--mute) !important;
}

/* `.oresize` is also reused by oTree as a CSS-triangle resize handle
   in the bottom-right corner of the namebox popup (border-bottom 15px
   solid + border-left 15px transparent forms a triangle pointing
   down-left). Recolour the visible triangle with --line so it follows
   the preset, and bump to --mute on hover. */
.oresize {
	max-width: 0 !important;
	max-height: 0 !important;
	border-bottom: 15px solid var(--line) !important;
	border-left: 15px solid transparent !important;
	right: 0 !important;
	bottom: 0 !important;
	cursor: se-resize !important;
	z-index: 50;
	background: transparent !important;
	transition: border-bottom-color 0.15s ease;
}
.oresize:hover {
	border-bottom-color: var(--mute) !important;
}

/* ─── Search & filter zone ────────────────────────────────────────── */
.hikam_filter,
.hikam_search_zone,
.hikamarket_search_block,
.hikam_sort_zone {
	font-family: var(--sans);
	color: var(--ink);
}
.hikam_filter td,
.hikam_filter tr {
	border: 0;
	padding: 4px 6px 4px 0;
}

/* ─── Submodules row (modules rendered after a vendor page) ──────── */
.hikamarket_submodules,
#hikamarket_submodules {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* ─── Vendor registration / form pages ────────────────────────────── */
.hikamarket_vendor_edit_page {
	font-family: var(--sans);
	color: var(--ink);
}
.hikamarket_vendor_edit_page h1,
.hikamarket_vendor_edit_page h2 {
	font-family: var(--serif);
	font-style: italic;
	color: var(--ink);
}
.hikamarket_vendor_edit_page .form-actions {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}