/** Shopify CDN: Minification failed

Line 896:20 Unexpected "{"
Line 896:38 Expected ":"
Line 896:42 Unexpected "{"

**/
/* ==========================================================================
   JUNGCARDS – Custom CSS für Shopify Dawn 2.0
   --------------------------------------------------------------------------
   Aufbau:
   1. Google Fonts Import (Rajdhani + Inter)
   2. CSS Custom Properties (Brand Tokens)
   3. Dawn-Variable-Overrides (kompatibel mit Dawn-Theme)
   4. Globale Resets & Typografie
   5. Header / Navigation
   6. Announcement Bar
   7. Buttons & CTAs (Gold)
   8. Produktkarten
   9. Badges (NEU, SALE, OCG, LIMITED, PRE-ORDER)
   10. USP-Leiste
   11. Footer
   12. Forms & Newsletter
   13. Skeleton-Loader
   14. Hover/Focus-States & Accessibility
   15. Responsive (Mobile-First)
   ========================================================================== */


/* ==========================================================================
   1. Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');


/* ==========================================================================
   2. CSS Custom Properties – Brand Tokens
   ========================================================================== */
:root {
  /* --- Brand Colors --- */
  --jc-color-anthracite:       #293133; /* RAL 7016 – primärer Dark Surface */
  --jc-color-anthracite-soft:  #35404A; /* Hover / leicht heller */
  --jc-color-border-dark:      #3D4548;
  --jc-color-gold:             #C8A96E; /* Akzent / CTA */
  --jc-color-gold-hover:       #B8975C;
  --jc-color-gold-soft:        #E0C896;
  --jc-color-warmwhite:        #F5F5F0;
  --jc-color-text-on-dark:     #FFFFFF;
  --jc-color-text-on-dark-muted: #C8C8C8;  /* was #E8E8E8 — improved contrast on dark surfaces */
  --jc-color-text-on-light:    #1A1A1A;
  --jc-color-text-on-light-muted: #6B6B6B; /* 5.7:1 on #F5F5F0 — WCAG AA compliant */
  --jc-color-error:            #C0392B;
  --jc-color-success:          #27AE60;

  /* --- Typografie --- */
  --jc-font-display: 'Rajdhani', 'Helvetica Neue', Arial, sans-serif;
  --jc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* --- Spacing / Radius --- */
  --jc-radius-sm: 3px;
  --jc-radius-md: 6px;
  --jc-radius-lg: 8px; /* Maximum laut Vorgabe */

  /* --- Shadows --- */
  --jc-shadow-card:   0 2px 8px rgba(0, 0, 0, 0.18);
  --jc-shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.28);
  --jc-shadow-gold:   0 4px 16px rgba(200, 169, 110, 0.25);

  /* --- Transitions --- */
  --jc-transition-fast: 150ms ease;
  --jc-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   3. Dawn-Variable-Overrides
   --------------------------------------------------------------------------
   Dawn nutzt eigene CSS-Variablen pro Color-Scheme. Wir setzen diese hier
   im Sinne unserer Brand-Palette, ohne base.css zu überschreiben.
   ========================================================================== */
.color-scheme-1,
.color-background-1 {
  --color-background: 41, 49, 51;            /* Anthrazit */
  --color-foreground: 255, 255, 255;
  --color-button:     200, 169, 110;         /* Gold */
  --color-button-text: 41, 49, 51;
  --color-secondary-button: 41, 49, 51;
  --color-secondary-button-text: 200, 169, 110;
  --color-link:       200, 169, 110;
  --color-badge-foreground: 200, 169, 110;
  --color-badge-background: 41, 49, 51;
  --color-badge-border: 200, 169, 110;
}

.color-scheme-2,
.color-background-2 {
  --color-background: 245, 245, 240;         /* Warmweiss */
  --color-foreground: 26, 26, 26;
  --color-button:     41, 49, 51;            /* Anthrazit-Button auf hell */
  --color-button-text: 200, 169, 110;
  --color-link: 41, 49, 51;
}

.color-accent-1 {
  --color-background: 200, 169, 110;
  --color-foreground: 41, 49, 51;
}


/* ==========================================================================
   4. Globale Resets & Typografie
   ========================================================================== */
body {
  font-family: var(--jc-font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--jc-color-anthracite);
  color: var(--jc-color-text-on-dark);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jc-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

h1, .h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); }
h2, .h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, 3rem); }
h3, .h3 { font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem); }

p, li, span, label {
  font-family: var(--jc-font-body);
  line-height: 1.6;
}

a {
  color: var(--jc-color-gold);
  text-decoration: none;
  transition: color var(--jc-transition-fast);
}

a:hover {
  color: var(--jc-color-gold-soft);
}


/* ==========================================================================
   5. Header / Navigation
   ========================================================================== */
.header-wrapper {
  background-color: var(--jc-color-anthracite);
  border-bottom: 1px solid var(--jc-color-border-dark);
}

