/*
Theme Name: fumotvape
Description: Weißer Fumot-Katalog-Storefront. Nicht die Night-Skin von fumot.com.de.
Version: 1.0.0
Author: Fumot Vape
Text Domain: fumot-de
*/

:root {
  --c-charcoal: #111827;
  --c-text: #111827;
  --c-text-light: #667085;
  --c-gray-50: #f7f9fc;
  --c-gray-100: #eef2f7;
  --c-gray-200: #dce3ec;
  --c-gray-300: #c5ceda;
  --c-green: #111827;
  --c-red: #111827;
  --c-accent: #245fe5;
  --c-accent-dark: #194bc2;
  --c-amber: var(--c-accent);
  --c-amber-dark: var(--c-accent-dark);
  --c-rating: #d97706;
  --c-rating-ink: #8a4b00;
  --c-rating-soft: #fff1c2;
  --c-pop-cyan: #e5f8ff;
  --c-pop-blue: #e9f0ff;
  --c-pop-violet: #f0e9ff;
  --c-pop-pink: #ffe8f3;
  --c-pop-amber: #fff0bf;
  --c-pop-peach: #ffe8d8;
  --c-header-surface: linear-gradient(90deg, #d6f7ff 0%, #e8dcff 50%, #ffdae9 100%);
  --c-nav-surface: linear-gradient(90deg, #245fe5 0%, #6d28d9 56%, #a21caf 100%);
  --c-nav-menu: linear-gradient(180deg, #4f23c8 0%, #a21caf 100%);
  --c-header-violet: #6d28d9;
  --c-header-fuchsia: #a21caf;
  --c-sale: #a21caf;
  --c-sale-dark: #86198f;
  --c-chrome: #0f172a;
  --c-chrome-ink: #ffffff;
  --shadow-hover: 0 12px 28px rgba(15, 23, 42, .12);
  --radius: 6px;
  --radius-lg: 10px;
  --maxw: 1440px;
  --shadow-sm: none;
  --shadow-md: none;
  --font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --h1-size: 2.625rem;
  --h1-size-sm: 1.875rem;
  --h1-weight: 700;
  --h1-lh: 1.12;
  --h1-track: -.03em;
  --h2-size: 1.375rem;
  --h2-size-sm: 1.25rem;
  --h2-weight: 600;
  --h2-lh: 1.25;
  --h3-size: 1.0625rem;
  --h3-size-sm: 1rem;
  --h3-weight: 500;
  --h3-lh: 1.35;
  --h3-color: var(--c-text-light);
  --text: 1.05rem;
  --text-sm: .82rem;
  --price-size: 1.65rem;
  --card-name: .98rem;
  --card-price: 1.05rem;
  --gutter: 20px;
  --section-y: 52px;
  --tap: 44px;
  --btn-move: .3s ease;
}

/* Phone lock. Same tokens as desktop — one step down, not a third scale.
   1200 = hamburger, 768 = this system. Do not add a 420px type step. */
@media (max-width: 768px) {
  :root {
    --h1-size: 1.625rem;
    --h1-size-sm: 1.625rem;
    --h1-lh: 1.2;
    --h2-size: 1.25rem;
    --h2-size-sm: 1.25rem;
    --h3-size: 1rem;
    --h3-size-sm: 1rem;
    --text: 1rem;
    --text-sm: .75rem;
    --price-size: 1.375rem;
    --card-name: .8125rem;
    --card-price: 1.125rem;
    --gutter: 16px;
    --section-y: 32px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-text);
  background: #fff;
  line-height: 1.6;
}
button, input, select, textarea, .btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: inherit;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color var(--btn-move), color var(--btn-move), border-color var(--btn-move), box-shadow var(--btn-move), opacity var(--btn-move);
  line-height: 1.2;
}
.btn-primary { background: var(--c-sale); color: #fff; }
.btn-primary:hover { background: var(--c-sale-dark); }
.btn-dark { background: var(--c-charcoal); color: #fff; }
.btn-dark:hover { background: var(--c-chrome); }
.btn-outline { background: #fff; color: var(--c-charcoal); border-color: var(--c-gray-300); }
.btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent); background: #f3f6ff; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.header-search button,
.nav-toggle,
.search-toggle,
.wpcf7-submit {
  transition: background-color var(--btn-move), color var(--btn-move), border-color var(--btn-move), opacity var(--btn-move), filter var(--btn-move);
}
.header-search button,
.nav-toggle,
.search-toggle,
.header-action,
.nav-list > li > a,
.main-nav .sub-menu li a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .btn,
  .header-action,
  .header-action .action-icon,
  .header-action .cart-count,
  .header-search button,
  .nav-toggle,
  .search-toggle,
  .fp-more,
  .shelf-more,
  .reviews-more,
  .read-more-toggle,
  .hf-tab,
  .qty-btn,
  .pdp-sticky-cart__btn,
  .sub-go,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .wpcf7-submit {
    transition: none;
  }
}

/* Topbar */
.topbar { background: var(--c-chrome); color: var(--c-chrome-ink); font-size: .78rem; letter-spacing: .02em; overflow: hidden; }
.topbar-track { display: flex; width: max-content; animation: topbar-scroll 32s linear infinite; }
.topbar:hover .topbar-track,
.topbar:focus-within .topbar-track { animation-play-state: paused; }
.topbar-seq {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-width: 100vw;
	justify-content: space-evenly;
	padding: 9px 0;
}
.topbar-item { white-space: nowrap; color: #fff; }
.topbar-dot { color: var(--c-rating); opacity: 1; padding: 0 4px; }
@keyframes topbar-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Header: logo/search/icons, then catalog nav bar */
.site-header {
  display: flex;
  flex-direction: column;
  background: var(--c-header-surface);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(17, 17, 17, .12);
  overflow: visible;
}
.header-main { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
  color: var(--c-charcoal);
  background: transparent;
  padding: 0;
  line-height: 0;
}
.site-logo img, .site-logo-img { height: 56px; width: auto; max-width: 128px; object-fit: contain; }
.header-search {
  flex: 1 1 200px;
  max-width: 440px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(36, 95, 229, .22);
  border-radius: 999px;
  min-width: 0;
}
.header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 4px 10px 16px;
  font: inherit;
  font-size: .9rem;
  color: var(--c-text);
  outline: none;
}
.header-search input[type="search"]::placeholder { color: var(--c-text-light); }
.header-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--c-charcoal);
  padding: 8px 14px 8px 8px;
  cursor: pointer;
}
.header-search button .header-icon { width: 20px; height: 20px; display: block; }
.header-search:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(36, 95, 229, .18); }
.header-actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.header-action {
  --header-action-color: var(--c-header-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 9px 16px;
  text-decoration: none;
  color: #fff;
  background: var(--header-action-color);
  position: relative;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--header-action-color);
  transition: background-color var(--btn-move), color var(--btn-move), border-color var(--btn-move);
}
.header-action-contact { --header-action-color: var(--c-accent); }
.header-action-cart { --header-action-color: var(--c-header-fuchsia); }
.header-action:focus-visible {
  background: #fff;
  color: var(--header-action-color);
  border-color: var(--header-action-color);
}
.header-action .action-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  /* Source is charcoal line PNG; invert to white on the coloured pill. */
  filter: invert(1);
  transition: filter var(--btn-move);
}
.header-action:focus-visible .action-icon { filter: none; }
.header-action .action-label { color: inherit; }
.cart-count {
  position: static;
  background: #fff;
  color: var(--header-action-color);
  font-size: .62rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.header-action:focus-visible .cart-count {
  background: var(--header-action-color);
  color: #fff;
}

.main-nav { background: var(--c-nav-surface); }
.main-nav > .container { display: flex; justify-content: center; max-width: 1440px; }
.nav-list { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; width: auto; max-width: 100%; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; flex: 0 0 auto; }
.nav-list > li > a {
  display: block;
  position: relative;
  padding: 12px 16px;
  text-decoration: none;
  font-weight: 500;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease;
  color: #fff;
  white-space: nowrap;
}
.nav-list > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nav-list > li:has(.sub-menu) > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: 2px;
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-list > li:focus-within > a::after { transform: rotate(180deg); opacity: 1; }
.nav-list > li > a:focus-visible,
.nav-list > li.current > a {
  background: transparent;
  color: #fff;
}
.nav-list > li > a:focus-visible::before,
.nav-list > li:focus-within > a::before,
.nav-list > li.current > a::before { transform: scaleX(1); }
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  background: var(--c-nav-menu);
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 60;
  text-align: left;
}
.nav-list > li:last-child .sub-menu { left: auto; right: 0; }
.nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .sub-menu li a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: .82rem;
  color: #fff;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.main-nav .sub-menu li a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

/* Mouse only. :hover on a phone eats the first tap (menu / Konto / 型号). */
@media (hover: hover) and (pointer: fine) {
  .header-search button:hover,
  .nav-toggle:hover,
  .search-toggle:hover {
    opacity: .65;
  }
  .header-action:hover {
    background: #fff;
    color: var(--header-action-color);
    border-color: var(--header-action-color);
  }
  .header-action:hover .action-icon { filter: none; }
  .header-action:hover .cart-count {
    background: var(--header-action-color);
    color: #fff;
  }
  .footer-acc-sum:hover { background: rgba(255, 255, 255, .05); }
  .nav-list > li:hover > a::after { transform: rotate(180deg); opacity: 1; }
  .nav-list > li > a:hover {
    background: transparent;
    color: #fff;
  }
  .nav-list > li > a:hover::before { transform: scaleX(1); }
  .nav-list > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .main-nav .sub-menu li a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1200px) {
  .nav-list > li > a:hover { background: rgba(255, 255, 255, .05); }
}

.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--c-charcoal); }
.nav-toggle .header-icon { width: 26px; height: 26px; display: block; pointer-events: none; }
.search-toggle { display: none; }
.nav-acc-chev { display: none; }

@media (max-width: 1399px) and (min-width: 1201px) {
  .nav-list > li > a { padding: 12px 12px; font-size: .72rem; }
}

@media (max-width: 1200px) {
  .header-main { gap: 12px; flex-wrap: nowrap; position: relative; z-index: 70; }
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    overscroll-behavior: none;
  }
  /* Sticky header follows the shifted body on iOS. Pin it to the viewport
     so the hamburger stays on screen after a scrolled open. */
  body.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 4;
    flex: 0 0 auto;
    z-index: 2;
    touch-action: manipulation;
  }
  .header-actions { margin-left: 0; order: 3; flex: 0 0 auto; }
  .main-nav { display: none; }
  .main-nav.open {
    display: block;
    position: fixed;
    top: var(--nav-panel-top, var(--site-header-h, 120px));
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--c-chrome);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    max-height: calc(100dvh - var(--nav-panel-top, var(--site-header-h, 120px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
  }
  .main-nav > .container { display: block; max-width: none; padding: 0; }
  .nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
  }
  .nav-list > li { width: 100%; }
  .nav-list > li + li { border-top: 1px solid rgba(255,255,255,.1); }
  .nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    min-height: 48px;
    font-size: .82rem;
    letter-spacing: .06em;
  }
  .nav-list > li > a::before { display: none; }
  .nav-list > li:has(.sub-menu) > a::after { content: none; display: none; }
  .nav-acc-chev {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .72);
    border: 0;
    background: none;
    transition: transform .3s ease;
  }
  .nav-acc-icon { display: block; width: 16px; height: 16px; }
  .nav-list > li.is-sub-open > a .nav-acc-chev { transform: rotate(180deg); }
  .nav-list > li.current > a { background: transparent; }
  /* Accordion on phone/tablet — do not dump every submenu open. */
  .main-nav .sub-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    background: transparent;
  }
  .main-nav .sub-menu li { margin: 0; }
  .main-nav .sub-menu li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 0;
    color: #d1d5db;
  }
  .main-nav .nav-list > li.is-sub-open > .sub-menu { display: block; }
  .nav-list > li:hover > a::after, .nav-list > li:focus-within > a::after { transform: none; }
}

