/* gkclassic5 J5 parity shims — differences created by the J3→J5/VM4 platform change,
   each verified against the replica (see audit/uat-divergences.md). Loaded last. */

/* VM4's displayMediaThumb emits explicit width/height attributes (VM3 didn't).
   The legacy CSS only constrains width, so the attribute height stretched every
   product card. Restore VM3-era natural scaling. */
.browseProductImage,
.vm-product-media-container img,
.productdetails-view .main-image img {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* --- Navbar dropdowns ------------------------------------------------------
   custom.css keeps every .dropdown-menu display:block with opacity:0/height:0 and
   its hover rule (`li.parent:hover .dropdown-menu`) reveals EVERY nested level at
   once — that's the "two windows" bug. Scope the reveal to the hovered item's own
   panel only. */
#gjc-navbar .navbar-nav li.parent:hover .dropdown-menu {
	opacity: 0;
	height: 0;
	overflow: hidden;
}
#gjc-navbar .navbar-nav li.parent:hover > .dropdown-menu {
	opacity: 1;
	height: auto;
	overflow: visible;
}

/* Hidden panels must also be non-interactive: with only opacity:0/height:0 the
   spilled content still captured the pointer, so menus opened from empty space
   below/beside the bar (prod parks panels off-screen with visibility:hidden).
   visibility inherits, so nested levels follow their panel. Transition replaces
   custom.css's `all .3s` — prod fades opacity .4s in and snaps hidden on leave. */
#gjc-navbar .navbar-nav > li.parent > .dropdown-menu {
	visibility: hidden;
	transition: opacity .4s ease;
}
#gjc-navbar .navbar-nav > li.parent:hover > .dropdown-menu {
	visibility: visible;
}

/* Prod band geometry: JUX gave the top links 38/22/41 padding (the li fills the
   full 103px band), so panels attach at the navbar's bottom edge and the hover
   block below covers the band. Same selector as custom.css; later file wins. */
.navbar #gjc-navbar-inner .nav > li > a,
.navbar #gjc-navbar-inner .nav > li > span {
	padding: 38px 22px 41px;
	line-height: normal;
	margin: 0;
}

/* Hovered top item: prod paints the anchor black + red — but only while the
   ANCHOR itself is hovered; once the pointer is inside the open panel the label
   reverts to white (the panel stays open). custom.css forces the background
   transparent !important and keeps the label red li-scoped — both overridden. */
.navbar #gjc-navbar-inner .nav > li > a:hover,
.navbar #gjc-navbar-inner .nav > li > span:hover {
	background-color: #000 !important;
	color: #F00909;
}
#gjc-navbar .navbar-nav li.parent:hover > a {
	color: #fff !important;
}
#gjc-navbar .navbar-nav li.parent > a:hover {
	color: #F00909 !important;
}

/* Panel skin: prod = solid black JUX panel (302px), white 20px links at 8/15,
   red on hover with no grey pill, flat active item, no notch triangle. */
#gjc-navbar .navbar-nav .dropdown-menu {
	background: #000;
	width: 302px;
	padding: 0;
}
#gjc-navbar .navbar-nav .dropdown-menu > li > a,
#gjc-navbar .navbar-nav .dropdown-menu > li > span {
	color: #fff;
	padding: 8px 15px;
	line-height: normal; /* BS3's 1.428 makes rows 45px; prod rows are 40px */
	white-space: normal; /* BS3 nowrap never bound on prod's JUX markup — long
	                        entries (Lock Blades & Folders) wrap there */
}
#gjc-navbar .navbar-nav .dropdown-menu > li > a:hover,
#gjc-navbar .navbar-nav .dropdown-menu > li > a:focus,
#gjc-navbar .navbar-nav .dropdown-menu > li:hover > a {
	background: transparent;
	color: #F00909;
}
#gjc-navbar .navbar-nav .dropdown-menu > .active > a,
#gjc-navbar .navbar-nav .dropdown-menu > .active > a:hover,
#gjc-navbar .navbar-nav .dropdown-menu > .active > a:focus,
#gjc-navbar .navbar-nav .dropdown-menu > .active > span {
	background: transparent;
	color: #fff;
}
.navbar .nav > li > .dropdown-menu::after {
	display: none; /* prod panels have no notch triangle */
}

