/* BongoBong Farbwelten — runtime token overrides + visitor control. */

html.bb-theme-jungle {
  --bb-bg: #123722;
  --bb-bg-2: #0d2c1a;
  --bb-surface: #1a4229;
  --bb-ink: #f4f1e2;
  --bb-ink-2: #cfd8c4;
  --bb-muted: #9bb7a3;
  --bb-muted-text: #b7c9ba;
  --bb-line: rgba(244, 241, 226, .18);
  --bb-line-2: rgba(244, 241, 226, .09);
  --bb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -20px rgba(0, 0, 0, .55);
  color-scheme: dark;
  background: var(--bb-bg);
}

html.bb-theme-jungle body,
html.bb-theme-jungle #main-wrapper,
html.bb-theme-jungle #content-wrapper {
  background: var(--bb-bg);
  color: var(--bb-ink);
}

html.bb-theme-jungle .bb-section { padding-block: clamp(42px, 5.4vw, 66px); }
html.bb-theme-jungle a:not(.btn):hover { color: var(--bb-y); }
html.bb-theme-jungle h1,
html.bb-theme-jungle h2,
html.bb-theme-jungle h3,
html.bb-theme-jungle h4,
html.bb-theme-jungle h5,
html.bb-theme-jungle h6,
html.bb-theme-jungle .bb-disp { color: var(--bb-ink); }

/* JTL/Bootstrap surfaces that still carry compiled light-theme colors. */
html.bb-theme-jungle .card,
html.bb-theme-jungle .modal-content,
html.bb-theme-jungle .dropdown-menu,
html.bb-theme-jungle .list-group-item,
html.bb-theme-jungle .table,
html.bb-theme-jungle .table th,
html.bb-theme-jungle .table td,
html.bb-theme-jungle .form-control,
html.bb-theme-jungle .custom-select,
html.bb-theme-jungle .input-group-text,
html.bb-theme-jungle .pagination .page-link,
html.bb-theme-jungle .breadcrumb,
html.bb-theme-jungle .nav-tabs .nav-link.active {
  background-color: var(--bb-surface);
  border-color: var(--bb-line);
  color: var(--bb-ink);
}
html.bb-theme-jungle .form-control::placeholder { color: var(--bb-muted); opacity: 1; }
html.bb-theme-jungle hr { border-color: var(--bb-line); }
html.bb-theme-jungle .text-muted,
html.bb-theme-jungle small { color: var(--bb-muted-text) !important; }
html.bb-theme-jungle #breadcrumb .breadcrumb-item,
html.bb-theme-jungle #breadcrumb .breadcrumb-link,
html.bb-theme-jungle #breadcrumb .breadcrumb-link span { color: var(--bb-ink-2) !important; }
html.bb-theme-jungle #breadcrumb .breadcrumb-item.active { color: var(--bb-muted-text) !important; }

/* PLP controls: avoid cream text on the compiled cream filter buttons. */
html.bb-theme-jungle #sidepanel_left .btn-filter-box {
  background: var(--bb-bg-2) !important;
  border-color: var(--bb-line);
  color: var(--bb-ink) !important;
}
html.bb-theme-jungle .bb-cat-chip {
  background: var(--bb-y);
  border-color: var(--bb-y);
  color: #17150e;
}

/* PDP short description still uses Sweet's compiled light-theme muted color. */
html.bb-theme-jungle .product-info .shortdesc { color: var(--bb-ink-2); }

/* The sticky contact bar intentionally remains a light utility island. */
html.bb-theme-jungle .contact-bar-wrapper,
html.bb-theme-jungle .contact-bar-wrapper a,
html.bb-theme-jungle .contact-bar-wrapper span,
html.bb-theme-jungle .contact-bar-wrapper small {
  background-color: #f5f2e7;
  color: #17150e !important;
}

