/** Shopify CDN: Minification failed

Line 967:18 Unexpected "{"
Line 967:27 Expected ":"
Line 967:34 Unexpected "{"

**/
/*
  ------------------------------------------------------------------------
  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.4
  Last updated: 2026-07-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
  ------------------------------------------------------------------------
  CHANGELOG v2.4
  - FIX: Mobile Feature-Icons zerschossen — Tippfehler width: 5px → 50px
         (.shopify-section--text-with-icons .image-icon, Media-Query ≤1149px)
  - CLEANUP: Toter/auskommentierter Code entfernt (Header-Localization-Hide,
         wave-mask-SVG, alte Logo-Größen, alter Payment-Button-Hover,
         Grid-Alternative im Icon-Modul, --text-primary-Reste)
  - CLEANUP: Wave-Hover-Muster konsolidiert — eine gemeinsame Regel,
         Abweichungen separat (vorher ~6x Copy-Paste)
  - CLEANUP: Sand-Tokens dedupliziert (#f5f4f0 nur noch 1x definiert,
         Aliase bleiben für Kompatibilität erhalten)
  - CLEANUP: Redundante Regeln entfernt (doppeltes display:flex für
         Drawer-Localization, doppelte Hover-Regeln im pointer:fine-Block)
  - TODO (nicht angefasst, Verhalten unverändert):
         1) Cart-Totals doppelt gelöst (2 Blöcke, s. Markierung) — prüfen
            welcher greift (Cart-Page vs. Drawer), dann einen entfernen.
         2) Mobile Header 72px + Drawer-Menü 1.9rem werden aktuell von
            späteren Regeln (89px / 2.1rem) überschrieben — Reihenfolge
            prüfen, falls die kompakteren Mobile-Werte gewollt sind.
  ------------------------------------------------------------------------
  CHANGELOG v2.3
  - TWEAK: Icon-Text-Modul kompakter (Nikin-orientiert, moderat)
           Heading 18px, Subtitel 15px, Icons 40px, unteres Container-Padding 56px
  ------------------------------------------------------------------------
  CHANGELOG v2.2
  - FIX: Drawer localization sheet bottom-aligned to footer trigger
  - FIX: Drawer localization dropdown left-aligned + contained in panel
  ------------------------------------------------------------------------
  CHANGELOG v2.1
  - FIX: Drawer localization dropdown now left-aligned + contained in panel
  - FIX: Fallback scroll handler für header--scrolled (JS-driven)
  ------------------------------------------------------------------------
*/

/* =======================================================================
   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: rgba(0, 38, 153, 1);
--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: rgba(255, 122, 0, 1);
--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: rgba(230, 235, 242, 1);
--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;
--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: #FAF8F0; /* SAND NEU #FAF8F0 Sand 2025 #F5F4F0 */
--SandConture: var(--SandMatte-10-Default); /* Alias, dedupliziert v2.4 */
--SandFill: var(--SandMatte-10-Default);    /* Alias, dedupliziert v2.4 */
--SandTest: #FAF8F5;
--WhiteClouds: #fff;
--DiamondWhite: #ffffff;
--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);
--ColorSandMatteMain: var(--SandTest);

/* Semantic color aliases */
--ColorOverlayStrong: rgba(230, 242, 242, 0.95);
--ColorOverlayBackdrop: rgba(0, 0, 0, 0.4);
--ColorSuccess: #1DBF6E;
--ColorSuccessAction: #25D366;
--ColorSuccessActionHover: #1EBE5D;
--ColorBorderSubtle: #dfdfdf;
--ColorTextMuted: #2E2A39BF;

/* Legacy aliases (keep for backwards compatibility) */
--FormiMintOverlay95: var(--ColorOverlayStrong);
--ModalBackdrop40: var(--ColorOverlayBackdrop);
--WhatsAppGreen: var(--ColorSuccessAction);
--WhatsAppGreenHover: var(--ColorSuccessActionHover);
--NeutralBorderLight: var(--ColorBorderSubtle);
--TradeInMutedText: var(--ColorTextMuted);
--SuccessGreen: var(--ColorSuccess);

/* 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: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Semantic weights for unified design language */
--font-weight-heading-bold: var(--font-weight-medium);
--font-weight-body-bold: var(--font-weight-regular);
--font-weight-ui-buttons: var(--font-weight-medium);
--font-weight-ui-links: var(--font-weight-regular);

/* Variable Font Settings */
--font-settings-heading: "wght" 500, "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" 500, "opsz" 6, "MONO" 1;
--font-settings-body-semibold: "wght" 350, "opsz" 6, "MONO" 1;
--font-settings-body-bold: "wght" 350, "opsz" 6, "MONO" 1;
--font-settings-ui-links: "wght" 350, "opsz" 6;
--font-settings-ui-semibold: "wght" 500, "opsz" 6;

--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-padding-bottom: 2px;
--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 */
}


/* =======================================================================
   SELF-HOSTED VARIABLE FONTS
======================================================================= */
@font-face {
font-family: "PangeaVAR_2.003";
src: url("/cdn/shop/files/PangeaVAR_2.003.woff2?v=1704839479") format("woff2");
font-display: swap;
font-weight: 400 550;
font-style: normal;
font-variation-settings: "wght" 500, "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");
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.33;
}

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-heading-bold);
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-heading-bold);
font-size: 1em;
font-variation-settings: var(--font-settings-heading);
line-height: 110%;
}
.h3 > a:hover {
color: var(--DeepOcean07);
}

.blog-banner-content {
display: none;
}

