/*
 * Maison Vessel — HikaShop demo template
 * Default colour tokens (overridden inline from template params in index.php)
 */
:root {
	--ink: #0E0E0C;
	--paper: #FAF7F1;
	--bone: #F5F1EA;
	--gold: #A8824C;
	--line: #D9D3C6;

	/* Derived tokens (kept fixed — not exposed as params) */
	--ink-2: #1a1a17;
	--bone-2: #EBE6DC;
	--gold-soft: #C8A775;
	--mute: #8A857C;
	--ok: #5b6e4c;

	--serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

	--container-max: 1440px;
	--gutter: 56px;
	--gutter-sm: 20px;

	/* Joomla / Bootstrap bridge vars (so core form / alert styles blend in) */
	--link-color: var(--ink);
	--link-hover-color: var(--gold);
}

/* ─── Reset / base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
svg       { max-width: 100%; height: auto; }  /* inline default; icons in text flow stay on the line */

a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}
a:hover { color: var(--gold); }

h1, h2, h3, h4, h5, h6, .serif {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--ink);
	text-wrap: pretty;
}

h1 { font-size: clamp(36px, 4vw, 56px); }
h2 { font-size: clamp(28px, 3vw, 44px); }
h3 { font-size: clamp(22px, 2.2vw, 32px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

/* Generic fieldset/legend baseline. Browsers default to an ugly
   `2px groove` chrome; many component pages (HikaShop order details,
   account .adminform, …) emit bare <fieldset>/<legend> the template
   never styled. Low specificity (element selectors only) so the
   context-specific rules — #hikashop_checkout fieldset, .contact-form
   fieldset, .vessel-finder-fieldset, etc. — all still win. */
fieldset {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 0 0 24px;
	min-width: 0;
}
legend {
	width: auto;
	padding: 0 8px;
	margin: 0;
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 400;
	color: var(--ink);
}

blockquote {
	border-left: 2px solid var(--gold);
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.2em;
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	color: var(--ink);
}

ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.25em; }

code, pre, kbd, samp {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 0.9em;
}
pre {
	background: var(--bone);
	border: 1px solid var(--line);
	padding: 14px 16px;
	overflow-x: auto;
}

::selection { background: var(--ink); color: var(--bone); }

/* ─── Utility classes ──────────────────────────────────────────────── */
.eyebrow {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
}

.serif-italic { font-family: var(--serif); font-style: italic; }

.full-width { width: 100%; }

.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
@media (max-width: 768px) {
	.container { padding: 0 var(--gutter-sm); }
}

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-grid { flex: 1; display: block; }

/* ─── Announcement bar ─────────────────────────────────────────────── */
.vessel-announcement {
	background: var(--ink);
	color: var(--bone);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 20px;
	font-weight: 400;
	line-height: 1.4;
}
.vessel-announcement a { color: var(--bone); border-bottom: 1px solid color-mix(in srgb, var(--bone) 40%, transparent); padding-bottom: 1px; }
.vessel-announcement a:hover { color: var(--gold); border-color: var(--gold); }

/* ─── Header ───────────────────────────────────────────────────────── */
.vessel-header {
	background: var(--paper);
	border-bottom: 1px solid rgba(14,14,12,0.08);
	padding: 22px var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	position: relative;
	z-index: 100;
}
.vessel-header.is-sticky { position: sticky; top: 0; }
/* Anchor / in-page-link offset: when the header is sticky it overlaps
   the top of the scrolled-to target. scroll-padding-top on the root
   scroller makes the browser's anchor scroll (and JS smooth-scroll)
   stop clear of it. Scoped via :has() so non-sticky pages aren't
   over-offset. --vessel-header-h is set at runtime by template.js
   (real measured height; the 80px is just a pre-JS fallback). */
html:has(.vessel-header.is-sticky) {
	scroll-padding-top: calc(var(--vessel-header-h, 80px) + 16px);
}

.vessel-header-menu {
	display: flex;
	align-items: center;
	min-width: 0;
}
/* Top-level menu UL only — scoped with `>` so nested <ul>s in the
   mega panel don't inherit `display: flex`, which would override the
   grid/flex layouts the mega-menu CSS sets up further below. */
.vessel-header-menu > ul,
.vessel-header-menu > .mod-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex !important; gap: 18px !important; flex-wrap: nowrap !important;
	align-items: center;
}
/* Reset list chrome on nested <ul>s (panel + columns) so they don't
   inherit browser defaults; the mega-menu CSS layers grid/flex on top. */
.vessel-header-menu ul ul {
	list-style: none; margin: 0; padding: 0;
}
.vessel-header-menu li { margin: 0; padding: 0; white-space: nowrap; }
.vessel-header-menu .item-101 { display: none; } /* hide Home - click logo to go home */
.vessel-header-menu a {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink);
	padding: 0 0 2px;
	border-bottom: 1px solid transparent;
	text-transform: none;
	text-decoration: none;
}
.vessel-header-menu a:hover,
.vessel-header-menu .active > a { border-bottom-color: var(--ink); color: var(--ink); }
/* The exact active item (Joomla adds `.current`; `.active` also lands
   on the whole ancestor trail) gets the gold accent so there is a
   clear "you are here" cue, distinct from hover. Defined last so it
   wins over `.active > a` on the item that carries both. */
.vessel-header-menu li.current > a {
	color: var(--gold) !important;
	border-bottom-color: var(--gold) !important;
	font-weight: 600 !important;
}

/* ─── Mega menu ──────────────────────────────────────────────────────
   Any top-level menu item with children becomes a mega-menu host. The
   submenu (Joomla's `.mod-menu__sub`) drops down as a full-width panel
   under the header. Children of that submenu become columns; if those
   children are themselves parents (ie. there's a third nesting level),
   the second-level child renders as a column heading and its children
   become the column's links. Headings (Joomla "Heading" menu type) and
   separators (Joomla "Separator" type) get the same treatment.
   The implementation is data-driven — no markup hooks beyond Joomla's
   stock mod_menu output. Customers building unrelated sites can use the
   same pattern and just configure their menus accordingly. */

/* 1. Top-level parents — chevron indicator + relative positioning so the
      panel can anchor under it. We keep the panel anchored to the header
      itself (full-width) rather than the <li>, by making the <li> non-
      relative and positioning the panel from `top: 100%` of the header.
      The header is already position: relative (z-index: 100). */
