/* ════════════════════════════════════════════════════════════════════════════
   DROP UI — all drop styles. Values mirror the existing site exactly:
   glass:    rgba(70,14,42,0.55) + blur(24px) + 1px rgba(255,212,239,0.10) + 14px
   solid:    #2e0921
   text:     #ffd4ef, reduced alpha for secondary
   hairline: 1px solid rgba(255,212,239,0.15)
   curve:    cubic-bezier(0.22, 1, 0.36, 1)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── homepage fade (checkout takes over) ──
   #player keeps its width/height curves so the size animation isn't lost while
   the class is on; drop.js removes .drop-fading again after un-dimming so drag
   and resize behave exactly as before. #mobile-player is never faded — it is
   the only mobile play control. */
#player.drop-fading {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#bottom-ui.drop-fading {
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#player.drop-hidden,
#bottom-ui.drop-hidden {
  opacity: 0;
  pointer-events: none;
}

/* a size-cycle during the 560ms un-dim window must keep its stock left/top
   animation — this wins specificity over both #player.resizing (inline
   stylesheet) and #player.drop-fading above */
#player.resizing.drop-fading {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── panels ── */
.drop-panel {
  position: fixed;
  z-index: 10000;               /* above #player (9999) and #bottom-ui (9998) */
  color: #ffd4ef;
  font-family: 'Perandory', 'Georgia', serif;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.drop-panel.drop-visible { opacity: 1; }
/* A panel fading out is invisible but would still take clicks and focus,
   letting a buyer hit buttons on a panel they cannot see during the 560ms
   swap. */
.drop-panel:not(.drop-visible) { pointer-events: none; }

.drop-glass {
  background: rgba(70, 14, 42, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 212, 239, 0.10);
  border-radius: 14px;
}

.drop-solid {
  background: #2e0921;
  border: 1px solid rgba(255, 212, 239, 0.10);
  border-radius: 14px;
}

/* ── popup / closed card ── */
.drop-popup {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

.drop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 212, 239, 0.45);
  background: rgba(70, 14, 42, 0.55);
  color: rgba(255, 212, 239, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.drop-x:hover { color: #ffd4ef; border-color: rgba(255, 212, 239, 0.75); }

.drop-figure {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* short viewports: crop the image instead of burying the product info */
  max-height: 56vh;
  max-height: 56dvh;
  background: rgba(255, 212, 239, 0.06);
  overflow: hidden;
}
.drop-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drop-popup-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── type ── */
.drop-kicker {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(255, 212, 239, 0.55);
}

.drop-name {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

.drop-price {
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.06em;
}

.drop-muted {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(255, 212, 239, 0.70);
}

.drop-countline {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(255, 212, 239, 0.85);
  white-space: nowrap;
}
.drop-count { font-variant-numeric: tabular-nums; }

.drop-fine {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255, 212, 239, 0.55);
  margin-top: 8px;
}
.drop-mail {
  color: inherit;
  text-decoration-color: rgba(255, 212, 239, 0.4);
}
.drop-mail:hover { color: #ffd4ef; }

/* ── buttons ── */
.drop-btn {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 212, 239, 0.95);
  color: #0c0208;
  font-family: 'Perandory', 'Georgia', serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.10em;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease;
}
.drop-btn:hover:not(:disabled) { background: #ffd4ef; }
.drop-btn:disabled {
  background: rgba(255, 212, 239, 0.35);
  cursor: not-allowed;
}

/* ── checkout / confirmed (full screen) ── */
.drop-checkout,
.drop-confirmed {
  inset: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.drop-checkout-col {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.drop-checkout-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 14px;
  background: #2e0921;
  border-bottom: 1px solid rgba(255, 212, 239, 0.15);
}

.drop-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255, 212, 239, 0.70);
  font-family: 'Perandory', 'Georgia', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.10em;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}
.drop-back:hover { color: #ffd4ef; }

.drop-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 212, 239, 0.15);
}

.drop-label {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 212, 239, 0.55);
  margin-bottom: 12px;
}

/* size chips */
.drop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drop-chip {
  min-width: 52px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255, 212, 239, 0.35);
  border-radius: 8px;
  color: rgba(255, 212, 239, 0.85);
  font-family: 'Perandory', 'Georgia', serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.drop-chip:hover { border-color: rgba(255, 212, 239, 0.6); }
.drop-chip.selected {
  background: rgba(255, 212, 239, 0.95);
  border-color: rgba(255, 212, 239, 0.95);
  color: #0c0208;
}

/* one row per size: label on the left, stepper on the right */
.drop-sizes {
  display: flex;
  flex-direction: column;
}
.drop-sizerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 212, 239, 0.15);
}
.drop-sizerow:last-child { border-bottom: none; }

.drop-sizelabel {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.10em;
  color: #ffd4ef;
  min-width: 3em;
}

/* running order summary under the size rows */
.drop-order-summary {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(255, 212, 239, 0.70);
}

