/** Shopify CDN: Minification failed

Line 33:0 All "@import" rules must come first

**/
/* ==========================================================================
   I Choose Hjo — "Live & Loud" (Koncept A) design tokens + komponenter
   Ladda upp den här filen under Theme > Edit code > Assets, och länka in
   den i theme.liquid (se INSTALLATION.md för exakt rad att lägga till).
   ========================================================================== */

:root {
  --hjo-bg: #0a0e1f;
  --hjo-bg-alt: #0d1226;
  --hjo-panel: #131a30;
  --hjo-border: rgba(139, 92, 246, 0.22);
  --hjo-border-strong: rgba(139, 92, 246, 0.35);
  --hjo-violet: #8b5cf6;
  --hjo-violet-light: #a78bfa;
  --hjo-gold: #f4c430;
  --hjo-text: #ffffff;
  --hjo-text-muted: #aab0c6;
  --hjo-text-dim: #8b7fb8;
  --hjo-radius: 14px;
  --hjo-font-display: 'Space Grotesk', sans-serif;
  --hjo-font-body: 'Manrope', sans-serif;

  --color-foreground: 255, 255, 255;
  --color-background: 10, 14, 31;
  --color-link: 167, 139, 250;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

.hjo-section {
  background: var(--hjo-bg);
  font-family: var(--hjo-font-body);
}

.hjo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hjo-violet-light);
  text-transform: uppercase;
}

.hjo-h2 {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--hjo-text);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Design-idé: Glasmorfism — hjo-card är den frostade panelen som används av
   heroens countdown-siffror, "Veckans packs"-korten m.fl. */
.hjo-card {
  background: rgba(19, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--hjo-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 32px -18px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hjo-btn-gold {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--hjo-bg);
  background: var(--hjo-gold);
  border-radius: 9px;
  padding: 13px 26px;
  display: inline-block;
  box-shadow: 0 0 22px rgba(244, 196, 48, 0.3);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hjo-btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(244, 196, 48, 0.45);
}

.hjo-btn-ghost {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--hjo-text);
  background: transparent;
  border: 1px solid var(--hjo-violet);
  border-radius: 9px;
  padding: 12px 24px;
  display: inline-block;
  text-decoration: none;
}

.hjo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 999px;
}
/* Design-idé: pulserande live-badge — hjo-live-dot ritar två utgående
   ringar via ::before/::after ovanpå den solida punkten. */
.hjo-live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}
.hjo-live-dot::before,
.hjo-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #ef4444;
  animation: hjo-pulse-ring 1.8s ease-out infinite;
}
.hjo-live-dot::after {
  animation-delay: 0.6s;
}
@keyframes hjo-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}
.hjo-live-badge span.hjo-live-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fca5a5;
}

.hjo-price {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  color: var(--hjo-gold);
}

header,
.site-header,
.header,
.header-wrapper {
  background-color: var(--hjo-bg) !important;
  border-bottom-color: var(--hjo-border-strong) !important;
}
header a,
.site-header a,
.header a,
.site-nav__link,
.header__inline-menu a {
  font-family: var(--hjo-font-body);
  color: var(--hjo-text-muted) !important;
}
header a:hover,
.site-header a:hover,
.header a:hover {
  color: var(--hjo-text) !important;
}
.announcement-bar,
.utility-bar {
  background: linear-gradient(90deg, #241a4d, #3b2470) !important;
  color: #e9e4ff !important;
}

/* Design-idé: Glasmorfism-kort — frostad panel istället för solid bakgrund,
   applicerar på produktkortet i kollektion/sök/relaterade produkter. */
.card,
.product-card,
.card-wrapper {
  background: rgba(19, 26, 48, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--hjo-radius) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 32px -18px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.card__heading,
.card__heading a,
.product-card__title {
  font-family: var(--hjo-font-display);
  color: var(--hjo-text) !important;
}
.price,
.price__regular,
.product__price {
  color: var(--hjo-gold) !important;
  font-family: var(--hjo-font-display);
  font-weight: 700 !important;
}

body,
.shopify-section {
  background-color: var(--hjo-bg);
}

.price .price-item {
  color: var(--hjo-gold) !important;
  font-weight: 700 !important;
}
.price .price-item--sale {
  color: var(--hjo-gold) !important;
}

.hjo-pdp-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 4px 0 8px;
  background: var(--hjo-panel);
  border: 1px solid rgba(244, 196, 48, 0.35);
  border-radius: var(--hjo-radius);
}
.hjo-pdp-note__icon {
  flex-shrink: 0;
  color: var(--hjo-gold);
  margin-top: 1px;
}
.hjo-pdp-note__heading {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--hjo-text);
  margin-bottom: 3px;
}
.hjo-pdp-note__body {
  font-size: 12.5px;
  color: var(--hjo-text-muted);
  line-height: 1.5;
}

