/*
 * Maison Vessel — HikaShop styling overrides
 * Restyles HikaShop's hikashop_* class namespace to match the design system.
 * Loaded after hikashop's frontend_default.css so selectors win without !important (mostly).
 */

/* ─── Grid / container ─────────────────────────────────────────────── */
.hk-container { max-width: 1440px; padding: 0 56px; }
@media (max-width: 768px) { .hk-container { padding: 0 20px; } }

.hk-row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.hk-row > [class*="hkc-"] { padding: 0 12px; }

/* ─── Product listing — force editorial 4-col grid ─────────────────── */
.hikashop_products,
.hikashop_products_listing,
.hikashop_category_products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	row-gap: 56px;
	margin: 32px 0;
	padding: 0;
	list-style: none;
}
.hikashop_products > *,
.hikashop_products_listing > *,
.hikashop_category_products > * {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
	list-style: none;
	background: transparent;
	border: 0;
}

@media (max-width: 1100px) { .hikashop_products, .hikashop_products_listing, .hikashop_category_products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .hikashop_products, .hikashop_products_listing, .hikashop_category_products { grid-template-columns: repeat(2, 1fr); gap: 16px; row-gap: 32px; } }

/* Individual product tile inside the grid */
.hikashop_product,
.hikashop_subcontainer,
div.hikashop_container {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	background: transparent;
	border: 0;
	padding: 0;
	text-align: left;
	min-height: auto !important;
}

/* Image frame */
.hikashop_product_image,
.hikashop_product_image_subdiv,
.hikashop_product_image_main {
	position: relative;
	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;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0 !important;
	height: auto !important;
}
.hikashop_product_image a,
.hikashop_product_image_subdiv a,
.hikashop_product_image_main a {
	position: absolute; inset: 0;
	display: block; width: 100%; height: 100%;
}
.hikashop_product_image img,
.hikashop_product_image_subdiv img,
.hikashop_product_image_main img,
.hikashop_product_image .hikashop_product_listing_image,
.hikashop_product_image_subdiv .hikashop_product_listing_image {
	position: absolute; inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover; object-position: center;
	display: block;
	border: 0; margin: 0; padding: 0;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hikashop_product:hover .hikashop_product_image img,
.hikashop_product:hover .hikashop_product_listing_image img { transform: scale(1.03); }

/* Product name — serif italic, like the React ProductCard */
.hikashop_product_name,
.hikashop_product_name_main,
a.hikashop_product_name_link,
.hikashop_product_name a {
	font-family: var(--serif) !important;
	font-style: italic;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
	margin: 0;
}
.hikashop_product_name_main { font-size: 42px; font-style: normal; letter-spacing: -0.01em; line-height: 1.05; }

/* Price */
.hikashop_product_price,
.hikashop_product_price_main,
.hikashop_product_price_full,
.hikashop_cart_product_price_value,
.hikashop_checkout_cart_price {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	font-weight: 400;
}
.hikashop_product_price_main { font-size: 18px; }
.hikashop_product_price_before_discount { text-decoration: line-through; color: var(--mute); font-size: 0.9em; margin-right: 8px; }
.hikashop_product_price_with_discount { color: var(--ink); }

/* Product card name + price row */
.hikashop_product_name_row,
.hikashop_product_price_row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px;
}

/* ─── Product listing page — wrapper header block ──────────────────── */
.hikashop_products_listing_main,
.hikashop_category_information {
	margin-top: 20px;
}

/* Spacing for the listing-bottom pagination toolbar (the inner toolbar gets
   its full styling further down — this just gives the wrapping section air). */
.hikashop_products_pagination_bottom {
	margin-top: 50px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* ─── Category listing ─────────────────────────────────────────────── */
.hikashop_category,
.hikashop_category_name,
h1.hikashop_category_name {
	font-family: var(--serif);
	font-size: 52px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--ink);
	margin: 0 0 12px;
}

.hikashop_category_description {
	font-size: 13px;
	color: var(--mute);
	margin: 0 0 32px;
	max-width: 540px;
	line-height: 1.5;
}

.hikashop_category_image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	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: 0;
	padding: 0;
}
.hikashop_category_image a {
	position: absolute; inset: 0;
	display: block; width: 100%; height: 100%;
}
.hikashop_category_image img,
.hikashop_category_image a img,
.hikashop_category_image .hikashop_product_listing_image {
	position: absolute; inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	padding: 0;
}

/* HikaShop subcategory grid — enforce 3-col editorial layout on home */
.vessel-section-categories .hikashop_subcategories,
.vessel-section-categories .hikashop_subcategories_listing {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.vessel-section-categories .hk-row-fluid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}
.vessel-section-categories .hk-row-fluid > * {
	width: 100% !important;
	min-width: 0;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	grid-column: span 1 !important;
}
.vessel-section-categories .hikashop_category .hikashop_container,
.vessel-section-categories .hikashop_category .hikashop_subcontainer {
	display: flex; flex-direction: column; gap: 14px;
	background: transparent; border: 0; margin: 0; padding: 0;
	text-align: left;
	min-height: auto !important;
}
.vessel-section-categories .hikashop_category br { display: none; }
.vessel-section-categories .hikashop_category_name {
	font-family: var(--serif);
	font-size: 28px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0;
	text-align: left;
}
.vessel-section-categories .hikashop_category_name a {
	color: var(--ink); text-decoration: none;
}
.vessel-section-categories .hikashop_category_name a:hover { color: var(--gold); }

@media (max-width: 900px) {
	.vessel-section-categories .hikashop_subcategories,
	.vessel-section-categories .hk-row-fluid {
		grid-template-columns: 1fr !important;
	}
}

/* Featured & general product grids */
.vessel-section-featured .hikashop_products,
.vessel-section-featured .hikashop_products_listing,
.vessel-product-listing .hikashop_products,
.vessel-product-listing .hikashop_products_listing {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.vessel-section-featured .hk-row-fluid,
.vessel-product-listing .hk-row-fluid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	row-gap: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}
/* Honour the menu/module "Number of columns" setting: HikaShop tags each card
   with hkc-md-N where N = 12 / columns (Bootstrap-style). We invert that with
   :has() so a 3-col config emits cards with hkc-md-4 → grid becomes 3-col.
   Scoped to ≥769px so the responsive breakpoints below can take over on
   tablet/mobile — :has() adds class-level specificity, which would otherwise
   beat plain media-query overrides even with !important. */
@media (min-width: 769px) {
	.vessel-section-featured .hk-row-fluid:has(> .hkc-md-2),
	.vessel-product-listing .hk-row-fluid:has(> .hkc-md-2)  { grid-template-columns: repeat(6, 1fr) !important; }
	.vessel-section-featured .hk-row-fluid:has(> .hkc-md-3),
	.vessel-product-listing .hk-row-fluid:has(> .hkc-md-3)  { grid-template-columns: repeat(4, 1fr) !important; }
	.vessel-section-featured .hk-row-fluid:has(> .hkc-md-4),
	.vessel-product-listing .hk-row-fluid:has(> .hkc-md-4)  { grid-template-columns: repeat(3, 1fr) !important; }
	.vessel-section-featured .hk-row-fluid:has(> .hkc-md-6),
	.vessel-product-listing .hk-row-fluid:has(> .hkc-md-6)  { grid-template-columns: repeat(2, 1fr) !important; }
	.vessel-section-featured .hk-row-fluid:has(> .hkc-md-12),
	.vessel-product-listing .hk-row-fluid:has(> .hkc-md-12) { grid-template-columns: 1fr !important; }
}

.vessel-section-featured .hk-row-fluid > *,
.vessel-product-listing .hk-row-fluid > * {
	width: 100% !important;
	min-width: 0;
	max-width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box;
	overflow: hidden;
	grid-column: span 1 !important;
}
@media (max-width: 1100px) {
	.vessel-section-featured .hk-row-fluid,
	.vessel-product-listing .hk-row-fluid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
	.vessel-section-featured .hk-row-fluid,
	.vessel-product-listing .hk-row-fluid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Product page (show_default) — Maison Vessel 2-col layout ────── */
/* HikaShop wraps left+right in <div class="hk-row-fluid"> with each child
   carrying Bootstrap's "hkc-md-6" (grid-column: span 6). We remap the row to
   1fr / 460px and force the children back into their natural single tracks. */
.vessel-product-show .hk-row-fluid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 40px;
	align-items: start;
}
.vessel-product-show .hk-row-fluid > .hikashop_product_left_part,
.vessel-product-show .hk-row-fluid > .hikashop_product_right_part {
	grid-column: auto !important;
	width: auto !important;
	max-width: none;
	padding: 0 !important;
	margin: 0 !important;
	float: none;
	min-width: 0;
}

/* Top part (H1, code, social) sits above the row, full-width */
.vessel-product-show #hikashop_product_top_part {
	padding: 0 0 20px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--line);
}
.vessel-product-show #hikashop_product_top_part h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.012em;
	font-weight: 400;
	margin: 0 0 6px;
	color: var(--ink);
}
.vessel-product-show #hikashop_product_top_part #hikashop_social {
	margin-top: 14px;
}

/* Top part overrides: kill the global ".hikashop_product_top_part {font-size:10px;tracked-uppercase}"
   inheritance so the H1 + container don't squash inner content. */
.vessel-product-show .hikashop_product_top_part {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	margin-bottom: 0;
}

/* ─── Product gallery ─────────────────────────────────────────────────
   The gallery has two pieces produced by HikaShop:
     .hikashop_main_image_div    : the big main image
     .hikashop_small_image_div   : the strip of additional thumbnails (empty
                                   when the product has only one image)
   Both live inside .hikashop_global_image_div which lives inside the left
   column .hikashop_product_left_part. The body class .gallery-* (set from
   the productGalleryLayout template param) picks the layout variant.
   The thumbnail tile size comes from --vessel-thumb-size, also set by
   the template params, defaulting to 80px.
*/
.vessel-product-show .hikashop_product_left_part {
	display: block !important;
	width: 100%;
}
.vessel-product-show .hikashop_global_image_div {
	display: flex;
	gap: 12px;
	width: 100%;
	min-width: 0;
}
.vessel-product-show .hikashop_main_image_div {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.vessel-product-show .hikashop_product_main_image_thumb {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.05) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, var(--bone) 0%, var(--line) 100%);
	height: auto !important;
	display: block;
	position: relative;
}
.vessel-product-show .hikashop_product_main_image,
.vessel-product-show .hikashop_product_main_image_subdiv {
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}
.vessel-product-show #hikashop_main_image,
.vessel-product-show .hikashop_main_image_div img,
.vessel-product-show .hikashop_product_main_image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: block;
}
.vessel-product-show .hikashop_slide_prev,
.vessel-product-show .hikashop_slide_next { display: none !important; }
.vessel-product-show script,
.vessel-product-show noscript { display: none !important; }

/* Thumbnail strip default styling (sizing applied per layout below) */
.vessel-product-show .hikashop_small_image_div {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}
.vessel-product-show .hikashop_small_image_div:empty { display: none !important; }
.vessel-product-show .hikashop_small_image_div > a {
	flex: 0 0 var(--vessel-thumb-size, 80px);
	width: var(--vessel-thumb-size, 80px);
	height: var(--vessel-thumb-size, 80px);
	overflow: hidden;
	display: block;
	cursor: zoom-in;
	background:
		repeating-linear-gradient(135deg, rgba(14,14,12,0.05) 0 1px, transparent 1px 12px),
		linear-gradient(180deg, var(--bone) 0%, var(--line) 100%);
	transition: opacity .25s ease, outline-color .15s ease;
	outline: 1px solid transparent;
	outline-offset: 2px;
}
.vessel-product-show .hikashop_small_image_div > a:hover {
	opacity: 0.85;
	outline-color: var(--line);
}
.vessel-product-show .hikashop_small_image_div img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}
.vessel-product-show .hikashop_active_thumbnail,
.vessel-product-show .hikashop_child_image_active { outline-color: var(--ink); }

/* ── Layout: thumbs below the main image (default) ─────────────── */
.vessel-product-show.gallery-bottom .hikashop_global_image_div,
body.gallery-bottom .vessel-product-show .hikashop_global_image_div {
	flex-direction: column;
}
body.gallery-bottom .vessel-product-show .hikashop_small_image_div {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: auto !important; /* defeat HikaShop sticky inline style `width:72px` */
}

/* ── Layout: thumbs above the main image ─────────────────────── */
body.gallery-top .vessel-product-show .hikashop_global_image_div {
	flex-direction: column-reverse;
}
body.gallery-top .vessel-product-show .hikashop_small_image_div {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: auto !important; /* defeat HikaShop sticky inline `width:72px` */
}
body.gallery-stack .vessel-product-show .hikashop_small_image_div,
body.gallery-grid .vessel-product-show .hikashop_small_image_div {
	width: auto !important; /* same defensive override for stack + grid layouts */
}

/* ── Sticky-layout adaptations ───────────────────────────────────────
   `show_sticky.php` ships an inline <style> that hard-codes the
   thumbnail strip as a 72-px-wide vertical column with bordered
   72×72 thumbs and a non-vessel border treatment. Reset those so the
   gallery layouts above (driven by the `gallery-*` body class) can
   render consistently regardless of which HikaShop layout is active. */
.vessel-product-show .hikashop_sticky_content .hikashop_small_image_div img {
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
}
.vessel-product-show .hikashop_sticky_content .hikashop_small_image_div img.hikashop_child_image_active {
	border: 0 !important; /* outline ring is set on the parent <a> in vessel CSS */
}
.vessel-product-show .hikashop_sticky_content .hikashop_product_main_image img {
	object-fit: cover !important; /* HikaShop sticky uses contain; vessel uses cover for editorial fill */
}

/* ── Layout: thumbs in a vertical column on the LEFT of the main ── */
body.gallery-left .vessel-product-show .hikashop_global_image_div {
	flex-direction: row-reverse;
	align-items: flex-start;
}
body.gallery-left .vessel-product-show .hikashop_small_image_div {
	flex-direction: column;
}

/* ── Layout: thumbs in a vertical column on the RIGHT of the main ── */
body.gallery-right .vessel-product-show .hikashop_global_image_div {
	flex-direction: row;
	align-items: flex-start;
}
body.gallery-right .vessel-product-show .hikashop_small_image_div {
	flex-direction: column;
}

/* ── Layout: stack — every image full-width, one above the next ── */
body.gallery-stack .vessel-product-show .hikashop_global_image_div {
	flex-direction: column;
	gap: 8px;
}
body.gallery-stack .vessel-product-show .hikashop_small_image_div {
	flex-direction: column;
	gap: 8px;
}
body.gallery-stack .vessel-product-show .hikashop_small_image_div > a {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	flex-basis: auto;
	cursor: default;
}

/* ── Layout: grid — main image and thumbs in a 2-col editorial grid ── */
body.gallery-grid .vessel-product-show .hikashop_global_image_div {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
body.gallery-grid .vessel-product-show .hikashop_main_image_div {
	grid-column: 1 / -1;
}
body.gallery-grid .vessel-product-show .hikashop_small_image_div {
	display: contents;
}
body.gallery-grid .vessel-product-show .hikashop_small_image_div > a {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	flex-basis: auto;
}

/* Mobile: every layout collapses to thumbs-below since there's no width
   for a side column. */
@media (max-width: 700px) {
	.vessel-product-show .hikashop_global_image_div {
		flex-direction: column !important;
		gap: 8px;
	}
	.vessel-product-show .hikashop_small_image_div {
		flex-direction: row !important;
		flex-wrap: wrap;
	}
}

/* ─── Right column — info/buy ─────────────────────────────────────── */
.vessel-product-show .hikashop_product_right_part {
	display: flex !important;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: calc(var(--vessel-header-h, 76px) + 16px);
	padding-top: 4px;
	float: none !important;
	vertical-align: top;
}

/* HikaShop's `show_sticky.php` ships an inline <style> block that pins the
   right-side cart panel with `top: 20px;` — assuming no sticky header.
   Override to add the actual sticky-header height (set by template.js as
   --vessel-header-h on :root, with a 76px fallback for first paint). */
.hikashop_sticky_row .hikashop_sticky_sidebar {
	top: calc(var(--vessel-header-h, 76px) + 16px) !important;
}
.vessel-product-show .hikashop_product_right_part br { display: none; }

/* Vote (rating) line — sits inline next to the price */
.vessel-product-show #hikashop_product_vote_mini {
	order: 1;
	margin: 0;
}
/* Price */
.vessel-product-show #hikashop_product_price_main {
	order: 2;
	font-family: var(--sans);
	font-size: 28px;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.01em;
	display: block;
	margin: 0;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--line);
}
.vessel-product-show #hikashop_product_price_main .hikashop_product_price_full,
.vessel-product-show #hikashop_product_price_main .hikashop_product_price {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	white-space: nowrap;
}
.vessel-product-show #hikashop_product_price_main .hikashop_product_price_per_unit {
	display: none;
}
/* Characteristics block */
.vessel-product-show #hikashop_product_characteristics { order: 3; margin: 0; }
.vessel-product-show #hikashop_product_options { order: 4; margin: 0; }
.vessel-product-show #hikashop_product_quantity_main { order: 5; margin: 0; }
.vessel-product-show #hikashop_product_contact_main { order: 6; margin: 0; }
.vessel-product-show #hikashop_product_custom_info_main { order: 7; margin: 12px 0 0; }
.vessel-product-show #hikashop_product_id_main { display: none; }
.vessel-product-show #hikashop_product_price_with_options_main:empty { display: none; }

