/** Shopify CDN: Minification failed

Line 839:0 Unexpected "}"
Line 1198:39 Expected identifier but found "!"
Line 1209:39 Expected identifier but found "!"

**/
/*
  ------------------------------------------------------------------------
  custom.css  —  Noah*s Ocean Brand System
  Author: Robert Fritze (Kreativfritze – Desain for humans)
  Link: kreativfritze.ch
  All rights reserved: Kreativ Fritze Design & Innovation, Noah*s Ocean
  ------------------------------------------------------------------------
  Version: 2.0 
  Last updated: 2025-10-16
  Context: Shopify Theme Custom CSS
  ------------------------------------------------------------------------
  Tokens   → :root
  Typography → GLOBAL TYPOGRAPHY
  Components → HEADER / NAV, BUTTONS / LINKS, BADGES / PRICES
  Media     → PRODUCT CARDS / RICH TEXT / ICEEP EXTENSIONS
  ------------------------------------------------------------------------
*/

/* =======================================================================
   DESIGN TOKENS / ROOT VARIABLES
======================================================================= */
:root {
  /* Colors */
  --DeepOcean00: rgba(0, 0, 0, 1);
  --DeepOcean01: rgba(0, 10, 38, 1);
  --DeepOcean02: rgba(0, 51, 102, 1);
  --DeepOcean03: rgba(0, 26, 102, 1);
  --DeepOcean04: rgba(0, 32, 128, 1);
  --DeepOcean05: #002699;
  --DeepOceanTrans: rgba(0, 32, 128, 0.15);
  --DeepOcean06: rgba(0, 0, 204, 1);
  --DeepOcean07: rgba(0, 57, 229, 1);
  --DeepOcean08: rgba(0, 64, 255, 1);
  --Clownfish: #FF7A00;
  --formi-mint-01: rgba(181, 242, 242, 1);
  --formi-mint-02: rgba(194, 242, 242, 1);
  --formi-mint-03: rgba(206, 242, 242, 1);
  --formi-mint-04: rgba(218, 242, 242, 1);
  --formi-mint-04-Trans: rgba(218, 242, 242, 0.1);
  --formi-mint-05: rgba(230, 242, 242, 1);
  --formi-mint-06: rgba(240, 247, 247, 1);
  --formi-mint-07: rgba(245, 250, 250, 1);
  --powderblue: #E6EBF2;
  --AmazingAquamarine-04: #B2FFFF;
  --AmazingAquamarine-06: rgba(229, 255, 255, 1);
  --AmazingAquamarine-07: rgba(242, 255, 255, 1);
  --Salmon01: rgba(242, 61, 90, 1);
  --Salmon02: rgba(255, 102, 126, 1);
  --SandPageBG: #fff;
  --SandConture: #f5f4f0;
  --SandFill: #f5f4f0;
  --SandMatte-09-Bright: #FAF9F7; /* Brng #F7F3EF  VBQ #FEFAF6  Noah*s Ocean #FAF9F7  Kreativfritze #F7F4F2  nz #faf5f1  chianti #F6F1E7  Leather #f9f6f1  watch #f9f7f4*/
  --SandMatte-10-Default: #F5F4F0;
  --WhiteClouds: #fff;
  /*--text-primary: 0 64 255;
  --ColorPrimaryDefault: var(--text-primary);
  --ColorPrimaryDefaultText: var(--text-primary);*/
  --ColorPrimaryDefault: var(--DeepOcean05);
  --ColorPrimaryDefaultText: var(--DeepOcean05);
  --ColorPrimaryHover: var(--DeepOcean07);
  --ColorPrimaryHoverText: var(--AmazingAquamarine-04);
  --ColorSecondaryDefault: var(--formi-mint-04);
  --ColorSecondaryHover: var(--formi-mint-01);
  --ColorSecondaryHoverText: var(--DeepOcean07);

  /* Radii */
  --BiggestRadius-XL: 24px;
  --BigRadius-L: 16px;
  --MediumRadius: 12px;
  --SmallRadius: 8px;
  --ExtraSmallRadius: 4px;

  /* Typography Tokens */
  --font-sans-serif-pangea: "PangeaVAR_2.003", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-serif-nice: "NiceVAR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", serif;

  /* Weights */
  --font-weight-light: 250;
  --font-weight-regular: 350;
  --font-weight-medium: 450;
  --font-weight-semibold: 550;
  --font-weight-bold: 650;

  /* Variable Font Settings */
  --font-settings-heading: "wght" 550, "Ss01" 1, "APRT" 100, "Xtdr" 0, "Grad" 0, "opsz" 50;
  --font-settings-body-light: "wght" 250, "opsz" 6, "MONO" 1;
  --font-settings-body-regular: "wght" 350, "opsz" 6, "MONO" 1;
  --font-settings-body-medium: "wght" 450, "opsz" 6, "MONO" 1;
  --font-settings-body-semibold: "wght" 550, "opsz" 6, "MONO" 1;
  --font-settings-body-bold: "wght" 650, "opsz" 6, "MONO" 1;

  --cta-depth: 4px;

   /* Wave SVGs */
  --wave-svg-default: url("/cdn/shop/files/Single-Retro-v5-5px.svg?v=1761563547");
  --wave-svg-thinner: url("/cdn/shop/files/Single-Retro-v5-3px.svg?v=1761563578");
 
  /* Wave for hover */
  --wave-size: auto 8px; /* width height*/
  --wave-padding: 4px; /* padding vor allem nach oben zum Text */ 
  --wave-fill: var(--ColorPrimaryHover);

  /* Animated Retro Waves */ 
  --wave-width: 55px;          /* Wellenlänge */
  --wave-height: 55px;          /* Höhe der Welle */
  --wave-color: var(--Salmon01);       /* Füllfarbe */
  --wave-speed: 1s;           /* Animationsgeschwindigkeit */

   /* SVG mit Alpha-Kanal (weiss = sichtbar, schwarz = transparent) */
  /*--wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 11'%3E%3Cpath fill='white' fill-opacity='1' d='M12 2C8.27 2 4.47 3.4 0.6 6.3c-.44.33-1.07.24-1.4-.2s-.25-1.07.2-1.4C3.53 1.6 7.73 0 12 0s8.47 1.6 12.6 4.7C28.47 7.6 32.27 9 36 9s7.53-1.4 11.4-4.3c.44-.33 1.07-.24 1.4.2s.25 1.07-.2 1.4C44.47 9.4 40.27 11 36 11s-7.53-1.6-11.4-4.7C20.47 3.4 16.73 2 12 2Z'/%3E%3Crect width='48' height='11' fill='black' fill-opacity='0'/%3E%3C/svg%3E");*/

}



/* =======================================================================
   SELF-HOSTED VARIABLE FONTS
======================================================================= */
@font-face {
  font-family: "PangeaVAR_2.003";
  src: url("/cdn/shop/files/PangeaVAR_2.003.woff2?v=1704839479") format("woff2"),
       url("/cdn/shop/files/PangeaVAR_2.003.ttf?v=1704839488") format("truetype");
  font-display: swap;
  font-weight: 400 700;
  font-style: normal;
  font-variation-settings: "wght" 550, "Ss01" 1, "APRT" 100, "Xtdr" 50, "Grad" 0, "opsz" 50, "MONO" 1;
  font-feature-settings: "dlig","liga","calt";
}

@font-face {
  font-family: "NiceVAR";
  src: url("/cdn/shop/files/NiceVAR.woff2?v=1704804653") format("woff2"),
       url("/cdn/shop/files/NiceVAR.ttf?v=1704809064") format("truetype");
  font-display: swap;
  font-weight: 300 650;
  font-style: normal;
  font-variation-settings: "wght" 350, "opsz" 6, "MONO" 1;
  font-feature-settings: "dlig","liga","calt";
}

/* =======================================================================
   GLOBAL TYPOGRAPHY
======================================================================= */
html { scroll-behavior: smooth; }

body, p, li, a, input, textarea, button {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-feature-settings: "liga","calt";
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  line-height: 1.4;
}

a, p, p.a, li, sr-only {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
}

/* Headings */
h0, .h0, p.h0,
h1, .h1, p.h1,
h2, .h2, p.h2,
h3, .h3, p.h3,
h4, .h4, p.h4,
h5, .h5, p.h5,
h6, .h6, p.h6,
.scrolling-text__text,
.blockquote,
.order-summary__header {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-feature-settings: "liga","calt";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0;
}

/* Blog-Headline in Cards */
.h3 > a {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  line-height: 110%;
}

/* Make <b>/<strong> in headings consistent */
h0 b,  h0 strong,
.h0 b, .h0 strong, p.h0 b, p.h0 strong,
h1 b,  h1 strong, .h1 b, .h1 strong, p.h1 b, p.h1 strong,
h2 b,  h2 strong, .h2 b, .h2 strong, p.h2 b, p.h2 strong,
h3 b,  h3 strong, .h3 b, .h3 strong, p.h3 b, p.h3 strong,
h4 b,  h4 strong, .h4 b, .h4 strong, p.h4 b, p.h4 strong,
h5 b,  h5 strong, .h5 b, .h5 strong, p.h5 b, p.h5 strong,
h6 b,  h6 strong, .h6 b, .h6 strong, p.h6 b, p.h6 strong,
.scrolling-text__text b, .scrolling-text__text strong,
.blockquote b, .blockquote strong,
.order-summary__header b, .order-summary__header strong {
  font-weight: var(--font-weight-bold) !important;
  font-variation-settings: var(--font-settings-heading) !important;
}

.subheading,
.text-subdued,
.bold.text-sm {
  font-family: var(--font-serif-nice) !important;
  font-weight: var(--font-weight-medium);
  font-variation-settings: var(--font-settings-body-medium);
  letter-spacing: 0;
}
.text-subdued { font-variant-numeric: tabular-nums; }

/* Media-overlays & hero headline */
.content-over-media.rounded.bg-custom.text-custom, .h0 {
  color: var(--WhiteClouds);
  text-shadow: 1.5px 1.5px 0 var(--ColorPrimaryDefaultText), 0 0 8px var(--DeepOceanTrans);
}

/* Special headings */
.h2hd, .h2hdarkmint {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-size: 3rem;
  line-height: 1.2em;
  color: var(--ColorPrimaryDefaultText);
}

.bold, a.bold, p.bold {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-feature-settings: "liga","calt";
}

/* Product detail copy spacing */
.product-info__description .prose h6 { margin-bottom: 0; }
.product-info__description .prose h6 + p { margin-top: 0; }

/* ===========================================
   Noah*s Ocean — Drawer Menu Styling
   =========================================== */

/* Gilt für alle Links im geöffneten Menü */
#header-sidebar-menu .panel__wrapper .h3,
#header-sidebar-menu .panel__wrapper .h3 a,
#header-sidebar-menu .panel__wrapper .reversed-link {
  font-size: 2.5rem !important;
  line-height: 1.1;
  color: var(--DeepOcean05); /* dein Markenblau, optional */
}

/* Etwas mehr vertikalen Abstand zwischen Items */
#header-sidebar-menu .v-stack.gap-4 {
  gap: 1rem !important;
}

/* Optional: sanftes Hover-Verhalten */
#header-sidebar-menu a:hover .reversed-link {
  color: var(--ColorPrimaryHover);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* =======================================================================
   HEADER / NAV
======================================================================= */
.iceep-top-strip,
.trade-in-more-info-link {
  font-family: var(--font-serif-nice) !important;
  font-weight: var(--font-weight-regular);
  font-variation-settings: var(--font-settings-body-regular);
}
.iceep-top-strip {
  background-color: var(--formi-mint-04) !important;
  -webkit-backdrop-filter: saturate(180%) blur(13px) !important;
  backdrop-filter: saturate(180%) blur(13px) !important;
}


/* =======================================================================
   Header Logo Switch – Impact Theme (Desktop + Mobile)
======================================================================= */