.header {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header__heading-link,
.header__heading-logo {
  color: var(--jc-color-gold);
}

.header__menu-item,
.header__menu-item span {
  font-family: var(--jc-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jc-color-text-on-dark);
  transition: color var(--jc-transition-fast);
}

.header__menu-item:hover,
.header__menu-item:hover span {
  color: var(--jc-color-gold);
}

/* Aktive Mega-Menu / Dropdown Hintergrund */
.header__submenu,
.mega-menu__content {
  background-color: var(--jc-color-anthracite-soft);
  border: 1px solid var(--jc-color-border-dark);
  border-radius: var(--jc-radius-md);
}

.header__submenu .header__menu-item:hover {
  background-color: rgba(200, 169, 110, 0.08);
  color: var(--jc-color-gold);
}

/* Icons Header (Suche, Konto, Cart) */
.header__icon,
.header__icon .icon,
.header__icon--cart .icon {
  color: var(--jc-color-text-on-dark);
  transition: color var(--jc-transition-fast);
}

.header__icon:hover,
.header__icon:hover .icon {
  color: var(--jc-color-gold);
}

/* Cart Bubble */
.cart-count-bubble {
  background-color: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
  font-family: var(--jc-font-display);
  font-weight: 700;
  border-radius: var(--jc-radius-sm);
}


/* ==========================================================================
   6. Announcement Bar
   ========================================================================== */
.announcement-bar {
  background-color: #1F2628;
  color: var(--jc-color-text-on-dark-muted);
  font-family: var(--jc-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--jc-color-border-dark);
}

.announcement-bar__message {
  text-align: center;
  margin: 0;
}

/* Custom: Rotierende Announcements */
.jc-announcement-rotator {
  position: relative;
  height: 1.4em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jc-announcement-rotator__item {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: jcAnnouncementCycle 12s linear infinite;
}

.jc-announcement-rotator__item:nth-child(1) { animation-delay: 0s; }
.jc-announcement-rotator__item:nth-child(2) { animation-delay: 4s; }
.jc-announcement-rotator__item:nth-child(3) { animation-delay: 8s; }

@keyframes jcAnnouncementCycle {
  0%, 30%   { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-100%); }
}


/* ==========================================================================
   7. Buttons & CTAs
   ========================================================================== */
.button,
button.button,
.shopify-payment-button__button--unbranded {
  font-family: var(--jc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--jc-radius-md) !important;
  padding: 0.95rem 1.75rem !important;
  transition: all var(--jc-transition-base) !important;
  position: relative;
  overflow: hidden;
}

/* Primärer Gold-Button */
.button--primary,
button[type="submit"].button:not(.button--secondary) {
  background-color: var(--jc-color-gold) !important;
  color: var(--jc-color-anthracite) !important;
  border: 2px solid var(--jc-color-gold) !important;
  box-shadow: var(--jc-shadow-gold);
}

.button--primary:hover,
button[type="submit"].button:not(.button--secondary):hover {
  background-color: var(--jc-color-gold-hover) !important;
  border-color: var(--jc-color-gold-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 169, 110, 0.4);
}

/* Sekundärer Outline-Button */
.button--secondary {
  background-color: transparent !important;
  color: var(--jc-color-gold) !important;
  border: 2px solid var(--jc-color-gold) !important;
}

.button--secondary:hover {
  background-color: var(--jc-color-gold) !important;
  color: var(--jc-color-anthracite) !important;
}

/* Tertiärer Text-Button */
.button--tertiary {
  background: none !important;
  color: var(--jc-color-gold) !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid var(--jc-color-gold) !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   8. Produktkarten
   ========================================================================== */
.card-wrapper,
.product-card-wrapper {
  background-color: var(--jc-color-anthracite-soft);
  border: 1px solid var(--jc-color-border-dark);
  border-radius: var(--jc-radius-md);
  overflow: hidden;
  transition: all var(--jc-transition-base);
}

.card-wrapper:hover,
.product-card-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: var(--jc-shadow-hover);
  border-color: var(--jc-color-gold);
}

.card__media {
  background-color: var(--jc-color-warmwhite);
  position: relative;
  overflow: hidden;
}

.card__media img {
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-wrapper:hover .card__media img {
  transform: scale(1.05);
}

.card__content,
.card__information {
  padding: 1rem 1.1rem 1.2rem;
  background-color: var(--jc-color-anthracite-soft);
}

.card__heading,
.card__heading a {
  font-family: var(--jc-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--jc-color-text-on-dark);
  text-transform: none;
}

.card__heading a:hover {
  color: var(--jc-color-gold);
}

/* Preise */
.price {
  font-family: var(--jc-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.price__regular .price-item--regular,
.price__sale .price-item--sale {
  color: var(--jc-color-gold);
  font-size: 1.1rem;
}

.price__sale .price-item--regular {
  color: var(--jc-color-text-on-dark-muted);
  text-decoration: line-through;
  font-size: 0.95rem;
  margin-right: 0.5rem;
}
.price-item--last {
  color: var(--jc-color-text-on-dark-muted);
  font-size: 0.95rem;
  margin-right: 0.5rem;
  text-decoration: none;
}


/* Vendor */
.card__information .caption-with-letter-spacing {
  color: var(--jc-color-text-on-dark-muted);
  font-family: var(--jc-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ==========================================================================
   9. Badges (NEU, SALE, OCG, LIMITED, PRE-ORDER)
   ========================================================================== */
.jc-badge-stack {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  z-index: 2;
}

.jc-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--jc-radius-sm);
  line-height: 1;
  border: 1px solid transparent;
}

.jc-badge--new {
  background-color: var(--jc-color-success);
  color: #FFFFFF;
}

.jc-badge--sale {
  background-color: var(--jc-color-error);
  color: #FFFFFF;
}

.jc-badge--ocg {
  background-color: var(--jc-color-anthracite);
  color: var(--jc-color-gold);
  border-color: var(--jc-color-gold);
}

.jc-badge--limited {
  background-color: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
}

.jc-badge--preorder {
  background-color: #1F2628;
  color: var(--jc-color-gold-soft);
  border-color: var(--jc-color-gold-soft);
}

.jc-badge--soldout {
  background-color: #4A4A4A;
  color: #FFFFFF;
}


/* ==========================================================================
   10. USP-Leiste
   ========================================================================== */
.jc-usp {
  background-color: var(--jc-color-anthracite-soft);
  border-top: 1px solid var(--jc-color-border-dark);
  border-bottom: 1px solid var(--jc-color-border-dark);
  padding: 2.5rem 1rem;
}

.jc-usp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

.jc-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.jc-usp__icon {
  width: 44px;
  height: 44px;
  color: var(--jc-color-gold);
  stroke-width: 1.5;
}

.jc-usp__title {
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jc-color-text-on-dark);
  margin: 0;
}

.jc-usp__text {
  font-family: var(--jc-font-body);
  font-size: 0.85rem;
  color: var(--jc-color-text-on-dark-muted);
  margin: 0;
  max-width: 28ch;
}


/* ==========================================================================
   11. Footer
   ========================================================================== */
.footer {
  background-color: #1F2628;
  color: var(--jc-color-text-on-dark-muted);
  border-top: 2px solid var(--jc-color-gold);
  padding-top: 3rem;
}

.footer__content-top {
  border-bottom: 1px solid var(--jc-color-border-dark);
  padding-bottom: 2rem;
}

.footer-block__heading {
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jc-color-gold);
  margin-bottom: 1rem;
}

.footer-block__details-content a,
.footer-block-image a,
.footer__list-social a {
  color: var(--jc-color-text-on-dark-muted);
  font-family: var(--jc-font-body);
  font-size: 0.9rem;
  transition: color var(--jc-transition-fast);
}

.footer-block__details-content a:hover,
.footer__list-social a:hover {
  color: var(--jc-color-gold);
}

.footer__list-social .icon {
  width: 22px;
  height: 22px;
}

.footer__copyright {
  font-family: var(--jc-font-body);
  font-size: 0.8rem;
  color: #8A9295;
  text-align: center;
  padding: 1.5rem 0;
}

.footer__payment .icon {
  filter: grayscale(100%) brightness(1.5);
  opacity: 0.7;
}


/* ==========================================================================
   12. Forms & Newsletter
   ========================================================================== */
.field__input,
.select__select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  background-color: var(--jc-color-anthracite-soft) !important;
  color: var(--jc-color-text-on-dark) !important;
  border: 1px solid var(--jc-color-border-dark) !important;
  border-radius: var(--jc-radius-md) !important;
  font-family: var(--jc-font-body) !important;
  padding: 0.85rem 1rem !important;
  transition: border-color var(--jc-transition-fast);
}

.field__input:focus,
input:focus,
textarea:focus {
  border-color: var(--jc-color-gold) !important;
  outline: 2px solid rgba(200, 169, 110, 0.3) !important;
  outline-offset: 1px;
}

.field__label {
  color: var(--jc-color-text-on-dark-muted) !important;
  font-family: var(--jc-font-body) !important;
}

/* Newsletter-Section */
.newsletter-form__field-wrapper {
  max-width: 460px;
  margin: 0 auto;
}

.newsletter-form__button {
  background-color: var(--jc-color-gold) !important;
  color: var(--jc-color-anthracite) !important;
}

.newsletter-form__button:hover {
  background-color: var(--jc-color-gold-hover) !important;
}


/* ==========================================================================
   13. Skeleton-Loader
   ========================================================================== */
.jc-skeleton,
.card__media.loading::before {
  background: linear-gradient(
    90deg,
    var(--jc-color-anthracite-soft) 0%,
    var(--jc-color-border-dark) 50%,
    var(--jc-color-anthracite-soft) 100%
  );
  background-size: 200% 100%;
  animation: jcSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--jc-radius-md);
}

@keyframes jcSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ==========================================================================
   14. Hover/Focus-States & Accessibility
   ========================================================================== */
*:focus-visible {
  outline: 2px solid var(--jc-color-gold);
  outline-offset: 2px;
  border-radius: var(--jc-radius-sm);
}

