:root {

  --bg-base: #fcfbf9;

  --bg-card: #ffffff;

  --bg-card-hover: #ffffff;

  --accent-gold: #b8860b;

  --accent-gold-light: #996515;

  --accent-red: #c8102e;

  --accent-red-dark: #9b0d23;

  --text-main: #181210;

  --text-muted: #5e524c;

  --glass-border: rgba(0, 0, 0, 0.08);

  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  -webkit-font-smoothing: antialiased;

}



/* =============================================

   FOCUS VISIBLE — Keyboard Accessibility (WCAG 2.1)

   ============================================= */

*:focus {

  outline: none;

}

*:focus-visible {

  outline: 3px solid #c8102e;

  outline-offset: 3px;

  border-radius: 4px;

}

a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

  outline: 3px solid #c8102e;

  outline-offset: 3px;

  border-radius: 4px;

  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.2);

}



html {

  scroll-behavior: smooth;

}



body {

  background-color: var(--bg-base);

  color: var(--text-main);

  font-family: 'Plus Jakarta Sans', sans-serif;

  overflow-x: hidden;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



main {

  flex: 1;

}



/* TOP NOTICE BAR */

/* TOP NOTICE BAR */

.top-announcement {

  background: #0d0606;

  border-bottom: 1px solid rgba(245, 166, 35, 0.22);

  color: #c9bdb5;

  font-size: 0.8rem;

  font-weight: 500;

  letter-spacing: 0.03em;

  text-align: center;

  padding: 8px 16px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  z-index: 101;

  position: relative;

}



.top-announcement strong {

  color: #fff;

  font-weight: 700;

}



.top-announcement .badge-pill {

  background: rgba(217, 56, 30, 0.22);

  color: #ff7b63;

  border: 1px solid rgba(217, 56, 30, 0.45);

  font-size: 0.7rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 999px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-right: 4px;

}



.top-announcement a {

  color: var(--accent-gold);

  text-decoration: none;

  font-weight: 700;

  transition: opacity 0.2s ease;

}



.top-announcement a:hover {

  opacity: 0.85;

  text-decoration: underline;

}



/* NAV BAR */

header {

  position: sticky;

  top: 0;

  left: 0;

  width: 100%;

  height: 64px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 max(18px, 3vw);

  z-index: 100;

  background: rgba(14, 7, 7, 0.9);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

}



.brand {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  flex-shrink: 0;

}



.brand-logo-img {

  height: 32px;

  width: auto;

  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));

}



.brand-hut-img {

  height: 23px;

  width: auto;

  margin-right: -2px;

  transform: rotate(-6deg);

  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));

}



nav {

  display: flex;

  align-items: center;

  flex: 1;

  justify-content: center;

  padding: 0 0.6rem;

}



.nav-links {

  display: flex;

  gap: 0.3rem;

  list-style: none;

  align-items: center;

}



.nav-links a {

  color: #c4b8af;

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 500;

  letter-spacing: 0.02em;

  white-space: nowrap;

  padding: 6px 11px;

  border-radius: 999px;

  border: 1px solid transparent;

  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  display: inline-flex;

  align-items: center;

}



.nav-links a:hover {

  color: #ffffff;

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.1);

}



.nav-links a.active {

  color: #f5a623;

  background: rgba(245, 166, 35, 0.1);

  border-color: rgba(245, 166, 35, 0.35);

  font-weight: 700;

  box-shadow: 0 0 16px rgba(245, 166, 35, 0.18);

}



.nav-links a.active::after {

  display: none;

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.phone-pill {

  height: 38px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.12);

  color: #ede2db;

  text-decoration: none;

  font-size: 0.82rem;

  font-weight: 600;

  padding: 0 13px;

  border-radius: 999px;

  white-space: nowrap;

  transition: all 0.22s ease;

}



.phone-pill:hover {

  background: rgba(245, 166, 35, 0.1);

  border-color: rgba(245, 166, 35, 0.45);

  color: var(--accent-gold);

}



/* LANGUAGE SWITCHER PILL */

.lang-switch-group {

  display: inline-flex;

  align-items: center;

  background: rgba(0, 0, 0, 0.05);

  border: 1px solid rgba(184, 134, 11, 0.35);

  border-radius: 999px;

  padding: 2px;

  gap: 2px;

  flex-shrink: 0;

}



.lang-btn {

  background: transparent;

  border: none;

  color: #6b5c54;

  font-family: var(--font-sans);

  font-size: 0.78rem;

  font-weight: 700;

  padding: 5px 9px;

  border-radius: 999px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: all 0.2s ease;

  line-height: 1;

}



.lang-btn:hover {

  color: #181210;

  background: rgba(184, 134, 11, 0.1);

}



.lang-btn.active {

  background: #b8860b;

  color: #ffffff !important;

  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.35);

}



.mobile-lang-switch {

  display: flex;

  justify-content: center;

  padding: 12px 20px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

}



.mobile-lang-switch .lang-switch-group {

  width: 100%;

}



.mobile-lang-switch .lang-btn {

  flex: 1;

  justify-content: center;

  padding: 8px 12px;

  font-size: 0.88rem;

}



.cart-btn-header {

  height: 38px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  background: rgba(245, 166, 35, 0.12);

  border: 1px solid rgba(245, 166, 35, 0.35);

  color: var(--accent-gold);

  font-size: 0.82rem;

  font-weight: 700;

  padding: 0 13px;

  border-radius: 999px;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.22s ease;

}



.cart-btn-header:hover {

  background: rgba(245, 166, 35, 0.2);

  border-color: var(--accent-gold);

  color: #fff;

  transform: translateY(-1px);

}



.cart-badge {

  background: var(--accent-red);

  color: #fff;

  font-size: 0.7rem;

  font-weight: 800;

  padding: 2px 6px;

  border-radius: 999px;

  min-width: 19px;

  text-align: center;

  line-height: 1.2;

}



.cart-badge.bump {

  animation: badgeBump 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



@keyframes badgeBump {

  0% { transform: scale(1); }

  50% { transform: scale(1.4); }

  100% { transform: scale(1); }

}



.btn-reserve-nav {

  height: 38px;

  display: inline-flex;

  align-items: center;

  background: linear-gradient(135deg, #c8102e, #8b1022);

  color: #fff;

  text-decoration: none;

  font-size: 0.82rem;

  font-weight: 700;

  padding: 0 16px;

  border-radius: 999px;

  border: 1px solid rgba(255, 100, 100, 0.3);

  cursor: pointer;

  white-space: nowrap;

  box-shadow: 0 4px 15px rgba(200, 16, 46, 0.35);

  transition: all 0.22s ease;

}



.btn-reserve-nav:hover {

  transform: translateY(-1px);

  box-shadow: 0 6px 20px rgba(200, 16, 46, 0.55);

  background: linear-gradient(135deg, #d91c3c, #9e1428);

}



/* BUTTONS */

.btn-main {

  background: linear-gradient(135deg, #d9381e, #8b1e1b);

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  font-size: 0.95rem;

  padding: 13px 28px;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  border: none;

  cursor: pointer;

  box-shadow: 0 4px 20px rgba(217, 56, 30, 0.5);

  transition: var(--transition-smooth);

}



.btn-main:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(217, 56, 30, 0.7);

}



.btn-secondary {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid var(--glass-border);

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  font-size: 0.95rem;

  padding: 13px 26px;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  transition: var(--transition-smooth);

}



.btn-secondary:hover {

  background: rgba(255, 255, 255, 0.16);

  border-color: rgba(245, 166, 35, 0.5);

  color: var(--accent-gold);

}



/* HERO CONTAINER FOR HOME */

.hero-container {

  position: relative;

  width: 100vw;

  height: calc(100vh - 115px);

  min-height: 650px;

  overflow: hidden;

  display: flex;

  align-items: center;

}



.hero-bg-layer {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: right center;

  opacity: 0;

  transform: scale(1.03);

  transition: opacity 1.2s ease, transform 8s ease;

  z-index: 1;

  pointer-events: none;

}



.hero-bg-layer.active {

  opacity: 1;

  transform: scale(1.0);

}



#particles-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: none;

}



.cinematic-vignette {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 3;

  background: radial-gradient(circle at 75% 50%, transparent 30%, rgba(15, 7, 7, 0.45) 85%),

              linear-gradient(90deg, rgba(15, 7, 7, 0.72) 0%, rgba(15, 7, 7, 0.3) 45%, transparent 75%);

  pointer-events: none;

}



.hero-content {

  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 44%;

  margin-left: 6vw;

}



.scene-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  font-size: 0.75rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  font-weight: 700;

  color: var(--accent-gold);

  background: rgba(245, 166, 35, 0.1);

  border: 1px solid rgba(245, 166, 35, 0.3);

  padding: 6px 16px;

  border-radius: 999px;

  margin-bottom: 1.25rem;

  backdrop-filter: blur(12px);

}



.scene-eyebrow .pulse-dot {

  width: 6px;

  height: 6px;

  background-color: #ff5722;

  border-radius: 50%;

  box-shadow: 0 0 10px #ff5722;

  animation: pulse 1.6s infinite;

}



@keyframes pulse {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.4; transform: scale(0.75); }

}



.hero-title {

  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;

  font-size: clamp(2.6rem, 4.6vw, 4.2rem);

  font-weight: 800;

  letter-spacing: -0.025em;

  line-height: 1.02;

  margin-bottom: 1.1rem;

  color: #ffffff;

  -webkit-text-fill-color: #ffffff;

  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.85);

}



.hero-title span {

  background: none;

  -webkit-background-clip: unset;

  -webkit-text-fill-color: #ffffff;

  color: #ffffff;

}



.hero-description {

  font-size: 1.05rem;

  line-height: 1.65;

  color: var(--text-muted);

  margin-bottom: 1.6rem;

  max-width: 92%;

}



.location-info-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 1.8rem;

  font-size: 0.86rem;

  color: #ede2db;

}



.location-info-row svg {

  color: var(--accent-gold);

  flex-shrink: 0;

}



.tasting-notes {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 2rem;

}



.note-chip {

  background: rgba(0, 0, 0, 0.55);

  border: 1px solid rgba(245, 166, 35, 0.25);

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 0.78rem;

  font-weight: 600;

  color: #fff;

}



.hero-pill-tabs {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 1.5rem;

}



.hero-pill-tab {

  text-decoration: none;

  font-size: 0.82rem;

  font-weight: 600;

  color: #ede2db;

  background: rgba(20, 10, 10, 0.65);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  padding: 8px 16px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;

  transition: all 0.22s ease;

}



.hero-pill-tab:hover {

  background: rgba(245, 166, 35, 0.15);

  border-color: rgba(245, 166, 35, 0.45);

  color: var(--accent-gold);

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

}



.hero-pill-tab.highlight {

  color: var(--accent-gold);

  background: rgba(245, 166, 35, 0.12);

  border-color: rgba(245, 166, 35, 0.35);

}



.hero-actions {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

}



.scene-controls {

  position: absolute;

  bottom: 30px;

  right: 5vw;

  z-index: 15;

  display: flex;

  gap: 12px;

}



