/* Category flyout (inc/cat-flyout.php + assets/js/cat-flyout.js). Sidebar rows, shared panel, header mega. */

/* ---- Sidebar rows: link + real chevron button ------------------------------ */
.rp-cf-row{position:relative;border-radius:var(--r-8)}
.rp-cf-row+.rp-cf-row{margin-top:var(--space-4)}
.cat-sidebar .rp-cf-row>a.rp-cf-top{margin:0}
.cat-sidebar .rp-cf-row.has-kids>a.rp-cf-top{padding-right:48px}
.rp-cf-tog{position:absolute;top:0;right:0;width:44px;height:44px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r-8);background:transparent;color:var(--muted);cursor:pointer}
.rp-cf-tog svg{width:16px;height:16px;display:block;transition:transform .15s}
.rp-cf-tog:hover,.rp-cf-tog:focus{background:transparent;color:var(--blue)} /* beat GeneratePress button:hover/focus */
.rp-cf-row:hover>a.rp-cf-top,.rp-cf-row.is-open>a.rp-cf-top{background:var(--white)}
.rp-cf-row:hover>.rp-cf-tog,.rp-cf-row.is-open>.rp-cf-tog{color:var(--blue)}
.rp-cf-row.on>a.rp-cf-top{background:var(--blue-tint);color:var(--blue);font-weight:600}
.rp-cf-row.on>.rp-cf-tog{color:var(--blue)}

/* Sidebar layered-nav rows: WooCommerce prints the count after the link → keep it on the same row
   (it wrapped below every value as "(1)", doubling the list height). */
.cat-sidebar .rp-filter li{display:flex;align-items:center;gap:var(--space-8)}
.cat-sidebar .rp-filter li>a{flex:1 1 auto;min-width:0}
.cat-sidebar .rp-filter li>.count{flex:none;margin-left:auto;padding-right:var(--space-12);padding-inline-end:var(--space-12);font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}

/* Product page facts (inc/grade-info.php): a linked badge (model → its category) must not look the same as
   a plain value. Kept here, not in grade-info.css, so the CSS bundle manifest (inc/assets.php) stays valid. */
.gi-badges a.gi-badge{color:var(--link);border-color:var(--blue-line)}
.gi-badges a.gi-badge:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
.gi-badges span.gi-badge{background:transparent;border-color:transparent;padding-left:0;padding-right:0}

/* ---- Shared panel (cloned group) ------------------------------------------- */
.rp-cf-panel[hidden]{display:none}
.rp-cf-panel{background:var(--white);color:var(--ink)}
.rp-cf-panel .rp-cf-head,.rp-cf-mega .rp-cf-head{display:flex;align-items:center;gap:var(--space-12);min-height:44px;padding:0 var(--space-12);margin:0 0 var(--space-8);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:700;color:var(--link);border-radius:var(--r-8);border-bottom:1px solid var(--color-border-subtle)}
.rp-cf-panel .rp-cf-head:hover,.rp-cf-mega .rp-cf-head:hover{background:var(--blue-tint);color:var(--blue-hover)}
.rp-cf-head .cnt,.rp-cf-cols .cnt{margin-left:auto;font-size:var(--fs-12);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.rp-cf-cols{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--cf-rows,12),auto);grid-auto-columns:minmax(200px,auto);column-gap:var(--space-16);row-gap:2px}
.rp-cf-cols a{display:flex;align-items:center;gap:var(--space-12);min-height:36px;height:auto;padding:0 var(--space-12);font-size:var(--fs-13);line-height:var(--lh-13);font-weight:500;color:var(--ink);border-radius:var(--r-8);white-space:nowrap;margin:0}
.rp-cf-cols a:hover{background:var(--blue-tint);color:var(--blue)}
.rp-cf-cols a .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rp-cf-cols a .cnt{flex:none}
.rp-cf-cols a.on{background:var(--blue-tint);color:var(--blue);font-weight:600}
.cat-sidebar .rp-cf-cols a+a,.cat-sidebar .rp-cf-panel a+a{margin-top:0}

/* Desktop flyout: absolutely positioned from <body>, so the shell's overflow:hidden never clips it. */
.rp-cf-panel.is-fly{position:absolute;z-index:70;padding:var(--space-12);border:1px solid var(--line);border-radius:var(--r-12);box-shadow:0 12px 32px rgba(28,28,30,.14);overflow:auto;box-sizing:border-box;animation:rp-cf-in .12s ease-out}
.rp-cf-panel.is-fly::before{content:"";position:absolute;inset:0 auto 0 -12px;width:12px} /* hover bridge to the sidebar edge */

/* Touch / narrow: inline accordion under the row. */
.rp-cf-panel.is-inline{padding-block:var(--space-4) var(--space-8);padding-inline:var(--space-12) 0;border-inline-start:2px solid var(--blue-line);margin-block:var(--space-4) var(--space-8);margin-inline:var(--space-12) 0;background:transparent}
.rp-cf-panel.is-inline .rp-cf-cols{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr}
.rp-cf-panel.is-inline .rp-cf-cols a,.rp-cf-panel.is-inline .rp-cf-head{min-height:44px}
.rp-cf-row.is-acc>.rp-cf-tog svg{transform:rotate(90deg)} /* accordion only; the flyout opens to the right */
.hero-grid-container:has(.rp-cf-panel.is-inline)>.hero-card{align-self:start} /* home: the open accordion must not stretch the hero */

