/* Symvolico 2026 - the skin's own stylesheet.
 *
 * All Symvolico styling lives here as ordinary CSS. Colors come from CSS
 * variables that custom_overrides.html bridges from the active scheme
 * (schemes/symvolico-2026.conf), so retheming stays a scheme edit; every
 * var() carries the Symvolico value as fallback so this file also works
 * standalone. !important appears only where the base stylesheets use it
 * (button classes, position backgrounds, bootstrap display utilities). */

/* ---------- Header band ---------- */

/* One slate for the whole header; the first row repeats it (solid, because a
   fixed floating topbar must be opaque). */
/* Only the SITE header (the one holding the header rows) wears the band -
   content <header> elements (ratings cards, info bars) keep their own look. */
header:has(.header-row-1) {
	background-color: var(--sym-header, #232323);
}
header .header-row-1 {
	background-color: var(--sym-header, #232323);
	align-items: center;
}
/* Each first-row position centers its content on the row's vertical axis. */
#position_logo > .position-wrapper {
	align-items: center;
	display: flex;
	justify-content: flex-start;
}
#position_over_top_bar > .position-wrapper {
	align-items: center;
	display: flex;
	justify-content: flex-end;
}
#position_over_top_bar .module {
	width: auto !important;
}
#position_international > .position-wrapper {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: flex-end;
}

/* Text and icons directly on the slate are light; dropdown panels, search
   fields and select widgets open on light surfaces and go back to dark. */