/* ─── Accordion (custom product fields) ──────────────────────────── */
.vessel-accordion {
	border-top: 1px solid var(--line);
}
.vessel-accordion-item {
	border-bottom: 1px solid var(--line);
	padding: 0;
	margin: 0;
}
.vessel-accordion-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	user-select: none;
	transition: opacity .15s ease;
}
.vessel-accordion-summary::-webkit-details-marker { display: none; }
.vessel-accordion-summary::marker { content: ''; }
.vessel-accordion-summary:hover { opacity: 0.7; }
.vessel-accordion-title { flex: 1; }
/* Plus / minus icon — pure CSS, no images */
.vessel-accordion-icon {
	position: relative;
	display: inline-block;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	margin-left: 16px;
}
.vessel-accordion-icon::before,
.vessel-accordion-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--ink);
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}
.vessel-accordion-icon::before { width: 12px; height: 1px; }
.vessel-accordion-icon::after  { width: 1px; height: 12px; }
.vessel-accordion-item[open] .vessel-accordion-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}
.vessel-accordion-body {
	padding: 0 0 22px;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.65;
	color: var(--mute);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	white-space: pre-line;
	animation: vessel-accordion-fade .25s ease both;
}
@keyframes vessel-accordion-fade {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Re-tone any inner HTML the merchant may paste */
.vessel-accordion-body p { margin: 0 0 10px; }
.vessel-accordion-body p:last-child { margin-bottom: 0; }
.vessel-accordion-body strong { color: var(--ink); font-weight: 500; }
.vessel-accordion-body a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Description below the row, full-width hairline-separated block */
.vessel-product-show #hikashop_product_bottom_part {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}
.vessel-product-show #hikashop_product_description_main {
	max-width: 720px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
}

@media (max-width: 1024px) {
	.vessel-product-show .hk-row-fluid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 32px;
	}
}
@media (max-width: 900px) {
	.vessel-product-show .hk-row-fluid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.vessel-product-show .hikashop_product_right_part { position: static; }
	.vessel-product-show .hikashop_product_left_part { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.vessel-product-show .hikashop_product_left_part { grid-template-columns: 1fr; }
}

/* ─── Reversed layout — flip left/right treatments ──────────────────────
   `show_reversed.php` keeps the same id prefixes but swaps the content:
     left_part  → BUY (price, characteristics, qty, accordion)
     right_part → IMAGE
   Vessel's column rules above target ids based on show_default's
   semantics (left=image, right=buy). For show_reversed we re-route
   each treatment to the part that now holds the matching content,
   and remap the grid so the IMAGE sits in the wider column on the
   right while the buy column sits at a fixed 460px on the left. */

/* Grid: 460px BUY on left, 1fr IMAGE on right */
.hikashop_product_show_reversed .vessel-product-show .hk-row-fluid {
	grid-template-columns: 460px minmax(0, 1fr);
}

/* Right part = image gallery treatment (was applied to left_part above) */
.hikashop_product_show_reversed .vessel-product-show .hikashop_product_right_part {
	display: block !important;
	width: 100%;
	position: static;
	flex-direction: initial;
	gap: initial;
	padding-top: 0;
	top: auto;
}

/* Left part = buy column treatment (was applied to right_part above):
   flex column, gap, sticky to keep the cart visible while scrolling
   through a long image gallery on the right. */
.hikashop_product_show_reversed .vessel-product-show .hikashop_product_left_part {
	display: flex !important;
	flex-direction: column;
	gap: 24px;
	width: auto !important;
	position: sticky;
	top: calc(var(--vessel-header-h, 76px) + 16px);
	padding-top: 4px;
	float: none !important;
	vertical-align: top;
	align-self: start;
}
.hikashop_product_show_reversed .vessel-product-show .hikashop_product_left_part br {
	display: none;
}

@media (max-width: 1024px) {
	.hikashop_product_show_reversed .vessel-product-show .hk-row-fluid {
		grid-template-columns: 380px minmax(0, 1fr);
	}
}
@media (max-width: 900px) {
	.hikashop_product_show_reversed .vessel-product-show .hk-row-fluid {
		grid-template-columns: minmax(0, 1fr);
	}
	.hikashop_product_show_reversed .vessel-product-show .hikashop_product_left_part {
		position: static;
	}
}

/* Mirror the thumbnail alignment in the reversed layout. show_default
   sits the buy column on the right, so the thumbs flush LEFT (away
   from the cart). show_reversed flips the buy column to the left, so
   the thumbs should flush RIGHT for the same "anchored-away-from-cart"
   relationship. Only applies to horizontal-strip gallery layouts
   (bottom / top); the vertical layouts (left / right / stack / grid)
   are intrinsically aligned and stay as-is. */
.hikashop_product_show_reversed body.gallery-bottom .vessel-product-show .hikashop_small_image_div,
body.gallery-bottom .hikashop_product_show_reversed .vessel-product-show .hikashop_small_image_div,
.hikashop_product_show_reversed body.gallery-top .vessel-product-show .hikashop_small_image_div,
body.gallery-top .hikashop_product_show_reversed .vessel-product-show .hikashop_small_image_div {
	justify-content: flex-end;
}

/* ─── Showcase layout — horizontal purchase bar ─────────────────────
   `show_showcase.php` puts the image full-width on top and a horizontal
   "purchase bar" below: price (left) | characteristics (centre) |
   qty + cart (right, margin-left:auto).  Vessel's default
   .hikashop_product_right_part rule (flex column + sticky + 24px gap)
   stomps that horizontal layout into a vertical stack. Restore the
   row layout, reset block-level children, and re-skin HikaShop's
   gray purchase-bar with vessel surface tokens. */
.hikashop_product_show_showcase .vessel-product-show .hikashop_product_right_part,
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_purchase_bar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 28px;
	position: static !important;
	top: auto !important;
	padding: 24px 32px !important;
	background: var(--bone) !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
	margin: 32px 0 0 !important;
}

/* Inside the bar, undo the block-level / order-based stacking that
   vessel applies for show_default's vertical column. The bar children
   need to flow inline. */
.hikashop_product_show_showcase .vessel-product-show #hikashop_product_price_main {
	display: inline-flex !important;
	align-items: baseline;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	order: 0;
	flex-shrink: 0;
}
.hikashop_product_show_showcase .vessel-product-show #hikashop_product_characteristics {
	order: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_purchase_actions {
	display: flex !important;
	align-items: center;
	gap: 16px;
	margin-left: auto !important; /* push the cart group to the right */
	order: 0;
	flex-shrink: 0;
}
.hikashop_product_show_showcase .vessel-product-show #hikashop_product_quantity_main,
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_cart {
	margin: 0 !important;
	order: 0;
}

/* Showcase image area — HikaShop centres it with max-width 800px.
   Match the rest of the vessel page width by widening to the
   container max and restoring vessel's gallery treatment. */
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_image_area {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Two-column details below the bar (description + specs). HikaShop
   uses Bootstrap's hkc-md-7 / hkc-md-5 split; vessel reskins those. */
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_details {
	display: grid !important;
	grid-template-columns: 2fr 1fr;
	gap: 56px;
	margin-top: 56px;
}
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_details_left,
.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_details_right {
	width: auto !important;
	flex: none !important;
	max-width: none !important;
	padding: 0 !important;
}

/* Mobile — collapse the purchase bar back to a vertical stack and
   the details to a single column. */
@media (max-width: 900px) {
	.hikashop_product_show_showcase .vessel-product-show .hikashop_product_right_part,
	.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_purchase_bar {
		flex-direction: column !important;
		align-items: stretch;
		padding: 20px !important;
	}
	.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_purchase_actions {
		margin-left: 0 !important;
		width: 100%;
	}
	.hikashop_product_show_showcase .vessel-product-show .hikashop_showcase_details {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ─── Fullwidth layout ──────────────────────────────────────────────
   `show_fullwidth.php` puts a single big hero image at the top, then
   a CENTERED purchase column (max-width 500px) with title/price/swatches/
   cart/social, then full-width content bands (description, specs, etc.)
   below. Vessel's default `.hikashop_product_right_part` rule (flex
   column + sticky + 24px gap, designed for show_default) and the
   `aspect-ratio: 3/4` on the image thumb both fight that. */

/* Hero image — replace vessel's 3/4 aspect-ratio + diagonal-stripe
   placeholder bg with HikaShop's intended max-height-clamped image. */
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_hero {
	margin: 0;
	padding: 0;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_main_image_thumb {
	aspect-ratio: auto !important;
	height: auto !important;
	max-height: 720px;
	background: var(--bone) !important; /* solid neutral instead of stripes */
	display: flex;
	align-items: center;
	justify-content: center;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_main_image,
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_main_image_subdiv,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_main_image {
	max-height: 720px;
	width: auto !important;
	height: auto !important;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_main_image img,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_main_image {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 720px !important;
	object-fit: contain !important;
	position: static !important;
	inset: auto !important;
}

/* Purchase column — restore HikaShop's centered-block intent.
   Reset vessel's flex-column/sticky/gap that was set for show_default. */
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_right_part {
	display: block !important;
	flex-direction: initial !important;
	gap: initial !important;
	position: static !important;
	top: auto !important;
	padding: 56px 24px !important;
	text-align: center;
	width: 100%;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_purchase_inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

/* Title, code, vote, price — vessel typography but centered */
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_title {
	font-family: var(--serif);
	font-size: clamp(34px, 3.6vw, 56px);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.012em;
	margin: 0 0 16px;
	color: var(--ink);
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_code {
	font-family: var(--sans);
	color: var(--mute);
	letter-spacing: 0.18em;
	font-size: 10px;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_vote_mini {
	display: inline-flex;
	justify-content: center;
	margin: 6px 0 14px;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_price_main {
	display: block !important;
	border: 0 !important;
	padding: 8px 0 24px !important;
	margin: 0 !important;
	text-align: center;
}

/* Characteristics row — let the swatches/pills center inside the column */
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_characteristics {
	margin: 0 auto 24px !important;
	display: inline-flex;
	flex-direction: column;
	gap: 14px;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_characteristics .hikashop_product_characteristics_table tr {
	justify-content: center;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_characteristics .controls {
	justify-content: center;
}

/* Cart area & alt message centered. The inner pieces stack vertically:
   stock count (text), then the +/- stepper (inline-flex), then the
   Add-to-cart button. Use `text-align: center` on the container plus
   forced block layout on the wrappers — text-align centers inline-flex
   children naturally, which is more robust than nested flex centering
   against vessel's existing :has()-based qty rules. */
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_alt {
	margin: 0 auto !important;
	max-width: 360px;
	text-align: center !important;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .hikashop_quantity_form,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .control-group,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .controls {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	text-align: center !important;
}
/* The stepper itself (inline-flex) is then centered by the text-align
   on its parents. Make sure it stays an inline-level box. */
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .hikashop_product_quantity_change_div_leftright {
	display: inline-flex !important;
	margin: 0 auto;
}
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .hikabtn.hikacart,
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main button.hikabtn {
	width: 100%;
	margin-top: 12px;
}
/* Stock count line — give it some breathing room above the stepper */
.hikashop_product_show_fullwidth .vessel-product-show #hikashop_product_quantity_main .hikashop_product_stock_count {
	display: block;
	margin-bottom: 12px;
}

/* Bottom bands — vessel surface tokens replace HikaShop's #f8f8f8 / #2d2d2d */
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band {
	margin-left: calc(-1 * (100vw - 100%) / 2);
	margin-right: calc(-1 * (100vw - 100%) / 2);
	padding: 70px max(24px, calc((100vw - 1240px) / 2));
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_light {
	background: var(--bone);
	color: var(--ink);
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_dark {
	background: var(--ink);
	color: var(--paper);
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_dark a {
	color: var(--gold);
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_inner {
	max-width: 880px;
	margin: 0 auto;
	line-height: 1.7;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 36px);
	letter-spacing: -0.01em;
	text-transform: none;
	margin-bottom: 32px;
	text-align: center;
}
.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band_dark .hikashop_fullwidth_band_title {
	color: var(--paper);
}

@media (max-width: 900px) {
	.hikashop_product_show_fullwidth .vessel-product-show .hikashop_product_main_image_thumb {
		max-height: 480px;
	}
	.hikashop_product_show_fullwidth .vessel-product-show .hikashop_fullwidth_band {
		padding: 48px 24px;
	}
}

/* ─── Colour characteristic — round swatches ─────────────────────── */
.hikashop_product_characteristics_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}
.hikashop_product_characteristics_table tr,
.hikashop_product_characteristics_table td {
	border: 0;
	padding: 0;
	background: transparent;
}
.hikashop_product_characteristics_table tr {
	display: block;
	margin-bottom: 22px;
}
.hikashop_product_characteristics_table td:first-child {
	display: block;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 12px;
	padding: 0;
}
.hikashop_product_characteristics_table td:nth-child(2) { display: block; }
.hikashop_product_characteristics_table .controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.hikashop_product_characteristics_table .form-check.form-check-inline {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}
/* Hide the radio input visually but keep it accessible */
.hikashop_product_characteristics_table .form-check-input {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
/* The label becomes the swatch button */
.hikashop_product_characteristics_table .form-check-label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	padding: 0;
}
/* Generic swatch chip. The colour characteristic values carry only the
   per-colour `background` inline; this rule supplies the shape so swatches
   render in every context they appear as plain text — order/cart lines,
   mini-cart, listings — not just the product page (whose characteristics
   table enlarges them to 32px buttons below). Keeping the value markup tiny
   matters: it is snapshotted into the 255-char order_product_name, and a
   heavy inline-style span there overflows and truncates mid-tag. */
.vessel-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid rgba(14, 14, 12, 0.15);
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: -2px;
}
/* If the label contains a swatch span (colour characteristics), hide the
   text and turn the swatch into the full button. Otherwise the label keeps
   its text — for size-style characteristics. */
.hikashop_product_characteristics_table .form-check-label:has(.vessel-swatch) {
	font-size: 0;
	line-height: 0;
}
.hikashop_product_characteristics_table .vessel-swatch {
	display: inline-block !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(14,14,12,0.15) !important;
	margin: 0 !important;
	vertical-align: middle !important;
	transition: outline-color .15s ease;
	outline: 1px solid transparent;
	outline-offset: 3px;
	box-sizing: border-box;
}
.hikashop_product_characteristics_table .form-check-label:hover .vessel-swatch {
	outline-color: var(--line);
}
.hikashop_product_characteristics_table .form-check-input:checked + .form-check-label .vessel-swatch,
.hikashop_product_characteristics_table .form-check-input:checked ~ .form-check-label .vessel-swatch {
	outline-color: var(--ink);
	border-color: var(--ink) !important;
}
/* Non-swatch characteristics (e.g. Size) — render label as a flat tile */
.hikashop_product_characteristics_table .form-check.form-check-inline:not(:has(.vessel-swatch)) .form-check-label {
	min-width: 52px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	justify-content: center;
	transition: border-color .15s, background .15s, color .15s;
}
.hikashop_product_characteristics_table .form-check.form-check-inline:not(:has(.vessel-swatch)) .form-check-label:hover {
	border-color: var(--ink);
}
.hikashop_product_characteristics_table .form-check-input:checked + .form-check-label,
.hikashop_product_characteristics_table .form-check-input:checked ~ .form-check-label {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}
/* Re-suppress the dark fill on swatch labels (we only want the ring) */
.hikashop_product_characteristics_table .form-check-input:checked + .form-check-label:has(.vessel-swatch),
.hikashop_product_characteristics_table .form-check-input:checked ~ .form-check-label:has(.vessel-swatch) {
	background: transparent;
}

/* ─── Same swatch treatment for non-table layouts ────────────────────
   Cart product_edit popup, mini-cart edit, and any other context where
   HikaShop renders the characteristic chooser as `.controls > .form-check
   > input + label` (no surrounding `.hikashop_product_characteristics_table`)
   gets the same circular-swatch treatment as the product detail page. We
   target both the cart-edit popup explicitly (#hikashop_product_characteristics)
   and any standalone .controls block that happens to contain .vessel-swatch
   so the rule travels with the swatch wherever HikaShop renders it. */
#hikashop_product_characteristics .controls,
.controls:has(.vessel-swatch) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
/* JHTML radio-list emits a <br> between each .form-check — drop them so
   flex layout actually flows the swatches in a row. */
#hikashop_product_characteristics .controls > br,
.controls:has(.vessel-swatch) > br { display: none; }
#hikashop_product_characteristics .form-check.form-check-inline,
.controls:has(.vessel-swatch) .form-check.form-check-inline {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}
#hikashop_product_characteristics .form-check-input,
.controls:has(.vessel-swatch) .form-check-input {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
#hikashop_product_characteristics .form-check-label,
.controls:has(.vessel-swatch) .form-check-label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	padding: 0;
}
#hikashop_product_characteristics .form-check-label:has(.vessel-swatch),
.controls:has(.vessel-swatch) .form-check-label:has(.vessel-swatch) {
	font-size: 0;
	line-height: 0;
}
#hikashop_product_characteristics .vessel-swatch,
.controls:has(.vessel-swatch) .vessel-swatch {
	display: inline-block !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(14,14,12,0.15) !important;
	margin: 0 !important;
	vertical-align: middle !important;
	transition: outline-color .15s ease;
	outline: 1px solid transparent;
	outline-offset: 3px;
	box-sizing: border-box;
}
#hikashop_product_characteristics .form-check-label:hover .vessel-swatch,
.controls:has(.vessel-swatch) .form-check-label:hover .vessel-swatch {
	outline-color: var(--line);
}
#hikashop_product_characteristics .form-check-input:checked + .form-check-label .vessel-swatch,
#hikashop_product_characteristics .form-check-input:checked ~ .form-check-label .vessel-swatch,
.controls:has(.vessel-swatch) .form-check-input:checked + .form-check-label .vessel-swatch,
.controls:has(.vessel-swatch) .form-check-input:checked ~ .form-check-label .vessel-swatch {
	outline-color: var(--ink);
	border-color: var(--ink) !important;
}
/* Non-swatch characteristics (e.g. Size) — flat tile inside the popup too */
#hikashop_product_characteristics .form-check.form-check-inline:not(:has(.vessel-swatch)) .form-check-label {
	min-width: 52px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	justify-content: center;
	transition: border-color .15s, background .15s, color .15s;
}
#hikashop_product_characteristics .form-check.form-check-inline:not(:has(.vessel-swatch)) .form-check-label:hover {
	border-color: var(--ink);
}
#hikashop_product_characteristics .form-check-input:checked + .form-check-label:not(:has(.vessel-swatch)),
#hikashop_product_characteristics .form-check-input:checked ~ .form-check-label:not(:has(.vessel-swatch)) {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}

/* Generic fallback for any leftover image references on the gallery */
.hikashop_product_main_image_div,
.hikashop_product_main_image {
	max-width: 100%;
}

.hikashop_product_description_main,
.hikashop_product_description {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
}

/* Top-part code badge (pre-H1) — only when it appears outside our scoped wrapper */
.hikashop_product_top_part:not(#hikashop_product_top_part),
.hikashop_product_code_main {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 8px;
}

/* ─── Quantity stepper (show_leftright layout: – [N] +) ──────────── */
.hikashop_product_quantity_change_div_leftright {
	display: inline-flex !important;
	align-items: stretch;
	align-self: flex-start;
	border: 1px solid var(--line);
	background: var(--paper);
	height: 36px;
	width: max-content;
	padding: 0 !important;
	margin: 0;
	overflow: hidden;
	vertical-align: middle;
	flex: 0 0 auto;
}
.hikashop_product_quantity_change_div_leftright .add-on {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	width: 32px;
	min-width: 32px;
}
.hikashop_product_quantity_change_div_leftright .add-on a,
.hikashop_product_quantity_field_change_minus,
.hikashop_product_quantity_field_change_plus {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	text-decoration: none !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1 !important;
	user-select: none;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color 0.15s ease;
}
.hikashop_product_quantity_change_div_leftright .add-on:hover,
.hikashop_product_quantity_change_div_leftright .add-on a:hover,
.hikashop_product_quantity_field_change_minus:hover,
.hikashop_product_quantity_field_change_plus:hover,
.hikashop_product_quantity_change_div_leftright .add-on a:focus,
.hikashop_product_quantity_field_change_minus:focus,
.hikashop_product_quantity_field_change_plus:focus,
div.hikashop_product_quantity_change_div_leftright span:hover {
	background: var(--line) !important;
	background-color: var(--line) !important;
	color: var(--ink) !important;
	outline: none;
}
.hikashop_product_quantity_change_div_leftright .hikashop_product_quantity_field {
	width: 36px;
	text-align: center;
	padding: 0;
	border: 0 !important;
	border-left: 1px solid var(--line) !important;
	border-right: 1px solid var(--line) !important;
	background: transparent;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
	height: auto;
	min-height: 0;
	line-height: 34px;
	margin: 0;
}
.hikashop_product_quantity_change_div_leftright .hikashop_product_quantity_field::-webkit-outer-spin-button,
.hikashop_product_quantity_change_div_leftright .hikashop_product_quantity_field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Compact stepper inside the cart drawer / mini-cart table — narrow QTY cell.
   HikaShop's frontend_default.css forces `td.hikashop_cart_module_product_quantity_value`
   to `display: inline-block`, which breaks table-row uniform-height — the cell's
   border-bottom stops short of its neighbours, leaving a visible gap in the
   hairline rule between products and the total. Restore table-cell so the
   border lines up with the rest of the row. */
.hikashop_cart_module_product_quantity_value,
td.hikashop_cart_module_product_quantity_value {
	display: table-cell !important;
	min-width: 90px;
	vertical-align: middle !important;
}
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_change_div_leftright {
	height: 28px;
	width: max-content;
}
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_change_div_leftright .add-on,
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_change_div_leftright .add-on a,
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_field_change_minus,
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_field_change_plus {
	width: 22px !important;
	min-width: 22px !important;
	font-size: 12px !important;
}
.hikashop_cart_module_product_quantity_value .hikashop_product_quantity_change_div_leftright .hikashop_product_quantity_field {
	width: 24px;
	font-size: 12px;
	line-height: 26px;
}

/* Stack stepper above add-to-cart button on the product page so the CTA can
   be full width like in the design instead of being squeezed next to the
   stepper and getting clipped. */
.control-group:has(.hikashop_product_quantity_change_div_leftright) > .controls {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}
.hikashop_product_quantity_add_to_cart_div_leftright {
	display: block;
	margin: 0 !important;
}
.hikashop_product_quantity_add_to_cart_div_leftright .hikashop_cart_input_button,
.hikashop_product_quantity_add_to_cart_div_leftright .hikabtn,
.hikashop_product_quantity_add_to_cart_div_leftright a.hikabtn {
	width: 100%;
	height: auto;
	margin: 0;
	white-space: nowrap;
}

/* On the product page, the add-to-cart and add-to-wishlist buttons are
   rendered as siblings of the stepper inside .hikashop_product_quantity_main
   (not inside the leftright add-to-cart-div). Make them full-width and add
   spacing between them and the stepper above. */
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright) > .hikabtn,
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright) > a.hikabtn,
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright) > button.hikabtn {
	display: flex;
	width: 100%;
	margin-top: 12px;
	padding: 16px 24px;
	white-space: nowrap;
}

/* ─── All HikaShop quantity layouts ──────────────────────────────────
   HikaShop's `product_quantity_display` config picks one of nine
   markup shapes (show_none, show_simple, show_simplified, show_html5,
   show_select(_price), show_regrouped, show_leftright, show_default
   (legacy <table>), show_default_div). Vessel originally only styled
   `show_leftright`; every other value rendered as raw collapsed
   controls. These rules generalise the leftright look to the common
   HikaShop classes so any layout renders as: [ – | N | + ]  [ CTA ].
   Scoped to the product-page quantity container (#hikashop_product_
   quantity_main) so the cart drawer / mini-cart keep their own
   styling. */
.hikashop_product_quantity_field,
.hikashop_product_quantity_main input[type="text"],
.hikashop_product_quantity_main input[type="number"] {
	text-align: center;
	background: transparent;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
}
/* Product-page container: a wrapping flex row (stepper then CTA),
   never a single shrink-to-fit bordered box. */
#hikashop_product_quantity_main,
.vessel-product-show #hikashop_product_quantity_main {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	border: 0 !important;
	background: transparent !important;
	padding: 0;
}
/* Legacy show_default ships a <table> with rowspan cells; flatten it
   so the input/buttons sit on one row instead of collapsing. */
#hikashop_product_quantity_main > table,
#hikashop_product_quantity_main > table > tbody,
#hikashop_product_quantity_main > table > tbody > tr {
	display: inline-flex !important;
	align-items: center;
	border: 0;
	width: max-content;
}
#hikashop_product_quantity_main > table td {
	display: inline-flex !important;
	align-items: center;
	padding: 0 !important;
	border: 0 !important;
}
/* The input + +/- grouping for every non-leftright layout: same
   bordered box as the leftright stepper. */
#hikashop_product_quantity_main .hikashop_product_quantity_input_div_regrouped,
#hikashop_product_quantity_main .hikashop_product_quantity_input_div_default_main,
#hikashop_product_quantity_main .hikashop_product_quantity_input_div_simplified,
#hikashop_product_quantity_main .hikashop_product_quantity_input_div_select,
#hikashop_product_quantity_main > table > tbody > tr {
	display: inline-flex !important;
	align-items: stretch;
	height: 36px;
	border: 1px solid var(--line);
	background: var(--paper);
	width: max-content;
	overflow: hidden;
	margin: 0;
	padding: 0 !important;
}
/* +/- buttons across regrouped/default/default_div/table/leftright. */
#hikashop_product_quantity_main .hikashop_product_quantity_field_change,
#hikashop_product_quantity_main .hikashop_product_quantity_field_change_plus,
#hikashop_product_quantity_main .hikashop_product_quantity_field_change_minus {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	min-width: 32px;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	box-shadow: none !important;
	cursor: pointer;
	user-select: none;
	transition: background-color .15s ease;
}
#hikashop_product_quantity_main .hikashop_product_quantity_field_change:hover,
#hikashop_product_quantity_main .hikashop_product_quantity_field_change:focus {
	background: var(--line) !important;
	outline: none;
}
/* show_default_div / show_regrouped nest the +/- links in stacked
   wrapper divs (.._change_div_default/_regrouped and the per-button
   _plus_*/_minus_* divs) and show_leftright in <span class="add-on">.
   Flatten every wrapper to inline so both buttons sit on one row
   inside the 36px box instead of overflowing (clipped minus). */
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_default,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_regrouped,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_plus_default,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_minus_default,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_plus_regrouped,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_minus_regrouped,
#hikashop_product_quantity_main .hikashop_product_quantity_input_div_default,
#hikashop_product_quantity_main .hikashop_product_quantity_change_div_leftright .add-on {
	display: inline-flex !important;
	align-items: stretch;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	width: auto;
	min-width: 0;
}
/* Qty field / select inside any stepper box. */
#hikashop_product_quantity_main .hikashop_product_quantity_field:not([type="hidden"]),
#hikashop_product_quantity_main select.hikashop_product_quantity_field,
#hikashop_product_quantity_main #hikashop_product_quantity_field_select,
#hikashop_product_quantity_main select[name^="quantity"] {
	width: 44px;
	min-width: 44px;
	height: 34px;
	text-align: center;
	padding: 0 4px;
	border: 0 !important;
	border-left: 1px solid var(--line) !important;
	border-right: 1px solid var(--line) !important;
	background: transparent;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	box-shadow: none !important;
	appearance: textfield;
	-moz-appearance: textfield;
	line-height: 34px;
}
#hikashop_product_quantity_main select.hikashop_product_quantity_field,
#hikashop_product_quantity_main #hikashop_product_quantity_field_select,
#hikashop_product_quantity_main select[name^="quantity"] {
	width: auto;
	min-width: 56px;
	appearance: auto;
	-moz-appearance: auto;
}
#hikashop_product_quantity_main .hikashop_product_quantity_field::-webkit-outer-spin-button,
#hikashop_product_quantity_main .hikashop_product_quantity_field::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