@media (max-width: 640px) {
  .topbar { font-size: .74rem; }
  .topbar-seq { padding-top: 7px; padding-bottom: 7px; }
  .header-main { padding-top: 10px; padding-bottom: 10px; }
  .site-logo { padding: 0; }
  .site-logo img, .site-logo-img { height: 40px; max-width: 92px; }
}

/* Hero */
.hero { background: #fff; padding: 36px 0 28px; border-bottom: 1px solid var(--c-gray-200); }
.hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.hero-kicker { color: var(--c-text-light); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.hero h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-track); margin: 0 0 14px; color: var(--c-charcoal); font-weight: var(--h1-weight); }
.hero h1 em { font-style: normal; color: var(--c-charcoal); }
.hero p.lead { color: var(--c-text-light); font-size: var(--text); margin: 0 0 20px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-spotlight { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: 16px 18px 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: all .15s ease; }
.hero-spotlight:hover { border-color: var(--c-amber); box-shadow: var(--shadow-md); }
.hero-spotlight-badge { align-self: flex-start; background: var(--c-gray-100); color: #111; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; margin-bottom: 8px; }
.hero-spotlight-media { display: block; background: var(--c-gray-50); border-radius: var(--radius); overflow: hidden; }
.hero-spotlight-media img { width: 100%; height: auto; object-fit: contain; display: block; }
.hero-spotlight-copy { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hero-spotlight-copy strong { font-size: 1.2rem; color: var(--c-charcoal); }
.hero-spotlight-copy > span:not(.btn):not(.pc-rating-count) { color: var(--c-text-light); font-size: .92rem; }
.hero-spotlight .pc-rating { margin: 2px 0 4px; }
.hero-spotlight-price { font-size: 1.15rem !important; font-weight: 800; color: var(--c-charcoal) !important; }
.hero-spotlight-price del { color: var(--c-text-light); font-weight: 400; font-size: .85rem; margin-right: 8px; }
.hero-spotlight .btn { align-self: flex-start; margin-top: 6px; }
.hero-spotlight .btn-primary { color: #fff; }
.trust-badges { display: flex; gap: 16px 22px; flex-wrap: wrap; font-size: .84rem; color: var(--c-text-light); align-items: center; }
.trust-badge { display: inline-flex; align-items: center; gap: 8px; }
.trust-badge-icon { width: 40px; height: 40px; border-radius: 0; object-fit: contain; flex-shrink: 0; display: block; }
.trust-badge-label { line-height: 1.2; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--h1-size-sm); }
}

/* Sections */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--c-gray-50); }
.home-stats,
.shop-stats { background: var(--c-pop-blue); }
.home-flavors { background: var(--c-pop-pink); }
.home-verify,
.shop-market { background: var(--c-pop-amber); }
#bewertungen,
.shop-reviews { background: var(--c-pop-violet); }
.copy-band.section-alt { background: var(--c-pop-cyan); }
.home-blog { background: var(--c-pop-peach); }
.section-kicker { color: var(--c-text-light); font-weight: 600; font-size: .75rem; letter-spacing: .04em; margin: 0 0 6px; text-align: left; }
.section-title {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: 0;
  margin: 0 0 10px;
  text-align: center;
  color: var(--c-charcoal);
}
.section-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--c-charcoal);
}
.section-subhead {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: 0;
  margin: 0 0 8px;
  text-align: center;
  color: var(--h3-color);
}
.section-sub { text-align: center; color: var(--c-text-light); font-size: var(--text); max-width: 720px; margin: 0 auto 34px; }
.section-more { text-align: center; margin: 22px 0 0; }

/* Decision cards */
.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.decision-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: 26px 24px; text-decoration: none; display: block; transition: all .15s ease; }
.decision-card:hover { border-color: var(--c-amber); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.decision-card .dc-emoji { font-size: 1.8rem; }
.decision-card h3 { margin: 10px 0 6px; font-size: 1.1rem; color: var(--c-charcoal); }
.decision-card p { margin: 0 0 10px; color: var(--c-text-light); font-size: .9rem; }
.decision-card .dc-link { color: var(--c-amber-dark); font-weight: 600; font-size: .88rem; }
@media (max-width: 900px) { .decision-grid { grid-template-columns: 1fr; } }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Lead shelf: same card as the secondary grid, one size up. */
.product-grid-lead { gap: 24px; }
.product-grid-lead .product-card .pc-body { padding: 18px 20px 20px; }
.product-grid-lead .product-card .pc-name { font-size: calc(var(--card-name) + .1rem); margin-bottom: 8px; }
.product-grid-lead .product-card .pc-line { margin-bottom: 12px; }
.product-grid-lead .product-card .pc-specs { font-size: .85rem; }
.product-grid-lead .product-card .pc-stars { font-size: .9rem; }
.product-grid-lead .product-card .pc-rating-count { font-size: .8rem; }
.product-grid-lead .product-card .pc-price { font-size: calc(var(--card-price) + .13rem); }
.product-grid-lead .product-card .pc-cta { margin-top: 12px; font-size: .88rem; }
.product-grid-lead .product-card .pc-badge { top: 14px; right: 14px; left: auto; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .product-grid, .product-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* three lead models: one per row beats a 2-up with an orphan */
  .product-grid-lead { grid-template-columns: 1fr; gap: 16px; }
  .product-grid-lead .product-card .pc-body { padding: 16px 18px 18px; }
}

.product-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: box-shadow .4s ease; text-decoration: none; color: inherit; }
.product-card:hover { box-shadow: 0 8px 28px rgba(17, 17, 17, .07); }
.product-card .pc-media { overflow: hidden; position: relative; }
.product-card .pc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0);
  pointer-events: none;
  transition: background .4s ease;
}
.product-card:hover .pc-media::after { background: rgba(17, 17, 17, .06); }
.product-card:hover .pc-name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.product-card .pc-badge { position: absolute; top: 12px; right: 12px; left: auto; background: var(--c-sale); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; z-index: 2; }
.product-card .pc-badge.badge-new { background: var(--c-charcoal); }
.product-card .pc-media { display: block; aspect-ratio: 1/1; background: var(--c-gray-50); }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.product-card .pc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; background: #fff; }
.product-card .pc-meta { display: block; font-size: .74rem; color: var(--c-text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.product-card .pc-name { display: block; font-size: var(--card-name); font-weight: 700; margin: 0 0 6px; line-height: 1.35; color: var(--c-charcoal); }
.product-card .pc-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.product-card .pc-specs { display: block; font-size: var(--text-sm); color: var(--c-text-light); margin: 0; }
.pc-rating { display: inline-flex; align-items: center; gap: 6px; }
.pc-stars { position: relative; display: inline-block; font-size: .82rem; line-height: 1; letter-spacing: .05em; color: var(--c-gray-300); }
.pc-stars::before { content: "\2605\2605\2605\2605\2605"; }
.pc-stars-on { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--c-rating); }
.pc-stars-on::before { content: "\2605\2605\2605\2605\2605"; }
.pc-rating-count { font-size: .76rem; color: var(--c-text-light); }
.product-card .pc-price { display: block; margin-top: auto; font-size: var(--card-price); }
.product-card .pc-price del { color: var(--c-text-light); font-size: .85rem; margin-right: 8px; }
/* Discount share. Secondary amber marker, distinct from the main sale action.
   Inline, not a flex item: Woo puts bare text nodes and screen-reader spans
   inside the price, and flexing this box turns each of them into a gap. */
.product-card .pc-off {
  display: inline-block;
  margin-left: 8px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--c-rating-ink);
  background: var(--c-rating-soft);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  vertical-align: 2px;
}
.product-card .pc-price ins, .product-card .pc-price .amount-current { text-decoration: none; color: var(--c-charcoal); font-weight: 800; }
.product-card .pc-cta {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--c-sale);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--btn-move);
}
.product-card:hover .pc-cta { background: var(--c-sale-dark); }
.product-card .btn { width: 100%; }

/* Comparison table */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); }
table.compare { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; background: #fff; }
table.compare th, table.compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-gray-100); white-space: nowrap; }
table.compare thead th { background: var(--c-charcoal); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.compare tbody tr:hover { background: var(--c-pop-amber); }
table.compare td.price { font-weight: 800; color: var(--c-charcoal); }
table.compare td.price del { color: var(--c-text-light); font-weight: 400; font-size: .8rem; margin-right: 6px; }
table.compare a { color: var(--c-amber-dark); font-weight: 600; }

/* Flavor chips */
.flavor-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.flavor-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-gray-200); border-radius: 999px; padding: 8px 16px; font-size: .86rem; text-decoration: none; color: var(--c-text); transition: all .15s ease; }
.flavor-chip:hover { border-color: var(--c-amber); box-shadow: var(--shadow-sm); }
.flavor-chip .rank { color: var(--c-amber-dark); font-weight: 800; font-size: .78rem; }
.flavor-chip .fc-model { color: var(--c-text-light); font-size: .76rem; }

