@charset "UTF-8";

:root {
    --drawer-width: 400px
}

.drawer {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    height: 100%;
    width: 100%;
    max-width: var(--drawer-width);
    top: 0;
    right: 0;
    visibility: hidden;
    transition: visibility 0s .3s
}

.drawer:focus {
    outline: none
}

.drawer--is-visible {
    visibility: visible;
    transition: none
}

.drawer--open-left {
    right: auto;
    left: 0
}

.drawer__content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform .3s;
    transition-timing-function: var(--ease-in-out)
}

.drawer--open-left .drawer__content {
    transform: translateX(-100%)
}

.drawer--is-visible .drawer__content {
    transform: translateX(0)
}

.drawer__body {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch
}

.drawer__close-btn {
    --size: 32px;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), 0.95);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: .2s
}

.drawer__close-btn:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md)
}

.drawer__close-btn .icon {
    display: block;
    color: var(--color-contrast-high)
}

.drawer--modal {
    max-width: none;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background-color .3s, visibility 0s .3s
}

.drawer--modal.drawer--is-visible {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.75);
    transition: background-color .3s
}

.drawer--modal.drawer--open-left .drawer__content {
    right: auto;
    left: 0
}

.drawer--modal .drawer__content {
    max-width: var(--drawer-width)
}

:root {
    --select-icon-size: 16px;
    --select-icon-right-margin: var(--space-sm);
    --select-text-icon-gap: var(--space-3xs)
        /* gap between text and icon */
}

.select {
    position: relative
}

.select__input {
    width: 100%;
    height: 100%;
    padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important;
    -webkit-user-select: none;
    user-select: none
}

.select__icon {
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    right: var(--select-icon-right-margin);
    top: 50%;
    transform: translateY(-50%)
}

:root {
    --select-dropdown-gap: 4px
        /* distance between select control and custom dropdown */
}

.select__button {
    width: 100%
}

.select__button[aria-expanded=true] {}

.select__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    max-height: 1px;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    padding: var(--space-3xs) 0;
    border-radius: var(--radius-md);
    z-index: var(--z-index-popover, 5);
    margin-top: var(--select-dropdown-gap);
    margin-bottom: var(--select-dropdown-gap);
    overflow: auto;
    font-size: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.select__dropdown--right {
    right: 0;
    left: auto
}

.select__dropdown--up {
    bottom: 100%;
    top: auto
}

.select__button[aria-expanded=true]+.select__dropdown {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.select__list {
    list-style: none !important
}

.select__list:not(:first-of-type) {
    padding-top: var(--space-2xs)
}

.select__list:not(:last-of-type) {
    border-bottom: 1px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    padding-bottom: var(--space-2xs)
}

.select__item {
    display: flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--color-contrast-high);
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.select__item--optgroup {
    font-size: .8125rem;
    color: var(--color-contrast-medium)
}

.select__item--option {
    cursor: pointer;
    transition: .2s
}

.select__item--option:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}

.select__item--option:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15)
}

.select__item--option[aria-selected=true] {
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative
}

.select__item--option[aria-selected=true]::after {
    content: "";
    display: block;
    height: 1em;
    width: 1em;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBvbHlsaW5lIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlPScjZmZmZmZmJyBmaWxsPSdub25lJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHBvaW50cz0nMSw5IDUsMTMgMTUsMyAnLz48L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBvbHlsaW5lIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlPScjZmZmZmZmJyBmaWxsPSdub25lJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHBvaW50cz0nMSw5IDUsMTMgMTUsMyAnLz48L3N2Zz4=)
}

.select__item--option[aria-selected=true]:focus {
    box-shadow: inset 0 0 0 2px var(--color-primary-dark)
}

.select__item--option[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.dr-cart__product {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm) 0
}

.dr-cart__product:not(:last-child) {
    border-bottom: 1px solid var(--color-contrast-lower)
}

.dr-cart__img {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: .2s
}

.dr-cart__img img {
    display: block
}

.dr-cart__img:hover {
    opacity: .85
}

.dr-cart__select {
    --select-icon-size: 0.85em;
    --select-icon-right-margin: var(--space-2xs);
    font-size: .875em;
    width: 3.6em
}

.dr-cart__select .select__input {
    padding: var(--space-4xs) var(--space-3xs)
}

.dr-cart__remove-btn {
    font-size: var(--text-sm);
    color: var(--color-primary);
    cursor: pointer
}

.dr-cart__remove-btn:hover {
    text-decoration: underline
}

.dr-cart__remove-btn:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}