/**
 * JG Menu - public styles.
 *
 * Desktop (>= 992px): horizontal bar, CSS-driven hover/focus mega panel
 * (no JS needed to open, so it is instant), image/advert box on the right.
 * Mobile (< 992px): slide-out drawer with accordion, images hidden.
 */

.jgmn-nav,
.jgmn-nav * {
	box-sizing: border-box;
}

.jgmn-nav {
	position: relative;
	z-index: 9990;
	max-width: 100%;
	background: #fff;
	border-bottom: 1px solid #e2e2e2;
	font-family: inherit;
}

.jgmn-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Themes often add bullets to menu items - as list markers, or as glyphs
   injected with ::before/::after (a dot after the arrow, a chevron before
   each dropdown entry). Strip both. Our own caret and mobile arrow are a
   real <span> and a pseudo-element on the button, so they survive. */
.jgmn-nav ul,
.jgmn-nav ol,
.jgmn-nav li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.jgmn-nav li::marker {
	content: "" !important;
}

.jgmn-nav .jgmn-item::before,
.jgmn-nav .jgmn-item::after,
.jgmn-nav .jgmn-item > a::before,
.jgmn-nav .jgmn-item > a::after,
.jgmn-nav .jgmn-label::before,
.jgmn-nav .jgmn-label::after {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

.jgmn-nav a {
	text-decoration: none;
	color: #1a1a1a;
}

.jgmn-nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Top bar                                                             */
/* ------------------------------------------------------------------ */

/* Scoped under .jgmn-nav so the margin beats the .jgmn-nav ul reset above -
   auto margins keep the space left of the first item equal to the space
   right of the last. */
.jgmn-nav .jgmn-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* Items may shrink and their labels wrap, so the bar never runs off the
   right of the screen however many/long the top-level names are. */
.jgmn-item-d0 {
	min-width: 0;
}

.jgmn-item-d0 > .jgmn-top-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 16px;
	line-height: 1.2;
	white-space: normal;
	text-align: center;
}

/* Labels can contain <br> for two-line names */
.jgmn-top-link .jgmn-label {
	text-align: center;
}

.jgmn-caret {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	flex: 0 0 auto;
	transition: transform 0.18s ease;
}

.jgmn-item-d0 > .jgmn-top-link {
	transition: box-shadow 0.15s ease, color 0.15s ease;
}

/* ------------------------------------------------------------------ */
/* Mega panel (desktop)                                                */
/* ------------------------------------------------------------------ */

.jgmn-panel {
	display: none;
}

.jgmn-expand,
.jgmn-toggle,
.jgmn-close,
.jgmn-drawer-head,
.jgmn-pane-head,
.jgmn-pane-parent,
.jgmn-pane-lead {
	display: none;
}

/* Columns built by the front-end script - desktop only. The original list
   stays in the markup for the mobile drawer and when JS is unavailable. */
.jgmn-built {
	display: none;
}

