/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* Ensure your shop content stays above the overlay */
#app {
  position: relative;
  z-index: 1;
}

/* =========================
   NEW BACKGROUND (NO LINES)
   ========================= */
body {
  background: #02060f;
}

/* Layer 1: animated blue “energy blobs” (no stripes, no grid)
   Boosted: more blue depth + subtle rotating energy cone */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1050px 780px at 14% 22%, rgba(140,210,255,0.28), transparent 60%),
    radial-gradient(920px 700px at 86% 28%, rgba(40,110,255,0.22), transparent 62%),
    radial-gradient(840px 680px at 28% 86%, rgba(20,85,255,0.20), transparent 64%),
    radial-gradient(980px 760px at 78% 82%, rgba(110,200,255,0.18), transparent 66%),
    conic-gradient(from 210deg at 82% 34%, rgba(140,210,255,0.12), transparent 30%, rgba(40,110,255,0.10), transparent 62%, rgba(20,85,255,0.10)),
    linear-gradient(180deg, rgba(2,6,15,0.70), rgba(2,6,15,0.92));

  filter: blur(12px) saturate(1.15);
  transform: translate3d(0,0,0);
  animation:
    codNebulaMove 18s ease-in-out infinite,
    codNebulaPulse 7.5s ease-in-out infinite;
  opacity: 1;
}

@keyframes codNebulaMove {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(0deg); }
  50%  { transform: translate3d( 2%,  2%, 0) scale(1.06) rotate(6deg); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(0deg); }
}

@keyframes codNebulaPulse {
  0%   { opacity: 0.92; }
  50%  { opacity: 1; }
  100% { opacity: 0.92; }
}

/* Layer 2: subtle drifting particles + vignette (no lines)
   Boosted: a few more particles + soft twinkle */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    /* particles */
    radial-gradient(circle at 12% 18%, rgba(190,235,255,0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 62%, rgba(140,210,255,0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 34%, rgba(90,170,255,0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 78%, rgba(110,200,255,0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 26%, rgba(140,210,255,0.30) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 58%, rgba(40,110,255,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(140,210,255,0.24) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 84%, rgba(90,170,255,0.20) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 16%, rgba(190,235,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 52%, rgba(140,210,255,0.16) 0 1px, transparent 2px),

    /* soft blue flares (adds more "COD energy" without lines) */
    radial-gradient(900px 600px at 18% 55%, rgba(140,210,255,0.10), transparent 62%),
    radial-gradient(1100px 720px at 82% 60%, rgba(40,110,255,0.09), transparent 64%),

    /* soft vignette */
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,0.00), rgba(0,0,0,0.58));

  background-size:
    520px 520px,
    560px 560px,
    600px 600px,
    640px 640px,
    700px 700px,
    760px 760px,
    820px 820px,
    900px 900px,
    980px 980px,
    1120px 1120px,
    100% 100%,
    100% 100%,
    100% 100%;

  opacity: 0.64;
  filter: blur(0.25px);
  transform: translate3d(0,0,0);
  animation:
    codParticlesDrift 16s ease-in-out infinite,
    codParticlesTwinkle 5.6s ease-in-out infinite;
}

@keyframes codParticlesDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-14px, 10px, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes codParticlesTwinkle {
  0%   { opacity: 0.50; }
  50%  { opacity: 0.66; }
  100% { opacity: 0.50; }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}

/* =========================
   NAVBAR (dein bestehendes)
   ========================= */

/* Navbar glass + centered links + rounded actions */
.navbar-sticky {
  position: sticky;
  top: 10px;
  z-index: 60;
}

/* Make the navbar "pill" narrower (not full width) */
.navbar-glass {
  width: calc(100% - 28px);
  max-width: 1180px;
  margin: 0 auto;

  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

.navbar-glass--scrolled {
  background-color: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.navbar-menu-inner {
  position: relative;
}

/* Center the main nav items (desktop) */
.navbar-links-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 1024px) {
  .navbar-links-center {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 14px;
    white-space: nowrap;
  }

  .navbar-actions-right {
    margin-left: auto;
  }
}

.navbar-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Currency selector (Choices.js) – rounded/glass */
.navbar-currency-selector .choices__inner {
  border-radius: 9999px !important;
  min-height: 40px !important;
  padding: 4px 10px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.navbar-currency-selector .choices__list--dropdown,
.navbar-currency-selector .choices__list[aria-expanded="true"] {
  border-radius: 16px !important;
  overflow: hidden;
  background-color: rgba(6, 19, 57, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Cart button – rounded/glass */
.navbar-cart-btn {
  border-radius: 9999px !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* End navbar glass */

/* =========================
   PRODUCT CARDS (BLUE / NAVBAR GLASS STYLE)
   ========================= */

.ds-product-card{
  border-radius: 22px;
  background: rgba(2, 6, 15, 0.42);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  transform: translateZ(0);
}

/* Animated blue border (like navbar vibe) */
.ds-product-card::after{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(120deg,
    rgba(170,220,255,0.95),
    rgba(25,85,255,0.75),
    rgba(90,170,255,0.90),
    rgba(170,220,255,0.95)
  );
  background-size: 280% 280%;
  animation: dsCardBorder 6.5s ease-in-out infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes dsCardBorder{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Mouse hover effect (blue, follows cursor) */
.ds-product-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px),
      rgba(140,210,255,0.28),
      rgba(25,85,255,0.12) 35%,
      transparent 62%
    );
  opacity: 0;
  transition: opacity 180ms ease;
}

.ds-product-card:hover::before{
  opacity: 1;
}

.ds-product-card:hover{
  border-color: rgba(255,255,255,0.14);
}

/* Media */
.ds-card-media{
  position: relative;
  overflow: hidden;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.25);
}

.ds-card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.04);
  transition: transform 320ms ease;
}

.ds-product-card:hover .ds-card-img{
  transform: scale(1.10);
}

.ds-card-img--fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(170,220,255,0.55);
}

.ds-card-fallback-icon{
  width: 84px;
  height: 84px;
}

/* COD-like dark overlay on image (no lines) */
.ds-card-media-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 420px at 50% 15%, rgba(170,220,255,0.12), transparent 60%),
    linear-gradient(180deg, rgba(2,6,15,0.10), rgba(2,6,15,0.78));
  opacity: 1;
}

/* Badges on top-left */
.ds-card-badges{
  position:absolute;
  top: 12px;
  left: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

.ds-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(2,6,15,0.55);
  border: 1px solid rgba(170,220,255,0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Body: title above price (like your reference) */
.ds-card-body{
  padding: 14px 16px 16px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.ds-card-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.95);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-card-divider{
  margin: 10px 0 10px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(170,220,255,0.35),
    transparent
  );
  opacity: 0.9;
}

.ds-card-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ds-card-price{
  margin: 0;
  font-weight: 900;
  color: rgba(255,255,255,0.90);
}

.ds-card-stock{
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: rgba(170,220,255,0.85);
  white-space: nowrap;
}

/* Action button like your style */
.ds-card-action{
  margin-top: 12px;
}

.ds-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(2,6,15,0.18);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.ds-action-icon{
  width: 16px;
  height: 16px;
}

.ds-product-card:hover .ds-action-btn{
  border-color: rgba(170,220,255,0.38);
  background: rgba(2,6,15,0.10);
  transform: translateY(-1px);
}

/* Make sure default link underline never shows */
.ds-product-card, .ds-product-card *{
  text-decoration: none !important;
}

/* =========================
   HERO SIDE IMAGE ANIMATION
   (only affects the right hero image)
   ========================= */

/* Keep the same placement as before (~4cm left) */
.ds-hero-side{
  transform: translateX(-150px);
}

/* Wrapper: contains effects so nothing leaks to the rest of the page */
.ds-hero-side-float{
  position: relative !important;
  display: inline-block;
  width: fit-content;
  isolation: isolate;           /* keeps blend effects from affecting the whole page */
  transform: translateZ(0);
}

/* The image itself: floating animation (subtle) */
.ds-hero-side-img{
  transform-origin: center;
  will-change: transform, filter;
  animation: dsHeroFloat 5.8s ease-in-out infinite;
  filter: drop-shadow(0 12px 30px rgba(90,170,255,0.22));
}

/* Soft blue aura behind the character (subtle, no harsh glow / no sweep line) */
.ds-hero-side-float::before{
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(165,216,255,0.18), rgba(2,6,15,0) 66%),
    radial-gradient(closest-side at 25% 78%, rgba(59,130,246,0.10), rgba(2,6,15,0) 72%);
  filter: blur(10px);
  opacity: 0.42;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: dsHeroGlow 6.6s ease-in-out infinite;
}

/* Hover: tiny boost (still subtle) */
.ds-hero-side:hover .ds-hero-side-img{
  filter: drop-shadow(0 14px 36px rgba(90,170,255,0.26)) saturate(1.06) contrast(1.01);
}

/* Floating (includes scale so it doesn't snap) */
@keyframes dsHeroFloat{
  0%   { transform: scale(2) translate3d(0, 0, 0) rotate(-0.4deg); }
  50%  { transform: scale(2) translate3d(0, -10px, 0) rotate(0.6deg); }
  100% { transform: scale(2) translate3d(0, 0, 0) rotate(-0.4deg); }
}

@keyframes dsHeroGlow{
  0%   { opacity: 0.32; transform: scale(0.98); }
  50%  { opacity: 0.54; transform: scale(1.02); }
  100% { opacity: 0.32; transform: scale(0.98); }
}

@media (prefers-reduced-motion: reduce){
  .ds-hero-side-img,
  .ds-hero-side-float::before{
    animation: none !important;
  }
}

/* =========================
   HERO: CTA button polish + keep it clickable
   (Only affects hero section)
   ========================= */

.ds-hero-content{
  position: relative;
  z-index: 2;
}

/* Side image should never block clicks on the left content/buttons */
.ds-hero-side,
.ds-hero-side-float,
.ds-hero-side-img{
  pointer-events: none;
}

.ds-hero-side{
  position: relative;
  z-index: 1;
}

/* Make the hero CTA buttons rounded + glass + subtle animated border */
.ds-hero-cta a{
  position: relative;
  overflow: hidden;
  border-radius: 9999px !important;

  background: rgba(2, 6, 15, 0.32) !important;
  border: 1px solid rgba(165, 216, 255, 0.30) !important;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transform: translateZ(0);
  transition: transform 180ms ease, border-color 220ms ease, background-color 220ms ease;
}

.ds-hero-cta a::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(165,216,255,0.00), rgba(165,216,255,0.85), rgba(59,130,246,0.45), rgba(165,216,255,0.00));
  background-size: 220% 100%;
  opacity: 0.55;
  z-index: -1;
  animation: dsHeroBtnBorder 3.8s ease-in-out infinite;
}

