/* BuildKitly UI fix sprint — theme listings & cards (owner: agent B, 2026-09-25).
   Pages /themes/ /wordpress/ /shopify/ /favorites/ /compare/ (all languages, .bk-th-market / .bk-th-comparepage)
   and the theme card loop item (351 + translations, .bk-th-card). Class hooks only, no element ids. */

/* ---------- 7. footer drawn over the last cards (real on <=1023px): the flex column .bk-th-results under-measured the
   loop grid (10.8k vs 11.6k px on 390) so the footer started 750px too early. A plain grid wrapper measures correctly. */
.elementor .e-con.bk-th-results { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }

/* ---------- 1. 3 columns next to the sidebar from 1200px (27 cards = 9 full rows) ---------- */
@media (min-width: 1200px) {
  .elementor .bk-th-market .bk-th-grid { --grid-columns: 3; --grid-column-gap: 24px; --grid-row-gap: 36px; }
  .elementor .bk-th-market .bk-th-grid .elementor-loop-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* narrower cards: let the price wrap under the title instead of squeezing it */
  .bk-th-market .bk-th-card .bk-th-meta { flex-wrap: wrap; row-gap: 4px; }
  .bk-th-market .bk-th-card .bk-th-card-title .elementor-heading-title { font-size: clamp(18px, 1.55vw, 22px); }
}
/* 2 columns (768-1199): an odd last card is centred instead of hanging on the left */
@media (min-width: 768px) and (max-width: 1199px) {
  .bk-th-market .bk-th-grid .e-loop-item.bk-th-orphan {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--grid-column-gap, 22px)) / 2);
  }
}

/* ---------- 3 + I18N-08. reserve the space of JS-built controls (no layout shift when bk-th.js enhances them) ---------- */
.bk-th-market .bk-th-ph { min-height: 46px; }
.bk-th-market .bk-th-opts:not(.is-enhanced) { max-height: 46px; overflow: hidden; visibility: hidden; }
.bk-th-market .bk-th-results-top { min-height: 46px; align-items: center; }

/* mobile: filters collapse behind "Filters (n)"; toggle + count + sort share one row above the grid */
.bk-th-ftoggle { display: none; }
@media (max-width: 767px) {
  .elementor .bk-th-market .e-con.bk-th-results { display: contents; }
  .bk-th-market .bk-th-results > .bk-th-results-top { order: -1; }
  .bk-th-market .bk-th-catalog > .bk-th-filters { order: 0; }
  .bk-th-market .bk-th-results > :not(.bk-th-results-top) { order: 1; }
  .bk-th-market:not(.bk-th-fopen) .bk-th-catalog > .bk-th-filters { display: none !important; }
  .bk-th-market .bk-th-results-top { flex-wrap: nowrap; gap: 10px; }
  .bk-th-market .bk-th-results-top > .bk-th-count { flex: 1 1 auto; min-width: 0; }
  .elementor .bk-th-market .bk-th-ph-sort { flex: 0 1 150px; width: 150px; max-width: 42%; }
  .bk-th-ftoggle {
    display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 46px; padding: 0 14px;
    border: 1px solid var(--e-global-color-border); border-radius: 5px; background: var(--e-global-color-surface);
    color: var(--e-global-color-primary); font: 400 14px/1.2 Arial, Helvetica, sans-serif; cursor: pointer;
  }
  .bk-th-ftoggle:hover, .bk-th-ftoggle[aria-expanded="true"] { border-color: var(--e-global-color-primary); background: var(--e-global-color-surface); color: var(--e-global-color-primary); }
  .bk-th-ftoggle:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 2px; }
  .bk-th-ftoggle svg { width: 16px; height: 16px; }
  .bk-th-ftoggle .bk-th-fcount:empty { display: none; }
  .bk-th-market .bk-th-catalog > .bk-th-filters { padding: 18px; border: 1px solid var(--e-global-color-border); border-radius: 7px; }
  .bk-th-market .bk-th-filters > .bk-th-ftitle { display: none; }
}

/* ---------- 4. Reset filters: own row, 44px target on touch widths, hover state ---------- */
.elementor .bk-th-market .bk-th-reset .elementor-heading-title a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.elementor .bk-th-market .bk-th-reset .elementor-heading-title a:hover,
.elementor .bk-th-market .bk-th-reset .elementor-heading-title a:focus-visible { color: var(--e-global-color-accent); text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .bk-th-market .bk-th-filters > .bk-th-reset { grid-column: 1 / -1; justify-self: start; align-self: start; }
  .elementor .bk-th-market .bk-th-reset .elementor-heading-title a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- 8. card action row: one baseline, equal boxes, 44px tap height on touch widths ---------- */
.bk-th-card .bk-th-actions { align-items: center; }
.bk-th-card .bk-th-actions > .elementor-element { display: flex; align-items: center; margin: 0; }
.bk-th-card .bk-th-actions :is(.elementor-heading-title, .elementor-shortcode, .bk-order-cta) { display: flex; align-items: center; margin: 0; }
.elementor .bk-th-card .bk-th-actions :is(.elementor-heading-title a, a.bk-order-link) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; line-height: 1.2; vertical-align: middle;
}
.bk-th-card .bk-th-actions .bk-glyph, .bk-th-card .bk-th-actions .bk-th-cmp-ico, .bk-th-card .bk-th-actions .bk-th-svg { line-height: 1; flex: none; }
@media (max-width: 1024px) {
  .elementor .bk-th-card .bk-th-actions :is(.elementor-heading-title a, a.bk-order-link) { min-height: 44px; }
  .bk-th-card .bk-th-fav a { position: relative; }
  .bk-th-card .bk-th-fav a::after { content: ''; position: absolute; inset: -7px; } /* 31px icon, 45px hit area */
}

/* ---------- 13. /favorites/ with nothing saved: empty state only (class set in <head> + by bk-th.js) ---------- */
:is(html.bk-nofav .bk-th-favorites, .bk-th-favorites.bk-th-nofav) :is(.bk-th-filters, .bk-th-results-top, .bk-th-grid) { display: none !important; }
:is(html.bk-nofav .bk-th-favorites, .bk-th-favorites.bk-th-nofav) .bk-th-catalog { --e-con-grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
:is(html.bk-nofav .bk-th-favorites, .bk-th-favorites.bk-th-nofav) .bk-th-empty { display: flex !important; max-width: 640px; margin-inline: auto; text-align: center; align-items: center; }