:root {
          --infos-red: #e10d27;
          --infos-red-2: #ff2447;
          --infos-bg: #030303;
          --infos-panel: #0a0a0d;
          --infos-line: rgba(255, 255, 255, 0.08);
          --infos-text: #ffffff;
          --infos-muted: #9d9fab;
        }

        html,
        body {
          background: #030303 !important;
          color: var(--infos-text);
        }

        body {
          background-image: radial-gradient(
            circle at top center,
            rgba(225, 13, 39, 0.12),
            transparent 28%
          ) !important;
        }

        a {
          text-decoration: none;
        }

        .bottom-nav {
          display: none !important;
        }

        .ref-main {
          padding: 18px 0 40px;
        }

        .ref-header {
          border-bottom: 1px solid rgba(225, 13, 39, 0.28);
          background: linear-gradient(
            180deg,
            rgba(15, 0, 4, 0.92),
            rgba(3, 3, 3, 0.98)
          );
          position: sticky;
          top: 0;
          z-index: 40;
          backdrop-filter: blur(10px);
        }

        .ref-header .container {
          max-width: 1180px;
          margin: 0 auto;
          padding: 0 18px;
        }

        .ref-header-top {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          min-height: 84px;
          gap: 10px;
        }

        .ref-brand-area {
          justify-self: center;
          text-align: center;
        }

        .ref-brand {
          font-size: 20px;
          font-weight: 900;
          letter-spacing: 0.04em;
          color: #fff;
          white-space: nowrap;
        }

        .ref-brand b {
          color: var(--infos-red-2);
        }

        .ref-brand.reseller-brand {
          display: block;
          max-width: 420px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ref-brand-area small {
          display: block;
          margin-top: 4px;
          color: #7f8492;
          font-size: 12px;
          letter-spacing: 0.18em;
          white-space: nowrap;
        }

        .ref-head-actions {
          justify-self: end;
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .ref-head-actions a {
          position: relative;
          color: #fff;
          display: grid;
          place-items: center;
        }

        .ref-head-actions .cart-badge {
          position: absolute;
          top: -7px;
          right: -8px;
          width: 18px;
          height: 18px;
          display: grid;
          place-items: center;
          border: 2px solid #08080a;
          border-radius: 999px;
          background: var(--infos-red-2);
          color: #fff;
          font-size: 10px;
          font-weight: 900;
        }

        .ref-topnav {
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          background: rgba(0, 0, 0, 0.78);
        }

        .ref-topnav .container {
          max-width: 1180px;
          margin: 0 auto;
          padding: 0 18px;
        }

        .ref-topnav-inner {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 16px;
          align-items: center;
          padding: 10px 0;
        }

        .ref-topnav a {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-height: 40px;
          padding: 8px 10px;
          border: 1px solid transparent;
          border-radius: 12px;
          color: #8d93a2;
          font-size: 13px;
          font-weight: 700;
          text-transform: uppercase;
        }

        .ref-topnav a.active {
          border-color: rgba(255, 255, 255, 0.08);
          background: linear-gradient(
            180deg,
            var(--infos-red-2),
            #b3001c
          );
          color: #fff;
          box-shadow: 0 10px 24px rgba(225, 13, 39, 0.22);
        }

        .ref-topnav a:not(.active):hover {
          border-color: rgba(255, 255, 255, 0.08);
          color: #fff;
        }

        @media (max-width: 720px) {
          .ref-header .container {
            padding: 0 15px;
          }

          .ref-header-top {
            grid-template-columns: 62px minmax(0, 1fr) 62px;
            min-height: 76px;
            gap: 6px;
          }

          .ref-header-top > div:first-child {
            width: 62px;
          }

          .ref-brand-area {
            justify-self: center;
            text-align: center;
            min-width: 0;
          }

          .ref-brand {
            font-size: 17px;
          }

          .ref-brand-area small {
            font-size: 9px;
            letter-spacing: 0.12em;
          }

          .ref-head-actions {
            width: 62px;
            justify-self: end;
            justify-content: flex-end;
            gap: 12px;
          }

          .ref-head-actions svg {
            width: 19px;
            height: 19px;
          }

          .ref-topnav .container {
            padding: 0 11px;
          }

          .ref-topnav-inner {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 7px;
            padding: 9px 0;
          }

          .ref-topnav a {
            min-width: 0;
            min-height: 38px;
            padding: 7px 5px;
            gap: 6px;
            font-size: 11px;
          }

          .ref-topnav a svg {
            width: 14px;
            height: 14px;
          }
        }

        @media (max-width: 370px) {
          .ref-topnav a {
            font-size: 10px;
          }

          .ref-topnav a span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }