/* ==========================================================================
   Relevant Menus — Frontend Styles  v1.1.0
   ========================================================================== */

/* --- Custom Properties (base defaults; the Design System overrides these via
   inline CSS injected after this file, scoped to .rd-menu-system) */
.rd-menu-system {
        --rd-font-heading:            inherit;
        --rd-font-body:               inherit;
        --rd-font-button:             inherit;
        --rd-color-text:              #1a1a1a;
        --rd-color-muted:             #6b6b6b;
        --rd-color-border:            #e0e0e0;
        --rd-color-accent:            #c8922a;
        --rd-color-accent-dark:       #a87520;
        --rd-color-bg:                #ffffff;
        --rd-color-card-bg:           #ffffff;
        --rd-color-card-border:       #e0e0e0;
        --rd-color-featured:          #fff8ee;
        --rd-color-overlay:           rgba(0, 0, 0, 0.55);
        --rd-color-success:           #2e7d32;
        --rd-color-error:             #c0392b;
        --rd-color-button-bg:         #c8922a;
        --rd-color-button-text:       #ffffff;
        --rd-color-button-hover-bg:   #a87520;
        --rd-color-button-hover-text: #ffffff;
        --rd-color-cart-bg:           #ffffff;
        --rd-color-cart-text:         #1a1a1a;
        --rd-color-cart-icon:         #1a1a1a;
        --rd-color-cart-badge-bg:     #c8922a;
        --rd-color-cart-badge-text:   #ffffff;
        --rd-size-category-heading:   1.6rem;
        --rd-size-item-title:         1rem;
        --rd-size-item-description:   0.875rem;
        --rd-size-price:              0.95rem;
        --rd-radius:                  6px;
        --rd-radius-lg:               10px;
        --rd-btn-font-weight:         600;
        --rd-gap:                     1.5rem;
        --rd-font:                    inherit;
        --rd-shadow:                  0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   MENU ITEMS
   ========================================================================== */

/* --- Category Section ----------------------------------------------------- */
.rd-menu-category {
        margin-bottom: 3rem;
        font-family: var(--rd-font);
}

.rd-category-header {
        margin-bottom: 1.5rem;
}

.rd-category-image { margin-bottom: 1rem; }
.rd-category-image .rd-cat-img {
        max-width: 100%;
        height: auto;
        border-radius: var(--rd-radius);
}

.rd-category-title {
        font-size: var(--rd-size-category-heading);
        font-family: var(--rd-font-heading);
        font-weight: 700;
        color: var(--rd-color-text);
        margin: 0 0 0.4rem;
        letter-spacing: 0.02em;
}

.rd-category-description {
        color: var(--rd-color-muted);
        font-size: 0.95rem;
        margin: 0;
}

/* --- Layouts -------------------------------------------------------------- */
.rd-layout-classic .rd-items-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--rd-gap);
}

.rd-layout-grid .rd-items-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--rd-gap);
}

.rd-layout-list .rd-items-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
}

/* --- Menu Item ------------------------------------------------------------ */
.rd-menu-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--rd-color-border);
        color: var(--rd-color-text);
        position: relative;
}

.rd-layout-grid .rd-menu-item {
        flex-direction: column;
        padding: 1rem;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
}

.rd-layout-list .rd-menu-item { padding: 0.6rem 0.5rem; }

.rd-menu-item.rd-featured {
        background: var(--rd-color-featured);
        border-left: 3px solid var(--rd-color-accent);
        padding-left: 0.75rem;
}

/* --- Item Image ----------------------------------------------------------- */
.rd-item-image--inline img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: var(--rd-radius);
        flex-shrink: 0;
}

.rd-layout-grid .rd-item-image--inline img {
        width: 100%;
        height: 160px;
}

.rd-item-image--hover {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 130px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 10;
}

.rd-menu-item:hover .rd-item-image--hover { opacity: 1; }
.rd-menu-item.rd-image-visible .rd-item-image--hover { opacity: 1; }

