/* KeyEase catalog v2 (shop, categories, brands, search results). Reads the KeyEase tokens from ke.css (body.ke-redesign). */

/* frame: the catalog uses the full width instead of the theme container */
body.ke-catalog .main-page-wrapper{ padding:0!important; background:#fff; }
body.ke-catalog .main-page-wrapper > .container{ max-width:none!important; width:100%!important; padding:0!important; }
body.ke-catalog .main-page-wrapper > .container > .row{ display:block!important; margin:0!important; }
body.ke-catalog .ke-cat{ --kc-line:#e3e9f2; --kc-line-strong:#cfd9e7; --kc-soft:#f5f8fc; --kc-muted:#5b6b80; --kc-head:#f6f9fd; font-family:var(--ke-font); color:var(--ke-ink); }
.ke-cat__wrap{ max-width:var(--ke-wrap,1240px); margin:0 auto; padding:0 var(--ke-gutter,32px); }
.ke-cat .ke-i{ width:18px; height:18px; flex:0 0 auto; }
.ke-cat .ke-i--flip{ transform:rotate(180deg); }
.ke-cat .ke-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ke-cat a{ text-decoration:none; }

/* ---------- head ---------- */
.ke-cat__head{ background:linear-gradient(180deg,#f8fafc 0%,#f1f6fc 100%); border-bottom:1px solid var(--kc-line); padding-top:22px; }
.ke-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--kc-muted); margin:0 0 14px; }
.ke-crumbs a{ color:var(--kc-muted)!important; }
.ke-crumbs a:hover{ color:var(--ke-accent)!important; }
.ke-crumbs .ke-i{ width:14px; height:14px; opacity:.55; }
.ke-crumbs [aria-current]{ color:var(--ke-ink); }
.ke-cat__h1{ font:800 clamp(30px,3.1vw,44px)/1.08 var(--ke-font)!important; letter-spacing:-.025em; color:var(--ke-ink)!important; margin:0 0 10px!important; }
.ke-cat__lead{ font-size:17px; line-height:1.55; color:var(--kc-muted); max-width:62ch; margin:0 0 22px; }

/* category tabs */
.ke-tabs{ margin:0 -4px; }
.ke-tabs ul{ display:flex; gap:4px 26px; list-style:none; margin:0; padding:0 4px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ke-tabs ul::-webkit-scrollbar{ display:none; }
.ke-tabs li{ margin:0; flex:0 0 auto; }
.ke-tabs a{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:12px 0 14px; font:700 15px/1.2 var(--ke-font); color:var(--kc-muted)!important; white-space:nowrap; transition:color var(--ke-fast) var(--ke-ease); }
.ke-tabs a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:transparent; transition:background-color var(--ke-fast) var(--ke-ease); }
.ke-tabs a:hover{ color:var(--ke-ink)!important; }
.ke-tabs a[aria-current="page"]{ color:var(--ke-ink)!important; }
.ke-tabs a[aria-current="page"]::after{ background:var(--ke-accent); }
.ke-tabs__n{ min-width:24px; padding:2px 7px; border-radius:var(--ke-pill); background:#fff; border:1px solid var(--kc-line); font-size:12px; font-weight:700; color:var(--kc-muted); text-align:center; font-variant-numeric:tabular-nums; }
.ke-tabs a[aria-current="page"] .ke-tabs__n{ background:var(--ke-ink); border-color:var(--ke-ink); color:#fff; }

/* search field (search results page) */
.ke-cat__search{ display:flex; align-items:center; gap:10px; max-width:640px; margin:4px 0 26px; padding:6px 6px 6px 16px; background:#fff; border:1px solid var(--kc-line-strong); border-radius:var(--ke-pill); box-shadow:0 1px 2px rgba(17,38,67,.04); }
.ke-cat__search:focus-within{ border-color:var(--ke-accent); box-shadow:0 0 0 4px rgba(13,71,161,.12); }
.ke-cat__search .ke-i{ color:var(--kc-muted); }
.ke-cat__search input[type=search]{ flex:1 1 auto; min-width:0; height:44px!important; border:0!important; background:transparent!important; box-shadow:none!important; padding:0!important; font:600 16px var(--ke-font)!important; color:var(--ke-ink)!important; outline:none!important; }
.ke-cat__search button{ flex:0 0 auto; height:44px; padding:0 22px; border:0; border-radius:var(--ke-pill); background:var(--ke-accent); color:#fff; font:700 15px var(--ke-font); cursor:pointer; transition:background-color var(--ke-fast) var(--ke-ease); }
.ke-cat__search button:hover{ background:var(--ke-accent-press); }

/* ---------- body: filters + results ---------- */
.ke-cat__body{ display:grid; grid-template-columns:244px minmax(0,1fr); gap:44px; padding-top:30px; padding-bottom:64px; align-items:start; }
.ke-cat__body--full{ grid-template-columns:minmax(0,1fr); }

.ke-cat__side{ position:relative; padding-right:4px; }
.ke-fmore{ list-style:none; }
.ke-fmore details > summary{ display:inline-flex; align-items:center; gap:6px; min-height:34px; margin-top:2px; font-size:14px; font-weight:700; color:var(--ke-accent); cursor:pointer; list-style:none; }
.ke-fmore details > summary::-webkit-details-marker{ display:none; }
.ke-fmore details > summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--ke-fast) var(--ke-ease); }
.ke-fmore details[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.ke-fmore__hide, .ke-fmore details[open] .ke-fmore__show{ display:none; }
.ke-fmore details[open] .ke-fmore__hide{ display:inline; }
.ke-fmore summary:hover{ text-decoration:underline; }
.ke-cat__sidehead{ display:flex; align-items:center; justify-content:space-between; margin:0 0 6px; }
.ke-cat__sidehead h2{ font:800 18px/1.2 var(--ke-font)!important; margin:0!important; color:var(--ke-ink)!important; }
.ke-cat__close, .ke-cat__done{ display:none; }
.ke-fgroup{ padding:16px 0 14px; border-top:1px solid var(--kc-line); }
.ke-fgroup:first-of-type{ border-top:0; padding-top:8px; }
.ke-fgroup__t{ font:800 14px/1.3 var(--ke-font)!important; color:var(--ke-ink)!important; margin:0 0 8px!important; letter-spacing:0; text-transform:none!important; }
.ke-fgroup__list{ list-style:none; margin:0; padding:0; }
.ke-fgroup__list li{ margin:0; }
.ke-fopt{ display:flex; align-items:center; gap:10px; min-height:36px; padding:4px 8px; margin:0 -8px; border-radius:8px; color:var(--ke-ink)!important; font-size:15px; font-weight:500; transition:background-color var(--ke-fast) var(--ke-ease); }
.ke-fopt:hover{ background:var(--kc-soft); }
.ke-fopt__box{ display:grid; place-items:center; width:18px; height:18px; flex:0 0 18px; border:1.5px solid var(--kc-line-strong); border-radius:5px; background:#fff; color:#fff; transition:background-color var(--ke-fast) var(--ke-ease), border-color var(--ke-fast) var(--ke-ease); }
.ke-fopt__box .ke-i{ width:12px; height:12px; stroke-width:3; opacity:0; }
.ke-fopt__l{ flex:1 1 auto; min-width:0; }
.ke-fopt__n{ font-size:13px; font-weight:600; color:var(--kc-muted); font-variant-numeric:tabular-nums; }
.ke-fopt.is-on{ font-weight:700; }
.ke-fopt.is-on .ke-fopt__box{ background:var(--ke-accent); border-color:var(--ke-accent); }
.ke-fopt.is-on .ke-fopt__box .ke-i{ opacity:1; }
.ke-fopt.is-off{ opacity:.45; pointer-events:none; }
.ke-cat__reset{ display:inline-block; margin:10px 0 0; font-size:14px; font-weight:700; color:var(--ke-accent)!important; }
.ke-cat__reset:hover{ text-decoration:underline; }

/* toolbar */
.ke-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; flex-wrap:wrap; }
.ke-bar__count{ margin:0; font-size:15px; color:var(--kc-muted); display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }
.ke-bar__num{ font-weight:800; color:var(--ke-ink); font-variant-numeric:tabular-nums; }
.ke-bar__q{ font-weight:700; color:var(--ke-ink); }
.ke-bar__tools{ display:flex; align-items:center; gap:10px; }
.ke-bar__filterbtn{ display:none; align-items:center; gap:8px; height:42px; padding:0 16px; border:1px solid var(--kc-line-strong); border-radius:var(--ke-pill); background:#fff; color:var(--ke-ink)!important; font:700 14px var(--ke-font); }
.ke-bar__badge{ display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:var(--ke-pill); background:var(--ke-accent); color:#fff; font-size:12px; }
.ke-sort{ display:flex; align-items:center; gap:10px; margin:0; }
.ke-sort label{ font-size:14px; font-weight:600; color:var(--kc-muted); margin:0; white-space:nowrap; }
.ke-sort select{ appearance:none; -webkit-appearance:none; height:42px!important; min-width:190px; padding:0 40px 0 16px!important; border:1px solid var(--kc-line-strong)!important; border-radius:var(--ke-pill)!important; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center!important; font:600 14px var(--ke-font)!important; color:var(--ke-ink)!important; cursor:pointer; box-shadow:none!important; }
.ke-sort select:hover{ border-color:var(--ke-accent)!important; }
.ke-sort noscript button{ height:42px; margin-left:6px; }

/* active filters */
.ke-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:-4px 0 18px; padding:0; }
.ke-chips li{ margin:0; }
.ke-chips a{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px 0 14px; border-radius:var(--ke-pill); background:var(--ke-field-blue,#e7effb); color:var(--ke-accent)!important; font-size:14px; font-weight:700; }
.ke-chips a:hover{ background:#d7e6fb; }
.ke-chips .ke-i{ width:15px; height:15px; }
.ke-note-box{ margin:0 0 18px; padding:12px 16px; border-radius:var(--ke-r-sm); background:var(--kc-soft); border:1px solid var(--kc-line); font-size:15px; color:var(--ke-ink); }
.ke-note-box a{ font-weight:700; color:var(--ke-accent)!important; text-decoration:underline!important; }

/* ---------- product grid ---------- */
.ke-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; list-style:none; margin:0; padding:0; }
.ke-cat__body--full .ke-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ke-card{ position:relative; display:flex; flex-direction:column; margin:0; background:#fff; border:1px solid var(--kc-line); border-radius:var(--ke-r); overflow:hidden; transition:border-color var(--ke-fast) var(--ke-ease), box-shadow var(--ke-fast) var(--ke-ease), transform var(--ke-fast) var(--ke-ease); }
.ke-card:hover{ border-color:#bcd0ee; box-shadow:0 14px 34px -18px rgba(17,52,110,.35); transform:translateY(-2px); }
.ke-card__media{ display:block; aspect-ratio:1/1; background:var(--kc-soft); overflow:hidden; }
.ke-card__media img, .ke-card__img{ display:block; width:100%!important; height:100%!important; object-fit:cover; transition:transform var(--ke-slow) var(--ke-ease); }
.ke-card:hover .ke-card__media img{ transform:scale(1.025); }
.ke-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:14px 16px 16px; }
.ke-card__brand{ margin:0 0 4px!important; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--kc-muted); }
.ke-card__title{ margin:0 0 10px!important; font:800 16px/1.3 var(--ke-font)!important; letter-spacing:-.01em; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ke-card__title a{ color:var(--ke-ink)!important; }
.ke-card__title a::before{ content:""; position:absolute; inset:0; z-index:1; }
.ke-card__title a:hover{ color:var(--ke-accent)!important; }
.ke-card__tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 14px; padding:0; }
.ke-card__tags li{ margin:0; padding:3px 8px; border-radius:6px; background:var(--kc-soft); border:1px solid var(--kc-line); font-size:12px; font-weight:600; line-height:1.4; color:#3d4f66; }
.ke-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.ke-card__price{ display:flex; flex-direction:column; line-height:1.1; }
.ke-card__price .price, .ke-card__price > .amount, .ke-card__price ins .amount, .ke-card__price > .woocommerce-Price-amount{ font:800 21px/1.1 var(--ke-font); color:var(--ke-ink); text-decoration:none; }
.ke-card__price ins{ text-decoration:none; background:none; }
.ke-card__price del, .ke-card__price del .amount{ font-size:13px; font-weight:600; color:var(--kc-muted); }
.ke-card__price .amount{ font-weight:800; color:var(--ke-ink); }
.ke-card__add{ position:relative; z-index:2; display:inline-flex!important; align-items:center; gap:7px; height:40px!important; min-height:0!important; padding:0 15px!important; margin:0!important; border:0!important; border-radius:var(--ke-pill)!important; background:var(--ke-accent)!important; color:#fff!important; font:700 14px/1 var(--ke-font)!important; text-transform:none!important; letter-spacing:0!important; box-shadow:none!important; white-space:nowrap; transition:background-color var(--ke-fast) var(--ke-ease), transform var(--ke-fast) var(--ke-ease); }
.ke-card__add:hover{ background:var(--ke-accent-press)!important; }
.ke-card__add:active{ transform:scale(.97); }
.ke-card__add .ke-i{ width:16px; height:16px; }
.ke-card__add.loading{ opacity:.7; pointer-events:none; }
.ke-card__add.loading::after{ display:none!important; }
.ke-card__add.added{ background:var(--ke-ok,#17643f)!important; }
.ke-card__add--ghost{ background:var(--ke-field-blue,#e7effb)!important; color:var(--ke-accent)!important; }
.ke-card .added_to_cart{ display:none!important; }

/* pages */
.ke-pages{ margin:36px 0 0; }
.ke-pages ul{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.ke-pages li{ margin:0; }
.ke-pages .page-numbers{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 10px; border-radius:var(--ke-pill); border:1px solid var(--kc-line); background:#fff; color:var(--ke-ink)!important; font:700 15px var(--ke-font); }
.ke-pages a.page-numbers:hover{ border-color:var(--ke-accent); color:var(--ke-accent)!important; }
.ke-pages .page-numbers.current{ background:var(--ke-ink); border-color:var(--ke-ink); color:#fff!important; }
.ke-pages .page-numbers.dots{ border:0; background:none; }
.ke-pages .ke-i{ width:18px; height:18px; }

/* empty */
.ke-empty{ padding:40px 32px; border-radius:var(--ke-r); background:var(--kc-soft); border:1px solid var(--kc-line); }
.ke-empty h2{ font:800 24px/1.2 var(--ke-font)!important; margin:0 0 8px!important; color:var(--ke-ink)!important; }
.ke-empty p{ margin:0 0 20px; color:var(--kc-muted); max-width:60ch; }
.ke-empty__links{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.ke-empty__links li{ margin:0; }
.ke-empty__links a{ display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 14px 0 18px; border-radius:var(--ke-pill); background:#fff; border:1px solid var(--kc-line-strong); color:var(--ke-ink)!important; font-weight:700; font-size:15px; }
.ke-empty__links a:hover{ border-color:var(--ke-accent); color:var(--ke-accent)!important; }
.ke-empty__links .ke-i{ width:16px; height:16px; }

/* help band */
.ke-cat__help{ background:var(--ke-navy,#0b1f3f); color:#fff; }
.ke-help{ display:flex; align-items:center; justify-content:space-between; gap:24px 48px; padding-top:44px; padding-bottom:44px; flex-wrap:wrap; }
.ke-help__text{ max-width:58ch; }
.ke-help h2{ font:800 clamp(22px,2.2vw,28px)/1.2 var(--ke-font)!important; color:#fff!important; margin:0 0 8px!important; }
.ke-help p{ margin:0; color:#c4d1e3; font-size:16px; line-height:1.55; }
.ke-help__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.ke-help__btn{ display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 22px; border-radius:var(--ke-pill); background:#fff; color:var(--ke-navy,#0b1f3f)!important; font:700 15px var(--ke-font); transition:background-color var(--ke-fast) var(--ke-ease), border-color var(--ke-fast) var(--ke-ease); }
.ke-help__btn:hover{ background:#e7effb; }
.ke-help__btn--ghost{ background:transparent; border:1.5px solid rgba(255,255,255,.45); color:#fff!important; }
.ke-help__btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* focus */
.ke-cat a:focus-visible, .ke-cat button:focus-visible, .ke-cat select:focus-visible, .ke-cat input:focus-visible{ outline:3px solid #7fa8e6; outline-offset:2px; border-radius:8px; }

/* ---------- tablet and phones ---------- */
@media (max-width:1180px){
  .ke-cat__body{ grid-template-columns:220px minmax(0,1fr); gap:32px; }
  .ke-cat__body--full .ke-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1024px){
  .ke-cat__body{ grid-template-columns:minmax(0,1fr); padding-top:22px; }
  .ke-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .ke-bar__filterbtn{ display:inline-flex; }
  /* filters become a sheet */
  .ke-cat__side{ position:fixed; inset:0; z-index:100050; max-height:none; margin:0; padding:18px 20px 96px; background:#fff; overflow:auto; transform:translateY(100%); visibility:hidden; transition:transform var(--ke-slow) var(--ke-ease), visibility 0s linear var(--ke-slow); }
  .ke-cat__side:target, .ke-cat__side.is-open{ transform:none; visibility:visible; transition:transform var(--ke-slow) var(--ke-ease), visibility 0s; }
  .ke-cat__sidehead{ position:sticky; top:-18px; z-index:2; margin:-18px -20px 4px; padding:16px 20px; background:#fff; border-bottom:1px solid var(--kc-line); }
  .ke-cat__close{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--kc-soft); color:var(--ke-ink)!important; }
  .ke-cat__done{ display:flex; align-items:center; justify-content:center; gap:5px; position:fixed; left:20px; right:20px; bottom:16px; height:52px; border-radius:var(--ke-pill); background:var(--ke-accent); color:#fff!important; font:700 16px var(--ke-font); box-shadow:0 10px 30px -10px rgba(13,71,161,.6); }
  .ke-fopt{ min-height:44px; font-size:16px; }
  html.ke-sheet-open, html.ke-sheet-open body{ overflow:hidden; }
}
@media (max-width:767px){
  .ke-cat__head{ padding-top:16px; }
  .ke-cat__lead{ font-size:15px; margin-bottom:12px; }
  .ke-tabs ul{ gap:4px 20px; }
  .ke-tabs a{ font-size:14px; padding:10px 0 12px; }
  .ke-bar{ gap:10px; }
  .ke-bar__count{ width:100%; }
  .ke-bar__tools{ width:100%; }
  .ke-sort{ flex:1 1 auto; }
  .ke-sort label{ display:none; }
  .ke-sort select{ width:100%; min-width:0; }
  .ke-grid, .ke-cat__body--full .ke-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ke-card{ border-radius:var(--ke-r-sm); }
  .ke-card:hover{ transform:none; }
  .ke-card__body{ padding:10px 10px 12px; }
  .ke-card__brand{ font-size:11px; letter-spacing:.04em; }
  .ke-card__title{ font-size:14px!important; min-height:2.6em; }
  .ke-card__tags{ gap:4px; margin-bottom:10px; }
  .ke-card__tags li{ font-size:12px; padding:2px 6px; }
  .ke-card__tags li:nth-child(n+3){ display:none; }
  .ke-card__foot{ flex-direction:column; align-items:stretch; gap:8px; }
  .ke-card__price .amount, .ke-card__price ins .amount{ font-size:18px; }
  .ke-card__add{ justify-content:center; height:38px!important; }
  .ke-cat__search{ margin-bottom:18px; }
  .ke-cat__search button{ padding:0 16px; }
  .ke-help{ padding-top:32px; padding-bottom:32px; }
  .ke-help__actions, .ke-help__btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .ke-card, .ke-card__media img, .ke-cat__side, .ke-tabs a::after{ transition:none!important; }
  .ke-card:hover{ transform:none; }
  .ke-card:hover .ke-card__media img{ transform:none; }
}