/** Shopify CDN: Minification failed

Line 299:58 Unexpected "("
Line 300:85 Unterminated string token

**/
/* Tier-1 variant swatch styles — replaces StarApps Swatch King visual treatment.
   Activated on .option-selector[data-option-style="image|pill|button|polaroid"].
   Mapping option_name -> style is set in variant-picker.liquid (TODO: HPB-driven). */

/* === Scroll-fix for visually-hidden radio inputs ===
   The radio inputs use the `visually-hidden` utility which applies `position: absolute`.
   Without a positioned ancestor, focus() on these inputs scrolls the page to the
   document origin. Making the buttons container a positioned ancestor pins the
   focus-scroll target inside the visible variant picker. */
.option-selector__btns {
  position: relative;
}

/* === Grid containers per style ===
   Forces consistent columns regardless of card content width. */

[data-option-style="pill"] .option-selector__btns,
[data-option-style="polaroid"] .option-selector__btns,
[data-option-style="image"] .option-selector__btns {
  display: grid;
  gap: 8px;
  margin-top: 0;
  justify-content: start;
}

[data-option-style="button"] .option-selector__btns {
  gap: 8px;
  margin-top: 0;
}

/* HIG-111 follow-up (Tobias 2026-06-04): pack pills tightly + EVENLY. The old
   flex-wrap with content-width pills left big gaps (e.g. "Advanced" alone on a row
   because "Elite" missed fitting by a few px). An auto-fit grid makes every pill the
   same width and fits as many per row as the container allows — no ragged white space.
   Pills wrap their text (below) instead of truncating, so the font is unchanged. */
