/*
Theme Name: HeloAITools
Theme URI: https://heloaitools.com
Author: HeloAITools
Author URI: https://heloaitools.com
Description: A premium, Elementor-friendly AI Tools Directory theme. Glassmorphism UI, purple-to-blue gradients, built-in "AI Tool" post type with categories, ratings, pricing and verified badges. Tagline: AI Tools For Every Task.
Version: 1.8.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: heloaitools
Tags: directory, saas, elementor, custom-post-type, dark-mode, block-styles

This theme is a blank-canvas base theme designed to be edited visually with
Elementor (or Elementor Pro Theme Builder for archive/single templates).
All design tokens (colors, radii, shadows, fonts) are defined as CSS custom
properties at the top of this file under HELOAITOOLS DESIGN SYSTEM — port
these into Elementor > Site Settings > Global Colors / Global Fonts so new
sections built in Elementor stay on-brand automatically.
*/

/* ============================================
   HELOAITOOLS DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   ============================================ */
:root{
  --primary:#5B5CEB;
  --primary-dim:#4A4BD1;
  --secondary:#7C3AED;
  --accent:#00C2FF;
  --bg:#FFFFFF;
  --bg-soft:#F7F7FC;
  --surface:#FFFFFF;
  --surface-2:#F2F1FB;
  --border:#E5E7EB;
  --text:#0F1222;
  --text-dim:#5B5F73;
  --text-faint:#8A8DA0;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,18,34,.04), 0 1px 1px rgba(15,18,34,.03);
  --shadow-md:0 8px 24px rgba(15,18,34,.08), 0 2px 6px rgba(15,18,34,.04);
  --shadow-lg:0 20px 48px rgba(91,92,235,.14), 0 6px 16px rgba(15,18,34,.06);
  --grad-primary:linear-gradient(135deg,#5B5CEB 0%,#7C3AED 100%);
  --grad-accent:linear-gradient(135deg,#5B5CEB 0%,#00C2FF 100%);
  --grad-mesh:radial-gradient(circle at 15% 20%, rgba(91,92,235,.20), transparent 45%),
              radial-gradient(circle at 85% 15%, rgba(124,58,237,.18), transparent 40%),
              radial-gradient(circle at 50% 90%, rgba(0,194,255,.14), transparent 45%);
  --font-display:'Plus Jakarta Sans',Inter,sans-serif;
  --font-body:'Inter',sans-serif;
}
html[data-theme="dark"]{
  --bg:#0F172A;
  --bg-soft:#0B1220;
  --surface:#1E293B;
  --surface-2:#182236;
  --border:#2A3549;
  --text:#F1F4FA;
  --text-dim:#B4BBD0;
  --text-faint:#7C8399;
  --shadow-md:0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  --shadow-lg:0 20px 48px rgba(91,92,235,.22), 0 6px 20px rgba(0,0,0,.4);
  --grad-mesh:radial-gradient(circle at 15% 20%, rgba(91,92,235,.30), transparent 45%),
              radial-gradient(circle at 85% 15%, rgba(124,58,237,.26), transparent 40%),
              radial-gradient(circle at 50% 90%, rgba(0,194,255,.18), transparent 45%);
}
*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
  overflow-x:hidden;
  margin:0;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.hat-container{max-width:1240px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.15;}
.hat-eyebrow{
  font-family:var(--font-display);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary);display:inline-flex;align-items:center;gap:8px;
}
.hat-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad-accent);}
.hat-section{padding:88px 0;}
.hat-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap;}
.hat-section-head h2{font-size:clamp(24px,3vw,34px);margin-top:10px;}
.hat-section-sub{color:var(--text-dim);font-size:15.5px;margin-top:8px;max-width:520px;}

/* Buttons */
.hat-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;white-space:nowrap;}
.hat-btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-md);}
.hat-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff;}
.hat-btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border);}
.hat-btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.hat-btn-sm{padding:8px 16px;font-size:13px;}
.hat-icon-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);transition:.18s ease;}
.hat-icon-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}

/* Glass */
.hat-glass{
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* ===== Header ===== */
.hat-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
}
.hat-nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
.hat-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;}
.hat-logo img{max-height:34px;width:auto;border-radius:8px;}
.hat-logo-mark{width:34px;height:34px;border-radius:10px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:var(--shadow-sm);flex-shrink:0;}
.hat-nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.hat-nav-links li{list-style:none;}
.hat-nav-links a{padding:10px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--text-dim);transition:.15s ease;display:inline-block;}
.hat-nav-links a:hover{color:var(--text);background:var(--surface-2);}
.hat-nav-right{display:flex;align-items:center;gap:12px;}
.hat-theme-toggle{width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:.2s ease;font-size:16px;}
.hat-theme-toggle:hover{border-color:var(--primary);}
.hat-hamburger{display:none;width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);align-items:center;justify-content:center;}