/* No variant picked yet: HikaShop's JS adds .hikashop_quantity_hide. The
   #id makes this out-specify the display:flex !important rule above (1,1,0). */
.vessel-product-show #hikashop_product_quantity_main.hikashop_quantity_hide,
.hikashop_product_quantity_main_alt.hikashop_alt_hide {
	display: none !important;
}
.hikashop_product_quantity_main_alt.hikashop_alt_display {
	display: block;
	padding: 14px 18px;
	border: 1px solid var(--line);
	background: var(--bone);
	color: var(--mute);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Add-to-cart wrapper + button for every layout. The old fallback
   sized `#hikashop_product_quantity_main .hikabtn` to 36px (meant for
   +/- buttons) which clipped "Add to cart" into a tiny black box on
   any non-leftright layout. The CTA is a full-width primary button,
   placed after the stepper (the parent flex wraps it). The
   :not(.hikashop_product_quantity_field_change) guard keeps the +/-
   controls out of this rule. */
/* Stepper stays compact on row 1; the add-to-cart wrapper and any
   sibling CTA (add-to-wishlist) each take a full-width row below it
   (flex-basis:100% in the wrapping parent). */
#hikashop_product_quantity_main .hikashop_product_quantity_add_to_cart_div,
#hikashop_product_quantity_main > .hikabtn:not(.hikashop_product_quantity_field_change),
#hikashop_product_quantity_main > a.hikabtn:not(.hikashop_product_quantity_field_change),
#hikashop_product_quantity_main > button.hikabtn,
#hikashop_product_quantity_main > .hikashop_product_addtowishlist {
	display: flex;
	flex: 1 0 100%;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
}
#hikashop_product_quantity_main .hikabtn:not(.hikashop_product_quantity_field_change):not(.hikashop_product_quantity_field_change_plus):not(.hikashop_product_quantity_field_change_minus),
#hikashop_product_quantity_main a.hikabtn:not(.hikashop_product_quantity_field_change):not(.hikashop_product_quantity_field_change_plus):not(.hikashop_product_quantity_field_change_minus),
#hikashop_product_quantity_main button.hikabtn,
#hikashop_product_quantity_main input.hikabtn[type="submit"],
#hikashop_product_quantity_main .hikashop_cart_input_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 12px 22px;
	white-space: nowrap;
	cursor: pointer;
}

/* ─── HikaShop social share buttons ──────────────────────────────────
   HikaShop emits span.hikasocial_btn.hikasocial_<network> > a >
   span.hikasocial_icon > img + span.hikasocial_name, and colours the
   icon/name halves per network (the brand colour is the intended
   visual cue). HikaShop's own row layout is scoped to
   `div#hikashop_social`, which isn't the container on the product
   page, so the buttons collapsed into broken overlapping bars. This
   is a LAYOUT-ONLY fix — it lays the brand-coloured pills out in a
   clean wrapping row and constrains the icon image; it deliberately
   does NOT touch the icon/name backgrounds or colours. */
.hikashop_product_social,
.hikashopsocial_buttons,
.hikashop_social,
div#hikashop_social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 4px 0 12px;
}
.hikashopsocial_inline,
.hikasocial_btn {
	display: inline-flex !important;
	align-items: stretch;
	float: none !important;
	margin: 0 6px 6px 0 !important;
	padding: 0 !important;
	vertical-align: top;
}
.hikasocial_btn > a {
	display: inline-flex !important;
	align-items: stretch;
	text-decoration: none !important;
}
.hikasocial_btn .hikasocial_icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.hikasocial_btn .hikasocial_icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

/* When the leftright stepper is in use, neutralise the legacy outer wrapper
   (no double border, no inline-flex shrink) so the stepper + add-to-cart CTA
   can stack and the CTA can take the full available width. */
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright),
.hikashop_quantity_form:has(.hikashop_product_quantity_change_div_leftright),
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright) > .hikashop_quantity_form,
.hikashop_product_quantity_main:has(.hikashop_product_quantity_change_div_leftright) .control-group {
	display: block;
	border: 0;
	background: transparent;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Add-to-cart button — ink primary CTA */
.hikashop_cart_input_button,
.hikabtn_checkout,
.hikashop_cart_button,
.hikashop_checkout_buttons .hikabtn,
button.hikabtn[name="add"],
input[name="add"].hikabtn,
input[type="submit"][name="add"],
a.hikashop_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--ink); color: var(--bone);
	border: 1px solid var(--ink); border-radius: 0;
	padding: 16px 24px;
	font-family: var(--sans);
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
	line-height: 1;
}
.hikashop_cart_input_button:hover,
.hikabtn_checkout:hover,
.hikashop_cart_button:hover,
button.hikabtn[name="add"]:hover,
a.hikashop_cart_button:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold, var(--bone)); }

.hikabtn,
a.hikabtn,
button.hikabtn,
input.hikabtn,
.hikashop_cart_proceed_to_checkout,
a.hikashop_cart_proceed_to_checkout {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	padding: 12px 18px;
	font-family: var(--sans); font-size: 11px;
	letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
	cursor: pointer; text-decoration: none !important;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	line-height: 1;
	box-shadow: none !important;
	text-shadow: none !important;
}
.hikabtn:hover,
a.hikabtn:hover,
button.hikabtn:hover,
input.hikabtn:hover,
.hikashop_cart_proceed_to_checkout:hover,
a.hikashop_cart_proceed_to_checkout:hover {
	background: var(--gold) !important;
	border-color: var(--gold) !important;
	color: var(--on-gold, var(--bone)) !important;
}

.hikabtn_ghost,
.hikabtn.hikabtn-ghost,
.hikabtn_secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; }
.hikabtn_ghost:hover { border-color: var(--ink) !important; background: var(--bone) !important; }

/* ─── Product options (size/colour selectors) ─────────────────────── */
.hikashop_product_characteristic,
.hikashop_product_options {
	margin: 0; padding: 0;
}
.hikashop_product_characteristic td,
.hikashop_product_characteristic th {
	border: 0; padding: 6px 0; vertical-align: middle;
}
.hikashop_product_characteristic_name,
.hikashop_product_option_name {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	padding-right: 14px;
}

/* Size/variant select dropdowns */
.hikashop_product_characteristic select,
.hikashop_product_option select,
.hikashop_product_options select {
	font-family: var(--sans);
	font-size: 12px;
	padding: 10px 32px 10px 12px;
	border: 1px solid var(--line);
	background-color: transparent;
	color: var(--ink);
	min-width: 120px;
}

/* ─── Ratings / stars — gold ──────────────────────────────────────── */
.hikashop_vote,
.hikashop_product_vote,
.hikashop_product_vote_stars,
.hikashop_product_vote_mini,
.hkvote_stars, .hkvote_stars_on, .hkvote_star_on,
.hikashop_rating {
	color: var(--gold) !important;
	fill: var(--gold);
}
.hkvote_stars_off, .hkvote_star_off { color: var(--line) !important; }
.hikashop_product_vote { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.1em; color: var(--mute); }

/* ─── Cart ─────────────────────────────────────────────────────────── */
.hikashop_cart,
.hikashop_cart_page,
.hikashop_checkout_cart {
	background: var(--paper);
	padding: 20px 0;
	font-family: var(--sans);
}

/* Page heading version (rendered as <h1>) — large editorial italic. */
h1.hikashop_cart_title,
h2.hikashop_cart_title,
.hikashop_checkout_title {
	font-family: var(--serif);
	font-size: 44px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.01em;
	margin: 0 0 32px;
	color: var(--ink);
}
/* Totals-table label cells (Subtotal / Shipping / Coupon / Total) — these
   are <td class="hikashop_cart_title hikashop_cart_*_title"> inside the
   summary table; keep them quiet enough to read as line-item labels next
   to the value column, not as headlines. */
td.hikashop_cart_title,
.hikashop_cart_subtotal_title,
.hikashop_cart_shipping_title,
.hikashop_cart_payment_title,
.hikashop_cart_coupon_title,
.hikashop_cart_total_title,
.hikashop_cart_taxes_title,
.hikashop_cart_additional_title,
.hikashop_cart_credit_title {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	font-style: normal;
	color: var(--mute);
	margin: 0;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}
.hikashop_cart_total_title,
tr.hikashop_cart_total_title_row td {
	color: var(--ink);
	font-weight: 500;
}
/* Match the value column to the same row rhythm — tabular numerals,
   ink colour, no weird inherited spacing. */