.vessel-header-menu .mod-menu > li.parent > a,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__heading,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__separator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.vessel-header-menu .mod-menu > li.parent > a::after,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__heading::after,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__separator::after {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 4px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.vessel-header-menu .mod-menu > li.parent.is-open > a::after,
.vessel-header-menu .mod-menu > li.parent.is-open > .mod-menu__heading::after,
.vessel-header-menu .mod-menu > li.parent.is-open > .mod-menu__separator::after {
	transform: translateY(2px) rotate(225deg);
}

/* Joomla auto-emits a <button class="mod-menu__toggle-sub"> for parent
   items with children. We hide it visually and rely on the CSS chevron
   above; the button still exists in the DOM for keyboard / a11y use. */
.vessel-header-menu .mod-menu__toggle-sub {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0; padding: 0; margin: -1px;
	white-space: nowrap;
}
/* Joomla wraps a "Heading"-type parent's label INSIDE the
   mod-menu__toggle-sub button (no <a>, accessible disclosure). The
   clip rule above would then hide the whole label. For TOP-LEVEL
   parents, un-clip the button and present it as the nav label
   itself (the chevron + hover-panel behaviour is unchanged). */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub {
	position: static;
	width: auto; height: auto;
	overflow: visible;
	clip: auto;
	margin: 0; padding: 0;
	background: transparent; border: 0;
	color: inherit; font: inherit; cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub .mod-menu__heading {
	display: inline-flex; align-items: center; gap: 6px;
	font: inherit; color: inherit;
}
/* Use Vessel's own caret; hide Joomla's injected chevron glyph. */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub .icon-chevron-down,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub [class*="icon-chevron"] {
	display: none;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub::after {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 2px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.vessel-header-menu .mod-menu > li.parent.is-open > .mod-menu__toggle-sub::after,
.vessel-header-menu .mod-menu > li.parent:hover > .mod-menu__toggle-sub::after,
.vessel-header-menu .mod-menu > li.parent:focus-within > .mod-menu__toggle-sub::after {
	transform: translateY(2px) rotate(225deg);
}

/* Hover bridge — the panel anchors to the header's bottom edge
   (top:100%), but the header has vertical padding, leaving dead
   space between the label and the panel where :hover is lost while
   the cursor travels down. A transparent ::before under each
   top-level label spans that gap so the parent stays hovered the
   whole way to the panel (the chevron uses ::after, so the bridge
   is ::before). */
.vessel-header-menu .mod-menu > li.parent > a,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__heading,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__separator {
	position: relative;
}
.vessel-header-menu .mod-menu > li.parent > a::before,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__heading::before,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__toggle-sub::before,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__separator::before {
	content: '';
	position: absolute;
	left: -16px; right: -16px;
	top: 100%;
	height: 40px;
	/* transparent; only there to keep :hover alive across the gap */
}

/* 2. The mega panel — first-level submenu under a top-level parent.
      Spans the full header width (left:0; right:0; top:100%; relative
      to .vessel-header), hidden by default. */
.vessel-header-menu .mod-menu > li.parent {
	position: static; /* defer positioning to .vessel-header */
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	padding: 40px var(--gutter, 56px);
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 24px 48px -24px rgba(14,14,12,0.12);
	z-index: 50;

	/* Hidden initial state */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition:
		opacity .25s cubic-bezier(.2,.7,.2,1),
		transform .25s cubic-bezier(.2,.7,.2,1),
		visibility 0s linear .25s;

	/* Multi-column auto-flow. Each direct child <li> becomes a column.
	   minmax(180px, 1fr) means columns target ~180px wide and stretch
	   to fill, so wide screens get 4-6 columns, narrow ones get fewer. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px 40px;
	list-style: none;
}

/* Open state — hover, focus-within (keyboard tab into the panel), or
   .is-open class added by JS for click/touch. */
.vessel-header-menu .mod-menu > li.parent:hover > .mod-menu__sub,
.vessel-header-menu .mod-menu > li.parent:focus-within > .mod-menu__sub,
.vessel-header-menu .mod-menu > li.parent.is-open > .mod-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition:
		opacity .25s cubic-bezier(.2,.7,.2,1),
		transform .25s cubic-bezier(.2,.7,.2,1);
}

/* 3. Inside the panel — direct children layout.
      A. If a panel child is itself a parent (level-2 with children),
         it renders as a column: heading on top, list of links below.
      B. If a panel child is a leaf (no children), render as a single
         link occupying its grid cell. */

/* Column container — second-level item with children */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li {
	margin: 0; padding: 0;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li > a,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__heading {
	display: block;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin-bottom: 14px;
	border-bottom: 0;
	padding: 0;
}

/* Column links — third-level <ul class="mod-menu__sub"> inside a column */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__sub {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__sub > li > a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--serif);
	font-size: 17px;
	font-style: normal;
	letter-spacing: -0.005em;
	color: var(--ink);
	border-bottom: 0;
	padding: 0;
	text-transform: none;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__sub > li > a:hover {
	color: var(--gold);
}

/* Item note (the "Color / Size / etc." annotation in mega menus).
   Joomla doesn't render the menu item's `note` field by default, so we
   emit it via templates/vessel/html/mod_menu/default_url.php as a
   <small class="vessel-menu-note">. Style it as a subscript-ish label. */
.vessel-header-menu .vessel-menu-note {
	display: inline-block;
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin-left: 2px;
	transform: translateY(-4px);
}

/* Current/active state inside the panel — small bullet before the link */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub .current > a::before,
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub .active > a::before {
	content: '•';
	display: inline-block;
	margin-right: 6px;
	color: var(--gold);
}

/* Separator items inside a column — dotted-line group divider */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub li.divider {
	margin: 6px 0;
	height: 1px;
}
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub li.divider .mod-menu__separator {
	display: block;
	height: 1px;
	font-size: 0;
	border-bottom: 1px dotted var(--line);
}
/* If the separator carries text (Joomla allows a label), keep the text
   visible above the dotted line as a small mute caption. */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub li.divider .mod-menu__separator:not(:empty) {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
	border-bottom: 1px dotted var(--line);
	padding-bottom: 4px;
	margin-bottom: 4px;
	height: auto;
}

/* Leaf items at the panel's top level (no column heading wrapper) — these are
   standalone links, e.g. a simple one-level menu (a parent with a flat list of
   category links). Match the main menu items (sans, compact, letter-spaced)
   rather than the serif column-link look, so the dropdown reads as an extension
   of the top menu. The serif link look stays for links nested under a heading. */
.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub > li:not(.parent):not(.divider) > a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.1em;
	text-transform: none;
	border-bottom: 0;
	padding: 0;
	margin-bottom: 0;
}

/* Reduced motion — skip the slide/fade, just show/hide */
@media (prefers-reduced-motion: reduce) {
	.vessel-header-menu .mod-menu > li.parent > .mod-menu__sub {
		transform: none;
		transition: none;
	}
}

/* Mobile — collapse the mega panel into an accordion-style inline
   expand inside the off-canvas drawer. The drawer is already shown via
   `.vessel-header-menu.is-open` (further below in the file); inside it,
   parents expand on click only when they themselves carry .is-open
   (toggled by the same JS that handles desktop). */
@media (max-width: 900px) {
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent > .mod-menu__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		display: none;
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 12px 0 8px 18px;
		background: transparent;
		border: 0;
		box-shadow: none;
		transition: none;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent.is-open > .mod-menu__sub {
		display: grid;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__sub {
		gap: 6px;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent > .mod-menu__sub > li > .mod-menu__sub > li > a,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent > .mod-menu__sub > li:not(.parent):not(.divider) > a {
		font-size: 15px;
	}
	/* In the open drawer the submenus are shown expanded (rules below),
	   so the Joomla disclosure button is presented as the section's
	   heading row in normal flow. It must NOT be an absolute, invisible
	   overlay: that sat on top of the first child link of each section
	   and swallowed its tap (the first item appeared dead). */
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent {
		position: relative;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li.parent > .mod-menu__toggle-sub {
		position: static;
		clip: auto;
		width: 100%; height: auto;
		margin: 0;
		opacity: 1;
	}
}

.vessel-logo {
	display: flex; align-items: center; justify-content: center;
	color: var(--ink);
}
.vessel-logo img, .vessel-logo svg { height: var(--vessel-logo-h, 22px); width: auto; }

/* Header layout option: logo left, menu centered, icons right.
   Overrides the default 1fr/auto/1fr grid with a single flex row so
   all three zones sit on the same baseline, vertically centered,
   regardless of the menu's mega-panel children. Scoped to the
   option class so the default Vessel layout is untouched. */
.vessel-header--logo-left { display: flex; align-items: center; gap: 24px; }
.vessel-header--logo-left .vessel-logo         { order: 1; flex: 0 0 auto; align-self: center; justify-content: flex-start; }
.vessel-header--logo-left .vessel-header-menu  { order: 2; flex: 1 1 auto; align-self: center; justify-content: center; }
.vessel-header--logo-left .vessel-header-icons { order: 3; flex: 0 0 auto; align-self: center; justify-content: flex-end; }
/* Top-level items must read at least as strong as the mega-panel
   links (panel <a> is 17px); the base .vessel-header-menu a rule is
   only 11px. Lift parents/leaves on the top row. */
.vessel-header--logo-left .vessel-header-menu > .mod-menu > li > a,
.vessel-header--logo-left .vessel-header-menu > .mod-menu > li > .mod-menu__heading,
.vessel-header--logo-left .vessel-header-menu > .mod-menu > li > .mod-menu__toggle-sub,
.vessel-header--logo-left .vessel-header-menu > .mod-menu > li > .mod-menu__separator {
	font-size: 20px;
	letter-spacing: 0.005em;
}
/* The FA icon span ships with Bootstrap-ish `p-2` padding that
   inflates the row height and throws off vertical centering. Tame
   it on the top row. */
.vessel-header--logo-left .vessel-header-menu > .mod-menu > li > * > [class*="fa-"] {
	padding: 0 6px 0 0 !important;
}
.vessel-logo .brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.vessel-logo .site-description {
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--mute); margin-top: 4px; text-align: center;
}

.vessel-header-icons {
	display: flex; align-items: center; justify-content: flex-end;
	gap: 22px;
	font-size: 11px; letter-spacing: 0.14em;
	color: var(--ink);
}
.vessel-header-icons > * { display: flex; align-items: center; gap: 6px; }

/* HikaShop cart in the header: present it as a cart icon in BOTH
   states. When empty, HikaShop renders only `.hikashop_cart_empty_message`
   (no link), so we can't hide it — instead we collapse its text and
   paint the cart glyph on it. When the cart has items the small-cart
   link gets the same glyph (count/total still show after it).
   Generic — any Vessel site with a header HikaShop cart benefits. */
.vessel-header-icons .hikashop_cart .hikashop_cart_empty_message {
	font-size: 0 !important;
	color: transparent !important;
	line-height: 0;
}
.vessel-header-icons .hikashop_cart .hikashop_small_cart_checkout_link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; color: var(--ink); text-decoration: none;
}
.vessel-header-icons .hikashop_cart .hikashop_cart_empty_message::before,
.vessel-header-icons .hikashop_cart .hikashop_small_cart_checkout_link::before {
	content: "";
	display: inline-block;
	width: 22px; height: 22px;
	background: url("/media/brand/cart.svg") no-repeat center / contain;
	flex: 0 0 22px;
}

/* Account menu (mod_menu in header-icons position) — strip the default
   nav/list chrome and show the account SVG icon next to a single link. */
.vessel-header-icons .vessel-account-module,
.vessel-header-icons ul.vessel-account {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.vessel-header-icons ul.vessel-account .nav-item,
.vessel-header-icons ul.vessel-account li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vessel-header-icons ul.vessel-account a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	padding: 4px 0;
	transition: opacity .15s ease;
}
.vessel-header-icons ul.vessel-account a:hover { opacity: 0.7; }
.vessel-header-icons ul.vessel-account a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("../images/account.svg");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 16px;
}

/* Search menu — same chrome strip + icon-link treatment as the Account menu.
   The label is hidden so the search reads as an icon-only button (the link
   text remains for screen readers). */
.vessel-header-icons .vessel-search-module,
.vessel-header-icons ul.vessel-search {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.vessel-header-icons ul.vessel-search .nav-item,
.vessel-header-icons ul.vessel-search li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.vessel-header-icons ul.vessel-search a {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: var(--ink);
	text-decoration: none;
	padding: 4px;
	font-size: 0;
	transition: opacity .15s ease;
}
.vessel-header-icons ul.vessel-search a:hover { opacity: 0.7; }
.vessel-header-icons ul.vessel-search a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("../images/search.svg");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
	flex: 0 0 16px;
}

/* Mobile hamburger */
.vessel-menu-toggle {
	display: none;
	background: none; border: 0; padding: 8px; cursor: pointer;
	color: var(--ink);
}

@media (max-width: 900px) {
	.vessel-header {
		grid-template-columns: auto 1fr auto;
		padding: 14px var(--gutter-sm);
	}
	.vessel-header-menu { display: none; }
	.vessel-header-menu.is-open {
		display: block;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--paper); padding: 20px var(--gutter-sm);
		border-bottom: 1px solid var(--line);
	}
	.vessel-header-menu.is-open ul { flex-direction: column; gap: 16px; }
	.vessel-menu-toggle { display: inline-flex; }
	.vessel-header-icons { gap: 14px; }
	.vessel-header-icons .vessel-currency { display: none; }
}

/* Mobile header must always fit the viewport. The icon row (search +
   account + cart) kept its text labels and the cart its "N item for X"
   total, so logo + labels + hamburger overran narrow screens: the page
   scrolled sideways and the hamburger sat off the right edge. Collapse
   the account/cart to glyphs and let the logo scale down so the row fits
   any phone and the hamburger stays on screen. */
@media (max-width: 900px) {
	.vessel-header--logo-left { gap: 10px; }
	.vessel-header { padding-left: 14px; padding-right: 14px; }
	.vessel-header .vessel-logo { flex: 0 1 auto; min-width: 0; }
	.vessel-header .vessel-logo svg,
	.vessel-header .vessel-logo img {
		width: 100%; height: auto;
		max-width: 160px; max-height: 20px;
	}
	.vessel-header-icons { gap: 12px; }
	.vessel-header-icons ul.vessel-account a { font-size: 0; gap: 0; }
	.vessel-header-icons .hikashop_cart .hikashop_small_cart_checkout_link { font-size: 0; gap: 0; }
}

/* Mobile nav, robust pass. The desktop mega-menu (flex row +
   absolute, opacity:0 hover panels) and the .vessel-header--logo-left
   flex rules out-specify the simple mobile rules above, so the open
   panel showed an empty/clipped strip and the submenus stayed hidden.
   Force a plain full-width vertical list with every level expanded,
   and give the hamburger a fixed tap target so it can't shrink away.
   !important is needed to beat the desktop-scoped selectors. */
@media (max-width: 900px) {
	.vessel-header .vessel-menu-toggle {
		display: inline-flex !important;
		align-items: center; justify-content: center;
		width: 44px; height: 44px; flex: 0 0 44px;
		padding: 10px; order: 5;
	}
	.vessel-header .vessel-menu-toggle svg {
		width: 22px !important; height: 22px !important;
		display: block; flex: none;
	}

	/* Open dropdown panel: a normal block, full width, scrollable. */
	.vessel-header-menu.is-open {
		display: block !important;
		max-height: calc(100vh - var(--vessel-header-h, 72px));
		overflow-y: auto;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu,
	.vessel-header-menu.is-open:not(#hk) .mod-menu__sub {
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		grid-template-columns: none !important;
		gap: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu li {
		display: block !important;
		width: 100% !important;
		white-space: normal !important;
		margin: 0 !important;
	}
	/* Top-level labels (link / heading / disclosure button). */
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > a,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__heading,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__toggle-sub {
		display: block !important;
		width: 100% !important;
		padding: 12px 0 !important;
		margin: 0 !important;
		font-family: var(--sans) !important;
		font-size: 14px !important;
		letter-spacing: 0.04em !important;
		text-transform: none !important;
		color: var(--ink) !important;
		border-bottom: 1px solid var(--line) !important;
		text-align: left !important;
	}
	/* Kill the desktop caret/decoration pseudo-elements. */
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > a::before,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > a::after,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__heading::before,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__heading::after,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__toggle-sub::before,
	.vessel-header-menu.is-open:not(#hk) .mod-menu > li > .mod-menu__toggle-sub::after {
		content: none !important;
		display: none !important;
	}
	/* Sub-levels: indented, smaller, normal-case links. */
	.vessel-header-menu.is-open:not(#hk) .mod-menu__sub {
		padding: 4px 0 10px 16px !important;
		margin: 0 !important;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu__sub li > a,
	.vessel-header-menu.is-open:not(#hk) .mod-menu__sub li > .mod-menu__heading {
		display: block !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		font-family: var(--sans) !important;
		font-size: 13px !important;
		letter-spacing: normal !important;
		text-transform: none !important;
		color: var(--ink) !important;
		border: 0 !important;
	}
	.vessel-header-menu.is-open:not(#hk) .mod-menu__sub li > .mod-menu__heading {
		color: var(--mute) !important;
		font-size: 11px !important;
		letter-spacing: 0.14em !important;
		text-transform: uppercase !important;
		padding-bottom: 2px !important;
	}
	/* Menu icons use Bootstrap's p-2 class for spacing, which is a no-op
	   in Vessel; on desktop the flex gap separates icon from label, but
	   the drawer links are display:block, so the icon sat flush against
	   the text. Space it here. */
	.vessel-header-menu.is-open:not(#hk) .mod-menu a [class*="fa-"],
	.vessel-header-menu.is-open:not(#hk) .mod-menu .mod-menu__toggle-sub [class*="fa-"] {
		margin-right: 10px !important;
	}
	.vessel-header-menu.is-open .item-101 { display: none !important; }
}

/* ─── Main content area ────────────────────────────────────────────── */
.vessel-main {
	padding: 40px var(--gutter) 80px;
	max-width: var(--container-max);
	margin: 0 auto;
	width: 100%;
}
.vessel-main.has-sidebar-left,
.vessel-main.has-sidebar-right {
	display: grid;
	gap: 40px;
}
.vessel-main.has-sidebar-left { grid-template-columns: 260px 1fr; }
.vessel-main.has-sidebar-right { grid-template-columns: 1fr 260px; }
.vessel-main.has-sidebar-left.has-sidebar-right { grid-template-columns: 240px 1fr 240px; }

@media (max-width: 900px) {
	.vessel-main { padding: 20px var(--gutter-sm) 60px; }
	.vessel-main.has-sidebar-left,
	.vessel-main.has-sidebar-right,
	.vessel-main.has-sidebar-left.has-sidebar-right {
		grid-template-columns: 1fr;
	}
}

/* Homepage sections (home-* positions render stacked full-width) */
.vessel-section { padding: 60px var(--gutter); }
.vessel-section-bone { background: var(--bone); }
.vessel-section-ink { background: var(--ink); color: var(--bone); }
@media (max-width: 900px) {
	.vessel-section { padding: 40px var(--gutter-sm); }
}

/* Breadcrumbs — Joomla's mod_breadcrumbs output.
   Joomla emits an <ol class="mod-breadcrumbs breadcrumb px-3 py-2">
   with Bootstrap utility classes (!important padding) and a leading
   <li class="mod-breadcrumbs__here">You are here:</li> label that's
   redundant on a designed page. We override the Bootstrap padding,
   hide the "You are here" label, and use a chevron separator. */
.vessel-breadcrumbs-wrap {
	padding: 20px 0;
}
.vessel-breadcrumbs,
.mod-breadcrumbs {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	border: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent;
}
.vessel-breadcrumbs ol,
.mod-breadcrumbs ol,
.mod-breadcrumbs ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	align-items: center;
	gap: 0;
}
.vessel-breadcrumbs li,
.mod-breadcrumbs li {
	display: inline-flex; align-items: center;
	font-size: inherit; margin: 0; padding: 0;
}

/* Hide Joomla's "You are here:" prefix */
.mod-breadcrumbs__here { display: none !important; }

/* Separator — chevron between items; Bootstrap stock places "/" via
   .breadcrumb-item::before. Replace with a chevron and add proper
   spacing on each side. We're using `›` (single right-pointing angle
   quotation mark) which reads well in editorial design contexts. */
.mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
	content: '›';
	color: var(--mute);
	margin: 0 10px;
	opacity: 0.6;
	font-size: 13px; /* slightly larger than the 10px UPPERCASE links so the chevron is legible */
	letter-spacing: 0;
	display: inline-block;
}

.vessel-breadcrumbs a,
.mod-breadcrumbs a {
	color: var(--mute);
	text-decoration: none;
	transition: color .15s ease;
}
.vessel-breadcrumbs a:hover,
.mod-breadcrumbs a:hover {
	color: var(--ink);
}

/* Active (current) page — solid ink, no link styling */
.mod-breadcrumbs__item.active,
.mod-breadcrumbs .active {
	color: var(--ink);
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.vessel-btn,
.btn, button.btn, a.btn,
input[type="submit"], input[type="button"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 14px 24px;
	background: var(--ink);
	color: var(--bone);
	border: 1px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	line-height: 1;
}
.vessel-btn:hover,
.btn:hover, button.btn:hover, a.btn:hover,
input[type="submit"]:hover, input[type="button"]:hover {
	background: var(--gold); border-color: var(--gold); color: var(--on-gold, var(--bone));
}

.vessel-btn-inverted,
.btn-outline, .btn-secondary, .btn-outline-primary, .btn-outline-secondary {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--ink);
}
.vessel-btn-inverted:hover,
.btn-outline:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
	background: var(--ink); color: var(--bone); border-color: var(--ink);
}

/* Bootstrap's explicit light button (used by Kunena's avatar/profile
   dropdown, etc.). The blanket .btn rule above would force it dark
   (button.btn out-specifies .btn-light); keep it light so it doesn't
   render as an out-of-place dark block on a light surface. Selectors
   carry the element to match button.btn's specificity, placed later
   so they win. */
button.btn-light, a.btn-light, .btn-light {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}
button.btn-light:hover, a.btn-light:hover, .btn-light:hover {
	background: var(--bone); color: var(--ink); border-color: var(--line);
}

.vessel-btn-ghost {
	background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.vessel-btn-ghost:hover { border-color: var(--ink); background: var(--bone); }

.btn-primary { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold, var(--bone)); }
.btn-danger { background: #8a3a2f; border-color: #8a3a2f; color: var(--bone); }
.btn-success { background: var(--ok); border-color: var(--ok); color: var(--bone); }
.btn-link { background: transparent; border: 0; color: var(--ink); padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.1em; }

.btn-sm { padding: 10px 16px; font-size: 10px; }
.btn-lg { padding: 18px 28px; font-size: 12px; }

/* ─── Forms ───────────────────────────────────────────────────────── */
label, .control-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 500; margin-bottom: 6px; display: inline-block; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], textarea, select,
.form-control {
	font-family: var(--sans);
	font-size: 13px;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 12px 14px;
	border-radius: 0;
	box-shadow: none;
	width: 100%;
	max-width: 100%;
	transition: border-color 0.18s ease;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: none;
}
textarea { min-height: 100px; }
select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E0E0C' stroke-width='1.25'><path d='M4 6l4 4 4-4'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 36px;
}
/* `<option>` styling — only Chromium-based browsers (Chrome / Edge /
   Brave / Opera) honour CSS backgrounds and colours on option elements;
   Firefox and Safari render the popup with OS chrome regardless. We
   recolour every option to the template tokens so the dropdown menu
   on supported browsers matches the rest of the field instead of
   falling back to system white. */
select option {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
}
select option:checked,
select option:hover,
select option:focus,
select option[selected] {
	background-color: var(--ink);
	color: var(--paper);
}
select option:disabled {
	color: var(--mute);
}
/* Optgroup labels in the dropdown — render in the muted uppercase
   tracked sans so they read as section dividers. */
select optgroup {
	background-color: var(--bone);
	color: var(--mute);
	font-family: var(--sans);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

::placeholder { color: var(--mute); opacity: 1; }

.form-group, .control-group { margin-bottom: 18px; }

/* Checkbox / radio — keep native, tint it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* ─── Tables ──────────────────────────────────────────────────────── */
table, .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-bottom: 1.5em;
}
th, td, .table th, .table td {
	padding: 12px 10px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
th, .table th {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	border-bottom: 1px solid var(--ink);
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(14,14,12,0.02); }

/* ─── Alerts (Joomla message area + HikaShop notifications) ───────── */
/* All colour tokens here come from index.php's :root inline style, so an
   alert in the futuristic preset turns neon, in foody it turns tomato red,
   in corporate it turns blue, etc — without touching this stylesheet. */
.alert, joomla-alert {
	display: block;
	border: 1px solid var(--line);
	border-left-width: 3px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	background: var(--bone);
	border-radius: 0;
}
.alert a, joomla-alert a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.alert button, joomla-alert button {
	background: transparent; border: 0; color: var(--mute); cursor: pointer;
	font-size: 18px; line-height: 1;
}
.alert-success, joomla-alert[type="success"] { border-left-color: var(--ok); }
.alert-danger, .alert-error, joomla-alert[type="danger"], joomla-alert[type="error"] { border-left-color: var(--danger); }
.alert-warning, joomla-alert[type="warning"] { border-left-color: var(--gold); }
.alert-info, joomla-alert[type="info"] { border-left-color: var(--ink); }
.alert-heading {
	font-family: var(--sans); font-weight: 500;
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mute); margin: 0 0 6px;
}
joomla-alert .joomla-alert--show {
	display: block;
}

/* HikaShop notification (post-add-to-cart popup, status messages) */
.hikashop_notification, .hikashop_cart_notification, .hikashop_cart_notice,
.hikashop_status_div, .hikashop_message {
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--gold) !important;
	color: var(--ink) !important;
	padding: 14px 18px !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.hikashop_notification.success, .hikashop_status_div.success,
.hikashop_notification[data-type="success"] { border-left-color: var(--ok) !important; }
.hikashop_notification.error, .hikashop_status_div.error,
.hikashop_notification[data-type="error"], .hikashop_notification[data-type="danger"] {
	border-left-color: var(--danger) !important;
}
.hikashop_notification.warning, .hikashop_status_div.warning,
.hikashop_notification[data-type="warning"] { border-left-color: var(--gold) !important; }
/* Inline cart-mini notification (above the dropdown) */
.hikashop_vote_notification_mini { color: var(--mute); font-size: 11px; }
/* Post-add-to-cart cart icon flash — match the preset accent */
.hikashop_cart_module .hikashop_checkout_loading_spinner { border-top-color: var(--gold) !important; }

/* ─── Bootstrap input-group fallback ────────────────────────────────
   Joomla's checkout uses .input-group for the password-toggle eye and the
   "Add coupon" button (Bootstrap pattern: input + adjacent button on one
   line). We don't ship Bootstrap, so without these rules the parent goes
   `display: block`, the input takes 100% width and the button drops to the
   next line. */
.input-group {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
}
.input-group > .form-control,
.input-group > input,
.input-group > select,
.input-group > textarea {
	flex: 1 1 auto;
	width: 1% !important;
	min-width: 0;
}
.input-group > .btn,
.input-group > button,
.input-group > .input-group-text,
.input-group > .input-password-toggle {
	flex: 0 0 auto;
	border-left: 0 !important;
}
.input-group > * + * { margin-left: -1px; }
.input-password-toggle {
	background: transparent !important;
	color: var(--mute) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 0 12px !important;
	cursor: pointer;
}
.input-password-toggle:hover { color: var(--ink) !important; }

/* ─── HikaShop messages (.hikashop_messages, .hikashop_error, etc.) ── */
.hikashop_messages,
.hikashop_message,
.hikashop_main_carea div.hika_messages,
.hikashop_messages_top,
.hikashop_status {
	display: block;
	background: var(--bone) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--gold) !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
	margin: 0 0 18px !important;
	font-family: var(--sans);
	font-size: 13px !important;
	line-height: 1.5;
	font-weight: 400 !important;
}
.hikashop_messages.hikashop_error,
.hikashop_message.hikashop_error,
.hikashop_error {
	border-left-color: var(--danger) !important;
	color: var(--ink) !important;
}
.hikashop_messages.hikashop_success,
.hikashop_message.hikashop_success,
.hikashop_success {
	border-left-color: var(--ok) !important;
}
.hikashop_messages.hikashop_warning,
.hikashop_warning {
	border-left-color: var(--gold) !important;
}
.hikashop_messages.hikashop_info,
.hikashop_info {
	border-left-color: var(--ink) !important;
}
.hikashop_messages a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* HikaShop sometimes wraps the message text in a paragraph or strong; keep
   typography consistent regardless. */
.hikashop_messages p,
.hikashop_messages strong { font-weight: 500; color: var(--ink); margin: 0; }

/* ─── Checkout wizard / step indicator (.hikashop_wizardbar) ──────── */
.hikashop_wizardbar {
	margin: 0 0 36px;
	font-family: var(--sans);
}
.hikashop_wizardbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.hikashop_wizardbar li {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px 18px 0;
	color: var(--mute);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0;
	position: relative;
}
.hikashop_wizardbar li.hikashop_cart_step_current,
.hikashop_wizardbar li.hikashop_cart_step_passed {
	color: var(--ink);
}
.hikashop_wizardbar li.hikashop_cart_step_passed { opacity: 0.85; }
.hikashop_wizardbar .hkbadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--mute);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	flex: 0 0 28px;
}
.hikashop_wizardbar .hkbadge-current,
.hikashop_wizardbar .hikashop_cart_step_current .hkbadge {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}
.hikashop_wizardbar .hikashop_cart_step_passed .hkbadge {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--ink);
}
.hikashop_wizardbar .hikashop_checkout_step_name {
	font-family: var(--sans);
	white-space: nowrap;
}
.hikashop_wizardbar .hikashop_chevron {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 18px;
	color: var(--mute);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 12px 12px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 12px 12px no-repeat;
}
.hikashop_wizardbar li:last-child .hikashop_chevron { display: none; }
@media (max-width: 600px) {
	.hikashop_wizardbar li { padding-right: 12px; gap: 8px; }
	.hikashop_wizardbar .hkbadge { width: 24px; height: 24px; flex: 0 0 24px; }
	.hikashop_wizardbar .hikashop_chevron { margin-left: 6px; }
}