.scene-pill {

  background: rgba(15, 7, 7, 0.75);

  border: 1px solid var(--glass-border);

  backdrop-filter: blur(10px);

  padding: 10px 18px;

  border-radius: 30px;

  color: var(--text-muted);

  font-size: 0.8rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition-smooth);

  display: flex;

  align-items: center;

  gap: 8px;

}



.scene-pill:hover,

.scene-pill.active {

  background: rgba(217, 56, 30, 0.2);

  border-color: var(--accent-red);

  color: #fff;

}



.scene-pill.active {

  background: linear-gradient(135deg, rgba(217, 56, 30, 0.5), rgba(139, 30, 27, 0.5));

}



/* SUBPAGE CINEMATIC HERO BANNER */

.subpage-hero {

  position: relative;

  padding: 90px 6vw 70px;

  background: radial-gradient(circle at 80% 40%, rgba(217, 56, 30, 0.12), transparent 60%),

              linear-gradient(180deg, #160808 0%, #0f0707 100%);

  border-bottom: 1px solid var(--glass-border);

  text-align: center;

}



.subpage-hero-inner {

  max-width: 800px;

  margin: 0 auto;

}



.subpage-hero h1 {

  font-family: 'Cinzel', serif;

  font-size: clamp(2.4rem, 4vw, 3.4rem);

  font-weight: 900;

  color: #fff;

  margin-bottom: 16px;

  line-height: 1.15;

}



.subpage-hero h1 span {

  background: linear-gradient(135deg, #fff 40%, var(--accent-gold) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.subpage-hero p {

  font-size: 1.1rem;

  line-height: 1.7;

  color: var(--text-muted);

}



/* PAGE SECTION LAYOUT */

section.page-section {

  padding: 90px 6vw;

  position: relative;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.section-header {

  text-align: center;

  max-width: 700px;

  margin: 0 auto 50px;

}



.section-eyebrow {

  font-size: 0.8rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  font-weight: 700;

  color: var(--accent-gold);

  margin-bottom: 12px;

  display: block;

}



.section-title {

  font-family: 'Cinzel', serif;

  font-size: clamp(2rem, 3.2vw, 2.8rem);

  font-weight: 700;

  color: #fff;

  line-height: 1.15;

  margin-bottom: 16px;

}



.section-subtitle {

  color: var(--text-muted);

  font-size: 1.05rem;

  line-height: 1.6;

}



/* RESTAURANT SECTION */

.restaurant-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;

  max-width: 1200px;

  margin: 0 auto;

}



.restaurant-text h3 {

  font-family: 'Cinzel', serif;

  font-size: 1.8rem;

  margin-bottom: 18px;

  color: #fff;

}



.restaurant-text p {

  color: var(--text-muted);

  line-height: 1.7;

  margin-bottom: 24px;

  font-size: 1rem;

}



.capacity-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 30px;

}



.capacity-card {

  background: var(--bg-card);

  border: 1px solid var(--glass-border);

  border-radius: 12px;

  padding: 20px 16px;

  text-align: center;

  transition: var(--transition-smooth);

}



.capacity-card:hover {

  transform: translateY(-3px);

  border-color: var(--accent-gold);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

}



.capacity-num {

  font-family: 'Cinzel', serif;

  font-size: 2.2rem;

  font-weight: 800;

  color: var(--accent-gold);

  line-height: 1;

  margin-bottom: 6px;

}



.capacity-title {

  font-size: 0.95rem;

  font-weight: 600;

  color: #fff;

  margin-bottom: 4px;

}



.capacity-sub {

  font-size: 0.75rem;

  color: var(--text-muted);

}



.restaurant-visuals {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.visual-card {

  border-radius: 16px;

  overflow: hidden;

  position: relative;

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);

  border: 1px solid var(--glass-border);

}



.visual-card img {

  width: 100%;

  height: 280px;

  object-fit: cover;

  display: block;

  transition: transform 0.6s ease;

}



.visual-card:hover img {

  transform: scale(1.05);

}



.visual-card span {

  position: absolute;

  bottom: 12px;

  left: 12px;

  background: rgba(15, 7, 7, 0.85);

  backdrop-filter: blur(8px);

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 0.75rem;

  font-weight: 600;

  color: #fff;

  border: 1px solid var(--glass-border);

}



/* MENU SHOWCASE & CATEGORY TABS */

.menu-tabs {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  margin-bottom: 40px;

  flex-wrap: wrap;

  background: rgba(22, 10, 9, 0.85);

  border: 1px solid rgba(255, 255, 255, 0.09);

  padding: 5px 8px;

  border-radius: 999px;

  max-width: 1200px;

  margin-left: auto;

  margin-right: auto;

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);

}



.menu-tab-btn {

  background: transparent;

  border: 1px solid transparent;

  color: #b8aba3;

  padding: 7px 12px;

  border-radius: 999px;

  font-size: 0.81rem;

  font-weight: 600;

  letter-spacing: 0.01em;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;

  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);

}



.menu-tab-btn:hover {

  color: #ffffff;

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

  transform: translateY(-1px);

}



.menu-tab-btn.active {

  background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(217, 56, 30, 0.28));

  color: #ffffff;

  border-color: rgba(245, 166, 35, 0.55);

  box-shadow: 0 4px 18px rgba(245, 166, 35, 0.22);

  font-weight: 700;

}



.menu-tab-count {

  font-size: 0.7rem;

  font-weight: 700;

  background: rgba(255, 255, 255, 0.08);

  padding: 2px 7px;

  border-radius: 999px;

  color: #c4b8af;

  line-height: 1.2;

  transition: all 0.2s ease;

}



.menu-tab-btn.active .menu-tab-count {

  background: var(--accent-gold);

  color: #140707;

}



.menu-items-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 22px;

  max-width: 1120px;

  margin: 0 auto;

}



.menu-item-card {

  background: var(--bg-card);

  border: 1px solid var(--glass-border);

  border-radius: 16px;

  padding: 22px;

  display: flex;

  justify-content: space-between;

  gap: 18px;

  transition: var(--transition-smooth);

  position: relative;

}



.menu-item-card:hover {

  background: var(--bg-card-hover);

  border-color: rgba(245, 166, 35, 0.4);

  transform: translateY(-3px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);

}



.item-info {

  flex: 1;

}



.item-title-row {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 6px;

  flex-wrap: wrap;

}



.item-info h4 {

  font-family: 'Cinzel', serif;

  font-size: 1.15rem;

  color: #fff;

}



.item-tag {

  font-size: 0.68rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 2px 8px;

  border-radius: 6px;

  background: rgba(245, 166, 35, 0.15);

  color: var(--accent-gold);

  border: 1px solid rgba(245, 166, 35, 0.3);

}



.item-tag.bestseller {

  background: rgba(217, 56, 30, 0.2);

  color: #ff7b63;

  border-color: rgba(217, 56, 30, 0.4);

}



.item-info p {

  font-size: 0.88rem;

  color: var(--text-muted);

  line-height: 1.5;

}



.item-action-col {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: space-between;

  min-width: 140px;

  gap: 12px;

}



.item-price {

  font-family: 'Cinzel', serif;

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--accent-gold);

  white-space: nowrap;

}



.btn-add-cart {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(245, 166, 35, 0.35);

  color: var(--text-main);

  padding: 8px 14px;

  border-radius: 24px;

  font-size: 0.82rem;

  font-weight: 700;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;

  transition: var(--transition-smooth);

}



.btn-add-cart:hover {

  background: var(--accent-red);

  border-color: var(--accent-red);

  color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(217, 56, 30, 0.5);

}



.btn-add-cart:active {

  transform: scale(0.96);

}



/* DELIVERY BANNER SECTION */

.delivery-banner {

  background: linear-gradient(135deg, rgba(217, 56, 30, 0.15), rgba(139, 30, 27, 0.25));

  border: 1px solid rgba(217, 56, 30, 0.4);

  border-radius: 20px;

  padding: 48px 40px;

  max-width: 1100px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  align-items: center;

  gap: 40px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);

}



.delivery-text h3 {

  font-family: 'Cinzel', serif;

  font-size: 2rem;

  color: #fff;

  margin-bottom: 12px;

}



.delivery-text p {

  color: var(--text-muted);

  font-size: 1rem;

  line-height: 1.6;

  margin-bottom: 24px;

}



.delivery-perks {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}



.perk-item {

  font-size: 0.85rem;

  font-weight: 600;

  color: #ede2db;

  display: flex;

  align-items: center;

  gap: 8px;

}



.delivery-action-box {

  text-align: center;

  background: rgba(15, 7, 7, 0.8);

  border: 1px solid var(--glass-border);

  padding: 30px;

  border-radius: 16px;

}



.delivery-action-box .tel-num {

  display: block;

  font-family: 'Cinzel', serif;

  font-size: 2rem;

  font-weight: 800;

  color: var(--accent-gold);

  margin: 12px 0 18px;

  text-decoration: none;

}



/* HISTORY SECTION */

.history-container {

  max-width: 900px;

  margin: 0 auto;

  background: var(--bg-card);

  border: 1px solid var(--glass-border);

  border-radius: 20px;

  padding: 48px;

  position: relative;

}



.history-timeline {

  position: relative;

  padding-left: 36px;

  margin-top: 30px;

}



.history-timeline::before {

  content: '';

  position: absolute;

  left: 12px;

  top: 10px;

  bottom: 10px;

  width: 2px;

  background: var(--accent-red);

}



.timeline-step {

  position: relative;

  margin-bottom: 36px;

}



.timeline-dot {

  position: absolute;

  left: -30px;

  top: 4px;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: var(--accent-gold);

  border: 3px solid var(--bg-card);

  box-shadow: 0 0 10px var(--accent-gold);

}



.timeline-step h4 {

  font-family: 'Cinzel', serif;

  font-size: 1.25rem;

  color: #fff;

  margin-bottom: 8px;

}



.timeline-step p {

  color: var(--text-muted);

  line-height: 1.65;

  font-size: 0.95rem;

}



/* RESERVATION & CONTACT SECTION */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  max-width: 1100px;

  margin: 0 auto;

}



.contact-card, .reservation-form-card {

  background: var(--bg-card);

  border: 1px solid var(--glass-border);

  border-radius: 18px;

  padding: 36px;

}



.contact-card h3, .reservation-form-card h3 {

  font-family: 'Cinzel', serif;

  font-size: 1.6rem;

  color: #fff;

  margin-bottom: 20px;

}



.contact-detail-row {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  margin-bottom: 22px;

}



.contact-detail-row svg {

  color: var(--accent-gold);

  flex-shrink: 0;

  margin-top: 3px;

}



.contact-detail-row div strong {

  display: block;

  color: #fff;

  font-size: 0.92rem;

  margin-bottom: 2px;

}



.contact-detail-row div p, .contact-detail-row div a {

  color: var(--text-muted);

  font-size: 0.88rem;

  text-decoration: none;

}



.form-group {

  margin-bottom: 16px;

}



.form-group label {

  display: block;

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--accent-gold);

  margin-bottom: 6px;

  font-weight: 700;

}