[data-option-style="pill"] .option-selector__btns {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
[data-option-style="polaroid"] .option-selector__btns {
  grid-template-columns: repeat(auto-fill, 130px);
}
[data-option-style="image"] .option-selector__btns {
  grid-template-columns: repeat(auto-fill, 95px);
}

@media (max-width: 768px) {
  [data-option-style="polaroid"] .option-selector__btns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* HIG-66: image swatches were too large on mobile (3×1fr ≈ 111px). Fixed 100px
     columns (~10% smaller) — other swatch styles keep their size. */
  [data-option-style="image"] .option-selector__btns {
    grid-template-columns: repeat(auto-fill, 100px);
  }
}

/* HIG-111: in the narrow choose-options drawer, long pill labels (e.g. kettlebell sets:
   "Complete Double (24 Kettlebells 4-40kg) mit 2 Storage Racks") overflowed horizontally
   — the text was nowrap with no width cap, so the pill grew past the viewport and the
   drawer scrolled sideways. Scope to the drawer (.js-quickbuy): let pill labels wrap to
   multiple lines (keeps the full, distinguishing text — ellipsis would cut "Storage
   Rack") and cap the pill at the container width. The PDP keeps its tuned nowrap pills. */
.js-quickbuy [data-option-style="pill"] .opt-label--pill {
  max-width: 100%;
  min-width: 0;
}
.js-quickbuy [data-option-style="pill"] .opt-label--pill .opt-label__text {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* === Option title (legend) — slightly larger than the value ===
   "Farbe" should read a touch bigger than "Schwarz". The fieldset itself
   carries the data-option-style attribute, so .label is a direct/grand child.
   Use em (relative to body's 18px) rather than rem — this theme sets the
   `font-size: 10px` 62.5% trick on the root, so 1rem would be tiny. */
[data-option-style] > .label,
[data-option-style] > div > .label {
  font-size: 1em;
}
[data-option-style] .option-selector__label-value {
  font-size: 1em;
  font-weight: 400;
}

/* === Common label base === */
[data-option-style="image"] .opt-label,
[data-option-style="pill"] .opt-label,
[data-option-style="button"] .opt-label,
[data-option-style="polaroid"] .opt-label {
  position: relative;
  margin-top: 0;
  margin-inline-end: 0;
  border: 1px solid rgba(var(--text-color)/0.18);
  border-radius: 5px;
  background-color: rgb(var(--bg-color));
  color: rgb(var(--text-color));
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

[data-option-style="image"] .opt-label:hover,
[data-option-style="pill"] .opt-label:hover,
[data-option-style="button"] .opt-label:hover,
[data-option-style="polaroid"] .opt-label:hover {
  border-color: rgba(var(--text-color)/0.45);
}

[data-option-style="image"] .opt-btn:checked + .opt-label,
[data-option-style="pill"] .opt-btn:checked + .opt-label,
[data-option-style="button"] .opt-btn:checked + .opt-label,
[data-option-style="polaroid"] .opt-btn:checked + .opt-label,
[data-option-style] .opt-label--active {
  border-color: rgb(var(--text-color));
  border-width: 2px;
}

/* Product-group swatches use <a> elements (navigation) instead of radio
   inputs (variant selection), so the :checked + .opt-label selectors don't
   apply. .opt-label--active marks the current product's swatch and triggers
   the same active styling. Also kill the default link underline. */
a.opt-label, a.opt-label:hover { text-decoration: none; }
[data-option-style="pill"] .opt-label--active.opt-label--pill,
[data-option-style="button"] .opt-label--active.opt-label--btn {
  background-color: rgb(var(--text-color));
  color: rgb(var(--bg-color));
}

/* Suppress the default gray rings on checked labels.
   product.css line 47 / main.css line 4455 add box-shadows that read as a gray rectangle.
   !important needed because product.css/main.css load after this file. */
[data-option-style="image"] .opt-btn:checked + .opt-label::after,
[data-option-style="pill"] .opt-btn:checked + .opt-label::after,
[data-option-style="button"] .opt-btn:checked + .opt-label::after,
[data-option-style="polaroid"] .opt-btn:checked + .opt-label::after {
  display: none !important;
}
[data-option-style="image"] .opt-btn:checked + .opt-label--swatch {
  box-shadow: none !important;
  border: 2px solid rgb(var(--text-color)) !important;
}

/* === Unavailable state ===
   `.is-unavailable` = Shopify-reported sold-out variant (set by variant-picker.js
                       from variant.available).
   `.is-non-existing` = combination doesn't exist as a variant at all
                       (set by variant-availability.js when option-1 +
                       option-2 don't pair). Same visual treatment. */
/* OOS swatches: dim the CONTENT (text + image), NOT the whole label, so the
   notification-bell badge (HIG-89 Teil 2, drawn on a label/media pseudo) can stay
   at FULL opacity and read crisply. is-non-existing is `display:none` further
   down, so only is-unavailable visibly uses this. Image dims its <img> (kept on
   product.css's own rule) so the media container — which carries the bell — stays
   crisp. */
[data-option-style="button"] .is-unavailable + .opt-label--btn > span,
[data-option-style="pill"] .is-unavailable + .opt-label--pill .opt-label__text,
[data-option-style="pill"] .is-unavailable + .opt-label--pill .opt-label__media,
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid .opt-label__text,
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid .opt-label__media {
  opacity: 0.4;
}

/* HIG-108 (Tobias 2026-06-04): a sold-out button/pill must read clearly as UNAVAILABLE,
   not just "available with faded text" — the old version only differed by text opacity +
   bell, too subtle next to the available swatches. Give it a muted grey FILL, distinct
   from the WHITE available swatch and the BLACK active swatch. Thin grey border stays;
   a 2px black border still marks it when it's the selected variant (grey fill set above).
   Text-bearing types only (button/pill); image/polaroid differentiate via the faded
   image + bell. */
[data-option-style="button"] .is-unavailable + .opt-label--btn,
[data-option-style="pill"] .is-unavailable + .opt-label--pill {
  background-color: rgba(var(--text-color)/0.08);
}
/* HIG-108: on short button labels ("S", "M", "L") the corner bell covered the centred
   letter. The grey fill above already communicates "sold out", so the letter no longer
   needs to be heavily faded — keep it readable (0.7) so a little bell overlap is fine.
   (The smaller-bell override lives AFTER the bell ::before block below, so it wins.) */
[data-option-style="button"] .is-unavailable + .opt-label--btn > span {
  opacity: 0.7;
}

/* HIG-89 (Teil 1): a SOLD-OUT variant that is ALSO the selected one must stay
   readable. The active button/pill style is black bg + white text (lines ~367 /
   ~388). Render the selected-OOS swatch like an UNSELECTED-OOS one: light bg +
   (content-dimmed) dark text, so it never inverts to faint white-on-black. The
   2px active border still marks it as selected; the bell badge stays visible. */
[data-option-style="pill"] .opt-btn.is-unavailable:checked + .opt-label--pill,
[data-option-style="button"] .opt-btn.is-unavailable:checked + .opt-label--btn {
  background-color: rgba(var(--text-color)/0.08);
  color: rgb(var(--text-color));
}

/* === HIG-89 Teil 2: notification-bell badge on sold-out swatches ===
   Replaces the diagonal strike. A sold-out variant is clickable → STOQ
   "Benachrichtige mich", so a bell communicates the intent far better. Design: a
   filled dark **circle** + white bell, top-right, full opacity, with a 1.5px ring
   in the bg colour so it stays legible on top of dark product images too. STAYS
   visible when the OOS variant is selected. Same badge on all 4 swatch types for
   consistency. Inline SVG data-URI → pixel-identical on every device, no JS.

   Drawn on the label `::before` for ALL four types (uniform). product.css makes
   that ::before a full-size overlay (button/pill/polaroid) or the hover tooltip
   (image) — we override its box to a small circle with `!important`, the
   established file convention against product.css's later load order + high
   specificity. The diagonal strikes (label-bg gradient + media ::after) are
   cleared just above. */
/* drop the diagonal strikes (label-bg gradient + small-media strike) */
[data-option-style="button"] .is-unavailable + .opt-label--btn,
[data-option-style="pill"] .is-unavailable + .opt-label--pill,
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid {
  background-image: none !important;
}
[data-option-style="pill"] .is-unavailable + .opt-label .opt-label__media::after,
[data-option-style="polaroid"] .is-unavailable + .opt-label .opt-label__media::after {
  background: none !important;
}
/* image draws its strike on the media ::after with a very high-specificity
   selector — the bell sits on the label ::before, so just remove the media strike
   outright. */
[data-option-style="image"] .is-unavailable + .opt-label--image .opt-label__media::after {
  display: none !important;
}
/* let the badge + its ring sit cleanly in the corner on EVERY type — product.css
   puts overflow:hidden on OOS labels, which clipped the round badge differently
   depending on each swatch's corner radius (looked uneven). The swatch image is
   clipped by its own .opt-label__media, so unclipping the label is safe. */
[data-option-style="button"] .is-unavailable + .opt-label--btn,
[data-option-style="pill"] .is-unavailable + .opt-label--pill,
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid,
[data-option-style="image"] .is-unavailable + .opt-label--image {
  overflow: visible !important;
}
/* the bell badge — all 4 types on the label ::before. For image this overrides
   its hover-tooltip ::before (the value still lives in the visually-hidden span);
   !important wins regardless of source order. */
[data-option-style="button"] .is-unavailable + .opt-label--btn::before,
[data-option-style="pill"] .is-unavailable + .opt-label--pill::before,
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid::before,
[data-option-style="image"] .is-unavailable + .opt-label--image::before {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;       /* image tooltip ::before sets padding — reset so the badge is a true circle */
  border-radius: 50% !important;
  /* Muted GREY circle (not solid black): a sold-out swatch must read as inactive,
     so the badge shouldn't compete with the bold-black ACTIVE swatch on pages with
     many swatches (Tobias 2026-06-04). color-mix gives a theme-aware grey (45% text
     + 55% bg) that's opaque on both light swatches and dark product images; the
     white bell + bg-colour ring keep it legible. Solid #8a8a8a fallback first for
     browsers without color-mix. */
  background-color: #8a8a8a !important;
  background-color: color-mix(in srgb, rgb(var(--text-color)) 45%, rgb(var(--bg-color))) !important;
  /* Bell as a bell-only SVG in a 36×36 viewBox, the glyph translated so it is
     OPTICALLY centred in the circle. The Feather bell is top-heavy (small clapper),
     so geometric centring leaves too much space below — translate(6 7.5) nudges it
     down. Centring lives in the viewBox, not in background-position, so it is
     identical on every product/type regardless of box quirks. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cg transform='translate(6 7.5)' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: 0 0 0 1.5px rgb(var(--bg-color)) !important;
  z-index: 3 !important;
  /* HIG-89 follow-up (Tobias 2026-06-04): make the bell a touch less prominent — it
     should hint at "notify me", not shout. Slightly transparent (the bg-colour ring
     keeps it legible on dark product images). */
  opacity: 0.8 !important;
}
/* Image swatches are a card (label) with the product image inset ~5px (4px padding
   + 1px border) — so the shared top/right:4px placed the badge at the INNER image
   corner, floating in the white frame. Pull it out to the OUTER card corner so it
   reads "in the corner" like button/pill. (Button/pill/polaroid fill their label,
   so 4px already hugs their corner.) */
[data-option-style="image"] .is-unavailable + .opt-label--image::before {
  top: 1px !important;
  right: 1px !important;
}
/* HIG-108: shrink the bell on (small) button swatches + pin it to the very corner so it
   covers less of the centred single-letter label. Placed AFTER the shared 18px bell rule
   so it wins (same specificity). */
[data-option-style="button"] .is-unavailable + .opt-label--btn::before {
  width: 14px !important;
  height: 14px !important;
  top: 3px !important;
  right: 3px !important;
}
   can select it and request a back-in-stock notification (STOQ). Only the
   non-existing combination (`is-non-existing`) stays unclickable — there's nothing
   to notify about a variant that never exists. Order matters: the is-non-existing
   rule comes LAST so that if a value ever carries both classes, "not clickable"
   wins. */
[data-option-style="image"] .is-unavailable + .opt-label,
[data-option-style="pill"] .is-unavailable + .opt-label,
[data-option-style="button"] .is-unavailable + .opt-label,
[data-option-style="polaroid"] .is-unavailable + .opt-label {
  pointer-events: auto;
  cursor: pointer;
}
[data-option-style="image"] .is-non-existing + .opt-label,
[data-option-style="pill"] .is-non-existing + .opt-label,
[data-option-style="button"] .is-non-existing + .opt-label,
[data-option-style="polaroid"] .is-non-existing + .opt-label {
  pointer-events: none;
}

/* Tobias 2026-06-01: a NON-EXISTING option-2/3 value (no variant pairs it with the
   selected option-1 — e.g. a "Menge" that this "Geschmack" never comes in) is hidden
   entirely, not just greyed: it can never be bought in this combination, so showing
   it (struck) only adds noise. SOLD-OUT values (`.is-unavailable`) stay visible +
   clickable so customers can still request a STOQ notification (see HIG-56). Applies
   to swatch buttons AND dropdown <option>s, on the PDP and the choose-options drawer
   (shared CSS). Overrides the opacity/strike treatment above for is-non-existing. */
.is-non-existing,
.is-non-existing + .opt-label,
.custom-select__option.is-non-existing {
  display: none !important;
}

/* HIG-58 (refines HIG-56): when the selected variant is sold out, STOQ
   (RestockRocket) injects .restock-rocket-button-container as a sibling right
   after .product-info__add-to-cart. We replace ONLY the disabled "Ausverkauft"
   cart button with STOQ's notify button (sitting next to the quantity selector);
   the quantity selector and the express-checkout buttons stay visible but
   greyed-out (disabled look). :has() reacts to STOQ's DOM injection, so no JS is
   needed — selecting an in-stock variant removes the container and everything
   reverts automatically.

   Layout goal (Tobias 2026-06-01): the quantity selector and the cart-button slot
   must keep the SAME size + position as in-stock — only the selector greys out, the
   express buttons grey out, and the cart button is swapped for the notify button in
   its exact slot. So we mirror the in-stock split EXACTLY: in-stock the row is
   quantity (35%) + add-button (65%); here add-to-cart shrinks to that same 35% (it
   now holds only the quantity, button hidden) and the notify container takes the 65%
   slot. No auto-sizing → no reflow when switching in/out of stock. */
.js-product-form-main:has(.restock-rocket-button-container) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: calc(2 * var(--space-unit));
}
/* quantity keeps its 35% slot (greyed via product.css :has(button[disabled])) */
.js-product-form-main:has(.restock-rocket-button-container) .product-info__add-to-cart {
  display: flex;
  flex: 0 0 35%;
  margin: 0;
}
.js-product-form-main:has(.restock-rocket-button-container) .product-info__add-to-cart quantity-input {
  margin-inline-end: 0;
}
.js-product-form-main:has(.restock-rocket-button-container) .product-info__add-to-cart .product-info__add-button {
  display: none;
}
/* notify container takes the 65% cart-button slot (the left margin reproduces the
   in-stock gap between quantity and button, so total stays exactly 100% — no wrap) */
.js-product-form-main:has(.restock-rocket-button-container) .restock-rocket-button-container {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  margin: 0 0 0 calc(4 * var(--space-unit));
}
/* notify button fills its slot and is pinned to the SAME height as the in-stock cart
   button (~48px) so the row never grows when switching in/out of stock. The notify
   label is long and wraps to two lines, so we shrink the font to keep it inside 48px. */
.js-product-form-main:has(.restock-rocket-button-container) .restock-rocket-button-product {
  width: 100%;
  margin: 0;
  min-height: 48px;
  height: 48px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* express checkout: keep visible but greyed-out instead of theme's auto-hide
   (overrides main.css .product-info__dynamic-checkout-button:has(...[disabled])) */
.js-product-form-main:has(.restock-rocket-button-container) .product-info__dynamic-checkout-button {
  display: block !important;
  flex: 0 0 100%;
  margin-top: 0;
  opacity: 0.4;
  pointer-events: none;
}

/* HIG-106: back-in-stock notify INSIDE the quick-add drawer. STOQ only injects its
   own notify button on the real PDP form, not in the drawer, so the drawer renders
   its own .js-quickadd-notify button (quick-buy-template) wired to STOQ's openModal
   JS API in quick-add.js. Hidden by default; quick-add.js toggles .is-notify-active
   on .js-footer-content when the selected variant is sold out — then we swap the dead
   "Ausverkauft" cart row + express-checkout for the notify button (mirrors the PDP
   :has(.restock-rocket-button-container) swap above). The "Zurück zum Warenkorb"
   back link stays visible. */
.js-quickadd-notify {
  display: none;
}
/* HIG-106: match the drawer notify button to STOQ's PDP notify button — white with a
   1px black border + dark text, NOT the green primary cart button — so the two read as
   the same control. The .btn base already supplies BebasNeueBold uppercase + sizing;
   we only override the colours/border/radius. Selector is 2 classes so it beats .btn. */
.js-footer-content .js-quickadd-notify,
.js-footer-content .js-quickadd-notify:hover,
.js-footer-content .js-quickadd-notify:focus {
  background-color: #fff;
  color: rgb(42, 42, 42);
  border: 1px solid #000;
  border-radius: 5px;
}

/* HIG-106 layout (Tobias 2026-06-04): mirror the PDP EXACTLY. When a sold-out variant is
   selected the quantity selector STAYS (greyed via product.css :has(button[disabled]))
   and ONLY the cart-button slot is swapped for the notify button — the row's position
   doesn't move. quick-add.js moves .js-quickadd-notify into the form (sibling right after
   .product-info__add-to-cart). Same 35% quantity / 65% button split as the in-stock row,
   so there's no reflow. (Cf. the PDP :has(.restock-rocket-button-container) block above.) */
.js-footer-content.is-notify-active .js-product-form-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: calc(2 * var(--space-unit));
}
.js-footer-content.is-notify-active .product-info__add-to-cart {
  display: flex;
  flex: 0 0 35%;
  margin: 0;
}
.js-footer-content.is-notify-active .product-info__add-to-cart quantity-input {
  margin-inline-end: 0;
}
.js-footer-content.is-notify-active .product-info__add-button {
  display: none;
}
.js-footer-content.is-notify-active .js-quickadd-notify {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 0 calc(4 * var(--space-unit));
  align-items: center;
  justify-content: center;
  /* Tobias 2026-06-04: keep the label at the cart-button size (NOT the 12px STOQ shrink),
     even if it wraps to two lines — readable beats compact. min-height matches the
     quantity slot; the button grows for line 2 (Tobias accepts the slight row growth). */
  min-height: 48px;
  padding: 6px 8px;
  line-height: 1.15;
  text-align: center;
}
/* express checkout: hidden in the drawer's notify mode (keeps the small drawer clean). */
.js-footer-content.is-notify-active .product-info__dynamic-checkout-button {
  display: none !important;
}

/* HIG-106: STOQ back-in-stock popup (.restock-rocket-wrapper) close button. STOQ
   ships a 16×16 "X", a too-small tap target on phones, so we enlarge it (button +
   its SVG) on small screens. Clicking the dimmed background already closes the popup
   natively, so no JS is needed for that. This popup also appears on the PDP (STOQ's
   own notify button), where the bigger tap target is equally welcome. */
@media (max-width: 640px) {
  .restock-rocket-wrapper .close-button {
    width: 34px !important;
    height: 34px !important;
    padding: 4px !important;
  }
  .restock-rocket-wrapper .close-button svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Diagonal strike line for is-non-existing — mirrors product.css's
   .is-unavailable + .opt-label:not(.opt-label--image) gradient. */
.is-non-existing + .opt-label:not(.opt-label--image),
.is-non-existing + .opt-label .opt-label__media::after {
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(var(--text-color)/0.2) calc(50% - 1px), rgba(var(--text-color)/0.2) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat;
}
.is-non-existing + .opt-label .opt-label__media::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}

/* Polaroid OOS: the old diagonal-strike ::after overlay was removed for HIG-89
   Teil 2 — sold-out polaroids now carry the bell badge (on ::before) instead of a
   strike. The media::after strike is cleared in the bell block above. */
[data-option-style="polaroid"] .is-unavailable + .opt-label--polaroid {
  background: transparent !important;
}

/* Pill OOS/non-existing: remove the WHOLE-PILL diagonal strike (HIG-55).
   product.css draws a strike on the label background AND the image
   (.opt-label__media::after) gets its own strike → the pill ends up with two
   lines. Tobias wants only the image struck + the grey-out (opacity 0.4 above),
   not the pill itself. Clearing the label background drops the pill-level line;
   the image strike (media::after) is a separate pseudo and stays. */
[data-option-style="pill"] .is-unavailable + .opt-label--pill,
[data-option-style="pill"] .is-non-existing + .opt-label--pill {
  background: transparent !important;
}

/* === IMAGE style — square card, image fills, name as hover tooltip === */
[data-option-style="image"] .opt-label--image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  min-width: 0;
  padding: 4px;
  border-radius: 5px;
  --btn-border-radius: 5px;
}
[data-option-style="image"] .opt-label--image .opt-label__media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
}
[data-option-style="image"] .opt-label--image .opt-label__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tooltip showing variant name on hover, mirrors Swatch King UX */
[data-option-style="image"] .opt-label--image[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: rgb(var(--text-color));
  color: rgb(var(--bg-color));
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.2;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}
[data-option-style="image"] .opt-label--image[data-tooltip]:hover::before {
  opacity: 1;
}

/* === PILL style — horizontal: image LEFT, text RIGHT === */
[data-option-style="pill"] .opt-label--pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  /* fill the grid cell so every pill is the same width (even packing, HIG-111 follow-up) */
  width: 100%;
  min-width: 0;
  border-radius: 5px;
}
[data-option-style="pill"] .opt-label--pill .opt-label__media {
  position: relative;
  width: 47px;
  height: 47px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgb(var(--bg-color));
}
[data-option-style="pill"] .opt-label--pill .opt-label__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-option-style="pill"] .opt-label--pill .opt-label__text {
  font-size: 0.88em;
  font-weight: 500;
  /* wrap long labels (e.g. flavour names) instead of truncating — denser than 1-per-row
     white space, and the font stays unchanged (Tobias 2026-06-04). */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
[data-option-style="pill"] .opt-btn:checked + .opt-label--pill {
  background-color: rgb(var(--text-color));
  color: rgb(var(--bg-color));
}

/* === BUTTON style — rectangular text only === */
[data-option-style="button"] .opt-label--btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  min-width: 52px;
  border-radius: 5px;
  background-color: rgb(var(--bg-color));
}
@media (max-width: 768px) {
  [data-option-style="button"] .opt-label--btn {
    padding: 8px 10px;
    min-width: 40px;
  }
}
[data-option-style="button"] .opt-btn:checked + .opt-label--btn {
  background-color: rgb(var(--text-color));
  color: rgb(var(--bg-color));
}