/* ===== Hero / search ===== */
.hat-hero{position:relative;padding:96px 0 70px;overflow:hidden;}
.hat-hero::before{content:'';position:absolute;inset:0;background:var(--grad-mesh);pointer-events:none;z-index:0;}
.hat-hero-inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto;}
.hat-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 8px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:26px;}
.hat-hero-badge span.dot{width:22px;height:22px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;}
.hat-hero h1{font-size:clamp(36px,5.2vw,58px);margin-bottom:18px;}
.hat-hero h1 .hat-gradient-text{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hat-hero p{color:var(--text-dim);font-size:18px;max-width:560px;margin:0 auto 36px;}

.hat-search-shell{max-width:660px;margin:0 auto 22px;}
.hat-search-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:999px;box-shadow:var(--shadow-lg);}
.hat-search-bar input[type="text"],.hat-search-bar input[type="search"]{flex:1;border:none;background:none;outline:none;font-size:15.5px;color:var(--text);font-family:var(--font-body);min-width:0;}
.hat-search-bar input::placeholder{color:var(--text-faint);}
.hat-search-icon{color:var(--text-faint);flex-shrink:0;}
.hat-search-cat-select{
  position:relative;flex-shrink:0;padding:9px 30px 9px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);
  font-family:var(--font-body);font-size:13.5px;font-weight:600;outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235B5F73' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  max-width:160px;
}
.hat-search-cat-select:hover{border-color:var(--primary);color:var(--primary);}
.hat-search-divider{width:1px;height:22px;background:var(--border);flex-shrink:0;}
@media (max-width:560px){
  .hat-search-cat-select{display:none;}
  .hat-search-divider{display:none;}
}

.hat-keywords{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
.hat-pill{padding:7px 15px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--text-dim);transition:.15s ease;}
.hat-pill:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px);}

/* ============================================
   CONTACT PAGE (page-templates/page-contact.php)
   ============================================ */
