/* ==========================================================================
   Royal Dine Theme — OrderFriendly storefront
   Dark + gold fine-dining aesthetic. Fully self-contained: this file supplies
   its own reset, grid, typography and components so the homepage renders
   correctly even though the shared fastfood style.css is NOT loaded on the
   theme index route. Header/footer styles here are also loaded on inner pages.
   All colours are driven by CSS variables so per-tenant base_color can tint
   the accent via --bs-primary (set by the base layout).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Jost:wght@300;400;500;600&display=swap');

:root {
    --rd-bg: #100e0b;
    --rd-bg-alt: #17140f;
    --rd-surface: #1e1a13;
    --rd-surface-2: #241f16;
    --rd-line: rgba(200, 162, 76, 0.22);
    --rd-gold: #c8a24c;
    --rd-gold-soft: #e2c579;
    --rd-gold-deep: #a9863a;
    --rd-cream: #f6f1e6;
    --rd-muted: #b3ab98;
    --rd-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    --rd-radius: 4px;
    --rd-head: 'Playfair Display', Georgia, serif;
    --rd-body: 'Jost', 'Segoe UI', system-ui, sans-serif;
}

/* If a tenant sets a base color, let it inform the accent while keeping gold
   as a graceful default. */
.theme-royaldine {
    --rd-accent: var(--bs-primary, var(--rd-gold));
}

/* ----------------------------------------------------------------- reset -- */
.theme-royaldine,
.theme-royaldine * {
    box-sizing: border-box;
}

body.theme-royaldine {
    margin: 0;
    padding: 0;
    background: var(--rd-bg);
    color: var(--rd-cream);
    font-family: var(--rd-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.theme-royaldine img {
    max-width: 100%;
    height: auto;
    display: block;
}

.theme-royaldine a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.theme-royaldine ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.theme-royaldine h1,
.theme-royaldine h2,
.theme-royaldine h3,
.theme-royaldine h4,
.theme-royaldine h5 {
    font-family: var(--rd-head);
    color: var(--rd-cream);
    margin: 0 0 0.5em;
    font-weight: 600;
    line-height: 1.2;
}

.theme-royaldine p {
    margin: 0 0 1rem;
    color: var(--rd-muted);
}

/* ---------------------------------------------------------------- layout -- */
.rd-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.rd-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.rd-row > [class^="rd-col"] {
    padding: 0 15px;
    width: 100%;
}

.rd-grid {
    display: grid;
    gap: 26px;
}

.rd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid-4 { grid-template-columns: repeat(4, 1fr); }

.rd-section {
    padding: 100px 0;
    position: relative;
}

.rd-section--tight { padding: 70px 0; }
.rd-bg-alt { background: var(--rd-bg-alt); }

/* decorative section backdrops --------------------------------------------- */
/* Subtle gold girih lattice on the alternating dark sections (intro, special,
   reservation) so they are not flat. The overlay sits behind all content and
   never intercepts clicks. Content is lifted with z-index:1. */
.rd-bg-alt { overflow: hidden; }
.rd-bg-alt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/pattern-dark.png') repeat;
    background-size: 320px auto;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}
.rd-bg-alt > * { position: relative; z-index: 1; }

/* Warm, dark backdrop behind the Featured Specialties menu for depth. The
   double gradient keeps cards and text fully legible over the photo. */
.rd-menu-section {
    background:
        linear-gradient(rgba(16, 14, 11, 0.92), rgba(16, 14, 11, 0.96)),
        url('../images/special-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media (max-width: 991px) {
    .rd-menu-section { background-attachment: scroll; }
}

/* section heading ---------------------------------------------------------- */
.rd-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
}

.rd-heading .rd-eyebrow {
    display: inline-block;
    font-family: var(--rd-body);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    color: var(--rd-gold);
    margin-bottom: 14px;
}

.rd-heading .rd-eyebrow::before,
.rd-heading .rd-eyebrow::after {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    background: var(--rd-gold);
    vertical-align: middle;
    margin: 0 12px;
    opacity: 0.7;
}

.rd-heading h2 {
    font-size: 42px;
    margin: 0;
}

.rd-heading h2 span { color: var(--rd-gold); }

/* buttons ------------------------------------------------------------------ */
.rd-btn {
    display: inline-block;
    padding: 14px 34px;
    font-family: var(--rd-body);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 13px;
    border: 1px solid var(--rd-gold);
    color: var(--rd-bg);
    background: var(--rd-gold);
    cursor: pointer;
    border-radius: var(--rd-radius);
    text-align: center;
}

.rd-btn:hover {
    background: transparent;
    color: var(--rd-gold-soft);
}

.rd-btn--ghost {
    background: transparent;
    color: var(--rd-cream);
    border-color: rgba(246, 241, 230, 0.4);
}

.rd-btn--ghost:hover {
    border-color: var(--rd-gold);
    color: var(--rd-gold);
}

.rd-btn--sm {
    padding: 10px 22px;
    font-size: 12px;
}

/* Green CTA (primary "View Menu" in the reference). Uses a deep herb green with
   a gold hover so it still belongs to the palette. */
.rd-btn--green {
    background: #2f6d4f;
    border-color: #2f6d4f;
    color: #fff;
}
.rd-btn--green:hover {
    background: transparent;
    border-color: var(--rd-gold);
    color: var(--rd-gold);
}

/* Dark CTA (Reserve / Catering in the reference): translucent dark with a gold
   outline that fills to gold on hover. */
.rd-btn--dark {
    background: rgba(16, 14, 11, 0.55);
    border-color: rgba(246, 241, 230, 0.35);
    color: var(--rd-cream);
}
.rd-btn--dark:hover {
    background: var(--rd-gold);
    border-color: var(--rd-gold);
    color: var(--rd-bg);
}

/* ========================================================================= */
/*  HEADER                                                                    */
/* ========================================================================= */
.rd-header {
    position: relative;
    z-index: 30;
    background: var(--rd-bg);
    border-bottom: 1px solid var(--rd-line);
}

.rd-topbar {
    border-bottom: 1px solid var(--rd-line);
    font-size: 13px;
    color: var(--rd-muted);
}

.rd-topbar .rd-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 14px;
    flex-wrap: wrap;
}