.rd-item-image--hover img {
        width: 130px;
        height: 100px;
        object-fit: cover;
        border-radius: var(--rd-radius);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* --- Item Body ------------------------------------------------------------ */
.rd-item-body { flex: 1; min-width: 0; }

.rd-item-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.25rem;
}

.rd-item-name {
        font-size: var(--rd-size-item-title);
        font-weight: 600;
        margin: 0;
        color: var(--rd-color-text);
        line-height: 1.3;
}

.rd-item-prices { display: flex; gap: 0.5rem; white-space: nowrap; }

.rd-price { font-weight: 600; font-size: var(--rd-size-price); color: var(--rd-color-accent); }
.rd-price--secondary {
        color: var(--rd-color-muted);
        font-size: 0.875rem;
        text-decoration: line-through;
}

.rd-item-description {
        font-size: var(--rd-size-item-description);
        color: var(--rd-color-muted);
        margin: 0.25rem 0 0;
        line-height: 1.5;
}

/* --- Order Button --------------------------------------------------------- */
.rd-add-to-cart {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding: 0.4rem 0.9rem;
        background: var(--rd-color-button-bg);
        color: var(--rd-color-button-text);
        border: none;
        border-radius: var(--rd-radius);
        font-size: 0.85rem;
        font-family: var(--rd-font-button);
        font-weight: var(--rd-btn-font-weight);
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
        line-height: 1;
}

.rd-add-to-cart:hover { background: var(--rd-color-button-hover-bg); color: var(--rd-color-button-hover-text); }
.rd-add-to-cart:active { transform: scale(0.97); }
.rd-add-icon { font-size: 1.1rem; font-weight: 700; line-height: 1; }

/* ==========================================================================
   MODAL
   ========================================================================== */

/* ── Overlay backdrop ───────────────────────────────────────────────────── */
.rd-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99990;
        display: flex;
        align-items: flex-end;       /* bottom-sheet on mobile */
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease;
        font-family: var(--rd-font);
}

@media (min-width: 560px) {
        .rd-modal-overlay {
                align-items: center; /* centred card on desktop */
                padding: 1rem;
        }
}

.rd-modal-overlay.rd-modal-open {
        opacity: 1;
        visibility: visible;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.rd-modal {
        background: var(--rd-color-bg, #fff);
        border-radius: var(--rd-radius-lg, 16px) var(--rd-radius-lg, 16px) 0 0;
        box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
        width: 100%;
        max-width: 560px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;          /* children handle their own scroll */
}

@media (min-width: 560px) {
        .rd-modal {
                border-radius: var(--rd-radius-lg, 16px);
                box-shadow: 0 8px 50px rgba(0, 0, 0, 0.22);
        }
}

/* ── Hero image (full-width, top of card) ───────────────────────────────── */
.rd-modal-hero {
        width: 100%;
        flex-shrink: 0;
        overflow: hidden;
        max-height: 300px;
        background: #111;
}

.rd-modal-hero img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        display: block;
}

@media (max-width: 480px) {
        .rd-modal-hero img { height: 220px; }
}

/* ── Close button (overlays top-right of image / card) ─────────────────── */
.rd-modal-close {
        position: absolute;
        top: 0.65rem;
        right: 0.65rem;
        z-index: 10;
        width: 2.2rem;
        height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        border-radius: 50%;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        color: #111;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        transition: background 0.15s, transform 0.15s;
        padding: 0;
}

.rd-modal-close:hover {
        background: #fff;
        transform: scale(1.08);
}

/* ── Scrollable body ────────────────────────────────────────────────────── */
.rd-modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

/* ── Item header (name / price / description) ───────────────────────────── */
.rd-modal-header {
        padding: 1.1rem 1.25rem 0.9rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rd-modal-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin: 0 0 0.2rem;
        color: var(--rd-color-text, #111);
        line-height: 1.25;
}

.rd-modal-base-price {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--rd-color-text, #111);
        margin: 0 0 0.5rem;
}

.rd-modal-description {
        color: var(--rd-color-muted, #666);
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.55;
}

/* ── "Customize your item" section ──────────────────────────────────────── */
.rd-modal-customize {
        background: #f5f5f5;
}

.rd-modal-customize-hd {
        padding: 0.9rem 1.25rem 0.6rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--rd-color-text, #111);
}

.rd-modal-customize-bd {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 0.5rem;
}

/* ── Sections inside customize body ─────────────────────────────────────── */
.rd-modal-section { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1.25rem; background: #fff; margin: 0 1.25rem 0.75rem; border-radius: var(--rd-radius, 6px); }
.rd-modal-section-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--rd-color-muted);
        margin: 0;
}
.rd-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* --- Options (radio-style pills) ------------------------------------------ */
.rd-options-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
}

.rd-option-pill {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        border: 2px solid var(--rd-color-border);
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--rd-color-text);
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
}