.hat-contact-hero{margin-top:8px;}
.hat-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.hat-contact-panel-dark{position:relative;padding:44px 38px;background:var(--grad-primary);color:#fff;display:flex;flex-direction:column;overflow:hidden;}
.hat-contact-panel-dark::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 85% 85%,rgba(255,255,255,.10),transparent 45%);}
.hat-contact-panel-dark-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;}
.hat-contact-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;width:fit-content;margin-bottom:18px;}
.hat-contact-panel-dark h1{color:#fff;font-size:clamp(28px,3.2vw,36px);margin-bottom:14px;}
.hat-contact-panel-dark p{opacity:.88;font-size:15px;line-height:1.6;max-width:380px;}
.hat-contact-badges{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:16px;}
.hat-contact-badge{display:flex;align-items:center;gap:12px;}
.hat-contact-badge-icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.hat-contact-badge b{font-size:13.5px;display:block;}
.hat-contact-badge span{font-size:12px;opacity:.8;}
.hat-contact-panel-light{padding:44px 40px;background:var(--surface);}
.hat-contact-panel-light .hat-eyebrow{margin-bottom:8px;}
.hat-contact-panel-light h2{font-size:22px;margin-bottom:22px;}
.hat-contact-field{margin-bottom:16px;}
.hat-contact-field label{font-size:12.5px;font-weight:600;display:block;margin-bottom:7px;color:var(--text-dim);}
.hat-contact-field input,.hat-contact-field select,.hat-contact-field textarea{width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--bg);color:var(--text);outline:none;font-family:var(--font-body);transition:border-color .15s ease;}
.hat-contact-field input:focus,.hat-contact-field select:focus,.hat-contact-field textarea:focus{border-color:var(--primary);}
.hat-contact-field textarea{resize:vertical;min-height:110px;}
.hat-contact-note{font-size:12px;color:var(--text-faint);margin-top:14px;text-align:center;}
.hat-contact-success{padding:8px 0;}
.hat-contact-success h3{font-size:19px;margin-bottom:8px;}
.hat-contact-success p{color:var(--text-dim);font-size:14px;}
.hat-contact-error{background:#FEE2E2;color:#B91C1C;padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;}
html[data-theme="dark"] .hat-contact-error{background:rgba(185,28,28,.2);color:#F87171;}

/* ===== Contact form embed — reskins whichever form plugin shortcode is used ===== */
/* WPForms (1.8+ Modern Markup CSS vars) */
.hat-contact-form-embed .wpforms-container{
  --wpforms-field-border-radius:10px;
  --wpforms-field-background-color:var(--bg);
  --wpforms-field-border-color:var(--border);
  --wpforms-field-text-color:var(--text);
  --wpforms-field-size-input-height:46px;
  --wpforms-field-size-font-size:14px;
  --wpforms-label-color:var(--text-dim);
  --wpforms-label-size-font-size:12.5px;
  --wpforms-label-sublabel-color:var(--text-faint);
  --wpforms-button-background-color:var(--primary);
  --wpforms-button-background-color-alt:var(--primary-dim);
  --wpforms-button-text-color:#fff;
  --wpforms-button-border-radius:999px;
  --wpforms-button-size-font-size:14.5px;
  --wpforms-button-size-font-weight:600;
  margin:0;padding:0;
}
.hat-contact-form-embed .wpforms-submit-container button.wpforms-submit{background:var(--grad-primary) !important;width:100%;transition:.18s ease;}
.hat-contact-form-embed .wpforms-submit-container button.wpforms-submit:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* Fluent Forms */
.hat-contact-form-embed .fluentform .ff-el-form-control{
  width:100%;padding:12px 15px !important;border:1px solid var(--border) !important;border-radius:10px !important;
  font-size:14px !important;background:var(--bg) !important;color:var(--text) !important;font-family:var(--font-body);
  box-shadow:none !important;
}
.hat-contact-form-embed .fluentform .ff-el-form-control:focus{border-color:var(--primary) !important;}
.hat-contact-form-embed .fluentform .ff-el-input--label label,
.hat-contact-form-embed .fluentform label{font-size:12.5px !important;font-weight:600 !important;color:var(--text-dim) !important;}
.hat-contact-form-embed .fluentform button.ff-btn,
.hat-contact-form-embed .fluentform button[type="submit"]{
  background:var(--grad-primary) !important;color:#fff !important;border:none !important;border-radius:999px !important;
  padding:13px 24px !important;font-weight:600 !important;font-size:14.5px !important;width:100%;transition:.18s ease;
}
.hat-contact-form-embed .fluentform button.ff-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.hat-contact-form-embed .fluentform .ff-el-group{margin-bottom:16px !important;}

/* Contact Form 7 / generic classic-markup fallback, for any other form plugin */
.hat-contact-form-embed input[type="text"],.hat-contact-form-embed input[type="email"],.hat-contact-form-embed input[type="tel"],.hat-contact-form-embed input[type="url"],.hat-contact-form-embed select,.hat-contact-form-embed textarea{
  width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:var(--bg);color:var(--text);font-family:var(--font-body);
}
.hat-contact-form-embed label{font-size:12.5px;font-weight:600;color:var(--text-dim);}
.hat-contact-form-embed input[type="submit"]{background:var(--grad-primary);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-weight:600;width:100%;cursor:pointer;}

/* ===== Popular requests ===== */
.hat-popular-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.hat-popular-card{padding:26px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.2s ease;}
.hat-popular-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--primary) 35%, var(--border));}
.hat-popular-icon{width:42px;height:42px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:16px;}
.hat-popular-card h4{font-size:15.5px;margin-bottom:8px;}
.hat-popular-card p{font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 16px;}
.hat-popular-link{font-size:12.5px;font-weight:700;color:var(--primary);letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;}

/* ===== FAQ accordion (shared: Contact, Submit Tool, etc.) ===== */
.hat-faq-card{padding:36px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hat-faq-list{display:flex;flex-direction:column;gap:12px;}
.hat-faq-item{border-radius:var(--radius-md);background:var(--bg-soft);border:1px solid var(--border);overflow:hidden;transition:border-color .2s ease;}
.hat-faq-item.hat-open{border-color:var(--primary);}
.hat-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;text-align:left;font-family:var(--font-display);font-size:14.5px;font-weight:600;background:none;border:none;cursor:pointer;color:var(--text);}
.hat-faq-q .plus{width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-dim);flex-shrink:0;transition:.2s ease;}
.hat-faq-item.hat-open .plus{background:var(--grad-primary);color:#fff;border-color:transparent;transform:rotate(45deg);}
.hat-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.hat-faq-a-inner{padding:0 22px 18px;color:var(--text-dim);font-size:13.5px;line-height:1.65;}

/* ===== Prefer email banner ===== */
.hat-contact-cta-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 32px;border-radius:var(--radius-lg);background:var(--text);color:var(--bg);}
html[data-theme="dark"] .hat-contact-cta-banner{background:var(--surface-2);border:1px solid var(--border);}
.hat-contact-cta-banner h4{color:inherit;font-size:16.5px;margin-bottom:6px;}
.hat-contact-cta-banner p{margin:0;opacity:.75;font-size:13.5px;}
.hat-contact-cta-banner a.hat-btn{background:var(--grad-primary);color:#fff;}

@media (max-width:960px){
  .hat-contact-grid{grid-template-columns:1fr;}
  .hat-contact-panel-dark{padding:36px 28px;}
  .hat-contact-badges{margin-top:28px;flex-direction:row;flex-wrap:wrap;gap:20px;}
  .hat-popular-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hat-contact-panel-light{padding:32px 22px;}
  .hat-faq-card{padding:22px;}
  .hat-contact-cta-banner{flex-direction:column;align-items:flex-start;text-align:left;}
}

/* ===== Sponsored banner ===== */
.hat-sponsored-banner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 30px;border-radius:var(--radius-lg);background:var(--grad-primary);color:#fff;
  box-shadow:var(--shadow-lg);
  margin-bottom:32px;
}
.hat-sponsored-banner .hat-tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;margin-bottom:8px;display:inline-block;}
.hat-sponsored-banner h3{font-size:20px;color:#fff;margin:0;}
.hat-sponsored-banner p{font-size:14px;opacity:.85;margin-top:4px;}
.hat-sponsored-banner .hat-btn-ghost{background:#fff;color:var(--primary);border:none;}

/* ===== Sponsored — sidebar variant (single tool page, below the pricing CTA) ===== */
.hat-sponsored-sidebar{
  margin-top:20px;padding:20px;border-radius:var(--radius-md);background:var(--grad-primary);
  color:#fff;box-shadow:var(--shadow-md);
}
.hat-sponsored-sidebar .hat-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;margin-bottom:10px;display:inline-block;}
.hat-sponsored-sidebar h4{font-size:15.5px;color:#fff;margin:0 0 6px;font-family:var(--font-display);font-weight:700;line-height:1.3;}
.hat-sponsored-sidebar p{font-size:12.5px;opacity:.85;margin:0 0 16px;line-height:1.5;}
.hat-sponsored-sidebar .hat-btn-ghost{display:block;width:100%;text-align:center;background:#fff;color:var(--primary);border:none;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;}
.hat-sponsored-sidebar .hat-btn-ghost:hover{opacity:.92;}

/* ===== Stats ===== */
.hat-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hat-stat-card{padding:28px 22px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);text-align:center;}
.hat-stat-num{font-family:var(--font-display);font-size:32px;font-weight:800;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hat-stat-label{color:var(--text-dim);font-size:13.5px;margin-top:6px;}

/* ===== Categories ===== */
.hat-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.hat-cat-card{padding:24px 18px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);text-align:center;transition:.2s ease;box-shadow:var(--shadow-sm);}
.hat-cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.hat-cat-icon{width:46px;height:46px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;}
.hat-cat-card h4{font-size:14px;font-weight:600;margin:0;}
.hat-cat-card span{font-size:12px;color:var(--text-faint);}

/* ===== Tool cards ===== */
.hat-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hat-tool-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.hat-tool-grid-2col .hat-tool-card{flex-direction:row;align-items:flex-start;gap:18px;padding:24px;}
.hat-tool-grid-2col .hat-tool-card-top{flex-direction:column-reverse;align-items:center;gap:12px;margin-bottom:0;flex-shrink:0;}
.hat-tool-grid-2col .hat-tool-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.hat-tool-grid-2col .hat-tool-desc{margin-bottom:14px;}
@media (max-width:900px){ .hat-tool-grid-2col{grid-template-columns:1fr;} }
@media (max-width:560px){
  .hat-tool-grid-2col .hat-tool-card{flex-direction:column;}
  .hat-tool-grid-2col .hat-tool-card-top{flex-direction:row;align-items:flex-start;}
}
.hat-tool-card{
  position:relative;padding:22px;border-radius:var(--radius-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.22s ease;display:flex;flex-direction:column;
}
.hat-tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb, var(--primary) 40%, var(--border));}
.hat-tool-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.hat-tool-logo{width:48px;height:48px;border-radius:13px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--font-display);font-size:16px;overflow:hidden;flex-shrink:0;}
.hat-tool-logo img{width:100%;height:100%;object-fit:cover;}
.hat-bookmark-btn{width:32px;height:32px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);transition:.15s ease;}
.hat-bookmark-btn:hover{color:var(--primary);border-color:var(--primary);}
.hat-tool-name-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.hat-tool-name-row h4{font-size:16.5px;margin:0;}
.hat-verified{width:16px;height:16px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;flex-shrink:0;}

/* ===== Featured — gold badge ===== */
.hat-featured-ribbon{
  position:absolute;top:-10px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px 5px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  color:#5B3D00;background:linear-gradient(135deg,#FFE29A 0%,#F5C24D 45%,#E8A317 100%);
  box-shadow:0 3px 10px rgba(232,163,23,.35), inset 0 1px 0 rgba(255,255,255,.5);
  text-transform:uppercase;
}
.hat-featured-ribbon .star{font-size:10px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));}
.hat-featured-pill{
  display:inline-flex;align-items:center;gap:4px;padding:4px 11px 4px 8px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#5B3D00;
  background:linear-gradient(135deg,#FFE29A 0%,#F5C24D 45%,#E8A317 100%);
  box-shadow:0 2px 6px rgba(232,163,23,.3), inset 0 1px 0 rgba(255,255,255,.5);flex-shrink:0;
}
.hat-featured-pill .star{font-size:10.5px;}
html[data-theme="dark"] .hat-featured-ribbon,
html[data-theme="dark"] .hat-featured-pill{color:#3D2900;}
.hat-rating-row{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text-dim);margin-bottom:10px;}
.hat-rating-row .hat-stars{color:#F5A623;letter-spacing:1px;}
.hat-tool-desc{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-bottom:16px;flex:1;}
.hat-badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.hat-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
.hat-badge-free{background:#DCFCE7;color:#15803D;}
.hat-badge-paid{background:#FEE2E2;color:#B91C1C;}
.hat-badge-freemium{background:#DBEAFE;color:#1D4ED8;}
.hat-badge-cat{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border);}
.hat-badge-from{background:var(--surface-2);color:var(--primary);border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border));font-weight:700;}
html[data-theme="dark"] .hat-badge-free{background:rgba(21,128,61,.22);color:#4ADE80;}
html[data-theme="dark"] .hat-badge-paid{background:rgba(185,28,28,.22);color:#F87171;}
html[data-theme="dark"] .hat-badge-freemium{background:rgba(29,78,216,.24);color:#60A5FA;}
.hat-tool-card-actions{display:flex;gap:8px;}
.hat-tool-card-actions .hat-btn{flex:1;}

.hat-tab-row{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap;}
.hat-tab{padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);}
.hat-tab.hat-active{background:var(--grad-primary);color:#fff;border-color:transparent;}
.hat-tab-panel{display:none;}
.hat-tab-panel.hat-active{display:grid;}

/* ===== Blog cards ===== */
.hat-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hat-blog-card{border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.2s ease;}
.hat-blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.hat-blog-thumb{height:170px;background:var(--grad-mesh),var(--surface-2);background-size:cover;background-position:center;position:relative;}
.hat-blog-thumb .hat-cat-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);color:var(--primary);font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;}
.hat-blog-body{padding:20px;}
.hat-blog-meta{font-size:12px;color:var(--text-faint);margin-bottom:8px;}
.hat-blog-body h4{font-size:16px;margin-bottom:8px;line-height:1.4;}
.hat-blog-body p{font-size:13.5px;color:var(--text-dim);line-height:1.5;}

/* ===== Newsletter / Submit CTA ===== */
.hat-cta-split{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.hat-cta-panel{padding:56px;background:var(--grad-primary);color:#fff;display:flex;flex-direction:column;justify-content:center;}
.hat-cta-panel h3{font-size:26px;color:#fff;margin-bottom:10px;}
.hat-cta-panel p{opacity:.85;font-size:14.5px;margin-bottom:24px;}
.hat-newsletter-form{display:flex;gap:10px;}
.hat-newsletter-form input{flex:1;padding:13px 16px;border-radius:12px;border:none;outline:none;font-family:inherit;font-size:14px;}
.hat-newsletter-form .hat-btn{background:#fff;color:var(--primary);flex-shrink:0;border-radius:12px;}
.hat-cta-panel-2{padding:56px;background:var(--surface-2);display:flex;flex-direction:column;justify-content:center;}
.hat-cta-panel-2 h3{font-size:26px;margin-bottom:10px;}
.hat-cta-panel-2 p{color:var(--text-dim);font-size:14.5px;margin-bottom:24px;}

/* ===== Footer ===== */
.hat-footer{background:var(--bg-soft);border-top:1px solid var(--border);padding:64px 0 28px;margin-top:40px;}
.hat-footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;margin-bottom:48px;}
.hat-footer-col h5{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:16px;}
.hat-footer-col ul{list-style:none;margin:0;padding:0;}
.hat-footer-col a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:11px;transition:.15s ease;}
.hat-footer-col a:hover{color:var(--primary);}
.hat-footer-about p{color:var(--text-dim);font-size:14px;line-height:1.6;margin:14px 0 20px;max-width:280px;}
.hat-social-row{display:flex;gap:10px;}
.hat-footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;}
.hat-footer-bottom p{font-size:13px;color:var(--text-faint);margin:0;}

/* ===== Single tool / archive / generic page ===== */
.hat-breadcrumb{font-size:13px;color:var(--text-faint);margin-bottom:24px;}
.hat-breadcrumb a{color:var(--text-dim);}
.hat-breadcrumb a:hover{color:var(--primary);}
.hat-single-tool-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-bottom:36px;}
.hat-single-tool-head .hat-tool-logo{width:76px;height:76px;border-radius:20px;font-size:26px;}
.hat-sticky-cta{position:sticky;top:96px;padding:24px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hat-content-block{max-width:760px;}
.hat-content-block h2,.hat-content-block h3{margin-top:36px;margin-bottom:14px;}
.hat-content-block p{color:var(--text-dim);line-height:1.7;margin-bottom:14px;}
.hat-two-col{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;}
.hat-generic-page .hat-content-block{margin:0 auto;padding:64px 0;}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .hat-tool-grid{grid-template-columns:repeat(2,1fr);}
  .hat-cat-grid{grid-template-columns:repeat(3,1fr);}
  .hat-stats-grid{grid-template-columns:repeat(2,1fr);}
  .hat-blog-grid{grid-template-columns:repeat(2,1fr);}
  .hat-footer-grid{grid-template-columns:1fr 1fr;}
  .hat-cta-split{grid-template-columns:1fr;}
  .hat-two-col{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .hat-nav-links{display:none;}
  .hat-hamburger{display:flex;}
  .hat-tool-grid{grid-template-columns:1fr;}
  .hat-cat-grid{grid-template-columns:repeat(2,1fr);}
  .hat-blog-grid{grid-template-columns:1fr;}
  .hat-footer-grid{grid-template-columns:1fr 1fr;}
  .hat-section{padding:56px 0;}
  .hat-hero{padding:64px 0 44px;}
  .hat-sponsored-banner{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* Elementor canvas compatibility: keep theme chrome out of the way on
   Elementor-built pages/templates */
.elementor-page .hat-generic-page{padding:0;}

/* ============================================
   FILTER BAR — All Tools + Category pages
   ============================================ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.hat-filter-bar{padding:18px 20px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:28px;}
.hat-filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.hat-filter-field{display:flex;align-items:center;gap:8px;flex:1;min-width:160px;}
.hat-filter-search{border:1px solid var(--border);border-radius:999px;padding:9px 16px;background:var(--bg);flex:2;min-width:220px;}
.hat-filter-search input{border:none;outline:none;background:none;font-size:14px;width:100%;color:var(--text);font-family:var(--font-body);}
.hat-filter-icon{color:var(--text-faint);flex-shrink:0;font-size:13px;}
.hat-filter-field select{width:100%;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;}
.hat-filter-field select:hover{border-color:var(--primary);}
.hat-filter-status{font-size:12.5px;color:var(--text-faint);margin:-14px 0 20px;min-height:16px;}
.hat-no-results{color:var(--text-dim);grid-column:1/-1;padding:24px 0;}

/* Pagination */
.hat-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.hat-page-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-display);font-size:13.5px;font-weight:600;}
.hat-page-btn:hover{border-color:var(--primary);color:var(--primary);}
.hat-page-btn.hat-active{background:var(--grad-primary);color:#fff;border-color:transparent;}

/* Related Tools */
.hat-related-tools{padding:56px 0 8px;border-top:1px solid var(--border);margin-top:48px;}

/* Tags row (single tool page) */
.hat-tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);}
.hat-tag-row-label{font-size:12.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-right:2px;}
.hat-tag-pill{padding:6px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--text-dim);transition:.15s ease;}
.hat-tag-pill:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px);}

