/* ==========================================================================
   SOAP BEAST - Official Ecommerce Stylesheet
   Directly synchronized with Soap Beast Lab (lab.soapbeast.com) Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Londrina+Solid:wght@100;300;400;900&display=swap');

/* ============================================================
   BRAND FONT FACES (@font-face)
   ============================================================ */
@font-face {
  font-family: 'Dexlite';
  src: url('../fonts/Dexlite.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dexlite Regular';
  src: url('../fonts/Dexlite.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Londrina Thin';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Light';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid Light';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Light.ttf') format('truetype');
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Londrina Regular';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@property --color-orange {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffa052;
}

@property --dynamic-swirl-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffa052;
}

@property --dynamic-swirl-color-b {
  syntax: '<color>';
  inherits: true;
  initial-value: #f8d050;
}

@property --color-orange-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 160, 82, 0.16);
}

@property --color-orange-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #f8d050;
}

@property --color-orange-deep {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffa052;
}

@property --dynamic-base-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #c77826;
}

/* ============================================================
   DESIGN TOKENS - SOAP BEAST & SOAP BEAST LAB SYNCHRONIZED
   ============================================================ */
:root {
  /* ============================================================
     DYNAMIC THEME TRANSITION SYSTEM TOKENS (MANDATORY CANONICAL TIMING)
     All dynamic color-changing elements must inherit or use these tokens.
     ============================================================ */
  --dur-theme: 1.8s;
  --ease-theme: cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition: 1.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Core Backgrounds */
  --bg-primary: #121316;        /* Deep Charcoal / Carbon main page background */
  --bg-secondary: #000000;      /* Full pitch black card & panel background */
  --bg-tertiary: #16171d;       /* Slightly elevated panel backdrop on hover */
  --bg-elevated: #20222a;       /* Dropdowns, tooltips, dialog details */
  --bg-sidebar: #000000;        /* Full pitch black sidebar */

  /* Brand Dynamic Accents (Synchronized across all headers, accents, buttons, and 3D soap) */
  --dynamic-swirl-color: #ffa052;
  --dynamic-swirl-color-b: #f8d050;
  --dynamic-color-a: var(--dynamic-swirl-color, #ffa052);
  --dynamic-color-b: var(--dynamic-swirl-color, #ffa052);
  --dynamic-swirl-glow: transparent;

  --color-orange: var(--dynamic-swirl-color, #ffa052);
  --color-orange-hover: var(--dynamic-swirl-color-b, #ff8c2e);
  --color-orange-deep: var(--dynamic-swirl-color, #e87b20);
  --color-orange-glow: transparent;
  --color-orange-tint: rgba(255, 160, 82, 0.16);

  /* Lab Pastel Soap-mimicking Accents */
  --accent-cyan: #a2d2bf;       /* Pastel Mint Green (Sage) */
  --accent-cyan-glow: transparent;
  
  --accent-blue: #8fbcd4;       /* Pastel Ocean Blue / Indigo */
  --accent-blue-glow: transparent;
  
  --accent-violet: #d3bdf2;     /* Pastel Lavender Purple */
  --accent-violet-glow: transparent;
  
  --accent-pink: #f3c4b6;       /* Pastel Peach/Rose Clay */
  --accent-pink-glow: transparent;
  
  --accent-gold: #f4d99f;       /* Pastel Honey/Oatmeal Gold */

  /* Typography Tokens - Thin Londrina for Clean Artisan Body & Subheads */
  --font-header: 'Dexlite', 'Dexlite Regular', sans-serif;
  --font-subhead: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  --font-subhead-bold: 'Londrina Solid', 'Londrina Regular', sans-serif;
  --font-btn: 'Londrina Solid', 'Londrina Regular', sans-serif;
  --font-body: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography Scale */
  --text-primary: #ffffff;      /* Stark white headings */
  --text-secondary: #9c9c9c;    /* Readable neutral gray body */
  --text-muted: #6b6b6b;
  --text-dim: #565656;
  --text-on-dark: #08080a;      /* Contrast text on light highlights */

  /* Aliases & Compatibility */
  --font-heading: var(--font-header);
  --color-text-muted: var(--text-muted);
  --color-kraft-tint: #c5bcae;
  --color-dark-surface: var(--bg-secondary);
  --color-dark-border: var(--border-color);
  --wonky-radius-btn: 10px;

  /* Borders & Outlines */
  --border-color: rgba(255, 255, 255, 0.14); /* Crisp, tactile outline */
  --border-color-hover: rgba(255, 255, 255, 0.3);

  /* Status Colors */
  --success: #67d393;
  --success-bg: rgba(103, 211, 147, 0.08);
  --success-border: rgba(103, 211, 147, 0.25);
  --danger: #f96450;
  --danger-bg: rgba(249, 100, 80, 0.08);
  --danger-border: rgba(249, 100, 80, 0.25);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ============================================================
     WONKY HAND-CRAFTED GEOMETRY TOKENS (Direct from Lab)
     ============================================================ */
  --wonky-rect: polygon(
    0% 12px,
    13px 0%,
    calc(100% - 14px) 1px,
    100% 11px,
    100% calc(100% - 12px),
    calc(100% - 13px) calc(100% - 1px),
    11px 100%,
    0% calc(100% - 13px)
  );

  --wonky-rect-sm: polygon(
    0% 8px,
    9px 0%,
    calc(100% - 10px) 1px,
    100% 7px,
    100% calc(100% - 8px),
    calc(100% - 9px) 100%,
    8px calc(100% - 1px),
    0% calc(100% - 9px)
  );

  --wonky-rect-lg: polygon(
    0% 18px,
    20px 0%,
    calc(100% - 22px) 1px,
    100% 17px,
    100% calc(100% - 19px),
    calc(100% - 20px) calc(100% - 1px),
    17px 100%,
    0% calc(100% - 21px)
  );

  --wonky-pill: polygon(
    0% 52%,
    16px 0%,
    calc(100% - 15px) 1px,
    100% 48%,
    calc(100% - 16px) 100%,
    14px calc(100% - 1px)
  );

  --wonky-pill-sm: polygon(
    0% 50%,
    9px 0%,
    calc(100% - 9px) 1px,
    100% 50%,
    calc(100% - 10px) 100%,
    8px calc(100% - 1px)
  );

  --wonky-circle: polygon(
    84.6% 17.7%,
    48.1% 2.5%,
    13.1% 17.2%,
    1.2% 50.2%,
    16.0% 84.9%,
    53.1% 97.5%,
    88.5% 78.8%,
    98.8% 49.6%
  );

  --wonky-diamond: polygon(
    49% 1%,
    99% 49%,
    51% 99%,
    1% 51%
  );

  /* Shadows & Easing */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.6);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.7);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.8);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.9);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
}

/* Base Reset & Scaffolding */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
}