.blog-posts-newsletter {
background-color: var(--formi-mint-07);
}

/* 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-heading-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-heading-bold);
font-variation-settings: var(--font-settings-body-bold);
letter-spacing: 0;
}
.text-subdued { font-variant-numeric: tabular-nums; }


/* HOME: Main Teaser – nur diese H0 */
#shopify-section-template--27085859684727__image_with_text_overlay_qAbrFa p.h0 {
font-size: 5.5em !important;
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 600;
text-transform: none;
text-shadow: none !important;
}

/* MOBILE Anpassung – nur Main Teaser H0 */
@media (max-width: 1100px) {
#shopify-section-template--27085859684727__image_with_text_overlay_qAbrFa p.h0 {
font-size: 3em !important;   /* deutlich ruhiger */
line-height: 1.15;
letter-spacing: -0.01em;
  }
}

/* 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-heading-bold);
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-body-bold);
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 — Mobile Menu System
   4 States: Initial · Scrolled · Full-Screen Open · Footer
   =========================================== */

/* ------------------------------------------------------------------
   STATE 1 — INITIAL (Mobile Header, top of page)
   TODO prüfen: height 72px wird derzeit von der späteren globalen
   .header__wrapper-Regel (89px) überschrieben (gleiche Spezifität,
   spätere Quelle gewinnt). Verhalten hier bewusst NICHT geändert.
   ------------------------------------------------------------------ */
@media (max-width: 699px) {
.header__wrapper {
height: 72px;
padding-top: 12px !important;
padding-bottom: 12px !important;
transition: height 0.35s ease, background 0.35s ease,
                backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
  }

.header__main-nav .tap-area svg {
width: 24px;
height: 24px;
stroke-width: 1.5;
  }

.header__logo-image {
transition: opacity 0.35s ease, transform 0.35s ease;
  }

.header__logo::after {
transition: opacity 0.35s ease, transform 0.35s ease;
  }
}

/* ------------------------------------------------------------------
   STATE 2 — AFTER SCROLL (Compact header with turtle)
   ------------------------------------------------------------------ */
@media (max-width: 699px) {
.header--scrolled .header__wrapper {
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
box-shadow: 0 1px 0 rgba(0, 32, 128, 0.06);
  }

.header--scrolled .header__logo::after {
width: 55px;
height: 55px;
  }
}

/* ------------------------------------------------------------------
   STATE 3 — FULL-SCREEN MENU OPEN
   ------------------------------------------------------------------ */

#header-sidebar-menu::part(content) {
background: var(--DiamondWhite) !important;
color: var(--DeepOcean05) !important;
}

#header-sidebar-menu::part(header),
#header-sidebar-menu::part(body),
#header-sidebar-menu::part(footer) {
background: var(--DiamondWhite) !important;
}

#header-sidebar-menu::part(footer) {
border-top: 1px solid rgba(0, 32, 128, 0.1) !important;
}

#header-sidebar-menu .panel-footer {
background: var(--DiamondWhite) !important;
color: var(--DeepOcean05) !important;
}

#header-sidebar-menu .panel-footer__localization-wrapper {
border-top-color: rgba(0, 32, 128, 0.1) !important;
}

/* panel-footer min-height + z-index → see FIX 1 block below */

/* --- Mobile: full viewport takeover --- */
@media (max-width: 699px) {
.drawer {
padding: 0 !important;
  }

#header-sidebar-menu.navigation-drawer {
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
padding: 0 !important;
  }

#header-sidebar-menu::part(content) {
border-radius: 0 !important;
max-height: 100vh !important;
max-height: 100dvh !important;
height: 100% !important;
  }

#header-sidebar-menu::part(header) {
border-bottom: none !important;
padding: 20px 24px 0 !important;
text-align: left !important;
  }

#header-sidebar-menu::part(body) {
padding: 0 !important;
  }

#header-sidebar-menu .panel__wrapper {
padding: 16px 28px 24px !important;
justify-content: flex-start !important;
min-height: 100%;
  }

#header-sidebar-menu .panel__scroller {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
padding-top: 8px;
height: 100%;
flex: 1 1 auto;
  }

/* Close-Button Abstand vom oberen Rand */
navigation-drawer button[is="close-button"],
#header-sidebar-menu button[aria-label="Schließen"],
#header-sidebar-menu button[aria-label="Close"],
#header-sidebar-menu button[aria-label="Fermer"] {
margin-top: 20px !important;
margin-left: 20px !important;
  }

/* Menüpunkte auf Mobile
   TODO prüfen: 1.9rem wird derzeit von der späteren globalen Regel
   (2.1rem !important) überschrieben. Verhalten bewusst NICHT geändert. */
#header-sidebar-menu .panel__wrapper .h3,
#header-sidebar-menu .panel__wrapper .h3 a,
#header-sidebar-menu .panel__wrapper .h3 button,
#header-sidebar-menu .panel__wrapper .reversed-link {
font-size: 1.9rem !important;
line-height: 1.05 !important;
  }

#header-sidebar-menu .panel-footer {
margin-top: auto;
  }
}

@media (min-width: 700px) and (max-width: 999px) {
#header-sidebar-menu .panel__wrapper {
justify-content: flex-start !important;
min-height: 100%;
  }

#header-sidebar-menu .panel__scroller {
flex: 1 1 auto;
  }
}