.rd-option-pill input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
}

.rd-option-pill:hover {
        border-color: var(--rd-color-accent);
}

.rd-option-pill.rd-selected,
.rd-option-pill:has(input:checked) {
        border-color: var(--rd-color-accent);
        background: var(--rd-color-featured);
        color: var(--rd-color-accent-dark);
}

.rd-option-price { color: var(--rd-color-muted); font-size: 0.8rem; }

/* --- Required badge / error ----------------------------------------------- */
.rd-required-badge {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #c0392b;
        margin-left: 0.35rem;
        opacity: 0.85;
}

.rd-modal-section-hint {
        font-size: 0.8rem;
        color: var(--rd-color-muted);
        margin: 0;
}

.rd-optional {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--rd-color-muted);
        margin-left: 0.25rem;
}

.rd-required-error .rd-choice-options-list {
        outline: 2px solid var(--rd-color-error);
        border-radius: var(--rd-radius);
        padding: 0.25rem;
}

/* --- Sizes (radio pills) --------------------------------------------------- */
#rd-modal-sizes {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
}

.rd-size-pill {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 1rem;
        border: 2px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--rd-color-text);
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
        min-width: 5rem;
        text-align: center;
}

.rd-size-pill input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
}

.rd-size-pill:hover { border-color: var(--rd-color-accent); }

.rd-size-pill.rd-selected,
.rd-size-pill:has(input:checked) {
        border-color: var(--rd-color-accent);
        background: var(--rd-color-featured);
        color: var(--rd-color-accent-dark);
}

.rd-size-label { font-weight: 600; }
.rd-size-price { font-size: 0.8rem; color: var(--rd-color-muted); }

.rd-size-pill.rd-selected .rd-size-price,
.rd-size-pill:has(input:checked) .rd-size-price { color: var(--rd-color-accent); }

/* --- Choice Options (radio pills with free text) -------------------------- */
.rd-choice-options-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
}

.rd-choice-pill {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.8rem;
        border: 2px solid var(--rd-color-border);
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--rd-color-text);
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
}

.rd-choice-pill input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
}

.rd-choice-pill:hover { border-color: var(--rd-color-accent); }

.rd-choice-pill.rd-selected,
.rd-choice-pill:has(input:checked) {
        border-color: var(--rd-color-accent);
        background: var(--rd-color-featured);
        color: var(--rd-color-accent-dark);
}

.rd-choice-label { font-weight: 500; }
.rd-choice-price { font-size: 0.8rem; color: var(--rd-color-muted); margin-left: 0.15rem; }

.rd-choice-help-text {
        font-size: 0.8rem;
        color: var(--rd-color-muted);
        margin: 0;
        font-style: italic;
}

.rd-choice-freetext-wrap {
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
}

.rd-choice-freetext-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--rd-color-muted);
}

.rd-choice-free-text {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        padding: 0.4rem 0.65rem;
        font-size: 0.85rem;
        font-family: var(--rd-font);
        color: var(--rd-color-text);
}

.rd-choice-free-text:focus {
        outline: none;
        border-color: var(--rd-color-accent);
}