.form-input, .form-select {

  width: 100%;

  background: rgba(0, 0, 0, 0.4);

  border: 1px solid var(--glass-border);

  border-radius: 8px;

  padding: 12px 14px;

  color: #fff;

  font-size: 0.9rem;

  font-family: inherit;

  transition: border-color 0.2s ease;

}



.form-input:focus, .form-select:focus {

  outline: none;

  border-color: var(--accent-gold);

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



.btn-submit-form {

  width: 100%;

  background: linear-gradient(135deg, #d9381e, #8b1e1b);

  color: #fff;

  font-weight: 700;

  font-size: 0.95rem;

  padding: 14px;

  border-radius: 8px;

  border: none;

  cursor: pointer;

  margin-top: 8px;

  box-shadow: 0 4px 18px rgba(217, 56, 30, 0.4);

  transition: var(--transition-smooth);

}



.btn-submit-form:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(217, 56, 30, 0.6);

}



/* FOOTER */

footer {

  background: #080303;

  border-top: 1px solid var(--glass-border);

  padding: 60px 6vw 30px;

  margin-top: auto;

}



.footer-top {

  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr 1fr;

  gap: 40px;

  max-width: 1200px;

  margin: 0 auto 48px;

}



.footer-col h5 {

  font-family: 'Cinzel', serif;

  font-size: 1rem;

  color: #fff;

  margin-bottom: 16px;

  letter-spacing: 0.05em;

}



.footer-col ul {

  list-style: none;

}



.footer-col ul li {

  margin-bottom: 10px;

}



.footer-col ul li a {

  color: var(--text-muted);

  text-decoration: none;

  font-size: 0.88rem;

  transition: color 0.2s ease;

}



.footer-col ul li a:hover {

  color: var(--accent-gold);

}



.footer-bottom {

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  padding-top: 24px;

  color: #776a63;

  font-size: 0.8rem;

  display: flex;

  justify-content: space-between;

  max-width: 1200px;

  margin: 0 auto;

}



/* FLOATING CART BUTTON */

.floating-cart-btn,

.floating-cart-pill {

  position: fixed;

  bottom: 26px;

  right: 26px;

  background: linear-gradient(135deg, #d9381e, #8b1e1b);

  color: #fff;

  padding: 14px 22px;

  border-radius: 50px;

  display: flex;

  align-items: center;

  gap: 12px;

  box-shadow: 0 10px 30px rgba(217, 56, 30, 0.5), 0 0 25px rgba(245, 166, 35, 0.35);

  z-index: 998;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.25);

  font-weight: 700;

  font-size: 0.95rem;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;

}



.floating-cart-btn:hover,

.floating-cart-pill:hover {

  transform: translateY(-4px) scale(1.03);

  box-shadow: 0 16px 40px rgba(217, 56, 30, 0.7);

}



.floating-cart-badge {

  background: #fff;

  color: var(--accent-red-dark);

  font-size: 0.76rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 999px;

}



/* ==========================================

   CART DRAWER & E-COMMERCE STYLING

   ========================================== */



/* Cart Backdrop */

.cart-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(24, 18, 16, 0.6);

  backdrop-filter: blur(4px);

  z-index: 1040;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s ease;

}



.cart-backdrop.open {

  opacity: 1;

  pointer-events: auto;

}



/* Cart Drawer */

.cart-drawer {

  position: fixed;

  top: 0;

  right: -480px;

  width: 100%;

  max-width: 440px;

  height: 100vh;

  background: #ffffff;

  border-left: 1px solid #ede7df;

  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);

  z-index: 1050;

  display: flex;

  flex-direction: column;

  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.cart-drawer.open {

  right: 0;

}



/* Cart Drawer Header */

.cart-drawer-header {

  padding: 18px 22px;

  border-bottom: 1px solid #ede7df;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: #fdfbf7;

}



.cart-drawer-header h3 {

  font-family: 'Cinzel', serif;

  font-size: 1.25rem;

  color: #181210;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0;

}



.cart-drawer-header h3 svg {

  color: #c8102e;

}



.btn-close-cart {

  background: #f4eee6;

  border: 1px solid #ede7df;

  color: #6b5e58;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 1.1rem;

  transition: all 0.2s ease;

}



.btn-close-cart:hover {

  background: #c8102e;

  border-color: #c8102e;

  color: #ffffff;

  transform: rotate(90deg);

}



/* Cart Drawer Body */

.cart-drawer-body {

  flex: 1;

  overflow-y: auto;

  padding: 16px 20px;

  display: flex;

  flex-direction: column;

  gap: 12px;

  background: #fcfbf9;

}



/* Empty State */

.cart-empty-state {

  text-align: center;

  padding: 60px 20px;

  color: #6b5e58;

}



.cart-empty-state svg {

  color: #b8860b;

  margin-bottom: 16px;

  opacity: 0.7;

}



.cart-empty-state h4 {

  font-family: 'Cinzel', serif;

  font-size: 1.25rem;

  color: #181210;

  margin-bottom: 8px;

}



.cart-empty-state p {

  font-size: 0.9rem;

  line-height: 1.5;

  margin-bottom: 22px;

  color: #665b55;

}



/* Item Card (Modern & Clean) */

