/* Noxgear Shop Skin 0.1.3, menus: the desktop SHOP dropdown (templates/parts/dropdown.php).
   One block of markup inside the theme's .c-nav-main__subnav > .c-subnav; the theme opens and closes it. Loaded site-wide
   after nox-shop's nav.css. Same pieces as the shop page: group name + sub line, hero tiles, slim dark bars, text links.
   Buttons: blue on the white panel, lime on the black sale strip. */
/* not while nox-shop's Navigation mode is "preview" and the new panel is still hidden: shoppers then see the old panel */
.c-nav-main__subnav:has(.nxk-dd):not(:has([data-nox-shop-nav="new"][hidden])){background:#fff;border:0;box-shadow:0 18px 40px rgba(12,13,13,.25)}
.nxk-dd{--ink:#0c0d0d;--blue:#0c71c7;--lime:#ccff00;--volt:#caff0f;--card:#2a2a2d;--line:#e6e8eb;--grey:#5c5c5c;--head:var(--wp--preset--font-family--headline,"Rift",sans-serif);color:var(--ink);font-family:var(--wp--preset--font-family--primary,"Apercu Regular","Apercu",sans-serif);font-size:16px;line-height:1.35;text-align:left}
.nxk-dd *{box-sizing:border-box}
.nxk-dd a{color:inherit;text-decoration:none}
.nxk-dd p{margin:0}
.nxk-dd img{max-width:none}
.nxk-dd__ar{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* group heading + sub line */
.nxk-dd .nxk-dd__gh{display:inline-flex;align-items:center;gap:.4em;font:italic 700 1.55rem/.95 var(--head);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.nxk-dd__gh .nxk-dd__ar{font-size:.6em;margin-top:.05em}
.nxk-dd .nxk-dd__gs{margin-top:6px;font-size:.86rem;line-height:1.35;color:var(--grey)}
.nxk-dd__gs span{display:inline-block}
.nxk-dd__b{display:grid;gap:8px;margin-top:12px}

/* hero tile */
.nxk-dd .nxk-dd__ht{position:relative;display:block;height:248px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#55565b 0%,#2e2f33 55%,#1b1c1e 100%);color:#fff}
.nxk-dd .nxk-dd__ht--lh{background:linear-gradient(135deg,#4d3b5c 0%,#2a2131 55%,#151218 100%)}
.nxk-dd .nxk-dd__ht--39g{background:linear-gradient(135deg,#34495a 0%,#1f2a33 55%,#101418 100%)}
.nxk-dd__ht img{position:absolute;right:0;top:0;width:auto;height:84%}
.nxk-dd__ht--39g img{right:auto;left:50%;top:4%;height:72%;transform:translateX(-50%)}
.nxk-dd__ht::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.82) 100%)}
.nxk-dd__ht-t{position:absolute;z-index:1;left:14px;right:14px;bottom:13px}
.nxk-dd__ht-n{display:block;font:italic 700 1.5rem/.95 var(--head);letter-spacing:.01em;text-transform:uppercase}
.nxk-dd__ht-k{display:block;margin-top:3px;font:italic 700 .82rem/1 var(--head);letter-spacing:.03em;text-transform:uppercase;color:#c9cacf}
.nxk-dd__ht-p{display:block;margin-top:7px;font-size:.92rem;line-height:1.2}
.nxk-dd__ht-p b{font-weight:700}
.nxk-dd__ht-p s{margin-left:5px;font-size:.82rem;color:#a9abb1}
.nxk-dd__save{position:absolute;z-index:2;top:0;right:0;padding:7px 10px 6px 12px;border-radius:0 12px 0 12px;background:var(--lime);color:var(--ink);font:italic 700 .8rem/1 var(--head);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.nxk-dd__save b{font-size:1.25em}

/* slim dark bar */
.nxk-dd .nxk-dd__mc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;height:56px;padding:1px 0 0 14px;border-radius:10px;overflow:hidden;background:var(--card);color:#fff}
.nxk-dd__mc img{position:absolute;right:0;top:0;width:46%;height:100%;object-fit:cover;object-position:var(--obj,50% 50%);-webkit-mask:linear-gradient(90deg,transparent,#000 42%);mask:linear-gradient(90deg,transparent,#000 42%)}
.nxk-dd__mc--lamp img{right:6px;width:34%;object-fit:contain;-webkit-mask:none;mask:none}
.nxk-dd__mc-n{position:relative;z-index:1;font:italic 700 1.08rem/1 var(--head);letter-spacing:.01em;text-transform:uppercase}
.nxk-dd__mc-p{position:relative;z-index:1;font-size:.78rem;line-height:1}
.nxk-dd__mc-p b{font-weight:700}
.nxk-dd__mc-p i{margin-left:7px;font:700 .8rem/1 var(--head);letter-spacing:.05em;text-transform:uppercase;color:var(--lime)}

/* text links */
.nxk-dd .nxk-dd__tl{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 1.05rem/1 var(--head);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.nxk-dd__tl span{font:400 .8rem/1 var(--wp--preset--font-family--primary,"Apercu Regular",sans-serif);letter-spacing:0;text-transform:none;color:var(--grey)}
.nxk-dd__tl .nxk-dd__ar{font-size:.85em;color:var(--blue)}
.nxk-dd__links{display:grid;align-content:center;gap:12px;height:56px}
.nxk-dd__more{display:flex;flex-direction:column;flex:1;margin-top:12px;border-top:1px solid var(--line)}
.nxk-dd__more .nxk-dd__tl{height:50px;border-bottom:1px solid var(--line)}
.nxk-dd .nxk-dd__btn{display:flex;align-items:center;justify-content:center;height:44px;margin-top:auto;padding:1px 24px 0;border-radius:999px;background:var(--blue);color:#fff;font:700 1.05rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}

/* sale strip: the banner headline from nox-shop's settings */
.nxk-dd .nxk-dd__sale{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nxk-dd__salehead{font:italic 700 1.35rem/1 var(--head);letter-spacing:.02em;text-transform:uppercase}
.nxk-dd__salehead em{display:inline-block;margin-left:.15em;padding:4px 8px 1px;font-style:italic}
.nxk-dd__salecta{display:inline-flex;align-items:center;gap:.5em;font:700 1.05rem/1 var(--head);letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}

/* ---------- desktop (the theme's desktop nav starts at 64rem) ---------- */
@media (min-width:1024px){
	.nxk-dd__cols{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1.02fr) minmax(0,.86fr) minmax(0,.74fr);gap:36px;padding:28px 0 26px}
	.nxk-dd__col{display:flex;flex-direction:column;min-width:0}
	.nxk-dd .nxk-dd__gs{min-height:2.7em}
	.nxk-dd__b--2{grid-template-columns:1fr 1fr;column-gap:10px}
	.nxk-dd__sale--top{display:none !important}
	/* black strip across the whole panel, wider than the theme's centred container */
	.nxk-dd .nxk-dd__sale--bottom{height:50px;background:var(--ink);color:#fff;box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax)}
	.nxk-dd__sale--bottom .nxk-dd__salehead em{background:var(--volt);color:var(--ink)}
}
@media (min-width:1024px) and (max-width:1180px){
	.nxk-dd__cols{gap:26px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.86fr) minmax(0,.62fr)}
	.nxk-dd__ht-n{font-size:1.3rem}
	.nxk-dd .nxk-dd__gh{font-size:1.35rem}
}

/* ---------- below the desktop nav: the groups stacked in the theme's slide-in panel. Since 0.1.1 SHOP on a phone goes
   straight to /shop (nox-shop's nav.js), so this only shows if that script is not running ---------- */
@media (max-width:1023px){
	.c-subnav:has(.nxk-dd):not(:has([data-nox-shop-nav="new"][hidden])) .back-one-level{background:#fff;color:#0c0d0d;border-bottom:1px solid #e6e8eb;font-family:var(--wp--preset--font-family--headline,"Rift",sans-serif);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
	.nxk-dd{padding:0 0 150px} /* the theme's panel runs past the bottom of the screen */
	.nxk-dd .nxk-dd__sale--top{height:46px;margin:0 -24px;padding:0 24px;background:var(--volt);color:var(--ink)}
	.nxk-dd__sale--top .nxk-dd__salehead{font-size:1.2rem}
	.nxk-dd__sale--top .nxk-dd__salehead em{background:var(--ink);color:var(--volt)}
	.nxk-dd__sale--top .nxk-dd__ar{font-size:1.1rem}
	.nxk-dd__sale--bottom{display:none !important}
	.nxk-dd__col{padding-top:22px}
	.nxk-dd__col + .nxk-dd__col{margin-top:22px;padding-top:20px;border-top:2px solid var(--ink)}
	.nxk-dd .nxk-dd__gh{font-size:1.75rem}
	.nxk-dd .nxk-dd__gs{font-size:.92rem}
	.nxk-dd__b{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
	.nxk-dd .nxk-dd__ht{height:214px}
	.nxk-dd .nxk-dd__mc{height:60px}
	.nxk-dd__mc-n{font-size:1.02rem}
	/* a group with one hero product: a wide tile, photo on the right */
	.nxk-dd__b:not(.nxk-dd__b--2) .nxk-dd__ht{grid-column:1 / -1;height:132px}
	.nxk-dd__b:not(.nxk-dd__b--2) .nxk-dd__ht img{left:auto;right:6%;top:6%;height:112%;transform:none}
	.nxk-dd__b:not(.nxk-dd__b--2) .nxk-dd__ht::after{background:linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 50%,rgba(0,0,0,0) 78%)}
	.nxk-dd__b:not(.nxk-dd__b--2) .nxk-dd__ht-t{right:46%}
	.nxk-dd__links{grid-column:1 / -1;height:auto;gap:0;margin-top:-6px}
	.nxk-dd__links .nxk-dd__tl{height:50px;border-bottom:1px solid var(--line);font-size:1.15rem}
	.nxk-dd__more .nxk-dd__tl{font-size:1.15rem}
	.nxk-dd .nxk-dd__btn{height:48px;margin-top:22px;font-size:1.1rem}
}
@media (max-width:359px){
	.nxk-dd .nxk-dd__mc{padding-left:11px}
	.nxk-dd__mc-n{font-size:.95rem}
	.nxk-dd__ht-n{font-size:1.35rem}
}