header:has(.header-row-1),
header:has(.header-row-1) a,
header:has(.header-row-1) i {
	color: var(--sym-white, #ffffff);
}
header:has(.header-row-1) a:hover,
header:has(.header-row-1) a:hover i {
	color: var(--sym-coral, #42a5f5);
}
header:has(.header-row-1) .dropdown-menu,
header:has(.header-row-1) .dropdown-menu a,
header:has(.header-row-1) .dropdown-menu i,
header:has(.header-row-1) .dropdown-menu span {
	color: var(--sym-menu2, #616161);
}
header:has(.header-row-1) .dropdown-menu a:hover,
header:has(.header-row-1) .dropdown-menu a:hover i {
	color: var(--sym-primary, #d0adb3);
}
header:has(.header-row-1) input,
header:has(.header-row-1) input.search,
header:has(.header-row-1) .select2-container,
header:has(.header-row-1) .select2-selection__rendered,
header:has(.header-row-1) .live_search_section_header {
	color: var(--sym-text, #535353);
}

/* The mini-cart's action bar is a filled blue strip; the dropdown rule above
   must not paint its links gray-on-blue. */
#position_cart .cart-dropdown .dropdown-menu .action-btns a,
#position_cart .cart-dropdown .dropdown-menu .action-btns a i,
#position_cart .cart-dropdown .dropdown-menu .action-btns a span {
	color: var(--sym-white, #ffffff) !important;
}
/* The cart toggle is a white pill (its background is !important upstream). */
#position_cart .cart-dropdown > a i,
#position_cart .cart-dropdown > a .cart-caption {
	color: var(--sym-primary, #d0adb3) !important;
}

/* Logo stays on its mark. */
#position_logo,
#position_logo .module,
#position_logo .logo,
#position_logo .slogan {
	text-align: left !important;
}

/* The menu never wraps; the invisible vendor bar must not claim a width slot. */
#position_over_top_bar .box_topbar .nav {
	flex-wrap: nowrap;
	justify-content: flex-end;
}

/* Category bar: the slate-to-blue fill on hover is the Symvolico signature. */
.box_category_bar .nav > li > a:hover,
.box_category_bar .nav > li.active > a {
	background-color: var(--sym-primary, #d0adb3);
	color: var(--sym-white, #ffffff);
}

/* Row 1 right side: headerbar wears the category-bar slate; its modules sit
   inline, centered, auto-width. */
#position_headerbar {
	background-color: var(--sym-category-bg, #232323) !important;
}
#position_headerbar > .position-wrapper {
	align-items: center;
	display: flex;
	gap: 14px;
	height: 100%;
	justify-content: flex-end;
}
#position_headerbar .module {
	width: auto !important;
}

/* Become a Seller: the one recruitment CTA, coral like the hero search. */
#position_headerbar .box_become_vendor a {
	background-color: var(--sym-coral, #42a5f5) !important;
	border: none !important;
	border-radius: 4px;
	color: var(--sym-white, #ffffff) !important;
	display: inline-block;
	font-weight: 600;
	padding: 9px 16px;
	white-space: nowrap;
}
#position_headerbar .box_become_vendor a span {
	color: var(--sym-white, #ffffff) !important;
}
#position_headerbar .box_become_vendor a:hover {
	background-color: var(--sym-primary, #d0adb3) !important;
}

/* ---------- Breadcrumb ---------- */

/* One ink strip (the footer's ink), chips dissolved into it; the base
   hardcodes #222 chips which fought the scheme's ink. */
.breadcrumb.breadcrumb_buttons {
	background-color: var(--sym-ink, #2f2f2f);
}
.breadcrumb.breadcrumb_buttons span {
	background-color: transparent;
}
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
	color: var(--sym-white, #ffffff);
}
.breadcrumb a:hover,
.breadcrumb.breadcrumb_buttons a:hover {
	color: var(--sym-coral, #42a5f5) !important;
}

/* ---------- Hero (canvas search) ---------- */

/* The module expects a background image from its content; the gradient makes
   it intentional without one, and an image still covers it. */

/* ------------------------------------------------------------------ */
/* The canvas hero below is the master's treatment for an EMPTY canvas:
   the platform ships this band as a 600px white void when no image is
   configured, so it gets a gradient, hidden icon blocks and calm fields.
   A shop that HAS a background photo wants none of that - it wants its
   own hero, which is what the original renders. So every rule here is
   qualified with :not(:has(.background)) and simply stops applying the
   moment a photo is present. Browsers without :has() drop the selector,
   which lands on the same answer: the native hero. (1 Sep 2026, after
   the spondi hero came back looking like the master instead of Spondi.) */
/* ------------------------------------------------------------------ */
.box_geo_location_canvas_search_bar:not(:has(.background)) {
	background-color: var(--sym-header, #232323);
	background-image: linear-gradient(135deg, var(--sym-deep, #050505) 0%, var(--sym-header, #232323) 55%, var(--sym-primary, #d0adb3) 100%);
}
.box_geo_location_canvas_search_bar:not(:has(.background)) h2.header,
.box_geo_location_canvas_search_bar:not(:has(.background)) h2.header span {
	color: var(--sym-white, #ffffff) !important;
}
/* The legacy 70px icon blocks collapse into slivers on the gradient; the
   labels already name the fields. Bootstrap's d-sm-flex is !important. */
.box_geo_location_canvas_search_bar:not(:has(.background)) .inputs-container .icon {
	display: none !important;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .inputs-container {
	align-items: flex-end;
	gap: 14px;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .input-field {
	background: transparent;
	padding: 0;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .input-field label {
	color: var(--sym-white, #ffffff);
	margin-bottom: 6px;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .input-field .form-control {
	border-radius: 4px;
	height: 40px;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .search-btn {
	align-self: flex-end;
	background-color: var(--sym-coral, #42a5f5) !important;
	border-radius: 4px;
	color: var(--sym-white, #ffffff) !important;
	height: 40px;
	padding: 0 22px;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .search-btn:hover {
	background-color: var(--sym-primary, #d0adb3) !important;
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a,
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a span,
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a i {
	color: var(--sym-overtop-text, #d2d2d2);
}
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a:hover,
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a:hover span,
.box_geo_location_canvas_search_bar:not(:has(.background)) .actions a:hover i {
	color: var(--sym-white, #ffffff);
}

/* ---------- Content bands ---------- */

/* Section headings carry the top breathing room, so heading-less full-bleed
   bands (the hero) stay flush against the header. */
main h2.header {
	margin-top: 30px;
}

/* Catalog cards: soft lift instead of borders. Catalog pages use .product,
   the homepage thumb views use .product-card. */
.catalog-view .product,
.product-card.card {
	box-shadow: 0 1px 3px color-mix(in srgb, var(--sym-deep, #050505) 10%, transparent);
	transition: box-shadow 0.18s ease;
}
.catalog-view .product:hover,
.product-card.card:hover {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sym-deep, #050505) 16%, transparent);
}

/* Home category tiles: incomplete rows center instead of piling left; the
   name overlay wears the slate. */
.box_home_categories .module-body .row {
	justify-content: center;
}
.box_home_categories .card-img-overlay {
	background-color: var(--sym-header, #232323);
	background-color: color-mix(in srgb, var(--sym-header, #232323) 85%, transparent);
	text-align: center;
}
.box_home_categories .card-img-overlay .card-title {
	color: var(--sym-white, #ffffff);
	font-size: 15px;
}

/* Subscribe band: white-outline inputs assume a colored band, so the submit
   button is filled white to hold contrast on any band color. */
.box_subscribe input[type="submit"],
.box_subscribe input.btn-primary {
	background-color: var(--sym-input-bg, #ffffff) !important;
	border: 1px solid var(--sym-input-bg, #ffffff) !important;
	color: var(--sym-primary, #d0adb3) !important;
}
.box_subscribe input[type="submit"]:hover,
.box_subscribe input.btn-primary:hover {
	background-color: var(--sym-coral, #42a5f5) !important;
	border-color: var(--sym-coral, #42a5f5) !important;
	color: var(--sym-white, #ffffff) !important;
}

/* An AdSense box with nothing configured renders as a bare white frame. */
.box_adsense:not(:has(img, iframe, ins, a)) {
	display: none;
}

/* ---------- Vendor pages ---------- */

/* The vendor nav strip shipped with zero spacing between its links. */
.box_vendor_nav_bar .nav > li > a {
	color: var(--sym-white, #ffffff);
	display: block;
	padding: 10px 14px;
}
.box_vendor_nav_bar .nav > li > a:hover,
.box_vendor_nav_bar .nav > li > a.active {
	background-color: var(--sym-primary, #d0adb3);
	color: var(--sym-white, #ffffff);
}

/* The vendor identity band: brand gradient, breathing room, white name.
   !important on the text colors because the scheme-styles layer loads after
   this sheet and paints headings in link blue. */
.vendor-home .info > header {
	background-color: var(--sym-header, #232323);
	background-image: linear-gradient(135deg, var(--sym-deep, #050505) 0%, var(--sym-header, #232323) 60%, var(--sym-primary, #d0adb3) 100%);
	border-radius: 4px;
	padding: 22px 24px;
}
.vendor-home .info > header h1,
.vendor-home .info > header h1 a,
.vendor-home .info > header h2 {
	color: var(--sym-white, #ffffff) !important;
	margin-bottom: 6px;
}
.vendor-home .info > header span {
	color: var(--sym-overtop-text, #d2d2d2);
}
.vendor-home .info > header .buttons {
	margin-top: 16px;
}
/* The Follow action reads crisp as a filled white pill on the gradient. */
.vendor-home .info > header .buttons a.btn-primary {
	background-color: var(--sym-input-bg, #ffffff) !important;
	border-radius: 4px;
	color: var(--sym-primary, #d0adb3) !important;
}
.vendor-home .info > header .buttons a.btn-primary:hover {
	background-color: var(--sym-coral, #42a5f5) !important;
	color: var(--sym-white, #ffffff) !important;
}
.vendor-home .info > header .buttons a.btn-primary span {
	color: inherit !important;
}

/* ---------- Standards floor (audited 28 Aug 2026) ---------- */

/* Keyboard focus is visible everywhere; the base kills Bootstrap's focus ring
   and nav focus backgrounds, but an outline is untouched by either. Mouse
   clicks show nothing - :focus-visible fires for keyboard interaction only. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--sym-coral, #42a5f5);
	outline-offset: 2px;
}

/* Motion respects the OS setting. Scoped to this skin's own movers rather
   than a blanket *, because the sidebar slide relies on transitionend. */
@media (prefers-reduced-motion: reduce) {
	.catalog-view .product,
	.product-card.card,
	.carousel-item {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Skip link for keyboard and screen reader users; targets #innerbody. */
.skip-link {
	background: var(--sym-ink, #2f2f2f);
	border-radius: 0 0 4px 0;
	color: var(--sym-white, #ffffff);
	left: 0;
	padding: 10px 18px;
	position: absolute;
	top: -100px;
	z-index: 10000;
}
.skip-link:focus {
	color: var(--sym-white, #ffffff);
	top: 0;
}

/* The platform toggles empty module bodies with .hide-module, but no
   stylesheet ever defined it - "hidden" empty modules rendered anyway. */
.hide-module {
	display: none !important;
}

/* Font Awesome is now self-hosted (4.5). Two glyph shims: question-circle-o
   arrived in 4.6 (aliased to the filled variant), and fa-move never existed
   in FA4 at all (it always meant fa-arrows). */
.fa-question-circle-o:before {
	content: "\f059";
}
.fa-move:before {
	content: "\f047";
}

/* ---------- Promotions ---------- */

/* Coupons wore the breadcrumb ink through a reused scheme key; they now wear
   the brand gradient (the hero's), and the promo code reads as a ticket chip.
   !important because the scheme-styles layer loads after this sheet. */
.promotions .coupon .header .bg-fade {
	background-color: var(--sym-header, #232323) !important;
	background-image: linear-gradient(135deg, var(--sym-deep, #050505) 0%, var(--sym-header, #232323) 55%, var(--sym-primary, #d0adb3) 100%);
}
.promotions .coupon .details .stitch h4:last-child {
	border: 1px dashed var(--sym-coral, #42a5f5);
	border-radius: 4px;
	color: var(--sym-coral, #42a5f5);
	display: inline-block;
	letter-spacing: 0.08em;
	padding: 4px 16px;
}

/* ---------- Modern form floor ---------- */

/* Every text control on the storefront shares one calm shape: 42px line,
   4px radius, quiet border, primary focus. Scoped to main so the header
   search (40px by design) and admin chrome stay untouched. */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="tel"],
main input[type="number"],
main input[type="search"],
main input[type="url"],
main select,
main textarea {
	background-color: var(--sym-input-bg, #ffffff);
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	color: var(--sym-text, #535353);
	min-height: 42px;
	padding: 8px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
main textarea {
	min-height: 110px;
}
main input:focus,
main select:focus,
main textarea:focus {
	border-color: var(--sym-primary, #d0adb3);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sym-primary, #d0adb3) 18%, transparent);
	outline: none;
}
main ::placeholder {
	color: #9a9a9a;
	opacity: 1;
}

/* Native selects get the modern chevron; the platform's widget selects
   (select2/chosen) keep their own arrow. */
main select:not(.select-chosen):not(.select-styled) {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23535353' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	padding-right: 34px;
}

/* Checks, radios and range sliders adopt the brand with one property. */
main input[type="checkbox"],
main input[type="radio"],
main input[type="range"] {
	accent-color: var(--sym-primary, #d0adb3);
	min-height: 0;
}

/* Labels: palette ink, clear of the control, never flush. */
main form label,
main fieldset label {
	color: var(--sym-label, #3c4349);
	margin-bottom: 4px;
}
main fieldset {
	border: none;
	padding: 0;
}
main form h3,
main fieldset legend {
	color: var(--sym-label, #3c4349);
}

/* The platform's widget selects align to the same 42px line. */
main .select2-container .select2-selection--single,
main .chosen-container .chosen-single {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	min-height: 42px;
}

/* ---------- Checkout ---------- */

/* The step rail: completed and current steps wear the brand, upcoming steps
   stay quiet, labels take the palette ink. */
.stepper-item .step-counter {
	align-items: center;
	border-radius: 50%;
	color: var(--sym-white, #ffffff);
	display: flex;
	font-weight: 600;
	height: 38px;
	justify-content: center;
	width: 38px;
}
.stepper-item.active .step-counter,
.stepper-item.completed .step-counter {
	background-color: var(--sym-primary, #d0adb3);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sym-primary, #d0adb3) 15%, transparent);
}
.stepper-item:not(.active):not(.completed) .step-counter {
	background-color: #e2e6ea;
	color: #757575;
}
.stepper-item .step-name {
	color: var(--sym-label, #3c4349);
}

/* The address-choice cards: the selected one fills with the brand, the
   unselected one sits quiet - state readable at a glance, colors matched. */
main .card:has(.card-header .form-check-input[name="shipping_address_id"]) {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	overflow: hidden;
}
main .card:has(.card-header .form-check-input[name="shipping_address_id"]) > .card-header {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 7%, #ffffff);
	border: none;
	padding: 12px 16px;
}
main .card:has(.card-header .form-check-input[name="shipping_address_id"]:checked) > .card-header {
	background-color: var(--sym-primary, #d0adb3);
}
main .card:has(.card-header .form-check-input[name="shipping_address_id"]:checked) > .card-header .form-check-label {
	color: var(--sym-white, #ffffff) !important;
	font-weight: 600;
}
main .card .card-header .form-check-label {
	color: var(--sym-label, #3c4349);
	margin-bottom: 0;
}

/* ---------- Review & Payment (invoice) ---------- */

/* Section cards: quiet headers with a slim brand accent replace the heavy
   filled bars - one voice on the page, and it belongs to the content. */
.invoice .card {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
}
.invoice .card-header {
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--sym-input-border, #d9d9d9);
	border-left: 3px solid var(--sym-primary, #d0adb3);
	padding: 12px 16px;
}
.invoice .card-header h3 {
	color: var(--sym-label, #3c4349) !important;
	font-size: 16px;
	margin: 0;
}

/* Tables: hairline row separation instead of gray striping, cells centered
   on their row, money in tabular figures. */
.invoice .table {
	--bs-table-accent-bg: transparent;
	--bs-table-striped-bg: transparent;
}
.invoice .table > :not(caption) > * > * {
	background-color: transparent !important;
	border-bottom: 1px solid #ececec;
	box-shadow: none;
	padding: 12px 10px;
	vertical-align: middle;
}
.invoice .table-hover > tbody > tr:hover > * {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 5%, transparent) !important;
}
.invoice .table td:last-child {
	font-variant-numeric: tabular-nums;
}

/* The money CTA: the one coral action on the page, sized like it matters. */
.invoice input[id^="btnPurchase"] {
	background-color: var(--sym-coral, #42a5f5) !important;
	border: none !important;
	border-radius: 4px;
	color: var(--sym-white, #ffffff) !important;
	font-size: 16px;
	font-weight: 600;
	min-height: 46px;
	padding: 10px 28px;
}
.invoice input[id^="btnPurchase"]:hover {
	background-color: var(--sym-primary, #d0adb3) !important;
}

/* ---------- Shipping method (checkout step 2) ---------- */

/* The page is a stack of bare cards; give them one composed rhythm. */
form[name="frmBillingShippingMethod"] .card {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
}
form[name="frmBillingShippingMethod"] .card-body {
	padding: 18px 20px;
}

/* The total: a summary line, label in ink and the amount in brand blue. */
form[name="frmBillingShippingMethod"] h3.catalog-price {
	color: var(--sym-label, #3c4349);
	font-size: 17px;
	margin: 0;
}
form[name="frmBillingShippingMethod"] h3.catalog-price + p,
form[name="frmBillingShippingMethod"] .card-body > p > i,
form[name="frmBillingShippingMethod"] .card-body > i {
	color: #8a8a8a;
	font-size: 13px;
}

/* Per-vendor lines: ink headline, and the method name reads as a quiet chip
   instead of floating italics. */
form[name="frmBillingShippingMethod"] .card-body h4 {
	color: var(--sym-label, #3c4349);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}
form[name="frmBillingShippingMethod"] .card-body > i,
form[name="frmBillingShippingMethod"] .card-body h4 ~ i {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 8%, #ffffff);
	border-radius: 3px;
	color: var(--sym-label, #3c4349);
	display: inline-block;
	font-style: normal;
	margin-top: 10px;
	padding: 4px 10px;
}

/* Continue: the step's one action, sized to carry the funnel forward. */
form[name="frmBillingShippingMethod"] fieldset input[type="submit"],
form[name="frmBillingShippingMethod"] fieldset input.btn-primary {
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	min-height: 46px;
	padding: 10px 30px;
}

/* ---------- Manufacturers strip (homepage custom box) ---------- */

/* The brand-logo band from the old shop: centered, evenly spaced, muted until
   hovered. Targeted via the class_suffix the arrangement patch assigns. */
.manufacturers-strip .module-body p {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	justify-content: center;
	margin: 0;
	padding: 10px 0;
}
.manufacturers-strip .module-body img {
	filter: grayscale(1);
	max-height: 44px;
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.manufacturers-strip .module-body a:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------- Icon banners (USP band) ---------- */

/* The base paints each title as a full blue bar. A USP band should whisper:
   tinted icon medallions, ink titles, muted subtitles. !important where the
   scheme layer (loading later) and bootstrap font utilities are contested. */
.module.box_icon_banners .module-body h3 {
	background-color: transparent !important;
	color: var(--sym-label, #3c4349) !important;
	font-size: 17px !important;
	font-weight: 600;
	margin: 14px 0 2px;
	padding: 0;
}
.box_icon_banners .module-body p {
	color: #8a8a8a;
	font-size: 14px !important;
	margin: 0;
}
.box_icon_banners .module-body i {
	align-items: center;
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 10%, #ffffff);
	border-radius: 50%;
	color: var(--sym-primary, #d0adb3) !important;
	display: inline-flex;
	font-size: 26px !important;
	height: 64px;
	justify-content: center;
	width: 64px;
}
.box_icon_banners .module-body .row > div {
	padding-bottom: 26px;
	padding-top: 26px;
}

/* ---------- Blog empty state ---------- */

/* "No blog posts" wore a full-width tan alert bar; an empty state should be
   an invitation, not an alarm. Scoped to the module - real warnings elsewhere
   keep their tan. */
.module.box_blog_news .alert-warning {
	background-color: transparent !important;
	border: 1px dashed var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	color: #8a8a8a !important;
	text-align: center;
}

/* ---------- Robotonational selector ---------- */

/* Language and currency as ghost pills on the slate, with pure-SVG flags -
   no image files, works on any install. Unknown languages fall back to a
   neutral globe disc. */
.box_international .sym-intl > a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	display: inline-flex;
	gap: 8px;
	padding: 5px 12px;
	white-space: nowrap;
}
.box_international .sym-intl > a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--sym-white, #ffffff);
}
.box_international .dropdown-menu {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 6px;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--sym-deep, #050505) 18%, transparent);
	min-width: 170px;
	padding: 6px 0;
}
.box_international .dropdown-menu a {
	align-items: center;
	display: flex;
	gap: 10px;
	padding: 8px 14px;
}
.box_international .dropdown-menu a:hover {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 8%, #ffffff);
}

.sym-flag {
	background: linear-gradient(135deg, #7ea9c9 0%, #4a7ba6 100%);
	background-size: cover;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
	display: inline-block;
	flex: none;
	height: 14px;
	width: 20px;
}
.sym-flag-en, .sym-flag-gb {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23012169'/%3E%3Cpath d='M0 0l60 42M60 0L0 42' stroke='%23fff' stroke-width='8'/%3E%3Cpath d='M0 0l60 42M60 0L0 42' stroke='%23C8102E' stroke-width='3.5'/%3E%3Cpath d='M30 0v42M0 21h60' stroke='%23fff' stroke-width='13'/%3E%3Cpath d='M30 0v42M0 21h60' stroke='%23C8102E' stroke-width='7'/%3E%3C/svg%3E");
}
.sym-flag-us {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23fff'/%3E%3Cpath d='M0 3h60M0 9h60M0 15h60M0 21h60M0 27h60M0 33h60M0 39h60' stroke='%23B22234' stroke-width='4'/%3E%3Crect width='26' height='21' fill='%233C3B6E'/%3E%3C/svg%3E");
}
.sym-flag-de {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='14' fill='%23000'/%3E%3Crect y='14' width='60' height='14' fill='%23DD0000'/%3E%3Crect y='28' width='60' height='14' fill='%23FFCE00'/%3E%3C/svg%3E");
}
.sym-flag-el, .sym-flag-gr {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%230D5EAF'/%3E%3Cpath d='M0 7h60M0 16.4h60M0 25.8h60M0 35.2h60' stroke='%23fff' stroke-width='4.6'/%3E%3Crect width='23' height='23' fill='%230D5EAF'/%3E%3Cpath d='M11.5 0v23M0 11.5h23' stroke='%23fff' stroke-width='4.6'/%3E%3C/svg%3E");
}
.sym-flag-fr {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='20' height='42' fill='%23002395'/%3E%3Crect x='20' width='20' height='42' fill='%23fff'/%3E%3Crect x='40' width='20' height='42' fill='%23ED2939'/%3E%3C/svg%3E");
}
.sym-flag-es {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='42' fill='%23AA151B'/%3E%3Crect y='10.5' width='60' height='21' fill='%23F1BF00'/%3E%3C/svg%3E");
}
.sym-flag-it {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='20' height='42' fill='%23009246'/%3E%3Crect x='20' width='20' height='42' fill='%23fff'/%3E%3Crect x='40' width='20' height='42' fill='%23CE2B37'/%3E%3C/svg%3E");
}
.sym-flag-ru {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'%3E%3Crect width='60' height='14' fill='%23fff'/%3E%3Crect y='14' width='60' height='14' fill='%230039A6'/%3E%3Crect y='28' width='60' height='14' fill='%23D52B1E'/%3E%3C/svg%3E");
}

.sym-currency {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	display: inline-flex;
	flex: none;
	font-size: 11px;
	font-weight: 600;
	height: 20px;
	justify-content: center;
	width: 20px;
}
.box_international .dropdown-menu .sym-currency {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 12%, #ffffff);
	color: var(--sym-primary, #d0adb3);
}

/* ---------- Account beside the language (top row right) ---------- */

/* The international position hosts Account + language as a matched pill
   pair; modules shrink to content and sit on one line. */
#position_international .module {
	width: auto !important;
}
#position_international > .position-wrapper {
	gap: 10px;
}
#position_international .box_profile_bar .dropdown > a,
#position_international .box_profile_bar > .module-body > a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	display: inline-flex;
	gap: 8px;
	padding: 5px 12px;
	white-space: nowrap;
}
#position_international .box_profile_bar .dropdown > a:hover,
#position_international .box_profile_bar > .module-body > a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--sym-white, #ffffff);
}

/* ---------- Mini-cart dropdown ---------- */

/* The panel collapsed to its shrunken anchor after the module moved; it now
   owns its width, hangs from the right edge, and lays items out as rows. */
.box_cart_bar .cart-dropdown .dropdown-menu {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 6px;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--sym-deep, #050505) 20%, transparent);
	left: auto !important;
	min-width: 340px;
	padding: 14px;
	right: 0;
}
.box_cart_bar .cart-dropdown .dropdown-menu ul {
	margin: 0;
	padding: 0;
}
.box_cart_bar .cart-dropdown .dropdown-menu li {
	align-items: center;
	border-bottom: 1px solid #ececec;
	display: flex;
	gap: 10px;
	padding: 10px 0;
}
.box_cart_bar .cart-dropdown .dropdown-menu li .close {
	flex: none;
	margin-left: auto;
	order: 2;
}
.box_cart_bar .cart-dropdown .dropdown-menu li a.product {
	flex: 1;
	min-width: 0;
}
.box_cart_bar .cart-dropdown .dropdown-menu li img {
	border-radius: 4px;
	max-width: 48px;
}
.box_cart_bar .cart-dropdown .dropdown-menu .subtotal {
	display: flex;
	font-weight: 600;
	justify-content: space-between;
	padding: 12px 0;
}
.box_cart_bar .cart-dropdown .dropdown-menu .action-btns {
	display: flex;
	gap: 8px;
}
/* Both buttons live inside the form, so the form itself must flex and
   stretch for them to share the row. */
.box_cart_bar .cart-dropdown .dropdown-menu .action-btns form {
	display: flex;
	flex: 1;
	gap: 8px;
}
.box_cart_bar .cart-dropdown .dropdown-menu .action-btns a {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
}
.box_cart_bar .cart-dropdown .dropdown-menu .action-btns a {
	border-radius: 4px;
	flex: 1;
	justify-content: center;
	padding: 10px 0;
	text-align: center;
}

/* ---------- Blog news cards ---------- */

/* The blog cards join the product-card family: same soft lift, quiet meta
   line, tag footer as a subtle strip with palette links. */
.box_blog_news .card {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--sym-deep, #050505) 10%, transparent);
	transition: box-shadow 0.18s ease;
}
.box_blog_news .card:hover {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sym-deep, #050505) 16%, transparent);
}
.box_blog_news .card-title {
	font-size: 18px;
	margin-bottom: 4px;
}
.box_blog_news .card-body > .card-text:first-of-type {
	color: #8a8a8a;
	font-size: 12.5px;
	margin-bottom: 10px;
}
.box_blog_news .card-body > .card-text + .card-text {
	line-height: 1.65;
}
.box_blog_news .card-footer {
	background-color: #fafafa;
	border-top: 1px solid #ececec;
	font-size: 13px;
}
.box_blog_news .card-footer .blog_post_footer_product_tag {
	color: var(--sym-primary, #d0adb3);
	font-weight: 600;
}
.box_blog_news .card-footer .blog_post_footer_product_tag:hover {
	color: var(--sym-coral, #42a5f5);
}

/* ---------- Price range slider ---------- */

/* The chunky bar becomes a slim brand rail: hairline track, primary segment,
   ringed grab handles, and a composed readout above. */
.box_price_range_slider .current_range {
	color: #8a8a8a;
	display: block;
	font-size: 12.5px;
	margin-bottom: 14px;
}
.box_price_range_slider .current_range span {
	color: var(--sym-label, #3c4349);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.box_price_range_slider .current_range a,
.box_price_range_slider .current_range i {
	color: #b5b5b5;
}
.box_price_range_slider .current_range a:hover,
.box_price_range_slider .current_range a:hover i {
	color: var(--sym-coral, #42a5f5);
}
.box_price_range_slider .noUi-target {
	background: #e8e8e8;
	border: none;
	border-radius: 999px;
	box-shadow: none;
}
.box_price_range_slider .noUi-horizontal {
	height: 5px;
}
.box_price_range_slider .noUi-connect {
	background: var(--sym-primary, #d0adb3);
	box-shadow: none;
}
.box_price_range_slider .noUi-horizontal .noUi-handle {
	background: #ffffff;
	border: 2px solid var(--sym-primary, #d0adb3);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: grab;
	height: 18px;
	top: -7px;
	width: 18px;
}
.box_price_range_slider .noUi-handle::before,
.box_price_range_slider .noUi-handle::after {
	display: none;
}
.box_price_range_slider .noUi-handle:active {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--sym-primary, #d0adb3) 18%, transparent);
	cursor: grabbing;
}

/* =====================================================================
   PRODUCT PAGE DESIGN SYSTEM - shared across all eight product styles.
   Every style composes the same blocks; this system gives the blocks one
   premium language, then the per-style patches below add each layout's
   personality. Buttons carry !important because the preset layer does.
   ===================================================================== */

/* --- The stage: image and gallery --- */
.product-view .product-options img {
	border: 1px solid var(--sym-input-border, #d9d9d9);
	border-radius: 6px;
}

/* --- Identity: title, rating, quick actions --- */
.product-view h1 {
	color: var(--sym-label, #3c4349);
	letter-spacing: -0.01em;
}
.product-view .tool-tip i {
	color: #9a9a9a;
	transition: color 0.15s ease;
}
.product-view .tool-tip:hover i {
	color: var(--sym-coral, #42a5f5);
}

/* --- The price speaks once, and clearly --- */
.product-view .price {
	margin: 14px 0;
}
.product-view .price .catalog-price,
.product-view .catalog-price {
	color: var(--sym-primary, #d0adb3);
	font-weight: 700;
}
.product-view .price .catalog-price {
	font-size: 30px;
}
.product-view .strike {
	color: #a9a9a9;
	font-weight: 400;
}

/* --- Properties: a calm ledger --- */
.product-view .table > :not(caption) > * > * {
	background-color: transparent;
	border-bottom: 1px solid #ececec;
	box-shadow: none;
	padding: 10px 8px;
	vertical-align: middle;
}
.product-view .table td:first-child {
	color: var(--sym-label, #3c4349);
	font-weight: 600;
	white-space: nowrap;
}

/* --- The buy box: one composed instrument --- */
.product-view .d-flex {
	align-items: stretch;
	gap: 10px;
}
.product-view .qty {
	flex: none;
}
.product-view .qty .spinbox input {
	height: 46px;
	text-align: center;
}
.product-view .qty .spinbox .input-group {
	height: 46px;
}
.product-view .add-to-cart button,
.product-view .buy-now button,
.product-view .buy-now a,
.product-view .checkout input,
.product-view .price-offer button {
	align-items: center;
	border: none !important;
	border-radius: 4px !important;
	display: inline-flex;
	font-size: 15px !important;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	min-height: 46px;
	padding: 10px 22px !important;
	white-space: nowrap;
	width: 100%;
}
/* Hierarchy: Add to Cart owns the primary voice... */
.product-view .add-to-cart button {
	background-color: var(--sym-primary, #d0adb3) !important;
	color: var(--sym-white, #ffffff) !important;
}
.product-view .add-to-cart button:hover {
	background-color: var(--sym-primary-hover, #d4b4b9) !important;
}
/* ...Buy Now is the outlined second voice... */
.product-view .buy-now button,
.product-view .buy-now a {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 2px var(--sym-primary, #d0adb3) !important;
	color: var(--sym-primary, #d0adb3) !important;
	margin-top: 10px;
}
.product-view .buy-now button:hover,
.product-view .buy-now a:hover {
	background-color: var(--sym-primary, #d0adb3) !important;
	color: var(--sym-white, #ffffff) !important;
}
/* ...and Checkout is the quiet ink continuation. */
.product-view .checkout input {
	background-color: var(--sym-ink, #2f2f2f) !important;
	color: var(--sym-white, #ffffff) !important;
}
.product-view .checkout input:hover {
	background-color: var(--sym-coral, #42a5f5) !important;
}
.product-view .checkout form {
	margin-bottom: 0 !important;
}

/* --- Tabs: the modern underline --- */
.product-view .nav-tabs,
.tabbable .nav-tabs {
	border-bottom: 1px solid #e4e4e4;
	gap: 4px;
}
.product-view .nav-tabs .nav-link,
.tabbable .nav-tabs .nav-link {
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #7a7a7a;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 14px;
	text-transform: uppercase;
	font-size: 12.5px;
}
.product-view .nav-tabs .nav-link.active,
.tabbable .nav-tabs .nav-link.active {
	background: transparent;
	border-bottom-color: var(--sym-primary, #d0adb3);
	color: var(--sym-primary, #d0adb3);
}
.product-view .tab-content,
.tabbable .tab-content {
	padding-top: 18px;
}

/* --- Style 7's deal instruments, composed --- */
.product-view .remaining-stock,
.product-view [class*="remaining"] {
	border-radius: 4px;
	overflow: hidden;
}
.product-view .countdown,
.product-view [class*="countdown"] {
	border-radius: 4px;
}

/* --- Membership / login gate reads as an invitation --- */
.product-view .login-register {
	background-color: color-mix(in srgb, var(--sym-primary, #d0adb3) 5%, #ffffff);
	border: 1px dashed var(--sym-input-border, #d9d9d9);
	border-radius: 6px;
	padding: 22px;
}

/* =====================================================================
   EMPTY-STATE AND MODULE HYGIENE
   ===================================================================== */

/* THE GLOBAL EMPTY LAW: a module with nothing to say does not appear at
   all - heading included. Emptiness has three shapes: a body with no
   elements; a body whose only content is a no-content alert; and a bare
   heading with just an alert beside it. (:has may not nest in :has, so
   every test is phrased with :not(:has(...)); !important because modules
   carry bootstrap d-*-inline-block display utilities.) */
main .module:has(> .module-body):not(:has(.module-body *)),
.sidebar .module:has(> .module-body):not(:has(.module-body *)),
main .module:has(.module-body .alert):not(:has(.module-body *:not(.alert):not(.alert *))),
main .module:not(:has(.module-body)):has(> .alert) {
	display: none !important;
}

/* AdSense only earns its box once an ad has actually rendered. Matching
   the positive "filled" status also covers blocked or failed ad scripts,
   which never stamp any status and used to leave a tall empty frame. */
.box_adsense:not(:has(ins[data-ad-status="filled"])) {
	display: none !important;
}

/* Product-page empty notices join the quiet dashed family. */
.box_related_blog_article .alert,
.box_product_questions .alert-info {
	background-color: transparent !important;
	border: 1px dashed var(--sym-input-border, #d9d9d9);
	border-radius: 4px;
	color: #8a8a8a !important;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Related blog article card (product page)                            */
/* ------------------------------------------------------------------ */

.box_related_blog_article .card {
	border: 1px solid #e4e9ef;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(43, 69, 93, 0.07);
}

.box_related_blog_article .card-body {
	padding: 22px 26px;
}

.box_related_blog_article .card-title a {
	text-decoration: none;
}

.box_related_blog_article .card-title h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--sym-ink, #2f2f2f);
	transition: color 0.15s ease;
}

.box_related_blog_article .card-title a:hover h3 {
	color: var(--sym-coral, #42a5f5);
}

.box_related_blog_article .card-text {
	color: var(--sym-text, #555555);
	line-height: 1.55;
}

/* The image anchor fills its column so object-fit has a real box. */
.box_related_blog_article .card .col-md-4 > a {
	display: block;
	height: 100%;
}

.box_related_blog_article a.btn-primary {
	display: inline-block;
	padding: 9px 22px;
	border-radius: 5px;
	background-color: var(--sym-primary, #d0adb3) !important;
	color: var(--sym-white, #ffffff) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.box_related_blog_article a.btn-primary:hover {
	background-color: var(--sym-primary-hover, #0f5a90) !important;
}

/* ------------------------------------------------------------------ */
/* Vendor registration - card steps with a two-column field grid.      */
/* CSS only: the template's conditionals, validation hooks and         */
/* honeypots are untouched. Scoped to form.sym-reg.       */
/* ------------------------------------------------------------------ */

form.sym-reg {
	counter-reset: vreg-step;
	max-width: 900px;
	margin: 0 auto;
}

/* Each section becomes a card. The subscription-packages fieldset and
   the packages-note keep their own layout. */
form.sym-reg fieldset:has(> h3):not(.subscription):not(:has(.package-note)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px;
	background: #ffffff;
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(43, 69, 93, 0.06);
	padding: 26px 30px 10px;
	margin: 0 0 22px;
}

/* Numbered step eyebrows - the sections are a real sequence. */
form.sym-reg fieldset:not(.subscription):not(:has(.package-note)) > h3 {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sym-deep, #050505);
}

form.sym-reg fieldset:not(.subscription):not(:has(.package-note)) > h3::before {
	counter-increment: vreg-step;
	content: counter(vreg-step);
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sym-primary, #d0adb3);
	color: var(--sym-white, #ffffff);
	font-size: 14px;
	letter-spacing: 0;
}

/* Field rows: label above input, flowing into the two grid columns. */
form.sym-reg fieldset:not(.subscription):not(:has(.package-note)) > .row {
	display: block;
	margin: 0 0 18px;
}

form.sym-reg fieldset .col-form-label {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sym-label, #5a6572);
}

form.sym-reg fieldset .row > div[class*="col-"] {
	width: 100%;
	max-width: none;
	flex: none;
}

/* Rows that deserve the full card width. */
form.sym-reg fieldset > .row:has(#signup_vendor_username_warning),
form.sym-reg #terms_and_conditions {
	grid-column: 1 / -1;
}

/* The username note: a quiet hint, not a shouting banner. */
form.sym-reg #signup_vendor_username_warning {
	background: transparent;
	border: 0;
	padding: 6px 0 0;
	margin: 0;
	font-size: 12.5px;
	color: #77828e;
}

/* Password strength: a slim rounded track. */
form.sym-reg .passwordmetercontainer {
	height: 8px;
	border-radius: 999px;
	background: #edf1f5;
	overflow: hidden;
	margin-top: 14px;
}

form.sym-reg .passwordmetergauge {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sym-coral, #42a5f5), #f0a54a, #58b368);
}

form.sym-reg #passwordmeterverdict {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: #77828e;
}

/* Terms row: checkbox and links on one calm line. */
form.sym-reg #terms_and_conditions .col-form-label,
form.sym-reg #terms_and_conditions > label {
	font-weight: 600;
	color: var(--sym-ink, #2f2f2f);
}

form.sym-reg #cb_agree {
	width: 18px;
	height: 18px;
	accent-color: var(--sym-primary, #d0adb3);
	vertical-align: -3px;
	margin-right: 8px;
}

/* The action row. */
form.sym-reg > .col-12:last-of-type {
	padding: 4px 0 34px;
}

form.sym-reg > .col-12 input[type="submit"],
form.sym-reg > .col-12 input[type="button"],
form.sym-reg > .col-12 input[type="reset"] {
	min-width: 150px;
	padding: 11px 26px;
	border-radius: 6px;
	font-weight: 600;
}

/* One column on narrow screens. */
@media (max-width: 860px) {
	form.sym-reg fieldset:has(> h3):not(.subscription):not(:has(.package-note)) {
		grid-template-columns: 1fr;
		padding: 22px 20px 8px;
	}
}

/* The seller/cart cluster row: the row is exactly the button's height,
   so the button sits flush on the breadcrumb band below. Give the last
   header row real breathing room. */
header:has(.header-row-1) .header-row-3 {
	padding-top: 6px;
	padding-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Vendor registration - subscription packages as a real pricing table */
/* ------------------------------------------------------------------ */

form.sym-reg fieldset:has(.package-note) {
	text-align: center;
	margin: 0 0 6px;
}

form.sym-reg .package-note {
	font-size: 15px;
	color: #5a6572;
}

form.sym-reg fieldset.subscription {
	margin: 0 0 28px;
}

form.sym-reg fieldset.subscription > h3 {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sym-deep, #050505);
	margin: 0 0 20px;
}

form.sym-reg .subscription .card {
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(43, 69, 93, 0.06);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
}

form.sym-reg .subscription .card:hover {
	box-shadow: 0 6px 20px rgba(43, 69, 93, 0.13);
}

/* The chosen plan announces itself. */
form.sym-reg .subscription .card:has(.form-check-input:checked) {
	border-color: var(--sym-primary, #d0adb3);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sym-primary, #d0adb3) 20%, transparent), 0 6px 20px rgba(43, 69, 93, 0.10);
}

/* Header: calm surface instead of the blue slab. */
form.sym-reg .subscription .card-header {
	background: #f7f9fb !important;
	border-bottom: 1px solid #e4e9ef;
	padding: 15px 18px;
}

form.sym-reg .subscription .card-header h3 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sym-ink, #2f2f2f);
}

form.sym-reg .subscription .card-header .float-end h3 {
	color: var(--sym-primary, #d0adb3);
}

form.sym-reg .subscription .card-header strike {
	color: #98a2ad;
	font-weight: 500;
}

form.sym-reg .subscription .form-check-input {
	width: 18px;
	height: 18px;
	accent-color: var(--sym-primary, #d0adb3);
	cursor: pointer;
}

form.sym-reg .subscription .card-body {
	padding: 8px 18px 14px;
}

form.sym-reg .subscription .list-group-item {
	background: transparent;
	border-color: #eef2f6;
	padding: 11px 2px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #4a5560;
}

form.sym-reg .subscription .list-group-item .float-end {
	font-weight: 600;
	color: var(--sym-ink, #2f2f2f);
}

/* The renewal footnote: readable, not yellow-on-white. */
form.sym-reg .subscription .card-footer {
	background: #fff8ec !important;
	border-top: 1px solid #f2e3c4;
	padding: 10px 18px;
}

form.sym-reg .subscription .card-footer small,
form.sym-reg .subscription .card-footer .yellow {
	color: #8a6d2f;
	font-size: 12px;
	line-height: 1.5;
}

/* The package columns fill the same width as the form cards below:
   the platform grid reserves four-per-row slots, which left three
   packages huddled in the center. However many packages exist, they
   share the full row equally. */
form.sym-reg fieldset.subscription .row > * {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

@media (max-width: 767px) {
	form.sym-reg fieldset.subscription .row > * {
		flex: 0 0 100%;
	}
}

/* ------------------------------------------------------------------ */
/* sym-reg extensions for the user signup form                         */
/* ------------------------------------------------------------------ */

/* The user form wraps its rows in a fieldset-wrapper div; let the rows
   participate directly in the fieldset's grid. */
form.sym-reg fieldset > .fieldset-wrapper {
	display: contents;
}

/* Choice rows (customer type): selectable pill cards, full card width. */
form.sym-reg fieldset > .row.row-gutters {
	grid-column: 1 / -1;
	display: flex;
	gap: 14px;
	margin: 0 0 18px;
}

form.sym-reg fieldset > .row.row-gutters > [class*="col-"] {
	width: auto;
	flex: 0 1 auto;
	padding: 0;
}

form.sym-reg .row.row-gutters .box {
	border: 1px solid #e4e9ef;
	border-radius: 8px;
	padding: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form.sym-reg .row.row-gutters .box label {
	display: block;
	padding: 12px 20px;
	margin: 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--sym-ink, #2f2f2f);
}

form.sym-reg .row.row-gutters .box:has(input:checked) {
	border-color: var(--sym-primary, #d0adb3);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sym-primary, #d0adb3) 18%, transparent);
}

form.sym-reg .row.row-gutters .box input[type="radio"] {
	accent-color: var(--sym-primary, #d0adb3);
	margin-right: 6px;
}

/* A fieldset without a heading is an action row, not a card. */
form.sym-reg fieldset:not(:has(> h3)) {
	border: 0;
	padding: 4px 0 34px;
	margin: 0;
}

form.sym-reg fieldset:not(:has(> h3)) input[type="submit"],
form.sym-reg fieldset:not(:has(> h3)) input[type="button"],
form.sym-reg fieldset:not(:has(> h3)) input[type="reset"] {
	min-width: 150px;
	padding: 11px 26px;
	border-radius: 6px;
	font-weight: 600;
	margin-right: 8px;
}

/* The wholesale fieldset is shown by JS with an inline display:block;
   the card grid must survive that. (Hidden state - display:none - is
   unaffected: this matches only the shown state.) */
form.sym-reg fieldset#div_billing_wholesale[style*="block"] {
	display: grid !important;
}

/* The shipping fields live inside a JS-toggled section; the section
   spans the card and lays its rows out in the same two-column grid.
   The inline display the toggle writes is overruled when shown and
   honored when hidden. */
form.sym-reg #div_shipping_section {
	grid-column: 1 / -1;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px;
}

form.sym-reg #div_shipping_section[style*="none"] {
	display: none !important;
}

form.sym-reg #div_shipping_section > .row {
	display: block;
	margin: 0 0 18px;
}

form.sym-reg #cb_thesame {
	width: 18px;
	height: 18px;
	accent-color: var(--sym-primary, #d0adb3);
}

@media (max-width: 860px) {
	form.sym-reg #div_shipping_section {
		grid-template-columns: 1fr;
	}
}

/* The boxed buy panel: any product shell that wraps its purchase block
   in .buy-box gets the classic framed treatment. */
.product-view .buy-box {
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(43, 69, 93, 0.06);
	padding: 22px 24px;
	margin: 18px 0 22px;
}

/* Air between the box's moves: price, quantity, buttons. */
.product-view .buy-box .price {
	margin-bottom: 16px;
}

.product-view .buy-box .qty {
	margin-bottom: 14px;
}

.product-view .buy-box .add-to-cart {
	margin-bottom: 12px;
}

/* The compact style switcher on full-width shells: quiet, top right. */
.product-view .pstyle-inline {
	float: right;
	width: 130px;
	margin: 0 0 8px 16px;
}

.product-view .pstyle-inline select {
	height: 34px;
	padding: 4px 10px;
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Style 2 "Boutique" - imagery leads, flat elegance, accordion voice  */
/* ------------------------------------------------------------------ */

.product-view.style2 .images .image img {
	width: 100%;
	border: 1px solid #eef2f6;
	border-radius: 12px;
}

.product-view.style2 .thumbs img {
	width: 100%;
	border: 1px solid #e4e9ef;
	border-radius: 8px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.product-view.style2 .thumbs img:hover {
	border-color: var(--sym-primary, #d0adb3);
}

/* The purchase sits between two calm rules - the boutique's counterpart
   to style 1's framed box. */
.product-view.style2 .boutique-buy {
	border-top: 1px solid #eef2f6;
	border-bottom: 1px solid #eef2f6;
	padding: 20px 0 22px;
	margin: 20px 0 24px;
}

/* Accordion voice: small caps, primary when open, no bootstrap glow. */
.product-view.style2 .accordion-button {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sym-ink, #2f2f2f);
	background: transparent;
	box-shadow: none;
}

.product-view.style2 .accordion-button:not(.collapsed) {
	color: var(--sym-primary, #d0adb3);
}

.product-view.style2 .accordion-item {
	border-color: #eef2f6;
}

/* Style 3 "Spec Sheet" - the ledger is the hero beneath the buy box. */
.product-view.style3 .product-properties {
	margin-top: 26px;
}

/* Boutique: the two buy buttons share one baseline and one height. */
.product-view.style2 .add-to-cart,
.product-view.style2 .buy-now {
	display: inline-flex;
	vertical-align: top;
	margin: 0 8px 12px 0;
}

.product-view.style2 .add-to-cart button,
.product-view.style2 .buy-now button {
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* the platform gives the buy-now button its own top margin */
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Style 5 "Editorial Scroll" - tall gallery, the buy column follows   */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.product-view.style5 .product-details {
		position: sticky;
		top: 24px;
		/* a stretched flex column leaves sticky no room to travel */
		align-self: flex-start;
	}
}

.product-view.style5 .image img {
	width: 100%;
	border: 1px solid #eef2f6;
	border-radius: 10px;
}

.product-view.style5 .thumbs ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.product-view.style5 .thumbs ul li {
	margin: 0 0 12px;
}

.product-view.style5 .thumbs ul li img {
	width: 100%;
	height: auto;
	border: 1px solid #eef2f6;
	border-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Style 7 "Deal Stage" - the countdown as timer tiles                 */
/* The countdown plugin replaces the element's markup with its own     */
/* .countdown_* structure, so the tiles are styled on those classes.   */
/* ------------------------------------------------------------------ */

.product-view.style7 .productexpirecounter,
.product-view.style7 .productexpirecounter.hasCountdown {
	/* the plugin's own stylesheet paints a gray tray behind the tiles */
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	margin: 18px 0;
}

.product-view.style7 .productexpirecounter .countdown_row {
	display: flex;
	gap: 10px;
	background: transparent;
}

.product-view.style7 .productexpirecounter .countdown_section {
	/* the plugin's width:25% plus the row gaps overflowed the column;
	   flexbox divides the row instead */
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 9px 8px 7px;
	border-radius: 10px;
	background: var(--sym-deep, #050505);
	color: rgba(255, 255, 255, 0.65);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.4;
}

.product-view.style7 .productexpirecounter .countdown_amount {
	display: block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sym-white, #ffffff);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* The seconds tile carries the pulse of the deal. */
.product-view.style7 .productexpirecounter .countdown_section:last-child {
	background: var(--sym-coral, #42a5f5);
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ */
/* Account dropdown - a real panel, not a keyhole                      */
/* ------------------------------------------------------------------ */

.box_profile_bar .dropdown-menu {
	min-width: 480px;
	right: 0;
	left: auto;
	padding: 18px 22px;
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(43, 69, 93, 0.16);
}

.box_profile_bar .dropdown-menu.user_only {
	min-width: 280px;
}

.box_profile_bar #body-profile-row h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sym-deep, #050505);
	padding: 2px 0 2px 10px;
	margin-bottom: 10px;
	border-left: 4px solid var(--sym-primary, #d0adb3);
}

.box_profile_bar #body-profile-row .list-group-item {
	border: 0;
	padding: 0 !important;
	background: transparent;
}

.box_profile_bar #body-profile-row .list-group-item a {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13.5px;
	white-space: nowrap;
	color: var(--sym-text, #555555);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.box_profile_bar #body-profile-row .list-group-item a:hover,
.box_profile_bar #body-profile-row .list-group-item a.active {
	background: #f2f6fa;
	color: var(--sym-primary, #d0adb3);
}

/* ------------------------------------------------------------------ */
/* User dashboard - list cards and calm section surfaces               */
/* ------------------------------------------------------------------ */

.dashboard-nav h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--sym-ink, #2f2f2f);
	margin: 0 0 12px;
	border-left: 4px solid var(--sym-primary, #d0adb3);
	padding-left: 10px;
}

.dashboard-nav .list-group {
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(43, 69, 93, 0.06);
}

.dashboard-nav .list-group-item {
	border-color: #eef2f6;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--sym-text, #555555);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.dashboard-nav .list-group-item:hover {
	background: #f2f6fa;
	color: var(--sym-primary, #d0adb3);
}

/* Card headers across the public site: the calm surface the pricing
   table established, instead of scheme-blue slabs with white text. */
main .card-header {
	background: #f7f9fb !important;
	border-bottom: 1px solid #e4e9ef;
	color: var(--sym-ink, #2f2f2f);
}

main .card-header h3,
main .card-header h4 {
	color: var(--sym-ink, #2f2f2f);
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	border-left: 4px solid var(--sym-primary, #d0adb3);
	padding-left: 10px;
}

/* ------------------------------------------------------------------ */
/* Account surfaces - tables and the stray button families             */
/* ------------------------------------------------------------------ */

/* Tables speak the ledger voice. */
main .table thead th {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sym-deep, #050505);
	border-bottom: 2px solid #e4e9ef;
}

main .table td {
	border-color: #eef2f6;
	vertical-align: middle;
}

main .table-hover tbody tr:hover {
	background: #f7fafd;
}

/* The cyan btn-info family joins the primary line. */
main .btn-info,
main input.btn-info,
main a.btn-info {
	background-color: var(--sym-primary, #d0adb3) !important;
	border-color: var(--sym-primary, #d0adb3) !important;
	color: var(--sym-white, #ffffff) !important;
	border-radius: 5px;
	padding: 9px 20px;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

main .btn-info:hover,
main input.btn-info:hover,
main a.btn-info:hover {
	background-color: var(--sym-primary-hover, #0f5a90) !important;
	border-color: var(--sym-primary-hover, #0f5a90) !important;
}

/* btn-warning: a calm amber with readable ink, not taxi yellow. */
main .btn-warning,
main a.btn-warning,
main input.btn-warning {
	background-color: #fff3d6 !important;
	border: 1px solid #e8cf96 !important;
	color: #7a5c1e !important;
	border-radius: 5px;
	padding: 9px 20px;
	font-weight: 600;
}

main .btn-warning:hover,
main a.btn-warning:hover,
main input.btn-warning:hover {
	background-color: #f9e7b8 !important;
}

/* ================================================================== */
/* Vendor Dashboard 2026 - THE MORNING PULSE - Updated by GK 2026-09-01 */
/* Designed live on the minoan bench at his order: "the vendor          */
/* dashboard is the heart - engaging, not outdated, for ALL templates  */
/* in the template's matching colours." Colors ride var(--sym-*) from  */
/* the scheme bridge, so every derived template paints its own blood.  */
/* ================================================================== */

.gk-pulse {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 6px 0 26px;
}
@media (max-width: 900px) { .gk-pulse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gk-pulse { grid-template-columns: 1fr; } }
.gk-tile {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 6px;
	padding: 20px 20px 16px;
	text-decoration: none;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}
.gk-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,.07);
	border-color: var(--sym-primary, #42b549);
	text-decoration: none;
}
.gk-tile-ic {
	position: absolute; top: 16px; right: 16px;
	width: 34px; height: 34px; border-radius: 50%;
	background: color-mix(in srgb, var(--sym-primary, #42b549) 10%, #fff);
	color: var(--sym-primary, #42b549);
	display: flex; align-items: center; justify-content: center;
}
.gk-tile-ic svg { width: 17px; height: 17px; }
.gk-tile-v {
	font-size: 27px; font-weight: 600; color: #333;
	letter-spacing: -.3px; font-variant-numeric: tabular-nums;
}
.gk-pulse .gk-tile:nth-child(-n+2) .gk-tile-v { color: var(--sym-primary, #42b549); }
.gk-tile-l {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; color: #9a9a9a; margin-top: 4px;
}

/* the workbenches: quiet caps headers, rows that answer the cursor */
#innerbody.vendor_home h1 { font-weight: 300; letter-spacing: .5px; }
#innerbody.vendor_home .card { border-radius: 6px; border-color: #e9e9e9; }
#innerbody.vendor_home .card-header {
	background: transparent; border-bottom: 0; padding-bottom: 0;
}
#innerbody.vendor_home .card-header h3 {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; color: #9a9a9a;
}
#innerbody.vendor_home .dashboard-nav h3 {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; color: #9a9a9a; border: 0; padding-left: 0;
}
#innerbody.vendor_home .list-group-item {
	border: 0; border-top: 1px solid #f2f2f2;
	font-size: 13px; color: #555; padding: 11px 6px;
	position: relative; transition: background .15s, padding-left .15s, color .15s;
}
#innerbody.vendor_home .list-group-item:first-child { border-top: 0; }
#innerbody.vendor_home .list-group-item:hover {
	background: #fafafa; padding-left: 14px;
	color: var(--sym-primary, #42b549);
}
#innerbody.vendor_home .list-group-item:after {
	content: '\203A'; position: absolute; right: 10px; color: #c9c9c9;
}

/* subscription: a status banner, never an alarm */
.gk-sub .card-body {
	display: flex; align-items: center; justify-content: flex-start;
	gap: 40px; flex-wrap: wrap;
}
.gk-sub .card-body > [class*=col] {
	flex: 0 0 auto; width: auto; max-width: none; text-align: left;
}
.gk-sub .card-body span { display: block; }
.gk-sub [class*=col] > span:first-child {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; color: #9a9a9a; margin-bottom: 4px;
}
html body .gk-sub .catalog-price, html body .gk-sub .red,
html body .gk-sub span[class*=price] { color: #3a3f45 !important; font-size: 16px; }
.gk-sub-pill {
	display: inline-block; padding: 4px 14px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .4px;
	background: #fff4e0; color: #b0781a; text-transform: uppercase;
}
.gk-sub-pill.paid {
	background: color-mix(in srgb, var(--sym-primary, #42b549) 12%, #fff);
	color: var(--sym-primary, #42b549);
}

/* the account sidebar speaks quietly; the template answers on hover */
.sidebar .list-group a, .dashboard-nav .list-group a { color: #6b6b6b; font-size: 12px; }
.sidebar .list-group a:hover, .dashboard-nav .list-group a:hover {
	color: var(--sym-primary, #42b549);
}


/* ================================================================== */
/* Factory identity knobs - generated, edit via the Factory wizard     */
/* ================================================================== */

.product-view .buy-box,
form.sym-reg fieldset,
form.sym-reg .subscription .card,
.dashboard-nav .list-group,
main .card,
.box_profile_bar .dropdown-menu {
	border-radius: 3px !important;
}

main .btn-primary:not(.bs-spinner-btn),
main .btn-info,
main .btn-success,
main input[type="submit"],
.product-view .add-to-cart button,
.product-view .buy-now button {
	border-radius: 3px !important;
}

/* THE NOTHING-BULKY LAW (30 Aug 2026): action buttons are sized to
   their content plus a modest minimum, never wall-to-wall. */
main button#add-to-cart {
	width: auto !important;
	min-width: 220px;
	padding: 9px 28px !important;
}
main input.btn-success[type="submit"] {
	width: auto !important;
	min-width: 180px;
	padding: 9px 28px !important;
}

/* The platform's quantity spinner is one sealed pill group; its inner
   buttons never take the identity radius (learned on lozuka: 999px
   turned them into pills colliding with the quantity box). */
.bs-spinner-container {
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 3px;
	overflow: hidden;
	display: inline-flex;
	align-items: stretch;
}
.bs-spinner-container .bs-spinner-btn {
	border-radius: 0 !important;
	border: none !important;
}
.bs-spinner-container input {
	border: none !important;
	border-left: 1px solid rgba(0,0,0,0.12) !important;
	border-right: 1px solid rgba(0,0,0,0.12) !important;
	border-radius: 0 !important;
	text-align: center;
}