@media (min-width: 992px) {

	/* Single-row bar: items shrink and long labels wrap inside their own
	   box instead of pushing the bar onto a second line or off-screen. */
	.jgmn-nav .jgmn-bar {
		flex-wrap: nowrap;
	}

	/* Equal-width buttons: every top-level item takes the same share of the
	   bar, labels wrap inside as needed (Currys-style uniform boxes). */
	.jgmn-item-d0 {
		position: static;
		flex: 1 1 0;
		/* Equal widths, but capped so a short bar (e.g. three departments)
		   does not stretch each button across the screen. */
		max-width: 260px;
	}

	.jgmn-panel {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-top: 1px solid #e2e2e2;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
		z-index: 9991;
		/* Taller than the screen: scroll inside the panel rather than
		   scrolling the page behind it (JS refines the exact height). */
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Closed state: invisible and out of the way of clicks/hover so it
		   never blocks the page while hidden, but still transitions in
		   smoothly rather than popping open instantly. */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
	}

	/* Panel opening: hover goes through JS with a short intent delay (so
	   skimming the mouse across the bar does not open panels); keyboard
	   focus opens instantly via :focus-within. */
	.jgmn-item-d0:focus-within > .jgmn-panel,
	.jgmn-item-d0.jgmn-open > .jgmn-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
	}

	.jgmn-item-d0:hover > .jgmn-top-link,
	.jgmn-item-d0:focus-within > .jgmn-top-link,
	.jgmn-item-d0.jgmn-open > .jgmn-top-link {
		box-shadow: inset 0 -3px 0 #1a1a1a;
	}

	.jgmn-item-d0:hover > .jgmn-top-link .jgmn-caret,
	.jgmn-item-d0:focus-within > .jgmn-top-link .jgmn-caret,
	.jgmn-item-d0.jgmn-open > .jgmn-top-link .jgmn-caret {
		transform: rotate(225deg) translateY(2px);
	}

	.jgmn-panel-inner {
		display: flex;
		align-items: stretch;
		max-width: 1280px;
		margin: 0 auto;
		padding: 28px 24px;
		gap: 24px;
		text-align: left;
	}

	/* Built columns: each holds as near the same number of entries as the
	   content allows, and a category running on into the next column is
	   headed again there. */
	.jgmn-built {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		gap: 36px;
	}

	.jgmn-built .jgmn-col {
		flex: 1 1 0;
		min-width: 0;
	}

	.jgmn-frag {
		margin-bottom: 24px;
	}

	.jgmn-frag:last-child {
		margin-bottom: 0;
	}

	.jgmn-frag-links {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Fallback used when JS has not run: the browser flows the original
	   list into columns (headings are not repeated in that case). */
	.jgmn-cols {
		flex: 1 1 auto;
		column-gap: 36px;
	}

	.jgmn-cols-1 {
		column-count: 1;
	}

	.jgmn-cols-2 {
		column-count: 2;
	}

	.jgmn-cols-3 {
		column-count: 3;
	}

	/* Categories may run on from one column to the next, so they are not
	   kept whole - only individual entries are. */
	.jgmn-group {
		min-width: 0;
		margin: 0 0 24px;
	}

	.jgmn-col-links .jgmn-item-d2,
	.jgmn-colbreak {
		break-inside: avoid;
	}

	/* Heading repeated by the front-end script at the top of a column a
	   category carries on into. It must not force a break of its own - it is
	   inserted exactly where the browser already broke. */
	.jgmn-colbreak {
		list-style: none;
	}

	/* Never leave a heading stranded at the foot of a column. */
	.jgmn-col-heading {
		break-after: avoid;
	}

	/* Panel typography: left-aligned, sentence-calm (overrides any
	   uppercase/centring the theme applies to nav links). */
	.jgmn-panel a,
	.jgmn-panel .jgmn-label {
		text-transform: none;
		letter-spacing: normal;
		text-align: left;
	}

	.jgmn-col-heading {
		display: block;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.35;
		padding: 4px 8px 10px;
		margin-bottom: 6px;
		border-bottom: 1px solid #e6e6e6;
		transition: background-color 0.12s ease, color 0.12s ease;
	}

	.jgmn-col-links .jgmn-link {
		display: block;
		font-size: 13px;
		line-height: 1.4;
		padding: 5px 8px;
		border-radius: 3px;
		color: #444;
		transition: background-color 0.12s ease, color 0.12s ease;
	}

	/* Hover/focus: highlight the whole entry instead of underlining it. */
	.jgmn-nav .jgmn-col-links .jgmn-link:hover,
	.jgmn-nav .jgmn-col-links .jgmn-link:focus,
	.jgmn-nav .jgmn-col-heading:hover,
	.jgmn-nav .jgmn-col-heading:focus {
		background-color: #2d3387;
		color: #fff;
		text-decoration: none;
	}

	.jgmn-nav .jgmn-col-links .jgmn-link:hover .jgmn-label,
	.jgmn-nav .jgmn-col-links .jgmn-link:focus .jgmn-label,
	.jgmn-nav .jgmn-col-heading:hover .jgmn-label,
	.jgmn-nav .jgmn-col-heading:focus .jgmn-label {
		color: #fff;
		text-decoration: none;
	}

	/* Advert column on the right (holds one or two advert boxes) */
	.jgmn-media-col {
		flex: 0 0 320px;
		max-width: 320px;
		border-left: 1px solid #eee;
		padding-left: 24px;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.jgmn-media {
		width: 100%;
	}

	.jgmn-media-img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 420px;
		object-fit: cover;
		border-radius: 4px;
	}

	/* Second advert (revealed by JS when the panel is tall enough) */
	.jgmn-media-2 {
		padding-top: 24px;
		border-top: 1px solid #eee;
	}

	/* Caption under the advert image */
	.jgmn-media-caption {
		margin-top: 10px;
		font-size: 13px;
		line-height: 1.45;
		text-align: left;
		text-transform: none;
	}

	.jgmn-cap {
		display: block;
		color: #1a1a1a;
	}

	a.jgmn-cap:hover .jgmn-cap-name {
		text-decoration: underline;
	}

	.jgmn-cap-name {
		display: block;
		margin-bottom: 2px;
	}

	.jgmn-cap-line {
		display: block;
	}

	/* Short sub-category description */
	.jgmn-cap-desc {
		display: block;
		color: #555;
		margin-bottom: 6px;
	}

	/* Highlighted product block inside a category caption */
	.jgmn-cap-product {
		display: block;
		color: #1a1a1a;
		margin-top: 4px;
		padding-top: 6px;
		border-top: 1px solid #eee;
	}

	.jgmn-cap-product:hover .jgmn-cap-name {
		text-decoration: underline;
	}

	/* "Shop all ..." call to action */
	.jgmn-cap-cta {
		display: block;
		margin-top: 8px;
		font-weight: 700;
		color: #1a1a1a;
	}

	.jgmn-cap-cta:hover {
		text-decoration: underline;
	}

	.jgmn-cap-pop {
		display: block;
		margin-top: 4px;
		color: #b45309;
		font-weight: 600;
	}

	.jgmn-cap-stock {
		display: block;
		margin-top: 2px;
		color: #d40000;
		font-weight: 700;
	}

	.jgmn-cap-sale {
		display: inline-block;
		background: #d40000;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		padding: 2px 7px;
		border-radius: 3px;
		margin-right: 6px;
	}

	.jgmn-cap-name {
		font-weight: 600;
	}

	.jgmn-cap-price {
		white-space: nowrap;
	}

	.jgmn-cap-price del {
		color: #888;
		margin-right: 4px;
	}

	.jgmn-cap-price ins {
		text-decoration: none;
		font-weight: 700;
	}

	.jgmn-cap-save {
		color: #d40000;
		font-weight: 600;
		white-space: nowrap;
	}

	/* Call-to-action buttons under the advert (only output when set) */
	.jgmn-actions {
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid #eee;
	}

	/* No advert above them: sit at the top of the column cleanly */
	.jgmn-media-col > .jgmn-actions:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.jgmn-actions-heading {
		display: block;
		margin-bottom: 10px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: #777;
	}

	.jgmn-action {
		display: block;
		margin-bottom: 8px;
		padding: 10px 14px;
		border: 1px solid #d5d5d5;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 600;
		text-align: center;
		color: #1a1a1a;
		transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
	}

	.jgmn-action:last-child {
		margin-bottom: 0;
	}

	.jgmn-action:hover {
		background-color: #1a1a1a;
		border-color: #1a1a1a;
		color: #fff;
	}

	/* Image-only panel (top-level item with images but no sub-items) */
	.jgmn-panel-media-only {
		justify-content: flex-end;
	}

	.jgmn-panel-media-only .jgmn-media-col {
		border-left: 0;
		padding-left: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile drawer (< 992px)                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 991px) {

	.jgmn-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 8px 12px;
		padding: 8px 12px;
		background: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		color: #fff;
	}

	.jgmn-toggle-icon {
		display: inline-flex;
		flex-direction: column;
		gap: 4px;
		width: 18px;
	}

	.jgmn-toggle-icon span {
		display: block;
		width: 18px;
		height: 2px;
		background: #fff;
		transform-origin: center;
		transition: transform 0.2s ease, opacity 0.15s ease;
	}

	.jgmn-drawer-open .jgmn-toggle-icon span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.jgmn-drawer-open .jgmn-toggle-icon span:nth-child(2) {
		opacity: 0;
	}

	.jgmn-drawer-open .jgmn-toggle-icon span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* Drawer slides in from the right; sub-panes slide in over it. */
	.jgmn-bar-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(360px, 92vw);
		background: #fff;
		z-index: 99999;
		overflow: hidden;
		transform: translateX(105%);
		transition: transform 0.25s ease;
		box-shadow: -2px 0 18px rgba(0, 0, 0, 0.25);
	}

	/* translateX(0) rather than none: keeping a transform makes the drawer
	   the containing block for the fixed-position panes inside it. */
	.jgmn-drawer-open .jgmn-bar-wrap {
		transform: translateX(0);
	}

	.jgmn-drawer-head {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 44px;
		padding: 0 6px;
		border-bottom: 1px solid #eee;
	}

	.jgmn-close {
		display: inline-block;
		background: none;
		border: 0;
		font-size: 26px;
		line-height: 1;
		padding: 6px 10px;
		cursor: pointer;
		color: #1a1a1a;
	}

	.jgmn-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 99998;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}

	.jgmn-drawer-open .jgmn-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.25s ease, visibility 0s linear 0s;
	}

	/* Level 1 (departments) fills the drawer below its head and scrolls. */
	.jgmn-nav .jgmn-bar {
		display: block;
		position: absolute;
		top: 44px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.jgmn-item {
		position: relative;
		border-bottom: 1px solid #f0f0f0;
	}

	.jgmn-item-d0 > .jgmn-top-link,
	.jgmn-col-heading,
	.jgmn-link {
		display: block;
		padding: 12px 44px 12px 16px;
		font-size: 15px;
	}

	.jgmn-col-heading {
		font-weight: 600;
		padding-left: 28px;
	}

	.jgmn-link {
		padding-left: 40px;
		font-size: 14px;
		color: #444;
	}

	.jgmn-caret {
		display: none;
	}

	/* Accordion expander button */
	.jgmn-expand {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 44px;
		height: 44px;
		background: none;
		border: 0;
		cursor: pointer;
	}

	/* Chevron points right: tapping opens the next level */
	.jgmn-expand::before {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		margin: 0 auto;
		border-right: 2px solid #1a1a1a;
		border-bottom: 2px solid #1a1a1a;
		transform: rotate(-45deg);
	}

	/* ---------------------------------------------------------------- */
	/* Sliding sub-panes                                                 */
	/* ---------------------------------------------------------------- */

	/* Fixed inside the transformed drawer, so a pane always covers the
	   level above it regardless of how far that level is scrolled. */
	.jgmn-item-d0 > .jgmn-panel,
	.jgmn-item-d1 > .jgmn-col-links {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
		z-index: 2;
	}

	/* Level 2 sits below the drawer head; level 3 fills its parent pane. */
	.jgmn-item-d0 > .jgmn-panel {
		top: 44px;
	}

	.jgmn-item-d1 > .jgmn-col-links {
		top: 0;
	}

	.jgmn-item.jgmn-open > .jgmn-panel,
	.jgmn-item.jgmn-open > .jgmn-col-links {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s linear 0s;
	}

	/* Back control, kept in view while the pane scrolls */
	.jgmn-pane-head {
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		background: #fff;
		border-bottom: 1px solid #eee;
		z-index: 1;
	}

	.jgmn-back {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 13px 16px;
		background: none;
		border: 0;
		font: inherit;
		font-size: 14px;
		font-weight: 600;
		color: #1a1a1a;
		cursor: pointer;
	}

	.jgmn-back::before {
		content: "";
		width: 8px;
		height: 8px;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	/* The category itself as the first, bold option in its own pane */
	.jgmn-pane-parent {
		display: block;
		padding: 14px 16px;
		font-size: 15px;
		font-weight: 700;
		border-bottom: 1px solid #f0f0f0;
	}

	.jgmn-pane-lead {
		display: block;
		border-bottom: 0;
	}

	/* Sub-levels are their own pane, so no indenting is needed */
	.jgmn-col-heading,
	.jgmn-link {
		padding-left: 16px;
	}

	/* One heading per category on mobile: the pane is a single list, so the
	   repeated column headings are not needed. */
	.jgmn-colbreak {
		display: none;
	}

	/* No images on mobile - nothing is downloaded */
	.jgmn-media-col {
		display: none;
	}

}

/* Lock page scroll while the drawer is open */
.jgmn-no-scroll {
	overflow: hidden;
}