.hikashop_cart_subtotal_value,
.hikashop_cart_shipping_value,
.hikashop_cart_payment_value,
.hikashop_cart_coupon_value,
.hikashop_cart_total_value,
.hikashop_cart_taxes_value,
.hikashop_cart_additional_value,
.hikashop_cart_credit_value {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	text-align: right;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
}
/* Last row (Total) — slightly heavier so it lands. */
.hikashop_cart_total_row .hikashop_cart_total_title,
.hikashop_cart_total_row .hikashop_cart_total_value {
	font-size: 14px;
	border-bottom: 0;
	padding-top: 16px;
}

.hikashop_cart table, .hikashop_checkout_cart table {
	width: 100%; border-collapse: collapse;
}
.hikashop_cart th, .hikashop_checkout_cart th,
.hikashop_cart_product_header {
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--mute); font-weight: 500;
	border-bottom: 1px solid var(--ink);
	padding: 12px 8px; text-align: left;
}
.hikashop_cart td, .hikashop_checkout_cart td,
.hikashop_cart_product_row {
	border-bottom: 1px solid var(--line);
	padding: 20px 8px;
	vertical-align: top;
}
.hikashop_cart_product_image,
.hikashop_cart_product_image_value {
	width: 80px;
}
.hikashop_cart_product_image img {
	width: 80px; height: 100px; object-fit: cover;
}
.hikashop_cart_product_name,
.hikashop_cart_product_name_value {
	font-family: var(--serif);
	font-size: 17px; font-style: italic;
	color: var(--ink);
}
.hikashop_cart_product_quantity_value input {
	width: 52px; padding: 8px; border: 1px solid var(--line); text-align: center;
}

.hikashop_cart_total,
.hikashop_checkout_cart_total,
.hikashop_checkout_cart_final_total,
tr.hikashop_cart_total_title_row {
	background: var(--bone);
}
.hikashop_cart_total td,
.hikashop_checkout_cart_final_total td,
.hikashop_checkout_cart_total_value {
	font-family: var(--serif);
	font-size: 22px;
	font-style: italic;
	color: var(--ink);
	padding: 18px 8px;
	border-top: 1px solid var(--ink);
	border-bottom: 0;
}

/* Coupon / voucher row */
.hikashop_cart_coupon_row, .hikashop_coupon {
	padding: 16px 0;
	border-top: 1px solid var(--line);
	display: flex; gap: 10px; align-items: center;
}
.hikashop_cart_coupon_row input[type="text"] {
	flex: 1; max-width: 260px;
}

/* Mini-cart / floating cart */
.hikashop_small_cart,
.hikashop_dropdown_cart,
.hikashop_floating_cart {
	background: var(--paper);
	border: 1px solid var(--line);
	font-family: var(--sans);
}

/* ─── Vessel bag-icon trigger (header) ─────────────────────────────── */
.hikashop_cart_module {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.hikashop_small_cart_checkout_link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-decoration: none;
	padding: 4px 0;
}
.hikashop_small_cart_checkout_link:hover { color: var(--gold); }
.hikashop_small_cart_total_title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hikashop_cart_module_product_icon_title {
	display: inline-block !important;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0;
}

/* ─── Vessel cart drawer (visual overrides only — let HikaShop drawer.css
       handle position/transform/animation) ──────────────────────────── */
.hikashop_drawer__wrapper {
	background-color: var(--paper) !important;
	max-width: 420px !important;
	box-shadow: -10px 0 40px rgba(14,14,12,0.10) !important;
}
.hikashop_drawer__overlay {
	background-color: var(--ink) !important;
}
.hikashop_drawer.hk-is-visible .hikashop_drawer__overlay {
	opacity: 0.35 !important;
}
.hikashop_drawer__header {
	padding: 22px 24px !important;
	border-bottom: 1px solid var(--line) !important;
}
.hikashop_drawer__title {
	font-family: var(--serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.hikashop_drawer__close { color: var(--ink); }
.hikashop_drawer__close:hover { opacity: 0.6; }

.hikashop_drawer__content { padding: 24px !important; }
.hikashop_drawer__content .hikashop_cart_empty_message {
	font-family: var(--serif);
	font-size: 18px;
	font-style: italic;
	color: var(--mute);
	text-align: center;
	padding: 60px 20px;
}

/* Cart rows inside drawer */
.hikashop_drawer__content .hikashop_cart_product_row,
.hikashop_drawer__content tr.hikashop_cart_product_row {
	border-bottom: 1px solid var(--line);
}
.hikashop_drawer__content .hikashop_cart_product_image img {
	max-width: 80px; max-height: 100px; object-fit: cover;
}
.hikashop_drawer__content .hikashop_cart_product_name {
	font-family: var(--serif);
	font-size: 16px;
	font-style: italic;
	color: var(--ink);
}
.hikashop_drawer__content .hikashop_cart_input_button,
.hikashop_drawer__content .hikabtn_checkout,
.hikashop_drawer__content .hikashop_cart_proceed_to_checkout {
	width: 100%;
	margin-top: 12px;
}

@media (max-width: 480px) {
	.hikashop_drawer__wrapper { max-width: 100vw !important; }
}

/* ─── Checkout ─────────────────────────────────────────────────────── */
.hikashop_checkout, .hikashop_checkout_page {
	background: var(--paper);
	font-family: var(--sans);
	padding: 20px 0;
}

.hikashop_checkout_step,
.hikashop_checkout_address,
.hikashop_checkout_payment,
.hikashop_checkout_shipping,
.hikashop_checkout_fields,
.hikashop_checkout_login,
.hikashop_checkout_coupon,
.hikashop_checkout_confirm,
.hikashop_checkout_status {
	background: var(--bone);
	padding: 28px;
	margin-bottom: 18px;
	border: 0;
}

.hikashop_checkout_title_step,
.hikashop_checkout_step_title,
.hikashop_checkout_address_title,
.hikashop_checkout_payment_title,
.hikashop_checkout_shipping_title {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
	color: var(--ink);
}

.hikashop_checkout_button_final,
input[type="submit"].hikashop_checkout_button,
a.hikabtn_checkout_final {
	width: 100%;
	padding: 20px;
	background: var(--ink);
	color: var(--bone);
	border: 0; border-radius: 0;
	font-family: var(--sans);
	font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
	font-weight: 500;
	cursor: pointer;
}
.hikashop_checkout_button_final:hover { background: var(--gold); color: var(--on-gold, var(--bone)); }

.hikashop_checkout_loading_spinner {
	border-color: var(--line) var(--line) var(--ink) var(--line);
}

/* Address form fields */
.hikashop_checkout_address input[type="text"],
.hikashop_checkout_address input[type="email"],
.hikashop_checkout_address textarea,
.hikashop_checkout_address select,
.hikashop_user_form input,
.hikashop_user_form textarea,
.hikashop_user_form select {
	background: transparent; border: 1px solid var(--line);
	padding: 12px 14px; font-family: var(--sans); font-size: 13px;
	border-radius: 0;
	width: 100%;
}
.hikashop_checkout_address input:focus,
.hikashop_user_form input:focus { border-color: var(--ink); outline: 0; }

/* ─── User / account area ──────────────────────────────────────────── */
.hikashop_user_cpanel,
.hikashop_user_cpanel_main {
	font-family: var(--sans);
	padding: 20px 0;
}
.hikashop_cpanel_box,
.hikashop_cpanel_icon {
	background: var(--bone);
	border: 0;
	padding: 28px;
	text-align: center;
	margin-bottom: 16px;
}
.hikashop_cpanel_icon a,
.hikashop_cpanel_box a {
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink); font-weight: 500;
	text-decoration: none;
}

/* Order listing table */
.hikashop_order_listing th, .hikashop_order_show th {
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--mute); font-weight: 500;
	border-bottom: 1px solid var(--ink);
	padding: 12px 8px;
}
.hikashop_order_listing td, .hikashop_order_show td {
	padding: 16px 8px;
	border-bottom: 1px solid var(--line);
}

/* ─── Filter / search bar (faceted filters) ───────────────────────── */
.hikashop_filter_section,
.hikashop_filter,
.hikashop_search_filter {
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 14px 0;
	display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 24px 0;
}
.hikashop_filter label { color: var(--mute); margin: 0; padding: 0; }
.hikashop_filter select {
	padding: 8px 28px 8px 10px;
	border: 1px solid var(--line);
	background-color: transparent;
	font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	min-width: 120px;
}

.hikashop_applied_filters {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 12px 0;
}
.hikashop_applied_filter_item,
.hikashop_filter_tag {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ─── Sort / page-size dropdowns row ──────────────────────────────── */
.hikashop_products_pagination,
.hikashop_products_sort,
.hikashop_sort_by_container,
.hikashop_limit_box {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}

/* ─── Badges / tags (new / sale) ──────────────────────────────────── */
.hikashop_product_badge,
.hikashop_product_new,
.hikashop_product_sale,
span.hikashop_discount_badge {
	background: var(--bone); color: var(--ink);
	font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 4px 7px;
	position: absolute; top: 10px; left: 10px;
	border: 0; border-radius: 0;
	font-weight: 500;
}
.hikashop_product_sale { background: var(--ink); color: var(--bone); }

/* ─── Waitlist / back-in-stock ────────────────────────────────────── */
.hikashop_waitlist, .hikashop_product_waitlist {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
	margin-top: 12px;
}

/* ─── Product comparison / compare ────────────────────────────────── */
.hikashop_compare_list, .hikashop_compare_table { font-family: var(--sans); font-size: 12px; }

/* ─── Carousel: container, slides, navigation, pagination ─────────── */

/* Reserve room around the swiper so the navigation arrows live outside
   the slide track and the pagination dots have breathing space below
   the cards. The horizontal padding is what stops the prev/next arrows
   from sitting on top of the first and last slides. */
.hikashop_carousel_parent_div {
	position: relative;
	padding: 8px 56px 16px;
	box-sizing: border-box;
}
/* Note: deliberately do NOT make `.hikashop_carousel` `position: relative`.
   It is the parent of the swiper, the navigation buttons AND the
   pagination wrapper. If it were the positioning context, the dots
   (positioned `bottom: 16px`) would land inside the slide track —
   because `.hikashop_carousel` is content-sized (= swiper height) once
   the pagination is taken out of flow. By leaving it static, the
   dots and the arrows both anchor to `.hikashop_carousel_parent_div`,
   whose 56px bottom padding gives the dots a real space to live in
   below the slides. */
.hikashop_carousel_parent_div .hikashop_carousel {
	overflow: visible;
}

/* Each slide: 12px horizontal padding acts as a visual gutter so
   adjacent cards never touch even when Swiper's spaceBetween is 0.
   The bone-coloured card surface is rendered by a ::before pseudo-
   element confined to the inner area (`inset: 0 12px`), which keeps
   the gutter transparent and avoids forcing layout/padding on
   unrelated children of the slide. */
.hikashop_carousel_item.swiper-slide,
.hikashop_carousel .swiper-slide.hikashop_carousel_item {
	padding: 0 12px !important;
	box-sizing: border-box !important;
	position: relative !important;
	background: transparent !important;
	height: auto;
	overflow: visible;
}
.hikashop_carousel_item.swiper-slide::before {
	content: '';
	position: absolute;
	inset: 0 12px;
	background: var(--bone);
	border: 1px solid var(--line);
	z-index: 0;
	pointer-events: none;
}
/* Any direct child div sits above the ::before backdrop and gets the
   16px inset so content (name, price, swatches) doesn't touch the card
   border. This catches all listing layout variants — .hikashop_product,
   .hikashop_container, .hikashop_product_subcontainer AND the
   image-only layouts that wrap content in .hikashop_listing_img_title /
   .hikashop_listing_img_desc / etc. without the .hikashop_product div. */
.hikashop_carousel_item.swiper-slide > div {
	position: relative;
	z-index: 1;
	padding: 16px !important;
	box-sizing: border-box;
}

/* Navigation arrows: visible square buttons sitting in the parent's
   reserved horizontal padding, with hairline border, paper fill, and a
   filled-ink hover state. The `top: calc(50% - 22px)` lifts the arrows
   slightly to compensate for the dots wrapper inflating the parent's
   height below the slide track. */
.hikashop_carousel_parent_div .swiper-button-prev,
.hikashop_carousel_parent_div .swiper-button-next,
.owl-nav button {
	width: 44px !important;
	height: 44px !important;
	top: calc(50% - 22px) !important;
	margin-top: -22px !important;
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	opacity: 1 !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	z-index: 5;
}
.hikashop_carousel_parent_div .swiper-button-prev { left: 6px !important; }
.hikashop_carousel_parent_div .swiper-button-next { right: 6px !important; }
.hikashop_carousel_parent_div .swiper-button-prev::after,
.hikashop_carousel_parent_div .swiper-button-next::after {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	color: inherit;
}
.hikashop_carousel_parent_div .swiper-button-prev:hover,
.hikashop_carousel_parent_div .swiper-button-next:hover,
.owl-nav button:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
.hikashop_carousel_parent_div .swiper-button-disabled {
	opacity: 0.35 !important;
	cursor: default;
}

/* Pagination dots: just push them down with a top margin. */
.hikashop_carousel_parent_div [id^="hikashop_carousel_pagination_"],
.hikashop_carousel_parent_div .owl-dots {
	margin-top: 28px;
	text-align: center;
}
.swiper-pagination-bullet,
.owl-dots .owl-dot span {
	width: 8px !important;
	height: 8px !important;
	margin: 0 5px !important;
	background: var(--line) !important;
	opacity: 1 !important;
	border-radius: 50% !important;
	transition: background 0.2s ease, transform 0.2s ease;
}
.swiper-pagination-bullet-active,
.owl-dots .owl-dot.active span {
	background: var(--ink) !important;
	transform: scale(1.2);
}

/* Compact carousel cards on small screens — the gutter shrinks but
   stays visible; the navigation buttons drop in size to keep the slide
   track readable on phones. */
@media (max-width: 768px) {
	.hikashop_carousel_parent_div { padding: 8px 40px 48px; }
	.hikashop_carousel_item.swiper-slide,
	.hikashop_carousel .swiper-slide.hikashop_carousel_item { padding: 0 8px !important; }
	.hikashop_carousel_parent_div .swiper-button-prev,
	.hikashop_carousel_parent_div .swiper-button-next,
	.owl-nav button { width: 36px !important; height: 36px !important; margin-top: -18px !important; }
}

/* ─── Module / menu-item background colour overrides ──────────────── */
/* HikaShop's module helper (administrator/components/com_hikashop/helpers/
   module.php) emits inline <style> rules using the merchant-set
   `background_color` parameter, with id-based selectors:
       #<main_div_name> div.hikashop_subcontainer,
       #<main_div_name> .hikashop_rtop *,
       #<main_div_name> .hikashop_rbottom * { background: <color>; }
   The default `main_div_name` is `hikashop_category_information_module_<id>`
   (or `..._menu_<id>` for menu items). Those id-based rules outrank a
   plain class selector, so we match them with a starts-with attribute
   selector and `!important` to push them onto the template's bone token,
   and let the rest of the palette stay in sync with the active preset. */
[id^="hikashop_category_information_module_"] div.hikashop_subcontainer,
[id^="hikashop_category_information_module_"] .hikashop_rtop *,
[id^="hikashop_category_information_module_"] .hikashop_rbottom *,
[id^="hikashop_category_information_menu_"] div.hikashop_subcontainer,
[id^="hikashop_category_information_menu_"] .hikashop_rtop *,
[id^="hikashop_category_information_menu_"] .hikashop_rbottom * {
	background: var(--bone) !important;
}

/* ─── Fix HikaShop's inline widths that blow up in a flex/grid context */
.hikashop_product_image_subdiv[style] { width: auto !important; height: auto !important; }
.hikashop_product_image_subdiv img[style] { width: 100% !important; height: 100% !important; }

/* Hide empty "more" buttons on listing cards — the product name is the link */
.hikashop_product_page_link { display: none; }

/* ─── Listing-card colour swatches ────────────────────────────────── */
/* Hide the redundant "Colour" label that repeats per product card */
.hikashop_product_characteristic_name_on_listing { display: none; }

/* Listing characteristics — HikaShop now wraps the per-value
   .hikashop_product_characteristic_on_listing blocks in a single
   .hikashop_product_characteristics_on_listing parent so they can be flexed
   into a single horizontal row from CSS without any onload JS (which would
   not survive the AJAX filter/pagination refresh). */
.hikashop_product_characteristics_on_listing {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	margin-top: 10px;
	margin-bottom: 14px;
}
.hikashop_product_characteristic_on_listing {
	display: flex !important;
	align-items: center;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.hikashop_product_characteristic_on_listing br { display: none !important; }
.hikashop_product_characteristic_values_on_listing {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.hikashop_product_characteristic_value_on_listing {
	display: inline-flex !important;
	align-items: center;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Colour values carry a .vessel-swatch span — hide their text label so only
   the swatch dot is visible. Size values (or any characteristic without a
   swatch) keep their text as a pill. */
.hikashop_product_characteristic_value_on_listing:has(.vessel-swatch) {
	font-size: 0 !important;
}
.hikashop_product_characteristic_value_on_listing .vessel-swatch {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	vertical-align: middle !important;
	border: 1px solid rgba(14, 14, 12, 0.15) !important;
	border-radius: 50% !important;
}

/* Size pills — text tiles for size labels (S/M/L/XL/XXL) on the listing card.
   Scoped to the Size characteristic block (id 11) so it doesn't leak to other
   text-only characteristics that might want different treatment. */
.hikashop_product_characteristic_on_listing_11 .hikashop_product_characteristic_value_on_listing {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 6px !important;
	border: 1px solid var(--line);
	font-family: var(--sans);
	font-size: 10px !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	box-sizing: border-box;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hikashop_product_characteristic_on_listing_11 .hikashop_product_characteristic_value_on_listing:hover {
	border-color: var(--ink);
}

/* ─── "Choose options" button on listing cards ────────────────────── */
.hikashop_product .hikabtn_more,
.hikashop_product .hikabtn_noborder,
a.hikashop_product_page_link_a,
.hikashop_product_button_container button,
.hikashop_product_quantity_main button,
.hikashop_product_quantity_main .hikashop_cart_input_button,
.hikashop_list_main_image_subdiv .hikabtn,
.hikashop_listing_img_title .hikabtn,
.hikashop_product_quantity_field_change_div_default {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	padding: 10px 16px !important;
	font-family: var(--sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1;
	width: 100%;
	margin-top: 10px;
}
.hikashop_product .hikabtn_more:hover,
.hikashop_product a.hikashop_product_page_link_a:hover {
	background: var(--gold) !important; border-color: var(--gold) !important; color: var(--on-gold, var(--bone)) !important;
}

/* Match all Bootstrap btn-success (green CTAs) to ink */
.btn-success, .bg-success,
button.btn.btn-success,
a.btn.btn-success {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border-color: var(--ink) !important;
}
.btn-success:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--on-gold, var(--bone)) !important; }

/* Product card spacing */
.hikashop_product .hikashop_container,
.hikashop_subcontainer.hikashop_product_subcontainer {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	text-align: left !important;
}

/* Card layout — name on the left and price on the right of the same line.
   HikaShop's default DOM order is: image, price, name, code, swatches, stock,
   add-to-cart. We grid the inner column container into named areas so each
   element lands in the right slot regardless of DOM order, and leave 1fr/auto
   so the price hugs the right edge while the name fills the remaining width. */
.hikashop_listing_img_title {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 14px;
	row-gap: 6px;
	align-items: baseline;
}
.hikashop_listing_img_title > .hikashop_product_image {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-bottom: 8px;
}
/* Name and price share row 2 — auto-placement would otherwise drop the name
   into row 3 col 1 because the price (DOM-first sibling) already filled row 2
   col 2. Explicit grid-row keeps them on the same line. */
.hikashop_listing_img_title > .hikashop_product_name {
	grid-column: 1;
	grid-row: 2;
	margin: 0 !important;
	padding: 0 !important;
	align-self: baseline;
}
.hikashop_listing_img_title > .hikashop_product_price_full,
.hikashop_listing_img_title > .hikashop_product_price_main {
	grid-column: 2;
	grid-row: 2;
	text-align: right;
	white-space: nowrap;
	align-self: baseline;
	margin: 0 !important;
}
.hikashop_listing_img_title > .hikashop_product_code_list,
.hikashop_listing_img_title > .hikashop_product_characteristics_on_listing,
.hikashop_listing_img_title > .hikashop_product_stock_count,
.hikashop_listing_img_title > .hikabtn,
.hikashop_listing_img_title > a.hikabtn,
/* Add-to-cart / wishlist buttons are wrapped in a form.hikashop_aligned_btn;
   span it so the button is full width like the "Choose options" link. */
.hikashop_listing_img_title > .hikashop_aligned_btn,
.hikashop_listing_img_title > .hikashop_product_button_for,
.hikashop_listing_img_title > .hikashop_product_quantity_main {
	grid-column: 1 / -1;
}
/* Hidden form/meta elements emitted by HikaShop must not occupy a grid cell */
.hikashop_listing_img_title > input[type="hidden"],
.hikashop_listing_img_title > meta { display: none !important; }
/* Hide the per-unit ("each") suffix that HikaShop appends to the listing
   price so the right column reads as a clean price.
   The selector chains three classes to beat HikaShop's carousel rule
   `div.hikashop_carousel .hikashop_carousel_item span { display:block; }`
   (specificity 0,2,2) which loads after the vessel CSS and would otherwise
   force the per-unit span visible inside the homepage carousel. */
.hikashop_listing_img_title .hikashop_product_price_full .hikashop_product_price_per_unit { display: none; }

/* ─── Other item box layouts (img, title, img_desc, img_pane, …) ─────
   The card grid above is specific to .hikashop_listing_img_title. HikaShop's
   other listing layouts keep their own markup, but give their action buttons
   (add to cart / wishlist / choose options, all wrapped in .hikashop_aligned_btn)
   the same full-width treatment so they stay consistent across layouts. Scoped
   to .hikashop_aligned_btn so the quantity stepper buttons are never caught. */
.hikashop_subcontainer > [class*="hikashop_listing_"]:not(.hikashop_listing_img_title) .hikashop_aligned_btn {
	display: block;
	width: 100%;
	margin-top: 10px;
}
.hikashop_subcontainer > [class*="hikashop_listing_"]:not(.hikashop_listing_img_title) .hikashop_aligned_btn .hikabtn,
.hikashop_subcontainer > [class*="hikashop_listing_"]:not(.hikashop_listing_img_title) .hikashop_aligned_btn .hikashop_cart_input_button {
	width: 100%;
}

/* ─── Listing quantity stepper ───────────────────────────────────────
   The polished stepper box is otherwise scoped to the product page
   (#hikashop_product_quantity_main), so listings fell back to plain +/-
   buttons. Mirror that box here for the div-based quantity displays so the
   listing stepper reads as a clean bordered [ N | + | – ] box. Scoped to
   .hikashop_subcontainer (listings only), so the product page, cart and
   checkout steppers are untouched. Leftright/select modes keep the generic
   styling defined earlier. */
.hikashop_subcontainer .hikashop_product_quantity_input_div_default_main,
.hikashop_subcontainer .hikashop_product_quantity_input_div_regrouped {
	display: inline-flex !important;
	align-items: stretch;
	height: 36px;
	border: 1px solid var(--line);
	background: var(--paper);
	overflow: hidden;
	width: max-content;
	margin: 0;
}
.hikashop_subcontainer .hikashop_product_quantity_input_div_default,
.hikashop_subcontainer .hikashop_product_quantity_change_div_default,
.hikashop_subcontainer .hikashop_product_quantity_change_div_regrouped,
.hikashop_subcontainer .hikashop_product_quantity_change_div_plus_default,
.hikashop_subcontainer .hikashop_product_quantity_change_div_minus_default,
.hikashop_subcontainer .hikashop_product_quantity_change_div_plus_regrouped,
.hikashop_subcontainer .hikashop_product_quantity_change_div_minus_regrouped {
	display: inline-flex !important;
	align-items: stretch;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-width: 0;
}
.hikashop_subcontainer .hikashop_product_quantity_field_change {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	min-width: 32px;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	box-shadow: none !important;
}
.hikashop_subcontainer .hikashop_product_quantity_field_change:hover {
	background: var(--line) !important;
}
.hikashop_subcontainer .hikashop_product_quantity_field:not([type="hidden"]) {
	width: 44px !important;
	min-width: 44px;
	height: 100% !important;
	text-align: center;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid var(--line) !important;
	border-right: 1px solid var(--line) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
	appearance: textfield;
	-moz-appearance: textfield;
	line-height: 34px;
}
.hikashop_subcontainer .hikashop_product_quantity_field::-webkit-outer-spin-button,
.hikashop_subcontainer .hikashop_product_quantity_field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ─── Reviews / votes section — Maison Vessel layout ─────────────── */
.hikashop_product_page #hikashop_comment_form {
	margin: 0;
}
.hikashop_product_page #hikashop_vote_listing,
.hikashop_product_page #hikashop_vote_form {
	background: var(--bone);
	margin-top: 60px;
	margin-left: calc(-1 * (100vw - 100%) / 2);
	margin-right: calc(-1 * (100vw - 100%) / 2);
	padding: 90px max(56px, calc((100vw - 1320px) / 2));
}
/* Inside a tab panel, the negative-margin full-bleed trick overflows
   the panel's containing column and looks broken. Reset to in-flow
   layout so the bone block stays inside the tab's content area. */
.hikashop_product_page #hikashop_tabs_div #hikashop_vote_listing,
.hikashop_product_page #hikashop_tabs_div #hikashop_vote_form {
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding: 40px;
}
.hikashop_product_page #hikashop_comment_form {
	overflow-x: clip;
}
.hikashop_product_page #hikashop_vote_listing {
	margin-bottom: 0;
	padding-bottom: 60px;
}
.hikashop_product_page #hikashop_vote_form {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 100px;
}
.hikashop_product_page .hikashop_listing_comment {
	max-width: 1280px;
	margin: 0 auto;
}
/* Hide the default "List of the comments:" label (HikaShop puts it as the
   first <span> child of .hikashop_listing_comment, which our JS then moves
   into .vessel-reviews-col) and the sort dropdown */