/* quantity */
.drop-qty {
  display: flex;
  align-items: center;
  gap: 18px;
}
.drop-qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 212, 239, 0.45);
  background: transparent;
  color: rgba(255, 212, 239, 0.85);
  font-family: 'Perandory', 'Georgia', serif;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease;
}
.drop-qty-btn:hover { border-color: rgba(255, 212, 239, 0.75); }
.drop-qty-num {
  min-width: 28px;
  text-align: center;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* fields — transparent, bottom rule only */
.drop-field {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 212, 239, 0.35);
  border-radius: 0;
  color: #ffd4ef;
  font-family: 'Perandory', 'Georgia', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 8px 0 9px;
  outline: none;
}
.drop-field::placeholder { color: rgba(255, 212, 239, 0.45); }
.drop-field:focus { border-bottom-color: rgba(255, 212, 239, 0.80); }
.drop-field:disabled {
  color: rgba(255, 212, 239, 0.45);
  cursor: not-allowed;
}
/* autofill — opaque patch only on the solid panels; the glass panels get the
   site's translucent treatment (matches #email-input in index.html) */
.drop-field:-webkit-autofill,
.drop-field:-webkit-autofill:hover,
.drop-field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 212, 239, 0.08) inset;
  -webkit-text-fill-color: #ffd4ef;
  caret-color: #ffd4ef;
  transition: background-color 5000s ease-in-out 0s;
}
.drop-solid .drop-field:-webkit-autofill,
.drop-solid .drop-field:-webkit-autofill:hover,
.drop-solid .drop-field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2e0921 inset;
}

.drop-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffd4ef' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 18px;
}
.drop-select option {
  background: #2e0921;
  color: #ffd4ef;
}

.drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.drop-span2 { grid-column: 1 / -1; }

/* summary */
.drop-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 4px 0;
}
.drop-row span:first-child { color: rgba(255, 212, 239, 0.70); }
.drop-row-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 212, 239, 0.15);
  font-weight: 600;
  font-size: 18px;
}
.drop-row-total span:first-child { color: #ffd4ef; }

/* Stripe element mounts — the iframes size themselves; these only reserve
   space so the panel does not jump as they load. */
[data-drop-payment-mount],
[data-drop-address-mount] {
  min-height: 44px;
}

/* payment / validation errors */
.drop-error {
  color: #ff9db4;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.drop-error[hidden] { display: none; }

/* pay area */
.drop-paywrap {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* confirmed */
.drop-confirm-head { padding-top: 28px; }
/* Big enough to screenshot, but a real PaymentIntent id is ~27 characters —
   it must wrap rather than run off the panel, because this is the string
   people quote back when they email asking where their order is. */
/* Monospace on purpose: Perandory draws lowercase as small caps, and the
   Stripe id is case-sensitive — a buyer reading it off the screen must be
   able to see which letters are capitals. It is also a button: tap to copy. */
.drop-ordernum {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: #ffd4ef;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  font-weight: 600;
  font-size: clamp(18px, 3.4vw, 26px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.drop-ordernum:hover { color: #ffffff; }

.drop-copy-hint {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255, 212, 239, 0.45);
  margin-top: 6px;
}
.drop-shipsby-big {
  font-size: 18px;
  letter-spacing: 0.08em;
  color: rgba(255, 212, 239, 0.9);
}

/* closed — email capture (NOT wired to an endpoint yet) */
.drop-capture {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.drop-capture .drop-field { flex: 1; }
.drop-capture-btn {
  background: transparent;
  border: none;
  padding: 4px;
  color: rgba(255, 212, 239, 0.55);
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease, transform 0.3s ease;
}
.drop-capture-btn:hover {
  color: rgba(255, 212, 239, 0.95);
  transform: translateX(2px);
}

/* ════ mobile — every panel stops above the docked player so music stays
   controllable. Breakpoints mirror the existing site exactly. ════ */
@media (max-width: 768px), (max-height: 500px) {
  /* the popup and #bottom-ui share the space above the docked player, and
     backdrop-filter does not reliably blur sibling fixed elements — fade the
     stack out while any drop panel is up (desktop keeps it: no overlap) */
  #bottom-ui.drop-popup-up {
    opacity: 0;
    pointer-events: none;
  }

  .drop-popup {
    left: 50%;
    top: auto;
    bottom: calc(72px + env(safe-area-inset-bottom) + 12px);
    transform: translateX(-50%);
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100vh - 72px - 24px);
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom) - 24px);
  }
  /* keep name, price, countdown and Purchase above the fold on short phones */
  .drop-popup .drop-figure {
    max-height: 40vh;
    max-height: 40dvh;
  }

  .drop-checkout,
  .drop-confirmed {
    inset: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom) + 8px);
  }
  .drop-checkout-col { padding: 0 16px 32px; }
}

/* landscape phone — the docked player shrinks to 56px, and there is no room
   for a 4:5 image at all: the product info is the point */
@media (max-height: 500px) and (orientation: landscape) {
  .drop-popup {
    bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
    max-height: calc(100vh - 56px - 16px);
    max-height: calc(100dvh - 56px - env(safe-area-inset-bottom) - 16px);
  }
  .drop-popup .drop-figure { display: none; }
  .drop-checkout,
  .drop-confirmed {
    bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
  }
}

/* ── reduced motion — nothing in the drop layer animates ── */
@media (prefers-reduced-motion: reduce) {
  .drop-panel,
  .drop-btn,
  .drop-chip,
  .drop-x,
  .drop-back,
  .drop-qty-btn,
  .drop-capture-btn,
  #player.drop-fading,
  #bottom-ui.drop-fading {
    transition: none;
  }
  .drop-capture-btn:hover { transform: none; }
}