.ds-hero-cta a::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 40%, rgba(165,216,255,0.18), rgba(2,6,15,0) 55%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.ds-hero-cta a:hover{
  transform: translateY(-1px);
  border-color: rgba(165, 216, 255, 0.46) !important;
  background: rgba(2, 6, 15, 0.38) !important;
}

.ds-hero-cta a:hover::after{
  opacity: 1;
}

@keyframes dsHeroBtnBorder{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   HOME: FEATURES (EMBEDS) ABOVE PRODUCTS + EMBED STYLE MATCH
   Only affects: features + products components on the shop page
   ========================= */

/* Allow re-ordering of components (keeps normal vertical flow) */
.components{
  display: flex;
  flex-direction: column;
}

/* Swap order: features above products */
.components > [data-component-id="features"]{
  order: 30;
}

.components > [data-component-id="products"]{
  order: 40;

  /* push products further down (~3cm) */
  margin-top: clamp(60px, 7vw, 120px);
}

/* Equal-height embed cards in a row */
[data-component-id="features"] .flex.flex-wrap.gap-4{
  align-items: stretch;
}

[data-component-id="features"] .flex.flex-wrap.gap-4 > div{
  display: flex;
}

[data-component-id="features"] .ds-embed-card{
  position: relative;
  flex: 1;
  height: 100%;

  border-radius: 22px;
  background: rgba(2, 6, 15, 0.26);          /* transparent glass (no solid grey) */
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  overflow: hidden;
  transform: translateZ(0);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);

  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
}