/* --- Menu items --- */
#header-sidebar-menu .panel__wrapper .h3,
#header-sidebar-menu .panel__wrapper .h3 a,
#header-sidebar-menu .panel__wrapper .h3 button,
#header-sidebar-menu .panel__wrapper .reversed-link {
font-size: 2.1rem !important;
line-height: 1.05 !important;
color: var(--DeepOcean05);
}

#header-sidebar-menu .panel__wrapper .h6,
#header-sidebar-menu .panel__wrapper .h6 a {
color: rgba(0, 32, 100, 0.62) !important;
font-size: 1rem !important;
}

#header-sidebar-menu .panel__wrapper .h6 a:hover {
color: var(--DeepOcean05) !important;
}

#header-sidebar-menu .circle-chevron {
border-color: rgba(0, 32, 100, 0.25) !important;
color: var(--DeepOcean05) !important;
}

#header-sidebar-menu .text-subdued {
color: rgba(0, 32, 100, 0.45) !important;
}

#header-sidebar-menu .v-stack.gap-4 {
gap: 1rem !important;
}

/* Drawer Menu – Wave Hover */
#header-sidebar-menu .reversed-link {
position: relative;
display: inline-block;
background-image: var(--wave-svg-default);
background-repeat: repeat-x;
background-position: bottom;
background-size: 0px auto;
--wave-size: auto 10px;
padding-bottom: 10px !important;
transition: color 0.25s ease;
}

#header-sidebar-menu a:hover .reversed-link {
color: var(--ColorPrimaryHover);
text-decoration: none;
background-size: var(--wave-size);
transition: color 0.2s ease;
}

#header-sidebar-menu a[aria-current="page"] .reversed-link {
background-size: var(--wave-size);
}

/* ← FIX 1: Drawer Localization — stable footer + popover linksbündig */

/* Footer: fixe Mindesthöhe → kein Layout-Shift beim Dropdown-Toggle */
#header-sidebar-menu .panel-footer {
min-height: 56px;
position: relative;
margin-top: auto;
}

/* Footer wrapper: linksbündig, unten ausgerichtet
   (display:flex hält Localization zugleich immer sichtbar) */
#header-sidebar-menu .panel-footer__localization-wrapper {
display: flex !important;
justify-content: flex-start !important;
align-items: flex-end;
gap: 8px;
position: relative;
flex-wrap: wrap !important;
}

/* Konto-Element: immer auf eigener Zeile */
#header-sidebar-menu .panel-footer__localization-wrapper shopify-account {
width: 100% !important;
margin-top: 4px;
}

/* Trigger-Buttons: linksbündig */
#header-sidebar-menu .panel-footer__localization-wrapper .text-with-icon,
#header-sidebar-menu .panel-footer__localization-wrapper button {
justify-content: flex-start !important;
text-align: left;
}

#header-sidebar-menu .panel-footer__localization-wrapper .relative {
position: relative;
}

/* Drawer localization: Desktop = Bottom-Sheet im linken Menü */
@media screen and (min-width: 1000px) {
#header-sidebar-menu .panel-footer__localization-wrapper .relative {
position: static;
  }

x-popover.drawer-localization-popover--sheet.popover[open] {
position: fixed !important;
top: auto !important;
bottom: var(--drawer-sheet-bottom) !important;
left: var(--drawer-sheet-left) !important;
width: var(--drawer-sheet-width) !important;
max-height: var(--drawer-sheet-host-height) !important;
min-width: 0 !important;
max-width: none !important;
padding: var(--spacing-2) !important;
z-index: 1001 !important;
overflow: visible !important;
box-sizing: border-box !important;
visibility: visible !important;
display: block !important;
  }

x-popover.drawer-localization-popover--sheet.popover::part(overlay) {
display: block !important;
position: fixed !important;
top: var(--drawer-overlay-top, 0) !important;
left: var(--drawer-overlay-left, 0) !important;
width: var(--drawer-overlay-width, 100%) !important;
height: var(--drawer-overlay-height, 100%) !important;
right: auto !important;
bottom: auto !important;
min-height: 0 !important;
  }

x-popover.drawer-localization-popover--sheet.popover::part(title) {
display: block !important;
flex: 0 0 auto !important;
  }

x-popover.drawer-localization-popover--sheet.popover::part(outside-close-button) {
display: grid !important;
flex-shrink: 0 !important;
  }

x-popover.drawer-localization-popover--sheet.popover::part(close-button) {
display: none !important;
  }

x-popover.drawer-localization-popover--sheet.popover::part(content) {
height: auto !important;
max-height: var(--drawer-sheet-max-content-height, 75dvh) !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
border-radius: var(--rounded-sm);
box-shadow: var(--shadow-md);
border: 1px solid rgb(var(--border-color));
  }

x-popover.drawer-localization-popover--sheet.popover::part(body) {
flex: 1 1 auto !important;
min-height: 0 !important;
text-align: start;
overflow-y: auto !important;
overscroll-behavior-y: contain !important;
-webkit-overflow-scrolling: touch;
  }
}

/* Optionen: linksbündig, kein Label-Wrapping */
x-popover.drawer-localization-popover--sheet .popover-listbox__option {
color: var(--ColorPrimaryDefault) !important;
justify-content: flex-start !important;
text-align: left;
white-space: nowrap;
}
/* END FIX 1 */

/* Drawer Overlay – Frosted Glass + Stamp */
#header-sidebar-menu::part(overlay) {
background-color: #00134D !important;
background-image: url("/cdn/shop/files/Noahs-ocean-reternal-love-beachwear-stamp-reduced.webp?v=1769720751");
background-repeat: no-repeat;
background-position: calc(620px + (100% - 620px) / 2) center;
background-size: 30%;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}

