:where(form.variations_form, #prk-variation-prompt) .prk-variation-field--custom-select { position: relative; width: 100%; min-width: min(220px, calc(100vw - 32px)); } :where(form.variations_form, #prk-variation-prompt) select.prk-variation-native-select--enhanced { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select { --prk-var-select-accent: var( --prk-color-primary, var(--prk-primary-color, #ff650b) ); position: relative; width: 100%; min-width: min(220px, calc(100vw - 32px)); direction: rtl; font: inherit; z-index: 12; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select.is-open { z-index: 80; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 46px; padding: 8px 13px 8px 11px; border: 1px solid #e0e0e2; border-radius: 10px; outline: 0; background: #fff; color: #3f4064; font: inherit; font-size: 13px; font-weight: 600; line-height: 22px; text-align: right; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; -webkit-tap-highlight-color: transparent; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger:hover { border-color: #c7c7cc; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger:focus-visible, :where(form.variations_form, #prk-variation-prompt) .prk-variation-select.is-open .prk-variation-select__trigger { border-color: var(--prk-var-select-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prk-var-select-accent) 12%, transparent); } @supports not (color: color-mix(in srgb, #000 10%, transparent)) { :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger:focus-visible, :where(form.variations_form, #prk-variation-prompt) .prk-variation-select.is-open .prk-variation-select__trigger { box-shadow: 0 0 0 2px rgba(255, 101, 11, .12); } } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: prk-font !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select:not(.has-value) .prk-variation-select__value { color: #81858b; font-weight: 500; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__chevron { flex: 0 0 auto; color: #81858b; transition: transform .18s ease, color .18s ease; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select.is-open .prk-variation-select__chevron { color: var(--prk-var-select-accent); transform: rotate(180deg); } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__panel { position: absolute; top: calc(100% + 7px); right: 0; left: auto; width: max(100%, 220px); min-width: 220px; max-width: min(340px, calc(100vw - 24px)); padding: 8px; border: 1px solid #e6e6e8; border-radius: 12px; background: #fff; box-shadow: 0 12px 35px rgba(35, 37, 44, 0.13), 0 2px 8px rgba(35, 37, 44, 0.06); overflow: hidden; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__panel[hidden] { display: none !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search-wrap { position: relative; display: flex; align-items: center; margin-bottom: 7px; color: #a1a3a8; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search-wrap[hidden] { display: none !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search-wrap > svg { position: absolute; right: 11px; pointer-events: none; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search { width: 100%; height: 40px; padding: 7px 37px 7px 11px; border: 1px solid #e0e0e2; border-radius: 9px; outline: 0; background: #f8f8f9; color: #23254e; font: inherit; font-size: 12px; line-height: 22px; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search::placeholder { color: #a1a3a8; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__search:focus { border-color: var(--prk-var-select-accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--prk-var-select-accent) 10%, transparent); } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__list { display: flex; flex-direction: column; gap: 2px; max-height: 286px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7c7cc transparent; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__list::-webkit-scrollbar { width: 6px; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__list::-webkit-scrollbar-thumb { border-radius: 999px; background: #c7c7cc; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; outline: 0; background: transparent; color: #3f4064; font: inherit; font-size: 13px; font-weight: 500; line-height: 22px; text-align: right; cursor: pointer; transition: background-color .15s ease, color .15s ease; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option:hover, :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option:focus-visible { background: #f5f5f6; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option.is-selected { background: #f5f5f6; color: var(--prk-var-select-accent); font-weight: 700; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option.is-placeholder { color: #81858b; font-weight: 500; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option.is-disabled { color: #b8b8bd; cursor: not-allowed; opacity: .7; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option.is-disabled:hover, :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option.is-disabled:focus-visible { background: transparent; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option[hidden] { display: none !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__option-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'prk-font' !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__check { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--prk-var-select-accent); } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__empty { padding: 14px 10px; color: #81858b; font-size: 12px; line-height: 22px; text-align: center; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__empty[hidden] { display: none !important; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select.is-disabled .prk-variation-select__trigger, :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger:disabled { border-color: #ececee; background: #f7f7f8; color: #a1a3a8; cursor: not-allowed; } @media (max-width: 767px) { :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__trigger { min-height: 44px; font-size: 12px; } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__panel { max-height: min(420px, 55vh); } :where(form.variations_form, #prk-variation-prompt) .prk-variation-select__list { max-height: min(310px, 42vh); } } @media (max-width: 1023px) { body.single-product .pr-sticky.prk-variation-select-layer-open { z-index: 120 !important; overflow: visible !important; } body.single-product .pr-sticky.prk-variation-select-layer-open .prk-variation-select.is-open { z-index: 121; } }