.cart-item-card {

  background: #ffffff;

  border: 1px solid #ede7df;

  border-radius: 12px;

  padding: 14px 16px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.cart-item-card:hover {

  border-color: #dfd5c7;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

}



.cart-item-main {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;

}



.cart-item-info {

  flex: 1;

}



.cart-item-title {

  font-weight: 700;

  font-size: 0.95rem;

  color: #181210;

  line-height: 1.35;

  margin-bottom: 3px;

}



.cart-item-price-unit {

  font-size: 0.8rem;

  color: #7d6e68;

}



.cart-item-del {

  background: transparent;

  border: none;

  color: #a89d95;

  cursor: pointer;

  padding: 5px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

}



.cart-item-del:hover {

  color: #c8102e;

  background: #faeceb;

}



.cart-item-controls {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 10px;

  border-top: 1px dashed #f0e9df;

}



.cart-stepper {

  display: inline-flex;

  align-items: center;

  background: #f7f3ec;

  border: 1px solid #e5dcce;

  border-radius: 8px;

  padding: 2px;

}



.cart-stepper-btn {

  background: #ffffff;

  border: 1px solid #e0d7c9;

  color: #181210;

  width: 28px;

  height: 28px;

  border-radius: 6px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  font-weight: 700;

  line-height: 1;

  transition: all 0.15s ease;

}



.cart-stepper-btn:hover {

  background: #c8102e;

  border-color: #c8102e;

  color: #ffffff;

}



.cart-stepper-value {

  font-size: 0.92rem;

  font-weight: 700;

  color: #181210;

  min-width: 32px;

  text-align: center;

}



.cart-item-price-total {

  font-family: 'Cinzel', serif;

  font-weight: 700;

  font-size: 1.05rem;

  color: #b8860b;

}



/* Fallback row compatibility */

.cart-item-row {

  background: #ffffff;

  border: 1px solid #ede7df;

  border-radius: 12px;

  padding: 12px 14px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

}

.cart-item-details .item-name {

  font-weight: 700;

  font-size: 0.92rem;

  color: #181210;

}

.cart-item-details .item-unit-price {

  font-size: 0.78rem;

  color: #7d6e68;

}

.stepper-btn {

  background: #ffffff;

  border: 1px solid #e0d7c9;

  color: #181210;

  width: 26px;

  height: 26px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  border-radius: 6px;

}

.stepper-qty {

  font-size: 0.88rem;

  font-weight: 700;

  padding: 0 6px;

  min-width: 22px;

  text-align: center;

  color: #181210;

}

.cart-item-total {

  font-family: 'Cinzel', serif;

  font-size: 1rem;

  font-weight: 700;

  color: #b8860b;

  min-width: 60px;

  text-align: right;

}

.btn-remove-item {

  background: transparent;

  border: none;

  color: #a89d95;

  cursor: pointer;

  padding: 4px;

}

.btn-remove-item:hover { color: #c8102e; }



/* Cart Drawer Footer */

.cart-drawer-footer {

  padding: 18px 22px;

  border-top: 1px solid #ede7df;

  background: #fdfbf7;

}



.cart-summary-row {

  display: flex;

  justify-content: space-between;

  font-size: 0.88rem;

  color: #6b5e58;

  margin-bottom: 6px;

}



.cart-summary-row.total-row {

  border-top: 1px solid #ede7df;

  padding-top: 12px;

  margin-top: 10px;

  font-size: 1.15rem;

  font-weight: 800;

  color: #181210;

  align-items: center;

}



.cart-summary-row.total-row span:last-child {

  font-family: 'Cinzel', serif;

  color: #b8860b;

  font-size: 1.35rem;

  font-weight: 700;

}



.cart-checkout-hint {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.8rem;

  color: #6b5e58;

  background: #f5efe6;

  border: 1px solid #eadecd;

  padding: 8px 12px;

  border-radius: 8px;

  margin: 10px 0 14px;

}



.cart-checkout-hint svg {

  color: #c8102e;

  flex-shrink: 0;

}



.cart-action-buttons {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.btn-proceed-checkout {

  background: linear-gradient(135deg, #c8102e, #a00c24);

  color: #ffffff !important;

  padding: 14px 20px;

  border-radius: 30px;

  font-size: 0.98rem;

  font-weight: 700;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  box-shadow: 0 4px 16px rgba(200, 16, 46, 0.3);

  transition: all 0.25s ease;

  width: 100%;

}



.btn-proceed-checkout:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 22px rgba(200, 16, 46, 0.45);

  background: linear-gradient(135deg, #db1838, #b00d27);

}



.btn-clear-cart {

  background: transparent;

  border: none;

  color: #8c7f78;

  font-size: 0.8rem;

  cursor: pointer;

  text-align: center;

  text-decoration: underline;

  padding: 6px;

  transition: color 0.2s ease;

}



.btn-clear-cart:hover {

  color: #c8102e;

}



/* Toast Notification (Top-Center Floating) */

.cart-toast {

  position: fixed;

  top: 24px;

  left: 50%;

  transform: translateX(-50%) translateY(-20px);

  background: #ffffff;

  border: 1px solid #e5dcce;

  color: #181210;

  padding: 12px 22px;

  border-radius: 30px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 0.9rem;

  font-weight: 600;

  z-index: 1070;

  opacity: 0;

  pointer-events: none;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.cart-toast.show {

  transform: translateX(-50%) translateY(0);

  opacity: 1;

}



.cart-toast-icon {

  width: 26px;

  height: 26px;

  background: #e8f5e9;

  color: #2e7d32;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.85rem;

  font-weight: 800;

  flex-shrink: 0;

}





/* CHECKOUT MODAL */

.checkout-modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.82);

  backdrop-filter: blur(8px);

  z-index: 1010;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  padding: 20px;

}



.checkout-modal-backdrop.open {

  opacity: 1;

  pointer-events: auto;

}



.checkout-modal {

  background: #ffffff;

  border: 1px solid #ede5da;

  border-radius: 24px;

  width: 100%;

  max-width: 880px;

  max-height: 90vh;

  overflow-y: auto;

  padding: 32px 36px;

  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;

  position: relative;

  transform: scale(0.96) translateY(12px);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  color: #181210;

}



.checkout-modal-backdrop.open .checkout-modal {

  transform: scale(1) translateY(0);

}



.modal-close-btn {

  position: absolute;

  top: 20px;

  right: 20px;

  background: #f7f3ec;

  border: 1px solid #e8decb;

  color: #6b5e58;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.15rem;

  transition: all 0.22s ease;

  z-index: 10;

}



.modal-close-btn:hover {

  background: #c8102e;

  border-color: #c8102e;

  color: #ffffff;

  transform: rotate(90deg);

}



/* Modal Header */

.checkout-header {

  margin-bottom: 22px;

  padding-bottom: 16px;

  border-bottom: 1px solid #ede7df;

}



.checkout-header-badge {

  display: inline-block;

  background: #fbf5ea;

  border: 1px solid #e8dcbe;

  color: #b8860b;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  padding: 3px 10px;

  border-radius: 20px;

  margin-bottom: 8px;

}



.checkout-header-title {

  font-family: 'Cinzel', serif;

  font-size: 1.55rem;

  font-weight: 700;

  color: #181210;

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0 0 6px;

  letter-spacing: -0.01em;

}



.checkout-title-icon {

  font-size: 1.6rem;

}



.checkout-header-subtitle {

  font-size: 0.88rem;

  color: #635750;

  line-height: 1.45;

  margin: 0;

}



/* Two Column Layout */

.checkout-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 24px;

  align-items: start;

}



/* Left Column: Form Sections */

.checkout-main-col {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.checkout-section-box {

  background: #fdfcf9;

  border: 1px solid #ede7df;

  border-radius: 16px;

  padding: 16px 18px;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  position: relative;

  z-index: 1;

}



.checkout-section-box:focus-within,

.checkout-section-box:has(.date-picker-wrapper),

.checkout-section-box:has(.custom-calendar-popover) {

  z-index: 25;

}



.checkout-section-box:focus-within {

  border-color: #d4a017;

  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.08);

}



.checkout-section-header {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

}



.step-badge {

  width: 22px;

  height: 22px;

  background: #b8860b;

  color: #ffffff;

  font-size: 0.75rem;

  font-weight: 800;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.checkout-section-header h4 {

  font-size: 0.92rem;

  font-weight: 700;

  color: #181210;

  margin: 0;

}



/* Delivery vs Pickup Cards */

.checkout-type-toggle {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.checkout-type-btn {

  position: relative;

  background: #ffffff;

  border: 2px solid #ede7df;

  border-radius: 14px;

  padding: 12px;

  cursor: pointer;

  display: flex;

  align-items: flex-start;

  gap: 10px;

  text-align: left;

  transition: all 0.22s ease;

}



.checkout-type-btn:hover {

  border-color: #dfd2be;

  transform: translateY(-1px);

}



.type-btn-radio {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid #cfc5b8;

  margin-top: 2px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

}



.type-btn-icon {

  font-size: 1.4rem;

  flex-shrink: 0;

  margin-top: -2px;

}



.type-btn-content {

  flex: 1;

}



.type-btn-title {

  font-weight: 700;

  font-size: 0.9rem;

  color: #181210;

  margin-bottom: 4px;

}



.type-btn-meta {

  display: flex;

  flex-direction: column;

  gap: 3px;

  font-size: 0.74rem;

}



.tag-free {

  color: #2e7d32;

  font-weight: 700;

}



.tag-location {

  color: #b8860b;

  font-weight: 700;

}



.tag-time {

  color: #7d6e68;

}



.checkout-type-btn.active {

  background: #fcf9f2;

  border-color: #b8860b;

  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.15);

}



.checkout-type-btn.active .type-btn-radio {

  border-color: #b8860b;

  background: #b8860b;

  box-shadow: inset 0 0 0 3px #ffffff;

}



.checkout-type-btn.active .type-btn-title {

  color: #996515;

}



/* Payment Method Selector */

.checkout-payment-toggle {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.checkout-payment-btn {

  position: relative;

  background: #ffffff;

  border: 2px solid #ede7df;

  border-radius: 14px;

  padding: 12px;

  cursor: pointer;

  display: flex;

  align-items: flex-start;

  gap: 10px;

  text-align: left;

  transition: all 0.22s ease;

  width: 100%;

}



.checkout-payment-btn:hover {

  border-color: #dfd2be;

  transform: translateY(-1px);

}



.checkout-payment-btn.active {

  background: #fcf9f2;

  border-color: #b8860b;

  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.15);

}



.checkout-payment-btn.active .type-btn-radio {

  border-color: #b8860b;

  background: #b8860b;

  box-shadow: inset 0 0 0 3px #ffffff;

}



.checkout-payment-btn.active .type-btn-title {

  color: #996515;

}



.payment-badges-row {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 6px;

  flex-wrap: wrap;

}



.payment-badge-pill {

  background: #f5efe6;

  border: 1px solid #e8dcce;

  border-radius: 4px;

  padding: 2px 6px;

  font-size: 0.68rem;

  font-weight: 700;

  color: #5c4f48;

  letter-spacing: 0.02em;

}



.checkout-payment-btn.active .payment-badge-pill {

  background: #f4ebd9;

  border-color: #dfceb2;

  color: #8a6210;

}



/* Stripe Online Payment Form Box */

.stripe-payment-details-box {

  margin-top: 14px;

  background: #ffffff;

  border: 1.5px solid #dfceb2;

  border-radius: 14px;

  padding: 16px;

  box-shadow: 0 4px 18px rgba(184, 134, 11, 0.08);

  animation: stripeBoxFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes stripeBoxFadeIn {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.stripe-submethod-tabs {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-bottom: 14px;

  background: #f7f3ec;

  padding: 4px;

  border-radius: 10px;

}



.stripe-tab-btn {

  background: transparent;

  border: none;

  border-radius: 8px;

  padding: 8px 10px;

  font-size: 0.82rem;

  font-weight: 700;

  color: #7d6e68;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  cursor: pointer;

  transition: all 0.2s ease;

}



.stripe-tab-btn.active {

  background: #ffffff;

  color: #181210;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.card-number-wrapper {

  position: relative;

}



.card-brand-badge {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 0.75rem;

  font-weight: 800;

  color: #8a6210;

  background: #fdf9f2;

  border: 1px solid #ebd9bf;

  border-radius: 6px;

  padding: 2px 8px;

  pointer-events: none;

}



.test-card-hint {

  margin-top: 12px;

  background: #fcf8ee;

  border: 1px dashed #d8be8d;

  border-radius: 8px;

  padding: 8px 12px;

  font-size: 0.78rem;

  color: #6e5218;

  display: flex;

  align-items: center;

  gap: 8px;

  line-height: 1.4;

}



.test-card-hint .hint-icon {

  font-size: 1rem;

}



.stripe-security-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 0.74rem;

  color: #7d6e68;

  margin-top: 14px;

  padding-top: 10px;

  border-top: 1px solid #ede7df;

}



/* Fields & Inputs */

.checkout-fields-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.checkout-fields-row.address-zip-row {

  grid-template-columns: 2.2fr 1fr;

}



.checkout-field-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.checkout-field-group label {

  font-size: 0.78rem;

  font-weight: 700;

  color: #4a3e38;

}



.req-star {

  color: #c8102e;

}



.checkout-input-wrapper {

  position: relative;

  display: flex;

  align-items: center;

}



.checkout-input-wrapper .field-icon {

  position: absolute;

  left: 12px;

  color: #8c7f78;

  pointer-events: none;

  flex-shrink: 0;

}



.checkout-input {

  width: 100%;

  background: #ffffff;

  border: 1.5px solid #e5dcce;

  border-radius: 10px;

  padding: 10px 12px 10px 38px;

  font-size: 0.88rem;

  color: #181210;

  outline: none;

  font-family: inherit;

  transition: all 0.2s ease;

}



.checkout-input:focus {

  border-color: #b8860b;

  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);

  background: #ffffff;

}



.checkout-input::placeholder {

  color: #a89d95;

  font-size: 0.84rem;

}



select.checkout-input {

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d6e68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  padding-right: 32px;

}



input[type="date"].checkout-input {

  cursor: pointer;

}



/* Custom Date Picker & Popover Calendar */

.date-picker-wrapper {

  position: relative;

  z-index: 50;

}



.date-picker-input {

  cursor: pointer !important;

  background-color: #ffffff !important;

  font-weight: 600;

  letter-spacing: 0.02em;

}



.custom-calendar-popover {

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  z-index: 1050;

  width: 280px;

  background: #ffffff;

  border: 1.5px solid #e5dcce;

  border-radius: 14px;

  padding: 12px;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);

  user-select: none;

  font-family: inherit;

  animation: calFadeIn 0.15s ease-out;

}



@keyframes calFadeIn {

  from { opacity: 0; transform: translateY(-4px); }

  to { opacity: 1; transform: translateY(0); }

}



.cal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  padding: 0 4px;

}



.cal-title {

  font-size: 0.88rem;

  font-weight: 700;

  color: #181210;

  font-family: 'Cinzel', serif;

}



.cal-nav-btn {

  background: #f5efe6;

  border: 1px solid #e8dcce;

  width: 28px;

  height: 28px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 1.1rem;

  color: #5c4f48;

  transition: all 0.15s ease;

}



.cal-nav-btn:hover {

  background: #b8860b;

  color: #ffffff;

  border-color: #b8860b;

}



.cal-weekdays {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  text-align: center;

  font-size: 0.72rem;

  font-weight: 700;

  color: #8c7f78;

  margin-bottom: 6px;

}



.cal-days-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 4px;

}



.cal-day-cell {

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.82rem;

  border-radius: 8px;

  border: 1px solid transparent;

  cursor: pointer;

  color: #181210;

  font-weight: 600;

  transition: all 0.15s ease;

}



.cal-day-cell:hover:not(.disabled):not(.selected) {

  background: #fbf5ea;

  color: #b8860b;

}



.cal-day-cell.selected {

  background: #b8860b !important;

  color: #ffffff !important;

  font-weight: 800;

  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.4);

}



.cal-day-cell.today-marker:not(.selected) {

  border-color: #b8860b;

  font-weight: 700;

}



.cal-day-cell.disabled {

  color: #d8d0c5;

  cursor: not-allowed;

  pointer-events: none;

}

.cal-day-cell.offday {

  color: #e09999 !important;

  cursor: not-allowed !important;

  pointer-events: none !important;

  text-decoration: line-through;

  opacity: 0.55;

}



.cal-day-cell.empty {

  cursor: default;

  pointer-events: none;

}



.cal-footer {

  margin-top: 10px;

  padding-top: 8px;

  border-top: 1px solid #f0e9df;

  text-align: center;

}



.cal-today-btn {

  background: #fcfbf9;

  border: 1px solid #e8dcce;

  color: #b8860b;

  font-size: 0.76rem;

  font-weight: 700;

  cursor: pointer;

  padding: 5px 12px;

  border-radius: 6px;

  transition: all 0.15s ease;

}



.cal-today-btn:hover {

  background: #b8860b;

  color: #ffffff;

  border-color: #b8860b;

}



/* Info banner */