/* Announcement bar */ 
.announcement-bar__item p {
  font-family: var(--font-sans-serif-pangea) !important;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.announcement-bar__item a {
  /*text-decoration: underline;*/
    font-family: var(--font-sans-serif-pangea) !important;
    font-weight: var(--font-weight-heading-bold) !important;
    font-variation-settings: var(--font-settings-heading) !important;
}

/* ------------------------------------------------------------------
   STATE 4 — FOOTER
   ------------------------------------------------------------------ */
@media (max-width: 699px) {
.header--at-footer .header__wrapper {
background: rgba(var(--header-background), 0.6) !important;
-webkit-backdrop-filter: saturate(200%) blur(20px);
backdrop-filter: saturate(200%) blur(20px);
box-shadow: none;
  }

.header--at-footer.header--scrolled .header__logo::after {
filter: drop-shadow(0 0 8px rgba(178, 255, 255, 0.3));
  }
}

/* =======================================================================
   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-Trans) !important;
-webkit-backdrop-filter: saturate(180%) blur(13px) !important;
backdrop-filter: saturate(180%) blur(13px) !important;
}

/* Impact Drawer – Breite erhöhen (Desktop) */
@media screen and (min-width: 1000px) {
#header-sidebar-menu.navigation-drawer {
width: 620px !important;
max-width: 92vw !important;
  }

#header-sidebar-menu .panel,
#header-sidebar-menu .panel__wrapper {
max-width: 100% !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);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
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");
}

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

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

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

/* -------------------------------------------------------------------
   MOBILE: Turtle-Logo kleiner
------------------------------------------------------------------- */
@media (max-width: 749px) {
.header__logo::after {
height: 48px;
max-height: calc(var(--header-logo-height) * 1);
  }
}

/* ===========================================
   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-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;
display: inline-block;
width: max-content;  /* begrenzt auf Text-Länge */
}
.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-05) !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-05); /* 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;
}

/* Wrapper-Padding des Themes neutralisieren */
#shopify-section-{{ section.id }} {
  --section-spacing-inline: 0px;
  --section-spacing-block-start: 0px;
  --section-spacing-block-end: 0px;
  padding-inline: 0;
  max-width: none;
}

/* Fallback, falls der Wrapper trotzdem begrenzt */
.no-hero {
  width: 100vw;
  max-width: 100vw;
  /*margin-inline: calc(50% - 50vw);*/
}

/* ----------------------------
   📱 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
======================================================================= */

/* Grund-Typografie für Buttons und Links */
.button,
.button.button--xl,
.button.button--secondary,
.button.button--xl.trade__checkout,
.reversed-link {
font-family: var(--font-sans-serif-pangea) !important;
font-variation-settings: var(--font-settings-ui-semibold);
font-weight: var(--font-weight-ui-buttons);
line-height: 1.15em;
font-feature-settings: "liga","calt";
}

/* Primäre Buttons (Standard + XL) */
.button,
.button.button--xl {
/* "Mixin"-ähnliche zentrale Button-Variablen */
--button-transition-duration: 0.35s;
--button-transition-easing: ease;
--button-bg: var(--ColorPrimaryDefault);
--button-border: var(--ColorPrimaryDefault);
--button-text: var(--WhiteClouds);
--button-hover-bg: var(--ColorPrimaryHover);
--button-hover-border: var(--ColorPrimaryHover);
--button-hover-text: var(--ColorPrimaryHoverText);
background: var(--button-bg);
border: 0 solid var(--button-border);
color: var(--button-text);
box-shadow:
0 0 0 0 var(--DeepOcean01),
0 0 0 0 var(--DeepOcean01);
transition:
    background-color var(--button-transition-duration) var(--button-transition-easing),
    border-color var(--button-transition-duration) var(--button-transition-easing),
color var(--button-transition-duration) var(--button-transition-easing);
}

.button:hover,
.button.button--xl:hover {
background: var(--button-hover-bg);
border-color: var(--button-hover-border);
color: var(--button-hover-text);
}

/* Sekundäres Preset ("Mixin") für Button-Farbvariablen */
.button-mixin--secondary,
.button.button--secondary {
--button-bg: var(--ColorSecondaryDefault);
--button-border: var(--ColorSecondaryDefault);
--button-text: var(--ColorPrimaryDefault);
--button-hover-bg: var(--ColorPrimaryHover);
--button-hover-border: var(--ColorPrimaryHover);
--button-hover-text: var(--ColorPrimaryHoverText);
}

/* button mehr erfahren */
.section-blends .impact-text .prose > a.button.button--xl,
.section-blends .impact-text .prose > a.button.button--xl:hover {
font-family: var(--font-serif-nice) !important;
font-variation-settings: var(--font-settings-ui-links) !important;
font-weight: var(--font-weight-ui-links) !important;
}

.section-blends .impact-text .prose > a.button.button--xl {
background: var(--WhiteClouds);
border: 1px solid var(--ColorPrimaryDefault);
color: var(--ColorPrimaryDefault);
transition:
    background-color var(--button-transition-duration) var(--button-transition-easing),
color var(--button-transition-duration) var(--button-transition-easing);
}

.section-blends .impact-text .prose > a.button.button--xl:hover {
background: var(--ColorPrimaryHover);
border: 1px solid var(--WhiteClouds);
color: var(--ColorPrimaryHoverText);
}

/* PDP: "In den Warenkorb" als Primary stylen (Theme setzt ihn
   auf secondary, sobald dynamischer Checkout aktiv ist) */