/* ─── Accordion checkout — collapsed step rows above/below the active step.
   show_block_accordion.php emits .hikashop_accordion_default_before for the
   already-completed steps (clickable) and .hikashop_accordion_default_after
   for the upcoming steps. Each child div is a step row holding an .hkbadge +
   .hikashop_checkout_step_name. We render them as a clean vertical list of
   hairline-bordered rows; the active step itself is rendered by show.php
   between the two accordion blocks (no wrapper of its own — we draw the
   active separator with margin/border on the surrounding blocks). */
.hikashop_accordion_default_before,
.hikashop_accordion_default_after {
	display: flex;
	flex-direction: column;
	margin: 24px 0;
	border-top: 1px solid var(--line);
	background: transparent;
}
.hikashop_accordion_default_before > div,
.hikashop_accordion_default_after > div,
.hikashop_accordion_default_before .hikashop_cart_step_current,
.hikashop_accordion_default_before .hikashop_cart_step_finished,
.hikashop_accordion_default_after .hikashop_cart_step_current,
.hikashop_accordion_default_after .hikashop_cart_step_finished {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--line);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	background: transparent !important;
	box-shadow: none;
}
.hikashop_accordion_default_before .hkbadge,
.hikashop_accordion_default_after .hkbadge,
.hikashop_accordion_default_before .hkbadge-current,
.hikashop_accordion_default_after .hkbadge-current,
.hikashop_accordion_default_before .hkbadge-past,
.hikashop_accordion_default_after .hkbadge-past {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--mute);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	flex: 0 0 28px;
	box-shadow: none;
}
/* Override HikaShop's blue .hkbadge-current default. !important needed
   because com_hikashop/css/hikashop.css loads after our template.css and
   sets background-color directly on .hkbadge-current. */
.hikashop_accordion_default_before .hikashop_cart_step_current .hkbadge,
.hikashop_accordion_default_before .hkbadge-current,
.hikashop_accordion_default_after .hkbadge-current,
.hikashop_wizardbar .hkbadge-current,
.hkbadge-current {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border-color: var(--ink) !important;
}
.hikashop_accordion_default_before .hkbadge-past,
.hikashop_wizardbar .hkbadge-past,
.hkbadge-past {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--ink) !important;
}
.hikashop_accordion_default_before .hikashop_cart_step_finished {
	color: var(--ink);
	cursor: pointer;
}
.hikashop_accordion_default_before .hikashop_cart_step_finished .hkbadge {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--ink);
}
.hikashop_accordion_default_before .hikashop_cart_step_finished a {
	color: inherit;
	text-decoration: none;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.hikashop_accordion_default_before .hikashop_cart_step_finished a:hover {
	color: var(--gold);
}
.hikashop_accordion_default_before .hikashop_cart_step_current,
.hikashop_accordion_default_after .hikashop_cart_step_current {
	color: var(--ink);
}
.hikashop_accordion_default_before .hikashop_cart_step_current .hkbadge,
.hikashop_accordion_default_after .hikashop_cart_step_current .hkbadge {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}
.hikashop_accordion_default_before .hikashop_checkout_step_name,
.hikashop_accordion_default_after .hikashop_checkout_step_name {
	font-family: var(--sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 11px;
	color: inherit !important;
	background: transparent !important;
	padding: 0;
}
.hikashop_accordion_default_before .hikashop_cart_step_current .hikashop_checkout_step_name,
.hikashop_accordion_default_after .hikashop_cart_step_current .hikashop_checkout_step_name {
	color: var(--ink) !important;
	font-weight: 500;
}
/* Trailing chevron-right for upcoming steps so the rows read as enterable
   destinations once the user reaches them. Hidden for the active row. */
.hikashop_accordion_default_after > div:not(.hikashop_cart_step_current)::after {
	margin-left: auto;
	width: 14px;
	height: 14px;
	color: var(--mute);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 12px 12px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 12px 12px no-repeat;
	content: "";
}
.hikashop_accordion_default_before > div.hikashop_cart_step_finished::after {
	margin-left: auto;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--mute);
	text-transform: uppercase;
	content: "Edit";
}
/* Hide HikaShop's chevron leftover (the wizardbar styles otherwise leak in). */
.hikashop_accordion_default_before .hikashop_chevron,
.hikashop_accordion_default_after .hikashop_chevron { display: none !important; }

/* ─── Active-step header (between the two accordion lists) ──────────
   show.php renders the active step content directly between
   .hikashop_accordion_default_before and the buttons; there is no built-in
   wrapper to label it. We introduce a synthesized eyebrow via the existing
   .hikashop_checkout_page hierarchy: the first <h1> inside the form acts as
   the active step's title. Keep it consistent with the collapsed rows. */
#hikashop_checkout > .hikashop_accordion_default_before + * h1:first-of-type,
#hikashop_checkout .hikashop_checkout_login > h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0 0 32px;
}