.hjo-pdp-trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(139, 92, 246, 0.18);
}
.hjo-pdp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--hjo-text-dim);
  font-weight: 600;
}
.hjo-pdp-trust__item svg {
  color: var(--hjo-violet-light);
  flex-shrink: 0;
}

.product__media-wrapper {
  position: relative;
}
.product__media-wrapper::after {
  content: 'ÖPPNAS LIVE';
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 6px 12px 6px 22px;
  background: #ef4444;
  color: #fff;
  font-family: var(--hjo-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-radius: 999px;
  pointer-events: none;
}
.product__media-wrapper::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

.card__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hjo-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--hjo-font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hjo-badge--new {
  background: rgba(139, 92, 246, 0.88);
  color: #fff;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
}
.hjo-badge--bestseller {
  background: rgba(244, 196, 48, 0.9);
  color: var(--hjo-bg);
  box-shadow: 0 0 12px rgba(244, 196, 48, 0.4);
}
.hjo-badge--restock {
  background: rgba(34, 197, 94, 0.88);
  color: #06210f;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}
.hjo-stock-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-family: var(--hjo-font-body);
  font-weight: 700;
  font-size: 10.5px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-wrapper,
.hjo-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-wrapper:hover,
.hjo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.2);
}

/* --------------------------------------------------------------------------
   Design-idé: Rörelse & mikro-interaktioner — staggered reveal för egna
   sektioner (t.ex. "Veckans packs") som inte redan använder temats
   inbyggda scroll-trigger-system.
   -------------------------------------------------------------------------- */
@keyframes hjo-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hjo-reveal {
  opacity: 0;
}
.hjo-reveal.hjo-reveal--in {
  animation: hjo-card-in 0.5s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hjo-live-dot::before,
  .hjo-live-dot::after {
    animation: none;
  }
  .hjo-reveal {
    opacity: 1;
  }
  .hjo-reveal.hjo-reveal--in {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Design-idé: Enhetlig produktfotografering — samma radiella spotlight-
   bakgrund + mjuk skugga bakom alla produktbilder, oavsett varumärke/källa.
   -------------------------------------------------------------------------- */
.card__media {
  background: radial-gradient(ellipse at 50% 35%, #1c2340 0%, #0d1226 75%) !important;
}
.card__media img {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}
.hjo-product-media {
  background: radial-gradient(ellipse at 50% 35%, #1c2340 0%, #0d1226 75%);
  border-radius: calc(var(--hjo-radius) - 2px) calc(var(--hjo-radius) - 2px) 0 0;
}
.hjo-product-media img {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}

/* --------------------------------------------------------------------------
   Design-idé: Egna tomma vyer — branded illustration + rubrik/brödtext för
   tom varukorg, tomt sökresultat och "inga ordrar än".
   -------------------------------------------------------------------------- */
.hjo-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 4px;
}
.hjo-empty-state svg {
  margin-bottom: 8px;
}
.hjo-empty-state__title {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--hjo-text);
  margin: 0 0 6px;
}
.hjo-empty-state__body {
  font-family: var(--hjo-font-body);
  font-size: 13px;
  color: var(--hjo-text-muted);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto 18px;
}

/* --------------------------------------------------------------------------
   Design-idé: Mobilt app-skal — fast bottennav på mobil (Hem/Sök/Live/
   Varukorg/Konto), döljs på desktop.
   -------------------------------------------------------------------------- */
.hjo-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 401;
  display: flex;
  align-items: flex-start;
  background: rgba(13, 18, 38, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(139, 92, 246, 0.25);
  padding: 10px 4px calc(12px + env(safe-area-inset-bottom, 0px));
}
.hjo-mobile-nav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #7a8099;
  position: relative;
}
.hjo-mobile-nav__tab.is-active {
  color: #a78bfa;
}
.hjo-mobile-nav__label {
  font-family: var(--hjo-font-body);
  font-size: 10px;
  font-weight: 700;
}
.hjo-mobile-nav__badge {
  position: absolute;
  top: -4px;
  right: 12px;
  background: var(--hjo-gold);
  color: var(--hjo-bg);
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hjo-font-display);
}
@media screen and (min-width: 750px) {
  .hjo-mobile-nav {
    display: none;
  }
}
@media screen and (max-width: 749px) {
  body {
    padding-bottom: 68px;
  }
}