.hikashop_product_page .hikashop_listing_comment > span:first-child,
.hikashop_product_page .vessel-reviews-col > span:first-child {
	display: none;
}
.hikashop_product_page .hikashop_sort_listing_comment { display: none; }

/* Two-column grid (sidebar + reviews) when JS has wrapped the contents */
.hikashop_product_page .vessel-reviews-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 80px;
	align-items: start;
}
.hikashop_product_page .vessel-reviews-col { min-width: 0; }
@media (max-width: 900px) {
	.hikashop_product_page .vessel-reviews-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

/* Sidebar — average + distribution */
.vessel-reviews-summary { font-family: var(--sans); }
.vessel-reviews-eyebrow {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 14px;
}
.vessel-reviews-average {
	font-family: var(--serif);
	font-size: 64px;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
}
.vessel-reviews-stars {
	display: flex;
	gap: 2px;
	margin-top: 10px;
}
.vessel-review-star {
	width: 14px;
	height: 14px;
	display: inline-block;
	background: var(--line);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.336 24 12 19.897 4.664 24 6 15.27 0 9.423l8.332-1.268z'/></svg>") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.336 24 12 19.897 4.664 24 6 15.27 0 9.423l8.332-1.268z'/></svg>") center / 100% 100% no-repeat;
}
.vessel-review-star.is-full { background: var(--gold); }
.vessel-reviews-count {
	margin-top: 12px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}
.vessel-reviews-bars {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vessel-review-bar-row {
	display: grid;
	grid-template-columns: 30px 1fr 30px;
	gap: 12px;
	align-items: center;
	font-size: 12px;
	color: var(--ink);
}
.vessel-review-bar-star {
	color: var(--mute);
	font-size: 11px;
}
.vessel-review-bar-track {
	display: block;
	height: 2px;
	background: var(--line);
	position: relative;
}
.vessel-review-bar-fill {
	display: block;
	height: 100%;
	background: var(--ink);
	transition: width .4s ease;
}
.vessel-review-bar-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--mute);
	font-size: 12px;
}

/* Reviews column — restyle each <table.hika_comment_listing> as a card */
.hikashop_product_page .hika_comment_listing {
	width: 100% !important;
	border-collapse: collapse;
	background: transparent;
	margin: 0 0 36px;
	padding: 0 0 36px;
	border: 0;
	border-bottom: 1px solid var(--line);
	display: block;
}
.hikashop_product_page .hika_comment_listing:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
.hikashop_product_page .hika_comment_listing tbody,
.hikashop_product_page .hika_comment_listing tr,
.hikashop_product_page .hika_comment_listing td {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
}
.hikashop_product_page .hika_comment_listing tr:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-bottom: 12px;
}
/* The header row contains: name TD, stars TD, useful-text TD, useful-buttons TDs.
   Stack stars first (gold row), then name as a small byline above content. */
.hikashop_product_page .hika_comment_listing_stars {
	order: 1;
	width: 100%;
	display: flex;
	gap: 2px;
	margin-bottom: 14px;
}
/* Stars (apply globally — replaces HikaShop's star.gif sprite so the same
   gold-on-grey treatment is used everywhere stars appear: PDP mini rating,
   review listing cards, the synthesized summary, category-listing thumbnails,
   the vote-form picker, etc.).
   The body-scoped selector is intentional: HikaShop's media/com_hikashop CSS
   loads AFTER the template stylesheet and its rule
     .hk-rate-star { background-image: url('../images/star.gif') !important }
   carries !important too. With equal specificity, source order wins — so the
   extra `body` here lifts our specificity to (0,0,1,1) and lets us override
   the GIF cleanly. */
body .hk-rate-star {
	width: 12px !important;
	height: 12px !important;
	display: inline-block;
	background-image: none !important;
	background-color: var(--line) !important;
	background-repeat: no-repeat !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.336 24 12 19.897 4.664 24 6 15.27 0 9.423l8.332-1.268z'/></svg>") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.336 24 12 19.897 4.664 24 6 15.27 0 9.423l8.332-1.268z'/></svg>") center / 100% 100% no-repeat;
	border: 0 !important;
	vertical-align: middle;
	transition: background-color .12s ease;
}
body .hk-rate-star.state-full,
body .hk-rate-star.state-hover { background-color: var(--gold) !important; }
body .hk-rate-star.state-empty { background-color: var(--line) !important; }
/* Vote form picker stars are larger so people can click them */
body .hikashop_vote_stars .hk-rate-star,
body #hikashop_vote_form .hk-rate-star {
	width: 18px !important;
	height: 18px !important;
	cursor: pointer;
}
/* Mini rating row beside the product name on PDP / category cards */
body #hikashop_product_vote_mini .hk-rate-star,
body .hikashop_product_listing .hk-rate-star {
	width: 12px !important;
	height: 12px !important;
}
/* Name → byline below content */
.hikashop_product_page .hika_comment_listing_name {
	order: 4;
	width: 100%;
	margin-top: 14px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}
.hikashop_product_page #hikashop_vote_listing .hika_vote_listing_username {
	color: var(--mute);
	font-weight: 400;
}
/* Hide the screen-reader-only star count text */
.hikashop_product_page .hika_comment_listing_stars .element-invisible { display: none; }
/* The 3rd TD on the header row contains the "X find it helpful" notification.
   Drop it inline next to the byline so the review card feels balanced. */
.hikashop_product_page .hika_comment_listing tr:first-child > td:nth-child(3) {
	order: 5;
	width: auto;
	margin-top: 14px;
	margin-left: 16px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}
.hikashop_product_page .hika_comment_listing_notification {
	display: inline;
}
/* Useful / not-helpful buttons (rendered when the visitor hasn't voted yet) */
/* frontend_default.css decorates these TDs with a thumb-up/down PNG as a
   background-image — clear it so the buttons read as text only. */
.hikashop_product_page .hika_comment_listing_useful,
.hikashop_product_page .hika_comment_listing_useless {
	order: 6;
	width: auto !important;
	margin-top: 14px;
	margin-left: 12px;
	background-image: none !important;
	padding: 0 !important;
}
.hikashop_product_page .hika_comment_listing_useful_p,
.hikashop_product_page .hika_comment_listing_useless_p {
	display: none !important;
}
.hikashop_product_page .hika_useful_btn,
.hikashop_product_page .hika_useless_btn {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--mute);
	padding: 5px 10px 4px;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: border-color .12s, color .12s;
}
/* Thumb-up / thumb-down icons (masked inline SVG so they pick up currentColor) */
.hikashop_product_page .hika_useful_btn::before,
.hikashop_product_page .hika_useless_btn::before {
	content: '';
	display: inline-block;
	width: 11px;
	height: 11px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.hikashop_product_page .hika_useful_btn::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 21h9a2 2 0 0 0 1.94-1.5l2-7A2 2 0 0 0 20 10h-5.6l.74-3.7a1.5 1.5 0 0 0-2.6-1.3L7.5 11H5v10h4Zm-2-2H4v-6h3v6Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 21h9a2 2 0 0 0 1.94-1.5l2-7A2 2 0 0 0 20 10h-5.6l.74-3.7a1.5 1.5 0 0 0-2.6-1.3L7.5 11H5v10h4Zm-2-2H4v-6h3v6Z'/></svg>");
}
.hikashop_product_page .hika_useless_btn::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M15 3H6a2 2 0 0 0-1.94 1.5l-2 7A2 2 0 0 0 4 14h5.6l-.74 3.7a1.5 1.5 0 0 0 2.6 1.3L16.5 13H19V3h-4Zm2 2h3v6h-3V5Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M15 3H6a2 2 0 0 0-1.94 1.5l-2 7A2 2 0 0 0 4 14h5.6l-.74 3.7a1.5 1.5 0 0 0 2.6 1.3L16.5 13H19V3h-4Zm2 2h3v6h-3V5Z'/></svg>");
}
.hikashop_product_page .hika_useful_btn::after { content: 'Helpful'; }
.hikashop_product_page .hika_useless_btn::after { content: 'Not helpful'; }
.hikashop_product_page .hika_useful_btn:hover,
.hikashop_product_page .hika_useless_btn:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.hikashop_product_page .hika_comment_listing_useful.next_button_disabled .hika_useful_btn,
.hikashop_product_page .hika_comment_listing_useless.next_button_disabled .hika_useless_btn {
	opacity: 0.4;
	pointer-events: none;
}
.hikashop_product_page .hika_useful_btn .element-invisible,
.hikashop_product_page .hika_useless_btn .element-invisible {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}
/* Comment content row — editorial pull-quote treatment.
   Selector is intentionally scoped through `#hikashop_vote_listing`
   to beat HikaShop's frontend_default.css rule
     `#hikashop_vote_listing div.hika_comment_listing_content { color:#000 }`
   which would otherwise paint the text near-invisible on dark presets
   (computer / oxblood / etc. where --paper is near-black). */
.hikashop_product_page #hikashop_vote_listing .hika_comment_listing_content {
	font-family: var(--serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--ink);
	margin: 0;
}
.hikashop_product_page #hikashop_vote_listing .hika_comment_listing_content::before { content: '\201C'; }
.hikashop_product_page #hikashop_vote_listing .hika_comment_listing_content::after  { content: '\201D'; }
/* Bottom row (purchased badge) */
.hikashop_product_page .hika_comment_listing_bottom {
	margin-top: 6px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
}
.hikashop_product_page .hikashop_vote_listing_useful_bought::before {
	content: '✓ ';
	margin-right: 2px;
}

/* ─── Pagination & per-page dropdown ─────────────────────────────── */
.hikashop_product_page .hikashop_listing_comment > .pagination {
	margin-top: 40px;
}
.pagination-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 24px;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--ink);
}
/* Per-page dropdown — "Display # [▾]" */
.pagination-toolbar .limit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute);
	white-space: nowrap;
	order: 2;
}
/* Joomla's pagination already emits a "Display #" text node before the
   <select>, so we don't add our own ::before label. */
