/* Hardver rovat: cikk-dobozok és listaoldalak */
.hwr-top { margin: 0 0 26px; padding: 18px 20px; background: rgba(26, 26, 26, .95); border: 1px solid #2a2a2a; border-left: 4px solid #e10600; border-radius: 10px; }
.hwr-top__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hwr-top__product { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hwr-top__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #ff5a52; }
.hwr-top__product strong { font-size: 1.3rem; color: #fff; line-height: 1.2; }
.hwr-top__meta { font-size: .85rem; color: #9a9a9a; }
.hwr-top__meta a { color: #cfcfcf; text-decoration: none; border-bottom: 1px dotted #555; }
.hwr-top__meta a:hover { color: #fff; }
.hwr-score { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, #e10600, #8f0400); color: #fff; }
.hwr-score strong { font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif; font-size: 2.2rem; line-height: 1; }
.hwr-score span { font-size: .9rem; opacity: .85; }
.hwr-bars { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.hwr-bars li { display: grid; grid-template-columns: 120px 1fr 32px; align-items: center; gap: 10px; }
.hwr-bars__label { color: #cfcfcf; font-size: .88rem; }
.hwr-bars__track { height: 8px; background: #2a2a2a; border-radius: 4px; overflow: hidden; }
.hwr-bars__fill { display: block; height: 100%; background: linear-gradient(90deg, #a30400, #ff3b30); border-radius: 4px; }
.hwr-bars__val { text-align: right; font-weight: 700; color: #fff; }
.hwr-shops { margin-top: 16px; padding-top: 14px; border-top: 1px solid #2a2a2a; }
.hwr-shops__title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; margin-bottom: 8px; }
.hwr-shops__title i { color: #e10600; }
.hwr-shops ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hwr-shops li { flex: 1 1 200px; }
.hwr-shops a, .hwr-shops__nolink { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #141414; border: 1px solid #2f2f2f; border-radius: 8px; color: #eee; text-decoration: none; }
.hwr-shops a:hover { border-color: #e10600; color: #fff; }
.hwr-shops a span, .hwr-shops__nolink span { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.hwr-shops b { color: #fff; white-space: nowrap; }
.hwr-shops a i { color: #e10600; font-size: .75rem; }
.hwr-shops small { display: block; margin-top: 6px; color: #777; font-size: .75rem; }
.hwr-bottom { margin: 28px 0 10px; }
.hwr-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hwr-pc__col { padding: 16px 18px; background: rgba(26, 26, 26, .95); border: 1px solid #2a2a2a; border-radius: 10px; border-top: 3px solid; }
.hwr-pc__col--pro { border-top-color: #2fb35a; }
.hwr-pc__col--con { border-top-color: #e10600; }
.hwr-pc__col h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: #fff; margin: 0 0 10px; }
.hwr-pc__col--pro h3 i, .hwr-pc__col--pro li i { color: #2fb35a; }
.hwr-pc__col--con h3 i, .hwr-pc__col--con li i { color: #e10600; }
.hwr-pc__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hwr-pc__col li { display: flex; gap: 9px; color: #ddd; line-height: 1.45; }
.hwr-pc__col li i { font-size: .7rem; margin-top: .45em; }
.hwr-verdict { position: relative; margin-top: 14px; padding: 18px 20px; padding-right: 110px; border-radius: 10px; background: linear-gradient(120deg, #2a0705, #161616 70%); border: 1px solid #3a1212; }
.hwr-verdict span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #ff5a52; }
.hwr-verdict p { margin: 6px 0 0; color: #f2f2f2; font-size: 1.05rem; line-height: 1.55; }
.hwr-verdict__score { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif; font-size: 2.6rem; color: #fff; line-height: 1; }
.hwr-verdict__score small { font-size: 1rem; color: #bbb; }
@media (max-width: 575.98px) {
  .hwr-top { padding: 14px; }
  .hwr-top__head { align-items: flex-start; }
  .hwr-bars { grid-template-columns: minmax(0, 1fr); }
  .hwr-bars li { grid-template-columns: 110px 1fr 28px; }
  .hwr-pc { grid-template-columns: minmax(0, 1fr); }
  .hwr-verdict { padding-right: 20px; }
  .hwr-verdict__score { position: static; transform: none; display: block; margin-top: 10px; }
}

/* Listaoldalak */
.hw-hero { text-align: center; max-width: 780px; margin: 0 auto 30px; }
.hw-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: #fff; margin: 0 0 12px; text-shadow: 2px 2px 4px rgba(0,0,0,.5); }
.hw-hero__line { width: 80px; height: 4px; background: linear-gradient(90deg, transparent, #ff3d07ff, transparent); margin: 0 auto 16px; }
.hw-hero p { color: #bdbdbd; margin: 0; line-height: 1.6; }
.hw-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 34px; }
.hw-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 10px; background: rgba(26,26,26,.95); border: 1px solid #2a2a2a; border-radius: 12px; color: #ddd; text-decoration: none; text-align: center; transition: border-color .15s, transform .15s; }
.hw-cat .hw-ico { width: 52px; height: 52px; color: #fff; transition: color .15s; }
.hw-cat:hover .hw-ico, .hw-cat.is-active .hw-ico { color: #e10600; }
.hw-cat span { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.hw-cat small { color: #8f8f8f; font-size: .75rem; }
.hw-cat:hover { border-color: #e10600; color: #fff; transform: translateY(-2px); }
.hw-cat.is-active { border-color: #e10600; background: #1d1010; color: #fff; }
.hw-cat.is-empty { opacity: .45; pointer-events: none; }
.hw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 16px; padding-left: 14px; border-left: 4px solid #e10600; }
.hw-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; }
.hw-head span { color: #8f8f8f; font-size: .85rem; }
.hw-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hw-filter a { padding: 6px 14px; border-radius: 16px; background: #1a1a1a; border: 1px solid #2f2f2f; color: #ccc; font-size: .85rem; text-decoration: none; }
.hw-filter a.is-active, .hw-filter a:hover { border-color: #e10600; color: #fff; background: #2a1010; }
.hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-card { position: relative; display: flex; flex-direction: column; background: rgba(26,26,26,.95); border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.hw-card:hover { border-color: #444; transform: translateY(-2px); color: inherit; }
.hw-card__img { display: block; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.hw-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-card__score { position: absolute; top: 10px; right: 10px; padding: 6px 10px; border-radius: 10px; background: linear-gradient(135deg, #e10600, #8f0400); color: #fff; font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.hw-card__score small { font-size: .75rem; opacity: .85; }
.hw-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.hw-card__meta { font-size: .75rem; color: #ff5a52; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.hw-card__title { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hw-card__date { font-size: .78rem; color: #8f8f8f; }
.hw-empty { padding: 40px 20px; text-align: center; color: #9a9a9a; background: rgba(26,26,26,.95); border: 1px dashed #333; border-radius: 12px; }
@media (max-width: 1199.98px) { .hw-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .hw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hw-cat { padding: 14px 8px; }
  .hw-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Cikkoldal és kiegészítők */
.hw-crumbs { font-size: .85rem; color: #8f8f8f; margin-bottom: 10px; }
.hw-crumbs a { color: #ff7a72; text-decoration: none; }
.hw-title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.hw-byline { color: #9a9a9a; font-size: .88rem; margin-bottom: 16px; }
.hw-cover { width: 100%; border-radius: 12px; margin-bottom: 20px; display: block; }
.hw-body { color: #ddd; line-height: 1.8; }
.hw-body img { max-width: 100%; height: auto; border-radius: 8px; }
.hw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .hw-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hw-grid--2, .hw-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Kategória ikonok: SVG maszk, a színt a currentColor adja */
.hw-ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.hw-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .hw-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .hw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hw-cat .hw-ico { width: 42px; height: 42px; } }