/* Bulk banner */
.bulk-banner { background: var(--c-charcoal); color: #fff; border-radius: var(--radius-lg); padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bulk-banner h3 { margin: 0 0 6px; font-size: 1.35rem; }
.bulk-banner p { margin: 0; color: #d1d5db; font-size: .95rem; }
.bulk-banner .tiers { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.bulk-banner .tier { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 8px 14px; font-size: .85rem; }
.bulk-banner .tier strong { color: var(--c-amber); }

/* Trust section */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.trust-item { text-align: center; padding: 26px 20px 28px; background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); }
.trust-item .ti-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: none;
  border: 0;
  border-radius: 0;
}
.trust-item .ti-icon img { display: block; width: 40px; height: 40px; object-fit: contain; }
.trust-item h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); margin: 10px 0 6px; color: var(--c-charcoal); }
.trust-item p { font-size: .85rem; line-height: 1.55; color: var(--c-text-light); margin: 0 auto; max-width: 27ch; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-pay { display: flex; justify-content: center; margin-top: 30px; }
.trust-pay .pay-badges { justify-content: center; margin-top: 0; }

.nic-free-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.nic-free-inner h2 { margin: 0 0 8px; font-size: 1.45rem; color: var(--c-charcoal); }
.nic-free-inner p { margin: 0; color: var(--c-text-light); max-width: 560px; }
.nic-free-links { display: flex; gap: 10px; flex-wrap: wrap; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.review-card {
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.review-stars { color: var(--c-rating); letter-spacing: 1px; margin-bottom: 12px; }
.review-card p { margin: 0 0 16px; color: var(--c-charcoal); font-size: 1rem; line-height: 1.6; }
.review-meta { display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--c-gray-100); font-size: .8rem; color: var(--c-text-light); }
.review-meta a { color: var(--c-amber-dark); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }

.blog-index { padding: 12px 0 64px; }
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.blog-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* 21st Snap Carousel: peek 48 / gap 10. Shelf only; index pages stay a grid. */
@media (max-width: 1024px) {
  .blog-grid--peek {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .blog-grid--peek::-webkit-scrollbar { display: none; }
  .blog-grid--peek .blog-card {
    flex: 0 0 calc(100% - 58px);
    width: calc(100% - 58px);
    max-width: none;
    scroll-snap-align: start;
  }
  .blog-grid--peek .blog-card:last-child {
    flex-basis: 100%;
    width: 100%;
  }
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .4s ease;
}
.blog-card:hover { box-shadow: 0 8px 28px rgba(17, 17, 17, .07); }
.blog-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.blog-card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-gray-50);
  overflow: hidden;
}
.blog-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0);
  pointer-events: none;
  transition: background .4s ease;
}
.blog-card:hover .blog-card-media::after { background: rgba(17, 17, 17, .06); }
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; background: #fff; }
.blog-card-meta { color: var(--c-text-light); font-size: .78rem; }
.blog-author {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin: 14px 0 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-top: 3px solid var(--c-chrome);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .08), 0 10px 24px rgba(17, 17, 17, .08);
}
.blog-author-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.blog-author-mark img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}
.blog-author-copy { min-width: 0; }
.blog-author-name {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-charcoal);
}
.blog-author-bio {
  margin: 6px 0 0;
  color: var(--c-text-light);
  font-size: .86rem;
}
.archive-header .blog-author--page {
  max-width: 820px;
  margin: 22px 0 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-items: flex-start;
  gap: 22px;
}
.archive-header .blog-author--page .blog-author-mark img {
  height: 72px;
  max-width: 168px;
}
.archive-header .blog-author--page .blog-author-bio {
  margin: 0;
  color: var(--c-charcoal);
  font-size: 1rem;
  line-height: 1.65;
}
.archive-header .blog-author--page .blog-author-bio + .blog-author-bio { margin-top: 10px; }
.archive-header .blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 26px 0 -30px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-gray-300);
}
.archive-header .blog-cats a {
  color: var(--c-charcoal);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 16px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--btn-move), border-color var(--btn-move);
}
.archive-header .blog-cats a[aria-current="page"] {
  color: var(--c-charcoal);
  font-weight: 600;
  border-bottom-color: var(--c-charcoal);
}
.blog-single-meta a { color: var(--c-charcoal); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .archive-header .blog-cats a:hover {
    color: var(--c-charcoal);
    border-bottom-color: var(--c-gray-300);
  }
  .archive-header .blog-cats a[aria-current="page"]:hover { border-bottom-color: var(--c-charcoal); }
  .blog-single-meta a:hover { text-decoration: underline; }
}
@media (max-width: 768px) {
  .archive-header .blog-author--page { flex-direction: column; gap: 14px; }
  .archive-header .blog-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .archive-header .blog-cats::-webkit-scrollbar { display: none; }
  .archive-header .blog-cats a { flex: 0 0 auto; white-space: nowrap; }
}
.guide-page .blog-author { margin: 12px 0 22px; }
.blog-kicker { color: var(--c-amber-dark); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.blog-card h3 {
  margin: 0;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  color: var(--c-charcoal);
  line-height: var(--h3-lh);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card p {
  margin: 0;
  color: var(--c-text-light);
  font-size: .86rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-more { color: var(--c-charcoal); font-weight: 600; font-size: .86rem; margin-top: auto; padding-top: 6px; }
.blog-single-meta { margin: 0 0 8px; color: var(--c-text-light); font-size: .86rem; }
.guide-page > .container { padding-top: 36px; }
.guide-page h1 { margin: 0 0 8px; font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-track); color: var(--c-charcoal); }
.commerce-page > .container { padding-top: 36px; padding-bottom: 60px; }
.commerce-page h1 {
  margin: 0 0 8px;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
  color: var(--c-charcoal);
}
.commerce-body { padding-top: 8px; }
.store-empty { margin: 28px 0 0; }
.store-empty__text {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: var(--c-text-light);
}
.store-empty__cta { margin: 0; }
.cart-empty-shelf { margin: 48px 0 0; }
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .cart-empty.woocommerce-info { display: none; }
.woocommerce-cart .shop_table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-gray-200);
  text-align: left;
  color: var(--c-charcoal);
  vertical-align: middle;
}
.woocommerce-cart .shop_table thead th {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-light);
}
.woocommerce-cart .shop_table .product-name a {
  font-weight: 600;
  text-decoration: none;
  color: var(--c-charcoal);
}
.woocommerce-cart .shop_table .product-name a:hover { text-decoration: underline; }
.woocommerce-cart .shop_table .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--c-gray-50);
}
.woocommerce-cart .woocommerce-Price-amount,
.woocommerce-cart .cart_totals .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce-Price-amount {
  color: var(--c-charcoal);
}
.woocommerce-cart .actions .button {
  background: #fff;
  color: var(--c-charcoal);
  border: 2px solid var(--c-gray-300);
  font-weight: 600;
  transition: background-color var(--btn-move), color var(--btn-move), border-color var(--btn-move);
}
.woocommerce-cart .actions .button:hover {
  border-color: var(--c-charcoal);
  background: #fff;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  background: var(--c-sale);
  color: #fff;
  border: 0;
  font-weight: 600;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  background: var(--c-sale-dark);
  color: #fff;
}
.woocommerce-cart .cart_totals {
  margin-top: 28px;
}
.woocommerce-cart .cart_totals h2 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  color: var(--h3-color);
  margin: 0 0 12px;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 420px;
}
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button,
.woocommerce-account input.button {
  background: var(--c-chrome);
  color: #fff;
  border: 0;
  font-weight: 600;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover {
  background: #000;
  color: #fff;
}
.woocommerce-account a { color: var(--c-charcoal); }
.woocommerce form .form-row .required,
.woocommerce form .form-row .required[aria-hidden="true"] {
  color: var(--c-charcoal);
  border: 0;
}
.woocommerce span.onsale { display: none; }
.guide-hero { padding: 28px 0 0; }
.guide-hero img {
  display: block;
  width: min(720px, 100%);
  max-height: 420px;
  margin: 0 auto;
  object-fit: contain;
  background: #0c0f16;
  border-radius: var(--radius-lg);
}
.guide-content { padding-top: 8px; }
.guide-content h2 { margin: 28px 0 10px; font-size: 1.25rem; }
.guide-content h2.copy-h2 {
  margin: 28px 0 12px;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  color: var(--h3-color);
}
.guide-content .copy-body p,
.guide-content .copy-body li { color: var(--c-text-light); }
.guide-content .copy-body a:not(.btn) { color: var(--c-charcoal); }
.guide-content .copy-figure img { background: transparent; }
.guide-content p, .guide-content li { color: var(--c-text); }
/* Buttons keep their own colours here: --c-amber-dark is #111, so a .btn-primary
   caught by this rule turns into black text on a black block. */
.guide-content a:not(.btn) { color: var(--c-amber-dark); }
.guide-figure { margin: 22px 0; text-align: center; }
.guide-figure img { width: min(560px, 100%); height: auto; object-fit: contain; background: #0c0f16; border-radius: var(--radius); }
.guide-figure figcaption { margin-top: 8px; font-size: .86rem; color: var(--c-text-light); }
.guide-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.guide-table th, .guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-gray-200); }
.guide-content .btn { margin-top: 8px; }
.about-lineup {
	list-style: none;
	margin: 8px 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 12px;
}
.about-lineup a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--c-charcoal);
	text-decoration: none;
}
.guide-content .about-lineup a { color: var(--c-charcoal); }
.about-lineup img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--c-gray-100);
	border-radius: 12px;
}
.about-lineup span {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
	.about-lineup a:hover span { text-decoration: underline; }
}
@media (max-width: 640px) {
	.about-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guide-content blockquote {
  margin: 18px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--c-charcoal);
  background: var(--c-gray-100);
}
.guide-content blockquote p:last-child { margin-bottom: 0; }
/* A field the shop owner still has to supply. Meant to be impossible to miss
   and impossible to mistake for finished copy — a wrong Impressum is worse
   than an obviously unfinished one. Charcoal, not red: red stays banned. */
.legal-todo {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-charcoal);
  color: #fff;
  font-size: .88em;
  font-weight: 600;
}

/* Kontakt: one composed contact card, following the same single-card rhythm as
   the storefront side rail and newsletter. Contact Form 7 remains the form. */
.contact-shell {
  width: min(1100px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
  margin: 4px 0 0;
  overflow: hidden;
  border: 1px solid var(--c-gray-200);
  border-top: 3px solid var(--c-chrome);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(17, 17, 17, .08);
}
.contact-form-card {
  min-width: 0;
  padding: 38px 42px 40px;
}
.contact-intro {
  max-width: 48rem;
  margin: 0 0 30px;
  color: var(--c-text-light);
  font-size: 1rem;
  line-height: 1.75;
}
.contact-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
}
.contact-visual {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .16), transparent 30%),
    linear-gradient(145deg, #08090b 0%, var(--c-chrome) 58%, #26282d 100%);
}
.contact-visual::before,
.contact-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
}
.contact-visual::before {
  width: 250px;
  height: 250px;
  top: -112px;
  left: -84px;
}
.contact-visual::after {
  width: 180px;
  height: 180px;
  right: -72px;
  bottom: -92px;
}
.contact-visual__item {
  position: absolute;
  display: block;
  width: 144px;
  height: 194px;
  top: 78px;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}
.contact-visual__item--1 {
  left: calc(50% - 200px);
  transform: rotate(-8deg);
}
.contact-visual__item--2 {
  z-index: 2;
  width: 178px;
  height: 238px;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
}
.contact-visual__item--3 {
  right: calc(50% - 200px);
  transform: rotate(8deg);
}
.contact-visual__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-details {
  min-width: 0;
  flex: 1;
  padding: 32px 34px 36px;
}
.guide-content .contact-details h2 {
  margin: 0 0 24px;
  color: var(--c-charcoal);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
}
.guide-content .contact-details h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 10px;
  background: var(--c-charcoal);
}
.contact-details p {
  margin: 0 0 20px;
  color: var(--c-text-light);
  line-height: 1.9;
}
.contact-details .legal-todo {
  display: inline-block;
  margin: 3px 0;
}
.contact-details .contact-imprint {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-gray-200);
}
.contact-details a {
  color: var(--c-charcoal);
  font-weight: 600;
  text-underline-offset: 3px;
}
.contact-shell .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
  margin: 0;
}
.contact-shell .wpcf7-form > p {
  min-width: 0;
  margin: 0;
}
.contact-shell .wpcf7-form > p:nth-of-type(n + 3),
.contact-shell .wpcf7-response-output {
  grid-column: 1 / -1;
}
.contact-shell .wpcf7-form label {
  display: block;
  color: var(--c-charcoal);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}