.hikashop_pagination_dropdown,
.pagination-toolbar select#limit {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	display: inline-block !important;
	padding: 8px 32px 8px 12px !important;
	border: 1px solid var(--line) !important;
	background-color: var(--paper) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230E0E0C' stroke-width='1.2'><path d='M1 1.5l5 5 5-5'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 10px 7px !important;
	border-radius: 0 !important;
	font-family: var(--sans) !important;
	font-size: 12px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink) !important;
	cursor: pointer;
	box-shadow: none !important;
	min-width: 70px;
	height: auto !important;
	line-height: 1.3 !important;
	transition: border-color .12s;
}
.hikashop_pagination_dropdown:focus {
	outline: none !important;
	border-color: var(--ink) !important;
}

/* Page number / chevron list */
.hikashop_pagination,
ul.pagination.hikashop_pagination {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 4px;
	align-items: center;
	order: 1;
}
.hikashop_pagination .page-item {
	display: inline-flex;
}
.hikashop_pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: 0;
	transition: border-color .12s, background .12s, color .12s;
}
.hikashop_pagination .page-link:hover {
	border-color: var(--ink);
}
.hikashop_pagination .page-item.active .page-link,
.hikashop_pagination .page-item.disabled .page-link[aria-current],
.hikashop_pagination .pagenav.active {
	background: var(--ink);
	color: var(--bone);
	border-color: var(--ink);
}
.hikashop_pagination .page-item.disabled .page-link {
	opacity: 0.4;
	pointer-events: none;
}
/* FontAwesome chevrons inside pagination — let them inherit color */
.hikashop_pagination .page-link .fas,
.hikashop_pagination .page-link [class*="fa-angle"] {
	color: inherit;
	font-size: 13px;
	line-height: 1;
}

/* Results counter ("Results 1 - 8 of 15") */
.hikashop_results_counter {
	color: var(--mute);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	order: 3;
	margin-left: auto;
}
.pagination-toolbar > .pagination-counter,
.pagination-toolbar .counter,
.pagination-toolbar > div:last-child {
	margin-left: auto;
}

/* ─── Vote / review form (Vote: ★ / Username / Comment / Submit) ── */
.hikashop_product_page #hikashop_vote_form .hikashop_vote_form {
	max-width: 720px;
	margin: 0 auto;
}
.hikashop_product_page #hikashop_vote_form > .hikashop_vote_form {
	padding-top: 60px;
	border-top: 1px solid var(--line);
}
.hikashop_product_page .hikashop_vote_form .clear_both,
.hikashop_product_page .hikashop_vote_form > br { display: none; }

/* Heading */
.hikashop_product_page .hikashop_form_comment {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0 0 24px;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* "Vote:" star row */
.hikashop_product_page .hikashop_vote_stars {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 18px;
}
.hikashop_product_page .hikashop_vote_stars .hk-rating {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}
.hikashop_product_page .hikashop_vote_stars .hk-rate-star {
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.hikashop_product_page #hikashop_vote_status_form { display: none; }

/* Username table — collapse to a clean field */
.hikashop_product_page .hikashop_comment_form {
	width: 100%;
	max-width: none;
	border-collapse: collapse;
	margin: 0 0 16px;
	background: transparent;
}
.hikashop_product_page .hikashop_comment_form,
.hikashop_product_page .hikashop_comment_form tbody,
.hikashop_product_page .hikashop_comment_form tr,
.hikashop_product_page .hikashop_comment_form td {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
}
.hikashop_product_page .hikashop_comment_form td:first-child {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 8px;
}

/* Inputs / textareas */
.hikashop_product_page #hikashop_vote_form input[type="text"],
.hikashop_product_page #hikashop_vote_form input[type="email"],
.hikashop_product_page #hikashop_vote_form textarea,
.hikashop_product_page .hikashop_comment_textarea {
	width: 100% !important;
	box-sizing: border-box;
	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;
	transition: border-color .15s;
}
.hikashop_product_page #hikashop_vote_form input:focus,
.hikashop_product_page #hikashop_vote_form textarea:focus {
	outline: none;
	border-color: var(--ink);
}
.hikashop_product_page .hikashop_comment_textarea {
	min-height: 140px;
	resize: vertical;
	display: block;
	margin-bottom: 16px;
}

/* Submit button — match the design's outline-ink CTA */
.hikashop_product_page #hikashop_vote_form input.hikabtn,
.hikashop_product_page #hikashop_vote_form .hikabtn[type="submit"] {
	background: transparent !important;
	border: 1px solid var(--ink);
	color: var(--ink) !important;
	padding: 14px 28px !important;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0 !important;
	transition: background .15s, color .15s;
	width: auto;
	display: inline-block;
}
.hikashop_product_page #hikashop_vote_form input.hikabtn:hover {
	background: var(--ink) !important;
	color: var(--bone) !important;
}

/* ─── Sidebar filter module (mod_hikashop_filter) ──────────────────── */
.hikashop_filter_module {
	font-family: var(--sans);
	color: var(--ink);
}
.hikashop_filter_main {
	margin-bottom: 28px;
}
/* The filter section header — HikaShop emits it as a <span class="hikashop_filter_title">
   inside each .hikashop_filter_NAME wrapper. Force it to a block so the
   actual filter (input, slider, checkboxes) drops to the next line with a
   proper gap, instead of sitting flush against the label. */
.hikashop_filter_module .hikashop_filter_title {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin: 0 0 14px;
}
/* HikaShop emits a CURSOR_TITLE_SEPARATOR (": ") text node between the
   .hikashop_filter_title and the slider — when the title is on its own line
   the separator becomes an orphan colon. Visually drop it. */
.hikashop_filter_main > div:has(.noUi-target) .hikashop_filter_title + br,
.hikashop_filter_main > div:has(.noUi-target) > br { display: none; }
.hikashop_filter_main > div:has(.noUi-target) {
	font-size: 0;
	line-height: 0;
}
.hikashop_filter_main > div:has(.noUi-target) > * {
	font-size: initial;
	line-height: initial;
}
.hikashop_filter_main > div:has(.noUi-target) .hikashop_filter_title { line-height: 1.2; }

/* Search text input */
.hikashop_filter_search input[type="text"],
.hikashop_filter_search input.hikashop_filter_text {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--line) !important;
	background: var(--paper) !important;
	color: var(--ink) !important;
	font-family: var(--sans) !important;
	font-size: 13px !important;
	border-radius: 0 !important;
	box-sizing: border-box;
	transition: border-color .12s;
}
.hikashop_filter_search input[type="text"]:focus {
	outline: none !important;
	border-color: var(--ink) !important;
}

/* Price cursor (noUiSlider) — match the ink/line palette */
.hikashop_filter_main > div:has(.noUi-target) .noUi-target {
	background: var(--line) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	height: 2px !important;
	/* Top margin large enough to keep the noUi-tooltips clear of the
	   "Price" label and the small/large value labels above. */
	margin: 36px 8px 30px !important;
}
.hikashop_filter_main > div:has(.noUi-target) .noUi-connect,
.hikashop_filter_main > div:has(.noUi-target) .noUi-connects {
	background: var(--ink) !important;
	border-radius: 0 !important;
}
.hikashop_filter_main > div:has(.noUi-target) .noUi-handle {
	width: 14px !important;
	height: 14px !important;
	right: -7px !important;
	top: -6px !important;
	border-radius: 50% !important;
	background: var(--paper) !important;
	border: 1px solid var(--ink) !important;
	box-shadow: none !important;
	cursor: grab;
}
.hikashop_filter_main > div:has(.noUi-target) .noUi-handle::before,
.hikashop_filter_main > div:has(.noUi-target) .noUi-handle::after {
	display: none !important;
}
.hikashop_filter_main > div:has(.noUi-target) .noUi-handle:active { cursor: grabbing; }
.hikashop_filter_main > div:has(.noUi-target) .noUi-tooltip {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 4px 8px !important;
	font-family: var(--sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.04em;
}
/* The min/max value labels rendered above the slider */
.hikashop_filter_main > div:has(.noUi-target) [class*="title_div"] {
	display: flex;
	justify-content: space-between;
	font-family: var(--sans);
	font-size: 11px;
	color: var(--mute);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}
/* If HikaShop emits the min/max as separate <input> elements, hide their
   borders so they look like plain labels. */
.hikashop_filter_main > div:has(.noUi-target) input[type="text"] {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	color: var(--mute) !important;
	width: auto !important;
	max-width: 60px;
	font-variant-numeric: tabular-nums;
}
.hikashop_filter_main > div:has(.noUi-target) input[type="text"]:focus {
	outline: none !important;
}

/* ─── Text-filter autocomplete (typeahead suggestions + product cards) ──
   A text filter can show a live suggestion dropdown as the visitor types:
   plain name/value strings, or rich product cards. Core ships a generic
   white / #ccc-border / blue-hover look (frontend_default.css); restyle it
   onto the editorial palette so it reads as a continuation of the search
   input above it. Shared file, so Joomla and WordPress both pick this up. */
.hikashop_filter_suggestions {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-top: none !important;
	border-radius: 0 !important;
	box-shadow: 0 10px 28px rgba(14, 14, 12, 0.10) !important;
	max-height: 20em;
	font-family: var(--sans);
	color: var(--ink);
}
.hikashop_filter_suggestion {
	padding: 9px 12px;
	font-size: 13px;
	color: var(--ink);
	border-top: 1px solid var(--line);
}
.hikashop_filter_suggestion:first-child { border-top: none; }
.hikashop_filter_suggestion_active,
.hikashop_filter_suggestion:hover {
	background: var(--bone) !important;
}
/* The "from Name / Description" source tag shown in values mode */
.hikashop_filter_suggestion_source {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}
/* Product-card suggestions (cards style) */
.hikashop_filter_suggestion_card { gap: 12px; }
.hikashop_filter_suggestion_thumb img {
	border: 1px solid var(--line);
	background: var(--bone);
	border-radius: 0;
}
.hikashop_filter_suggestion_name {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}
.hikashop_filter_suggestion_price {
	font-family: var(--sans);
	font-size: 12px;
	color: var(--mute);
	font-variant-numeric: tabular-nums;
}

/* ─── User account / cpanel pages ─────────────────────────────────────
   /account renders show.php with .hikashop_cpanel_main_interface containing
   six big colourful Font Awesome stack icons (Customer Account / Addresses /
   Orders / Carts / Wishlists / Affiliate / Logout). The default styling
   does not match the editorial palette — the icons are blue, the active
   state has a sky-blue background, and the surrounding chrome is full of
   rounded-corner cards. Restyle the whole sidebar to a quiet, hairline
   list of links, and tame the surrounding chrome (BACK button, search /
   filter row, points box, address dropdowns). */
.hikashop_cpanel_main_interface,
.hikashop_user_orders_block,
.hikashop_user_addresses_block,
.hikashop_user_carts_block,
.hikashop_user_wishlist_block {
	background: transparent;
}

/* The cpanel icon list. HikaShop's default markup is a vertical list of
   <a class="hika_cpanel_icon">; we render it as hairline rows with the
   label only (icon hidden). */
.hikashop_cpanel_main_interface {
	border: 0;
	border-radius: 0;
	background: transparent;
	margin: 0 0 32px;
}
/* When the cpanel sidebar is rendered via hikashop_getLayout (orders /
   addresses / cart / our profile-edit override), it lives inside
   .hikashop_cpanel_main_interface > .hk-row-fluid > .hika_cpanel_side_bar
   .hkc-md-3 + .hika_cpanel_main_data .hkc-md-9. The outer hk-row-fluid is
   already a 12-track grid (HikaShop's own CSS), so the side-by-side split
   comes for free — we just need to widen the gap and make the inner
   .hika_cpanel_icons container behave like our hairline list. */
.hikashop_cpanel_main_interface .hk-row-fluid.hikashop_dashboard {
	gap: 56px;
}
.hikashop_cpanel_main_interface .hika_cpanel_side_bar {
	min-width: 0;
}
.hikashop_cpanel_main_interface .hika_cpanel_icons {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 0;
}
.hikashop_cpanel_main_interface .hika_cpanel_main_data {
	min-width: 0;
}
@media (max-width: 900px) {
	.hikashop_cpanel_main_interface .hk-row-fluid.hikashop_dashboard {
		gap: 32px;
		grid-template-columns: 1fr;
	}
	.hikashop_cpanel_main_interface .hika_cpanel_side_bar,
	.hikashop_cpanel_main_interface .hika_cpanel_main_data {
		grid-column: 1 / -1;
	}
}
.hikashop_cpanel_main_interface .hika_cpanel_icon,
.hikashop_cpanel_main_interface a.hika_cpanel_icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	color: var(--mute);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	transition: background .15s, color .15s;
}
.hikashop_cpanel_main_interface .hika_cpanel_icon:last-child {
	border-bottom: 0;
}
.hikashop_cpanel_main_interface .hika_cpanel_icon:hover {
	background: var(--bone);
	color: var(--ink);
}
.hikashop_cpanel_main_interface .hika_cpanel_icon_active {
	background: var(--ink) !important;
	color: var(--bone) !important;
}
.hikashop_cpanel_main_interface .hika_cpanel_icon_active:hover {
	background: var(--ink) !important;
	color: var(--bone) !important;
}
/* Cpanel icons — HikaShop ships Font Awesome "stack" icons (e.g.
   <span class="hk-icon fa-stack fa-2x user2"><i class="far fa-file-alt
   fa-stack-2x"></i><i class="fas fa-circle fa-stack-1x fa-inverse"></i>
   <i class="fas fa-user-circle fa-stack-1x"></i></span>) with each layer
   coloured to a Bootstrap palette (blue, red…). Recolour the stack
   layers to the template palette: outline in --mute, the inverse
   "punch-out" in --paper so it lifts the inner glyph off the outline,
   inner glyph in --ink. The active row flips them to bone-on-ink. */
.hikashop_cpanel_main_interface .hk-icon.fa-stack {
	display: inline-block;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	font-size: 18px;
	line-height: 36px;
	margin-right: 18px;
	color: var(--ink);
}
.hikashop_cpanel_main_interface .hk-icon.fa-stack > .fa-stack-2x {
	color: var(--mute);
}
.hikashop_cpanel_main_interface .hk-icon.fa-stack > .fa-stack-1x.fa-inverse {
	color: var(--paper);
}
.hikashop_cpanel_main_interface .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse) {
	color: var(--ink);
}
.hikashop_cpanel_main_interface .hika_cpanel_icon:hover .hk-icon.fa-stack > .fa-stack-2x {
	color: var(--ink);
}
.hikashop_cpanel_main_interface .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-2x {
	color: var(--bone);
}
.hikashop_cpanel_main_interface .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x.fa-inverse {
	color: var(--ink);
}
.hikashop_cpanel_main_interface .hika_cpanel_icon_active .hk-icon.fa-stack > .fa-stack-1x:not(.fa-inverse) {
	color: var(--bone);
}
.hikashop_cpanel_main_interface .hikashop_cpanel_button_text {
	display: block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* Points box (.hk-well.hikashop_user_points_cpanel) — by default this is
   a Bootstrap "well" with grey background + rounded corners. */
.hk-well,
.hikashop_user_points_cpanel {
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 18px 22px !important;
	margin: 0 0 24px !important;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--ink);
}
.hk-well .fa,
.hk-well .fas,
.hk-well i[class*="fa-"],
.hikashop_user_points_cpanel i[class*="fa-"] {
	color: var(--gold);
	margin-right: 12px;
}

/* "Your last orders" / "Customer information" headings on cpanel.
   show.php emits these as <h2> inside .hikashop_user_*_block sections. */
.hikashop_user_orders_block h2,
.hikashop_user_addresses_block h2,
.hikashop_user_carts_block h2,
.hikashop_user_wishlist_block h2 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 24px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
}

/* Page-level h1 that com_hikashop emits on listing/show pages (Orders,
   Addresses, Carts, Wishlists) — the default is the stock h1 size which
   is too heavy. Use the same serif italic treatment. */
.hikashop_orders_listing_page h1,
.hikashop_addresses_listing_page h1,
.hikashop_user_carts_page h1,
.hikashop_user_wishlist_page h1,
.hikashop_user_cpanel_page h1,
.hikashop_user_address_page h1,
.hikashop_order_page h1 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.05;
	color: var(--ink);
	margin: 0 0 32px;
}

/* Order cards (dashboard "Your last orders" + Orders listing). The
   product rows are stock .hk-list-group-item with a hard #fff bg and
   #ddd border that sit as a jarring partial-width white box on the
   --paper order card. Blend them into the card with a hairline
   divider instead. Scoped to the order/cpanel context so other
   .hk-list-group-item uses are untouched. */
.hk-card-order {
	background: var(--paper);
	border: 1px solid var(--line);
}
.hk-card-order .hk-list-group-item,
.hk-card-order .hika_cpanel_product,
.hikashop_cpanel_main_interface .hika_cpanel_product {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none !important;
}
.hk-card-order .hika_cpanel_products .hika_cpanel_product:last-child,
.hk-card-order .hk-list-group .hk-list-group-item:last-child,
.hikashop_cpanel_main_interface .hika_cpanel_products .hika_cpanel_product:last-child {
	border-bottom: 0 !important;
}

/* ─── HikaShop toolbar (.hika_toolbar) ───────────────────────────────
   The toolbar that sits above account / cart / orders listings holds
   buttons like Back, Empty cart, Checkout, Save, and a "Move to" cart
   dropdown (.hkdropdown.hikabtn). Default styling renders each button as
   a chunky dark-blue Bootstrap button with a 2x Font Awesome icon —
   reduce them to quiet text buttons with the original FA icon kept but
   recoloured to the template palette. The dropdown gets the same
   treatment, with the menu list styled as a paper-bg hairline panel. */
