/* =========================================================
   HARTLINE BLACK — CUSTOM CSS OPTIMIZED v5.0
   Plik do podmiany:
   /themes/hartlineblack/assets/css/hartlineblack-custom.css

   Zmiany:
   - usunięte duplikaty z wersji v3 / v3.1 / v4 / v4.1 / v4.2
   - zostawiony finalny header Motostacja style
   - uporządkowana responsywność
   - ograniczone konflikty selektorów, szczególnie .hb-hero-search
   ========================================================= */

/* =========================================================
   01. ZMIENNE / BAZA
   ========================================================= */

:root {
  --hb-black: #050505;
  --hb-black-2: #080808;
  --hb-dark: #111114;
  --hb-dark-2: #242428;
  --hb-red: #ed1c24;
  --hb-red-2: #c9141b;
  --hb-white: #ffffff;
  --hb-light: #f3f4f6;
  --hb-text: #101014;
  --hb-muted: #707784;
  --hb-border: rgba(255,255,255,.12);
  --hb-border-dark: rgba(0,0,0,.10);
  --hb-shadow: 0 24px 70px rgba(0,0,0,.22);
  --hb-radius: 18px;
  --hb-radius-lg: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--hb-light) !important;
  color: var(--hb-text) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

a {
  transition: .2s ease;
}

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

/* =========================================================
   02. HEADER — FINAL MOTOSTACJA STYLE
   ========================================================= */

/* Wyłączamy stare belki Hummingbird, które mieszały układ */
.header-top,
.header-bottom,
.header-nav,
#_desktop_contact_link,
.hb-header-main #_desktop_top_menu,
.hb-header-main .top-menu,
.hb-header-main .menu,
.hb-header-search #_desktop_top_menu,
.hb-header-search .top-menu,
.hb-header-search .menu {
  display: none !important;
}

#header {
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
  border: 0 !important;
  position: relative;
  z-index: 150;
}

#header a {
  text-decoration: none !important;
}

.hb-header {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--hb-black);
  color: var(--hb-white);
  position: relative;
  z-index: 200;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

/* Topbar benefitów */
.hb-top-benefits--header {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--hb-black-2);
  color: var(--hb-white);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 220;
}

.hb-top-benefits--header .hb-top-benefits__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
}

.hb-benefit-small,
.hb-top-benefits--header .hb-benefit-small {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hb-benefit-small__icon,
.hb-top-benefits--header .hb-benefit-small__icon {
  flex: 0 0 auto;
  color: var(--hb-red);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.hb-benefit-small strong,
.hb-top-benefits--header .hb-benefit-small strong {
  display: block;
  color: var(--hb-white);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 950;
}

.hb-benefit-small small,
.hb-top-benefits--header .hb-benefit-small small {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  line-height: 1.25;
  margin-top: 2px;
}

/* Główna belka: logo / search / konto / koszyk */
.hb-header-main {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--hb-black) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hb-header-main__inner {
  max-width: 1480px;
  min-height: 88px !important;
  margin: 0 auto;
  padding: 14px 22px !important;
  display: grid !important;
  grid-template-columns: 250px minmax(420px, 620px) 1fr !important;
  gap: 30px;
  align-items: center !important;
}

.hb-header-logo,
.hb-header-logo h1,
.hb-header-logo__h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.hb-header-logo {
  display: flex;
  align-items: center;
}

.hb-header-logo img,
.hb-header-logo .logo {
  display: block;
  max-width: 220px !important;
  max-height: 58px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Search */
.hb-header-search {
  width: 100%;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hb-header-search #search_widget,
.hb-header-search .search-widget {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
}

.hb-header-search #search_widget form,
.hb-header-search .search-widget form {
  width: 100% !important;
  height: 54px !important;
  display: flex !important;
  align-items: stretch !important;
  background: var(--hb-white) !important;
  border: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.hb-header-search #search_widget input,
.hb-header-search .search-widget input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hb-white) !important;
  color: #111 !important;
  font-size: 16px !important;
  text-align: left !important;
  outline: none !important;
}

.hb-header-search #search_widget input::placeholder,
.hb-header-search .search-widget input::placeholder {
  color: #7b828e !important;
}

.hb-header-search #search_widget button,
.hb-header-search .search-widget button {
  flex: 0 0 62px !important;
  width: 62px !important;
  min-width: 62px !important;
  height: 54px !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hb-red) !important;
  color: var(--hb-white) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.hb-header-search #search_widget button:hover,
.hb-header-search .search-widget button:hover {
  background: var(--hb-red-2) !important;
}

/* Konto / koszyk */
.hb-header-actions {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 30px !important;
  color: var(--hb-white);
}

.hb-header-actions > * {
  margin: 0 !important;
}

.hb-header-actions a,
.hb-header-actions span,
.hb-header-actions i {
  color: var(--hb-white) !important;
}

.hb-header-actions #_desktop_user_info,
.hb-header-actions .user-info {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--hb-white) !important;
  font-weight: 950 !important;
}

.hb-header-actions #_desktop_user_info a,
.hb-header-actions .user-info a {
  color: var(--hb-white) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.hb-header-actions #_desktop_cart,
.hb-header-actions .blockcart {
  display: flex !important;
  align-items: center;
}

.hb-header-actions .blockcart,
#_desktop_cart .blockcart {
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--hb-white) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  gap: 10px;
}

.hb-header-actions .blockcart a,
.hb-header-actions .blockcart span,
#_desktop_cart .blockcart a,
#_desktop_cart .blockcart span {
  color: var(--hb-white) !important;
  text-decoration: none !important;
}

.hb-header-actions .blockcart .cart-products-count,
#_desktop_cart .blockcart .cart-products-count,
.hb-header-actions .blockcart .header-block__badge,
#_desktop_cart .blockcart .header-block__badge {
  min-width: 24px;
  height: 24px;
  margin-left: 4px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--hb-white) !important;
  font-size: 13px !important;
  font-weight: 950;
}

/* Druga belka menu */
.hb-header-nav {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--hb-dark-2);
  border-bottom: 2px solid var(--hb-red);
}

.hb-header-nav__inner {
  max-width: 1480px;
  min-height: 62px !important;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

.hb-main-menu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-main-menu li {
  display: flex;
  align-items: stretch;
  border-right: 1px solid rgba(255,255,255,.13);
}

.hb-main-menu li:first-child {
  border-left: 1px solid rgba(255,255,255,.13);
}

.hb-main-menu a {
  min-height: 62px !important;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  color: var(--hb-white) !important;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
}

.hb-main-menu a:hover {
  background: rgba(237,28,36,.18);
  color: var(--hb-white) !important;
  opacity: 1 !important;
}

.hb-header-cta {
  flex: 0 0 auto;
  align-self: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 7px;
  background: var(--hb-red);
  color: var(--hb-white) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 12px 30px rgba(237,28,36,.28);
}

.hb-header-cta:hover {
  background: var(--hb-red-2);
  color: var(--hb-white) !important;
  transform: translateY(-1px);
}

/* Dropdowny menu */
.hb-header-nav .dropdown-menu,
.hb-header-nav .top-menu .sub-menu {
  background: var(--hb-dark) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.36) !important;
}

.hb-header-nav .dropdown-menu a,
.hb-header-nav .top-menu .sub-menu a {
  min-height: auto !important;
  justify-content: flex-start !important;
  color: var(--hb-white) !important;
}

/* =========================================================
   03. HOME / HERO
   ========================================================= */

#index .breadcrumb,
#index nav.breadcrumb,
#index .breadcrumb-wrapper,
#index .page-header {
  display: none !important;
}

#wrapper,
#content-wrapper,
#content,
#index #wrapper,
#index #content-wrapper,
#index #content,
#index .page-content,
#index main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: var(--hb-light) !important;
}

.hb-home,
#index .hb-moto-home,
#index .hartline-home,
#index .hb-home,
#index .hartlineblack-home {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: 0 !important;
  background: var(--hb-light) !important;
}

/* Stary topbar w treści home, jeżeli został po przeniesieniu do headera */
#index .hb-home > .hb-top-benefits:not(.hb-top-benefits--header) {
  display: none !important;
}

/* Hero */
#index .hb-moto-hero,
#index .hartline-hero,
#index .hb-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 620px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative;
  background-color: var(--hb-black) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  color: var(--hb-white);
}

#index .hb-moto-hero::before,
#index .hartline-hero::before,
#index .hb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .26;
  pointer-events: none;
}

#index .hb-moto-hero::after,
#index .hartline-hero::after,
#index .hb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.32) 72%, rgba(0,0,0,.15) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.78) 100%);
  pointer-events: none;
}

#index .hb-moto-hero__inner,
#index .hartline-hero__inner,
#index .hb-hero__inner,
#index .hb-moto-hero__content {
  position: relative !important;
  z-index: 3 !important;
  max-width: 1480px !important;
  min-height: 620px !important;
  margin: 0 auto !important;
  padding: 54px 28px 70px !important;
  display: flex !important;
  align-items: center !important;
}

#index .hb-moto-hero__content,
#index .hartline-hero__content,
#index .hb-hero__content {
  position: relative !important;
  z-index: 4 !important;
  max-width: 680px !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Jeżeli treść siedzi bez wrappera __inner */
#index .hb-moto-hero > .hb-moto-hero__content {
  margin-left: max(24px, calc((100vw - 1480px) / 2)) !important;
  padding-top: 74px !important;
  padding-bottom: 70px !important;
}

/* Etykiety */
.hb-kicker,
#index .hb-moto-eyebrow,
#index .hb-eyebrow,
#index .hartline-eyebrow {
  margin: 0 0 18px !important;
  color: var(--hb-red) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

#index .hb-moto-hero h1,
#index .hartline-hero h1,
#index .hb-hero h1 {
  max-width: 660px !important;
  margin: 0 0 22px !important;
  color: var(--hb-white) !important;
  font-size: clamp(52px, 5.1vw, 88px) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
  font-weight: 950 !important;
}

#index .hb-moto-hero h1 span,
#index .hartline-hero h1 span,
#index .hb-hero h1 span {
  display: block;
  color: var(--hb-red) !important;
}

#index .hb-moto-hero p,
#index .hartline-hero p,
#index .hb-hero p {
  max-width: 640px !important;
  margin: 0 0 24px !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}

#index .hb-moto-hero .hb-ghost,
#index .hartline-hero .hb-ghost,
#index .hb-hero .hb-ghost,
#index .hb-moto-hero__ghost,
#index .hartline-hero__ghost {
  display: none !important;
}

/* Box wyszukiwarki na hero */
.hb-hero-search-card,
#index .hb-moto-search,
#index .hartline-hero-search,
#index .hb-moto-finder {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  margin-top: 26px !important;
  padding: 16px !important;
  position: relative !important;
  z-index: 5 !important;
  background: var(--hb-white) !important;
  color: #111 !important;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--hb-radius) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35) !important;
  overflow: visible !important;
}

.hb-hero-search-card__top {
  margin-bottom: 12px;
  padding: 0 2px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.hb-hero-search-card__top small {
  display: block;
  color: #7c828d;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hb-hero-search-card__top strong {
  display: block;
  color: #080808;
  font-size: 15px;
  font-weight: 950;
}

.hb-vehicle-btn {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--hb-red);
  color: var(--hb-white) !important;
  text-decoration: none !important;
  font-weight: 950;
  white-space: nowrap;
}

.hb-vehicle-btn:hover {
  background: var(--hb-red-2);
  opacity: 1;
}

.hb-hero-search {
  display: flex;
  background: var(--hb-light);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
}

.hb-hero-search input,
#index .hb-moto-search input,
#index .hartline-hero-search input,
#index .hb-moto-finder input {
  flex: 1;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent;
  color: #111;
  outline: 0;
  font-size: 15px !important;
}

.hb-hero-search button,
#index .hb-moto-search button,
#index .hartline-hero-search button,
#index .hb-moto-finder button,
#index .hb-moto-search .btn,
#index .hartline-hero-search .btn {
  min-width: 90px;
  min-height: 52px !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
  font-weight: 950 !important;
  cursor: pointer;
}

.hb-hero-search button:hover,
#index .hb-moto-search button:hover,
#index .hartline-hero-search button:hover,
#index .hb-moto-finder button:hover {
  background: var(--hb-red) !important;
}

.hb-quick-tags {
  padding: 12px 2px 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
}

.hb-quick-tags span {
  color: #7c828d;
  font-weight: 850;
}

.hb-quick-tags a {
  padding: 6px 10px;
  color: #151515 !important;
  background: #f1f2f4;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 850;
}

.hb-quick-tags a:hover {
  background: #ffe9ea;
  color: var(--hb-red) !important;
}

.hb-hero-icons {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 26px;
  color: var(--hb-white);
}

.hb-hero-icons div {
  position: relative;
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,.22);
}

.hb-hero-icons div::before {
  content: "";
  width: 2px;
  height: 28px;
  position: absolute;
  left: -2px;
  top: 0;
  background: var(--hb-red);
}

.hb-hero-icons strong {
  display: block;
  font-weight: 950;
  font-size: 15px;
}

.hb-hero-icons small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

/* =========================================================
   04. SEKCJE HOME / PRODUKTY / KATEGORIE
   ========================================================= */

.hb-home-categories,
#index .hb-moto-categories,
#index .hartline-categories,
#index .hb-categories {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 54px 24px 28px;
}

.hb-section-head {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 28px;
  align-items: end;
}

.hb-section-head span {
  grid-column: 1 / -1;
  color: #818796;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 13px;
  font-weight: 950;
}

.hb-section-head h2 {
  margin: 0;
  color: #0b0b0d;
  font-size: clamp(34px, 3.2vw, 58px);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 950;
}

.hb-section-head p {
  max-width: 540px;
  margin: 0;
  color: #626978;
  font-size: 16px;
  line-height: 1.55;
}

.hb-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hb-category-tile {
  min-height: 240px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(237,28,36,.20), transparent 40%),
    #111217;
  border-radius: 22px;
  color: var(--hb-white) !important;
  text-decoration: none !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
}

.hb-category-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .28;
}

.hb-category-tile::after {
  content: "";
  width: 180px;
  height: 180px;
  position: absolute;
  right: -60px;
  top: -60px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.hb-category-tile > * {
  position: relative;
  z-index: 2;
}

.hb-category-tile__num {
  margin-bottom: auto;
  color: var(--hb-red);
  font-weight: 950;
  font-size: 14px;
}

.hb-category-tile h3 {
  margin: 0 0 10px;
  color: var(--hb-white);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.045em;
}

.hb-category-tile p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.68);
  line-height: 1.5;
}

.hb-category-tile strong {
  color: var(--hb-white);
  font-size: 14px;
}

.hb-category-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  opacity: 1;
}

/* Trust strip */
.hb-trust-strip {
  max-width: 1480px;
  margin: 22px auto 24px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.hb-trust-strip div {
  padding: 24px;
  background: var(--hb-black);
  color: var(--hb-white);
  border-right: 1px solid rgba(255,255,255,.12);
}

.hb-trust-strip div:first-child {
  border-radius: 22px 0 0 22px;
}

.hb-trust-strip div:last-child {
  border-right: 0;
  border-radius: 0 22px 22px 0;
}

.hb-trust-strip span {
  display: block;
  margin-bottom: 10px;
  color: var(--hb-red);
  font-weight: 950;
}

.hb-trust-strip strong {
  display: block;
  font-size: 18px;
  font-weight: 950;
}

.hb-trust-strip small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.64);
  line-height: 1.4;
}

/* Ukrycie starych elementów displayHome, zostają produkty */
.hb-display-home #home-slider,
.hb-display-home #custom-text,
.hb-display-home > .banner,
.hb-display-home a.banner,
.hb-display-home .homeslider-container,
.hb-display-home #homepage-slider {
  display: none !important;
}

