/* ============================================================
   Luxshine — How to Order page (rebuilt 2026-10-14 on the design of
   "What Is Vietnamese Remy Hair?", user comment cmv7s2xyas81i: redesign with
   beautiful photos, strong motion, minimalist and luxury).
   Built from approved blocks: the banner, open, "Use" block, contact and footer
   of css/remy.css, and the homepage's Easy to Start and Customer Tiers
   (css/home.css). This file holds only what is this page's own: the banner
   crop, the space under the opening, and the Shipping & Delivery figures.
   The four steps and the MOQ table were removed 2026-10-26 (comments
   cmvorp8v26cn2 · cmvorpgc1o621).
   Markup: how-to-order.html. Tokens only; spacing on the 12-step scale.
   ============================================================ */

/* ---------- 1 · Banner: the wefts' bound tops sit on the left, the title over the hair ---------- */
.order-hero .remy-hero__photo img { object-position: 0% 50%; }

/* ---------- 2 · Opening: no photo band follows it on this page, so it closes with the same space it opens with
   (comment cmvorootjqkxp) instead of sitting on the silk of Easy to Start ---------- */
.order-open { padding-bottom: var(--space-24); }
/* A gold line drops from the opening into Easy to Start (comment cmvp0oawq0oiu), as the line that drops into the figures
   on Wholesale (.wh-stats::before): 2px, from 24px under the button to 24px above the next title, so it spans the
   section's foot (96px, 64 from 899px down) and Easy to Start's top (64px), less those two 24px gaps. Above the next
   section's ground (z-index); it grows down once when the opening comes in. */
.order-open .remy-open__copy { position: relative; z-index: 1; }
.order-open .remy-open__copy::after { content: ""; position: absolute; left: 50%; top: calc(100% + var(--space-6)); width: 2px; height: calc(var(--space-24) + var(--space-16) - var(--space-12)); translate: -50% 0; background: var(--color-primary); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .order-open .remy-open__copy[data-reveal]::after { transform: scaleY(0); transition: transform 1s cubic-bezier(.65, 0, .35, 1) .4s; }
  .js .order-open .remy-open__copy[data-reveal].is-in::after { transform: none; }
}

/* ---------- 3 · Shipping & Delivery (comments cmvovc0cbrcrc, cmvow6ba5uma8, cmvowoloemcf1): the delivery map on the left,
   running out to the left edge of the screen (the copy keeps its five columns), the title,
   three figures and the way to the full shipping page on the right, on beige. Each figure stands on a gold rule, as
   the figures elsewhere on the site. The map's baked-in white ground multiplies into the beige; its edges fade as on
   the homepage's version 2. ---------- */
.order-ship { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: var(--space-24); }
.order-ship__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: center; }
.order-ship__map { grid-column: 1 / span 7; grid-row: 1 / span 3; margin: 0 0 0 calc(-1 * max(var(--space-6), (100vw - var(--container-max)) / 2 + var(--space-6))); aspect-ratio: var(--ty-le-ban_do); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to right, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent), linear-gradient(to bottom, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent), linear-gradient(to bottom, transparent, var(--color-black) 8%, var(--color-black) 92%, transparent); mask-composite: intersect; }
/* A touch brighter, so the grey silk printed in the file goes white and disappears into the beige when multiplied. */
.order-ship__map img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.08); }
.order-ship__title { grid-column: 8 / -1; grid-row: 1; align-self: end; }
.order-ship__figs { grid-column: 8 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
/* Each figure: its icon (lucide, comment cmvowp1khrvsz) before the number and its label. */
.order-ship__fig { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-4); padding-top: var(--space-4); border-top: 2px solid var(--color-primary); }
.order-ship__ico { grid-row: 1 / span 2; width: var(--space-8); height: var(--space-8); color: var(--primary-600); }
.order-ship__num, .order-ship__label { grid-column: 2; }
.order-ship__num { font-family: var(--font-body); font-weight: 700; font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--color-black); }
.order-ship__label { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.order-ship__more { grid-column: 8 / -1; grid-row: 3; justify-self: start; align-self: start; margin-top: var(--space-12); }

/* ---------- 5 · Customer Tiers on cream (comment cmvow78ei03u3); Easy to Start above is plain white (cmvow6owq7jt0:
   the silk class came off the section in the markup) ---------- */
.order .hm-ctiers { background: var(--surface-cream); }

/* Below 1025px the Shipping block runs down: title, map across the width, the three figures in a row, the button. */
@media (max-width: 1024px) {
  .order-ship__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-ship__title, .order-ship__map, .order-ship__figs, .order-ship__more { grid-column: 1 / -1; grid-row: auto; }
  .order-ship__map { margin: var(--space-12) calc(var(--space-6) * -1) 0; }
  .order-ship__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-8); }
  .order-ship__more { margin-top: var(--space-8); }
}
@media (max-width: 899px) {
  .order-open { padding-bottom: var(--space-16); }
  .order-open .remy-open__copy::after { height: calc(var(--space-16) * 2 - var(--space-12)); }
}
@media (max-width: 767px) {
  .order-open .remy-open__copy::after { height: var(--space-16); } /* Easy to Start's top is 48px on phones */
  .order-ship { padding-block: var(--space-16); }
  .order-ship__map { margin-inline: calc(var(--space-6) * -1); margin-top: var(--space-8); }
  .order-ship__figs { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}