/* ============================================
   TAG CLOUD (page-templates/page-all-tags.php)
   ============================================ */
.hat-tag-cloud-section{padding:8px 0 56px;}
.hat-tag-cloud{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:36px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hat-tag-cloud-pill{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
  font-weight:600;line-height:1;transition:.18s ease;
}
.hat-tag-cloud-pill:hover{background:var(--grad-primary);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.hat-tag-cloud-count{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--bg-soft);color:var(--text-faint);}
.hat-tag-cloud-pill:hover .hat-tag-cloud-count{background:rgba(255,255,255,.25);color:#fff;}

@media (max-width:480px){
  .hat-tag-cloud{padding:22px;gap:9px;}
  .hat-tag-cloud-pill{padding:7px 13px;}
}

/* Pricing row above the single-tool sticky CTA */
.hat-cta-pricing-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--border);}
.hat-cta-pricing-label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;}
.hat-cta-pricing-badge{font-size:14px;font-weight:700;}

/* ===== Pricing Plans (single tool page) ===== */
.hat-pricing-plans{margin-top:40px;padding-top:32px;border-top:1px solid var(--border);}
.hat-pricing-plans h2{margin-bottom:20px;}
.hat-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
.hat-pricing-card{
  position:relative;padding:22px 20px;border-radius:var(--radius-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.2s ease;
}
.hat-pricing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.hat-pricing-card-featured{border-color:var(--primary);box-shadow:var(--shadow-lg);background:var(--surface);}
.hat-pricing-badge-pop{
  position:absolute;top:-11px;left:20px;background:var(--grad-primary);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.hat-pricing-card h4{font-size:15.5px;margin:4px 0 6px;}
.hat-pricing-price{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--primary);margin-bottom:14px;}
.hat-pricing-feature-list{list-style:none;margin:0;padding:0;}
.hat-pricing-feature-list li{font-size:13px;color:var(--text-dim);padding:5px 0 5px 20px;position:relative;line-height:1.4;}
.hat-pricing-feature-list li::before{content:'✓';position:absolute;left:0;color:#16A34A;font-weight:700;}
@media (max-width:480px){
  .hat-pricing-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .hat-pricing-card{padding:16px 14px;}
  .hat-pricing-price{font-size:18px;margin-bottom:10px;}
}
@media (max-width:360px){
  .hat-pricing-grid{grid-template-columns:1fr;}
}

/* Newsletter validation messages */
.hat-newsletter-msg{font-size:13px;margin:10px 0 0;min-height:18px;}
.hat-newsletter-msg.hat-newsletter-error{color:#DC2626;}
.hat-newsletter-msg.hat-newsletter-success{color:#16A34A;}

/* ============================================
   COMPARE — button state, picker, table, floating bar
   ============================================ */
.hat-tool-card-actions button[data-compare-id].hat-compare-active{background:var(--grad-primary);color:#fff;border-color:transparent;}

.hat-compare-picker{display:flex;flex-wrap:wrap;gap:10px;padding:20px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:8px;}
.hat-compare-select{flex:1;min-width:160px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);font-size:13.5px;font-family:var(--font-body);background:var(--bg);color:var(--text);}

.hat-diff-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim);margin:24px 0 6px;cursor:pointer;}

.hat-compare-table-wrap{overflow-x:auto;margin:20px 0 64px;}
.hat-compare-table{width:100%;border-collapse:collapse;min-width:640px;}
.hat-compare-table th,.hat-compare-table td{border:1px solid var(--border);padding:16px;text-align:center;font-size:13.5px;vertical-align:top;color:var(--text-dim);}
.hat-compare-table th{text-align:left;background:var(--bg-soft);font-weight:700;width:150px;color:var(--text);}
.hat-compare-row-head td{padding-top:22px;}
.hat-compare-row-head th{background:transparent;border:none;}
.hat-compare-list{text-align:left;margin:0;padding-left:0;list-style:none;}
.hat-compare-list li{padding:3px 0;padding-left:16px;position:relative;}
.hat-compare-list li::before{content:'•';position:absolute;left:0;color:var(--primary);}
.hat-compare-pros li::before{content:'✓';color:#16A34A;}
.hat-compare-cons li::before{content:'✕';color:#DC2626;}

.hat-compare-bar{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  font-size:13.5px;color:var(--text-dim);
}
.hat-compare-bar-actions{display:flex;gap:8px;align-items:center;}

/* ============================================
   RESPONSIVE — finer breakpoints (320 / 375 / 390 / 414 / tablet)
   ============================================ */
@media (max-width:600px){
  .hat-filter-row{flex-direction:column;align-items:stretch;}
  .hat-filter-field{min-width:0;}
  .hat-filter-search{flex:none;}
  .hat-filter-row .hat-btn{width:100%;}
  .hat-compare-picker{flex-direction:column;}
  .hat-compare-select{min-width:0;}
  .hat-compare-bar{left:12px;right:12px;transform:none;flex-direction:column;align-items:stretch;text-align:center;bottom:12px;}
  .hat-compare-bar-actions{justify-content:center;}
  .hat-single-tool-head{flex-direction:column;align-items:flex-start;}
  .hat-sticky-cta{position:static;}
  .hat-cta-split{border-radius:14px;}
  .hat-cta-panel,.hat-cta-panel-2{padding:32px 22px;}
  .hat-newsletter-form{flex-direction:column;gap:12px;}
  .hat-newsletter-form input{width:100%;padding:14px 16px;font-size:16px;}
  .hat-newsletter-form .hat-btn{width:100%;padding:14px 16px;}
}
/* ===== Newsletter — mobile-first fine tuning ===== */
@media (max-width:480px){
  .hat-cta-panel,.hat-cta-panel-2{padding:26px 20px;text-align:left;}
  .hat-cta-panel h3,.hat-cta-panel-2 h3{font-size:20px;line-height:1.25;margin-bottom:8px;}
  .hat-cta-panel p,.hat-cta-panel-2 p{font-size:13.5px;margin-bottom:18px;}
  .hat-newsletter-form input{font-size:16px;padding:13px 14px;border-radius:10px;}
  .hat-newsletter-form .hat-btn{border-radius:10px;font-size:14px;}
  .hat-newsletter-msg{font-size:12.5px;}
}
@media (max-width:480px){
  .hat-container{padding:0 16px;}
  .hat-nav{height:64px;}
  .hat-logo{font-size:16px;}
  .hat-hero h1{font-size:28px;}
  .hat-hero p{font-size:15px;}
  .hat-search-bar{flex-wrap:wrap;padding:10px;border-radius:20px;}
  .hat-search-bar .hat-btn{width:100%;}
  .hat-stats-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .hat-stat-card{padding:18px 12px;}
  .hat-stat-num{font-size:24px;}
  .hat-cat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .hat-cat-card{padding:16px 10px;}
  .hat-tool-card{padding:16px;}
  .hat-tool-grid-2col .hat-tool-card{padding:16px;}
  .hat-footer-grid{grid-template-columns:1fr;gap:24px;}
  .hat-sponsored-banner{padding:18px;}
  .hat-tab-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;}
  .hat-tab{flex-shrink:0;}
  .hat-page-btn{width:34px;height:34px;font-size:12.5px;}
}

/* ============================================
   ALL CATEGORIES PAGE (page-templates/page-all-categories.php)
   ============================================ */
.hat-cats-intro{position:relative;padding:64px 0 44px;overflow:hidden;}
.hat-cats-intro::before{content:'';position:absolute;inset:0;background:var(--grad-mesh);pointer-events:none;z-index:0;}
.hat-cats-intro .hat-container{position:relative;z-index:1;}
.hat-cats-intro h1{font-size:clamp(28px,4vw,42px);margin-top:12px;max-width:640px;}
.hat-cats-intro p{color:var(--text-dim);font-size:16px;margin-top:14px;max-width:600px;line-height:1.6;}

.hat-stats-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.hat-stat-chip{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.hat-stat-chip-num{font-family:var(--font-display);font-weight:800;font-size:18px;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hat-stat-chip-lbl{font-size:13px;color:var(--text-dim);}

.hat-cats-grid-section{padding:8px 0 64px;}
.hat-cat-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hat-cat-detail-card{
  position:relative;padding:26px;border-radius:var(--radius-md);background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.22s ease;
  display:flex;flex-direction:column;
}
.hat-cat-detail-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb, var(--primary) 40%, var(--border));}
.hat-cat-detail-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.hat-cat-detail-icon{width:48px;height:48px;border-radius:14px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:21px;flex-shrink:0;box-shadow:var(--shadow-sm);}
.hat-cat-detail-count{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--primary);border:1px solid var(--border);white-space:nowrap;}
.hat-cat-detail-card h3{font-size:18px;margin-bottom:8px;}
.hat-cat-detail-card p{color:var(--text-dim);font-size:13.5px;line-height:1.55;margin:0 0 20px;flex:1;}
.hat-cat-detail-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--primary);transition:gap .15s ease;}
.hat-cat-detail-card:hover .hat-cat-detail-link{gap:10px;}