/* --- Add-Ons (checkbox-style) --------------------------------------------- */
.rd-addons-list { display: flex; flex-direction: column; gap: 0.4rem; }

.rd-addon-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
}

.rd-addon-item:hover { border-color: var(--rd-color-accent); }

.rd-addon-item.rd-selected {
        border-color: var(--rd-color-accent);
        background: var(--rd-color-featured);
}

.rd-addon-label-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
}

.rd-addon-item input[type="checkbox"] { cursor: pointer; }
.rd-addon-price { font-size: 0.8rem; color: var(--rd-color-muted); }

/* Legacy: keep old modifier classes working for older themes/caches ---------- */
.rd-modifiers-list { display: flex; flex-direction: column; gap: 0.4rem; }

.rd-modifier-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
        user-select: none;
}

.rd-modifier-item:hover { border-color: var(--rd-color-accent); }

.rd-modifier-item.rd-selected {
        border-color: var(--rd-color-accent);
        background: var(--rd-color-featured);
}

.rd-modifier-label-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
}

.rd-modifier-item input[type="checkbox"] { cursor: pointer; }
.rd-modifier-price { font-size: 0.8rem; color: var(--rd-color-muted); }

/* --- Quantity Control ----------------------------------------------------- */
.rd-quantity-control {
        display: flex;
        align-items: center;
        gap: 0;
        width: fit-content;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        overflow: hidden;
}

.rd-qty-btn {
        background: #f5f5f5;
        border: none;
        padding: 0.45rem 0.75rem;
        font-size: 1.1rem;
        cursor: pointer;
        color: var(--rd-color-text);
        line-height: 1;
        transition: background 0.15s;
}

.rd-qty-btn:hover { background: #e8e8e8; }

.rd-qty-input {
        width: 3rem;
        text-align: center;
        border: none;
        border-left: 1px solid var(--rd-color-border);
        border-right: 1px solid var(--rd-color-border);
        font-size: 0.95rem;
        font-weight: 600;
        padding: 0.45rem 0;
        -moz-appearance: textfield;
}

.rd-qty-input::-webkit-outer-spin-button,
.rd-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- Modal Notes ---------------------------------------------------------- */
.rd-modal-notes {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        resize: vertical;
        font-family: var(--rd-font);
        color: var(--rd-color-text);
}

.rd-modal-notes:focus {
        outline: none;
        border-color: var(--rd-color-accent);
}

/* ── Feedback (inline success/error) ────────────────────────────────────── */
.rd-modal-feedback {
        font-size: 0.875rem;
        padding: 0.3rem 1.25rem;
        text-align: center;
        margin: 0;
}

.rd-modal-feedback.rd-success { color: var(--rd-color-success, #2ecc71); }
.rd-modal-feedback.rd-error   { color: var(--rd-color-error, #e74c3c); }

/* ── Sticky footer ──────────────────────────────────────────────────────── */
.rd-modal-footer {
        flex-shrink: 0;
        padding: 0.85rem 1.1rem;
        background: var(--rd-color-bg, #fff);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rd-modal-footer .rd-btn-primary {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1.2rem;
        background: #111;
        color: #fff;
        border: none;
        border-radius: var(--rd-radius, 6px);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
}

.rd-modal-footer .rd-btn-primary:hover:not(:disabled) {
        background: #000;
}

.rd-modal-footer .rd-btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
}

.rd-modal-total {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        opacity: 0.9;
}

/* --- Shared Buttons ------------------------------------------------------- */
.rd-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1.4rem;
        background: var(--rd-color-button-bg);
        color: var(--rd-color-button-text);
        border: none;
        border-radius: var(--rd-radius);
        font-size: 0.9rem;
        font-family: var(--rd-font-button);
        font-weight: var(--rd-btn-font-weight);
        cursor: pointer;
        transition: background 0.2s;
        text-decoration: none;
        white-space: nowrap;
}

.rd-btn-primary:hover  { background: var(--rd-color-button-hover-bg); color: var(--rd-color-button-hover-text); }
.rd-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.rd-btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1.2rem;
        background: none;
        color: var(--rd-color-muted);
        border: 1px solid var(--rd-color-border);
        border-radius: var(--rd-radius);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: border-color 0.15s, color 0.15s;
        text-decoration: none;
}

.rd-btn-secondary:hover { border-color: var(--rd-color-text); color: var(--rd-color-text); }

/* ==========================================================================
   CART
   ========================================================================== */

.rd-cart-wrap {
        font-family: var(--rd-font);
        color: var(--rd-color-text);
        max-width: 640px;
}

.rd-cart-empty {
        padding: 2rem;
        text-align: center;
        color: var(--rd-color-muted);
        border: 1px dashed var(--rd-color-border);
        border-radius: var(--rd-radius);
}

/* --- Cart Item ------------------------------------------------------------ */
.rd-cart-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--rd-color-border);
}

.rd-cart-item-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
}

.rd-cart-item-title { font-weight: 600; font-size: 0.95rem; }
.rd-cart-item-option { font-size: 0.8rem; color: var(--rd-color-muted); }

.rd-cart-item-modifiers {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.8rem;
        color: var(--rd-color-muted);
}

.rd-cart-item-notes {
        font-size: 0.8rem;
        color: var(--rd-color-muted);
        font-style: italic;
}

.rd-cart-item-controls {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
}

.rd-quantity-control--small .rd-qty-btn { padding: 0.3rem 0.55rem; font-size: 0.95rem; }
.rd-quantity-control--small .rd-qty-input { width: 2.5rem; font-size: 0.9rem; }
.rd-cart-qty-display {
        min-width: 2rem;
        text-align: center;
        font-weight: 600;
        font-size: 0.9rem;
}

.rd-cart-item-price { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

.rd-cart-remove {
        background: none;
        border: none;
        color: var(--rd-color-muted);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 0.15rem 0.4rem;
        border-radius: var(--rd-radius);
        line-height: 1;
        transition: color 0.15s;
}

.rd-cart-remove:hover { color: var(--rd-color-error); }

/* --- Cart Totals ---------------------------------------------------------- */
.rd-cart-totals {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
}

.rd-cart-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        color: var(--rd-color-muted);
}

.rd-cart-row--total {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--rd-color-text);
        border-top: 1px solid var(--rd-color-border);
        padding-top: 0.5rem;
        margin-top: 0.25rem;
}

/* --- Cart Actions --------------------------------------------------------- */
.rd-cart-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.25rem;
        flex-wrap: wrap;
        align-items: center;
}

.rd-cart-feedback {
        margin-top: 0.75rem;
        font-size: 0.875rem;
}

.rd-cart-feedback.rd-success { color: var(--rd-color-success); }
.rd-cart-feedback.rd-error   { color: var(--rd-color-error); }

/* --- Misc ----------------------------------------------------------------- */
.rd-notice { color: var(--rd-color-muted); font-style: italic; }
.rd-error   { color: var(--rd-color-error); font-style: italic; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
        .rd-layout-grid .rd-items-wrapper { grid-template-columns: 1fr; }
        .rd-item-header { flex-direction: column; gap: 0.15rem; }
        .rd-item-image--hover { display: none; }
        .rd-item-image--inline img { width: 70px; height: 70px; }

        .rd-modal-hero img { height: 180px; }

        .rd-cart-item { flex-direction: column; gap: 0.5rem; }
        .rd-cart-item-controls { justify-content: space-between; width: 100%; }
        .rd-cart-actions { flex-direction: column; }
        .rd-cart-actions .rd-btn-primary,
        .rd-cart-actions .rd-btn-secondary { width: 100%; justify-content: center; }
}

/* ==========================================================================
   CART CONTAINER & DISPLAY MODES
   ========================================================================== */

/* --- Shared container ---------------------------------------------------- */
.rd-cart-container { position: relative; }

/* --- Panel (shared by compact, floating modes) --------------------------- */
.rd-cart-panel {
        background: var(--rd-color-cart-bg);
        color: var(--rd-color-cart-text);
}

.rd-cart-panel--hidden {
        display: none;
}

.rd-cart-panel.rd-cart-panel--open {
        display: block;
}

.rd-cart-panel-hdr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--rd-color-border);
}

.rd-cart-panel-title {
        font-weight: 700;
        font-size: 1rem;
        color: var(--rd-color-cart-text);
}

.rd-cart-panel-close {
        background: none;
        border: none;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        color: var(--rd-color-muted);
        padding: 0.2rem 0.5rem;
        border-radius: var(--rd-radius);
        transition: color 0.15s;
}

.rd-cart-panel-close:hover { color: var(--rd-color-text); }

/* --- MODE: full_sticky_bar ----------------------------------------------- */
.rd-cart--full .rd-cart-panel {
        display: block;
}

/* --- MODE: compact_sticky_bar -------------------------------------------- */
.rd-cart--compact .rd-cart-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        background: var(--rd-color-cart-bg);
        color: var(--rd-color-cart-text);
        border-top: 2px solid var(--rd-color-accent);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        cursor: pointer;
        gap: 1rem;
        user-select: none;
}

.rd-cart--compact .rd-cart-bar:focus { outline: 2px solid var(--rd-color-accent); }

.rd-cart-bar-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
}

.rd-cart-bar-icon {
        font-size: 1.3rem;
        color: var(--rd-color-cart-icon);
        line-height: 1;
}

.rd-cart-bar-count {
        font-weight: 600;
        font-size: 0.9rem;
}

.rd-cart-bar-subtotal {
        font-size: 0.9rem;
        color: var(--rd-color-muted);
}

.rd-cart-bar-toggle-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--rd-color-accent);
}

.rd-cart--compact .rd-cart-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9991;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.2);
        border-top: 2px solid var(--rd-color-accent);
        background: var(--rd-color-cart-bg);
}

.rd-cart--compact .rd-cart-panel .rd-cart-wrap {
        padding: 1rem 1.25rem;
        max-width: none;
}

/* --- MODE: floating_icon / floating_icon_with_count ---------------------- */
.rd-cart--floating-icon .rd-cart-float-btn,
.rd-cart--floating-icon-count .rd-cart-float-btn {
        position: fixed;
        bottom: 1.75rem;
        right: 1.75rem;
        z-index: 9990;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: var(--rd-color-button-bg);
        color: var(--rd-color-button-text);
        border: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        transition: transform 0.15s, background 0.2s;
        position: fixed;
}

.rd-cart--floating-icon .rd-cart-float-btn:hover,
.rd-cart--floating-icon-count .rd-cart-float-btn:hover {
        background: var(--rd-color-button-hover-bg);
        transform: scale(1.07);
}

.rd-cart-float-icon { line-height: 1; }

.rd-cart-float-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: var(--rd-color-cart-badge-bg);
        color: var(--rd-color-cart-badge-text);
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        padding: 0 4px;
        pointer-events: none;
}

.rd-cart--floating-icon .rd-cart-panel,
.rd-cart--floating-icon-count .rd-cart-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 360px;
        max-width: 100vw;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 9991;
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2);
        border-radius: var(--rd-radius-lg) var(--rd-radius-lg) 0 0;
        background: var(--rd-color-cart-bg);
}

.rd-cart--floating-icon .rd-cart-panel .rd-cart-wrap,
.rd-cart--floating-icon-count .rd-cart-panel .rd-cart-wrap {
        padding: 1rem 1.25rem;
        max-width: none;
}

@media (max-width: 600px) {
        .rd-cart--floating-icon .rd-cart-panel,
        .rd-cart--floating-icon-count .rd-cart-panel {
                width: 100vw;
                right: 0;
        }
        .rd-cart--floating-icon .rd-cart-float-btn,
        .rd-cart--floating-icon-count .rd-cart-float-btn {
                bottom: 1rem;
                right: 1rem;
        }
}

/* =========================================================================
   Item name link (menu shortcode)
   ========================================================================= */

.rd-menu-system .rd-item-link {
        color: inherit;
        text-decoration: none;
}

.rd-menu-system .rd-item-link:hover,
.rd-menu-system .rd-item-link:focus {
        text-decoration: underline;
        text-underline-offset: 3px;
        outline: none;
}

/* =========================================================================
   Hover image mode — reserve space in item body so image doesn't overlap
   ========================================================================= */

.rd-menu-system .rd-image-mode-hover .rd-item-body {
        padding-right: 145px;
}

@media (max-width: 480px) {
        .rd-menu-system .rd-image-mode-hover .rd-item-body {
                padding-right: 0;
        }
        .rd-menu-system .rd-image-mode-hover .rd-item-image--hover {
                position: static;
                width: 100%;
                margin-bottom: 0.5rem;
        }
}

/* =========================================================================
   Single item page  (.rd-item-single)
   ========================================================================= */

.rd-item-single {
        padding: 2rem 1rem;
        max-width: 800px;
        margin: 0 auto;
}

.rd-back-to-menu {
        display: inline-block;
        margin-bottom: 1rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--rd-accent, #e65100);
        text-decoration: none;
}

.rd-back-to-menu:hover {
        text-decoration: underline;
}

.rd-item-single-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
}

@media (min-width: 640px) {
        .rd-item-single-wrap {
                grid-template-columns: minmax(220px, 340px) 1fr;
                align-items: start;
        }
}

/* Image */
.rd-item-single-media {
        border-radius: var(--rd-radius-md, 8px);
        overflow: hidden;
        line-height: 0;
}

.rd-item-single-media .rd-item-hero-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
}

/* Content column */
.rd-item-single-restaurant {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--rd-color-text, #555);
        margin: 0 0 0.35rem;
        opacity: 0.7;
}

.rd-item-single-name {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--rd-color-heading, #111);
        margin: 0 0 0.5rem;
        line-height: 1.25;
}

.rd-item-single-price {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--rd-color-primary, #e05);
        margin: 0 0 0.75rem;
}

.rd-item-single-price .rd-from {
        font-weight: 400;
        font-size: 0.85em;
        opacity: 0.75;
        margin-right: 0.2em;
}

.rd-item-single-desc {
        font-size: 0.95rem;
        color: var(--rd-color-text, #444);
        line-height: 1.6;
        margin: 0 0 1.25rem;
}

/* Sub-sections (Sizes, Choices, Add-Ons) */
.rd-item-single-section {
        margin-bottom: 1.25rem;
}

.rd-item-single-section h2 {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        color: var(--rd-color-heading, #111);
        margin: 0 0 0.5rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
}

.rd-item-single-choice-group {
        margin-bottom: 0.75rem;
}

.rd-item-single-choice-group h3 {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--rd-color-text, #555);
        margin: 0 0 0.3rem;
}

.rd-choice-help {
        font-size: 0.75rem;
        color: var(--rd-color-text, #777);
        margin: 0 0 0.3rem;
        opacity: 0.75;
}

.rd-item-detail-list {
        list-style: none;
        margin: 0;
        padding: 0;
}

.rd-item-detail-list li {
        padding: 0.2rem 0;
        font-size: 0.9rem;
        color: var(--rd-color-text, #444);
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
}

.rd-adj-price {
        opacity: 0.7;
        font-size: 0.85em;
}

.rd-size-price {
        opacity: 0.7;
        font-weight: 400;
}

/* Order button on single page */
.rd-item-single-action {
        margin-top: 1.25rem;
}

.rd-item-single-action .rd-add-to-cart {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 1.4rem;
        font-size: 0.95rem;
        font-weight: 600;
        background: var(--rd-color-button-bg, #e05);
        color: var(--rd-color-button-text, #fff);
        border: none;
        border-radius: var(--rd-radius-sm, 4px);
        cursor: pointer;
        transition: background 0.2s, transform 0.1s;
}

.rd-item-single-action .rd-add-to-cart:hover {
        background: var(--rd-color-button-hover-bg, #c04);
        transform: translateY(-1px);
}

/* =========================================================================
   Item image position — left (default) / right
   ========================================================================= */

/* Image always appears before the item body in the DOM.
   For right-position we flip the flex order. */
.rd-menu-system .rd-menu-item.rd-image-pos-right {
        flex-direction: row-reverse;
}

/* Clickable image trigger — pointer cursor + subtle scale on hover */
.rd-menu-system .rd-item-img-trigger {
        cursor: pointer;
        transition: opacity 0.15s;
}

.rd-menu-system .rd-item-img-trigger:hover,
.rd-menu-system .rd-item-img-trigger:focus {
        opacity: 0.88;
        outline: 2px solid var(--rd-color-accent, #e05);
        outline-offset: 2px;
        border-radius: var(--rd-radius, 6px);
}

/* Hidden data-carrier button (ordering off) */
.rd-menu-system .rd-add-to-cart.rd-preview-trigger {
        display: none;
}

/* =========================================================================
   Item Detail Page — extended sections
   ========================================================================= */

/* Long / detail-page description */
.rd-item-single-long-desc {
        margin-top: 1rem;
        font-size: 1rem;
        line-height: 1.7;
        color: inherit;
}

.rd-item-single-long-desc p {
        margin: 0 0 0.75rem;
}

/* Options block (choice groups + add-ons) — full width below hero */
.rd-item-single-options {
        max-width: 860px;
        margin: 2rem auto 0;
        padding: 0 1.25rem;
}

/* About Us */
.rd-item-single-about {
        max-width: 860px;
        margin: 2.5rem auto 0;
        padding: 2rem 1.25rem;
        border-top: 2px solid var(--rd-color-border, #e8e8e8);
}

.rd-item-single-about-heading {
        margin: 0 0 0.75rem;
        font-size: 1.4rem;
}

.rd-item-single-about-body {
        font-size: 1rem;
        line-height: 1.75;
        color: inherit;
}

.rd-item-single-about-body p {
        margin: 0 0 0.75rem;
}

/* Can We Tempt You? */
.rd-item-single-tempt {
        max-width: 860px;
        margin: 2.5rem auto 2.5rem;
        padding: 0 1.25rem;
        border-top: 2px solid var(--rd-color-border, #e8e8e8);
        padding-top: 2rem;
}

.rd-item-single-tempt-heading {
        margin: 0 0 1.25rem;
        font-size: 1.4rem;
}

.rd-tempt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.1rem;
}

.rd-tempt-card {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--rd-color-border, #e8e8e8);
        border-radius: var(--rd-radius, 6px);
        overflow: hidden;
        transition: box-shadow 0.15s, transform 0.15s;
}

.rd-tempt-card:hover,
.rd-tempt-card:focus {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        outline: 2px solid var(--rd-color-accent, #e05);
        outline-offset: 2px;
}

.rd-tempt-card-img img {
        width: 100%;
        height: 130px;
        object-fit: cover;
        display: block;
}

.rd-tempt-card-body {
        padding: 0.65rem 0.75rem 0.8rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
}

.rd-tempt-card-name {
        margin: 0;
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.3;
}

.rd-tempt-card-price {
        margin: 0;
        font-size: 0.88rem;
        color: var(--rd-color-accent, #e05);
        font-weight: 600;
}

.rd-tempt-card-desc {
        margin: 0;
        font-size: 0.8rem;
        color: #666;
        line-height: 1.4;
}

@media (max-width: 600px) {
        .rd-tempt-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
        .rd-tempt-card-img img { height: 100px; }
}

/* =========================================================================
   Item image badge (label word below the image)
   ========================================================================= */
.rd-item-image-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
}

.rd-item-badge {
        display: inline-block;
        margin-top: 0.35rem;
        padding: 0.18rem 0.65rem;
        background: var(--rd-color-accent, #e05);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: 999px;
        line-height: 1.4;
        white-space: nowrap;
}