/* Animated blue border (same technique as product cards) */
[data-component-id="features"] .ds-embed-card::after{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(120deg,
    rgba(170,220,255,0.95),
    rgba(25,85,255,0.75),
    rgba(90,170,255,0.90),
    rgba(170,220,255,0.95)
  );
  background-size: 280% 280%;
  animation: dsEmbedBorder 6.5s ease-in-out infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.95;
}

@keyframes dsEmbedBorder{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Mouse hover effect (blue, follows cursor via --mx/--my set in features.njk) */
[data-component-id="features"] .ds-embed-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px),
      rgba(140,210,255,0.30),
      rgba(25,85,255,0.14) 35%,
      transparent 62%
    );
  opacity: 0;
  transition: opacity 180ms ease;
}

[data-component-id="features"] .ds-embed-card:hover::before{
  opacity: 1;
}

/* Lift on hover (subtle) */
[data-component-id="features"] .ds-embed-card{
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

[data-component-id="features"] .ds-embed-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  border-color: rgba(255,255,255,0.14);
}

/* Icon: animated blue holo */
[data-component-id="features"] .ds-embed-icon{
  display: inline-block;
  margin-bottom: 10px !important;

  color: transparent !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(191, 230, 255, 0.95) 0%,
      rgba(93, 179, 255, 1) 40%,
      rgba(37, 99, 235, 1) 70%,
      rgba(30, 58, 138, 1) 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 48%,
      rgba(255, 255, 255, 0.40) 50%,
      rgba(255, 255, 255, 0) 52%,
      rgba(255, 255, 255, 0) 100%
    );
  background-size: 300% 100%, 180% 100%;
  background-position: 0% 50%, -140% 50%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;

  animation: dsEmbedIconHolo 5.8s linear infinite;
  will-change: transform, filter;

  filter: drop-shadow(0 10px 18px rgba(90,170,255,0.14));
}

@keyframes dsEmbedIconHolo{
  0%   { background-position: 0% 50%, -140% 50%; }
  50%  { background-position: 100% 50%, 40% 50%; }
  100% { background-position: 0% 50%, 220% 50%; }
}

/* Title: same overlay technique as DynestShop (white base + animated blue overlay) */
[data-component-id="features"] .ds-embed-title{
  position: relative;
  display: inline-block;
  color: #ffffff;
}

[data-component-id="features"] .ds-embed-title::after{
  content: attr(data-title);
  position: absolute;
  inset: 0;
  color: transparent;

  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 24%,
      rgba(191, 230, 255, 0.95) 38%,
      rgba(93, 179, 255, 1) 52%,
      rgba(37, 99, 235, 1) 74%,
      rgba(30, 58, 138, 1) 100%
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 46%,
      rgba(255, 255, 255, 0.40) 50%,
      rgba(255, 255, 255, 0) 54%,
      rgba(255, 255, 255, 0) 100%
    );

  background-size: 300% 100%, 180% 100%;
  background-position: 0% 50%, -140% 50%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;

  /* keep left part white (overlay fades in after ~25%) */
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 1) 44%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 1) 44%,
    rgba(0, 0, 0, 1) 100%
  );

  opacity: 0.98;
  pointer-events: none;

  animation: dsEmbedTitleHolo 5.8s linear infinite;
}

@keyframes dsEmbedTitleHolo{
  0%   { background-position: 0% 50%, -140% 50%; }
  50%  { background-position: 100% 50%, 40% 50%; }
  100% { background-position: 0% 50%, 220% 50%; }
}

