/* NikaSport desktop navigation panels. Scoped to .nks-nav-panel; header links and mobile keep theme styles.
   Order: tokens, Blocksy sub-menu reset, layout, groups and rows, tiles, modifiers, states, motion, breakpoints. */

/* 1. Tokens and panel frame */
.nks-nav-item > .nks-nav-panel {
  --nks-ink:#1a1a38; --nks-muted:#4a4863; --nks-accent:#c2136f;
  --nks-paper:#fbfaf8; --nks-mist:#efeef3; --nks-rule:#ece9ef; --nks-rule-strong:#b7b2c2;
  --nks-gap:28px; --nks-row:52px;
  width:min(1180px, calc(100vw - 48px)); padding:0!important;
  background:var(--nks-paper)!important; color:var(--nks-ink);
  border:1px solid #e1dee6!important; border-radius:0!important;
  box-shadow:0 16px 28px rgb(26 26 56 / .13)!important;
  text-transform:none!important; letter-spacing:normal!important;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.45;
}

/* 2. Neutralise Blocksy's simple-dropdown styling inside the panel (the only place !important is needed) */
.nks-nav-panel ul {position:static!important;display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;pointer-events:auto!important;list-style:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.nks-nav-panel li {list-style:none!important;margin:0!important;padding:0!important;border:0!important;min-width:0;}
.nks-nav-panel a {text-transform:none!important;letter-spacing:normal!important;text-decoration:none!important;white-space:normal!important;font-family:inherit!important;transition:background-color .1s,color .1s;}
.nks-nav-panel h3,.nks-nav-panel h4 {font-family:inherit;font-size:17px!important;line-height:1.4!important;font-weight:650!important;color:var(--nks-ink)!important;letter-spacing:normal!important;text-transform:none!important;margin:0 0 8px!important;}

/* 3. Layout: main column + tile column */
.nks-nav-panel .nks-nav-shell {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,36%);padding:0!important;margin:0!important;border:0!important;}
.nks-nav-panel.nks-nav-no-aside .nks-nav-shell {grid-template-columns:minmax(0,1fr);}
.nks-nav-panel .nks-nav-main {display:flex;flex-direction:column;min-width:0;padding:25px 30px 30px;}
.nks-nav-panel .nks-nav-groups {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px var(--nks-gap);}
.nks-nav-panel .nks-nav-all {display:inline-flex!important;align-self:flex-start;align-items:center;gap:15px;min-height:30px;padding:0!important;margin:30px 0 0!important;font-size:15px!important;line-height:1.4!important;font-weight:650!important;color:var(--nks-ink)!important;}
.nks-nav-panel .nks-nav-all > span {color:var(--nks-accent);font-size:20px;}

/* 4. Groups and rows */
.nks-nav-panel .nks-nav-title {font-size:16px!important;text-transform:uppercase!important;letter-spacing:.03em!important;padding-bottom:12px;border-bottom:1px solid var(--nks-rule-strong);margin:0 0 18px!important;}
/* Group subheads sit under the title: smaller, muted, no rule. Sizes keep their lowercase units. */
.nks-nav-panel .nks-nav-subhead {font-size:12.5px!important;font-weight:600!important;color:var(--nks-muted)!important;text-transform:uppercase!important;letter-spacing:.07em!important;margin:0 0 4px!important;}
.nks-nav-panel .nks-nav-subhead.nks-nav-measure-heading {text-transform:none!important;letter-spacing:.02em!important;font-size:13.5px!important;}
.nks-nav-panel .nks-nav-group li {border-bottom:1px solid var(--nks-rule)!important;}
/* The row highlight bleeds 10px past the text; separators stay on the li at column width. */
.nks-nav-panel .nks-nav-model {display:block!important;margin:0 -10px!important;padding:0 10px!important;color:var(--nks-ink)!important;font-size:15px!important;line-height:1.4!important;}
.nks-nav-panel .nks-nav-model-visible {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--nks-row);padding:8px 0;}
.nks-nav-panel .nks-nav-brand {min-width:0;font-weight:500;}
.nks-nav-panel .nks-nav-brand small {display:block;font-size:12px;font-weight:500;letter-spacing:.03em;color:var(--nks-muted);}
.nks-nav-panel .nks-nav-tag {display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--nks-muted);}
.nks-nav-panel .nks-nav-detail {display:block;font-size:15px;line-height:1.35;font-weight:500;}
.nks-nav-panel .nks-nav-measure {flex-shrink:0;color:var(--nks-muted);font-size:13px;font-weight:400;}

