/* قوالب «تم» المجانية — /qawalib/  (فوق assets/tam-tools.css) */
.filters{display:flex;flex-direction:column;gap:6px;}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.flabel{font-weight:700;font-size:.88rem;color:var(--ink-2);min-width:48px;}
.filters .seg{margin:0;flex:1 1 280px;}
.filters .hint{margin:4px 0 0;}
.order-note{text-align:center;margin:0 0 16px;font-size:.95rem;color:var(--ink-2);}
.order-note a{font-weight:800;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:18px;}
.tpl{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.tpl.wide{grid-column:span 2;}
.tpl[hidden]{display:none;}
.shots{position:relative;background:var(--surface-2);border-bottom:1px solid var(--rule);}
.shot{display:block;width:100%;height:auto;}
.shot.alt{position:absolute;inset:0;opacity:0;transition:opacity .18s;}
.shots.is-alt .shot.alt{opacity:1;}
.flip{position:absolute;bottom:8px;inset-inline-start:8px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(27,30,32,.78);color:#fff;font-size:.76rem;font-weight:700;padding:4px 10px;}
.flip:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* زر صغير مرئياً؛ مساحة اللمس ممتدة حوله (تدقيق 2026-09-28) */
.flip::after{content:"";position:absolute;inset:-10px -6px;}
.meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;}
.meta h3{font-size:.93rem;margin:0;line-height:1.45;}
.meta h3.en{text-align:right;}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0;font-size:.78rem;}
.tags .pill{background:var(--surface-2);color:var(--ink-2);font-size:.74rem;}
.tags .pill.brand{background:var(--brand-soft);color:var(--brand);}
.dim{color:var(--muted);}
.dl{margin-top:auto;align-self:stretch;}

.how ol{margin:0 0 8px;padding-inline-start:22px;}
.how li{margin-bottom:6px;}
.how li::marker{color:var(--brand);font-weight:800;}

@media (max-width:520px){
  .grid{grid-template-columns:1fr 1fr;gap:10px;}
  .tpl.wide{grid-column:1 / -1;}
  .meta{padding:8px 9px 10px;}
  .meta h3{font-size:.84rem;}
  .flip{font-size:.7rem;padding:3px 8px;}
}
@media (prefers-reduced-motion:reduce){ .shot.alt{transition:none;} }