/* ==========================================================================
   Pocketspel.se - Stylesheet
   ========================================================================== */

/* CSS Variables - Design Tokens */
:root {
  /* Colors - Brand */
  --blue: #2743ff;
  --blue-darker: #001df0;
  --blue-darkest: #0018d8;
  --blue-lighter: #566eff;
  --blue-lightest: #93a1ff;

  --negroni: #ffe1c3;
  --negroni-lighter: #fff1e1;
  --negroni-lightest: #fff9f3;
  --negroni-darker: #e1ba96;
  --negroni-darkest: #c5936b;

  /* Colors - Neutrals */
  --white: #ffffff;
  --black: #000000;
  --neutral: #666666;
  --neutral-lightest: #f9fafb;
  --neutral-lighter: #f3f4f6;
  --neutral-light: #e5e7eb;
  --neutral-dark: #4b5563;
  --neutral-darker: #374151;
  --neutral-darkest: #1f2937;

  /* Colors - System */
  --error: #e62233;
  --success: #408013;

  /* Colors - Semantic */
  --background-primary: var(--white);
  --background-secondary: var(--negroni);
  --background-alternate: var(--blue);
  --text-primary: var(--black);
  --text-secondary: var(--blue);
  --text-alternate: var(--white);

  /* Spacing */
  --extra-large: 6rem;
  --large: 4rem;
  --medium: 3rem;
  --regular: 2rem;
  --small: 1rem;
  --tiny: 0.5rem;
  --extra-tiny: 0.25rem;

  /* Border */
  --border-radius: 1px;
  --border-width: 1px;

  /* Transitions */
  --transition: 0.2s ease;

  /* Typography */
  --font-display: 'Bricolagegrotesque', 'Trebuchet MS', sans-serif;
  --font-body: 'Hankengrotesk', Verdana, sans-serif;
}

.layout-faq-question {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-faq-question:focus-visible {
  outline: 2px solid #2743ff;
  outline-offset: 2px;
}

.button-hamburger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-hamburger:focus-visible {
  outline: 2px solid #2743ff;
  outline-offset: 2px;
}

.category-filters button {
  background: none;
  border: 1px solid #e5e5e5;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #e5e7eb;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.cookie-banner:not([hidden]) {
  transform: translateY(0);
}

.cookie-banner-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.cookie-banner-content p {
  flex: 1 1 260px;
  margin: 0;
  color: #374151;
}

.cookie-banner-content a {
  color: #2743ff;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.cookie-banner-content a:hover,
.cookie-banner-content a:focus {
  border-bottom-color: #2743ff;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.button-text {
  background: transparent;
  color: #6b7280;
  border: none;
  text-decoration: underline;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.2s;
}

.button-text:hover {
  color: #374151;
  text-decoration-thickness: 2px;
}

.button-text:focus {
  outline: 2px solid #2743ff;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  
  .cookie-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .cookie-banner-actions button {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

@media print {
  .cookie-banner {
    display: none !important;
  }
}

/* ==========================================================================
   Font Faces
   ========================================================================== */

/* Bricolage Grotesque - Display Font */
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/bricolage-grotesque/BricolageGrotesque-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/bricolage-grotesque/BricolageGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk - Body Font */
@font-face {
  font-family: 'Hankengrotesk';
  src: url('../fonts/hanken-grotesk/HankenGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hankengrotesk';
  src: url('../fonts/hanken-grotesk/HankenGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hankengrotesk';
  src: url('../fonts/hanken-grotesk/HankenGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hankengrotesk';
  src: url('../fonts/hanken-grotesk/HankenGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--background-primary);
  line-height: 1.5;
  font-size: 1rem;
}

/* Prevent accidental horizontal overflow (keeps banner/footer truly full-width) */
html, body {
  width: 100%;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
}

.h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  font-weight: 800;
}

.h2 {
  font-size: 3rem;
  line-height: 1.2;
}

.h3 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.h4 {
  font-size: 2rem;
  line-height: 1.3;
}

.h5 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.h6 {
  font-size: 1.125rem;
  line-height: 1.4;
}

.paragraph {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
  max-width: 600px;
}

.paragraph-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.paragraph-product-page {
  font-size: 1.25rem;
  line-height: 1.6;
}

.paragraph-terms {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 500;
}

.text-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.text-regular {
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-medium {
  font-size: 1.125rem;
  line-height: 1.5;
}

.text-large {
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Utility Classes */
.semi-bold {
  font-weight: 600;
}

.no-bottom-margin {
  margin-bottom: 0;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.w-layout-blockcontainer {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--regular);
  padding-right: var(--regular);
}

.container-navbar {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--regular);
  padding-right: var(--regular);
}

.section {
  padding-top: var(--large);
  padding-bottom: var(--large);
}

.section.alternate {
  background-color: var(--blue);
  color: var(--white);
}

.section.hero-section {
  padding-top: var(--medium);
  padding-bottom: var(--medium);
}

.section.product-page {
  padding-top: var(--regular);
  padding-bottom: var(--large);
}

/* Layout Flex */
.layout-v-flex {
  display: flex;
  flex-direction: column;
  gap: var(--regular);
}

.layout-v-flex-faq {
  display: flex;
  flex-direction: column;
  gap: var(--regular);
  align-items: start;
}

.layout-h-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--small);
}

.w-layout-vflex {
  display: flex;
  flex-direction: column;
}

/* Layout Grid */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medium);
}

.collection-grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--regular);
}

.layout-grid.benefits-section {
  grid-template-columns: repeat(3, 1fr);
}

.layout-grid.testimonials-section {
  grid-template-columns: repeat(3, 1fr);
}

.layout-grid.faq-section {
  align-items: start;
}

.layout-grid.faq-questions {
  grid-template-columns: 1fr;
  gap: 0;
}

.layout-grid.footer-section {
  grid-template-columns: 0.5fr 0.5fr;
  gap: var(--large);
}

.layout-grid.product-page {
  grid-template-columns: 1fr 1fr;
  gap: var(--large);
  align-items: start;
}

/* ==========================================================================
   Banner
   ========================================================================== */

.banner {
  background: var(--blue);
  color: var(--white);
  padding: var(--tiny) 0;
  text-align: center;
}

.layout-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.layout-banner-content {
  text-align: center;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
}

.container-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--small);
  padding-bottom: var(--small);
}