/* Product photography stays on a neutral light pool in Jungle. */
html.bb-theme-jungle .productbox .productbox-image,
html.bb-theme-jungle .product-gallery .product-image,
html.bb-theme-jungle .slick-slide .productbox-image,
html.bb-theme-jungle .subcategories-image {
  background-color: #f0ecdd;
}
html.bb-theme-jungle .productbox .wishlist.badge { color: #17150e; }

/* Gold remains a dark-text surface; primary actions flip to gold. */
html.bb-theme-jungle .bb-marquee,
html.bb-theme-jungle .bb-mark--y,
html.bb-theme-jungle .bb-btn--gold { color: #17150e; }
html.bb-theme-jungle .btn-primary,
html.bb-theme-jungle .product-buy #add-to-cart,
html.bb-theme-jungle .productbox .bb-card__add.basket-details-add-to-cart {
  background: var(--bb-y);
  border-color: var(--bb-y);
  color: #17150e;
}
html.bb-theme-jungle .btn-primary:hover,
html.bb-theme-jungle .product-buy #add-to-cart:hover,
html.bb-theme-jungle .productbox .bb-card__add.basket-details-add-to-cart:hover {
  background: var(--bb-r-action);
  border-color: var(--bb-r-action);
  color: #fff;
}

/* Dummy contract: the heritage/manifest block becomes the loud gold island. */
html.bb-theme-jungle .bb-manifesto__panel {
  background: var(--bb-y);
  color: #17150e;
}
html.bb-theme-jungle .bb-manifesto__panel h2,
html.bb-theme-jungle .bb-manifesto__panel .bb-disp,
html.bb-theme-jungle .bb-manifesto__panel .bb-kicker,
html.bb-theme-jungle .bb-manifesto__panel p { color: #17150e; }
html.bb-theme-jungle .bb-manifesto__panel .bb-kicker { opacity: .65; }
html.bb-theme-jungle .bb-manifesto__panel .bb-mark--y {
  background: #17150e;
  color: var(--bb-y);
}
html.bb-theme-jungle .bb-manifesto__panel .bb-btn--gold {
  background: #17150e;
  color: var(--bb-y);
}
html.bb-theme-jungle .bb-manifesto__panel .bb-manifesto__stats { border-color: rgba(23, 21, 14, .22); }
html.bb-theme-jungle .bb-manifesto__panel .bb-manifesto__stats .n { color: var(--bb-r); }
html.bb-theme-jungle .bb-manifesto__panel .bb-manifesto__stats .l { color: rgba(23, 21, 14, .62); }
html.bb-theme-jungle .bb-manifesto__panel .bb-manifesto__deco { color: rgba(23, 21, 14, .06); }

/* Header world shared by Jungle and Mix. */
html.bb-theme-jungle #jtl-nav-wrapper,
html.bb-theme-mix #jtl-nav-wrapper,
html.bb-theme-jungle .fixed-search-wrapper,
html.bb-theme-mix .fixed-search-wrapper {
  background: #123722;
  border-color: rgba(244, 241, 226, .18);
  color: #f4f1e2;
}
html.bb-theme-jungle #shop-logo,
html.bb-theme-mix #shop-logo { filter: brightness(0) invert(1); }
html.bb-theme-jungle #jtl-nav-wrapper .nav-right > .nav-item > .nav-link,
html.bb-theme-mix #jtl-nav-wrapper .nav-right > .nav-item > .nav-link,
html.bb-theme-jungle #jtl-nav-wrapper .navbar-toggler,
html.bb-theme-mix #jtl-nav-wrapper .navbar-toggler,
html.bb-theme-jungle #jtl-nav-wrapper .form-clear,
html.bb-theme-mix #jtl-nav-wrapper .form-clear { color: #f4f1e2; }
html.bb-theme-jungle #jtl-nav-wrapper .nav-right > .nav-item > .nav-link:hover,
html.bb-theme-mix #jtl-nav-wrapper .nav-right > .nav-item > .nav-link:hover { color: var(--bb-y); }

/* Search stays a bright, highly legible island like in the design dummy. */
html.bb-theme-jungle #jtl-nav-wrapper .header-search .form-control,
html.bb-theme-mix #jtl-nav-wrapper .header-search .form-control,
html.bb-theme-jungle #jtl-nav-wrapper .header-search .btn,
html.bb-theme-mix #jtl-nav-wrapper .header-search .btn {
  background: #fff !important;
  border-color: rgba(23, 21, 14, .16);
  color: #17150e;
}

html.bb-theme-jungle .bb-fn.bb-fn,
html.bb-theme-jungle .bb-fn-m.bb-fn-m,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn.bb-fn,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-m.bb-fn-m {
  --bbfn-rail-bg: #123722;
  --bbfn-rail-bg-2: #0d2c1a;
  --bbfn-rail-fg: #f4f1e2;
  --bbfn-rail-fg-dim: rgba(244, 241, 226, .72);
  --bbfn-panel-bg: #1a4229;
  --bbfn-panel-bg-2: #0d2c1a;
  --bbfn-ink: #f4f1e2;
  --bbfn-ink-soft: #cfd8c4;
  --bbfn-line: rgba(244, 241, 226, .18);
  --bbfn-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -20px rgba(0, 0, 0, .55);
  --bb-fn-world-color: var(--bb-y);
  --bb-fn-world-bg: rgba(244, 241, 226, .05);
  --bb-fn-world-border: rgba(244, 241, 226, .18);
}
html.bb-theme-jungle .bb-fn-index__head--icon .bb-fn-index__icon,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-index__head--icon .bb-fn-index__icon {
  background: #f0ecdd;
}
html.bb-theme-jungle .bb-fn-feature__media,
html.bb-theme-jungle .bb-fn-card,
html.bb-theme-jungle .bb-fn-card__media,
html.bb-theme-jungle .bb-fn-imgtile__media,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-feature__media,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-card,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-card__media,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-imgtile__media { background: #f0ecdd; }

html.bb-theme-jungle #footer { background: #081c0f; color: rgba(244, 241, 226, .72); }
html.bb-theme-jungle #copyright { background: #081c0f; color: rgba(244, 241, 226, .55); }

/* Visitor-selectable logo. The canonical JTL image and metadata stay in the DOM;
   Retro is a visual overlay from the design handoff. */
html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand,
html.bb-logo-retro #footer .logo-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: min(200px, 38vw);
  aspect-ratio: 1200 / 253;
  height: auto;
  padding: 0;
}
html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand::after,
html.bb-logo-retro #footer .logo-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/logo-retro.png") center / contain no-repeat;
  pointer-events: none;
}
html.bb-logo-retro #jtl-nav-wrapper #shop-logo,
html.bb-logo-retro #footer .footer-logo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  opacity: 0;
  filter: none !important;
}
@media (min-width: 992px) {
  html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand { width: min(200px, 18vw); }
}

