/* ==========================================================================
   Order online — listing + cart. New, page-scoped components; everything
   else (buttons, hero, header, .field form styles) reuses css/styles.css.
   ========================================================================== */

/* Several components below set their own `display` (grid/flex), which would
   otherwise beat the browser's default [hidden]{display:none} rule on source
   order. This one rule keeps hidden="" authoritative everywhere on the page,
   so el.hidden = true/false (used throughout order.js) always works. */
[hidden]{display:none !important}

.order-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:clamp(28px,4vw,56px);
  align-items:start;
  margin-top:8px;
}
@media (max-width:900px){
  .order-layout{grid-template-columns:1fr}
}

.order-status{
  padding:22px 24px;
  border-radius:var(--r-md);
  background:var(--cream);
  color:var(--muted);
  font-size:.98rem;
}

.goat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-top:6px;
}
.goat-card{
  display:grid;
  gap:10px;
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.goat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.goat-card__photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);margin:-4px -4px 0}
.goat-card.is-selected{border-color:var(--copper);box-shadow:0 0 0 2px rgba(194,87,44,.16)}
.goat-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.goat-card__band{font-family:Fraunces,serif;font-size:1.3rem;color:var(--text)}
.goat-card__wt{font-family:Manrope,sans-serif;font-size:.82rem;color:var(--muted);font-weight:600}
.goat-card__price{font-family:Fraunces,serif;font-size:1.5rem;color:var(--copper-dark)}
.goat-card__price small{display:block;font-family:Manrope,sans-serif;font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.02em}

.poultry-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding:18px 22px;
  background:var(--sage);
  border-radius:var(--r-lg);
  flex-wrap:wrap;
}
.poultry-card__body h3{margin:0 0 4px;font-size:1.15rem}
.poultry-card__price{margin:0;font-family:Fraunces,serif;font-size:1.3rem;color:var(--copper-dark)}
.poultry-card__price small{margin-left:8px;font-family:Manrope,sans-serif;font-size:.72rem;font-weight:600;color:var(--muted)}
.poultry-card__stock{margin:4px 0 0;font-size:.82rem;color:var(--muted)}

.stepper{display:flex;align-items:center;gap:14px}
.stepper__btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);
  background:#fff;color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.stepper__btn:hover{border-color:var(--copper);background:rgba(194,87,44,.06)}
.stepper__value{min-width:20px;text-align:center;font-family:Fraunces,serif;font-size:1.2rem}

.order-cart{
  position:sticky;
  top:calc(var(--header-h) + 20px);
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
}
.order-cart h3{margin:0 0 14px;font-size:1.1rem}
.order-cart__list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.order-cart__item{font-size:.9rem;color:var(--text)}
.order-cart__item-row{display:flex;justify-content:space-between;gap:10px}
.order-cart__item-sub{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--muted);padding-left:10px}
.order-cart__empty{color:var(--muted) !important;font-style:italic}
.order-cart__total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:1px dashed var(--line-strong);
  font-family:Fraunces,serif;font-size:1.3rem;
}
.order-cart__form{margin-top:18px;display:grid;gap:14px}
.btn--block{width:100%;justify-content:center}
.order-cart__note{margin:0;font-size:.78rem;color:var(--muted);line-height:1.5}

#card-container{
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  min-height:40px;
}
.order-cart__license-preview{
  margin-top:8px;
  max-height:160px;
  width:auto;
  border-radius:var(--r-md);
  border:1px solid var(--line);
}

.license-scan{display:grid;gap:10px}
.license-scan__frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  padding:14px;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-md);
  background:var(--cream);
  text-align:center;
}
.license-scan__frame video{width:100%;max-height:280px;border-radius:var(--r-md);object-fit:cover;background:#000}
.license-scan__frame .order-cart__license-preview{margin-top:0;max-height:280px}
.license-scan__prompt{margin:0;color:var(--muted);font-size:.88rem}
.license-scan__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.license-scan__photolink{
  font-size:.82rem;
  color:var(--copper-dark);
  text-decoration:underline;
  cursor:pointer;
}
.license-scan__photolink input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.license-scan__status{margin:0;font-size:.85rem;color:var(--copper-dark);font-weight:600}
.order-cart__payerror{
  margin:0;
  padding:10px 12px;
  border-radius:var(--r-md);
  background:#fbecea;
  color:#8a2f22;
  font-size:.85rem;
}
.order-cart__confirmation{
  margin-top:8px;
  padding:22px;
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
}
.order-cart__confirmation h3{margin:0 0 8px}
.order-cart__confirmation p{margin:0 0 6px;color:var(--muted);font-size:.92rem}