/* V4.7 premium frontend redesign inspired by the Crepe & Shake brand mockup. */
:root {
  --premium-brown: #2a1209;
  --premium-chocolate: #4b1608;
  --premium-orange: #ed8d55;
  --premium-sage: #a8ba72;
  --premium-mint: #bfe8df;
  --premium-cream: #fff4e3;
  --premium-soft: rgba(255, 248, 239, .74);
}

.premium-site-header {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--premium-brown);
  background: var(--premium-cream);
  isolation: isolate;
}

.premium-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.65rem 0;
}

.premium-logo-link,
.premium-nav-actions,
.premium-nav-links {
  display: flex;
  align-items: center;
}

.premium-logo-link {
  gap: .75rem;
  font-weight: 950;
}

.premium-nav-logo {
  display: grid;
  width: 4.7rem;
  height: 4.7rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(74,31,15,.12);
  overflow: hidden;
}

.premium-nav-logo-img,
.premium-nav-logo .site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .35rem;
}

.premium-nav-logo .brand-mark {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}

.premium-nav-name {
  color: var(--premium-brown);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.premium-nav-links {
  justify-content: center;
  gap: 1.25rem;
  padding: .4rem .6rem;
  border-radius: 999px;
  background: rgba(255, 247, 235, .42);
  backdrop-filter: blur(14px);
}

.premium-nav-links a {
  position: relative;
  padding: .55rem .15rem;
  color: var(--premium-brown);
  font-weight: 850;
  font-size: 1.02rem;
}

.premium-nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .24rem;
  height: 2px;
  background: currentColor;
  transition: left .2s ease, right .2s ease;
}

.premium-nav-links a:hover::after,
.premium-nav-links a:focus-visible::after,
.premium-nav-links a.active::after {
  left: 0;
  right: 0;
}

.premium-nav-actions {
  justify-content: flex-end;
  gap: .75rem;
}

.premium-lang,
.premium-order-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  border-radius: 999px;
  font-weight: 950;
}

.premium-lang {
  min-width: 2.9rem;
  background: rgba(255,255,255,.52);
  color: var(--premium-brown);
}

.premium-order-now {
  padding: 0 1.35rem;
  background: var(--premium-chocolate);
  color: #fff;
  box-shadow: 0 16px 34px rgba(42, 18, 9, .20);
}

.premium-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
}

.premium-hero-bg,
.premium-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.premium-hero-bg {
  background-image: url('/assets/crepe-shake-hero.png');
  background-size: cover;
  background-position: center right;
  filter: saturate(1.08) contrast(1.02);
  transform: scale(1.015);
}

/*.premium-hero-overlay {*/
/*  z-index: -1;*/
/*  background:*/
/*    radial-gradient(circle at 4% 18%, rgba(255,255,255,.95) 0 8rem, transparent 20rem),*/
/*    radial-gradient(circle at 45% 28%, rgba(255,246,230,.34), transparent 24rem),*/
/*    linear-gradient(90deg, rgba(255,246,230,.98) 0%, rgba(255,246,230,.90) 27%, rgba(255,246,230,.45) 50%, rgba(255,246,230,.12) 73%, rgba(255,246,230,.04) 100%);*/
/*}*/

.premium-hero-overlay {
  z-index: -1;
  background:
    radial-gradient(circle at 4% 18%, rgba(255,255,255,.55) 0 6rem, transparent 17rem),
    radial-gradient(circle at 45% 28%, rgba(255,246,230,.18), transparent 22rem),
    linear-gradient(90deg, rgba(255,246,230,.62) 0%, rgba(255,246,230,.42) 27%, rgba(255,246,230,.20) 50%, rgba(255,246,230,.07) 73%, rgba(255,246,230,.02) 100%);
}

.premium-hero-content {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 9.5rem 0 3rem;
}

.premium-hero-logo-wrap {
  display: grid;
  width: 8.75rem;
  height: 8.75rem;
  place-items: center;
  margin-bottom: 2.2rem;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 24px 80px rgba(69, 27, 11, .12);
  overflow: hidden;
}

.premium-hero-logo-img,
.premium-hero-logo-wrap .site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .55rem;
}

.premium-hero-logo-wrap .brand-mark {
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 1.5rem;
  font-size: 1.2rem;
}

.premium-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.05rem;
  color: #7f3d18;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.premium-eyebrow::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-left: 4px solid var(--premium-orange);
  border-top: 4px solid var(--premium-orange);
  border-radius: .2rem 0 0 0;
  transform: rotate(-24deg);
  opacity: .95;
}

.rtl .premium-eyebrow::before {
  left: auto;
  right: -2.2rem;
}

.premium-hero h1 {
  max-width: 41rem;
  margin: 0 0 1.65rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.7rem, 7.25vw, 6.85rem);
  line-height: .94;
  letter-spacing: -.055em;
  color: var(--premium-brown);
  text-wrap: balance;
}

.premium-hero-text {
  max-width: 35rem;
  margin: 0;
  color: #513426;
  font-size: clamp(1.02rem, 2vw, 1.28rem);
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.premium-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.15rem;
}