section[id] {
  scroll-margin-top: 105px;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.02em;
  min-height: 100vh;
  position: relative;
  background: 
    radial-gradient(circle at 10% 20%, rgba(255, 160, 82, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(162, 210, 191, 0.04) 0%, transparent 45%),
    var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.02em;
}

img, svg {
  display: block;
  max-width: 100%;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6, p, span, a, button, label, input, strong, b, em {
  text-shadow: none !important;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Primary Section Headings with Dexlite */
h1, h2 {
  font-family: var(--font-header);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0.03em;
}

/* Subheads & Module Headlines with Thin Londrina */
h3, h4, h5, h6 {
  font-family: var(--font-subhead);
  font-weight: 300;
  line-height: 1.25;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   UNIVERSAL THEME TRANSITION ARCHITECTURE & RULES:
   RULE: Every element on this website that dynamically responds to the
   soap/scent palette (whether via `--color-orange`, `--dynamic-swirl-color`,
   `currentColor`, SVG `<path>`/`<polygon>`, borders, fills, or backgrounds)
   MUST transition at EXACTLY:
     var(--dur-theme) var(--ease-theme) -> 1.8s cubic-bezier(0.16, 1, 0.3, 1)

   NEVER declare an arbitrary transition timing (such as `1.8s ease` or `0.5s ease`)
   on dynamically color-shifting elements. Standard CSS `ease` is sluggish and lags
   behind the rapid initial curve of `cubic-bezier(0.16, 1, 0.3, 1)`.
   ========================================================================== */

:root {
  transition: --color-orange var(--dur-theme) var(--ease-theme),
              --dynamic-swirl-color var(--dur-theme) var(--ease-theme),
              --dynamic-swirl-color-b var(--dur-theme) var(--ease-theme),
              --color-orange-tint var(--dur-theme) var(--ease-theme),
              --color-orange-hover var(--dur-theme) var(--ease-theme),
              --color-orange-deep var(--dur-theme) var(--ease-theme),
              --dynamic-base-color var(--dur-theme) var(--ease-theme);
}

.text-orange,
.text-swirl,
.hero-title .text-orange,
.section-title .text-orange,
.section-title .text-swirl,
.lab-bridge-title .text-swirl,
.comparison-card h3,
.comparison-card.bad h3,
.comparison-card.good h3,
.hero-feature-box h4,
.verse-banner strong,
.story-text h3,
.story-title .text-orange,
.benefits-header h2 .text-orange,
.benefit-card h3,
.product-title,
.product-price,
.grit-paw.filled,
.ticker-strip,
.ticker-item,
.ticker-item .sb-icon,
.ticker-item .paw,
.hero-soap-tag .tag-scent,
.wonky-badge,
.announcement-bar,
.announcement-ticker span.highlight,
.cart-badge,
.cart-toggle-btn,
.shipping-fill,
.cart-subtotal-amount,
.cart-item-price,
.footer-col h4,
.faq-toggle-icon,
.story-stamp,
.review-stars,
.brand-logo-svg .logo-paw-fill,
.btn-wonky,
.modal-product-subtitle,
.modal-product-price,
.modal-ingredients-header,
.modal-grid strong,
.newsletter-input,
.form-input,
.footer-brought-by-link,
.site-nav,
.dynamic-theme-color,
.dynamic-theme-fill,
.dynamic-theme-stroke,
.dynamic-theme-bg,
.dynamic-theme-border,
.dynamic-theme-transition,
[data-dynamic-theme],
.sb-icon-dynamic,
.icon-dynamic-accent,
.quiz-result-figure-wrap,
#quizResultIconWrap,
.quiz-result-match-tag,
#quizResultSub,
.story-figure-base,
.quiz-opt-btn.selected .opt-icon,
.quiz-opt-btn.selected .opt-title {
  transition: color var(--dur-theme) var(--ease-theme),
              background-color var(--dur-theme) var(--ease-theme),
              border-color var(--dur-theme) var(--ease-theme),
              box-shadow var(--dur-theme) var(--ease-theme),
              fill var(--dur-theme) var(--ease-theme),
              stroke var(--dur-theme) var(--ease-theme),
              -webkit-text-fill-color var(--dur-theme) var(--ease-theme);
}

/* Universal Child SVG Dynamic Fill & Stroke Synchronization */
.quiz-result-figure-wrap svg,
#quizResultIconWrap svg,
.sb-icon-dynamic svg,
.icon-dynamic-accent svg,
.dynamic-theme-transition svg,
[data-dynamic-theme] svg,
.quiz-result-figure-wrap svg *,
#quizResultIconWrap svg *,
.sb-icon-dynamic svg *,
.icon-dynamic-accent svg *,
.dynamic-theme-transition svg *,
[data-dynamic-theme] svg * {
  transition: fill var(--dur-theme) var(--ease-theme),
              stroke var(--dur-theme) var(--ease-theme),
              color var(--dur-theme) var(--ease-theme) !important;
}

/* Universal Helper Classes for Dynamic Theme Elements */
.dynamic-theme-color {
  color: var(--color-orange) !important;
  transition: color var(--dur-theme) var(--ease-theme) !important;
}
.dynamic-theme-fill {
  fill: var(--color-orange) !important;
  transition: fill var(--dur-theme) var(--ease-theme) !important;
}
.dynamic-theme-stroke {
  stroke: var(--color-orange) !important;
  transition: stroke var(--dur-theme) var(--ease-theme) !important;
}
.dynamic-theme-bg {
  background-color: var(--color-orange) !important;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}
.dynamic-theme-border {
  border-color: var(--color-orange) !important;
  transition: border-color var(--dur-theme) var(--ease-theme) !important;
}

/* ==========================================================================
   WONKY BUTTONS & CHIPS (Exact Soap Beast Lab Mechanics)
   ========================================================================== */

.btn-wonky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  font-family: var(--font-btn);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--dynamic-swirl-color, var(--color-orange));
  color: #08080a;
  border: none;
  clip-path: var(--wonky-rect);
  box-shadow: var(--shadow-sm);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
  cursor: pointer;
}

.btn-wonky > *,
.btn-wonky .btn-text,
.btn-wonky .sb-icon {
  position: relative;
  z-index: 2;
}

.btn-wonky .sb-icon {
  background-color: #08080a;
  transition: transform var(--dur-normal) var(--ease);
}

.btn-wonky:not(.btn-wonky-dark)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg')) repeat center/340px 340px;
  filter: url('#swirl-btn-filter-a');
  opacity: 1;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-wonky:not(.btn-wonky-dark)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg')) repeat center/340px 340px;
  filter: url('#swirl-btn-filter-b');
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.swirl-layer-a .btn-wonky:not(.btn-wonky-dark)::before { opacity: 1 !important; }
html.swirl-layer-a .btn-wonky:not(.btn-wonky-dark)::after  { opacity: 0 !important; }
html.swirl-layer-b .btn-wonky:not(.btn-wonky-dark)::before { opacity: 0 !important; }
html.swirl-layer-b .btn-wonky:not(.btn-wonky-dark)::after  { opacity: 1 !important; }

.btn-wonky:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #08080a !important;
}

.btn-wonky:active {
  transform: translateY(0);
}

/* Logo Paw Dynamic Swirl Crossfade */
.logo-foot-layer {
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.swirl-layer-a .logo-swirl-layer-a { opacity: 1 !important; }
html.swirl-layer-a .logo-swirl-layer-b { opacity: 0 !important; }
html.swirl-layer-b .logo-swirl-layer-a { opacity: 0 !important; }
html.swirl-layer-b .logo-swirl-layer-b { opacity: 1 !important; }

.logo-paw-fallback,
.logo-paw-fill {
  fill: var(--dynamic-swirl-color, #ffa052);
  transition: fill 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dynamic Swirl Text Effect (Synchronized across all headlines) */
.text-swirl {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  color: var(--dynamic-swirl-color, var(--color-orange));
  transition: color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-wonky-sm {
  padding: 8px 18px;
  font-size: 0.95rem;
  clip-path: var(--wonky-rect-sm);
}

/* Dark Wonky Outline Button (The Lab & Secondary CTAs) */
.btn-wonky.btn-wonky-dark,
.btn-wonky-dark {
  position: relative;
  background: var(--border-color) !important;
  color: var(--color-orange) !important;
  border: none !important;
  clip-path: var(--wonky-rect);
  overflow: hidden;
  z-index: 1;
  transition: background var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease) !important;
}

.btn-wonky.btn-wonky-dark > *,
.btn-wonky-dark > * {
  position: relative;
  z-index: 2;
}

.btn-wonky.btn-wonky-dark .sb-icon,
.btn-wonky-dark .sb-icon {
  background-color: var(--color-orange) !important;
}

/* Resting inner dark gray background */
.btn-wonky.btn-wonky-dark::before,
.btn-wonky-dark::before {
  content: "" !important;
  position: absolute;
  inset: 1.5px;
  background: rgba(22, 23, 27, 0.96) !important;
  clip-path: var(--wonky-rect);
  z-index: -2;
  opacity: 1 !important;
  filter: none !important;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

/* Sliding swirl fill overlay on hover (Soap Beast Lab fill transition) */
.btn-wonky.btn-wonky-dark::after,
.btn-wonky-dark::after {
  content: "" !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  clip-path: var(--wonky-rect);
  z-index: -1;
  pointer-events: none;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  background-repeat: repeat;
  background-position: center;
  background-size: 340px 340px;
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg'));
  filter: url('#swirl-btn-filter-a');
  opacity: 1 !important;
  transition: width var(--dur-normal) var(--ease) !important;
}

.btn-wonky.btn-wonky-dark:hover,
.btn-wonky-dark:hover {
  background: var(--color-orange) !important;
  color: #08080a !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-wonky.btn-wonky-dark:hover::after,
.btn-wonky-dark:hover::after {
  width: 100% !important;
}

.btn-wonky.btn-wonky-dark:hover .sb-icon,
.btn-wonky-dark:hover .sb-icon {
  background-color: #08080a !important;
  transform: rotate(15deg) scale(1.15);
}

html.swirl-layer-a .btn-wonky.btn-wonky-dark::after,
html.swirl-layer-a .btn-wonky-dark::after {
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg')) !important;
  filter: url('#swirl-btn-filter-a') !important;
}

html.swirl-layer-b .btn-wonky.btn-wonky-dark::after,
html.swirl-layer-b .btn-wonky-dark::after {
  background-image: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg')) !important;
  filter: url('#swirl-btn-filter-b') !important;
}

.btn-wonky-cyan {
  background: rgba(162, 210, 191, 0.16);
  color: var(--accent-cyan);
}

.btn-wonky-cyan .sb-icon {
  background-color: var(--accent-cyan);
}

.btn-wonky-cyan:hover {
  background: var(--accent-cyan);
  color: #08080a;
}

.btn-wonky-cyan:hover .sb-icon {
  background-color: #08080a;
}

/* Icon rotation on button hover (Lab signature animation) */
.btn-wonky img,
.btn-wonky svg,
.nav-link img,
.nav-link svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.btn-wonky:hover img,
.btn-wonky:hover svg,
.nav-link:hover img,
.nav-link:hover svg {
  transform: rotate(15deg) scale(1.15);
}

/* Universal Button Icon Hover Animation:
   - Standard icons (beaker, cart, paws, close, eye, etc.): Scale & Rotate 15deg
   - Arrow icons (.sb-icon-arrow): Slide over to the right (translateX)
*/
.btn-wonky:hover .sb-icon:not(.sb-icon-arrow),
.btn-wonky-dark:hover .sb-icon:not(.sb-icon-arrow),
.btn:hover .sb-icon:not(.sb-icon-arrow),
button:hover .sb-icon:not(.sb-icon-arrow),
a.btn-wonky:hover .sb-icon:not(.sb-icon-arrow),
a:hover .sb-icon:not(.sb-icon-arrow),
.btn-quickview:hover .sb-icon,
.nav-link.active-lab:hover .sb-icon,
.cart-toggle-btn:hover .icon-dynamic-accent,
.cart-toggle-btn:hover .icon-dynamic-cart,
.cart-toggle-btn:hover .sb-icon,
.mobile-nav-lab-btn:hover .sb-icon:not(.sb-icon-arrow),
.mobile-nav-item:hover .sb-icon,
.mobile-nav-parent-link:hover .sb-icon,
.cart-close-btn:hover .sb-icon,
.modal-close-btn:hover .sb-icon,
.mobile-nav-close-btn:hover .sb-icon,
.cart-item-remove:hover .sb-icon {
  transform: rotate(15deg) scale(1.15) !important;
}

.btn-wonky:active .sb-icon:not(.sb-icon-arrow),
.btn-wonky-dark:active .sb-icon:not(.sb-icon-arrow),
.btn:active .sb-icon:not(.sb-icon-arrow),
button:active .sb-icon:not(.sb-icon-arrow),
a:active .sb-icon:not(.sb-icon-arrow) {
  transform: rotate(10deg) scale(1.05) !important;
}

/* Arrow Icons Hover Animation (Slide over to the right) */
.btn-wonky:hover .sb-icon-arrow,
.btn-wonky-dark:hover .sb-icon-arrow,
.btn:hover .sb-icon-arrow,
button:hover .sb-icon-arrow,
a.btn-wonky:hover .sb-icon-arrow,
a:hover .sb-icon-arrow,
.manifesto-cta-btn:hover .sb-icon-arrow,
.comparison-card.good .btn-wonky:hover .sb-icon-arrow,
.footer-parent-callout .btn-wonky:hover .sb-icon-arrow,
.mobile-nav-lab-btn:hover .sb-icon-arrow {
  transform: translateX(5px) !important;
}

.btn-wonky:active .sb-icon-arrow,
.btn-wonky-dark:active .sb-icon-arrow,
.btn:active .sb-icon-arrow,
button:active .sb-icon-arrow,
a.btn-wonky:active .sb-icon-arrow,
a:active .sb-icon-arrow,
.manifesto-cta-btn:active .sb-icon-arrow,
.comparison-card.good .btn-wonky:active .sb-icon-arrow,
.footer-parent-callout .btn-wonky:active .sb-icon-arrow,
.mobile-nav-lab-btn:active .sb-icon-arrow {
  transform: translateX(2px) !important;
}

/* Wonky Badges & Pills */
.wonky-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  font-family: 'Londrina Regular', 'Londrina Solid', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  background-color: var(--color-orange);
  color: #000;
  clip-path: var(--wonky-pill-sm);
  box-shadow: var(--shadow-sm);
}

.wonky-badge-pine {
  background-color: var(--color-orange);
  color: #000;
}

.wonky-badge-gold {
  background-color: var(--accent-gold);
  color: #000;
}

.wonky-badge-blue {
  background-color: var(--accent-blue);
  color: #000;
}

/* ==========================================================================
   ANNOUNCEMENT BAR & NAVIGATION
   ========================================================================== */

.announcement-bar {
  width: 100%;
  background-color: var(--color-orange);
  color: #08080a;
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  text-align: center;
  position: relative;
  z-index: 50;
  overflow: hidden;
  clip-path: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.announcement-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 1.5rem;
}

.announcement-ticker .announcement-item {
  position: relative;
  top: 2px;
}

.announcement-ticker span.highlight {
  background-color: #08080a;
  color: var(--color-orange);
  padding: 0.22rem calc(0.65rem + 6px);
  clip-path: var(--wonky-pill-sm);
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-block;
  letter-spacing: 0.03em;
}

.site-nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: #000000;
  border-bottom: 5px solid transparent;
  z-index: 40;
  padding: calc(0.85rem + 10px) 0;
  transition: padding 0.3s ease, border-color 0.35s ease;
}

.site-nav.scrolled {
  background: #000000;
  padding: calc(0.55rem + 10px) 0;
  border-bottom-color: var(--color-orange);
  box-shadow: none;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo-img {
  height: 38px;
  width: auto;
  transition: transform 0.2s ease;
}

.brand-logo-link:hover .brand-logo-img {
  transform: rotate(-2deg) scale(1.04);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  position: relative;
}

.nav-link {
  font-family: var(--font-subhead);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  transition: color 0.25s ease;
  position: relative;
  display: inline-block;
  padding: 0.2rem 0;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link.active {
  color: #ffffff !important;
  font-family: var(--font-subhead-bold) !important;
  font-weight: 700 !important;
}

.nav-indicator-diamond,
.nav-indicator-triangle {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 20px;
  height: 11px;
  background-color: var(--color-orange);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.25s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
}

/* Main Nav The Lab Button (Smooth Dual-Layer Crossfade to Prevent Gray Midpoints) */
.nav-link.active-lab {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  background: transparent !important;
  color: transparent !important;
  clip-path: var(--wonky-pill-sm) !important;
  border: none !important;
  padding: 0.35rem 0.95rem !important;
  isolation: isolate;
  text-decoration: none;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease) !important;
}

/* Dual-Layer Border Crossfade (Layer A & Layer B) */
.nav-link.active-lab .lab-btn-bg {
  position: absolute;
  inset: 0;
  clip-path: var(--wonky-pill-sm);
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link.active-lab .lab-bg-a {
  background-color: var(--dynamic-color-a, var(--color-orange));
  opacity: 1;
}
.nav-link.active-lab .lab-bg-b {
  background-color: var(--dynamic-color-b, var(--color-orange));
  opacity: 0;
}
html.swirl-layer-a .nav-link.active-lab .lab-bg-a { opacity: 1 !important; }
html.swirl-layer-a .nav-link.active-lab .lab-bg-b { opacity: 0 !important; }
html.swirl-layer-b .nav-link.active-lab .lab-bg-a { opacity: 0 !important; }
html.swirl-layer-b .nav-link.active-lab .lab-bg-b { opacity: 1 !important; }

/* Dark Inner Fill */
.nav-link.active-lab .lab-btn-inner {
  position: absolute;
  inset: 1.5px;
  background: rgba(22, 23, 27, 0.96) !important;
  clip-path: var(--wonky-pill-sm) !important;
  z-index: 1;
  pointer-events: none;
  opacity: 1 !important;
  filter: none !important;
}

/* Sliding swirl fill overlay on hover */
.nav-link.active-lab::after {
  content: "" !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  clip-path: var(--wonky-pill-sm) !important;
  z-index: 2;
  pointer-events: none;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  background-repeat: repeat;
  background-position: center;
  background-size: 320px 320px;
  background-image: var(--dynamic-swirl-img-a, url('Images/Swirls/swirl_in_pot.jpg'));
  filter: url('#swirl-btn-filter-a');
  opacity: 1 !important;
  transition: width var(--dur-normal) var(--ease) !important;
}
.nav-link.active-lab:hover::after {
  width: 100% !important;
}

/* Dual-Layer Content Crossfade (Text + Wizard Icon) */
.nav-link.active-lab .lab-btn-content {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              color var(--dur-normal) var(--ease);
}
.nav-link.active-lab .lab-content-a {
  color: var(--dynamic-color-a, var(--color-orange));
  opacity: 1;
}
.nav-link.active-lab .lab-content-b {
  color: var(--dynamic-color-b, var(--color-orange));
  opacity: 0;
}
html.swirl-layer-a .nav-link.active-lab .lab-content-a { opacity: 1 !important; }
html.swirl-layer-a .nav-link.active-lab .lab-content-b { opacity: 0 !important; }
html.swirl-layer-b .nav-link.active-lab .lab-content-a { opacity: 0 !important; }
html.swirl-layer-b .nav-link.active-lab .lab-content-b { opacity: 1 !important; }

.nav-link.active-lab .sb-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  transition: background-color var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease);
}
.nav-link.active-lab .lab-content-a .sb-icon {
  background-color: var(--dynamic-color-a, var(--color-orange)) !important;
}
.nav-link.active-lab .lab-content-b .sb-icon {
  background-color: var(--dynamic-color-b, var(--color-orange)) !important;
}

/* Hover States */
.nav-link.active-lab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.nav-link.active-lab:hover .lab-btn-content {
  color: #08080a !important;
}
.nav-link.active-lab:hover .sb-icon {
  background-color: #08080a !important;
  transform: rotate(15deg) scale(1.15);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cart-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  clip-path: var(--wonky-rect-sm);
  font-family: var(--font-btn);
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
  z-index: 1;
  cursor: pointer;
}

.cart-toggle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.cart-toggle-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
}

.cart-toggle-btn:hover {
  box-shadow: var(--shadow-sm);
  color: var(--color-orange);
}

.cart-toggle-btn:hover::before {
  background: var(--color-orange);
}

.cart-toggle-btn .icon-dynamic-accent,
.cart-toggle-btn .icon-dynamic-cart {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-toggle-btn:hover .icon-dynamic-accent,
.cart-toggle-btn:hover .icon-dynamic-cart {
  transform: rotate(15deg) scale(1.15);
}

.cart-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background-color: transparent !important;
  color: #08080a;
  border-radius: 0;
  padding: 0;
  margin-left: 0.35rem;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  z-index: 1;
}

.cart-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.13,35.33L96.3,4.91,26.2,34.35,2.38,100.37l29.71,69.38,74.11,25.33,70.71-37.49,20.72-58.33-28.49-63.94Z'/%3E %3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.13,35.33L96.3,4.91,26.2,34.35,2.38,100.37l29.71,69.38,74.11,25.33,70.71-37.49,20.72-58.33-28.49-63.94Z'/%3E %3C/svg%3E") no-repeat center / contain;
  clip-path: var(--wonky-circle);
  z-index: -1;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   HERO SECTION - 3D ROTATING SOAP FLOATING OVER BIGFOOT HAND
   ========================================================================== */

.hero-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: none;
  background-color: var(--bg-primary, #121316);
}

.hero-bg-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.hero-bg-img {
  width: 100%;
  max-width: 1776px; /* Wider reach so image doesn't feel cramped on large screens */
  height: calc(100% + 160px);
  top: -80px;
  left: 50%;
  position: absolute;
  object-fit: cover;
  object-position: center bottom;
  filter: contrast(1.08) saturate(1.1);
  will-change: transform;
  transform: translate3d(-50%, 0, 0);
  /* Soft fade at the outer edges into the dark charcoal background (#121316) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: 
    /* Vertical canopy & grounding gradients preserving full horizontal image clarity */
    linear-gradient(to top, rgba(18, 19, 22, 0.98) 0%, rgba(18, 19, 22, 0.35) 45%, rgba(18, 19, 22, 0.65) 100%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(18, 19, 22, 0.6) 95%);
  pointer-events: none;
}

/* Dedicated mobile/tablet stage bottom fade (hidden on desktop) */
.hero-stage-fade-overlay {
  display: none;
}

/* Volumetric Forest Sun Rays Mimicking Background Image */
.hero-sun-rays {
  position: absolute;
  inset: -15% 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-sun-rays-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(16px);
  transform: translateZ(0);
}

.canopy-sun-glow {
  transform-origin: 500px 5px;
  animation: canopyGlowSteady 10s ease-in-out infinite alternate;
}

.sun-ray-beam {
  transform-origin: 500px 0px;
  will-change: opacity, transform;
}

/* 
 * Staggered Phase System: Exactly half of the rays are visible at any instant.
 * Group A (Rays 1, 3, 5) and Group B (Rays 2, 4, 6) cross-fade in counter-phase (180° offset),
 * with micro-offsets within each group so rays fade in & out separately without "all on" or "all off".
 */
.sun-ray-1 {
  animation: rayPhaseA 8s ease-in-out infinite;
  animation-delay: 0s;
}

.sun-ray-3 {
  animation: rayPhaseB 8s ease-in-out infinite;
  animation-delay: -0.8s;
}

.sun-ray-5 {
  animation: rayPhaseA 8s ease-in-out infinite;
  animation-delay: -1.6s;
}

.sun-ray-2 {
  animation: rayPhaseB 8s ease-in-out infinite;
  animation-delay: -4.0s;
}

.sun-ray-4 {
  animation: rayPhaseA 8s ease-in-out infinite;
  animation-delay: -4.8s;
}

.sun-ray-6 {
  animation: rayPhaseB 8s ease-in-out infinite;
  animation-delay: -5.6s;
}

@keyframes canopyGlowSteady {
  0% {
    opacity: 0.35;
    transform: scale(0.97);
  }
  100% {
    opacity: 0.52;
    transform: scale(1.03);
  }
}

@keyframes rayPhaseA {
  0% {
    opacity: 0.04;
    transform: rotate(-2.2deg) scaleX(0.88);
  }
  50% {
    opacity: 0.58;
    transform: rotate(1.8deg) scaleX(1.12);
  }
  100% {
    opacity: 0.04;
    transform: rotate(-2.2deg) scaleX(0.88);
  }
}

@keyframes rayPhaseB {
  0% {
    opacity: 0.04;
    transform: rotate(1.8deg) scaleX(1.12);
  }
  50% {
    opacity: 0.58;
    transform: rotate(-2.2deg) scaleX(0.88);
  }
  100% {
    opacity: 0.04;
    transform: rotate(1.8deg) scaleX(1.12);
  }
}

.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

#soapCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 3rem;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.1fr;
  align-items: center;
  min-height: 72vh;
  gap: 1.5rem;
}

.hero-col-left {
  pointer-events: auto;
}

.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.hero-eyebrow .wonky-badge,
.hero-tag,
.section-tag {
  background: var(--color-orange-tint, color-mix(in srgb, var(--color-orange) 16%, #14161b)) !important;
  color: var(--color-orange) !important;
  clip-path: var(--wonky-pill-sm) !important;
  font-family: 'Londrina Regular', 'Londrina Solid', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  white-space: nowrap !important;
  transition: background-color var(--dur-theme) var(--ease-theme), color var(--dur-theme) var(--ease-theme) !important;
}

.hero-eyebrow .wonky-badge .sb-icon,
.hero-tag .sb-icon,
.section-tag .sb-icon,
.wonky-badge .sb-icon {
  background-color: var(--color-orange) !important;
  margin-right: 0 !important;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

/* Light / White Background Sections: Solid dynamic color badge container with bold black text */
.section-manifesto .section-tag,
.section-story .section-tag {
  background: var(--color-orange) !important;
  color: #08080a !important;
  transition: background-color var(--dur-theme) var(--ease-theme), color var(--dur-theme) var(--ease-theme) !important;
}

.section-manifesto .section-tag .sb-icon,
.section-story .section-tag .sb-icon {
  background-color: #08080a !important;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

.hero-title {
  font-family: var(--font-header);
  font-size: clamp(3rem, 5.5vw, 4.6rem);
  line-height: 0.95;
  text-transform: none;
  margin-bottom: 1.25rem;
}

.hero-title .text-orange {
  color: var(--color-orange);
  display: inline-block;
  transform: rotate(-1deg);
}

.hero-subtitle {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.025em;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 440px;
  line-height: 1.45;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-col-center {
  height: 100%;
  min-height: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}

/* Scent Tracker Badge over 3D Soap */
.hero-soap-tag {
  pointer-events: auto !important;
  position: relative;
  top: 20px;
  z-index: 25;
  margin-bottom: 1.5rem;
  width: 360px;
  max-width: calc(100% - 1.5rem);
  box-sizing: border-box;
  background: var(--color-orange-tint, color-mix(in srgb, var(--color-orange) 16%, transparent));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none !important;
  clip-path: var(--wonky-rect-sm);
  padding: 0.85rem 1.5rem;
  box-shadow: none;
  text-align: center;
  animation: floatBadge 4s ease-in-out infinite;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-soap-tag::before,
.hero-soap-tag::after {
  display: none !important;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-soap-tag .tag-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.hero-soap-tag .tag-scent {
  font-family: var(--font-header);
  font-size: 1.45rem;
  color: var(--color-orange);
  margin-top: 0.2rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: none !important;
  transition: color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-soap-tag #activeScentSub {
  white-space: nowrap;
  text-shadow: none !important;
}

.soap-switcher-pills {
  display: flex;
  gap: 10px;
  margin-top: 0.85rem;
  justify-content: center;
  align-items: center;
  padding: 8px 6px;
  flex-wrap: nowrap;
}

.soap-pill {
  width: 16px;
  height: 16px;
  clip-path: var(--wonky-diamond);
  background-color: #ffffff !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  position: relative;
  opacity: 0.65;
  transform: scale(0.5);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              filter 0.25s ease;
}

/* Inactive diamond fill: completely white */
.soap-pill::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: var(--wonky-diamond);
  background-color: #ffffff !important;
  pointer-events: none;
  transition: background-color 0.25s ease;
}

.soap-pill:hover {
  transform: scale(0.75);
  opacity: 0.95;
  background-color: #ffffff !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
}

.soap-pill.active {
  transform: scale(1.35);
  border: none !important;
  outline: none !important;
  opacity: 1 !important;
  background-color: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) !important;
}

.soap-pill.active:hover {
  transform: scale(1.4);
}

/* When active, show the vibrant scent color inside the white diamond frame */
.soap-pill.active::after {
  background-color: var(--pill-color, inherit) !important;
}

/* Scent colors bound to each pill's data-soap attribute */
.soap-pill[data-soap="gentleman-bigfoot"],
.soap-pill[data-soap="terracotta-redwood"] { --pill-color: #f96450; }

.soap-pill[data-soap="wildmans-rum"],
.soap-pill[data-soap="rose-clay"] { --pill-color: #ce7665; }

.soap-pill[data-soap="ginger-wood-ape"],
.soap-pill[data-soap="citrus-cedar"] { --pill-color: #ceaa52; }

.soap-pill[data-soap="yetis-furry-fir"],
.soap-pill[data-soap="lavender-woods"] { --pill-color: #68c5ea; }

.soap-pill[data-soap="swamp-mons-tar"],
.soap-pill[data-soap="pine-tar"] { --pill-color: #877fb2; }

.soap-pill[data-soap="abominable-snow-mint"],
.soap-pill[data-soap="peppermint-basil"],
.soap-pill[data-soap="ocean-wave"] { --pill-color: #5ecb99; }

.soap-pill[data-soap="yowie-wowie"],
.soap-pill[data-soap="citrus-sunburst"] { --pill-color: #f2934c; }

/* ============================================================
   OFFICIAL SOAP BEAST ICON SYSTEM (Exclusively Images/Icons/)
   ============================================================ */
.sb-icon {
  display: inline-block;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  flex-shrink: 0;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sizing modifiers */
.sb-icon-xs { width: 14px; height: 14px; }
.sb-icon-sm { width: 18px; height: 18px; }
.sb-icon-md { width: 22px; height: 22px; }
.sb-icon-lg { width: 28px; height: 28px; }
.sb-icon-xl { width: 36px; height: 36px; }

/* Color overrides */
.sb-icon-dynamic { background-color: var(--color-orange); }
.sb-icon-cyan { background-color: var(--accent-cyan); }
.sb-icon-danger { background-color: var(--danger); }
.sb-icon-white { background-color: #ffffff; }
.sb-icon-dim { background-color: #383838; }
.sb-icon-gold { background-color: var(--accent-gold); }
.sb-icon-violet { background-color: var(--accent-violet); }
.sb-icon-orange { background-color: var(--color-orange); }

/* Contextual contrast guarantees (ensures icons always contrast against their background) */
.announcement-bar .sb-icon { background-color: #08080a; }
.btn-wonky .sb-icon { background-color: #08080a; }
.btn-wonky.btn-wonky-dark .sb-icon,
.btn-wonky-dark .sb-icon { background-color: var(--color-orange) !important; }
.btn-wonky.btn-wonky-dark:hover .sb-icon,
.btn-wonky-dark:hover .sb-icon { background-color: #08080a !important; }
.btn-quickview .sb-icon { background-color: #f0f0f2; }
.btn-quickview:hover .sb-icon { background-color: #08080a; }
.hero-feature-box h4 .icon-dynamic-accent,
.grit-paw.filled { background-color: var(--color-orange); }
.grit-paw:not(.filled) { background-color: rgba(255, 255, 255, 0.22); }

/* Specific icon masks mapped directly to self-contained SVG Data URIs */
/* Eliminates CORS blocking on file:// and ensures 100% cross-browser rendering */
.sb-icon-alert {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M114.9,39.65l-30.64-1-59.21,92.97,17.2,30.49h107.45l22.87-32.19-57.68-90.28ZM112.44,143.89l-24.47-.88v-17.44h24.47v18.32ZM108.68,114.27h-16.56l-7.15-40.28,28.99,1.88-5.27,38.4Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M114.9,39.65l-30.64-1-59.21,92.97,17.2,30.49h107.45l22.87-32.19-57.68-90.28ZM112.44,143.89l-24.47-.88v-17.44h24.47v18.32ZM108.68,114.27h-16.56l-7.15-40.28,28.99,1.88-5.27,38.4Z'/%3E %3C/svg%3E");
}
.sb-icon-arrow {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='37.25 69.56 38.49 122.99 86.95 122.99 86.95 162.75 162.75 104.35 96.89 37.25 95.65 69.56 37.25 69.56'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='37.25 69.56 38.49 122.99 86.95 122.99 86.95 162.75 162.75 104.35 96.89 37.25 95.65 69.56 37.25 69.56'/%3E %3C/svg%3E");
}
.sb-icon-bee {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='101.87 71.47 162.38 72.38 182.76 86.8 180.31 122.3 145.5 128.27 101.87 71.47'/%3E%3Cpolygon points='101.87 71.47 37.62 72.38 17.24 86.8 19.69 122.3 54.5 128.27 101.87 71.47'/%3E%3Cpolygon points='75.32 58.37 124.43 57.93 118.68 38.9 100.54 28.73 82.4 40.23 75.32 58.37'/%3E%3Cg%3E%3Cpolygon points='76.24 125.12 77.1 141.83 101.12 146.72 125.36 140.65 125.98 125.46 101.12 130.91 76.24 125.12'/%3E%3Cpolygon points='99.66 119.53 120.73 114.09 102.15 89.22 78.91 114.51 99.66 119.53'/%3E%3Cpolygon points='101.78 158.33 81.05 154.18 94.81 171.27 109.74 171.27 124.65 153.61 124.65 153.52 101.78 158.33'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='101.87 71.47 162.38 72.38 182.76 86.8 180.31 122.3 145.5 128.27 101.87 71.47'/%3E%3Cpolygon points='101.87 71.47 37.62 72.38 17.24 86.8 19.69 122.3 54.5 128.27 101.87 71.47'/%3E%3Cpolygon points='75.32 58.37 124.43 57.93 118.68 38.9 100.54 28.73 82.4 40.23 75.32 58.37'/%3E%3Cg%3E%3Cpolygon points='76.24 125.12 77.1 141.83 101.12 146.72 125.36 140.65 125.98 125.46 101.12 130.91 76.24 125.12'/%3E%3Cpolygon points='99.66 119.53 120.73 114.09 102.15 89.22 78.91 114.51 99.66 119.53'/%3E%3Cpolygon points='101.78 158.33 81.05 154.18 94.81 171.27 109.74 171.27 124.65 153.61 124.65 153.52 101.78 158.33'/%3E%3C/g%3E%3C/svg%3E");
}
.sb-icon-bowtie {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='81.29 111.68 79.62 72.59 86.64 63.91 113.03 62.91 119.71 70.92 120.71 111.35 114.03 120.03 87.64 119.7 81.29 111.68'/%3E %3Cpolygon points='36.22 99.77 68.31 89.07 68.3 77.94 16.14 42.8 3.12 94.64 21.16 153.5 68.97 111.01 68.82 103.85 36.22 99.77'/%3E %3Cpath d='M186.53,42.8l-55.36,35.14.27,8.43c11.14,2.51,31.94,8.35,31.94,8.35,0,0-22.1,3.12-31.53,4.27l.32,9.69,50.02,44.83,14.7-56.19-10.36-54.52Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='81.29 111.68 79.62 72.59 86.64 63.91 113.03 62.91 119.71 70.92 120.71 111.35 114.03 120.03 87.64 119.7 81.29 111.68'/%3E %3Cpolygon points='36.22 99.77 68.31 89.07 68.3 77.94 16.14 42.8 3.12 94.64 21.16 153.5 68.97 111.01 68.82 103.85 36.22 99.77'/%3E %3Cpath d='M186.53,42.8l-55.36,35.14.27,8.43c11.14,2.51,31.94,8.35,31.94,8.35,0,0-22.1,3.12-31.53,4.27l.32,9.69,50.02,44.83,14.7-56.19-10.36-54.52Z'/%3E %3C/svg%3E");
}
.sb-icon-butters {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='41.76 58.25 99.49 85.38 161.75 58.25 102.76 32.12 41.76 58.25'/%3E %3Cpolygon points='34.24 75.31 34.24 141.6 92.7 167.88 92.7 101.96 34.24 75.31'/%3E %3Cpolygon points='111.12 98.65 111.12 167.88 165.76 138.95 165.76 76.41 111.12 98.65'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='41.76 58.25 99.49 85.38 161.75 58.25 102.76 32.12 41.76 58.25'/%3E %3Cpolygon points='34.24 75.31 34.24 141.6 92.7 167.88 92.7 101.96 34.24 75.31'/%3E %3Cpolygon points='111.12 98.65 111.12 167.88 165.76 138.95 165.76 76.41 111.12 98.65'/%3E %3C/svg%3E");
}
.sb-icon-camera {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='79.71 110.81 99.14 129.37 118.4 110.65 99.14 91.94 79.71 110.81'/%3E %3Cpath d='M134.9,65l-18.39-27.71h-35.86l-15.08,25.82-38.7,1.89v83.55l13.18,14.15h118.19l14.9-17.93v-76.95l-38.23-2.83ZM129.66,132.85l-27.05,14.34-28.35-9.69-11.37-26.55,9.11-25.26,26.82-11.26,27.87,11.64,10.9,24.46-7.93,22.32Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='79.71 110.81 99.14 129.37 118.4 110.65 99.14 91.94 79.71 110.81'/%3E %3Cpath d='M134.9,65l-18.39-27.71h-35.86l-15.08,25.82-38.7,1.89v83.55l13.18,14.15h118.19l14.9-17.93v-76.95l-38.23-2.83ZM129.66,132.85l-27.05,14.34-28.35-9.69-11.37-26.55,9.11-25.26,26.82-11.26,27.87,11.64,10.9,24.46-7.93,22.32Z'/%3E %3C/svg%3E");
}
.sb-icon-cart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='53.79 55.52 56.04 137.12 147.4 137.12 146.31 124.13 73.55 121.74 72.99 110.88 152.4 111.88 161.98 59.14 70.34 54.34 69.21 38.63 37.41 35.98 34.02 53.34 53.79 55.52'/%3E %3Cpolygon points='70.55 122.74 55.61 123.27 44.19 133.6 44.19 149.41 55.87 159.01 72.81 159.01 81.84 147.72 81.84 133.04 70.55 122.74'/%3E %3Cpolygon points='146.31 124.13 131.37 124.27 119.95 134.6 119.95 150.41 131.63 160.01 148.57 160.01 157.61 148.72 157.61 134.04 146.31 124.13'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='53.79 55.52 56.04 137.12 147.4 137.12 146.31 124.13 73.55 121.74 72.99 110.88 152.4 111.88 161.98 59.14 70.34 54.34 69.21 38.63 37.41 35.98 34.02 53.34 53.79 55.52'/%3E %3Cpolygon points='70.55 122.74 55.61 123.27 44.19 133.6 44.19 149.41 55.87 159.01 72.81 159.01 81.84 147.72 81.84 133.04 70.55 122.74'/%3E %3Cpolygon points='146.31 124.13 131.37 124.27 119.95 134.6 119.95 150.41 131.63 160.01 148.57 160.01 157.61 148.72 157.61 134.04 146.31 124.13'/%3E %3C/svg%3E");
}
.sb-icon-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M152.88,50.73l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM94.16,134.89l-36.87-27.92,17.95-19.52,17.78,14.37,31.92-31.33,17.78,18.99-48.56,45.41Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M152.88,50.73l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM94.16,134.89l-36.87-27.92,17.95-19.52,17.78,14.37,31.92-31.33,17.78,18.99-48.56,45.41Z'/%3E %3C/svg%3E");
}
.sb-icon-circle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.13,35.33L96.3,4.91,26.2,34.35,2.38,100.37l29.71,69.38,74.11,25.33,70.71-37.49,20.72-58.33-28.49-63.94Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.13,35.33L96.3,4.91,26.2,34.35,2.38,100.37l29.71,69.38,74.11,25.33,70.71-37.49,20.72-58.33-28.49-63.94Z'/%3E %3C/svg%3E");
}
.sb-icon-citrus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='40.96 137.27 47.11 113.26 62.8 89.37 102.02 79.03 128.05 88.66 155.15 108.98 162.46 141.7 184.49 142.5 167.04 85.83 100 53.8 45.08 75.98 15.51 136.34 40.96 137.27'/%3E %3Cpolygon points='107.01 137.51 149.51 139.65 143.1 113.97 107.01 137.51'/%3E %3Cpolygon points='112.72 95.07 105.59 126.81 131.33 110.27 112.72 95.07'/%3E %3Cpath d='M69.93,100.26c3.21,2.85,25.46,32.66,25.46,32.66l5.74-41.8s-34.41,6.29-31.2,9.14Z'/%3E %3Cpolygon points='51.68 134.66 87.4 135.73 62.11 107.4 51.68 134.66'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='40.96 137.27 47.11 113.26 62.8 89.37 102.02 79.03 128.05 88.66 155.15 108.98 162.46 141.7 184.49 142.5 167.04 85.83 100 53.8 45.08 75.98 15.51 136.34 40.96 137.27'/%3E %3Cpolygon points='107.01 137.51 149.51 139.65 143.1 113.97 107.01 137.51'/%3E %3Cpolygon points='112.72 95.07 105.59 126.81 131.33 110.27 112.72 95.07'/%3E %3Cpath d='M69.93,100.26c3.21,2.85,25.46,32.66,25.46,32.66l5.74-41.8s-34.41,6.29-31.2,9.14Z'/%3E %3Cpolygon points='51.68 134.66 87.4 135.73 62.11 107.4 51.68 134.66'/%3E %3C/svg%3E");
}
.sb-icon-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='160.86 133.08 129.35 162.35 98.8 132.02 65.57 161.35 36.65 128.06 69.06 99.95 38.65 67.57 71.94 38.65 101.39 70.52 133.08 41.14 162.35 72.65 130.56 102.56 160.86 133.08'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='160.86 133.08 129.35 162.35 98.8 132.02 65.57 161.35 36.65 128.06 69.06 99.95 38.65 67.57 71.94 38.65 101.39 70.52 133.08 41.14 162.35 72.65 130.56 102.56 160.86 133.08'/%3E %3C/svg%3E");
}
.sb-icon-coconut {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='58.66 45.05 69.8 68.82 92.82 86.64 131.07 94.81 153.72 88.87 131.44 56.94 93.56 40.6 58.66 45.05'/%3E %3Cpath d='M135.15,109.54l-48.52-7.92-23.97-17.39-17.13,3.09,8.02-17.05-18.41-35.98-13.86,48.52,12.87,50.5,53.47,28.71,64.36-17.82,26.74-44.56-43.57,9.9ZM62.29,130.45l-14.16-12.92,19.98-6.06-5.82,18.97ZM101.15,142.15l-1.96-21.8,17.66,8.98-15.7,12.82ZM145.62,135.39l-10.29-16.05,19.98-1.82-9.69,17.86Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='58.66 45.05 69.8 68.82 92.82 86.64 131.07 94.81 153.72 88.87 131.44 56.94 93.56 40.6 58.66 45.05'/%3E %3Cpath d='M135.15,109.54l-48.52-7.92-23.97-17.39-17.13,3.09,8.02-17.05-18.41-35.98-13.86,48.52,12.87,50.5,53.47,28.71,64.36-17.82,26.74-44.56-43.57,9.9ZM62.29,130.45l-14.16-12.92,19.98-6.06-5.82,18.97ZM101.15,142.15l-1.96-21.8,17.66,8.98-15.7,12.82ZM145.62,135.39l-10.29-16.05,19.98-1.82-9.69,17.86Z'/%3E %3C/svg%3E");
}
.sb-icon-exfoliating {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='36.84 164.97 36.15 142.73 65.27 142.82 64.99 165.83 36.84 164.97'/%3E %3Cpolygon points='72.2 128.88 71.52 106.64 100.63 106.73 100.36 129.73 72.2 128.88'/%3E %3Cpolygon points='163.16 106.79 163.85 129.03 134.73 128.94 135.01 105.94 163.16 106.79'/%3E %3Cpolygon points='72.2 57.12 71.52 34.88 100.63 34.97 100.36 57.97 72.2 57.12'/%3E %3Cpolygon points='163.16 35.03 163.85 57.27 134.73 57.18 135.01 34.17 163.16 35.03'/%3E %3Cpolygon points='135.49 143.59 136.18 165.83 107.06 165.74 107.34 142.73 135.49 143.59'/%3E %3Cpolygon points='36.84 93.23 36.15 71 65.27 71.08 64.99 94.09 36.84 93.23'/%3E %3Cpolygon points='135.49 71.85 136.18 94.09 107.06 94 107.34 71 135.49 71.85'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='36.84 164.97 36.15 142.73 65.27 142.82 64.99 165.83 36.84 164.97'/%3E %3Cpolygon points='72.2 128.88 71.52 106.64 100.63 106.73 100.36 129.73 72.2 128.88'/%3E %3Cpolygon points='163.16 106.79 163.85 129.03 134.73 128.94 135.01 105.94 163.16 106.79'/%3E %3Cpolygon points='72.2 57.12 71.52 34.88 100.63 34.97 100.36 57.97 72.2 57.12'/%3E %3Cpolygon points='163.16 35.03 163.85 57.27 134.73 57.18 135.01 34.17 163.16 35.03'/%3E %3Cpolygon points='135.49 143.59 136.18 165.83 107.06 165.74 107.34 142.73 135.49 143.59'/%3E %3Cpolygon points='36.84 93.23 36.15 71 65.27 71.08 64.99 94.09 36.84 93.23'/%3E %3Cpolygon points='135.49 71.85 136.18 94.09 107.06 94 107.34 71 135.49 71.85'/%3E %3C/svg%3E");
}
.sb-icon-flower {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100.53 78.79 80.05 88.35 80.05 111.57 100.53 122.94 119.05 111.25 119.05 89.41 100.53 78.79'/%3E %3Cpolygon points='102.81 69.69 108.73 41.93 123.75 32.37 143.77 42.84 146.96 60.13 124.88 80.2 102.81 69.69'/%3E %3Cpolygon points='95.98 131.48 90.06 158.03 75.04 167.59 55.02 157.12 51.83 139.83 73.91 119.76 95.98 131.48'/%3E %3Cpolygon points='124.68 118.68 145.3 138.19 145.63 155.99 126.26 167.63 109.84 161.34 104.21 132.04 124.68 118.68'/%3E %3Cpolygon points='74.29 81.86 54.7 62.98 54.37 45.18 73.74 33.54 90.16 39.83 95.79 69.13 74.29 81.86'/%3E %3Cpolygon points='71.57 111.9 44.08 119.01 28.82 109.84 29.24 87.24 43.29 76.67 71.11 87.45 71.57 111.9'/%3E %3Cpolygon points='129.52 87.52 155.92 80.95 171.18 90.12 170.76 112.72 156.71 123.29 128.89 112.51 129.52 87.52'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100.53 78.79 80.05 88.35 80.05 111.57 100.53 122.94 119.05 111.25 119.05 89.41 100.53 78.79'/%3E %3Cpolygon points='102.81 69.69 108.73 41.93 123.75 32.37 143.77 42.84 146.96 60.13 124.88 80.2 102.81 69.69'/%3E %3Cpolygon points='95.98 131.48 90.06 158.03 75.04 167.59 55.02 157.12 51.83 139.83 73.91 119.76 95.98 131.48'/%3E %3Cpolygon points='124.68 118.68 145.3 138.19 145.63 155.99 126.26 167.63 109.84 161.34 104.21 132.04 124.68 118.68'/%3E %3Cpolygon points='74.29 81.86 54.7 62.98 54.37 45.18 73.74 33.54 90.16 39.83 95.79 69.13 74.29 81.86'/%3E %3Cpolygon points='71.57 111.9 44.08 119.01 28.82 109.84 29.24 87.24 43.29 76.67 71.11 87.45 71.57 111.9'/%3E %3Cpolygon points='129.52 87.52 155.92 80.95 171.18 90.12 170.76 112.72 156.71 123.29 128.89 112.51 129.52 87.52'/%3E %3C/svg%3E");
}
.sb-icon-globe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.68,73.02l-37.95-37.95-60.49-1.78-42.1,40.32v51l40.32,41.51,61.08.59,40.32-46.25-1.18-47.44ZM148.35,68.87l-21.94-.89-5.64-21.64,27.57,22.53ZM97.92,46.04l5.34-.59,8,25.2h-22.83l9.49-24.61ZM45.44,85.77l26.09-1.48.3,28.76h-26.69l.3-27.28ZM52.26,126.98l21.94.89,5.64,21.64-27.58-22.54ZM73.91,70.94l-24.91-.3,31.43-24.31-6.52,24.61ZM103.56,151l-9.12.59-6.82-24.31,23.65,1.48-7.71,22.24ZM88.88,113.05l1.18-29.95,22.09.59.3,30.84-23.57-1.48ZM120.18,149.52l6.52-24.61,24.91.3-31.43,24.31ZM155.17,110.08l-26.09,1.48-.3-28.76h26.69l-.3,27.28Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M169.68,73.02l-37.95-37.95-60.49-1.78-42.1,40.32v51l40.32,41.51,61.08.59,40.32-46.25-1.18-47.44ZM148.35,68.87l-21.94-.89-5.64-21.64,27.57,22.53ZM97.92,46.04l5.34-.59,8,25.2h-22.83l9.49-24.61ZM45.44,85.77l26.09-1.48.3,28.76h-26.69l.3-27.28ZM52.26,126.98l21.94.89,5.64,21.64-27.58-22.54ZM73.91,70.94l-24.91-.3,31.43-24.31-6.52,24.61ZM103.56,151l-9.12.59-6.82-24.31,23.65,1.48-7.71,22.24ZM88.88,113.05l1.18-29.95,22.09.59.3,30.84-23.57-1.48ZM120.18,149.52l6.52-24.61,24.91.3-31.43,24.31ZM155.17,110.08l-26.09,1.48-.3-28.76h26.69l-.3,27.28Z'/%3E %3C/svg%3E");
}
.sb-icon-heart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100.88 70.13 124.79 39.31 163.11 44.7 172.39 86.75 147.92 129.95 97.68 160.69 54.66 130.8 27.61 90.98 41.39 46.09 76.98 39.31 100.88 70.13'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100.88 70.13 124.79 39.31 163.11 44.7 172.39 86.75 147.92 129.95 97.68 160.69 54.66 130.8 27.61 90.98 41.39 46.09 76.98 39.31 100.88 70.13'/%3E %3C/svg%3E");
}
.sb-icon-history {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='78.91 102.83 31.71 104.76 29.32 152.16 50.35 153.12 49.15 134.73 81.82 167.27 128.46 166.13 170.68 128.39 170.68 71.28 129.65 32.73 80.63 32.73 48.74 56.26 37 86.68 59.58 89.73 66.25 73.17 88.89 54.7 121.52 54.42 148.82 81.24 148.82 117.65 123.04 143.86 90.72 143.37 62.24 122.11 80.64 122.05 78.91 102.83'/%3E %3Cpolygon points='97.13 68.16 95.21 105.75 119.5 125.58 131.4 113.45 111.87 97.34 112.82 67.67 97.13 68.16'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='78.91 102.83 31.71 104.76 29.32 152.16 50.35 153.12 49.15 134.73 81.82 167.27 128.46 166.13 170.68 128.39 170.68 71.28 129.65 32.73 80.63 32.73 48.74 56.26 37 86.68 59.58 89.73 66.25 73.17 88.89 54.7 121.52 54.42 148.82 81.24 148.82 117.65 123.04 143.86 90.72 143.37 62.24 122.11 80.64 122.05 78.91 102.83'/%3E %3Cpolygon points='97.13 68.16 95.21 105.75 119.5 125.58 131.4 113.45 111.87 97.34 112.82 67.67 97.13 68.16'/%3E %3C/svg%3E");
}
.sb-icon-info {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M153,50.42l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM87.01,65.55l24.47.88v17.44h-24.47v-18.32ZM85.51,133.57l1.27-38.4h25.57l2.15,39.28-28.99-.88Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M153,50.42l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM87.01,65.55l24.47.88v17.44h-24.47v-18.32ZM85.51,133.57l1.27-38.4h25.57l2.15,39.28-28.99-.88Z'/%3E %3C/svg%3E");
}
.sb-icon-lye {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M116.66,62.75l-.38-11.55,12.13.38,1.9-24.08-60.94,2.1.76,20.67,12.51-.38v13.44l-51.58,83.47,8.34,25.69h120.85l8.72-26.82-52.29-82.91ZM89.36,89.58l13.18,11.75-11.02,13.18-13.02-11.28,10.86-13.65ZM135.14,145.57l-17.54,10.08-13.74-8.86,3.12-21.48,16.16-7,12.96,10.55-.97,16.71Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M116.66,62.75l-.38-11.55,12.13.38,1.9-24.08-60.94,2.1.76,20.67,12.51-.38v13.44l-51.58,83.47,8.34,25.69h120.85l8.72-26.82-52.29-82.91ZM89.36,89.58l13.18,11.75-11.02,13.18-13.02-11.28,10.86-13.65ZM135.14,145.57l-17.54,10.08-13.74-8.86,3.12-21.48,16.16-7,12.96,10.55-.97,16.71Z'/%3E %3C/svg%3E");
}
.sb-icon-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100 115.98 80.56 99.78 100 84.49 119.44 100.24 100 115.98'/%3E %3Cpolygon points='100.64 65.12 79.92 50.52 100.64 34.6 120.08 50.35 100.64 65.12'/%3E %3Cpolygon points='100.64 165.4 79.92 149.83 100.64 133.91 120.08 149.65 100.64 165.4'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='100 115.98 80.56 99.78 100 84.49 119.44 100.24 100 115.98'/%3E %3Cpolygon points='100.64 65.12 79.92 50.52 100.64 34.6 120.08 50.35 100.64 65.12'/%3E %3Cpolygon points='100.64 165.4 79.92 149.83 100.64 133.91 120.08 149.65 100.64 165.4'/%3E %3C/svg%3E");
}
.sb-icon-mint {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='185.18 113.26 188.62 88.67 159.08 93.24 159.08 111.37 185.18 113.26'/%3E %3Cpolygon points='98.57 43.07 57.84 56.4 11.38 94.83 56.69 139.57 93.98 153.23 136.72 145.2 159.08 111.37 137.29 110.53 108.7 128.1 122.22 108.37 93.69 105.55 60.71 121.79 76.49 103.61 36.18 94.26 71.32 91.68 106.75 94.39 96.58 66.44 125.91 92.85 159.08 93.24 139.96 60.41 98.57 43.07'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='185.18 113.26 188.62 88.67 159.08 93.24 159.08 111.37 185.18 113.26'/%3E %3Cpolygon points='98.57 43.07 57.84 56.4 11.38 94.83 56.69 139.57 93.98 153.23 136.72 145.2 159.08 111.37 137.29 110.53 108.7 128.1 122.22 108.37 93.69 105.55 60.71 121.79 76.49 103.61 36.18 94.26 71.32 91.68 106.75 94.39 96.58 66.44 125.91 92.85 159.08 93.24 139.96 60.41 98.57 43.07'/%3E %3C/svg%3E");
}
.sb-icon-oils {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M136.17,72.98l-33.9-45.19-35.61,44.26-17.03,47.12,15.7,39.26,33.55,13.79,38.72-17.27,12.77-35.13-14.2-46.83ZM82.42,150.07l-9.78-23.2,9.78-8.76,17.58,26.6-17.58,5.36Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M136.17,72.98l-33.9-45.19-35.61,44.26-17.03,47.12,15.7,39.26,33.55,13.79,38.72-17.27,12.77-35.13-14.2-46.83ZM82.42,150.07l-9.78-23.2,9.78-8.76,17.58,26.6-17.58,5.36Z'/%3E %3C/svg%3E");
}
.sb-icon-pinecone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='110.9 69.99 92.53 98.01 110.9 126.04 118.05 98.01 110.9 69.99'/%3E %3Cpolygon points='73.53 69.99 58.34 98.01 73.53 126.04 80.68 98.01 73.53 69.99'/%3E %3Cpolygon points='128.13 116.97 110.9 148.85 129.78 144.45 137.47 132.91 128.13 116.97'/%3E %3Cpolygon points='129.46 98.01 149.6 126.04 156.13 98.01 149.6 66.69 129.46 98.01'/%3E %3Cpolygon points='38.79 81.29 49.25 98.01 39.91 113.95 24.52 96.37 38.79 81.29'/%3E %3Cpolygon points='91.31 116.97 103.86 135.93 87.97 145.82 72.08 145.82 91.31 116.97'/%3E %3Cpolygon points='55.21 115.33 40.1 125.77 50.81 134.15 60.24 130.56 55.21 115.33'/%3E %3Cpolygon points='128.13 79.33 110.9 47.46 129.78 51.85 137.47 63.39 128.13 79.33'/%3E %3Cpolygon points='91.31 79.33 103.86 60.37 87.97 50.48 72.08 50.48 91.31 79.33'/%3E %3Cpolygon points='56.33 79.4 41.22 68.96 51.93 60.58 61.36 64.18 56.33 79.4'/%3E %3Cpath d='M150.75,93.89l24.73-8.52s-.27,30.5-1.1,29.95c-.82-.55-24.78-11.54-24.78-11.54l1.15-9.89Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='110.9 69.99 92.53 98.01 110.9 126.04 118.05 98.01 110.9 69.99'/%3E %3Cpolygon points='73.53 69.99 58.34 98.01 73.53 126.04 80.68 98.01 73.53 69.99'/%3E %3Cpolygon points='128.13 116.97 110.9 148.85 129.78 144.45 137.47 132.91 128.13 116.97'/%3E %3Cpolygon points='129.46 98.01 149.6 126.04 156.13 98.01 149.6 66.69 129.46 98.01'/%3E %3Cpolygon points='38.79 81.29 49.25 98.01 39.91 113.95 24.52 96.37 38.79 81.29'/%3E %3Cpolygon points='91.31 116.97 103.86 135.93 87.97 145.82 72.08 145.82 91.31 116.97'/%3E %3Cpolygon points='55.21 115.33 40.1 125.77 50.81 134.15 60.24 130.56 55.21 115.33'/%3E %3Cpolygon points='128.13 79.33 110.9 47.46 129.78 51.85 137.47 63.39 128.13 79.33'/%3E %3Cpolygon points='91.31 79.33 103.86 60.37 87.97 50.48 72.08 50.48 91.31 79.33'/%3E %3Cpolygon points='56.33 79.4 41.22 68.96 51.93 60.58 61.36 64.18 56.33 79.4'/%3E %3Cpath d='M150.75,93.89l24.73-8.52s-.27,30.5-1.1,29.95c-.82-.55-24.78-11.54-24.78-11.54l1.15-9.89Z'/%3E %3C/svg%3E");
}
.sb-icon-plus,
.sb-icon-plus-sign {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='121.85 166.93 78.88 165.34 78.72 122.29 32.48 121.53 33.57 79.55 78.36 78.59 79.76 34.19 123.75 37.28 122.04 80.64 165.22 82.27 163.63 125.25 122.01 123.92 121.85 166.93'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='121.85 166.93 78.88 165.34 78.72 122.29 32.48 121.53 33.57 79.55 78.36 78.59 79.76 34.19 123.75 37.28 122.04 80.64 165.22 82.27 163.63 125.25 122.01 123.92 121.85 166.93'/%3E %3C/svg%3E");
}
.sb-icon-recipe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='60.12 35.76 32.14 57.6 36.03 170.26 138.21 170.26 135.53 57.6 59.41 57.6 70.83 45.37 150.46 45.37 153.14 147.03 167.86 145.5 167.86 29.74 60.12 35.76'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='60.12 35.76 32.14 57.6 36.03 170.26 138.21 170.26 135.53 57.6 59.41 57.6 70.83 45.37 150.46 45.37 153.14 147.03 167.86 145.5 167.86 29.74 60.12 35.76'/%3E %3C/svg%3E");
}
.sb-icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M166.37,147.83l-32.73-32.23,8.98-8.01,1.26-37.13-26.76-30.8-42.82-5.16-40.68,35.02v44l31.04,28.03h39.87l9.71-8.66,33.2,32.6,18.91-17.66ZM88.03,119.75l-32.11-32.86,32.11-30.58,31.04,30.58-31.04,32.86Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M166.37,147.83l-32.73-32.23,8.98-8.01,1.26-37.13-26.76-30.8-42.82-5.16-40.68,35.02v44l31.04,28.03h39.87l9.71-8.66,33.2,32.6,18.91-17.66ZM88.03,119.75l-32.11-32.86,32.11-30.58,31.04,30.58-31.04,32.86Z'/%3E %3C/svg%3E");
}
.sb-icon-settings {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M154.36,105.73l-1.25-13.83,17.71-6.78-11.42-25.5-16,8.68-10.16-8.46,9.98-15.21-24.17-14.01-9.36,19.41h-16.07l-5.68-19.08-26.3,9.45,7.23,16.14-11.45,11.73-17.53-8.97-11.33,25.54,18.18,6.46v15.95l-17.55,6.72,11.42,25.5,16.76-9.09,12.23,11.19-8.78,15.17,24.92,12.64,7.78-18.76,15.11.81,5.46,15.81,25.87-10.57-7.08-14.15,11.49-13.25,15.77,8.06,11.33-25.54-17.08-6.07ZM102.49,126.15l-27.22-23.68,25.93-26.87,27.29,21.56-26,28.99Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M154.36,105.73l-1.25-13.83,17.71-6.78-11.42-25.5-16,8.68-10.16-8.46,9.98-15.21-24.17-14.01-9.36,19.41h-16.07l-5.68-19.08-26.3,9.45,7.23,16.14-11.45,11.73-17.53-8.97-11.33,25.54,18.18,6.46v15.95l-17.55,6.72,11.42,25.5,16.76-9.09,12.23,11.19-8.78,15.17,24.92,12.64,7.78-18.76,15.11.81,5.46,15.81,25.87-10.57-7.08-14.15,11.49-13.25,15.77,8.06,11.33-25.54-17.08-6.07ZM102.49,126.15l-27.22-23.68,25.93-26.87,27.29,21.56-26,28.99Z'/%3E %3C/svg%3E");
}
.sb-icon-share {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='80.34 96.08 123.12 72.93 138.71 81.59 163.16 66.15 163.16 37.3 138.71 23.28 111.65 35.9 111.65 55.89 70.88 81.43 53.29 71.66 28.83 87.1 28.83 115.96 53.29 129.97 70.84 121.79 111.65 145.98 111.65 164.7 136.11 178.72 163.16 166.1 163.16 135.44 136.11 120.41 121.24 129.8 80.34 109.06 80.34 96.08'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='80.34 96.08 123.12 72.93 138.71 81.59 163.16 66.15 163.16 37.3 138.71 23.28 111.65 35.9 111.65 55.89 70.88 81.43 53.29 71.66 28.83 87.1 28.83 115.96 53.29 129.97 70.84 121.79 111.65 145.98 111.65 164.7 136.11 178.72 163.16 166.1 163.16 135.44 136.11 120.41 121.24 129.8 80.34 109.06 80.34 96.08'/%3E %3C/svg%3E");
}
.sb-icon-star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='99.15 32.09 76.92 75.93 24.72 79.97 66.38 116.23 53.22 166.34 99.85 138.41 147.09 167.91 137.23 113.11 175.28 76.04 119.36 75.26 99.15 32.09'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='99.15 32.09 76.92 75.93 24.72 79.97 66.38 116.23 53.22 166.34 99.85 138.41 147.09 167.91 137.23 113.11 175.28 76.04 119.36 75.26 99.15 32.09'/%3E %3C/svg%3E");
}
.sb-icon-sparkle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='76.4 63.58 64.55 104.6 21.28 121.93 63.64 133.85 78.22 176.63 92.81 133.85 132.01 120.1 91.9 104.6 76.4 63.58'/%3E %3Cpolygon points='168.24 61.41 143.4 54.24 132.91 28.04 125.69 53.69 99.79 62.5 125.69 71.35 135.86 96.96 143.4 70.8 168.24 61.41'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='76.4 63.58 64.55 104.6 21.28 121.93 63.64 133.85 78.22 176.63 92.81 133.85 132.01 120.1 91.9 104.6 76.4 63.58'/%3E %3Cpolygon points='168.24 61.41 143.4 54.24 132.91 28.04 125.69 53.69 99.79 62.5 125.69 71.35 135.86 96.96 143.4 70.8 168.24 61.41'/%3E %3C/svg%3E");
}
.sb-icon-sun {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='115.09 64.48 82.82 64.48 62.93 84.84 62.93 113.79 85.19 134.16 117.17 135.87 138.77 110.95 136.14 82 115.09 64.48'/%3E %3Cpolygon points='71.43 141.11 89.15 149.2 79.36 172.8 59.05 162.5 71.43 141.11'/%3E %3Cpolygon points='48.34 109.79 57.03 127.23 34.58 139.41 25.27 118.63 48.34 109.79'/%3E %3Cpolygon points='55.98 71.31 48.83 89.42 24.75 80.88 33.98 60.06 55.98 71.31'/%3E %3Cpolygon points='89.21 49.62 71.17 56.96 60.73 33.64 82.16 25.94 89.21 49.62'/%3E %3Cpolygon points='128.67 58.75 111.43 49.69 122.53 26.67 142.23 38.1 128.67 58.75'/%3E %3Cpolygon points='151.66 89.94 142.97 72.5 165.42 60.32 174.73 81.1 151.66 89.94'/%3E %3Cpolygon points='144.02 128.43 151.17 110.31 175.25 118.86 166.02 139.68 144.02 128.43'/%3E %3Cpolygon points='112.42 150.7 130.13 142.6 141.57 165.44 120.49 174.06 112.42 150.7'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='115.09 64.48 82.82 64.48 62.93 84.84 62.93 113.79 85.19 134.16 117.17 135.87 138.77 110.95 136.14 82 115.09 64.48'/%3E %3Cpolygon points='71.43 141.11 89.15 149.2 79.36 172.8 59.05 162.5 71.43 141.11'/%3E %3Cpolygon points='48.34 109.79 57.03 127.23 34.58 139.41 25.27 118.63 48.34 109.79'/%3E %3Cpolygon points='55.98 71.31 48.83 89.42 24.75 80.88 33.98 60.06 55.98 71.31'/%3E %3Cpolygon points='89.21 49.62 71.17 56.96 60.73 33.64 82.16 25.94 89.21 49.62'/%3E %3Cpolygon points='128.67 58.75 111.43 49.69 122.53 26.67 142.23 38.1 128.67 58.75'/%3E %3Cpolygon points='151.66 89.94 142.97 72.5 165.42 60.32 174.73 81.1 151.66 89.94'/%3E %3Cpolygon points='144.02 128.43 151.17 110.31 175.25 118.86 166.02 139.68 144.02 128.43'/%3E %3Cpolygon points='112.42 150.7 130.13 142.6 141.57 165.44 120.49 174.06 112.42 150.7'/%3E %3C/svg%3E");
}
.sb-icon-trash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='129.46 91.47 122.58 147.48 113.17 147.48 116.13 91.34 87.79 91.04 89.71 147.48 79.54 147.48 73.81 90.91 49.6 90.67 63.54 171.89 141.27 171.89 150.12 91.67 129.46 91.47'/%3E %3Cpath d='M151.51,47.63h-26.47l-5.23-19.51h-38.75l-6.05,19.51h-29.86l-8.47,31.06,126.62-1-11.8-30.06ZM93.61,38.65h13.03l2.24,8.97h-18.38l3.1-8.97Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='129.46 91.47 122.58 147.48 113.17 147.48 116.13 91.34 87.79 91.04 89.71 147.48 79.54 147.48 73.81 90.91 49.6 90.67 63.54 171.89 141.27 171.89 150.12 91.67 129.46 91.47'/%3E %3Cpath d='M151.51,47.63h-26.47l-5.23-19.51h-38.75l-6.05,19.51h-29.86l-8.47,31.06,126.62-1-11.8-30.06ZM93.61,38.65h13.03l2.24,8.97h-18.38l3.1-8.97Z'/%3E %3C/svg%3E");
}
.sb-icon-tree {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='98.76 22.03 57.72 65.03 80.86 65.03 43.67 107.57 72.41 107.57 36.35 151.99 78.63 151.99 78.63 177.97 126.45 177.97 124.38 149.74 168.11 149.74 129.38 106.82 155.65 106.44 116.48 63.52 141.4 63.52 98.76 22.03'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='98.76 22.03 57.72 65.03 80.86 65.03 43.67 107.57 72.41 107.57 36.35 151.99 78.63 151.99 78.63 177.97 126.45 177.97 124.38 149.74 168.11 149.74 129.38 106.82 155.65 106.44 116.48 63.52 141.4 63.52 98.76 22.03'/%3E %3C/svg%3E");
}
.sb-icon-wand {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='43.73 140.46 52.3 156.74 68.59 163.17 131.71 92.94 115.85 86.51 106.85 71.94 43.73 140.46'/%3E %3Cpolygon points='114.99 61.65 122.71 77.51 137.28 83.51 149.28 74.94 143.7 59.57 125.28 52.23 114.99 61.65'/%3E %3Cpolygon points='96.04 57.45 71.75 50.43 61.5 24.82 54.44 49.89 29.12 58.5 54.44 67.16 64.38 92.19 71.75 66.62 96.04 57.45'/%3E %3Cpolygon points='172.88 125.87 154.91 120.67 147.32 101.71 142.09 120.27 123.35 126.65 142.09 133.06 149.45 151.58 154.91 132.66 172.88 125.87'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='43.73 140.46 52.3 156.74 68.59 163.17 131.71 92.94 115.85 86.51 106.85 71.94 43.73 140.46'/%3E %3Cpolygon points='114.99 61.65 122.71 77.51 137.28 83.51 149.28 74.94 143.7 59.57 125.28 52.23 114.99 61.65'/%3E %3Cpolygon points='96.04 57.45 71.75 50.43 61.5 24.82 54.44 49.89 29.12 58.5 54.44 67.16 64.38 92.19 71.75 66.62 96.04 57.45'/%3E %3Cpolygon points='172.88 125.87 154.91 120.67 147.32 101.71 142.09 120.27 123.35 126.65 142.09 133.06 149.45 151.58 154.91 132.66 172.88 125.87'/%3E %3C/svg%3E");
}
.sb-icon-rum {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='85.49 37.02 115.71 35.95 119.26 14.34 80.53 15.4 85.49 37.02'/%3E%3Cpath d='M115.59,79.29l-.35-10.8,11.35.35,1.77-22.53-57.02,1.96.71,19.34,11.7-.35v12.58l-48.26,35.63,7.8,66.5h113.07l8.16-67.56-48.92-35.11ZM126.16,146.34l-11.4,11.06-13.54-13.29-12.38,12.6-13.47-13.82,12.86-11.54-12.17-11.95,13.82-13.47,11.9,13.26,14.01-12.57,11.06,11.4-13.65,13.9,12.96,14.44Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='85.49 37.02 115.71 35.95 119.26 14.34 80.53 15.4 85.49 37.02'/%3E%3Cpath d='M115.59,79.29l-.35-10.8,11.35.35,1.77-22.53-57.02,1.96.71,19.34,11.7-.35v12.58l-48.26,35.63,7.8,66.5h113.07l8.16-67.56-48.92-35.11ZM126.16,146.34l-11.4,11.06-13.54-13.29-12.38,12.6-13.47-13.82,12.86-11.54-12.17-11.95,13.82-13.47,11.9,13.26,14.01-12.57,11.06,11.4-13.65,13.9,12.96,14.44Z'/%3E%3C/svg%3E");
}
.sb-icon-water {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='31.74 138.54 31.74 163.03 60.12 141.95 85.6 139.69 112.94 161 141.3 160.77 166.25 143.86 168.26 121.14 140.17 138.55 117.46 139.79 88.23 119.72 58.99 119.72 31.74 138.54'/%3E %3Cpolygon points='31.74 96.75 33.75 119.23 60.12 100.15 85.6 97.89 112.94 119.21 141.3 118.98 166.25 102.06 164.25 78.34 140.17 96.76 117.46 98 88.23 77.92 58.99 77.92 31.74 96.75'/%3E %3Cpolygon points='31.74 55.79 31.74 80.28 60.12 59.2 85.6 56.94 112.94 78.25 141.3 78.02 166.25 61.11 168.26 38.38 140.17 55.8 117.46 57.04 88.23 36.97 58.99 36.97 31.74 55.79'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='31.74 138.54 31.74 163.03 60.12 141.95 85.6 139.69 112.94 161 141.3 160.77 166.25 143.86 168.26 121.14 140.17 138.55 117.46 139.79 88.23 119.72 58.99 119.72 31.74 138.54'/%3E %3Cpolygon points='31.74 96.75 33.75 119.23 60.12 100.15 85.6 97.89 112.94 119.21 141.3 118.98 166.25 102.06 164.25 78.34 140.17 96.76 117.46 98 88.23 77.92 58.99 77.92 31.74 96.75'/%3E %3Cpolygon points='31.74 55.79 31.74 80.28 60.12 59.2 85.6 56.94 112.94 78.25 141.3 78.02 166.25 61.11 168.26 38.38 140.17 55.8 117.46 57.04 88.23 36.97 58.99 36.97 31.74 55.79'/%3E %3C/svg%3E");
}
.sb-icon-wind {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='25.61 78.25 91.18 78.25 118.88 64.46 125.35 42.28 112.73 23.1 86.98 23.1 71.99 41.08 83.38 50.67 93.57 39.88 103.17 39.28 106.76 50.86 89.98 60.06 25.61 59.07 25.61 78.25'/%3E %3Cpolygon points='25.61 90.12 146.22 90.12 167.92 103.91 174.39 126.1 161.77 145.28 136.02 145.28 122.03 125.29 135.42 117.7 142.61 128.49 152.21 129.09 155.8 117.51 139.02 108.31 25.61 109.31 25.61 90.12'/%3E %3Cpolygon points='25.61 121.75 66.16 121.75 87.85 135.54 94.33 157.72 81.71 176.9 55.96 176.9 41.97 156.92 55.36 149.33 62.55 160.12 72.14 160.72 75.74 149.14 58.95 139.94 25.61 140.93 25.61 121.75'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='25.61 78.25 91.18 78.25 118.88 64.46 125.35 42.28 112.73 23.1 86.98 23.1 71.99 41.08 83.38 50.67 93.57 39.88 103.17 39.28 106.76 50.86 89.98 60.06 25.61 59.07 25.61 78.25'/%3E %3Cpolygon points='25.61 90.12 146.22 90.12 167.92 103.91 174.39 126.1 161.77 145.28 136.02 145.28 122.03 125.29 135.42 117.7 142.61 128.49 152.21 129.09 155.8 117.51 139.02 108.31 25.61 109.31 25.61 90.12'/%3E %3Cpolygon points='25.61 121.75 66.16 121.75 87.85 135.54 94.33 157.72 81.71 176.9 55.96 176.9 41.97 156.92 55.36 149.33 62.55 160.12 72.14 160.72 75.74 149.14 58.95 139.94 25.61 140.93 25.61 121.75'/%3E %3C/svg%3E");
}
.sb-icon-wizard {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='43.73 140.46 52.3 156.74 68.59 163.17 131.71 92.94 115.85 86.51 106.85 71.94 43.73 140.46'/%3E %3Cpolygon points='114.99 61.65 122.71 77.51 137.28 83.51 149.28 74.94 143.7 59.57 125.28 52.23 114.99 61.65'/%3E %3Cpolygon points='96.04 57.45 71.75 50.43 61.5 24.82 54.44 49.89 29.12 58.5 54.44 67.16 64.38 92.19 71.75 66.62 96.04 57.45'/%3E %3Cpolygon points='172.88 125.87 154.91 120.67 147.32 101.71 142.09 120.27 123.35 126.65 142.09 133.06 149.45 151.58 154.91 132.66 172.88 125.87'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='43.73 140.46 52.3 156.74 68.59 163.17 131.71 92.94 115.85 86.51 106.85 71.94 43.73 140.46'/%3E %3Cpolygon points='114.99 61.65 122.71 77.51 137.28 83.51 149.28 74.94 143.7 59.57 125.28 52.23 114.99 61.65'/%3E %3Cpolygon points='96.04 57.45 71.75 50.43 61.5 24.82 54.44 49.89 29.12 58.5 54.44 67.16 64.38 92.19 71.75 66.62 96.04 57.45'/%3E %3Cpolygon points='172.88 125.87 154.91 120.67 147.32 101.71 142.09 120.27 123.35 126.65 142.09 133.06 149.45 151.58 154.91 132.66 172.88 125.87'/%3E %3C/svg%3E");
}
.sb-icon-wood {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M45.23,47.47l-26.82,27.27-2.27,39.09,25,33.18,32.27-31.82.45-40.91-28.64-26.82Z'/%3E %3Cpath d='M180.68,70.2l-31.82-26.82-82.73.45,23.64,24.55,1.55,44.57,49.04,1.05-8.01,13.17-47.46-.5-28.3,25.36,94.09.91,33.18-38.18-3.18-44.55ZM126.14,76.16l-4.84-12.92,25.43.4,7.67,13.32-28.26-.81Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M45.23,47.47l-26.82,27.27-2.27,39.09,25,33.18,32.27-31.82.45-40.91-28.64-26.82Z'/%3E %3Cpath d='M180.68,70.2l-31.82-26.82-82.73.45,23.64,24.55,1.55,44.57,49.04,1.05-8.01,13.17-47.46-.5-28.3,25.36,94.09.91,33.18-38.18-3.18-44.55ZM126.14,76.16l-4.84-12.92,25.43.4,7.67,13.32-28.26-.81Z'/%3E %3C/svg%3E");
}
.sb-icon-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M153,50.42l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM131.2,117.3l-16.99,15.78-14.85-15.82-16.84,15.82-15.59-17.95,16.39-15.16-16.39-17.46,17.95-15.59,15.88,17.18,16.55-15.3,15.78,16.99-16.6,15.59,14.72,15.92Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M153,50.42l-55.84-23.32-53.75,22.57-18.26,50.62,22.78,53.2,56.82,19.42,54.21-28.75,15.88-44.72-21.84-49.03ZM131.2,117.3l-16.99,15.78-14.85-15.82-16.84,15.82-15.59-17.95,16.39-15.16-16.39-17.46,17.95-15.59,15.88,17.18,16.55-15.3,15.78,16.99-16.6,15.59,14.72,15.92Z'/%3E %3C/svg%3E");
}

/* Backwards compatibility for existing icon-dynamic-accent usages */
.icon-dynamic-accent {
  display: inline-block;
  background-color: var(--color-orange);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  flex-shrink: 0;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  vertical-align: middle;
}
.icon-dynamic-cart {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='53.79 55.52 56.04 137.12 147.4 137.12 146.31 124.13 73.55 121.74 72.99 110.88 152.4 111.88 161.98 59.14 70.34 54.34 69.21 38.63 37.41 35.98 34.02 53.34 53.79 55.52'/%3E %3Cpolygon points='70.55 122.74 55.61 123.27 44.19 133.6 44.19 149.41 55.87 159.01 72.81 159.01 81.84 147.72 81.84 133.04 70.55 122.74'/%3E %3Cpolygon points='146.31 124.13 131.37 124.27 119.95 134.6 119.95 150.41 131.63 160.01 148.57 160.01 157.61 148.72 157.61 134.04 146.31 124.13'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='53.79 55.52 56.04 137.12 147.4 137.12 146.31 124.13 73.55 121.74 72.99 110.88 152.4 111.88 161.98 59.14 70.34 54.34 69.21 38.63 37.41 35.98 34.02 53.34 53.79 55.52'/%3E %3Cpolygon points='70.55 122.74 55.61 123.27 44.19 133.6 44.19 149.41 55.87 159.01 72.81 159.01 81.84 147.72 81.84 133.04 70.55 122.74'/%3E %3Cpolygon points='146.31 124.13 131.37 124.27 119.95 134.6 119.95 150.41 131.63 160.01 148.57 160.01 157.61 148.72 157.61 134.04 146.31 124.13'/%3E %3C/svg%3E");
}
.icon-dynamic-oils {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M136.17,72.98l-33.9-45.19-35.61,44.26-17.03,47.12,15.7,39.26,33.55,13.79,38.72-17.27,12.77-35.13-14.2-46.83ZM82.42,150.07l-9.78-23.2,9.78-8.76,17.58,26.6-17.58,5.36Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpath d='M136.17,72.98l-33.9-45.19-35.61,44.26-17.03,47.12,15.7,39.26,33.55,13.79,38.72-17.27,12.77-35.13-14.2-46.83ZM82.42,150.07l-9.78-23.2,9.78-8.76,17.58,26.6-17.58,5.36Z'/%3E %3C/svg%3E");
}
.icon-dynamic-exfoliating {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='36.84 164.97 36.15 142.73 65.27 142.82 64.99 165.83 36.84 164.97'/%3E %3Cpolygon points='72.2 128.88 71.52 106.64 100.63 106.73 100.36 129.73 72.2 128.88'/%3E %3Cpolygon points='163.16 106.79 163.85 129.03 134.73 128.94 135.01 105.94 163.16 106.79'/%3E %3Cpolygon points='72.2 57.12 71.52 34.88 100.63 34.97 100.36 57.97 72.2 57.12'/%3E %3Cpolygon points='163.16 35.03 163.85 57.27 134.73 57.18 135.01 34.17 163.16 35.03'/%3E %3Cpolygon points='135.49 143.59 136.18 165.83 107.06 165.74 107.34 142.73 135.49 143.59'/%3E %3Cpolygon points='36.84 93.23 36.15 71 65.27 71.08 64.99 94.09 36.84 93.23'/%3E %3Cpolygon points='135.49 71.85 136.18 94.09 107.06 94 107.34 71 135.49 71.85'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='36.84 164.97 36.15 142.73 65.27 142.82 64.99 165.83 36.84 164.97'/%3E %3Cpolygon points='72.2 128.88 71.52 106.64 100.63 106.73 100.36 129.73 72.2 128.88'/%3E %3Cpolygon points='163.16 106.79 163.85 129.03 134.73 128.94 135.01 105.94 163.16 106.79'/%3E %3Cpolygon points='72.2 57.12 71.52 34.88 100.63 34.97 100.36 57.97 72.2 57.12'/%3E %3Cpolygon points='163.16 35.03 163.85 57.27 134.73 57.18 135.01 34.17 163.16 35.03'/%3E %3Cpolygon points='135.49 143.59 136.18 165.83 107.06 165.74 107.34 142.73 135.49 143.59'/%3E %3Cpolygon points='36.84 93.23 36.15 71 65.27 71.08 64.99 94.09 36.84 93.23'/%3E %3Cpolygon points='135.49 71.85 136.18 94.09 107.06 94 107.34 71 135.49 71.85'/%3E %3C/svg%3E");
}
.icon-dynamic-tree {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='98.76 22.03 57.72 65.03 80.86 65.03 43.67 107.57 72.41 107.57 36.35 151.99 78.63 151.99 78.63 177.97 126.45 177.97 124.38 149.74 168.11 149.74 129.38 106.82 155.65 106.44 116.48 63.52 141.4 63.52 98.76 22.03'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='98.76 22.03 57.72 65.03 80.86 65.03 43.67 107.57 72.41 107.57 36.35 151.99 78.63 151.99 78.63 177.97 126.45 177.97 124.38 149.74 168.11 149.74 129.38 106.82 155.65 106.44 116.48 63.52 141.4 63.52 98.76 22.03'/%3E %3C/svg%3E");
}
.icon-dynamic-pinecone {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='110.9 69.99 92.53 98.01 110.9 126.04 118.05 98.01 110.9 69.99'/%3E %3Cpolygon points='73.53 69.99 58.34 98.01 73.53 126.04 80.68 98.01 73.53 69.99'/%3E %3Cpolygon points='128.13 116.97 110.9 148.85 129.78 144.45 137.47 132.91 128.13 116.97'/%3E %3Cpolygon points='129.46 98.01 149.6 126.04 156.13 98.01 149.6 66.69 129.46 98.01'/%3E %3Cpolygon points='38.79 81.29 49.25 98.01 39.91 113.95 24.52 96.37 38.79 81.29'/%3E %3Cpolygon points='91.31 116.97 103.86 135.93 87.97 145.82 72.08 145.82 91.31 116.97'/%3E %3Cpolygon points='55.21 115.33 40.1 125.77 50.81 134.15 60.24 130.56 55.21 115.33'/%3E %3Cpolygon points='128.13 79.33 110.9 47.46 129.78 51.85 137.47 63.39 128.13 79.33'/%3E %3Cpolygon points='91.31 79.33 103.86 60.37 87.97 50.48 72.08 50.48 91.31 79.33'/%3E %3Cpolygon points='56.33 79.4 41.22 68.96 51.93 60.58 61.36 64.18 56.33 79.4'/%3E %3Cpath d='M150.75,93.89l24.73-8.52s-.27,30.5-1.1,29.95c-.82-.55-24.78-11.54-24.78-11.54l1.15-9.89Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='110.9 69.99 92.53 98.01 110.9 126.04 118.05 98.01 110.9 69.99'/%3E %3Cpolygon points='73.53 69.99 58.34 98.01 73.53 126.04 80.68 98.01 73.53 69.99'/%3E %3Cpolygon points='128.13 116.97 110.9 148.85 129.78 144.45 137.47 132.91 128.13 116.97'/%3E %3Cpolygon points='129.46 98.01 149.6 126.04 156.13 98.01 149.6 66.69 129.46 98.01'/%3E %3Cpolygon points='38.79 81.29 49.25 98.01 39.91 113.95 24.52 96.37 38.79 81.29'/%3E %3Cpolygon points='91.31 116.97 103.86 135.93 87.97 145.82 72.08 145.82 91.31 116.97'/%3E %3Cpolygon points='55.21 115.33 40.1 125.77 50.81 134.15 60.24 130.56 55.21 115.33'/%3E %3Cpolygon points='128.13 79.33 110.9 47.46 129.78 51.85 137.47 63.39 128.13 79.33'/%3E %3Cpolygon points='91.31 79.33 103.86 60.37 87.97 50.48 72.08 50.48 91.31 79.33'/%3E %3Cpolygon points='56.33 79.4 41.22 68.96 51.93 60.58 61.36 64.18 56.33 79.4'/%3E %3Cpath d='M150.75,93.89l24.73-8.52s-.27,30.5-1.1,29.95c-.82-.55-24.78-11.54-24.78-11.54l1.15-9.89Z'/%3E %3C/svg%3E");
}
.icon-dynamic-mint {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='185.18 113.26 188.62 88.67 159.08 93.24 159.08 111.37 185.18 113.26'/%3E %3Cpolygon points='98.57 43.07 57.84 56.4 11.38 94.83 56.69 139.57 93.98 153.23 136.72 145.2 159.08 111.37 137.29 110.53 108.7 128.1 122.22 108.37 93.69 105.55 60.71 121.79 76.49 103.61 36.18 94.26 71.32 91.68 106.75 94.39 96.58 66.44 125.91 92.85 159.08 93.24 139.96 60.41 98.57 43.07'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='185.18 113.26 188.62 88.67 159.08 93.24 159.08 111.37 185.18 113.26'/%3E %3Cpolygon points='98.57 43.07 57.84 56.4 11.38 94.83 56.69 139.57 93.98 153.23 136.72 145.2 159.08 111.37 137.29 110.53 108.7 128.1 122.22 108.37 93.69 105.55 60.71 121.79 76.49 103.61 36.18 94.26 71.32 91.68 106.75 94.39 96.58 66.44 125.91 92.85 159.08 93.24 139.96 60.41 98.57 43.07'/%3E %3C/svg%3E");
}
.icon-dynamic-citrus {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='40.96 137.27 47.11 113.26 62.8 89.37 102.02 79.03 128.05 88.66 155.15 108.98 162.46 141.7 184.49 142.5 167.04 85.83 100 53.8 45.08 75.98 15.51 136.34 40.96 137.27'/%3E %3Cpolygon points='107.01 137.51 149.51 139.65 143.1 113.97 107.01 137.51'/%3E %3Cpolygon points='112.72 95.07 105.59 126.81 131.33 110.27 112.72 95.07'/%3E %3Cpath d='M69.93,100.26c3.21,2.85,25.46,32.66,25.46,32.66l5.74-41.8s-34.41,6.29-31.2,9.14Z'/%3E %3Cpolygon points='51.68 134.66 87.4 135.73 62.11 107.4 51.68 134.66'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='white' width='200' height='200' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E %3Cpolygon points='40.96 137.27 47.11 113.26 62.8 89.37 102.02 79.03 128.05 88.66 155.15 108.98 162.46 141.7 184.49 142.5 167.04 85.83 100 53.8 45.08 75.98 15.51 136.34 40.96 137.27'/%3E %3Cpolygon points='107.01 137.51 149.51 139.65 143.1 113.97 107.01 137.51'/%3E %3Cpolygon points='112.72 95.07 105.59 126.81 131.33 110.27 112.72 95.07'/%3E %3Cpath d='M69.93,100.26c3.21,2.85,25.46,32.66,25.46,32.66l5.74-41.8s-34.41,6.29-31.2,9.14Z'/%3E %3Cpolygon points='51.68 134.66 87.4 135.73 62.11 107.4 51.68 134.66'/%3E %3C/svg%3E");
}

/* Right Hero Column */
.hero-col-right {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.hero-feature-box {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-sm);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
  z-index: 1;
}

.hero-feature-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.hero-feature-box::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: rgba(10, 11, 14, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
}

.hero-feature-box:hover {
  transform: translateX(-3px);
  box-shadow: var(--shadow-md);
}

.hero-feature-box:hover::before {
  background: var(--color-orange);
}

.hero-feature-box h4 {
  font-family: var(--font-header);
  font-size: 1.15rem;
  color: var(--color-orange);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-feature-box h4 .icon-dynamic-accent,
.hero-feature-box h4 .sb-icon {
  background-color: #ffffff;
}

.hero-feature-box p {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  line-height: 1.4;
}

.verse-banner-slot {
  position: relative;
  width: 100%;
}

.verse-banner {
  position: relative;
  background: var(--dynamic-swirl-color, var(--color-orange));
  color: #08080a;
  border: none;
  clip-path: var(--wonky-rect-sm);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-md);
  z-index: 1;
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  will-change: height, transform;
  transition: transform var(--dur-normal) var(--ease),
              box-shadow var(--dur-normal) var(--ease),
              background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.verse-banner:hover {
  transform: translateX(-3px);
  box-shadow: var(--shadow-lg);
}

.verse-banner .verse-quote {
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 1.18rem;
  line-height: 1.35;
  color: #08080a;
  position: relative;
  z-index: 2;
  will-change: opacity, transform;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.verse-banner .verse-ref {
  display: block;
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: 0.45rem;
  color: #08080a;
  opacity: 0.9;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
  will-change: opacity, transform;
  transition: opacity 0.35s ease, transform 0.35s ease;
}



/* ==========================================================================
   MARQUEE TICKER STRIP
   ========================================================================== */

.ticker-strip {
  background: var(--color-orange-tint, color-mix(in srgb, var(--color-orange) 16%, #14161b));
  border-top: none;
  border-bottom: 0px solid color-mix(in srgb, var(--color-orange) 28%, rgba(255, 255, 255, 0.08));
  padding: clamp(1.45rem, 2.4vw, 1.85rem) 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticker-content {
  display: inline-flex;
  align-items: center;
  gap: clamp(3rem, 5vw, 5rem);
  animation: marquee 50s linear infinite;
  transform: translateY(1px);
}

@keyframes marquee {
  0% { transform: translateY(1px) translateX(0); }
  100% { transform: translateY(1px) translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.35rem);
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-orange);
  letter-spacing: 0.04em;
  transition: color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticker-item .sb-icon {
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  min-width: clamp(28px, 4vw, 36px);
  min-height: clamp(28px, 4vw, 36px);
  background-color: var(--color-orange) !important;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticker-item .paw {
  color: var(--color-orange);
}

/* ==========================================================================
   MANIFESTO / WHY NO SEED OILS?
   ========================================================================== */

.section-manifesto {
  padding: 6.5rem 0 7.5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #dcd3c4;
  border-bottom: none;
  background-color: #fdfbf0;
}

/* Wonky Variegated Sawtooth Divider (Bottom of Manifesto) */
.manifesto-wonky-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 24px;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

.manifesto-divider-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.manifesto-divider-path {
  fill: var(--bg-primary, #121316);
}

.manifesto-pattern-bg {
  position: absolute;
  inset: -50% 0;
  background-image: url('../Images/Patterns/soap-texture-seamless-lightened.png');
  background-size: 256px 256px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  opacity: 1; /* Adjust pattern opacity here (0.0 to 1.0) */
}

.section-manifesto .container {
  position: relative;
  z-index: 1;
}

.section-manifesto .section-title {
  color: #121312;
}

.section-manifesto .section-desc {
  color: #383b38;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.section-tag {
  margin-bottom: 0.8rem;
}

.section-title {
  font-family: var(--font-header);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  text-transform: none;
  line-height: 1.05;
  margin-bottom: 1rem;
}

.section-desc {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.comparison-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.comparison-card {
  padding: 2.5rem;
  clip-path: var(--wonky-rect-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  position: relative;
  background: transparent;
  border: none;
  z-index: 1;
  overflow: hidden;
}

.comparison-card-content,
.comparison-card-note,
.comparison-card-footer {
  position: relative;
  z-index: 2;
  width: 100%;
}

.comparison-card::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  pointer-events: none;
}

.comparison-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
}

/* Left Card: The Grocery Store Junk (The Black Card) */
.comparison-card.bad {
  position: relative;
  background: transparent;
  clip-path: var(--wonky-rect-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.comparison-card.bad::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  pointer-events: none;
  background: var(--color-orange);
  opacity: 0.35;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.comparison-card.bad::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
  background: #111315;
}

.comparison-card.bad .comparison-header-art svg {
  fill: var(--color-orange);
  color: var(--color-orange);
  transition: fill 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.comparison-card.bad h3 {
  font-family: var(--font-subhead);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 2rem;
  color: #ffffff !important;
  text-align: center;
  margin-bottom: 0;
}

/* Right Card: The Soap Beast Standard (Dynamic Color & Swirl Card) */
.comparison-card.good {
  position: relative;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  clip-path: var(--wonky-rect-lg);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s ease;
  overflow: hidden;
  isolation: isolate;
}

.comparison-card.good::before,
.comparison-card.good::after {
  display: none !important;
}

.comparison-card.good .comparison-swirl-bg {
  position: absolute;
  inset: 0;
  clip-path: var(--wonky-rect-lg);
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
  background-position: center;
  background-size: 380px 380px;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.comparison-card.good .swirl-bg-a {
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg'));
  filter: url('#swirl-btn-filter-a');
  opacity: 1;
}

.comparison-card.good .swirl-bg-b {
  background-image: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg'));
  filter: url('#swirl-btn-filter-b');
  opacity: 0;
}

html.swirl-layer-a .comparison-card.good .swirl-bg-a { opacity: 1 !important; }
html.swirl-layer-a .comparison-card.good .swirl-bg-b { opacity: 0 !important; }
html.swirl-layer-b .comparison-card.good .swirl-bg-a { opacity: 0 !important; }
html.swirl-layer-b .comparison-card.good .swirl-bg-b { opacity: 1 !important; }

.comparison-card.good .comparison-header-art svg {
  fill: #08080a !important;
  color: #08080a !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.comparison-card.good h3 {
  font-family: var(--font-subhead);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 2rem;
  color: #08080a !important;
  text-align: center;
  margin-bottom: 0;
}

.comparison-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
  gap: 0;
}

.comparison-header-art {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.comparison-card:hover .comparison-header-art {
  transform: scale(1.15) translateY(-2px);
}

.comparison-header-art svg {
  display: block;
  fill: var(--color-orange);
  color: var(--color-orange);
  transition: fill 1.8s cubic-bezier(0.16, 1, 0.3, 1), color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none;
}

.art-skull svg {
  width: 63px;
  height: 53px;
}

.art-round svg {
  width: 67px;
  height: 67px;
}

.art-figure svg {
  width: 53px;
  height: 53px;
}

.comparison-card-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
}

.ingredient-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.ingredient-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.015em;
  font-size: 1.08rem;
  line-height: 1.45;
  padding: 0.95rem 1.25rem;
  clip-path: var(--wonky-rect-sm);
  border: none !important;
  border-radius: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.ingredient-list li:hover {
  transform: translateY(-2px);
}

/* Bullets for Left Card: The Grocery Store Junk (Black Card) */
.comparison-card.bad .ingredient-list li {
  background: rgba(255, 255, 255, 0.05);
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color: #c9c6bf;
}

.comparison-card.bad .ingredient-list li:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.comparison-card.bad .ingredient-list li strong {
  color: #ffffff !important;
  font-weight: 700;
}

.comparison-card.bad .ingredient-list .sb-icon-x {
  background-color: var(--color-orange) !important;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

.comparison-card.bad .comparison-card-note {
  color: #82858b !important;
}

/* Bullets for Right Card: The Soap Beast Standard (Dynamic Swirl Card) */
.comparison-card.good .ingredient-list li {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
  color: #08080a !important;
}

.comparison-card.good .ingredient-list li:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.comparison-card.good .ingredient-list li strong {
  color: #000000 !important;
  font-weight: 700;
}

.comparison-card.good .ingredient-list .sb-icon-check {
  background-color: #08080a !important;
}

/* Bottom CTA Button on Right Swirl Card */
.comparison-card.good .btn-wonky.manifesto-cta-btn,
.comparison-card.good .comparison-card-footer .btn-wonky {
  background: #08080a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  clip-path: var(--wonky-rect) !important;
  font-family: var(--font-btn) !important;
  font-weight: 700 !important;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

.comparison-card.good .btn-wonky.manifesto-cta-btn::before,
.comparison-card.good .btn-wonky.manifesto-cta-btn::after,
.comparison-card.good .comparison-card-footer .btn-wonky::before,
.comparison-card.good .comparison-card-footer .btn-wonky::after {
  display: none !important;
}

.comparison-card.good .btn-wonky.manifesto-cta-btn .btn-text,
.comparison-card.good .comparison-card-footer .btn-wonky .btn-text {
  color: #ffffff !important;
}

.comparison-card.good .btn-wonky.manifesto-cta-btn .sb-icon,
.comparison-card.good .comparison-card-footer .btn-wonky .sb-icon {
  background-color: #ffffff !important;
  transition: transform 0.25s ease;
}

.comparison-card.good .btn-wonky.manifesto-cta-btn:hover,
.comparison-card.good .comparison-card-footer .btn-wonky:hover {
  background: #1c1d22 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.comparison-card.good .btn-wonky.manifesto-cta-btn:hover .sb-icon-arrow,
.comparison-card.good .comparison-card-footer .btn-wonky:hover .sb-icon-arrow {
  transform: translateX(5px) !important;
}

.ingredient-content {
  flex: 1;
}

.ingredient-list li .sb-icon,
.ingredient-list .sb-icon-x,
.ingredient-list .sb-icon-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  margin-top: 4px;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

.comparison-card.good .ingredient-list .sb-icon-check,
.comparison-card.bad .ingredient-list .sb-icon-x {
  background-color: var(--color-orange);
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

@media (max-width: 576px) {
  .ingredient-list li .sb-icon,
  .ingredient-list .sb-icon-x,
  .ingredient-list .sb-icon-check {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin-top: 3px;
  }
}

.ingredient-list .icon-cross {
  color: var(--color-orange);
  font-weight: 900;
  font-size: 1.2rem;
}

.ingredient-list .icon-check {
  color: var(--color-orange);
  font-weight: 900;
  font-size: 1.3rem;
}

/* ==========================================================================
   PRODUCTS / SHOP SECTION (Wonky Lab Cards)
   ========================================================================== */

.section-products {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background-color: var(--bg-primary);
  border-top: none;
  border-bottom: 1px solid var(--border-color);
}

.shop-pattern-bg {
  position: absolute;
  inset: -50% 0;
  background-image: url('../Images/Patterns/pattern-figure.svg');
  background-size: 288px 375px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  opacity: .5;
}

.section-products .container {
  position: relative;
  z-index: 1;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Lab Card System: Outer wonky border via clip-path and pseudo-elements */
.product-card {
  position: relative;
  background: transparent;
  clip-path: var(--wonky-rect-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all var(--dur-normal) var(--ease);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  cursor: pointer;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.product-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-card:hover::before {
  background: var(--color-orange);
}

.product-corner-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
}

/* Sold Out Product Styling */
.product-card.sold-out .product-image-container img {
  opacity: 0.65;
  filter: grayscale(35%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.wonky-badge-soldout {
  background: #25262c !important;
  color: #a4a6b0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  letter-spacing: 0.05em !important;
}

.btn-wonky.btn-sold-out {
  background: #1c1d22 !important;
  color: #72747d !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: transparent !important;
}

.product-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
  background-color: #08080a;
  clip-path: var(--wonky-rect-sm);
  overflow: hidden;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.6s ease;
}

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

/* Card Auto-Rotating Thumbnail Carousel */
.product-image-container.has-carousel {
  position: relative;
}

.product-image-container.has-carousel .product-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.product-image-container.has-carousel .product-card-img.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

.product-image-container.has-carousel .card-dots-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 20px;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: var(--wonky-pill-sm);
  z-index: 4;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card:hover .card-dots-indicator {
  opacity: 1;
  transform: translateX(-50%) scale(1.05);
}

.card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-block;
  flex-shrink: 0;
}

.card-dot:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.card-dot.active {
  background: var(--color-orange);
  transform: scale(1.35);
}

.grit-meter-wrap {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.65rem;
  padding: 0.38rem 0.95rem;
  margin-bottom: 0.85rem;
  font-size: 0.84rem;
  font-family: var(--font-subhead-bold);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  clip-path: var(--wonky-pill-sm);
  z-index: 1;
  isolation: isolate;
}

.grit-meter-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-orange) 42%, rgba(255, 255, 255, 0.16));
  clip-path: var(--wonky-pill-sm);
  z-index: -2;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.grit-meter-wrap::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: color-mix(in srgb, var(--color-orange) 13%, #111216);
  clip-path: var(--wonky-pill-sm);
  z-index: -1;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.grit-meter-hidden {
  display: none !important;
}

.grit-paws {
  display: flex;
  gap: 0.32rem;
  align-items: center;
}

.grit-paw {
  width: 13px;
  height: 13px;
  clip-path: var(--wonky-diamond);
  background-color: rgba(255, 255, 255, 0.28);
  display: inline-block;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
}

.grit-paw::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  clip-path: var(--wonky-diamond);
  background-color: #131419;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.grit-paw.filled {
  background-color: var(--color-orange);
}

.grit-paw.filled::after {
  background-color: var(--color-orange);
}

.product-title {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.55rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-scent-notes {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  min-height: 2.8rem;
  line-height: 1.4;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.product-price {
  font-family: var(--font-subhead-bold);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-orange);
}

.product-price .compare-price {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: line-through;
  color: var(--text-muted);
  margin-left: 0.45rem;
}

.product-weight {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.product-card-actions {
  display: flex;
  width: 100%;
}

.product-card-actions .btn-wonky {
  width: 100%;
  justify-content: center;
}

.btn-quickview {
  position: relative;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #f0f0f2 !important;
  border: none !important;
  clip-path: var(--wonky-rect-sm);
  overflow: hidden;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease),
              transform var(--dur-normal) var(--ease) !important;
}

.btn-quickview .sb-icon {
  position: relative;
  z-index: 2;
  background-color: #f0f0f2;
  transition: background-color var(--dur-fast) var(--ease),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

/* Resting inner dark gray background */
.btn-quickview::before {
  content: "" !important;
  position: absolute;
  inset: 1.5px;
  background: #181920 !important;
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  pointer-events: none;
  transition: background var(--dur-normal) var(--ease);
}

/* Sliding swirl fill overlay on hover (Soap Beast Lab fill transition) */
.btn-quickview::after {
  content: "" !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  background-repeat: repeat;
  background-position: center;
  background-size: 240px 240px;
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg'));
  filter: url('#swirl-btn-filter-a');
  opacity: 1 !important;
  transition: width var(--dur-normal) var(--ease) !important;
}

.btn-quickview:hover {
  background: var(--color-orange) !important;
  color: #08080a !important;
  transform: translateY(-2px);
}

.btn-quickview:hover::after {
  width: 100% !important;
}

.btn-quickview:hover .sb-icon {
  background-color: #08080a !important;
  transform: rotate(15deg) scale(1.15);
}

html.swirl-layer-a .btn-quickview::after {
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg')) !important;
  filter: url('#swirl-btn-filter-a') !important;
}

html.swirl-layer-b .btn-quickview::after {
  background-image: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg')) !important;
  filter: url('#swirl-btn-filter-b') !important;
}

/* ==========================================================================
   SCENT QUIZ / BEAST SELECTOR
   ========================================================================== */

.section-quiz {
  padding: 6.5rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background-color: #080a08;
}

.quiz-bg-layer {
  position: absolute;
  inset: -30% 0;
  background: 
    linear-gradient(180deg, rgba(8, 10, 8, 0.63) 0%, rgba(8, 10, 8, 0.45) 50%, rgba(8, 10, 8, 0.73) 100%),
    url('../Images/Photos/bg-pnw-lake-mountains.jpg') center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.section-quiz .container {
  position: relative;
  z-index: 1;
}

.quiz-card {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-lg);
  padding: 0; /* Padding managed by inner top/bottom stages so divider goes edge-to-edge */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  max-width: 880px;
  margin: 0 auto;
  z-index: 1;
}

.quiz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  pointer-events: none;
}

.quiz-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #090a0d; /* Black top of main container */
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
}

/* Black Top Stage of Main Container */
.quiz-card-top {
  position: relative;
  background: #090a0d;
  width: calc(100% + 4px);
  margin-left: -2px;
  padding: 3rem 3rem 2.75rem 3rem;
  z-index: 1;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.quiz-opt-btn {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-sm);
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--text-primary);
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  z-index: 1;
}

.quiz-opt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-opt-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--bg-primary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-opt-btn:hover, .quiz-opt-btn.selected {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.quiz-opt-btn:hover::before, .quiz-opt-btn.selected::before {
  background: var(--color-orange);
}

.quiz-opt-btn:hover::after, .quiz-opt-btn.selected::after {
  background: #181920;
}

.quiz-opt-btn:hover .opt-title, .quiz-opt-btn.selected .opt-title {
  color: var(--color-orange);
}

.quiz-opt-btn:hover .opt-icon .sb-icon,
.quiz-opt-btn.selected .opt-icon .sb-icon {
  transform: rotate(15deg) scale(1.15);
}

.quiz-opt-btn .opt-icon {
  font-size: 1.8rem;
}

.quiz-opt-btn .opt-icon .sb-icon {
  background-color: var(--color-orange);
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-opt-btn .opt-title {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quiz-result-box {
  display: none;
  position: relative;
  margin-top: 0;
  background: transparent;
  border: none;
  text-align: center;
  z-index: 1;
  width: 100%;
}

.quiz-result-box.show {
  display: block;
  animation: fadeIn 0.35s ease;
}

.quiz-result-inner {
  position: relative;
  z-index: 2;
  will-change: opacity, transform;
}

/* Wonky Variegated Sawtooth Divider (Full width transition across the main container from black top to gray bottom) */
.quiz-jagged-divider {
  width: calc(100% + 4px);
  margin-left: -2px;
  height: 24px;
  line-height: 0;
  display: block;
  margin-bottom: -1px;
  overflow: hidden;
  background-color: #090a0d;
}

.quiz-divider-svg {
  width: 100%;
  height: 24px;
  display: block;
}

/* Gray Bottom Stage of the Main Container (.quiz-card) */
.quiz-result-content-wrap {
  background: #18191f; /* Charcoal Gray bottom */
  width: calc(100% + 4px);
  margin-left: -2px;
  padding: 2.5rem 3rem 3.5rem 3rem;
  border-top: none;
}

.quiz-match-label-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Hero-Tint Badge Style (Colored text on subtle colored background like hero eyebrow) */
.wonky-badge-hero-tint {
  background: var(--color-orange-tint, color-mix(in srgb, var(--color-orange) 16%, #14161b)) !important;
  color: var(--color-orange) !important;
  clip-path: var(--wonky-pill-sm) !important;
  font-family: 'Londrina Regular', 'Londrina Solid', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: none !important;
  white-space: nowrap !important;
  transition: background-color var(--dur-theme) var(--ease-theme), color var(--dur-theme) var(--ease-theme) !important;
}

.wonky-badge-hero-tint .sb-icon {
  background-color: var(--color-orange) !important;
  transition: background-color var(--dur-theme) var(--ease-theme) !important;
}

/* Primary Wonky Match Card (Side-by-side 2-column, no large icon) */
.quiz-primary-card {
  position: relative;
  background: transparent;
  clip-path: var(--wonky-rect);
  padding: 1.75rem 2rem;
  margin: 0 auto;
  max-width: 780px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: center;
  text-align: left;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quiz-primary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-primary-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #090a0d; /* Deep black inside card on gray stage */
  clip-path: var(--wonky-rect);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-primary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quiz-primary-card:hover::before {
  background: var(--color-orange);
}

.quiz-primary-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  clip-path: var(--wonky-rect-sm);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-primary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--wonky-rect-sm);
  transition: transform 0.35s ease;
}

.quiz-primary-img-wrap:hover .quiz-primary-img {
  transform: scale(1.06);
}

.quiz-primary-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quiz-primary-title {
  font-family: var(--font-header);
  font-size: 2.1rem;
  color: #fff;
  margin: 0 0 0.15rem 0;
  letter-spacing: 0.04em;
  line-height: 1.1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.quiz-primary-title:hover {
  color: var(--color-orange);
}

.quiz-primary-sub {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  transition: color var(--dur-theme) var(--ease-theme);
}

.quiz-primary-desc {
  font-size: 0.98rem;
  color: var(--color-kraft-tint);
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
}

.quiz-primary-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Companion Section & Wonky Cards (No icons on secondary matches) */
.quiz-companions-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.quiz-companions-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.quiz-companions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.35rem;
  text-align: left;
}

.quiz-companions-grid[data-count="1"] {
  max-width: 480px;
  margin: 0 auto;
}

.quiz-companion-card {
  position: relative;
  background: transparent;
  clip-path: var(--wonky-rect);
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
}

.quiz-companion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-companion-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #090a0d; /* Deep black inside card on gray stage */
  clip-path: var(--wonky-rect);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.quiz-companion-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.quiz-companion-card:hover::before {
  background: var(--color-orange);
}

.quiz-companion-top {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 0.9rem;
  align-items: center;
}

.quiz-companion-img-wrap {
  position: relative;
  width: 85px;
  height: 85px;
  clip-path: var(--wonky-rect-sm);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  flex-shrink: 0;
}

.quiz-companion-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--wonky-rect-sm);
  transition: transform 0.35s ease;
}

.quiz-companion-img-wrap:hover .quiz-companion-img {
  transform: scale(1.08);
}

.quiz-companion-meta {
  flex: 1;
  min-width: 0;
}

.quiz-companion-name {
  font-family: var(--font-header);
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.03em;
  margin: 0 0 0.15rem 0;
  line-height: 1.15;
  cursor: pointer;
  transition: color 0.2s ease;
}

.quiz-companion-name:hover {
  color: var(--color-orange);
}

.quiz-companion-sub {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  transition: color var(--dur-theme) var(--ease-theme);
}

.quiz-companion-reason {
  font-size: 0.88rem;
  color: var(--color-kraft-tint);
  line-height: 1.45;
  margin: 0;
}

.quiz-companion-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .quiz-result-content-wrap {
    padding: 1.75rem clamp(1rem, 3.5vw, 1.25rem) 2.25rem clamp(1rem, 3.5vw, 1.25rem);
  }

  .quiz-primary-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.35rem 1rem;
    gap: 1.25rem;
  }

  .quiz-primary-img-wrap {
    max-width: 180px;
    margin: 0 auto;
  }

  .quiz-primary-actions {
    justify-content: center;
  }

  .quiz-companion-top {
    grid-template-columns: 75px 1fr;
    gap: 0.75rem;
  }

  .quiz-companion-img-wrap {
    width: 75px;
    height: 75px;
  }

  .quiz-companion-name {
    font-size: 1.1rem;
  }
}

.quiz-result-box.show {
  display: block;
  animation: fadeIn 0.35s ease;
}

.quiz-result-figure-wrap,
#quizResultIconWrap {
  width: 58px;
  height: 58px;
  margin: 0 auto 0.85rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange);
  transition: color var(--dur-theme) var(--ease-theme) !important;
}

#quizResultIconWrap svg,
.quiz-result-figure-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  transition: fill var(--dur-theme) var(--ease-theme), color var(--dur-theme) var(--ease-theme) !important;
}

#quizResultIconWrap svg *,
.quiz-result-figure-wrap svg * {
  transition: fill var(--dur-theme) var(--ease-theme), stroke var(--dur-theme) var(--ease-theme) !important;
}

.quiz-result-match-tag {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--color-orange);
  transition: color var(--dur-theme) var(--ease-theme) !important;
}

#quizResultSub {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--color-orange);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--dur-theme) var(--ease-theme) !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SOAP BEAST LAB CONNECTION (Bridge to lab.soapbeast.com)
   ========================================================================== */

.section-lab-bridge {
  padding: 6.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  background: #090a0d;
}

.lab-bridge-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 3.5rem;
  position: relative;
  z-index: 1;
}

.lab-bridge-title {
  font-family: var(--font-header);
  font-size: clamp(2.1rem, 3.3vw, 3.05rem);
  text-transform: none;
  line-height: 1.04;
  margin-bottom: 1.1rem;
}

.lab-bridge-title .text-swirl,
.section-lab-bridge .section-title .text-swirl {
  display: block;
  width: fit-content;
  margin-top: 0.12em;
}

.lab-bridge-text {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 1.8rem;
  max-width: 480px;
}

.lab-bridge-image-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

@media (min-width: 1100px) {
  .lab-bridge-image-wrap {
    margin-right: calc(-1 * min(150px, (100vw - 1240px) / 2 + 1.5rem));
  }
}

.lab-scene-stage {
  position: relative;
  left: 20px;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 560 / 380;
  pointer-events: none;
  margin-left: auto;
}

.lab-mold-base-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 86%;
  z-index: 1;
  will-change: transform;
}

.lab-mold-base-svg,
.lab-mold-base-img {
  width: 100%;
  height: auto;
  display: block;
}

.lab-pour-arm-layer {
  position: absolute;
  top: 0;
  right: -20px;
  width: 74%;
  z-index: 2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.lab-pour-arm-svg,
.lab-pour-arm-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   CRYPTID FIELD REPORTS (REVIEWS)
   ========================================================================== */

.section-reviews {
  padding: 6.5rem 0;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  border-top: none;
  border-bottom: 1px solid var(--border-color);
  background-color: #080c08;
}

/* Wonky Variegated Sawtooth Divider (Top of Reviews / Transition from Cryptid Code) */
.reviews-wonky-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}

.reviews-divider-svg {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

.reviews-divider-path-top {
  fill: #fdfbf0;
  stroke: none;
}

.reviews-bg-layer {
  position: absolute;
  inset: -30% 0;
  background: 
    linear-gradient(180deg, rgba(8, 12, 8, 0.85) 0%, rgba(8, 12, 8, 0.70) 50%, rgba(8, 12, 8, 0.90) 100%),
    url('../Images/Photos/bg-moss-mushrooms.jpg') center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.section-reviews .container {
  position: relative;
  z-index: 1;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.review-card {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-lg);
  padding: 2.2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  transition: transform var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}

.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.review-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(14, 15, 14, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review-card:hover::before {
  background: var(--color-orange);
}

.review-stars {
  color: var(--accent-gold);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 3px;
}

.review-stars .sb-icon {
  background-color: var(--accent-gold);
}

.review-quote {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.015em;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.review-author strong {
  color: var(--text-primary);
  font-family: var(--font-header);
}

.review-verified {
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ==========================================================================
   MASCOT & STORY SECTION
   ========================================================================== */

.section-story {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  background-color: #fdfbf0;
  border-top: none;
  border-bottom: none;
}

/* Wonky Variegated Sawtooth Dividers (Top & Bottom of Cryptid Code Section) */
.story-wonky-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

.story-divider-svg {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

.story-divider-path-top {
  fill: #090a0d;
  stroke: none;
}

.story-pattern-bg {
  position: absolute;
  inset: -50% 0;
  background-image: url('../Images/Patterns/soap-texture-seamless-lightened.png');
  background-size: 256px 256px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.section-story .container {
  position: relative;
  z-index: 1;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}

.story-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-figure-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.story-image-wrap:hover .story-figure-svg {
  transform: translateY(-4px) scale(1.02);
}

.story-figure-base {
  fill: var(--dynamic-swirl-color, var(--color-orange));
  transition: fill var(--dur-theme) var(--ease-theme) !important;
}

.story-figure-swirl-layer {
  pointer-events: none;
  transition: opacity var(--dur-theme) var(--ease-theme) !important;
}

html.swirl-layer-a .story-figure-swirl-layer.logo-swirl-layer-a { opacity: 1 !important; }
html.swirl-layer-a .story-figure-swirl-layer.logo-swirl-layer-b { opacity: 0 !important; }
html.swirl-layer-b .story-figure-swirl-layer.logo-swirl-layer-a { opacity: 0 !important; }
html.swirl-layer-b .story-figure-swirl-layer.logo-swirl-layer-b { opacity: 1 !important; }

.story-img {
  clip-path: var(--wonky-rect-lg);
  box-shadow: 0 20px 45px rgba(20, 20, 22, 0.45);
  width: 100%;
  display: block;
}

.story-stamp {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  background: transparent;
  color: var(--color-orange);
  border: none;
  clip-path: var(--wonky-pill-sm);
  padding: 0.8rem 1.4rem;
  font-family: var(--font-header);
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
  z-index: 2;
}

.story-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-orange);
  clip-path: var(--wonky-pill-sm);
  z-index: -2;
  pointer-events: none;
}

.story-stamp::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #141517;
  clip-path: var(--wonky-pill-sm);
  z-index: -1;
  pointer-events: none;
}

.story-text h2 {
  font-family: var(--font-header);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  text-transform: none;
  color: #121312;
  margin-bottom: 1.25rem;
  line-height: 1.05;
}

.story-text p {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #2e302e;
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.section-story .btn-wonky {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.section-faq {
  padding: 5rem 0;
  background-color: var(--bg-primary);
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-sm);
  overflow: hidden;
  transition: all var(--dur-normal) var(--ease);
  z-index: 1;
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.faq-item::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
}

.faq-item:hover::before {
  background: var(--color-orange);
}

.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-toggle-icon {
  background-color: var(--color-orange);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  padding-bottom: 1.25rem;
  max-height: 800px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 4.5rem 0 2rem 0;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand p {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-top: 1rem;
  line-height: 1.45;
  max-width: 320px;
}

.footer-brought-by-link {
  color: var(--color-orange);
  text-decoration: none !important;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color var(--dur-theme) var(--ease-theme), opacity 0.2s ease;
  display: inline-block;
}

.footer-brought-by-link:hover {
  color: #ffffff;
  text-decoration: none !important;
  opacity: 0.9;
}

.footer-col h4 {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1.2rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-orange);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.newsletter-input,
.form-input {
  background: #14151a;
  border: none !important;
  border-radius: 0 !important;
  clip-path: var(--wonky-rect-sm);
  color: #ffffff;
  font-family: var(--font-subhead);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
  outline: none !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.22));
  transition: background-color var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.newsletter-input::placeholder,
.form-input::placeholder {
  color: var(--text-muted);
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.newsletter-input:hover,
.form-input:hover {
  background: #181920;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.40));
}

.newsletter-input:focus,
.form-input:focus {
  background: #1c1d25;
  filter: drop-shadow(0 0 1px var(--color-orange)) drop-shadow(0 0 8px var(--color-orange-tint, rgba(255, 160, 82, 0.35)));
  filter: drop-shadow(0 0 1px var(--color-orange)) drop-shadow(0 0 8px color-mix(in srgb, var(--color-orange) 40%, transparent));
}

/* North Beast Parent Site Callout Banner (Reversed-Out Dynamic Swirl) */
.footer-parent-callout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  clip-path: var(--wonky-rect-sm);
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-parent-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg')) repeat center/380px 380px;
  filter: url('#swirl-btn-filter-a');
  pointer-events: none;
  opacity: 1;
  z-index: -1;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-parent-callout::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg')) repeat center/380px 380px;
  filter: url('#swirl-btn-filter-b');
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.swirl-layer-a .footer-parent-callout::before { opacity: 1 !important; }
html.swirl-layer-a .footer-parent-callout::after  { opacity: 0 !important; }
html.swirl-layer-b .footer-parent-callout::before { opacity: 0 !important; }
html.swirl-layer-b .footer-parent-callout::after  { opacity: 1 !important; }

.footer-parent-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 280px;
  position: relative;
  z-index: 2;
}

.footer-parent-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-parent-logo-wrap:hover {
  transform: scale(1.06);
  opacity: 0.85;
}

.footer-parent-logo {
  height: 81px;
  width: auto;
  max-width: 145px;
  object-fit: contain;
  display: block;
  filter: brightness(0); /* Reverses white logo to crisp solid black */
}

.footer-parent-text {
  font-family: var(--font-subhead);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #08080a;
  line-height: 1.35;
}

.footer-parent-text strong {
  color: #000000;
  font-family: var(--font-subhead-bold);
  font-weight: 900;
  font-size: 1.25rem;
  display: block;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.footer-parent-highlight {
  color: #000000;
  font-family: var(--font-subhead-bold);
  font-weight: 700;
  text-decoration: none;
}

.footer-parent-callout .btn-wonky {
  position: relative;
  z-index: 2;
  background: #08080a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  border: none !important;
  flex-shrink: 0;
}

.footer-parent-callout .btn-wonky::before,
.footer-parent-callout .btn-wonky::after {
  display: none !important;
}

.footer-parent-callout .btn-wonky .btn-text {
  color: #ffffff !important;
}

.footer-parent-callout .btn-wonky .sb-icon {
  background-color: var(--color-orange) !important;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease !important;
}

.footer-parent-callout .btn-wonky:hover {
  background: #181920 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6) !important;
}

.footer-parent-callout .btn-wonky:hover .sb-icon-arrow {
  transform: translateX(5px) !important;
}

@media (max-width: 768px) {
  .footer-parent-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }
  .footer-parent-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-parent-logo {
    height: 66px;
    max-width: 125px;
  }
  .footer-parent-callout .btn-wonky {
    width: 100%;
    justify-content: center;
  }
}

.footer-bottom-bar {
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ==========================================================================
   SLIDE-OUT CART DRAWER & QUICK VIEW MODAL
   ========================================================================== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  z-index: 101;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.cart-header {
  padding: 1.25rem 1.5rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-header h3 {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.04em;
  font-size: 1.45rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.cart-close-btn:hover {
  color: var(--color-orange);
}

.cart-close-btn .sb-icon,
.modal-close-btn .sb-icon {
  background-color: #ffffff;
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-close-btn:hover .sb-icon,
.modal-close-btn:hover .sb-icon {
  background-color: var(--color-orange);
  transform: rotate(15deg) scale(1.15);
}

.shipping-progress-bar-wrap {
  padding: 0.85rem 1.5rem;
  background: rgba(255, 160, 82, 0.08);
  border-bottom: 1px dashed var(--border-color);
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.shipping-track {
  width: 100%;
  height: 8px;
  background: #20222a;
  clip-path: var(--wonky-pill-sm);
  margin-top: 0.4rem;
  overflow: hidden;
}

.shipping-fill {
  height: 100%;
  background: var(--color-orange);
  clip-path: var(--wonky-pill-sm);
  width: 60%;
  transition: width 0.3s ease;
}

.cart-items-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-empty-message {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 1rem;
  align-items: center;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-sm);
  padding: 0.75rem;
  z-index: 1;
}

.cart-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  pointer-events: none;
}

.cart-item::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--bg-primary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
}

.cart-item-img {
  width: 68px;
  height: 68px;
  clip-path: var(--wonky-rect-sm);
  object-fit: cover;
}

.cart-item-info h4 {
  font-family: var(--font-subhead);
  font-weight: 300;
  letter-spacing: 0.03em;
  font-size: 1.15rem;
  color: #fff;
}

.cart-item-price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-orange);
  margin-top: 0.15rem;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.qty-btn {
  position: relative;
  width: 30px;
  height: 30px;
  clip-path: var(--wonky-rect-sm);
  background: transparent;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.05rem;
  z-index: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}

.qty-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
  pointer-events: none;
}

.qty-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  transition: background var(--dur-fast) var(--ease);
  pointer-events: none;
}

.qty-btn:hover {
  color: #08080a;
}

.qty-btn:hover::before {
  background: var(--color-orange);
}

.qty-btn:hover::after {
  background: var(--color-orange);
}

.cart-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 4px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.cart-item-remove .sb-icon {
  background-color: var(--text-muted);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cart-item-remove:hover {
  color: var(--danger, #ff4d4d);
}

.cart-item-remove:hover .sb-icon {
  background-color: var(--danger, #ff4d4d);
  transform: rotate(15deg) scale(1.15);
}

.cart-item-remove:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.cart-footer {
  padding: 1.5rem;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-family: var(--font-header);
  font-size: 1.3rem;
}

.cart-subtotal-amount {
  color: var(--color-orange);
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}

/* Quick View Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  position: relative;
  background: transparent;
  border: none;
  clip-path: var(--wonky-rect-lg);
  box-shadow: var(--shadow-xl);
  max-width: 1040px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  z-index: 1;
}

.modal-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-orange);
  clip-path: var(--wonky-rect-lg);
  z-index: -2;
  pointer-events: none;
}

.modal-container::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-lg);
  z-index: -1;
  pointer-events: none;
}

.modal-close-btn {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--color-orange);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.modal-product-title {
  font-family: var(--font-header) !important;
  font-weight: 400 !important;
  font-size: 2.1rem;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: none;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal-product-img {
  clip-path: var(--wonky-rect-sm);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Quick View Modal Image Slider */
.modal-slider-wrap {
  position: relative;
  width: 100%;
}

.modal-slider-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  clip-path: var(--wonky-rect-sm);
  background-color: #08080a;
}

.modal-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.modal-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: scale(0.97);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.modal-slide .modal-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none;
}

.modal-thumbnails-strip {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.modal-thumb-btn {
  width: 66px;
  height: 66px;
  padding: 3px;
  border: none !important;
  background: rgba(255, 255, 255, 0.14);
  clip-path: var(--wonky-rect-sm);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.modal-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: var(--wonky-rect-sm);
  pointer-events: none;
}

.modal-thumb-btn:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.05);
}

.modal-thumb-btn.active {
  opacity: 1;
  background: var(--color-orange);
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(228, 93, 27, 0.55));
}

.modal-image-tag,
.modal-grid .wonky-badge-pine {
  background: var(--color-orange-tint, color-mix(in srgb, var(--color-orange) 16%, #14161b)) !important;
  color: var(--color-orange) !important;
  clip-path: var(--wonky-pill-sm) !important;
  font-family: 'Londrina Regular', 'Londrina Solid', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1), color 1.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-image-tag .sb-icon,
.modal-grid .wonky-badge-pine .sb-icon {
  background-color: var(--color-orange) !important;
  transition: background-color 1.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-trust-strip {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
}

.modal-trust-item {
  position: relative;
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  clip-path: var(--wonky-rect-sm);
  background: transparent;
  z-index: 1;
  transition: transform 0.25s ease;
}

.modal-trust-item:hover {
  transform: translateY(-2px);
}

.modal-trust-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color, rgba(255, 255, 255, 0.16));
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-trust-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: #14161c;
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
}

.modal-trust-item:hover::before {
  background: var(--color-orange);
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & HAMBURGER TRIGGER
   ========================================================================== */

.mobile-menu-btn {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 102;
  align-items: center;
  justify-content: center;
  clip-path: var(--wonky-rect-sm);
  transition: transform var(--dur-normal) var(--ease);
  touch-action: manipulation;
}

.mobile-menu-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
}

.mobile-menu-btn::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--bg-secondary);
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
}

.mobile-menu-btn:hover::before,
.mobile-menu-btn.active::before {
  background: var(--color-orange);
}

.mobile-menu-btn:hover::after,
.mobile-menu-btn.active::after {
  background: #181920;
}

.mobile-menu-btn .sb-icon-menu {
  pointer-events: none;
  background-color: #ffffff;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.mobile-menu-btn:hover .sb-icon-menu,
.mobile-menu-btn.active .sb-icon-menu {
  background-color: var(--color-orange);
  transform: rotate(90deg);
}

/* Mobile Nav Drawer Overlay & Panel */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 104;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.mobile-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100%;
  height: 100dvh;
  background: #0d0e12;
  border-left: 2px solid var(--border-color);
  z-index: 105;
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem 1.25rem max(1.5rem, env(safe-area-inset-bottom)) 1.25rem;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.85);
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
}

.mobile-nav-close-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-color);
  clip-path: var(--wonky-rect-sm);
  border: none;
  cursor: pointer;
  color: #fff;
  transition: background var(--dur-normal) var(--ease), transform 0.2s ease;
  touch-action: manipulation;
  z-index: 1;
}

.mobile-nav-close-btn::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #181920;
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
}

.mobile-nav-close-btn:hover {
  background: var(--color-orange);
  transform: rotate(90deg);
}

.mobile-nav-close-btn:hover::before {
  background: var(--color-orange);
}

.mobile-nav-close-btn .sb-icon {
  background-color: #fff;
  position: relative;
  z-index: 2;
  transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-nav-close-btn:hover .sb-icon {
  background-color: #08080a;
  transform: rotate(15deg) scale(1.15);
}

.mobile-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mobile-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  background: var(--border-color);
  border: none !important;
  clip-path: var(--wonky-rect-sm);
  color: #ffffff;
  text-decoration: none;
  transition: background var(--dur-normal) var(--ease), transform 0.2s ease, color 0.2s ease;
  touch-action: manipulation;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

.mobile-nav-item::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #121318;
  clip-path: var(--wonky-rect-sm);
  z-index: -2;
  transition: background var(--dur-normal) var(--ease);
}

/* Sliding swirl fill overlay on hover/active (Exact Soap Beast Lab signature) */
.mobile-nav-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  pointer-events: none;
  background-color: var(--dynamic-swirl-color, var(--color-orange));
  background-repeat: repeat;
  background-position: center;
  background-size: 340px 340px;
  background-image: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg'));
  filter: url('#swirl-btn-filter-a');
  opacity: 1 !important;
  transition: width var(--dur-normal) var(--ease) !important;
}

.mobile-nav-item:hover,
.mobile-nav-item:active {
  background: var(--color-orange);
  color: #08080a !important;
  transform: translateX(4px);
}

.mobile-nav-item:hover::after,
.mobile-nav-item:active::after {
  width: 100% !important;
}

.mobile-nav-item .sb-icon {
  background-color: var(--color-orange);
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background-color 0.2s ease, transform var(--dur-normal) var(--ease);
}

.mobile-nav-item:hover .sb-icon,
.mobile-nav-item:active .sb-icon {
  background-color: #ffffff !important;
  transform: rotate(15deg) scale(1.15);
}

.mobile-nav-item-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.mobile-nav-item-text strong {
  font-family: var(--font-subhead);
  font-weight: 400;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ffffff;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.mobile-nav-item:hover .mobile-nav-item-text strong,
.mobile-nav-item:active .mobile-nav-item-text strong {
  color: #08080a !important;
}

.mobile-nav-item-text small {
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 0.88rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.mobile-nav-item:hover .mobile-nav-item-text small,
.mobile-nav-item:active .mobile-nav-item-text small {
  color: #1a1a1a !important;
}

.mobile-nav-featured-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border-color);
}

.mobile-nav-lab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--color-orange);
  color: #08080a !important;
  font-family: var(--font-btn);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  clip-path: var(--wonky-rect-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}

.mobile-nav-lab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-a, url('../Images/Swirls/swirl_in_pot.jpg')) repeat center/340px 340px;
  filter: url('#swirl-btn-filter-a');
  opacity: 1;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-lab-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dynamic-swirl-img-b, url('../Images/Swirls/swirl_hanger.jpg')) repeat center/340px 340px;
  filter: url('#swirl-btn-filter-b');
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-lab-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mobile-nav-lab-btn > * {
  position: relative;
  z-index: 2;
}

.mobile-nav-lab-btn .sb-icon {
  background-color: #08080a;
}

.mobile-nav-parent-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-subhead);
  font-weight: 300;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--color-orange);
  text-decoration: none;
  border: none !important;
  clip-path: var(--wonky-rect-sm);
  background: var(--border-color);
  transition: background var(--dur-normal) var(--ease), color 0.2s ease;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

.mobile-nav-parent-link::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: #0d0e13;
  clip-path: var(--wonky-rect-sm);
  z-index: -1;
  transition: background var(--dur-normal) var(--ease);
}

.mobile-nav-parent-link:hover {
  background: var(--color-orange);
  color: #08080a !important;
}

.mobile-nav-parent-link:hover::before {
  background: var(--color-orange);
}

.mobile-nav-parent-link > * {
  position: relative;
  z-index: 2;
}

.mobile-nav-parent-link .sb-icon {
  background-color: var(--color-orange);
  transition: background-color 0.2s ease, transform var(--dur-normal) var(--ease);
}

.mobile-nav-parent-link:hover .sb-icon {
  background-color: #ffffff !important;
  transform: rotate(15deg) scale(1.15);
}

.mobile-nav-footer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.mobile-nav-verse-quote {
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-kraft-tint);
  line-height: 1.35;
}

.mobile-nav-verse-ref {
  font-family: 'Londrina Thin', 'Londrina Light', 'Londrina Solid Light', 'Londrina Solid', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--color-orange);
  margin-top: 0.2rem;
}

/* ==========================================================================
   MASTER RESPONSIVE BREAKPOINT SYSTEM
   ========================================================================== */

/* 1. Large Laptops & Small Desktops (<= 1200px) */
@media (max-width: 1200px) {
  .container {
    padding: 0 1.25rem;
  }
  .nav-links {
    gap: 1.15rem;
  }
  .nav-link {
    font-size: 0.95rem;
  }
  .hero-grid {
    grid-template-columns: 1.05fr 1.2fr 1.05fr;
    gap: 1.25rem;
  }
  .hero-title {
    font-size: clamp(2.6rem, 4.8vw, 4rem);
  }
  .hero-subtitle {
    font-size: 1.2rem;
  }
}

/* Announcement Bar: Prevent multi-line wrapping; once space runs out, show ONLY the free shipping callout */
@media (max-width: 1180px) {
  .announcement-ticker .announcement-lead,
  .announcement-ticker .announcement-tail {
    display: none !important;
  }
  .announcement-ticker {
    justify-content: center;
    gap: 0;
  }
  .announcement-bar {
    padding: 0.35rem 1rem;
  }
}

/* 2. Tablets Landscape & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {
  .site-nav {
    padding: calc(0.65rem + 6px) 0;
  }
  .nav-links,
  .nav-indicator-triangle,
  .nav-indicator-diamond {
    display: none !important;
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
  .nav-actions {
    gap: 0.75rem;
  }

  /* Hero Section: Swap to Top Visual Stage (Hand + Floating Soap) with Content Falling Completely Below */
  .hero-section {
    min-height: auto;
    padding: 0 0 3.5rem 0;
    display: block;
    position: relative;
    overflow: hidden;
  }

  /* Dedicated Top Stage for Bigfoot Hand & Forest Background */
  .hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(340px, 48vw, 460px);
    overflow: hidden;
    z-index: 1;
  }

  .hero-bg-img {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0) !important;
    object-fit: cover;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  }

  /* Multi-stage ambient grounding gradient ensuring bottom dissolves seamlessly into #121316 */
  .hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: 
      linear-gradient(to bottom, 
        rgba(18, 19, 22, 0) 0%, 
        rgba(18, 19, 22, 0.15) 30%, 
        rgba(18, 19, 22, 0.55) 60%, 
        rgba(18, 19, 22, 0.90) 82%, 
        var(--bg-primary, #121316) 95%, 
        var(--bg-primary, #121316) 100%),
      radial-gradient(circle at 50% 50%, transparent 35%, rgba(18, 19, 22, 0.55) 95%);
    pointer-events: none;
  }

  /* 3D Soap Canvas Layer pinned directly inside the Top Visual Stage */
  .hero-canvas-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(340px, 48vw, 460px);
    z-index: 5;
    pointer-events: none;
  }

  /* Dedicated overlay sitting OVER image & canvas to guarantee a 100% seamless fade into gray with zero line */
  .hero-stage-fade-overlay {
    display: block;
    position: absolute;
    top: calc(clamp(340px, 48vw, 460px) - 160px);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background: linear-gradient(to bottom, 
      rgba(18, 19, 22, 0) 0%, 
      rgba(18, 19, 22, 0.15) 30px, 
      rgba(18, 19, 22, 0.55) 75px, 
      rgba(18, 19, 22, 0.90) 115px, 
      var(--bg-primary, #121316) 140px, 
      var(--bg-primary, #121316) 100%);
    pointer-events: none;
    z-index: 6;
  }

  /* Content falls completely UNDER the hand and main image stage — hand & soap are NEVER covered */
  .hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding-top: calc(clamp(340px, 48vw, 460px) - 75px);
    padding-bottom: 2rem;
    pointer-events: auto;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-height: auto;
  }

  /* Middle scent tracker badge hidden on mobile & swapped layout */
  .hero-col-center {
    display: none !important;
  }

  /* Main Headline & Call To Action starts directly beneath the faded stage */
  .hero-col-left {
    order: 1;
    width: 100%;
    max-width: 620px;
    margin: 0.5rem auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: auto;
  }

  .hero-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
  }

  .hero-title {
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    line-height: 1.0;
    margin-bottom: 1.15rem;
  }

  .hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    line-height: 1.5;
    margin: 0 auto 1.85rem auto;
    max-width: 520px;
  }

  .hero-cta-group {
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }

  /* Features & Scripture Banner */
  .hero-col-right {
    order: 3;
    width: 100%;
    max-width: 680px;
    margin: 2.5rem auto 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    text-align: left;
    pointer-events: auto;
  }

  .hero-col-right .verse-banner-slot {
    grid-column: span 2;
    margin-top: 0.25rem;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero-col-right .verse-banner {
    width: 100%;
    margin-top: 0;
  }
  .comparison-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .story-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    text-align: left;
    align-items: center;
  }
  .lab-bridge-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .lab-bridge-title .text-swirl,
  .section-lab-bridge .section-title .text-swirl {
    margin-inline: auto;
  }
  .lab-bridge-text {
    margin: 0 auto 1.8rem auto;
  }
  .lab-scene-stage {
    max-width: 680px;
    margin: 0 auto;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* 3. Tablets Portrait & Smaller Screens (<= 860px) */
@media (max-width: 860px) {
  .footer-parent-callout {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.5rem 1.75rem;
    gap: 1.25rem;
  }
  .footer-parent-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }
  .footer-parent-logo {
    height: 60px;
    max-width: 120px;
    margin: 0 auto;
  }
  .footer-parent-callout .btn-wonky {
    width: 100%;
    justify-content: center;
  }
  .story-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .story-img,
  .story-figure-svg {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* 4. Mobile Devices & Small Tablets (<= 768px) */
@media (max-width: 768px) {
  .site-nav {
    padding: 0.65rem 0;
  }
  section[id] {
    scroll-margin-top: 70px;
  }
  .brand-logo-svg {
    height: clamp(28px, 6vw, 35px);
  }
  .nav-links,
  .nav-indicator-triangle,
  .nav-indicator-diamond {
    display: none !important;
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
  .nav-actions {
    gap: 0.65rem;
  }

  /* Hero Section Stacking & Ordering on Mobile (Hand & Soap on Top, Content Below) */
  .hero-section {
    padding: 0 0 2.5rem 0;
  }
  .hero-bg-container,
  .hero-canvas-wrap {
    height: clamp(340px, 80vw, 440px);
  }
  .hero-content {
    padding-top: calc(clamp(340px, 80vw, 440px) - 75px);
    padding-bottom: 1.5rem;
  }

  /* Dedicated overlay sitting OVER image & canvas to guarantee a 100% seamless fade into gray with zero line */
  .hero-stage-fade-overlay {
    top: calc(clamp(340px, 80vw, 440px) - 160px);
    bottom: 0;
    height: auto;
    background: linear-gradient(to bottom, 
      rgba(18, 19, 22, 0) 0%, 
      rgba(18, 19, 22, 0.15) 30px, 
      rgba(18, 19, 22, 0.55) 75px, 
      rgba(18, 19, 22, 0.90) 115px, 
      var(--bg-primary, #121316) 140px, 
      var(--bg-primary, #121316) 100%);
  }

  /* Display the Bigfoot hand 2x larger on mobile without changing the image dimensions */
  .hero-bg-img {
    width: 200% !important;
    max-width: none !important;
    min-width: 740px !important;
    height: 145% !important;
    top: -18% !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.4) 82%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.4) 82%, transparent 100%) !important;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0;
    min-height: auto;
  }
  .hero-col-center {
    display: none !important;
  }
  .hero-col-left {
    order: 1;
    width: 100%;
    max-width: 520px;
    margin: 0.5rem auto 0 auto;
    padding: 0 0.5rem;
  }
  .hero-title {
    font-size: clamp(2.2rem, 7.2vw, 3.4rem);
    line-height: 1.0;
    margin-bottom: 1rem;
  }
  .hero-subtitle {
    font-size: clamp(1.05rem, 3.2vw, 1.2rem);
    line-height: 1.45;
    margin: 0 auto 1.5rem auto;
    max-width: 480px;
  }
  .hero-cta-group {
    justify-content: center;
    gap: 0.75rem;
  }

  /* Hero Right Column on Mobile: feature cards hide for clean aesthetic, while Scripture Banner shines */
  .hero-col-right {
    order: 2;
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 1.75rem auto 0 auto;
  }
  .hero-col-right .hero-feature-box {
    display: none;
  }
  .hero-col-right .verse-banner-slot {
    margin-top: 0.5rem;
    min-height: clamp(145px, 34vw, 175px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero-col-right .verse-banner {
    width: 100%;
    margin-top: 0;
    padding: 1.15rem 1.25rem;
    text-align: center;
  }

  /* Comparison Section */
  .section-manifesto {
    padding: 4.5rem 0 5.5rem 0;
  }
  .comparison-card {
    padding: clamp(1.35rem, 4.5vw, 2rem);
  }
  .comparison-card h3 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
  }
  .ingredient-list li {
    font-size: clamp(0.95rem, 2.5vw, 1.05rem);
    padding: 0.75rem 0.9rem;
    gap: 0.75rem;
  }
  .ingredient-list li .sb-icon,
  .ingredient-list .sb-icon-x,
  .ingredient-list .sb-icon-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 3px;
  }

  /* Catalog Grid */
  .section-products {
    padding: 4.5rem 0;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 1.5rem;
  }

  /* Scent Quiz */
  .section-quiz {
    padding: 4.5rem 0;
  }
  .quiz-card {
    padding: 0;
  }
  .quiz-card-top {
    padding: clamp(1.35rem, 4vw, 2.25rem);
  }
  .quiz-options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .quiz-opt-btn {
    padding: 1rem 0.65rem;
    gap: 0.35rem;
  }
  .quiz-opt-btn .opt-title {
    font-size: 1.1rem;
  }

  /* Lab Bridge & Lore */
  .section-lab-bridge {
    padding: 4.5rem 0;
  }
  .section-story {
    padding: 4.5rem 0;
  }
  .section-reviews {
    padding: 4.5rem 0;
  }
  .reviews-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
  }
  .section-faq {
    padding: 4.5rem 0;
  }

  /* Modals */
  .modal-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .modal-container {
    padding: 1.75rem 1.25rem;
    max-height: 92vh;
  }
  .modal-close-btn {
    top: 0.85rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  /* Cart Drawer */
  .cart-drawer {
    width: 100%;
    max-width: 100vw;
  }
  .cart-header {
    padding: max(1.15rem, env(safe-area-inset-top)) 1.25rem 1rem 1.25rem;
  }
  .cart-footer {
    padding: 1.25rem 1.25rem max(1.5rem, env(safe-area-inset-bottom)) 1.25rem;
  }
  .qty-btn {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }
}

/* 5. Mobile Smartphones (<= 576px) */
@media (max-width: 576px) {
  .announcement-bar {
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
  }
  .announcement-ticker {
    gap: 0.65rem;
    justify-content: center;
  }
  .announcement-ticker .announcement-lead,
  .announcement-ticker .announcement-tail {
    display: none;
  }
  .announcement-ticker .announcement-highlight {
    font-size: 0.82rem;
    padding: 0.2rem 0.65rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    gap: 0.85rem;
  }
  .hero-cta-group .btn-wonky {
    width: 100%;
    box-sizing: border-box;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.65rem;
    font-size: 0.95rem;
  }

  .cart-item {
    grid-template-columns: 60px 1fr auto;
    gap: 0.75rem;
    padding: 0.65rem;
  }
  .cart-item-img {
    width: 60px;
    height: 60px;
  }
}

/* 6. Ultra-Compact Screens (<= 380px: iPhone SE, older phones) */
@media (max-width: 380px) {
  .container {
    padding: 0 0.85rem;
  }
  .brand-logo-svg {
    height: 25px;
  }
  .cart-toggle-btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
  }
  .mobile-menu-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .hero-title {
    font-size: 2.05rem;
  }
  .hero-bg-container,
  .hero-canvas-wrap {
    height: clamp(320px, 92vw, 420px);
  }
  .hero-content {
    padding-top: calc(clamp(320px, 92vw, 420px) - 75px);
    padding-bottom: 1.5rem;
  }
  .hero-stage-fade-overlay {
    top: calc(clamp(320px, 92vw, 420px) - 150px);
    bottom: 0;
    height: auto;
    background: linear-gradient(to bottom, 
      rgba(18, 19, 22, 0) 0%, 
      rgba(18, 19, 22, 0.15) 25px, 
      rgba(18, 19, 22, 0.55) 65px, 
      rgba(18, 19, 22, 0.90) 105px, 
      var(--bg-primary, #121316) 130px, 
      var(--bg-primary, #121316) 100%);
  }
  .quiz-options-grid {
    grid-template-columns: 1fr;
  }
  .soap-switcher-pills {
    gap: 0.45rem;
  }
  .soap-pill {
    width: 15px;
    height: 15px;
  }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION OVERRIDE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img {
    transform: translate3d(-50%, 0, 0) !important;
  }
  .hero-sun-rays,
  .hero-canvas-wrap,
  .manifesto-pattern-bg,
  .story-pattern-bg,
  .shop-pattern-bg,
  .quiz-bg-layer,
  .reviews-bg-layer {
    transform: none !important;
  }
  .ticker-content {
    animation: none !important;
  }
}