/* Prod's JUX menu never wraps its top row: BS3's floated lis wrap as soon as the
   col-sm-6 menu column is narrower than the five items (~598px — everything under
   the ~1430px viewport where custom.css widens .container to 1400). Wrapped rows
   break the hover path to the mega panel. Mirror prod: one row at every width,
   overflowing under the cart icon at narrow desktops exactly like prod does. */
#gjc-navbar .navbar-nav {
	display: flex;
	flex-wrap: nowrap;
}
#gjc-navbar .navbar-nav > li {
	float: none;
	flex: 0 0 auto;
}

/* Mega panel for top items with grandchildren (Products) — prod's JUX megamenu:
   container-wide black panel anchored at the navbar .container (custom.css keeps
   .container position:relative), four equal columns, level-2 entries as uppercase
   column heads, their child lists rendered statically. */
#gjc-navbar .topmenu {
	position: static; /* so the mega panel anchors to the .container, not the menu column */
}
#gjc-navbar .navbar-nav > li.mega {
	position: static;
}
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu {
	left: 15px; /* container padding → same x as prod */
	right: auto;
	width: 100%; /* = container width per breakpoint (prod measures 970/1170/1400) */
	background: #000;
}
#gjc-navbar .navbar-nav > li.mega:hover > .dropdown-menu {
	/* !important: custom.css `.active.deeper.parent .dropdown-menu` forces
	   display:block !important when Products is the active trail */
	display: flex !important;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
}
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu > li {
	flex: 0 0 25%;
	min-width: 0;
}
/* prod column lists: links are 8/15 boxes inset 10px from the column edges
   (the ul's 10px margins; measured: link text-area 192px @970 panel, 242 @1170).
   With white-space:normal that reproduces prod's exact wrap set: "Lock Blades &
   Folders" (196.5px) and "Unusual & Specialty Items" (230.5px) wrap at the 970
   panel, everything fits at 1170+ — panel heights only match with these wraps. */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li > a,
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li > span {
	padding: 8px 15px;
	margin: 0 10px;
	color: #fff;
}
/* Mega column links redden on hover like prod (the white rule above outranks the
   generic panel hover rule by source order — B30). Active item stays white, same
   as the narrow-panel exemption. */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li > a:hover,
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li:hover > a {
	color: #F00909;
}
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li.active > a,
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li.active > a:hover {
	color: #fff;
}

/* column heads: prod renders them Roboto 18px flush with the column edge (the
   `.large-header` Oswald rule in the recovered custom css never bound on prod's
   JUX markup — the head there is the level-1 link, uppercased by JUX css) */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu .dropdown-menu > li > a.large-header {
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px;
	line-height: 24px; /* prod head rows are 40px like the links */
	padding: 8px 15px;
	margin: 0; /* the column list's own 10px top margin is the head gap on prod */
}
/* prod hides the level-2 links: columns 1-3 are titled by the menu's own
   .large-header items (styled by the recovered custom css); the 4th column
   ("Other Items") is a heading-type span — show it styled the same way */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu > li > a {
	display: none;
}
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu > li > span {
	display: block;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	margin-bottom: 14px;
	padding: 9px 15px 0;
	color: #fff;
	font-size: 23px; /* prod's heading-type span computes 23px */
}
#gjc-navbar .navbar-nav li.mega .dropdown-menu .dropdown-menu,
#gjc-navbar .navbar-nav li.mega li.parent:hover .dropdown-menu {
	display: block;
	position: static;
	opacity: 1;
	height: auto;
	width: auto; /* undo the narrow-panel 302px skin inside mega columns */
	margin: 10px 0; /* prod's column lists carry 10px margins → panel height 346 not 329 */
	overflow: visible;
	background: transparent;
	border: 0;
	box-shadow: none;
	float: none;
}
/* the little notch triangle only suits the narrow dropdowns */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu::after {
	display: none;
}
/* menu "heading"-type items carry BS3's .divider (1px line, overflow hidden) —
   as a mega column that would swallow the whole column (Other Items) */