.rd-topbar .rd-info span {
    margin-right: 22px;
    white-space: nowrap;
}

.rd-topbar .rd-info i,
.rd-topbar .rd-tools i { color: var(--rd-gold); margin-right: 7px; }

.rd-topbar .rd-tools {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rd-social-links { display: flex; gap: 14px; }
.rd-social-links a:hover { color: var(--rd-gold); }

.rd-lang { position: relative; }
.rd-lang .rd-lang-btn { cursor: pointer; }
.rd-lang .rd-lang-menu {
    position: absolute;
    right: 0;
    top: 130%;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    min-width: 140px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 40;
}
.rd-lang:hover .rd-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-lang .rd-lang-menu li a { display: block; padding: 7px 18px; }
.rd-lang .rd-lang-menu li a:hover { background: var(--rd-surface-2); color: var(--rd-gold); }

.rd-cart, .rd-login a { position: relative; }
.rd-cart:hover, .rd-login a:hover { color: var(--rd-gold); }
.rd-cart .rd-cart-count {
    position: absolute;
    top: -10px;
    right: -12px;
    background: var(--rd-gold);
    color: var(--rd-bg);
    font-size: 10px;
    font-weight: 600;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    border-radius: 50%;
    padding: 0 4px;
}

/* nav ---------------------------------------------------------------------- */
.rd-nav .rd-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    gap: 20px;
}

.rd-brand img { max-height: 58px; width: auto; }
.rd-brand .rd-brand-text {
    font-family: var(--rd-head);
    font-size: 26px;
    color: var(--rd-gold);
    letter-spacing: 1px;
}

.rd-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.rd-menu > li { position: relative; }

.rd-menu > li > a {
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--rd-cream);
    padding: 10px 0;
    display: inline-block;
}

.rd-menu > li > a:hover,
.rd-menu > li.rd-active > a { color: var(--rd-gold); }

.rd-menu .rd-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 210px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 40;
}
.rd-menu li:hover > .rd-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-menu .rd-submenu li a { display: block; padding: 9px 22px; font-size: 14px; text-transform: none; letter-spacing: 0.4px; }
.rd-menu .rd-submenu li a:hover { background: var(--rd-surface-2); color: var(--rd-gold); }

.rd-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rd-hours { text-align: right; line-height: 1.3; }
.rd-hours span { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rd-muted); }
.rd-hours span i { color: var(--rd-gold); margin-right: 5px; }
.rd-hours p { margin: 0; color: var(--rd-cream); font-weight: 500; }

.rd-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--rd-line);
    color: var(--rd-gold);
    width: 46px;
    height: 42px;
    font-size: 20px;
    border-radius: var(--rd-radius);
    cursor: pointer;
}

/* ========================================================================= */
/*  HERO                                                                      */
/* ========================================================================= */
.rd-hero { position: relative; }
.rd-hero .swiper { width: 100%; }

.rd-hero-slide {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.rd-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 9, 7, 0.92) 0%, rgba(12, 10, 8, 0.72) 45%, rgba(12, 10, 8, 0.35) 100%);
}

.rd-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 60px 0;
}

.rd-hero-eyebrow {
    display: inline-block;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--rd-gold);
    margin-bottom: 18px;
}

.rd-hero-inner h1 {
    font-size: 66px;
    line-height: 1.08;
    margin: 0 0 22px;
}

.rd-hero-inner p {
    font-size: 18px;
    color: #ded7c6;
    max-width: 520px;
    margin-bottom: 34px;
}

.rd-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Centered hero variant (matches the reference layout): the copy column is
   centered, the overlay is symmetric/darker for legibility over a full food
   spread, and the CTAs center under the headline. */
.rd-hero--center { text-align: center; }
.rd-hero--center::before {
    background: radial-gradient(ellipse at center, rgba(10, 9, 7, 0.55) 0%, rgba(10, 9, 7, 0.82) 100%);
}
.rd-hero--center .rd-hero-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 96px 0;
}
.rd-hero--center .rd-hero-btns { justify-content: center; }
.rd-hero--center .rd-hero-inner p { margin-left: auto; margin-right: auto; }

/* Two-tone serif headline: white lead line, gold emphasis word(s) wrapped in a
   <span> by the tenant if desired; base color stays cream/gold. */
.rd-hero-title {
    font-size: 74px;
    line-height: 1.06;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.rd-hero-title span { color: var(--rd-gold); }

/* Ornamental gold divider under the headline (the flourish in the reference).
   Pure CSS so it needs no image and tints with the accent. */
.rd-hero-flourish {
    display: block;
    width: 220px;
    max-width: 60%;
    height: 22px;
    margin: 0 auto 26px;
    position: relative;
}
.rd-hero-flourish::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rd-gold), transparent);
}
.rd-hero-flourish::after {
    content: "\f005"; /* fa star as the centered diamond ornament */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--rd-gold);
    font-size: 12px;
    padding: 0 12px;
    text-shadow: 0 0 10px rgba(10, 9, 7, 0.9);
}

.rd-hero .swiper-button-next,
.rd-hero .swiper-button-prev {
    color: var(--rd-gold);
    width: 52px;
    height: 52px;
    border: 1px solid var(--rd-line);
    border-radius: 50%;
    background: rgba(16, 14, 11, 0.5);
}
.rd-hero .swiper-button-next::after,
.rd-hero .swiper-button-prev::after { font-size: 18px; }
.rd-hero .swiper-pagination-bullet { background: var(--rd-cream); opacity: 0.5; }
.rd-hero .swiper-pagination-bullet-active { background: var(--rd-gold); opacity: 1; }

/* ========================================================================= */
/*  FEATURE STRIP                                                             */
/* ========================================================================= */
.rd-bottom-img { text-align: center; margin-bottom: 60px; }
.rd-bottom-img img { display: inline-block; }

