/** Shopify CDN: Minification failed

Line 321:22 Unexpected "{"
Line 321:29 Expected ":"

**/
/* ======== Basic page styling ========= */ 
/* ---- Product title & option-value colors ---- */
:root{
  --prod-title-color: #222321;   /* product name */
}

/* product name */
.wt-product__name{
  color: var(--prod-title-color);
}


/* ========= Product Circle swatches (consolidated) ========= */
.wt-product__options{
  /* Size & hit area */
  --swatch-size: 36px;
  --swatch-hit-pad: 5px;
  --swatch-gap: 8px;               /* flex gap — handles both H and V spacing */

  /* Base (unselected) ring on the light card */
  --base-halo: #fff;
  --base-halo-w: 2px;
  --base-ring: rgba(0,0,0,.22);    /* subtle edge; tweak .22 → .24 if you want more */
  --base-ring-strong: rgba(0,0,0,.36); /* for White/very light tones */

  /* Selected double ring (your chosen balance) */
  --sel-inner: 4px;                /* white inner gap */
  --sel-outer: 2.5px;              /* dark outer ring */
  --sel-color: #222321;

  /* Keyboard focus */
  --focus: #0a7cff;
}

/* Label = tap target only (no visuals) */
.wt-product__options .f-swatch__list__link{
  position: relative;
  display: inline-flex;
  padding: var(--swatch-hit-pad);
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  line-height: 0;                  /* prevents line-box clipping */
  overflow: visible;               /* never clip the circle/shadows */
}
/* Remove any theme pseudo rings on the label */
.wt-product__options .f-swatch__list__link::before,
.wt-product__options .f-swatch__list__link::after{ content:none; }

/* Inner colour circle: make it a true circle and draw rings here */
.wt-product__options .f-swatch__list__link__content{
  width: var(--swatch-size);
  height: var(--swatch-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: block;
  box-sizing: content-box;
  background-size: cover;
  background-repeat: no-repeat;

  /* Base ring (unselected) */
  border: 0;
  box-shadow:
    0 0 0 var(--base-halo-w) var(--base-halo),
    0 0 0 calc(var(--base-halo-w) + 2px) var(--base-ring);

  /* Subtle ambient lift (visible but not noisy) */
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.05))
    drop-shadow(0 2px 3px rgba(0,0,0,.05));
  transition: filter .15s ease, transform .15s ease;
}
/* Stronger edge for very light tones (only when NOT selected) */
.wt-product__options
.f-swatch__list__item > input[type="radio"]:not(:checked)[value*="White" i] + label .f-swatch__list__link__content,
.wt-product__options
.f-swatch__list__item > input[type="radio"]:not(:checked)[value^="Light " i] + label .f-swatch__list__link__content,
.wt-product__options
.f-swatch__list__item > input[type="radio"]:not(:checked)[value*="Corda" i] + label .f-swatch__list__link__content,
.wt-product__options
.f-swatch__list__item > input[type="radio"]:not(:checked)[value*="Gesso" i] + label .f-swatch__list__link__content{
  box-shadow:
    0 0 0 var(--base-halo-w) var(--base-halo),
    0 0 0 calc(var(--base-halo-w) + 2px) var(--base-ring-strong);
}
/* Selected = one crisp double ring */
.wt-product__options
.f-swatch__list__item > input[type="radio"]:checked + label .f-swatch__list__link__content{
  box-shadow:
    0 0 0 var(--sel-inner) #fff,
    0 0 0 calc(var(--sel-inner) + var(--sel-outer)) var(--sel-color);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.06))
    drop-shadow(0 3px 6px rgba(0,0,0,.08));
}
/* Hover/focus: small lift & 1px rise (desktop hover only) */
@media (hover:hover){
  .wt-product__options .f-swatch__list__link:hover .f-swatch__list__link__content{
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.08))
      drop-shadow(0 3px 6px rgba(0,0,0,.10));
    transform: translateY(-1px);
  }
}
/* Keyboard focus (works for any swatch group, not just Color) */
.wt-product__options
.f-swatch__list__item > input[type="radio"]:focus-visible + label .f-swatch__list__link__content,
.wt-product__options
.f-swatch__list__link:focus-visible .f-swatch__list__link__content {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.08))
    drop-shadow(0 3px 6px rgba(0,0,0,.10));
}
/* Keyboard focus (works for any swatch group, not just Color) */
.wt-product__options
.f-swatch__list__item > input[type="radio"]:focus-visible + label .f-swatch__list__link__content,
.wt-product__options
.f-swatch__list__link:focus-visible .f-swatch__list__link__content {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.08))
    drop-shadow(0 3px 6px rgba(0,0,0,.10));
}
/* Row spacing — overflow visible so rings aren't clipped.
   padding-left gives the first swatch ring clearance (~6.5px needed). */