.button-link-logo {
  display: block;
}

.image-logo {
  width: 14rem;
}

.layout-navbar {
  display: flex;
  align-items: center;
  gap: var(--medium);
}

.logged-out-nav,
.logged-in-nav {
  display: flex;
  align-items: center;
  gap: var(--medium);
}

.logged-in-nav {
  display: none;
}

.navbar-content {
  display: flex;
  gap: var(--regular);
}

.layout-navbar-buttons {
  display: flex;
  gap: var(--small);
}

.button-hamburger {
  display: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button-primary,
.button-secondary {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  border: var(--border-width) solid transparent;
  text-decoration: none;
}

.button-primary {
  background-color: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.button-primary:hover {
  background-color: var(--blue-darker);
  border-color: var(--blue-darker);
}

.button-secondary {
  background-color: transparent;
  color: var(--blue);
  border-color: var(--blue);
}

.button-secondary:hover {
  border-color: var(--black);
  color: var(--black);
}

.button-secondary-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--blue);
  border: var(--border-width) solid var(--blue);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  justify-content: center;
}

.button-secondary-icon:hover {
  border-color: var(--black);
  color: var(--black);
}

.button-link {
  color: var(--text-primary);
  font-weight: 500;
  transition: color var(--transition);
}

.button-link:hover {
  color: var(--blue);
}

.stretched {
  width: 100%;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
  text-align: center;
}

.layout-v-flex.hero-section {
  align-items: center;
  gap: var(--medium);
}

.layout-v-flex.hero-content {
  max-width: 800px;
  text-align: center;
  gap: var(--regular);
  display: flex;
  align-items: center;
  flex-direction: column;
}

.h1.hero-header {
  margin-bottom: var(--small);
}

.paragraph.hero {
  font-size: 1.25rem;
}

.layout-h-flex.hero-tags {
  display: flex;
  justify-content: center;
  gap: var(--tiny);
}

.hide-mobile {
  display: block;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.layout-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--negroni);
  font-size: large;
  white-space: nowrap;
  color: var(--blue);
  font-weight: 500;
}

.layout-tag.white {
  background-color: var(--white);
}

.layout-tag.white.hero-section {
  border: none;
  color: var(--blue);
  border-radius: 100px;
}