/* Casing on button swatches.
   The theme's generic .btn forces uppercase (via --btn-text-transform), which is
   wrong for most swatch labels ("Einzelscheiben", not "EINZELSCHEIBEN"). Default
   button swatches back to as-written... */
[data-option-style="button"] .opt-label--btn {
  text-transform: none;
}
/* ...EXCEPT size selectors ("Grösse" & compounds like "Grips Grösse"), where
   uppercase reads better (S / M / L / XL). Keyed on data-option-size, which is
   set from the language-stable GERMAN option name in variant-picker.liquid — so
   it holds on /en//fr//it/ too (where option.name itself is translated). */
[data-option-size="true"] .opt-label--btn {
  text-transform: uppercase;
}

/* === POLAROID style — image TOP, text BELOW === */
[data-option-style="polaroid"] .opt-label--polaroid {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px;
  width: 100%;
  min-width: 0;
  border-radius: 5px;
}
[data-option-style="polaroid"] .opt-label--polaroid .opt-label__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  background: rgb(var(--bg-color));
}
[data-option-style="polaroid"] .opt-label--polaroid .opt-label__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-option-style="polaroid"] .opt-label--polaroid .opt-label__text {
  margin-top: 8px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  font-size: 0.88em;
}

/* === DESKTOP: bigger swatches, single-line labels (Tobias 2026-06-05) ===
   On medium/large screens there is plenty of room, so the 165px pill columns (3 across)
   forced labels like "Advanced (122.5 - 129 kg)" to wrap onto 2-3 lines and looked small.
   Widen the pill columns (→ 2 wider columns) so a normal label fits on ONE line, and let
   short button labels ("15 kg (Damen)") stop wrapping. Scoped to ≥1024px ONLY — mobile and
   the choose-options drawer (which Tobias is happy with) keep their compact, wrapping
   layout. Extreme labels (e.g. very long kettlebell-set names) can still wrap rather than
   truncate, so no distinguishing text is ever cut. */
@media (min-width: 1024px) {
  [data-option-style="pill"] .option-selector__btns {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  [data-option-style="pill"] .opt-label--pill .opt-label__text {
    overflow-wrap: normal; /* don't break mid-word now that there's room */
  }
  [data-option-style="button"] .opt-label--btn {
    white-space: nowrap;
  }
  /* Keep the choose-options drawer EXACTLY as it is (Tobias likes the compact layout) —
     the wide desktop columns above are viewport-based, so they'd otherwise also widen the
     narrow drawer's pills (collapsing them to 1 per row). Re-pin the drawer to the
     original compact grid + wrapping. */
  .js-quickbuy [data-option-style="pill"] .option-selector__btns {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  }
  .js-quickbuy [data-option-style="pill"] .opt-label--pill .opt-label__text {
    overflow-wrap: anywhere;
  }
}