/* ─── Login / Registration / Guest selector ─────────────────────────
   show_block_login.php emits a hidden <input type="radio"> trio inside a
   .hikaradios wrapper, plus a .btn-group.btn-group-vertical with three
   .btn.hikaradio-label children — Bootstrap's "button radio group". The
   default rendering shows them as a stacked dark column with overlapping
   borders. We restyle them to a 3-tab row of hairline blocks: one row of
   uniform tiles with the active tile inverted (ink bg + bone text). */
.hikashop_checkout_login h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 36px;
}
/* The login block's hk-container-fluid lives inside a half-width parent
   when the cart is shown on the side, so HikaShop's default lg-4 + lg-8
   side-by-side split leaves the form fields too cramped to read. Stack the
   Identification column above the form column instead, each taking the
   full width of the parent. We collapse the 12-track grid to a single
   track and force both children to span the full row. */
.hikashop_checkout_login > .hk-container-fluid {
	grid-template-columns: 1fr !important;
	gap: 32px;
	align-items: start;
}
.hikashop_checkout_login > .hk-container-fluid > .hkc-lg-4,
.hikashop_checkout_login > .hk-container-fluid > .hkc-lg-8 {
	grid-column: 1 / -1;
	width: auto;
	min-width: 0;
}
.hikashop_checkout_login .hkc-lg-4 > h2,
.hikashop_checkout_login .hkc-lg-8 > h2,
.hikashop_checkout_login #hikashop_checkout_login_form > h2,
.hikashop_checkout_login #hikashop_checkout_registration > h2 {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mute);
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--line);
}
.hikashop_checkout_login .hikaradios {
	margin: 0;
}

/* On boolean `.hikaradios .switcher` widgets (Published / Required /
   Default Address etc.), tint the toggle's inside knob `--danger` when
   the "No" / value="0" option is the active one. Default Joomla/HikaShop
   keeps the off-state grey, which reads as "indeterminate"; the red
   knob makes a deliberate "No" obvious at a glance. */
.hikaradios .switcher:has(input[value="0"]:checked) .toggle-inside {
	background: var(--danger) !important;
	border-color: var(--danger) !important;
}
.hikashop_checkout_login .hikaradios .btn-group,
.hikashop_checkout_login .hikaradios .btn-group-vertical {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	background: transparent;
	border: 1px solid var(--line);
	box-shadow: none;
}
.hikashop_checkout_login .hikaradios .btn,
.hikashop_checkout_login .hikaradios .hikaradio-label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 18px 22px;
	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;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	box-shadow: none;
}
.hikashop_checkout_login .hikaradios .btn:last-child,
.hikashop_checkout_login .hikaradios .hikaradio-label:last-child {
	border-bottom: 0;
}
.hikashop_checkout_login .hikaradios .btn br,
.hikashop_checkout_login .hikaradios .hikaradio-label br { display: none; }
.hikashop_checkout_login .hikaradios .btn:hover,
.hikashop_checkout_login .hikaradios .hikaradio-label:hover {
	color: var(--ink);
	background: var(--bone);
}
.hikashop_checkout_login .hikaradios .btn.active,
.hikashop_checkout_login .hikaradios .hikaradio-label.active {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}
/* Add a leading "·" / "✓" mark via ::before so the active tab feels selected
   even if the user disabled background colours via a high-contrast preset. */
.hikashop_checkout_login .hikaradios .btn::before,
.hikashop_checkout_login .hikaradios .hikaradio-label::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper);
	flex: 0 0 14px;
	transition: background .15s, border-color .15s;
}
.hikashop_checkout_login .hikaradios .btn.active::before,
.hikashop_checkout_login .hikaradios .hikaradio-label.active::before {
	background: var(--gold);
	border-color: var(--gold);
	box-shadow: inset 0 0 0 3px var(--ink);
}
/* Hide HikaShop's blue-bordered fallback that frontend_default.css emits for
   Joomla 5+ via div#data_register_registration_method label — our btn-group
   rules above cover the same elements. */
.hikashop_checkout_login div#data_register_registration_method label {
	border: 0;
	width: 100%;
	color: inherit;
}
.hikashop_checkout_login div#data_register_registration_method label.active {
	border: 0;
	color: var(--bone);
}

/* ─── Login / Registration form columns ──────────────────────────── */
#hikashop_checkout_login_form,
#hikashop_checkout_registration {
	margin: 0;
}
#hikashop_checkout_login_form .control-group,
#hikashop_checkout_registration .control-group {
	margin-bottom: 18px;
}
#hikashop_checkout_login_form .control-label,
#hikashop_checkout_registration .control-label {
	display: block;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin-bottom: 8px;
}
#hikashop_checkout_login_form input[type="text"],
#hikashop_checkout_login_form input[type="email"],
#hikashop_checkout_login_form input[type="password"],
#hikashop_checkout_registration input[type="text"],
#hikashop_checkout_registration input[type="email"],
#hikashop_checkout_registration input[type="password"] {
	width: 100%;
	height: auto;
	padding: 14px 16px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	border-radius: 0;
}
#hikashop_checkout_login_form input:focus,
#hikashop_checkout_registration input:focus {
	outline: 0;
	border-color: var(--ink);
}
.hikabtn_checkout_login,
.hikashop_login_button,
#hikashop_register_form_button {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	padding: 14px 28px !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.hikabtn_checkout_login:hover,
.hikashop_login_button:hover,
#hikashop_register_form_button:hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
}

/* ─── Separator blocks (start/end/horizontal) ───────────────────────
   show_block_separator.php emits .hk-row-fluid wrappers with .hkc-md-N
   columns. The default Bootstrap-grid sets the row to negative -5px margins
   on each side and gives each column 5px lateral padding, expecting the
   content inside to butt up against the column edge. The bone-bg of the
   tasks would normally hide that — but we strip those backgrounds, so the
   side-by-side login / cart columns appeared to overlap with no gutter.

   Switch the row to a CSS-grid layout so we can declare an explicit column
   gap that scales with the screen, and zero the negative side margins so
   the row stays inside its parent. */
#hikashop_checkout .hk-row-fluid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 48px;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
#hikashop_checkout .hk-row-fluid + .hk-row-fluid {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid var(--line);
}
#hikashop_checkout .hk-row-fluid > [class*="hkc-md-"],
#hikashop_checkout .hk-row-fluid > [class*="hkc-lg-"] {
	padding: 0;
	width: auto;
	min-width: 0;
}
#hikashop_checkout .hk-row-fluid > .hkc-md-1,  #hikashop_checkout .hk-row-fluid > .hkc-lg-1  { grid-column: span 1; }
#hikashop_checkout .hk-row-fluid > .hkc-md-2,  #hikashop_checkout .hk-row-fluid > .hkc-lg-2  { grid-column: span 2; }
#hikashop_checkout .hk-row-fluid > .hkc-md-3,  #hikashop_checkout .hk-row-fluid > .hkc-lg-3  { grid-column: span 3; }
#hikashop_checkout .hk-row-fluid > .hkc-md-4,  #hikashop_checkout .hk-row-fluid > .hkc-lg-4  { grid-column: span 4; }
#hikashop_checkout .hk-row-fluid > .hkc-md-5,  #hikashop_checkout .hk-row-fluid > .hkc-lg-5  { grid-column: span 5; }
#hikashop_checkout .hk-row-fluid > .hkc-md-6,  #hikashop_checkout .hk-row-fluid > .hkc-lg-6  { grid-column: span 6; }
#hikashop_checkout .hk-row-fluid > .hkc-md-7,  #hikashop_checkout .hk-row-fluid > .hkc-lg-7  { grid-column: span 7; }
#hikashop_checkout .hk-row-fluid > .hkc-md-8,  #hikashop_checkout .hk-row-fluid > .hkc-lg-8  { grid-column: span 8; }
#hikashop_checkout .hk-row-fluid > .hkc-md-9,  #hikashop_checkout .hk-row-fluid > .hkc-lg-9  { grid-column: span 9; }
#hikashop_checkout .hk-row-fluid > .hkc-md-10, #hikashop_checkout .hk-row-fluid > .hkc-lg-10 { grid-column: span 10; }
#hikashop_checkout .hk-row-fluid > .hkc-md-11, #hikashop_checkout .hk-row-fluid > .hkc-lg-11 { grid-column: span 11; }
#hikashop_checkout .hk-row-fluid > .hkc-md-12, #hikashop_checkout .hk-row-fluid > .hkc-lg-12 { grid-column: span 12; }
@media (max-width: 900px) {
	#hikashop_checkout .hk-row-fluid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	#hikashop_checkout .hk-row-fluid > [class*="hkc-md-"],
	#hikashop_checkout .hk-row-fluid > [class*="hkc-lg-"] {
		grid-column: 1 / -1;
	}
}

/* ─── Active-step task wrappers ──────────────────────────────────────
   HikaShop wraps every task on the active step (login / fields / address /
   shipping / payment / cart / status / confirm / coupon …) in a div with the
   class .hikashop_checkout_<task>. Default styling fills these with bone
   backgrounds and 28px padding which fights the editorial aesthetic of the
   collapsed accordion rows. Strip the chrome so each task reads as a clean
   block within the active step. */
#hikashop_checkout .hikashop_checkout_login,
#hikashop_checkout .hikashop_checkout_fields,
#hikashop_checkout .hikashop_checkout_address,
#hikashop_checkout .hikashop_checkout_shipping,
#hikashop_checkout .hikashop_checkout_payment,
#hikashop_checkout .hikashop_checkout_cart,
#hikashop_checkout .hikashop_checkout_coupon,
#hikashop_checkout .hikashop_checkout_status,
#hikashop_checkout .hikashop_checkout_confirm,
#hikashop_checkout .hikashop_checkout_terms {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 48px;
}
/* Strip the default fieldset chrome HikaShop wraps every form section in.
   Browsers paint a thin gray border + 0.35em padding by default, which
   shows up as ghost rectangles when a step has no custom fields. */
#hikashop_checkout fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
#hikashop_checkout fieldset legend {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	padding: 0;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
	width: 100%;
}
/* Hide truly empty fieldsets (whitespace-only). The fieldset HikaShop emits
   for the "fields" task on the Information step has just "\n" inside, which
   evaluates as visually empty. */
#hikashop_checkout fieldset.hkform-horizontal:not(:has(*)) {
	display: none;
}
/* Re-establish clean rhythm between visible task blocks. */
#hikashop_checkout > * + * { margin-top: 0; }

/* ─── Coupon row (Add button next to input) ─────────────────────── */
.hikabtn_checkout_coupon_add {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	padding: 0 22px !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0 !important;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.hikabtn_checkout_coupon_add:hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
}
.hikashop_checkout_coupon .input-group input,
.hikashop_checkout_coupon input.form-control {
	height: auto;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
	border-radius: 0;
}

/* ─── notifyjs popups (HikaShop add-to-cart toasts, max-quantity warnings) ─
   notify.js v0.4 ships with a "metro" style that hard-codes Bootstrap-ish
   pastel palettes inline on each .notifyjs-metro-base. We override those
   inline styles with `!important` so the popup picks up the Maison Vessel
   palette and adapts to whichever preset is active. */
.notifyjs-corner { z-index: 9999; }
.notifyjs-wrapper {
	font-family: var(--sans);
	margin: 8px 14px;
}
.notifyjs-arrow { display: none !important; }
.notifyjs-metro-base,
.notifyjs-bootstrap-base,
[class*="notifyjs-metro-"],
[class*="notifyjs-bootstrap-"] {
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--gold) !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 24px rgba(14, 14, 12, 0.12) !important;
	padding: 16px 20px !important;
	min-width: 280px;
	max-width: 380px;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}
.notifyjs-metro-base > div,
.notifyjs-metro-base .text-wrapper {
	display: flex; flex-direction: column; gap: 2px;
}
.notifyjs-metro-base .image,
.notifyjs-bootstrap-base .image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 28px;
	font-size: 22px !important;
	margin: 0 !important;
	color: inherit !important;
}
.notifyjs-metro-base .image .fa,
.notifyjs-metro-base .image i {
	font-size: 22px !important;
	color: inherit !important;
}
.notifyjs-metro-base .title,
.notifyjs-bootstrap-base .title {
	font-family: var(--sans);
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	color: var(--mute) !important;
	margin: 0 !important;
}
.notifyjs-metro-base .text,
.notifyjs-bootstrap-base .text {
	font-family: var(--sans);
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	margin: 0 !important;
}

/* Variant colours — the left-border pill picks up the preset's status tokens */
.notifyjs-metro-success,
.notifyjs-metro-wishlist_success,
.notifyjs-bootstrap-success {
	border-left-color: var(--ok) !important;
}
.notifyjs-metro-success .image,
.notifyjs-metro-wishlist_success .image,
.notifyjs-bootstrap-success .image { color: var(--ok) !important; }

.notifyjs-metro-error,
.notifyjs-bootstrap-error {
	border-left-color: var(--danger) !important;
}
.notifyjs-metro-error .image,
.notifyjs-bootstrap-error .image { color: var(--danger) !important; }

.notifyjs-metro-warning,
.notifyjs-metro-wishlist_warning,
.notifyjs-bootstrap-warning {
	border-left-color: var(--gold) !important;
}
.notifyjs-metro-warning .image,
.notifyjs-metro-wishlist_warning .image,
.notifyjs-bootstrap-warning .image { color: var(--gold) !important; }

.notifyjs-metro-info,
.notifyjs-metro-wishlist_info,
.notifyjs-bootstrap-info {
	border-left-color: var(--ink) !important;
}
.notifyjs-metro-info .image,
.notifyjs-metro-wishlist_info .image,
.notifyjs-bootstrap-info .image { color: var(--ink) !important; }

/* "black" / "white" variants from notify.js — fold them into the same look */
.notifyjs-metro-black,
.notifyjs-metro-wishlist_black {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border-color: var(--ink) !important;
	border-left-color: var(--gold) !important;
}
.notifyjs-metro-black .title,
.notifyjs-metro-wishlist_black .title { color: var(--bone) !important; opacity: 0.7; }
.notifyjs-metro-black .text,
.notifyjs-metro-wishlist_black .text { color: var(--bone) !important; }