/* Extra hover effect for icon + title */
[data-component-id="features"] .ds-embed-card:hover .ds-embed-icon{
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 14px 26px rgba(90,170,255,0.18));
}

[data-component-id="features"] .ds-embed-card:hover .ds-embed-title{
  transform: translateY(-1px);
}

/* Remove any accidental underlines */
[data-component-id="features"] .ds-embed-card,
[data-component-id="features"] .ds-embed-card *{
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce){
  [data-component-id="features"] .ds-embed-card,
  [data-component-id="features"] .ds-embed-card::after,
  [data-component-id="features"] .ds-embed-icon,
  [data-component-id="features"] .ds-embed-title::after{
    animation: none !important;
    transition: none !important;
  }
}
/* --- Footer: glass like navbar --- */
footer {
  /* gleiche “pill”-Breite wie navbar */
  width: calc(100% - 28px);
  max-width: 1180px;
  margin: 24px auto 26px;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* Kill the built-in “bg-card/..” fills inside footer (so it stays glass) */
footer [class*="bg-card/"] {
  background: transparent !important;
}

/* Make inner separators subtle */
footer [class*="border-b"],
footer [class*="border-white/5"] {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Footer links a bit cleaner */
footer a {
  text-decoration: none !important;
}
footer a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   DS Product Page (ONLY) — Glass/Blur + Round + Mouse FX
   Scope: component[data-component-id="product-page"]
   ========================================================= */

.component[data-component-id="product-page"] .dyn-pv-glass{
  border-radius: 22px;
  overflow: hidden;
  /* animated blue border like cards */
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.055), rgba(255,255,255,0.055)) padding-box,
    linear-gradient(120deg, #0b1e5b, #6fc2ff, #0b1e5b, #a7d8ff) border-box;
  background-size: 100% 100%, 320% 320%;
  background-position: 0 0, 0% 50%;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.30);
  animation: ds-pv-border 10s ease-in-out infinite;
}
@keyframes ds-pv-border{
  0%{background-position:0 0, 0% 50%;}
  50%{background-position:0 0, 100% 50%;}
  100%{background-position:0 0, 0% 50%;}
}

/* Remove “hard black” fills inside the product-page cards -> glass */
.component[data-component-id="product-page"] .dyn-pv-glass .bg-background\/35,
.component[data-component-id="product-page"] .dyn-pv-glass .bg-card\/75,
.component[data-component-id="product-page"] .dyn-pv-glass .bg-card{
  background: rgba(255,255,255,0.045) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* So borders inside look cleaner */
.component[data-component-id="product-page"] .dyn-pv-glass [class*="border-white/5"]{
  border-color: rgba(255,255,255,0.10) !important;
}

/* Make product image fill the left card cleaner */
.component[data-component-id="product-page"] img.object-product-image{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Variant options: round + glass + mouse-blue glow (they already set --mx/--my) */
.component[data-component-id="product-page"] .dyn-variant-option{
  position: relative;
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.035) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.component[data-component-id="product-page"] .dyn-variant-option::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(
    340px 260px at var(--mx, 50%) var(--my, 50%),
    rgba(111,194,255,0.30),
    rgba(11,30,91,0.00) 60%
  );
  transition: opacity 220ms ease;
}

.component[data-component-id="product-page"] .dyn-variant-option:hover{
  transform: translateY(-2px);
  border-color: rgba(111,194,255,0.55) !important;
}
.component[data-component-id="product-page"] .dyn-variant-option:hover::before{
  opacity:1;
}

/* Selected variant: stronger blue frame */
.component[data-component-id="product-page"] .dyn-variant-option[aria-selected="true"],
.component[data-component-id="product-page"] .dyn-variant-option.selected,
.component[data-component-id="product-page"] .dyn-variant-option[data-selected="true"]{
  border-color: rgba(167,216,255,0.75) !important;
}

/* Action buttons: round + mouse glow (scoped only) */
.component[data-component-id="product-page"] .dyn-pv-action{
  position: relative;
  overflow: hidden;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.045) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.component[data-component-id="product-page"] .dyn-pv-action::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(
    320px 220px at var(--mx, 50%) var(--my, 50%),
    rgba(111,194,255,0.35),
    rgba(11,30,91,0.00) 62%
  );
  transition: opacity 220ms ease;
}

