/*
 * Ambacht & Smaak component adapter — DustinLabs.
 * Native HTML/CSS port of Watermelon UI's MIT-licensed base-ui components:
 * button, card, input, native-select, badge, alert and accordion.
 * Source: WatermelonCorp/watermelon-platform @ 8c969e108650256cbc12ee9473a6fce78ba6e3ad.
 * See watermelon-ui-LICENSE.txt for upstream copyright and license.
 * Brand tokens, existing markup and native form/disclosure behavior are retained.
 */

/* Watermelon semantic tokens, mapped to the existing Ambacht & Smaak palette. */
.as-watermelon {
  --wm-background: #f7f4ee;
  --wm-foreground: #081c2e;
  --wm-card: #fffdf8;
  --wm-primary: #081c2e;
  --wm-primary-foreground: #fffdf8;
  --wm-secondary: #eee9e0;
  --wm-muted: #5d6b77;
  --wm-border: #dcd5cb;
  --wm-input: #c7bfb3;
  --wm-ring: #b86134;
  --wm-radius-md: 10px;
  --wm-radius-xl: 14px;
  --wm-shadow-sm: 0 1px 2px rgb(8 28 46 / 5%);
  --wm-shadow-card: none;
  --muted: var(--wm-muted);
}

/* Button: inline-flex, gap-1.5, rounded-lg, transition-all and focus ring.
 * Keep the site's 44px touch targets and existing primary/outline/ghost variants. */
