/*
 * Theme Name: Thế Giới Dầu Nhớt HQ - Child Theme
 * Theme URI: https://moboitronhq.com
 * Description: Astra Child Theme cho Thế Giới Dầu Nhớt HQ. Tương thích WooCommerce & Elementor với giao diện Navy/Gold chuyên nghiệp.
 * Author: HQ Team
 * Author URI: https://moboitronhq.com
 * Template: astra
 * Version: 3.7.0
 * Text Domain: hq-child
 * License: GPL v2 or later
 */

/* ============================================================
   DESIGN TOKENS - Màu sắc & Typography theo brand HQ
   ============================================================ */
:root {
  --hq-navy-50:  #f0f4f9;
  --hq-navy-100: #dde6f0;
  --hq-navy-800: #1b365d;
  --hq-navy-900: #0c2340;
  --hq-gold-400: #fbbf24;
  --hq-gold-500: #f59e0b;
  --hq-gold-600: #d97706;
  --hq-slate-50:  #f8fafc;
  --hq-slate-100: #f1f5f9;
  --hq-slate-200: #e2e8f0;
  --hq-slate-400: #94a3b8;
  --hq-slate-500: #64748b;
  --hq-slate-600: #475569;
  --hq-slate-700: #334155;
  --hq-slate-800: #1e293b;
  --hq-slate-900: #0f172a;
  --hq-white:    #ffffff;
  --hq-radius:   0.75rem;
  --hq-radius-sm: 0.5rem;
  --hq-radius-lg: 1.25rem;
  --hq-shadow:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --hq-shadow-md:0 4px 16px rgba(0,0,0,0.10);
  --hq-shadow-lg:0 10px 40px rgba(0,0,0,0.14);
  --hq-shadow-glow: 0 8px 30px rgba(245,158,11,0.25);
  --hq-gradient-gold: linear-gradient(135deg, var(--hq-gold-400), var(--hq-gold-600));
  --hq-gradient-navy: linear-gradient(135deg, var(--hq-navy-900) 0%, var(--hq-navy-800) 55%, #1e3a5f 100%);
  --hq-transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--hq-slate-800);
  background: var(--hq-white);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

a { color: var(--hq-navy-800); transition: var(--hq-transition); }
a:hover { color: var(--hq-gold-600); text-decoration: none; }

/* Custom scrollbar */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--hq-navy-900); }
html::-webkit-scrollbar-thumb { background: var(--hq-gold-500); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: var(--hq-gold-600); }
html { scrollbar-width: thin; scrollbar-color: var(--hq-gold-500) var(--hq-navy-900); }

/* ============================================================
   TOP BAR (trên header chính)
   ============================================================ */
#hq-topbar {
  background: var(--hq-navy-900);
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Tăng khoảng đệm cho hàng menu chính — áp dụng các selector phổ biến của cả
   Astra header mặc định lẫn header dựng bằng Elementor (site đang dùng Elementor
   Theme Builder cho header), để menu không bị bó sát/chật chội. */
.site-header .main-header-bar,
.ast-main-header-bar-wrap,
.elementor-widget-nav-menu .elementor-nav-menu,
nav.elementor-nav-menu--main {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.elementor-nav-menu > li > a,
.main-header-menu .menu-item > a {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* SỬA LỖI MENU BỊ DÀN TRẢI/TRÀN 2 BÊN: một số trang (vd. trang Shop mặc định
   không đi qua template Elementor của trang chủ) khiến widget Menu (Elementor
   hoặc menu chính Astra) áp dụng justify-content: space-between / width:100%
   làm các mục menu bị kéo dãn cách xa nhau bất thường. Ép menu luôn gọn, căn
   phải, cùng nhau — lặp lại class để tăng độ đặc hiệu (specificity) nhằm thắng
   CSS inline do page builder tự sinh ra. */
.elementor-nav-menu.elementor-nav-menu.elementor-nav-menu,
nav.elementor-nav-menu--main.elementor-nav-menu--main.elementor-nav-menu--main,
ul.main-header-menu.main-header-menu.main-header-menu {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 0.35rem !important;
}
.elementor-widget-nav-menu.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal,
.elementor-widget-nav-menu.elementor-widget-nav-menu .elementor-nav-menu {
  justify-content: flex-end !important;
  width: auto !important;
}
.site-header .main-header-bar-navigation,
.site-header .main-header-bar .site-header-focus-item {
  flex: 0 0 auto !important;
  width: auto !important;
}
#hq-topbar .hq-topbar-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
#hq-topbar .hq-topbar-left { display: flex; gap: 1.5rem; align-items: center; }
#hq-topbar .hq-topbar-right { display: flex; gap: 1rem; align-items: center; }
#hq-topbar i.gold { color: var(--hq-gold-500); margin-right: 0.35rem; }
#hq-topbar a { color: #cbd5e1; }
#hq-topbar a:hover { color: var(--hq-gold-400); }
#hq-topbar .sep { color: rgba(255,255,255,0.2); }
@media (max-width: 768px) { #hq-topbar { display: none; } }

/* ============================================================
   HEADER OVERRIDE (Astra header custom)
   ============================================================ */
.site-header,
.ast-header-break-point .site-header,
#ast-fixed-header { box-shadow: 0 2px 16px rgba(0,0,0,0.10); }

.ast-site-header-cart .count {
  background: var(--hq-gold-500) !important;
  color: var(--hq-navy-900) !important;
}

/* ============================================================
   MEGA MENU SẢN PHẨM (mega-menu WooCommerce)
   ============================================================ */
.hq-mega-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 780px; background: var(--hq-white);
  border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius);
  box-shadow: var(--hq-shadow-lg);
  display: none; z-index: 9999;
  padding: 1.5rem;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
}
.hq-mega-menu.is-open { display: grid; }

/* Phòng thủ: nếu vì lý do nào đó mục "Sản Phẩm" có thêm submenu con thật (dropdown
   mặc định của WordPress/Astra), luôn ẨN hẳn để không đè lên mega menu tùy biến. */
.hq-has-mega { position: relative; }
.hq-has-mega > .sub-menu { display: none !important; }

.hq-mega-cat-list {
  border-right: 1px solid var(--hq-slate-100);
  padding-right: 1rem;
  min-width: 0;
}
.hq-mega-cat-list a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--hq-radius-sm);
  font-size: 0.82rem; font-weight: 600;
  color: var(--hq-slate-700);
  min-width: 0; overflow-wrap: break-word; word-break: break-word;
}
.hq-mega-cat-list a:hover,
.hq-mega-cat-list a.active {
  background: var(--hq-navy-50);
  color: var(--hq-navy-800);
}
.hq-mega-cat-list a i { color: var(--hq-gold-500); width: 16px; }

.hq-mega-brand-panel { padding-left: 1.25rem; }
.hq-mega-brand-panel h4 {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--hq-slate-400);
  margin-bottom: 0.75rem;
}
.hq-mega-brands {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.hq-mega-brands a {
  padding: 0.3rem 0.75rem; background: var(--hq-slate-100);
  border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
  color: var(--hq-slate-700); border: 1px solid var(--hq-slate-200);
}
.hq-mega-brands a:hover {
  background: var(--hq-navy-900); color: var(--hq-gold-400);
  border-color: var(--hq-navy-900);
}

/* ============================================================
   MEGA MENU V2 - danh mục bên trái hover đổi panel bên phải
   ============================================================ */
.hq-mega-menu-v2 {
  min-width: 960px;
  max-width: min(1200px, calc(100vw - 32px));
  grid-template-columns: 264px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.hq-mega-menu-v2 *,
.hq-mega-menu-v2 *::before,
.hq-mega-menu-v2 *::after {
  box-sizing: border-box;
}
.hq-mega-menu-v2 a {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border: none;
}
/* Scrollbar riêng, nhẹ nhàng cho các khối cuộn bên trong mega menu — tách biệt
   hoàn toàn khỏi scrollbar vàng/navy của toàn trang (đã giới hạn lại chỉ áp
   dụng cho scrollbar chính của <html> ở phần GLOBAL RESET phía trên). */
.hq-mega-cat-nav::-webkit-scrollbar,
.hq-mega-panel::-webkit-scrollbar { width: 6px; }
.hq-mega-cat-nav::-webkit-scrollbar-track,
.hq-mega-panel::-webkit-scrollbar-track { background: transparent; }
.hq-mega-cat-nav::-webkit-scrollbar-thumb,
.hq-mega-panel::-webkit-scrollbar-thumb { background: var(--hq-slate-200); border-radius: 4px; }
.hq-mega-cat-nav::-webkit-scrollbar-thumb:hover,
.hq-mega-panel::-webkit-scrollbar-thumb:hover { background: var(--hq-slate-400); }
.hq-mega-cat-nav, .hq-mega-panel { scrollbar-width: thin; scrollbar-color: var(--hq-slate-200) transparent; }

.hq-mega-cat-nav {
  border-right: 1px solid var(--hq-slate-100);
  background: var(--hq-slate-50);
  padding: 0.65rem;
  max-height: 560px;
  overflow-y: auto;
  min-width: 0;
}
.hq-mega-cat-nav-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.65rem;
  margin-bottom: 0.1rem;
  border-radius: var(--hq-radius-sm);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--hq-slate-700) !important;
  min-width: 0; overflow-wrap: break-word;
}
.hq-mega-cat-nav-item span:not(.hq-mega-cat-nav-dot) { flex: 1 1 auto; min-width: 0; }
.hq-mega-cat-nav-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--hq-slate-300);
}
.hq-mega-cat-nav-item:hover .hq-mega-cat-nav-dot,
.hq-mega-cat-nav-item.active .hq-mega-cat-nav-dot { background: var(--hq-gold-500); }
.hq-mega-cat-nav-arrow { font-size: 0.6rem; opacity: 0.3; flex-shrink: 0; }
.hq-mega-cat-nav-item:hover,
.hq-mega-cat-nav-item.active {
  background: var(--hq-white); color: var(--hq-navy-900) !important;
  box-shadow: var(--hq-shadow);
}
.hq-mega-cat-nav-item.active .hq-mega-cat-nav-arrow { opacity: 0.8; color: var(--hq-gold-500); }

.hq-mega-panels { position: relative; min-width: 0; }
.hq-mega-panel {
  display: none;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem 2rem;
  max-height: 560px;
  overflow-y: auto;
  align-items: start;
}
.hq-mega-panel.active { display: grid; }

.hq-mega-col { min-width: 0; }
.hq-mega-col h4 {
  font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--hq-slate-400);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.35rem;
}

/* Gán vị trí cột CỐ ĐỊNH — tránh lỗi CSS Grid tự động xếp nhầm cột khi 1 danh
   mục không có danh mục con (khi đó sản phẩm nổi bật sẽ chiếm toàn bộ chiều rộng). */
.hq-mega-col-subcats { grid-column: 1; border-right: 1px solid var(--hq-slate-100); padding-right: 1.5rem; }
.hq-mega-col-products { grid-column: 2; }

.hq-mega-subcat-list { display: flex; flex-direction: column; gap: 0.15rem; }
.hq-mega-subcat-item {
  display: block;
  padding: 0.48rem 0.55rem; border-radius: var(--hq-radius-sm);
  font-size: 0.8rem; font-weight: 600; color: var(--hq-slate-700);
  min-width: 0; overflow-wrap: break-word; line-height: 1.4;
}
.hq-mega-subcat-item:hover { background: var(--hq-navy-50); color: var(--hq-navy-800); }

