/* The shop (/shop): page heading, filter sidebar (the view's exposed form),
   toolbar, empty state, pager. From design/jojoweb-pages.css "shop" with the
   F skin (design/jojof-skin.css) applied, on the theme's tokens. */

.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,4vw,44px);align-items:start}
.shop .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1280px){.shop .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* filters = the exposed form (Better Exposed Filters checkboxes + sort) */
.filters{position:sticky;top:66px;background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:20px}
.filters form{display:flex;flex-direction:column;gap:24px}
.filters fieldset{border:0;margin:0;padding:0;min-width:0}
.filters legend,.filters .form-item>label,.filters .fieldset-legend{display:block;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.filters .form-checkboxes,.filters .form-radios{display:flex;flex-direction:column}
.filters .form-type-checkbox,.filters .form-type-radio{display:flex;align-items:center;gap:12px;padding:6px 0}
.filters .form-type-checkbox label,.filters .form-type-radio label{font-size:15px;color:var(--ink2);cursor:pointer;margin:0;text-transform:none;letter-spacing:0;font-weight:500}
.filters .form-type-checkbox:hover label{color:var(--ink)}
.filters input[type=checkbox],.filters input[type=radio]{appearance:none;width:20px;height:20px;margin:0;border-radius:5px;border:1.5px solid var(--ink3);flex:none;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.filters input[type=radio]{border-radius:50%}
.filters input:checked{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--brand)}
.filters select,.filters input[type=search],.filters input[type=text]{width:100%;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);padding:0 14px;font-size:14.5px;outline:none}
.filters select{appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2344525d' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.filters select:focus,.filters input[type=search]:focus,.filters input[type=text]:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 14%,transparent)}
.filters .form-actions{display:flex;gap:8px}
.filters .form-submit{height:42px;padding:0 18px;border-radius:10px;border:0;background:var(--brand);color:var(--brand-ink);font-weight:700;cursor:pointer}
.filters .form-submit:hover{background:var(--brand2)}
.filters .form-submit[id*=reset]{background:var(--bg);color:var(--ink)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.toolbar .res{color:var(--ink2);font-size:14px}
.empty{text-align:center;padding:64px 16px;color:var(--ink2);border:1.5px dashed var(--line);border-radius:var(--r);background:var(--card)}

.pager{display:flex;justify-content:center;gap:6px;margin-top:40px}
.pager a{min-width:42px;height:42px;display:grid;place-items:center;padding:0 8px;border-radius:10px;background:var(--card);box-shadow:var(--sh-1);font-size:14px;font-weight:700}
.pager a.on{background:var(--brand);color:var(--brand-ink);box-shadow:none}

/* small screens: filters slide in */
.fbtn{display:none!important}
.fclose{display:none}
@media(max-width:820px){
  .shop{grid-template-columns:minmax(0,1fr)}
  .fbtn{display:inline-flex!important;height:42px;padding:0 16px}
  .filters{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);z-index:90;border-radius:0;overflow:auto;transform:translateX(-102%);transition:transform .3s var(--ease)}
  .filters.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
  .fclose{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:16px}
  .fclose .ibtn{border:0;background:var(--bg);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
  .fclose svg{width:18px;height:18px}
}