.rd-feature-card {
    text-align: center;
    padding: 40px 26px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.rd-feature-card:hover { transform: translateY(-8px); border-color: var(--rd-gold); }
.rd-feature-card img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 20px; }
.rd-feature-card .rd-fc-icon {
    width: 64px; height: 64px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--rd-gold);
    border: 1px solid var(--rd-line); border-radius: 50%;
}
.rd-feature-card a, .rd-feature-card h4 {
    font-family: var(--rd-head);
    font-size: 20px;
    color: var(--rd-cream);
    display: block;
}
.rd-feature-card:hover a { color: var(--rd-gold); }

/* Slim dark inline feature strip (the gold-icon band in the reference).
   A single dark bar of items separated by faint vertical dividers. Wraps
   gracefully and drops the dividers when it stacks on small screens. */
.rd-feature-strip-wrap {
    background: var(--rd-bg-alt);
    border-top: 1px solid var(--rd-line);
    border-bottom: 1px solid var(--rd-line);
    padding: 26px 0;
}
.rd-feature-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 0;
}
.rd-feature-item {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 24px;
    position: relative;
    text-align: left;
}
.rd-feature-item + .rd-feature-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: var(--rd-line);
}
.rd-feature-ico {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rd-feature-ico img { width: 42px; height: 42px; object-fit: contain; }
.rd-feature-ico--fa { font-size: 26px; color: var(--rd-gold); }
.rd-feature-label {
    font-family: var(--rd-head);
    font-size: 17px;
    color: var(--rd-cream);
    line-height: 1.25;
}

/* ========================================================================= */
/*  INTRO / WELCOME                                                           */
/* ========================================================================= */
.rd-intro .rd-row { align-items: center; }
.rd-intro-media,
.rd-intro-body { max-width: 50%; flex: 0 0 50%; }
.rd-intro-media { position: relative; }
.rd-intro-media img { border-radius: var(--rd-radius); width: 100%; object-fit: cover; display: block; }
/* Decorative offset frame bleeds down-and-left (outward), never into the text
   column on the right, so the heading/body keep a clean gutter. */
.rd-intro-media .rd-intro-frame {
    position: absolute; inset: 18px 18px -18px -18px;
    border: 1px solid var(--rd-gold);
    border-radius: var(--rd-radius);
    z-index: -1;
    pointer-events: none;
}
/* Breathing room between the image and the copy on desktop. */
.rd-intro .rd-intro-body { padding-left: 46px; }

/* Green welcome panel (matches the reference right-hand block): a deep herb
   green card carrying the copy, signature, highlights grid and contact box. */
.rd-intro-panel {
    background: linear-gradient(150deg, #285e44 0%, #1f4c37 100%);
    border: 1px solid rgba(200, 162, 76, 0.28);
    border-radius: var(--rd-radius);
    padding: 44px 40px;
    box-shadow: var(--rd-shadow);
}
.rd-intro-panel .rd-eyebrow {
    display: inline-block; letter-spacing: 4px; text-transform: uppercase;
    font-size: 13px; font-weight: 500; color: var(--rd-gold-soft); margin-bottom: 14px;
}
.rd-intro-panel h2 { font-size: 38px; margin-bottom: 18px; color: #fff; }
.rd-intro-panel p { color: rgba(246, 241, 230, 0.85); }
.rd-intro-panel .rd-signature { margin-top: 12px; max-height: 66px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }

/* 2x2 highlights grid inside the panel. */
.rd-intro-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid rgba(246, 241, 230, 0.16);
}
.rd-fact {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rd-fact-ico {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200, 162, 76, 0.55);
    border-radius: 50%;
    color: var(--rd-gold-soft);
    font-size: 20px;
}
.rd-fact-ico img { width: 26px; height: 26px; object-fit: contain; }
.rd-fact-label {
    font-family: var(--rd-head);
    font-size: 17px;
    color: #fff;
    line-height: 1.25;
}

.rd-intro-contact {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 26px; padding: 14px 24px;
    background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(200, 162, 76, 0.3); border-radius: var(--rd-radius);
}
.rd-intro-contact i { font-size: 26px; color: var(--rd-gold-soft); }
.rd-intro-contact span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(246, 241, 230, 0.72); }
.rd-intro-contact p { margin: 0; font-family: var(--rd-head); font-size: 22px; color: #fff; }

.rd-video-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 74px; height: 74px; border-radius: 50%;
    background: var(--rd-gold); color: var(--rd-bg); font-size: 20px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* ========================================================================= */
/*  MENU / SPECIALTIES                                                        */
/* ========================================================================= */
.rd-menu-tabs {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 12px; margin-bottom: 46px;
}
.rd-menu-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px; cursor: pointer;
    border: 1px solid var(--rd-line); border-radius: 50px;
    background: transparent; color: var(--rd-cream);
    font-weight: 500; letter-spacing: 0.6px; font-size: 14px;
}
.rd-menu-tab img { width: 26px; height: 26px; object-fit: contain; }
.rd-menu-tab:hover { border-color: var(--rd-gold); color: var(--rd-gold); }
.rd-menu-tab.rd-active { background: var(--rd-gold); border-color: var(--rd-gold); color: var(--rd-bg); }
.rd-menu-tab.rd-active img { filter: brightness(0) invert(0); }

.rd-tab-pane { display: none; }
.rd-tab-pane.rd-show { display: block; animation: rdFade 0.5s ease; }
@keyframes rdFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.rd-dish {
    display: flex; gap: 20px; align-items: center;
    padding: 20px; background: var(--rd-surface);
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius);
    height: 100%;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.rd-dish:hover { border-color: var(--rd-gold); transform: translateY(-4px); }
.rd-dish-thumb {
    flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%;
    overflow: hidden; border: 2px solid var(--rd-line); position: relative;
}
.rd-dish-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rd-dish-body { flex: 1; min-width: 0; }
.rd-dish-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    border-bottom: 1px dashed var(--rd-line); padding-bottom: 8px; margin-bottom: 8px;
}
.rd-dish-head .rd-dish-name {
    font-family: var(--rd-head); font-size: 20px; color: var(--rd-cream);
}
.rd-dish:hover .rd-dish-name { color: var(--rd-gold); }
.rd-dish-price { font-family: var(--rd-head); font-size: 20px; color: var(--rd-gold); white-space: nowrap; }
.rd-dish-price del { font-size: 14px; color: var(--rd-muted); margin-left: 6px; }
.rd-dish-body p { font-size: 14px; margin: 0 0 10px; }
.rd-dish-flag {
    display: inline-block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--rd-gold); border: 1px solid var(--rd-gold); border-radius: 3px; padding: 2px 8px; margin-right: 8px;
}
.rd-add-cart {
    display: inline-block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--rd-gold); cursor: pointer; font-weight: 500;
}
.rd-add-cart:hover { color: var(--rd-gold-soft); }
.rd-menu-more { text-align: center; margin-top: 50px; }
.rd-empty { text-align: center; padding: 40px; color: var(--rd-muted); }