.hq-mega-product-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; align-items: start; }
.hq-mega-view-all-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 0.4rem; border-radius: var(--hq-radius-sm);
  border: 1px dashed var(--hq-gold-400); min-width: 0; text-align: center;
  font-size: 0.7rem; font-weight: 700; color: var(--hq-gold-500) !important;
  transition: var(--hq-transition); aspect-ratio: 1/1;
}
.hq-mega-view-all-tile:hover { background: var(--hq-gold-50, #fffbeb); border-color: var(--hq-gold-500); }
.hq-mega-view-all-tile i { font-size: 1.1rem; }
.hq-mega-product-item {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.4rem; border-radius: var(--hq-radius-sm);
  border: 1px solid var(--hq-slate-100); min-width: 0;
  transition: var(--hq-transition);
}
.hq-mega-product-item:hover { border-color: var(--hq-navy-100); background: var(--hq-navy-50); box-shadow: var(--hq-shadow); }
.hq-mega-product-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 1/1;
  border-radius: 8px; overflow: hidden; background: var(--hq-slate-50); flex-shrink: 0;
}
.hq-mega-product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
.hq-mega-product-name {
  font-size: 0.7rem; font-weight: 600; color: var(--hq-slate-700);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.25;
}
.hq-mega-badge {
  position: absolute; top: 0.2rem; left: 0.2rem;
  font-size: 0.52rem; font-weight: 900; padding: 0.1rem 0.3rem;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.02em;
}
.hq-mega-badge-hot { background: #dc2626; color: #fff; }
.hq-mega-badge-new { background: var(--hq-gold-500); color: var(--hq-navy-900); }
.hq-mega-empty { font-size: 0.78rem; color: var(--hq-slate-400); grid-column: 1 / -1; }

/* Thương hiệu dạng tag nhỏ gọn, đặt ngay dưới Sản Phẩm Nổi Bật (không chiếm cột riêng) */
.hq-mega-brand-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hq-slate-100);
}
.hq-mega-brand-tags-label {
  font-size: 0.72rem; font-weight: 800; color: var(--hq-slate-400);
  text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.15rem;
  display: flex; align-items: center; gap: 0.3rem;
}
.hq-mega-brand-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.65rem; border-radius: 9999px;
  background: var(--hq-slate-50); border: 1px solid var(--hq-slate-200);
  font-size: 0.72rem; font-weight: 700; color: var(--hq-slate-600);
  transition: var(--hq-transition);
}
.hq-mega-brand-tag:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }
.hq-mega-brand-tag .n { font-size: 0.65rem; font-weight: 700; color: var(--hq-slate-400); }
.hq-mega-brand-tag:hover .n { color: var(--hq-gold-400); opacity: 0.7; }
.hq-mega-view-all {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--hq-slate-100);
  font-size: 0.78rem; font-weight: 800; color: var(--hq-gold-600);
}
.hq-mega-view-all:hover { color: var(--hq-gold-500) !important; }

@media (max-width: 1240px) {
  .hq-mega-menu-v2 { min-width: 92vw; }
  .hq-mega-panel { grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; }
  .hq-mega-product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   BREADCRUMB HQ
   ============================================================ */
.hq-breadcrumb {
  background: var(--hq-slate-50);
  border-bottom: 1px solid var(--hq-slate-100);
  padding: 0.65rem 0;
  font-size: 0.78rem;
}
.hq-breadcrumb .hq-bc-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; gap: 0.4rem;
  flex-wrap: wrap; color: var(--hq-slate-500);
}
.hq-breadcrumb a { color: var(--hq-slate-500); font-weight: 500; }
.hq-breadcrumb a:hover { color: var(--hq-gold-600); }
.hq-breadcrumb .sep { color: var(--hq-slate-300); font-size: 0.65rem; }
.hq-breadcrumb .current { color: var(--hq-slate-700); font-weight: 600; }
.hq-breadcrumb i { color: var(--hq-gold-500); margin-right: 0.25rem; }

/* ============================================================
   SHOP / ARCHIVE PRODUCTS - Layout chính
   ============================================================ */
.woocommerce .hq-shop-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .woocommerce .hq-shop-layout { grid-template-columns: 1fr; }
}

/* ----------- SIDEBAR LỌC SẢN PHẨM ----------- */
.hq-filter-sidebar {
  position: sticky; top: 90px;
  min-width: 0;
  box-sizing: border-box;
}
.hq-filter-sidebar h3 {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--hq-slate-400);
  padding: 0 0 0.5rem; margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--hq-gold-500);
}
.hq-filter-box {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius); padding: 1.25rem;
  margin-bottom: 1rem; box-shadow: var(--hq-shadow);
}
.hq-filter-box h4 {
  font-size: 0.8rem; font-weight: 700; color: var(--hq-navy-800);
  margin-bottom: 0.75rem; display: flex; justify-content: space-between;
  cursor: pointer;
}
.hq-filter-box h4 i { transition: var(--hq-transition); }
.hq-filter-box.is-closed h4 i { transform: rotate(-90deg); }
.hq-filter-box.is-closed .hq-filter-body { display: none; }

/* Danh mục cây trong sidebar */
.hq-cat-tree { list-style: none; margin: 0; padding: 0; }
.hq-cat-tree li { margin: 0; }
.hq-cat-tree > li > a {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.45rem 0.5rem; border-radius: var(--hq-radius-sm);
  font-size: 0.82rem; font-weight: 700; color: var(--hq-slate-700);
  min-width: 0; overflow-wrap: break-word; word-break: break-word;
}
.hq-cat-tree > li > a:hover,
.hq-cat-tree > li.current-cat > a { color: var(--hq-navy-800); background: var(--hq-navy-50); }
.hq-cat-tree > li > a i { color: var(--hq-gold-500); font-size: 0.75rem; margin-top: 0.2rem; flex-shrink: 0; }

.hq-cat-tree ul { list-style: none; margin: 0 0 0 1.1rem; padding: 0; }
.hq-cat-tree ul a {
  display: block; padding: 0.32rem 0.5rem;
  font-size: 0.78rem; font-weight: 500; color: var(--hq-slate-600);
  border-radius: var(--hq-radius-sm);
  overflow-wrap: break-word; word-break: break-word;
}
.hq-cat-tree ul a:hover { color: var(--hq-navy-800); background: var(--hq-slate-50); }
.hq-cat-tree ul a.current { color: var(--hq-gold-600); font-weight: 700; }

/* Brand filter checkboxes */
.hq-brand-filter { max-height: 260px; overflow-y: auto; }
.hq-brand-filter label {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; font-size: 0.8rem; color: var(--hq-slate-600);
  cursor: pointer;
}
.hq-brand-filter label:hover { color: var(--hq-navy-800); }
.hq-brand-filter input[type="checkbox"] {
  accent-color: var(--hq-navy-800); width: 15px; height: 15px;
}
.hq-brand-count {
  margin-left: auto; font-size: 0.7rem;
  background: var(--hq-slate-100); color: var(--hq-slate-500);
  padding: 0.1rem 0.45rem; border-radius: 9999px;
}

/* Price range */
.hq-price-range { padding: 0.5rem 0; }
.hq-price-range input[type=range] {
  width: 100%; accent-color: var(--hq-navy-800);
}
.hq-price-inputs { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.hq-price-inputs input {
  width: 50%; padding: 0.35rem 0.5rem; font-size: 0.78rem;
  border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm);
  text-align: center;
}

/* Active filter tags */
.hq-active-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.hq-active-filters .tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.6rem; background: var(--hq-navy-900);
  color: var(--hq-gold-400); border-radius: 9999px; font-size: 0.72rem; font-weight: 600;
}
.hq-active-filters .tag button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; line-height: 1; }

/* ----------- PRODUCT GRID ----------- */
.hq-products-main { min-width: 0; }

.hq-shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.hq-shop-toolbar .hq-result-count { font-size: 0.82rem; color: var(--hq-slate-500); }
.hq-shop-toolbar-right { display: flex; gap: 0.5rem; align-items: center; }

.hq-view-toggle button {
  padding: 0.4rem 0.65rem; border: 1px solid var(--hq-slate-200);
  background: var(--hq-white); border-radius: var(--hq-radius-sm);
  cursor: pointer; color: var(--hq-slate-500);
  transition: var(--hq-transition);
}
.hq-view-toggle button.active,
.hq-view-toggle button:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }

.hq-sort-select {
  padding: 0.4rem 0.75rem; border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-sm); font-size: 0.8rem;
  color: var(--hq-slate-700); background: var(--hq-white); cursor: pointer;
}

/* WooCommerce product grid override */
.woocommerce ul.products {
  display: grid !important; float: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important; margin: 0 !important; padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products.hq-list-view {
  grid-template-columns: minmax(0, 1fr) !important;
}
.woocommerce ul.products li.product { min-width: 0; }

/* ============================================================
   SHOP FILTER SIDEBAR (trang Shop /san-pham/ + danh mục sản phẩm)
   ============================================================ */
.hq-shop-layout { display: flex; align-items: flex-start; gap: 2rem; padding: 0.5rem 0 2rem; }
@media (max-width: 900px) { .hq-shop-layout { flex-direction: column; } }

.hq-shop-filter-sidebar { width: 270px; flex-shrink: 0; }
@media (max-width: 900px) { .hq-shop-filter-sidebar { width: 100%; } }

.hq-filter-box {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-lg); box-shadow: var(--hq-shadow);
  padding: 1.25rem; position: sticky; top: 90px;
}
@media (max-width: 900px) { .hq-filter-box { position: static; } }

.hq-filter-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--hq-slate-100); }
.hq-filter-box-head h4 { font-size: 0.88rem; font-weight: 800; color: var(--hq-navy-900); display: flex; align-items: center; gap: 0.4rem; }
.hq-filter-box-head h4 i { color: var(--hq-gold-500); }
.hq-filter-clear { font-size: 0.72rem; font-weight: 700; color: var(--hq-slate-400); text-decoration: underline; }
.hq-filter-clear:hover { color: #dc2626; }

.hq-filter-group { margin-bottom: 1.5rem; }
.hq-filter-group:last-of-type { margin-bottom: 1.25rem; }
.hq-filter-group h5 { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hq-slate-400); margin-bottom: 0.65rem; }

/* Ô tìm kiếm sản phẩm trong sidebar */
.hq-filter-search { display: flex; border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm); overflow: hidden; }
.hq-filter-search input[type="search"] { flex: 1; min-width: 0; border: none; padding: 0.55rem 0.7rem; font-size: 0.8rem; color: var(--hq-slate-700); outline: none; }
.hq-filter-search input[type="search"]::placeholder { color: var(--hq-slate-400); }
.hq-filter-search button { border: none; background: var(--hq-navy-900); color: var(--hq-gold-400); width: 40px; flex-shrink: 0; cursor: pointer; transition: var(--hq-transition); }
.hq-filter-search button:hover { background: var(--hq-gold-500); color: var(--hq-navy-900); }

.hq-filter-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem;
	max-height: 420px; overflow-y: auto;
	scrollbar-width: none; scrollbar-color: var(--hq-slate-300) transparent
}
.hq-filter-list:hover {  scrollbar-width: thin !important; scrollbar-color: var(--hq-slate-300) transparent;
}
.hq-filter-list::-webkit-scrollbar { width: 5px; }
.hq-filter-list::-webkit-scrollbar-track { background: transparent; }
.hq-filter-list::-webkit-scrollbar-thumb { background: var(--hq-slate-300); border-radius: 99px; }
.hq-filter-list::-webkit-scrollbar-thumb:hover { background: var(--hq-slate-400); }
.hq-filter-list li a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-radius: var(--hq-radius-sm);
  font-size: 0.78rem; font-weight: 600; color: var(--hq-slate-600);
  line-height: 1.35;
  transition: var(--hq-transition);
}
.hq-filter-list li a:hover { background: var(--hq-slate-50); color: var(--hq-navy-800); }
.hq-filter-list li.active a { background: var(--hq-navy-900); color: var(--hq-gold-400); }
.hq-filter-list li.active a .count { background: rgba(245,158,11,0.2); color: var(--hq-gold-400); }
.hq-filter-list .count { font-size: 0.66rem; font-weight: 700; color: var(--hq-slate-400); background: var(--hq-slate-100); padding: 0.05rem 0.4rem; border-radius: 9999px; flex-shrink: 0; }
.hq-filter-brand-list li a i { color: var(--hq-slate-300); margin-right: 0.15rem; }
.hq-filter-brand-list li.active a i { color: var(--hq-gold-400); }