.layout-tag.product-badge {
  background-color: var(--blue);
  color: var(--white);
  padding: var(--extra-tiny) var(--tiny);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.layout-tag.product-badge.second {
  background-color: var(--error);
}

.layout-tags__product-card {
  position: absolute;
  top: var(--tiny);
  left: var(--tiny);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--extra-tiny);
}

.layout-tags__product-page {
  position: absolute;
  top: var(--small);
  left: var(--small);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--extra-tiny);
}

.collection-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tiny);
}

/* ==========================================================================
   Product Cards
   ========================================================================== */

.layout-v-flex.product-card {
  overflow: hidden;
  transition: all var(--transition);
  gap: 0;
  display: flex;
  justify-content: space-between;
}

.layout-product-image {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-product-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition);
}

.layout-h-flex.product-card-header {
  padding-top: 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tiny);
}

.layout-h-flex.product-card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--extra-tiny);
}

.layout-h-flex.regular-price-product-card {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  color: var(--blue);
  font-weight: 600;
}

.layout-v-flex.product-card-price-campaign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--extra-tiny);
}

.layout-h-flex.discounted-price-product-card {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  color: var(--error);
}

.layout-h-flex.compare-price-product-card {
  display: flex;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--neutral);
  text-decoration: line-through;
}

.layout-h-flex.product-card-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tiny);
  padding-top: 1rem;
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--tiny);
  font-size: 1rem;
}

.button-link-breadcrumb {
  color: var(--blue);
}

.breadcrumb-child {
  display: flex;
  align-items: center;
  gap: var(--extra-tiny);
  color: var(--neutral);
}

.layout-v-flex.product-page-images {
  gap: var(--small);
}

.layout-product-image-main {
  position: relative;
  overflow: hidden;
}

.image-product-page-main {
  width: 100%;
  height: auto;
  display: block;
}

.product-image-title {
  color: var(--white);
  margin-bottom: var(--tiny);
}

.product-image-description {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.collection-list-product-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tiny);
}

.collection-list-product-images img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: opacity var(--transition);
}

.collection-list-product-images img:hover {
  opacity: 0.8;
}

.image-product-page {
  width: 100%;
  cursor: pointer;
  transition: opacity var(--transition);
}

.image-product-page:hover {
  opacity: 0.9;
}

.layout-v-flex.product-page-hero {
  gap: var(--regular);
}

.layout-v-flex.product-page-header {
  gap: var(--small);
}

.h2.price-style-product-page {
  margin: 0;
}

.layout-h-flex.regular-price-product-page {
  gap: 0.25rem;
  align-items: baseline;
  color: var(--blue);
}

.layout-v-flex.product-page__buttons-paymentmethods {
  gap: var(--small);
}

.layout-v-flex.tags {
  gap: var(--tiny);
}

.layout-v-flex.product-page-game-details {
  gap: var(--small);
}

.w-richtext {
  line-height: 1.6;
}

.w-richtext p {
  margin-bottom: var(--small);
}

.w-richtext ul {
  margin-left: var(--regular);
  margin-bottom: var(--small);
}

.w-richtext li {
  margin-bottom: var(--tiny);
}

.w-richtext strong {
  font-weight: 600;
}

.w-richtext em {
  font-style: italic;
}

.layout-h-flex.product-page-intro-details {
  justify-content: space-between;
  padding: var(--tiny) 0;
  border-bottom: var(--border-width) solid var(--neutral-light);
}

.layout-h-flex.product-page-intro-details:last-child {
  border-bottom: none;
}

/* ==========================================================================
   Payment Methods
   ========================================================================== */

.layout-h-flex.payment-methods {
  display: flex;
  gap: var(--small);
  flex-wrap: wrap;
}

.image-payment-method {
  height: 42px;
  width: auto;
  gap: var(--regular);
}

.image-payment-method:hover {
  opacity: 1;
}

/* ==========================================================================
   Image Carousel
   ========================================================================== */

.section.carousel {
  overflow: hidden;
  padding: 0;
}

.carousel-loop {
  display: flex;
  gap: var(--small);
}

.carousel-content-slow {
  display: flex;
  gap: var(--small);
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.button-link-image-card {
  position: relative;
  display: block;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
}

.layout-v-flex.image-card__button-header {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--regular);
  color: var(--white);
  z-index: 2;
  gap: var(--tiny);
}

/* ==========================================================================
   Musikquiz Banner Section
   ========================================================================== */

.musikquiz-banner-section {
  margin-left: calc(-2 * var(--small)); 
  margin-right: calc(-2 * var(--small));
  padding: var(--medium) var(--small);
}

.musikquiz-banner {
  position: relative;
  background: linear-gradient(135deg,
    #FFE5D9 0%,
    #FFD5E5 25%,
    #E5D4FF 60%,
    #C4D4FF 100%
  );
  padding: var(--large);
  overflow: visible;
  min-height: 500px;
}

.musikquiz-content {
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.musikquiz-heading {
  margin-bottom: var(--small);
  font-weight: 700;
  line-height: 1.2;
}

.musikquiz-features {
  display: flex;
  flex-direction: column;
  gap: var(--small);
  margin-bottom: var(--medium);
}

.musikquiz-feature-item {
  display: flex;
  align-items: center;
  gap: var(--small);
}

.icon-user-blue {
  width: 36px;
  height: 36px;
  color: var(--blue);
}

.musikquiz-feature-item p {
  margin: 0;
  padding-top: 8px;
}

.musikquiz-button {
  display: inline-block;
  margin-top: var(--small);
}

.musikquiz-image-absolute {
  position: absolute;
  top: 5%;
  right: 0;
  bottom: 0;
  left: 45%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.musikquiz-phone-mockup {
  width: 100%;
  max-width: 485px;
  height: auto;
  display: block;
  object-fit: contain;
}

.image-get-started {
  max-width: 400px;
  width: 100%;
  height: auto;
}

.layout-v-flex.get-started-content {
  gap: var(--regular);
}

.layout-v-flex.get-started-steps {
  gap: var(--regular);
}

.layout-h-flex.get-started-step {
  align-items: center;
  gap: var(--small);
}

.icon-get-started {
  color: var(--blue);
}

.layout-h-flex.get-started-buttons {
  gap: var(--small);
  margin-top: var(--small);
}

.get-started-step .paragraph {
  margin-bottom: 0;
}

/* ==========================================================================
   Benefits Section
   ========================================================================== */

.benefit-card {
  gap: var(--small);
  color: var(--white);
}

.benefit-card_header {
  gap: var(--small);
}

.layout-icon {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-shrink: 0;
}

.icon-globe-alternate,
.icon-play-alternate,
.icon-smile-alternate {
  width: 24px;
  height: 24px;
  color: var(--blue);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials-header {
  gap: var(--small);
  margin-bottom: var(--regular);
  max-width: 800px;
}

.slider {
  position: relative;
}

.mask-slider {
  overflow: hidden;
}

.testimonial-card {
  background: var(--white);
  padding: var(--regular);
  border: var(--border-width) solid var(--black);
  gap: var(--regular);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.layout-h-flex.testimonial-rating {
  gap: var(--extra-tiny);
}

.icon-star {
  width: 20px;
  height: 20px;
  color: var(--blue);
}

.layout-v-flex.testimonial-card-user {
  gap: var(--extra-tiny);
  margin-top: var(--tiny);
}

.testimonial-card .paragraph {
  margin-bottom: 0;
  line-height: 1.6;
}

.left-arrow,
.right-arrow {
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.left-arrow {
  left: -24px;
}

.right-arrow {
  right: -24px;
}

.left-arrow:hover,
.right-arrow:hover {
  background: var(--blue);
  color: var(--white);
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.layout-faq-card {
  border: var(--border-width) solid var(--black);
  margin-bottom: var(--small);
}

.layout-faq-card:last-child {
  margin-bottom: 0;
}

.layout-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: var(--regular);
  transition: color var(--transition);
}

.layout-faq-question:hover {
  color: var(--blue);
}

.layout-faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.layout-faq-question.open .layout-faq-icon {
  transform: rotate(45deg);
}

.layout-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.layout-faq-answer.open {
  max-height: 1000px;
}

.layout-faq-answer-child {
  padding: 0 var(--regular) var(--regular);
}

.layout-faq-answer-child p {
  line-height: 1.6;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer.section.alternate {
  background-color: var(--blue);
  color: var(--white);
}

.footer-columna-left {
  gap: var(--small);
}

.footer-column {
  gap: var(--tiny);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.button-link-footer {
  color: var(--white);
  transition: opacity var(--transition);
  font-size: 0.875rem;
}

.button-link-footer:hover {
  font-weight: 600;
}

.layout-h-flex.footer-logo {
  justify-content: space-between;
  align-items: center;
  margin-top: var(--regular);
}

.layout-h-flex.footer-social {
  gap: var(--tiny);
}

.button-link-social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: opacity var(--transition);
}

.button-link-social:hover {
  opacity: 0.7;
}

.icon-social {
  width: 20px;
  height: 20px;
  color: var(--white);
}

.divider {
  height: var(--border-width);
  background-color: var(--neutral-light);
}

.layout-h-flex.footer-copyright-legal {
  justify-content: space-between;
  font-size: 0.875rem;
}

.layout-h-flex.footer-legal {
  gap: var(--regular);
}

/* ==========================================================================
   Icons
   ========================================================================== */

.icon-embed-xxsmall,
.icon-embed-xxsmall-3 {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.icon-chevron-right {
  width: 16px;
  height: 16px;
}

.icon-plus {
  width: 24px;
  height: 24px;
}

.icon-tag {
  width: 14px;
  height: 14px;
}

.icon-play-blue.product-page {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.w-condition-invisible {
  display: none !important;
}

.stretched-mobile-only {
  width: auto;
}

/* ==========================================================================
   Carousel Section
   ========================================================================== */

.carousel-section {
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
}

.carousel-container {
  width: 100%;
  overflow: visible;
}

.carousel-track {
  display: flex;
  gap: var(--tiny);
  animation: carousel-scroll 60s linear infinite;
  width: max-content;
}

.carousel-track:hover {
  animation-play-state: paused;
}

@keyframes carousel-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 2));
  }
}

.carousel-card {
  position: relative;
  min-width: 350px;
  max-width: 350px;
  height: 500px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.carousel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.carousel-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.carousel-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--small);
  color: var(--white);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--tiny);
}

.carousel-card-content .h5 {
  color: var(--white);
  margin: 0;
}

.carousel-card-content .paragraph-small {
  color: var(--white);
  opacity: 0.95;
  margin: 0;
  line-height: 1.4;
}

.carousel-card-cta {
  display: flex;
  align-items: center;
  gap: var(--tiny);
  color: var(--white);
  font-weight: 600;
  transition: gap var(--transition);
}

.carousel-card:hover .carousel-card-cta {
  gap: var(--small);
}

.carousel-card-cta svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   Category Filter Buttons
   ============================================ */

.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 var(--regular) 0;
}

.category-filters .button-secondary {
  margin: 0;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.category-filters .button-secondary:hover {
  opacity: 1;
}

.category-filters .button-secondary.active {
  opacity: 1;
  background-color: #2743ff;
  color: #ffffff;
  border-color: #2743ff;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .category-filters {
    gap: 8px;
  }
  
  .category-filters .button-secondary {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* ==========================================================================
   Responsive - Tablet (991px and below)
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --extra-large: 4rem;
    --large: 3rem;
    --medium: 2rem;
    --regular: 1.5rem;
  }

  .h1 {
    font-size: 2.5rem;
  }

  .h2 {
    font-size: 2rem;
  }

  .h3 {
    font-size: 1.75rem;
  }

  .h4 {
    font-size: 1.5rem;
  }

  .h5 {
    font-size: 1.25rem;
  }

  .collection-grid-products {
    grid-template-columns: repeat(2, 1fr);
  }

  .layout-grid {
    grid-template-columns: 1fr;
  }

  .layout-grid.benefits-section,
  .layout-grid.testimonials-section,
  .layout-grid.footer-link-columns,
  .layout-grid.get-started-section {
    grid-template-columns: 1fr;
  }

  .layout-v-flex.get-started-image {
    order: 2;
  }

  .layout-v-flex.get-started-content {
    order: 1;
  }

  .layout-grid.footer-section {
    grid-template-columns: 1fr;
  }

  .layout-grid.product-page {
    grid-template-columns: 1fr;
  }

  .button-hamburger {
    display: block;
  }

  .layout-navbar {
    display: none;
  }

  .carousel-card {
    min-width: 350px;
    height: 450px;
  }

  /* Musikquiz responsive */
  .musikquiz-banner {
    padding: var(--medium);
    min-height: auto;
    text-align: center;
    overflow: hidden;
  }

  .musikquiz-content {
    max-width: 100%;
  }

  .musikquiz-heading {
    font-size: 2rem;
  }

  .musikquiz-features {
    align-items: center;
  }

  .musikquiz-feature-item {
    justify-content: center;
    text-align: left;
    max-width: 400px;
  }

  .musikquiz-button {
    width: 100%;
    max-width: 300px;
  }

  .musikquiz-image-absolute {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: var(--medium);
  }
}

/* Product Page: Tablet adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .layout-grid.product-page {
    grid-template-columns: 1fr 1fr; 
    gap: var(--regular);
  }
  
  /* Constrain the image container height */
  .layout-v-flex.product-page-images {
    max-height: 85vh; 
  }
  
  .layout-product-image {
    max-height: 70vh; 
  }
  
  .image-product-page {
    max-height: 70vh;
    width: 100%;
    object-fit: cover; 
  }
  
  .collection-list-product-images {
    max-height: 15vh;
    overflow-x: auto;
  }
  
  .collection-list-product-images img {
    max-height: 12vh;
  }
}