.notifyjs-metro-white,
.notifyjs-metro-wishlist_white {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
	border-left-color: var(--mute) !important;
}

/* ─── Cards (Cassiopeia card chrome) ──────────────────────────────── */
.card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	margin-bottom: 24px;
}
.card-body { padding: 24px; }
.card-header {
	padding: 16px 24px;
	border-bottom: 1px solid var(--line);
	background: var(--bone);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
}
.card-title {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 400;
	font-style: italic;
	margin: 0 0 0.5em;
}

/* Modules rendered with style="card" */
.moduletable, .mod-wrapper {
	margin-bottom: 32px;
}
.module-title, .moduletable h3, .mod-wrapper h3 {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin-bottom: 16px;
}

/* Homepage section titles — bigger editorial serif treatment */
.vessel-section-categories .moduletable h3,
.vessel-section-categories .module-title,
.vessel-section-featured .moduletable h3,
.vessel-section-featured .module-title,
.vessel-section-editorial .moduletable h3,
.vessel-section-editorial .module-title,
.vessel-section-materials .moduletable h3,
.vessel-section-materials .module-title,
.vessel-section-journal .moduletable h3,
.vessel-section-journal .module-title {
	font-family: var(--serif);
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-transform: none;
	margin: 0 0 32px;
	line-height: 1.05;
	max-width: 720px;
}

/* ─── Page header / com_content ───────────────────────────────────── */
.page-header {
	border-bottom: 1px solid var(--line);
	padding-bottom: 20px;
	margin: 0 0 32px;
}
.page-header h1, .page-header h2 { margin: 0; }

.item-page, .items-leading, .items-row { margin-bottom: 32px; }

/* Placeholder tile (for sections using .ph class like the React prototype) */
.ph {
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.05) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, #e8e2d3 0%, #d7cfbc 100%);
	position: relative; overflow: hidden;
}
.ph-dark {
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, #2b2825 0%, #1a1815 100%);
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.vessel-footer {
	background: var(--footer-bg);
	color: var(--footer-fg);
	padding: 60px var(--gutter) 24px;
	margin-top: 80px;
}
.vessel-footer * { color: inherit; }
.vessel-footer a { color: var(--footer-fg); }
.vessel-footer a:hover { color: var(--gold); }

.vessel-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--footer-line);
}
.vessel-footer-bottom {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 22px;
	font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--footer-muted);
}

.vessel-footer-brand .vessel-logo { color: var(--footer-fg); justify-content: flex-start; }
/* A custom image logo can't recolor for the dark footer the way the
   bundled inline-SVG logo does (it adapts via currentColor → --bone).
   Give image logos a light rounded backplate so dark wordmarks stay
   legible. Scoped to <img> only — the SVG-default path is untouched. */
.vessel-footer-brand .vessel-logo img {
	background: #ffffff;
	padding: 14px 20px;
	border-radius: 14px;
	/* content-box so the backplate padding wraps the logo instead of
	   eating into its height (global box-sizing is border-box) —
	   keeps the footer logo the same visual size as the header. */
	box-sizing: content-box;
}
.vessel-footer-brand .vessel-tagline {
	font-family: var(--serif); font-style: italic;
	font-size: 18px; margin-top: 22px;
	line-height: 1.5; color: var(--footer-muted);
}

.vessel-footer .module-title,
.vessel-footer .moduletable h3,
.vessel-footer .mod-wrapper h3 {
	color: var(--footer-muted);
	margin-bottom: 16px;
}
.vessel-footer ul { list-style: none; margin: 0; padding: 0; }
.vessel-footer li { margin-bottom: 10px; font-size: 12px; }

@media (max-width: 900px) {
	.vessel-footer { padding: 40px var(--gutter-sm) 20px; }
	.vessel-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.vessel-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

/* ─── Back to top ─────────────────────────────────────────────────── */
.back-to-top-link {
	position: fixed; bottom: 24px; right: 24px;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ink); color: var(--bone);
	border: 1px solid var(--ink);
	text-decoration: none;
	opacity: 0; pointer-events: none;
	transition: opacity 0.18s ease, background 0.18s ease;
	z-index: 50;
}
/* CSS unicode escape, not a literal ↑: the stylesheet is served
   without a charset and a raw multibyte glyph decodes as mojibake
   ("â†'"). \2191 is ASCII-safe and encoding-proof. */
.back-to-top-link::before { content: "\2191"; font-size: 16px; }
.back-to-top-link.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top-link:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold, var(--bone)); }

/* ─── Joomla — adminbar / system output tweaks ─────────────────────── */
.system-message, .system-message-container { margin: 20px 0; }
.mod-login, .mod-login__wrapper { max-width: 420px; }
.blog-featured, .blog, .category-list { display: grid; gap: 32px; }

/* Tags / badges */
.badge, .label {
	display: inline-block;
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 4px 8px;
	background: var(--bone);
	color: var(--ink);
	border-radius: 0;
	font-weight: 500;
}
.badge-primary, .bg-primary { background: var(--ink); color: var(--bone); }
.badge-secondary, .bg-secondary { background: var(--mute); color: var(--bone); }
.badge-success, .bg-success { background: var(--ok); color: var(--bone); }
.badge-warning, .bg-warning { background: var(--gold); color: var(--ink); }

/* Pagination — editorial, used by Joomla content listings.
   Scoped with `:not(:has(.page-link))` so Bootstrap's pagination
   (Kunena, com_content under newer Joomla, …) keeps its native
   tight button-strip look. Without the scope this rule's 24px gap
   and inline-block padding clobber Bootstrap's pagination and
   produce a row of spaced-apart, oddly-styled buttons. */
.pagination:not(:has(.page-link)), .com-content-category__pagination {
	display: flex; justify-content: center; align-items: center;
	gap: 24px; padding: 40px 0;
	font-size: 12px; letter-spacing: 0.1em;
	list-style: none; margin: 0;
}
.pagination:not(:has(.page-link)) li { margin: 0; }
.pagination:not(:has(.page-link)) a, .pagination:not(:has(.page-link)) span {
	padding: 4px 2px; color: var(--mute);
	display: inline-block;
}
.pagination:not(:has(.page-link)) .active a, .pagination:not(:has(.page-link)) .active span,
.pagination:not(:has(.page-link)) li.active span {
	color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
/* Joomla emits assistive text inside chevron links (e.g. <span aria-hidden>Prev</span>)
   that should stay invisible — the inline-block rule above accidentally
   un-hides them. Restore the visually-hidden treatment. */
.pagination:not(:has(.page-link)) [aria-hidden="true"]:not(:has(svg)):not(.fas):not(.fa):not([class*="fa-"]),
.pagination .visually-hidden,
.pagination .sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Bootstrap-markup pagination (.page-link / .page-item) — emitted by
   com_content category/blog on current Joomla. Vessel ships no
   Bootstrap, so without this it renders as bare unstyled numbers.
   Give it the same editorial treatment as the legacy variant above. */
.pagination:has(.page-link) {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 6px; padding: 40px 0; margin: 0; list-style: none; font-size: 13px;
}
.pagination:has(.page-link) .page-item { margin: 0; }
.pagination:has(.page-link) .page-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 8px;
	color: var(--ink); background: transparent; text-decoration: none;
	transition: border-color .12s, color .12s, background .12s;
}
.pagination:has(.page-link) .page-link:hover { border-color: var(--gold); color: var(--gold); }
.pagination:has(.page-link) .active .page-link {
	background: var(--ink); border-color: var(--ink); color: var(--bone);
}
.pagination:has(.page-link) .disabled .page-link {
	color: var(--mute); opacity: .45; pointer-events: none;
}

/* Article "Details" meta block (dl.article-info) — Written by /
   Category / Published / Hits. Stock Joomla, unstyled by Vessel:
   render it as a compact muted meta row under the title. */
dl.article-info {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
	margin: 0 0 24px; padding: 0 0 18px;
	border-bottom: 1px solid var(--line);
	font-family: var(--sans); font-size: 12.5px; color: var(--mute);
}
dl.article-info .article-info-term {
	margin: 0; font-weight: 600; font-size: 11px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
}
dl.article-info dd {
	margin: 0; display: inline-flex; align-items: center; gap: 7px;
}
dl.article-info dd [class^="icon-"], dl.article-info dd [class*=" icon-"] {
	color: var(--mute); font-size: 13px;
}
dl.article-info dd a { color: var(--ink-soft); text-decoration: none; }
dl.article-info dd a:hover { color: var(--gold); }

/* ─── Single-article prev/next (com_content .pagenavigation) ──────────
   Standard Joomla article pagination. It reuses the `.pagination`
   class, so the assistive-text hide rule above over-matches it and
   blanks the chevron + Prev/Next label, leaving an empty button.
   Lay it out, restore the visible chevron + label (but keep the true
   .visually-hidden sr-text hidden), and give the FA glyph explicitly
   so it doesn't depend on Joomla's icon-font mapping. */
.pagenavigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
/* Joomla wraps both links in a single .pagination span which other
   rules style for the numbered pager. display:contents dissolves it
   so the two links become direct flex children of .pagenavigation —
   Prev to the left edge, Next to the right — without a specificity
   fight over .pagination. */
.pagenavigation .pagination {
	display: contents;
}
.pagenavigation a.next:only-child {
	margin-left: auto;
}
.pagenavigation .pagination .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 11px;
}
/* Clean buttons: bone label, no underline (covers the link, its
   inner Prev/Next span and the ‹ › arrow pseudo-elements). */
.pagenavigation .pagination .btn,
.pagenavigation .pagination .btn span,
.pagenavigation .pagination .btn::before,
.pagenavigation .pagination .btn::after {
	color: var(--bone) !important;
	text-decoration: none !important;
}
/* Counter the numbered-pagination assistive-hide rule so the visible
   "Prev"/"Next" label shows (the genuine .visually-hidden sr-text
   stays hidden — it has no aria-hidden so this never matches it).
   That rule carries !important + a high :not()-chain specificity, so
   the trailing :not(#hk) bumps this into the id column to reliably
   win without needing an actual id. */
.pagenavigation .pagination [aria-hidden="true"]:not(.visually-hidden):not(#hk) {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}
/* The empty <span class="icon-chevron-left"> relies on Joomla's icon
   font, which isn't mapped here — drop it and draw a font-independent
   arrow on the link itself so it always renders. */
.pagenavigation [class*="icon-chevron"] { display: none !important; }
.pagenavigation a.previous::before { content: "\2039"; font-size: 1.3em; line-height: 0; }
.pagenavigation a.next::after      { content: "\203A"; font-size: 1.3em; line-height: 0; }

/* ─── Responsive utilities ────────────────────────────────────────── */
@media (max-width: 768px) {
	h1 { font-size: 34px; }
	h2 { font-size: 26px; }
	h3 { font-size: 20px; }
	.vessel-btn, .btn { padding: 12px 18px; font-size: 10px; letter-spacing: 0.2em; }
}

/* Bootstrap already ships d-none / d-block / d-flex / d-inline-block
   plus their responsive d-{sm,md,lg,xl}-* variants behind @media
   queries. Redeclaring the unqualified ones here (no @media) made
   them win against Bootstrap's responsive forms regardless of
   viewport — `<nav class="d-none d-sm-block">` ended up
   permanently hidden, etc. Let Bootstrap own these. */
.text-center { text-align: center !important; }
.text-end, .text-right { text-align: right !important; }
.text-start, .text-left { text-align: left !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

/* ─── com_content article ─────────────────────────────────────────── */
.item-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 0 80px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
}
.item-page .page-header {
	margin: 0 0 40px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 24px;
}
.item-page .page-header h1,
.item-page .page-header h2,
.item-page > h1,
.item-page > h2 {
	font-family: var(--serif);
	font-size: clamp(34px, 4vw, 56px);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.04;
	color: var(--ink);
	margin: 0;
}
.item-page .lead,
.item-page .article-intro p:first-child,
.item-page > p:first-of-type {
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	color: var(--ink);
	margin: 0 0 28px;
	max-width: 600px;
}
.item-page h2 {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 48px 0 16px;
}
.item-page h3 {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 32px 0 12px;
}
.item-page p { margin: 0 0 18px; max-width: 640px; }
.item-page a:not(.btn) {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .12s;
}
.item-page a:not(.btn):hover { color: var(--gold); }
.item-page ul, .item-page ol { margin: 0 0 24px; padding-left: 22px; max-width: 640px; }
.item-page li { margin-bottom: 8px; }
.item-page strong { font-weight: 500; color: var(--ink); }
.item-page hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 40px 0;
}
.item-page blockquote {
	font-family: var(--serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.45;
	color: var(--mute);
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: 1px solid var(--line);
	max-width: 640px;
}

/* Hide Joomla's article meta (author/date/category) by default — turn on per
   menu item if needed */
.item-page dl.article-info { display: none; }

/* ─── com_contact form ────────────────────────────────────────────── */
.contact .contact-form,
.contact-form {
	max-width: 560px;
	margin: 0 auto;
}
.contact-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
}
.contact-form legend {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 14px;
	width: 100%;
	border-bottom: 1px solid var(--line);
	padding-bottom: 8px;
}
.contact-form label,
.contact-form .control-label {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 12px 0 6px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.5;
	border-radius: 0;
	box-sizing: border-box;
	transition: border-color .12s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--ink);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button,
.contact-form .btn,
.contact-form input[type="submit"] {
	background: var(--ink) !important;
	border: 1px solid var(--ink) !important;
	color: var(--bone) !important;
	padding: 14px 28px !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0 !important;
	margin-top: 12px;
	transition: background .15s, color .15s;
}
.contact-form button:hover,
.contact-form .btn:hover,
.contact-form input[type="submit"]:hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
}
/* Joomla wraps each contact field in .control-group; restore some breathing */
.contact-form .control-group { margin-bottom: 4px; }

/* Contact info (address, phone, hours) box */
.contact-miscinfo,
.contact-address,
.contact-emailto {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.7;
	color: var(--ink);
	margin: 0 0 24px;
}