.premium-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.35rem;
  border: 1.5px solid var(--premium-brown);
  border-radius: 999px;
  padding: 0 1.45rem;
  font-weight: 950;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.premium-button:hover { transform: translateY(-2px); }
.premium-button-primary { background: var(--premium-chocolate); color: #fff; box-shadow: 0 18px 38px rgba(42,18,9,.21); }
.premium-button-secondary { background: rgba(255,255,255,.58); color: var(--premium-brown); backdrop-filter: blur(10px); }

.premium-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 49rem;
  margin-top: 3.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(74, 31, 15, .14);
}

.premium-stat {
  display: grid;
  place-items: center;
  gap: .45rem;
  min-height: 5rem;
  padding: .25rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(74, 31, 15, .14);
}

.premium-stat:last-child { border-right: 0; }
.rtl .premium-stat { border-right: 0; border-left: 1px solid rgba(74, 31, 15, .14); }
.rtl .premium-stat:last-child { border-left: 0; }

.premium-stat span {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  font-size: 1.5rem;
  color: var(--premium-brown);
}

.premium-stat strong {
  display: block;
  max-width: 9rem;
  color: #3d2418;
  font-size: .82rem;
  line-height: 1.35;
}

.premium-site-header + main {
  background:
    linear-gradient(180deg, #fff8ef 0%, #fffaf5 24rem),
    var(--cream);
}

.premium-site-header + main .intro {
  margin-top: 0;
  transform: translateY(-.25rem);
}

.menu-section .section-heading h2,
.offers-section .section-heading h2,
.gallery-preview .section-heading h2,
.reviews-section .section-heading h2 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: .96;
  letter-spacing: -.04em;
}

.menu-card {
  overflow: hidden;
  border: 1px solid rgba(74, 31, 15, .10) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 20px 58px rgba(42, 18, 9, .10) !important;
}

.menu-card-media img,
.offer-image,
.gallery-grid img {
  filter: saturate(1.06) contrast(1.02);
}

.order-button,
.button.primary {
  background: var(--premium-chocolate) !important;
  color: #fff !important;
  border-color: var(--premium-chocolate) !important;
}

@media (max-width: 980px) {
  .premium-site-header { min-height: auto; }
  .premium-nav {
    position: relative;
    grid-template-columns: 1fr;
    width: min(100% - 2rem, 720px);
    padding: 1rem 0 .25rem;
  }
  .premium-logo-link { justify-content: center; }
  .premium-nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .55rem;
  }
  .premium-nav-actions { justify-content: center; }
  .premium-hero { min-height: auto; }
  .premium-hero-bg { background-position: 66% center; }
  .premium-hero-overlay {
    background:
      linear-gradient(180deg, rgba(255,246,230,.96), rgba(255,246,230,.84) 46%, rgba(255,246,230,.55) 100%),
      radial-gradient(circle at 80% 42%, rgba(255,255,255,.22), transparent 18rem);
  }
  .premium-hero-content {
    width: min(100% - 2rem, 720px);
    padding: 2.5rem 0 3rem;
  }
  .premium-hero-logo-wrap {
    width: 7rem;
    height: 7rem;
    margin-bottom: 1.5rem;
  }
  .premium-hero h1 { max-width: 100%; }
  .premium-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-stat:nth-child(2) { border-right: 0; }
}

@media (max-width: 620px) {
  .premium-nav-name { display: none; }
  .premium-nav-links { gap: .85rem; }
  .premium-nav-logo { width: 4rem; height: 4rem; }
  .premium-order-now { padding-inline: 1rem; }
  .premium-hero-content { padding-top: 2rem; }
  .premium-eyebrow { margin-left: 2.1rem; letter-spacing: .14em; }
  .rtl .premium-eyebrow { margin-left: 0; margin-right: 2.1rem; }
  .premium-hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .premium-hero-actions { flex-direction: column; align-items: stretch; }
  .premium-button { width: 100%; }
  .premium-stats { grid-template-columns: 1fr; }
  .premium-stat,
  .premium-stat:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(74,31,15,.14); }
  .premium-stat:last-child { border-bottom: 0; }
}

/* V4.7.1 location label fix */
.premium-stat strong a {
  color: inherit;
  text-decoration: none;
}
.premium-stat strong a:hover,
.premium-stat strong a:focus-visible {
  text-decoration: underline;
}
.premium-stat strong {
  overflow-wrap: normal;
  word-break: normal;
}

/* V4.7.3: remove the duplicate top logo/name block from the premium frontend navigation. */
.premium-site-header .premium-logo-link {
  display: none !important;
}

.premium-nav {
  grid-template-columns: minmax(0, 1fr) auto;
}

.premium-nav-links {
  justify-self: center;
}

.premium-nav-actions {
  justify-self: end;
}

@media (max-width: 980px) {
  .premium-nav {
    grid-template-columns: 1fr;
    padding-top: .85rem;
  }
  .premium-nav-links {
    order: 2;
    justify-self: stretch;
    justify-content: center;
  }
  .premium-nav-actions {
    order: 1;
    justify-self: center;
  }
}