/* Helmet Trinket – Adforest / E-commerce templates
 * Style: white, clean, colored accents (indigo primary, amber secondary, emerald success, rose alert)
 */
:root {
  --htaf-primary: #4f46e5;
  --htaf-primary-600: #4338ca;
  --htaf-accent: #f59e0b;
  --htaf-success: #10b981;
  --htaf-danger: #ef4444;
  --htaf-ink: #0f172a;
  --htaf-ink-2: #334155;
  --htaf-muted: #64748b;
  --htaf-line: #e5e7eb;
  --htaf-bg: #f8fafc;
  --htaf-card: #ffffff;
  --htaf-radius: 14px;
  --htaf-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
}
.htaf, .htaf * { box-sizing: border-box; }
.htaf { color: var(--htaf-ink); font-size: 15px; line-height: 1.55; }
.htaf-page-wrap { max-width: 1280px; margin: 24px auto; padding: 0 16px; }

/* Buttons */
.htaf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:10px; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; font-size:14px; transition:all .15s; }
.htaf-btn-primary { background: var(--htaf-primary); color:#fff; }
.htaf-btn-primary:hover { background: var(--htaf-primary-600); color:#fff; }
.htaf-btn-ghost { background:#fff; color: var(--htaf-ink); border-color: var(--htaf-line); }
.htaf-btn-ghost:hover { border-color: var(--htaf-ink-2); }
.htaf-btn-block { width:100%; }
.htaf-btn-lg { padding: 14px 24px; font-size: 15px; }
.htaf-mini-btn { flex:1; padding:8px 10px; border:1px solid var(--htaf-line); background:#fff; border-radius:8px; cursor:pointer; font-size:13px; color: var(--htaf-ink-2); }
.htaf-mini-btn:hover { border-color: var(--htaf-primary); color: var(--htaf-primary); }

/* Section */
.htaf-section { margin: 40px 0; }
.htaf-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:16px; }
.htaf-section-head h2 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.htaf-more { color: var(--htaf-primary); font-weight:600; text-decoration:none; font-size:14px; }
.htaf-count { color: var(--htaf-muted); font-size:13px; }

/* Hero (Home) */
.htaf-hero { background: linear-gradient(135deg, #eef2ff 0%, #fff 60%, #fef3c7 120%); border-radius: 20px; padding: 56px 32px; margin-bottom: 32px; }
.htaf-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.htaf-eyebrow { display:inline-block; background:#fff; border:1px solid var(--htaf-line); color: var(--htaf-primary); padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; }
.htaf-hero-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing:-.02em; margin: 16px 0 8px; line-height:1.15; }
.htaf-hero-sub { color: var(--htaf-muted); font-size: 17px; margin: 0 0 24px; }
.htaf-search { display:flex; background:#fff; border-radius: 14px; box-shadow: var(--htaf-shadow); border:1px solid var(--htaf-line); overflow:hidden; align-items:stretch; }
.htaf-search-field { flex:1; display:flex; align-items:center; padding: 6px 14px; gap:8px; min-width:0; }
.htaf-search-sep { border-left:1px solid var(--htaf-line); flex: 0 0 220px; }
.htaf-search-field input, .htaf-search-field select { width:100%; border:0; outline:0; background:transparent; padding: 12px 0; font-size:15px; color: var(--htaf-ink); }
.htaf-search-icon { color: var(--htaf-muted); }
.htaf-search-btn { border:0; background: var(--htaf-primary); color:#fff; padding: 0 26px; font-weight:600; cursor:pointer; }
.htaf-search-btn:hover { background: var(--htaf-primary-600); }
.htaf-hero-cta { display:flex; gap:12px; justify-content:center; margin-top: 20px; flex-wrap:wrap; }

/* Categories grid */
.htaf-cats-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.htaf-cat { background: var(--htaf-card); border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding: 20px 12px; text-align:center; text-decoration:none; color: var(--htaf-ink); transition: all .15s; display:flex; flex-direction:column; gap:6px; align-items:center; }
.htaf-cat:hover { border-color: var(--htaf-primary); transform: translateY(-2px); box-shadow: var(--htaf-shadow); }
.htaf-cat-ic { font-size: 30px; line-height:1; }
.htaf-cat-name { font-weight:600; font-size:14px; }
.htaf-cat-count { font-size:12px; color: var(--htaf-muted); }

/* Cards grid */
.htaf-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.htaf-list { display:flex; flex-direction:column; gap:14px; }
.htaf-list .htaf-card { display:grid; grid-template-columns: 240px 1fr; }
.htaf-list .htaf-card-media { aspect-ratio: auto; height:100%; min-height:180px; }
.htaf-card { position:relative; background: var(--htaf-card); border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition: all .18s; }
.htaf-card:hover { border-color: var(--htaf-primary); box-shadow: var(--htaf-shadow); transform: translateY(-2px); }
.htaf-card.is-featured { border-color: var(--htaf-accent); }
.htaf-card.is-sold { opacity: .8; }
.htaf-card-media { position:relative; aspect-ratio: 4/3; overflow:hidden; background:#f1f5f9; }
.htaf-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s; }
.htaf-card:hover .htaf-card-media img { transform: scale(1.04); }
.htaf-card-flags { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; }
.htaf-flag { font-size:11px; font-weight:700; padding:4px 8px; border-radius:6px; background:#fff; color: var(--htaf-ink); }
.htaf-flag-featured { background: var(--htaf-accent); color:#fff; }
.htaf-flag-new { background: var(--htaf-success); color:#fff; }
.htaf-flag-sold { background: var(--htaf-danger); color:#fff; }
.htaf-fav { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.95); font-size:16px; cursor:pointer; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.htaf-fav:hover { color: var(--htaf-danger); }
.htaf-card-body { padding: 14px; display:flex; flex-direction:column; gap:6px; }
.htaf-card-price { font-size: 18px; font-weight: 800; color: var(--htaf-primary); }
.htaf-card-title { font-size:15px; font-weight:600; margin:0; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.htaf-card-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color: var(--htaf-muted); margin-top:auto; }

/* Cities */
.htaf-cities { display:flex; flex-wrap:wrap; gap:10px; }
.htaf-city { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:1px solid var(--htaf-line); border-radius:999px; text-decoration:none; color: var(--htaf-ink-2); font-size:14px; }
.htaf-city:hover { border-color: var(--htaf-primary); color: var(--htaf-primary); }

/* CTA band */
.htaf-cta-band { background: linear-gradient(135deg, var(--htaf-primary) 0%, var(--htaf-primary-600) 100%); color:#fff; border-radius: 20px; padding: 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; flex-wrap:wrap; }
.htaf-cta-band h3 { margin:0 0 6px; font-size:22px; }
.htaf-cta-band p { margin:0; opacity:.9; }
.htaf-cta-band .htaf-btn-primary { background:#fff; color: var(--htaf-primary); }

/* Empty */
.htaf-empty { padding: 60px 20px; text-align:center; color: var(--htaf-muted); background:#fff; border:1px dashed var(--htaf-line); border-radius: var(--htaf-radius); }
.htaf-empty-ic, .htaf-empty h3 { color: var(--htaf-ink); }
.htaf-empty-ic { font-size: 40px; }

/* Listing */
.htaf-listing .htaf-toolbar { display:grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 16px; }
.htaf-tb-search { grid-column:1/2; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--htaf-line); border-radius:10px; padding: 4px 12px; }
.htaf-tb-search input { flex:1; border:0; outline:0; padding: 10px 0; font-size:14px; }
.htaf-tb-right { grid-column:2/3; display:flex; align-items:center; gap:12px; }
.htaf-tb-right select { padding:9px 10px; border:1px solid var(--htaf-line); border-radius:8px; background:#fff; }
.htaf-view-switch { display:inline-flex; border:1px solid var(--htaf-line); border-radius:8px; overflow:hidden; }
.htaf-view-switch button { border:0; background:#fff; padding:8px 12px; cursor:pointer; font-size:16px; color: var(--htaf-muted); }
.htaf-view-switch button.active { background: var(--htaf-primary); color:#fff; }
.htaf-sidebar { grid-column:1/2; grid-row:2/3; width: 260px; background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding: 18px; height: fit-content; position: sticky; top: 16px; }
.htaf-listing .htaf-toolbar { grid-template-columns: 260px 1fr; }
.htaf-tb-search { grid-column:1/3; }
.htaf-tb-right { grid-column:1/3; justify-content:flex-end; }
.htaf-results { grid-column:2/3; grid-row:3/4; }
.htaf-listing .htaf-toolbar { grid-template-rows: auto auto 1fr; }
.htaf-sidebar { grid-row: 3/4; }
.htaf-filter-group { margin-bottom: 18px; }
.htaf-filter-group h4 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color: var(--htaf-muted); }
.htaf-facets { list-style:none; padding:0; margin:0; max-height:220px; overflow:auto; }
.htaf-facets li label { display:flex; align-items:center; gap:8px; padding: 4px 0; font-size:14px; cursor:pointer; }
.htaf-facets li span { color: var(--htaf-muted); font-size:12px; margin-left:auto; }
.htaf-price-range { display:flex; align-items:center; gap:8px; }
.htaf-price-range input { flex:1; padding:8px 10px; border:1px solid var(--htaf-line); border-radius:8px; font-size:13px; }
.htaf-filter-group input[type=text] { width:100%; padding:8px 10px; border:1px solid var(--htaf-line); border-radius:8px; font-size:13px; }
.htaf-reset { display:block; text-align:center; margin-top:10px; color: var(--htaf-muted); font-size:13px; text-decoration:none; }
.htaf-pager { display:flex; gap:6px; justify-content:center; margin-top: 24px; flex-wrap:wrap; }
.htaf-pager a { padding:8px 12px; border:1px solid var(--htaf-line); border-radius:8px; text-decoration:none; color: var(--htaf-ink-2); font-weight:600; }
.htaf-pager a.is-active { background: var(--htaf-primary); color:#fff; border-color: var(--htaf-primary); }

/* Single Ad */
.htaf-single { }
.htaf-breadcrumb { font-size:13px; color: var(--htaf-muted); margin-bottom: 16px; }
.htaf-breadcrumb a { color: var(--htaf-primary); text-decoration:none; }
.htaf-single-grid { display:grid; grid-template-columns: 1fr 380px; gap: 28px; align-items:start; }
.htaf-single-media { }
.htaf-gallery { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); overflow:hidden; }
.htaf-gallery-main { position:relative; aspect-ratio: 4/3; background:#f1f5f9; overflow:hidden; }
.htaf-gallery-main img { width:100%; height:100%; object-fit:contain; display:block; }
.htaf-gallery-main .htaf-flag { position:absolute; top:12px; left:12px; }
.htaf-sold-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:60px; font-weight:800; color: var(--htaf-danger); background: rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; }
.htaf-gallery-thumbs { display:flex; gap:8px; padding:12px; overflow-x:auto; }
.htaf-thumb { flex:0 0 80px; width:80px; height:60px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#f1f5f9; }
.htaf-thumb.is-active, .htaf-thumb:hover { border-color: var(--htaf-primary); }
.htaf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.htaf-desc-card { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding: 24px; margin-top: 20px; }
.htaf-desc-card h2 { margin:0 0 14px; font-size:18px; }
.htaf-desc { font-size:15px; line-height:1.7; color: var(--htaf-ink-2); }
.htaf-tags { margin-top: 18px; display:flex; flex-wrap:wrap; gap:6px; }
.htaf-tag { padding:4px 10px; background:#eef2ff; color: var(--htaf-primary); border-radius:6px; font-size:12px; font-weight:600; }

.htaf-buybox { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding: 22px; box-shadow: var(--htaf-shadow); position:sticky; top:16px; }
.htaf-buybox-title { font-size:22px; margin:0 0 10px; font-weight:700; letter-spacing:-.01em; }
.htaf-buybox-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color: var(--htaf-muted); margin-bottom:14px; }
.htaf-buybox-price { font-size: 32px; font-weight: 800; color: var(--htaf-primary); margin-bottom: 18px; }
.htaf-buybox-hint { font-size:12px; color: var(--htaf-muted); text-align:center; margin: 8px 0 0; }
.htaf-buybox-actions { display:flex; gap:6px; margin-top: 14px; }
.htaf-btn-block + .htaf-btn-block { margin-top: 8px; }

.htaf-seller-card { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding:18px; margin-top:16px; }
.htaf-seller-head { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.htaf-seller-avatar { width:46px; height:46px; border-radius:50%; background: linear-gradient(135deg, var(--htaf-primary), var(--htaf-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.htaf-seller-avatar-lg { width:88px; height:88px; font-size:36px; }
.htaf-seller-name { font-weight:700; }
.htaf-seller-since { font-size:12px; color: var(--htaf-muted); }
.htaf-seller-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; text-align:center; padding: 12px 0; border-top:1px solid var(--htaf-line); border-bottom:1px solid var(--htaf-line); margin-bottom:12px; }
.htaf-seller-stats div { display:flex; flex-direction:column; }
.htaf-seller-stats strong { font-weight:700; font-size:15px; color: var(--htaf-ink); }
.htaf-seller-stats span { font-size:11px; color: var(--htaf-muted); }

.htaf-safety { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding:16px; margin-top:16px; }
.htaf-safety h4 { margin:0 0 8px; font-size:14px; }
.htaf-safety ul { margin:0; padding-left:18px; font-size:13px; color: var(--htaf-ink-2); }
.htaf-safety li { margin-bottom:4px; }

/* Seller page */
.htaf-seller-banner { background: linear-gradient(135deg, #eef2ff, #fff, #fef3c7); border-radius: 20px; padding: 32px; margin-bottom: 24px; border:1px solid var(--htaf-line); }
.htaf-seller-banner-inner { display:grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items:center; }
.htaf-seller-info h1 { margin:0 0 8px; font-size:28px; letter-spacing:-.02em; }
.htaf-seller-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.htaf-badge { background:#fff; border:1px solid var(--htaf-line); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; color: var(--htaf-ink-2); }
.htaf-seller-kpis { display:flex; gap:24px; }
.htaf-seller-kpis div { display:flex; flex-direction:column; }
.htaf-seller-kpis strong { font-size:20px; font-weight:800; color: var(--htaf-primary); }
.htaf-seller-kpis span { font-size:12px; color: var(--htaf-muted); }

.htaf-reviews { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.htaf-review { background:#fff; border:1px solid var(--htaf-line); border-radius: var(--htaf-radius); padding: 18px; }
.htaf-review-stars { color: var(--htaf-accent); font-size:16px; margin-bottom:8px; }
.htaf-review p { margin:0 0 10px; font-size:14px; color: var(--htaf-ink-2); font-style:italic; }
.htaf-review span { font-size:12px; color: var(--htaf-muted); font-weight:600; }

/* Responsive */
@media (max-width: 900px) {
  .htaf-single-grid { grid-template-columns: 1fr; }
  .htaf-buybox { position:static; }
  .htaf-listing .htaf-toolbar { grid-template-columns: 1fr; }
  .htaf-sidebar { position:static; width:auto; grid-column: 1/2; grid-row: auto; }
  .htaf-results { grid-column: 1/2; grid-row: auto; }
  .htaf-search { flex-direction:column; }
  .htaf-search-sep { border-left:0; border-top:1px solid var(--htaf-line); flex:0 0 auto; }
  .htaf-search-btn { padding: 14px; }
  .htaf-seller-banner-inner { grid-template-columns: 1fr; text-align:center; }
  .htaf-seller-kpis { justify-content:center; }
  .htaf-list .htaf-card { grid-template-columns: 1fr; }
}