/* ─── Smart Search (com_finder) — Maison Vessel override ────────── */
.vessel-finder { padding: 0; }

/* Bootstrap-compatible utility — hides visually but keeps element accessible
   to screen readers. Joomla / com_finder rely on `.visually-hidden` for the
   "Search Form" legend and "Search terms:" label. */
.visually-hidden,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Hero / search input header */
.vessel-finder-hero {
	background: var(--bone);
	padding: 60px max(56px, calc((100vw - 1320px) / 2)) 36px;
	border-bottom: 1px solid var(--line);
	margin-left: calc(-1 * (100vw - 100%) / 2);
	margin-right: calc(-1 * (100vw - 100%) / 2);
}
.vessel-finder-hero-inner {
	max-width: 1320px;
	margin: 0 auto;
}
.vessel-finder-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 24px;
	font-weight: 500;
}
.vessel-finder-form { margin: 0; }
.vessel-finder-searchform { margin: 0; }
.vessel-finder-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}
.vessel-finder-input-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--ink);
}
.vessel-finder-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	background-color: var(--ink);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.4 10.4l3.4 3.4'/></svg>") center / 22px 22px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.4 10.4l3.4 3.4'/></svg>") center / 22px 22px no-repeat;
}
.vessel-finder-input {
	flex: 1;
	border: 0 !important;
	background: transparent !important;
	outline: none !important;
	padding: 0 !important;
	font-family: var(--serif) !important;
	font-size: clamp(28px, 4vw, 44px) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	box-shadow: none !important;
	height: auto !important;
	/* Inputs clip overflow, so a tight line-height cut the descenders
	   (y, p, g, ?) off the italic placeholder/value. Give the line box
	   enough room below the baseline. */
	line-height: 1.35 !important;
	padding-bottom: 2px !important;
}
.vessel-finder-input::placeholder {
	color: var(--mute);
	opacity: 0.7;
	font-style: italic;
}
.vessel-finder-input:focus { outline: none !important; box-shadow: none !important; }
/* ...but keyboard users still need a visible focus indicator (WCAG 2.4.7).
   :focus-visible fires only for keyboard, so the mouse-click look stays clean. */
.vessel-finder-input:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px; }
.vessel-finder-submit {
	background: transparent;
	border: 0;
	color: var(--mute);
	font-size: 24px;
	cursor: pointer;
	padding: 4px 8px;
	transition: color .12s;
}
.vessel-finder-submit:hover { color: var(--ink); }
/* Suppress the bootstrap "advanced" toggle if it slips through */
.vessel-finder-searchform .com-finder__advanced,
.vessel-finder-searchform [data-bs-toggle="collapse"] { display: none !important; }

.vessel-finder-meta {
	margin-top: 18px;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--mute);
}
.vessel-finder-meta span { color: var(--ink); }

/* Results section */
.vessel-finder-results {
	max-width: 1320px;
	margin: 0 auto;
	padding: 50px max(56px, calc((100vw - 1320px) / 2)) 100px;
}
.vessel-finder-results-grid {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* Best match (hero) */
.vessel-finder-best { }
.vessel-finder-best-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0 0 18px;
}
.vessel-finder-best-card {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 36px;
	background: var(--bone);
	padding: 28px;
	align-items: center;
}
.vessel-finder-best-card--content { grid-template-columns: 1fr; }
.vessel-finder-best-image {
	display: block;
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.05) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, #e8e2d3 0%, #d7cfbc 100%);
	overflow: hidden;
}
.vessel-finder-best-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.vessel-finder-best-body {
	display: flex; flex-direction: column; gap: 14px;
}
.vessel-finder-best-eyebrow-inner {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
}
.vessel-finder-best-name {
	font-family: var(--serif);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0;
}
.vessel-finder-best-name a { color: var(--ink); text-decoration: none; }
.vessel-finder-best-name a:hover { color: var(--gold); }
.vessel-finder-best-desc {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--mute);
	max-width: 560px;
}
.vessel-finder-best-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 4px;
	font-family: var(--sans);
}
.vessel-finder-best-price {
	font-size: 18px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.vessel-finder-best-rating {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11px; color: var(--mute);
}
.vessel-finder-best-rating-text { margin-left: 4px; letter-spacing: 0.04em; }
.vessel-finder-best-cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ink); color: var(--bone) !important;
	padding: 12px 24px;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--ink);
	transition: background .15s, color .15s;
	margin-left: auto;
}
.vessel-finder-best-cta:hover { background: var(--paper); color: var(--ink) !important; }

/* Results grid */
.vessel-finder-list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	row-gap: 48px;
}
@media (max-width: 900px) {
	.vessel-finder-list { grid-template-columns: repeat(2, 1fr); }
	.vessel-finder-best-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.vessel-finder-list { grid-template-columns: 1fr; }
}

.vessel-finder-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0; padding: 0;
}
.vessel-finder-card--product { }
.vessel-finder-card-image {
	display: block;
	aspect-ratio: 3 / 4;
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.05) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, #e8e2d3 0%, #d7cfbc 100%);
	overflow: hidden;
	margin-bottom: 4px;
}
.vessel-finder-card-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: opacity .25s;
}
.vessel-finder-card-image:hover img { opacity: 0.85; }
.vessel-finder-card-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.vessel-finder-card-name {
	font-family: var(--serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.005em;
}
.vessel-finder-card-name:hover { color: var(--gold); }
.vessel-finder-card-price {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.vessel-finder-card-cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ink); color: var(--bone) !important;
	padding: 10px 14px;
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	text-decoration: none;
	margin-top: 6px;
}
.vessel-finder-card-cta:hover { background: var(--gold); }
.vessel-finder-card-cta--text {
	background: transparent;
	color: var(--ink) !important;
	border-bottom: 1px solid var(--ink);
	padding: 4px 0;
	margin-top: 4px;
	align-self: flex-start;
}
.vessel-finder-card-cta--text:hover { color: var(--gold) !important; border-color: var(--gold); }
.vessel-finder-card--content {
	border-top: 1px solid var(--line);
	padding-top: 22px;
}
.vessel-finder-card-desc {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--mute);
	margin: 0;
}

/* Empty / no-results */
.vessel-finder-empty {
	text-align: center;
	padding: 60px 0;
	max-width: 540px;
	margin: 0 auto;
}
.vessel-finder-empty-title {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 12px;
	color: var(--ink);
}
.vessel-finder-empty-body {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.7;
	color: var(--mute);
}

/* Pagination styling consistent with the rest of the site */
.vessel-finder-pagination {
	margin-top: 60px;
	border-top: 1px solid var(--line);
	padding-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}
.vessel-finder-pagination .com-finder__counter {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	margin-left: auto;
}

/* Highlighted query terms in description snippets */
.com_finder mark.highlight,
.vessel-finder mark.highlight {
	background: transparent;
	color: var(--ink);
	font-weight: 500;
	border-bottom: 1px solid var(--gold);
	padding: 0 1px;
}

/* ─── Joomla calendar popup (joomla-field-calendar) ────────────────
   Styles the date picker that opens for any HikaShop date custom field
   (and Joomla core publish_up etc on the front end). Joomla renders it
   as `.js-calendar.open` and the picker has its own class namespace
   (.calendar-*, .day, .nav.js-btn, etc). We override colours, borders,
   typography and the trigger button to match the template tokens. */

/* Date input + calendar trigger pair. Joomla's `<joomla-field-calendar>`
   wraps an `<input>` and a `<button>` inside `.field-calendar`. By
   default the button uses Bootstrap padding which makes it shorter than
   the input. Force them onto a flex row so the button stretches to the
   input's natural height. */
.field-calendar {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
}
.field-calendar > input,
.field-calendar > .form-control {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 38px;
	box-sizing: border-box;
	border-radius: 0 !important;
}
/* Trigger button next to the date input (`#order_*_btn .btn-primary`) */
.field-calendar .btn-primary,
.field-calendar > button {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	border-left: 0 !important;
	border-radius: 0 !important;
	padding: 0 14px !important;
	min-height: 38px;
	height: auto;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.field-calendar .btn-primary:hover,
.field-calendar > button:hover {
	background: var(--gold) !important;
	color: var(--on-gold, var(--bone)) !important;
	border-color: var(--gold) !important;
}
.field-calendar .btn-primary .icon-calendar::before,
.field-calendar > button .icon-calendar::before {
	color: inherit;
}

/* Popup container. Joomla's calendar.css uses several CSS custom
   properties (--calendar-bg, --calendar-week-bg, --calendar-disabled-bg,
   --btn-primary-bg, --btn-primary-color) that we re-bind to the template
   tokens here. Doing it on `.js-calendar` (the popup root) means the
   variables cascade to every child rule that reads them, without us
   having to chase every individual selector. */
.js-calendar {
	--calendar-bg: var(--paper);
	--calendar-week-bg: var(--bone);
	--calendar-disabled-bg: var(--bone);
	--btn-primary-bg: var(--ink);
	--btn-primary-color: var(--bone);
	/* Joomla's calendar.css reads these for the hour / minute selects
	   in the time row at the bottom of the popup. The fallback was
	   `#212529` text on `#f0f4fb` (light blue-grey) which jars on dark
	   presets. Bind to the template tokens. */
	--calendar-select-color: var(--ink);
	--calendar-select-bg-color: var(--bone);

	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	font-family: var(--sans);
	color: var(--ink);
	z-index: 9999;
	padding: 6px;
}
/* The calendar.css spec sets a fallback `--calendar-select-bg-url` for
   the chevron arrow in the time selects — it points at a hardcoded
   blue chevron SVG on Joomla's CDN. Override with our own black-then-
   currentColor SVG so the arrow inherits the active palette. */
.js-calendar .calendar-container .time td select {
	background-color: var(--bone) !important;
	background-image: none !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 6px 28px 6px 10px !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	min-height: 32px;
	box-shadow: none !important;
}
.js-calendar .calendar-container .time td {
	padding: 8px 4px !important;
	border-bottom: 0 !important;
}
/* The container is a wrapper <div> that holds an inner <table class="table">
   which Bootstrap paints white. Force the wrapper, the inner table, and
   every nested cell back to the template palette so the popup doesn't
   reveal a white block on dark presets (Computer / Nordic / Futuristic). */
.js-calendar .calendar-container {
	width: 100%;
	margin: 0;
	background: var(--paper) !important;
	color: var(--ink);
	border: 0 !important;
}
.js-calendar .calendar-container > table,
.js-calendar table.table,
.js-calendar table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	margin: 0;
	background: transparent !important;
	background-color: transparent !important;
	color: inherit;
	border: 0 !important;
	--bs-table-bg: transparent;
	--bs-table-color: var(--ink);
	--bs-table-striped-bg: transparent;
	--bs-table-striped-color: var(--ink);
	--bs-table-hover-bg: transparent;
	--bs-table-hover-color: var(--ink);
}
.js-calendar table thead,
.js-calendar table tbody,
.js-calendar table tr,
.js-calendar table th,
.js-calendar table td {
	background: transparent;
	background-color: transparent;
	color: inherit;
	border: 0;
}

/* Header rows: year nav, month nav. The bone bg lifts the title strip
   off the paper field area below. Force bg on every element in the
   header row chain so the bone wins over the table-cell defaults. */
.js-calendar .calendar-header,
.js-calendar thead.calendar-header {
	background: var(--bone) !important;
}
.js-calendar .calendar-header tr,
.js-calendar .calendar-header td,
.js-calendar .calendar-header th,
.js-calendar .calendar-head-row,
.js-calendar .calendar-head-row td,
.js-calendar .calendar-head-row th {
	background: var(--bone);
	border: 0;
}
.js-calendar .calendar-head-row .title,
.js-calendar .title-year,
.js-calendar .title-month {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
	padding: 8px 4px;
	background: transparent;
	border: 0;
	text-align: center;
}
.js-calendar .nav.js-btn {
	padding: 8px 12px;
	background: transparent;
	color: var(--mute);
	cursor: pointer;
	font-weight: 500;
	border: 0;
	transition: color .15s, background .15s;
}
.js-calendar .nav.js-btn:hover {
	color: var(--ink);
	background: var(--paper);
}

/* Day-name row (Sun Mon Tue ...) */
.js-calendar .daynames,
.js-calendar .daynames .day-name,
.js-calendar .daynames .day-name-week,
.js-calendar .daynames .wn {
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mute);
	padding: 8px 4px;
	background: transparent;
	border: 0;
	text-align: center;
}
.js-calendar .daynames {
	border-bottom: 1px solid var(--line);
}

/* Date cells */
.js-calendar .daysrow {
	background: transparent;
}
.js-calendar .day,
.js-calendar .wn {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
	padding: 10px 6px;
	text-align: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background .12s, color .12s;
	min-width: 32px;
}
/* Week-number column. Joomla's own rules use the deeply-nested selector
   `.calendar-container table tbody td.wn` (specificity 0,2,4) and a
   literal #fff for the bg, so we need to match or beat that specificity
   to win. The `.js-calendar .calendar-container table tbody td.wn`
   form gets us 0,3,4 which beats Joomla cleanly. */
.js-calendar .wn,
.js-calendar .day.wn,
.js-calendar td.wn,
.js-calendar .calendar-container table tbody td.wn,
.js-calendar .calendar-container table tbody td.day.wn,
.js-calendar .calendar-container table tbody td.day.wn:hover {
	font-size: 9px;
	letter-spacing: 0.16em;
	color: var(--mute);
	cursor: default;
	background: var(--bone);
	font-weight: 500;
	text-transform: uppercase;
	border-right: 1px solid var(--line);
}
/* `.headrow` (the year/month nav row's spacer cell) and `.hilite` (the
   range-hover highlight) also use literal #fff / grey in Joomla's CSS;
   neutralise them so they don't paint white blocks on dark presets. */