/* --------------------------------------------------------------------------
   Design-idé: Videoflöde — öppningsklipp i Reels/TikTok-stil.
   Teaser-kort på startsidan (hjo-video-teaser) + helskärmsflöde
   (hjo-video-feed) som läser Öppningsklipp-metaobjekt.
   -------------------------------------------------------------------------- */
.hjo-vt-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hjo-vt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.2);
}
.hjo-vt-live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.hjo-vt-live-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.2px solid #fff;
  animation: hjo-vt-pulse 1.8s ease-out infinite;
}
@keyframes hjo-vt-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.hjo-vf-scroll {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #05070f;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.hjo-vf-scroll::-webkit-scrollbar {
  display: none;
}
.hjo-vf-panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100dvh;
  width: 100%;
  position: relative;
  background: #05070f;
  overflow: hidden;
}
.hjo-vf-panel-inner {
  position: relative;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}
.hjo-vf-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: radial-gradient(ellipse 130% 70% at 50% 34%, #1c2340 0%, #0d1226 55%, #0a0e1f 100%);
}
.hjo-vf-scrim-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0.9) 0%, rgba(5, 7, 15, 0) 100%);
  pointer-events: none;
}
.hjo-vf-scrim-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 320px;
  background: linear-gradient(0deg, rgba(5, 7, 15, 0.95) 0%, rgba(5, 7, 15, 0) 100%);
  pointer-events: none;
}
.hjo-vf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(19, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #fff;
}
.hjo-vf-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(19, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hjo-vf-rail {
  position: absolute;
  right: 14px;
  bottom: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hjo-vf-rail-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(19, 26, 48, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hjo-vf-rail-btn--shop {
  background: var(--hjo-gold);
  border: none;
  box-shadow: 0 0 18px rgba(244, 196, 48, 0.45);
}
.hjo-vf-rail-btn.is-liked svg path {
  fill: #ef4444;
  stroke: #ef4444;
}
.hjo-vf-info {
  position: absolute;
  left: 16px;
  right: 76px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hjo-vf-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hjo-violet), var(--hjo-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--hjo-bg);
  flex: none;
}
.hjo-vf-product-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--hjo-radius);
  background: rgba(19, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .hjo-vt-live-dot::before {
    animation: none;
  }
}
@media screen and (min-width: 750px) {
  .hjo-vf-rail {
    right: calc(50% - 240px + 14px);
  }
  .hjo-vf-info {
    left: calc(50% - 240px + 16px);
    right: calc(50% - 240px + 76px);
  }
}

/* --------------------------------------------------------------------------
   Design-idé: Levande bakgrund — gnistor + andande glöd bakom hero-
   innehållet. Går i lugn takt som standard och tätnar/blir varmare
   automatiskt när sändningen går live (styrs från hjo-hero.liquid:s
   befintliga nedräkningslogik, se swapToLive/intensifyHeroBg).
   -------------------------------------------------------------------------- */
.hjo-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hjo-hero-glow {
  position: absolute;
  inset: 0;
  --hjo-glow-a: 0.32;
  --hjo-glow-b: 0.22;
  background:
    radial-gradient(ellipse 900px 560px at 20% 28%, rgba(139, 92, 246, var(--hjo-glow-a)) 0%, rgba(139, 92, 246, 0) 60%),
    radial-gradient(ellipse 620px 520px at 80% 68%, rgba(244, 196, 48, var(--hjo-glow-b)) 0%, rgba(244, 196, 48, 0) 65%);
  animation: hjo-glow-pulse 6s ease-in-out infinite;
}
.hjo-hero-glow.is-live {
  --hjo-glow-a: 0.55;
  --hjo-glow-b: 0.5;
  animation-duration: 3.2s;
}
@keyframes hjo-glow-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}
.hjo-hero-embers {
  position: absolute;
  inset: 0;
}
.hjo-ember {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hjo-gold) 0%, rgba(244, 196, 48, 0) 72%);
  box-shadow: 0 0 8px rgba(244, 196, 48, 0.85);
  opacity: 0;
  animation-name: hjo-ember-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hjo-ember-rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-760px) translateX(var(--hjo-ember-drift, 0px));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hjo-hero-glow,
  .hjo-ember {
    animation: none;
  }
  .hjo-hero-embers {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Design-idé: Uppdaterad header — egen kodad sektion (hjo-header.liquid)
   som ersätter temats standardheader. Sticky med "glas"-effekt vid skroll,
   LIVE-badge, färgkodad Stream-länk, expanderande sök och en mobilmeny.
   -------------------------------------------------------------------------- */
.hjo-topbar {
  position: relative;
  z-index: 100;
}
.hjo-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(139, 92, 246, 0.08);
  border-bottom: 1px solid var(--hjo-border);
}
.hjo-announcement a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.hjo-announcement__text {
  font-family: var(--hjo-font-body);
  font-weight: 700;
  font-size: 12.5px;
  color: #e9e4ff !important;
}

.hjo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hjo-bg) !important;
  border-bottom: 1px solid var(--hjo-border-strong) !important;
  box-shadow: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.hjo-header.is-scrolled {
  background: rgba(10, 14, 31, 0.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
}
.hjo-header__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 5vw;
  display: flex;
  align-items: center;
  gap: 24px;
}

.hjo-logo {
  display: block;
  order: 2;
  flex: 1 1 auto;
  text-align: center;
}
.hjo-logo__img {
  display: inline-block;
  height: 40px;
  width: auto;
  transition: filter 0.25s ease;
}
.hjo-logo:hover .hjo-logo__img {
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.75)) drop-shadow(0 0 26px rgba(244, 196, 48, 0.35));
}
.hjo-logo__fallback {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--hjo-text);
}

.hjo-nav {
  display: none;
  align-items: center;
  gap: 24px;
  order: 3;
}
.hjo-navitem {
  position: relative;
}
.hjo-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 2px;
  font-family: var(--hjo-font-body);
  font-weight: 700;
  font-size: 14px;
  color: #e9e4ff !important;
  text-decoration: none;
}
.hjo-navlink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.hjo-navlink:hover::after {
  transform: scaleX(1);
}
.hjo-navlink--red:hover {
  color: #f36a6a !important;
}
.hjo-navdrop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 190px;
  background: #12172c;
  border: 1px solid var(--hjo-border-strong);
  border-radius: 10px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  z-index: 30;
}
.hjo-navitem:hover .hjo-navdrop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hjo-navdrop a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--hjo-font-body);
  font-size: 13.5px;
  color: #c9c2e8 !important;
  text-decoration: none;
}
.hjo-navdrop a:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #ffffff !important;
}

.hjo-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  order: 4;
}
.hjo-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #e9e4ff !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.hjo-iconbtn:hover {
  background: rgba(139, 92, 246, 0.14);
  color: var(--hjo-gold) !important;
}
.hjo-menubtn {
  order: 1;
  margin-right: -6px;
}

.hjo-search {
  display: flex;
  align-items: center;
}
.hjo-search__form-wrap {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.2s ease;
}
.hjo-search.is-open .hjo-search__form-wrap {
  width: 200px;
  opacity: 1;
}
.hjo-search__form input {
  width: 188px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--hjo-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--hjo-text) !important;
  font-family: var(--hjo-font-body);
  font-size: 13.5px;
}

