/* ============================================================
   EVALD — order dialog
   A native <dialog>: photos on the left, a four-field order form on
   the right, handed off to WhatsApp or email. Its own file because
   nothing else on the page uses it.
   ============================================================ */

.order {
  display: flex;
  width: min(1040px, 100vw - 1.5rem);
  max-width: none;
  max-height: min(760px, 100vh - 1.5rem);
  max-height: min(760px, 100dvh - 1.5rem);
  /* the global `* { margin: 0 }` reset wipes out the UA stylesheet's
     `margin: auto`, which is what centres a modal dialog */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--ivory);
  color: var(--ink);
  overflow: hidden;
}
/* an author `display` on the dialog beats the UA's
   `dialog:not([open]) { display: none }` no matter the specificity, which
   leaves the closed dialog sitting in normal flow at the end of the page */
.order:not([open]) { display: none; }

.order::backdrop {
  background: rgba(11, 20, 6, .68);
  backdrop-filter: blur(3px);
}

/* the browser paints a closed dialog as display:none, so the open state
   is the only one that animates */
.order[open] {
  animation: order-in .45s var(--ease-out) both;
}
.order[open]::backdrop {
  animation: order-fade .45s var(--ease-out) both;
}
@keyframes order-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes order-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .order[open], .order[open]::backdrop { animation: none; }
}

/* stacked on phones (photo above the form), side by side from 860px.
   The form is the only scrolling part, so the dialog itself never grows
   past its max-height and nothing gets clipped. */
.order-inner {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  /* a flex item will not shrink below its own min-content width unless
     told to, and the form's min-content is wider than a phone */
  min-width: 0;
  min-height: 0;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}
