/* Topic hub pages: /tag/index.html and /tag/<topic>
   Self-contained on purpose: the site ships a trimmed Tailwind build, so several
   spacing / flex utilities are NOT compiled in. Do not restyle these pages with
   arbitrary Tailwind classes - add a rule here instead.
   Cached for 7 days by nginx: bump the ?v= value in head.html after editing. */

.hub-hero { background:#fafafa; border-bottom:1px solid #e5e7eb; }
.hub-inner { max-width:1280px; margin:0 auto; padding:0 20px; }
.hub-hero .hub-inner { padding-top:112px; padding-bottom:44px; }
.hub-main { padding-top:48px; padding-bottom:64px; }
@media (max-width:767px) {
  .hub-hero .hub-inner { padding-top:100px; padding-bottom:32px; }
  .hub-main { padding-top:36px; padding-bottom:48px; }
}
@media (min-width:768px) {
  .hub-inner { padding-left:32px; padding-right:32px; }
  .hub-hero .hub-inner { padding-top:128px; padding-bottom:52px; }
  .hub-main { padding-top:56px; }
}

.hub-crumb { font-size:.875rem; color:#6b7280; margin-bottom:24px; }
.hub-crumb a { color:#6b7280; text-decoration:none; }
.hub-crumb a:hover { color:#ce010b; }
.hub-crumb .sep { margin:0 8px; color:#c9ced6; }
.hub-crumb .cur { color:#1f2937; }
.hub-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#ce010b; margin-bottom:12px; }
.hub-h1 { font-size:2rem; line-height:1.2; font-weight:700; color:#111827; margin:0 0 16px; }
@media (min-width:768px) { .hub-h1 { font-size:2.5rem; } }
.hub-lede { font-size:1rem; line-height:1.8; color:#4b5563; max-width:760px; margin:0; }

.hub-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.hub-head h2 { font-size:1.125rem; font-weight:700; color:#111827; margin:0; }
.hub-head a { font-size:.875rem; color:#ce010b; text-decoration:none; white-space:nowrap; }
.hub-head a:hover { text-decoration:underline; }

.hub-grid { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px)  { .hub-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .hub-grid { grid-template-columns:repeat(3,1fr); gap:24px; } }
@media (min-width:1280px) { .hub-grid { grid-template-columns:repeat(4,1fr); } }

.hub-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e5e7eb;
            border-radius:14px; overflow:hidden; text-decoration:none;
            transition:border-color .3s, box-shadow .3s, transform .3s; }
.hub-card:hover { border-color:#ce010b; box-shadow:0 12px 30px rgba(15,23,42,.10); transform:translateY(-2px); }
/* Article banners contain wording - contain them instead of cropping. */
.hub-cover { height:180px; background:#fff; display:flex; align-items:center;
             justify-content:center; overflow:hidden; }
@media (min-width:768px) { .hub-cover { height:200px; } }
.hub-cover img { width:100%; height:100%; object-fit:contain; padding:12px;
                 transition:transform .5s; }
.hub-card:hover .hub-cover img { transform:scale(1.04); }
.hub-body { flex:1; display:flex; flex-direction:column; padding:16px 18px 18px;
            border-top:1px solid #e5e7eb; }
.hub-title { font-size:.9375rem; font-weight:600; line-height:1.55; color:#1f2937;
             margin:0; transition:color .3s; }
.hub-card:hover .hub-title { color:#ce010b; }
.hub-read { margin-top:auto; padding-top:16px; font-size:.75rem; font-weight:600;
            color:#ce010b; display:flex; align-items:center; gap:5px; }

.hub-pills { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px)  { .hub-pills { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .hub-pills { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px) { .hub-pills { grid-template-columns:repeat(4,1fr); } }
.hub-pill { display:flex; align-items:center; justify-content:space-between; gap:12px;
            padding:12px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
            font-size:.875rem; color:#1f2937; text-decoration:none;
            transition:border-color .3s, box-shadow .3s, color .3s; }
.hub-pill:hover { border-color:#ce010b; color:#ce010b; box-shadow:0 6px 18px rgba(15,23,42,.06); }
/* Long topic names wrap instead of being clipped to an ellipsis. */
.hub-pill .label { white-space:normal; line-height:1.4; overflow:visible; }
.hub-pill .count { flex:none; font-size:.75rem; color:#6b7280; background:#fafafa;
                   border:1px solid #e5e7eb; border-radius:999px; padding:1px 8px; }

.hub-empty { margin-top:40px; text-align:center; color:#6b7280; }
.hub-pager { margin-top:40px; display:flex; flex-wrap:wrap; align-items:center;
             justify-content:center; gap:8px; font-size:.875rem; }
.hub-pager a, .hub-pager span.page-num { display:inline-flex; align-items:center; justify-content:center;
             min-width:36px; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px;
             color:#374151; text-decoration:none; background:#fff; }
.hub-pager a:hover { border-color:#ce010b; color:#ce010b; }
.hub-pager .cur-page { background:#fafafa; }
/* The engine emits .page-num / .page-num-current anchors; keep them circular and
   make the active page red, matching the pagination on the rest of the site. */
.hub-pager a.page-num { min-width:40px; width:40px; height:40px; padding:0;
                        border-radius:50%; background:#f2f2f2; }
.hub-pager a.page-num-current,
.hub-pager a.page-num.page-num-current { background:#ce010b; border-color:#ce010b;
                        color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(206,1,11,.3); }
.hub-pager span.page-num { min-width:32px; padding:8px 6px; border:none; background:transparent; }
.hub-links { margin-top:56px; padding-top:32px; border-top:1px solid #e5e7eb;
             display:flex; flex-wrap:wrap; gap:12px 32px; font-size:.875rem; }
.hub-links a { color:#ce010b; text-decoration:none; }
.hub-links a:hover { text-decoration:underline; }

/* Category buying-guide blocks. Previously duplicated as an identical inline
   <style> in four productlist templates; now shared by all seven category pages.
   Keep the .cat-guide class - skin/js/faqpage.js reads the FAQ headings from it. */
.cat-guide .cg-box { background:#fff; border-radius:14px; box-shadow:0 4px 24px rgba(15,23,42,.07); padding:1.75rem 1.5rem; }
@media (min-width:768px) { .cat-guide .cg-box { padding:2.5rem; } }
.cat-guide h2 { font-size:1.5rem; line-height:1.3; font-weight:700; color:#111827; margin:0 0 1rem; }
.cat-guide h3 { font-size:1.125rem; font-weight:700; color:#1f2937; margin:2rem 0 .5rem; }
.cat-guide p { color:#374151; line-height:1.85; margin:0 0 1rem; }
.cat-guide ul { margin:0 0 1rem 1.1rem; color:#374151; line-height:1.85; }
.cat-guide ul li { margin-bottom:.35rem; }
.cat-guide a { color:#ce010b; text-decoration:underline; text-underline-offset:2px; }
.cat-guide .cg-answer { background:#fafafa; border-left:4px solid #ce010b; padding:1rem 1.1rem; border-radius:0 8px 8px 0; }
.cat-guide table { width:100%; border-collapse:collapse; margin:.5rem 0 1.5rem; font-size:.95rem; }
.cat-guide th, .cat-guide td { border:1px solid #e5e7eb; padding:.6rem .7rem; text-align:left; vertical-align:top; }
.cat-guide th { background:#f5f5f5; font-weight:600; color:#111827; }
.cat-guide .cg-scroll { overflow-x:auto; }
.cat-guide .cg-cluster { background:#fafafa; border:1px solid #e5e7eb; border-radius:10px;
                         padding:1.1rem 1.25rem; margin:1rem 0 1.5rem; }
.cat-guide .cg-cluster ul { margin:0 0 0 1.1rem; }
.cat-guide .cg-cluster li { margin-bottom:.5rem; }