.buy-buttons .button.button--secondary {
--button-bg: var(--ColorPrimaryDefault);
--button-border: var(--ColorPrimaryDefault);
--button-text: var(--WhiteClouds);
}

/* Cart-Drawer: „Zur Kasse" primär, „Warenkorb ansehen" sekundär */

/* Sekundär – Warenkorb ansehen (Outline) */
#cart-drawer .buy-buttons a.button {
  background-color: transparent !important;
  color: var(--ColorPrimaryDefault, #002699) !important;
  border: 2px solid var(--ColorPrimaryDefault, #002699) !important;
}
#cart-drawer .buy-buttons a.button:hover {
  background-color: var(--ColorPrimaryDefault, #002699) !important;
  color: #fff !important;
}

/* Primär – Zur Kasse (gefüllt) */
#cart-drawer .buy-buttons button[name="checkout"] {
  background-color: var(--ColorPrimaryDefault, #002699) !important;
  color: #fff !important;
  border: 2px solid var(--ColorPrimaryDefault, #002699) !important;
}

/* ===========================================
   WhatsApp CTA (global)
=========================================== */

/* Container */
.whatsapp-cta {
max-width: 720px;
margin: 0 auto;
text-align: center;
}

/* Button */
.whatsapp-button {
background: var(--ColorSuccessAction) !important;
border-color: var(--ColorSuccessAction) !important;
color: var(--WhiteClouds) !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
transition: background 0.2s ease, transform 0.2s ease;
}

.whatsapp-button:hover {
background: var(--ColorSuccessActionHover) !important;
border-color: var(--ColorSuccessActionHover) !important;
}

/* Icon */
.whatsapp-button__icon {
height: 24px;
width: auto;
display: block;
}

/* ===========================================
   Wave-Hover — konsolidiertes Muster (v2.4)
   Basis-Zustände zuerst, dann EINE gemeinsame
   Hover-Regel, dann Abweichungen.
=========================================== */

/* Textlinks – Basis (über Body-Font) */
.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-ui-links) !important;
font-weight: var(--font-weight-ui-links) !important;
color: rgb(var(--text-color));
background-position: bottom;
padding-bottom: 0;
text-decoration-color: rgb(var(--text-color));
}

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

/* Gemeinsame Wave-Hover-Deklarationen (ein Ort statt Copy-Paste) */
.link:hover,
.prose a:not(.button):hover,
.text-subdued :is(.link,.prose a:not(.button)):hover,
a[href="https://kreativfritze.ch"]:hover,
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);
}

/* Abweichung: Textlinks — Farbe, Font-Settings, Margin-Ausgleich */
.link:hover,
.prose a:not(.button):hover,
.text-subdued :is(.link,.prose a:not(.button)):hover {
color: var(--ColorPrimaryHover);
font-variation-settings: var(--font-settings-ui-links) !important;
font-weight: var(--font-weight-ui-links) !important;
margin-bottom: var(--wave-padding);
}

/* Abweichung: kreativfritze.ch — nur Farbwechsel zusätzlich */
a[href="https://kreativfritze.ch"]:hover {
color: var(--ColorPrimaryHover);
}

/* Grössentabelle: stabiles Layout ohne Mikro-Shift beim Hover */
.size-chart-trigger .size-chart-trigger__inner {
display: inline-flex;
align-items: flex-start;
gap: 6px;
}

.size-chart-trigger .size-chart-trigger__icon {
display: inline-flex;
width: 24px;
height: 24px;
line-height: 0;
flex: 0 0 24px;
align-self: flex-start;
margin-top: 1px;
}

.size-chart-trigger .size-chart-trigger__label {
display: inline-block;
font-weight: var(--font-weight-heading-bold) !important;
padding-bottom: calc(var(--wave-padding) + 5px);
border-bottom: 1px solid currentColor;
text-decoration: none;
background-image: var(--wave-svg-default);
background-repeat: repeat-x;
background-position: bottom;
background-size: 0 auto;
}

.size-chart-trigger .size-chart-trigger__label:hover {
color: var(--ColorPrimaryHover);
font-weight: var(--font-weight-heading-bold) !important;
padding-bottom: calc(var(--wave-padding) + 5px);
border-bottom-color: transparent;
text-decoration: none;
background-repeat: repeat-x;
background-position: bottom;
background-size: var(--wave-size);
}

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

.shopify-payment-button__more-options {
display: block;
width: fit-content;
margin-inline: auto;
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: calc(var(--wave-padding) + 1px);
background-image: var(--wave-svg-default);
background-repeat: repeat-x;
background-position: bottom;
background-size: 0 auto;
padding-bottom: var(--wave-padding);
}

.shopify-payment-button__more-options:hover {
color: var(--ColorPrimaryHover);
text-decoration: none !important;
background-size: var(--wave-size);
}