/* Gợi ý còn nội dung phía dưới cần cuộn — dải mờ nhẹ ở đáy khung */
.hq-filter-group:has(.hq-filter-list) { position: relative; }

/* Danh mục cha (accordion) — chỉ hiện danh mục cha, bấm "+" mới sổ danh mục con */
.hq-filter-cat-list li.hq-cat-parent { display: block; }
.hq-filter-cat-list details { border-radius: var(--hq-radius-sm); }
.hq-filter-cat-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0rem; border-radius: var(--hq-radius-sm);
  cursor: pointer; list-style: none; transition: var(--hq-transition);
}
.hq-filter-cat-list summary::-webkit-details-marker { display: none; }
.hq-filter-cat-list summary:hover { background: var(--hq-slate-50); }
.hq-filter-cat-list summary a { font-size: 0.78rem; font-weight: 600; color: var(--hq-navy-900); flex: 1; line-height: 1.35; }
.hq-filter-cat-list li.hq-cat-parent.active > details > summary a { color: #fff; font-weight: 800; }
.hq-cat-toggle-meta { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.hq-cat-toggle-icon { font-size: 0.6rem; color: var(--hq-slate-400); transition: transform 0.2s ease; }
.hq-filter-cat-list details[open] > summary .hq-cat-toggle-icon { transform: rotate(45deg); color: var(--hq-gold-600); }
.hq-filter-cat-list details[open] > summary { background: var(--hq-slate-50); }

.hq-filter-sublist { list-style: none; margin: 0.1rem 0 0.3rem; padding: 0 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.05rem; border-left: 2px solid var(--hq-slate-100); }
.hq-filter-sublist li a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.34rem 0.5rem; border-radius: var(--hq-radius-sm);
  font-size: 0.74rem; font-weight: 500; color: var(--hq-slate-500);
  line-height: 1.3;
  transition: var(--hq-transition);
}
.hq-filter-sublist li a:hover { background: var(--hq-slate-50); color: var(--hq-navy-800); }
.hq-filter-sublist li.active a { background: var(--hq-navy-900); color: var(--hq-gold-400); font-weight: 700; }
.hq-filter-sublist li.active a .count { background: rgba(245,158,11,0.2); color: var(--hq-gold-400); }
.hq-filter-sublist .count { font-size: 0.64rem; font-weight: 700; color: var(--hq-slate-400); background: var(--hq-slate-100); padding: 0.05rem 0.4rem; border-radius: 9999px; flex-shrink: 0; }

.hq-filter-cta { background: var(--hq-slate-50); border-radius: var(--hq-radius); padding: 1rem; text-align: center; }
.hq-filter-cta p { font-size: 0.76rem; color: var(--hq-slate-500); margin-bottom: 0.65rem; line-height: 1.5; }

.hq-shop-main { flex: 1; min-width: 0; }
/* Có sidebar => lưới sản phẩm hẹp hơn, giảm còn 3 cột trên desktop rộng, 2 cột màn vừa */
.hq-shop-main .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1400px) { .hq-shop-main .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .hq-shop-main .woocommerce ul.products { grid-template-columns: minmax(0, 1fr) !important; } }

/* Ẩn tiêu đề mặc định của Astra/WooCommerce trên trang Shop & danh mục sản phẩm
   — đã thay bằng .hq-cat-hero riêng (đồng bộ thương hiệu) render qua hook PHP. */
.woocommerce-products-header__title.page-title,
.woocommerce-page .ast-woocommerce-container > .page-title,
.woocommerce-page .woocommerce-products-header,
.tax-product_cat .page-title,
.post-type-archive-product .page-title {
  display: none !important;
}
.woocommerce-result-count, .woocommerce-ordering { font-size: 0.82rem; color: var(--hq-slate-500); }
@media (max-width: 1200px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .woocommerce ul.products { grid-template-columns: minmax(0, 1fr) !important; } }

/* Badge "Đang xem" trên danh mục đang được ghim lên đầu sidebar */
.hq-current-badge {
  display: inline-block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--hq-gold-500); color: var(--hq-navy-900);
  padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle;
}
.hq-filter-cat-list li.hq-pinned { border-bottom: 1px dashed var(--hq-slate-200); padding-bottom: 0.35rem; margin-bottom: 0.35rem; }

/* Ô tìm kiếm sản phẩm — dropdown gợi ý trực tiếp (live search) */
.hq-filter-search-wrap { position: relative; }
.hq-live-search-results {
  display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  background: var(--hq-white); border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius);
  box-shadow: var(--hq-shadow-lg); max-height: 360px; overflow-y: auto; padding: 0.4rem;
}
.hq-live-search-results.active { display: block; }
.hq-live-search-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; border-radius: var(--hq-radius-sm);
  transition: var(--hq-transition);
}
.hq-live-search-item:hover { background: var(--hq-slate-50); }
.hq-live-search-item img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--hq-radius-sm); flex-shrink: 0; border: 1px solid var(--hq-slate-100); }
.hq-live-search-item .info { min-width: 0; }
.hq-live-search-item .name { font-size: 0.8rem; font-weight: 700; color: var(--hq-slate-800); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hq-live-search-item .cat { font-size: 0.68rem; color: var(--hq-slate-400); margin-top: 0.15rem; }
.hq-live-search-loading, .hq-live-search-empty {
  padding: 1rem; text-align: center; font-size: 0.78rem; color: var(--hq-slate-400);
}
.hq-live-search-viewall {
  display: block; text-align: center; padding: 0.6rem; font-size: 0.78rem; font-weight: 700;
  color: var(--hq-navy-800); border-top: 1px solid var(--hq-slate-100); margin-top: 0.3rem;
}
.hq-live-search-viewall:hover { color: var(--hq-gold-600); }
.hq-filter-empty-note { font-size: 0.76rem; color: var(--hq-slate-400); line-height: 1.6; background: var(--hq-slate-50); padding: 0.75rem; border-radius: var(--hq-radius-sm); }
.hq-filter-empty-note strong { color: var(--hq-slate-600); }

/* ============================================================
   PHÂN TRANG (WooCommerce/Astra pagination) — đồng bộ navy/gold
   ============================================================ */
.woocommerce nav.woocommerce-pagination,
.hq-shop-main .pagination,
nav.pagination {
  margin-top: 2rem;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.hq-shop-main .pagination .nav-links {
  display: flex !important; flex-wrap: wrap; gap: 0.5rem;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  border: none !important; background: none !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
.hq-shop-main .pagination .nav-links .page-numbers {
  display: flex !important; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--hq-slate-200) !important; border-radius: var(--hq-radius-sm) !important;
  background: var(--hq-white) !important; color: var(--hq-slate-600) !important;
  font-size: 0.85rem; font-weight: 700;
  transition: var(--hq-transition);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers:hover,
.hq-shop-main .pagination .nav-links .page-numbers:hover {
  border-color: var(--hq-navy-900) !important; color: var(--hq-navy-900) !important;
  background: var(--hq-slate-50) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.hq-shop-main .pagination .nav-links .page-numbers.current {
  background: var(--hq-gradient-gold) !important; color: var(--hq-navy-900) !important;
  border-color: transparent !important; box-shadow: var(--hq-shadow-glow);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border: none !important; background: none !important; color: var(--hq-slate-400) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .next,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev,
.hq-shop-main .pagination .nav-links .next,
.hq-shop-main .pagination .nav-links .prev {
  background: var(--hq-navy-900) !important; color: var(--hq-gold-400) !important; border-color: var(--hq-navy-900) !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .next:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev:hover,
.hq-shop-main .pagination .nav-links .next:hover,
.hq-shop-main .pagination .nav-links .prev:hover {
  background: var(--hq-gold-500) !important; color: var(--hq-navy-900) !important;
}

/* ============================================================
   PRODUCT CARD (loop)
   ============================================================ */
.woocommerce ul.products li.product {
  margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important;
}

.woocommerce ul.products li.product .hq-product-card {
  background: var(--hq-white);
  border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-lg);
  overflow: hidden;
  box-shadow: var(--hq-shadow);
  transition: var(--hq-transition);
  display: flex; flex-direction: column; height: 100%;
  position: relative;
  min-width: 0;
}
.woocommerce ul.products li.product .hq-product-card:hover {
  box-shadow: var(--hq-shadow-lg);
  transform: translateY(-3px);
  border-color: var(--hq-navy-100);
}

.hq-product-card .hq-card-image {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--hq-slate-50);
}
.hq-product-card .hq-card-image img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 1rem;
  transition: transform 0.4s ease;
}
.hq-product-card:hover .hq-card-image img { transform: scale(1.05); }

.hq-product-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: #00a569; color: #ffffff;
  font-size: 0.65rem; font-weight: 800; padding: 0.2rem 0.55rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em;
  z-index: 2;
}
.hq-product-badge.onsale { background: #dc2626; color: #fff; }

.hq-product-badge-new {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--hq-gradient-gold); color: var(--hq-navy-900);
  font-size: 0.65rem; font-weight: 800; padding: 0.2rem 0.55rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

.hq-product-card .hq-card-body {
  padding: 0.9rem 1rem; flex: 1; display: flex; flex-direction: column; justify-content: center;
}

.hq-product-card .hq-card-title {
  font-size: 0.88rem; font-weight: 700; color: var(--hq-slate-800);
  line-height: 1.4; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hq-product-card .hq-card-title a { color: inherit; }
.hq-product-card .hq-card-title a:hover { color: var(--hq-navy-800); }

.hq-product-card .hq-card-footer {
  padding: 0 3rem 1rem;
  display: flex; align-items: center; justify-content: center;
}
.hq-product-card .hq-card-footer .button { width: 100%; justify-content: center; }

.woocommerce ul.products li.product .price {
  font-size: 1rem; font-weight: 800; color: var(--hq-navy-800);
  margin: 0; line-height: 1;
}
.woocommerce ul.products li.product .price del { color: var(--hq-slate-400); font-size: 0.78rem; font-weight: 500; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.hq-price-on-request {
  font-size: 0.78rem; font-weight: 700; color: var(--hq-gold-600);
}

/* Add to cart / Quote button in card */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
  background: var(--hq-navy-900) !important;
  color: var(--hq-gold-400) !important;
  border: none !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--hq-radius-sm) !important;
  font-size: 0.75rem !important; font-weight: 700 !important;
  transition: var(--hq-transition) !important;
  white-space: nowrap;
  text-align: center;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: var(--hq-gold-500) !important;
  color: var(--hq-navy-900) !important;
}

/* LIST VIEW card */
.hq-list-view li.product .hq-product-card { flex-direction: row; }
.hq-list-view li.product .hq-card-image { width: 200px; flex-shrink: 0; aspect-ratio: auto; height: 160px; }
.hq-list-view li.product .hq-card-body { padding: 1rem 1.25rem; }
.hq-list-view li.product .hq-card-footer { border-top: none; border-left: 1px solid var(--hq-slate-100); flex-direction: column; width: 160px; flex-shrink: 0; justify-content: center; }
@media (max-width: 640px) { .hq-list-view li.product .hq-product-card { flex-direction: column; } }

/* ============================================================
   PRODUCT CATEGORY HEADER SECTION
   ============================================================ */
.hq-cat-hero {
  background: var(--hq-gradient-navy);
  color: var(--hq-white); padding: 3.5rem 0; position: relative; overflow: hidden;
}
.hq-cat-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(245,158,11,0.12) 0%, transparent 60%);
}
.hq-cat-hero .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.hq-cat-hero h1 { font-size: 2.2rem; font-weight: 900; margin-bottom: 0.5rem; color: var(--hq-white) !important; letter-spacing: -0.01em; }
.hq-cat-hero .hq-cat-desc { color: rgba(255,255,255,0.7); font-size: 0.92rem; margin-bottom: 1.1rem; max-width: 640px; line-height: 1.7; }
.hq-cat-hero .hq-gold-line { width: 56px; height: 4px; background: var(--hq-gradient-gold); border-radius: 99px; }
@media (max-width: 768px){.ast-woocommerce-container > .hq-cat-hero {display: none;}}
/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.woocommerce div.product {
  display: block !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  max-width: 1280px; margin: 2rem auto !important; padding: 0 1.5rem;
}
.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product .summary { grid-column: 2; }
@media (max-width: 768px) {.woocommerce div.product { grid-template-columns: 1fr !important; } }

/* Product title */
.woocommerce div.product h1.product_title {
  font-size: 1.6rem; font-weight: 900; color: var(--hq-navy-900);
  line-height: 1.3; margin-bottom: 0.5rem;
}

/* Product brand */
.hq-product-brand-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--hq-gold-600); margin-bottom: 0.5rem;
}