.hjo-cartbtn {
  position: relative;
}
.hjo-cartbtn__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--hjo-gold);
  color: var(--hjo-bg) !important;
  font-family: var(--hjo-font-body);
  font-weight: 800;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hjo-avatar {
  padding: 0;
}
.hjo-avatar__initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hjo-violet), var(--hjo-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--hjo-bg) !important;
}

.hjo-mobilemenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.hjo-mobilemenu.is-open {
  max-height: 480px;
  opacity: 1;
  border-top: 1px solid var(--hjo-border);
}
.hjo-mobilemenu a {
  display: block;
  padding: 13px 5vw;
  font-family: var(--hjo-font-body);
  font-weight: 700;
  font-size: 14px;
  color: #e9e4ff !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}
.hjo-mobilemenu a.hjo-mobilemenu__sub {
  padding-left: calc(5vw + 18px);
  font-size: 13px;
  font-weight: 600;
  color: var(--hjo-text-muted) !important;
}

@media screen and (min-width: 750px) {
  .hjo-header__inner {
    gap: 32px;
  }
  .hjo-logo {
    order: 1;
    flex: 0 0 auto;
    text-align: left;
  }
  .hjo-logo__img {
    height: 52px;
  }
  .hjo-nav {
    display: flex;
    flex: 1 1 auto;
  }
  .hjo-menubtn,
  .hjo-mobilemenu {
    display: none;
  }
}
@media screen and (max-width: 749px) {
  .hjo-account {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Design-idé: Sociala kanaler i heron — en diskret ikonrad (Twitch, Discord,
   Instagram, TikTok) precis under LIVE-badgen, så att kanalerna syns direkt
   för alla besökare utan att behöva scrolla till footern.
   -------------------------------------------------------------------------- */
.hjo-hero-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.hjo-hero-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(19, 26, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e9e4ff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.hjo-hero-social-btn:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.4);
  color: #f4c430;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Design-idé: Chase-kort widget på produktsidan — ersätter Rise-temats
   staplade tumnagelgrid med en snygg, glasig panel som visar produktens
   riktiga korta-foton (bild 2+) i en horisontellt bläddringsbar rad,
   i samma "holo"-stil som resten av Koncept A. Se hjo-chase-gallery.liquid
   och main-product.liquid (villkoret enable_chase_widget).
   -------------------------------------------------------------------------- */
.hjo-chase-panel {
  margin-top: 18px;
  padding: 18px 18px 14px;
}
.hjo-chase-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hjo-chase-panel__count {
  font-family: var(--hjo-font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--hjo-text-dim);
}

.hjo-chase-rail-wrap {
  position: relative;
}
.hjo-chase-rail {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 4px 2px 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 92%, transparent 100%);
}
.hjo-chase-rail::-webkit-scrollbar {
  display: none;
}

.hjo-chase-card {
  position: relative;
  flex: 0 0 128px;
  height: 179px;
  border-radius: 11px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--hjo-bg-alt);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hjo-chase-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 7px);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.hjo-chase-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 16px 28px -10px rgba(139, 92, 246, 0.55);
}
.hjo-chase-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hjo-chase-name-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 9px 10px 10px;
  background: linear-gradient(0deg, rgba(6, 8, 18, 0.9), rgba(6, 8, 18, 0) 100%);
}
.hjo-chase-name {
  font-family: var(--hjo-font-display);
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  line-height: 1.25;
}

.hjo-chase-navbtn {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(10, 14, 31, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e9e4ff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.hjo-chase-navbtn:hover {
  background: rgba(139, 92, 246, 0.3);
  color: var(--hjo-gold);
}
.hjo-chase-navbtn--prev {
  left: 2px;
}
.hjo-chase-navbtn--next {
  right: 2px;
}
@media screen and (max-width: 749px) {
  .hjo-chase-card {
    flex-basis: 104px;
    height: 145px;
  }
  .hjo-chase-navbtn {
    display: none;
  }
}