/* Pizza Next Door identity: warm paper, oven red and the forest green from the new mark. */
:root {
  --cream: #f8f0df;
  --paper: #fffaf0;
  --ink: #20271d;
  --ember: #bd3c26;
  --ember-deep: #922b1e;
  --basil: #183b2a;
  --tomato: #bd3c26;
  --sand: #eee1c8;
  --line: #d9c9a8;
  --muted: #706c5e;
  --shadow: 0 16px 36px rgba(42, 49, 31, .12);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

html { background: #183b2a !important; }
body { max-width: 1180px; background: var(--cream) !important; color: var(--ink) !important; }
::selection { background: #bd3c26; color: #fffaf0; }
em, .eyebrow { color: var(--ember); }
.topbar { height: 88px; padding: 8px clamp(18px, 5vw, 64px); background: rgba(248, 240, 223, .97) !important; border-bottom: 1px solid #d9c9a8 !important; box-shadow: 0 5px 20px rgba(40, 45, 30, .08) !important; }
.topbar::after { left: 0 !important; right: 0 !important; bottom: 0 !important; height: 3px !important; background: linear-gradient(90deg, #183b2a 0 34%, #f8f0df 34% 67%, #bd3c26 67% 100%) !important; }
.brand, .brand img, .brand-video { width: 80px; height: 72px; filter: none; }
.brand { border-radius: 0; }
.brand img { object-fit: contain; }
.topbar .brand { display: flex; width: auto !important; height: 72px; align-items: center !important; gap: 10px; }
.topbar .brand img { flex: 0 0 auto; width: 66px !important; height: 66px !important; }
.topbar .brand .brand-fallback { position: static !important; inset: auto !important; display: block; opacity: 1 !important; }
.brand-name { color: var(--basil); font-family: var(--sans); font-size: .94rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.topbar .owner-link { border-color: #183b2a !important; color: #183b2a !important; }
.topbar nav { display: flex; gap: 20px; }
.topbar nav a { color: var(--basil); font-size: .78rem; font-weight: 700; text-decoration: none; }
.owner-link, .outline-button { border-color: #183b2a; color: var(--basil); background: transparent; }
.owner-link:hover, .outline-button:hover { border-color: var(--basil); color: white; background: var(--basil); box-shadow: 0 7px 18px #183b2a24; }

.hero-scrub { --hero-sticky-top: 88px; background: var(--basil); }
.hero { min-height: min(690px, calc(100vh - 88px)); padding: clamp(64px, 10vw, 132px) clamp(25px, 8vw, 104px); background: radial-gradient(ellipse at 82% 48%, #456846 0%, #183b2a 49%, #10291e 100%) !important; }
.hero::before { display: block !important; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 35, 25, .92), rgba(13, 35, 25, .35) 62%, transparent); content: ""; }
.hero-video { top: 4%; right: 5%; width: min(66vw, 590px); filter: drop-shadow(0 28px 30px #07190e65) !important; }
.hero-content { max-width: 620px !important; transform: none !important; }
.hero .eyebrow { color: #f2bd77 !important; }
.hero h1 { max-width: none !important; color: #fffaf0 !important; font-size: clamp(3.6rem, 7.3vw, 5.6rem) !important; text-shadow: 0 5px 26px #10221870 !important; }
.hero h1 em { color: #f18a54 !important; }
.hero .intro, .intro { max-width: 390px; color: #f3ead8 !important; }
.hero .button, .button { border: 1px solid var(--ember); border-radius: 4px; background: var(--ember); box-shadow: 0 10px 22px #8c2f1d30; }
.hero .button:hover, .button:hover { background: var(--ember-deep); box-shadow: 0 12px 25px #8c2f1d40; }
.hero .hero-login-button { border-color: #f5e8ce; background: transparent; box-shadow: none; }
.live-strip { background: #bd3c26; color: #fffaf0; }
.cashback-strip { background: #f0dfbf; color: var(--basil); box-shadow: none; }
.cashback-strip .live-dot, .live-dot { background: #e87845; box-shadow: 0 0 0 5px #e8784522; }

.menu { padding: clamp(52px, 7vw, 88px) clamp(16px, 5vw, 62px); background: var(--cream); }
.section-head h2 { color: var(--basil); }
.section-head::after { height: 3px; background: var(--ember); }
.menu-group { border-color: #d9c9a8; }
.carousel-head .eyebrow { color: var(--basil); }
.carousel-btn { border-color: #d3c19c; color: var(--basil); background: var(--paper); }
.food-card { overflow: hidden; border: 1px solid #dfd0b2; border-radius: 13px; background: var(--paper); box-shadow: 0 7px 18px #29321e0c; }
.food-card:hover { border-color: #bd3c26; box-shadow: 0 14px 28px #29321e18; }
.food-image { border-bottom: 1px solid #e6d8bd; }
.food-body h3 { color: var(--ink); }
.food-body p { color: #706c5e; }
.food-bottom { border-color: #e6d8bd; }
.food-bottom > b { color: var(--ember); }
.stepper { border-color: #d9c9a8; background: #f8f0df; }
.stepper button { border-color: #d9c9a8; color: var(--basil); background: var(--paper); }
.stepper button:hover:not(:disabled) { border-color: var(--ember); background: var(--ember); color: white; }
.pizza-customization { color: #706c5e; }
.pizza-customization select { border-color: #d9c9a8; border-radius: 5px; background: var(--paper); color: var(--ink); }
.extra-cheese, .extra-chicken { color: var(--ink); }
.extra-cheese b, .extra-chicken b { color: var(--ember); }
.sold-out-label { border-radius: 99px; background: #f3d9cd; color: #942d20; }
.offer-ribbon { background: var(--ember); }
.offer-banner { border-color: #dfc58d; border-radius: 11px; background: #f7e8c7; color: var(--basil); }
.offer-chip { border-color: #dfc58d; background: #fffaf0; color: var(--ink); }

.summary { border-top: 3px solid var(--ember); background: #183b2a; box-shadow: 0 -10px 30px #142c2040; }
.summary-row { border-color: #ffffff24; color: #f8f0df; }
.summary-row b, .total strong, .cart-count { color: #f2bd77; }
.summary-button { background: var(--ember); }
.details { background: var(--basil); }
.details h2 { color: #fffaf0 !important; }
.details .eyebrow, .details h2 em, .quote { color: #f2bd77; }
.details-copy > p:not(.eyebrow) { color: #e3e8d9; }
#order-form { border: 1px solid #e2d4b8; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 45px #10231532; }
#order-form label { color: var(--ink); }
#order-form input, #order-form select { border-color: #d9c9a8; border-radius: 6px; background: #fffdf8; color: var(--ink); }
#order-form input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px #bd3c2620; }
.checkout-submit { background: var(--ember); }
.thank-you { background: #eee1c8; color: var(--ink); }
.thank-you #thanks-summary, .thank-you .order-status-card { border: 1px solid #dfd0b2; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: none; }
.location { grid-template-columns: minmax(0, 1fr) !important; background: var(--basil); }
.location h2 { color: var(--paper); }
.location .eyebrow, .location h2 em, .location a, .location-art span { color: #f2bd77; }
.location p, .location-art p { color: #e3e8d9; }
.location-art { border-color: #ffffff35; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #365a3d, #183b2a 70%); }

body > footer { padding: 38px 24px 112px; background: #10291e; color: #f8f0df; }
footer .footer-brand { width: 112px; height: 112px; margin: 0 auto 8px; }
footer .footer-brand-fallback { width: 100%; height: 100%; object-fit: contain; }
footer > p { color: #f2bd77; font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
footer .footer-socials { justify-content: center; gap: 10px 22px; margin: 15px 0 24px; }
footer .footer-socials a { color: #f4dfb8; }
.footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 22px; padding: 17px 0; border-top: 1px solid #ffffff28; border-bottom: 1px solid #ffffff28; }
.footer-legal a { color: #f2bd77; font-size: .76rem; font-weight: 700; }
footer > small { display: block; margin-top: 18px; color: #d5d9cc; }

/* Owner and menu tools share the same identity while keeping their dense controls readable. */
body.owner-mode { background: var(--cream) !important; }
.owner-page, .dashboard { color: var(--ink); }
.dashboard { border: 1px solid #dfd0b2; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); }
.admin-head, .kanban-column > header { border-color: #dfd0b2; }
.admin-head h2, .order-detail h2 { color: var(--basil); }
.sales-head > div, .order-card, .order-actions, .order-actions button { border-color: #dfd0b2; background: #fffaf0; color: var(--ink); }
.sales-head > div:first-child { background: var(--basil); }
.kanban-column, .kanban-column[data-status="ready"], .kanban-column[data-status="picked_up"] { border-color: #dfd0b2; background: #f7f0e2; }
.order-card { border-left-color: var(--ember); }
.order-card p, .customer-line, .no-orders, .drop-hint { color: #706c5e; }
.order-card strong, .sales-items b, .detail-total strong { color: var(--ember); }
.inventory-dialog, .order-detail { border: 1px solid #dfd0b2; border-radius: 14px; background: var(--paper); color: var(--ink); }
.inventory-head h3 { color: var(--basil); }
.inventory-row { border-color: #e4d7bd; }
.menu-editor-card, .directory-record, .customer-record { border-color: #dfd0b2; border-radius: 11px; background: var(--paper); }
.dashboard-brand { display: flex; width: max-content; height: 72px; align-items: center; gap: 9px; margin: 0 0 9px; text-decoration: none; }
.dashboard-brand img { width: 66px; height: 66px; object-fit: contain; }
.dashboard-brand .brand-name { font-size: .82rem; }

@media (min-width: 760px) {
  .topbar .brand { height: 76px; }
  .topbar .brand img { width: 70px !important; height: 70px !important; }
  .food-card { border-radius: 14px; }
  body > footer { padding-bottom: 45px; }
}
@media (max-width: 600px) {
  .topbar { height: 76px; padding-inline: 15px; }
  .topbar .brand { height: 64px; gap: 7px; }
  .topbar .brand img { width: 56px !important; height: 56px !important; }
  .brand-name { font-size: .75rem; letter-spacing: .07em; }
  .hero-scrub { --hero-sticky-top: 76px; }
  .hero { min-height: 610px; padding: 64px 22px; }
  .hero-video { top: 19%; right: -7%; width: min(76vw, 390px); opacity: .72 !important; }
  .hero-content { max-width: 390px !important; }
  .hero h1 { max-width: none !important; font-size: clamp(3rem, 10.5vw, 4rem) !important; line-height: .98 !important; white-space: normal !important; }
  .footer-legal { gap: 12px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.policy-page { max-width: none; min-height: 100vh; background: var(--cream) !important; }
.policy-page .topbar { position: sticky; align-items: center !important; }
.policy-back { color: var(--basil); font-size: .78rem; font-weight: 700; text-decoration: none; }
.policy-content { width: min(820px, 100%); margin: 0 auto; padding: clamp(42px, 8vw, 88px) 22px 32px; }
.policy-content > .eyebrow { color: var(--ember); }
.policy-content h1 { margin: 0 0 16px; color: var(--basil); font-size: clamp(3.3rem, 9vw, 6rem); line-height: .98; }
.policy-content h1 em { color: var(--ember); }
.policy-updated { margin: 0 0 34px; color: var(--muted); font-size: .92rem; }
.policy-updated a, .policy-contact { color: var(--ember-deep); font-weight: 700; text-underline-offset: 3px; }
.policy-card { position: relative; margin: 0 0 18px; padding: clamp(22px, 5vw, 38px); border: 1px solid #dfd0b2; border-radius: 13px; background: var(--paper); box-shadow: 0 10px 26px #29321e0d; scroll-margin-top: 105px; }
.policy-number { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--basil); color: var(--cream); font-size: .72rem; font-weight: 700; }
.policy-card h2 { margin: 13px 0 18px; color: var(--basil); font-family: var(--sans); font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.03em; }
.policy-card ul { display: grid; gap: 12px; margin: 0; padding-left: 20px; color: #53574b; font-size: .91rem; line-height: 1.65; }
.policy-card li::marker { color: var(--ember); }
.policy-contact { display: inline-flex; gap: 8px; margin-top: 23px; text-decoration: none; }
.policy-footer { display: grid; gap: 15px; margin-top: 38px; padding: 23px 0 8px; border-top: 1px solid #d9c9a8; }
.policy-footer > a { color: var(--basil); font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.policy-footer nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.policy-footer nav a { color: var(--muted); font-size: .78rem; text-underline-offset: 3px; }
@media (min-width: 760px) { .policy-page .topbar .brand img { width: 66px !important; height: 66px !important; } }