.checkout-info-banner {

  margin-top: 10px;

  background: #f5efe6;

  border: 1px solid #e8dcce;

  border-radius: 8px;

  padding: 8px 12px;

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.78rem;

  color: #5c4f48;

}



.checkout-info-banner svg {

  color: #c8102e;

  flex-shrink: 0;

}



/* Pickup Highlight Card */

.checkout-pickup-card {

  background: #fbf5ea;

  border: 1.5px dashed #b8860b;

  border-radius: 16px;

  padding: 16px 18px;

}



.pickup-badge {

  display: inline-block;

  background: #b8860b;

  color: #ffffff;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.06em;

  padding: 2px 8px;

  border-radius: 4px;

  margin-bottom: 6px;

}



.checkout-pickup-card h5 {

  font-family: 'Cinzel', serif;

  font-size: 1.1rem;

  color: #181210;

  margin: 0 0 2px;

}



.pickup-address {

  font-size: 0.88rem;

  font-weight: 600;

  color: #7d6e68;

  margin-bottom: 12px;

}



.pickup-features {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



.pickup-feat-item {

  background: #ffffff;

  border: 1px solid #ede4d6;

  border-radius: 10px;

  padding: 8px 10px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.pickup-feat-item .feat-icon {

  font-size: 1.2rem;

}



.pickup-feat-item strong {

  display: block;

  font-size: 0.8rem;

  color: #181210;

}



.pickup-feat-item small {

  display: block;

  font-size: 0.72rem;

  color: #7d6e68;

}



/* Right Column: Receipt */

.checkout-side-col {

  display: flex;

  flex-direction: column;

}



.checkout-receipt-card {

  background: #fcfbf9;

  border: 1px solid #ede7df;

  border-radius: 20px;

  padding: 22px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  position: sticky;

  top: 10px;

}



.receipt-header {

  padding-bottom: 12px;

  border-bottom: 1px solid #ede7df;

  margin-bottom: 12px;

}



.receipt-title-wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.receipt-title-wrap h4 {

  font-family: 'Cinzel', serif;

  font-size: 1.1rem;

  color: #181210;

  margin: 0;

}



.receipt-tag {

  background: #f4ece1;

  color: #b8860b;

  font-size: 0.72rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 12px;

}



/* Items list in receipt */

.checkout-items-scroll {

  max-height: 200px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding-right: 4px;

  margin-bottom: 14px;

}



.checkout-item-row {

  background: #ffffff;

  border: 1px solid #ede7df;

  border-radius: 10px;

  padding: 8px 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

}



.checkout-item-left {

  display: flex;

  align-items: center;

  gap: 10px;

  flex: 1;

}



.checkout-item-qty {

  background: #f4eee6;

  color: #181210;

  font-weight: 800;

  font-size: 0.78rem;

  padding: 3px 7px;

  border-radius: 6px;

  border: 1px solid #e2d7c8;

}



.checkout-item-info {

  display: flex;

  flex-direction: column;

}



.checkout-item-name {

  font-size: 0.86rem;

  font-weight: 700;

  color: #181210;

  line-height: 1.25;

}



.checkout-item-unit {

  font-size: 0.74rem;

  color: #8c7f78;

}



.checkout-item-price {

  font-family: 'Cinzel', serif;

  font-weight: 700;

  font-size: 0.95rem;

  color: #b8860b;

  white-space: nowrap;

}



/* Fallback item row */

.modal-item-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 0;

  border-bottom: 1px solid #ede7df;

  font-size: 0.88rem;

}



/* Totals */

.checkout-totals {

  background: #ffffff;

  border: 1px solid #ede7df;

  border-radius: 12px;

  padding: 14px;

  margin-bottom: 16px;

}



.receipt-row {

  display: flex;

  justify-content: space-between;

  font-size: 0.86rem;

  color: #6b5e58;

  margin-bottom: 6px;

}



.receipt-badge-free {

  background: #e8f5e9;

  color: #2e7d32;

  font-weight: 800;

  font-size: 0.74rem;

  padding: 2px 7px;

  border-radius: 4px;

}



.receipt-divider {

  height: 1px;

  background: #ede7df;

  margin: 8px 0;

}



.receipt-total-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.05rem;

  font-weight: 800;

  color: #181210;

  padding-top: 2px;

}



.receipt-total-row .total-value {

  font-family: 'Cinzel', serif;

  font-size: 1.35rem;

  color: #b8860b;

  font-weight: 800;

}



/* Submit Button */

.checkout-cta-wrap {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.btn-submit-order {

  background: linear-gradient(135deg, #c8102e 0%, #9b0d23 100%);

  color: #ffffff !important;

  padding: 15px 22px;

  border-radius: 30px;

  font-size: 1.02rem;

  font-weight: 800;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  box-shadow: 0 6px 20px rgba(200, 16, 46, 0.35);

  transition: all 0.25s ease;

  width: 100%;

}



.btn-submit-order:hover {

  background: linear-gradient(135deg, #db1838 0%, #ad1129 100%);

  transform: translateY(-2px);

  box-shadow: 0 8px 26px rgba(200, 16, 46, 0.5);

}



.btn-submit-order:active {

  transform: translateY(0);

}



.checkout-security-notice {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-size: 0.74rem;

  color: #7d6e68;

  text-align: center;

}



.receipt-trust-badges {

  display: flex;

  justify-content: space-between;

  border-top: 1px dashed #e5dcce;

  padding-top: 12px;

  margin-top: 14px;

}



.trust-badge-item {

  font-size: 0.72rem;

  color: #8c7f78;

  font-weight: 600;

}



/* Mobile Responsive */

@media (max-width: 768px) {

  .checkout-modal-backdrop {

    padding: 12px 8px;

  }

  .checkout-modal {

    max-width: 100%;

    max-height: 94vh;

    padding: 20px 14px;

    border-radius: 18px;

  }

  .checkout-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

  .checkout-type-toggle,

  .checkout-payment-toggle {

    grid-template-columns: 1fr;

    gap: 8px;

  }

  .checkout-type-btn,

  .checkout-payment-btn {

    padding: 10px 12px;

  }

  .checkout-fields-row {

    grid-template-columns: 1fr;

    gap: 10px;

  }

  .checkout-fields-row.address-zip-row {

    grid-template-columns: 2fr 1fr;

  }

  .checkout-section-box {

    padding: 14px 12px;

  }

  .checkout-receipt-card {

    padding: 14px;

    border-radius: 14px;

    position: static;

  }

  .pickup-features {

    grid-template-columns: 1fr;

    gap: 8px;

  }

  .checkout-header {

    margin-bottom: 16px;

    padding-bottom: 12px;

  }

  .checkout-header-title {

    font-size: 1.25rem;

  }

  .checkout-header-subtitle {

    font-size: 0.82rem;

  }

  .btn-submit-order {

    padding: 13px 16px;

    font-size: 0.94rem;

  }

  .receipt-trust-badges {

    flex-wrap: wrap;

    gap: 6px 12px;

    justify-content: center;

  }

}



/* ==========================================

   COMPREHENSIVE RESPONSIVE ARCHITECTURE

   ========================================== */



/* Hamburger Button */

.nav-toggle-btn {

  display: none;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 8px;

  width: 38px;

  height: 38px;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 5px;

  cursor: pointer;

  padding: 8px;

  transition: all 0.25s ease;

  flex-shrink: 0;

}



.nav-toggle-btn:hover {

  background: rgba(245, 166, 35, 0.15);

  border-color: rgba(245, 166, 35, 0.4);

}



.nav-toggle-btn span {

  display: block;

  width: 20px;

  height: 2px;

  background-color: #fff;

  border-radius: 2px;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.nav-toggle-btn.active span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}



.nav-toggle-btn.active span:nth-child(2) {

  opacity: 0;

  transform: scale(0);

}



.nav-toggle-btn.active span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}



/* Apple Liquid Glass Mobile Dropdown Menu */

.mobile-nav-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  z-index: 998;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.mobile-nav-backdrop.open {

  opacity: 1;

  pointer-events: auto;

}



.mobile-nav-drawer {

  position: fixed;

  top: 72px;

  left: 14px;

  right: 14px;

  width: auto;

  max-width: 440px;

  margin: 0 auto;

  height: auto;

  max-height: calc(100vh - 90px);

  background: rgba(22, 10, 9, 0.72);

  backdrop-filter: blur(36px) saturate(180%);

  -webkit-backdrop-filter: blur(36px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 26px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.2);

  z-index: 999;

  display: flex;

  flex-direction: column;

  padding: 16px;

  transform: translateY(-18px) scale(0.96);

  opacity: 0;

  pointer-events: none;

  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),

              opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);

  overflow-y: auto;

}



.mobile-nav-drawer.open {

  transform: translateY(0) scale(1);

  opacity: 1;

  pointer-events: auto;

}



.mobile-nav-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

  padding: 4px 6px 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.mobile-nav-links {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 16px;

}



.mobile-nav-links a {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 11px 16px;

  color: #ede2db;

  text-decoration: none;

  font-size: 0.96rem;

  font-weight: 600;

  border-radius: 16px;

  border: 1px solid transparent;

  background: rgba(255, 255, 255, 0.02);

  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}



.mobile-nav-links a:hover {

  color: #fff;

  background: rgba(255, 255, 255, 0.08);

  transform: translateX(4px);

}



.mobile-nav-links a.active {

  color: var(--accent-gold);

  background: rgba(245, 166, 35, 0.14);

  border-color: rgba(245, 166, 35, 0.35);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

}



.mobile-nav-footer {

  margin-top: 4px;

  padding-top: 14px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.mobile-nav-footer a.mobile-call-cta {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  background: linear-gradient(135deg, rgba(217, 56, 30, 0.85), rgba(139, 30, 27, 0.9));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;

  text-decoration: none;

  padding: 13px;

  border-radius: 16px;

  font-weight: 700;

  font-size: 0.92rem;

  box-shadow: 0 6px 20px rgba(217, 56, 30, 0.35);

  transition: all 0.22s ease;

}



.mobile-nav-footer a.mobile-call-cta:active {

  transform: scale(0.98);

}



.celebration-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

}



/* MEDIA QUERY: TABLETS & SMALL DESKTOPS (<= 1024px) */

@media (max-width: 1024px) {

  .restaurant-grid,

  .celebration-grid,

  .delivery-banner,

  .contact-grid,

  .footer-top {

    grid-template-columns: 1fr;

    gap: 36px;

  }

  

  .menu-items-grid {

    grid-template-columns: 1fr;

  }

  

  .hero-content {

    max-width: 75%;

  }



  .nav-links {

    gap: 0.15rem;

  }



  .nav-links a {

    font-size: 0.78rem;

    padding: 5px 8px;

  }

}



/* MEDIA QUERY: TABLET & MOBILE SCREENS (<= 1080px) */

