/*
 * Kuflik desktop dropdowns — selected editorial direction (Variant 3).
 * Colors deliberately reuse the storefront's existing semantic roles.
 * Icons: Lucide static 0.468.0, chevron-down and check, ISC license.
 */

@media (min-width: 992px) {
  html.kuflik-desktop-dropdowns-on body {
    --kdd-ink: var(--kuflik-ink, #252321);
    --kdd-muted: var(--kuflik-muted, #5f5a55);
    --kdd-line: var(--kuflik-border, #ded9d2);
    --kdd-surface: #fff;
    --kdd-surface-soft: var(--kuflik-surface, #f7f4ef);
    --kdd-surface-strong: var(--kuflik-surface-strong, #eee7dc);
    --kdd-accent: var(--kuflik-accent, #755225);
    --kdd-accent-hover: var(--kuflik-accent-hover, #5f401b);
    --kdd-focus: var(--kuflik-focus, #755225);
    --kdd-hairline: 1px;
    --kdd-shadow:
      0 0 0 1px rgb(37 35 33 / 8%),
      0 8px 18px -8px rgb(37 35 33 / 20%),
      0 20px 48px -24px rgb(37 35 33 / 24%);
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-catalog-v3 {
    --kdd-ink: var(--kuflik-v3-ink, #23272e);
    --kdd-muted: var(--kuflik-v3-soft, #5f6570);
    --kdd-line: var(--kuflik-v3-line, #e3e1da);
    --kdd-surface: var(--kuflik-v3-card, #fff);
    --kdd-surface-soft: var(--kuflik-v3-chalk, #f6f5f1);
    --kdd-surface-strong: var(--kuflik-v3-media, #efe9df);
    --kdd-accent: var(--kuflik-v3-gold-ink, #6f5626);
    --kdd-accent-hover: var(--kuflik-v3-ink, #23272e);
    --kdd-focus: var(--kuflik-v3-gold-ink, #6f5626);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select {
    position: relative;
    z-index: 1;
    display: inline-block;
    inline-size: var(--kdd-control-width, auto);
    max-inline-size: 100%;
    min-inline-size: 0;
    vertical-align: middle;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select.is-open {
    z-index: 1000;
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-catalog-v3 .shop-loop-before:has(.kuflik-desktop-select.is-open) {
    overflow: visible;
  }

  html.kuflik-desktop-dropdowns-on select.kuflik-desktop-select__source {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    min-inline-size: 0 !important;
    min-block-size: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger {
    position: relative;
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 4px 8px 2px;
    color: var(--kdd-ink);
    background: transparent;
    border: 0;
    border-block-end: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-transform: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger:hover,
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger[aria-expanded="true"] {
    color: var(--kdd-accent-hover);
    background: var(--kdd-surface-soft);
    border-block-end-color: var(--kdd-accent);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger:focus-visible,
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option:focus-visible {
    outline: 3px solid var(--kdd-focus);
    outline-offset: 3px;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__value {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select--count .kuflik-desktop-select__value {
    font-variant-numeric: tabular-nums;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__chevron {
    display: inline-block;
    inline-size: 18px;
    block-size: 18px;
    color: currentColor;
    background: currentColor;
    mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select.is-open .kuflik-desktop-select__chevron {
    transform: rotate(180deg);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger:disabled {
    color: var(--kdd-muted);
    cursor: not-allowed;
    opacity: 0.58;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__popover {
    position: absolute;
    z-index: 1001;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: max-content;
    min-inline-size: 100%;
    max-inline-size: min(280px, calc(100vw - 32px));
    padding: 4px 0;
    overflow: hidden;
    color: var(--kdd-ink);
    background: var(--kdd-surface);
    border: 0;
    border-block-start: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 2px;
    box-shadow: var(--kdd-shadow);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__popover[hidden] {
    display: none !important;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select.is-dropup .kuflik-desktop-select__popover {
    inset-block-start: auto;
    inset-block-end: calc(100% + 8px);
    border-block-start-width: 0;
    border-block-end: var(--kdd-hairline) solid var(--kdd-accent);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__listbox {
    max-block-size: min(320px, 52vh);
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--kdd-accent) var(--kdd-surface-soft);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__group {
    padding: 10px 12px 6px;
    color: var(--kdd-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option {
    position: relative;
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 44px;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 11px;
    color: var(--kdd-ink);
    background: transparent;
    border: 0;
    border-inline-start: var(--kdd-hairline) solid transparent;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    text-align: start;
    white-space: normal;
    cursor: pointer;
    outline-offset: -3px;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option::before {
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    content: "";
    background: currentColor;
    opacity: 0;
    mask: url("assets/lucide-0.468/check.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lucide-0.468/check.svg") center / contain no-repeat;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option[aria-selected="true"] {
    color: var(--kdd-ink);
    background: var(--kdd-surface-soft);
    border-inline-start-color: var(--kdd-accent);
    font-weight: 800;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option[aria-selected="true"]::before {
    color: var(--kdd-accent);
    opacity: 1;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option:hover,
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option.is-active {
    color: var(--kdd-accent-hover);
    background: var(--kdd-surface-strong);
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option[aria-disabled="true"] {
    color: var(--kdd-muted);
    cursor: not-allowed;
    opacity: 0.52;
  }

  /* SelectWoo / Select2 keeps its proven searchable behavior and shares the same skin. */
  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-selection--single {
    min-block-size: 50px;
    color: var(--kdd-ink);
    background: transparent;
    border: 0;
    border-block-end: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 0;
    box-shadow: none;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-selection--single .select2-selection__rendered {
    min-block-size: 48px;
    padding: 14px 44px 10px 2px;
    color: var(--kdd-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: grid;
    inline-size: 40px;
    block-size: 48px;
    place-items: center;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-selection--single .select2-selection__arrow::before {
    inline-size: 18px;
    block-size: 18px;
    color: var(--kdd-ink);
    background: currentColor;
    content: "";
    mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--open .select2-selection--single .select2-selection__arrow::before {
    transform: rotate(180deg);
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default.select2-container--focus .select2-selection--single,
  html.kuflik-desktop-dropdowns-on body .select2-container--default.select2-container--open .select2-selection--single {
    background: var(--kdd-surface-soft);
    outline: 3px solid var(--kdd-focus);
    outline-offset: 3px;
  }

  html.kuflik-desktop-dropdowns-on body .select2-dropdown {
    color: var(--kdd-ink);
    background: var(--kdd-surface);
    border: 0;
    border-block-start: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 2px;
    box-shadow: var(--kdd-shadow);
  }

  html.kuflik-desktop-dropdowns-on body .select2-search--dropdown {
    padding: 10px 12px 8px;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-search--dropdown .select2-search__field {
    min-block-size: 44px;
    padding: 9px 2px 8px;
    color: var(--kdd-ink);
    background: var(--kdd-surface);
    border: 0;
    border-block-end: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 0;
    font-size: 16px;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
    outline: 3px solid var(--kdd-focus);
    outline-offset: 2px;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results > .select2-results__options {
    max-block-size: min(320px, 52vh);
    overscroll-behavior: contain;
    scrollbar-color: var(--kdd-accent) var(--kdd-surface-soft);
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option {
    min-block-size: 44px;
    padding: 11px 14px;
    color: var(--kdd-ink);
    background: var(--kdd-surface);
    border-inline-start: var(--kdd-hairline) solid transparent;
    font-size: 14px;
    line-height: 1.45;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option[aria-selected="true"],
  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option[data-selected="true"],
  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option--selected {
    color: var(--kdd-ink);
    background: var(--kdd-surface-soft);
    border-inline-start-color: var(--kdd-accent);
    font-weight: 800;
  }

  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option--highlighted[aria-selected],
  html.kuflik-desktop-dropdowns-on body .select2-container--default .select2-results__option--highlighted[data-selected] {
    color: var(--kdd-accent-hover);
    background: var(--kdd-surface-strong);
  }

  /* A newer product-detail adapter may already own the behavior; only its desktop skin changes. */
  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select__trigger {
    min-block-size: 50px;
    padding: 11px 4px 9px 2px;
    color: var(--kdd-ink);
    background: transparent;
    border: 0;
    border-block-end: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    text-transform: none;
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select__trigger:hover,
  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select[data-open="true"] .kuflik-product-select__trigger {
    color: var(--kdd-accent-hover);
    background: var(--kdd-surface-soft);
    border-block-end-color: var(--kdd-accent);
    box-shadow: none;
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select__icon {
    display: none;
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select__trigger::after {
    inline-size: 18px;
    block-size: 18px;
    color: currentColor;
    background: currentColor;
    content: "";
    mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lucide-0.468/chevron-down.svg") center / contain no-repeat;
  }

  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select[data-open="true"] .kuflik-product-select__trigger::after {
    transform: rotate(180deg);
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__popover {
    inset-block-start: calc(100% + 8px);
    padding: 4px 0;
    background: var(--kdd-surface);
    border-block-start: var(--kdd-hairline) solid var(--kdd-accent);
    border-radius: 2px;
    box-shadow: var(--kdd-shadow);
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__listbox {
    border-radius: 0;
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option {
    display: grid;
    min-block-size: 44px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 14px 10px 11px;
    color: var(--kdd-ink);
    background: transparent;
    border-inline-start: var(--kdd-hairline) solid transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option::before {
    inline-size: 16px;
    block-size: 16px;
    content: "";
    background: currentColor;
    opacity: 0;
    mask: url("assets/lucide-0.468/check.svg") center / contain no-repeat;
    -webkit-mask: url("assets/lucide-0.468/check.svg") center / contain no-repeat;
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option[aria-selected="true"] {
    color: var(--kdd-ink);
    background: var(--kdd-surface-soft);
    border-inline-start-color: var(--kdd-accent);
    font-weight: 800;
    text-decoration: none;
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option[aria-selected="true"]::before {
    color: var(--kdd-accent);
    opacity: 1;
  }

  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option.is-active,
  html.kuflik-desktop-dropdowns-on :is(body.kuflik-product-detail-v2, body.kuflik-cart-checkout-v1) .kuflik-product-select__option:hover {
    color: var(--kdd-accent-hover);
    background: var(--kdd-surface-strong);
    box-shadow: inset 0 0 0 3px var(--kdd-focus);
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger {
    transition-property: color, background-color, border-color, scale;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger:active {
    scale: 0.96;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__chevron,
  html.kuflik-desktop-dropdowns-on body .select2-selection__arrow::before,
  html.kuflik-desktop-dropdowns-on body.kuflik-product-detail-v2 .kuflik-product-select__trigger::after {
    transition-property: transform;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option,
  html.kuflik-desktop-dropdowns-on body .select2-results__option {
    transition-property: color, background-color;
    transition-duration: 100ms;
    transition-timing-function: ease-out;
  }
}

@media (min-width: 992px) and (forced-colors: active) {
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__trigger,
  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__popover,
  html.kuflik-desktop-dropdowns-on body .select2-selection--single,
  html.kuflik-desktop-dropdowns-on body .select2-dropdown {
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  html.kuflik-desktop-dropdowns-on .kuflik-desktop-select__option[aria-selected="true"],
  html.kuflik-desktop-dropdowns-on body .select2-results__option[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}