@media screen and (pointer: fine) {
.link-faded-reverse:hover {
font-weight: var(--font-weight-body-bold) !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: 0px auto;
padding-bottom: var(--wave-padding);
color: var(--ColorPrimaryDefault);
display: inline-block;
width: max-content;
}
.inline-block:hover {
background-size: var(--wave-size);
color: var(--ColorPrimaryHover);
}

.brand-definition {
font-family: var(--font-sans-serif-pangea) !important;
font-weight: var(--font-weight-heading-bold);
font-variation-settings: var(--font-settings-heading);
font-feature-settings: "liga","calt";
font-variant-numeric: tabular-nums;
font-size: 0.85em;
line-height: 1.6;
margin-top: 10px;
margin-bottom: 14px;
max-width: 500px;
opacity: 0.9;
}

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

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

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

.section-stack .text-with-icons p.h4 {
font-size: 16px !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: 1.15em;
padding-bottom: 1.15em;
}

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

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

/* Feature-Icons als 2x2-Grid auf Mobile (wie Nikin), kompakter —
   gilt für alle text-with-icons-Blöcke */
@media screen and (max-width: 1149px) {
.shopify-section--text-with-icons .text-with-icons__list {
--text-with-icons-template: repeat(2, 1fr);
row-gap: var(--spacing-4);
column-gap: var(--spacing-4);
  }

.shopify-section--text-with-icons .text-with-icons__item {
--text-with-icons-gap: var(--spacing-1);
  }

/* FIX v2.4: war width: 5px (Tippfehler) → Icons als dünne Striche */
.shopify-section--text-with-icons .image-icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 0.1rem;
  }

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

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

.shopify-section--text-with-icons .text-with-icons__item:last-child:nth-child(odd) {
max-width: calc(100% - var(--spacing-1));
}

/* ---------- 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 {
width: 40px;
height: 40px;
padding-bottom: 0.1rem;
  }

/* ---------- Aeusserer Abstand / Container-Hoehe reduziert ---------- */
.shopify-section--text-with-icons .section.bg-custom {
padding-top: 24px;
padding-bottom: 56px;
}

/* ---------- 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
======================================================================= */

/* Badges – Basis */
.badge {
display: flex;
align-items: center;
gap: var(--spacing-1-5);
width: max-content;
padding: 2px var(--spacing-2);
margin: 4px 0 0 4px;
background: var(--WhiteClouds);
border: 1px solid var(--ColorSandMatteMain);
border-radius: var(--BigRadius-L);
color: var(--ColorPrimaryDefaultText);
font-family: var(--font-sans-serif-pangea) !important;
font-variation-settings: var(--font-settings-heading);
font-size: 10px;
}

.badge--on-sale,
.badge--primary {
background: var(--formi-mint-05);
border-color: var(--ColorSandMatteMain);
color: var(--ColorPrimaryHover);
}

.badge--sold-out {
color: var(--Salmon02);
}

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

/* Preise */
.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-heading-bold) !important;
color: var(--ColorPrimaryDefaultText);
font-size: var(--text-m);
}

.price-list .text-on-sale,
.text-on-sale {
color: var(--Salmon01) !important;
}

.price-banner {
font-weight: var(--font-weight-bold);
}

/* =======================================================================
   MEDIA / PRODUCT CARDS
======================================================================= */

/* Karten – gemeinsame Basis */
.product-card,
.product-card.bg-custom,
.collection-card,
.media-grid__item,
.collection-banner.content-over-media {
background-color: var(--ColorSandMatteMain);
border-color: var(--ColorSandMatteMain) !important;
border-radius: var(--BigRadius-L) !important;
}

.product-card {
border-width: 2px;
}

.collection-card {
border-width: 8px;
}

/* Collection-Banner (Image-Banner) */
image-banner.collection-banner.content-over-media {
display: grid !important;
place-items: center !important;
padding: 0 !important;
}

image-banner.collection-banner.content-over-media > .place-self-center {
place-self: center !important;
padding: 0 !important;
margin: 0 !important;
}

/* Produktgalerie */
.product-gallery__media {
background-color: var(--ColorSandMatteMain);
border-radius: var(--BigRadius-L) !important;
}

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

/* Kartentitel */
.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;
}

/* Zoom-Bild (Produktdetail) */
.content-over-media__media.zoom-image {
background-color: var(--ColorSandMatteMain);
border: 0 solid var(--ColorSandMatteMain);
border-radius: 0 !important;
}