.contact-shell .wpcf7-form label br {
  display: none;
}
.contact-shell .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}
.contact-shell .wpcf7-text,
.contact-shell .wpcf7-email,
.contact-shell .wpcf7-textarea {
  width: 100%;
  max-width: none;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-charcoal);
  font: inherit;
  font-size: .92rem;
  outline: 0;
  transition: border-color var(--btn-move), box-shadow var(--btn-move), background-color var(--btn-move);
}
.contact-shell .wpcf7-text,
.contact-shell .wpcf7-email {
  height: 50px;
  padding: 0 14px;
}
.contact-shell .wpcf7-textarea {
  min-height: 170px;
  padding: 13px 14px;
  resize: vertical;
}
.contact-shell .wpcf7-text:focus,
.contact-shell .wpcf7-email:focus,
.contact-shell .wpcf7-textarea:focus {
  border-color: var(--c-charcoal);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
}
.contact-shell .wpcf7-submit {
  width: 100%;
  min-height: 50px;
  padding: 12px 24px;
  appearance: none;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-sale);
  color: #fff;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
}
.contact-shell .wpcf7-submit:focus-visible {
  outline: 3px solid rgba(36, 95, 229, .25);
  outline-offset: 3px;
}
.contact-shell .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}
.contact-shell .wpcf7-not-valid-tip {
  margin-top: 7px;
  color: var(--c-charcoal);
  font-size: .78rem;
}
.contact-shell .wpcf7-form-control[aria-invalid="true"] {
  border-color: var(--c-charcoal);
  background: var(--c-gray-50);
}
.contact-shell .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius);
  background: var(--c-gray-50);
  color: var(--c-charcoal);
  font-size: .86rem;
}
@media (hover: hover) and (pointer: fine) {
  .contact-shell .wpcf7-submit:hover {
    background: var(--c-sale-dark);
  }
}
@media (max-width: 900px) {
  .contact-shell {
    grid-template-columns: 1fr;
  }
  .contact-side {
    border-top: 1px solid var(--c-gray-200);
    border-left: 0;
  }
  .contact-visual {
    min-height: 320px;
  }
}
@media (max-width: 640px) {
  .contact-shell {
    width: calc(100vw - 32px);
    border-radius: 12px;
  }
  .contact-form-card,
  .contact-details {
    padding: 26px 20px;
  }
  .contact-intro {
    margin-bottom: 24px;
    font-size: .94rem;
  }
  .contact-visual {
    min-height: 245px;
  }
  .contact-visual__item {
    width: 116px;
    height: 156px;
    top: 64px;
    padding: 7px;
    border-radius: 14px;
  }
  .contact-visual__item--1 {
    left: calc(50% - 168px);
  }
  .contact-visual__item--2 {
    width: 144px;
    height: 192px;
    top: 22px;
  }
  .contact-visual__item--3 {
    right: calc(50% - 168px);
  }
  .contact-shell .wpcf7-form {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .contact-shell .wpcf7-form > p {
    grid-column: 1 / -1;
  }
}
@media (max-width: 1024px) {
  .blog-grid,
  .blog-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid,
  .blog-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .guide-page h1,
  .commerce-page h1,
  .archive-header h1,
  .catalog-board h1 { font-size: var(--h1-size-sm); }
  .section-title,
  .pdp-copy h2 { font-size: var(--h2-size-sm); }
  .section-subhead, .copy-h2, .trust-item h3, .blog-card h3 { font-size: var(--h3-size-sm); }
}

/* FAQ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-list details { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-list summary { padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.3rem; color: var(--c-amber-dark); font-weight: 400; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list .faq-body { padding: 0 20px 16px; color: var(--c-text-light); font-size: .93rem; }
.faq-list .faq-body a { color: var(--c-amber-dark); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-amber-dark) 100%); color: #fff; text-align: center; padding: 48px 0; }
.cta-band h2 { margin: 0 0 10px; font-size: 1.7rem; }
.cta-band p { margin: 0 0 20px; opacity: .92; }
.cta-band .btn { background: #fff; color: var(--c-amber-dark); }

/* Footer */
.site-footer { background: var(--c-charcoal); color: #d1d5db; margin-top: 0; }
/* 21st Origin Input with button on footer chrome. No icon+title cluster. */
.sub-bar {
  padding: 36px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sub-card {
  padding: 0 0 28px;
  background: none;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sub-form { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.sub-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* Origin Input with button: row + gap, each piece rounded. Never a welded slab. */
.sub-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  min-height: 48px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.sub-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  padding: 0 16px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  color: #fff;
  outline: none;
}
.sub-input:focus,
.sub-input:focus-visible {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
}
.sub-input::placeholder { color: rgba(255, 255, 255, .48); }
.sub-form .sub-go {
  flex: 0 0 auto;
  height: 48px;
  min-height: 48px;
  background: var(--c-sale);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0 22px;
  font-size: .9rem;
}
.sub-go:hover,
.sub-go:focus-visible {
  background: var(--c-sale-dark);
  color: #fff;
}
.sub-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
}
.sub-consent input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  transition: background-color var(--btn-move), border-color var(--btn-move);
}
.sub-consent input::after {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
  opacity: 0;
}
.sub-consent input:checked {
  background: var(--c-sale);
  border-color: var(--c-sale);
}
.sub-consent input:checked::after { opacity: 1; }
.sub-consent input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
}
.sub-consent a,
.sub-consent a:visited {
  color: rgba(255, 255, 255, .82);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sub-consent a:hover,
.sub-consent a:focus-visible { color: #fff; }
.sub-done,
.sub-fail {
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: .95rem;
  line-height: 1.4;
  color: #fff;
}
.sub-bar + .footer-grid { padding-top: 28px; }
@media (max-width: 768px) {
  .sub-bar { padding-top: 28px; }
  .sub-card { padding: 0 0 22px; }
  .sub-input { padding: 0 14px; }
  .sub-form .sub-go { padding: 0 16px; }
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 28px; }
.footer-brand h3 { color: #fff; font-size: 1.3rem; margin: 0 0 10px; }
.footer-brand p { font-size: .88rem; margin: 0 0 14px; }
.footer-tags {
	color: #9ca3af;
	font-size: .8rem;
	line-height: 1.55;
	margin: 0 0 10px;
}
.footer-mail { margin: 0 0 4px; }
.footer-mail a {
	color: #d1d5db;
	text-decoration: none;
	font-size: .88rem;
	transition: color .2s ease;
}
.footer-mail a:visited { color: #d1d5db; }
.footer-mail a:hover,
.footer-mail a:focus-visible,
.footer-mail a:visited:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.pay-badge-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.pay-badge-item img,
.pay-badge-item svg {
  display: block;
  height: 22px;
  width: auto;
}
.pay-badge-item--klarna,
.pay-badge-item--sofort {
  background: transparent;
  padding: 0;
  box-shadow: none;
  height: 36px;
}
.pay-badge-item--klarna img,
.pay-badge-item--sofort img {
  height: 36px;
}
.footer-logo { display: inline-block; margin-bottom: 12px; }
.footer-logo img { height: 64px; width: auto; max-width: 140px; object-fit: contain; }
.footer-nav { min-width: 0; }
.footer-acc { margin: 0; }
.footer-acc-sum {
  list-style: none;
  display: block;
}
.footer-acc-sum::-webkit-details-marker { display: none; }
.footer-acc-sum::marker { content: none; }
.footer-acc-chev { display: none; }
.footer-col h4 { color: #fff; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  color: #d1d5db;
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s ease;
}
.footer-col a:visited { color: #d1d5db; }
.footer-col a:hover,
.footer-col a:focus-visible,
.footer-col a:visited:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.footer-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 8px 0 28px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-follow-logo { display: inline-flex; line-height: 0; }
.footer-follow-logo img { height: 72px; width: auto; max-width: 160px; object-fit: contain; }
.footer-follow h4 {
  color: #fff;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}
.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #d1d5db;
  text-decoration: none;
  transition: color .3s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible { color: #fff; }
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: none;
}
.footer-social-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .8rem; text-align: center; color: #9ca3af; }
@media (min-width: 769px) {
  .footer-nav { display: contents; }
  .footer-acc-sum { pointer-events: none; cursor: default; }
  .footer-acc > ul { display: block !important; }
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .footer-nav {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    overflow: hidden;
  }
  .footer-col + .footer-col {
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .footer-acc-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 14px 16px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-col h4 {
    margin: 0;
    line-height: 1.2;
  }
  .footer-acc-chev {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .72);
    border: 0;
    background: none;
    transition: transform .3s ease;
  }
  .footer-acc-icon { display: block; width: 16px; height: 16px; }
  .footer-acc[open] .footer-acc-chev { transform: rotate(180deg); }
  .footer-acc > ul {
    padding: 0;
  }
  .footer-acc > ul li { margin: 0; }
  .footer-acc > ul a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 16px;
  }
  .footer-follow {
    gap: 12px;
    padding: 20px 0 24px;
  }
  .footer-follow-logo img { height: 48px; max-width: 110px; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .footer-acc-chev,
  .nav-acc-chev { transition: none; }
}

/* Age gate */
.age-gate-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.82); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.age-gate { background: #fff; border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: 36px 32px; text-align: center; }
.age-gate h2 { margin: 0 0 10px; color: var(--c-charcoal); }
.age-gate p { color: var(--c-text-light); font-size: .93rem; margin: 0 0 22px; }
.age-gate .age-actions { display: flex; gap: 12px; justify-content: center; }
body.age-gate-active { overflow: hidden; }
.age-denied-note {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 22px;
}
.woocommerce-checkout .fumot-birthdate input[type="date"] { min-height: 44px; }
.woocommerce-checkout .fumot-age-confirm label { font-weight: 600; }

/* WooCommerce content pages */
/* Left edge of the body copy has to line up with the crumb and the H1 above it,
   so the column is left-aligned inside .container instead of centred. */
.page-content, .entry-content { max-width: 820px; margin: 0 auto 0 0; padding: 24px 0 56px; }
.page-content h1, .entry-content h1 { color: var(--c-charcoal); }
.archive-header { background: var(--c-gray-50); padding: 24px 0 30px; text-align: left; }
.archive-header h1 { margin: 0 0 10px; font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-track); color: var(--c-charcoal); text-align: left; }
.archive-header p { margin: 0; color: var(--c-text-light); max-width: 52em; }
.shop-main { padding: 36px 0 60px; }

/* WooCommerce overrides (light-touch) */
.woocommerce-notices-wrapper { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.onsale { display: none; } /* using own badge */

/* Single product */
.pdp-wrap,
.single-product .woocommerce,
.woocommerce div.product,
.pdp-split {
  overflow: visible;
}
.pdp-split {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.pdp-split__gallery {
  flex: 0 0 46%;
  max-width: 46%;
}
.pdp-split .summary.entry-summary,
.pdp-split .summary {
  flex: 1 1 54%;
  float: none !important;
  width: auto !important;
  max-width: none !important;
}
.pdp-split .images,
.pdp-split .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
}
@media (min-width: 769px) {
  .pdp-split__gallery {
    position: sticky;
    top: var(--pdp-sticky-top, 132px);
    z-index: 2;
  }
}
@media (max-width: 768px) {
  .pdp-split {
    display: block;
  }
  .pdp-split__gallery {
    max-width: none;
    margin-bottom: 24px;
  }
}
.woocommerce div.product div.images.woocommerce-product-gallery {
  opacity: 1 !important;
  position: relative;
}
/* Frame the visible window only. Overflow on the sliding strip clips the
   other shots, so thumbs appear to do nothing. */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
  aspect-ratio: 1 / 1;
  width: 100% !important;
  max-height: none;
  background: var(--c-gray-50);
  border: 1px solid var(--c-gray-200);
  border-radius: 16px;
  overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  background: var(--c-gray-50);
}
.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper {
  display: flex;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  background: var(--c-gray-50);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .flex-viewport img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.woocommerce div.product div.images .flex-viewport img {
  height: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0 !important;
  padding: 0;
  list-style: none;
}
/* Desktop: six per row. Phone must wrap — do not nowrap / swipe the strip. */
.woocommerce div.product div.images .flex-control-thumbs li {
  float: none !important;
  width: calc(16.666% - 7px) !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .woocommerce div.product div.images .flex-control-thumbs li {
    width: calc(33.333% - 6px) !important;
  }
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--c-gray-200);
  background: var(--c-gray-50);
  opacity: 1;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce div.product div.images .flex-control-thumbs li img:hover {
    border-color: var(--c-gray-300);
    box-shadow: 0 4px 14px rgba(17, 17, 17, .06);
  }
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--c-charcoal);
  box-shadow: inset 0 0 0 1px var(--c-charcoal);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .86);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.woocommerce div.product div.images .flex-direction-nav {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.woocommerce div.product div.images .flex-direction-nav a {
  position: absolute;
  top: 42%;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, .82);
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
}
.woocommerce div.product div.images .flex-direction-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
}
.woocommerce div.product div.images .flex-direction-nav .flex-prev {
  left: 12px;
}
.woocommerce div.product div.images .flex-direction-nav .flex-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.woocommerce div.product div.images .flex-direction-nav .flex-next {
  right: 12px;
}
.woocommerce div.product div.images .flex-direction-nav .flex-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.woocommerce div.product div.images .flex-direction-nav .flex-disabled {
  opacity: .25;
  pointer-events: none;
}
.woocommerce div.product div.images .zoomImg { display: none !important; }
.woocommerce div.product .product_title {
  margin: 0 0 6px;
  color: var(--c-charcoal);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-track);
}
@media (max-width: 768px) {
  .woocommerce div.product .product_title { font-size: var(--h1-size-sm); }
}
.woocommerce div.product p.price {
  margin: 14px 0 10px;
  font-size: var(--price-size);
  font-weight: 700;
  line-height: 1.2;
  /* Without this the price inherits WooCommerce's --wc-highlight olive, which
     only showed on products that have no struck-through sale price. */
  color: var(--c-charcoal);
}
.woocommerce div.product p.price ins { color: var(--c-charcoal); font-weight: 800; text-decoration: none; }
.woocommerce div.product p.price del { color: var(--c-text-light); font-size: 1rem; font-weight: 400; margin-right: 6px; }
.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: .88rem;
  color: var(--c-text-light);
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
  color: var(--c-text-light);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gray-300);
}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--c-charcoal);
  border-bottom-color: var(--c-charcoal);
}
.woocommerce div.product .woocommerce-product-rating .pc-rating-avg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-charcoal);
}
/* Germanized prints aria-hidden placeholders it only fills per variation. */
.single-product .wc-gzd-additional-info-placeholder:empty { display: none; }
.single-product .legal-price-info { margin: 0; }
.single-product .legal-price-info p { margin: 4px 0 0; font-size: .82rem; color: var(--c-text-light); }
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--c-amber); color: #fff; border-radius: var(--radius);
  font-weight: 600; padding: 12px 24px;
  transition: background-color var(--btn-move), color var(--btn-move), border-color var(--btn-move);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--c-amber-dark); color: #fff; }