@media (max-width: 1080px) {

  nav .nav-links {

    display: none !important;

  }



  .nav-toggle-btn {

    display: flex !important;

  }



  header {

    height: 60px !important;

    padding: 0 16px !important;

  }



  .brand-logo-img {

    height: 28px !important;

  }



  .brand-hut-img {

    height: 20px !important;

  }



  .header-actions {

    gap: 8px !important;

  }



  .header-actions .phone-pill span {

    display: none !important;

  }



  .header-actions .phone-pill {

    padding: 0 !important;

    width: 36px !important;

    height: 36px !important;

    justify-content: center !important;

    border-radius: 50% !important;

  }



  .cart-btn-header {

    height: 36px !important;

    padding: 0 11px !important;

    font-size: 0.8rem !important;

  }



  /* Language switcher is already inside the mobile drawer, hide in topbar on mobile to prevent header overflow */

  .header-actions .lang-switch-group {

    display: none !important;

  }



  /* Notice Bar on Mobile */

  .top-announcement {

    flex-direction: column;

    gap: 3px;

    font-size: 0.72rem;

    padding: 6px 12px;

  }



  .top-announcement span:nth-child(2) {

    display: none;

  }



  /* Hero Section */

  .hero-container {

    height: auto !important;

    min-height: 520px !important;

    padding: 80px 0 60px;

  }



  .hero-content {

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 18px;

  }



  .hero-actions {

    flex-direction: column;

    gap: 12px;

  }



  .hero-actions .btn-main,

  .hero-actions .btn-secondary {

    width: 100%;

    justify-content: center;

  }



  .hero-content h1 {

    font-size: 2.3rem !important;

    line-height: 1.15 !important;

  }



  .hero-content p {

    padding: 10px 18px 0 !important;

    font-size: 0.93rem !important;

  }



  .subpage-hero h1 {

    font-size: 2rem !important;

  }



  .subpage-hero p {

    font-size: 0.95rem !important;

  }



  /* Menu Tabs Horizontal Carousel */

  .menu-tabs {

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    justify-content: flex-start !important;

    padding: 6px 10px !important;

    border-radius: 16px !important;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    max-width: 100% !important;

    margin-bottom: 28px !important;

  }



  .menu-tabs::-webkit-scrollbar {

    display: none;

  }



  .menu-tab-btn {

    flex-shrink: 0;

    font-size: 0.78rem !important;

    padding: 6px 11px !important;

    white-space: nowrap;

  }



  /* Menu Item Cards */

  .menu-item-card {

    flex-direction: column !important;

    padding: 16px !important;

    gap: 14px !important;

  }



  .item-action-col {

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    min-width: 0 !important;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    padding-top: 10px;

  }



  .btn-add-cart {

    padding: 8px 14px !important;

    font-size: 0.8rem !important;

  }



  /* Capacity & Visuals */

  .capacity-cards {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

  }



  .restaurant-visuals {

    grid-template-columns: 1fr !important;

  }



  .visual-card img {

    height: 220px !important;

  }



  /* Forms & Reservation */

  .form-row {

    grid-template-columns: 1fr !important;

  }



  .reservation-form-card {

    padding: 22px 18px !important;

  }



  /* Footer */

  footer {

    padding: 45px 18px 25px !important;

  }



  .footer-top {

    gap: 28px !important;

  }



  .footer-bottom {

    flex-direction: column;

    gap: 12px;

    text-align: center;

  }



  /* Cart Drawer — full width on phones, max 420px on tablets */

  .cart-drawer {

    width: 100% !important;

    max-width: 420px !important;

    right: -100% !important;

  }



  .cart-drawer.open {

    right: 0 !important;

  }



  /* Floating Cart Button */

  .cart-floating-btn {

    bottom: 16px;

    right: 16px;

    padding: 12px 18px;

    font-size: 0.88rem;

  }

}



/* DISH THUMBNAIL IMAGE IN MENU CARD */

.item-thumb-img-wrap {

  width: 96px;

  height: 96px;

  border-radius: 12px;

  overflow: hidden;

  flex-shrink: 0;

  border: 1px solid var(--glass-border);

  background: rgba(0, 0, 0, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

}

.item-thumb-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}

.menu-item-card:hover .item-thumb-img {

  transform: scale(1.08);

}

@media (max-width: 480px) {

  .item-thumb-img-wrap {

    width: 80px;

    height: 80px;

  }



  /* Compact header on mobile */

  header {

    height: 56px !important;

    padding: 0 12px !important;

  }



  .brand-logo-img {

    height: 25px !important;

  }



  .brand-hut-img {

    height: 18px !important;

  }



  .cart-btn-header span:not(.cart-badge) {

    display: none !important;

  }



  .cart-btn-header {

    padding: 0 8px !important;

    min-width: 44px !important;

    justify-content: center !important;

  }



  /* Stack hero CTA buttons vertically on small phones */

  .hero-actions {

    flex-direction: column !important;

    gap: 10px !important;

    width: 100% !important;

  }



  .hero-actions .btn-main,

  .hero-actions .btn-secondary {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

    padding: 13px 16px !important;

    font-size: 0.9rem !important;

  }



  .hero-title {

    font-size: 2rem !important;

  }



  .subpage-hero h1 {

    font-size: 1.7rem !important;

  }

}



/* =============================================

   BREAKPOINT: ≤375px — Very small phones (iPhone SE, budget Android)

   ============================================= */

@media (max-width: 375px) {

  .hero-title {

    font-size: 1.75rem !important;

    line-height: 1.1 !important;

  }



  .hero-description {

    font-size: 0.88rem !important;

  }



  .btn-main,

  .btn-secondary {

    padding: 11px 14px !important;

    font-size: 0.87rem !important;

  }



  .checkout-modal {

    padding: 14px 10px !important;

    border-radius: 14px !important;

  }



  .checkout-header-title {

    font-size: 1.05rem !important;

  }



  .menu-tab-btn {

    font-size: 0.7rem !important;

    padding: 5px 7px !important;

  }



  .subpage-hero h1 {

    font-size: 1.55rem !important;

  }



  .quality-pillars-section {

    padding: 32px 12px !important;

  }



  .page-section {

    padding: 40px 14px !important;

  }



  .section-title {

    font-size: 1.6rem !important;

  }



  .capacity-num {

    font-size: 2.2rem !important;

  }



  footer {

    padding: 40px 14px 20px !important;

  }



  .footer-links a {

    font-size: 0.82rem !important;

  }

}





/* ========================================================

   ITALIAN LUXURY WHITE / LIGHT THEME STYLES

   ======================================================== */



body {

  background-color: var(--bg-base) !important;

  color: var(--text-main) !important;

}



/* Header Frosted White */

header {

  background: rgba(255, 255, 255, 0.95) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;

}



.nav-links a {

  color: #181210 !important;

  font-weight: 600;

}

.nav-links a:hover,

.nav-links a.active {

  color: var(--accent-gold) !important;

}

.nav-links a.active::after {

  background: var(--accent-gold) !important;

}



.phone-pill {

  background: rgba(184, 134, 11, 0.08) !important;

  border: 1px solid rgba(184, 134, 11, 0.3) !important;

  color: #8a6508 !important;

}

.phone-pill:hover {

  background: rgba(184, 134, 11, 0.16) !important;

}



.cart-btn-header {

  background: #181210 !important;

  border: 1px solid #181210 !important;

  color: #ffffff !important;

}

.cart-btn-header:hover {

  background: var(--accent-gold) !important;

  border-color: var(--accent-gold) !important;

  color: #000000 !important;

}



.nav-toggle-btn span {

  background: #181210 !important;

}



/* Subpage Hero */

.subpage-hero {

  background: radial-gradient(circle at 50% 30%, rgba(200, 16, 46, 0.05), transparent 70%), #faf7f4 !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.subpage-hero h1 {

  color: #181210 !important;

}

.subpage-hero p {

  color: #5e524c !important;

}

.section-eyebrow {

  color: #8a6508 !important;

  background: rgba(184, 134, 11, 0.09) !important;

  border: 1px solid rgba(184, 134, 11, 0.25) !important;

}



/* Category Tabs */

.menu-tab-btn {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  color: #5e524c !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;

}

.menu-tab-btn:hover {

  background: rgba(184, 134, 11, 0.08) !important;

  color: #181210 !important;

  border-color: rgba(184, 134, 11, 0.35) !important;

}

.menu-tab-btn.active {

  background: #181210 !important;

  color: #ffffff !important;

  border-color: #181210 !important;

}

.menu-tab-count {

  background: rgba(0, 0, 0, 0.06) !important;

  color: #181210 !important;

}

.menu-tab-btn.active .menu-tab-count {

  background: var(--accent-gold) !important;

  color: #000000 !important;

}



/* Menu Item Cards */

.menu-item-card {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

}

.menu-item-card:hover {

  border-color: rgba(184, 134, 11, 0.45) !important;

  box-shadow: 0 10px 28px rgba(184, 134, 11, 0.12) !important;

  transform: translateY(-2px);

}

.item-info h4 {

  color: #181210 !important;

}

.item-info p {

  color: #5e524c !important;

}

.item-price {

  color: #181210 !important;

  font-weight: 800;

}

.btn-add-cart {

  background: #181210 !important;

  color: #ffffff !important;

  border: 1px solid #181210 !important;

}

.btn-add-cart:hover {

  background: var(--accent-gold) !important;

  border-color: var(--accent-gold) !important;

  color: #000000 !important;

}

.item-tag {

  background: rgba(184, 134, 11, 0.1) !important;

  color: #8a6508 !important;

  border: 1px solid rgba(184, 134, 11, 0.28) !important;

}

.item-tag.bestseller {

  background: rgba(200, 16, 46, 0.08) !important;

  color: #c8102e !important;

  border-color: rgba(200, 16, 46, 0.28) !important;

}



/* Teasers & Subpage Cards */

.teaser-card,

.contact-card,

.reservation-form-card,

.info-block-card,

.story-card {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;

}

.teaser-card h3,

.contact-card h3,

.reservation-form-card h3,

.story-card h3 {

  color: #181210 !important;

}

.teaser-card p,

.contact-detail-row p,

.story-card p {

  color: #5e524c !important;

}

.contact-detail-row strong {

  color: #181210 !important;

}

.contact-detail-row svg {

  color: var(--accent-gold) !important;

}



/* Forms */

.form-input, .form-select, .form-textarea {

  background: #ffffff !important;

  border: 1px solid #d8d1c7 !important;

  color: #181210 !important;

}

.form-input:focus, .form-select:focus, .form-textarea:focus {

  border-color: var(--accent-gold) !important;

  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15) !important;

}

.reservation-form-card label {

  color: #4a3e38 !important;

}



/* Mobile Nav Drawer */

