/* TS Linked Swatches Popup — deliberately scoped so other WoodMart components keep their styles. */
.variations_form-linked .wd-swatches-product > .ts-lsp-more {
  box-sizing: border-box;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 11px;
  min-height: 33px;
  max-width: 100%;
  border: 1px solid rgba(223, 201, 255, .82);
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(136, 69, 255, .97), rgba(91, 39, 209, .97));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 3px 15px rgba(98, 40, 229, .24);
  font-family: inherit;
  font-size: clamp(12px, var(--wd-swatch-text-size, 14px), 16px);
  font-weight: 650;
  line-height: 1.25;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  touch-action: manipulation;
}
.variations_form-linked .wd-swatches-product > .ts-lsp-more:hover,
.variations_form-linked .wd-swatches-product > .ts-lsp-more.ts-lsp-more-open {
  background: linear-gradient(140deg, #9b5aff, #6c37db);
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .30) inset, 0 0 20px rgba(176, 120, 255, .55);
  color: #fff;
}
.variations_form-linked .wd-swatches-product > .ts-lsp-more:focus-visible,
.ts-lsp-close:focus-visible,
.ts-lsp-panel .wd-swatch:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px;
}
.ts-lsp-more-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease;
}
.ts-lsp-more-open .ts-lsp-more-chevron { transform: rotate(180deg); }

.ts-lsp-panel {
  --ts-lsp-panel-bg: rgba(42, 14, 99, .97);
  box-sizing: border-box;
  position: fixed;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  width: min(525px, calc(100vw - 24px));
  max-height: 475px;
  overflow: visible;
  isolation: isolate;
  color: #fff;
  border: 1px solid rgba(181, 138, 255, .87);
  border-radius: 17px;
  background: radial-gradient(ellipse at 10% 0%, rgba(113, 64, 205, .40), transparent 65%), var(--ts-lsp-panel-bg);
  box-shadow: 0 0 0 2px rgba(137, 74, 248, .27), 0 10px 40px rgba(15, 5, 45, .60), 0 0 33px rgba(132, 69, 251, .34);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
}
.ts-lsp-panel[hidden], .ts-lsp-backdrop[hidden] { display: none !important; }
.ts-lsp-panel::before,
.ts-lsp-panel::after {
  position: absolute;
  pointer-events: none;
  content: '';
}
.ts-lsp-panel::before {
  width: 13px;
  height: 13px;
  background: #39206c;
  border: 1px solid rgba(181, 138, 255, .87);
  transform: translateX(-50%) rotate(45deg);
  left: var(--ts-lsp-arrow-x, 50%);
  z-index: -1;
}
.ts-lsp-panel.ts-lsp-below::before { top: -8px; border-right: 0; border-bottom: 0; }
.ts-lsp-panel.ts-lsp-above::before { bottom: -8px; border-left: 0; border-top: 0; }
.ts-lsp-panel .ts-lsp-head {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid rgba(205, 174, 255, .15);
}
.ts-lsp-panel .ts-lsp-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.ts-lsp-panel .ts-lsp-close {
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -4px -5px -4px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(243, 231, 255, .85);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ts-lsp-panel .ts-lsp-close:hover { background: rgba(255,255,255,.12); color: white; }
.ts-lsp-panel .ts-lsp-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px 16px 17px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a06bff rgba(255,255,255,.10);
  -webkit-overflow-scrolling: touch;
}
.ts-lsp-panel .ts-lsp-content::-webkit-scrollbar { width: 6px; }
.ts-lsp-panel .ts-lsp-content::-webkit-scrollbar-thumb { background: #a06bff; border-radius: 20px; }
.ts-lsp-panel .ts-lsp-content::-webkit-scrollbar-track { background: rgba(255,255,255,.09); border-radius: 20px; }
.ts-lsp-panel .ts-lsp-list.wd-swatches-product {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  --wd-swatch-text-size: 12px;
  --wd-swatch-h-sp: 8px;
  --wd-swatch-v-sp: 8px;
}
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: auto;
  min-height: 33px;
  height: auto;
  padding: 7px 9px;
  margin: 0;
  border: 1px solid rgba(197, 157, 255, .40);
  border-radius: 7px;
  background: rgba(91, 57, 170, .24);
  color: #ede7ff;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text .wd-swatch-text {
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  white-space: inherit;
}
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text:hover:not(.wd-disabled) {
  border-color: rgba(232, 212, 255, .95);
  background: rgba(155, 104, 247, .42);
  color: #fff;
  box-shadow: 0 0 10px rgba(128, 67, 245, .18);
}
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-active {
  border-color: rgba(213, 163, 255, .99);
  background: rgba(109, 65, 233, .62);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(171, 127, 255, .38) inset;
}
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-disabled { opacity: .48; }
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text::after { display: none; }
.ts-lsp-panel .ts-lsp-list .wd-swatch.wd-bg { color: #fff; }
.ts-lsp-backdrop { display: none; }

@media (max-width: 767px) {
  .variations_form-linked .wd-swatches-product > .ts-lsp-more {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 13px;
  }
  html.ts-lsp-scroll-lock { overflow: hidden !important; }
  body.ts-lsp-scroll-lock {
    position: fixed !important;
    top: var(--ts-lsp-lock-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .ts-lsp-backdrop:not([hidden]) {
    appearance: none;
    position: fixed;
    z-index: 2147482999;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(10, 4, 27, .73);
    border: 0;
    border-radius: 0;
    cursor: default;
  }
  .ts-lsp-panel.ts-lsp-mobile {
    position: fixed;
    inset: auto 0 0 !important;
    width: 100% !important;
    max-width: none;
    max-height: min(83vh, 700px) !important;
    max-height: min(83dvh, 700px) !important;
    border-radius: 21px 21px 0 0;
    border-left: 1px solid rgba(181, 138, 255, .87);
    border-right: 1px solid rgba(181, 138, 255, .87);
    border-bottom: none;
    box-shadow: 0 -9px 44px rgba(11, 3, 28, .58), 0 0 0 1px rgba(151, 93, 255, .28);
  }
  .ts-lsp-panel.ts-lsp-mobile::before { display: none; }
  .ts-lsp-panel .ts-lsp-head { padding: 17px 18px 14px; }
  .ts-lsp-panel .ts-lsp-title { font-size: 15px; }
  .ts-lsp-panel .ts-lsp-close { width: 42px; height: 42px; flex-basis: 42px; }
  .ts-lsp-panel .ts-lsp-content {
    padding: 15px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .ts-lsp-panel .ts-lsp-list.wd-swatches-product { gap: 8px; }
  .ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text {
    min-height: 39px;
    padding: 9px 10px;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .ts-lsp-panel .ts-lsp-title { font-size: 14px; }
  .ts-lsp-panel .ts-lsp-list .wd-swatch.wd-text { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-lsp-panel *, .ts-lsp-more { transition: none !important; }
}