.wt-product__options .f-swatch__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--swatch-gap);
  padding: 4px 0 4px 8px;
  min-height: calc(var(--swatch-size) + 2 * var(--swatch-hit-pad));
  overflow: visible;
}
/* margin:0 — gap handles spacing, prevents margin-bottom leaking into wrapped rows */
.wt-product__options .f-swatch__list__item{ margin: 0; }

/* Unclip swiper wrapper too */
.wt-product__options .swiper-container{ overflow: visible; }
/* ========= End Product Circle swatches ========= */

/* ========= Square swatch styling ========= */
/* === Square configuration chips (anchors) – 3-state frame ================== */
.wt-product__option__body--swatches{
  /* tune these if you like */
  --chip-radius: 8px;                     /* corner rounding */
  --chip-base: #DADADA;        /* light grey (base)  ≈ #222 at 10% */
  --chip-hover: #B8B8B8;       /* mid grey (hover)   ≈ #222 at 22% */
  --chip-selected: var(--sel-color, #222321); /* selected (match circles) */
  --chip-base-w: 1.3px;                     /* base frame width */
  --chip-selected-w: 2px;                 /* selected frame width */
}

/* Reset Wonder's old frame so we control it */
.wt-product__option__body--swatches a::before{
  content:"";
  position:absolute;
  inset:0;                                /* no -4px offsets */
  border:0;                               /* don't use border for width */
  border-radius: var(--chip-radius);
  box-shadow: inset 0 0 0 var(--chip-base-w) var(--chip-base); /* base frame */
  transition: box-shadow .15s ease, filter .15s ease;
}

/* Keep the inner content nicely rounded inside the frame */
.wt-product__option__body--swatches a .f-swatch__list__link__content{
  border-radius: calc(var(--chip-radius) - 4px);
}

/* Hover feedback ONLY for unselected chips */
@media (hover:hover){
  .wt-product__option__body--swatches a:not(.active):hover::before{
    box-shadow: inset 0 0 0 var(--chip-base-w) var(--chip-hover);
  }
}

/* Selected: thicker, dark frame – do not dim on hover */
.wt-product__option__body--swatches a.active::before{
  box-shadow: inset 0 0 0 var(--chip-selected-w) var(--chip-selected);
}
/* Guard against theme hover changing the selected look */
@media (hover:hover){
  .wt-product__option__body--swatches a.active:hover::before{
    box-shadow: inset 0 0 0 var(--chip-selected-w) var(--chip-selected);
  }
}

/* (Optional) keyboard focus parity */
.wt-product__option__body--swatches a:focus-visible::before{
  box-shadow: inset 0 0 0 var(--chip-selected-w) var(--chip-selected),
              0 0 0 2px var(--focus, #0a7cff); /* outer focus halo */
}
/* ========= End Square swatch styling  ========= */

/* gap (also set on the list block above) */
.wt-product__options .f-swatch__list{ gap: var(--swatch-gap); }

/* Let the LI auto-size to the label (no forced 65px box) */
.wt-product__options .f-swatch__list__item{
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;               /* spacing handled by gap */
  box-sizing: content-box;
}

/* The label is the tap target; keep it centered and remove any theme margins */
.wt-product__options .f-swatch__list__link{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--swatch-hit-pad);
  margin: 0;               /* kill theme margin-right if present */
  border-radius: 999px;
}

/* Disabled: same geometry, just faded & non-clickable.
   :not(.seg-swatch) excludes seg-swatch labels — visual treatment on chip below. */
.wt-product__options
.f-swatch__list__item > input[type="radio"].disabled + label:not(.seg-swatch),
.wt-product__options
.f-swatch__list__item > input[type="radio"][disabled] + label:not(.seg-swatch),
.wt-product__options
.f-swatch__list__item.disabled input[type="radio"] + label:not(.seg-swatch) {
  pointer-events: none;
  opacity: .45;
  padding: var(--swatch-hit-pad);
}
/* seg-swatch disabled: block clicks only */
.wt-product__options
.f-swatch__list__item > input[type="radio"].disabled + label.seg-swatch,
.wt-product__options
.f-swatch__list__item > input[type="radio"][disabled] + label.seg-swatch {
  pointer-events: none;
}

/* Inner circle stays 45×45 */
.wt-product__options
.f-swatch__list__item > input[type="radio"] + label .f-swatch__list__link__content{
  width: var(--swatch-size);
  height: var(--swatch-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
/* ========= End Swatch styling  ========= */


/*========== Begin Description Tabbed Content Styling ========== */

/* 1) Text-side padding for every tab panel */
.web-pck__tab-panel > .web-pck__tab-panel-column:first-of-type{
  padding: 24px 48px; /* top/bottom 24, sides 48 */
}

/* 2) Spec rows: two-column grid with right-aligned values */
.web-pck__tab-panel .web-pck__block--text_columns .web-pck__columns{
  display: grid;
  grid-template-columns: 180px 1fr; /* adjust width to taste */
  align-items: center;
  column-gap: 20px;
  padding-block: 6px;
}
.web-pck__tab-panel .web-pck__block--text_columns .web-pck__columns > .web-pck__flex-item:last-child{
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

/* 3) Divider & collapsible borders unified */
.web-pck__tab-panel [class^="web-pck__block-id-divider_"] .web-pck__divider{
  border-top: 1px solid #6b6b6b;
  width: 100%;
  margin: 0;
}
.web-pck__block--collapsible_content .web-pck__accordion{
  border-top: 1px solid #6b6b6b;
  border-bottom: 1px solid #6b6b6b;
}

/* 4) Dimension drawing: make white JPG “paper” disappear into the panel */
.web-pck__tab-panel .web-pck__block--inset_image .web-pck__image__wrapper{
  isolation: isolate;
  background: #ececec;
}
.web-pck__tab-panel .web-pck__block--inset_image .web-pck__image__wrapper img{
  mix-blend-mode: darken;
}


/*---------------- The following HOPEFULLY only pertains to the simple bundles variant picker, but will probably catch all -------------- */
/* Variant picture tiles – force 80×80 square and contain the image */


/* Bundle picker: make colour labels readable (override theme white text) */
.byz-bundle-picker .byz-swatch__label,
.byz-bundle-picker .f-thumb__label {
  color: #212121 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
}

/* Optional: subtle difference between selected and unselected */
.byz-bundle-picker .byz-swatch.is-selected .byz-swatch__label {
  opacity: 1;
  font-weight: 600;
}
.byz-bundle-picker .byz-swatch[aria-pressed="false"] .byz-swatch__label {
  opacity: 0.75;
}
/* Ensure labels are visible even if the section uses light-on-dark colors */
#BundleVariantPicker-{{ block.id | default: section.id }} .byz-swatch__label{
  color: var(--color-body-text, #111) !important;
}
/* ================================
   PDP Add to Cart – matches bundle-config style
   Rounded rectangle (8px), arrow icon, consistent typography
   ================================ */

/* ── Buy-buttons row: zero bottom gap so trust row sits flush ── */
/* Targets the outer disabled-on-mobile wrapper, the product-form element,
   the inner form wrapper, and the buttons container – belt AND braces       */
.main-product__buy-buttons--container,
product-form.wt-product__add-to-cart,
.wt-product__add-to-cart,
.wt-product__add-to-cart_form,
.wt-product__add-to-cart_form--wrapper {
  margin-bottom: 0 !important;
}

/* ── Submit button ── */
.product-form__submit.button.button--full-width,
.wt-product__sticky-buy__button.button.button--full-width {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 15px 24px;
  border-radius: 8px;      /* rounded rect – matches bundle-config --bdz-radius-sm */
  border: none;
  margin-bottom: 0;

  background-color: var(--color-button-primary-background, #111);
  color: var(--color-button-primary-text, #fff);

  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  /* PDP premium elevation – intentionally stronger than bundle-config */
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.12);

  transform: translateY(0);
  transition:
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Hover: lift + deeper shadow */
.product-form__submit.button.button--full-width:hover:not([disabled]),
.wt-product__sticky-buy__button.button.button--full-width:hover:not([disabled]) {
  background-color: var(--color-button-primary-background-hover, #000);
  color: var(--color-button-primary-text-hover, #fff);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Active: press down */
.product-form__submit.button.button--full-width:active:not([disabled]),
.wt-product__sticky-buy__button.button.button--full-width:active:not([disabled]) {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
}

/* Disabled */
.product-form__submit.button.button--full-width[disabled],
.wt-product__sticky-buy__button.button.button--full-width[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Focus ring */
.product-form__submit.button.button--full-width:focus-visible,
.wt-product__sticky-buy__button.button.button--full-width:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.85);
  outline-offset: 2px;
}

/* ── Arrow icon via CSS ::after – no JS / no DOM mutation ── */
/* Uses SVG mask so the arrow inherits the button's currentColor (always white
   on this dark button, but adapts automatically if the theme is customised). */
.product-form__submit.button.button--full-width::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* Hide arrow during loading state so it doesn't sit next to the spinner */
.product-form__submit.button.button--full-width[aria-disabled="true"]::after,
.product-form__submit.button.button--full-width.loading::after {
  display: none;
}

/* ── Quantity counter: PDP buy-buttons only (not cart drawer) ── */
/* Scoped under product-form.wt-product__add-to-cart so cart drawer
   and any other steppers elsewhere in the theme are untouched.      */
product-form.wt-product__add-to-cart quantity-counter,
product-form.wt-product__add-to-cart .counter-wrapper {
  border-radius: 8px;
  display: flex;
  align-items: stretch;
}
product-form.wt-product__add-to-cart .counter-wrapper .counter,
product-form.wt-product__add-to-cart quantity-counter .counter {
  border-radius: 8px;
  overflow: hidden;
  min-height: 52px;
  display: flex;
  align-items: stretch;
}
/* +/– buttons: full height, centred icon */
product-form.wt-product__add-to-cart .counter-wrapper .counter button,
product-form.wt-product__add-to-cart quantity-counter .counter button {
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
/* Input: vertically centred number */
product-form.wt-product__add-to-cart .counter-wrapper .counter input,
product-form.wt-product__add-to-cart quantity-counter .counter input {
  display: flex;
  align-items: center;
  text-align: center;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── seg-swatch chip parity ──────────────────────────────────────────────
   Shopify's native swatch renderer outputs .seg-swatch__chip instead of
   .f-swatch__list__link__content.  Mirror every size + shape rule so
   both inner-element variants stay visually identical.
   ──────────────────────────────────────────────────────────────────────── */

/* 1. Size & shape — keep in sync with the .f-swatch__list__link__content block above */
.wt-product__options .f-swatch__list__link .seg-swatch__chip,
.wt-product__options
.f-swatch__list__item > input[type="radio"] + label .seg-swatch__chip {
  display: block;
  width: var(--swatch-size);
  height: var(--swatch-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-sizing: content-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* base ring */
  box-shadow:
    0 0 0 var(--base-halo-w) var(--base-halo),
    0 0 0 calc(var(--base-halo-w) + 2px) var(--base-ring);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.05))
    drop-shadow(0 2px 3px rgba(0,0,0,.05));
  transition: filter .15s ease, transform .15s ease;
}

/* 2. Selected ring */
.wt-product__options
.f-swatch__list__item > input[type="radio"]:checked + label .seg-swatch__chip {
  box-shadow:
    0 0 0 var(--sel-inner) #fff,
    0 0 0 calc(var(--sel-inner) + var(--sel-outer)) var(--sel-color);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.06))
    drop-shadow(0 3px 6px rgba(0,0,0,.08));
}

/* 3. Hover lift */
@media (hover: hover) {
  .wt-product__options .f-swatch__list__link:hover .seg-swatch__chip {
    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.08))
      drop-shadow(0 3px 6px rgba(0,0,0,.10));
    transform: translateY(-1px);
  }
}

/* 4. Unavailable overlay — white wash + red diagonal strike.
   Targets the CHIP's ::after rather than the label's, because our rule
   `.wt-product__options .f-swatch__list__link::after { content:none }`
   kills any label::after regardless of specificity (Chrome behaviour).
   The chip has no competing content:none rules.                         */
.wt-product__options
.f-swatch__list__item > input[type="radio"].disabled + label.seg-swatch .seg-swatch__chip,
.wt-product__options
.f-swatch__list__item > input[type="radio"][disabled] + label.seg-swatch .seg-swatch__chip {
  position: relative; /* establish stacking context for ::after */
}
.wt-product__options
.f-swatch__list__item > input[type="radio"].disabled + label.seg-swatch .seg-swatch__chip::after,
.wt-product__options
.f-swatch__list__item > input[type="radio"][disabled] + label.seg-swatch .seg-swatch__chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.30);
  background-image: linear-gradient(
    135deg,
    transparent            calc(50% - 1.5px),
    rgba(185, 28, 28, 0.85) calc(50% - 1.5px),
    rgba(185, 28, 28, 0.85) calc(50% + 1.5px),
    transparent            calc(50% + 1.5px)
  );
}

/* 5. seg-swatch LABEL sizing — theme forces --seg-size (30px default) */
.wt-product__options .f-swatch__list__link.seg-swatch {
  width: var(--swatch-size) !important;
  height: var(--swatch-size) !important;
}

/* 6. seg-swatch LI hit-area parity + margin:0 to prevent wrap gaps */
.wt-product__options .f-swatch__list__item:has(> label.seg-swatch) {
  padding: var(--swatch-hit-pad);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
/* ========= End seg-swatch parity ========= */


/* =========================================================================
   PDP Header Typography — Reviews + Price
   Reduces the visual weight of the review badge line and price so the
   hierarchy reads: Title > [reviews — supporting detail] > Price > Options.
   Selectors confirmed against live inspect output (Judge.me badge markup).
   ========================================================================= */

/* ── Judge.me preview badge ─────────────────────────────────────────────── */
/* Star icons: drop from ~18px to ~14px rendered size */
.jdgm-prev-badge__stars {
  font-size: 0.78em;   /* relative to the badge container — stars scale down */
}
/* "6 reviews" link text: pull back to a quiet supporting size */
.jdgm-prev-badge__text {
  font-size: 1.2rem;         /* ~12px at 10px root — clearly sub-hierarchy */
  color: rgba(0, 0, 0, 0.50); /* muted; lets it recede behind price + options */
  font-weight: 400;
}
/* Align badge vertically when star size changes */
.jdgm-prev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ── End Judge.me badge ──────────────────────────────────────────────────── */

/* ── Price ──────────────────────────────────────────────────────────────── */
/* The theme outputs .price--large on the PDP price block.
   Stepping it down ~15% keeps it clearly readable as the price
   without competing with the product title for dominance.
   wt-product__price__final targets both regular and sale price spans. */
.price--large .wt-product__price__final,
.price--large .price-item--regular {
  font-size: 1.9rem;
  color: #888888;
}
/* ── End Price ───────────────────────────────────────────────────────────── */

/* ── Breathing room between price block and first option group ───────────── */
/* Adds a small visual pause at the boundary between "product identity"
   content (brand / title / reviews / price) and "configuration" content
   (size pills, material picker, colour picker). */
.wt-product__price + .wt-product__option,
.wt-product__price ~ .wt-product__option:first-of-type {
  margin-top: 10px;
}
/* =========================================================================
   End PDP Header Typography
   ========================================================================= */


/* =========================================================================
   Product Variations — pill button improvements
   ========================================================================= */

/* ── Hide the redundant selected-value echo above the size pills ─────────
   The product_variations block renders:
     <span class="label">Size: <strong class="value">210 – 280 cm ext.</strong></span>
   where the <strong> is a CHILD of .label.

   The BDZ variant picker renders the equivalent as SIBLINGS:
     <span class="label">Colour:</span> <strong class="value"></strong>
   so the child combinator (>) leaves BDZ option labels completely untouched. */
.wt-product__option__title .label > strong.value {
  display: none;
}
/* ── End echo-value hide ─────────────────────────────────────────────────── */

/* ── Option label + value typography ────────────────────────────────────
   Labels ("Size:", "Table Top Material:", "Colour:") match the trust links
   at #888 — clearly readable but visually subordinate to the pickers below.
   Values ("Powder Coated Aluminium", "Charcoal") step slightly darker at
   #555 and drop the default bold weight so they read as data, not headings.
   Covers both product_variations (.label > strong.value) and the BDZ
   variant picker (.label + strong.value sibling) in one ruleset. */
.wt-product__option__title .label {
  color: #888888;
  font-weight: 400;
  font-size: calc(var(--font-base-size) - 3px); /* 13px */
}
.wt-product__option__title .value {
  color: #222220;    /* dark but weight-400 keeps it from feeling heavy */
  font-weight: 400;
  font-size: calc(var(--font-base-size) - 2.5px); /* 13.5px */
}
/* ── End option label typography ─────────────────────────────────────────── */

/* ── Size pill — stronger selected state ─────────────────────────────────
   With the echo text removed, the pills carry the full weight of
   communicating which size is selected. A solid filled state makes
   the selection unambiguous. Mirrors the dark colour used by circle swatches
   (--sel-color: #222321) for visual consistency across picker types. */
.wt-product__option__body--tiles .f-button__list__link {
  padding-left:  14px;
  padding-right: 14px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* The theme draws the visible border on a ::before pseudo-element, not on
   the element itself — so border-color on the element has no effect.
   Target ::before to make the inactive border clearly visible. */
.wt-product__option__body--tiles .f-button__list__link::before {
  border-color: rgba(0, 0, 0, 0.22) !important;
  transition: border-color 0.15s ease;
}

.wt-product__option__body--tiles .f-button__list__link.active {
  background-color: var(--sel-color, #222321);
  color: #ffffff;
}

/* Active pill ::before border matches the fill */
.wt-product__option__body--tiles .f-button__list__link.active::before {
  border-color: var(--sel-color, #222321) !important;
}

/* Hover — darken border slightly on inactive pills */
@media (hover: hover) {
  .wt-product__option__body--tiles .f-button__list__link:not(.active):hover::before {
    border-color: rgba(0, 0, 0, 0.45) !important;
  }

  /* Prevent theme hover from undoing the selected fill */
  .wt-product__option__body--tiles .f-button__list__link.active:hover {
    background-color: var(--sel-color, #222321);
    color: #ffffff;
  }
  .wt-product__option__body--tiles .f-button__list__link.active:hover::before {
    border-color: var(--sel-color, #222321) !important;
  }
}

/* Keyboard focus on pill */
.wt-product__option__body--tiles .f-button__list__link:focus-visible {
  outline: 2px solid var(--focus, #0a7cff);
  outline-offset: 2px;
}
/* ── End size pill ───────────────────────────────────────────────────────── */

/* ── Variant picture thumbnail — selected ring & OOS state ──────────────
   RING
   The theme draws the ring on label::before (default: 1px, border-color
   transparent). Its JS adds .active only when the option is BOTH selected
   AND in-stock, which is why the ring disappears on OOS selections.

   Fix: split into two rules so each gets exactly what it needs.
     1. .active::before  – in-stock selected; just widen the theme's ring.
     2. :checked + label::before – covers the OOS-but-selected case where
        .active is never set; needs a full border spec because the default
        border-color is transparent.

   DIMMING + STRIKETHROUGH
   The theme JS adds .disabled to the radio input for OOS options.

   opacity on the label is intentionally avoided here — it would pull the
   strikethrough (label::after) along with it, making the line washed-out
   no matter how thick we draw it. Instead we dim only the <img> child so
   the label and its pseudo-elements stay at full paint opacity.

   The strikethrough is drawn on label::after with full opacity, overriding
   the theme's thinner default line. Gate the dim on :not(:checked) so a
   selected OOS thumb stays at full brightness — the ring signals the active
   choice and the strikethrough still shows clearly over the undimmed photo.
   pointer-events left intact so customers can click OOS thumbs to browse
   gallery images for that material combination. */

/* 1. In-stock selected — widen the theme ring from 1 px → 2 px */
.wt-product__option__body--thumbs .f-thumb__list__link.active::before {
  border-width: 2px !important;
}

/* 2. Selected ring when OOS (theme skips .active here) — full border spec */
.wt-product__option__body--thumbs input[type="radio"]:checked + label::before {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--sel-color, #222321) !important;
}

/* 3. Unselected OOS thumb — dim the photo only, not the label/pseudo-elements */
.wt-product__options
.f-thumb__list__item > input[type="radio"].disabled:not(:checked) + label img {
  opacity: 0.45;
}

/* 4. OOS strikethrough — prominent red diagonal, full opacity on all OOS thumbs.
   Overrides the theme's thinner line. Drawn on label::after so it sits above
   the photo and is completely unaffected by the img-level dimming above.
   3 px half-width → 6 px total stroke; alpha 0.92 keeps it vivid without
   being a harsh solid flat red. */
.wt-product__options
.f-thumb__list__item > input[type="radio"].disabled + label::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    135deg,
    transparent              calc(50% - 3px),
    rgba(185, 28, 28, 0.92)  calc(50% - 3px),
    rgba(185, 28, 28, 0.92)  calc(50% + 3px),
    transparent              calc(50% + 3px)
  );
  opacity: 1;
}
/* ── End variant picture thumbnail ──────────────────────────────────────── */

/* =========================================================================
   End Product Variations
   ========================================================================= */
/* ── PDP price: demote the currency suffix visually ──────────────────────
   em units keep it proportional if the theme price font-size changes. */
.wt-product__price .price-currency {
  font-size: 0.75em;
  font-weight: 400;
  vertical-align: baseline;
  color: #888888;
}