.js-calendar .calendar-container table thead td.headrow,
.js-calendar .calendar-container table tbody td.hilite {
	background: transparent;
	color: inherit;
}
.js-calendar .day:not(.wn):hover {
	background: var(--bone);
	color: var(--ink);
}
.js-calendar .day.wn:hover,
.js-calendar td.wn:hover {
	background: transparent;
	color: var(--mute);
}
.js-calendar .day.othermonth {
	color: var(--mute);
	opacity: 0.6;
}
.js-calendar .day.disabled {
	color: var(--mute);
	opacity: 0.35;
	cursor: not-allowed;
}
.js-calendar .day.disabled:hover {
	background: transparent;
	color: var(--mute);
}
.js-calendar .day.weekend {
	color: var(--ink);
}
.js-calendar .day.today {
	color: var(--gold);
	font-weight: 600;
	position: relative;
}
.js-calendar .day.today::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	background: var(--gold);
	border-radius: 50%;
}
.js-calendar .day.selected,
.js-calendar .day.selected:hover {
	background: var(--ink);
	color: var(--bone);
	font-weight: 500;
}

/* Footer buttons (Clear / Today / Close) */
.js-calendar .buttons-wrapper {
	margin-top: 6px;
	padding: 8px 4px;
	border-top: 1px solid var(--line);
}
.js-calendar .btn-group {
	display: flex;
	gap: 0;
	justify-content: space-between;
}
.js-calendar .btn-group .btn {
	flex: 1;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--mute);
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 8px 6px;
	cursor: pointer;
	transition: color .15s;
}
.js-calendar .btn-group .btn:hover {
	color: var(--ink);
	background: transparent;
}
.js-calendar .btn-group .btn-today {
	color: var(--ink);
}

/* ─── HikaShop "advanced datepicker" widget (jQuery UI) ────────────
   The Datepickerfield plugin renders a jQuery UI datepicker. jQuery
   UI's stylesheet (.ui-widget, .ui-widget-content, .ui-state-default,
   etc) loads after this file, so several declarations need `!important`
   to win the cascade. We also bump specificity by chaining classes
   like `.ui-datepicker.ui-widget` where possible. */
.ui-datepicker,
.ui-datepicker.ui-widget,
.ui-datepicker.ui-widget-content {
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	font-family: var(--sans) !important;
	color: var(--ink) !important;
	padding: 6px;
	z-index: 9999 !important;
	width: auto;
	min-width: 280px;
}
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-datepicker-header.ui-widget-header {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 36px 4px 8px !important;
	color: var(--ink);
	font-weight: 500;
	position: relative;
}
/* Prev / next arrows. jQuery UI pins these absolutely with top: 2px,
   left/right: 2px and a circle-triangle sprite. Override completely:
   we render our own SVG chevron via CSS mask on the inner .ui-icon. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker a.ui-datepicker-prev,
.ui-datepicker a.ui-datepicker-next {
	position: absolute !important;
	top: 4px !important;
	width: 28px !important;
	height: 28px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
	text-indent: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--mute);
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker a.ui-datepicker-prev { left: 6px !important; right: auto !important; }
.ui-datepicker .ui-datepicker-next,
.ui-datepicker a.ui-datepicker-next { right: 6px !important; left: auto !important; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: var(--paper) !important;
	border-color: var(--ink) !important;
	color: var(--ink) !important;
	top: 4px !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	width: 12px !important;
	height: 12px !important;
	margin: 0 !important;
	background-image: none !important;
	background-position: 0 0 !important;
	background: transparent;
	background-color: currentColor !important;
	color: inherit;
	text-indent: 0;
	overflow: hidden;
	position: static !important;
	display: inline-block;
}
.ui-datepicker .ui-datepicker-prev:hover .ui-icon,
.ui-datepicker .ui-datepicker-next:hover .ui-icon {
	color: var(--ink);
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2L4 6l4 4'/></svg>") center / 14px 14px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2L4 6l4 4'/></svg>") center / 14px 14px no-repeat;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 14px 14px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 2l4 4-4 4'/></svg>") center / 14px 14px no-repeat;
}
.ui-datepicker .ui-state-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

/* Title row: when month_change/year_change are off it's plain text;
   when on it's two <select>s (Month + Year). The selects sit on the
   bone header strip; clear the gap so the chevron buttons above don't
   collide with them. */
.ui-datepicker .ui-datepicker-title {
	font-family: var(--sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
	font-weight: 500 !important;
	text-align: center !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	gap: 8px !important;
	justify-content: center !important;
	line-height: 1.2 !important;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 4px 22px 4px 10px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%230E0E0C' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 8px 5px;
}

/* Calendar grid */
.ui-datepicker table.ui-datepicker-calendar,
.ui-datepicker .ui-datepicker-calendar.table {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 1px !important;
	margin: 6px 0 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	color: var(--ink) !important;
	--bs-table-bg: transparent;
	--bs-table-color: var(--ink);
	--bs-table-striped-bg: transparent;
	--bs-table-striped-color: var(--ink);
	--bs-table-hover-bg: transparent;
	--bs-table-hover-color: var(--ink);
}
.ui-datepicker .ui-datepicker-calendar thead,
.ui-datepicker .ui-datepicker-calendar tbody,
.ui-datepicker .ui-datepicker-calendar tr,
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
	background: transparent;
	background-color: transparent;
	color: inherit;
	border: 0;
}
.ui-datepicker .ui-datepicker-calendar th {
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mute);
	padding: 8px 4px;
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.ui-datepicker .ui-datepicker-calendar th span { border: 0; }
.ui-datepicker .ui-datepicker-calendar td {
	padding: 1px;
	text-align: center;
}
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span,
.ui-datepicker .ui-datepicker-calendar td .ui-state-default,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-default {
	display: block;
	padding: 8px 4px !important;
	font-family: var(--sans) !important;
	font-size: 12px !important;
	color: var(--ink) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	text-decoration: none !important;
	font-weight: 400 !important;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.ui-datepicker .ui-datepicker-calendar td a:hover,
.ui-datepicker .ui-datepicker-calendar td .ui-state-hover,
.ui-datepicker .ui-datepicker-calendar td .ui-state-default:hover,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	color: var(--ink) !important;
	border: 0 !important;
}

/* Other-month days: dimmed and not clickable */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month .ui-state-default {
	color: var(--mute);
	opacity: 0.5;
}
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable {
	cursor: not-allowed;
}
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable a {
	color: var(--mute);
	opacity: 0.35;
	cursor: not-allowed;
	background: transparent;
}

/* Today: gold dot underneath */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today .ui-state-default,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today .ui-state-highlight {
	color: var(--gold);
	font-weight: 600;
	position: relative;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a::after,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today .ui-state-default::after {
	content: "";
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	background: var(--gold);
	border-radius: 50%;
}

/* Selected / active day */
.ui-datepicker .ui-datepicker-calendar td .ui-state-active,
.ui-datepicker .ui-datepicker-calendar td .ui-state-highlight.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day .ui-state-default {
	background: var(--ink) !important;
	background-color: var(--ink) !important;
	color: var(--bone) !important;
	font-weight: 500 !important;
	border: 0 !important;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a::after { display: none; }

/* Range hover (when range mode is on) */
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-days-cell-over .ui-state-default {
	background: var(--bone);
	color: var(--ink);
}

/* Inline mode wrapper that the plugin emits when "inline" is true */
.hikashop_datepicker_range,
.hikashop_datepicker_range_display {
	font-family: var(--sans);
}
.hikashop_datepicker_range_display {
	display: flex;
	gap: 18px;
	margin-bottom: 12px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	background: var(--bone);
}
.hikashop_datepicker_range_label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin-bottom: 4px;
}
.hikashop_datepicker_range_cell strong {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	font-weight: 400;
	color: var(--ink);
}

/* Trigger button used by HikaShop next to the input (.btn-primary +
   calendar icon). The default ink CTA already comes from the .field-
   calendar rule above; nothing extra here. */

/* ─── tmpl=component popups ──────────────────────────────────────────
   When HikaShop opens a URL with tmpl=component (e.g. the cart-line edit
   popup invoked from the checkout cart block via vex), the body has class
   "contentpane component". component.php has no header / footer / wrapper,
   so the form's stock layout — which assumes full-width + a 600x800
   thumbnail — overflows the 576x480 vex iframe. Constrain the body and
   product-edit form to fit cleanly inside the popup.

   These rules also apply when the same URL is opened standalone (a tab or
   window with tmpl=component), where they replace the unbordered, full-
   bleed default with a tighter, centred card that mirrors the popup. */
body.contentpane.component {
	background: var(--paper);
	padding: 28px 28px 24px;
	margin: 0;
	min-height: auto;
	font-family: var(--sans);
}
body.contentpane.component .hikashop_product_edit_cart_image {
	max-width: 120px;
	max-height: 160px;
	width: auto;
	height: auto;
	object-fit: cover;
	display: block;
	border: 1px solid var(--line);
}
/* Edit-cart-product form (the original target of this fix) */
body.contentpane.component form[name="hikashop_cart_product_form"] {
	max-width: 100%;
	margin: 0;
}
body.contentpane.component form[name="hikashop_cart_product_form"] h3 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 20px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
}
body.contentpane.component .hkform-horizontal {
	border: 0;
	margin: 0;
	padding: 0;
}
body.contentpane.component .hkform-group,
body.contentpane.component .control-group {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	align-items: start;
	margin: 0 0 16px;
}
body.contentpane.component .hkform-group [class*="hkc-xs-"],
body.contentpane.component .control-group [class*="hkc-xs-"] {
	width: auto;
	padding: 0;
	min-width: 0;
}
body.contentpane.component .hkform-group .hkc-xs-4,
body.contentpane.component .hkform-group .hkc-xs-8 {
	grid-column: auto;
}
/* product_edit.php nests an outer .hkform-group#hikashop_product_characteristics
   that contains a per-characteristic row wrapper > inner .hkform-group with the
   actual label + .controls. If both levels apply our 2-track grid, the outer
   one squashes the inner row to 140px. Make the wrappers transparent so only
   the deepest .hkform-group (the one that actually has .hkc-xs-* children)
   becomes the grid. */
body.contentpane.component #hikashop_product_characteristics {
	display: block;
	grid-template-columns: none;
	margin: 0;
	gap: 0;
}
body.contentpane.component [class*="hikashop_characteristic_line_"] {
	display: block;
	width: 100%;
}
body.contentpane.component .hkcontrol-label {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	padding-top: 4px;
}
body.contentpane.component #hikashop_item_product_name .hikashop_item_product_name_text {
	height: auto !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body.contentpane.component .hikashop_item_product_name_p {
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	font-weight: 400;
	color: var(--ink);
	margin: 0 0 4px;
	line-height: 1.25;
}
body.contentpane.component .hikashop_item_product_qty {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	margin: 0;
}
/* Characteristic / option selectors (Colour swatches, Size dropdown, …) */
body.contentpane.component select.custom-select,
body.contentpane.component .hikashop_product_characteristics_main_div select,
body.contentpane.component .hikashop_product_characteristics_main_div input[type="text"] {
	width: 100%;
	height: auto;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13px;
	border-radius: 0;
	box-shadow: none;
}
/* Action bar at bottom (Cancel / OK) */
body.contentpane.component .hikashop_checkout_buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	background: transparent !important;
	padding-left: 0;
	padding-right: 0;
}
body.contentpane.component .hikashop_checkout_buttons .buttons_left,
body.contentpane.component .hikashop_checkout_buttons .buttons_right {
	display: flex;
	align-items: center;
}
body.contentpane.component .hikabtn_cart_product_edit_cancel {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	background: transparent;
	border: 0;
	padding: 12px 0;
	cursor: pointer;
	text-decoration: none;
}
body.contentpane.component .hikabtn_cart_product_edit_cancel:hover {
	color: var(--ink);
}
body.contentpane.component .hikabtn_cart_product_edit_save {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	padding: 12px 24px !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 0 !important;
	cursor: pointer;
}
body.contentpane.component .hikabtn_cart_product_edit_save:hover {
	background: var(--paper) !important;
	color: var(--ink) !important;
}
body.contentpane.component .hikabtn-success { background: var(--ink); color: var(--bone); }

/* Strip Joomla messages container chrome inside the popup */
body.contentpane.component #system-message-container { margin: 0 0 16px; }

/* Hide stray wrappers that fight the grid (HikaShop fieldset > div nesting). */
body.contentpane.component fieldset.hkform-horizontal {
	border: 0;
	padding: 0;
	margin: 0;
}
body.contentpane.component fieldset.hkform-horizontal > legend {
	display: none;
}

/* ─── Homepage modules ────────────────────────────────────────────────
   Each home-* position is wrapped in a .vessel-section by index.php; the
   modules themselves render their own .vessel-hero, .vessel-editorial,
   .vessel-materials, .vessel-journal blocks (Custom HTML content).
   The section gets paper or bone background; modules supply the layout. */