/* Product options: flavor / nicotine selects */
.fumot-product-lead {
  margin: 14px 0 18px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-light);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  display: none;
}

.fumot-option-heading { display: none; }
.fumot-product-options {
  margin: 0 0 .75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Stacked blocks below the buy box. */
.pdp-features,
.pdp-usage,
.pdp-market { margin: 46px 0 0; }
.pdp-features .section-title,
.pdp-usage .section-title,
.pdp-market .section-title { margin: 0 0 26px; }

/* Spec cards are read-only, so they get no hover at all. */
/* One band, not four floaters. 2-col under 1100 so a 4-cell band
   does not go 3+1. Never auto-fit: 7 specs would leave one cell alone. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-top: 3px solid var(--c-chrome);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .08), 0 10px 24px rgba(17, 17, 17, .08);
}
@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }

/* Model table: one component for /shop/ and the homepage. Lives here because
   shop.css only loads on the archive shell — the third time a shared block
   was left in a page sheet. */
.model-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius);
}
.model-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: .9rem;
}
.model-table th,
.model-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-gray-200);
}
.model-table thead th {
  background: var(--c-pop-blue);
  color: var(--c-text-light);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.model-table tbody tr:last-child th,
.model-table tbody tr:last-child td { border-bottom: 0; }
.model-table tbody tr { transition: background .3s ease; }
.model-table tbody tr:hover { background: var(--c-pop-cyan); }
.model-table td { color: var(--c-text-light); }
.model-table .mt-num { white-space: nowrap; }
.model-table .mt-model { font-weight: 600; color: var(--c-charcoal); }
.model-table .mt-model a { color: inherit; text-decoration: none; }
.model-table .mt-model a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.model-table .mt-price,
.model-table .mt-price .woocommerce-Price-amount {
  color: var(--c-charcoal);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .model-table { font-size: .85rem; }
}
/* Cell inside the band. Icon is its own left column, vertically
   centered on the whole copy stack — not welded to the label row.
   No per-card chrome; the grid is the card. Hairlines via box-shadow
   so the last col/row clip. */
.spec-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 24px 22px 22px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 1px 0 0 var(--c-gray-200), 0 1px 0 var(--c-gray-200);
}
.spec-card__mark {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--c-charcoal);
}
.spec-card__icon { width: 24px; height: 24px; display: block; }
.spec-card__mark--img {
  background: none;
  padding: 0;
}
.spec-card__mark--img img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  object-fit: contain;
}
.spec-card__mark--line {
  background: none;
  border-radius: 0;
}
.spec-card__mark--line img {
  border-radius: 0;
  padding: 0;
}
.spec-card__pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.spec-card__value {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-charcoal);
  line-height: 1.2;
}
.spec-card__label {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-light);
}
/* Optional fourth slot: what the figure means. PDP and the catalogue number
   band both use it; they pass different sentences, not one global lookup. */
.spec-card__note {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--c-text-light);
}

.usage-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.usage-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 18px 16px;
  background: var(--c-gray-50);
  border-radius: var(--radius);
}
.usage-step__no {
  grid-row: span 2;
  align-self: start;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}
.usage-step__title { font-size: .95rem; font-weight: 600; color: var(--c-charcoal); }
.usage-step__text { font-size: .87rem; line-height: 1.55; color: var(--c-text-light); }

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.market-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius);
}
.pdp-verify .market-grid { align-items: start; }
.market-card__media {
  position: relative;
  margin: 0 0 8px;
  background: var(--c-gray-50);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
}
.market-card__img,
.woocommerce .market-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.market-card__title { font-size: .95rem; font-weight: 600; color: var(--c-charcoal); }
.market-card__text { font-size: .87rem; line-height: 1.55; color: var(--c-text-light); }

/* Two models side by side. Same table language as the spec sheet, one column
   per device. Read-only, so no row hover. */
.pdp-compare,
.pdp-verify { margin: 46px 0 0; }
.pdp-compare .section-title,
.pdp-verify .section-title { margin: 0 0 26px; }
.compare-scroll { overflow-x: auto; }
.compare-table {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-gray-200);
  text-align: left;
  font-size: .92rem;
  white-space: nowrap;
}
.compare-table thead th,
.compare-table thead td {
  border-bottom: 2px solid var(--c-charcoal);
  color: var(--c-charcoal);
  font-weight: 600;
  white-space: normal;
}
.compare-table thead th a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-gray-300); }
.compare-table thead th a:hover { border-bottom-color: var(--c-charcoal); }
.compare-table tbody th { width: 26%; color: var(--c-text-light); font-weight: 600; }
.compare-table tbody td { width: 37%; color: var(--c-charcoal); font-weight: 500; }
/* Rows where both models read the same carry no decision weight. */
.compare-table tbody tr.is-same td { color: var(--c-text-light); font-weight: 400; }

/* An average of 4.7 does not say how the votes are spread. */
.rating-bars {
  max-width: 380px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.rating-bar {
  display: grid;
  grid-template-columns: 42px 1fr 34px 44px;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: .84rem;
  color: var(--c-text-light);
}
.rating-bar__stars { color: var(--c-charcoal); white-space: nowrap; }
.rating-bar__track {
  height: 7px;
  border-radius: 4px;
  background: var(--c-gray-100);
  overflow: hidden;
}
.rating-bar__fill { display: block; height: 100%; background: var(--c-charcoal); }
.rating-bar__count { text-align: right; color: var(--c-charcoal); font-weight: 600; }
.rating-bar__pct { text-align: right; }
/* On the product page the bars sit in a left-aligned column; the Bewertungen
   band centres its heading, so there they centre with it. */
.review-spread .rating-bars { margin-left: auto; margin-right: auto; }

/* Every review stays in the markup — folding keeps the text on the product
   page instead of pushing it onto ?cpage URLs. The 13 here is
   FUMOT_DE_PDP_REVIEWS_VISIBLE + 1; change both together. */
.reviews-fold > li:nth-child(n + 13) { display: none; }
.reviews-fold.is-open > li:nth-child(n + 13) { display: block; }
.reviews-more {
  display: block;
  margin: 4px 0 0;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-gray-300);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: border-color var(--btn-move), color var(--btn-move);
}
.reviews-more:hover { border-bottom-color: var(--c-charcoal); }

/* PDP Rezensionen: one band, rows. Selectors must beat Woo
   `.woocommerce #reviews #comments ol.commentlist li .comment-text`
   (bordered card + 50px indent + 20px li gap). */
.woocommerce #reviews.woocommerce-Reviews {
  overflow: hidden;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-top: 3px solid var(--c-chrome);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .08), 0 10px 24px rgba(17, 17, 17, .08);
}
.woocommerce #reviews #comments { margin: 0; padding: 0; }
.woocommerce #reviews .reviews-head {
  display: grid;
  grid-template-columns: minmax(148px, 220px) minmax(0, 1fr);
  gap: 6px 36px;
  align-items: center;
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--c-gray-100);
}
.woocommerce #reviews .reviews-score {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce #reviews .reviews-score__num {
  display: block;
  color: var(--c-charcoal);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.woocommerce #reviews .reviews-score__stars {
  display: block;
  margin-top: 6px;
  color: var(--c-charcoal);
  font-size: .92rem;
  letter-spacing: .08em;
  line-height: 1;
}
.woocommerce #reviews .woocommerce-Reviews-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 0;
  color: var(--c-text-light);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.4;
}
.woocommerce #reviews .woocommerce-Reviews-title span {
  font-weight: 600;
  color: var(--c-charcoal);
}
.woocommerce #reviews .reviews-head .rating-bars {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.woocommerce #reviews .reviews-head .rating-bar {
  grid-template-columns: 42px 1fr 28px 44px;
  margin: 0 0 8px;
}
.woocommerce #reviews .reviews-head .rating-bar:last-child { margin-bottom: 0; }
.woocommerce #reviews #comments ol.commentlist {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  background: transparent;
}
.woocommerce #reviews #comments ol.commentlist::before,
.woocommerce #reviews #comments ol.commentlist::after,
.woocommerce #reviews #comments ol.commentlist > li::before,
.woocommerce #reviews #comments ol.commentlist li.review::before {
  display: none;
  content: none;
}
.woocommerce #reviews #comments ol.commentlist li.review,
.woocommerce #reviews #comments ol.commentlist > li {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
}
.woocommerce #reviews #comments ol.commentlist li.review + li {
  border-top: 1px solid var(--c-gray-100);
}
.woocommerce #reviews #comments ol.commentlist li.review .comment_container {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  margin: 0;
  padding: 16px 24px;
  background: transparent;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment_container::after {
  display: none;
  content: none;
}
.woocommerce #reviews #comments ol.commentlist li.review img.avatar,
.woocommerce #reviews .avatar { display: none; }
.woocommerce #reviews .review-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-gray-100);
  color: var(--c-charcoal);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta stars" "desc desc";
  gap: 2px 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text::before,
