.check-dropdown { position: relative; margin-top: 6px; } .check-dropdown summary { list-style: none; min-height: 42px; padding: 11px 12px; border: 1px solid #dce2df; border-radius: 8px; background: white; color: var(--ink); font: 500 13px "DM Sans"; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .check-dropdown summary::-webkit-details-marker { display: none; } .check-dropdown[open] summary { outline: 2px solid #b6d9ca; border-color: var(--green); border-radius: 8px 8px 0 0; } .dropdown-arrow { font-size: 17px; transition: transform .15s; } .check-dropdown[open] .dropdown-arrow { transform: rotate(180deg); } .check-options { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; display: grid; grid-template-columns: repeat(3, 1fr); background: white; border: 1px solid #b9cac3; border-top: 0; border-radius: 0 0 9px 9px; box-shadow: 0 14px 30px rgba(24,48,39,.14); max-height: 245px; overflow: auto; padding: 8px; } .check-options label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #43534d; } .check-options label:hover { background: #edf5f1; } .check-options input { position: absolute; opacity: 0; pointer-events: none; } .checkmark { width: 18px; height: 18px; border: 1px solid #bdc9c4; border-radius: 5px; display: grid; place-items: center; color: transparent; font-size: 11px; background: #fff; } .check-options input:checked + .checkmark { background: var(--green); border-color: var(--green); color: white; } .check-options input:focus + .checkmark { outline: 2px solid #b6d9ca; } .bulk-stock-picker { border: 1px solid #dce2df; border-radius: 9px; overflow: hidden; background: #fafcfb; } .bulk-picker-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e3e8e5; color: #52605b; font-size: 11px; font-weight: 700; } .bulk-picker-head b { border-radius: 99px; padding: 4px 8px; background: #e3eee9; color: var(--green); font-size: 9px; } .bulk-picker-placeholder { padding: 25px 14px; color: #89948f; text-align: center; font-size: 11px; } .bulk-size-group { max-height: 265px; overflow-y: auto; padding: 5px 11px; } .bulk-size-row { display: grid; grid-template-columns: 1fr 105px; gap: 14px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #e9eeeb; } .bulk-size-row:last-child { border-bottom: 0; } .bulk-size-check { display: flex; align-items: center; gap: 10px; cursor: pointer; } .bulk-size-check > input { position: absolute; opacity: 0; pointer-events: none; } .bulk-size-check input:checked + .checkmark { background: var(--green); border-color: var(--green); color: white; } .bulk-size-check input:focus + .checkmark { outline: 2px solid #b6d9ca; } .bulk-size-check strong, .bulk-size-check small { display: block; } .bulk-size-check strong { color: #33463f; font-size: 12px; } .bulk-size-check small { color: #89948f; font-size: 9px; margin-top: 2px; font-weight: 500; } .bulk-quantity { text-align: right; font-size: 9px; } .bulk-quantity input { margin-top: 3px; padding: 8px 9px; text-align: right; } .bulk-quantity input:disabled { background: #eef1ef; color: #adb5b1; } @media (max-width: 760px) { .check-options { grid-template-columns: repeat(2, 1fr); } .bulk-size-row { grid-template-columns: 1fr 90px; } }