/* The shop page, a meal's page, the cart, Cooking Instructions and the
   sign-up form (rows 6.1, 6.2, 6.6, 6.7), and Shop Organization's cards
   (row 5.3). Colours, type and spacing come from fmb.css's tokens (row 7.7);
   the public shell's own look is public/assets/storefront-look.css (row 7.5). */

.shop-title { margin-bottom: var(--space-2); }
.next-pickup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4); }
.next-pickup h2 { font-size: var(--text-m); margin: 0 0 var(--space-2); }
.next-pickup p { margin: 0 0 var(--space-1); }
.next-pickup-entry + .next-pickup-entry { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.next-pickup-maps { font-size: var(--text-s); }
.next-pickup-close { color: var(--error-ink); }
.shop-closed { background: var(--error-bg); color: var(--error-ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-weight: var(--weight-label); }
.cart-line { margin: 0 0 var(--space-3); }
.shop-category-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.shop-category-links a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.shop-category-section { scroll-margin-top: var(--space-4); margin: 0 0 var(--space-5); }
.shop-category-heading { margin: 0 0 var(--space-3); }

.meal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.meal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.meal-link { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: var(--space-2); }
.meal-link img, .meal-no-picture { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-control); background: var(--accent); display: block; }
.meal-name { font-weight: var(--weight-label); line-height: 1.3; }
.meal-link:hover .meal-name, .meal-link:focus-visible .meal-name { text-decoration: underline; }
.price { margin: 0; font-weight: var(--weight-label); }
.price del { color: var(--muted); font-weight: 400; margin-right: var(--space-1); }
.price ins { text-decoration: none; }
.add-to-cart { margin: 0; }
.add-to-cart button { width: 100%; }
.view-cart { text-align: center; font-size: var(--text-s); }
.signup-section { margin-top: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.signup-section h2 { margin-top: 0; }
.signup-thanks p:last-child { margin-bottom: 0; }

.meal-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.meal-photos { display: grid; gap: var(--space-2); grid-template-columns: repeat(4, 1fr); }
.meal-photos .meal-photo-main, .meal-photos .large { grid-column: 1 / -1; width: 100%; height: auto; border-radius: var(--radius); background: var(--accent); aspect-ratio: 1; object-fit: cover; display: block; }
.meal-photos .meal-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-control); }
.meal-summary h1 { margin-bottom: var(--space-1); }
.meal-summary .price { font-size: var(--text-l); margin-bottom: var(--space-2); }
.meal-words img { max-width: 100%; height: auto; }
.add-to-cart-page { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.add-to-cart-page label { margin: 0; width: 100%; }
.add-to-cart-page input[type=number], .cart-quantity input[type=number] { width: 5.5rem; }
.add-to-cart-page button { width: auto; }
.meal-description, .related { margin-top: var(--space-5); }

.cooking-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.cooking-search label { margin: 0; }
.cooking-search input[type=search] { min-width: 0; flex: 1 1 12rem; }
.legend { margin: var(--space-1) 0; font-size: var(--text-s); }
.cooking-list { width: 100%; border-collapse: collapse; background: var(--surface); margin-top: var(--space-3); }
.cooking-list th, .cooking-list td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.cooking-list td a { display: inline-flex; min-height: var(--control-h); align-items: center; }

.cart-lines { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.cart-line-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.cart-line-item img { border-radius: var(--radius-control); object-fit: cover; }
.cart-line-words { display: flex; flex-direction: column; flex: 1 1 12rem; }
.cart-quantity { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.cart-subtotal { font-size: var(--text-m); }

/* Shop Organization, Categories and Tags (the Operator's screens). */
.term-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
.term-form > div { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 14rem; }
.shop-category-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-4); }
.shop-category-head h2 { margin: 0; }
.shop-category-head .description { margin: var(--space-1) 0 0; }
.move-buttons { display: inline-flex; gap: var(--space-2); }
.move-buttons button[disabled] { opacity: .45; cursor: default; }
.on-shop { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
.add-meal { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.add-meal select { flex: 1 1 14rem; width: auto; }
.shop-product-list { margin: 0; padding-left: var(--space-5); }
.shop-product-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.shop-product-item:last-child { border-bottom: 0; }
.shop-product-item .row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-left: var(--space-2); }
button.small { min-height: var(--control-h-s); padding: 0 var(--space-3); font-size: var(--text-s); }
.terms-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }

@media (max-width: 760px) {
  .meal-page, .terms-layout { grid-template-columns: 1fr; }
  .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}