/* Header variants from the Rasta design handoff. They are presentation-only:
   no native JTL/UltraFlex branch, burger, search mode or ARIA owner is switched. */
@media (min-width: 1300px) {
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(18px, 3vw, 48px);
    min-height: 72px;
  }
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted > #search,
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted > .main-search-wrapper {
    display: flex !important;
    grid-column: 1;
    justify-self: start;
    width: min(320px, 25vw);
    max-width: 100%;
    margin: 0;
  }
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted > .main-search-wrapper > #search {
    display: flex !important;
    width: 100%;
    margin: 0;
  }
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted > .nav-logo-wrapper {
    grid-column: 2;
    justify-self: center;
    width: auto;
    max-width: none;
    padding-inline: 0;
  }
  html.bb-header-centered body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-header-row-adapted > .nav-icons-wrapper {
    grid-column: 3;
    justify-self: end;
    width: auto;
    max-width: 100%;
    padding-inline: 0;
  }
  html.bb-header-centered #jtl-nav-wrapper .bb-header-row-adapted > .nav-icons-wrapper #shop-nav {
    flex-wrap: nowrap;
  }
}

@media (min-width: 992px) {
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper > .hide-navbar > .navbar { min-height: 80px; }
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper > .navbar-wrapper,
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-fn-mount { background: #eab00e; }
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-fn.bb-fn {
    --bbfn-rail-bg: #eab00e;
    --bbfn-rail-bg-2: #eab00e;
    --bbfn-rail-fg: #17150e;
    --bbfn-rail-fg-dim: rgba(23, 21, 14, .72);
    --bbfn-accent: #17150e;
    --bb-fn-world-color: #17150e;
    --bb-fn-world-bg: rgba(23, 21, 14, .06);
    --bb-fn-world-border: rgba(23, 21, 14, .2);
  }
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper > .navbar-wrapper::before {
    background: rgba(23, 21, 14, .2);
  }
}
@media (min-width: 1600px) {
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #shop-nav > .nav-item:not(.search) > .nav-link {
    min-width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding-block: 6px;
  }
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #shop-nav > .nav-item:not(.search) .nav-label {
    display: block !important;
    padding-left: 0;
    color: currentColor;
    font: 700 9px/1.1 "Space Mono", ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* Unified visitor Design Lab. It remains a light utility surface in every world. */
.bb-design-control {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1035;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: #17150e;
}
.bb-design-control--right { right: max(16px, env(safe-area-inset-right)); }
.bb-design-control--left { left: max(16px, env(safe-area-inset-left)); }
@media (min-width: 992px) {
  body:not([data-page="18"]) .bb-design-control {
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 16px));
  }
}
.bb-design-control__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 7px 15px 7px 11px;
  border: 1.5px solid rgba(23, 21, 14, .18);
  border-radius: 999px;
  background: rgba(253, 252, 247, .97);
  color: #17150e;
  box-shadow: 0 12px 34px -16px rgba(0, 0, 0, .48);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.bb-design-control__trigger:hover { border-color: #178a41; }
.bb-design-control__trigger:focus-visible,
.bb-design-control__close:focus-visible,
.bb-design-control__option:focus-visible,
.bb-design-control__reset:focus-visible { outline: 3px solid #eab00e; outline-offset: 2px; }
.bb-design-control__trigger > svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #178a41;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.bb-design-control__trigger-copy {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.08;
}
.bb-design-control__trigger-copy small,
.bb-design-control__head small {
  color: #756f5f !important;
  font: 700 9px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bb-design-control__trigger-copy strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-design-control__panel {
  position: absolute;
  bottom: calc(100% + 10px);
  width: min(388px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 110px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  border: 1.5px solid rgba(23, 21, 14, .16);
  border-radius: 20px;
  background: #fdfcf7;
  color: #17150e;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}
.bb-design-control--right .bb-design-control__panel { right: 0; }
.bb-design-control--left .bb-design-control__panel { left: 0; }
.bb-design-control__panel[hidden] { display: none; }
.bb-design-control__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 3px 11px;
  border-bottom: 1px solid rgba(23, 21, 14, .1);
}
.bb-design-control__head > span { display: grid; gap: 2px; }
.bb-design-control__head strong { font: 800 16px/1.15 "Hanken Grotesk", system-ui, sans-serif; }
.bb-design-control__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(23, 21, 14, .14);
  border-radius: 50%;
  background: #fff;
  color: #17150e;
  font: 400 25px/30px system-ui, sans-serif;
  cursor: pointer;
}
.bb-design-control__group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 13px 0 0;
  border: 0;
}
.bb-design-control__group[data-bb-design-group="logo"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-design-control__group legend {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 1px;
  padding: 0 2px;
  color: #514b3c;
  font: 700 10px/1.3 "Space Mono", ui-monospace, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bb-design-control__option {
  display: grid;
  grid-template-rows: 35px auto;
  place-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 91px;
  padding: 9px 6px;
  border: 1.5px solid rgba(23, 21, 14, .1);
  border-radius: 13px;
  background: #fff;
  color: #17150e;
  text-align: center;
  cursor: pointer;
}
.bb-design-control__option:hover { background: #f5f2e7; border-color: rgba(23, 21, 14, .2); }
.bb-design-control__option.is-active { border-color: #178a41; background: #edf5ed; box-shadow: inset 0 0 0 1px #178a41; }
.bb-design-control__option > span:last-child { display: grid; min-width: 0; gap: 2px; }
.bb-design-control__option strong { font-size: 12px; line-height: 1.15; }
.bb-design-control__option small { color: #756f5f !important; font-size: 9.5px; line-height: 1.25; }
.bb-design-control__visual {
  position: relative;
  display: block;
  width: 42px;
  height: 34px;
  border: 1px solid rgba(23, 21, 14, .14);
  border-radius: 9px;
  background: #f5f2e7;
  overflow: hidden;
}
.bb-design-control__option--theme-weiss .bb-design-control__visual { border-radius: 50%; background: linear-gradient(135deg, #fdfcf7 0 50%, #fff 50%); }
.bb-design-control__option--theme-jungle .bb-design-control__visual { border-radius: 50%; background: linear-gradient(135deg, #123722 0 50%, #1a4229 50%); }
.bb-design-control__option--theme-mix .bb-design-control__visual { border-radius: 50%; background: linear-gradient(135deg, #123722 0 50%, #fdfcf7 50%); }
.bb-design-control__option--logo-neu .bb-design-control__visual,
.bb-design-control__option--logo-retro .bb-design-control__visual { width: 72px; background-color: #fdfcf7; background-position: center; background-repeat: no-repeat; background-size: contain; }
.bb-design-control__option--logo-neu .bb-design-control__visual::after {
  content: "BONGOBONG";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #17150e;
  font: 700 8px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: -.04em;
}
.bb-design-control__option--logo-retro .bb-design-control__visual { background-image: url("../images/logo-retro.png"); }
.bb-design-control__option--header-classic .bb-design-control__visual,
.bb-design-control__option--header-centered .bb-design-control__visual,
.bb-design-control__option--header-goldband .bb-design-control__visual { width: 58px; background-color: #fdfcf7; }
.bb-design-control__option--header-classic .bb-design-control__visual {
  background: linear-gradient(#178a41,#178a41) 7px 8px/15px 4px no-repeat,
              linear-gradient(#17150e,#17150e) 35px 8px/16px 4px no-repeat,
              linear-gradient(#f5f2e7,#f5f2e7) 0 22px/100% 11px no-repeat, #fff;
}
.bb-design-control__option--header-centered .bb-design-control__visual {
  background: linear-gradient(#e5e1d2,#e5e1d2) 6px 8px/14px 5px no-repeat,
              linear-gradient(#178a41,#178a41) center 7px/16px 6px no-repeat,
              linear-gradient(#17150e,#17150e) 39px 8px/13px 4px no-repeat,
              linear-gradient(#f5f2e7,#f5f2e7) 0 22px/100% 11px no-repeat, #fff;
}
.bb-design-control__option--header-goldband .bb-design-control__visual {
  background: linear-gradient(#178a41,#178a41) 7px 8px/15px 4px no-repeat,
              linear-gradient(#17150e,#17150e) 35px 8px/16px 4px no-repeat,
              linear-gradient(#eab00e,#eab00e) 0 21px/100% 13px no-repeat, #fff;
}
.bb-design-control__foot {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 21, 14, .1);
}
.bb-design-control__reset {
  min-height: 38px;
  border: 1px solid rgba(23, 21, 14, .16);
  border-radius: 999px;
  background: #fff;
  color: #17150e;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace;
  cursor: pointer;
}
.bb-design-control__reset:hover { border-color: #d8402c; color: #c93625; }
.bb-design-control__foot small { color: #756f5f !important; font-size: 10px; line-height: 1.35; text-align: center; }

@media (max-width: 575.98px) {
  .bb-design-control { bottom: max(10px, env(safe-area-inset-bottom)); }
  .bb-design-control--right { right: max(10px, env(safe-area-inset-right)); }
  .bb-design-control--left { left: max(10px, env(safe-area-inset-left)); }
  .bb-design-control__trigger { min-height: 46px; max-width: calc(100vw - 20px); padding: 7px 11px; }
  .bb-design-control__trigger-copy small { display: none; }
  .bb-design-control__trigger > svg { width: 24px; height: 24px; }
  .bb-design-control__panel { width: calc(100vw - 20px); max-height: calc(100dvh - 88px); padding: 10px; }
  .bb-design-control__option { min-height: 86px; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-design-control *, .bb-design-control *::before, .bb-design-control *::after { transition: none !important; }
}
@media print { .bb-design-control { display: none !important; } }

/* Cross-variant hardening: the experiment UI remains a light utility island,
   while dark FlexNav panels use accent colors with readable contrast. */
.bb-design-control { color-scheme: light; }
html .bb-design-control small { color: #756f5f !important; }

html.bb-theme-jungle .bb-fn-m.bb-fn-m,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-m.bb-fn-m,
html.bb-theme-jungle .bb-fn.bb-fn,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn.bb-fn {
  --bbfn-accent: #eab00e;
}
html.bb-theme-jungle .bb-fn-panel,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel {
  --bbfn-accent: #eab00e;
}
html.bb-theme-jungle .bb-fn-panel .bb-fn-index__group:nth-child(3n+2),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-index__group:nth-child(3n+2),
html.bb-theme-jungle .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n+2),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n+2),
html.bb-theme-jungle .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n+2),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n+2) {
  --bbfn-accent: #74c98d;
}
html.bb-theme-jungle .bb-fn-panel .bb-fn-index__group:nth-child(3n),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-index__group:nth-child(3n),
html.bb-theme-jungle .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n),
html.bb-theme-jungle .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n) {
  --bbfn-accent: #ff8a7c;
}
html.bb-theme-jungle .bb-fn-panel::before,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel::before {
  background: linear-gradient(90deg, #eab00e 0 33.34%, #74c98d 33.34% 66.67%, #ff8a7c 66.67% 100%);
}
html.bb-theme-jungle .bb-fn.bb-fn .bb-fn-entry--featured > .bb-fn-entry__label,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn.bb-fn .bb-fn-entry--featured > .bb-fn-entry__label {
  color: #ff8a7c;
}
html.bb-theme-jungle .bb-fn.bb-fn .bb-fn-entry__badge,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn.bb-fn .bb-fn-entry__badge {
  background: #ff8a7c;
  color: #17150e;
}

@media (min-width: 992px) {
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-fn.bb-fn .bb-fn-entry--featured > .bb-fn-entry__label {
    color: #17150e;
  }
  html.bb-header-goldband body:not(.is-mobile):not(.is-checkout):not(.opc-preview)
  #jtl-nav-wrapper .bb-fn.bb-fn .bb-fn-entry__badge {
    background: #17150e;
    color: #fff;
  }
  body:not([data-page="18"]) .bb-design-control__panel {
    max-height: min(680px, calc(100dvh - 164px));
  }
}

/* Retro artwork gets its native proportions and a quiet sticker plate only
   on dark green surfaces; the normal logo remains untouched. */
html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand {
  width: min(180px, 38vw);
  aspect-ratio: 640 / 135;
}
html.bb-logo-retro #footer .logo-wrapper { aspect-ratio: 640 / 135; }
html.bb-logo-retro.bb-theme-jungle #jtl-nav-wrapper #logo .navbar-brand::after,
html.bb-logo-retro.bb-theme-mix #jtl-nav-wrapper #logo .navbar-brand::after,
html.bb-logo-retro.bb-theme-jungle #footer .logo-wrapper::after {
  background-color: #fdfcf7;
  border-radius: 7px;
  box-shadow: 0 0 0 4px #fdfcf7, 0 0 0 5px rgba(23, 21, 14, .16);
}
html.bb-theme-jungle.bb-logo-neu #footer .footer-logo {
  filter: brightness(0) invert(1) !important;
}
@media (min-width: 992px) {
  html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand { width: min(180px, 18vw); }
}

@media print {
  html.bb-logo-retro #jtl-nav-wrapper #logo .navbar-brand::after,
  html.bb-logo-retro #footer .logo-wrapper::after { display: none !important; }
  html.bb-logo-retro #jtl-nav-wrapper #shop-logo,
  html.bb-logo-retro #footer .footer-logo { opacity: 1 !important; }
}
html.bb-theme-jungle .bb-fn-m__home,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-m__home {
  --bbfn-panel-bg: #fff;
  --bbfn-panel-bg-2: #f5f2e7;
  --bbfn-ink: #17150e;
  --bbfn-ink-soft: #514b3c;
  --bbfn-line: #e2ddcc;
  --bbfn-accent: #147a3b;
  --bb-fn-world-color: #6f5300;
  --bb-fn-world-bg: rgba(23, 21, 14, .04);
  --bb-fn-world-border: rgba(23, 21, 14, .14);
  color-scheme: light;
}

/* Paper-surface contrast: light panels use darker Rasta accents; filled gold
   controls inside dark panels switch to dark foreground text. */
html.bb-theme-weiss .bb-fn.bb-fn,
html.bb-theme-weiss .bb-fn-m.bb-fn-m {
  --bbfn-accent: #147a3b;
}
html.bb-theme-weiss .bb-fn-panel {
  --bbfn-accent: #147a3b;
}
html.bb-theme-weiss .bb-fn-panel .bb-fn-index__group:nth-child(3n+2),
html.bb-theme-weiss .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n+2),
html.bb-theme-weiss .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n+2) {
  --bbfn-accent: #966d00;
}
html.bb-theme-weiss .bb-fn-panel .bb-fn-index__group:nth-child(3n),
html.bb-theme-weiss .bb-fn-panel .bb-fn-cards .bb-fn-card:nth-child(3n),
html.bb-theme-weiss .bb-fn-panel .bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n) {
  --bbfn-accent: #c93625;
}
html.bb-theme-weiss .bb-fn-panel::before {
  background: linear-gradient(90deg, #147a3b 0 33.34%, #966d00 33.34% 66.67%, #c93625 66.67% 100%);
}
html.bb-theme-weiss .bb-fn.bb-fn .bb-fn-entry--featured > .bb-fn-entry__label {
  color: #c93625;
}
html.bb-theme-weiss .bb-fn.bb-fn .bb-fn-entry__badge {
  background: #c93625;
  color: #fff;
}

html.bb-theme-weiss .bb-fn-m__home {
  --bbfn-accent: #147a3b;
  --bb-fn-world-color: #6f5300;
  color-scheme: light;
}
html.bb-theme-weiss .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n+2),
html.bb-theme-jungle .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n+2),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n+2) {
  --bbfn-accent: #966d00;
}
html.bb-theme-weiss .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n),
html.bb-theme-jungle .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n),
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-m__home .bb-fn-m-worldcard:nth-child(3n) {
  --bbfn-accent: #c93625;
}

html.bb-theme-jungle .bb-fn-panel .bb-fn-promo--accent,
html.bb-theme-jungle .bb-fn-panel .bb-fn-promo--accent .bb-fn-promo__headline,
html.bb-theme-jungle .bb-fn-panel .bb-fn-promo--accent .bb-fn-promo__text,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-promo--accent,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-promo--accent .bb-fn-promo__headline,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-promo--accent .bb-fn-promo__text {
  color: #17150e;
}
html.bb-theme-jungle .bb-fn-panel .bb-fn-promo--accent a.bb-fn-promo__cta,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-promo--accent a.bb-fn-promo__cta {
  color: #17150e !important;
}
html.bb-theme-jungle .bb-fn-panel .bb-fn-slider__btn:hover,
html.bb-theme-mix #jtl-nav-wrapper .bb-fn-panel .bb-fn-slider__btn:hover {
  color: #17150e;
}

@media print {
  html.bb-theme-jungle #jtl-nav-wrapper #shop-logo,
  html.bb-theme-mix #jtl-nav-wrapper #shop-logo,
  html.bb-theme-jungle #footer .footer-logo {
    filter: none !important;
  }
}