/* 5. Tile column */
.nks-nav-panel .nks-nav-accessories {min-width:0;background:var(--nks-mist);padding:27px 20px 24px;border-left:1px solid #e5e1eb;}
.nks-nav-panel .nks-nav-accessories h3 {font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--nks-muted)!important;margin-bottom:14px!important;}
.nks-nav-panel .nks-nav-accessories ul {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.nks-nav-panel .nks-nav-accessory {display:flex!important;align-items:center;gap:10px;min-height:72px;padding:8px 10px!important;margin:0!important;background:#fff!important;border:1px solid transparent;border-radius:8px;font-size:13px!important;line-height:1.35!important;color:var(--nks-ink)!important;}
.nks-nav-panel .nks-nav-accessory img {flex:0 0 56px;width:56px!important;height:56px!important;object-fit:contain!important;padding:4px;border-radius:8px;background:#f6f5f8!important;}
.nks-nav-panel .nks-nav-accessory > span {flex:1;min-width:0;overflow-wrap:break-word;}

/* 6. Panel modifiers (PHP emits data-nks-panel and data-nks-groups) */
/* Long lists flow into three balanced columns instead of leaving grid holes. */
.nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) {--nks-row:36px;}
.nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-groups {display:block;column-count:3;column-gap:var(--nks-gap);}
.nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-group {break-inside:avoid;margin:0 0 20px;}
.nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-all {margin-top:4px!important;}
.nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-model-visible {padding:6px 0;}
/* A single group spreads its rows across the main column. */
.nks-nav-panel[data-nks-groups="1"] .nks-nav-groups {grid-template-columns:minmax(0,1fr);}
.nks-nav-panel[data-nks-groups="1"] .nks-nav-group ul {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--nks-gap);}
/* Ropes: one short 2.5 m list beside a 3 m list spread over three columns. */
.nks-nav-panel[data-nks-panel="ropes"] .nks-nav-groups {grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
.nks-nav-panel[data-nks-panel="ropes"] .nks-nav-group:last-child ul {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--nks-gap);}

/* 6b. Brand-column layout (Half Shoes and Tapes), measured from the mockup "HALF SHOES · A.1": three columns, brand headings with a
   navy rule, plain model rows, two-group aside (400px), See all at the bottom. Panel title stays for screen readers only. */
.nks-nav-brands .nks-nav-title {position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0!important;}
.nks-nav-panel.nks-nav-brands .nks-nav-shell {grid-template-columns:minmax(0,1fr) 400px;}
.nks-nav-panel.nks-nav-brands.nks-nav-no-aside .nks-nav-shell {grid-template-columns:minmax(0,1fr);}
.nks-nav-brands .nks-nav-main {padding:20px 32px 26px;}
.nks-nav-brands .nks-nav-groups {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;align-items:start;}
.nks-nav-brands .nks-nav-col {display:flex;flex-direction:column;min-width:0;}
.nks-nav-brands .nks-nav-group {margin:0;}
.nks-nav-brands .nks-nav-col .nks-nav-group + .nks-nav-group {margin-top:14px;}
.nks-nav-panel.nks-nav-brands h4.nks-nav-brand-head {margin:0!important;padding:10px 12px 9px;border-bottom:1px solid var(--nks-ink);font-size:16px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.4!important;text-transform:none!important;color:var(--nks-ink)!important;}
.nks-nav-brands .nks-nav-col .nks-nav-group + .nks-nav-group .nks-nav-brand-head {padding-top:30px;}
.nks-nav-brands .nks-nav-group li {border-bottom:1px solid #efeef3!important;}
.nks-nav-brands .nks-nav-model {margin:0!important;padding:0 12px!important;font-size:15px!important;font-weight:500;line-height:1.3!important;transition:background-color .12s ease-out,box-shadow .12s ease-out;}
.nks-nav-brands .nks-nav-model-visible {min-height:42px;padding:10px 0;}
.nks-nav-panel.nks-nav-brands .nks-nav-model:hover,.nks-nav-panel.nks-nav-brands .nks-nav-model:focus-visible {background:#efeef3!important;color:var(--nks-ink)!important;box-shadow:inset 3px 0 0 #ec1f94;}
.nks-nav-brands .nks-nav-all {margin:auto 0 0!important;padding-top:26px!important;min-height:0;gap:10px;font-size:15px!important;font-weight:600!important;line-height:1.2!important;}
.nks-nav-brands .nks-nav-main {display:flex;flex-direction:column;}
.nks-nav-brands .nks-nav-all > span {color:#ec1f94;font-size:inherit;}
.nks-nav-panel.nks-nav-brands .nks-nav-zone {display:flex;flex-direction:column;gap:18px;padding:22px 26px 26px;background:var(--nks-mist);border-left:0;}
.nks-nav-brands .nks-nav-zone-group {display:flex;flex-direction:column;gap:10px;}
.nks-nav-panel.nks-nav-brands .nks-nav-zone h3 {margin:0!important;font-size:14.5px!important;font-weight:600!important;letter-spacing:normal!important;text-transform:none!important;line-height:1.4!important;color:var(--nks-ink)!important;}
.nks-nav-brands .nks-nav-zone ul {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.nks-nav-brands .nks-nav-zone .nks-nav-accessory {gap:11px;min-height:0;padding:7px!important;background:var(--nks-paper)!important;border:0;border-radius:10px;}
.nks-nav-brands .nks-nav-zone .nks-nav-accessory:hover,.nks-nav-brands .nks-nav-zone .nks-nav-accessory:focus-visible {border-color:transparent;background:var(--nks-paper)!important;box-shadow:inset 0 0 0 1px var(--nks-ink);}
.nks-nav-brands .nks-nav-zone .nks-nav-accessory img {flex:0 0 52px;width:52px!important;height:52px!important;padding:0;border:1px solid #e4e2e9;border-radius:6px;background:#fff!important;object-fit:contain!important;}
.nks-nav-brands .nks-nav-tile-text {display:flex!important;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:48px;}
.nks-nav-brands .nks-nav-tile-name {font-size:13.5px;font-weight:500;line-height:1.25;color:var(--nks-ink);}
.nks-nav-brands .nks-nav-tile-brand {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.04em;color:#4a4863;}

.nks-nav-sr {position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0!important;}

/* 6c. Footer row with a note beside See all (Tapes): mockup gap 24px, note 13.5px muted. */
.nks-nav-brands .nks-nav-foot {display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:auto;padding-top:26px;}
.nks-nav-panel.nks-nav-brands .nks-nav-foot .nks-nav-all {margin:0!important;padding:0!important;}
.nks-nav-brands .nks-nav-note {font-size:13.5px;line-height:1.4;color:#4a4863;}

/* 6d. List variant (Sticks), measured from the mockup "STICKS · A": one list column, header with a right-aligned range,
   a size at the right of each row, 420px aside with one group of two tiles in a row. */
.nks-nav-panel.nks-nav-list .nks-nav-shell {grid-template-columns:minmax(0,1fr) 420px;}
.nks-nav-list .nks-nav-main {padding:10px 32px 24px;}
.nks-nav-list .nks-nav-groups {grid-template-columns:minmax(0,1fr);}
.nks-nav-panel.nks-nav-list h4.nks-nav-brand-head {display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px 9px;text-transform:uppercase!important;}
.nks-nav-list .nks-nav-who {font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:#4a4863;white-space:nowrap;}
.nks-nav-panel.nks-nav-list[data-nks-groups] .nks-nav-group ul {display:block!important;}
.nks-nav-list .nks-nav-model {margin:0!important;}
.nks-nav-list .nks-nav-model-visible {justify-content:space-between;gap:12px;min-height:44px;padding:11px 0;}
.nks-nav-list .nks-nav-brand {font-weight:600;letter-spacing:.01em;}
.nks-nav-list .nks-nav-measure {font-size:13.5px;font-weight:400;color:#4a4863;white-space:nowrap;}
.nks-nav-panel.nks-nav-list .nks-nav-zone {gap:14px;padding:20px 28px 26px;}
.nks-nav-panel.nks-nav-list .nks-nav-zone h3 {font-size:16px!important;letter-spacing:-.01em!important;}
.nks-nav-list .nks-nav-zone ul {gap:12px;}
.nks-nav-list .nks-nav-zone .nks-nav-accessory {gap:12px;padding:8px!important;}
.nks-nav-list .nks-nav-zone .nks-nav-accessory img {flex:0 0 56px;width:56px!important;height:56px!important;}
.nks-nav-list .nks-nav-tile-name {font-size:14px;}

/* 6e. Multi-column list layout (Ropes, Hoops, Balls, Clubs, Ribbons, Accessories) from the mockup panel A. */
.nks-nav-list.nks-nav-cols .nks-nav-groups {grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px;align-items:start;}
.nks-nav-list.nks-nav-cols.nks-nav-cols-2 .nks-nav-groups {grid-template-columns:repeat(2,minmax(0,1fr));}
.nks-nav-list.nks-nav-cols.nks-nav-cols-1 .nks-nav-groups {grid-template-columns:minmax(0,1fr);}
.nks-nav-panel.nks-nav-cols h5.nks-nav-subbrand {display:block;margin:0!important;padding:16px 12px 4px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.08em!important;line-height:1.4!important;text-transform:none!important;color:#4a4863!important;}
.nks-nav-list .nks-nav-brand.nks-nav-w5 {font-weight:500;}
.nks-nav-list .nks-nav-brand.nks-nav-w6 {font-weight:600;}
.nks-nav-list .nks-nav-brand small {display:block;margin-top:3px;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.4;color:#6d6b85;}
.nks-nav-list .nks-nav-model-visible {align-items:center;}

/* 6f. Final-image tweaks: panels without an aside are full width (Ropes); two-column brand panels (Tapes); a second heading block in a column. */
.nks-nav-panel.nks-nav-list.nks-nav-no-aside .nks-nav-shell,.nks-nav-panel.nks-nav-brands.nks-nav-no-aside .nks-nav-shell {grid-template-columns:minmax(0,1fr);}
.nks-nav-brands.nks-nav-bcols-2 .nks-nav-groups {grid-template-columns:repeat(2,minmax(0,1fr));}
.nks-nav-list .nks-nav-col .nks-nav-group + .nks-nav-group .nks-nav-brand-head {padding-top:30px;}
/* 6h. NEW badge on a column heading (owner mockup zip 17): decorative, aria-hidden; the heading's accessible name is
   "YIJOY (new)" through the visually hidden text. The site loads no mono webfont, so a system monospace stack is used. */
.nks-nav-panel.nks-nav-list h4.nks-nav-has-new {justify-content:flex-start;align-items:center;}
.nks-nav-new {display:inline-block;margin-left:-2px;padding:3px 6px;border-radius:3px;background:#c2136f;color:#fff;font:500 9.5px/10px ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.08em;text-transform:none;white-space:nowrap;}

/* 6g. Keyboard focus on rows uses the hover model (lavender row + 3px magenta bar) plus an inset 2px outline, so it never spills into neighbouring rows. */
.nks-nav-panel.nks-nav-brands a.nks-nav-model:focus-visible {outline:2px solid var(--nks-accent,#c2136f)!important;outline-offset:-2px!important;}

/* 7. States */
.nks-nav-panel .nks-nav-model:hover,.nks-nav-panel .nks-nav-model:focus-visible {background:#efeaf0!important;color:var(--nks-accent)!important;}
.nks-nav-panel .nks-nav-model:hover .nks-nav-tag {color:var(--nks-accent);}
.nks-nav-panel .nks-nav-all:hover {color:var(--nks-accent)!important;}
.nks-nav-panel .nks-nav-accessory:hover {border-color:#d3c9d8;background:#fffcfe!important;}
.nks-nav-panel a:focus-visible,.nks-nav-ready > button:focus-visible {outline:2px solid var(--nks-accent,#c2136f)!important;outline-offset:3px;}
/* Before JS initialises, the native hover/focus dropdown keeps working. */
.nks-nav-item:not(.nks-nav-ready):is(:hover,:focus-within) > .nks-nav-panel {visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important;}
/* Once enhanced, the panel is a fixed layer positioned by navigation.js and shown only when open. */
.nks-nav-ready > .nks-nav-panel {display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:fixed!important;inset:auto!important;left:var(--nks-left)!important;top:var(--nks-top)!important;width:var(--nks-width)!important;max-height:var(--nks-max-height)!important;overflow:auto!important;overscroll-behavior:contain;transform:none!important;transition:none!important;z-index:1000!important;}
.nks-nav-ready[data-nks-open="true"] > .nks-nav-panel {display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
/* Items Blocksy moves into its MORE overflow dropdown stay plain category links. */
.sub-menu .nks-nav-item > .nks-nav-panel {display:none!important;}
/* Overflow is a plain category link: do not expose an inert button or arrow.
   CSS restores both immediately when Blocksy moves the item back to the top row. */
.sub-menu .nks-nav-item > .ct-toggle-dropdown-desktop-ghost,
.sub-menu .nks-nav-item > a .ct-toggle-dropdown-desktop {display:none!important;}
/* Blocksy's ghost button is keyboard-only by default; enable its existing arrow-sized hit area. */
.nks-nav-ready > .ct-toggle-dropdown-desktop-ghost {pointer-events:auto!important;z-index:2;cursor:pointer;}
.nks-nav-item > a .ct-toggle-dropdown-desktop {pointer-events:none;}
.nks-nav-item[data-nks-open="true"] > a {box-shadow:inset 0 -3px 0 #c2136f;}
.nks-nav-item > a .ct-toggle-dropdown-desktop svg {transition:transform .15s;}
.nks-nav-item[data-nks-open="true"] > a .ct-toggle-dropdown-desktop svg {transform:rotate(180deg);}

/* 8. Motion (skipped when one panel replaces another) */
@keyframes nks-nav-in {from {opacity:0;transform:translateY(-4px);} to {opacity:1;transform:none;}}
.nks-nav-ready[data-nks-open="true"]:not(.nks-nav-switch) > .nks-nav-panel {animation:nks-nav-in .14s ease-out;}
@media (prefers-reduced-motion:reduce) {
  .nks-nav-panel a {transition:none!important;}
  .nks-nav-ready[data-nks-open="true"] > .nks-nav-panel {animation:none;}
  .nks-nav-item > a .ct-toggle-dropdown-desktop svg {transition:none;}
}

/* 9. Breakpoints (last, so they win over the rules above) */
@media (max-width:1150px) {
  .nks-nav-item > .nks-nav-panel {--nks-gap:18px;}
  .nks-nav-panel .nks-nav-shell {grid-template-columns:minmax(0,1fr) 260px;}
  .nks-nav-panel.nks-nav-brands .nks-nav-shell,.nks-nav-panel.nks-nav-list .nks-nav-shell {grid-template-columns:minmax(0,1fr) 300px;}
  .nks-nav-brands .nks-nav-main {padding:20px 24px 24px;}
  .nks-nav-brands .nks-nav-groups {column-gap:24px;}
  .nks-nav-panel.nks-nav-brands .nks-nav-zone {padding:20px 18px 22px;}
  .nks-nav-brands .nks-nav-zone ul {grid-template-columns:minmax(0,1fr);}
  .nks-nav-panel.nks-nav-no-aside .nks-nav-shell {grid-template-columns:minmax(0,1fr);}
  /* Half Shoes (.nks-nav-brands) keeps its own mockup metrics at every width. */
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-main {padding:22px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-groups {row-gap:20px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-brand {font-size:13px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-detail {font-size:14px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-measure {font-size:12px;}
  .nks-nav-panel .nks-nav-accessories ul {grid-template-columns:minmax(0,1fr);}
}
/* Short laptop screens: keep the long panels inside the viewport. */
@media (max-height:800px) {
  .nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) {--nks-row:28px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-main {padding-top:14px;padding-bottom:14px;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-title {margin-bottom:8px!important;padding-bottom:6px;}
  .nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-group {margin-bottom:10px;}
  .nks-nav-panel[data-nks-panel="accessories"]:not(.nks-nav-cols) .nks-nav-model-visible {padding:3px 0;}
  .nks-nav-panel:not(.nks-nav-brands) .nks-nav-all {min-height:24px;}
}