/* ========================================================================= */
/*  SPECIAL                                                                   */
/* ========================================================================= */
/* Image-top food cards (matches the "Our Featured Specialties" row in the
   reference): full-width photo header with a gold "Special" badge, then a body
   with the dish name, short summary and a price/add-to-cart footer. */
.rd-special-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--rd-surface); border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius); height: 100%; overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.rd-special-card:hover { transform: translateY(-8px); border-color: var(--rd-gold); }
.rd-special-thumb {
    display: block; position: relative;
    aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 0; border: 0;
}
.rd-special-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rd-special-card:hover .rd-special-thumb img { transform: scale(1.06); }
.rd-special-badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--rd-gold); color: var(--rd-bg);
    font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 3px;
}
.rd-special-body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column; flex: 1;
}
.rd-special-name {
    font-family: var(--rd-head); font-size: 21px; color: var(--rd-cream);
    display: block; margin-bottom: 8px;
}
.rd-special-card:hover .rd-special-name { color: var(--rd-gold); }
.rd-special-body p { font-size: 14px; margin: 0 0 16px; }
.rd-special-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rd-line);
}
.rd-special-foot .rd-dish-price { font-family: var(--rd-head); font-size: 22px; color: var(--rd-gold); }
.rd-special-foot .rd-dish-price del { font-size: 14px; color: var(--rd-muted); margin-left: 6px; }