.mobile-nav-drawer {

  background: #ffffff !important;

  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.mobile-nav-header {

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.mobile-nav-links a {

  color: #181210 !important;

}

.mobile-nav-links a:hover,

.mobile-nav-links a.active {

  background: rgba(184, 134, 11, 0.09) !important;

  color: #8a6508 !important;

}

.mobile-call-cta {

  background: #181210 !important;

  color: #ffffff !important;

}



/* Cart Drawer */

.cart-drawer {

  background: #ffffff !important;

  color: #181210 !important;

  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;

}

.cart-header {

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.cart-header h3 {

  color: #181210 !important;

}

.cart-item-card {

  background: #faf8f5 !important;

  border: 1px solid rgba(0, 0, 0, 0.07) !important;

}

.cart-item-title {

  color: #181210 !important;

}

.cart-item-price {

  color: #181210 !important;

}

.cart-footer {

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

  background: #ffffff !important;

}

.cart-total-row {

  color: #181210 !important;

}

.cart-total-row strong {

  color: #181210 !important;

}





/* ========================================================

   DEFINITIVE HIGH-CONTRAST LUXURY WHITE THEME RULES

   ======================================================== */



body {

  background-color: #fcfbf9 !important;

  color: #181210 !important;

}



/* Header */

header {

  background: rgba(255, 255, 255, 0.96) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;

}



.brand-logo-img {

  filter: none !important;

}



.nav-links a {

  color: #181210 !important;

  font-weight: 600 !important;

}

.nav-links a:hover,

.nav-links a.active {

  color: #b8860b !important;

}

.nav-links a.active::after {

  background: #b8860b !important;

}



.phone-pill {

  background: rgba(184, 134, 11, 0.08) !important;

  border: 1px solid rgba(184, 134, 11, 0.3) !important;

  color: #8a6508 !important;

}

.phone-pill:hover {

  background: rgba(184, 134, 11, 0.16) !important;

}



.cart-btn-header {

  background: #181210 !important;

  border: 1px solid #181210 !important;

  color: #ffffff !important;

}

.cart-btn-header:hover {

  background: #b8860b !important;

  border-color: #b8860b !important;

  color: #000000 !important;

}



.nav-toggle-btn span {

  background: #181210 !important;

}



/* Headings across all sections (except hero video and dark footer) */

h1:not(.hero h1):not(footer h1),

h2:not(.hero h2):not(footer h2),

h3:not(.hero h3):not(footer h3),

h4:not(.hero h4):not(footer h4),

.section-title,

.restaurant-text h2,

.restaurant-text h3,

.capacity-title,

.item-info h4,

.teaser-card h3,

.contact-card h3,

.reservation-form-card h3,

.story-card h3 {

  color: #181210 !important;

}



p:not(.hero p):not(footer p) {

  color: #5e524c !important;

}



.section-eyebrow {

  color: #8a6508 !important;

  background: rgba(184, 134, 11, 0.1) !important;

  border: 1px solid rgba(184, 134, 11, 0.28) !important;

}



/* Subpage Hero */

.subpage-hero {

  background: radial-gradient(circle at 50% 30%, rgba(200, 16, 46, 0.06), transparent 70%), #faf7f4 !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.subpage-hero h1 {

  color: #181210 !important;

}

.subpage-hero h1 span {

  background: linear-gradient(135deg, #c8102e 0%, #b8860b 100%) !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

}

.subpage-hero p {

  color: #5e524c !important;

}



/* Menu Tabs Container & Buttons */

.menu-tabs {

  background: #f2ede4 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  padding: 6px !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;

}

.menu-tab-btn {

  background: transparent !important;

  border: 1px solid transparent !important;

  color: #5e524c !important;

  box-shadow: none !important;

}

.menu-tab-btn:hover {

  background: rgba(255, 255, 255, 0.8) !important;

  color: #181210 !important;

}

.menu-tab-btn.active {

  background: #181210 !important;

  color: #ffffff !important;

  border-color: #181210 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;

}

.menu-tab-count {

  background: rgba(0, 0, 0, 0.08) !important;

  color: #181210 !important;

}

.menu-tab-btn.active .menu-tab-count {

  background: #b8860b !important;

  color: #000000 !important;

}



/* Menu Item Cards */

.menu-item-card {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.09) !important;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;

}

.menu-item-card:hover {

  border-color: rgba(184, 134, 11, 0.5) !important;

  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.12) !important;

}

.item-info h4 {

  color: #181210 !important;

  font-weight: 700 !important;

}

.item-info p {

  color: #5e524c !important;

}

.item-price {

  color: #181210 !important;

  font-weight: 800 !important;

}

.btn-add-cart {

  background: #181210 !important;

  color: #ffffff !important;

  border: 1px solid #181210 !important;

}

.btn-add-cart:hover {

  background: #b8860b !important;

  border-color: #b8860b !important;

  color: #000000 !important;

}

.item-tag {

  background: rgba(184, 134, 11, 0.1) !important;

  color: #8a6508 !important;

  border: 1px solid rgba(184, 134, 11, 0.28) !important;

}

.item-tag.bestseller {

  background: rgba(200, 16, 46, 0.08) !important;

  color: #c8102e !important;

  border-color: rgba(200, 16, 46, 0.28) !important;

}



/* Teaser Cards & Capacity Cards */

.capacity-card {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;

}

.capacity-num {

  color: #b8860b !important;

}

.capacity-title {

  color: #181210 !important;

}

.capacity-sub {

  color: #5e524c !important;

}



.teaser-card,

.contact-card,

.reservation-form-card,

.info-block-card,

.story-card {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;

}



.btn-secondary {

  background: #ffffff !important;

  color: #181210 !important;

  border: 1px solid rgba(0, 0, 0, 0.15) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;

}

.btn-secondary:hover {

  background: rgba(184, 134, 11, 0.1) !important;

  border-color: #b8860b !important;

  color: #8a6508 !important;

}



/* Forms */

.form-input, .form-select, .form-textarea {

  background: #ffffff !important;

  border: 1px solid #d8d1c7 !important;

  color: #181210 !important;

}

.form-input:focus, .form-select:focus, .form-textarea:focus {

  border-color: #b8860b !important;

  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15) !important;

}

.reservation-form-card label {

  color: #4a3e38 !important;

}



/* Mobile Nav Drawer */

.mobile-nav-drawer {

  background: #ffffff !important;

  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.mobile-nav-header {

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.mobile-nav-links a {

  color: #181210 !important;

}

.mobile-nav-links a:hover,

.mobile-nav-links a.active {

  background: rgba(184, 134, 11, 0.09) !important;

  color: #8a6508 !important;

}

.mobile-call-cta {

  background: #181210 !important;

  color: #ffffff !important;

}

.btn-close-cart {

  color: #181210 !important;

}



/* Cart Drawer */

.cart-drawer {

  background: #ffffff !important;

  color: #181210 !important;

  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;

  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;

}

.cart-drawer-header {

  background: #ffffff !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.cart-drawer-header h3 {

  color: #181210 !important;

}

.btn-close-cart {

  background: rgba(0, 0, 0, 0.05) !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  color: #181210 !important;

}

.btn-close-cart:hover {

  background: rgba(200, 16, 46, 0.1) !important;

  color: #c8102e !important;

}

.cart-order-type-toggle {

  background: #f2ede4 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.order-type-btn {

  color: #5e524c !important;

}

.order-type-btn.active {

  background: #ffffff !important;

  border-color: rgba(0, 0, 0, 0.1) !important;

  color: #181210 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;

}

.cart-item-row {

  background: #faf8f5 !important;

  border: 1px solid rgba(0, 0, 0, 0.07) !important;

}

.cart-item-details .item-name {

  color: #181210 !important;

}

.cart-item-details .item-unit-price {

  color: #5e524c !important;

}

.cart-item-stepper {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

}

.stepper-btn {

  color: #181210 !important;

}

.stepper-qty {

  color: #181210 !important;

}

.cart-item-total {

  color: #181210 !important;

}

.cart-drawer-footer {

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

  background: #ffffff !important;

}

.cart-summary-row {

  color: #5e524c !important;

}

.cart-summary-row.total-row {

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #181210 !important;

}

.cart-summary-row.total-row span:last-child {

  color: #b8860b !important;

}

.cart-toast {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  color: #181210 !important;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15) !important;

}

.cart-toast-icon {

  background: rgba(46, 125, 50, 0.12) !important;

  color: #2e7d32 !important;

}



/* Delivery Banner in White Theme */

.delivery-banner {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05) !important;

}

.delivery-text h3 {

  color: #181210 !important;

}

.delivery-text p {

  color: #5e524c !important;

}

.perk-item {

  color: #3b322c !important;

}

.delivery-action-box {

  background: #faf7f2 !important;

  border: 1px solid rgba(184, 134, 11, 0.2) !important;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;

}

.delivery-action-box span {

  color: #7d7168 !important;

}

.delivery-action-box .tel-num {

  color: #b8860b !important;

}

.delivery-action-box p {

  color: #5e524c !important;

}



/* WhatsApp 1-Click Ordering Button */

.btn-checkout-whatsapp {

  background: #25D366 !important;

  color: #ffffff !important;

  padding: 12px 18px !important;

  border-radius: 30px !important;

  font-size: 0.95rem !important;

  font-weight: 700 !important;

  border: none !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  text-decoration: none !important;

  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  width: 100% !important;

}

.btn-checkout-whatsapp:hover {

  background: #20ba5a !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;

  color: #ffffff !important;

}



/* Checkout Modal White Theme */

.checkout-modal {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.1) !important;

  color: #181210 !important;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;

}

.checkout-modal h3 {

  color: #181210 !important;

}

.checkout-modal p {

  color: #5c4f48 !important;

}

.modal-close-btn {

  background: rgba(0, 0, 0, 0.06) !important;

  color: #181210 !important;

}

.modal-close-btn:hover {

  background: rgba(0, 0, 0, 0.12) !important;

}

.modal-recap-box {

  background: #faf8f5 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #2b211d !important;

}

.checkout-type-btn {

  background: #fbf9f6 !important;

  border: 1.5px solid #e2dad0 !important;

  color: #2b211d !important;

}

.checkout-type-btn .type-text strong {

  color: #181210 !important;

}

.checkout-type-btn .type-text small {

  color: #6b5e58 !important;

}

.checkout-type-btn.active {

  background: #fff8eb !important;

  border-color: #b8860b !important;

  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.2) !important;

}

.checkout-type-btn.active .type-text strong {

  color: #8a6508 !important;

}

.modal-input-group label {

  color: #3b2e27 !important;

}

.modal-pickup-info-box {

  background: #fff8eb !important;

  border: 1.5px dashed #b8860b !important;

  color: #2b211d !important;

}

.modal-order-items {

  background: #fbf9f6 !important;

  border: 1px solid #e8e2d8 !important;

  color: #181210 !important;

}

.modal-item-row {

  border-bottom: 1px solid #ede7df !important;

  color: #181210 !important;

}

.modal-item-row:last-child {

  border-bottom: none !important;

}

.modal-totals-box {

  background: #fbf9f6 !important;

  border: 1px solid #e8e2d8 !important;

  color: #181210 !important;

}



/* Cart Customer Form in White Theme */

.cart-customer-section {

  background: #faf8f5 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

}

.cart-customer-section h5 {

  color: #8a6508 !important;

}

.cart-input {

  background: #ffffff !important;

  border: 1px solid #d8d1c7 !important;

  color: #181210 !important;

}

.cart-input:focus {

  border-color: #b8860b !important;

  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.15) !important;

}



/* ==========================================================================

   WHATSAPP INTEGRATION STYLES (HEADER, FLOATING, DELIVERY, CONTACT)

   ========================================================================== */



/* WhatsApp Header Pill */

.whatsapp-header-pill {

  height: 38px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  background: rgba(37, 211, 102, 0.12);

  border: 1px solid rgba(37, 211, 102, 0.45);

  color: #128C7E !important;

  text-decoration: none !important;

  font-size: 0.82rem;

  font-weight: 700;

  padding: 0 13px;

  border-radius: 999px;

  white-space: nowrap;

  transition: all 0.22s ease;

}