.woocommerce #reviews #comments ol.commentlist li.review .comment-text::after {
  display: none;
  content: none;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text p {
  margin: 0;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text p.meta {
  grid-area: meta;
  margin: 0;
  padding: 0;
  color: var(--c-text-light);
  font-size: .8rem;
  line-height: 1.4;
}
.woocommerce #reviews .woocommerce-review__author {
  display: block;
  color: var(--c-charcoal);
  font-size: .92rem;
  font-weight: 600;
}
.woocommerce #reviews .woocommerce-review__dash { display: none; }
.woocommerce #reviews .woocommerce-review__published-date {
  display: block;
  margin-top: 2px;
  color: var(--c-text-light);
  font-size: .78rem;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating {
  display: none;
}
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .review-stars {
  grid-area: stars;
  margin: 2px 0 0;
  color: var(--c-charcoal);
  font-size: .84rem;
  letter-spacing: .08em;
  line-height: 1;
}
.woocommerce #reviews #comments ol.commentlist li.review .description {
  grid-area: desc;
  margin: 8px 0 0;
  color: var(--c-charcoal);
  font-size: .95rem;
  line-height: 1.55;
}
.woocommerce #reviews #comments ol.commentlist li.review .description p { margin: 0; }
.woocommerce #reviews .reviews-more {
  margin: 0 24px 20px;
}
.woocommerce #reviews .woocommerce-verification-required {
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--c-gray-100);
  color: var(--c-text-light);
  font-size: .82rem;
  line-height: 1.45;
}
.woocommerce #reviews #review_form_wrapper,
.woocommerce #reviews #comments #respond,
.woocommerce #reviews .comment-respond {
  margin: 0;
  padding: 20px 24px 22px;
  border: 0;
  border-top: 1px solid var(--c-gray-100);
  border-radius: 0;
  background: var(--c-gray-50);
}
.woocommerce #reviews .comment-reply-title {
  margin: 0 0 10px;
  color: var(--c-charcoal);
  font-size: 1rem;
  font-weight: 600;
}
.woocommerce #reviews .comment-form p { margin: 0 0 12px; }
.woocommerce #reviews .comment-form label {
  display: block;
  margin: 0 0 6px;
  color: var(--c-text-light);
  font-size: .8rem;
}
.woocommerce #reviews .comment-form input[type="text"],
.woocommerce #reviews .comment-form input[type="email"],
.woocommerce #reviews .comment-form textarea {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
  border: 1px solid var(--c-gray-200);
  border-radius: 10px;
  background: #fff;
  color: var(--c-charcoal);
  font: inherit;
}
.woocommerce #reviews .comment-form input[type="text"]:focus,
.woocommerce #reviews .comment-form input[type="email"]:focus,
.woocommerce #reviews .comment-form textarea:focus {
  outline: 2px solid rgba(36, 95, 229, .25);
  border-color: var(--c-accent);
}
.woocommerce #reviews .comment-form .form-submit { margin: 0; }
.woocommerce #reviews .comment-form .form-submit input {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--c-sale);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--btn-move), color var(--btn-move);
}
.woocommerce #reviews .comment-form .form-submit input:hover { background: var(--c-sale-dark); }
@media (max-width: 640px) {
  .woocommerce #reviews .reviews-head {
    grid-template-columns: 1fr;
    padding: 18px 16px 16px;
  }
  .woocommerce #reviews .reviews-score { grid-row: 1; }
  .woocommerce #reviews .woocommerce-Reviews-title { grid-row: 2; }
  .woocommerce #reviews .reviews-head .rating-bars {
    grid-column: 1;
    grid-row: 3;
    margin-top: 12px;
  }
  .woocommerce #reviews #comments ol.commentlist li.review .comment_container {
    padding: 14px 16px;
  }
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "stars" "desc";
  }
  .woocommerce #reviews .reviews-more { margin: 0 16px 16px; }
}

/* Woo strikes the old price but never states the gap. Keep the secondary
   amber marker distinct from the main sale action. */
.pdp-off {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--c-rating-soft);
  color: var(--c-rating-ink);
  font-size: .8rem;
  font-weight: 600;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .pdp-features,
  .pdp-usage,
  .pdp-market,
  .pdp-compare,
  .pdp-verify { margin-top: 34px; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-card { padding: 18px 16px 16px; gap: 10px; }
  .spec-card__mark { width: 24px; height: 24px; }
  .spec-card__icon { width: 22px; height: 22px; }
  .spec-card__value { font-size: 1.25rem; }
  .compare-table th,
  .compare-table td { padding: 10px 10px; font-size: .86rem; }
  .rating-bar { grid-template-columns: 38px 1fr 30px 40px; gap: 8px; }
}

/* Flavour tiles: the sorts have photos, the gallery does not. */
.flavor-picker { margin: 0 0 18px; }
.fp-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 10px;
}
.fp-label { font-size: .92rem; font-weight: 600; color: var(--c-charcoal); }
.fp-current { font-size: .88rem; color: var(--c-text-light); }
.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.fp-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 8px;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--radius);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--card-transition, .4s) ease, box-shadow var(--card-transition, .4s) ease;
}
.fp-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--c-gray-50);
  border-radius: 4px;
}
.fp-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .68rem;
  line-height: 1.3;
  color: var(--c-text-light);
}
.fp-tile:hover { border-color: var(--c-gray-300); box-shadow: 0 4px 14px rgba(17, 17, 17, .06); }
.fp-tile:focus-visible { outline: 2px solid var(--c-charcoal); outline-offset: 2px; }
.fp-tile.is-on {
  border-color: var(--c-charcoal);
  box-shadow: inset 0 0 0 1px var(--c-charcoal);
}
.fp-tile.is-on .fp-name { color: var(--c-charcoal); font-weight: 600; }
.fp-tile.is-folded { display: none; }
.flavor-picker.is-open .fp-tile.is-folded,
.flavor-links.is-open .fp-tile.is-folded { display: flex; }

/* Geschmäcker index: one folded grid per model. Prose keeps its 820px column,
   the grid gets the whole container; both keep the same left edge. */
.entry-content.has-wide { max-width: none; }
.entry-content.has-wide > :not(.flavor-index):not(.copy-article) { max-width: 820px; }
.flavor-index { margin: 4px 0 8px; }
.flavor-links { margin: 0 0 30px; }
.flavor-links h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 12px;
}
.flavor-links h3 a { color: var(--c-charcoal); text-decoration: none; }
.flavor-links h3 a:hover { text-decoration: underline; }
.flavor-links .fx-count { font-size: .82rem; font-weight: 400; color: var(--c-text-light); }
.flavor-links a.fp-tile { text-decoration: none; color: inherit; }
/* 56 sorts unfolded would push the cart button off the screen. */
.flavor-picker.is-open .fp-grid {
  max-height: 330px;
  overflow-y: auto;
  padding: 2px 8px 2px 2px;
  overscroll-behavior: contain;
}
.fp-more {
  margin: 12px 0 0;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-gray-300);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: border-color var(--btn-move), color var(--btn-move);
}
.fp-more:hover { border-bottom-color: var(--c-charcoal); }
/* JS moved this attribute into the tile grid. */
.single-product .woocommerce div.product form.variations_form.cart table.variations tr.fp-replaced,
.woocommerce div.product form.cart .variations tr.fp-replaced { display: none !important; }
@media (max-width: 520px) {
  .fp-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
}

/* Override WooCommerce table layout on single product */
.single-product .woocommerce div.product form.variations_form.cart table.variations,
.single-product .woocommerce div.product form.variations_form.cart table.variations tbody {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  margin: 0 !important;
}
.single-product .woocommerce div.product form.variations_form.cart table.variations tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.single-product .woocommerce div.product form.variations_form.cart table.variations tr {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.single-product .woocommerce div.product form.variations_form.cart table.variations th.label,
.single-product .woocommerce div.product form.variations_form.cart table.variations td.value {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
}

.woocommerce div.product form.cart .variations {
  border: 0;
  margin: 0;
  width: 100%;
}
.woocommerce div.product form.cart .variations tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.woocommerce div.product form.cart .variations tr {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value {
  display: block;
  padding: 0;
  width: 100%;
  text-align: left;
  background: transparent;
}
.single-product .woocommerce div.product form.variations_form.cart table.variations th.label,
.woocommerce div.product form.cart .variations th.label {
  flex: 0 0 118px;
  width: 118px !important;
  /* Rows are top-aligned: the reset link keeps its space via visibility. */
  padding-top: 11px !important;
}
.woocommerce div.product form.cart .variations th.label label {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-charcoal);
}
.woocommerce div.product form.cart .variations td.value {
  position: relative;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  overflow: visible !important;
}
.fumot-select-wrap {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}
.fumot-select-wrap.is-open { z-index: 8; }
.fumot-select-wrap .fs-chev-wrap {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 3;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--c-text-light);
  transform: translateY(-50%);
  transition: transform var(--btn-move), color var(--btn-move);
}
.fumot-select-wrap .fs-chev {
  display: block;
  width: 16px;
  height: 16px;
}
.fumot-select-wrap.is-open .fs-chev-wrap { transform: translateY(-50%) rotate(180deg); }
.single-product .woocommerce div.product form.variations_form.cart .variations .fumot-select-wrap:not(.is-custom) > select,
.woocommerce div.product form.cart .variations .fumot-select-wrap:not(.is-custom) > select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 10px 40px 10px 12px !important;
  border: 1px solid var(--c-gray-300) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--c-charcoal) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: border-color var(--btn-move), box-shadow var(--btn-move) !important;
}
.single-product .woocommerce div.product form.variations_form.cart .variations .fumot-select-wrap:not(.is-custom) > select:focus,
.woocommerce div.product form.cart .variations .fumot-select-wrap:not(.is-custom) > select:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(36, 95, 229, .18) !important;
}
.single-product .woocommerce div.product form.variations_form.cart .variations select option,
.woocommerce div.product form.cart .variations select option {
  font-weight: 500;
  color: var(--c-charcoal);
}
.single-product .woocommerce div.product form.variations_form.cart .variations .fumot-select-wrap.is-custom > select,
.woocommerce div.product form.cart .variations .fumot-select-wrap.is-custom > select,
.fumot-select-wrap.is-custom > select {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.fumot-select-wrap .fs-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--c-gray-300);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-charcoal);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--btn-move), box-shadow var(--btn-move), background-color var(--btn-move), color var(--btn-move);
}
.fumot-select-wrap.is-empty .fs-trigger { color: var(--c-text-light); }
.fumot-select-wrap .fs-trigger:focus { outline: none; }
.fumot-select-wrap .fs-trigger:focus-visible,
.fumot-select-wrap.is-open .fs-trigger {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(36, 95, 229, .18);
}
.woocommerce div.product form.cart .fumot-select-wrap .fs-list,
.fumot-select-wrap .fs-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(17, 17, 17, .07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: opacity var(--btn-move), visibility var(--btn-move);
}
/* Closed rule is `.woocommerce ... .fs-list`. Open must outrank it or the
   panel stays opacity 0 after click — blue ring, no list. */