/* ========================================================================= */
/*  TEAM / CHEFS                                                              */
/* ========================================================================= */
.rd-chef {
    text-align: center; background: var(--rd-surface);
    border: 1px solid var(--rd-line); border-radius: var(--rd-radius); overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.rd-chef:hover { transform: translateY(-8px); border-color: var(--rd-gold); }
.rd-chef-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.rd-chef-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rd-chef-social {
    position: absolute; inset: auto 0 0 0; padding: 14px;
    display: flex; gap: 14px; justify-content: center;
    background: linear-gradient(0deg, rgba(16,14,11,0.9), transparent);
    transform: translateY(100%); transition: transform 0.3s ease;
}
.rd-chef:hover .rd-chef-social { transform: translateY(0); }
.rd-chef-social a { color: var(--rd-cream); }
.rd-chef-social a:hover { color: var(--rd-gold); }
.rd-chef-body { padding: 20px; }
.rd-chef-body h4 { font-size: 20px; margin: 0 0 4px; }
.rd-chef-body span { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--rd-gold); }

/* ========================================================================= */
/*  TESTIMONIALS                                                              */
/* ========================================================================= */
.rd-testi { position: relative; background-size: cover; background-position: center; }
.rd-testi::before { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 8, 0.86); }
.rd-testi .rd-container { position: relative; z-index: 2; }
.rd-testi-card {
    background: var(--rd-surface); border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius); padding: 34px; height: 100%;
}
.rd-testi-card .rd-quote { font-size: 30px; color: var(--rd-gold); line-height: 1; margin-bottom: 14px; }
.rd-testi-card p { color: #ded7c6; font-style: italic; }
.rd-testi-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.rd-testi-foot img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rd-gold); }
.rd-testi-foot h5 { margin: 0; font-size: 17px; }
.rd-testi-foot span { font-size: 13px; color: var(--rd-muted); }
.rd-testi-stars { color: var(--rd-gold); margin-top: 4px; font-size: 13px; }

/* ========================================================================= */
/*  BLOG                                                                      */
/* ========================================================================= */
.rd-post {
    background: var(--rd-surface); border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius); overflow: hidden; height: 100%;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.rd-post:hover { transform: translateY(-8px); border-color: var(--rd-gold); }
.rd-post-thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.rd-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rd-post:hover .rd-post-thumb img { transform: scale(1.06); }
.rd-post-body { padding: 26px; }
.rd-post-body h3 { font-size: 21px; margin-bottom: 10px; }
.rd-post-body h3 a:hover { color: var(--rd-gold); }
.rd-post-meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rd-line);
    font-size: 13px; color: var(--rd-muted);
}
.rd-post-meta a { color: var(--rd-gold); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.rd-post-meta i { color: var(--rd-gold); margin-right: 5px; }

/* ========================================================================= */
/*  RESERVATION MAP                                                           */
/* ========================================================================= */
.rd-map iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(0.4) contrast(1.05); }

/* ========================================================================= */
/*  BOTTOM CTA BAND                                                           */
/* ========================================================================= */
/* Full-bleed row of tall photo panels (Catering / Reservations / Order Online
   in the reference). Each panel has a darkening overlay so the gold eyebrow,
   serif heading and button stay legible over the food photography. The grid
   auto-fits however many panels the tenant's permissions leave visible. */