@media screen and (pointer: fine) {
.zoom-image--enabled .zoom-image {
transform-origin: center;
transition: transform 1.5s cubic-bezier(0.22, 1, 0.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: 0 solid var(--powderblue);
border-radius: var(--BigRadius-L) !important;
}

.shopify-section--faq .accordion__content .prose p,
.shopify-section--accordion-content .accordion__content .prose p {
font-size: 0.8em;
}

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

/* =======================================================================
   PRODUCT CARDS – Bildhöhe auf Mobile vereinheitlichen
   Alle Karten 4:5, damit Titel auf gleicher Höhe starten
======================================================================= */
@media (max-width: 749px) {
  .product-card__figure {
    aspect-ratio: 4 / 5;
    width: 100%;
    overflow: hidden;
    background-color: var(--ColorSandMatteMain);
  }

  .product-card__figure .product-card__image,
  .product-card__figure .product-card__image--primary,
  .product-card__figure .product-card__image--secondary {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* 1:1-Flatlays werden geletterboxt, nicht beschnitten */
    aspect-ratio: auto !important;    /* überschreibt aspect-natural */
  }
}

/* =======================================================================
   FORMS / INPUTS
======================================================================= */

/* Textarea & Inputs – Hintergrund */
.textarea,
input[type="email"].is-floating {
background-color: var(--WhiteClouds) !important;
}

/* Contact – Name & E-Mail weiss */
.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;
}

/* Grössenwahl & Mengenwahl (Variant Picker) */
.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
======================================================================= */

/* Listen – Bullet als Punkt, einheitliche Farbe */
.prose ul:not(.h-stack) {
list-style: none !important;
padding-left: 0 !important;
margin: 0.2em 0 0.5em !important;
}

.prose ul:not(.h-stack) li {
position: relative;
padding-left: 0.5em;
line-height: 1.5em;
margin-top: -0.25em !important;
margin-bottom: -0.25em !important;
}

.prose ul:not(.h-stack) li::marker {
content: none;
display: none !important;
}

.prose ul:not(.h-stack) li::before {
content: '·';
position: absolute;
left: 0;
top: 0;
font-size: 1em;
line-height: 1.5em;
color: var(--ColorPrimaryDefault);
}

/* Überschriften & Abstände */
.prose h6 {
margin-bottom: 0 !important;
}

.prose h6 + p {
margin-top: 0 !important;
}

.prose ul + h6 {
margin-top: 1.25em !important;
}

/* Small bullets (kompakte Listen) */
.small-list ul {
list-style: none !important;
padding-left: 0 !important;
margin: 0.2em 0 1em !important;
}

.small-list ul li {
position: relative;
padding-left: 0.5em;
margin-bottom: 0.1em;
font-size: 0.2em;
line-height: 4em;
}

.small-list ul li::before {
content: '·';
position: absolute;
left: 0;
top: 0;
font-size: 1em;
line-height: 1.5em;
color: var(--ColorPrimaryDefault);
}

/* Produktdetail – Section-Headings */
.prose p.section-heading {
margin-top: 1.5em;
margin-bottom: 0.25em;
font-size: 1rem;
}

.prose p.section-heading strong,
.prose .h6 {
display: block;
font-size: 1.15rem;
font-family: var(--font-sans-serif-pangea);
font-weight: var(--font-weight-heading-bold);
font-variation-settings: var(--font-settings-heading);
}

.prose p.section-heading + p {
margin-top: -0.25em;
line-height: 1.25em;
}

/* Produktdetail – Accordion-Typografie (Titel wie Headline, Content wie Copy) */
.product-info__accordion .accordion__toggle.bold,
.product-info__accordion .accordion__toggle.bold span {
font-family: var(--font-sans-serif-pangea);
font-weight: var(--font-weight-heading-bold);
font-variation-settings: var(--font-settings-heading);
font-size: 1.15rem;
line-height: 1.25;
color: var(--ColorPrimaryDefault);
}

.product-info__accordion .accordion__content .prose,
.product-info__accordion .accordion__content .prose p,
.product-info__accordion .accordion__content .prose li {
font-family: var(--font-serif-nice);
font-weight: var(--font-weight-regular);
font-variation-settings: var(--font-settings-body-regular);
font-size: 1rem;
line-height: 1.5;
}

/* Produktdetail – Linie direkt vor den Dropdowns dauerhaft ausblenden */
.product-info__buy-buttons + .product-info__separator {
display: none !important;
}

/* Testimonial-Zitat */
blockquote.testimonial {
font-family: var(--font-sans-serif-pangea) !important;
font-weight: var(--font-weight-heading-bold);
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: var(--ColorPrimaryDefault);
}

blockquote.testimonial br {
line-height: 1.35;
}



/* =======================================================================
   COOKIE BANNER
======================================================================= */
.shopify-pc__banner__dialog {
margin-bottom: 24px;
background: var(--WhiteClouds) !important;
border-radius: var(--SmallRadius) !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;
}

#shopify-pc__prefs__header-decline,
#shopify-pc__prefs__header-save,
#shopify-pc__banner__btn-decline {
background: var(--ColorSandMatteMain) !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;
}

#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;
}

/* ============================================================
   Noah's Ocean - Cart totals fix (2026-07)
   TODO prüfen (v2.4): Cart-Totals wird zweimal gelöst — dieser Block
   (Cart-Page + Mini-Cart/Drawer) UND der Block
   ".shopify-section--main-cart .cart-form__totals-row--total" weiter
   unten. Am Live-Shop prüfen, welcher greift, dann einen entfernen.
   ------------------------------------------------------------
   Problem: Das Impact-Theme setzt auf dem Total-Label
   overflow-wrap:anywhere. In der schmalen Summenspalte (~282px) bricht
   "Gesamtbetrag" dadurch mitten im Wort ("Gesamtbetr/ag") und lange
   Betraege wie "EUR 169,00 EUR" brechen ebenfalls um -> Label und Preis
   sind nicht mehr ausgerichtet.
   Fix: kein Wort-Umbruch, Betrag rechtsbuendig, Total-Schrift minimal
   kleiner, damit alles einzeilig passt. Gilt fuer Warenkorb-Seite und
   Mini-Cart (Drawer).
   ============================================================ */

.cart-form__totals .h-stack,
#cart-drawer .h-stack:has(> .h5) {
align-items: baseline;
column-gap: 0.75rem;
}

.cart-form__totals .h-stack > *,
#cart-drawer .h-stack:has(> .h5) > * {
overflow-wrap: normal;
word-break: normal;
}

.cart-form__totals .h-stack > :last-child,
#cart-drawer .h-stack:has(> .h5) > :last-child {
margin-left: auto;
text-align: right;
}

.cart-form__totals .h5,
#cart-drawer .h-stack:has(> .h5) > .h5 {
font-size: 1.25rem;
line-height: 1.2;
white-space: nowrap;
}

.horizontal-product-list {
  background-color: var(--SandMatte-10-Default);
}

