/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
  --primary:        #D62633;
  --primary-dark:   #b01e29;
  --accent:         #20242D;
  --accent-light:   #2d3241;
  --body-text:      #222222;
  --mid-text:       #555555;
  --light-text:     #f5f5f5;
  --gold:           #F5A623;
  --white:          #ffffff;
  --off-white:      #faf8f5;
  --warm-bg:        #f4f0e8;
  --border-light:   #e2e0dd;
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:      0 4px 24px rgba(0, 0, 0, 0.11);
  --shadow-lg:      0 10px 48px rgba(0, 0, 0, 0.18);
  --shadow-xl:      0 16px 64px rgba(0, 0, 0, 0.24);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --transition:     0.3s ease;
  --font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Lato', Arial, Helvetica, sans-serif;
  --container-max:  1300px;
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:    var(--font-body);
  font-size:      18px;
  font-weight:    400;
  letter-spacing: normal;
  line-height:    1.72;
  color:          var(--body-text);
  background:     var(--white);
  overflow-x:     hidden;
}

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

ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }
address { font-style: normal; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   GLOBAL CONTAINER
   ============================================================ */
.container {
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    0 20px;
}


/* ============================================================
   GLOBAL BUTTONS
   ============================================================ */
.btn {
  display:        inline-block;
  padding:        15px 30px;
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 2px;
  line-height:    1;
  color:          var(--white);
  text-transform: uppercase;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     background var(--transition),
                  transform var(--transition),
                  box-shadow var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-order-hero {
  background:  var(--primary);
  font-size:   16px;
  padding:     18px 36px;
  width:       100%;
  text-align:  center;
  box-shadow:  0 6px 24px rgba(214, 38, 51, 0.45);
}

.btn-order-hero:hover {
  background: var(--primary-dark);
  box-shadow: 0 10px 36px rgba(214, 38, 51, 0.55);
}

.btn-download {
  background:  var(--primary);
  display:     block;
  width:       100%;
  text-align:  center;
  box-shadow:  0 4px 16px rgba(214, 38, 51, 0.3);
}

.btn-download:hover {
  background: var(--primary-dark);
  box-shadow: 0 8px 28px rgba(214, 38, 51, 0.4);
}

.btn-giftcard {
  background:  var(--primary);
  font-size:   16px;
  padding:     18px 44px;
  box-shadow:  0 6px 28px rgba(214, 38, 51, 0.5);
}

.btn-giftcard:hover {
  background: var(--primary-dark);
  box-shadow: 0 12px 40px rgba(214, 38, 51, 0.6);
}

.btn-footer-order {
  background:  var(--primary);
  font-size:   15px;
  padding:     16px 32px;
  width:       100%;
  text-align:  center;
  box-shadow:  0 4px 20px rgba(214, 38, 51, 0.35);
}

.btn-footer-order:hover {
  background: var(--primary-dark);
  box-shadow: 0 8px 32px rgba(214, 38, 51, 0.5);
}


/* ============================================================
   GLOBAL SECTION TYPOGRAPHY
   ============================================================ */
.section-heading {
  font-family:    var(--font-heading);
  font-size:      40px;
  font-weight:    700;
  letter-spacing: -0.5px;
  line-height:    1.2;
  color:          var(--accent);
  margin-bottom:  16px;
}

.section-heading::after {
  content:    '';
  display:    block;
  width:      56px;
  height:     3px;
  background: var(--primary);
  margin-top: 14px;
}

.section-heading.text-center {
  text-align: center;
}

.section-heading.text-center::after {
  margin: 14px auto 0;
}

.section-subheading {
  font-family:    var(--font-body);
  font-size:      17px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.5;
  color:          var(--mid-text);
  margin-bottom:  52px;
}

.section-subheading.text-center {
  text-align: center;
}

.text-center { text-align: center; }


/* ============================================================
   FADE IN UP — SCROLL ANIMATION
   ============================================================ */
.fade-in-up {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.fade-in-up.visible {
  opacity:   1;
  transform: translateY(0);
}


/* ============================================================
   HEADER SECTION
   ============================================================ */
.site-header {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  height:     120px;
  z-index:    1000;
  background: transparent;
  transition: background var(--transition),
              box-shadow var(--transition),
              height var(--transition);
}

.site-header.scrolled {
  background: var(--accent);
  box-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
}

.header-logo a {
  display: flex;
  align-items: center;
}

.logo-img {
  height:      79px;
  width:       auto;
  object-fit:  contain;
  transition:  height var(--transition);
}

.site-header.scrolled .logo-img {
  height: 64px;
}

/* Navigation */
.header-nav {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         32px;
}

.nav-links a {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 1.8px;
  line-height:    1;
  color:          rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  position:       relative;
  transition:     color var(--transition);
}

.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -5px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--primary);
  transition: width var(--transition);
}

.nav-links a:hover {
  color: var(--white);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-order-btn {
  background:    var(--primary) !important;
  color:         var(--white) !important;
  padding:       10px 20px;
  border-radius: var(--radius-sm);
  transition:    background var(--transition),
                 transform var(--transition),
                 box-shadow var(--transition) !important;
}

.nav-order-btn:hover {
  background:  var(--primary-dark) !important;
  transform:   translateY(-1px);
  box-shadow:  0 4px 14px rgba(214, 38, 51, 0.5);
}

.nav-order-btn::after {
  display: none !important;
}

/* Facebook Icon */
.fb-icon {
  display:    flex;
  align-items: center;
  border-radius: 50%;
  overflow:   hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.fb-icon:hover {
  transform:  scale(1.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Hamburger */
.hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: space-between;
  width:           28px;
  height:          20px;
  padding:         0;
  z-index:         1001;
}

.hamburger span {
  display:     block;
  width:       100%;
  height:      2px;
  background:  var(--white);
  border-radius: 2px;
  transition:  transform 0.32s ease, opacity 0.22s ease;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position:       relative;
  width:          100%;
  height:         700px;
  display:        flex;
  align-items:    center;
  overflow:       hidden;
  background:     var(--accent);
}

/* Background Slider */
.hero-slider {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hero-slide {
  position:           absolute;
  inset:              0;
  background-size:    cover;
  background-position: center center;
  background-repeat:  no-repeat;
  opacity:            0;
  transition:         opacity 2s ease-in-out;
  will-change:        opacity;
}

.hero-slide.active {
  opacity: 1;
}

/* Dark gradient overlay */
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    130deg,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.60) 100%
  );
  z-index: 1;
}

/* Hero Content Grid */
.hero-content {
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             48px;
  width:           100%;
  padding-top:     120px;
}

.hero-left {
  flex: 1;
}

.hero-right {
  flex-shrink: 0;
}

/* Hero Typography */
.hero-headline {
  font-family:    var(--font-heading);
  font-size:      60px;
  font-weight:    700;
  letter-spacing: -0.5px;
  line-height:    1.12;
  color:          var(--white);
  margin-bottom:  22px;
  text-shadow:    2px 3px 16px rgba(0, 0, 0, 0.5);
}

.hero-phone {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      44px;
  font-weight:    900;
  letter-spacing: 4px;
  line-height:    1.1;
  color:          var(--primary);
  margin-bottom:  14px;
  transition:     color var(--transition), text-shadow var(--transition);
  text-shadow:
    -2px -2px 0 rgba(255, 255, 255, 0.85),
     2px -2px 0 rgba(255, 255, 255, 0.85),
    -2px  2px 0 rgba(255, 255, 255, 0.85),
     2px  2px 0 rgba(255, 255, 255, 0.85),
     0 0 24px rgba(255, 255, 255, 0.55),
     0 3px 12px rgba(0, 0, 0, 0.35);
}

.hero-phone:hover {
  color: #ff3344;
  text-shadow:
    -2px -2px 0 rgba(255, 255, 255, 0.95),
     2px -2px 0 rgba(255, 255, 255, 0.95),
    -2px  2px 0 rgba(255, 255, 255, 0.95),
     2px  2px 0 rgba(255, 255, 255, 0.95),
     0 0 32px rgba(255, 255, 255, 0.7),
     0 4px 14px rgba(0, 0, 0, 0.4);
}

.hero-address {
  font-family:    var(--font-body);
  font-size:      16px;
  font-weight:    400;
  letter-spacing: 0.5px;
  line-height:    1.5;
  color:          rgba(255, 255, 255, 0.80);
}

/* Action Box */
.action-box {
  background:    rgba(32, 36, 45, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding:       38px 42px;
  text-align:    center;
  min-width:     330px;
}

.action-hours {
  font-family:    var(--font-body);
  font-size:      17px;
  font-weight:    700;
  letter-spacing: 0.5px;
  line-height:    1.4;
  color:          var(--white);
  margin-bottom:  4px;
}

.action-hours span {
  font-weight:  400;
  color:        rgba(255, 255, 255, 0.65);
}

.action-subtitle {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    400;
  letter-spacing: 2px;
  line-height:    1.4;
  color:          rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom:  26px;
}

.delivery-logos {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
  margin-top:      20px;
}

.delivery-logo {
  height:     42px;
  width:      auto;
  max-width:  136px;
  object-fit: contain;
  filter:     brightness(0) invert(1);
  opacity:    0.85;
}

.delivery-logos .delivery-logo:first-child {
  height:    49px;
  max-width: 152px;
}


/* ============================================================
   HERO → SECTION 1 DIVIDER
   ============================================================ */
.hero-section-divider {
  width:      100%;
  background: var(--primary);
  padding:    14px 20px;
  text-align: center;
}

.hero-section-divider-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             18px;
  max-width:       var(--container-max);
  margin:          0 auto;
}

.divider-line {
  flex:       1;
  max-width:  240px;
  height:     1px;
  background: rgba(255, 255, 255, 0.35);
}

.divider-text {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 4px;
  line-height:    1;
  color:          rgba(255, 255, 255, 0.90);
  text-transform: uppercase;
  white-space:    nowrap;
}

.divider-diamond {
  font-size:   10px;
  color:       rgba(255, 255, 255, 0.55);
  line-height: 1;
}


/* ============================================================
   SECTION 1: WELCOME & HOURS
   ============================================================ */
.section-welcome {
  padding:    100px 0 64px;
  background: var(--white);
}

.welcome-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   72px;
  align-items:           stretch;
  margin-bottom:         64px;
}

.welcome-left {
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

/* Left column text */
.welcome-left p {
  font-family:    var(--font-body);
  font-size:      17px;
  font-weight:    400;
  letter-spacing: normal;
  line-height:    1.78;
  color:          #3d3d3d;
  margin-bottom:  22px;
}

.welcome-sub-heading {
  font-family:    var(--font-heading);
  font-size:      26px;
  font-weight:    600;
  letter-spacing: normal;
  line-height:    1.3;
  color:          var(--primary);
  margin-bottom:  14px;
  margin-top:     6px;
}

/* Interior Carousel */
.interior-carousel {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-xl);
  background:    var(--accent);
  margin-bottom: 28px;
}

.carousel-track {
  position: relative;
  width:    100%;
  height:   100%;
}

.carousel-image {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 0.75s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
}

.carousel-btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(0, 0, 0, 0.45);
  color:           var(--white);
  width:           44px;
  height:          44px;
  border-radius:   50%;
  font-size:       18px;
  z-index:         5;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), transform 0.2s ease;
}

.carousel-btn:hover {
  background: var(--primary);
  transform:  translateY(-50%) scale(1.08);
}

.carousel-prev { left:  14px; }
.carousel-next { right: 14px; }

.carousel-dots {
  position:  absolute;
  bottom:    14px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   5;
}

.carousel-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.45);
  cursor:        pointer;
  transition:    background var(--transition), transform var(--transition);
}

.carousel-dot.active {
  background: var(--primary);
  transform:  scale(1.3);
}

/* Hours Card */
.hours-card {
  background:    var(--accent);
  border-radius: var(--radius-md);
  padding:       30px 34px;
}

.hours-title {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 2px;
  line-height:    1.4;
  color:          rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom:  18px;
}

.hours-list {
  margin-bottom: 26px;
}

.hours-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         11px 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.07);
}

.hours-row:last-child {
  border-bottom: none;
}

.hours-day {
  font-family:    var(--font-body);
  font-size:      15px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.4;
  color:          rgba(255, 255, 255, 0.80);
}

.hours-time {
  font-family:    var(--font-body);
  font-size:      15px;
  font-weight:    700;
  letter-spacing: 0.3px;
  line-height:    1.4;
  color:          var(--white);
}

/* Section Break Callout */
.section-callout {
  position:      relative;
  text-align:    center;
  padding:       72px 60px;
  margin-top:    48px;
  background:    var(--accent);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.section-callout::before {
  content:     '\201C';
  font-family: var(--font-heading);
  font-size:   240px;
  font-weight: 700;
  color:       rgba(214, 38, 51, 0.12);
  position:    absolute;
  top:         -40px;
  left:        24px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.section-callout::after {
  content:     '\201D';
  font-family: var(--font-heading);
  font-size:   240px;
  font-weight: 700;
  color:       rgba(214, 38, 51, 0.12);
  position:    absolute;
  bottom:      -100px;
  right:       24px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.section-callout p {
  font-family:    var(--font-heading);
  font-size:      26px;
  font-weight:    400;
  font-style:     italic;
  letter-spacing: 0.3px;
  line-height:    1.7;
  color:          rgba(255, 255, 255, 0.92);
  max-width:      860px;
  margin:         0 auto;
  position:       relative;
  z-index:        1;
}


/* ============================================================
   SECTION 2: PARALLAX BREAK
   ============================================================ */
.parallax-section {
  width:                 100%;
  height:                820px;
  background-image:      url('images/clemenzas.jpg');
  background-attachment: fixed;
  background-position:   top center;
  background-repeat:     no-repeat;
  background-size:       cover;
}


/* ============================================================
   SECTION 3: TESTIMONIALS
   ============================================================ */
.section-testimonials {
  padding:    100px 0;
  background: var(--off-white);
}

.testimonials-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             28px;
  justify-content: center;
}

.testimonial-card {
  flex:          0 0 calc((100% - 56px) / 3);
  background:    var(--white);
  border-radius: var(--radius-md);
  padding:       34px 30px;
  box-shadow:    var(--shadow-md);
  border-top:    4px solid var(--primary);
  transition:    transform var(--transition), box-shadow var(--transition);
}

.testimonial-card:hover {
  transform:  translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.stars {
  font-family:    var(--font-body);
  font-size:      22px;
  font-weight:    400;
  letter-spacing: 3px;
  line-height:    1;
  color:          var(--gold);
  margin-bottom:  18px;
}

.testimonial-card blockquote {
  font-family:    var(--font-heading);
  font-size:      15px;
  font-weight:    400;
  font-style:     italic;
  letter-spacing: normal;
  line-height:    1.75;
  color:          #444444;
  margin-bottom:  20px;
  quotes:         none;
}

.testimonial-card cite {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 1.5px;
  line-height:    1;
  color:          var(--primary);
  font-style:     normal;
  text-transform: uppercase;
}


/* ============================================================
   SECTION 4: FOOD IMAGES GRID
   ============================================================ */
.section-gallery {
  padding:    100px 0 80px;
  background: var(--white);
}

/* ── Infinite scroll carousel ── */
@keyframes galleryScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gallery-carousel-wrap {
  position:   relative;
  overflow:   hidden;
  width:      100%;
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    0 20px;
}

/* Soft fade-out edges */
.gallery-carousel-wrap::before,
.gallery-carousel-wrap::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  width:          80px;
  z-index:        2;
  pointer-events: none;
}

.gallery-carousel-wrap::before {
  left:       0;
  background: linear-gradient(to right, var(--white) 0%, transparent 100%);
}

.gallery-carousel-wrap::after {
  right:      0;
  background: linear-gradient(to left, var(--white) 0%, transparent 100%);
}

.gallery-carousel-track {
  display:    flex;
  gap:        16px;
  width:      max-content;
  animation:  galleryScroll 80s linear infinite;
  will-change: transform;
}

/* Pause entire track on any item hover */
.gallery-carousel-wrap:hover .gallery-carousel-track {
  animation-play-state: paused;
}

.gallery-carousel-item {
  position:      relative;
  flex-shrink:   0;
  width:         280px;
  height:        280px;
  border-radius: 16px;
  overflow:      hidden;
  background:    #e8e4df;
  box-shadow:    var(--shadow-md);
  cursor:        pointer;
}

.gallery-carousel-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(0.62);
  transition: filter 0.45s ease, transform 0.5s ease;
  display:    block;
}

.gallery-carousel-item:hover img {
  filter:    brightness(1);
  transform: scale(1.05);
}

/* Magnifier hint on hover */
.gallery-carousel-item::after {
  content:         '\1F50D';
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%) scale(0.5);
  font-size:       30px;
  opacity:         0;
  z-index:         3;
  pointer-events:  none;
  transition:      opacity 0.35s ease, transform 0.35s ease;
  filter:          drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.gallery-carousel-item:hover::after {
  opacity:   0.9;
  transform: translate(-50%, -50%) scale(1);
}


/* ============================================================
   SECTION 5: GIFT CARD PROMOTION
   ============================================================ */
.section-giftcard {
  width:                 100%;
  background-image:      url('images/giftcard.jpg');
  background-attachment: fixed;
  background-position:   center center;
  background-repeat:     no-repeat;
  background-size:       cover;
  position:              relative;
}

.giftcard-overlay {
  background: rgba(8, 9, 12, 0.62);
  padding:    150px 20px;
  width:      100%;
}

.giftcard-content {
  text-align: center;
}

.giftcard-eyebrow {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 4px;
  line-height:    1;
  color:          var(--primary);
  text-transform: uppercase;
  margin-bottom:  18px;
}

.giftcard-heading {
  font-family:    var(--font-heading);
  font-size:      64px;
  font-weight:    700;
  letter-spacing: 8px;
  line-height:    1;
  color:          var(--white);
  text-transform: uppercase;
  margin-bottom:  16px;
}

.giftcard-sub {
  font-family:    var(--font-heading);
  font-size:      28px;
  font-weight:    400;
  letter-spacing: 0.5px;
  line-height:    1.3;
  color:          rgba(255, 255, 255, 0.85);
  margin-bottom:  20px;
}

.giftcard-body {
  font-family:    var(--font-body);
  font-size:      17px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.65;
  color:          rgba(255, 255, 255, 0.70);
  max-width:      540px;
  margin:         0 auto 40px;
}


/* ============================================================
   FAT FOOTER SECTION
   ============================================================ */
.fat-footer {
  width:      100%;
  background: var(--accent);
  padding:    80px 0;
}

.footer-grid {
  display:               grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap:                   64px;
  align-items:           start;
}

.footer-col-title {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 2.5px;
  line-height:    1;
  color:          var(--primary);
  text-transform: uppercase;
  margin-bottom:  26px;
  padding-bottom: 14px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.08);
}

.footer-address {
  margin-bottom: 22px;
}

.footer-address p {
  font-family:    var(--font-body);
  font-size:      15px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.75;
  color:          rgba(255, 255, 255, 0.70);
}

.footer-hours {
  margin-bottom: 22px;
}

.footer-hours-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.05);
}

.footer-hours-row:last-child {
  border-bottom: none;
}

.footer-hours-row span:first-child {
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.5;
  color:          rgba(255, 255, 255, 0.65);
}

.footer-hours-row span:last-child {
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.3px;
  line-height:    1.5;
  color:          var(--white);
}

.footer-phone {
  display:        block;
  font-family:    var(--font-body);
  font-size:      22px;
  font-weight:    700;
  letter-spacing: 0.5px;
  line-height:    1.3;
  color:          var(--primary);
  margin-bottom:  18px;
  transition:     color var(--transition);
}

.footer-phone:hover {
  color: #ff4d5a;
}

.footer-fb {
  display:       inline-flex;
  align-items:   center;
  border-radius: 50%;
  overflow:      hidden;
  transition:    transform var(--transition), box-shadow var(--transition);
}

.footer-fb:hover {
  transform:  scale(1.12);
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.45);
}

/* Map */
.footer-map-wrap {
  border-radius: var(--radius-sm);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  border:        1px solid rgba(255, 255, 255, 0.07);
}

.footer-map-wrap iframe {
  display: block;
}

/* Order column */
.footer-col-order {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

.footer-delivery-text {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    400;
  letter-spacing: 1.8px;
  line-height:    1.4;
  color:          rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin:         16px 0 22px;
}

.footer-delivery-logos {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             20px;
}

.footer-delivery-logo {
  height:     38px;
  width:      auto;
  max-width:  128px;
  object-fit: contain;
  filter:     brightness(0) invert(1);
  opacity:    0.75;
  transition: opacity var(--transition);
}

.footer-delivery-logos .footer-delivery-logo:first-child {
  height:    44px;
  max-width: 144px;
}

.footer-delivery-logo:hover {
  opacity: 1;
}


/* ============================================================
   COPYRIGHT FOOTER BAR
   ============================================================ */
.copyright-bar {
  width:      100%;
  background: #070810;
  padding:    20px 20px;
  text-align: center;
}

.copyright-bar p {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.3px;
  line-height:    1.5;
  color:          rgba(255, 255, 255, 0.38);
}

.copyright-bar a {
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.3px;
  line-height:    1.5;
  color:          rgba(255, 255, 255, 0.65);
  transition:     color var(--transition);
}

.copyright-bar a:hover {
  color: var(--primary);
}


/* ============================================================
   MOBILE STICKY PHONE BAR
   ============================================================ */
.mobile-phone-bar {
  display:    none;
  position:   fixed;
  bottom:     0;
  left:       0;
  width:      100%;
  z-index:    9998;
  background: var(--primary);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

.mobile-phone-bar a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         18px 20px;
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     700;
  letter-spacing:  1.5px;
  line-height:     1;
  color:           var(--white);
  text-transform:  uppercase;
}

.mobile-phone-bar a:hover {
  background: var(--primary-dark);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.94);
  z-index:         9999;
  align-items:     center;
  justify-content: center;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-inner {
  position:   relative;
  max-width:  88vw;
  max-height: 86vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width:    88vw;
  max-height:   84vh;
  object-fit:   contain;
  border-radius: var(--radius-md);
  box-shadow:   0 20px 80px rgba(0, 0, 0, 0.7);
  display:      block;
}

.lightbox-close {
  position:    fixed;
  top:         20px;
  right:       24px;
  font-size:   36px;
  font-weight: 300;
  color:       rgba(255, 255, 255, 0.80);
  background:  none;
  border:      none;
  cursor:      pointer;
  line-height: 1;
  z-index:     10000;
  transition:  color var(--transition), transform var(--transition);
  padding:     4px 10px;
}

.lightbox-close:hover {
  color:     var(--white);
  transform: scale(1.15);
}

.lightbox-prev,
.lightbox-next {
  position:        fixed;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255, 255, 255, 0.10);
  border:          1px solid rgba(255, 255, 255, 0.18);
  color:           var(--white);
  width:           52px;
  height:          52px;
  border-radius:   50%;
  font-size:       22px;
  cursor:          pointer;
  z-index:         10000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition), transform 0.2s ease;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(214, 38, 51, 0.75);
  transform:  translateY(-50%) scale(1.08);
}

.lightbox-prev { left:  20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position:    fixed;
  bottom:      20px;
  left:        50%;
  transform:   translateX(-50%);
  font-family: var(--font-body);
  font-size:   13px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color:       rgba(255, 255, 255, 0.55);
  z-index:     10000;
}



/* ============================================================
   RESPONSIVE — 1100px
   ============================================================ */
@media (max-width: 1100px) {
  .welcome-grid {
    gap: 44px;
  }

  .gallery-carousel-item {
    width:  240px;
    height: 240px;
  }

  .footer-grid {
    gap: 40px;
  }

  .hero-headline {
    font-size: 50px;
  }
}


/* ============================================================
   RESPONSIVE — 900px
   ============================================================ */
@media (max-width: 900px) {
  .hero-headline {
    font-size: 42px;
  }

  .hero-content {
    flex-direction: column;
    text-align:     center;
    gap:            36px;
  }

  .action-box {
    min-width: unset;
    width:     100%;
  }

  .testimonial-card {
    flex: 0 0 calc((100% - 28px) / 2);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-col-map {
    grid-column: 1 / -1;
    order:       -1;
  }

  .footer-col-order {
    align-items: flex-start;
    text-align:  left;
  }
}


/* ============================================================
   RESPONSIVE — 768px (MOBILE BREAKPOINT)
   ============================================================ */
@media (max-width: 768px) {

  /* Header */
  .site-header {
    height: 74px;
  }

  .logo-img,
  .site-header.scrolled .logo-img {
    height: 55px;
  }

  .hamburger {
    display: flex;
  }

  .header-nav {
    position:   fixed;
    top:        74px;
    left:       0;
    width:      100%;
    background: var(--accent);
    flex-direction: column;
    align-items:    flex-start;
    padding:        0 24px;
    gap:            0;
    max-height:     0;
    overflow:       hidden;
    transition:     max-height 0.42s ease, padding 0.32s ease;
    box-shadow:     0 10px 28px rgba(0, 0, 0, 0.4);
  }

  .header-nav.open {
    max-height: 460px;
    padding:    20px 24px 28px;
  }

  .nav-links {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    width:          100%;
    margin-bottom:  12px;
  }

  .nav-links li {
    width:         100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav-links a {
    display:   block;
    padding:   15px 0;
    font-size: 14px;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-order-btn {
    background:    none !important;
    padding:       15px 0 !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
  }

  .fb-icon {
    margin-top: 12px;
  }

  /* Hero */
  .hero-section {
    height:         auto;
    min-height:     auto;
    padding-bottom: 0;
  }

  /* Divider bar — hide decorative elements, let text wrap */
  .divider-line,
  .divider-diamond {
    display: none;
  }

  .divider-text {
    font-size:      10px;
    letter-spacing: 2px;
    white-space:    normal;
    text-align:     center;
  }

  .hero-content {
    flex-direction: column;
    text-align:     center;
    padding-top:    90px;
    padding-bottom: 44px;
    gap:            22px;
  }

  .hero-headline {
    font-size: 34px;
  }

  .hero-phone {
    font-size: 24px;
  }

  .hero-address {
    font-size: 15px;
  }

  .action-box {
    min-width: unset;
    width:     100%;
    padding:   28px 24px;
  }

  /* Section 1 */
  .section-welcome {
    padding: 72px 0 48px;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
    gap:                   40px;
  }

  .section-heading {
    font-size: 30px;
  }

  /* Parallax — disable fixed on iOS for performance */
  .parallax-section {
    height:                480px;
    background-attachment: scroll;
    background-position:   top center;
  }

  /* Testimonials */
  .testimonials-grid {
    flex-direction: column;
  }

  .testimonial-card {
    flex: 0 0 100%;
  }

  /* Gallery — smaller tiles on mobile */
  .gallery-carousel-item {
    width:  200px;
    height: 200px;
  }

  /* Gift Card */
  .section-giftcard {
    background-attachment: scroll;
  }

  .giftcard-overlay {
    padding: 80px 20px;
  }

  .giftcard-heading {
    font-size:     42px;
    letter-spacing: 4px;
  }

  .giftcard-sub {
    font-size: 22px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap:                   44px;
  }

  .footer-col-map {
    order: 0;
    grid-column: auto;
  }

  .footer-col-order {
    align-items: center;
    text-align:  center;
  }

  /* Mobile phone bar */
  .mobile-phone-bar {
    display: block;
  }

  body {
    padding-bottom: 58px;
  }
}


/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
  .hero-headline {
    font-size: 28px;
  }

  .section-heading {
    font-size: 26px;
  }

  .section-callout p {
    font-size: 18px;
  }

  .giftcard-heading {
    font-size:     34px;
    letter-spacing: 3px;
  }

  .giftcard-sub {
    font-size: 19px;
  }

  .gallery-carousel-item {
    width:  160px;
    height: 160px;
  }

  .action-box {
    padding: 24px 18px;
  }

  .hero-phone {
    font-size: 21px;
  }
}