.component[data-component-id="product-page"] .dyn-pv-action::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(120deg, #0b1e5b, #6fc2ff, #0b1e5b, #a7d8ff) border-box;
  background-size: 100% 100%, 320% 320%;
  background-position: 0 0, 0% 50%;
  transition: opacity 220ms ease;
}

.component[data-component-id="product-page"] .dyn-pv-action:hover{
  transform: translateY(-2px);
  border-color: rgba(111,194,255,0.55) !important;
}
.component[data-component-id="product-page"] .dyn-pv-action:hover::before,
.component[data-component-id="product-page"] .dyn-pv-action:hover::after{
  opacity:1;
}

/* Make spacing a bit cleaner (structure) */
.component[data-component-id="product-page"] .dyn-pv-glass .editor{
  line-height: 1.6;
}
/* ============================
   FIX: PRODUCT PAGE glass (NO BLUE FILL)
   Only affects product-page
   ============================ */
.component[data-component-id="product-page"] .ds-product-shell,
.component[data-component-id="product-page"] .ds-product-left,
.component[data-component-id="product-page"] .ds-product-right,
.component[data-component-id="product-page"] .ds-product-panel,
.component[data-component-id="product-page"] [class*="product-page"],
.component[data-component-id="product-page"] [class*="bg-card"],
.component[data-component-id="product-page"] .card,
.component[data-component-id="product-page"] .panel {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Optional: make inner blocks (variant list rows etc.) more “glass” and less filled */
.component[data-component-id="product-page"] .ds-option,
.component[data-component-id="product-page"] [class*="variant"],
.component[data-component-id="product-page"] [class*="option"],
.component[data-component-id="product-page"] [class*="choices"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
}

/* ============================
   RESTORE: Scroll Reveal V2 (smooth + special)
   Only affects .ds-product-card + .ds-embed-card
   ============================ */
@media (prefers-reduced-motion: reduce) {
  .ds-sr-v2 { transition: none !important; animation: none !important; filter: none !important; transform: none !important; }
}

.ds-sr-v2 {
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.ds-sr-v2.ds-sr-prep {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985) rotateX(7deg);
  filter: blur(14px);
}

.ds-sr-v2.ds-sr-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  filter: blur(0);
  transition:
    transform 900ms cubic-bezier(.16,1,.3,1) var(--ds-sr-delay, 0ms),
    opacity  900ms cubic-bezier(.16,1,.3,1) var(--ds-sr-delay, 0ms),
    filter   900ms cubic-bezier(.16,1,.3,1) var(--ds-sr-delay, 0ms);
}

.ds-sr-v2.ds-sr-sheen {
  position: relative;
  isolation: isolate;
}