.whatsapp-header-pill:hover {

  background: #25D366;

  border-color: #25D366;

  color: #ffffff !important;

  transform: translateY(-1px);

  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);

}



.whatsapp-header-pill svg {

  flex-shrink: 0;

  fill: currentColor;

}



/* Permanent Floating WhatsApp Round Button */

.floating-whatsapp-btn {

  position: fixed;

  bottom: 26px;

  right: 26px;

  width: 58px;

  height: 58px;

  background: linear-gradient(135deg, #25D366, #128C7E);

  color: #ffffff !important;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.12);

  z-index: 998;

  cursor: pointer;

  text-decoration: none !important;

  border: 1.5px solid rgba(255, 255, 255, 0.5);

  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;

  animation: pulse-whatsapp 3s infinite;

}



.floating-whatsapp-btn:hover {

  transform: translateY(-3px) scale(1.08);

  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.65);

  color: #ffffff !important;

}



/* When shopping cart button is present on the page, stack WhatsApp cleanly above it */

body:has(#floatingCartBtn) .floating-whatsapp-btn,

body:has(#floating-cart-btn) .floating-whatsapp-btn {

  bottom: 90px;

}



.floating-whatsapp-btn svg,

.floating-whatsapp-btn img,

.floating-whatsapp-btn .wa-native-icon {

  flex-shrink: 0;

  width: 34px;

  height: 34px;

}



.wa-native-icon {

  display: inline-block;

  vertical-align: middle;

  flex-shrink: 0;

  object-fit: contain;

}



.btn-checkout-whatsapp img,

.btn-checkout-whatsapp .wa-native-icon {

  width: 22px;

  height: 22px;

  margin-right: 2px;

}



@keyframes pulse-whatsapp {

  0%, 100% {

    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5);

  }

  50% {

    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.6), 0 0 0 9px rgba(37, 211, 102, 0);

  }

}



/* Delivery Box WhatsApp Button */

.btn-whatsapp-box {

  background: #25D366;

  color: #ffffff !important;

  padding: 11px 18px;

  border-radius: 30px;

  font-size: 0.92rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-decoration: none !important;

  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  border: none;

  cursor: pointer;

}



.btn-whatsapp-box:hover {

  background: #20ba5a;

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);

  color: #ffffff !important;

}



/* Contact Details WhatsApp Highlights */

.btn-whatsapp-small {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: #25D366;

  color: #ffffff !important;

  font-size: 0.84rem;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: 999px;

  text-decoration: none !important;

  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);

  transition: all 0.2s ease;

}



.btn-whatsapp-small:hover {

  background: #20ba5a;

  transform: translateY(-1px);

  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5);

  color: #ffffff !important;

}



.whatsapp-highlight-row {

  background: rgba(37, 211, 102, 0.08) !important;

  border: 1px solid rgba(37, 211, 102, 0.3) !important;

  border-radius: 12px;

  padding: 16px !important;

  margin: 14px 0 !important;

}



/* Mobile Nav Drawer WhatsApp Button */

.mobile-whatsapp-cta {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 12px;

  background: #25D366;

  color: #ffffff !important;

  border-radius: 999px;

  font-weight: 700;

  font-size: 0.92rem;

  text-decoration: none !important;

  margin-top: 10px;

  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);

  transition: all 0.2s ease;

}



.mobile-whatsapp-cta:hover {

  background: #20ba5a;

  transform: translateY(-1px);

  color: #ffffff !important;

}



@media (max-width: 820px) {

  .whatsapp-header-pill .whatsapp-header-label {

    display: none;

  }

  .whatsapp-header-pill {

    padding: 0 10px;

  }

}



@media (max-width: 500px) {

  .floating-whatsapp-btn {

    bottom: 20px;

    right: 16px;

    width: 52px;

    height: 52px;

  }

  .floating-whatsapp-btn img,

  .floating-whatsapp-btn .wa-native-icon {

    width: 30px;

    height: 30px;

  }

}



/* ========================================================

   REFINED EDITORIAL PHILOSOPHY & PILLARS SECTION

   ======================================================== */

.quality-pillars-section {

  background: #fbf9f5;

  border-top: 1px solid rgba(184, 134, 11, 0.15);

  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  padding: 44px 6vw 48px;

  position: relative;

  z-index: 5;

}



.quality-pillars-container {

  max-width: 1240px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 0;

}



.pillar-item {

  padding: 8px 30px;

  position: relative;

  transition: transform 0.25s ease;

}



.pillar-item:first-child {

  padding-left: 0;

}



.pillar-item:last-child {

  padding-right: 0;

}



.pillar-item:not(:last-child)::after {

  content: '';

  position: absolute;

  right: 0;

  top: 10%;

  height: 80%;

  width: 1px;

  background: linear-gradient(to bottom, transparent, rgba(184, 134, 11, 0.25), transparent);

}



.pillar-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

}



.pillar-kicker {

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  color: var(--accent-gold);

  text-transform: uppercase;

}



.pillar-icon {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: rgba(184, 134, 11, 0.08);

  border: 1px solid rgba(184, 134, 11, 0.22);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #a46d12;

  transition: all 0.3s ease;

}



.pillar-icon svg {

  width: 20px;

  height: 20px;

}



.pillar-item:hover .pillar-icon {

  background: #a46d12;

  color: #ffffff;

  transform: scale(1.08);

}



.pillar-title {

  font-family: 'Cinzel', serif;

  font-size: 1.12rem;

  font-weight: 700;

  color: #1a1412;

  margin: 0 0 8px 0;

  line-height: 1.35;

}



.pillar-desc {

  font-size: 0.86rem;

  color: #5c524c;

  line-height: 1.6;

  margin: 0;

}



@media (max-width: 1024px) {

  .quality-pillars-container {

    grid-template-columns: repeat(2, 1fr);

    gap: 32px 24px;

  }

  .pillar-item,

  .pillar-item:first-child,

  .pillar-item:last-child {

    padding: 0 16px;

  }

  .pillar-item:not(:last-child)::after {

    display: none;

  }

}



@media (max-width: 600px) {

  .quality-pillars-section {

    padding: 32px 6vw;

  }

  .quality-pillars-container {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  .pillar-item,

  .pillar-item:first-child,

  .pillar-item:last-child {

    padding: 0 0 20px 0;

    border-bottom: 1px solid rgba(0,0,0,0.06);

  }

  .pillar-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

  }

}



/* =============================================

   PREFERS REDUCED MOTION — Accessibility (WCAG 2.3.3)

   ============================================= */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

  .hero-bg-layer {

    transition: none !important;

  }

  #particles-canvas {

    display: none !important;

  }

}



/* Footer links to Impressum, Datenschutz and allergens */

.footer-legal {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 6px 18px;

}

.footer-legal a {

  color: inherit;

  font-weight: 600;

  text-decoration: none;

}

.footer-legal a:hover {

  color: var(--accent-red);

  text-decoration: underline;

}



/* Checkout: postal code outside the delivery area (js/cart.js checkDeliveryZip) */

.checkout-zip-error {

  margin-top: 10px;

  padding: 10px 14px;

  border-radius: 10px;

  background: #fef2f2;

  border: 1px solid #fecaca;

  color: #991b1b;

  font-size: 0.86rem;

  line-height: 1.5;

}

.checkout-zip-error[hidden] {

  display: none;

}

.checkout-zip-error button {

  margin-top: 6px;

  display: inline-block;

  border: 0;

  border-radius: 999px;

  padding: 6px 14px;

  background: #c8102e;

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

}

.checkout-zip-error button:hover {

  background: #9b0d23;

}



/* Homepage hero text sits on the dark video: keep it light (the global p rule above forces grey with !important) */

.hero-content .hero-description {

  color: rgba(255, 255, 255, 0.88) !important;

  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);

}



/* =============================================
   HERO SECTION MODERN REFINEMENT (OPTION 2)
   ============================================= */
.hero-serif-italic {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #f5ebdc;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  display: inline-block;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.hero-serif-main {
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  display: inline-block;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.9);
}

.hero-rating-pill {
  font-size: 0.75rem;
  color: #e5b95c;
  font-weight: 600;
  margin-top: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
}

/* Mobile Hero (<768px): Unblocked Full Cinema Showcase */
@media (max-width: 768px) {
  .hero-container {
    height: calc(100vh - 72px) !important;
    height: calc(100dvh - 72px) !important;
    min-height: 580px !important;
    max-height: 840px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 12px 16px max(74px, calc(58px + env(safe-area-inset-bottom))) 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-container video {
    object-position: center 30% !important;
  }

  /* Seamless vignette: subtle darkening on top and bottom only; middle 60% is crystal clear video */
  .cinematic-vignette {
    background: linear-gradient(180deg, 
      rgba(8, 4, 3, 0.78) 0%, 
      rgba(8, 4, 3, 0.45) 18%, 
      rgba(0, 0, 0, 0) 34%, 
      rgba(0, 0, 0, 0) 58%, 
      rgba(8, 4, 3, 0.6) 78%, 
      rgba(8, 4, 3, 0.94) 100%) !important;
    pointer-events: none !important;
  }

  .hero-content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }

  /* Zero blocking card: 100% transparent container allowing video to shine through */
  .hero-island-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    pointer-events: none !important;
  }

  .scene-eyebrow {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 2px !important;
    pointer-events: auto !important;
  }

  .scene-eyebrow span {
    font-size: 0.70rem !important;
    letter-spacing: 2px !important;
    color: #e5b95c !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    display: inline-block !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.15 !important;
    margin: 2px 0 4px 0 !important;
    font-weight: 700 !important;
    pointer-events: auto !important;
  }

  .hero-serif-italic {
    font-size: 0.82em !important;
    color: #f7ede2 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8) !important;
  }

  .hero-serif-main {
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.95), 0 0 24px rgba(0, 0, 0, 0.8) !important;
  }

  .hero-description {
    font-size: 0.82rem !important;
    color: rgba(255, 245, 238, 0.9) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
    display: block !important;
    pointer-events: auto !important;
  }

  /* Lift CTA buttons up into the safe thumb zone above mobile navigation toolbars */
  .hero-cta-group {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    pointer-events: auto !important;
  }

  .hero-cta-group .btn-main {
    flex: 1.15 !important;
    padding: 14px 10px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: #c8102e !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(200, 16, 46, 0.55) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-cta-group .btn-secondary {
    flex: 1 !important;
    padding: 14px 10px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    background: rgba(18, 10, 8, 0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-rating-pill {
    font-size: 0.74rem !important;
    color: #e5b95c !important;
    font-weight: 600 !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important;
    pointer-events: auto !important;
  }

  /* Lift floating WhatsApp button cleanly above lifted CTA buttons */
  html body .floating-whatsapp-btn {
    bottom: max(152px, calc(140px + env(safe-area-inset-bottom))) !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }

  html body .floating-whatsapp-btn img,
  html body .floating-whatsapp-btn .wa-native-icon {
    width: 26px !important;
    height: 26px !important;
  }
}