/* Quick order window (Rev. October 2026), Order Online menu.
   Built by assets/js/quick-order.js. The options inside are the product
   page's own (product-options.css), so they look and work the same.
   Desktop: centered window. Phones: sheet that slides up from the bottom. */

html:has(.rr-quick[open]) { overflow: hidden; } /* page stays put behind the window */

.rr-quick {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 2 * var(--frame-inset)));
  max-height: calc(100vh - 2 * var(--frame-inset));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--cream);
  color: var(--espresso-text);
  box-shadow: var(--shadow-dark);
  overflow: auto;
}
.rr-quick::backdrop { background: color-mix(in srgb, var(--espresso) 55%, transparent); }
.rr-quick[open] { animation: rr-quick-in 0.2s ease; }
@keyframes rr-quick-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rr-quick__inner { position: relative; }
.rr-quick__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--espresso) 15%, transparent);
  border-radius: 50%;
  background: var(--cream);
  color: var(--espresso);
  font: 400 26px/1 var(--font-archivo);
  cursor: pointer;
}
.rr-quick__media { aspect-ratio: 16 / 9; background: var(--wheat); overflow: hidden; }
.rr-quick__media[hidden] { display: none; }
.rr-quick__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.rr-quick__body { padding: 20px 22px 22px; }
.rr-quick__media[hidden] + .rr-quick__body { padding-top: 60px; }
.rr-quick__title {
  margin: 0 0 4px;
  padding-right: 44px;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--espresso);
}
.rr-quick__price { margin: 0 0 6px; font: 800 18px/1.2 var(--font-archivo); color: var(--terracotta); }
.rr-quick__price del { opacity: 0.6; font-weight: 600; margin-right: 4px; }
.rr-quick__price ins { text-decoration: none; }
.rr-quick__desc { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.rr-quick__desc[hidden] { display: none; }
.rr-quick__loading { margin: 12px 0; color: var(--espresso-text); }
.rr-quick__form form.cart { margin: 0; }
.rr-quick__error:not([hidden]) {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--soft-terracotta);
  color: var(--terracotta-dark);
  font: 600 14px/1.4 var(--font-archivo);
}
.rr-quick__full {
  display: inline-block;
  margin-top: 16px;
  color: var(--terracotta-dark);
  font: 600 14px/1.3 var(--font-archivo);
  text-underline-offset: 3px;
}
.rr-quick .single_add_to_cart_button.is-busy { opacity: 0.6; pointer-events: none; }

/* Phones: bottom sheet */
@media (max-width: 600px) {
  .rr-quick {
    width: 100vw;
    max-width: 100vw;
    max-height: 88vh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .rr-quick[open] { animation-name: rr-quick-up; }
  @keyframes rr-quick-up { from { transform: translateY(100%); } to { transform: none; } }
  .rr-quick__media { aspect-ratio: 2 / 1; }
  .rr-quick__body { padding: 16px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-quick[open] { animation: none; }
}