/* Banner / Hero — full-bleed on desktop */
.vessel-banner.full-width { background: var(--paper); }
.vessel-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 640px;
	background: var(--paper);
}
.vessel-hero-media {
	position: relative;
	overflow: hidden;
}
.vessel-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.vessel-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 96px);
	background: var(--bone);
}
.vessel-hero-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 24px;
}
.vessel-hero-headline {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 28px;
}
.vessel-hero-text {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
	max-width: 460px;
	margin: 0 0 36px;
}
.vessel-hero-cta {
	display: inline-block;
	background: var(--ink);
	color: var(--bone);
	padding: 16px 36px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	align-self: flex-start;
	transition: background .15s, color .15s;
	border: 1px solid var(--ink);
}
.vessel-hero-cta:hover {
	background: var(--paper);
	color: var(--ink);
}
@media (max-width: 900px) {
	.vessel-hero {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.vessel-hero-media { aspect-ratio: 4 / 5; }
}

/* Editorial split (2 columns: image + body, alternating background) */
.vessel-section-editorial { padding: 0; }
.vessel-editorial {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
}
.vessel-editorial-media { overflow: hidden; }
.vessel-editorial-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.vessel-editorial-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 6vw, 96px);
}
.vessel-editorial-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 24px;
}
.vessel-editorial-headline {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 52px);
	line-height: 1.1;
	color: var(--ink);
	margin: 0 0 24px;
	max-width: 520px;
}
.vessel-editorial-body p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.75;
	color: var(--ink);
	max-width: 520px;
	margin: 0 0 32px;
}
.vessel-editorial-cta {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 6px;
	align-self: flex-start;
}
.vessel-editorial-cta:hover { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 900px) {
	.vessel-editorial {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.vessel-editorial-media { aspect-ratio: 4 / 5; }
}

/* Materials strip — 4-up grid of figure tiles */
.vessel-section-materials { padding: 80px var(--gutter); }
.vessel-materials-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 36px;
	text-align: center;
}
.vessel-materials-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	max-width: var(--container-max);
	margin: 0 auto;
}
.vessel-materials-grid figure {
	margin: 0;
}
.vessel-materials-grid img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	margin-bottom: 14px;
}
.vessel-materials-grid figcaption {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 500;
}
@media (max-width: 900px) {
	.vessel-materials-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Journal teasers — 3-up grid with header row + side link */
.vessel-section-journal { padding: 80px var(--gutter); }
.vessel-journal-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	max-width: var(--container-max);
	margin: 0 auto 40px;
	gap: 24px;
}
.vessel-journal-eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 14px;
}
.vessel-journal-headline {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 48px);
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
}
.vessel-journal-link {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 4px;
	white-space: nowrap;
}
.vessel-journal-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.vessel-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: var(--container-max);
	margin: 0 auto;
}
.vessel-journal-grid article a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.vessel-journal-image {
	overflow: hidden;
	margin-bottom: 18px;
}
.vessel-journal-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.vessel-journal-grid article a:hover .vessel-journal-image img {
	transform: scale(1.03);
}
.vessel-journal-meta {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 8px;
}
.vessel-journal-grid h3 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
}
@media (max-width: 900px) {
	.vessel-journal-head { flex-direction: column; align-items: flex-start; }
	.vessel-journal-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* When the homepage has a banner module assigned, the vessel-banner
   section absorbs the surrounding section padding. Drop the section
   padding on positions that already render edge-to-edge layouts. */
.vessel-section-categories,
.vessel-section-featured {
	padding: 80px var(--gutter);
}
@media (max-width: 900px) {
	.vessel-section-categories,
	.vessel-section-featured,
	.vessel-section-materials,
	.vessel-section-journal {
		padding: 56px var(--gutter-sm);
	}
}

/* ─── com_users login / registration / reset / remind ───────────────
   Joomla's stock com_users views render the form wrapped in Bootstrap-y
   classes (.well, .list-group, .list-group-item) that look out of place
   against the vessel design. Constrain to a centred column, strip the
   Bootstrap chrome, and re-style the secondary "options" links as plain
   text rather than the bordered list-group tiles. */
.com-users-login,
.com-users-registration,
.com-users-reset,
.com-users-remind,
.com-users-profile,
.com-users-profile-edit {
	max-width: 480px;
	margin: 64px auto;
	padding: 0 var(--gutter-sm, 20px);
}

/* Strip the .well wrapper that Joomla's layouts apply to user forms */
.com-users-login__form.well,
.com-users-registration__form.well,
.com-users-reset__form.well,
.com-users-remind__form.well,
.com-users-profile-edit__form.well {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Stack labels above inputs (Joomla uses .form-horizontal which puts
   them in a 2-column grid; for an editorial single-form page, vertical
   stacking reads cleaner). */
.com-users-login__form .control-group,
.com-users-registration__form .control-group,
.com-users-reset__form .control-group,
.com-users-remind__form .control-group,
.com-users-profile-edit__form .control-group {
	display: block;
	margin-bottom: 18px;
}
.com-users-login__form .control-label,
.com-users-registration__form .control-label,
.com-users-reset__form .control-label,
.com-users-remind__form .control-label,
.com-users-profile-edit__form .control-label {
	display: block;
	width: auto;
	float: none;
	text-align: left;
	margin-bottom: 6px;
}
.com-users-login__form .controls,
.com-users-registration__form .controls,
.com-users-reset__form .controls,
.com-users-remind__form .controls,
.com-users-profile-edit__form .controls {
	margin-left: 0;
}

/* Submit button — full-width vessel CTA */
.com-users-login__submit .btn,
.com-users-registration .btn-primary,
.com-users-reset .btn-primary,
.com-users-remind .btn-primary,
.com-users-profile-edit .btn-primary {
	width: 100%;
	padding: 14px 20px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 500;
	border-radius: 0;
}

/* Remember-me checkbox — hairline-with-text vessel style */
.com-users-login__remember {
	margin: 6px 0 22px;
}
.com-users-login__remember .form-check-label {
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	font-family: var(--sans);
	margin-left: 6px;
}

/* Options block (forgot password / forgot username / register).
   Joomla emits .list-group with .list-group-item children — Bootstrap
   gives those a bordered card look. Strip that and render each link on
   its own row, mute by default with an ink hover. */
.com-users-login__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 0;
	background: transparent;
	margin: 24px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--line);
	font-family: var(--sans);
	font-size: 12px;
}
.com-users-login__options .list-group-item,
.com-users-login__options > a {
	display: block;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--mute);
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: color .15s ease;
}
.com-users-login__options .list-group-item:hover,
.com-users-login__options > a:hover {
	color: var(--ink);
}

/* Same treatment for the "Already registered?" link on registration
   and reset/remind forms — they sometimes render as a bare list group too. */
.com-users-registration__options,
.com-users-reset__options,
.com-users-remind__options {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--sans);
	font-size: 12px;
}
.com-users-registration__options .list-group-item,
.com-users-reset__options .list-group-item,
.com-users-remind__options .list-group-item,
.com-users-registration__options > a,
.com-users-reset__options > a,
.com-users-remind__options > a {
	display: inline-block;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 14px 0 0 !important;
	color: var(--mute);
	text-decoration: none;
}
.com-users-registration__options .list-group-item:hover,
.com-users-reset__options .list-group-item:hover,
.com-users-remind__options .list-group-item:hover {
	color: var(--ink);
}

/* Required-field star — tone it down so it doesn't shout */
.com-users-login__form .star,
.com-users-registration__form .star,
.com-users-reset__form .star,
.com-users-remind__form .star,
.com-users-profile-edit__form .star {
	color: var(--gold);
	margin-left: 2px;
}

/* Password show-toggle button (Joomla emits a btn-secondary inside an
   input-group — strip the rounded edges and match the input border) */
.com-users-login__form .input-password-toggle.btn-secondary,
.com-users-registration__form .input-password-toggle.btn-secondary,
.com-users-profile-edit__form .input-password-toggle.btn-secondary {
	background: var(--paper);
	border: 1px solid var(--line);
	border-left: 0;
	border-radius: 0;
	color: var(--mute);
}
.com-users-login__form .input-password-toggle.btn-secondary:hover {
	color: var(--ink);
}


/* ─── Scroll-triggered reveal animations ────────────────────────────
   Sections marked .vessel-reveal start hidden + slightly offset and
   transition into place when their .is-in class is added by the
   IntersectionObserver in template.js. The motion direction is set
   per-section via .vessel-reveal--up / --down / --left / --right.
   Duration is a CSS variable (set on :root by index.php from the
   `revealDuration` template param, default 800ms); per-section delay
   is set inline via `style="--vessel-reveal-delay:Nms"`. */
.vessel-reveal {
	opacity: 0;
	transition:
		opacity var(--vessel-reveal-duration, 800ms) cubic-bezier(.2,.7,.2,1) var(--vessel-reveal-delay, 0ms),
		transform var(--vessel-reveal-duration, 800ms) cubic-bezier(.2,.7,.2,1) var(--vessel-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.vessel-reveal--up    { transform: translateY(24px); }
.vessel-reveal--down  { transform: translateY(-24px); }
.vessel-reveal--left  { transform: translateX(-24px); }
.vessel-reveal--right { transform: translateX(24px); }

.vessel-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Honour the OS-level reduced-motion preference: skip the animation
   entirely so the section appears statically. */
@media (prefers-reduced-motion: reduce) {
	.vessel-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Counter span: the .vessel-count helper is just a visual marker for
   the JS — no styling change. The author writes the *target* number
   as the element's text; JS animates from 0 → that number when the
   span enters the viewport. Setting tabular-nums keeps the digits
   from jittering during the count-up. */
.vessel-count {
	font-variant-numeric: tabular-nums;
}

/* Kunena-specific overrides live in media/css/kunena.css and are
   only loaded on com_kunena pages via the conditional useStyle()
   in index.php — keeps non-forum pages free of selectors that
   would never match anything there. */

/* ── Bootstrap pagination (Kunena, com_content, …) — recolour to vessel
   tokens. The editorial pagination rule above is scoped via :not(:has
   (.page-link)) so we recolour the Bootstrap variant here. */
.pagination:has(.page-link) .page-link {
	color: var(--ink);
	background: var(--paper);
	border-color: var(--line);
}
.pagination:has(.page-link) .page-link:hover {
	color: var(--gold);
	background: var(--bone);
	border-color: var(--line);
}
.pagination:has(.page-link) .page-link:focus {
	box-shadow: 0 0 0 0.15rem color-mix(in oklab, var(--gold) 35%, transparent);
	outline: 0;
}
.pagination:has(.page-link) .page-item.active .page-link {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}
.pagination:has(.page-link) .page-item.disabled .page-link {
	color: var(--mute);
	background: var(--paper);
	border-color: var(--line);
	opacity: 0.7;
}
/* The Kunena pagination emits its ellipsis without the .page-link
   class: `<li class="page-item disabled"><a class="">…</a></li>`.
   Style bare anchors inside .page-item the same way so the "…" sits
   on the strip with consistent padding/border AND lines up vertically
   (matching font-size, line-height and the -1px margin-left that
   Bootstrap uses to merge adjacent borders into a single strip). */
.pagination:has(.page-link) .page-item > a:not([class]),
.pagination:has(.page-link) .page-item > a[class=""] {
	display: block;
	padding: 0.375rem 0.75rem;
	margin-left: -1px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mute);
	background: var(--paper);
	border: 1px solid var(--line);
	text-decoration: none;
}

/* (further Kunena overrides live in media/css/kunena.css — see top of
   this file for the rationale.) */

/* ─── HikaShop category list module in a sidebar ──────────────────
   The "simple list" category module ships unstyled; present it as a
   clean vertical nav (used by the marketplace category selector). */
.has-sidebar-left .hikashop_category_information.hikashop_categories_listing_main,
.vessel-sidebar-left .hikashop_categories_listing_main {
	font-size: 14px;
}
.has-sidebar-left .hikashop_category_list,
.vessel-sidebar-left .hikashop_category_list {
	list-style: none;
	margin: 0; padding: 0;
}
.has-sidebar-left .hikashop_category_list li,
.vessel-sidebar-left .hikashop_category_list li {
	margin: 0; padding: 0; list-style: none;
}
.has-sidebar-left .hikashop_category_list li a,
.vessel-sidebar-left .hikashop_category_list li a {
	display: block;
	padding: 7px 0;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	transition: color .15s ease, padding-left .15s ease;
}
.has-sidebar-left .hikashop_category_list li a:hover,
.vessel-sidebar-left .hikashop_category_list li a:hover {
	color: var(--gold);
	padding-left: 6px;
}
/* Selected category — HikaShop tags the current item
   `li.current.active` but ships no style for it, so there is no cue
   for where you are. Give it the gold accent + a left rule. */
.has-sidebar-left .hikashop_category_list li.current > a,
.has-sidebar-left .hikashop_category_list li.active > a,
.vessel-sidebar-left .hikashop_category_list li.current > a,
.vessel-sidebar-left .hikashop_category_list li.active > a {
	color: var(--gold);
	font-weight: 600;
	padding-left: 10px;
	border-left: 3px solid var(--gold);
}
.has-sidebar-left .hikashop_category_list .hikashop_child_category_8 ul,
.vessel-sidebar-left .hikashop_category_list ul {
	list-style: none;
	margin: 0; padding: 0 0 0 12px;
}

/* ─── Product listing image box ───────────────────────────────────
   HikaShop's listing image cell stretches very tall (esp. for the
   striped no-image placeholder) and is transparent, so it clashes
   with logos. Constrain it to a sane square-ish tile on a white
   background. Scoped to product listings. */
.com-hikashop.view-product.layout-listing .hikashop_product_image,
.hikashop_products .hikashop_product .hikashop_product_image {
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: 220px;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
}
/* The inner subdiv carries HikaShop's own background (and the
   striped no-image placeholder), which shows through transparent
   product PNGs. Make it white and let it fill the tile so
   transparency reads cleanly. */
.com-hikashop.view-product.layout-listing .hikashop_product_image_subdiv,
.hikashop_products .hikashop_product .hikashop_product_image_subdiv {
	background: #FFFFFF !important;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.com-hikashop.view-product.layout-listing .hikashop_product_image img,
.hikashop_products .hikashop_product .hikashop_product_image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Skip-to-content link (WCAG 2.4.1) — off-screen until keyboard-focused. */
.vessel-skip-link {
	position: absolute;
	left: 8px;
	top: -56px;
	z-index: 2000;
	background: var(--ink);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	font-weight: 600;
	transition: top .15s ease;
}
.vessel-skip-link:focus {
	top: 0;
}

/* Content badges (.label/.badge in migrated docs) carry author-set inline
 * background colours. The default navy-ink badge text fails AA (<4.5:1) on
 * these saturated mid-tones, so force white text on them; #3a87ad is the one
 * case where white still falls short (~4.0:1), so darken its fill too. White
 * text stays clear of the light yellow/green badges, which keep navy-ink. */
.label[style*="3a87ad"],
.label[style*="ab3a3a"],
.label[style*="21759b"],
.badge[style*="3a87ad"],
.badge[style*="ab3a3a"],
.badge[style*="21759b"] {
	color: #fff;
}
.label[style*="3a87ad"],
.badge[style*="3a87ad"] {
	background-color: #2c6f93 !important;
}