.hika_toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	margin: 24px 0 28px;
}
.hika_toolbar .hika_toolbar_btn {
	display: inline-flex;
	align-items: stretch;
}
.hika_toolbar .hika_toolbar_btn a.hikabtn,
.hika_toolbar .hkdropdown.hikabtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	box-shadow: none !important;
	padding: 11px 18px !important;
	color: var(--ink) !important;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	position: relative;
}
/* The .hkdropdown wrapper already carries the border + padding; the inner
   toggle <a data-toggle="hkdropdown"> needs to be reset so we don't get
   a double-border / double-padding ring inside the button. */
.hika_toolbar .hkdropdown.hikabtn > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: inherit !important;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	font-weight: inherit;
	text-decoration: none !important;
	border-radius: 0 !important;
	cursor: pointer;
}
.hika_toolbar .hika_toolbar_btn a.hikabtn:hover,
.hika_toolbar .hkdropdown.hikabtn:hover {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border-color: var(--ink) !important;
}
.hika_toolbar .hkdropdown.hikabtn:hover > a {
	color: var(--bone) !important;
}
/* Keep the original FA icon visible but recoloured. Icon font-weight is
   left to whatever Font Awesome's own .fas / .far / .fab class defines —
   we MUST NOT override font-weight on <i> because .fas needs weight 900
   to render solid glyphs (e.g. fa-shopping-cart, fa-cart-arrow-down,
   fa-arrow-circle-left); forcing 400 silently maps them to FA Regular,
   which doesn't include those icons and renders an empty box instead. */
.hika_toolbar .hika_toolbar_btn a.hikabtn .btnIcon,
.hika_toolbar .hkdropdown.hikabtn > a .btnIcon,
.hika_toolbar .hika_toolbar_btn a.hikabtn .hk-icon,
.hika_toolbar .hkdropdown.hikabtn > a .hk-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	font-size: 14px;
	color: currentColor !important;
	background: transparent !important;
	margin: 0;
	line-height: 1;
}
.hika_toolbar .hika_toolbar_btn a.hikabtn .btnIcon i,
.hika_toolbar .hkdropdown.hikabtn > a .btnIcon i,
.hika_toolbar .hika_toolbar_btn a.hikabtn .hk-icon i,
.hika_toolbar .hkdropdown.hikabtn > a .hk-icon i {
	color: currentColor;
	font-size: inherit;
	line-height: 1;
}
/* Drop the FA "2x" sizing to stay editorial — single icon at 14px. */
.hika_toolbar .hika_toolbar_btn a.hikabtn .fa-2x,
.hika_toolbar .hkdropdown.hikabtn > a .fa-2x {
	font-size: 14px !important;
	line-height: 1 !important;
	width: auto;
	height: auto;
	display: inline-flex;
	vertical-align: baseline;
}
.hika_toolbar .hika_toolbar_btn a.hikabtn .btnName,
.hika_toolbar .hkdropdown.hikabtn .hkdropdown-label {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: inherit;
}
/* Caret next to the dropdown label — replace Bootstrap's triangle with
   a thin chevron-down. */
.hika_toolbar .hkdropdown .caret {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 6px;
	border: 0;
	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='M2 4l4 4 4-4'/></svg>") center / 10px 10px 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='M2 4l4 4 4-4'/></svg>") center / 10px 10px no-repeat;
}
/* Dropdown menu (.hkdropdown-menu) — keep <li> as a passive wrapper with
   no padding/background, and put all chrome on the <a> inside it. The
   anchor is the click target, and `display: block` makes it stretch to
   the full menu width so the hover bg fills the row cleanly with no
   leaking padding strips. */
.hika_toolbar .hkdropdown-menu,
.hkdropdown-menu {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(14, 14, 12, 0.08);
	padding: 0;
	margin: 4px 0 0;
	min-width: 200px;
	list-style: none;
}
.hkdropdown-menu > li {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}
.hkdropdown-menu > li > a,
.hkdropdown-menu a {
	display: block;
	padding: 12px 18px;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.hkdropdown-menu > li > a:hover,
.hkdropdown-menu > li > a:focus,
.hkdropdown-menu a:hover,
.hkdropdown-menu a:focus {
	background: var(--ink) !important;
	color: var(--bone) !important;
	text-decoration: none;
	outline: 0;
}
/* HikaShop's frontend_default.css paints a 2px sky-blue outline on the
   open dropdown's toggle (.hkdropdown.open > a). Override with no
   outline — we already invert the parent .hkdropdown.hikabtn to ink/bone
   on hover, which carries over while the menu is open. */
.hkdropdown.open > a,
.hkdropdown.show > a,
.hkdropdown.open > a:focus,
.hkdropdown.show > a:focus {
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
.hika_toolbar .hkdropdown.hikabtn.open,
.hika_toolbar .hkdropdown.hikabtn.show {
	background: var(--ink) !important;
	color: var(--bone) !important;
	border-color: var(--ink) !important;
}
.hika_toolbar .hkdropdown.hikabtn.open > a,
.hika_toolbar .hkdropdown.hikabtn.show > a {
	color: var(--bone) !important;
}
/* Section dividers / non-clickable header rows in the dropdown */
.hkdropdown-menu .divider,
.hkdropdown-menu .hkdropdown-divider {
	height: 1px;
	margin: 0;
	padding: 0;
	background: var(--line);
	border: 0;
	pointer-events: none;
}
.hkdropdown-menu .hkdropdown-header {
	padding: 10px 18px 6px;
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--mute);
	background: transparent;
	pointer-events: none;
}

/* ─── Order listing filter bar (Search + dropdowns + counter) ────── */
.hikashop_orders_listing_page .hikashop_search_div,
.hikashop_orders_listing_page .hikashop_filter_section {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--line);
}
.hikashop_orders_listing_page input[type="text"],
.hikashop_orders_listing_page input[type="search"],
.hikashop_orders_listing_page select.custom-select {
	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;
	box-shadow: none;
}
.hikashop_orders_listing_page select.custom-select {
	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 14px center;
	background-size: 10px 6px;
	padding-right: 36px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Order count caption ("0 orders done") */
.hikashop_orders_listing_page .hikashop_orders_count,
.hikashop_orders_listing_page .hikashop_listing_total {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
}

/* ─── Address dropdowns (.hikashop_user_default_*_address) ───────── */
.hikashop_user_default_billing_address,
.hikashop_user_default_shipping_address {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	align-items: center;
	margin: 0 0 18px;
	padding: 0;
}
.hikashop_user_default_billing_address > label,
.hikashop_user_default_shipping_address > label,
.hikashop_default_billing_address_label,
.hikashop_default_shipping_address_label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	font-weight: 500;
	margin: 0;
}
.hikashop_user_default_billing_address select,
.hikashop_user_default_shipping_address select {
	width: 100%;
	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;
	box-shadow: none;
}

/* "Billing addresses" / "Shipping addresses" sections */
.hikashop_user_addresses_listing {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 32px;
}
.hikashop_user_addresses_listing > div {
	min-width: 0;
}
.hikashop_user_addresses_listing h3 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	color: var(--ink);
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
	.hikashop_user_addresses_listing { grid-template-columns: 1fr; gap: 24px; }
	.hikashop_user_default_billing_address,
	.hikashop_user_default_shipping_address { grid-template-columns: 1fr; gap: 6px; }
}

/* "+ NEW BILLING ADDRESS" / "+ NEW SHIPPING ADDRESS" buttons —
   already styled by the global .hikabtn rules; just ensure spacing. */
.hikashop_user_addresses_listing .hikabtn,
.hikashop_user_address_listing_buttons .hikabtn {
	margin-top: 12px;
}

/* Empty-state messages ("You do not have any orders", "No address") —
   keep the bone-bg + hairline border treatment in line with messages. */
.hikashop_no_orders,
.hikashop_no_carts,
.hikashop_no_wishlist,
.hikashop_no_address {
	display: block;
	background: var(--bone);
	color: var(--mute);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 24px 28px;
	font-family: var(--sans);
	font-size: 13px;
	font-style: italic;
	margin: 18px 0;
	text-align: center;
}

/* Joomla alerts — the bare <joomla-alert> element doesn't carry a level
   class, the level lives in its `type` attribute (info / success /
   warning / danger). The base rule covers chrome (background, border,
   typography); the per-type rules switch the left accent and any
   level-specific colours. Earlier we coloured *every* joomla-alert
   with the danger left rule, which made info / success messages render
   in red — fixed by scoping danger to its own attribute selector. */
joomla-alert,
.alert {
	display: block;
	background: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-left: 3px solid var(--mute) !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	padding: 16px 20px !important;
	font-family: var(--sans);
	font-size: 13px;
	box-shadow: none !important;
	margin: 0 0 16px;
}
joomla-alert[type="info"],
.alert.alert-info,
.alert-info {
	border-left-color: var(--ink) !important;
}
joomla-alert[type="success"],
.alert.alert-success,
.alert-success {
	border-left-color: var(--ok, #5b6e4c) !important;
}
joomla-alert[type="warning"],
.alert.alert-warning,
.alert-warning {
	border-left-color: var(--gold) !important;
}
joomla-alert[type="danger"],
joomla-alert[type="error"],
.alert.alert-danger,
.alert-danger {
	border-left-color: var(--danger, #8a3a2f) !important;
}
joomla-alert .alert-heading,
.alert .alert-heading {
	display: none;
}
joomla-alert .alert-wrapper,
joomla-alert .alert-message {
	color: inherit;
	background: transparent;
}
joomla-alert .joomla-alert--close,
.alert .btn-close {
	color: var(--mute);
	opacity: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
}
joomla-alert .joomla-alert--close:hover,
.alert .btn-close:hover {
	color: var(--ink);
}

/* ─── vex modal dialogs (vex-theme-default / vex-theme-os) ────────── */
/* HikaShop uses vex.js for confirmation dialogs (delete, leave-page,
   "are you sure?" prompts), iframe popups (login/register, terms,
   contact-vendor) and loading spinners. Both `vex-theme-default` and
   `vex-theme-os` ship with white-and-blue Bootstrap chrome that
   doesn't follow the active preset. Recolour every surface, button
   and input to the template tokens. */

/* Dimmer behind the dialog: deepen on dark presets so the modal is
   isolated from a similarly-dark page. */
.vex .vex-overlay,
.vex.vex-theme-default .vex-overlay,
.vex.vex-theme-os .vex-overlay {
	background: rgba(0, 0, 0, 0.55) !important;
}

/* The modal surface — squared corners, hairline border, paper bg, ink
   text, sans body. The luxury preset's existing `--paper` carries a
   warm cream tone; on the dark presets it is near-black, which gives
   the dialog a moody overlay. */
.vex.vex-theme-default .vex-content,
.vex.vex-theme-os .vex-content {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
	font-family: var(--sans) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	padding: 28px !important;
	max-width: min(560px, calc(100% - 40px));
	width: 560px;
}
/* vex-theme-os has a 20px coloured strip across the top — recolour
   that strip to bone so it reads as a header bar instead of grey. */
.vex.vex-theme-os .vex-content {
	border-top: 20px solid var(--bone) !important;
	box-shadow: inset 0 1px var(--line), 0 16px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Inherit colour for headings / paragraphs / lists inside the dialog. */
.vex.vex-theme-default .vex-content h1,
.vex.vex-theme-default .vex-content h2,
.vex.vex-theme-default .vex-content h3,
.vex.vex-theme-os .vex-content h1,
.vex.vex-theme-os .vex-content h2,
.vex.vex-theme-os .vex-content h3 {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--ink);
	margin-top: 0;
	letter-spacing: -0.005em;
}

/* Close button (×) — top-right of every dialog. */
.vex.vex-theme-default .vex-close,
.vex.vex-theme-os .vex-close {
	border-radius: 0 !important;
}
.vex.vex-theme-default .vex-close::before,
.vex.vex-theme-os .vex-close::before {
	color: var(--mute) !important;
	background: transparent !important;
	border-radius: 0 !important;
	font-size: 22px !important;
	line-height: 28px !important;
	height: 30px !important;
	width: 30px !important;
	top: 6px !important;
	right: 6px !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.vex.vex-theme-default .vex-close:hover::before,
.vex.vex-theme-default .vex-close:active::before,
.vex.vex-theme-os .vex-close:hover::before,
.vex.vex-theme-os .vex-close:active::before {
	background: var(--bone) !important;
	color: var(--ink) !important;
}

/* Form inputs inside the dialog (prompt / confirm). */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input input,
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea,
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input select,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input input,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input select {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 8px 12px !important;
	min-height: 38px !important;
	font-family: var(--sans) !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input input:focus,
.vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input input:focus,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea:focus {
	border-color: var(--ink) !important;
	box-shadow: none !important;
	outline: 0 !important;
}

/* Dialog buttons row: align right, gap between buttons. */
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons,
.vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* Dialog button base (uppercase tracked sans, squared, no animation). */
.vex.vex-theme-default .vex-dialog-button,
.vex.vex-theme-os .vex-dialog-button {
	float: none !important;
	margin: 0 !important;
	padding: 10px 18px !important;
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	font-family: var(--sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vex.vex-theme-default .vex-dialog-button:focus,
.vex.vex-theme-os .vex-dialog-button:focus {
	animation: none !important;
	outline: 2px solid var(--gold) !important;
	outline-offset: 2px;
}
/* Primary button (Confirm / OK) — ink fill. */
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary,
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary:hover,
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary:hover {
	background: var(--gold) !important;
	color: var(--on-gold, var(--paper)) !important;
	border-color: var(--gold) !important;
}
/* Secondary button (Cancel) — paper fill, hairline border. */
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary,
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-secondary {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
}
.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary:hover,
.vex.vex-theme-os .vex-dialog-button.vex-dialog-button-secondary:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border-color: var(--ink) !important;
}
/* The "vex-first" variant (used for one of the secondary buttons in
   some HikaShop confirmations) gets the same secondary treatment. */
.vex.vex-theme-default .vex-dialog-button.vex-first {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
}

/* Loading spinner — replace the white-and-grey ring with an ink ring
   on a paper backdrop, with the gold accent on top. */
.vex-loading-spinner,
.vex-loading-spinner.vex-theme-default,
.vex-loading-spinner.vex-theme-os {
	background: var(--paper) !important;
	border: 0.25em solid var(--line) !important;
	border-top-color: var(--gold) !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	height: 2.4em;
	width: 2.4em;
}

/* Iframe popups (login / register / contact / terms) reuse `vex-content`
   with a child <iframe>. The vex CSS leaves a 20px top margin on the
   iframe — keep it but trim padding inside .vex-content so the iframe
   has more room. */
.vex-content > iframe {
	margin-top: 12px !important;
	width: 100% !important;
	border: 0;
}
.vex.vex-theme-default .vex-content:has(> iframe),
.vex.vex-theme-os .vex-content:has(> iframe) {
	width: 800px;
	max-width: min(800px, calc(100% - 40px));
	padding: 18px !important;
}

/* ─── TinyMCE editor outer chrome (Oxide skin) ────────────────────── */
/* The editor *content* lives in a same-origin iframe themed via
   templates/vessel/css/editor.css. The surrounding chrome (menubar,
   toolbar, status bar, side panels) is rendered in the parent page by
   TinyMCE 6's "oxide" skin and inherits the host CSS. The skin's
   defaults are bright (white surfaces, light-grey hovers) so on dark
   presets the editor frame jars against the page. Recolour every
   surface, button and divider to the template tokens so the editor
   reads as part of the page instead of a foreign widget. */
.tox.tox-tinymce {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink) !important;
}
.tox .tox-editor-header,
.tox .tox-editor-container {
	background: var(--bone) !important;
	border-bottom: 1px solid var(--line) !important;
}
.tox .tox-menubar {
	background: var(--bone) !important;
	border-bottom: 1px solid var(--line) !important;
	padding: 2px 4px !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow {
	background: var(--bone) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: inset 0 -1px 0 var(--line) !important;
}
.tox .tox-toolbar__group {
	border-color: var(--line) !important;
	padding: 3px !important;
}
.tox .tox-toolbar__group:not(:last-of-type) {
	border-right: 1px solid var(--line) !important;
}
.tox .tox-mbtn,
.tox .tox-tbtn,
.tox .tox-tbtn--select {
	background: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--sans) !important;
	box-shadow: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.tox .tox-mbtn:hover,
.tox .tox-mbtn:focus,
.tox .tox-tbtn:hover,
.tox .tox-tbtn:focus {
	background: var(--line) !important;
	color: var(--ink) !important;
}
.tox .tox-mbtn--active,
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
	background: var(--ink) !important;
	color: var(--paper) !important;
}
.tox .tox-tbtn svg,
.tox .tox-mbtn svg,
.tox .tox-icon svg {
	fill: currentColor !important;
}
.tox .tox-mbtn__select-label,
.tox .tox-tbtn__select-label {
	color: inherit !important;
}
.tox .tox-tbtn--disabled,
.tox .tox-mbtn--disabled {
	color: var(--mute) !important;
}
/* Toolbar select / dropdown buttons (Paragraph / System Font / 16px) */
.tox .tox-tbtn--select .tox-tbtn__select-chevron svg,
.tox .tox-mbtn .tox-mbtn__select-chevron svg {
	fill: var(--mute) !important;
}
/* Editor area + status bar */
.tox .tox-edit-area::before { display: none !important; }
.tox .tox-edit-area__iframe {
	background: var(--paper) !important;
}
.tox .tox-statusbar {
	background: var(--bone) !important;
	border-top: 1px solid var(--line) !important;
	color: var(--mute) !important;
	font-family: var(--sans);
	font-size: 11px;
}
.tox .tox-statusbar a,
.tox .tox-statusbar__path-item {
	color: var(--mute) !important;
	text-decoration: none !important;
}
.tox .tox-statusbar a:hover,
.tox .tox-statusbar__path-item:hover {
	color: var(--ink) !important;
}
.tox .tox-statusbar__resize-handle svg {
	fill: var(--mute) !important;
}
/* "Try TinyMCE Premium" promo banner — Oxide hard-codes a white
   background plus a vertical stripe gradient that bleeds across both
   the menubar and the toolbar. Hide it entirely; it adds nothing for
   end-merchants of a HikaShop / HikaMarket store. */
.tox .tox-promotion {
	display: none !important;
}
/* In case a future TinyMCE keeps the slot reserved, neutralise its
   background and stripe so it at least matches the chrome. */
.tox .tox-promotion-link {
	background: transparent !important;
	color: var(--mute) !important;
}
/* Floating menus (Edit > Undo, Format > Headings, etc.) */
.tox .tox-menu,
.tox .tox-collection,
.tox .tox-collection--list,
.tox .tox-collection--toolbar,
.tox .tox-pop {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
.tox .tox-collection__item,
.tox .tox-collection__group .tox-collection__item {
	background: transparent !important;
	color: var(--ink) !important;
	border-radius: 0 !important;
}
.tox .tox-collection__item--active,
.tox .tox-collection__item--enabled,
.tox .tox-collection__item:hover {
	background: var(--bone) !important;
	color: var(--ink) !important;
}
.tox .tox-collection__group {
	border-color: var(--line) !important;
}
.tox .tox-collection__item-label,
.tox .tox-collection__item-accessory {
	color: inherit !important;
}
.tox .tox-collection__item-icon svg,
.tox .tox-collection__item-checkmark svg {
	fill: currentColor !important;
}
/* Dialogs (Insert link, Insert image, etc.) */
.tox .tox-dialog,
.tox .tox-dialog__body,
.tox .tox-dialog__header,
.tox .tox-dialog__footer {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
	border-radius: 0 !important;
}
.tox .tox-dialog__title { color: var(--ink) !important; font-family: var(--serif); font-style: italic; }
.tox .tox-button {
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: 1px solid var(--ink) !important;
	border-radius: 0 !important;
	font-family: var(--sans) !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.tox .tox-button--secondary {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
}
.tox .tox-textfield,
.tox .tox-listbox,
.tox .tox-textarea {
	background: var(--paper) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
}
.tox .tox-label,
.tox .tox-form__group label,
.tox .tox-form__controls-h-stack label {
	color: var(--ink) !important;
	font-family: var(--sans);
}

/* ─── HikaShop's tighter `.hkinput-group` addon variant ──────────── */
/* `.hkinput-group-addon` (no dash before "group") is HikaShop's small
   inline-block input-group addon used for unit indicators next to
   length / width / height / volume / weight inputs (tooltip-wrapped
   icons that sit flush against the input). Different selector from
   `.hk-input-group-text`. Default: light grey #eee with #555 text. */
/* HikaMarket's frontend_default.css ships
   `.hkinput-group { display: inline-block }` at the same specificity
   (0,1,0) and loads later, so the unforced `display: inline-flex` lost
   the cascade tie and the addon kept its inline-block height (22px
   from padding+font) instead of stretching to the input's 38px.
   Chain the class to bump specificity to (0,2,0) and force flex with
   stretch, plus a 38px min-height on the addon so it matches the
   input's natural height regardless of the surrounding layout. */
.hkinput-group.hkinput-group {
	display: inline-flex !important;
	align-items: stretch !important;
	max-width: 100%;
}
.hkinput-group > .hk-control,
.hkinput-group > input,
.hkinput-group > select {
	margin: 0;
	border-radius: 0 !important;
	min-height: 38px;
	box-sizing: border-box;
}
.hkinput-group-addon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 36px;
	min-height: 38px !important;
	padding: 0 12px !important;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--mute) !important;
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	text-align: center;
}
.hkinput-group-addon:first-child {
	border-right: 0 !important;
	border-radius: 0 !important;
}
.hkinput-group-addon:last-child {
	border-left: 0 !important;
	border-radius: 0 !important;
}
.hkinput-group .hk-control:last-child {
	border-radius: 0 !important;
}
.hkinput-group-addon i.fa,
.hkinput-group-addon i.fas,
.hkinput-group-addon i[class*="iconM-"],
.hkinput-group-addon .hk-icon-14 {
	color: var(--mute);
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: help;
}

/* ─── Joomla `<joomla-field-fancy-select>` (Choices.js tags / multi-select) */
/* Joomla 6 uses Choices.js for the article-tags field and similar
   multi-select inputs; HikaShop / HikaMarket reuse it for product
   tags on the vendor product-edit form. The library ships a white-
   and-blue Bootstrap palette by default. Recolour every surface so
   the picker matches the active preset. */
.choices {
	margin: 0;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	position: relative;
}
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-one"] .choices__inner,
.choices__inner {
	background: var(--paper) !important;
	background-color: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 4px 6px !important;
	min-height: 38px;
	color: var(--ink) !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 14px;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: var(--ink) !important;
	box-shadow: none !important;
	outline: 0;
}
/* Selected pills inside the multi-select */
.choices__list--multiple .choices__item {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 2px;
	padding: 3px 8px;
	font-weight: 400;
	line-height: 1.3;
}
.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item.is-highlighted,
.choices__list--multiple .choices__item.is-highlighted {
	background: var(--ink) !important;
	background-color: var(--ink) !important;
	border-color: var(--ink) !important;
	color: var(--paper) !important;
}
/* Pill close button (the × on each tag) */
.choices[data-type*="select-multiple"] .choices__button,
.choices__button {
	border-left: 1px solid var(--line) !important;
	background-image: none !important;
	background-color: transparent !important;
	margin: 0 0 0 6px;
	padding: 0 0 0 8px;
	width: 14px;
	height: 14px;
	color: var(--mute);
	opacity: 1;
	position: relative;
	font-size: 0;
}
.choices[data-type*="select-multiple"] .choices__button::after {
	content: '\00D7';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: inherit;
	line-height: 1;
}
.choices[data-type*="select-multiple"] .choices__button:hover {
	color: var(--ink);
}
.choices[data-type*="select-multiple"] .choices__list--multiple .choices__item.is-highlighted .choices__button {
	color: var(--paper);
	border-left-color: var(--paper);
}
/* Typing input */
.choices__input,
.choices__input--cloned {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--sans);
	font-size: 13px !important;
	padding: 4px 6px !important;
	margin: 0 !important;
	min-height: 28px;
}
.choices__input::placeholder { color: var(--mute) !important; opacity: 1; }
/* Autocomplete dropdown */
.choices__list--dropdown,
.choices__list[aria-expanded] {
	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.18) !important;
	margin-top: 0 !important;
	color: var(--ink);
	z-index: 50;
}
.choices__list--dropdown.is-active,
.choices__list[aria-expanded="true"] {
	display: block;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
	max-height: 280px;
	overflow-y: auto;
	padding: 4px 0;
}
.choices__item--choice {
	padding: 8px 12px !important;
	color: var(--ink) !important;
	background: transparent !important;
	font-size: 13px;
	border-bottom: 1px solid transparent;
}
.choices__item--choice.is-highlighted,
.choices__item--choice:hover {
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	color: var(--ink) !important;
}
.choices__item--choice.is-selected {
	background: var(--ink) !important;
	background-color: var(--ink) !important;
	color: var(--paper) !important;
}
.choices__item--disabled {
	color: var(--mute) !important;
	cursor: not-allowed;
	opacity: 0.6;
}
.choices__group .choices__heading {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute) !important;
	background: var(--bone) !important;
	border-bottom: 1px solid var(--line) !important;
	padding: 6px 12px;
	font-weight: 500;
}
/* "No results match" notice + "Press Enter to add ..." prompt */
.choices__notice,
.choices__item.has-no-choices,
.choices__item.has-no-results {
	color: var(--mute) !important;
	background: transparent !important;
	font-style: italic;
	font-size: 12px;
	padding: 8px 12px !important;
}
/* Hide the default search-results loading spinner ring colour */
.choices__list--dropdown .choices__item--selectable[data-select-text]::after {
	color: var(--mute);
}

/* ─── Bootstrap-5 input groups (.hk-input-group / .input-group) ───── */
/* HikaShop and HikaMarket use Bootstrap-5-style input groups for
   compound form controls (text input + an info-icon addon, prepend /
   append buttons, etc.). The default look pulls Bootstrap chrome
   (rounded corners, shadow, off-white addon fill). Recolour the
   prepend/append surface to bone, match the input's hairline border
   and squared corners so they read as one continuous control. */
/* Force flex layout on the group (overriding HikaShop's
   `display: inline-block`) — chained class for specificity (0,2,0) so
   we beat HikaShop's same-specificity rule in the cascade tie. */
.hk-input-group.hk-input-group,
.input-group.input-group {
	display: inline-flex !important;
	flex-wrap: nowrap;
	align-items: stretch !important;
	max-width: 100%;
}
.hk-input-group > .form-control,
.hk-input-group > .hk-form-control,
.hk-input-group > .form-select,
.hk-input-group > input,
.hk-input-group > select,
.hk-input-group > textarea,
.input-group > .form-control,
.input-group > input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	border-radius: 0 !important;
}
.hk-input-group > .hk-input-group-prepend,
.hk-input-group > .hk-input-group-append,
.input-group > .input-group-prepend,
.input-group > .input-group-append {
	display: inline-flex !important;
	align-items: stretch;
	margin: 0;
}
/* Lock every child of the group to the same minimum height (the
   input's natural height) so the icon addon, the input and the button
   all line up. The button's font-size 11px + line-height 1 + padding
   10/18 was 33px; the icon addon was 31px; without this the row reads
   as three different-height pieces stacked side-by-side. */