.hb-display-home .featured-products,
.hb-display-home .products-section,
.hb-display-home #content .featured-products,
.featured-products,
.products-section,
#index .featured-products {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 36px 24px 78px !important;
}

.featured-products h2,
.featured-products .h2,
.products-section h2,
#content h2 {
  margin-bottom: 26px !important;
  color: #080808 !important;
  font-size: clamp(32px, 3vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
}

/* Produkty */
.products,
.featured-products .products {
  row-gap: 26px !important;
}

.product-miniature,
article.product-miniature {
  padding: 0 !important;
  margin-bottom: 26px !important;
}

.product-miniature .thumbnail-container,
article.product-miniature .thumbnail-container {
  min-height: 100%;
  overflow: hidden !important;
  background: var(--hb-white) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.10) !important;
  transition: .22s ease;
}

.product-miniature:hover .thumbnail-container,
article.product-miniature:hover .thumbnail-container {
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0,0,0,.16) !important;
}

.product-miniature .thumbnail-top,
article.product-miniature .thumbnail-top {
  padding: 18px !important;
  background: #f6f6f6 !important;
}

.product-miniature .product-thumbnail img {
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  transition: .26s ease;
}

.product-miniature:hover .product-thumbnail img {
  transform: scale(1.04);
}

.product-miniature .product-description {
  padding: 18px 20px 22px !important;
  background: var(--hb-white) !important;
}

.product-miniature .product-title a {
  color: var(--hb-black) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em;
}

.product-price-and-shipping,
.product-miniature .price,
.current-price,
.product-price {
  color: var(--hb-black) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: -.035em;
}

.regular-price {
  color: #999 !important;
}

.product-flag,
li.product-flag,
.discount {
  padding: 7px 12px !important;
  background: var(--hb-red) !important;
  color: var(--hb-white) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.wishlist-button-add,
.product-miniature .wishlist-button-add {
  background: var(--hb-white) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
}

/* Przyciski */
.btn,
button,
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 900 !important;
  transition: .2s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

.btn-primary,
.add-to-cart,
.product-add-to-cart .btn-primary {
  background: var(--hb-red) !important;
  border-color: var(--hb-red) !important;
  color: var(--hb-white) !important;
}

.btn-primary:hover,
.add-to-cart:hover,
.product-add-to-cart .btn-primary:hover {
  background: var(--hb-red-2) !important;
  border-color: var(--hb-red-2) !important;
}

/* Kategorie / listing / produkt */
.page-title,
.h1,
h1 {
  color: #080808 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
}

#left-column .block,
#left-column .card,
.block-categories,
.facets,
#search_filters {
  overflow: hidden;
  background: var(--hb-white) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.06);
}

.product-cover {
  overflow: hidden;
  background: #f5f5f5 !important;
  border-radius: 24px !important;
}

.tabs,
.product-tabs {
  overflow: hidden;
  background: var(--hb-white) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.06);
}

/* Footer */
#footer,
.footer-container {
  margin-top: 50px !important;
  background: var(--hb-black) !important;
  color: var(--hb-white) !important;
}

#footer a,
.footer-container a {
  color: rgba(255,255,255,.72) !important;
}

#footer a:hover,
.footer-container a:hover {
  color: var(--hb-white) !important;
}

.footer-container h3,
.footer-container h4,
.footer-container .h3,
.footer-container .h4,
.footer-container .h5,
.footer-container .h6 {
  color: var(--hb-white) !important;
  font-weight: 950 !important;
}

.footer-container p,
.footer-container li,
.footer-container span {
  color: rgba(255,255,255,.66) !important;
}

.block_newsletter,
#blockEmailSubscription_displayFooter {
  background: #111 !important;
  color: var(--hb-white) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 24px !important;
}

/* =========================================================
   05. RESPONSYWNOŚĆ
   ========================================================= */

@media (max-width: 1199px) {
  .hb-header-main__inner {
    grid-template-columns: 220px minmax(320px, 1fr) auto !important;
    gap: 22px;
  }

  .hb-header-logo img,
  .hb-header-logo .logo {
    max-width: 210px !important;
  }

  .hb-main-menu a {
    padding: 0 14px;
    font-size: 14px;
  }

  .hb-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hb-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .hb-trust-strip div,
  .hb-trust-strip div:first-child,
  .hb-trust-strip div:last-child {
    border-right: 0;
    border-radius: 0;
  }

  .hb-trust-strip div:first-child {
    border-radius: 22px 0 0 0;
  }

  .hb-trust-strip div:nth-child(2) {
    border-radius: 0 22px 0 0;
  }

  .hb-trust-strip div:nth-child(3) {
    border-radius: 0 0 0 22px;
  }

  .hb-trust-strip div:last-child {
    border-radius: 0 0 22px 0;
  }
}

@media (max-width: 991px) {
  .hb-top-benefits--header .hb-top-benefits__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 10px 16px;
  }

  .hb-top-benefits--header .hb-benefit-small strong {
    font-size: 13px;
  }

  .hb-top-benefits--header .hb-benefit-small small {
    font-size: 11px;
  }

  .hb-header-main__inner {
    min-height: auto !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between;
    gap: 14px;
  }

  .hb-header-logo img,
  .hb-header-logo .logo {
    max-width: 170px !important;
    max-height: 58px !important;
  }

  .hb-header-search,
  .hb-header-actions,
  .hb-header-nav {
    display: none !important;
  }

  .hb-mobile-actions {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  #index .hb-moto-hero,
  #index .hartline-hero,
  #index .hb-hero {
    min-height: 720px !important;
    background-position: 62% center !important;
  }

  #index .hb-moto-hero__inner,
  #index .hartline-hero__inner,
  #index .hb-hero__inner,
  #index .hb-moto-hero__content {
    min-height: 720px !important;
    padding: 120px 20px 42px !important;
    align-items: flex-end !important;
  }

  #index .hb-moto-hero > .hb-moto-hero__content {
    margin-left: 0 !important;
  }

  #index .hb-moto-hero h1,
  #index .hartline-hero h1,
  #index .hb-hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 64px) !important;
  }

  #index .hb-moto-hero p,
  #index .hartline-hero p,
  #index .hb-hero p {
    font-size: 16px !important;
  }

  .hb-hero-search-card__top {
    display: block;
  }

  .hb-vehicle-btn {
    width: 100%;
    margin-top: 10px;
  }

  .hb-hero-icons {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 22px;
  }

  .hb-section-head {
    display: block;
  }

  .hb-section-head h2 {
    margin: 8px 0 12px;
  }

  .hb-home-categories,
  #index .hb-moto-categories,
  #index .hartline-categories,
  #index .hb-categories {
    padding: 40px 16px 20px;
  }

  .hb-trust-strip {
    padding: 0 16px;
  }

  .hb-display-home .featured-products,
  .featured-products,
  .products-section,
  #index .featured-products {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 575px) {
  .hb-top-benefits--header {
    display: none !important;
  }

  #index .hb-moto-hero,
  #index .hartline-hero,
  #index .hb-hero {
    min-height: 720px !important;
  }

  .hb-category-grid,
  .hb-trust-strip {
    grid-template-columns: 1fr;
  }

  .hb-trust-strip div,
  .hb-trust-strip div:first-child,
  .hb-trust-strip div:nth-child(2),
  .hb-trust-strip div:nth-child(3),
  .hb-trust-strip div:last-child {
    border-radius: 0;
  }

  .hb-trust-strip div:first-child {
    border-radius: 22px 22px 0 0;
  }

  .hb-trust-strip div:last-child {
    border-radius: 0 0 22px 22px;
  }

  .hb-hero-search {
    display: block;
  }

  .hb-hero-search input {
    width: 100%;
  }

  .hb-hero-search button {
    width: 100%;
    min-height: 48px !important;
  }
}
/* =========================================================
   HARTLINE BLACK — SEARCH FIELD PATCH
   szersza, niższa wyszukiwarka z czerwoną lupką i obwódką
   ========================================================= */