/* ---- Header button + mega panel ------------------------------------------- */
.nav a.allcat{cursor:pointer;text-decoration:none;color:var(--white)}
.nav a.allcat:hover,.nav a.allcat[aria-expanded="true"]{background:var(--blue-hover);color:var(--white)}
.nav .allcat .allcat-chev{width:12px;height:12px;margin-left:var(--space-4);transition:transform .15s}
.nav .allcat[aria-expanded="true"] .allcat-chev{transform:rotate(180deg)}
.rp-cf-mega[hidden]{display:none}
.rp-cf-mega{position:absolute;left:0;right:0;top:100%;z-index:80;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(28,28,30,.12);animation:rp-cf-in .12s ease-out}
.rp-cf-mega-in{max-width:1280px;margin:0 auto;padding:var(--space-16) var(--space-24);display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-24);max-height:min(70vh,640px);box-sizing:border-box}
.rp-cf-mega-tops{border-inline-end:1px solid var(--color-border-subtle);padding-inline-end:var(--space-16);overflow:auto}
.nav .rp-cf-mega a{height:auto;padding:0 var(--space-12);position:static} /* undo .nav a.link/li a bar styles */
.nav .rp-cf-mega a::after{display:none}
.rp-cf-mega .rp-cf-row>a.rp-cf-top{display:flex;align-items:center;gap:var(--space-12);min-height:44px;padding-right:48px;font-size:var(--fs-13);font-weight:500;color:var(--ink);border-radius:var(--r-8)}
.rp-cf-mega .rp-cf-row>a.rp-cf-top .cnt{margin-left:auto;font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.rp-cf-mega .rp-cf-row.is-open>a.rp-cf-top,.rp-cf-mega .rp-cf-row:hover>a.rp-cf-top{background:var(--grey)}
.rp-cf-mega .rp-cf-row.on>a.rp-cf-top{background:var(--blue-tint);color:var(--blue)}
.nav .rp-cf-mega a.rp-cf-allp{display:flex;align-items:center;min-height:44px;margin-top:var(--space-8);font-size:var(--fs-13);font-weight:600;color:var(--link);border-top:1px solid var(--color-border-subtle);border-radius:0}
.nav .rp-cf-mega a.rp-cf-allp:hover{color:var(--blue-hover);text-decoration:underline}
.rp-cf-mega-body{overflow:auto;min-width:0}
.rp-cf-mega-body .rp-cf-cols{grid-auto-columns:minmax(180px,max-content)}
.rp-cf-mega-body:empty::before{content:"";display:block}

@media (max-width:1080px){
  .rp-cf-mega-in{grid-template-columns:220px minmax(0,1fr);padding:var(--space-12) var(--space-16);gap:var(--space-16)}
  .rp-cf-mega-body .rp-cf-cols{grid-auto-columns:minmax(170px,1fr)}
}
@media (max-width:768px){
  .rp-cf-mega{display:none !important} /* phones: the header button opens the filters drawer / shop instead */
  .nav a.allcat{color:var(--white)}
}

/* RTL (ar): flyout opens to the left (JS), chevron and toggle mirror */
html[dir=rtl] .rp-cf-tog{right:auto;left:0}
html[dir=rtl] .rp-cf-tog svg{transform:scaleX(-1)}
html[dir=rtl] .rp-cf-row.is-acc>.rp-cf-tog svg{transform:rotate(90deg)}
html[dir=rtl] .cat-sidebar .rp-cf-row.has-kids>a.rp-cf-top,html[dir=rtl] .rp-cf-mega .rp-cf-row>a.rp-cf-top{padding-right:var(--space-12);padding-left:48px}
html[dir=rtl] .rp-cf-panel.is-fly::before{inset:0 -12px 0 auto}

/* ---- Header dropdowns (.hdrop) with JS: click/tap toggles (.is-open); focus alone no longer opens
   (menu-button pattern: Enter/Space/ArrowDown opens); on touch screens sticky :hover never keeps it open. */
.hdrop.is-open .hmenu{opacity:1;visibility:visible;transform:none}
.hdrop.rp-hd-js:focus-within:not(.is-open):not(:hover) .hmenu{opacity:0;visibility:hidden;transform:translateY(-4px)}
@media (hover:none){.hdrop.rp-hd-js:not(.is-open) .hmenu{opacity:0;visibility:hidden}}
.htrig[aria-expanded="true"]{background:var(--grey)}
.htrig[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdrop .hmenu .rp-user{display:none}
body.logged-in .hdrop .hmenu .rp-user{display:block}
body.logged-in .hdrop .hmenu .rp-guest{display:none}

@keyframes rp-cf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rp-cf-panel.is-fly,.rp-cf-mega{animation:none}
  .rp-cf-tog svg,.nav .allcat .allcat-chev,.htrig .chev{transition:none}
}

/* Audit 2026-10-08: links inside page-content lists (e.g. /wholesale-access/ "Bulk order") read as plain text. */
.entry-content li a:not([class]){text-decoration:underline !important;text-underline-offset:2px} /* main.css resets every a with !important */