.woocommerce div.product form.cart .fumot-select-wrap.is-open .fs-list,
.fumot-select-wrap.is-open .fs-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fumot-select-wrap .fs-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-charcoal);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.fumot-select-wrap .fs-opt.is-on {
  background: rgba(36, 95, 229, .12);
  font-weight: 600;
}
.fumot-select-wrap .fs-opt.is-active:not(.is-on) { background: var(--c-gray-50); }
.fumot-select-wrap .fs-opt.is-off {
  color: var(--c-text-light);
  cursor: default;
  opacity: .55;
}
@media (hover: hover) and (pointer: fine) {
  .single-product .woocommerce div.product form.variations_form.cart .variations .fumot-select-wrap:not(.is-custom) > select:hover,
  .woocommerce div.product form.cart .variations .fumot-select-wrap:not(.is-custom) > select:hover,
  .fumot-select-wrap .fs-trigger:hover {
    border-color: var(--c-accent);
  }
  .fumot-select-wrap .fs-opt:hover:not(.is-on):not(.is-off) { background: var(--c-gray-50); }
}
@media (prefers-reduced-motion: reduce) {
  .fumot-select-wrap .fs-chev-wrap,
  .fumot-select-wrap .fs-trigger,
  .fumot-select-wrap .fs-list,
  .fumot-select-wrap .fs-opt {
    transition: none;
  }
}
.woocommerce div.product form.cart a.reset_variations {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-text-light);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gray-300);
}
.woocommerce div.product form.cart a.reset_variations:hover {
  color: var(--c-amber-dark);
  border-bottom-color: var(--c-amber);
}
.woocommerce div.product .woocommerce-variation-price {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Quantity stepper + add to cart row */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fumot-qty-label.visually-hidden { margin: 0; }
.woocommerce div.product .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  min-height: 48px;
}
.woocommerce div.product .quantity .qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  border: 0;
  background: var(--c-gray-50);
  color: var(--c-charcoal);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.woocommerce div.product .quantity .qty-btn:hover {
  background: var(--c-gray-100);
  color: var(--c-amber-dark);
}
.woocommerce div.product .quantity .qty-btn:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: -2px;
}
.woocommerce div.product .quantity .qty {
  width: 56px;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--c-gray-200);
  border-right: 1px solid var(--c-gray-200);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 0;
  -moz-appearance: textfield;
  background: #fff;
}
.woocommerce div.product .quantity .qty:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .35);
}
.woocommerce div.product .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 48px;
  margin: 0;
  align-self: stretch;
  border: 0;
  border-radius: 8px;
  background: var(--c-sale);
  color: #fff;
  transition: background-color var(--btn-move), color var(--btn-move);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background: var(--c-sale-dark);
  color: #fff;
}
@media (max-width: 520px) {
  .single-product .woocommerce div.product form.variations_form.cart table.variations tr,
  .woocommerce div.product form.cart .variations tr {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .single-product .woocommerce div.product form.variations_form.cart table.variations th.label,
  .woocommerce div.product form.cart .variations th.label {
    flex: 0 0 auto;
    width: 100% !important;
    padding-top: 0 !important;
  }
  .woocommerce div.product .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart:not(.variations_form) {
    flex-wrap: wrap;
  }
  .woocommerce div.product .quantity { width: auto; }
  .woocommerce div.product form.cart .button.single_add_to_cart_button { flex: 1 1 160px; }
}

.woocommerce div.product .woocommerce-variation-price { margin-bottom: 12px; }
.woocommerce div.product .woocommerce-tabs {
  margin-top: 52px;
  clear: both;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  border-bottom: 1px solid var(--c-gray-200);
}
/* Kill the default grey pill tabs and their corner pseudo-elements. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 0 -1px;
  padding: 0 0 12px;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: border-color .3s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0;
  text-decoration: none;
  font-size: .98rem;
  font-weight: 600;
  color: var(--c-text-light);
  transition: color .3s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover { border-bottom-color: var(--c-gray-300); }
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a { color: var(--c-charcoal); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border-bottom-color: var(--c-charcoal);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--c-charcoal); }
.woocommerce div.product .woocommerce-tabs .panel.entry-content,
.single-product .woocommerce-tabs .panel.entry-content {
  max-width: none;
  margin: 0;
  padding: 28px 0 8px;
}

/* PDP article: the shared split shell owns the TOC; this remains the 820px
   reading column on its right. */
.pdp-copy {
  max-width: 820px;
  margin: 0 auto;
}
.pdp-copy h2 {
  margin: 36px 0 16px;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: 0;
  text-align: center;
  color: var(--c-charcoal);
}
.pdp-copy h2:first-child { margin-top: 0; }
.pdp-copy h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--c-charcoal);
}
.pdp-copy h3 {
  margin: 1.3em 0 .35em;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  color: var(--h3-color);
}
.pdp-copy p { margin: 0 0 .9em; color: var(--c-text); line-height: 1.7; }
.pdp-copy a { color: var(--c-charcoal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-gray-300); }
.pdp-copy a:hover { text-decoration-color: var(--c-charcoal); }
.pdp-copy .shop_attributes {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1.2em;
  border-collapse: collapse;
}
.pdp-copy .shop_attributes tr:nth-child(odd) { background: var(--c-gray-50); }
.pdp-copy .shop_attributes th,
.pdp-copy .shop_attributes td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-gray-200);
  text-align: left;
  font-size: .92rem;
}
.pdp-copy .shop_attributes th { width: 38%; color: var(--c-text-light); font-weight: 600; }
.pdp-copy .shop_attributes td { color: var(--c-charcoal); font-weight: 500; }
.pdp-copy-specs .shop_attributes { margin-bottom: 0; }
.pdp-copy-specs .shop_attributes tr:first-child th,
.pdp-copy-specs .shop_attributes tr:first-child td { border-top: 1px solid var(--c-gray-200); }
.pdp-copy-flavors,
.pdp-copy-why,
.pdp-copy-related {
  margin: 0 0 1em;
  padding: 0;
}
/* The picker above the cart is the control for the sorts. This list only has to
   keep the names on the page for search, so it stays small and out of the way. */
.pdp-copy-flavors {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
  list-style: none;
}
.pdp-copy-flavors li {
  margin: 0;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--c-text-light);
  background: var(--c-gray-50);
}
.pdp-copy-why {
  list-style: none;
  display: grid;
  gap: 10px;
}
.pdp-copy-why li,
.pdp-copy-related li { margin: 0; }
.pdp-copy-why li {
  position: relative;
  padding-left: 26px;
  line-height: 1.6;
}
.pdp-copy-why li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .48em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-charcoal);
  border-bottom: 2px solid var(--c-charcoal);
  transform: rotate(-45deg);
}
.pdp-copy-related { list-style: none; display: grid; gap: 6px; }
.pdp-copy-faq h3 {
  margin: 0;
  padding: 18px 0 6px;
  border-top: 1px solid var(--c-gray-200);
}
.pdp-copy-faq h3:first-child { border-top: 0; padding-top: 0; }
.pdp-copy-faq p { margin: 0 0 18px; }
.pdp-copy-faq p:last-child { margin-bottom: 0; }
.pdp-copy .fumot-alias-line { margin-top: 1.6em; font-size: .86rem; color: var(--c-text-light); }
.pdp-copy .fumot-alias-line span { font-weight: 600; color: var(--c-charcoal); }
.pdp-copy-legal {
  margin-top: 1.6em;
  padding-top: 14px;
  border-top: 1px solid var(--c-gray-200);
  font-size: .84rem;
  color: var(--c-text-light);
}

/* Related shelf: same card as home, shop and hub. */
.pdp-related {
  clear: both;
  margin: 56px 0 0;
  padding-top: 44px;
  border-top: 1px solid var(--c-gray-200);
}
.pdp-related .section-title { margin: 0 0 30px; }
@media (max-width: 768px) {
  .pdp-related { margin-top: 40px; padding-top: 32px; }
  /* One row, scroll. Do not wrap into 2+1. Keep underline, not pills. */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
    padding: 0 16px 10px;
    white-space: nowrap;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li:first-child { padding-left: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li:last-child { padding-right: 4px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: .9rem;
    white-space: nowrap;
  }
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--c-amber); color: #fff; }

/* Filter archive (/fumot-vape/) */
.fumot-filter-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
.fumot-filter-sidebar {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid var(--c-gray-200);
  border-radius: 12px;
  padding: 18px 16px;
}
.fumot-filter-nav-title {
  font-weight: 700;
  margin: 0 0 12px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-gray-500);
}
.filter-group { margin-bottom: 14px; }
.filter-group-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-weight: 700;
  font-size: .92rem;
  padding: 8px 0;
  cursor: pointer;
  color: var(--c-charcoal);
}
.filter-options { display: grid; gap: 4px; }
.filter_a_link { text-decoration: none; color: inherit; display: block; }
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: .9rem;
}
.filter-option:hover,
.filter-option.is-active { background: var(--c-gray-100); }
.filter-checkbox-visual {
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-gray-300);
  border-radius: 3px;
  flex-shrink: 0;
}
.filter-option.is-active .filter-checkbox-visual {
  background: var(--c-amber);
  border-color: var(--c-amber);
}
.fumot-filter-count { color: var(--c-gray-500); margin: 0 0 16px; font-size: .92rem; }
.plp-variation-grid .plp-card-title { font-size: .98rem; line-height: 1.35; }
.fumot-filter-all { margin: 12px 0 0; font-size: .88rem; }
.fumot-filter-all a { color: var(--c-amber-dark); font-weight: 600; }

/* Flavor chips on product pages */
.fumot-flavor-links { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--c-gray-200); }
.fumot-flavor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fumot-flavor-chip {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid var(--c-gray-200);
  border-radius: 999px;
  font-size: .82rem;
  text-decoration: none;
  color: var(--c-charcoal);
  background: #fff;
}
.fumot-flavor-chip:hover { border-color: var(--c-amber); color: var(--c-amber-dark); }
.fumot-flavor-chip.is-active {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: #fff;
  font-weight: 600;
}

@media (max-width: 900px) {
  .fumot-filter-layout { grid-template-columns: 1fr; }
  .fumot-filter-sidebar { position: static; }
}

/* PDP: crumbs, compact buy box, trust */
.pdp-crumb {
  margin: 0 0 18px;
  font-size: .82rem;
  color: var(--c-text-light);
}
.pdp-crumb a { color: var(--c-text-light); text-decoration: none; }
.pdp-crumb a:hover { color: var(--c-amber-dark); }
.pdp-crumb-sep { color: var(--c-gray-300); }

/* Same crumb outside the product page: shelf, guide and legal pages. */
.crumb {
  margin: 0 0 16px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--c-text-light);
}
.crumb a { color: var(--c-text-light); text-decoration: none; transition: color .3s ease; }
.crumb a:hover { color: var(--c-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.crumb-sep { padding: 0 7px; color: var(--c-gray-300); }
.crumb [aria-current="page"] { color: var(--c-charcoal); }
.pdp-who {
  margin: 0 0 8px;
  color: var(--c-text-light);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: 0;
}
.pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--c-gray-200);
  list-style: none;
}
.pdp-trust li {
  margin: 0;
  padding: 0;
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-text-light);
}
.pdp-trust li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: var(--c-amber);
  vertical-align: middle;
}
.pdp-next {
  margin: 10px 0 0;
  font-size: .84rem;
  color: var(--c-text-light);
}
.pdp-next a { color: var(--c-amber-dark); font-weight: 600; text-decoration: none; }
.pdp-next a:hover { text-decoration: underline; }
.pdp-sticky-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--c-gray-200);
  box-shadow: 0 -4px 12px rgba(17, 17, 17, .08);
}
.pdp-sticky-cart[hidden] { display: none !important; }
.pdp-sticky-cart__price {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-charcoal);
  line-height: 1.3;
}
.pdp-sticky-cart__price,
.pdp-sticky-cart__price .woocommerce-Price-amount,
.pdp-sticky-cart__price .amount {
  color: var(--c-charcoal);
}
.pdp-sticky-cart__price ins { text-decoration: none; font-weight: 700; }
.pdp-sticky-cart__price del {
  color: var(--c-text-light);
  font-weight: 400;
  font-size: .8rem;
  margin-right: 6px;
}
.pdp-sticky-cart__btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--c-sale);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--btn-move), color var(--btn-move), opacity var(--btn-move);
}
.pdp-sticky-cart__btn:hover,
.pdp-sticky-cart__btn:focus-visible {
  background: var(--c-sale-dark);
  color: #fff;
}
.pdp-sticky-cart__btn:disabled {
  opacity: .55;
  cursor: default;
}
body.has-pdp-sticky-cart { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 769px) {
  .pdp-sticky-cart { display: none !important; }
}

/* Page ops: spotlight + leopard + aliases */
.spotlight-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.spotlight-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: 16px 16px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: all .15s ease; }
.spotlight-card:hover { border-color: var(--c-amber); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.spotlight-card .sp-media { display: block; aspect-ratio: 1/1; background: var(--c-gray-50); border-radius: var(--radius); overflow: hidden; }
.spotlight-card .sp-media img { width: 100%; height: 100%; object-fit: contain; }
.spotlight-card strong { color: var(--c-charcoal); font-size: .95rem; line-height: 1.3; }
.spotlight-card .sp-alias { color: var(--c-text-light); font-size: .78rem; }
.spotlight-card .sp-price { font-weight: 800; color: var(--c-charcoal); margin-top: 4px; }
.spotlight-card .sp-price del { color: var(--c-text-light); font-weight: 400; font-size: .78rem; margin-right: 6px; }
.spotlight-card .sp-cta { color: var(--c-amber-dark); font-weight: 700; font-size: .84rem; margin-top: auto; }
@media (max-width: 1100px) { .spotlight-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); } }