.header__wrapper {
  height: 89px; /* 89px für zweizeiliges Logo, 72 für einzeiliges */
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

/* Logo-Container: Impact machen lassen, nur positionieren */
.header__logo {
    padding-top: 4px;
    padding-bottom: 10px;
    position: relative;
}

.header__secondary-nav {
    padding-top: 4px;
}


/* Standard-Logo (Wortmarke) */
.header__logo-image {
  max-height: var(--header-logo-height);
  height: auto;
  width: auto;
  display: block;
  transition: opacity 0.4s ease;
}

/* Zweites Logo (Turtle) wird als Pseudo-Element darüber gelegt */
.header__logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* WICHTIG: echte Fläche geben */
  width: 72px;  
  height: 72px;
  max-height: calc(var(--header-logo-height) * 0.8);
  /*width: var(--header-logo-height);
  height: var(--header-logo-height);
  max-height: var(--header-logo-height);*/

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;

  /* 👉 HIER dein Logo eintragen */
  background-image: url("/cdn/shop/files/FavIcon-Loveturtle-fill-version-Logo-NoahsOcean-full-turtle-love-reternal-love-sustainable-premium-beachwear-for-dad-son-swimshorts-bundle-mom-daughter-family-look-bikini-swimsuit.png?v=1764536334");
}

/* Scroll-Zustand: Wortmarke weg, Turtle an */
.header--scrolled .header__logo-image {
  opacity: 0;
}

.header--scrolled .header__logo::after {
  opacity: 1;
}

/* Seach ausblenden */ 
store-header a[href="/search"] {
  display: none !important;
}

/* -------------------------------------------------------------------
   MOBILE: Turtle-Logo kleiner (z.B. 60 % der normalen Höhe)
------------------------------------------------------------------- */
@media (max-width: 749px) {
  .header__logo::after {
    height: 48px;
    max-height: calc(var(--header-logo-height) * 1);
    /*height: calc(var(--header-logo-height) * 0.6);
    max-height: calc(var(--header-logo-height) * 0.6);*/
  }
}

/* ===========================================
   Main Menu items
   =========================================== */
/* === Base State === */
.header__link-list li a {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  font-size: 1.15rem !important;
  color: var(--ColorPrimaryDefault);
  text-decoration: none !important;
  background-image: var(--wave-svg-default);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 0px auto; /* unsichtbar initial */
  padding-bottom: var(--wave-padding);
  transition: color 0.25s ease;
}

/* === Hover === */
.header__link-list li a:hover {
  color: var(--ColorPrimaryHover);
  /*background-image: var(--wave-svg-hover);*/
  background-size: var(--wave-size);
  opacity: 1;
}

/* === Active / Current Page === */
.header__link-list li a[aria-current="page"],
.header__link-list li a:active {
  color: var(--ColorPrimaryDefault);
  background-image: var(--wave-svg-default);
  background-size: var(--wave-size);
}

/* Language/Currency trigger */
.bold.text-sm {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-size: var(--text-base) !important;
  color: var(--ColorPrimaryDefault) !important;
  background-image: var(--wave-svg-default);  
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 0px auto; /* unsichtbar initial */
  padding-bottom: var(--wave-padding);
  transition:
    color 0.25s ease;
}
.bold.text-sm:hover {
  background-size: var(--wave-size);
  color: var(--ColorPrimaryHover) !important;
}

/* Dropdown options */
.popover-listbox__option {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-size: var(--text-base) !important;
  color: var(--ColorPrimaryDefault) !important;
  justify-content: start !important;
  margin-left: 0;
}
.popover-listbox__option:hover {
  color: var(--ColorPrimaryHover) !important;
  background-color: var(--formi-mint-06) !important;
}
.popover-listbox__option[aria-selected=true] {
  font-variation-settings: "wght" 500, "opsz" 6 !important;
  color: var(--ColorPrimaryDefault);
  background-color: var(--formi-mint-04) !important;
  border-style: none !important;
}

.count-bubble {
  background: var(--Salmon01);
  color: var(--WhiteClouds);
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  font-feature-settings: "liga","calt","tnum";
}

/* ==========================================================
   HERO IMAGE + TEXT OVERLAY OPTIMIZATION
   Noah*s Ocean · 2025-10-20
   ========================================================== */

/* Basis: Bildcontainer */
.image-banner.content-over-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--formi-mint-06); /* sanfter Preload-Farbton */
  border-radius: var(--BigRadius-L);
}

/* Bildoptimierung für schnelleres Rendering */
.image-banner.content-over-media img {
  width: 100% !important;
  height: auto !important;
  max-height: 90vh;
  object-fit: cover;
  object-position: center 25%; /* Fokus auf obere Motivfläche */
  display: block;
  opacity: 1 !important;
  transition: none !important;
}

/* Text-Overlay */
.image-banner .content-over-media__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--WhiteClouds);
  text-shadow: 1.5px 1.5px 0 var(--ColorPrimaryDefaultText), 0 0 8px var(--DeepOceanTrans);
  padding: 0 2rem;
  width: 100%;
  z-index: 2;
}

/* Overlay-Texttypografie */
.image-banner .content-over-media__content h1,
.image-banner .content-over-media__content .h0,
.image-banner .content-over-media__content .h1 {
  font-family: var(--font-sans-serif-pangea);
  font-variation-settings: var(--font-settings-heading);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.1em;
  color: var(--WhiteClouds);
  margin-bottom: 0.5em;
}

.image-banner .content-over-media__content p {
  font-family: var(--font-serif-nice);
  font-variation-settings: var(--font-settings-body-regular);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--WhiteClouds);
  margin-top: 0;
}

/* Shopify-Fade deaktivieren (LCP Boost) */
.image-banner.reveal-on-scroll,
.image-banner.reveal-on-scroll * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ----------------------------
   📱 Mobile Anpassung
---------------------------- */
@media (max-width: 749px) {
  .image-banner.content-over-media {
    aspect-ratio: 3 / 4;
    border-radius: var(--BigRadius-L);
  }

  .image-banner.content-over-media img {
    max-height: 70vh;
    object-position: center 20%;
  }

  .image-banner .content-over-media__content {
    top: 55%;
    padding: 0 1.25rem;
  }

  .image-banner .content-over-media__content h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .image-banner .content-over-media__content p {
    font-size: 1rem;
    line-height: 1.4;
  }
}