#gjc-navbar .navbar-nav > li.mega > .dropdown-menu > li.divider {
	height: auto;
	margin: 0; /* BS3 gives .divider 9px vertical margins — misaligns the column head */
	overflow: visible;
	background: transparent;
}
/* no flyout chevrons inside the mega panel */
#gjc-navbar .navbar-nav > li.mega .dropdown-menu li::before,
#gjc-navbar .navbar-nav > li.mega .dropdown-menu li::after,
#gjc-navbar .navbar-nav > li.mega .dropdown-menu a::before,
#gjc-navbar .navbar-nav > li.mega .dropdown-menu a::after {
	display: none;
}

/* caret: small raised triangle after items with children, like the megamenu's */
#gjc-navbar .navbar-nav > li.deeper > a::after {
	content: "";
	display: inline-block;
	margin-left: 10px; /* JUX's glyph caret occupies 18px total; triangle 8 + 10 matches */
	vertical-align: middle; /* prod caret sits mid-label, not superscript */
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

/* Sidebar category tree (mod_virtuemart_category replacing dead vmcat42pro):
   reproduce vmcat42pro's rendered look, measured on the replica: Roboto 18px #333
   rows at 6/36/6/6 padding with 1px separators, children indented 15px, a small
   right-pointing arrow per parent (pointing down on the active branch), and
   non-active branches collapsed via prod's own mechanism (visibility:hidden +
   height:0 — NOT display:none; the row heights/geometry then match exactly). */
.vm-menu-category,
.vm-menu-category ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vm-menu-category li {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #ececec;
}
.vm-menu-category li li:last-child {
	border-bottom: 0;
}
.vm-menu-category a {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #333 !important; /* active items are NOT highlighted on prod */
	padding: 6px 36px 6px 6px;
	text-decoration: none;
}
.vm-menu-category li > ul {
	visibility: hidden;
	height: 0;
	padding-left: 15px;
}
.vm-menu-category li.active > ul,
.vm-menu-category li.expand > ul {
	visibility: visible;
	height: auto;
}
/* the ported override emits <i class="gala-left-open-big"> — draw prod's plain
   triangle instead (glyph mapping of the galaticos font is unverified) */
.vm-menu-category i.gala-left-open-big {
	display: none;
}
.vm-menu-category li:has(> ul) > a::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 13px;
	border-left: 6px solid #3A3B3F;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.vm-menu-category li.active:has(> ul) > a::after,
.vm-menu-category li.expand:has(> ul) > a::after {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #3A3B3F;
	border-bottom: 0;
	top: 16px;
}

/* --- Product-page buy area: WebKit/iOS fixes (2026-07-10 round 6) ---------------
   VM4 renders the quantity steppers as BS3 `.input-group-btn` (display:table-cell)
   spans inside an inline-block bar. Chromium happens to lay this out as two rows
   (label+input+steppers, button below); WebKit collapses everything into ONE
   overlapping row — on real iPhones the ADD TO CART button covers the quantity
   input and the +/- buttons (prod has the same latent bug). Normalize to flex with
   the exact geometry Chromium/desktop already renders. */
.productdetails-view .addtocart-area .addtocart-bar .quantity-box,
.productdetails-view .addtocart-area .addtocart-bar .quantity-box .quantity-controls,
.productdetails-view .addtocart-area .addtocart-bar .quantity-box .input-group-btn {
	display: inline-flex;
	align-items: flex-start;
	width: auto; /* BS3 gives .input-group-btn width:1% (fine on table-cells, literal on flex) */
}
.productdetails-view .addtocart-area .addtocart-bar .quantity-box {
	margin-top: 12px; /* prod's table-cell baseline offset — keeps the row at prod's exact y */
}
.productdetails-view .addtocart-area .addtocart-bar .quantity-box .quantity-controls,
.productdetails-view .addtocart-area .addtocart-bar .quantity-box .input-group-btn {
	top: 0; /* custom.css's 6px nudge double-applies in flex (both spans carry .quantity-controls) */
}
.productdetails-view .addtocart-area .addtocart-bar span.addtocart-button {
	display: block; /* Chromium wraps it below the quantity row; WebKit needs it said */
}
/* The thumbnail strip's BS3 row margins (-15px) overflow the viewport on phones —
   the page wiggles sideways (prod bug too). Contain it on small screens only. */