/* =======================================================================
   MISC
======================================================================= */
.accordion__toggle.bold, .feature-chart__heading.bold {
font-family: var(--font-serif-nice);
font-weight: var(--font-weight-heading-bold);
font-variation-settings: var(--font-settings-ui-semibold);
}
.accordion__toggle.bold:hover,
.feature-chart__heading.bold:hover {
color: var(--ColorPrimaryHover);
}
.shopify-section--faq .accordion__toggle.bold:hover .circle-chevron,
.shopify-section--accordion-content .accordion__toggle.bold:hover .circle-chevron {
background: var(--ColorPrimaryHover);
color: var(--WhiteClouds);
}
.text-with-icons.h6 {
font-family: var(--font-serif-nice);
font-weight: var(--font-weight-heading-bold);
font-variation-settings: var(--font-settings-ui-semibold);
color: var(--Salmon02);
}
.shopify-email-marketing-confirmation__container {
color: var(--Salmon02);
}

.cart-form.rounded {
background-color: var(--ColorSandMatteMain);
border: 1px solid var(--powderblue);
}

/* Cart totals: label one line, amount right-aligned
   TODO prüfen (v2.4): zweiter Cart-Totals-Block, s. Hinweis oben */
.shopify-section--main-cart .cart-form__totals-row--total {
align-items: flex-start;
}

.shopify-section--main-cart .cart-form__totals-row--total .cart-form__totals-label {
white-space: nowrap;
}

.shopify-section--main-cart .cart-form__totals-row--total .cart-form__totals-value {
margin-left: auto;
text-align: right;
white-space: nowrap;
}

.sr-only:hover {
background: var(--ColorPrimaryHover);
color: var(--WhiteClouds);
}

.max-height {
min-height: 200px;
}

.min-height {
min-height: 150px;
}

/* ===============================
   Mission Heartbeat – Base Layout (always active)
   =============================== */
.mission-heartbeat {
display: flex;
justify-content: center;
margin: 1rem auto 2rem;
}
.mission-heartbeat__icon {
width: 88px;
height: 88px;
display: block;
}

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

/* Wave section divider */
.wave-mask {
display: block;
width: 100%;
height: 9px;
/* Farbe über CSS-Variable */
background-color: var(--wave-mask-color, var(--WhiteClouds)) !important;
-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;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: var(--wave-height);
background-color: var(--wave-mask-color, var(--AmazingAquamarine-04));
-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;
animation: waveDrift var(--wave-speed, 7s) linear infinite;
margin: 0;
padding: 0;
overflow: visible;
z-index: 1;
}

/* Scrolling Text */
.scrolling-text__text {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.scrolling-text__text::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
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;
margin-bottom: 8px;
}

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

/* Accessibility: mobile tap targets in dot controls (real 44px hit area) */
@media (max-width: 749px) {
.page-dots > button.tap-area {
width: 44px !important;
height: 44px !important;
min-width: 44px;
min-height: 44px;
position: relative;
background: transparent !important;
opacity: 1;
  }

.page-dots > button.tap-area::before {
content: none !important;
  }

.page-dots > button.tap-area::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0.3;
transform: translate(-50%, -50%);
  }

.page-dots > button.tap-area[aria-current="true"]::after {
opacity: 1;
  }

.stretching-dots > button.tap-area::after {
width: var(--spacing-2);
height: var(--spacing-2);
border-radius: var(--spacing-2);
transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1);
  }

.stretching-dots > button.tap-area[aria-current="true"]::after {
width: var(--spacing-6);
  }
}

/* =======================================================================
   MOBILE: Kompaktere Carousel-Dots (USP-Carousel + Produktgalerie)
   - Tap-Targets bleiben >= 24px (WCAG 2.5.8)
   ======================================================================= */
@media (max-width: 749px) {

/* ---------- USP-Carousel (Text with icons) ---------- */

/* Abstand Carousel -> Dots (Theme-Default: 32px) */
.text-with-icons {
gap: var(--spacing-1);
  }

/* 44px-Tap-Buttons erzeugen ~19px Leerraum um den sichtbaren Dot –
   negativ kompensieren, damit die Dots optisch naeher ruecken */
.text-with-icons .page-dots {
margin-top: -8px;
margin-bottom: -8px;
  }

/* Abstand Dots -> Sektionsunterkante (vorher: 56px) */
.shopify-section--text-with-icons .section.bg-custom {
padding-bottom: 12px;
  }

/* ---------- Produktgalerie: Dots-Pille auf dem Bild ---------- */

/* Pille: weniger Innenabstand, weniger Abstand zwischen den Dots */
.product-gallery .page-dots--blurred {
gap: var(--spacing-2-5) var(--spacing-1-5); /* Spalten-Gap 6px statt 16px */
padding: 0 var(--spacing-1-5);              /* vorher 8px 16px */
  }

/* Tap-Buttons kompakter: 28x32 statt 44x44 (sichtbarer Dot bleibt 6px) */
.product-gallery .page-dots--blurred > button.tap-area {
width: 28px !important;
height: 32px !important;
min-width: 28px;
min-height: 32px;
  }
}

/* ---------- Produktkarten: 4:5-Buehne, Quadrate vertikal zentriert, Hover-Bild ohne Beschnitt (Cowork 29.07.2026) ---------- */
.product-card__figure{aspect-ratio:4 / 5;display:flex;align-items:center;justify-content:center}
.product-card__figure > a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.product-card__image--primary{width:auto;max-width:100%;max-height:100%;object-fit:contain}
.product-card__image--secondary{object-fit:contain}

/* ---------- Testimonials: alle Karten auf Hoehe der hoechsten (Cowork 29.07.2026) ---------- */
.testimonial-list{align-items:stretch}
.testimonial-list .testimonial{height:100%}