/* Shop view, concept B "This week's menu" (Matt, 26 Oct 2026: "Lets put each item as a pop out card that then shows more details etc.
   Let's just have the image + name. Add to cart options on the card with qty."). Loads on /order/ after extras.css and order-flow.css.
   The card face is the photo, the name and the quantity controls; price, macros, ingredients and allergens stay in the card's DOM
   (the checkout's allergen list, the basket thumbnails and the allergen filter read them) and are shown in the pop-out (#shop-popout). */

/* ---------- the grid ---------- */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-grid { gap: 36px 24px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-grid > .product-card {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* The photo is the button that opens the pop-out (the name opens it too, js/shop-popout.js). */
.card-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; border-radius: var(--r-photo); cursor: pointer; }
.card-open:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .card-open .product-photo {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--mint-light);
}
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .card-open .product-photo img {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  padding: 0;
  transition: filter 0.15s ease;
}
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card[data-extra] .card-open .product-photo { aspect-ratio: 1; background: #ddf5d3; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card[data-extra] .card-open .product-photo img { object-fit: contain; padding: 10%; }
.card-open:hover .product-photo img { filter: brightness(0.96); }

/* The body: the name, then the controls. */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .product-body { padding: 0; gap: 12px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .pick-name { padding: 0; flex: none; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card label.product-name { font-size: 18px; line-height: 1.2; cursor: pointer; transition: color 0.15s ease; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card label.product-name:hover { color: var(--green-bright); }
@media (max-width: 539px) {
  html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card label.product-name { font-size: 17px; }
}

/* Face: only the photo, the name and the controls show. Everything else is the pop-out's (kept in the DOM for the checkout, the basket and the filter). */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card :is(.product-description, .product-meta, .product-info) { display: none; }

/* Controls: the quantity stepper on the left, Add on the right — both always on the card (the stepper is the basket quantity; − is disabled at 0). */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .product-buy { justify-content: space-between; flex-wrap: nowrap; gap: 12px; padding: 0; border: 0; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card[data-qty="0"] .stepper { display: inline-flex; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card[data-qty]:not([data-qty="0"]) .add-btn { display: inline-flex; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .add-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .stepper { display: inline-flex; flex: none; width: auto; }
/* extras.css stretches the old card's stepper and Add to the full width under 540px; the concept-B row keeps them side by side (3 × 44px, then Add). */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .stepper :is(button, input) { flex: none; width: 44px; min-width: 44px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .add-btn { width: auto; padding-inline: 12px; }
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .stepper button:disabled { color: var(--muted); opacity: 0.55; }

/* A MEAL whose allergens are not supplied yet cannot be ordered (data-pending): no controls, one plain line. */
.product-card .not-orderable { display: none; margin: 0; min-height: 44px; align-items: center; font-size: 16px; font-weight: 600; color: var(--green-text); }
.product-card[data-pending] .not-orderable { display: flex; }
#order-form .product-card[data-pending] :is(.stepper, .add-btn) { display: none !important; }
/* A pending EXTRA stays on sale (client ruling 25 Oct 2026): its face keeps the controls and carries the "message us before ordering" line under the name (L19). 16px: the touch font floor. */
html[data-shop-live][data-shop-view="shop"] #order-form.product-shop .product-card .allergen-note { margin: 6px 0 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--green-text); }

/* ---------- the pop-out ---------- */
dialog.shop-popout {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  max-height: min(88vh, 860px);
  padding: 0;
  border: 0;
  border-radius: var(--r-photo);
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
}
dialog.shop-popout::backdrop { background: rgba(7, 26, 16, 0.48); }
@media (prefers-reduced-motion: no-preference) {
  dialog.shop-popout[open] { animation: popout-in 0.2s ease-out; }
  dialog.shop-popout[open]::backdrop { animation: popout-scrim 0.15s ease-out; }
}
@keyframes popout-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes popout-scrim { from { opacity: 0; } }
.shop-popout [hidden] { display: none !important; }
.popout-layout { position: relative; display: grid; grid-template-columns: 400px minmax(0, 1fr); max-height: min(88vh, 860px); min-height: 0; }
.popout-media { min-height: 0; background: var(--mint-light); }
.popout-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.popout-media.is-extra { background: #ddf5d3; }
.popout-media.is-extra img { object-fit: contain; padding: 12%; }
.popout-side { display: flex; flex-direction: column; min-height: 0; max-height: min(88vh, 860px); }
.popout-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--white); color: var(--green-text); font-size: 18px; line-height: 1; }
.popout-close:hover { background: var(--mint-light); color: var(--green-deep); }
.popout-close:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.popout-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 22px 26px 16px; scrollbar-width: thin; }
.popout-body h2 { margin: 0 48px 6px 0; font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.popout-body h2:focus { outline: none; }
.popout-body h2:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.popout-price { margin: 0 0 12px; font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.popout-desc { margin: 0 0 14px; font-size: 16px; line-height: 1.5; max-width: 60ch; }
.popout-nut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.popout-nut div { padding: 10px 6px; border-radius: var(--radius); background: var(--mint-light); color: var(--green-text); font-size: 13px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.popout-nut b { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.popout-alg { padding-top: 14px; border-top: 1px solid var(--line); }
.popout-alg h3 { margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 600; }
.popout-alg p { margin: 0 0 6px; max-width: 70ch; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }   /* 16px floor on touch viewports (qa font-floor) */
.popout-contains { font-weight: 600; }
.popout-may, .popout-note { color: var(--green-text); }
.popout-ing { font-size: 16px; }
.popout-size, .popout-store { color: var(--green-text); }
.popout-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 32px; border-top: 1px solid var(--line); background: var(--white); }
/* The "message us before ordering" line of an orderable pending item sits in the action bar, directly above the stepper and Add (js/shop-popout.js makes it; L19). */
.popout-order-note { flex: 1 1 100%; margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--green-text); }
.popout-controls { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; }
.popout-controls .stepper { flex: none; }
.popout-add { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.popout-add.is-added { background: var(--green-bright); }
#popout-unavailable { display: flex; flex: 1 1 auto; margin: 0; min-height: 44px; align-items: center; font-size: 16px; font-weight: 600; color: var(--green-text); }

/* A bottom sheet on phones. */
@media (max-width: 767px) {
  dialog.shop-popout { inset: auto 0 0 0; margin: 0; width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: var(--r-photo) var(--r-photo) 0 0; }
  .popout-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 92dvh; }
  .popout-media { height: 200px; }
  .popout-media img { height: 200px; }
  .popout-side { max-height: calc(92dvh - 200px); }
  .popout-body { padding: 20px 18px 12px; }
  .popout-body h2 { margin-right: 0; font-size: 23px; }
  .popout-price { font-size: 22px; }
  .popout-nut { gap: 6px; }
  .popout-nut b { font-size: 20px; }
  .popout-actions { padding: 12px 18px; }
  .popout-close { box-shadow: 0 2px 8px rgba(7, 26, 16, 0.2); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes popout-in { from { opacity: 0; transform: translateY(24px); } }
  }
}