.hb-header-search {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Poszerzenie pola wyszukiwarki */
.hb-header-search #search_widget,
.hb-header-search .search-widget {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Cały box wyszukiwarki */
.hb-header-search #search_widget form,
.hb-header-search .search-widget form {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 2px solid #ed1c24 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Input */
.hb-header-search #search_widget input,
.hb-header-search .search-widget input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  background: #ffffff !important;
  color: #111111 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.hb-header-search #search_widget input::placeholder,
.hb-header-search .search-widget input::placeholder {
  color: #7b828e !important;
  opacity: 1 !important;
}

/* Przycisk lupki */
.hb-header-search #search_widget button,
.hb-header-search .search-widget button {
  position: relative !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-left: 1px solid rgba(237,28,36,0.20) !important;
  border-radius: 0 !important;
  color: #ed1c24 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

/* Czerwona lupka — działa nawet jeśli moduł nie pokaże ikony */
.hb-header-search #search_widget button::before,
.hb-header-search .search-widget button::before {
  content: "search";
  font-family: "Material Icons";
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
  color: #ed1c24;
}

/* Jeżeli PrestaShop ma już ikonę w buttonie */
.hb-header-search #search_widget button i,
.hb-header-search .search-widget button i,
.hb-header-search #search_widget button .material-icons,
.hb-header-search .search-widget button .material-icons {
  color: #ed1c24 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* Hover */
.hb-header-search #search_widget button:hover,
.hb-header-search .search-widget button:hover {
  background: #fff2f3 !important;
  transform: none !important;
}

/* Focus — delikatne podbicie po kliknięciu */
.hb-header-search #search_widget form:focus-within,
.hb-header-search .search-widget form:focus-within {
  border-color: #ff2a2f !important;
  box-shadow: 0 0 0 4px rgba(237,28,36,0.14) !important;
}
/* =========================================================
   HARTLINE BLACK — CUSTOM SEARCH FINAL
   szersze, spłaszczone pole z czerwoną lupką
   ========================================================= */

.hb-header-main__inner {
  grid-template-columns: 240px minmax(560px, 820px) 1fr !important;
  gap: 34px !important;
}

.hb-header-search {
  width: 100% !important;
  max-width: 820px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ukrycie starego searchbara, gdyby jeszcze gdzieś się ładował */
.hb-header-search #search_widget,
.hb-header-search .search-widget {
  display: none !important;
}

.hb-search-form {
  width: 100% !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  background: #fff !important;
  border: 2px solid #ed1c24 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.hb-search-form__input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  background: #fff !important;
  color: #111 !important;
  border: 0 !important;
  outline: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.hb-search-form__input::placeholder {
  color: #7b828e !important;
  opacity: 1 !important;
}

.hb-search-form__button {
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 0 !important;
  border-left: 1px solid rgba(237,28,36,0.25) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.hb-search-form__button svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: #ed1c24 !important;
}

.hb-search-form__button:hover {
  background: #fff2f3 !important;
  transform: none !important;
}

.hb-search-form:focus-within {
  border-color: #ff2a2f !important;
  box-shadow: 0 0 0 4px rgba(237,28,36,0.13) !important;
}

/* Responsywność */
@media (max-width: 1199px) {
  .hb-header-main__inner {
    grid-template-columns: 210px minmax(380px, 1fr) auto !important;
    gap: 22px !important;
  }
}

@media (max-width: 991px) {
  .hb-header-main__inner {
    display: flex !important;
    grid-template-columns: none !important;
  }

  .hb-header-search {
    display: none !important;
  }
}
.hb-search-form__button {
  background: #ed1c24 !important;
  border-left: 1px solid #ed1c24 !important;
}

.hb-search-form__button svg {
  fill: #ffffff !important;
}

.hb-search-form__button:hover {
  background: #c9141b !important;
}

.hb-search-form__button:hover svg {
  fill: #ffffff !important;
}
/* =========================================================
   HARTLINE BLACK — LOGIN ALIGN FIX
   naprawa rozjechanego "Zaloguj się" w headerze
   ========================================================= */

/* Trochę więcej miejsca na konto i koszyk */
.hb-header-main__inner {
  grid-template-columns: 220px minmax(520px, 820px) minmax(300px, 1fr) !important;
  gap: 34px !important;
}

/* Prawa strona w jednej linii */
.hb-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 34px !important;
  min-width: 300px !important;
  white-space: nowrap !important;
}

/* Konto użytkownika */
.hb-header-actions #_desktop_user_info,
.hb-header-actions .user-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.hb-header-actions #_desktop_user_info a,
.hb-header-actions .user-info a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

/* Ikonka użytkownika */
.hb-header-actions #_desktop_user_info i,
.hb-header-actions .user-info i,
.hb-header-actions #_desktop_user_info .material-icons,
.hb-header-actions .user-info .material-icons {
  flex: 0 0 auto !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Koszyk też bez łamania */
.hb-header-actions #_desktop_cart,
.hb-header-actions .blockcart {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.hb-header-actions .blockcart a,
#_desktop_cart .blockcart a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
/* =========================================================
   HARTLINE BLACK — HERO GAP + HEIGHT FIX
   usuwa pustą przestrzeń pod headerem i zmniejsza hero
   ========================================================= */

/* Usunięcie przerwy między menu/headerem a hero */
#index #wrapper,
#index #content-wrapper,
#index #content,
#index .page-content,
#index main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Jeżeli Presta dodaje odstęp przez bootstrapowy container */
#index #wrapper > .container,
#index #content-wrapper > .container,
#index main > .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Sam blok home bez odstępu */
#index .hb-home,
#index .hb-moto-home,
#index .hartline-home,
#index .hartlineblack-home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero ma zaczynać się od razu pod menu */
#index .hb-moto-hero,
#index .hartline-hero,
#index .hb-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Delikatnie niższa sekcja hero */
#index .hb-moto-hero,
#index .hartline-hero,
#index .hb-hero {
  min-height: 560px !important;
}

/* Wewnętrzny kontener hero też niższy */
#index .hb-moto-hero__inner,
#index .hartline-hero__inner,
#index .hb-hero__inner {
  min-height: 560px !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

/* Jeżeli używasz wersji z __content zamiast __inner */
#index .hb-moto-hero__content,
#index .hartline-hero__content,
#index .hb-hero__content {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

/* Mobile — nie ściskamy za mocno */
@media (max-width: 991px) {
  #index .hb-moto-hero,
  #index .hartline-hero,
  #index .hb-hero {
    min-height: 620px !important;
  }

  #index .hb-moto-hero__inner,
  #index .hartline-hero__inner,
  #index .hb-hero__inner {
    min-height: 620px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}
#index #wrapper {
  transform: translateY(-32px) !important;
  margin-bottom: -32px !important;
}
/* =========================================================
   HARTLINE BLACK — HERO HEIGHT + TITLE FIX
   niższy hero + poprawione hasło
   ========================================================= */

/* Niższa sekcja hero */
#index .hb-moto-hero,
#index .hartline-hero,
#index .hb-hero {
  min-height: 500px !important;
  height: auto !important;
}

/* Wewnętrzny kontener hero */
#index .hb-moto-hero__inner,
#index .hartline-hero__inner,
#index .hb-hero__inner {
  min-height: 500px !important;
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  align-items: center !important;
}

/* Jeżeli używany jest content zamiast inner */
#index .hb-moto-hero__content,
#index .hartline-hero__content,
#index .hb-hero__content {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Główne hasło — delikatnie mniejsze i bez nachodzenia */
#index .hb-moto-hero h1,
#index .hartline-hero h1,
#index .hb-hero h1 {
  font-size: clamp(46px, 4.6vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
  margin-bottom: 22px !important;
  max-width: 620px !important;
}

/* Czerwone słowo w h1 */
#index .hb-moto-hero h1 span,
#index .hartline-hero h1 span,
#index .hb-hero h1 span {
  line-height: 0.98 !important;
}

/* Opis pod hasłem trochę ciaśniejszy */
#index .hb-moto-hero p,
#index .hartline-hero p,
#index .hb-hero p {
  font-size: 17px !important;
  line-height: 1.45 !important;
  margin-bottom: 22px !important;
  max-width: 600px !important;
}

/* Box wyszukiwarki w hero delikatnie bliżej tekstu */
#index .hb-hero-search-card,
#index .hb-moto-search,
#index .hartline-hero-search,
#index .hb-moto-finder {
  margin-top: 20px !important;
}