.rd-cta-band { position: relative; }
.rd-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rd-cta-panel {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.rd-cta-panel::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(10, 9, 7, 0.92) 0%, rgba(10, 9, 7, 0.45) 55%, rgba(10, 9, 7, 0.25) 100%);
    transition: background 0.35s ease;
}
.rd-cta-panel:hover::before {
    background: linear-gradient(0deg, rgba(10, 9, 7, 0.94) 0%, rgba(10, 9, 7, 0.55) 60%, rgba(31, 76, 55, 0.35) 100%);
}
.rd-cta-inner {
    position: relative;
    z-index: 2;
    padding: 40px 36px 44px;
    width: 100%;
}
.rd-cta-inner .rd-eyebrow {
    display: inline-block; letter-spacing: 3px; text-transform: uppercase;
    font-size: 12px; font-weight: 500; color: var(--rd-gold); margin-bottom: 10px;
}
.rd-cta-inner h3 { font-size: 30px; margin: 0 0 10px; color: #fff; }
.rd-cta-inner p { color: rgba(246, 241, 230, 0.82); margin-bottom: 22px; max-width: 340px; }

/* ========================================================================= */
/*  FOOTER                                                                    */
/* ========================================================================= */
.rd-footer {
    background: var(--rd-bg-alt);
    border-top: 1px solid var(--rd-line);
    padding: 70px 0 0;
}
.rd-footer .rd-row { align-items: flex-start; }
.rd-foot-hours { max-width: 25%; flex: 0 0 25%; }
.rd-foot-brand { max-width: 50%; flex: 0 0 50%; }
.rd-foot-subscribe { max-width: 25%; flex: 0 0 25%; }
.rd-foot-col { margin-bottom: 40px; }
.rd-foot-col h5 {
    font-size: 20px; margin-bottom: 20px; position: relative; padding-bottom: 12px;
}
.rd-foot-col h5::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--rd-gold);
}
.rd-foot-brand { text-align: center; }
.rd-foot-brand img { max-height: 66px; width: auto; margin: 0 auto 20px; }
.rd-foot-hours i { color: var(--rd-gold); font-size: 22px; }
.rd-foot-hours h5::after { display: none; }
.rd-foot-hours span { color: var(--rd-cream); }
.rd-foot-links li { margin-bottom: 10px; }
.rd-foot-links li a { color: var(--rd-muted); }
.rd-foot-links li a:hover { color: var(--rd-gold); padding-left: 4px; }
.rd-foot-social { display: flex; gap: 14px; margin-top: 20px; justify-content: center; }
.rd-foot-social a {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rd-line); border-radius: 50%; color: var(--rd-cream);
}
.rd-foot-social a:hover { border-color: var(--rd-gold); color: var(--rd-gold); }

.rd-subscribe { position: relative; margin-bottom: 18px; }
.rd-subscribe input {
    width: 100%; background: var(--rd-surface); border: 1px solid var(--rd-line);
    color: var(--rd-cream); padding: 14px 52px 14px 18px; border-radius: var(--rd-radius);
    font-family: var(--rd-body); outline: none;
}
.rd-subscribe input:focus { border-color: var(--rd-gold); }
.rd-subscribe button {
    position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px;
    background: var(--rd-gold); color: var(--rd-bg); border: 0; border-radius: var(--rd-radius); cursor: pointer;
}
.rd-subscribe button:hover { background: var(--rd-gold-soft); }
.err-email { color: #e0796b; font-size: 13px; }

.rd-copyright {
    border-top: 1px solid var(--rd-line);
    margin-top: 20px; padding: 24px 0; text-align: center;
    color: var(--rd-muted); font-size: 14px;
}
.rd-copyright a { color: var(--rd-gold); }

/* ========================================================================= */
/*  RESPONSIVE                                                                */
/* ========================================================================= */
@media (max-width: 991px) {
    .rd-hero-inner h1 { font-size: 48px; }
    .rd-heading h2 { font-size: 34px; }
    .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .rd-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .rd-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .rd-menu {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--rd-surface); border-top: 1px solid var(--rd-line);
        padding: 10px 20px; display: none; z-index: 40;
    }
    .rd-menu.rd-open { display: flex; }
    .rd-menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--rd-line); }
    .rd-menu .rd-submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        border: 0; padding: 0 0 0 16px; background: transparent;
    }
    .rd-hours { display: none; }
    .rd-intro .rd-row { flex-direction: column-reverse; }
    .rd-intro-media,
    .rd-intro-body { max-width: 100%; flex: 0 0 100%; }
    .rd-intro-media { margin-bottom: 40px; }
    /* Drop the desktop copy gutter once the columns stack. */
    .rd-intro .rd-intro-body { padding-left: 15px; }
    .rd-intro-panel { padding: 34px 28px; }
    .rd-intro-panel h2 { font-size: 32px; }
    .rd-hero-title { font-size: 54px; }
    /* Feature strip: two per row, thin bottom dividers instead of tall verticals. */
    .rd-feature-item { flex: 0 0 50%; min-width: 50%; }
    .rd-feature-item + .rd-feature-item::before { display: none; }
    .rd-foot-hours,
    .rd-foot-brand,
    .rd-foot-subscribe { max-width: 50%; flex: 0 0 50%; }
}