/* ==========================================================================
   Responsive - Mobile (767px and below)
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --extra-large: 3rem;
    --large: 2rem;
    --medium: 1.5rem;
    --regular: 1rem;
    --small: 0.75rem;
  }

  .container {
    padding-left: var(--small);
    padding-right: var(--small);
  }

  

/* Navbar: tighter padding + smaller logo on phones */
.container-navbar {
  padding-left: var(--small);
  padding-right: var(--small);
}
.image-logo {
  width: 11rem;
}
.h1 {
    font-size: 2rem;
  }

  .h2 {
    font-size: 1.75rem;
  }

  .h3 {
    font-size: 1.5rem;
  }

  .paragraph.hero {
    font-size: 1rem;
  }

  .collection-grid-products {
    grid-template-columns: repeat(2, 1fr);
  }

  .layout-h-flex.hero-tags {
    flex-direction: column;
    align-items: center;
  }

  .layout-h-flex.product-card-buttons {
    grid-template-columns: 1fr;
  }

  .layout-h-flex.product-page-buttons {
    flex-direction: column;
    width: 100%;
    gap: var(--tiny);
  }

  .layout-h-flex.footer-copyright-legal {
    flex-direction: column;
    gap: var(--small);
    text-align: center;
  }

  .layout-h-flex.get-started-buttons {
    flex-direction: column;
  }

  .layout-h-flex.get-started-buttons .button-secondary,
  .layout-h-flex.get-started-buttons .button-primary {
    width: 100%;
  }

  .layout-h-flex.footer-logo {
    flex-direction: column;
    gap: var(--regular);
  }

  .stretched-mobile-only {
    width: 100%;
  }

  .footer-column {
    gap: var(--tiny);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .carousel-card {
    min-width: 300px;
    height: 400px;
  }

  /* Musikquiz responsive */
  .musikquiz-heading {
    font-size: 1.75rem;
  }

  .paragraph-product-page {
    display: none;
  }
  
.section.product-page .product-page-images {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--extra-tiny);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--extra-tiny);
    overscroll-behavior-x: contain;

    /* Hide scrollbar where possible */
    scrollbar-width: none;

  margin-left: calc(-1 * var(--small));
  margin-right: calc(-1 * var(--small));
  padding-left: var(--extra-tiny);
  padding-right: var(--small);
}
  .section.product-page .product-page-images::-webkit-scrollbar { display: none; }