/* =======================================================================
   BUTTONS / LINKS
======================================================================= */
.button,
.button.button--xl,
.button.button--secondary,
.button.button--xl.trade__checkout,
.reversed-link,
.link, .prose a:not(.button) {
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  font-weight: var(--font-weight-semibold);
  line-height: 1.15em;
  font-feature-settings: "liga","calt";
}

.button,
.button.button--xl {
  background: var(--ColorPrimaryDefault);
  border: 0px solid var(--ColorPrimaryDefault);
  color: var(--WhiteClouds);
  box-shadow:
    0 0 0 0 var(--DeepOcean01),
    0 0 0 0 var(--DeepOcean01);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    /*border-color 0.35s ease,
    box-shadow 0.45s cubic-bezier(0.1, 1.5, 0.66, 1),
    transform 0.45s cubic-bezier(0.1, 1.5, 0.66, 1);*/
}

.button:hover,
.button.button--xl:hover {
  background: var(--ColorPrimaryHover);
  border: 0px solid var(--ColorPrimaryHover);
  color: var(--ColorPrimaryHoverText);
  /*box-shadow:
    0 0 0 0 var(--ColorPrimaryHover),
    0 var(--cta-depth) 0 0 var(--ColorPrimaryHover);
  transform: translateY(calc(-1 * var(--cta-depth)));
  animation: border-angle-rotate 2s infinite linear;*/
}


.button.button--secondary {
  background: var(--ColorSecondaryDefault);
  border: 0px solid var(--ColorSecondaryDefault);
  color: var(--ColorPrimaryDefault);
  /*box-shadow:
    0 0 0 0 var(--ColorPrimaryHover),
    0 0 0 0 var(--ColorPrimaryHover);*/
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    /*border-color 0.35s ease,
    box-shadow 0.45s cubic-bezier(0.1, 1.5, 0.66, 1),
    transform 0.45s cubic-bezier(0.1, 1.5, 0.66, 1);*/
}
.button.button--secondary:hover {
  background: var(--ColorSecondaryHover);
  border: 0px solid var(--ColorSecondaryHover);
  color: var(--ColorSecondaryHoverText);
  /*box-shadow:
    0 0 0 0 var(--ColorPrimaryHover),
    0 var(--cta-depth) 0 0 var(--ColorPrimaryHover);*/
  /*transform: translateY(calc(-1 * var(--cta-depth)));
  animation: border-angle-rotate 2s infinite linear;*/
}

/* button mehr erfahren */ 
.section-blends .impact-text .prose > a.button.button--xl {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-light) !important;
  font-weight: var(--font-weight-light) !important;
  background: var(--WhiteClouds);
  border: 1px solid var(--ColorPrimaryDefault);
  color: var(--ColorPrimaryDefault);
  transition: background-color 0.35s ease, color 0.35s ease,
}

.section-blends .impact-text .prose > a.button.button--xl:hover {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-light) !important;
  font-weight: var(--font-weight-light) !important;
  background: var(--ColorSecondaryHover);
  border: 1px solid var(--WhiteClouds);
  color: var(--ColorPrimaryHover);
  transition: background-color 0.35s ease, color 0.35s ease,
}



/* Textlinks (über Body-Font, bewusst bold) */
.link, .prose a:not(.button), .text-subdued :is(.link,.prose a:not(.button)) {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-semibold) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: rgb(var(--text-color));
  background-position: bottom;
  padding-bottom: 0;
  text-decoration-color: rgb(var(--text-color));
}
.link:hover, .prose a:not(.button):hover, .text-subdued :is(.link,.prose a:not(.button)):hover {
  color: var(--ColorPrimaryHover);
  font-weight: var(--font-weight-bold) !important;
  text-decoration: none !important;
  background-image: var(--wave-svg-default);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: var(--wave-size);
  padding-bottom: var(--wave-padding);
}

/* Hover-Welle für "Bestellhinweis hinzufügen" deaktivieren */
/* Remove Impact Wave Hover for this specific 'link' button */

span.link.text-sm.text-subdued:hover,
span.link.text-sm.text-subdued:focus {
  text-decoration: none !important;
  background-image: var(--wave-svg-default);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: var(--wave-size);
  padding-bottom: var(--wave-padding);
}

/* Footer: kreativfritze.ch Link stylen */
a[href="https://kreativfritze.ch"] {
  color: var(--ColorPrimaryDefault);
  text-decoration: underline;
  transition: color .2s ease, text-decoration-color .2s ease;
}

a[href="https://kreativfritze.ch"]:hover {
  color: var(--ColorPrimaryHover);
  text-decoration: none !important;
  background-image: var(--wave-svg-default);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: var(--wave-size);
  padding-bottom: var(--wave-padding);
}

/*.shopify-payment-button__more-options:hover {
  color: var(--ColorPrimaryHover);
  text-decoration: none !important;
  background-image: var(--wave-svg-default);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: var(--wave-size); 
  padding-bottom: 0px;
  transition:
    color 0.25s ease;
}*/

.reversed-link { font-size: 18px !important; color: var(--ColorPrimaryDefault); }
.reversed-link:hover { color: var(--ColorPrimaryHover); }

.shopify-payment-button__more-options:hover {
  color: var(--ColorPrimaryHover);
  text-decoration: none;
}

@media screen and (pointer: fine) {
  :is(.link, .prose a:not(.button)):hover {  background-size: var(--wave-size);}
  .text-subdued :is(.link, .prose a:not(.button)):hover { color: var(--ColorPrimaryHover); }
  .link-faded-reverse:hover {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--ColorPrimaryHover);
    background-image: var(--wave-svg-default);
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: var(--wave-size);
    padding-bottom: var(--wave-padding);
  }
}

/* Footer menu hover */
.inline-block {
  background-image: var(--wave-svg-thinner);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: var(--wave-size);
  padding-bottom: var(--wave-padding);
  color: var(--ColorPrimaryDefault); background-size: 0px auto;
}
.inline-block:hover { 
  background-size: var(--wave-size);
  color: var(--ColorPrimaryHover);
}