.as-watermelon .button {
  min-height: 44px;
  gap: 6px;
  border-radius: var(--wm-radius-md);
  border-color: var(--wm-primary);
  background: var(--wm-primary);
  color: var(--wm-primary-foreground);
  box-shadow: none;
  padding: 10px 18px;
  line-height: 1.4;
  font-size: .94rem;
  font-weight: 700;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.as-watermelon .button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.as-watermelon .button:hover { background: #18354b; border-color: #18354b; }
.as-watermelon .button-light {
  border-color: var(--wm-input);
  background: #fffdf8;
  color: var(--wm-foreground);
}
.as-watermelon .button-light:hover { border-color: #a99c8d; background: var(--wm-secondary); }
.as-watermelon .button-ghost { border-color: #c9a98d; color: #fffdf8; background: transparent; }
.as-watermelon .button-ghost:hover { background: rgb(255 253 248 / 12%); }
.as-watermelon .button-small { padding: 10px 14px; font-size: .88rem; }
.as-watermelon .button:is(:disabled, [aria-disabled="true"], .disabled) { opacity: .5; cursor: not-allowed; box-shadow: none; }
.as-watermelon :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--wm-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgb(184 97 52 / 16%);
}
.as-watermelon .hero-actions .button:not(.button-light):not(.button-ghost) { background: #a85328; border-color: #a85328; }
.as-watermelon .hero-actions .button:not(.button-light):not(.button-ghost):hover { background: #9c4e27; border-color: #9c4e27; }

/* Card: rounded-xl, bg-card, 1px boundary, muted footer; keep the original subgrid rows. */
.as-watermelon :is(.product-card, .recipe-card, .feature-card, .region-card, .form-panel, .summary-panel, .prose-panel, .auth-card, .filter-panel, .delivery-check-result, .delivery-check-form, .cart-row, .order-list a) {
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-xl);
  background: var(--wm-card);
  box-shadow: var(--wm-shadow-card);
}
.as-watermelon :is(.product-card, .recipe-card) { transition: border-color .18s, box-shadow .18s; }
.as-watermelon :is(.product-card, .recipe-card):hover { border-color: #b6a796; box-shadow: 0 4px 18px rgb(8 28 46 / 9%); }
.as-watermelon .product-card-body { padding: 22px; }
.as-watermelon .product-card-body > .eyebrow { width: fit-content; font-size: .67rem; color: #72523b; }
.as-watermelon .product-card .product-meta strong { color: var(--wm-foreground); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.as-watermelon .product-card .product-article { color: var(--wm-muted); font-size: .78rem; font-weight: 400; }
.as-watermelon .product-card .card-actions { border-top: 1px solid var(--wm-border); padding-top: 16px; margin-top: 4px; }
.as-watermelon .product-card .card-actions > .text-link { width: fit-content; font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c7bfb3; }
.as-watermelon .cart-round-note { color: var(--wm-muted); font-size: .78rem; line-height: 1.55; }
.as-watermelon .product-hero-image { border-radius: var(--wm-radius-xl); box-shadow: var(--wm-shadow-card); }
.as-watermelon .cart-row.cart-row-unavailable { border-color: var(--danger); }
.as-watermelon .summary-panel { top: 24px; }
.as-watermelon .empty-state { border-color: #c9bcae; border-radius: var(--wm-radius-xl); box-shadow: none; }

/* Input / NativeSelect: rounded-lg border-input, muted placeholder,
 * transition-[color,box-shadow], focus-visible ring, disabled opacity. */
.as-watermelon :is(input, select, textarea):where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) {
  min-height: 44px;
  border: 1px solid var(--wm-input);
  border-radius: var(--wm-radius-md);
  background-color: #fff;
  color: var(--wm-foreground);
  box-shadow: var(--wm-shadow-sm);
  padding: 11px 12px;
  transition: border-color .18s, box-shadow .18s;
}
.as-watermelon :is(input, textarea)::placeholder { color: var(--wm-muted); opacity: 1; }
.as-watermelon :is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
.as-watermelon :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.as-watermelon :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--wm-primary); }
.as-watermelon .variant-select-label { color: var(--wm-muted); font-size: .76rem; text-transform: none; font-weight: 700; }
.as-watermelon .variant-select-label select { font-size: .9rem; }
.as-watermelon .variant-choice span { border-radius: var(--wm-radius-md); box-shadow: var(--wm-shadow-sm); }
.as-watermelon .variant-choice input:checked + span { background: var(--wm-primary); border-color: var(--wm-primary); }
.as-watermelon .variant-choice input:focus-visible + span { outline-color: var(--wm-ring); }
.as-watermelon .quantity-control { grid-template-columns: 44px 36px 44px; border-radius: var(--wm-radius-md); box-shadow: var(--wm-shadow-sm); }
.as-watermelon .quantity-control button { min-height: 44px; }
.as-watermelon .quantity-control button:hover { background: var(--wm-secondary); }
.as-watermelon .icon-only { min-width: 44px; min-height: 44px; border-radius: var(--wm-radius-md); }
.as-watermelon .icon-only:hover { background: #fff0ed; }

/* Alert / Badge: compact bordered surface with explicit state color. */
.as-watermelon .ordering-notice {
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-xl);
  background: #f0ebe3;
  color: var(--wm-foreground);
  box-shadow: none;
  padding: 18px 20px;
  gap: 16px;
}
.as-watermelon .ordering-notice p { color: #4d5c68; }
.as-watermelon .ordering-notice.is-open { border-color: #b4c9bc; background: #edf4ee; }
.as-watermelon .home-hero .ordering-notice { background: rgb(4 19 33 / 65%); border-color: rgb(255 253 248 / 28%); color: #fffdf8; box-shadow: inset 3px 0 #d8a078; }
.as-watermelon .home-hero .ordering-notice p { color: #eee9e0; }
.as-watermelon :is(.form-error, .form-success) { border: 1px solid; border-radius: var(--wm-radius-md); padding: 14px 16px; font-size: .94rem; line-height: 1.6; }
.as-watermelon .form-error { border-color: #e5bdb6; color: #8b2f27; background: #fff4f1; }
.as-watermelon .form-success { border-color: #b4c9bc; color: #18513d; background: #edf4ee; }
.as-watermelon .cart-badge { border: 2px solid var(--wm-card); background: #a85328; font-weight: 700; box-sizing: content-box; }

/* Navigation applies the same secondary/active component surfaces.
 * These remain ordinary navigation links with aria-current, not ARIA tabs. */
.as-watermelon .filter-bar { width: fit-content; max-width: 100%; padding: 6px; gap: 4px; border: 1px solid var(--wm-border); border-radius: 10px; background: #eee9e0; }
.as-watermelon .filter-bar a { border: 1px solid transparent; border-radius: var(--wm-radius-md); background: transparent; color: #4d5c68; min-height: 44px; padding: 11px 14px; font-size: .9rem; transition: background-color .18s, color .18s; }
.as-watermelon .filter-bar a:hover { background: #fffdf8; color: var(--wm-primary); }
.as-watermelon .filter-bar a.active { color: var(--wm-primary-foreground); background: var(--wm-primary); box-shadow: var(--wm-shadow-sm); }
.as-watermelon .store-search { border-radius: var(--wm-radius-md); border-color: var(--wm-input); box-shadow: var(--wm-shadow-sm); height: 48px; }
.as-watermelon .store-search input[type="search"] { min-height: 0; border: 0; border-radius: var(--wm-radius-md) 0 0 var(--wm-radius-md); box-shadow: none; padding: 0 16px; }
.as-watermelon .store-search:focus-within { outline: 2px solid var(--wm-ring); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(184 97 52 / 16%); }
.as-watermelon .store-search input[type="search"]:focus-visible { outline: none; box-shadow: none; }
.as-watermelon .store-cart { border-radius: var(--wm-radius-md); padding: 8px 10px; }
.as-watermelon .store-cart:hover { background: var(--wm-secondary); color: var(--wm-primary); }
.as-watermelon .store-categories { padding-block: 5px; }
.as-watermelon .store-categories a { min-height: 42px; border-radius: var(--wm-radius-md); }
.as-watermelon .store-categories a:hover, .as-watermelon .store-categories [aria-current] { background: #233d50; box-shadow: inset 0 -2px #d8a078; }
.as-watermelon .mobile-nav summary { min-height: 44px; border-radius: var(--wm-radius-md); box-shadow: var(--wm-shadow-sm); }
.as-watermelon .mobile-nav > nav { padding: 8px; border-radius: var(--wm-radius-xl); border-color: var(--wm-border); box-shadow: 0 12px 32px rgb(8 28 46 / 16%); }
.as-watermelon .mobile-nav a { border-radius: var(--wm-radius-md); }
.as-watermelon .mobile-nav a:is(:hover, [aria-current]) { background: var(--wm-secondary); color: var(--wm-primary); }

/* Accordion: divide-y, font-medium, hover underline and rotating chevron.
 * Native details preserves keyboard handling and the no-JS fallback. */
.as-watermelon :is(.information-content > details, .steak-sources) {
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-xl);
  background: var(--wm-card);
  padding: 0 20px 18px;
  box-shadow: var(--wm-shadow-sm);
}
.as-watermelon :is(.information-content > details, .steak-sources):not([open]) { padding-bottom: 0; }
.as-watermelon :is(.information-content > details, .steak-sources) > summary {
  position: relative;
  display: block;
  list-style: none;
  min-height: 54px;
  padding: 17px 28px 17px 0;
  color: var(--wm-foreground);
  font-weight: 700;
  cursor: pointer;
}
.as-watermelon :is(.information-content > details, .steak-sources) > summary::-webkit-details-marker { display: none; }
.as-watermelon :is(.information-content > details, .steak-sources) > summary::after {
  content: ""; position: absolute; right: 3px; top: 20px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--wm-muted); border-bottom: 1.5px solid var(--wm-muted);
  transform: rotate(45deg); transition: transform .2s;
}
.as-watermelon :is(.information-content > details, .steak-sources)[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.as-watermelon :is(.information-content > details, .steak-sources) > summary:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Existing homepage compositions retain their content, photography and order. */
.as-watermelon .delivery-check-section { border-color: var(--wm-border); border-radius: 16px; background: #eee9e0; box-shadow: var(--wm-shadow-card); }
.as-watermelon .delivery-check-form { padding: 22px; gap: 14px; }
.as-watermelon .delivery-check-result { padding: 22px; }
.as-watermelon .home-categories .category-bands a { border-radius: var(--wm-radius-xl); box-shadow: var(--wm-shadow-sm); transition: box-shadow .18s; }
.as-watermelon .home-categories .category-bands a:hover { box-shadow: 0 4px 16px rgb(8 28 46 / 18%); }
.as-watermelon .auth-card { padding: 30px; gap: 20px; }
.as-watermelon .auth-card > p { margin: 0; }
.as-watermelon .site-footer { border-top: 1px solid var(--wm-border); }

@media (max-width: 640px) {
  .as-watermelon .product-card-body { padding: 20px; }
  .as-watermelon .filter-bar { width: 100%; gap: 4px; padding: 5px; }
  .as-watermelon .filter-bar a { padding: 11px 12px; font-size: .86rem; }
  .as-watermelon .ordering-notice { padding: 16px; }
  .as-watermelon .delivery-check-section { padding: 18px; }
  .as-watermelon .delivery-check-form, .as-watermelon .delivery-check-result { padding: 18px; }
  .as-watermelon .auth-card { padding: 24px 20px; }
  .as-watermelon :is(input, select, textarea):where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) { font-size: 16px; }
  .as-watermelon .store-search input[type="search"] { padding-inline: 12px; font-size: 16px; }
  .as-watermelon .store-cart { padding: 4px 0 4px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .as-watermelon *, .as-watermelon *::before, .as-watermelon *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}