::selection {
  background-color: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   15. Hero Banner Anpassungen
   ========================================================================== */
.banner__heading {
  font-family: var(--jc-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.banner__text p {
  font-family: var(--jc-font-body);
  font-size: 1.05rem;
}

.banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(41, 49, 51, 0.0) 0%,
    rgba(41, 49, 51, 0.4) 70%,
    rgba(41, 49, 51, 0.7) 100%
  );
  pointer-events: none;
}


/* ==========================================================================
   16. Collection / PLP
   ========================================================================== */
.collection-hero {
  background-color: var(--jc-color-anthracite-soft);
  border-bottom: 1px solid var(--jc-color-border-dark);
}

.facets__summary,
.facets__heading,
.facets__price {
  color: var(--jc-color-text-on-dark) !important;
  font-family: var(--jc-font-display);
}

.facet-checkbox {
  color: var(--jc-color-text-on-dark-muted);
}

.active-facets__button-inner {
  background-color: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
}


/* ==========================================================================
   17. Product Page (PDP)
   ========================================================================== */
.product__title h1 {
  font-family: var(--jc-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.product__info-wrapper .price {
  font-size: 1.5rem;
}

.product-form__buttons .button {
  width: 100%;
}

.product__description {
  font-family: var(--jc-font-body);
  line-height: 1.7;
  color: var(--jc-color-text-on-dark-muted);
}

.product__description h2,
.product__description h3 {
  color: var(--jc-color-gold);
  margin-top: 1.5rem;
}

/* Variant Pills */
.product-form__input input[type="radio"] + label {
  border: 1px solid var(--jc-color-border-dark) !important;
  background-color: var(--jc-color-anthracite-soft);
  color: var(--jc-color-text-on-dark);
  border-radius: var(--jc-radius-sm) !important;
  font-family: var(--jc-font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.product-form__input input[type="radio"]:checked + label {
  background-color: var(--jc-color-gold) !important;
  color: var(--jc-color-anthracite) !important;
  border-color: var(--jc-color-gold) !important;
}


/* ==========================================================================
   18. Cart / Drawer
   ========================================================================== */
.cart-drawer,
.drawer__inner {
  background-color: var(--jc-color-anthracite);
  color: var(--jc-color-text-on-dark);
}

.cart-item__name,
.cart-item__price-wrapper .price {
  color: var(--jc-color-text-on-dark);
}

.cart-drawer__footer {
  background-color: #1F2628;
  border-top: 1px solid var(--jc-color-border-dark);
}


/* ==========================================================================
   19. Responsive (Mobile-First Erweiterungen)
   ========================================================================== */

/* Tablet */
@media screen and (min-width: 750px) {
  .jc-usp__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* Desktop */
@media screen and (min-width: 990px) {
  .jc-usp__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }

  .jc-usp {
    padding: 3.5rem 2rem;
  }

  .header__menu-item,
  .header__menu-item span {
    font-size: 0.9rem;
  }
}

/* Mobile-Only Tweaks */
@media screen and (max-width: 749px) {
  .button,
  button.button {
    padding: 0.85rem 1.4rem !important;
    font-size: 0.85rem !important;
  }

  .card__heading,
  .card__heading a {
    font-size: 0.95rem;
  }

  .price__regular .price-item--regular,
  .price__sale .price-item--sale {
    font-size: 1rem;
  }

  .jc-badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }

  .footer-block__heading {
    font-size: 0.85rem;
  }
}


/* ==========================================================================
   20. Utility-Klassen
   ========================================================================== */
.jc-text-gold       { color: var(--jc-color-gold) !important; }
.jc-bg-anthracite   { background-color: var(--jc-color-anthracite) !important; }
.jc-bg-warmwhite    { background-color: var(--jc-color-warmwhite) !important; }
.jc-border-gold     { border: 1px solid var(--jc-color-gold) !important; }
.jc-uppercase       { text-transform: uppercase; letter-spacing: 0.08em; }
.jc-display-font    { font-family: var(--jc-font-display); font-weight: 700; }
.announcement-bar {
  background-color: #1F2628 !important;
  border-bottom: 1px solid #3D4548 !important;
}
.announcement-bar__wrap {
  padding: 0.6rem 1rem !important;
}
.announcement-bar__message,
.announcement-bar__message p,
.announcement-bar__message a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: #E8E8E8 !important;
  text-align: center !important;
}
.announcement-bar__message a { color: #C8A96E !important; }
.announcement-bar__message a:hover { color: #E0C896 !important; }
.announcement-bar__button { color: #E8E8E8 !important; }
.announcement-bar__button:hover { color: #C8A96E !important; }
/* Hero Banner auf Mobile ausblenden */
@media screen and (max-width: 749px) {
  #shopify-section-{{ DEINE-SECTION-ID }} {
    display: none !important;
  }
}
/* Verbessertes Font-Smoothing für helle Schrift auf dunklem Grund */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body-Text etwas fetter für bessere Lesbarkeit auf Anthrazit */
body, p, li, span {
  font-weight: 450; /* zwischen Regular 400 und Medium 500 */
}
/* Header Menü-Labels vergrößern */
.header__menu-item,
.header__menu-item span {
  font-size: 1.05rem !important; /* war vorher 0.95rem, Desktop 0.9rem */
  letter-spacing: 0.08em !important;
}

@media screen and (min-width: 990px) {
  .header__menu-item,
  .header__menu-item span {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   Condition Guide Link (Variant Picker)
   ========================================================================== */
.jc-condition-guide-link {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-family: var(--jc-font-body);
  font-weight: 500;
  color: var(--jc-color-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  transition: color var(--jc-transition-fast);
}
.jc-condition-guide-link:hover {
  color: var(--jc-color-gold-hover);
}

/* ==========================================================================
   Breadcrumb Navigation
   ========================================================================== */
.jc-breadcrumb {
  font-family: var(--jc-font-body);
  font-size: 0.8rem;
  color: var(--jc-color-text-on-light-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.jc-breadcrumb a {
  color: var(--jc-color-text-on-light-muted);
  text-decoration: none;
  transition: color var(--jc-transition-fast);
}
.jc-breadcrumb a:hover {
  color: var(--jc-color-gold);
}
.jc-breadcrumb span {
  color: var(--jc-color-text-on-light);
}
.color-scheme-1 .jc-breadcrumb,
.color-background-1 .jc-breadcrumb {
  color: var(--jc-color-text-on-dark-muted);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.color-scheme-1 .jc-breadcrumb a,
.color-background-1 .jc-breadcrumb a {
  color: var(--jc-color-text-on-dark-muted);
}
.color-scheme-1 .jc-breadcrumb span,
.color-background-1 .jc-breadcrumb span {
  color: var(--jc-color-text-on-dark);
}

/* ==========================================================================
   TCG Metadata Table (card set, number, rarity, language, edition)
   ========================================================================== */
.jc-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.82rem;
  font-family: var(--jc-font-body);
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--jc-color-gold);
  border-radius: var(--jc-radius-sm);
}
.jc-card-meta dt {
  font-weight: 600;
  color: var(--jc-color-text-on-light-muted);
  white-space: nowrap;
}
.jc-card-meta dd {
  margin: 0;
  color: var(--jc-color-text-on-light);
}

/* ==========================================================================
   People Viewing Social Proof
   ========================================================================== */
.jc-viewers {
  font-size: 0.8rem;
  font-family: var(--jc-font-body);
  color: var(--jc-color-gold);
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   Trust Badge Strip (below ATC button)
   ========================================================================== */
.jc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.78rem;
  font-family: var(--jc-font-body);
  color: var(--jc-color-text-on-light-muted);
}

/* ==========================================================================
   Accessories Usage Hint (below quantity selector)
   ========================================================================== */
.jc-accessory-hint {
  font-size: 0.78rem;
  font-family: var(--jc-font-body);
  color: var(--jc-color-text-on-light-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(200, 169, 110, 0.08);
  border-radius: var(--jc-radius-sm);
  border-left: 2px solid var(--jc-color-gold);
  line-height: 1.5;
}
.jc-accessory-hint strong {
  color: var(--jc-color-text-on-light);
}

/* ==========================================================================
   Homepage – Hero gradient overlay (bottom-heavy for text legibility)
   ========================================================================== */
#Banner-image_banner_zxbBDU.banner::after {
  background: linear-gradient(
    to top,
    rgba(41, 49, 51, 0.82) 0%,
    rgba(41, 49, 51, 0.45) 40%,
    rgba(41, 49, 51, 0.25) 100%
  ) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Homepage – USP strip directly below hero (compact, no top gap)
   ========================================================================== */
.section-multicolumn_nMLXer .multicolumn-list__item {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.section-multicolumn_nMLXer .multicolumn-list__item:last-child {
  border-right: none;
}
@media screen and (max-width: 749px) {
  .section-multicolumn_nMLXer .multicolumn-list__item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   Homepage – Rich-text trust section gold accent line
   ========================================================================== */
.section-rich_text_trust_jc .rich-text__heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--jc-color-gold);
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

/* ==========================================================================
   Homepage – Newsletter discount badge
   ========================================================================== */
.section-newsletter_9dVKPp .newsletter__subheading,
.section-newsletter_9dVKPp .rich-text__heading {
  position: relative;
}
.section-newsletter_9dVKPp .newsletter__heading .jc-discount-highlight,
.newsletter .rich-text__heading .jc-discount-highlight {
  color: var(--jc-color-gold);
  font-weight: 700;
}

/* ==========================================================================
   All Collections Page – Count Badge & Card Media Link
   ========================================================================== */
.collection-card-wrapper .card__media {
  overflow: hidden;
}

.card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.jc-collection-count {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(27, 33, 35, 0.88);
  color: var(--jc-color-gold);
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--jc-radius-sm);
  border: 1px solid rgba(200, 169, 110, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   404 Page Enhancements
   ========================================================================== */
.jc-404-search {
  max-width: 480px;
  margin: 2rem auto 1.5rem;
}

.jc-404-hint {
  margin: 1.5rem 0 0.75rem;
  font-family: var(--jc-font-body);
  font-size: 0.9rem;
  color: var(--jc-color-text-on-light-muted);
}

.jc-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Collection Shortcuts (category tiles above product grid)
   ========================================================================== */
.jc-shortcuts-wrapper {
  text-align: center;
}

.jc-shortcuts__title {
  font-family: var(--jc-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jc-color-text-on-dark-muted);
  margin: 0 0 0.9rem;
}

.jc-shortcuts__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.jc-shortcuts__item {
  margin: 0;
}

.jc-shortcuts__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font-family: var(--jc-font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--jc-color-text-on-dark);
  background: var(--jc-color-anthracite-soft);
  border: 1px solid rgba(200, 169, 110, 0.28);
  border-radius: var(--jc-radius-md);
  text-decoration: none;
  transition: background-color var(--jc-transition-fast), color var(--jc-transition-fast), border-color var(--jc-transition-fast), transform var(--jc-transition-fast);
  white-space: nowrap;
}

.jc-shortcuts__link:hover,
.jc-shortcuts__link:focus-visible {
  background: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
  border-color: var(--jc-color-gold);
  transform: translateY(-1px);
}

.jc-shortcuts__emoji {
  font-size: 1rem;
  line-height: 1;
}

@media screen and (max-width: 749px) {
  .jc-shortcuts__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 1rem 0.25rem;
    margin: 0 -1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .jc-shortcuts__list::-webkit-scrollbar {
    display: none;
  }
  .jc-shortcuts__item {
    flex-shrink: 0;
  }
  .jc-shortcuts__link {
    font-size: 0.8rem;
    padding: 0.5rem 0.85rem;
  }
}

/* ==========================================================================
   Product Card – Custom Event & Pack-Size Badges
   ========================================================================== */
.card-wrapper .card__inner {
  position: relative;
}

.jc-card-badges {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  z-index: 3;
  pointer-events: none;
}

.jc-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--jc-radius-sm);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.jc-card-badge--event {
  background: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
  border: 1px solid var(--jc-color-gold);
}

.jc-card-badge--size {
  background: rgba(27, 33, 35, 0.92);
  color: var(--jc-color-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media screen and (max-width: 749px) {
  .jc-card-badge {
    font-size: 0.72rem;
    padding: 0.32rem 0.55rem;
  }
}

/* ==========================================================================
   MOBILE OPTIMIZATION PASS (≤749px)
   Targeted improvements: tap targets, iOS zoom prevention, sticky ATC,
   hero height, readability, horizontal scroll guard
   ========================================================================== */
@media screen and (max-width: 749px) {

  /* --- Prevent horizontal overflow --- */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* --- iOS Safari: prevent auto-zoom on input focus (inputs must be ≥16px) --- */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  textarea,
  select,
  .field__input,
  .select__select {
    font-size: 16px !important;
  }

  /* --- WCAG tap targets: min 44px height on all interactive buttons --- */
  .button,
  button.button,
  a.button,
  .shopify-payment-button__button {
    min-height: 44px;
    padding: 0.95rem 1.4rem !important;
    font-size: 0.9rem !important;
    line-height: 1.2;
  }

  /* Icon-only buttons (header cart/menu/search) */
  .header__icon,
  summary.header__icon,
  .header__icon--cart,
  .header__icon--summary {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- Sticky Add-to-Cart on product page (huge CRO win) --- */
  .product-form__buttons {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--jc-color-anthracite);
    padding: 0.75rem 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
    border-top: 1px solid var(--jc-color-border-dark);
  }

  /* --- Hero banner: compact on mobile so products show above the fold --- */
  .banner--large,
  .banner--medium,
  .banner--small,
  .banner.banner--large,
  .banner.banner--medium {
    min-height: auto !important;
    height: auto !important;
  }
  .banner--large .banner__media,
  .banner--medium .banner__media,
  .banner--small .banner__media {
    max-height: 38vh !important;
    min-height: 0 !important;
  }
  .banner__content {
    padding: 1rem 1rem !important;
  }
  .banner__heading {
    font-size: 1.6rem !important;
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }
  .banner__text {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem;
  }
  .banner__buttons .button {
    font-size: 0.8rem !important;
    padding: 0.65rem 1rem !important;
    min-height: 40px !important;
  }

  /* --- Header tightening --- */
  .header-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .header {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  /* --- Reduce excessive section padding on mobile --- */
  .section {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-width {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Product card title: limit to 3 lines to keep heights uniform --- */
  .card__heading,
  .card__heading a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  /* --- Product page: more prominent price on mobile --- */
  .product__info-wrapper .price-item,
  .product .price-item--regular,
  .product .price-item--sale {
    font-size: 1.4rem !important;
  }

  /* --- Breadcrumb shrinks on mobile --- */
  .jc-breadcrumb {
    font-size: 0.72rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
  }

  /* --- Trust strip: stack nicer --- */
  .jc-trust-strip {
    gap: 0.35rem 0.85rem;
    font-size: 0.72rem;
  }

  /* --- TCG metadata table: more readable on small screens --- */
  .jc-card-meta {
    font-size: 0.78rem;
    gap: 0.25rem 0.75rem;
    padding: 0.65rem 0.85rem;
  }

  /* --- Collection pages only: 1 full-width product card per row --- */
  .template-collection #product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .template-collection #product-grid .grid__item {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* --- Reserve bottom space so sticky nav doesn't cover content --- */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Sticky ATC: lift above the bottom nav on mobile --- */
  .product-form__buttons {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- Footer: tighter spacing --- */
  .footer {
    padding-top: 2rem;
  }
  .footer-block {
    margin-bottom: 1.25rem;
  }

  /* --- Quantity selector thumb-friendly --- */
  .quantity__button {
    min-width: 44px;
    min-height: 44px;
  }
  .quantity__input {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* --- Featured-collection slider cards on mobile: 3 cards visible --------- */
  .featured-collection .grid--peek .grid__item,
  .product-grid--peek .grid__item,
  ul.slider .grid__item {
    width: calc(33.33% - 0.5rem) !important;
    flex: 0 0 calc(33.33% - 0.5rem) !important;
  }

  /* Compact card padding on featured-collection slides */
  .featured-collection .card__information,
  .product-grid .card__information {
    padding: 0.55rem 0.6rem 0.7rem !important;
  }

  /* Title smaller, max 2 lines */
  .featured-collection .card__heading,
  .featured-collection .card__heading a {
    font-size: 0.8rem !important;
    line-height: 1.25;
    -webkit-line-clamp: 2 !important;
    min-height: auto !important;
  }

  /* Price layout: horizontal & compact */
  .featured-collection .price,
  .featured-collection .price__container {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.3rem !important;
    align-items: baseline;
  }
  .featured-collection .price__regular .price-item--regular,
  .featured-collection .price__sale .price-item--sale {
    font-size: 0.95rem !important;
  }
  .featured-collection .price__sale .price-item--regular {
    font-size: 0.78rem !important;
  }

  /* Quick-Add: gold rectangular button with cart icon AS BACKGROUND-IMAGE */
  .quick-add__submit,
  .card-wrapper .quick-add__submit,
  .featured-collection .quick-add__submit,
  .quick-add__submit:hover,
  .quick-add__submit:focus,
  .quick-add__submit:active,
  .quick-add__submit[disabled],
  .quick-add__submit.loading {
    padding: 0 !important;
    width: 55% !important;
    min-width: 48px !important;
    max-width: 90px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0.5rem auto 0.5rem !important;
    display: block !important;
    background-color: var(--jc-color-gold) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23293133' d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 13a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important;
    border: 1px solid var(--jc-color-gold) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  }
  /* Hide all inner elements & pseudo-elements to keep button clean */
  .quick-add__submit > *,
  .quick-add__submit *,
  .quick-add__submit::before,
  .quick-add__submit::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* --- UNIFORM CARD HEIGHTS (regardless of image, title length, sold-out) -- */
  /* Stretch grid items to row height */
  .featured-collection ul.slider,
  .featured-collection .grid,
  .product-grid {
    align-items: stretch !important;
  }
  .featured-collection ul.slider > .grid__item,
  .featured-collection .grid > .grid__item,
  .product-grid > .grid__item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  /* Card-wrapper fills the grid cell vertically */
  .grid__item .card-wrapper {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  .grid__item .card-wrapper .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }
  /* The card image keeps its aspect ratio; content area takes remaining space */
  .grid__item .card-wrapper .card__content,
  .grid__item .card-wrapper .card__information,
  .grid__item .card-wrapper .card-information {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  /* Title: always reserves 2-line height even with short titles */
  .grid__item .card__heading,
  .grid__item .card__heading a {
    min-height: 2.5em !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Price area: fixed minimum so cards align even without sale price */
  .grid__item .price {
    min-height: 2.5rem !important;
  }

  /* Push the quick-add button to the bottom of the card */
  .grid__item .quick-add__submit,
  .grid__item product-form {
    margin-top: auto !important;
  }

  /* --- HIDE redundant Dawn sold-out / sale text badges in card content --- */
  /* These cause height inconsistencies. Disabled button + dimming already
     communicates sold-out status visually. */
  .grid__item .card__badge {
    position: absolute !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 3;
    pointer-events: none;
  }
  .grid__item .card__badge .badge {
    font-size: 0.6rem !important;
    padding: 0.18rem 0.4rem !important;
    background: var(--jc-color-anthracite) !important;
    color: var(--jc-color-text-on-dark-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
  }

  /* Sold-out card: dim the whole card visually instead of adding text below */
  .grid__item .card-wrapper:has(.quick-add__submit[disabled]) .card__media,
  .grid__item .card-wrapper:has(.quick-add__submit:disabled) .card__media {
    opacity: 0.55;
    filter: grayscale(0.4);
  }
  /* Disabled quick-add button: greyed-out but still visible */
  .grid__item .quick-add__submit[disabled],
  .grid__item .quick-add__submit:disabled {
    background-color: var(--jc-color-anthracite-soft, #1F2628) !important;
    border-color: var(--jc-color-anthracite-soft, #1F2628) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
  }
  /* Card needs relative positioning so quick-add can be absolute */
  .card-wrapper {
    position: relative;
  }

  /* "Sale" badge: cleaner on mobile (smaller, top-right of image) */
  .card__badge .badge {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.45rem !important;
    letter-spacing: 0.08em !important;
  }

  /* Slider pagination dots/arrows: tighter spacing */
  .slider-buttons {
    margin-top: 0.5rem;
    gap: 0.5rem;
  }

  /* --- Homepage trust/USP multicolumn: fully hidden on mobile --- */
  [id$="__multicolumn_nMLXer"] {
    display: none !important;
  }

  /* --- Homepage trust/USP multicolumn: compact on mobile (fallback for other multicolumns) --- */
  .multicolumn .multicolumn-list__item {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }
  .section-multicolumn_nMLXer .multicolumn-card,
  .multicolumn .multicolumn-card {
    gap: 0.25rem;
  }
  .section-multicolumn_nMLXer .multicolumn-card__info h2,
  .section-multicolumn_nMLXer .multicolumn-card__info h3,
  .multicolumn-card__info h2,
  .multicolumn-card__info h3 {
    font-size: 0.85rem !important;
    letter-spacing: 0.02em;
    margin: 0 0 0.2rem !important;
    line-height: 1.25;
  }
  .section-multicolumn_nMLXer .multicolumn-card__info .rte p,
  .section-multicolumn_nMLXer .multicolumn-card__info p,
  .multicolumn-card__info .rte p,
  .multicolumn-card__info p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .section-multicolumn_nMLXer,
  #shopify-section-multicolumn_nMLXer .multicolumn {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* --- Product page trust strip: keep single line on mobile --- */
  .jc-trust-strip {
    gap: 0.25rem 0.7rem !important;
    font-size: 0.68rem !important;
    padding-top: 0.7rem !important;
    margin-top: 0.7rem !important;
    line-height: 1.25;
  }
}

/* ==========================================================================
   Header – Cart icon: match visual size of search icon
   Cart SVG has viewBox 40x40 with ~60% internal padding — we scale it up
   inside the wrapper so it visually matches the search icon.
   ========================================================================== */
.header .header__icon--cart .svg-wrapper > svg {
  transform: scale(1.6);
  transform-origin: center center;
}
.header__icon--cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Cart count bubble readable */
#cart-icon-bubble .cart-count-bubble,
cart-icon .cart-count-bubble {
  min-width: 18px;
  min-height: 18px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ==========================================================================
   Mobile Sticky Bottom Navigation (<750px only)
   Primary commerce actions in thumb-reach: Shop / Kategorien / Suche / Cart
   ========================================================================== */
.jc-mobile-nav {
  display: none;
}

@media screen and (max-width: 749px) {
  .jc-mobile-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--jc-color-anthracite);
    border-top: 1px solid var(--jc-color-border-dark);
    padding-top: 0.35rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  }

  .jc-mobile-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.3rem 0.25rem;
    min-height: 48px;
    color: var(--jc-color-text-on-dark-muted);
    text-decoration: none;
    font-family: var(--jc-font-body);
    transition: color var(--jc-transition-fast);
  }

  .jc-mobile-nav__item:active,
  .jc-mobile-nav__item:hover {
    color: var(--jc-color-gold);
  }

  .jc-mobile-nav__icon {
    font-size: 1.3rem;
    line-height: 1;
  }

  .jc-mobile-nav__label {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    font-weight: 500;
  }

  .jc-mobile-nav__count {
    position: absolute;
    top: 0.1rem;
    right: calc(50% - 1.4rem);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--jc-color-gold);
    color: var(--jc-color-anthracite);
    font-family: var(--jc-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* --- Chat / Inbox bubble: move from bottom-right to mid-right side ----- */
  /* Shopify Inbox + Tidio + Crisp + Intercom + LiveChat — common selectors  */
  #shopify-chat,
  #shopify-chat-bubble,
  iframe#shopify-chat-bubble-iframe,
  #ShopifyChatWindow,
  iframe[name="shopify-chat"],
  iframe[id*="chat"],
  iframe[id*="Chat"],
  iframe[title*="chat" i],
  iframe[title*="Chat"],
  .shopify-chat,
  div[class*="chat-button" i],
  div[id*="chat-bubble" i],
  /* Tidio */
  #tidio-chat-iframe,
  /* Crisp */
  .crisp-client .cc-1brb6 .cc-1yy0g,
  /* Intercom */
  .intercom-lightweight-app,
  .intercom-launcher-frame,
  /* LiveChat */
  #chat-widget-container {
    bottom: auto !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* ==========================================================================
   ADAPTED FROM DESIGN SYSTEM
   ========================================================================== */

/* --- Product card lift + shadow on hover (premium feel) -------------------- */
.card-wrapper {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media screen and (min-width: 750px) {
  .card-wrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  }
  /* Image zoom on hover */
  .card-wrapper .card__media img {
    transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .card-wrapper:hover .card__media img {
    transform: scale(1.05);
  }
  /* Quick-add slides up from bottom on hover */
  .card-wrapper .quick-add,
  .card-wrapper .card__inner > .quick-add {
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .card-wrapper:not(:hover):not(:focus-within) .quick-add__submit {
    opacity: 0;
    transform: translateY(8px);
  }
  .card-wrapper:hover .quick-add__submit,
  .card-wrapper:focus-within .quick-add__submit {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Announcement bar: gold dot accent before text ------------------------ */
.announcement-bar__message::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jc-color-gold);
  margin-right: 0.5rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* --- Section head: gold-eyebrow style for headings ------------------------- */
.section-header__heading,
.title-wrapper-with-link .title,
.collection-list-title,
.featured-collection .title {
  position: relative;
}
/* Bottom hairline under section heads */
.section-header,
.title-wrapper-with-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1rem !important;
  margin-bottom: 1.75rem !important;
}
.color-scheme-2 .section-header,
.color-scheme-2 .title-wrapper-with-link {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* --- Editorial stats grid (for "Warum JungCards?" rich-text section) ------ */
/* Hidden if user hasn't added the markup; enabled when they paste the
   stats list via Shopify's rich-text editor in <ul class="jc-stats">. */
.section-rich_text_trust_jc .rte ul.jc-stats,
.rte ul.jc-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0;
  margin: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.rte ul.jc-stats li {
  text-align: center;
  padding: 0;
  margin: 0;
}
.rte ul.jc-stats li strong {
  display: block;
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--jc-color-gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.rte ul.jc-stats li em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jc-color-text-on-dark-muted);
}
@media screen and (max-width: 749px) {
  .rte ul.jc-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .rte ul.jc-stats li strong {
    font-size: 1.3rem;
  }
  .rte ul.jc-stats li em {
    font-size: 0.6rem;
  }
}

/* --- Hero CTA refinement: tighten gap, ensure gold primary button --------- */
.banner__buttons,
.image-banner__buttons {
  gap: 0.75rem !important;
}

/* --- Subtle reveal-on-scroll motion (only if the user enables it) --------- */
.scroll-trigger.animate--slide-in {
  --animation-duration: 700ms;
  --animation-timing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- PDP Price Display: bigger, bolder, gold accent on sale --------------- */
.product__info-wrapper .price__regular .price-item--regular,
.product__info-wrapper .price__sale .price-item--sale,
.product .price--large .price-item {
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 2rem !important;
  letter-spacing: -0.005em;
}
.product__info-wrapper .price__sale .price-item--regular,
.product .price__sale .price-item--regular {
  font-family: var(--jc-font-body);
  font-size: 1.1rem !important;
  text-decoration-thickness: 2px;
}
@media screen and (max-width: 749px) {
  .product__info-wrapper .price__regular .price-item--regular,
  .product__info-wrapper .price__sale .price-item--sale {
    font-size: 1.6rem !important;
  }
}

/* --- Newsletter: prominent 15% discount pill at top ----------------------- */
[id$="__newsletter_9dVKPp"] .newsletter__subheading,
.newsletter .newsletter__subheading {
  display: inline-block;
  position: relative;
}
[id$="__newsletter_9dVKPp"] .newsletter__subheading::before,
.newsletter__heading::before {
  content: "15 % RABATT";
  display: inline-block;
  background: var(--jc-color-gold);
  color: var(--jc-color-anthracite);
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.85rem;
  border-radius: var(--jc-radius-sm);
  vertical-align: middle;
}
.newsletter__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Buttons: subtle lift on hover (design-system motion language) -------- */
.button--primary,
button.button--primary,
a.button--primary {
  transition: background-color 200ms ease, color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
}
.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200, 169, 110, 0.35);
}
.button--secondary {
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease;
}
.button--secondary:hover {
  transform: translateY(-1px);
}

/* --- Pulsing dot for low-stock indicator (design system has this) --------- */
.product-form__inventory[role="status"] svg circle,
.jc-stock-dot {
  animation: jcStockPulse 1.8s ease-in-out infinite;
}
@keyframes jcStockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* --- Generous vertical rhythm between major sections (desktop) ------------ */
@media screen and (min-width: 990px) {
  .shopify-section + .shopify-section {
    /* Dawn handles section padding internally, this is just a safety net */
  }
}

/* --- Trust strip on PDP: cleaner monochrome with gold dividers ------------ */
.jc-trust-strip {
  position: relative;
}
.jc-trust-strip > *:not(:last-child)::after {
  content: "·";
  margin-left: 1rem;
  color: var(--jc-color-gold);
  font-weight: 700;
}

/* --- Card category eyebrow (gold uppercase above product title) ----------- */
/* Activates if user enables "show vendor" — we restyle vendor as gold eyebrow */
.card__information .caption-with-letter-spacing {
  color: var(--jc-color-gold) !important;
  font-family: var(--jc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.3rem;
}

/* --- Refined section heading: gold underline accent on featured sections - */
.featured-collection .title-wrapper-with-link .title::after,
.collection-list-wrapper .title-wrapper-with-link .title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--jc-color-gold);
  margin-top: 0.6rem;
}

/* --- Hero subtle gradient overlay refinement ------------------------------ */
.banner__media::after {
  background: linear-gradient(
    180deg,
    rgba(41, 49, 51, 0.15) 0%,
    rgba(41, 49, 51, 0.55) 60%,
    rgba(41, 49, 51, 0.85) 100%
  ) !important;
}

/* --- Footer headings: gold eyebrow style (consistent with design system) -- */
.footer-block__heading {
  font-family: var(--jc-font-display);
  font-weight: 700;
  font-size: 0.8rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--jc-color-gold) !important;
  margin-bottom: 1.15rem !important;
}

/* --- PDP variant pills: refined active state ------------------------------ */
.product-form__input input[type="radio"]:checked + label {
  background-color: var(--jc-color-anthracite) !important;
  color: var(--jc-color-gold) !important;
  border-color: var(--jc-color-anthracite) !important;
  box-shadow: 0 0 0 1px var(--jc-color-anthracite);
}

/* ==========================================================================
   PREMIUM-TIER product cards (YCSJ / WCS / LIMITED tagged products)
   Gold border + subtle inner glow — visually elevates rare/event items.
   ========================================================================== */
.jc-card-wrapper--premium .card {
  position: relative;
}
.jc-card-wrapper--premium .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--jc-color-gold);
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}
.jc-card-wrapper--premium .card__inner {
  box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.25),
              0 4px 16px rgba(200, 169, 110, 0.12);
}
@media screen and (min-width: 750px) {
  .jc-card-wrapper--premium:hover .card::before {
    box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.2);
  }
}

/* LIMITED badge — gold-bordered, anthracite background */
.jc-card-badge--limited {
  background: var(--jc-color-anthracite);
  color: var(--jc-color-gold);
  border: 1px solid var(--jc-color-gold);
}

/* ==========================================================================
   ANIMATIONS & EFFECTS — Yu-Gi-Oh OCG inspired (holo foil, gold sheen)
   All CSS-only, GPU-accelerated, respect prefers-reduced-motion.
   ========================================================================== */

/* --- Holographic foil shimmer on premium cards (TCG-themed) --------------- */
.jc-card-wrapper--premium .card__inner {
  position: relative;
  overflow: hidden;
}
.jc-card-wrapper--premium .card__inner::after {
  content: "";
  position: absolute;
  inset: -150%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 232, 178, 0.0) 42%,
    rgba(255, 232, 178, 0.35) 50%,
    rgba(255, 232, 178, 0.0) 58%,
    transparent 65%
  );
  transform: translateX(-100%) translateY(-100%);
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 200ms ease;
}
.jc-card-wrapper--premium:hover .card__inner::after {
  opacity: 1;
  animation: jcFoilSweep 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes jcFoilSweep {
  0%   { transform: translateX(-100%) translateY(-100%); }
  100% { transform: translateX(100%) translateY(100%); }
}

/* --- Pulsing premium glow (always-on, subtle, draws the eye) -------------- */
.jc-card-wrapper--premium .card {
  animation: jcPremiumGlow 8s ease-in-out infinite alternate;
}
@keyframes jcPremiumGlow {
  0% {
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.25),
      0 4px 16px rgba(200, 169, 110, 0.10);
  }
  100% {
    box-shadow:
      0 0 0 1px rgba(200, 169, 110, 0.55),
      0 6px 28px rgba(200, 169, 110, 0.28);
  }
}

/* --- Section heading underline: draws in on first reveal ------------------ */
.featured-collection .title-wrapper-with-link .title::after,
.collection-list-wrapper .title-wrapper-with-link .title::after {
  width: 40px;
  animation: jcUnderlineDraw 900ms 200ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes jcUnderlineDraw {
  from { width: 0; }
  to   { width: 40px; }
}

/* --- Logo glow on hover (gold drop-shadow, subtle) ------------------------ */
.header__heading-link,
.header__logo {
  transition: filter 350ms ease;
}
.header__heading-link:hover,
.header__logo:hover {
  filter: drop-shadow(0 0 14px rgba(200, 169, 110, 0.45));
}

/* --- Cart icon: gentle hover pulse + count-bubble bounce ------------------ */
.header__icon--cart {
  transition: transform 200ms ease;
}
.header__icon--cart:hover {
  transform: translateY(-1px);
}
.header__icon--cart:hover .cart-count-bubble,
cart-icon:hover .cart-count-bubble {
  animation: jcCartBubble 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes jcCartBubble {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* --- Primary button: subtle gold shimmer on hover ------------------------- */
.button--primary {
  position: relative;
  overflow: hidden;
}
.button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-110%);
  pointer-events: none;
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.button--primary:hover::after {
  transform: translateX(110%);
}

/* --- Page-load fade-in for above-the-fold content (snappy, <300ms) -------- */
.shopify-section:first-of-type,
#MainContent > .shopify-section:first-of-type {
  animation: jcPageFadeIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes jcPageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Newsletter discount pill: subtle gold breathing animation ------------ */
.newsletter__heading::before {
  animation: jcPillBreathe 2.8s ease-in-out infinite alternate;
}
@keyframes jcPillBreathe {
  0%   { box-shadow: 0 0 0 0 rgba(200, 169, 110, 0); }
  100% { box-shadow: 0 0 18px 2px rgba(200, 169, 110, 0.45); }
}

/* --- Card-product image: parallax-like subtle drift on scroll ------------- */
@media (min-width: 750px) and (prefers-reduced-motion: no-preference) {
  .card-wrapper .card__media img {
    will-change: transform;
  }
}

/* --- Hero banner: image gets a slow ken-burns zoom (very slow, premium) --- */
@media (prefers-reduced-motion: no-preference) {
  .banner__media img {
    animation: jcKenBurns 20s ease-in-out infinite alternate;
    transform-origin: center center;
  }
}
@keyframes jcKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* --- Marquee announcement-bar pause on hover ------------------------------ */
.announcement-bar__message-wrapper:hover .announcement-bar__message,
.announcement-bar:hover .marquee-content,
.announce__track:hover {
  animation-play-state: paused;
}

/* --- Footer social icons: gold glow on hover ------------------------------ */
.footer__list-social a {
  transition: color 200ms ease, transform 200ms ease, filter 200ms ease;
}
.footer__list-social a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(200, 169, 110, 0.5));
}

/* ==========================================================================
   HEADER POLISH — replace harsh border with subtle gold gradient + premium glow
   Matches the breathing premium-tier aesthetic on product cards.
   ========================================================================== */
.header-wrapper,
sticky-header.header-wrapper,
.shopify-section-group-header-group .header-wrapper,
.shopify-section-header-group .header-wrapper {
  position: relative;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(200, 169, 110, 0.10),
    0 8px 24px -6px rgba(200, 169, 110, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.30);
}

/* Hairline gold gradient at the very bottom of the header (replaces the dark border) */
.header-wrapper::after,
sticky-header.header-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.0) 8%,
    rgba(200, 169, 110, 0.55) 50%,
    rgba(200, 169, 110, 0.0) 92%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Header itself: ensure no double-borders from Dawn defaults */
.header {
  border-bottom: none !important;
}

/* Premium breathing glow on header (very subtle, matches premium card glow) */
.header-wrapper {
  animation: jcHeaderGlow 9s ease-in-out infinite alternate;
}
@keyframes jcHeaderGlow {
  0% {
    box-shadow:
      0 1px 0 rgba(200, 169, 110, 0.10),
      0 8px 22px -6px rgba(200, 169, 110, 0.10),
      0 4px 16px rgba(0, 0, 0, 0.30);
  }
  100% {
    box-shadow:
      0 1px 0 rgba(200, 169, 110, 0.20),
      0 12px 32px -6px rgba(200, 169, 110, 0.22),
      0 4px 16px rgba(0, 0, 0, 0.30);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-wrapper {
    animation: none !important;
  }
}

/* --- Reveal-on-scroll: smoother, longer, on-brand timing ------------------ */
.scroll-trigger.animate--slide-in {
  --animation-duration: 800ms;
  --animation-timing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Respect user's motion preferences (accessibility) -------------------- */
@media (prefers-reduced-motion: reduce) {
  .jc-card-wrapper--premium .card,
  .jc-card-wrapper--premium .card__inner::after,
  .featured-collection .title-wrapper-with-link .title::after,
  .newsletter__heading::before,
  .banner__media img,
  .button--primary::after,
  .header__icon--cart:hover .cart-count-bubble {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   UNIFORM CARD HEIGHTS — all screens (desktop + mobile)
   Same structural treatment regardless of viewport: every card in a grid
   or slider has identical height regardless of image size, title length,
   sale-price presence, or stock state.
   ========================================================================== */

/* Stretch grid items to row height */
.featured-collection ul.slider,
.featured-collection .grid,
.product-grid {
  align-items: stretch !important;
}
.featured-collection ul.slider > .grid__item,
.featured-collection .grid > .grid__item,
.product-grid > .grid__item {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

/* Card-wrapper fills the grid cell vertically */
.grid__item .card-wrapper {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.grid__item .card-wrapper .card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.grid__item .card-wrapper .card__content,
.grid__item .card-wrapper .card__information,
.grid__item .card-wrapper .card-information {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Title: always reserve at least 2 lines of height */
.grid__item .card__heading,
.grid__item .card__heading a {
  min-height: 2.5em !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Price area: minimum height so cards align even when no sale price */
.grid__item .price {
  min-height: 2.5rem !important;
}

/* Quick-Add button always at the bottom of the card */
.grid__item .quick-add__submit,
.grid__item product-form {
  margin-top: auto !important;
}

/* Sale / Sold-out badge: top-RIGHT overlay (top-left is YCSJ/LIMITED area) */
.grid__item .card__badge {
  position: absolute !important;
  top: 0.55rem !important;
  right: 0.55rem !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3;
  pointer-events: none;
}

/* Dawn renders the same Sale/Sold-out badge TWICE: once in the first
   .card__content (inside .card__inner) and once in a second .card__content
   (sibling). Hide any badge inside a card__content that follows another. */
.grid__item .card-wrapper .card__content + .card__content .card__badge,
.grid__item .card-wrapper .card__content ~ .card__content .card__badge,
.grid__item .card .card__inner .card__badge ~ .card__badge,
.grid__item .card .card__content:nth-of-type(n+2) .card__badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Default badge style: RED for Sale (universally recognized) */
.grid__item .card__badge .badge {
  font-size: 0.72rem !important;
  padding: 0.28rem 0.6rem !important;
  background: #c0392b !important;
  color: #ffffff !important;
  border: 1px solid #c0392b !important;
  border-radius: 4px !important;
  font-family: var(--jc-font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35);
  line-height: 1.1;
}

/* Sold-out badge: dark/grey instead of red (different state, different signal) */
.grid__item .card-wrapper:has(.quick-add__submit:disabled) .card__badge .badge,
.grid__item .card-wrapper:has(.quick-add__submit[disabled]) .card__badge .badge,
.grid__item .card-wrapper:has(.product-form__buttons :disabled) .card__badge .badge {
  background: rgba(27, 33, 35, 0.92) !important;
  color: var(--jc-color-text-on-dark-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Sold-out: dim image + grey-out button (modern :has() — graceful fallback) */
.grid__item .card-wrapper:has(.quick-add__submit[disabled]) .card__media,
.grid__item .card-wrapper:has(.quick-add__submit:disabled) .card__media {
  opacity: 0.55;
  filter: grayscale(0.4);
  transition: opacity 200ms ease, filter 200ms ease;
}
.grid__item .quick-add__submit[disabled],
.grid__item .quick-add__submit:disabled {
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}

/* ==========================================================================
   FLAIR & TEXTURE — ambient lighting + grain on cards & sections
   Layered gradients (highlight, gold glow, depth) + SVG noise = tactile,
   premium feel without hurting performance.
   ========================================================================== */

/* --- Card backgrounds: SEAMLESS gradient (grain removed, applied to outer
       .card only so inner elements stay transparent — no visible "Ebenen") - */
.grid__item .card,
.card-wrapper .card.card--media,
.card-wrapper .card.card--standard {
  background-color: var(--jc-color-anthracite-soft, #1F2628);
  background-image:
    /* Top edge highlight + bottom edge depth */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.00) 5%,
      rgba(0, 0, 0, 0.00) 88%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    /* Ambient gold glow from top-center */
    radial-gradient(
      ellipse 80% 55% at 50% 0%,
      rgba(200, 169, 110, 0.07) 0%,
      transparent 70%
    ),
    /* Diagonal "brushed metal" sheen */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.05) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Inner content elements: TRANSPARENT so the card gradient shows through
   seamlessly — eliminates the "ebenen" / banding effect */
.grid__item .card__content,
.grid__item .card__information,
.grid__item .card-information {
  background-color: transparent !important;
  background-image: none !important;
}

/* Premium-tier cards: replace gradient with stronger gold ambient (no grain) */
.jc-card-wrapper--premium .card {
  background-image:
    /* Top edge highlight */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.00) 5%,
      rgba(0, 0, 0, 0.00) 88%,
      rgba(0, 0, 0, 0.18) 100%
    ),
    /* Stronger gold ambient at top */
    radial-gradient(
      ellipse 95% 70% at 50% 0%,
      rgba(200, 169, 110, 0.14) 0%,
      transparent 70%
    ),
    /* Gold accent corner glows */
    radial-gradient(
      circle 200px at 0% 100%,
      rgba(200, 169, 110, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle 200px at 100% 100%,
      rgba(200, 169, 110, 0.08) 0%,
      transparent 70%
    ),
    /* Diagonal brushed sheen (slightly stronger on premium) */
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.06) 100%
    );
}

/* --- Section ambient lighting: subtle radial gold glows ------------------- */
.shopify-section .color-scheme-1,
.shopify-section .color-scheme-4,
.section.color-scheme-1,
.section.color-scheme-4 {
  position: relative;
  isolation: isolate;
}
.shopify-section .color-scheme-1::before,
.shopify-section .color-scheme-4::before,
.section.color-scheme-1::before,
.section.color-scheme-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* Soft gold ambient at top-right */
    radial-gradient(
      ellipse 50% 40% at 90% 5%,
      rgba(200, 169, 110, 0.07) 0%,
      transparent 65%
    ),
    /* Counterpoint ambient at bottom-left */
    radial-gradient(
      ellipse 45% 35% at 10% 95%,
      rgba(200, 169, 110, 0.04) 0%,
      transparent 65%
    );
  pointer-events: none;
  z-index: -1;
}

/* --- Page body: subtle ambient light + brushed-metal diagonal sheen ------- */
body {
  background-color: var(--jc-color-anthracite, #293133);
  background-image:
    /* Soft golden vignette at top — like light from above */
    radial-gradient(
      ellipse 110% 50% at 50% 0%,
      rgba(200, 169, 110, 0.05) 0%,
      transparent 50%
    ),
    /* Counter-vignette at bottom for depth */
    radial-gradient(
      ellipse 80% 40% at 50% 100%,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 60%
    ),
    /* Very faint diagonal sheen lines (brushed metal feel) */
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 6px,
      rgba(255, 255, 255, 0.012) 6px,
      rgba(255, 255, 255, 0.012) 7px
    );
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto;
  background-attachment: fixed;
}

/* --- Featured-collection section: hairline gold gradient at section edges - */
.featured-collection .color-scheme-1.gradient,
.featured-collection .color-scheme-4.gradient {
  position: relative;
}
.featured-collection .color-scheme-1.gradient::after,
.featured-collection .color-scheme-4.gradient::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.35) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* ==========================================================================
   EU Shipping Strip — small, between header and main content
   ========================================================================== */
.jc-eu-strip {
  background: var(--jc-color-anthracite-soft, #1F2628);
  color: var(--jc-color-text-on-dark-muted);
  font-family: var(--jc-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--jc-color-border-dark, #3D4548);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.jc-eu-strip__item {
  white-space: nowrap;
}

.jc-eu-strip__sep {
  color: var(--jc-color-gold);
  font-weight: 700;
}

@media screen and (max-width: 749px) {
  .jc-eu-strip {
    font-size: 0.65rem;
    padding: 0.35rem 0.5rem;
    gap: 0.3rem 0.55rem;
  }
  /* On mobile: show only first 2 items, hide the rest */
  .jc-eu-strip__item:nth-child(n+4),
  .jc-eu-strip__sep:nth-child(n+4) {
    display: none;
  }
}