/* =========================================================
   Icon Text combination Carousel
   ========================================================= */

/* ---------- Text Base (nur im Icon-Text-Modul) ---------- */

.section-stack .text-with-icons p {
  font-size: 1em;
  margin-top: 0.05em!important;
  margin-bottom: 0.1rem;
}

.section-stack .text-with-icons p.h4 {
  font-size: 1.15em !important;
  margin-top: 0 !important;
  margin-bottom: 0rem!important;
  padding-top: 0 !important;
}

/* letzter Absatz im Item */
.section-stack .text-with-icons__item p:last-child {
  margin-bottom: 0;
}

/* ---------- Section / Stack (nur wenn Modul enthalten) ---------- */

.section-stack:has(.text-with-icons) {
  padding-top: 1.25rem;
  padding-bottom: 0rem;
}

/* ---------- Text with Icons – Container ---------- */

.section-stack .text-with-icons {
  padding-top: 1rem;
  padding-bottom: 0rem;
  padding-left: 5%;
  padding-right: 5%;
}

/* ---------- Carousel Items ---------- */

.section-stack
  .text-with-icons
  scroll-carousel.text-with-icons__list
  .text-with-icons__item {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

/* ---------- Carousel Item Icon ---------- */
.section-stack
  .text-with-icons
  scroll-carousel.text-with-icons__list
  .text-with-icons__item .image-icon {
    padding-bottom: 0rem;
  }

/* ---------- Mobile Optimization ---------- */

@media (max-width: 767px) {

  /* äusserer Modul-Abstand – minimal */
  .section-stack:has(.text-with-icons) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* kein Extra-Padding auf Container-Ebene */
  .section-stack .text-with-icons {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Slide selbst */
  .section-stack
    .text-with-icons
    scroll-carousel.text-with-icons__list
    .text-with-icons__item {
      padding-top: 1.75rem;
      padding-bottom: 0.5rem;
  }

  /* Textabstände */
  .section-stack .text-with-icons p {
    margin-bottom: 0rem;
  }

  .section-stack .text-with-icons__item p:last-child {
    margin-bottom: 0;
  }
}
}

/* =======================================================================
   BADGES / PRICES
======================================================================= */
.badge {
  background: var(--WhiteClouds);
  border: 1px solid var(--SandMatte-09-Bright);
  color: var(--ColorPrimaryDefaultText);
  align-items: center;
  gap: var(--spacing-1-5);
  padding: 2px var(--spacing-2);
  border-radius: 16px;
  width: max-content;
  font-size: 10px;
  display: flex;
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  margin: 4px 0 0 4px;
}
.badge--on-sale, .badge--primary {
  background: var(--formi-mint-05);
  border: 1px solid var(--SandMatte-09-Bright);
  color: var(--ColorPrimaryHover);
  margin-left: 4px;
}
.badge--sold-out {
  color: var(--WhiteClouds);
}


.product-info__badge-list > .badge.badge--primary { background-color: var(--SandMatte-10-Default) !important; }

/* Preise (bewusst kräftiger) */
.price-list,
.price-list .text-on-sale,
.price-list .line-through {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-medium) !important;
  font-feature-settings: "liga","calt";
  font-weight: var(--font-weight-medium) !important;
  color: var(--ColorPrimaryDefaultText);
  font-size: var(--text-m);
}
.text-on-sale { color: var(--Salmon02) !important; }

/* Banner */
.price-banner { font-weight: 700; }

/* =======================================================================
   MEDIA / PRODUCT CARDS
======================================================================= */
.product-card,
.product-card.bg-custom,
.collection-card,
.media-grid__item,
.collection-banner.content-over-media {
  background-color: var(--SandMatte-09-Bright);
  border-color: var(--SandMatte-09-Bright);
  border-radius: var(--BigRadius-L) !important;
}
.product-card { border-width: 2px; }
.collection-card { border-width: 8px; }

.product-gallery__media {
  background-color: var(--SandMatte-09-Bright);
  border-radius: var(--BigRadius-L) !important;
}

.product-card__image {
  border: var(--ExtraSmallRadius) solid var(--SandMatte-09-Bright) !important;
  border-radius: var(--MediumRadius) var(--MediumRadius) 0 0 !important;
}

.product-card__title,
.collection-card__title,
.product-card__title.a {
  color: var(--ColorPrimaryDefault);
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  font-size: var(--text-lg);
  line-height: 0.9em !important;
}

.content-over-media__media.zoom-image {
  background-color: var(--SandMatte-09-Bright);
  border-color: var(--SandMatte-09-Bright);
  border-width: 0;
  border-radius: 0 !important;
}

@media screen and (pointer: fine) {
  .zoom-image--enabled .zoom-image {
    transform-origin: center;
    transition: transform 1.5s cubic-bezier(.22, 1, .36, 1);
  }
  .zoom-image--enabled .group:hover .zoom-image {
    transform: scale(1.06);
  }
}

/* Sections / boxes / FAQ */
.section.section-boxed.bg-custom {
  background-color: var(--powderblue);
  border-color: var(--powderblue);
  border-width: 0;
  border-radius: var(--BigRadius-L) !important;
}


  /* ✅ Mobile Optimierung */
@media (max-width: 749px) {
  .section.section-boxed.bg-custom {
    margin: 1rem;
  }
  .section-boxed { border-radius: var(--BigRadius-L) !important; }
}

/* =======================================================================
   FORMS / INPUTS
======================================================================= */
.textarea { background-color: var(--WhiteClouds) !important; }

/* Contact – Weiß nur für Name & E-Mail */
.shopify-section--contact .contact-form .input-row > .form-control:nth-child(1) .input.is-floating,
.shopify-section--contact .contact-form .input-row > .form-control:nth-child(2) .input.is-floating {
  background-color: var(--WhiteClouds) !important;
}
input[type="email"].is-floating { background-color: var(--WhiteClouds); }