/* Price */
.woocommerce div.product .price {
  font-size: 1.5rem; font-weight: 900; color: var(--hq-navy-800);
  margin: 1rem 0 !important;
}
.woocommerce div.product .price del { color: var(--hq-slate-400); font-size: 1rem; }
.woocommerce div.product .price ins { text-decoration: none; }

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 0.88rem; color: var(--hq-slate-600);
  padding: 1rem; background: var(--hq-slate-50);
  border-left: 3px solid var(--hq-gold-500);
  border-radius: 0 var(--hq-radius-sm) var(--hq-radius-sm) 0;
  margin: 1rem 0;
}

/* Add to cart */
.woocommerce div.product form.cart .button {
  background: var(--hq-navy-900) !important; color: var(--hq-gold-400) !important;
  border: 2px solid transparent !important; border-radius: var(--hq-radius-sm) !important;
  font-weight: 800 !important; font-size: 0.9rem !important;
  padding: 0.85rem 2rem !important; transition: var(--hq-transition) !important;
  letter-spacing: 0.03em;
}
.woocommerce div.product form.cart .button:hover {
  background: var(--hq-gold-500) !important; color: var(--hq-navy-900) !important;
}

/* Quote button */
.hq-quote-btn {
  display: block; width: 100%;
  margin-top: 0.6rem;
  padding: 0.85rem; text-align: center;
  background: transparent; border: 2px solid var(--hq-navy-900);
  color: var(--hq-navy-800); border-radius: var(--hq-radius-sm);
  font-weight: 800; font-size: 0.88rem; cursor: pointer;
  transition: var(--hq-transition);
}
.hq-quote-btn:hover { background: var(--hq-navy-50); color: var(--hq-navy-900); }

/* Product meta */
.woocommerce div.product .product_meta {
  font-size: 0.78rem; color: var(--hq-slate-500);
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--hq-slate-100);
}
.woocommerce div.product .product_meta span { display: block; margin-bottom: 0.3rem; }
.woocommerce div.product .product_meta a { color: var(--hq-gold-600); font-weight: 700; }

/* Product tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1; margin-top: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  border-bottom: 2px solid var(--hq-slate-200);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 0.75rem 1.25rem;
  font-size: 0.85rem; font-weight: 700; color: var(--hq-slate-600);
  border: none; background: none; margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hq-navy-800);
  border-bottom: 2px solid var(--hq-gold-500);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.5rem; background: var(--hq-white);
  border: 1px solid var(--hq-slate-100); border-top: none;
  border-radius: 0 0 var(--hq-radius) var(--hq-radius);
}

/* Technical specs table */
.hq-specs-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  margin: 1rem 0;
}
.hq-specs-table tr { border-bottom: 1px solid var(--hq-slate-100); }
.hq-specs-table tr:nth-child(even) td:first-child { background: var(--hq-slate-50); }
.hq-specs-table td { padding: 0.65rem 0.75rem; }
.hq-specs-table td:first-child { font-weight: 700; color: var(--hq-navy-800); width: 45%; }
.hq-specs-table td:last-child { color: var(--hq-slate-600); }

/* OEM Approvals */
.hq-oem-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
.hq-oem-tags span {
  padding: 0.25rem 0.65rem; background: var(--hq-navy-50); color: var(--hq-navy-800);
  border: 1px solid var(--hq-navy-100); border-radius: 4px;
  font-size: 0.73rem; font-weight: 700;
}

/* Pack sizes */
.hq-pack-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.hq-pack-sizes .hq-pack {
  padding: 0.4rem 0.85rem; border: 2px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm);
  font-size: 0.8rem; font-weight: 700; color: var(--hq-slate-700); cursor: pointer;
  transition: var(--hq-transition);
}
.hq-pack-sizes .hq-pack:hover,
.hq-pack-sizes .hq-pack.selected {
  border-color: var(--hq-navy-800); background: var(--hq-navy-900); color: var(--hq-gold-400);
}

/* Product sidebar (related, upsell) */
.hq-product-sidebar {
  padding: 0 1.5rem 2rem;
  max-width: 1280px; margin: 0 auto;
}
.hq-product-sidebar .hq-sidebar-box {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius); padding: 1.25rem; margin-bottom: 1rem;
  box-shadow: var(--hq-shadow);
}
.hq-product-sidebar .hq-sidebar-box h4 {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--hq-slate-400);
  border-bottom: 2px solid var(--hq-gold-500); padding-bottom: 0.5rem; margin-bottom: 0.75rem;
}

/* CTA Quote in product sidebar */
.hq-product-cta {
  background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-800));
  color: var(--hq-white); border-radius: var(--hq-radius); padding: 1.25rem;
  text-align: center;
}
.hq-product-cta h4 { color: var(--hq-gold-400); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.hq-product-cta p { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; }
.hq-product-cta a {
  display: inline-block; padding: 0.65rem 1.5rem;
  background: var(--hq-gold-500); color: var(--hq-navy-900);
  border-radius: var(--hq-radius-sm); font-weight: 800; font-size: 0.85rem;
}
.hq-product-cta a:hover { background: var(--hq-gold-600); color: var(--hq-navy-900); }

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.woocommerce .related.products,
.woocommerce .upsells.products {
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem;
}
.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
  font-size: 1.1rem; font-weight: 800; color: var(--hq-navy-900);
  border-left: 4px solid var(--hq-gold-500); padding-left: 0.75rem;
  margin-bottom: 1.5rem;
}
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  .woocommerce .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   BLOG / NEWS ARCHIVE
   ============================================================ */
.hq-news-layout {
  max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 2.5rem; align-items: start;
}
@media (max-width: 1024px) { .hq-news-layout { grid-template-columns: 1fr; } }

/* News category tabs */
.hq-news-cat-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1.5rem; border-bottom: 2px solid var(--hq-slate-100); padding-bottom: 1rem;
}
.hq-news-cat-tabs a {
  padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 700;
  border-radius: 9999px; border: 1.5px solid var(--hq-slate-200);
  color: var(--hq-slate-600); transition: var(--hq-transition);
}
.hq-news-cat-tabs a:hover,
.hq-news-cat-tabs a.active {
  background: var(--hq-gradient-navy); color: var(--hq-gold-400);
  border-color: var(--hq-navy-900);
}

/* News card grid */
.hq-news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 640px) { .hq-news-grid { grid-template-columns: 1fr; } }

.hq-news-card {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-lg); overflow: hidden;
  box-shadow: var(--hq-shadow); transition: var(--hq-transition);
}
.hq-news-card:hover { box-shadow: var(--hq-shadow-lg); transform: translateY(-3px); border-color: var(--hq-navy-100); }
.hq-news-card .hq-nc-thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
}
.hq-news-card .hq-nc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hq-news-card:hover .hq-nc-thumb img { transform: scale(1.05); }
.hq-nc-cat-badge {
  position: absolute; bottom: 0.5rem; left: 0.5rem;
  background: var(--hq-navy-900); color: var(--hq-gold-400);
  font-size: 0.65rem; font-weight: 800; padding: 0.2rem 0.55rem;
  border-radius: 4px; text-transform: uppercase;
}
.hq-news-card .hq-nc-body { padding: 1rem; }
.hq-nc-date { font-size: 0.7rem; color: var(--hq-slate-400); margin-bottom: 0.4rem; }
.hq-news-card h2, .hq-news-card h3 {
  font-size: 0.9rem; font-weight: 700; line-height: 1.4;
  color: var(--hq-slate-800); margin-bottom: 0.5rem;
}
.hq-news-card h2 a, .hq-news-card h3 a { color: inherit; }
.hq-news-card h2 a:hover, .hq-news-card h3 a:hover { color: var(--hq-navy-800); }
.hq-nc-excerpt { font-size: 0.8rem; color: var(--hq-slate-500); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hq-nc-readmore { font-size: 0.75rem; font-weight: 700; color: var(--hq-gold-600); margin-top: 0.75rem; display: inline-block; }

/* Featured news (first post large) */
.hq-news-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: var(--hq-radius-lg); overflow: hidden; border: 1px solid var(--hq-slate-200); box-shadow: var(--hq-shadow-lg); }
.hq-news-featured .hq-nc-thumb { aspect-ratio: auto; height: 100%; min-height: 240px; }
.hq-news-featured .hq-nc-body { padding: 2rem; }
.hq-news-featured h2 { font-size: 1.25rem; }
.hq-news-featured .hq-nc-excerpt { -webkit-line-clamp: 3; }
@media (max-width: 640px) { .hq-news-featured { grid-template-columns: 1fr; } }

/* ============================================================
   SINGLE POST
   ============================================================ */
.hq-single-layout {
  max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 2.5rem; align-items: start;
}
@media (max-width: 1024px) { .hq-single-layout { grid-template-columns: 1fr; } }

.hq-single-article {
  background: var(--hq-white); border: 1px solid var(--hq-slate-100);
  border-radius: var(--hq-radius-lg); box-shadow: var(--hq-shadow); overflow: hidden;
  min-width: 0;
}
.hq-article-header { padding: 2rem 2rem 1.5rem; }
.hq-article-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: var(--hq-slate-400); margin-bottom: 0.75rem; flex-wrap: wrap; }
.hq-article-meta .cat-tag { background: var(--hq-navy-900); color: var(--hq-gold-400); padding: 0.2rem 0.55rem; border-radius: 4px; font-weight: 800; font-size: 0.65rem; text-transform: uppercase; }
.hq-article-title { font-size: 1.75rem; font-weight: 900; color: var(--hq-navy-900); line-height: 1.3; margin-bottom: 0; }
.hq-article-featured { aspect-ratio: 16/7; overflow: hidden; }
.hq-article-featured img { width: 100%; height: 100%; object-fit: cover; }
.hq-article-content {
  padding: 2rem;
  font-size: 0.95rem; line-height: 1.8; color: var(--hq-slate-700);
}
.hq-article-content h2 { font-size: 1.2rem; font-weight: 800; color: var(--hq-navy-900); margin: 1.5rem 0 0.75rem; }
.hq-article-content h3 { font-size: 1rem; font-weight: 700; color: var(--hq-navy-800); margin: 1.25rem 0 0.6rem; }
.hq-article-content p { margin-bottom: 1rem; }
.hq-article-content ul, .hq-article-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.hq-article-content li { margin-bottom: 0.4rem; }
.hq-article-content img { border-radius: var(--hq-radius-sm); margin: 1rem 0; }
.hq-article-content blockquote {
  border-left: 4px solid var(--hq-gold-500); padding: 1rem 1.25rem;
  background: var(--hq-slate-50); border-radius: 0 var(--hq-radius-sm) var(--hq-radius-sm) 0;
  font-style: italic; color: var(--hq-slate-600); margin: 1.25rem 0;
}
.hq-article-content table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 1rem 0; }
.hq-article-content th { background: var(--hq-navy-900); color: var(--hq-gold-400); padding: 0.65rem 0.75rem; text-align: left; font-weight: 700; }
.hq-article-content td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--hq-slate-100); }
.hq-article-content tr:nth-child(even) td { background: var(--hq-slate-50); }

/* Article tags */
.hq-article-tags { padding: 1rem 2rem; border-top: 1px solid var(--hq-slate-100); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hq-article-tags span { font-size: 0.75rem; font-weight: 700; color: var(--hq-slate-400); margin-right: 0.5rem; }
.hq-article-tags a { padding: 0.2rem 0.6rem; background: var(--hq-slate-100); border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--hq-slate-600); }
.hq-article-tags a:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); }

/* Product CTA in article */
.hq-article-product-cta {
  margin: 2rem; padding: 1.5rem; background: var(--hq-navy-900);
  border-radius: var(--hq-radius); border: 2px solid var(--hq-gold-500);
  color: var(--hq-white);
}
.hq-article-product-cta .hq-badge { background: var(--hq-gold-500); color: var(--hq-navy-900); font-size: 0.65rem; font-weight: 900; padding: 0.2rem 0.55rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.hq-article-product-cta h3 { font-size: 1rem; font-weight: 800; margin: 0.75rem 0 0.4rem; }
.hq-article-product-cta p { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.hq-article-product-cta .hq-products-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.75rem; }
.hq-article-product-cta .mini-card {
  background: rgba(255,255,255,0.07); border-radius: var(--hq-radius-sm);
  padding: 0.75rem; font-size: 0.78rem;
}
.hq-article-product-cta .mini-card strong { display: block; color: var(--hq-gold-400); font-size: 0.82rem; margin-bottom: 0.25rem; }
.hq-article-product-cta .mini-card a { color: var(--hq-gold-500); font-weight: 700; font-size: 0.73rem; }

/* ============================================================
   NEWS SIDEBAR
   ============================================================ */
.hq-news-sidebar { position: sticky; top: 90px; min-width: 0; }
.hq-sidebar-widget {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius); padding: 1.25rem;
  margin-bottom: 1.25rem; box-shadow: var(--hq-shadow);
}
.hq-sidebar-widget h3 {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--hq-slate-400);
  border-bottom: 2px solid var(--hq-gold-500); padding-bottom: 0.5rem; margin-bottom: 0.9rem;
}

/* Hot post list */
.hq-hot-posts { list-style: none; margin: 0; padding: 0; }
.hq-hot-posts li {
  display: flex; gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid var(--hq-slate-100);
}
.hq-hot-posts li:last-child { border-bottom: none; }
.hq-hot-posts .thumb { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.hq-hot-posts .info h4 { font-size: 0.8rem; font-weight: 700; line-height: 1.35; color: var(--hq-slate-800); margin-bottom: 0.25rem; }
.hq-hot-posts .info h4 a { color: inherit; }
.hq-hot-posts .info h4 a:hover { color: var(--hq-navy-800); }
.hq-hot-posts .info span { font-size: 0.68rem; color: var(--hq-slate-400); }
.hq-hot-number { width: 22px; height: 22px; border-radius: 50%; background: var(--hq-navy-900); color: var(--hq-gold-400); font-size: 0.7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.15rem; }

/* Recent posts sidebar */
.hq-recent-posts { list-style: none; margin: 0; padding: 0; }
.hq-recent-posts li { padding: 0.55rem 0; border-bottom: 1px solid var(--hq-slate-100); }
.hq-recent-posts li:last-child { border-bottom: none; }
.hq-recent-posts a { font-size: 0.82rem; font-weight: 600; color: var(--hq-slate-700); display: block; }
.hq-recent-posts a:hover { color: var(--hq-navy-800); }
.hq-recent-posts .rc-date { font-size: 0.68rem; color: var(--hq-slate-400); }

/* Category list sidebar */
.hq-sidebar-cats { list-style: none; margin: 0; padding: 0; }
.hq-sidebar-cats li { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--hq-slate-100); }
.hq-sidebar-cats li:last-child { border-bottom: none; }
.hq-sidebar-cats a { font-size: 0.82rem; font-weight: 600; color: var(--hq-slate-600); }
.hq-sidebar-cats a:hover { color: var(--hq-navy-800); }
.hq-sidebar-cats .count { font-size: 0.7rem; background: var(--hq-slate-100); color: var(--hq-slate-500); padding: 0.1rem 0.45rem; border-radius: 9999px; }

/* Expert CTA sidebar */
.hq-expert-cta {
  background: linear-gradient(135deg, var(--hq-navy-900), var(--hq-navy-800));
  color: var(--hq-white); text-align: center;
}
.hq-expert-cta h3 { color: var(--hq-gold-400) !important; border-color: var(--hq-gold-500) !important; }
.hq-expert-cta p { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.hq-expert-cta a.hq-btn-gold {
  display: inline-block; padding: 0.6rem 1.25rem;
  background: var(--hq-gold-500); color: var(--hq-navy-900);
  border-radius: var(--hq-radius-sm); font-weight: 800; font-size: 0.82rem;
}
.hq-expert-cta a.hq-btn-gold:hover { background: var(--hq-gold-600); }

/* ============================================================
   HOME PAGE SECTIONS
   ============================================================ */

/* Hero */
.hq-hero {
  background: linear-gradient(160deg, var(--hq-navy-900) 0%, var(--hq-navy-800) 60%, #1a3560 100%);
  color: var(--hq-white); padding: 5rem 0 4rem; position: relative; overflow: hidden;
}
.hq-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(245,158,11,0.12) 0%, transparent 55%);
}
.hq-hero .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hq-hero::after {
  content: '';
  position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;
  background: radial-gradient(ellipse at top right, rgba(245,158,11,0.14), transparent 60%);
  pointer-events: none; z-index: 0;
}
.hq-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; padding: 0.3rem 0.85rem; font-size: 0.75rem; color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }
.hq-hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hq-gold-500); animation: ping 1.5s ease infinite; }
@keyframes ping { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.4)} }
.hq-hero h1 { font-size: 3rem; font-weight: 900; line-height: 1.15; margin-bottom: 1.25rem; color: var(--hq-white) !important; }
.hq-hero h1 .highlight { background: linear-gradient(135deg, var(--hq-gold-400), var(--hq-gold-600)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hq-hero-desc { font-size: 1rem; color: rgba(255,255,255,0.7); margin-bottom: 2rem; line-height: 1.7; }
.hq-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hq-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 0.85rem; background: var(--hq-gradient-gold); color: var(--hq-navy-900); font-weight: 800; font-size: 0.9rem; border-radius: var(--hq-radius-sm); transition: var(--hq-transition); border: 2px solid transparent; box-shadow: var(--hq-shadow-glow); }
.hq-btn-primary:hover { background: var(--hq-gold-600); color: var(--hq-navy-900); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(245,158,11,0.35); }
.hq-btn-outline-white { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.85rem; background: transparent; color: var(--hq-white); font-weight: 700; font-size: 0.9rem; border-radius: var(--hq-radius-sm); border: 2px solid rgba(255,255,255,0.4); transition: var(--hq-transition); }
.hq-btn-outline-white:hover { border-color: var(--hq-white); color: var(--hq-white); background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.hq-hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; position: relative; z-index: 1; } 
.hq-stat { text-align: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--hq-radius-sm); padding: 1rem; transition: var(--hq-transition); }
.hq-stat:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.hq-stat .num { font-size: 1.8rem; font-weight: 900; line-height: 1; background: var(--hq-gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hq-stat .label { font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-top: 0.25rem; font-weight: 500; }

/* Hero side product cards */
.hq-hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hq-hero-mini-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--hq-radius); padding: 1rem; }
.hq-hero-mini-card .icon { font-size: 1.5rem; color: var(--hq-gold-400); margin-bottom: 0.5rem; }
.hq-hero-mini-card h4 { font-size: 0.82rem; font-weight: 700; color: var(--hq-white); margin-bottom: 0.25rem; }
.hq-hero-mini-card p { font-size: 0.72rem; color: rgba(255,255,255,0.55); }

/* Category showcase grid */
.hq-cat-showcase { padding: 5rem 0; background: var(--hq-slate-50); }
.hq-cat-showcase .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hq-section-header { text-align: center; margin-bottom: 3rem; }
.hq-section-header .eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--hq-gold-600); margin-bottom: 0.5rem; }
.hq-section-header h2 { font-size: 2.1rem; font-weight: 900; color: var(--hq-navy-900); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.hq-section-header .line { width: 56px; height: 4px; background: var(--hq-gradient-gold); border-radius: 99px; margin: 0.85rem auto 0; }
.hq-section-header p { font-size: 0.92rem; color: var(--hq-slate-500); margin-top: 0.85rem; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.7; }

.hq-cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media (max-width: 1024px) { .hq-cat-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .hq-cat-grid { grid-template-columns: repeat(2,1fr); } }

.hq-cat-card {
  background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-lg); overflow: hidden;
  box-shadow: var(--hq-shadow); transition: var(--hq-transition);
  text-align: center;
}
.hq-cat-card:hover { box-shadow: var(--hq-shadow-lg); transform: translateY(-4px); border-color: var(--hq-navy-100); }
.hq-cat-card .hq-cc-image { height: 140px; position: relative; overflow: hidden; }
.hq-cat-card .hq-cc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hq-cat-card:hover .hq-cc-image img { transform: scale(1.08); }
.hq-cat-card .hq-cc-image::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(12,35,64,0.7), transparent); }
.hq-cat-card .hq-cc-body { padding: 1rem; }
.hq-cat-card h3 { font-size: 0.88rem; font-weight: 800; color: var(--hq-navy-900); margin-bottom: 0.3rem; }
.hq-cat-card p { font-size: 0.75rem; color: var(--hq-slate-500); }
.hq-cat-card .hq-cc-count { font-size: 0.7rem; font-weight: 700; color: var(--hq-gold-600); margin-top: 0.4rem; }
.hq-cat-card a { display: block; color: inherit; }

/* Trust strip */
.hq-trust-strip { background: var(--hq-navy-900); padding: 2.5rem 0; }
.hq-trust-strip .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
@media (max-width: 768px) { .hq-trust-strip .hq-inner { grid-template-columns: repeat(2,1fr); } }
.hq-trust-item { text-align: center; }
.hq-trust-item i { font-size: 1.75rem; color: var(--hq-gold-400); margin-bottom: 0.6rem; display: block; }
.hq-trust-item h4 { font-size: 0.88rem; font-weight: 800; color: var(--hq-white); margin-bottom: 0.25rem; }
.hq-trust-item p { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

/* Brand logos */
.hq-brands-section { padding: 3rem 0; background: var(--hq-white); border-top: 1px solid var(--hq-slate-100); }
.hq-brands-section .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hq-brands-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.5rem; }
.hq-brand-pill {
  padding: 0.5rem 1.25rem; border: 2px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm);
  font-size: 0.88rem; font-weight: 800; color: var(--hq-slate-600);
  transition: var(--hq-transition); background: var(--hq-white);
  letter-spacing: 0.03em;
}
.hq-brand-pill:hover { border-color: var(--hq-navy-800); color: var(--hq-navy-800); background: var(--hq-navy-50); }

/* ============================================================
   PAGINATION
   ============================================================ */