.hat-cats-rank-section{padding:8px 0 80px;}
.hat-cats-rank-head{margin-bottom:28px;}
.hat-cats-rank-head h2{font-size:clamp(22px,2.6vw,28px);}
.hat-cats-rank-head p{color:var(--text-dim);font-size:14.5px;margin-top:8px;}
.hat-rank-table-wrap{border-radius:var(--radius-md);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm);overflow-x:auto;}
.hat-rank-table{width:100%;border-collapse:collapse;min-width:480px;}
.hat-rank-table th{text-align:left;background:var(--bg-soft);font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);padding:14px 20px;border-bottom:1px solid var(--border);}
.hat-rank-table td{padding:14px 20px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text-dim);}
.hat-rank-table tr:last-child td{border-bottom:none;}
.hat-rank-table tr:hover td{background:var(--bg-soft);}
.hat-rank-name a{color:var(--text);font-weight:600;display:inline-flex;align-items:center;gap:10px;}
.hat-rank-name a:hover{color:var(--primary);}
.hat-rank-num{width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--text-faint);font-family:var(--font-display);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.hat-rank-bar-wrap{display:flex;align-items:center;gap:10px;}
.hat-rank-bar-track{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;max-width:160px;}
.hat-rank-bar-fill{height:100%;border-radius:99px;background:var(--grad-accent);}
.hat-rank-count{font-weight:700;color:var(--text);min-width:30px;text-align:right;}

@media (max-width:1080px){
  .hat-cat-detail-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .hat-cat-detail-grid{grid-template-columns:1fr;}
  .hat-cats-intro{padding:48px 0 32px;}
  .hat-stats-row{gap:10px;}
  .hat-stat-chip{padding:10px 16px;}
}
@media (max-width:480px){
  .hat-cat-detail-card{padding:20px;}
  .hat-rank-table th,.hat-rank-table td{padding:12px 14px;}
  .hat-rank-bar-track{max-width:80px;}
}