@media (max-width: 767px) {
	.productdetails-view .additional-images.row {
		margin-left: 0;
		margin-right: 0;
	}
	.productdetails-view .additional-images.row > [class*="col-"]:first-child {
		padding-left: 0;
	}
	.productdetails-view .additional-images.row > [class*="col-"]:last-child {
		padding-right: 0;
	}
}

/* The prod main menu was JUX-megamenu markup styled Roboto 20px/400 (top level AND
   dropdowns) — the template's Oswald heading rule never applied to it. Reproduce
   that on the mod_menu markup. */
#gjc-navbar .navbar-nav a,
#gjc-navbar .navbar-nav span,
#offcanvas .navbar-nav a,
#offcanvas .navbar-nav span {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 400;
}

/* ---- Offcanvas accordion (template.js pairs with this — deploy together) ----
   Parent rows toggle their submenu; chevron flips when open; injected
   "View all —" self-link rows get an italic accent. */
#offcanvas li.parent > a::after,
#offcanvas li.parent > span::after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	float: right;
	transition: transform .2s ease;
}
#offcanvas li.gk-open > a::after,
#offcanvas li.gk-open > span::after {
	transform: rotate(180deg);
}
#offcanvas .gk-viewall > a {
	font-style: italic;
}
/* BS3 collapses .divider rows inside .dropdown-menu to a 1px strip — the
   "Other Items" divider PARENT (span label + real submenu) needs to be a row */
#offcanvas .dropdown-menu > li.divider.parent {
	height: auto;
	overflow: visible;
	margin: 0;
	background: none;
}
#offcanvas li.divider.parent > span {
	color: #333;
	cursor: pointer;
}

/* ---- Navbar band responsive overhaul (I7, deliberate improvement over prod) ----
   Prod's band breaks in two ranges (verified on the replica): the absolute burger
   sits on the logo and the floating cart col lands mid-band at 768-991; at
   992-1199 the nowrap menu overflows its 50% column UNDER the z-index-99999999
   cart col, which blocks clicks on Contact. Fix: flex the band in exactly those
   two ranges — logo shrinks, menu keeps its content width, cart is a fixed-width
   item on the right. ≥1200 is untouched (verified parity with prod there). */
@media (min-width: 768px) and (max-width: 1199px) {
	#gjc-navbar .row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}
	#gjc-navbar .gjc-logo {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
		margin: 10px 0;
	}
	#gjc-navbar .gjc-logo img {
		max-width: 100%;
		height: auto;
	}
	#gjc-navbar .btncarttop {
		flex: 0 0 auto;
		width: auto;
		margin-top: 0;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	/* burger leaves its absolute perch over the logo; burger + cart sit right */
	#gjc-navbar .navbar-header.pull-left {
		position: static;
		order: 2;
		margin-left: auto;
	}
	#gjc-navbar .navbar-toggle {
		margin: 0 6px 0 0;
	}
	#gjc-navbar .btncarttop {
		order: 3;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#gjc-navbar .topmenu {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
	}
}
/* exactly 992: template.css still shows the burger (≤992) while the desktop menu
   is already visible (≥992) — the band gets both. Desktop wins (A9: prod's own
   992 tablet-mode quirk is not reproduced). */
@media (min-width: 992px) {
	#gjc-navbar .navbar-toggle {
		display: none;
	}
}

/* GK (switch-night 2026-07-15): add-to-cart popup buttons sit side-by-side but Bootstrap
   stacked-block rule (.btn-block + .btn-block) shoves "Show Cart" down 5px — kill it here */
.vm-padded .btn-block + .btn-block { margin-top: 0; }