.hq-pagination { display: flex; justify-content: center; gap: 0.35rem; margin: 2rem 0; flex-wrap: wrap; }
.hq-pagination a, .hq-pagination span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--hq-radius-sm);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid var(--hq-slate-200); color: var(--hq-slate-600);
  transition: var(--hq-transition);
}
.hq-pagination a:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }
.hq-pagination .current { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer.hq-footer-dark { background: var(--hq-slate-900); color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.06); }
.hq-footer-main-4col { max-width: 1280px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px) { .hq-footer-main-4col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hq-footer-main-4col { grid-template-columns: 1fr; } }

.hq-footer-logo { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.hq-footer-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hq-gold-500); color: var(--hq-navy-900);
  font-weight: 900; font-size: 1.1rem; padding: 0.35rem 0.65rem; border-radius: 6px;
}
.hq-footer-logo-text { font-size: 1.05rem; font-weight: 800; color: var(--hq-white); letter-spacing: 0.03em; }
.hq-footer-brand p { font-size: 0.78rem; line-height: 1.7; margin-bottom: 1rem; color: rgba(255,255,255,0.5); }
.hq-footer-social { display: flex; gap: 0.6rem; }
.hq-footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7);
  font-size: 0.85rem; transition: var(--hq-transition);
}
.hq-footer-social a:hover { background: var(--hq-gold-500); color: var(--hq-navy-900); }

.hq-footer-col h4 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hq-white); margin-bottom: 1.1rem; }
.hq-footer-col ul { list-style: none; margin: 0; padding: 0; }
.hq-footer-col ul li { margin-bottom: 0.55rem; }
.hq-footer-col ul a { font-size: 0.8rem; color: rgba(255,255,255,0.5); transition: var(--hq-transition); }
.hq-footer-col ul a:hover { color: var(--hq-gold-400); padding-left: 0.25rem; }

.hq-footer-legal p { font-size: 0.76rem; line-height: 1.8; color: rgba(255,255,255,0.5); margin-bottom: 0.75rem; }
.hq-footer-legal strong { color: rgba(255,255,255,0.75); }
.hq-footer-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(16,185,129,0.12); color: #34d399;
  border: 1px solid rgba(16,185,129,0.25); border-radius: 6px;
  padding: 0.3rem 0.65rem; font-size: 0.7rem; font-weight: 700;
}

.hq-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 1.25rem 1.5rem; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   BADGE "HOT" TRÊN MENU SẢN PHẨM
   ============================================================ */
.hq-nav-hot-badge {
  background: var(--hq-gold-500); color: var(--hq-navy-900);
  font-size: 0.6rem; font-weight: 900; padding: 0.1rem 0.4rem;
  border-radius: 9999px; margin-left: 0.35rem; vertical-align: middle;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* ============================================================
   RESPONSIVE MOBILE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hq-filter-sidebar { display: none; }
  .hq-filter-sidebar.mobile-open { display: block; position: fixed; inset: 0; z-index: 999; overflow-y: auto; padding: 1rem; background: var(--hq-white); }
  .hq-mobile-filter-btn { display: flex; }
  .hq-news-layout { padding: 1rem; }
  .hq-single-layout { padding: 1rem; }
  .woocommerce div.product { padding: 0 1rem !important; margin: 1rem auto !important; }
  .hq-article-header, .hq-article-content { padding: 1.25rem; }
  .hq-article-title { font-size: 1.3rem; }
  .hq-filter-list .count{font-size: 0.5rem;}
  .hq-hero .hq-inner { grid-template-columns: 1fr; } 
  .hq-hero h1 { font-size: 2rem; } 
  .hq-hero-side { display: none; } 
  .hq-hero-stats{display:none;} 
  .hq-hero{padding-top: 2rem;} 
  .hq-hero-desc{font-size: 0.95rem;} 
  ul.main-header-menu.main-header-menu.main-header-menu {display: block !important;} 
  .hq-product-card .hq-card-footer{padding: 0 1rem 1rem;} 
  .woocommerce ul.products {grid-template-columns: repeat(auto-fill, minmax(150px, 0fr)) !important;} .hq-mega-menu.is-open {display: block; !important} .hq-mega-panels {display: none;} ul.products li.product h3{font-size: 0.85em !important;}.hq-filter-list li a{gap: 1.1rem; padding: 0.1rem .5rem .1rem 0rem; font-size: .58rem;}.hq-filter-group:has(.hq-filter-list){display: table-cell;margin: 0px 8px 0px 0px;}.hq-filter-brand-list li a i{padding-right: 10px;}.woocommerce .hq-shop-layout{padding: 1.5rem 2.5rem 1.5rem 1.5rem;}.hq-filter-cat-list summary{display:none;}.hq-filter-group h5{font-size: .65rem}
}

/* Mobile filter button */
.hq-mobile-filter-btn {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; background: var(--hq-navy-900); color: var(--hq-gold-400);
  border: none; border-radius: var(--hq-radius-sm); font-weight: 700; font-size: 0.82rem;
  cursor: pointer; margin-bottom: 1rem;
}
@media (max-width: 1024px) { .hq-mobile-filter-btn { display: flex; } }

/* ============================================================
   LƯỚI SẢN PHẨM WOOCOMMERCE - CSS AN TOÀN TỐI THIỂU
   Sau khi gỡ bỏ toàn bộ thiết kế card tùy biến trước đây (để nhường quyền tự thiết kế
   bằng Elementor), trang Danh mục/Shop hiển thị theo mặc định của WooCommerce lại bị vỡ
   (ảnh gallery hiển thị full-size không được cắt/căn khung, sản phẩm không xếp thành
   lưới rõ ràng). Đây CHỈ là phần vá tối thiểu, trung lập (không có màu sắc/khung viền
   thương hiệu HQ) để trang không bị vỡ trong lúc chờ bạn tự thiết kế lại bằng Elementor —
   Elementor vẫn có thể ghi đè các rule này bất cứ lúc nào bằng CSS/style riêng của nó.
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  display: block;
  margin-bottom: 0.5rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem; font-weight: 700; color: var(--hq-slate-800);
}

/* ============================================================
   WOOCOMMERCE NOTIFICATIONS & MISC
   ============================================================ */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--hq-navy-800) !important;
}
.woocommerce-message::before { color: var(--hq-navy-800) !important; }
.woocommerce-message a.button, .woocommerce-info a.button { background: var(--hq-navy-900) !important; color: var(--hq-gold-400) !important; }

/* Star rating */
.star-rating span::before { color: var(--hq-gold-500) !important; }
.woocommerce .star-rating { color: var(--hq-gold-500) !important; }

/* Quantity input */
.woocommerce input.qty { border: 2px solid var(--hq-slate-200) !important; border-radius: var(--hq-radius-sm) !important; padding: 0.6rem 0.75rem !important; font-weight: 700; font-size: 1rem; }

/* Search form */
.search-form { display: flex; gap: 0.35rem; }
.search-form input[type="search"] { flex: 1; padding: 0.55rem 0.85rem; border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm); font-size: 0.85rem; }
.search-form button { padding: 0.55rem 1rem; background: var(--hq-navy-900); color: var(--hq-gold-400); border: none; border-radius: var(--hq-radius-sm); cursor: pointer; }

/* Loading spinner */
.hq-loading { display: flex; justify-content: center; padding: 2rem; }
.hq-spinner { width: 36px; height: 36px; border: 3px solid var(--hq-slate-200); border-top-color: var(--hq-navy-800); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quote modal */
.hq-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.hq-modal-overlay.is-open { opacity: 1; pointer-events: all; }
.hq-modal { background: var(--hq-white); border-radius: var(--hq-radius); max-width: 520px; width: 92%; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.25s; }
.hq-modal-overlay.is-open .hq-modal { transform: translateY(0); }
.hq-modal-header { background: var(--hq-navy-900); color: var(--hq-white); padding: 1.25rem 1.5rem; border-radius: var(--hq-radius) var(--hq-radius) 0 0; display: flex; justify-content: space-between; align-items: center; }
.hq-modal-header h3 { font-size: 1rem; font-weight: 800; color: var(--hq-gold-400); margin: 0; }
.hq-modal-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 1.1rem; }
.hq-modal-body { padding: 1.5rem; }
.hq-form-group { margin-bottom: 1rem; }
.hq-form-group label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--hq-slate-600); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; }
.hq-form-group input, .hq-form-group select, .hq-form-group textarea {
  width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-sm); font-size: 0.88rem; color: var(--hq-slate-800); transition: var(--hq-transition);
}
.hq-form-group input:focus, .hq-form-group select:focus, .hq-form-group textarea:focus { outline: none; border-color: var(--hq-navy-800); box-shadow: 0 0 0 3px rgba(27,54,93,0.1); }
.hq-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hq-btn-submit { width: 100%; padding: 0.9rem; background: var(--hq-gradient-gold); color: var(--hq-navy-900); border: none; border-radius: var(--hq-radius-sm); font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: var(--hq-transition); box-shadow: var(--hq-shadow-glow); }
.hq-btn-submit:hover { background: var(--hq-gold-600); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(245,158,11,0.35); }
.hq-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Sticky phone button mobile */
.hq-sticky-phone { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 500; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.hq-sticky-phone a { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 800; box-shadow: var(--hq-shadow-lg); transition: var(--hq-transition); }
.hq-sticky-phone .phone-btn { background: var(--hq-gold-500); color: var(--hq-navy-900); }
.hq-sticky-phone .zalo-btn { background: #0068ff; color: #fff; }
.hq-sticky-phone a:hover { transform: scale(1.05); }

/* Phân trang mặc định của WordPress (the_posts_pagination) - đồng bộ style với .hq-pagination */
.hq-pagination-wrap .nav-links { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; }
.hq-pagination-wrap .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 0.5rem; border-radius: var(--hq-radius-sm);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid var(--hq-slate-200); color: var(--hq-slate-600);
  transition: var(--hq-transition);
}
.hq-pagination-wrap a.page-numbers:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }
.hq-pagination-wrap .page-numbers.current { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }

/* ============================================================
   FIX LAYOUT ASTRA - ép các trang HQ luôn xếp dọc (block)
   Astra mặc định bọc #primary/#secondary trong .ast-container với
   display:flex (dành cho layout content + sidebar nằm ngang). Khi các
   page template của HQ render nhiều <section> làm con trực tiếp bên
   trong đó mà không có sidebar, chúng bị flex-item hoá và xếp ngang
   thay vì xếp dọc như thiết kế. Ép về block để đảm bảo đúng bố cục.
   ============================================================ */
.ast-container,
.ast-container > #primary,
#content.site-content,
#primary,
#primary.content-area,
.hq-page-body,
.hq-page-body > * {
  display: block !important;
  width: 100% !important;
  float: none !important;
}
.hq-page-body { margin: 0; padding: 0; }
.hq-page-body > section,
.hq-page-body > div { width: 100%; }

/* CHẶN CSS MULTI-COLUMN (column-count) BỊ KẾ THỪA TỪ ASTRA/WOOCOMMERCE
   Đây là nguyên nhân thực sự khiến sidebar bộ lọc + lưới sản phẩm tự động "chia cột" kiểu
   báo giấy (2-4 cột hẹp chồng lên nhau) thay vì xếp thành 1 khối cuộn dọc như thiết kế —
   không phải lỗi CSS Grid. Astra áp thuộc tính columns/column-count cho một số danh sách
   trong khu vực nội dung/widget ở một số ngữ cảnh; ép column-count:1 để vô hiệu hoá hoàn
   toàn trong toàn bộ khu vực trang HQ (đặc biệt là trang Sản Phẩm). */
#primary,
#primary *,
.hq-shop-layout,
.hq-shop-layout *,
.hq-filter-sidebar,
.hq-filter-sidebar *,
.hq-products-main,
.hq-products-main *,
.woocommerce ul.products,
.hq-page-body,
.hq-page-body * {
  column-count: 1 !important;
  -webkit-column-count: 1 !important;
  -moz-column-count: 1 !important;
  columns: auto !important;
  -webkit-columns: auto !important;
  -moz-columns: auto !important;
}