.hk-input-group > .hk-input-group-prepend > .hk-input-group-text,
.hk-input-group > .hk-input-group-append > .hk-input-group-text,
.hk-input-group > .hk-input-group-prepend > .hikabtn,
.hk-input-group > .hk-input-group-append > .hikabtn,
.hk-input-group > .hk-form-control,
.hk-input-group > .form-control,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend > .hikabtn,
.input-group > .input-group-append > .hikabtn,
.input-group > .form-control {
	min-height: 38px !important;
	box-sizing: border-box !important;
}
/* And let the button inside an append/prepend stretch to the wrapper's
   height (which itself stretches to the tallest sibling = the input) */
.hk-input-group > .hk-input-group-prepend > .hikabtn,
.hk-input-group > .hk-input-group-append > .hikabtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}
/* Specificity must beat HikaShop's own `.hk-input-group .hk-input-group-text`
   rule (class.class = 0,2,0) which sets `background-color: #eee` and
   `color: #555`. We chain the same class twice plus the parent, so the
   specificity is (0,3,0) and we don't need !important everywhere. */
.hk-input-group .hk-input-group-text,
.hk-input-group.hk-input-group .hk-input-group-text,
.input-group .input-group-text {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 12px !important;
	background: var(--bone) !important;
	background-color: var(--bone) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	color: var(--ink) !important;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
	text-align: center;
}
/* Make the prepend / append wrappers flex too so the inner addon can
   stretch to the input height instead of inline-block sizing. */
.hk-input-group > .hk-input-group-prepend,
.hk-input-group > .hk-input-group-append,
.input-group > .input-group-prepend,
.input-group > .input-group-append {
	display: inline-flex !important;
	align-items: stretch;
	vertical-align: top;
}
/* Stitch the addon hairlines together with the input so there is no
   double-line where they meet. */
.hk-input-group > .hk-input-group-prepend > .hk-input-group-text,
.input-group > .input-group-prepend > .input-group-text {
	border-right: 0 !important;
}
.hk-input-group > .hk-input-group-append > .hk-input-group-text,
.input-group > .input-group-append > .input-group-text {
	border-left: 0 !important;
}
/* Info-icon inside a prepend addon (HikaMarket "Add a user" tooltip). */
.hk-input-group .hk-input-group-text i.fa,
.hk-input-group .hk-input-group-text i.fas,
.hk-input-group .hk-input-group-text i.far,
.hk-input-group .hk-input-group-text i.fab,
.input-group .input-group-text i.fa,
.input-group .input-group-text i.fas {
	color: var(--mute) !important;
	font-size: 13px;
	line-height: 1;
	cursor: help;
}
.hk-input-group .hk-input-group-text i.fa:hover,
.hk-input-group .hk-input-group-text i.fas:hover {
	color: var(--ink) !important;
}

/* ─── Dropzone (file upload area) ─────────────────────────────────── */
/* HikaShop uses Dropzone.js for file uploads (vendor logo, product
   gallery, etc.). The library ships with a sketchy dashed-border look
   and bright blue accent. Rework it to match the editorial palette: a
   bone surface inside a hairline frame, ink CTA text, gold accent on
   active drag. */
.hikashop_dropzone,
.hikashop_dropzone.dropzone,
div.hikashop_dropzone,
.dropzone.hikashop_dropzone {
	background: var(--bone) !important;
	border: 1px dashed var(--line) !important;
	border-radius: 0 !important;
	padding: 28px 20px !important;
	min-height: 140px;
	color: var(--mute) !important;
	font-family: var(--sans);
	font-size: 13px;
	text-align: center;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
	cursor: pointer;
}
.hikashop_dropzone.dz-drag-hover,
.hikashop_dropzone.dragover {
	background: var(--paper) !important;
	border-color: var(--gold) !important;
	color: var(--ink) !important;
}
.hikashop_dropzone .dz-message,
.hikashop_dropzone .dz-default {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}
.hikashop_dropzone .dz-message::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 10px;
	background: var(--ink);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M12 16V4M6 10l6-6 6 6M4 20h16'/></svg>") no-repeat center / contain;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M12 16V4M6 10l6-6 6 6M4 20h16'/></svg>") no-repeat center / contain;
}
.hikashop_dropzone .dz-preview {
	background: var(--paper) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0 !important;
	color: var(--ink);
	padding: 8px;
}
.hikashop_dropzone .dz-progress {
	background: var(--line) !important;
	border-radius: 0 !important;
	height: 4px;
}
.hikashop_dropzone .dz-progress .dz-upload {
	background: var(--ink) !important;
	border-radius: 0 !important;
}
.hikashop_dropzone .dz-error-message {
	background: var(--danger) !important;
	color: var(--paper) !important;
	border-radius: 0 !important;
}
.hikashop_dropzone .dz-success-mark,
.hikashop_dropzone .dz-error-mark { color: var(--ink); }

/* Cpanel page layout — the show.php template renders a 2-col grid:
   left = .hikashop_cpanel_main_interface (sidebar), right = the content.
   Joomla wraps the component in .hikashop_main_div which is a flex/table-
   ish thing. Force a clean grid with proper gap. */
.hikashop_main_div:has(.hikashop_cpanel_main_interface) {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 56px;
	align-items: start;
}
@media (max-width: 900px) {
	.hikashop_main_div:has(.hikashop_cpanel_main_interface) {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ─── Tabular product layout — tabs ────────────────────────────────
   HikaShop's `show_tabular.php` renders the description / specs /
   reviews / fields as click-to-switch tabs. The stock CSS in
   frontend_default.css uses hardcoded #fcfcfc / #E7E7E7 card-style
   tabs with rounded corners and bold text — looks acceptable on a
   paper background but fights every vessel preset (especially the
   dark ones).
   We override with a flat editorial look: thin uppercase labels in
   a horizontal row, hairline bottom border, an ink underline on the
   active tab. !important is needed throughout because HikaShop's
   stock rules ship AFTER vessel CSS in the cascade and use 4-class
   specificity scoped to `.hikashop_product_page`. */

#hikashop_tabs_div {
	margin-top: 40px;
}
.hikashop_product_page .hikashop_tabs_ul,
#hikashop_tabs_div .hikashop_tabs_ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border-bottom: 1px solid var(--line) !important;
	background: transparent !important;
}
.hikashop_product_page .hikashop_tabs_ul li.hikashop_tabs_li,
#hikashop_tabs_div .hikashop_tabs_ul li.hikashop_tabs_li {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 14px 22px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-bottom: 1px solid transparent !important;
	margin-bottom: -1px !important; /* overlap parent border so the active underline replaces it cleanly */
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
	z-index: 1;
}
.hikashop_product_page .hikashop_tabs_ul li.hikashop_tabs_li:first-child,
#hikashop_tabs_div .hikashop_tabs_ul li.hikashop_tabs_li:first-child {
	padding-left: 0 !important;
}
.hikashop_product_page .hikashop_tabs_ul li.hikashop_tabs_li:hover,
#hikashop_tabs_div .hikashop_tabs_ul li.hikashop_tabs_li:hover {
	color: var(--ink) !important;
	background: transparent !important;
}
.hikashop_product_page .hikashop_tabs_ul li.hikashop_tabs_li_selected,
#hikashop_tabs_div .hikashop_tabs_ul li.hikashop_tabs_li_selected {
	color: var(--ink) !important;
	background: transparent !important;
	border-bottom-color: var(--ink) !important;
}

/* Tab content panel — drop the card-style border, just airy padding */
.hikashop_product_page .hikashop_tabs_content,
#hikashop_tabs_div .hikashop_tabs_content {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 32px 0 0 !important;
	min-height: 0 !important;
	color: var(--ink);
}

/* Mobile — let tabs wrap and shrink padding */
@media (max-width: 600px) {
	.hikashop_product_page .hikashop_tabs_ul li.hikashop_tabs_li,
	#hikashop_tabs_div .hikashop_tabs_ul li.hikashop_tabs_li {
		padding: 12px 14px !important;
		font-size: 10px;
		letter-spacing: 0.14em;
	}
}

/* ── Product downloads area ──────────────────────────────────────────
   HikaShop emits the downloadable-files block as a bare
   <fieldset><legend> + plain link. Vessel hadn't themed it; render it
   as a quiet card with a serif heading and a pill download button.
   Scoped on .hikashop_product_page so it themes any product layout
   (Vessel's default or a site override). */
.hikashop_product_page .hikashop_product_files_main {
	margin: 36px 0 0;
}
.hikashop_product_page .hikashop_product_files_fieldset {
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bone);
}
.hikashop_product_page .hikashop_product_files_fieldset > legend {
	float: none;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
}
.hikashop_product_page a.hikashop_product_file_link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper) !important;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background .2s ease, transform .15s ease;
}
.hikashop_product_page a.hikashop_product_file_link::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.hikashop_product_page a.hikashop_product_file_link:hover {
	background: var(--gold);
	transform: translateY(-1px);
}