/* Only loaded by the item detail view; no shared storefront overrides. */
body:has(.food-detail) { background: #f7f7f7; padding-bottom: 0; }
body:has(.food-detail) .front-topbar,
body:has(.food-detail) .front-footer { display: none !important; }
.food-detail { --fd-green: #168d64; --fd-muted: #949494; color: #111; font-family: Inter, system-ui, sans-serif; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.food-detail * { box-sizing: border-box; }
.food-detail a { text-decoration: none; }
.food-detail button, .food-detail input { font: inherit; }
.food-detail button, .food-detail summary, .food-detail label { -webkit-tap-highlight-color: transparent; }
.food-detail :focus-visible { outline: 3px solid #168d64; outline-offset: 4px; }
.fd-hero { position: relative; width: 100%; height: clamp(250px, 67vw, 420px); overflow: hidden; background: #eeeae5; }
.fd-hero-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.fd-image-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: #9a958c; font-size: 14px; background: #ece9e3; }
.fd-image-empty svg { width: 64px; height: 64px; }
.fd-circle { width: 48px; height: 48px; border-radius: 50%; background: white; border: 0; display: grid; place-items: center; color: #111; padding: 12px; box-shadow: 0 2px 16px #00000008; }
.fd-circle svg { width: 100%; height: 100%; }
.fd-circle:hover { color: var(--fd-green); }
.fd-close { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 18px; z-index: 3; }
.fd-wishlist { position: absolute; top: max(24px, env(safe-area-inset-top)); right: 18px; z-index: 3; margin: 0; }
.fd-circle.is-wished { color: #de4150; }
.fd-hero-unavailable::after { content: ''; position: absolute; inset: 0; background: #0009; }
.fd-availability-overlay { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: white; text-align: center; padding: 80px 24px; }
.fd-availability-overlay strong { font-size: 21px; font-weight: 500; }
.fd-availability-overlay span { font-size: 16px; }
.fd-intro { background: white; padding: 24px 22px 22px; }
.fd-store { display: flex; align-items: center; gap: 8px; color: #242424; font-size: 15px; margin-bottom: 8px; }
.fd-store img { object-fit: contain; border-radius: 50%; }
.fd-intro h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.4px; }
.fd-rating { display: flex; gap: 7px; align-items: center; color: var(--fd-muted); font-size: 15px; margin: 0 0 4px; }
.fd-star { color: #f6b900; font-size: 23px; line-height: 1; }
.fd-price { font-size: 25px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px; }
.fd-price del { font-size: 16px; color: var(--fd-muted); font-weight: 400; letter-spacing: 0; margin-left: 8px; }
.fd-unit { color: var(--fd-muted); font-size: 17px; margin: 10px 0 0; }
.fd-description { display: flex; flex-direction: column; margin-top: 30px; }
.fd-description summary { list-style: none; text-align: center; color: var(--fd-green); font-weight: 500; font-size: 16px; cursor: pointer; padding: 12px; margin-top: 3px; }
.food-detail summary::-webkit-details-marker { display: none; }
.fd-description summary svg { width: 20px; height: 20px; margin-left: 8px; vertical-align: -4px; }
.fd-description:not([open]) summary svg { transform: rotate(180deg); }
.fd-description .fd-see-more, .fd-description:not([open]) .fd-see-less { display: none; }
.fd-description:not([open]) .fd-see-more { display: inline; }
.fd-description-content { color: var(--fd-muted); font-size: 17px; line-height: 1.55; }
.fd-description-content p { margin: 0 0 14px; }
.fd-description-text { white-space: pre-line; }
.fd-description-content h2 { color: #111; font-size: 20px; font-weight: 700; margin: 16px 0 8px; }
/* summary appears below content without compromising native disclosure behavior */
.fd-description[open] { display: block; }
.fd-description[open] summary { float: none; }
.fd-description[open] { position: relative; padding-bottom: 48px; }
.fd-description[open] > summary { position: absolute; bottom: 0; left: 0; right: 0; }
.fd-options { padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; }
.fd-option-card { border: 0; border-radius: 24px; padding: 24px; background: white; min-width: 0; }
.fd-option-card > summary { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; list-style: none; }
.fd-group-heading { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.fd-group-heading small { display: block; color: var(--fd-muted); font-weight: 400; font-size: 14px; margin-top: 8px; }
.fd-badge { color: #737373; background: #f4f4f4; font-size: 13px; padding: 7px 12px; border-radius: 24px; white-space: nowrap; margin-top: -1px; }
.fd-badge-required { color: #d73942; background: #fceaea; }
.fd-chevron { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f4f4f4; flex-shrink: 0; margin-top: -1px; }
.fd-chevron svg { width: 20px; height: 20px; }
.fd-option-card:not([open]) .fd-chevron svg { transform: rotate(180deg); }
.fd-option-rows { margin-top: 19px; }
.fd-option-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; font-size: 17px; line-height: 1.4; cursor: pointer; }
.fd-option-row > span:first-child { flex: 1; min-width: 0; }
.fd-option-price { white-space: nowrap; }
.fd-option-row input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: 0 0 24px; border: 1.5px solid #a4a4a4; border-radius: 50%; margin: 0; position: relative; cursor: pointer; }
.fd-option-row input[type=checkbox] { border-radius: 6px; }
.fd-option-row input:checked { background: var(--fd-green); border-color: var(--fd-green); box-shadow: inset 0 0 0 5px white; }
.fd-option-row input:disabled { opacity: .4; cursor: not-allowed; }
.fd-option-row:has(input:disabled) { color: #aaa; cursor: not-allowed; }
.fd-stock-label { display: block; font-size: 12px; color: #bd4141; }
.fd-unavailable-callout { padding: 22px 18px; background: #e0f0e8; border-radius: 14px; text-align: center; display: flex; flex-direction: column; gap: 9px; }
.fd-unavailable-callout strong { font-weight: 500; font-size: 20px; color: var(--fd-green); }
.fd-unavailable-callout span { font-size: 15px; line-height: 1.4; }
.fd-quantity-card { background: white; border-radius: 18px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.fd-stepper { display: flex; align-items: center; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; }
.fd-stepper button { border: 0; background: #f6f6f6; color: #111; width: 40px; height: 40px; font-size: 23px; font-weight: 400; }
.fd-stepper button:disabled { color: #bbb; }
.fd-stepper input { width: 44px; height: 40px; padding: 0; text-align: center; border: 0; background: white; font-size: 16px; -moz-appearance: textfield; }
.fd-stepper input::-webkit-inner-spin-button, .fd-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.fd-selection-status { color: #777; text-align: center; font-size: 13px; margin: -4px 0 0; min-height: 0; }
.fd-selection-status:empty { display: none; }
.fd-action-bar { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -8px 25px #00000004; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); }
.fd-action-inner { max-width: 680px; margin: auto; }
.fd-add-button { border: 0; background: var(--fd-green); color: white; width: 100%; border-radius: 13px; min-height: 58px; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; }
.fd-add-button:disabled { color: #111; background: #d1d1d1; justify-content: center; cursor: not-allowed; }
.fd-add-button [hidden] { display: none !important; }
.fd-add-button:not(:disabled):hover { background: #10774f; }
@media (min-width: 768px) {
    .food-detail { max-width: 1120px; margin: 32px auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 0 24px 110px; }
    .fd-hero { border-radius: 28px; height: min(620px, 65vw); position: sticky; top: 32px; }
    .fd-intro { border-radius: 24px; padding: 28px; }
    .fd-intro h1 { font-size: 30px; }
    .fd-price { font-size: 28px; }
    .fd-options { padding: 20px 0 0; }
    .fd-action-inner { max-width: 1072px; display: flex; justify-content: flex-end; }
    .fd-add-button { width: calc(50% - 14px); }
}
@media (max-width: 360px) {
    .fd-intro { padding-left: 18px; padding-right: 18px; }
    .fd-option-card { padding: 20px 16px; }
    .fd-options { padding-left: 14px; padding-right: 14px; }
    .fd-group-heading { font-size: 18px; }
    .fd-option-row { font-size: 15px; gap: 10px; }
    .fd-badge { font-size: 12px; padding: 7px 9px; }
    .fd-add-button { font-size: 16px; }
}

/* Keep the storefront navigation visible below the item purchase controls. */
@media (max-width: 767px) {
    body:has(.food-detail) { --item-bottom-nav-height: calc(66px + env(safe-area-inset-bottom, 0px)); }
    body:has(.food-detail) .mobile-bottom-nav {
        display: flex;
        height: var(--item-bottom-nav-height);
        box-sizing: border-box;
    }
    .fd-action-bar {
        bottom: var(--item-bottom-nav-height);
        padding-bottom: 16px;
    }
    .food-detail { padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)); }
}