.section.product-page .product-page-images > .layout-product-image,
.section.product-page .product-page-images > .collection-list-product-images img {
  flex: 0 0 86%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section.product-page .product-page-images > .layout-product-image {
  aspect-ratio: auto;
  height: auto;
  display: block; /* override .layout-product-image flex-centering */
}

.section.product-page .product-page-images > .layout-product-image > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.section.product-page .product-page-images > .collection-list-product-images {
  display: contents;
}

.section.product-page .product-page-images > .collection-list-product-images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

  .section.product-page .product-page-images > .collection-list-product-images {
    display: contents;
  }

  .section.product-page .product-page-images > .collection-list-product-images img {
    width: 100%;
    height: auto;
    object-fit: contain; /* full image, no crop */
    display: block;
  }
}

/* ==========================================================================
   Responsive - Small Mobile (479px and below)
   ========================================================================== */

@media (max-width: 479px) {

/* Banner + navbar: keep everything readable on very small screens */
.banner { padding: var(--tiny) 0; }
.layout-banner { height: auto; padding: 0 var(--small); }
.layout-banner-content { max-width: 100%; }

.image-logo { width: 10rem; }

  .h1 {
    font-size: 2.5rem;
  }

  .h2 {
    font-size: 2rem;
  }

  .button-primary,
  .button-secondary,
  .button-secondary-icon {
    padding: 10px 20px;
    font-size: 1rem;
  }

/* Product page: prevent overflow on small screens */
  .product-page-header,
  .product-page-hero,
  .product-page__buttons-paymentmethods {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  
  .layout-tag.white {
    font-size: 0.95rem;
    padding: 6px 10px;
  }
  
  .layout-v-flex.tags {
    gap: 6px;
  }
}

/* ==========================================================================
   Hamburger Menu Icon
   ========================================================================== */

.menu-icon {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon_line-top,
.menu-icon_line-middle,
.menu-icon_line-bottom {
  width: 100%;
  height: 2px;
  background-color: var(--neutral-darkest);
  transition: all 0.3s ease;
}

.menu-icon_line-middle-inner {
  width: 100%;
  height: 100%;
  background-color: var(--neutral-darkest);
}

.layout-navbar.open {
  display: flex !important;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--white);
  flex-direction: column;
  padding: var(--medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.layout-navbar.open .logged-out-nav,
.layout-navbar.open .logged-in-nav {
  flex-direction: column;
  width: 100%;
}

.layout-navbar.open .layout-h-flex.navbar-content,
.layout-navbar.open .layout-navbar-buttons {
  flex-direction: column;
  width: 100%;
  gap: var(--small);
}

.layout-navbar.open .button-link,
.layout-navbar.open .button-primary,
.layout-navbar.open .button-secondary {
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   Lightbox for Product Images
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  /* Keep controls inside viewport on resize + safe areas */
  box-sizing: border-box;
  padding: clamp(12px, 2vw, 24px);
  padding-top: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom));
  /* Use visibility/pointer-events for smooth fade */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  /* Responsive by default using viewport height */
  width: min(100%, 1100px);
  height: min(100%, 80vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: calc(env(safe-area-inset-right) + 12px);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--white);
  font-size: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10001;
  line-height: 1;
  padding: 0;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0);
  border: none;
  color: var(--white);
  font-size: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10001;
  line-height: 1;
  padding: 0;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox-prev {
  left: calc(env(safe-area-inset-left) + 12px);
}

.lightbox-next {
  right: calc(env(safe-area-inset-right) + 12px);
}

.lightbox-counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 18px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 10001;
}