/* Size selector & quantity */
.block-swatch, .quantity-selector__button { transform: scale(1) !important; }
.block-swatch:hover, .quantity-selector__button:hover {
  background: var(--ColorSecondaryDefault)!important;
  color: var(--ColorPrimaryDefault);
  border-radius: var(--rounded-button);
  transform: scale(1) !important;
}
:checked + .block-swatch, .block-swatch.is-selected { opacity: 1; transform: scale(1) !important; }

/* =======================================================================
   PROSE / RICH TEXT
======================================================================= */
.prose ul { list-style: none !important; padding-left: 0 !important; margin: 0.2em 0 1em !important; }
.prose ul li { position: relative; padding-left: 1em; line-height: 1.5em; margin-bottom: -0.25em !important; margin-top: -0.25em !important; }
.prose ul li::marker { content: none; display: none !important; }
.prose ul li::before { content: '·'; position: absolute; left: 0; top: 0; font-size: 1em; line-height: 1.5em; color: #002699; }
.prose h6 { margin-bottom: 0 !important; }
.prose h6 + p { margin-top: 0 !important; /*line-height: 1.25em !important; */}
.prose ul + h6 { margin-top: 1.25em !important; }

/* Small bullets */
.small-list ul { list-style: none !important; padding-left: 0 !important; margin: 0.2em 0 1em !important; }
.small-list ul li { font-size: 0.2em; position: relative; padding-left: 1em; margin-bottom: 0.1em; line-height: 4em; }
.small-list ul li::before { content: '·'; position: absolute; left: 0; top: 0; font-size: 1em; line-height: 1.5em; color: #002699; }

/* PD page info text */
.prose p.section-heading { margin-top: 1.5em; margin-bottom: 0.25em; font-size: 1rem; }
.prose p.section-heading strong, .h6 {
  font-size: 1.15rem; display: block;
  font-family: var(--font-sans-serif-pangea);
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
}
.prose p.section-heading + p { margin-top: -0.25em; line-height: 1.25em; }

/* Testimonial */
blockquote.testimonial {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-size: 1.5rem; line-height: 1.3; margin: 2.5em 0; padding-left: 1em; border-left: 0; color: #002699;
}
blockquote.testimonial br { line-height: 1.35; }

/* =======================================================================
   COOKIE BANNER
======================================================================= */
.shopify-pc__banner__dialog { border-radius: var(--SmallRadius) !important; margin-bottom: 24px; background: var(--WhiteClouds) !important; }
#shopify-pc__banner__btn-accept, #shopify-pc__prefs__header-accept {
  background: var(--ColorPrimaryDefault) !important; color: var(--WhiteClouds) !important; border: 0 !important; box-shadow: 0 0 0 var(--ColorPrimaryDefault);
  border-radius: var(--SmallRadius) !important;
  font-family: var(--font-sans-serif-pangea) !important; font-variation-settings: var(--font-settings-heading); font-feature-settings: "liga","calt","tnum";
}
#shopify-pc__banner__btn-accept:hover, #shopify-pc__prefs__header-accept:hover {
  background: var(--ColorPrimaryHover) !important; color: var(--WhiteClouds) !important; border-radius: var(--SmallRadius) !important;
  /*box-shadow: 2px 2px 0 var(--ColorPrimaryHover);*/
}
#shopify-pc__prefs__header-decline, #shopify-pc__prefs__header-save, #shopify-pc__banner__btn-decline {
  background: var(--SandMatte-09-Bright) !important;
  color: var(--ColorPrimaryDefault) !important; 
  border: 1px solid var(--WhiteClouds) !important;
  border-radius: var(--SmallRadius) !important;
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-feature-settings: "liga","calt","tnum";
  font-size: 1rem;
}
#shopify-pc__prefs__header-decline:hover, #shopify-pc__prefs__header-save:hover, #shopify-pc__banner__btn-decline:hover {
  background: var(--SandMatte-10-Default) !important; color: var(--ColorSecondaryHoverText) !important; /*box-shadow: 2px 2px 0 var(--ColorPrimaryHover);*/
}

#shopify-pc__banner__btn-manage-prefs:hover, #shopify-pc__banner__body-policy-link:hover {
  color: var(--ColorPrimaryHover);
}

.shopify-pc__prefs__option {
  font-family: var(--font-sans-serif-pangea) !important;
  font-variation-settings: var(--font-settings-heading);
  font-feature-settings: "liga","calt","tnum";
  font-size: 1rem;
}

#shopify-pc__banner__body-title, #shopify-pc__prefs__intro-main {
    font-size: 1rem;
}

/* =======================================================================
   ICEEP / APP EXTENSION
======================================================================= */
.edit-checkout-button > button,
.Checkout-button,
.step-back-button,
.iceep-tradein-category-name,
.iceep-gray-info-text-line,
.iceep-tradein-value,
.iceep-amount-estimated, .trade-in-subheading, .trade-in-title, .iceep-category-label, .iceep-form-item.label,
.iceep-buttons-wrapper .iceep-question-text-button,
.iceep-trade-in-button.primary.trade-in,
.iceep-trade-in-button.secondary.reset-trade-in {
  font-family: var(--font-sans-serif-pangea) !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-feature-settings: "liga","calt","tnum";
  color: var(--ColorPrimaryDefault) !important;
}

button.iceep-side-cart-button.button, button.iceep-side-cart-button.button--xl {
  all: unset !important;              /* macht ihn zu einem nackten Inline-Element */
  display: block !important;          /* block = Breite kontrollierbar */
  width: 55% !important;              /* → Breite des Containers */
  margin: 0 auto !important;
  
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-feature-settings: "liga","calt";
  font-weight: var(--font-weight-regular);
  color: var(--ColorPrimaryDefault) !important;   /* Textlink-Farbe */
  cursor: pointer !important;
  
  text-align: center !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;

  padding: 0.25rem 0 !important;      /* etwas Luft für bessere Klickfläche */
}