/* Mobile — zostawiamy większą wysokość, żeby się nie ścisnęło */
@media (max-width: 991px) {
  #index .hb-moto-hero,
  #index .hartline-hero,
  #index .hb-hero {
    min-height: 600px !important;
  }

  #index .hb-moto-hero__inner,
  #index .hartline-hero__inner,
  #index .hb-hero__inner {
    min-height: 600px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  #index .hb-moto-hero h1,
  #index .hartline-hero h1,
  #index .hb-hero h1 {
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: 1 !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   HARTLINE BLACK — HERO TITLE 2 LINES
   mniejszy tekst hero, wymuszenie dwóch linii
   ========================================================= */

#index .hb-moto-hero__content,
#index .hartline-hero__content,
#index .hb-hero__content {
  max-width: 860px !important;
}

/* Główne hasło hero */
#index .hb-moto-hero h1,
#index .hartline-hero h1,
#index .hb-hero h1 {
  max-width: 820px !important;
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  margin-bottom: 22px !important;
}

/* Czerwony fragment — jedna linia */
#index .hb-moto-hero h1 span,
#index .hartline-hero h1 span,
#index .hb-hero h1 span {
  display: block !important;
  white-space: nowrap !important;
  line-height: 1.04 !important;
}

/* Mobile — pozwalamy łamać normalnie */
@media (max-width: 767px) {
  #index .hb-moto-hero__content,
  #index .hartline-hero__content,
  #index .hb-hero__content {
    max-width: 100% !important;
  }

  #index .hb-moto-hero h1,
  #index .hartline-hero h1,
  #index .hb-hero h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 11vw, 54px) !important;
    line-height: 1.02 !important;
  }

  #index .hb-moto-hero h1 span,
  #index .hartline-hero h1 span,
  #index .hb-hero h1 span {
    white-space: normal !important;
  }
}
/* =========================================================
   HARTLINE BLACK — TOP BENEFITS HEIGHT FIX
   niższy topbar z benefitami
   ========================================================= */

.hb-top-benefits--header .hb-top-benefits__inner {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  min-height: 34px !important;
  align-items: center !important;
}

.hb-top-benefits--header .hb-benefit-small {
  gap: 8px !important;
  min-height: 28px !important;
}

.hb-top-benefits--header .hb-benefit-small__icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

.hb-top-benefits--header .hb-benefit-small strong {
  font-size: 12px !important;
  line-height: 1.05 !important;
}

.hb-top-benefits--header .hb-benefit-small small {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}
/* =========================================================
   HARTLINE BLACK — MOBILE HEADER HARD FIX
   naprawa headera/topbara na telefonie
   ========================================================= */

