/* VW-666 S2: the champagne shop on top of the portal's assets/site.css - the
   one card grid on the estate (DESIGN-RULES-WEB.md section 3), the cart panel,
   the tasting block and the compliance kit. Only what the shop adds; palette,
   type, buttons and folds come from site.css. Tokens only; mono only on the
   register selectors site.css already sets (.val, .waarde, .stand, .bronregel). */

/* --- top ---------------------------------------------------------------- */
.shop-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; padding-top: 2.4rem; }
.h-225 { font-size: 2.25rem; max-width: none; }
.h-225 .red { color: var(--red); }
.lead-s { font-size: 1.1rem; }
.w-44 { max-width: 44rem; }
.mt-05 { margin-top: .5rem; }
.pt-24 { padding-top: 2.4rem; }
.h-14 { font-size: 1.4rem; }
.ml-1 { margin-left: 1rem; }
.shop-top .standregel { margin-top: 1rem; }

/* --- cart pill in the header ------------------------------------------- */
.cart-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); font: 600 var(--size-ui) var(--sans); text-decoration: none; }
.cart-pill .n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 999px; background: var(--navy); color: var(--white); font: 600 .78rem var(--mono); }

/* --- facets (buttons; the page shows every card without script) --------- */
.facets { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.facets .lbl { margin-right: .3rem; font: 600 .78rem var(--sans); color: var(--navy-soft); }
.facets button { padding: .4rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--navy); font: 500 .86rem var(--sans); cursor: pointer; }
.facets button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* --- the grid: 3-up / 2-up / 1-up white cards ---------------------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.card[hidden] { display: none; }
.card .img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-bottom: 1px solid var(--line); background: var(--white); }
.card .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card .img .stand { position: absolute; top: .7rem; left: .7rem; padding: .15rem .45rem; border-radius: 4px; background: var(--paper); font-size: .74rem; }
.card .body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .9rem 1rem 1rem; }
.card .stand-top { align-self: flex-start; padding: .15rem .45rem; border-radius: 4px; background: var(--paper); font-size: .74rem; }
.card .huis { font: 400 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-soft); }
.card .cuvee { font: 600 1.05rem/1.25 var(--sans); }
.card .spec { font-size: .88rem; color: var(--navy-soft); }
.card .prijs { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: .6rem; }
.card .prijs .val { font-size: 1.15rem; }
.card .prijs .perl { font: 400 .72rem var(--mono); color: var(--navy-soft); }
.card .add { display: block; margin-top: .6rem; padding: .65rem; border: 0; border-radius: 8px; background: var(--navy); color: var(--white); font: 600 .9rem var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.card .add.uit, .card .add:disabled { background: var(--paper-deep); color: var(--navy-soft); cursor: default; }
.order-closed { color: var(--navy-soft); }

/* --- the tasting as a product ------------------------------------------- */
.proef { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-top: 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.proef h3 { font: 600 1.1rem var(--sans); }
.proef p { margin-top: .3rem; max-width: 56ch; font-size: .95rem; }
.button.navy { background: var(--navy); border: 0; cursor: pointer; font: 600 var(--size-ui) var(--sans); }
.button.uit { background: var(--paper-deep); color: var(--navy-soft); pointer-events: none; }
button.button { border: 0; cursor: pointer; }
button.button:disabled { background: var(--paper-deep); color: var(--navy-soft); cursor: default; }

/* --- the cart panel ------------------------------------------------------ */
.cart-panel { margin-top: 2.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); }
.cart-panel .cart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); font: 600 1rem var(--sans); }
.cart-empty { padding: 1rem 1.2rem; color: var(--navy-soft); border-bottom: 1px solid var(--line); }
.cart-empty[hidden] { display: none; }
.cart-line { display: grid; grid-template-columns: 1fr 7rem 6rem 6rem; gap: 1rem; align-items: baseline; padding: .8rem 1.2rem; border-bottom: 1px solid var(--line); }
.cart-line .aantal { display: inline-flex; gap: .4rem; align-items: center; }
.cart-line .stap { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); color: var(--navy); font: 500 .9rem var(--sans); cursor: pointer; }
.cart-line .right { text-align: right; }
.cart-foot { padding: 1rem 1.2rem 1.2rem; }
.cart-foot .totaal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; font: 600 1rem var(--sans); }
.cart-foot .keuze { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .6rem 0; font-size: var(--size-ui); }
.cart-foot label { display: flex; gap: .5rem; align-items: baseline; font-size: var(--size-ui); }
.cart-foot .leeftijd { margin-top: .8rem; }
.cart-foot .betaal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }

/* --- the NIX18 plate: the official logo IN the image (RvA art 32), on the
   mockup's bare caption row (no box, .84rem navy-soft; S2 review) --------- */
.nix { display: flex; gap: 1rem; align-items: center; margin: 1.4rem 0 0; font-size: .84rem; color: var(--navy-soft); }
.nix img { display: block; flex: none; width: 120px; height: auto; }
.nix figcaption { max-width: 60ch; }

/* --- the withdrawal page ------------------------------------------------- */
.withdraw-form { display: grid; gap: .4rem; max-width: 34rem; margin-top: 1.2rem; }
.withdraw-form label { margin-top: .8rem; font: 600 var(--size-ui) var(--sans); }
.withdraw-form input, .withdraw-form textarea { padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white); font: inherit; font-size: .95rem; color: var(--navy); }
.withdraw-form button { justify-self: start; margin-top: 1.2rem; }
.withdraw-status { margin: .8rem 0 0; font-weight: 600; }
.withdraw-status.ok { color: var(--navy); }
.withdraw-status.fout { color: var(--red); }
.withdraw-fallback { color: var(--navy-soft); font-size: var(--size-ui); }
.field-hint { margin: .15rem 0 .5rem; font-size: .85rem; line-height: 1.45; color: var(--navy-soft); }
.model-form { margin: 1rem 0 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--navy); background: var(--white); max-width: 44rem; }
.model-form p { margin: .4rem 0; }

/* --- responsive: nothing hides, rows stack -------------------------------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .proef { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 1fr 1fr; }
  .nix { flex-direction: column; }
}
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }