.xo-modal-pickup {
  --gap: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.xo-modal-pickup__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--width);
  max-width: calc(100vw - var(--gap) * 2);
  max-height: var(--height);
  background-color: rgba(var(--color-background));
  pointer-events: auto;
}

.xo-modal-pickup__inner--full-height {
  height: 100dvh;
  max-height: 100dvh;
}

.xo-modal-pickup__inner--full-width {
  width: 100vw;
  max-width: 100vw;
}

.xo-modal-pickup__header {
  position: relative;
  min-height: var(--header-height);
  border-bottom: solid 0.1rem rgba(var(--color-foreground), 0.1);
}

.xo-modal-pickup__product {
  display: flex;
  gap: 1.5rem;
}

.xo-modal-pickup__text .xo-product-info-content__header-variant {
  font-size: calc(var(--font-body-scale) * 1.4rem);
  line-height: calc(1 + 0.5 / var(--font-body-scale));
}
.xo-modal-pickup__text .xo-price__item {
  font-size: 1.4rem;
}
.xo-modal-pickup__text .xo-price__item--del {
  font-size: 1.2rem;
}

.xo-modal-pickup__title {
  font-size: calc(var(--font-heading-scale) * 1.6rem);
  line-height: calc(1 + 0.2 / var(--font-heading-scale));
  margin-bottom: 0.5rem;
}

.xo-modal-pickup__close {
  cursor: pointer;
  position: absolute;
  top: 1rem;
}
[dir=ltr] .xo-modal-pickup__close {
  right: 1rem;
}
[dir=rtl] .xo-modal-pickup__close {
  left: 1rem;
}
.xo-modal-pickup__close button {
  all: unset;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: 0.3s;
}
.xo-modal-pickup__close svg {
  color: rgba(var(--color-foreground));
  line-height: 0;
}

.xo-modal-pickup__close:hover button {
  background-color: rgba(var(--color-foreground));
  rotate: 180deg;
}
.xo-modal-pickup__close:hover svg {
  color: rgba(var(--color-background));
}

.xo-modal-pickup__close--abs {
  position: absolute;
  top: 1.5rem;
  transition: all 0.5s ease;
  line-height: calc(1 + 0 / var(--font-heading-scale));
  display: inline-block;
}
[dir=ltr] .xo-modal-pickup__close--abs {
  right: 1.5rem;
}
[dir=rtl] .xo-modal-pickup__close--abs {
  left: 1.5rem;
}
.xo-modal-pickup__close--abs:hover {
  transform-origin: center;
  transform: rotate(180deg);
}

.xo-modal-pickup__body {
  width: 100%;
  height: 100%;
}

.xo-modal-pickup__footer {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--footer-height);
}
.xo-modal-pickup__footer > * {
  width: 100%;
}

.xo-modal-pickup__separator {
  width: 100%;
  height: 0.1rem;
  transition: 0.3s ease calc(var(--xo-duration) * 1ms);
}

xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) {
  --xo-backdrop-color: rgba(var(--color-foreground), var(--modal-backdrop-opacity));
  --xo-backdrop-blur: var(--modal-backdrop-blur);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup {
  padding: var(--modal-margin);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__product {
  padding: var(--modal-padding);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__inner {
  border: var(--modal-border-width) solid rgba(var(--color-foreground), var(--modal-border-opacity));
  border-radius: var(--modal-corner-radius);
  box-shadow: var(--modal-shadow-horizontal-offset) var(--modal-shadow-vertical-offset) var(--modal-shadow-blur-radius) rgba(var(--color-foreground), var(--modal-shadow-opacity));
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__inner--full-height {
  height: calc(100dvh - var(--modal-margin) * 2);
  max-height: calc(100dvh - var(--modal-margin) * 2);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__inner--full-width {
  width: calc(100vw - var(--modal-margin) * 2);
  max-width: calc(100vw - var(--modal-margin) * 2);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__content {
  padding: var(--modal-padding);
}
xo-modal:not([xo-placement*=top-], [xo-placement*=bottom-]) .xo-modal-pickup__footer {
  padding: 0 var(--modal-padding);
}
xo-modal[xo-placement*=-left], xo-modal[xo-placement*=-right] {
  --xo-backdrop-color: rgba(var(--color-foreground), var(--drawer-backdrop-opacity));
  --xo-backdrop-blur: var(--drawer-backdrop-blur);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup, xo-modal[xo-placement*=-right] .xo-modal-pickup {
  padding: var(--drawer-margin);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__product, xo-modal[xo-placement*=-right] .xo-modal-pickup__product {
  padding: var(--drawer-padding);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__inner, xo-modal[xo-placement*=-right] .xo-modal-pickup__inner {
  border: var(--drawer-border-width) solid rgba(var(--color-foreground), var(--drawer-border-opacity));
  border-radius: var(--drawer-corner-radius);
  box-shadow: var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-foreground), var(--drawer-shadow-opacity));
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__inner--full-height, xo-modal[xo-placement*=-right] .xo-modal-pickup__inner--full-height {
  height: calc(100dvh - var(--drawer-margin) * 2);
  max-height: calc(100dvh - var(--drawer-margin) * 2);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__inner--full-width, xo-modal[xo-placement*=-right] .xo-modal-pickup__inner--full-width {
  width: calc(100vw - var(--drawer-margin) * 2);
  max-width: calc(100vw - var(--drawer-margin) * 2);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__content, xo-modal[xo-placement*=-right] .xo-modal-pickup__content {
  padding: var(--drawer-padding);
}
xo-modal[xo-placement*=-left] .xo-modal-pickup__footer, xo-modal[xo-placement*=-right] .xo-modal-pickup__footer {
  padding: 0 var(--drawer-padding);
}