@media screen and (max-width: 991px) {

  html,
  body {
    overflow-x: hidden !important;
  }

  /* Ukrywamy topbar benefitów na mobile */
  body .hb-top-benefits--header,
  body .hb-top-benefits.hb-top-benefits--header,
  body header .hb-top-benefits--header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Cały header */
  body .hb-header {
    width: 100% !important;
    max-width: 100% !important;
    background: #050505 !important;
    overflow: hidden !important;
  }

  /* Główna belka headera */
  body .hb-header-main {
    width: 100% !important;
    background: #050505 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }

  body .hb-header-main__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 14px 14px 16px !important;
    margin: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
      "logo user cart"
      "search search search" !important;

    gap: 12px !important;
    align-items: center !important;
  }

  /* Logo */
  body .hb-header-logo {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .hb-header-logo img,
  body .hb-header-logo .logo {
    max-width: 120px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Wyszukiwarka */
  body .hb-header-search {
    grid-area: search !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .hb-search-form {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    border: 2px solid #ed1c24 !important;
    border-radius: 7px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body .hb-search-form__input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border: 0 !important;
    background: #fff !important;
  }

  body .hb-search-form__button {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    background: #ed1c24 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body .hb-search-form__button svg {
    width: 20px !important;
    height: 20px !important;
    fill: #fff !important;
  }

  /* Akcje headera jako elementy grida */
  body .hb-header-actions {
    display: contents !important;
  }

  /* Konto */
  body .hb-header-actions #_desktop_user_info,
  body .hb-header-actions .user-info {
    grid-area: user !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .hb-header-actions #_desktop_user_info a,
  body .hb-header-actions .user-info a {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .hb-header-actions #_desktop_user_info i,
  body .hb-header-actions .user-info i,
  body .hb-header-actions #_desktop_user_info .material-icons,
  body .hb-header-actions .user-info .material-icons {
    font-size: 23px !important;
    color: #fff !important;
    margin: 0 !important;
  }

  /* Koszyk */
  body .hb-header-actions #_desktop_cart {
    grid-area: cart !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .hb-header-actions .blockcart,
  body #_desktop_cart .blockcart {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    font-size: 0 !important;
  }

  body .hb-header-actions .blockcart a,
  body #_desktop_cart .blockcart a {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .hb-header-actions .blockcart i,
  body #_desktop_cart .blockcart i,
  body .hb-header-actions .blockcart .material-icons,
  body #_desktop_cart .blockcart .material-icons {
    font-size: 24px !important;
    color: #fff !important;
    margin: 0 !important;
  }

  body .hb-header-actions .blockcart .cart-products-count,
  body #_desktop_cart .blockcart .cart-products-count,
  body .hb-header-actions .blockcart .header-block__badge,
  body #_desktop_cart .blockcart .header-block__badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ed1c24 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 19px !important;
    font-weight: 900 !important;
  }

  /* Menu jako przewijany pasek */
  body .hb-header-nav {
    display: block !important;
    width: 100% !important;
    background: #242428 !important;
    border-bottom: 2px solid #ed1c24 !important;
    overflow: hidden !important;
  }

  body .hb-header-nav__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .hb-header-nav__inner::-webkit-scrollbar {
    display: none !important;
  }

  body .hb-main-menu {
    width: max-content !important;
    min-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    list-style: none !important;
  }

  body .hb-main-menu li {
    display: flex !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
  }

  body .hb-main-menu a {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  /* CTA chowamy na telefonie */
  body .hb-header-cta {
    display: none !important;
  }
}
/* =========================================================
   HARTLINE BLACK — GLOBAL PRODUCT CARDS LIKE FEATURED MODULE
   globalny wygląd kart produktowych
   ========================================================= */

/* Siatki produktów */
.products,
.featured-products .products,
.product-accessories .products,
.hb-product-accessories .products,
.hb-product-slider-track {
  align-items: stretch !important;
}

/* Główna karta produktu */
.product-miniature,
article.product-miniature {
  height: 100% !important;
  padding: 0 !important;
  margin: 0 0 26px !important;
}

.product-miniature .thumbnail-container,
article.product-miniature .thumbnail-container {
  position: relative !important;
  height: 100% !important;
  min-height: 430px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.product-miniature:hover .thumbnail-container,
article.product-miniature:hover .thumbnail-container {
  transform: translateY(-4px) !important;
  border-color: rgba(237, 28, 36, 0.18) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14) !important;
}

/* Góra karty — zdjęcie */
.product-miniature .thumbnail-top,
article.product-miniature .thumbnail-top,
.product-miniature .product-thumbnail,
article.product-miniature .product-thumbnail {
  position: relative !important;
  min-height: 250px !important;
  background:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(237, 28, 36, 0.08), transparent 42%),
    #f8fafc !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Zdjęcie produktu */
.product-miniature .product-thumbnail img,
article.product-miniature .product-thumbnail img {
  width: auto !important;
  height: auto !important;
  max-width: 82% !important;
  max-height: 220px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  transition: transform 0.24s ease !important;
}

.product-miniature:hover .product-thumbnail img,
article.product-miniature:hover .product-thumbnail img {
  transform: scale(1.035) !important;
}

/* Badge POPULARNY / flagi */
.product-miniature .product-flags,
article.product-miniature .product-flags {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.product-miniature .product-flag,
article.product-miniature .product-flag,
.product-miniature li.product-flag,
article.product-miniature li.product-flag {
  min-height: 28px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: #ed1c24 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 26px rgba(237, 28, 36, 0.28) !important;
}

/* Jeśli nie ma flagi, można nadać subtelny wygląd bez pustki */
.product-miniature .discount,
article.product-miniature .discount {
  background: #ed1c24 !important;
  color: #fff !important;
}

/* Wishlist / serduszko */
.product-miniature .wishlist-button-add,
article.product-miniature .wishlist-button-add {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 6 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
}

/* Dolna część karty */
.product-miniature .product-description,
article.product-miniature .product-description {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 180px !important;
  padding: 24px 24px 22px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Marka / etykieta nad tytułem */
.product-miniature .product-description::before,
article.product-miniature .product-description::before {
  content: "HARTLINE" !important;
  display: block !important;
  margin-bottom: 12px !important;
  color: #ed1c24 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Tytuł */
.product-miniature .product-title,
article.product-miniature .product-title {
  margin: 0 0 18px !important;
}

.product-miniature .product-title a,
article.product-miniature .product-title a {
  color: #050505 !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-miniature .product-title a:hover,
article.product-miniature .product-title a:hover {
  color: #ed1c24 !important;
}

/* Cena i przycisk na dole w jednej linii */
.product-miniature .product-price-and-shipping,
article.product-miniature .product-price-and-shipping {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  color: #050505 !important;
}

/* Cena */
.product-miniature .price,
article.product-miniature .price,
.product-miniature .product-price,
article.product-miniature .product-price {
  color: #050505 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
}

.product-miniature .regular-price,
article.product-miniature .regular-price {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Ukrycie zbędnych opisów w kartach */
.product-miniature .product-description-short,
article.product-miniature .product-description-short,
.product-miniature .product-list-reviews,
article.product-miniature .product-list-reviews {
  display: none !important;
}

/* Przycisk "Zobacz" jako pseudo przycisk */
.product-miniature .product-price-and-shipping::after,
article.product-miniature .product-price-and-shipping::after {
  content: "Zobacz" !important;
  flex: 0 0 auto !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: #050505 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
  transition: 0.2s ease !important;
}

.product-miniature:hover .product-price-and-shipping::after,
article.product-miniature:hover .product-price-and-shipping::after {
  background: #ed1c24 !important;
}

/* Stare przyciski add-to-cart w miniaturach — żeby nie rozwalały wyglądu */
.product-miniature .highlighted-informations,
article.product-miniature .highlighted-informations {
  display: none !important;
}

/* =========================================================
   KOREKTA DLA SLIDERA "KUP W ZESTAWIE"
   ========================================================= */

.hb-product-slider-item .product-miniature .thumbnail-container,
.hb-product-slider-item article.product-miniature .thumbnail-container {
  min-height: 420px !important;
}

.hb-product-slider-item .product-miniature .thumbnail-top,
.hb-product-slider-item article.product-miniature .thumbnail-top,
.hb-product-slider-item .product-miniature .product-thumbnail,
.hb-product-slider-item article.product-miniature .product-thumbnail {
  min-height: 230px !important;
}

.hb-product-slider-item .product-miniature .product-thumbnail img,
.hb-product-slider-item article.product-miniature .product-thumbnail img {
  max-height: 205px !important;
}

.hb-product-slider-item .product-miniature .product-description,
.hb-product-slider-item article.product-miniature .product-description {
  min-height: 170px !important;
  padding: 22px !important;
}

/* =========================================================
   RESPONSYWNOŚĆ KART
   ========================================================= */

@media (max-width: 1199px) {
  .product-miniature .thumbnail-container,
  article.product-miniature .thumbnail-container {
    min-height: 410px !important;
  }

  .product-miniature .thumbnail-top,
  article.product-miniature .thumbnail-top,
  .product-miniature .product-thumbnail,
  article.product-miniature .product-thumbnail {
    min-height: 230px !important;
  }

  .product-miniature .product-thumbnail img,
  article.product-miniature .product-thumbnail img {
    max-height: 200px !important;
  }

  .product-miniature .product-title a,
  article.product-miniature .product-title a {
    font-size: 16px !important;
  }

  .product-miniature .price,
  article.product-miniature .price,
  .product-miniature .product-price,
  article.product-miniature .product-price {
    font-size: 21px !important;
  }
}

@media (max-width: 575px) {
  .product-miniature .thumbnail-container,
  article.product-miniature .thumbnail-container {
    min-height: 390px !important;
    border-radius: 20px !important;
  }

  .product-miniature .thumbnail-top,
  article.product-miniature .thumbnail-top,
  .product-miniature .product-thumbnail,
  article.product-miniature .product-thumbnail {
    min-height: 220px !important;
  }

  .product-miniature .product-thumbnail img,
  article.product-miniature .product-thumbnail img {
    max-height: 190px !important;
  }

  .product-miniature .product-description,
  article.product-miniature .product-description {
    padding: 20px !important;
    min-height: 160px !important;
  }

  .product-miniature .product-title a,
  article.product-miniature .product-title a {
    font-size: 16px !important;
    -webkit-line-clamp: 2 !important;
  }

  .product-miniature .product-price-and-shipping,
  article.product-miniature .product-price-and-shipping {
    gap: 10px !important;
  }

  .product-miniature .price,
  article.product-miniature .price,
  .product-miniature .product-price,
  article.product-miniature .product-price {
    font-size: 20px !important;
  }

  .product-miniature .product-price-and-shipping::after,
  article.product-miniature .product-price-and-shipping::after {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
}
/* =========================================================
   HARTLINE BLACK — HOME INFO SECTIONS v2
   full width / no gaps / responsive
   ========================================================= */

.hb-home-info,
.hb-home-info * {
  box-sizing: border-box;
}

.hb-home-info {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #f3f4f6;
  overflow: hidden;
}

.hb-home-info__inner {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
}

/* =========================================================
   DARK SECTION
   ========================================================= */

.hb-home-info__dark {
  width: 100%;
  margin: 0;
  padding: 72px 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(237, 28, 36, .28), transparent 30%),
    radial-gradient(circle at 95% 50%, rgba(255, 255, 255, .08), transparent 32%),
    linear-gradient(135deg, #050506 0%, #111216 100%);
  color: #fff;
}

.hb-home-info__dark-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  gap: 64px;
  align-items: center;
}

.hb-home-info__kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: #ed1c24;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.hb-home-info__intro h2,
.hb-home-info__content h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 3.1vw, 56px);
  line-height: .96;
  letter-spacing: -.065em;
  font-weight: 950;
}

.hb-home-info__intro p {
  max-width: 660px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 550;
}

.hb-home-info__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.hb-home-info__benefit {
  position: relative;
  min-height: 116px;
  padding: 22px 24px 22px 78px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.hb-home-info__benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .36;
  pointer-events: none;
}

.hb-home-info__benefit span {
  position: absolute;
  left: 20px;
  top: 22px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ed1c24;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(237, 28, 36, .30);
}

.hb-home-info__benefit p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

/* =========================================================
   LIGHT SECTION
   ========================================================= */

.hb-home-info__light {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f3f4f6;
}

.hb-home-info__light-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  width: 100%;
  padding: 72px 0;
}

.hb-home-info__image {
  position: relative;
  min-height: 390px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #e7e9ee, #f4f5f7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .10);
}

.hb-home-info__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.hb-home-info__image img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hb-home-info__content {
  color: #08090b;
}

.hb-home-info__content p {
  max-width: 760px;
  margin: 20px 0 0;
  color: #5f6673;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 550;
}

.hb-home-info__button {
  min-height: 50px;
  margin-top: 28px;
  padding: 0 24px;
  border-radius: 9px;
  background: #ed1c24;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 16px 36px rgba(237, 28, 36, .22);
  transition: .2s ease;
}

.hb-home-info__button:hover {
  background: #050505;
  color: #fff !important;
  transform: translateY(-1px);
}

/* =========================================================
   USUNIĘCIE PRZERW, JEŚLI MOTYW DODAJE MARGINESY
   ========================================================= */

.hb-home-info + *,
.hb-home-info__dark + .hb-home-info__light {
  margin-top: 0 !important;
}

.hb-home-info__dark,
.hb-home-info__light,
.hb-home-info section {
  border: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {
  .hb-home-info__dark-grid,
  .hb-home-info__light-grid {
    gap: 42px;
  }

  .hb-home-info__benefits {
    gap: 14px;
  }

  .hb-home-info__benefit {
    padding-right: 18px;
  }
}

@media (max-width: 991px) {
  .hb-home-info__dark {
    padding: 56px 0;
  }

  .hb-home-info__dark-grid,
  .hb-home-info__light-grid {
    grid-template-columns: 1fr;
  }

  .hb-home-info__light-grid {
    padding: 56px 0;
  }

  .hb-home-info__image,
  .hb-home-info__image img {
    min-height: 320px;
  }

  .hb-home-info__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .hb-home-info__inner {
    width: min(100% - 28px, 1480px);
  }

  .hb-home-info__dark {
    padding: 46px 0;
  }

  .hb-home-info__light-grid {
    padding: 46px 0;
  }

  .hb-home-info__intro h2,
  .hb-home-info__content h2 {
    font-size: 34px;
  }

  .hb-home-info__intro p,
  .hb-home-info__content p {
    font-size: 15px;
  }

  .hb-home-info__benefits {
    grid-template-columns: 1fr;
  }

  .hb-home-info__benefit {
    min-height: auto;
    padding: 18px 18px 18px 68px;
    border-radius: 16px;
  }

  .hb-home-info__benefit span {
    left: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
  }

  .hb-home-info__image,
  .hb-home-info__image img {
    min-height: 240px;
    border-radius: 18px;
  }

  .hb-home-info__button {
    width: 100%;
  }
}
/* =========================================================
   HARTLINE BLACK — CATEGORY ICONS FROM FILES
   Ikonki z folderu /assets/img/categories/
   ========================================================= */

.hb-category-tile--icon {
  min-height: 330px !important;
  padding: 38px 28px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.hb-category-tile--icon .hb-category-tile__icon {
  position: relative;
  z-index: 3;
  width: 150px !important;
  height: 130px !important;
  margin: 0 auto 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: .22s ease;
}

.hb-category-tile--icon .hb-category-tile__icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28));
  transition: .22s ease;
}

.hb-category-tile--icon:hover .hb-category-tile__icon {
  transform: translateY(-4px) scale(1.04);
}

.hb-category-tile--icon:hover .hb-category-tile__icon img {
  filter: drop-shadow(0 22px 42px rgba(237, 28, 36, .28));
}

.hb-category-tile--icon h3 {
  position: relative;
  z-index: 3;
  margin: 0 !important;
}

.hb-category-tile--icon p {
  position: relative;
  z-index: 3;
}

.hb-category-tile--icon strong {
  position: relative;
  z-index: 3;
}

/* ukrycie starego numeru */
.hb-category-tile__num {
  display: none !important;
}

@media (max-width: 575px) {
  .hb-category-tile--icon {
    min-height: 280px !important;
    padding: 28px 22px 24px !important;
  }

  .hb-category-tile--icon .hb-category-tile__icon {
    width: 125px !important;
    height: 110px !important;
    margin-bottom: 22px !important;
  }
}
/* =========================================================
   HARTLINE BLACK — CATEGORY CARDS ALIGN FIX
   Równe pozycje ikon, tytułów, opisów i przycisków
   ========================================================= */

.hb-category-tile--icon {
  min-height: 360px !important;
  padding: 36px 28px 30px !important;

  display: grid !important;
  grid-template-rows: 118px 44px 78px 24px !important;
  align-items: center !important;
  justify-items: center !important;

  text-align: center !important;
}

/* Stałe pole na ikonkę */
.hb-category-tile--icon .hb-category-tile__icon {
  width: 180px !important;
  height: 118px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Ikona zawsze w tym samym polu */
.hb-category-tile--icon .hb-category-tile__icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 180px !important;
  max-height: 118px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Tytuły w jednej linii wysokości */
.hb-category-tile--icon h3 {
  align-self: center !important;
  margin: 0 !important;
  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

/* Opisy zawsze w tym samym miejscu */
.hb-category-tile--icon p {
  align-self: start !important;
  margin: 0 !important;
  min-height: 78px !important;
  max-height: 78px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: center !important;
  overflow: hidden !important;
}

/* Przycisk zawsze na tej samej wysokości */
.hb-category-tile--icon strong {
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hover ikony bez przesuwania całej treści */
.hb-category-tile--icon:hover .hb-category-tile__icon {
  transform: translateY(-3px) scale(1.04);
}

/* Tablet */
@media (max-width: 1199px) {
  .hb-category-tile--icon {
    min-height: 350px !important;
    grid-template-rows: 112px 44px 78px 24px !important;
  }

  .hb-category-tile--icon .hb-category-tile__icon {
    width: 170px !important;
    height: 112px !important;
  }

  .hb-category-tile--icon .hb-category-tile__icon img {
    max-width: 170px !important;
    max-height: 112px !important;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .hb-category-tile--icon {
    min-height: 310px !important;
    padding: 30px 22px 26px !important;
    grid-template-rows: 100px 40px 68px 24px !important;
  }

  .hb-category-tile--icon .hb-category-tile__icon {
    width: 150px !important;
    height: 100px !important;
  }

  .hb-category-tile--icon .hb-category-tile__icon img {
    max-width: 150px !important;
    max-height: 100px !important;
  }

  .hb-category-tile--icon p {
    min-height: 68px !important;
    max-height: 68px !important;
  }
}
/* =========================================================
   HARTLINE BLACK — BENEFIT ICON SIZE FIX
   ========================================================= */

.hb-home-info__benefit-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

.hb-home-info__benefit-icon img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.hb-home-info__benefit {
  padding-left: 82px !important;
}
/* =========================================================
   HARTLINE BLACK — MOBILE HEADER / CATEGORY DROPDOWN
   ========================================================= */

.hb-mobile-cats-toggle {
  display: none;
}

/* Desktop zostaje normalny */
.hb-header-nav__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* MOBILE */
@media (max-width: 767px) {
  .hb-header-main {
    position: relative !important;
    overflow: hidden !important;
  }

  /* usunięcie uciekającego dekoracyjnego kółka */
  .hb-header-main::before,
  .hb-header-main::after,
  .hb-header-main__inner::before,
  .hb-header-main__inner::after {
    display: none !important;
  }

  .hb-header-main__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 20px 16px !important;
  }

  .hb-header-logo {
    display: flex !important;
    justify-content: flex-start !important;
  }

  .hb-header-logo img {
    width: 92px !important;
    height: auto !important;
  }

  .hb-header-search {
    width: 100% !important;
  }

  .hb-search-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  .hb-search-form__input {
    min-height: 48px !important;
    border-radius: 8px 0 0 8px !important;
  }

  .hb-search-form__button {
    width: 48px !important;
    min-height: 48px !important;
    border-radius: 0 8px 8px 0 !important;
  }

  /* Na mobile pokazujemy mobilne hooki, a desktopowe chowamy */
  .hb-header-actions {
    display: none !important;
  }

  .hb-mobile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 42px !important;
  }

  .hb-mobile-actions > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Ikony logowania i koszyka z kółkiem */
  .hb-mobile-actions a,
  .hb-mobile-actions button,
  .hb-mobile-actions .user-info a,
  .hb-mobile-actions .blockcart a,
  .hb-mobile-actions .cart-preview a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    background: #17191f !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
    text-decoration: none !important;
  }

  .hb-mobile-actions a:hover,
  .hb-mobile-actions button:hover {
    background: #ed1c24 !important;
    color: #fff !important;
  }

  .hb-mobile-actions svg,
  .hb-mobile-actions i {
    color: #fff !important;
    fill: currentColor !important;
  }

  /* Licznik koszyka */
  .hb-mobile-actions .cart-products-count,
  .hb-mobile-actions .cart-count,
  .hb-mobile-actions .badge,
  #_mobile_cart .cart-products-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #0d6efd !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  /* Menu kategorii jako dropdown */
  .hb-header-nav {
    background: #17181d !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    border-bottom: 2px solid #ed1c24 !important;
  }

  .hb-header-nav__inner {
    width: 100% !important;
    padding: 10px 16px !important;
    display: block !important;
  }

  .hb-mobile-cats-toggle {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #0d0e12;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  }

  .hb-mobile-cats-toggle span {
    color: #fff;
    font-size: 15px;
    line-height: 1;
    font-weight: 950;
  }

  .hb-mobile-cats-toggle strong {
    color: #ed1c24;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    transition: .2s ease;
  }

  .hb-header-nav.is-open .hb-mobile-cats-toggle strong {
    transform: rotate(180deg);
  }

  .hb-header-nav__panel {
    display: none !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 14px !important;
    background: #0b0c10 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .26) !important;
  }

  .hb-header-nav.is-open .hb-header-nav__panel {
    display: block !important;
  }

  .hb-main-menu {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .hb-main-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .hb-main-menu a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    color: #fff !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    white-space: normal !important;
  }

  .hb-main-menu a:hover {
    background: #ed1c24 !important;
    color: #fff !important;
  }

  .hb-header-cta {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: #ed1c24 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }

  .hb-header-cta strong {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }
}
/* =========================================================
   HARTLINE BLACK — ACCOUNT TOPBAR FIX
   naprawa nazwy użytkownika i dropdownu konta
   ========================================================= */

/* Obszar konta w headerze */
.header__user,
.user-info,
#_desktop_user_info {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 190px !important;
  flex: 0 0 auto !important;
}

/* Link / przycisk z imieniem i nazwiskiem */
.header__user a,
.user-info a,
#_desktop_user_info a,
#_desktop_user_info .user-info,
#_desktop_user_info .account {
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 190px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Sam tekst użytkownika — ucinanie z trzema kropkami */
.header__user span,
.user-info span,
#_desktop_user_info span,
#_desktop_user_info .account span,
#_desktop_user_info .user-info span {
  display: inline-block !important;
  max-width: 135px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Dropdown konta klienta */
.user-info .dropdown-menu,
#_desktop_user_info .dropdown-menu,
#_desktop_user_info .account-list,
.header__user .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  left: auto !important;

  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;

  padding: 8px !important;
  margin: 0 !important;

  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;

  z-index: 99999 !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Linki w dropdownie */
.user-info .dropdown-menu a,
#_desktop_user_info .dropdown-menu a,
#_desktop_user_info .account-list a,
.header__user .dropdown-menu a {
  width: 100% !important;
  max-width: none !important;
  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 12px !important;
  border-radius: 10px !important;

  color: #111111 !important;
  background: transparent !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: normal !important;
}

/* Hover w dropdownie */
.user-info .dropdown-menu a:hover,
#_desktop_user_info .dropdown-menu a:hover,
#_desktop_user_info .account-list a:hover,
.header__user .dropdown-menu a:hover {
  color: #ffffff !important;
  background: #ed1c24 !important;
}

/* Ikony / strzałki przy koncie */
#_desktop_user_info i,
#_desktop_user_info svg,
.user-info i,
.user-info svg {
  flex: 0 0 auto !important;
}

/* Żeby dropdown nie robił wielkiego białego prostokąta na środku */
#_desktop_user_info .dropdown-menu.show,
.user-info .dropdown-menu.show,
.header__user .dropdown-menu.show {
  display: block !important;
}

/* Mobile — ukrycie problemu z długim imieniem */
@media (max-width: 991px) {
  .header__user,
  .user-info,
  #_desktop_user_info {
    max-width: 48px !important;
  }

  .header__user span,
  .user-info span,
  #_desktop_user_info span {
    display: none !important;
  }

  .user-info .dropdown-menu,
  #_desktop_user_info .dropdown-menu,
  #_desktop_user_info .account-list,
  .header__user .dropdown-menu {
    right: -8px !important;
  }
}
/* =========================================================
   HARTLINE BLACK — ACCOUNT DROPDOWN ICONS FIX
   ikonki w menu konta
   ========================================================= */

/* Ikonki w rozwijanym menu konta */
#_desktop_user_info .dropdown-menu a i,
#_desktop_user_info .dropdown-menu a svg,
#_desktop_user_info .dropdown-menu a .material-icons,
#_desktop_user_info .account-list a i,
#_desktop_user_info .account-list a svg,
#_desktop_user_info .account-list a .material-icons,
.user-info .dropdown-menu a i,
.user-info .dropdown-menu a svg,
.user-info .dropdown-menu a .material-icons {
  color: #ed1c24 !important;
  fill: #ed1c24 !important;
  stroke: #ed1c24 !important;
  opacity: 1 !important;

  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tekst i ikonki wyrównane od lewej */
#_desktop_user_info .dropdown-menu a,
#_desktop_user_info .account-list a,
.user-info .dropdown-menu a {
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}

/* Ikonka dla pierwszego elementu: "Twoje konto" */
#_desktop_user_info .dropdown-menu a:first-child::before,
#_desktop_user_info .account-list a:first-child::before,
.user-info .dropdown-menu a:first-child::before {
  content: "" !important;

  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;

  display: inline-flex !important;
  background-color: #ed1c24 !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Po najechaniu ikonki robią się białe */
#_desktop_user_info .dropdown-menu a:hover i,
#_desktop_user_info .dropdown-menu a:hover svg,
#_desktop_user_info .dropdown-menu a:hover .material-icons,
#_desktop_user_info .account-list a:hover i,
#_desktop_user_info .account-list a:hover svg,
#_desktop_user_info .account-list a:hover .material-icons,
.user-info .dropdown-menu a:hover i,
.user-info .dropdown-menu a:hover svg,
.user-info .dropdown-menu a:hover .material-icons {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Ikonka "Twoje konto" też biała na hoverze */
#_desktop_user_info .dropdown-menu a:first-child:hover::before,
#_desktop_user_info .account-list a:first-child:hover::before,
.user-info .dropdown-menu a:first-child:hover::before {
  background-color: #ffffff !important;
}

/* Pierwszy element "Twoje konto" — tak samo jak pozostałe */
#_desktop_user_info .dropdown-menu a:first-child,
#_desktop_user_info .account-list a:first-child,
.user-info .dropdown-menu a:first-child {
  background: transparent !important;
  color: #111111 !important;
}

/* Hover dla "Twoje konto" jak przy reszcie */
#_desktop_user_info .dropdown-menu a:first-child:hover,
#_desktop_user_info .account-list a:first-child:hover,
.user-info .dropdown-menu a:first-child:hover {
  background: #ed1c24 !important;
  color: #ffffff !important;
}
/* Usuń oryginalną/drugą ikonkę przy "Twoje konto" */
#_desktop_user_info .dropdown-menu a:first-child i,
#_desktop_user_info .dropdown-menu a:first-child svg,
#_desktop_user_info .dropdown-menu a:first-child .material-icons,
#_desktop_user_info .account-list a:first-child i,
#_desktop_user_info .account-list a:first-child svg,
#_desktop_user_info .account-list a:first-child .material-icons,
.user-info .dropdown-menu a:first-child i,
.user-info .dropdown-menu a:first-child svg,
.user-info .dropdown-menu a:first-child .material-icons {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}