@media (min-width: 860px) {
  .order-inner {
    grid-template-columns: 42% 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
}

/* ---------- close ---------- */

.order-close {
  position: absolute;
  z-index: 3;
  top: .75rem;
  right: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(228, 242, 221, .86);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.order-close:hover { background: var(--sand); transform: rotate(90deg); }
.order-close svg { width: 18px; height: 18px; }

/* ---------- gallery ---------- */

.order-gallery {
  position: relative;
  overflow: hidden;
  background: var(--ivory-2);
}
/* the slides are taken out of flow so their height always resolves
   against the gallery box — left in flow, a 900x1350 photo sizes itself
   from its own aspect ratio and spills over the form below it */
.order-slides {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.order-slide.is-active { opacity: 1; pointer-events: auto; }
.order-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 859px) {
  .order-gallery { height: clamp(130px, 24dvh, 220px); }
}

.order-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(228, 242, 221, .8);
  backdrop-filter: blur(4px);
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s var(--ease-out), background-color .3s var(--ease-out);
}
.order-arrow svg { width: 18px; height: 18px; }
.order-arrow--prev { left: .6rem; }
.order-arrow--next { right: .6rem; }
.order-arrow:hover { background: var(--sand); }
.order-gallery:hover .order-arrow,
.order-arrow:focus-visible { opacity: 1; }
/* no hover on touch, so the arrows have to stay put there */
@media (hover: none) {
  .order-arrow { opacity: 1; }
}

.order-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .85rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-dot {
  width: 22px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(23, 34, 16, .22);
  cursor: pointer;
  transition: background-color .3s var(--ease-out);
}
.order-dot:hover { background: rgba(23, 34, 16, .4); }
.order-dot.is-active { background: var(--gold-deep); }

/* ---------- form ---------- */

.order-form {
  min-height: 0;
  min-width: 0;
  padding: 1.5rem 1.25rem 1.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-family: var(--font-sans);
}
@media (min-width: 860px) {
  .order-form { padding: 2.25rem 2.25rem 2rem; }
}

.order-eyebrow {
  margin: 0 0 .35rem;
  color: var(--gold-deep);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.order-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.order-sub {
  margin: .5rem 0 1.35rem;
  max-width: 46ch;
  color: var(--earth);
  font-size: .9375rem;
  line-height: 1.5;
}
.order-sub a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-field { margin-bottom: .9rem; }
.order-field label {
  display: block;
  margin-bottom: .3rem;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.order-select { position: relative; }
.order-select svg {
  position: absolute;
  top: 50%;
  right: .9rem;
  width: 18px;
  height: 18px;
  color: var(--earth);
  transform: translateY(-50%);
  pointer-events: none;
}

.order-field select,
.order-field input {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--sand-deep);
  border-radius: .5rem;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.order-field select {
  padding-right: 2.6rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.order-field select:focus-visible,
.order-field input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(90, 163, 52, .18);
}
.order-field input.is-invalid { border-color: #b4453a; }

.order-help {
  margin: .35rem 0 0;
  color: var(--earth);
  font-size: .78rem;
  line-height: 1.4;
}

/* ---------- totals ---------- */

/* how many more bottles buy the next bracket, or how far the flat
   maximum is — the only place the discount rules surface as words */
.order-nudge {
  margin: -.2rem 0 .9rem;
  padding: .5rem .7rem;
  border-radius: .375rem;
  background: rgba(90, 163, 52, .1);
  color: var(--gold-deep);
  font-size: .8125rem;
  line-height: 1.4;
}
.order-nudge[hidden] { display: none; }

.order-lines {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--sand-deep);
}
.order-line {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .2rem 0;
  font-size: .875rem;
}
.order-line[hidden] { display: none; }
.order-line dt {
  flex: none;
  color: var(--ink);
}
.order-line-note {
  flex: 1 1 auto;
  margin: 0;
  color: var(--earth);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.order-line-amt {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.order-line--off dt,
.order-line--off .order-line-note,
.order-line--off .order-line-amt { color: var(--gold-deep); }
.order-line--off .order-line-amt { font-weight: 500; }

.order-total {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: .5rem 0 .25rem;
  padding-top: .7rem;
  border-top: 1px solid var(--sand-deep);
}
.order-total-label {
  flex: 1 1 auto;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.order-total-amt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  order: 3;
}

.order-hint {
  margin: 0 0 .25rem;
  color: #8a3b31;
  font-size: .8125rem;
}
.order-hint[hidden] { display: none; }

/* ---------- actions ---------- */

.order-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-top: 1rem;
}
@media (min-width: 420px) {
  .order-actions { grid-template-columns: 1fr 1fr; }
}

.order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 52px;
  border-radius: .5rem;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.order-btn svg { width: 20px; height: 20px; flex: none; }
/* one flex item for the whole label — split across two items, the
   flex gap lands between "Order on" and "WhatsApp" as a second space */
.order-btn-label { white-space: nowrap; }
.order-btn:hover { transform: translateY(-2px); }

.order-btn--wa {
  background: #1f8f4a;
  color: #fff;
}
.order-btn--wa:hover { background: #17753b; }

.order-btn--mail {
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.order-btn--mail:hover { background: var(--ink); color: var(--ivory); }

.order-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* Phones get ONE scroll container — the dialog itself. Scrolling the form
   inside a dialog that also scrolls means two nested scrollers fighting
   over the same drag, so below 860px the grid is unwound into a plain
   block flow and the inner scroller is switched off.

   The summary stays pinned to the bottom of that single scrollport, so
   the price and the action are in view while the fields are filled in;
   at the end of the scroll it settles back above the small print. */
@media (max-width: 859px) {
  .order {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .order-inner { display: block; }
  .order-form {
    overflow: visible;
    padding-bottom: 0;
  }
  .order-summary {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: -1.25rem;
    padding: 0 1.25rem .9rem;
    background: var(--ivory);
    box-shadow: 0 -14px 18px -14px rgba(23, 34, 16, .35);
  }
  .order-summary .order-lines { margin-top: .8rem; padding-top: .7rem; }
  .order-actions { margin-top: .7rem; }
  /* two-up even on the narrowest phones, so the sticky bar stays shallow */
  .order-actions { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .order-btn { height: 48px; font-size: .875rem; gap: .4rem; }
  .order-btn svg { width: 18px; }
  .order-btn-long { display: none; }
}