/* Lightbox: Mobile adjustments */
@media (max-width: 767px) {
  .lightbox-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 30px;
  }
  
  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
  
  .lightbox-prev {
    left: 10px;
  }
  
  .lightbox-next {
    right: 10px;
  }
  
  .lightbox-counter {
    bottom: 20px;
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* Lightbox: Tablet/iPad adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .lightbox-content {
    width: min(100%, 90%);
    height: 70vh;
    max-height: 70vh;
  }
  
  .lightbox-image {
    max-height: 70vh;
  }
  
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 45px;
    height: 45px;
    font-size: 35px;
  }
  
  .lightbox-nav {
    width: 55px;
    height: 55px;
    font-size: 50px;
  }
  
  .lightbox-counter {
    bottom: 24px;
    font-size: 16px;
  }
}

/* Lightbox: Small tablets in portrait mode (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) and (orientation: portrait) {
  .lightbox-content {
    height: 60vh;
    max-height: 60vh;
  }
  
  .lightbox-image {
    max-height: 60vh;
  }
}

/* Lightbox: Large desktop - use fixed height when plenty of space */
@media (min-width: 1025px) {
  .lightbox-content {
    height: min(100%, 800px);
  }
}

/* Text link styling */
.text-link-arrow {
  display: none;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #2743ff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.text-link-arrow:hover {
  opacity: 0.8;
}

.text-link-arrow svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Mobile: hide button, show text link */
@media (max-width: 767px) {
  .product-header .button-secondary {
    display: none;
  }
  
  .product-header .text-link-arrow {
    display: inline-flex;
  }
}

/* Desktop: show button, hide text link (default) */
@media (min-width: 768px) {
  .text-link-arrow {
    display: none;
  }
}