/* Termékeink: the header entry, the three group views and the trail above the
   product list. Colours, corners and the heading face come from the template
   tokens; the fallbacks keep the bare reference page readable. Rules are
   scoped by two classes so that the template's own `button` colouring does
   not paint every group name in the accent colour. */
.cnav-entry{display:flex;align-items:center;min-width:0;margin-inline-end:auto;flex-shrink:0}
.cnav-entry[hidden]{display:none}
/* The header wraps rather than squeezing: a long shop name takes its own row
   and the header's last item (its actions) stays on the right of its row. */
header:has(> .cnav-entry:not([hidden])){flex-wrap:wrap}
.brand:has(+ .cnav-entry:not([hidden])){flex:0 1 auto}
.cnav-entry:not([hidden]) ~ :last-child{margin-inline-start:auto}
.cnav-entry .cnav-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border:0;border-radius:var(--radius,8px);background:var(--accent,var(--blue,#2c6b9d));color:var(--on-accent,#fff);font:inherit;font-weight:700;letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.cnav-entry .cnav-toggle[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--on-accent,#fff),0 0 0 2px var(--accent,#2c6b9d)}
.cnav-toggle-icon{flex:0 0 16px;width:16px;height:12px;background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat}
.cnav-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the sheet: one modal dialog for all three views */
.cnav-dialog{margin:0;padding:0;border:0;max-width:none;max-height:none;background:transparent;color:var(--ink,var(--text,#172130))}
.cnav-dialog::backdrop{background:rgb(10 14 22 / .42)}
.cnav-dialog[open]{position:fixed;display:flex;flex-direction:column;inset:var(--cnav-top,72px) 0 auto 0;margin-inline:auto;width:min(1440px,calc(100vw - 32px));max-height:calc(100dvh - var(--cnav-top,72px) - 16px);background:var(--surface,var(--panel,#fff));border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);box-shadow:0 24px 64px rgb(0 0 0 / .24);overflow:hidden}
.cnav-dialog[open][data-style="oszlopok"][data-mobile="false"]{height:min(680px,calc(100dvh - var(--cnav-top,72px) - 16px))}
.cnav-dialog[open][data-style="fa"]{inset:0 auto 0 0;margin:0;width:min(460px,92vw);height:100dvh;max-height:none;border-width:0 1px 0 0;border-radius:0 var(--radius,8px) var(--radius,8px) 0}
.cnav-dialog[open]{overflow:clip}
.cnav-head{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line,#ced9e5)}
.cnav-dialog .cnav-title{margin:0;font-family:var(--design-heading-font,inherit);font-size:1.3rem;line-height:1.2;white-space:nowrap}
/* a host's own label rule (small, muted) must not shrink the search: below 16px a phone zooms in */
.cnav-search{flex:1;display:flex;min-width:0;font-size:1rem;color:inherit}
.cnav-dialog .cnav-search-input{width:100%;min-height:44px;padding:9px 14px;border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);background:var(--bg,var(--input,#fff));color:inherit;font:inherit}
.cnav-status{flex:0 0 auto;margin:0;padding:10px 20px 0;color:var(--muted,#506479);font-size:.86rem}
.cnav-status:empty{display:none}
.cnav-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 20px 22px;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable}
.cnav-dialog[data-style="oszlopok"][data-mobile="false"] .cnav-body{display:flex;overflow:hidden;padding:0}

/* shared row look */
.cnav-dialog .cnav-close,.cnav-dialog .cnav-back,.cnav-trail .cnav-browse{min-height:44px;padding:9px 16px;border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);background:var(--surface,#fff);color:var(--ink,#172130);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.cnav-dialog .cnav-item,.cnav-dialog .cnav-result,.cnav-dialog .cnav-rail-item,.cnav-dialog .cnav-link,.cnav-dialog .cnav-node,.cnav-dialog .cnav-group-title{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 12px;border:0;border-radius:var(--radius,8px);background:transparent;color:var(--ink,#172130);font:inherit;text-align:left;cursor:pointer}
.cnav-dialog .cnav-item:hover,.cnav-dialog .cnav-result:hover,.cnav-dialog .cnav-rail-item:hover,.cnav-dialog .cnav-link:hover,.cnav-dialog .cnav-node:hover,.cnav-dialog .cnav-group-title:hover{background:var(--bg,#f1f5f9)}
.cnav-dialog [aria-current="true"]:not(.cnav-all){font-weight:700;box-shadow:inset 3px 0 0 var(--accent,#2c6b9d)}
.cnav-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.cnav-count{flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--bg,#f1f5f9);color:var(--muted,#506479);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.5}
.cnav-count[hidden]{display:none}
.cnav-chevron{flex:0 0 auto;width:8px;height:8px;margin-inline:2px 4px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg;opacity:.65}
.cnav-dialog .cnav-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 16px;border:0;border-radius:var(--radius,8px);background:var(--accent,#2c6b9d);color:var(--on-accent,#fff);font:inherit;font-weight:700;cursor:pointer;text-align:left}
.cnav-dialog .cnav-all .cnav-count{background:rgb(255 255 255 / .22);color:inherit}
.cnav-dialog button:focus-visible,.cnav-trail button:focus-visible,.cnav-entry .cnav-toggle:focus-visible,.cnav-dialog .cnav-search-input:focus-visible{outline:3px solid var(--accent,#2c6b9d);outline-offset:2px}
.cnav-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:0;padding:0;list-style:none;color:var(--muted,#506479);font-size:.9rem}
.cnav-crumbs li{display:flex;align-items:center}
.cnav-crumbs li+li::before{content:'›';margin-inline:4px;opacity:.7}
.cnav-dialog .cnav-crumb,.cnav-trail .cnav-crumb{min-height:34px;padding:4px 6px;border:0;border-radius:var(--radius,8px);background:transparent;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cnav-crumb-current{padding:4px 6px;color:var(--ink,#172130);font-weight:700}
.cnav-hidden,.cnav-empty{margin:16px 0 0;color:var(--muted,#506479);font-size:.86rem}

/* oszlopok: rail + columns */
.cnav-columns{flex:1;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);min-height:0;width:100%}
.cnav-rail{margin:0;padding:12px 10px;list-style:none;overflow:auto;border-right:1px solid var(--line,#ced9e5);background:color-mix(in srgb,var(--bg,#f1f5f9) 55%,transparent)}
.cnav-dialog .cnav-rail-item[aria-pressed="true"]{background:var(--surface,#fff);box-shadow:inset 3px 0 0 var(--accent,#2c6b9d);font-weight:700}
.cnav-dialog .cnav-rail-item.cnav-on-path .cnav-name{text-decoration:underline;text-decoration-color:var(--accent,#2c6b9d);text-underline-offset:4px}
.cnav-columns-panel{min-width:0;overflow:auto;padding:20px 24px 24px}
.cnav-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:18px}
.cnav-panel-head .cnav-crumbs{flex-basis:100%}
.cnav-dialog .cnav-panel-title{flex:1 1 220px;margin:0;font-family:var(--design-heading-font,inherit);font-size:1.45rem;line-height:1.2;overflow-wrap:anywhere}
.cnav-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px 26px;align-items:start}
.cnav-group{min-width:0}
.cnav-dialog .cnav-group-head{margin:0 0 4px;font-size:1rem}
.cnav-dialog .cnav-group-title{font-weight:700;border-bottom:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px) var(--radius,8px) 0 0}
.cnav-group-list{margin:4px 0 0;padding:0;list-style:none}
.cnav-group-list li{display:flex;align-items:center;gap:2px}
.cnav-dialog .cnav-link{min-height:38px;padding:6px 10px;font-size:.93rem}
.cnav-dialog .cnav-deeper{display:grid;place-items:center;flex:0 0 38px;width:38px;min-height:38px;padding:0;border:0;border-radius:var(--radius,8px);background:transparent;color:var(--muted,#506479);cursor:pointer}
.cnav-dialog .cnav-deeper:hover{background:var(--bg,#f1f5f9);color:var(--ink,#172130)}
.cnav-dialog .cnav-more{min-height:38px;padding:6px 10px;border:0;background:transparent;color:var(--accent,#2c6b9d);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* kártyák and the mobile list */
.cnav-drill-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:18px}
.cnav-drill-head .cnav-crumbs{flex:1 1 260px}
.cnav-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.cnav-cards li{display:flex}
.cnav-dialog .cnav-card{position:relative;display:grid;gap:6px;align-content:start;width:100%;min-height:124px;padding:20px 46px 18px 20px;border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);background:var(--surface,#fff);color:var(--ink,#172130);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.cnav-dialog .cnav-card:hover{border-color:var(--accent,#2c6b9d);box-shadow:0 10px 26px rgb(0 0 0 / .09)}
.cnav-dialog .cnav-card .cnav-name{font-family:var(--design-heading-font,inherit);font-size:1.2rem;font-weight:var(--design-brand-weight,750);line-height:1.22}
.cnav-card-meta{color:var(--muted,#506479);font-size:.86rem;font-weight:600}
.cnav-card-hint{display:-webkit-box;overflow:hidden;color:var(--muted,#506479);font-size:.8rem;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cnav-dialog .cnav-card .cnav-chevron{position:absolute;top:50%;right:18px;width:11px;height:11px;margin:0;translate:0 -50%;color:var(--accent,#2c6b9d);opacity:1}
.cnav-list{display:grid;margin:0;padding:0;list-style:none}
.cnav-list li+li{border-top:1px solid var(--line,#ced9e5)}
.cnav-dialog .cnav-item{min-height:52px;border-radius:0}
html[data-design-kind="industrial"] .cnav-dialog .cnav-card{border-left:4px solid var(--accent,#2c6b9d)}
html[data-design-kind="editorial"] .cnav-dialog .cnav-card{border-width:0 0 1px;border-radius:0;padding-left:4px}
html[data-design-kind="playful"] .cnav-dialog .cnav-card{border-width:2px;box-shadow:4px 4px 0 var(--line,#ced9e5)}
html[data-design-kind="playful"] .cnav-dialog .cnav-card:hover{box-shadow:6px 7px 0 var(--line,#ced9e5)}

/* fa */
.cnav-tree-wrap>.cnav-all{margin-bottom:12px}
.cnav-tree{margin:0;padding:0;list-style:none}
.cnav-tree .cnav-tree{margin-inline-start:16px;padding-inline-start:10px;border-inline-start:1px solid var(--line,#ced9e5)}
.cnav-row{display:flex;align-items:center;gap:2px}
.cnav-dialog .cnav-twisty{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;padding:0;border:0;border-radius:var(--radius,8px);background:transparent;color:var(--muted,#506479);cursor:pointer}
.cnav-dialog .cnav-twisty::before{content:'';width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg;transition:rotate .15s ease}
.cnav-dialog .cnav-twisty[aria-expanded="true"]::before{rotate:135deg}
.cnav-dialog .cnav-twisty:hover{background:var(--bg,#f1f5f9);color:var(--ink,#172130)}
.cnav-twisty-space{flex:0 0 44px}
.cnav-dialog .cnav-node{flex:1 1 auto;min-width:0;min-height:44px;padding:6px 10px}
.cnav-choice{display:flex;align-items:center;min-width:0;gap:4px}
.cnav-choice>:first-child{flex:1 1 auto;min-width:0}
.cnav-dialog .cnav-go{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;padding:0;border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);background:var(--surface,#fff);color:var(--ink,#172130);font:inherit;font-size:1.3rem;cursor:pointer}
.cnav-dialog .cnav-go:hover{background:var(--bg,#f1f5f9)}
.cnav-dialog .cnav-leaf{cursor:default;opacity:1;color:inherit}
.cnav-dialog .cnav-leaf:hover{background:transparent}

/* search results */
.cnav-results{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.cnav-dialog .cnav-result{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"path count" "name count";column-gap:12px;row-gap:1px}
.cnav-result-path{grid-area:path;color:var(--muted,#506479);font-size:.8rem;overflow-wrap:anywhere}
.cnav-result-name{grid-area:name;font-weight:700;overflow-wrap:anywhere}
.cnav-dialog .cnav-result .cnav-count{grid-area:count;align-self:center}

/* the trail above the product list */
.cnav-trail{display:grid;gap:12px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--line,#ced9e5);border-radius:var(--radius,8px);background:color-mix(in srgb,var(--bg,#f1f5f9) 60%,transparent)}
.cnav-trail[hidden]{display:none}
.cnav-trail-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cnav-trail-top .cnav-crumbs{flex:1 1 240px}
.cnav-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cnav-trail .cnav-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 8px 6px 14px;border:1px solid var(--line,#ced9e5);border-radius:999px;background:var(--surface,#fff);color:var(--ink,#172130);font:inherit;font-size:.9rem;cursor:pointer}
.cnav-trail .cnav-chip:hover{border-color:var(--accent,#2c6b9d)}
.cnav-trail .cnav-chip-more{padding-right:14px;color:var(--accent,#2c6b9d);font-weight:700}

@media(max-width:800px){
  .cnav-dialog[open],.cnav-dialog[open][data-style="fa"]{inset:0;width:100%;height:100dvh;max-height:none;border:0;border-radius:0}
  .cnav-head{flex-wrap:wrap;padding:12px 16px}
  .cnav-search{order:3;flex-basis:100%}
  .cnav-dialog .cnav-close{margin-inline-start:auto}
  .cnav-body{padding:14px 16px 20px}
  .cnav-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .cnav-dialog .cnav-card{min-height:0;padding:14px 32px 14px 14px}
  .cnav-dialog .cnav-card .cnav-name{font-size:1.05rem}
  .cnav-dialog .cnav-card .cnav-chevron{right:13px}
  .cnav-card-hint{display:none}
}
@media(max-width:500px){
  .cnav-entry .cnav-toggle{padding:10px 14px}
  .cnav-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cnav-dialog .cnav-card .cnav-name{font-size:1rem}
  .cnav-card-meta{font-size:.8rem}
}
@media(prefers-reduced-motion:no-preference){.cnav-dialog[open]{animation:cnav-in .16s ease-out}}
@keyframes cnav-in{from{opacity:0;translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.cnav-dialog .cnav-card,.cnav-dialog .cnav-twisty::before{transition:none}}
@media print{.cnav-entry,.cnav-trail,.cnav-dialog{display:none!important}}