button.iceep-side-cart-button.button:hover, button.iceep-side-cart-button.button--xl:hover {
  font-family: var(--font-serif-nice) !important;
  font-variation-settings: var(--font-settings-body-regular);
  font-feature-settings: "liga","calt";
  font-weight: var(--font-weight-regular);
  color: var(--ColorPrimaryHover)!important;
  background: var(--WhiteClouds);
  border: 0px solid var(--ColorSecondaryHover);
}

.trade-in-info,
.iceep-form-tradein,
.iceep-form-item .label,
.iceep-form-item .iceep-input.select,
.iceep-input .option label,
.banner-section,
.banner-paragraph-1 > a {
  font-family: var(--font-serif-nice) !important;
  font-weight: var(--font-weight-regular);
  font-variation-settings: var(--font-settings-body-regular);
  color: var(--DeepOcean05) !important;
}

.iceep-form-tradein { background: var(--WhiteClouds) !important; border-color: var(--SandMatte-09-Bright) !important; border: 2px solid; }
.iceep-form-item .iceep-input.select { padding: 10px 15px 8px; background: var(--WhiteClouds); }
.iceep-form-item .iceep-input-custom-icon { bottom: 34px; right: 35px; }
.iceep-select-custom-icon { top: 15px; right: 35px; }
.x-counter .form__item input { padding: 5px; border: #dfdfdf 1px solid; }
.iceep .form__item select { padding: 8px 5px; border: #dfdfdf 1px solid; }
.flex__item-label { display: flex; align-items: center; }

.iceep .btn-group > button { display: flex; align-items: center; justify-content: center; }
.iceep .flex__item-input button {
  background: transparent; border: 2px solid var(--ColorPrimaryDefault); color: var(--ColorPrimaryDefault);
  display: flex; align-items: center; justify-content: center; transition: all .2s ease-in;
}
.iceep .flex__item-input .btn.is-active { background-color: var(--ColorPrimaryDefault); border: 0; color: var(--WhiteClouds); }

.form__footer-content button { display: flex !important; align-items: center; justify-content: center; color: var(--ColorPrimaryDefault); }
.form__footer-content button:hover { color: var(--WhiteClouds); background-color: var(--ColorPrimaryDefault); }
.x-counter .btn-group .btn--secondary { color: var(--ColorPrimaryDefault); }

/* Side cart */
.trade__checkout { text-decoration: none; display: inline-block; width: 280px; margin: 10px 0; padding: 15px 0; }
.continue-btn { min-width: fit-content !important; margin-right: 5px; }
.buttons-check-cart { width: 100%; padding: 10px 0; }
.section-is-active { display: none !important; }
.trade_in_title { font-size: 21px; margin-bottom: 0 !important; }
.trade_in_text { line-height: 27px; font-size: 16px; }

/* Product page banner */
.banner-section { display: flex; margin: 20px 0; background: var(--SandPageBG); border-color: var(--SandConture); border-width: 2px; padding: 10px; }
.banner-paragraph { width: 85%; }
.banner-paragraph > p { margin: 0; font-size: 14px; color: var(--ColorPrimaryDefault); font-family: sans-serif; }
.banner-image { width: 15%; display: flex; align-items: center; margin: 0 18px 0 10px; }
.banner-image > img { width: 100%; }
.learn-more { background: transparent; border: none; font-size: 14px; color: var(--ColorPrimaryDefault); padding: 0; cursor: pointer; text-decoration: underline; }
.banner-deutch > .banner-paragraph > p,
.banner-deutch > .banner-paragraph > p > .learn-more { font-size: 13px; }
@media only screen and (min-width: 700px) {
  .banner-section { width: 450px; }
  .banner-deutch { width: 475px; }
}
.price-banner { font-weight: 700; }

/* Modal */
.iceep-btn-cls { text-align: center; }
.no-scroll { overflow: hidden; height: 100%; }
#importedPageModal {
  display: none; position: fixed; inset: 0; height: 100vh; width: 100vw;
  background-color: rgba(0,0,0,.4); backdrop-filter: blur(8px); z-index: 2147483648; overflow: hidden; margin: 0;
}
#importedPageModal #importedContent { padding: 20px; width: 100%; max-height: 90vh; z-index: 2147483649; }
.iceep-modal-div h2, .iceep-modal-div h1, .iceep-modal-div h3, .iceep-container-img > p { color: black; }
.iceep-close-modal { cursor: pointer; }
.iceep-title-trade > p, .iceep-steps-take-container > p { color: #2E2A39BF; }
.title-trade > h1 { padding: 0 10px; margin-bottom: 10px; line-height: 1.3; }

/* eligibility */
.eligibility-trade-in-list { display: flex; }
.container-green-cercle { display: flex; align-items: center; margin-right: 6px; }
.green-cercle { width: 8px; }

.banner-paragraph-1 { display: flex; align-items: center; }
.banner-paragraph-1 > img { width: 15px; height: 15px; margin: 0 10px 0 0; }
.banner-paragraph-1 > a {
  text-decoration: underline;
  font-family: var(--font-serif-nice);
  font-weight: var(--font-weight-regular);
  color: rgb(var(--text-color) / .7);
  font-variation-settings: var(--font-settings-body-regular);
  font-size: 12px;
}

.container-green-cercle > .circle { width: 10px; height: 10px; background-color: #1DBF6E; border-radius: 50%; }
.prose > p > a { text-decoration: none; }

/* ICEEP App UI details */
.iceep-form-item .iceep-input.select { background-color: var(--WhiteClouds); }
.iceep-form-item .iceep-input-custom-icon { bottom: 34px; right: 35px; }
.iceep-select-custom-icon { top: 15px; right: 35px; }
.iceep-text-question-label, .iceep-form-item > label {
  font-family: var(--font-serif-nice); !important;
  font-weight: var(--font-weight-semibold);
  font-variation-settings: var(--font-settings-heading);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "liga","calt";
}
.iceep-input .option { color: var(--ColorPrimaryDefault) !important; border: 2px var(--ColorPrimaryDefault) solid !important; }
.iceep-input .option:hover { color:var(--ColorPrimaryHover) !important; border: 2px var(--ColorPrimaryHover) solid !important; }

.iceep-buttons-wrapper .iceep-question-text-button:disabled { background: var(--Salmon01) !important; opacity: .05 !important; }
.iceep-buttons-wrapper .iceep-question-text-button {
  font-family: var(--font-serif-nice); !important;
  font-weight: var(--font-weight-regular)!important;
  text-transform: unset !important;
  background: var(--ColorSecondaryDefault) !important;
  opacity: 1;
  color: var(--ColorPrimaryDefault) !important;
  border-color: var(--ColorSecondaryDefault) !important;
  border-width: 1px !important;
  transition: all .2s ease-in;
}
.iceep-buttons-wrapper .iceep-question-text-button:hover {
  background: var(--ColorSecondaryHover) !important;
  color: var(--ColorPrimaryHover) !important;
  border-color: var(--ColorSecondaryHover) !important;
}

.iceep-custom-btn-answer-label { font-weight: 600 !important; }

.iceep-trade-in-button.primary.trade-in {
  text-transform: unset !important;
  font-family: var(--font-serif-nice) !important;
  font-weight: var(--font-weight-light)!important;
  background: var(--WhiteClouds) !important;
  opacity: 1;
  color: var(--ColorPrimaryDefault) !important;
  border-color: var(--ColorSecondaryDefault) !important;
  border-width: 1px !important;
  transition: all .2s ease-in;
}
.iceep-trade-in-button.primary.trade-in:hover {
  background: var(--ColorSecondaryHover) !important;
  color: var(--ColorPrimaryHover) !important;
  border-color: var(--ColorSecondaryHover) !important;
}

.iceep-trade-in-button.secondary.reset-trade-in {
  font-family: var(--font-serif-nice) !important;
  font-weight: var(--font-weight-light)!important;
  background: var(--ColorSecondaryDefault) !important;
  color: var(--ColorPrimaryDefault) !important;
  border-color: var(--ColorSecondaryDefault) !important;
  border-width: 1px !important;
}
.iceep-trade-in-button.secondary.reset-trade-in:hover {
  background: var(--ColorSecondaryHover) !important;
  color: var(--ColorPrimaryHover) !important;
  border-color: var(--ColorSecondaryHover) !important;
}

.iceep-trade-in-button.secondary.confirm { display: none; }
.iceep-input .option { height: 45px !important; }
.iceep-congrats-container { margin: 0 0 10px; }

/* =======================================================================
   MISC
======================================================================= */
.accordion__toggle.bold, .feature-chart__heading.bold {
  font-family: var(--font-serif-nice);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "wght" 550, "opsz" 12;
}
.text-with-icons.h6 {
  font-family: var(--font-serif-nice);
  font-weight: var(--font-weight-medium);
  font-variation-settings: "wght" 550, "opsz" 12;
  color: #FF667E;
}
.shopify-email-marketing-confirmation__container { color: #FF667E; }

.cart-form.rounded { background-color: var(--SandMatte-09-Bright); border-color: var(--powderblue); border-width: 1px; }
.cart-form__totals { /* reserved */ }

.sr-only:hover { background: var(--ColorPrimaryHover); color: var(--WhiteClouds); }
.max-height { min-height: 200px; }
.min-height { min-height: 150px; }

/* =======================================================================
   Waves
======================================================================= */

/* Wave section divider */ 
.wave-mask {
  display: block;
  width: 100%;
  height: 9px;
  /* Farbe über CSS-Variable – Standard weiß */
  background-color: var(--wave-mask-color, --WhiteClouds) !important;

  /* SVG-Maske */
  -webkit-mask-image: url('/cdn/shop/files/Wave-pattern.svg?v=1760616726');
  -webkit-mask-repeat: round;
  -webkit-mask-size: auto 9px;

  mask-image: url('/cdn/shop/files/Wave-pattern.svg?v=1760616726');
  mask-repeat: round;
  mask-size: auto 9px;

}

/* Animation bewegt die Maske, nicht den Hintergrund */
@keyframes waveDrift {
  from {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
  to {
    -webkit-mask-position: calc(var(--wave-width) * -1) 0;
            mask-position: calc(var(--wave-width) * -1) 0;
  }
}

/* === Retro Wave (volle Breite + animiert + einfärbbar) === */
.wave-mask-retro {
  display: block;
  position: relative;

  /* Full width – unabhängig vom Shopify-Container */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  height: var(--wave-height);
  background-color: var(--wave-mask-color,var(--AmazingAquamarine-04));

  /* SVG als Maske */
  -webkit-mask-image: url('/cdn/shop/files/Single-Retro-smaller.svg?v=1761560704');
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--wave-width) auto;
  -webkit-mask-position: 0 center;
  -webkit-mask-mode: alpha;

  mask-image: url('/cdn/shop/files/Single-Retro-smaller.svg?v=1761560704');
  mask-repeat: repeat-x;
  mask-size: var(--wave-width) auto;
  mask-position: 0 center;
  mask-mode: alpha;

  /* Bewegung */
  animation: waveDrift var(--wave-speed, 7s) linear infinite;

  /* Reset */
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: 1;
}

/* Scrolling Text */
/* Container der Scroll-Section */

/* Jedes scrollende Text-Span als inline-flex, damit Icon daneben sitzt */
.scrolling-text__text {
  display: inline-flex;
  align-items: center; /* vertikal zentriert */
  gap: 0.5rem; /* Abstand zwischen Text und Icon */
}

/* Turtle-Icon nach jedem Textspan */
.scrolling-text__text::after {
  content: "";
  display: inline-block;
  width: 1em;        /* Breite Turtle */
  height: 1em;       /* Höhe Turtle */
  background-image: url("/cdn/shop/files/FavIcon-Loveturtle-fill-version-Logo-NoahsOcean-full-turtle-love-reternal-love-sustainable-premium-beachwear-for-dad-son-swimshorts-bundle-mom-daughter-family-look-bikini-swimsuit.png?v=1767384784");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 2.5em;
  flex-shrink: 0;     /* Icon wird nicht kleiner */
  margin-bottom: 8px;
}

/* Page BG */
body { background-color: var(--formi-mint-05); }