.ds-sr-v2.ds-sr-sheen::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: screen;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(167,216,255,0.00) 35%,
    rgba(167,216,255,0.40) 50%,
    rgba(11,30,91,0.18) 58%,
    rgba(167,216,255,0.00) 70%,
    transparent 100%
  );

  transform: translateX(-120%);
  animation: dsSrSheen 1000ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes dsSrSheen {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* =========================================================
   PRODUCT PAGE CTA BUTTONS (ONLY)
   Goal: Add to Cart + Buy Now = same style as HERO "View Products"
   Scope: component[data-component-id="product-page"] .dyn-pv-action
   (Does NOT change anything else)
   ========================================================= */

/* Base button */
.component[data-component-id="product-page"] .dyn-pv-action{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border-radius: 9999px !important;
  background: rgba(2, 6, 15, 0.32) !important;
  border: 1px solid rgba(165, 216, 255, 0.30) !important;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transform: translateZ(0);

  transition: transform 180ms ease, border-color 220ms ease, background-color 220ms ease;
  color: rgba(255,255,255,0.92) !important;
}

/* Keep ALL text/icons above effects */
.component[data-component-id="product-page"] .dyn-pv-action > *{
  position: relative;
  z-index: 2;
  color: inherit !important;
}

/* Animated border sweep (same vibe as hero View Products button) */
.component[data-component-id="product-page"] .dyn-pv-action::before{
  content:"" !important;
  position:absolute;
  inset:-2px;
  border-radius: 9999px;
  pointer-events:none;
  z-index: 0;

  background: linear-gradient(
    90deg,
    rgba(165,216,255,0.00),
    rgba(165,216,255,0.85),
    rgba(59,130,246,0.45),
    rgba(165,216,255,0.00)
  );
  background-size: 220% 100%;
  opacity: 0.55;

  animation: dsHeroBtnBorder 3.8s ease-in-out infinite;
}

/* Hover highlight (stays BEHIND text => text never disappears) */
.component[data-component-id="product-page"] .dyn-pv-action::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: 9999px;
  pointer-events:none;
  z-index: 1;

  background: radial-gradient(circle at 30% 40%, rgba(165,216,255,0.18), rgba(2,6,15,0) 55%);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Hover */
.component[data-component-id="product-page"] .dyn-pv-action:hover{
  transform: translateY(-1px);
  border-color: rgba(165, 216, 255, 0.46) !important;
  background: rgba(2, 6, 15, 0.38) !important;
}

.component[data-component-id="product-page"] .dyn-pv-action:hover::after{
  opacity: 1;
}

/* Safety: force SVG/icons to stay visible */
.component[data-component-id="product-page"] .dyn-pv-action svg{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* ================================
   PRODUCT PAGE: Variant price = NO box + much bigger
   (only affects prices inside the variant rows)
   ================================ */
.component[data-component-id="product-page"]
  :is(.ds-option, .variant-option, .product-variant, [class*="variant"], [class*="option"])
  :is(.dyn-pv-variant-price, .variant-price, .option-price, .price-badge, [class*="price"]) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Make the CURRENT price big */
.component[data-component-id="product-page"]
  :is(.ds-option, .variant-option, .product-variant, [class*="variant"], [class*="option"])
  :is(.dyn-pv-variant-price, .variant-price, .option-price, .price-badge, [class*="price"])
  :is(.money, .amount, .current, strong, span, b) {
  font-size: 1.9rem !important;   /* big */
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

/* Keep the OLD/striked price smaller */
.component[data-component-id="product-page"]
  :is(.ds-option, .variant-option, .product-variant, [class*="variant"], [class*="option"])
  :is(.dyn-pv-variant-price, .variant-price, .option-price, .price-badge, [class*="price"])
  :is(del, s, .old, .compare-at, [class*="old"]) {
  font-size: 0.45em !important;
  opacity: 0.55 !important;
  margin-left: 0.4em !important;
}

/* If that price area is inside a small rounded "chip", remove it too */
.component[data-component-id="product-page"]
  :is(.ds-option, .variant-option, .product-variant, [class*="variant"], [class*="option"])
  :is([class*="chip"], [class*="pill"], [class*="badge"], [class*="box"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   CART CLEAN: remove inner rounded boxes/pills (ONLY cart)
   ========================================================= */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page) {
  --ds-cart-glass: rgba(255,255,255,0.06);
  --ds-cart-border: rgba(255,255,255,0.12);
}

/* 1) Inner “pill/box” wrappers inside cart items -> transparent */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"])
  :is([class*="bg-"], [class*="rounded"], .rounded, .pill, .badge, .chip, .card, .panel, [class*="box"])
  :not(:is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"])) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 2) Price on cart row -> no box, just clean text */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"])
  :is([class*="price"], .price, .amount, .money) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-weight: 800 !important;
}

/* 3) Quantity area -> remove big capsule behind it */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"])
  :is([class*="qty"], [class*="quantity"], .qty, .quantity, [class*="stepper"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* =========================================================
   CART = FOOTER GLASS LOOK (only cart page)
   Paste at VERY END of custom.css
   ========================================================= */

:where(.component[data-component-id*="cart"], .page-cart, .cart-page) {
  --ds-glass-bg: rgba(255, 255, 255, 0.06);
  --ds-glass-border: rgba(255, 255, 255, 0.12);
  --ds-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* Cart item row + right summary box -> footer glass */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"],
      [class*="order"], [class*="summary"], .order, .summary, [class*="your-order"], [class*="yourOrder"]) {
  background-color: var(--ds-glass-bg) !important;
  background-image: none !important;
  border: 1px solid var(--ds-glass-border) !important;
  box-shadow: var(--ds-glass-shadow) !important;

  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;

  border-radius: 18px !important;
}

/* Remove the “standard dark blocks” inside (qty/price wrappers etc.) */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"],
      [class*="order"], [class*="summary"], .order, .summary)
  :is([class*="bg-"], .card, .panel, [class*="panel"], [class*="box"], [class*="rounded"], .rounded) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Qty control: clean glass like navbar (no chunky black) */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([class*="qty"], [class*="quantity"], .qty, .quantity, [class*="stepper"]) {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 9999px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
}

:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([class*="qty"], [class*="quantity"], .qty, .quantity, [class*="stepper"]) button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
}

/* Price text: clean, no background */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([class*="price"], .price, .amount, .money) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* =========================================================
   CART FINAL NUKE: remove ALL inner "windows" (ONLY cart)
   Keeps OUTER glass cards, nukes inner grey pills/boxes
   ========================================================= */

:where(.component[data-component-id*="cart"], .page-cart, .cart-page) {
  --ds-glass-bg: rgba(255,255,255,0.06);
  --ds-glass-border: rgba(255,255,255,0.12);
  --ds-glass-shadow: 0 10px 30px rgba(0,0,0,0.22);
  --ds-blueA: rgba(167,216,255,.90);
  --ds-blueB: rgba(11,30,91,.90);
  --ds-blueC: rgba(111,194,255,.90);
}

/* OUTER cards stay glass */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"],
      [class*="order"], [class*="summary"], .order, .summary, [class*="your-order"], [class*="yourOrder"]) {
  background-color: var(--ds-glass-bg) !important;
  background-image: none !important;
  border: 1px solid var(--ds-glass-border) !important;
  box-shadow: var(--ds-glass-shadow) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-radius: 18px !important;
}

/* NUKE ALL INNER LAYERS (this removes the annoying 2nd layer) */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"],
      [class*="order"], [class*="summary"], .order, .summary, [class*="your-order"], [class*="yourOrder"])
  * {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Also remove rounded "pill" shapes on inner wrappers */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([data-cart-item], .cart-item, [class*="cart-item"], [class*="cartItem"],
      [class*="order"], [class*="summary"], .order, .summary, [class*="your-order"], [class*="yourOrder"])
  :is(div, section, aside, header, footer, span) {
  border-radius: 0 !important;
  border-width: 0 !important;
}

/* Re-apply minimal nice +/- buttons (so they don't look broken) */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is([class*="qty"], [class*="quantity"], .qty, .quantity, [class*="stepper"])
  button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9999px !important;
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Re-apply CHECKOUT button in "View Products" style */
:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is(a[href*="checkout"], button[data-action*="checkout"], button[class*="checkout"]) {
  border-radius: 9999px !important;
  border: 1px solid transparent !important;

  background:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box,
    linear-gradient(120deg, var(--ds-blueA), var(--ds-blueB), var(--ds-blueC)) border-box !important;

  background-size: 100% 100%, 320% 320% !important;
  background-position: 0 0, 0% 50% !important;

  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;

  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform 220ms ease, box-shadow 220ms ease, background-position 600ms ease;
}

:where(.component[data-component-id*="cart"], .page-cart, .cart-page)
  :is(a[href*="checkout"], button[data-action*="checkout"], button[class*="checkout"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  background-position: 0 0, 100% 50% !important;
}