.leopard-band { background: #111827; color: #fff; }
.leopard-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; }
.leopard-band h2 { margin: 0 0 12px; font-size: 2rem; color: #fff; }
.leopard-band p { color: #d1d5db; margin: 0 0 20px; max-width: 560px; }
.leopard-media img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 800px) { .leopard-inner { grid-template-columns: 1fr; } }

.fumot-alias-box,
.fumot-alias-line {
  margin: 12px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: .86rem;
  color: var(--c-text-light);
}
.fumot-alias-box span,
.fumot-alias-line span { font-weight: 600; color: var(--c-charcoal); }

.feature-12k { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: 22px 28px; text-decoration: none; color: inherit; margin-bottom: 22px; transition: all .15s ease; }
.feature-12k:hover { border-color: var(--c-amber); box-shadow: var(--shadow-md); }
.feature-12k .f12-media { display: block; background: var(--c-gray-50); border-radius: var(--radius); overflow: hidden; }
.feature-12k .f12-media img { width: 100%; height: auto; object-fit: contain; display: block; }
.feature-12k .f12-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feature-12k .f12-title { font-size: 1.85rem; line-height: 1.2; color: var(--c-charcoal); }
.feature-12k .f12-aliases { color: var(--c-amber-dark); font-weight: 600; font-size: .92rem; }
.feature-12k .f12-lead { color: var(--c-text-light); font-size: .98rem; max-width: 520px; }
.feature-12k .f12-price { font-size: 1.25rem; font-weight: 800; color: var(--c-charcoal); }
.feature-12k .f12-price del { color: var(--c-text-light); font-weight: 400; font-size: .9rem; margin-right: 8px; }
.feature-12k .btn { margin-top: 8px; }
@media (max-width: 800px) { .feature-12k { grid-template-columns: 1fr; padding: 18px; } .feature-12k .f12-title { font-size: 1.45rem; } }

.promo-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius-lg); padding: 16px 16px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .4s ease; }
.promo-card .promo-body { display: flex; flex-direction: column; gap: 6px; }
.promo-card:hover { box-shadow: 0 8px 28px rgba(17, 17, 17, .07); }
.promo-card .sp-media { display: block; aspect-ratio: 1/1; background: var(--c-gray-50); border-radius: var(--radius); overflow: hidden; position: relative; }
.promo-card .sp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0);
  pointer-events: none;
  transition: background .4s ease;
}
.promo-card:hover .sp-media::after { background: rgba(17, 17, 17, .06); }
.promo-card:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.promo-card .sp-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.promo-card strong { color: var(--c-charcoal); font-size: .98rem; font-weight: 700; line-height: 1.35; }
.promo-card .sp-alias { color: var(--c-text-light); font-size: .8rem; }
.promo-card .sp-price { display: block; font-size: 1.05rem; font-weight: 800; color: var(--c-charcoal); }
.promo-card .sp-price del { color: var(--c-text-light); font-weight: 400; font-size: .85rem; margin-right: 8px; }
.promo-card .sp-price ins { text-decoration: none; }
.promo-card .sp-cta { color: var(--c-amber-dark); font-weight: 700; font-size: .86rem; margin-top: auto; }
.promo-card .pc-rating { margin: 2px 0 4px; }
@media (max-width: 800px) { .promo-trio { grid-template-columns: 1fr; } }

.about-fumot { display: grid; grid-template-columns: 1.4fr .8fr; gap: 36px; align-items: start; }
.about-fumot h2 { margin: 0 0 12px; font-size: 1.7rem; }
.about-fumot p { color: var(--c-text-light); margin: 0 0 12px; }
.about-links { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; }
.about-links a { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius); padding: 12px 16px; text-decoration: none; color: var(--c-charcoal); font-weight: 600; }
.about-links a:hover { border-color: var(--c-amber); color: var(--c-amber-dark); }
.about-links-row { flex-direction: row; flex-wrap: wrap; padding-top: 8px; margin-top: 8px; }
.about-links-row a { flex: 1 1 180px; text-align: center; }
/* Flavour block: one tab per model, two rows of tiles. Tabs wrap; each tab
   keeps its own underline so a second row does not float off a single bar.
   Tiles reuse the PDP fp-tile. Class name is historical, not homepage-only. */
.hf-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 24px;
}
.hf-tab {
  font: inherit;
  background: none;
  cursor: pointer;
  transition: color var(--btn-move), border-color var(--btn-move);
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-text-light);
}
.hf-tab:hover { color: var(--c-charcoal); }
.hf-tab.is-on {
  color: var(--c-charcoal);
  font-weight: 600;
  border-bottom-color: var(--c-charcoal);
}
.hf-panel { display: none; }
.hf-panel.is-on { display: block; }
.hf-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hf-grid .fp-tile { text-decoration: none; color: inherit; }
.hf-grid .fp-name { font-size: .74rem; }
@media (max-width: 900px) {
  .hf-grid { grid-template-columns: repeat(3, 1fr); }
  .hf-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 4px 0 28px;
    padding: 2px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hf-tabs::-webkit-scrollbar { display: none; }
  .hf-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    border: 0;
    border-bottom: 0;
    border-radius: 999px;
    font-size: .82rem;
    background: var(--c-gray-100);
    color: var(--c-text-light);
  }
  .hf-tab:hover { color: var(--c-charcoal); }
  .hf-tab.is-on {
    color: #fff;
    background: var(--c-chrome);
    border-bottom-color: transparent;
  }
}

/* SEO band: same page width as every other section. Long copy is left-aligned
   and readable; the figure sits in the text, never a stretched cover on top.
   Do not put a second max-width on .container — that made a centred blog card. */
.copy-article { background: none; border: 0; }
.copy-article--split {
  display: grid;
  grid-template-columns: 260px minmax(0, 820px);
  justify-content: start;
  align-items: start;
  gap: 48px;
  --copy-toc-top: 88px;
}
.copy-article--split .copy-body {
  max-width: 820px;
  margin: 0;
  min-width: 0;
}
.copy-toc {
  position: sticky;
  top: var(--copy-toc-top);
  width: 260px;
}
.copy-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--c-gray-200);
}
.copy-article--split .copy-toc a {
  display: block;
  padding: 8px 0 8px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--c-text-light);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color .3s ease, border-color .3s ease;
}
.copy-article--split .copy-toc a:focus-visible,
.copy-article--split .copy-toc a.is-on {
  color: var(--c-charcoal);
  border-left-color: var(--c-charcoal);
}
@media (hover: hover) and (pointer: fine) {
  .copy-article--split .copy-toc a:hover {
    color: var(--c-charcoal);
    border-left-color: var(--c-charcoal);
  }
}
.copy-article--split .copy-h2 {
  scroll-margin-top: calc(var(--copy-toc-top) + 8px);
}
.copy-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}
.copy-body p { color: var(--c-text-light); margin: 0 0 14px; line-height: 1.7; }
.copy-body strong { color: var(--c-charcoal); font-weight: 700; }
.copy-body .copy-models {
  margin: 0 0 16px;
  padding-left: 1.2em;
  color: var(--c-text-light);
}
.copy-body .copy-models li { margin: 0 0 4px; }
.copy-body a {
  color: var(--c-charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.copy-body a:hover { color: var(--c-charcoal); }
/* Three classes on purpose: page sheets carry their own two-class
   `.section-title` centring rule and load after this file. */
.copy-band .copy-body .section-title {
  text-align: center;
  margin: 0 0 16px;
}
.copy-band .copy-body .section-title::after {
  margin-left: auto;
  margin-right: auto;
}
.copy-figure {
  margin: 22px auto;
  text-align: center;
}
.copy-figure img {
  width: auto;
  max-width: min(560px, 100%);
  height: auto;
  object-fit: contain;
  display: inline-block;
  border-radius: 12px;
}
.read-more-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .4s ease, opacity .35s ease;
}
.read-more-content.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.read-more-inner { min-height: 0; overflow: hidden; }
.read-more-content.is-instant,
.read-more-content.is-instant.open { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .read-more-content,
  .read-more-content.open { transition: none; }
}
/* In-place expand, same chrome as .fp-more. Not a blue pill (that reads as a jump). */
.read-more-toggle {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-gray-300);
  border-radius: 0;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-charcoal);
  cursor: pointer;
  transition: border-color var(--btn-move), color var(--btn-move);
}
.read-more-toggle:hover,
.read-more-toggle:focus-visible {
  background: none;
  color: var(--c-charcoal);
  border-bottom-color: var(--c-charcoal);
}
.copy-h2 {
  margin: 28px 0 12px;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  color: var(--h3-color);
}
@media (max-width: 900px) {
  .copy-body { padding: 0; }
  .copy-article--split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .copy-toc {
    position: static;
    width: auto;
  }
}
.series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.series-card { background: #fff; border: 1px solid var(--c-gray-200); border-radius: var(--radius); padding: 28px 22px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; transition: all .15s ease; min-height: 140px; }
.series-card:hover { border-color: var(--c-amber); box-shadow: var(--shadow-sm); }
.series-card strong { color: var(--c-charcoal); font-size: .98rem; }
.series-card span { color: var(--c-text-light); font-size: .82rem; }
@media (max-width: 800px) {
  .about-fumot { grid-template-columns: 1fr; }
  .about-links { padding-top: 0; }
  .series-grid { grid-template-columns: 1fr; }
}

.shop-toolbar {
  border-bottom: 1px solid var(--c-gray-200);
  background: #fff;
  padding: 14px 0;
}
.shop-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shop-toolbar h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cat-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border: 1px solid var(--c-gray-300); border-radius: 2px;
  text-decoration: none; color: #111; font-size: .82rem; font-weight: 500;
  background: #fff;
}
.cat-pill:hover, .cat-pill.is-on { background: #111; color: #fff; border-color: #111; }
.catalog-board { padding: 40px 0 64px; }
.catalog-board h1 { margin: 0 0 8px; font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-track); }
.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--c-gray-200);
  color: var(--c-text-light);
  font-size: .82rem;
}
.trust-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.catalog-empty {
  border: 1px dashed var(--c-gray-300);
  background: var(--c-gray-50);
  padding: 36px 20px;
  text-align: center;
  color: var(--c-text-light);
}
.door-section { padding: 40px 0 48px; }
.door-head { margin: 0 0 22px; }
.door-head h1 { margin: 0 0 8px; font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-track); color: var(--c-charcoal); }
.door-head p { margin: 0; color: var(--c-text-light); max-width: 640px; }
.door-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}
.door-head-row h2 { margin: 0; font-size: 1.35rem; color: var(--c-charcoal); }
.door-more { color: #111; font-size: .9rem; font-weight: 600; text-decoration: none; }
.door-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rooms-grid { grid-template-columns: repeat(4, 1fr); }
.door-section .blog-grid { margin-top: 0; }
@media (max-width: 1024px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .door-head h1 { font-size: var(--h1-size-sm); }
  .door-section { padding: 28px 0 36px; }
}
.sub-menu { border: 1px solid var(--c-gray-200); }

@media (prefers-reduced-motion: reduce) {
  .footer-social-link:hover .footer-social-icon { transform: none; }
  .product-card .pc-media::after,
  .promo-card .sp-media::after,
  .blog-card-media::after { transition: none; }
  .topbar-track { animation: none; }
  .topbar-seq[aria-hidden="true"] { display: none; }
  .topbar-seq { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
}