/* NGUYÊN NHÂN GỐC ĐÃ XÁC NHẬN QUA DEVTOOLS: WooCommerce tự thêm class "columns-N"
   (ví dụ columns-3) vào <body> để LƯU SỐ CỘT hiển thị sản phẩm (chỉ có ý nghĩa nội bộ,
   KHÔNG liên quan gì đến CSS multi-column). Nhưng site đang tải thêm Tailwind CSS qua
   CDN (cdn.tailwindcss.com) — Tailwind lại có sẵn 1 utility class TRÙNG TÊN "columns-3"
   với nghĩa hoàn toàn khác: "columns: 3" (chia nội dung thành 3 CỘT KIỂU BÁO GIẤY).
   Do trùng tên, class của WooCommerce vô tình bị Tailwind "hiểu nhầm", khiến TOÀN BỘ
   <body> bị áp dụng column-count:3 — đây chính là nguyên nhân mọi danh sách dài (danh
   mục, lưới sản phẩm) bị chẻ thành nhiều cột hẹp suốt từ đầu. Ghi đè trực tiếp với độ
   ưu tiên cao hơn (kèm tên thẻ body) để thắng chắc chắn utility class của Tailwind. */
body.columns-1, body.columns-2, body.columns-3,
body.columns-4, body.columns-5, body.columns-6,
body[class*="columns-"] {
  columns: auto !important;
  column-count: 1 !important;
  -webkit-columns: auto !important;
  -webkit-column-count: 1 !important;
  -moz-columns: auto !important;
  -moz-column-count: 1 !important;
}

/* HQ tự dựng sidebar riêng (bộ lọc sản phẩm, sidebar tin tức...) bên trong nội dung
   trang, KHÔNG dùng sidebar mặc định (#secondary) của Astra. Nếu #secondary vẫn được
   render (do layout sidebar mặc định của Astra chưa tắt hẳn ở 1 số trang), nó sẽ bị
   ép chiều rộng rất hẹp bởi layout flex gốc, khiến chữ bị vỡ dòng từng ký tự. Ẩn hẳn
   để tránh xung đột và trùng lặp giao diện. */
#secondary,
.ast-container > #secondary,
aside#secondary.widget-area {
  display: none !important;
}

/* Đã xác minh qua DevTools thực tế: Astra thêm class "ast-left-sidebar" / "ast-right-sidebar"
   vào <body>, khiến CSS gốc của Astra tự trừ ~30% chiều rộng của #primary để dành cho
   #secondary (sidebar riêng của Astra) — đây là nguyên nhân "cột thứ 2" bị vỡ layout trên
   trang Sản Phẩm/Danh mục. Ghi đè trực tiếp đúng selector này với độ ưu tiên cao hơn. */
body.ast-left-sidebar #primary,
body.ast-right-sidebar #primary,
body.ast-left-sidebar .ast-container > #primary,
body.ast-right-sidebar .ast-container > #primary {
  width: 100% !important;
  float: none !important;
}
body.ast-left-sidebar #secondary,
body.ast-right-sidebar #secondary {
  display: none !important;
  width: 0 !important;
  float: none !important;
}
body.ast-left-sidebar .ast-container,
body.ast-right-sidebar .ast-container {
  display: block !important;
}

/* ============================================================
   PAGE TEMPLATES BỔ SUNG (Trang Chủ / Giới Thiệu / Liên Hệ / Báo Giá)
   ============================================================ */
.hq-page-hero {
  background: var(--hq-gradient-navy);
  color: var(--hq-white); padding: 4rem 0; text-align: center;
  position: relative; overflow: hidden;
}
.hq-page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(245,158,11,0.12), transparent 60%);
  pointer-events: none;
}
.hq-page-hero > * { position: relative; z-index: 1; }
.hq-page-hero h1 { font-size: 2.1rem; font-weight: 900; margin-bottom: 0.5rem; color: var(--hq-white) !important; }
.hq-page-hero p { color: rgba(255,255,255,0.7); font-size: 0.92rem; max-width: 620px; margin: 0.5rem auto 0; }

.hq-page-section { max-width: 1280px; margin: 0 auto; padding: 3rem 1.5rem; }
.hq-page-section.tight { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.hq-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding-top: 3rem; border-top: 1px solid var(--hq-slate-100); }
@media (max-width: 900px) { .hq-about-grid { grid-template-columns: 1fr; } }
.hq-about-grid img { border-radius: var(--hq-radius); box-shadow: var(--hq-shadow-md); }
.hq-about-content h2 { font-size: 1.6rem; font-weight: 900; color: var(--hq-navy-900); margin-bottom: 1rem; }
.hq-about-content p { color: var(--hq-slate-600); margin-bottom: 1rem; font-size: 0.92rem; }

.hq-contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px) { .hq-contact-layout { grid-template-columns: 1fr; } }
.hq-contact-info-box { background: var(--hq-white); border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-lg); box-shadow: var(--hq-shadow); padding: 1.5rem; margin-bottom: 1rem; }
.hq-contact-info-box h4 { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hq-slate-400); border-bottom: 2px solid var(--hq-gold-500); padding-bottom: 0.5rem; margin-bottom: 0.9rem; }
.hq-contact-info-box a, .hq-contact-info-box p { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--hq-slate-600); margin-bottom: 0.6rem; }
.hq-contact-info-box i { color: var(--hq-gold-500); width: 18px; margin-top: 0.15rem; }
.hq-contact-map { border-radius: var(--hq-radius-lg); overflow: hidden; border: 1px solid var(--hq-slate-200); box-shadow: var(--hq-shadow); }
.hq-contact-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.hq-contact-form-box { background: var(--hq-white); border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-lg); box-shadow: var(--hq-shadow-md); padding: 2rem; }
.hq-contact-form-box h3 { font-size: 1.2rem; font-weight: 800; color: var(--hq-navy-900); margin-bottom: 0.4rem; }
.hq-contact-form-box > p { color: var(--hq-slate-500); font-size: 0.85rem; margin-bottom: 1.5rem; }
.hq-form-note { font-size: 0.72rem; color: var(--hq-slate-400); margin-top: 0.75rem; text-align: center; }
.hq-form-alert { display: none; padding: 0.75rem 1rem; border-radius: var(--hq-radius-sm); font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; }
.hq-form-alert.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hq-form-alert.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.hq-quote-page-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { .hq-quote-page-layout { grid-template-columns: 1fr; } }
.hq-quote-steps { list-style: none; margin: 0; padding: 0; }
.hq-quote-steps li { display: flex; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hq-slate-100); font-size: 0.85rem; color: var(--hq-slate-600); }
.hq-quote-steps li:last-child { border-bottom: none; }
.hq-quote-steps .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--hq-navy-900); color: var(--hq-gold-400); font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.hq-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
@media (max-width: 900px) { .hq-values-grid { grid-template-columns: repeat(2,1fr); } }
.hq-value-card { text-align: center; background: var(--hq-white); border: 1px solid var(--hq-slate-200); border-radius: var(--hq-radius-lg); padding: 1.5rem 1.25rem; box-shadow: var(--hq-shadow); transition: var(--hq-transition); }
.hq-value-card:hover { box-shadow: var(--hq-shadow-md); transform: translateY(-3px); border-color: var(--hq-navy-100); }
.hq-value-card i { font-size: 1.8rem; color: var(--hq-gold-500); margin-bottom: 0.75rem; display: block; }
.hq-value-card h4 { font-size: 0.9rem; font-weight: 800; color: var(--hq-navy-900); margin-bottom: 0.4rem; }
.hq-value-card p { font-size: 0.8rem; color: var(--hq-slate-500); }

/* ============================================================
   BRAND LOGOS STRIP (đối tác thương hiệu — grayscale → màu khi hover)
   ============================================================ */
.hq-brandstrip-section { padding: 3.5rem 0; background: var(--hq-white); border-bottom: 1px solid var(--hq-slate-100); }
.hq-brandstrip-section .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hq-brandstrip-label { text-align: center; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; color: #0c2340; margin-bottom: 3rem; }
.hq-brandstrip-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3rem;
  align-items: center; justify-items: center;
  /*filter: grayscale(1); opacity: 0.7; transition: var(--hq-transition);*/
}
.hq-brandstrip-item:hover { filter: grayscale(0.4); opacity: 0.95; }
@media (max-width: 900px) { .hq-brandstrip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .hq-brandstrip-grid { grid-template-columns: repeat(2, 1fr); } }
.hq-brandstrip-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; transition: var(--hq-transition); }
.hq-brandstrip-item:hover { transform: translateY(-2px); filter: grayscale(0); }
.hq-brandstrip-item i { font-size: 1.7rem; color: var(--hq-slate-500); transition: var(--hq-transition); }
.hq-brandstrip-item:hover i { color: var(--hq-gold-600); }
.hq-brandstrip-item span { font-weight: 800; font-size: 0.82rem; color: var(--hq-slate-700); text-align: center; }

/* ============================================================
   GALLERY SECTION (Hình ảnh thực tế kho hàng / thí nghiệm)
   ============================================================ */
.hq-gallery-section { padding: 5rem 0; background: var(--hq-white); border-bottom: 1px solid var(--hq-slate-100); }
.hq-gallery-section .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hq-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .hq-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hq-gallery-grid { grid-template-columns: 1fr; } }
.hq-gallery-item {
  position: relative; border-radius: var(--hq-radius-lg); overflow: hidden;
  height: 260px; box-shadow: var(--hq-shadow); cursor: pointer;
  display: block; transition: var(--hq-transition);
}
.hq-gallery-item:hover { box-shadow: var(--hq-shadow-lg); transform: translateY(-3px); }
.hq-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hq-gallery-item:hover img { transform: scale(1.1); }
.hq-gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,35,64,0.85), transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem;
}
.hq-gallery-overlay h4 { color: var(--hq-white); font-weight: 800; font-size: 0.9rem; margin-bottom: 0.25rem; }
.hq-gallery-overlay p { color: rgba(255,255,255,0.75); font-size: 0.72rem; line-height: 1.5; }

/* ============================================================
   TRUST METRICS (chỉ số bảo vệ thiết bị — dạng progress bar)
   ============================================================ */