@media (max-width: 767px) {
    .rd-section { padding: 60px 0; }
    .rd-section--tight { padding: 44px 0; }
    .rd-hero-slide { min-height: 480px; }
    .rd-hero-inner { padding: 40px 0; }
    .rd-hero-inner h1 { font-size: 38px; }
    .rd-hero-inner p { font-size: 16px; }
    .rd-grid-4, .rd-grid-3, .rd-grid-2 { grid-template-columns: 1fr; }
    .rd-heading { margin-bottom: 40px; }
    .rd-heading h2 { font-size: 28px; }
    .rd-topbar .rd-info { display: none; }
    .rd-hero-title { font-size: 40px; }
    .rd-intro-panel h2 { font-size: 28px; }
    .rd-intro-facts { gap: 16px; }
    .rd-cta-inner h3 { font-size: 26px; }
    .rd-dish { flex-direction: column; text-align: center; }
    .rd-dish-head { flex-direction: column; align-items: center; gap: 4px; }
    .rd-menu-tabs { gap: 8px; margin-bottom: 34px; }
    .rd-menu-tab { padding: 10px 18px; font-size: 13px; }
    /* footer stacks to a single centered column */
    .rd-foot-hours,
    .rd-foot-brand,
    .rd-foot-subscribe { max-width: 100%; flex: 0 0 100%; text-align: center; }
    .rd-foot-col h5::after { left: 50%; transform: translateX(-50%); }
    .rd-foot-links { justify-content: center; }
    .rd-foot-social { justify-content: center; }
}

@media (max-width: 480px) {
    .rd-container { padding: 0 16px; }
    .rd-section { padding: 52px 0; }
    .rd-hero-inner h1 { font-size: 32px; }
    .rd-hero-btns { flex-direction: column; align-items: stretch; }
    .rd-hero-btns .rd-btn { width: 100%; }
    .rd-heading h2 { font-size: 25px; }
    .rd-intro-body h2 { font-size: 27px; }
    .rd-intro-contact { width: 100%; justify-content: center; }
    .rd-hero-title { font-size: 34px; }
    /* Highlights collapse to a single column so labels never truncate. */
    .rd-intro-facts { grid-template-columns: 1fr; }
    /* Feature items full width when very narrow. */
    .rd-feature-item { flex: 0 0 100%; min-width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   Premium preloader (royaldine)
   Replaces the default full-screen white + cooking-GIF loader with a subtle
   dark charcoal backdrop and a thin, slowly rotating gold ring that matches
   the fine-dining palette. Scoped to .theme-royaldine so no other theme or
   tenant is affected; auto-applies to any future royaldine storefront.
   ========================================================================== */
.theme-royaldine #preloader {
    background: radial-gradient(circle at 50% 44%, #17140f 0%, #100e0b 72%);
}
/* Hide whatever preloader image the tenant/default supplies (the old GIF). */
.theme-royaldine #preloader .loader img { display: none !important; }
.theme-royaldine #preloader .revolve {
    width: 52px;
    height: 52px;
}
.theme-royaldine #preloader .revolve::before,
.theme-royaldine #preloader .revolve::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-sizing: border-box;
}
/* Faint full track ring. */
.theme-royaldine #preloader .revolve::before {
    border: 2px solid rgba(200, 162, 76, 0.16);
}
/* Rotating gold arc with a soft glow. */
.theme-royaldine #preloader .revolve::after {
    border: 2px solid transparent;
    border-top-color: #c8a24c;
    border-right-color: #e2c579;
    filter: drop-shadow(0 0 6px rgba(200, 162, 76, 0.35));
    animation: rdPreloaderSpin 1s linear infinite;
}
@keyframes rdPreloaderSpin { to { transform: rotate(360deg); } }