.hq-metrics-section { padding: 5rem 0; background: var(--hq-gradient-navy); color: var(--hq-white); position: relative; overflow: hidden; }
.hq-metrics-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(245,158,11,0.10), transparent 60%);
  pointer-events: none;
}
.hq-metrics-section .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.hq-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hq-metrics-grid { grid-template-columns: 1fr; } }
.hq-metrics-intro .eyebrow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hq-gold-400); margin-bottom: 0.6rem; display: block; }
.hq-metrics-intro h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; color: var(--hq-white); }
.hq-metrics-intro p { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.5rem; }
.hq-metrics-feature-list { display: flex; flex-direction: column; gap: 1.1rem; }
.hq-metrics-feature { display: flex; align-items: flex-start; gap: 1rem; }
.hq-metrics-feature .ico { background: rgba(245,158,11,0.15); color: var(--hq-gold-400); width: 40px; height: 40px; border-radius: var(--hq-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.05rem; }
.hq-metrics-feature h4 { font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.95); margin-bottom: 0.2rem; }
.hq-metrics-feature p { font-size: 0.76rem; color: rgba(255,255,255,0.55); }
.hq-metrics-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--hq-radius-lg); padding: 2rem; backdrop-filter: blur(6px); }
.hq-metrics-card h3 { font-size: 1.05rem; font-weight: 800; text-align: center; color: var(--hq-white); margin-bottom: 1.75rem; }
.hq-metric { margin-bottom: 1.5rem; }
.hq-metric:last-child { margin-bottom: 0; }
.hq-metric-top { display: flex; justify-content: space-between; font-size: 0.76rem; color: rgba(255,255,255,0.6); margin-bottom: 0.4rem; }
.hq-metric-top .val { font-weight: 800; color: var(--hq-gold-400); }
.hq-metric-top .val.emerald { color: #34d399; }
.hq-metric-bar { width: 100%; background: rgba(255,255,255,0.08); border-radius: 99px; height: 8px; overflow: hidden; }
.hq-metric-fill { height: 100%; border-radius: 99px; background: var(--hq-gradient-gold); transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }
.hq-metric-fill.emerald { background: linear-gradient(135deg, #34d399, #059669); }
.hq-metrics-cta { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--hq-radius); padding: 1.1rem; margin-top: 1.75rem; text-align: center; }
.hq-metrics-cta span { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; }
.hq-metrics-cta .hq-btn-primary { width: 100%; justify-content: center; }

/* ============================================================
   TESTIMONIALS (Khách hàng công nghiệp tin dùng)
   ============================================================ */
.hq-testi-section { padding: 5.5rem 0; background: var(--hq-white); }
.hq-testi-section .hq-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hq-testi-clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 3.5rem; }
@media (max-width: 900px) { .hq-testi-clients { grid-template-columns: repeat(2, 1fr); } }
.hq-testi-client-card {
  background: var(--hq-slate-50); border: 1px solid var(--hq-slate-100);
  border-radius: var(--hq-radius); padding: 1.5rem 1rem; text-align: center;
  transition: var(--hq-transition);
}
.hq-testi-client-card:hover { background: var(--hq-slate-100); transform: translateY(-2px); box-shadow: var(--hq-shadow); }
.hq-testi-client-card i { font-size: 1.7rem; color: var(--hq-slate-400); margin-bottom: 0.5rem; display: block; transition: var(--hq-transition); }
.hq-testi-client-card:hover i { color: var(--hq-navy-800); }
.hq-testi-client-card .name { font-weight: 800; font-size: 0.85rem; color: var(--hq-slate-700); }
.hq-testi-client-card .desc { font-size: 0.68rem; color: var(--hq-slate-400); margin-top: 0.2rem; display: block; }
.hq-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .hq-testi-grid { grid-template-columns: 1fr; } }
.hq-testi-card {
  background: var(--hq-slate-50); padding: 1.75rem; border-radius: var(--hq-radius-lg);
  border: 1px solid var(--hq-slate-200); box-shadow: var(--hq-shadow); position: relative;
}
.hq-testi-quote-icon { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2.25rem; color: rgba(245,158,11,0.18); }
.hq-testi-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.hq-testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--hq-navy-800); color: var(--hq-white); font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hq-testi-head h4 { font-size: 0.82rem; font-weight: 800; color: var(--hq-slate-800); }
.hq-testi-head p { font-size: 0.7rem; color: var(--hq-slate-400); margin-top: 0.1rem; }
.hq-testi-card blockquote { font-size: 0.82rem; color: var(--hq-slate-600); font-style: italic; line-height: 1.7; margin: 0; position: relative; z-index: 1; }

/* ============================================================
   ABOUT PAGE — INTRO GRID (giá trị cốt lõi ngắn + mạng lưới kho)
   ============================================================ */
.hq-about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-bottom: 4rem; }
@media (max-width: 900px) { .hq-about-intro-grid { grid-template-columns: 1fr; } }
.hq-about-mini-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .hq-about-mini-values { grid-template-columns: 1fr; } }
.hq-about-mini-value { background: var(--hq-slate-50); border: 1px solid var(--hq-slate-100); border-radius: var(--hq-radius); padding: 1.1rem; text-align: center; }
.hq-about-mini-value i { font-size: 1.4rem; color: var(--hq-gold-500); margin-bottom: 0.5rem; display: block; }
.hq-about-mini-value h4 { font-size: 0.8rem; font-weight: 800; color: var(--hq-navy-900); margin-bottom: 0.25rem; }
.hq-about-mini-value p { font-size: 0.68rem; color: var(--hq-slate-500); line-height: 1.5; }
.hq-warehouse-card { background: var(--hq-gradient-navy); color: var(--hq-white); border-radius: var(--hq-radius-lg); padding: 2rem; box-shadow: var(--hq-shadow-lg); border: 1px solid rgba(255,255,255,0.08); }
.hq-warehouse-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--hq-gold-400); margin-bottom: 0.5rem; }
.hq-warehouse-card > p { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
.hq-warehouse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.hq-warehouse-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--hq-radius-sm); padding: 0.65rem 0.85rem; font-size: 0.78rem; color: rgba(255,255,255,0.85);
}
.hq-warehouse-list .region { font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 4px; white-space: nowrap; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.hq-warehouse-list .region.hl { background: rgba(245,158,11,0.2); color: var(--hq-gold-400); }
.hq-warehouse-list i { color: var(--hq-gold-500); margin-right: 0.4rem; }

/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM (single product) — thay toàn bộ mặc định
   WooCommerce/Astra bằng layout gọn, có CTA báo giá rõ ràng.
   ============================================================ */

/* Ẩn breadcrumb mặc định của Astra CHỈ trên trang chi tiết sản phẩm — các trang
   khác (danh mục, blog...) vẫn giữ nguyên breadcrumb như trước. */
body.single-product .ast-breadcrumbs-wrap,
body.single-product .ast-breadcrumbs,
body.single-product nav.woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb {
  display: none !important;
}

.hq-single-product { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }

.hq-single-product-grid {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 3rem; align-items: start; margin-bottom: 2.5rem;
}
@media (max-width: 900px) { .hq-single-product-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- GALLERY ---------- */
.hq-pgallery { position: sticky; top: 90px; }
@media (max-width: 900px) { .hq-pgallery { position: static; } }

.hq-pgallery-main {
  position: relative; border-radius: var(--hq-radius-lg); overflow: hidden;
  background: var(--hq-slate-50); border: 1px solid var(--hq-slate-200);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.hq-pgallery-main-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 1.5rem; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.hq-pgallery-main-img.active { opacity: 1; pointer-events: auto; }

.hq-pgallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.92); color: var(--hq-navy-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--hq-shadow); transition: var(--hq-transition);
  z-index: 2; font-size: 0.85rem;
}
.hq-pgallery-nav:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); }
.hq-pgallery-nav.prev { left: 0.75rem; }
.hq-pgallery-nav.next { right: 0.75rem; }
.hq-pgallery-counter {
  position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 2;
  background: rgba(12,35,64,0.75); color: var(--hq-white);
  font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 9999px;
}

.hq-pgallery-thumbs-row { margin-top: 0.75rem; }
.hq-pgallery-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hq-pgallery-thumb {
  width: 60px; height: 60px; border-radius: var(--hq-radius-sm); overflow: hidden;
  border: 2px solid var(--hq-slate-200); background: var(--hq-white); padding: 0;
  cursor: pointer; flex-shrink: 0; transition: var(--hq-transition);
}
.hq-pgallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hq-pgallery-thumb:hover { border-color: var(--hq-gold-400); }
.hq-pgallery-thumb.active { border-color: var(--hq-navy-900); box-shadow: 0 0 0 2px rgba(12,35,64,0.15); }
.hq-pgallery-thumb-extra { display: none; }
.hq-pgallery-thumbs.show-all .hq-pgallery-thumb-extra { display: block; }

.hq-pgallery-more {
  margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--hq-slate-50); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-sm); padding: 0.45rem 0.85rem;
  font-size: 0.78rem; font-weight: 700; color: var(--hq-slate-600);
  cursor: pointer; transition: var(--hq-transition);
}
.hq-pgallery-more:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); border-color: var(--hq-navy-900); }
.hq-pgallery-more .n { color: var(--hq-gold-600); font-weight: 800; }
.hq-pgallery-more:hover .n { color: var(--hq-gold-400); }

/* ---------- SUMMARY ---------- */
.hq-single-breadcrumb-mini { font-size: 0.76rem; font-weight: 700; margin-bottom: 0.5rem; }
.hq-single-breadcrumb-mini a { color: var(--hq-gold-600); }
.hq-single-breadcrumb-mini a:hover { text-decoration: underline; }

.hq-single-title { font-size: 1.55rem; font-weight: 900; color: var(--hq-navy-900); line-height: 1.3; margin-bottom: 0.75rem; }

.hq-single-brand-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--hq-slate-100); color: var(--hq-slate-600);
  font-size: 0.76rem; font-weight: 700; padding: 0.3rem 0.75rem;
  border-radius: 9999px; margin-bottom: 1rem;
}
.hq-single-brand-badge:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); }

.hq-single-price-row { margin-bottom: 1.1rem; }
.hq-single-price-row .price { font-size: 1.6rem; font-weight: 900; color: var(--hq-navy-900); }
.hq-single-price-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  color: var(--hq-gold-700, #b45309); font-size: 0.88rem; font-weight: 700;
  padding: 0.6rem 1rem; border-radius: var(--hq-radius-sm);
}

.hq-single-short-desc { font-size: 0.9rem; color: var(--hq-slate-600); line-height: 1.75; margin-bottom: 1.5rem; }
.hq-single-short-desc p { margin-bottom: 0.75rem; }

.hq-single-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.hq-single-cta { font-size: 0.95rem; padding: 0.95rem 1.75rem; }
.hq-btn-outline-navy {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.5rem; border-radius: var(--hq-radius-sm);
  border: 2px solid var(--hq-navy-900); color: var(--hq-navy-900);
  font-weight: 800; font-size: 0.95rem; transition: var(--hq-transition);
}
.hq-btn-outline-navy:hover { background: var(--hq-navy-900); color: var(--hq-gold-400); }

.hq-single-trust-list {
  list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  background: var(--hq-slate-50); border-radius: var(--hq-radius);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.hq-single-trust-list li { font-size: 0.82rem; color: var(--hq-slate-600); display: flex; align-items: center; gap: 0.55rem; }
.hq-single-trust-list i { color: #16a34a; font-size: 0.78rem; }

.hq-single-meta-row { font-size: 0.8rem; color: var(--hq-slate-500); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.hq-single-meta-row span:first-child { font-weight: 700; color: var(--hq-slate-700); }
.hq-single-meta-row a { color: var(--hq-slate-500); text-decoration: underline; }
.hq-single-meta-row a:hover { color: var(--hq-navy-800); }

/* ---------- TABS (Mô tả / Đánh giá) + RELATED PRODUCTS ---------- */
.hq-single-product .woocommerce-tabs {
  margin-top: 1rem; background: var(--hq-white); border: 1px solid var(--hq-slate-200);
  border-radius: var(--hq-radius-lg); padding: 1.75rem; box-shadow: var(--hq-shadow);
}
.hq-single-product .woocommerce-tabs ul.tabs {
  list-style: none; display: flex; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0;
  border-bottom: 1px solid var(--hq-slate-100); flex-wrap: wrap;
}
.hq-single-product .woocommerce-tabs ul.tabs li { margin: 0; }
.hq-single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 0.65rem 1.1rem; font-size: 0.85rem; font-weight: 700;
  color: var(--hq-slate-500); border-radius: var(--hq-radius-sm) var(--hq-radius-sm) 0 0;
}
.hq-single-product .woocommerce-tabs ul.tabs li.active a { color: var(--hq-navy-900); background: var(--hq-slate-50); }
.hq-single-product .woocommerce-tabs .panel { font-size: 0.9rem; color: var(--hq-slate-600); line-height: 1.8; }

.hq-single-product .related.products {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hq-slate-100);
}
.hq-single-product .related.products > h2 {
  font-size: 1.3rem; font-weight: 900; color: var(--hq-navy-900); margin-bottom: 1.25rem;
  padding-left: 0.85rem; border-left: 4px solid var(--hq-gold-500);
}
/* HQ: Logo brand dang grayscale, hover len mau */
.hq-brandstrip-item img {
    max-height: 47px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.hq-brandstrip-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}