/* ============================================================
   Divina Pizza — site2/styles.css
   Based on site/divinapizza/styles.css with mobile fixes
   ============================================================ */

@font-face {
  font-family: 'Florence';
  src: url('./assets/florence.woff2') format('woff2'),
    url('./assets/florence.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  /* U+00B7 (middle dot) excluded: Florence maps it to a curly-quote-shaped glyph */
  unicode-range: U+0000-00B6, U+00B8-10FFFF;
}

/* ---- Variables ---- */
:root {
  --main-color: #310419;
  --secondary-color: rgb(128, 24, 74);
  --secondary-alpha: rgba(128, 24, 74, 0.4);
  --wine-900: #220612; --wine-800: #310419; --wine-850: #2a0616;
  --wine-bg: #470024; --wine-700: #4f0f2b; --wine-500: #80184a; --wine-300: #b2527f;
  --cream: #f9f1ea; --card: #fff9f5;
  --text-900: #201015; --text-600: #5d4b52; --text-500: #7a646d;
  --border: #ead7ce;
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.18); --shadow-md: 0 10px 28px rgba(0,0,0,0.22);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --section-gap: clamp(48px, 7vw, 80px);
}

/* ---- Focus ring — keyboard only, suppressed for mouse/touch ---- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Reset & Base ---- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  font-family: 'Manrope', sans-serif;
  box-sizing: border-box;
}

body {
  /* Was relying on Bootstrap's reboot for this — fine on index.html/menu.html, which
     load bootstrap.min.css, but the location and legal pages don't, so their body kept
     the browser's default 8px margin and pushed 8px past the viewport on every side. */
  margin: 0;
  background-color: var(--main-color);
  width: 100%;
  min-height: 100%;
  position: relative;
  color: white;
}

/* Form controls don't inherit color from body by default in the UA stylesheet. */
button,
input,
select,
textarea {
  color: inherit;
}

body::before {
  background-image: url('./assets/background.png');
  /* 504 KB -> 8 KB. The plain url above stays as the line a browser without image-set()
     understands; everything since Safari 17 takes the WebP and never fetches the PNG. */
  background-image: image-set(
    url('./assets/background.webp') type('image/webp'),
    url('./assets/background.png') type('image/png'));
  background-size: 820px;
  background-repeat: repeat;
  background-position: center;
  content: "";
  opacity: 0.05;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--wine-800, #310419);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Minimal topbar for the three standalone location pages (build-location-pages.js).
   Their header markup mirrors the menu page's — a back arrow beside the logo — but they
   only load this stylesheet, not menu/styles.css, so .topbar/.brand-wrap/.brand-logo/
   .back-btn had no rules here at all: the logo rendered at its native SVG size, filling
   most of a phone screen above an otherwise normal page. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(67, 0, 32, 0.98), rgba(67, 0, 32, 0.9));
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--cream, #f9f1ea);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.2s;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.brand-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

a {
  text-decoration: none;
}

/* ---- Navbar ---- */
.navbar {
  padding-top: 20px;
  z-index: 25;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

/* ---- Mobile Nav — full-screen overlay (< 992px) ---- */
@media (max-width: 991px) {
  /* Overlay active: when Bootstrap opens or is animating */
  #navbarNav.show,
  #navbarNav.collapsing {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(35, 2, 18, 0.98);
    height: auto !important;
    overflow: visible !important;
  }

  /* Skip Bootstrap's height transition — appear instantly */
  #navbarNav.collapsing {
    transition: none !important;
  }

  /* Fade in when shown */
  #navbarNav.show {
    animation: navFadeIn 0.22s ease forwards;
  }

  @keyframes navFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Centered nav list */
  #navbarNav .navbar-nav {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
  }

  #navbarNav .nav-item {
    width: 100%;
    text-align: center;
    margin-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  #navbarNav .nav-item:last-child {
    border-bottom: none;
  }
  /* Large tap targets */
  #navbarNav .nav-link {
    display: block;
    width: 100%;
    padding: 18px 48px;
    font-size: 0.88rem;
    letter-spacing: 0.22em;
    font-weight: 300;
    transition: background-color 0.15s ease;
  }

  #navbarNav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Navbar above slider on mobile — transparent so slider still shows through */
  .navbar {
    z-index: 100;
    padding-top: 0;
    align-items: flex-start !important;
  }

  /* Horizontal padding matches logo top margin for equidistance */
  .navbar .navcontent {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Logo: equal 16px from top and left */
  .navbar-logo {
    margin-top: 16px;
  }

  /* Hamburger: keep comfortable top spacing on mobile */
  .navbar-toggler {
    margin-top: 16px;
  }

  /* X close button inside overlay */
  .nav-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.6rem;
    padding: 8px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
    /* 44px minimum touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-close-btn:hover {
    color: white;
  }

  /* Logo and toggler inherit navbar's stacking context */
  .navbar-logo {
    position: relative;
    z-index: auto;
  }

  .navbar-toggler {
    position: relative;
    z-index: 220;
    pointer-events: auto;
  }

  #navbarNav.show,
  #navbarNav.collapsing {
    z-index: 220;
  }

  /* Hamburger → X when overlay is open */
  .navbar-toggler[aria-expanded="true"] .fa-bars::before {
    content: "\f00d";
  }
}

.nav-link,
.nav-link.active {
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 200;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-link.active {
  font-weight: 600;
}

.nav-item {
  text-align: right;
  margin-right: 20px;
}

.navcontent {
  z-index: 10;
}

/* ---- Location switcher (desktop) ---- */
.nav-location-desktop-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
  margin-left: 16px;
}

.nav-location-desktop-btn:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Location switcher (mobile overlay — first nav item) ---- */
.nav-location-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.nav-location-mobile-btn {
  background: none;
  border: none;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.75;
  cursor: pointer;
  padding: 14px 48px;
}

/* Logo inside swiper — all sizes, behind food images */
.navlogo {
  display: block;
  z-index: 0;
  position: absolute;
  top: clamp(12px, 3vw, 40px);
  left: clamp(12px, 3vw, 40px);
}

@media (min-width: 992px) {
  .navlogo {
    top: calc(4vw + 20px);
    left: 4vw;
  }
}

.navlogo img {
  width: 22vw;
  max-width: 140px;
  height: auto;
}

/* Navbar logo (mobile — inside navbar, visible below lg) — hidden since swiper navlogo covers it */
.navbar-logo {
  display: none !important;
}

.navbar-logo img {
  width: 20vw;
  max-width: 90px;
  height: auto;
}

.navbar-toggler {
  border: none;
  margin-right: 20px;
}

.navbar-toggler:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.navbar-icon-menu {
  color: #fff;
  font-size: 1.7rem;
}

/* ---- Hero Section ---- */
.hero-section {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 50px;
  min-height: calc(100dvh - 80px);
  --hero-swiper-top-pad: 0px;
  --hero-swiper-top-offset: 0px;
}

/* Desktop: 48dvh slider */
.hero-section .swiper {
  height: calc(48dvh + 100px) !important;
  min-height: 360px !important;
  max-height: none !important;
  box-sizing: content-box;
  padding-top: calc(var(--hero-swiper-top-pad) + var(--hero-swiper-top-offset));
}

/* Desktop: extend swiper to top of page */
@media (min-width: 768px) {
  .hero-section {
    margin-top: 0;
    min-height: 100dvh;
  }
  .hero-section .swiper {
    height: calc(48dvh + 180px) !important;
  }
}

/* Subtle dark overlay between parallax bg and slide content */
.hero-section .swiper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--hero-swiper-top-pad) + var(--hero-swiper-top-offset));
  background-color: var(--main-color);
  background-image: url('./assets/background.png');
  /* 504 KB -> 8 KB. The plain url above stays as the line a browser without image-set()
     understands; everything since Safari 17 takes the WebP and never fetches the PNG. */
  background-image: image-set(
    url('./assets/background.webp') type('image/webp'),
    url('./assets/background.png') type('image/png'));
  background-size: 820px;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.hero-section .swiper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
  pointer-events: none;
}

.hero-section .methods-card {
  margin-top: 36px;
  margin-bottom: 36px;
}

/* Mobile: 32dvh slider */
@media (max-width: 767px) {
  .hero-section {
    margin-bottom: 30px;
    --hero-swiper-top-pad: clamp(18px, 5.5dvh, 56px);
    --hero-swiper-top-offset: 80px;
  }

  .hero-section .swiper {
    height: calc(32dvh + 160px) !important;
    min-height: 350px !important;
  }

  /* Swiper's own default is top: 50% of this element's own height, dead centre — which
     lands mid-line through the subtitle/title text on every slide, since the swiper's
     total height and the text block's height don't scale the same way as viewport
     height changes (one is dvh-based, the other a mix of vh clamps), so no single
     percentage-of-container top offset clears the text at every viewport height.
     Anchored from the bottom instead: measured across five viewport heights (640-926px)
     and all five slides, the CTA button's bottom edge never comes closer than 92px to
     the swiper's own bottom edge, and the play/pause button occupies the closest 56px.
     top: auto releases Swiper's own top so this bottom value actually applies. */
  .hero-section .swiper .swiper-button-next,
  .hero-section .swiper .swiper-button-prev {
    top: auto;
    bottom: 38px;
  }

  /* The arrow and the play/pause button both default to the right edge. Room for both:
     shift the arrow left of it rather than fight over the same 12px corner. */
  .hero-section .swiper .swiper-button-next {
    right: 64px;
  }

  .hero-section .methods-card {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

/* ---- Swiper Hero ---- */
.swiper {
  position: relative;
  z-index: 15;
  height: 56vw;
  min-height: 220px;
  max-height: 70vh;
  box-shadow: 0px 15px 10px -15px #111;
  overflow: hidden;
}

/* Parallax background behind all swiper content */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 130%;
  height: 100%;
  z-index: -1;
}

/* Swiper wrapper and nav arrows above parallax-bg */
.swiper-wrapper {
  z-index: 1;
}

/* A missing carousel script must degrade to one usable hero, not five stacked slides.
   app.js adds this class and continues initialising the revenue-critical controls. */
.swiper-fallback .swiper-slide:not(:first-child),
.swiper-fallback .swiper-button-next,
.swiper-fallback .swiper-button-prev,
.swiper-fallback .swiper-pause-btn {
  display: none;
}

.swiper-fallback .swiper-slide:first-child {
  display: block;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.swiper-pause-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: white;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.swiper-pause-btn:hover {
  background: rgba(0, 0, 0, 0.55);
}

/* icon updated by JS when toggled */

.swiper-button-next::after,
.swiper-button-prev::after {
  color: #fff;
  font-size: 1.3rem;
}

.swiper-slide .title-slide {
  font-family: 'Florence', 'Prata', Georgia, serif;
  color: white;
  font-size: clamp(1.8rem, 5vw, 5rem);
  text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.swiper-slide .subtitle {
  font-family: 'Florence', 'Prata', Georgia, serif;
  color: white;
  font-size: clamp(0.9rem, 2.5vw, 1.8rem);
  line-height: 1.15;
  text-align: right;
  margin-right: clamp(15px, 5vw, 13vw);
  margin-top: clamp(80px, 13vh, 17vh);
  text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}

.swiper-slide .subtitle .slide-tagline-half {
  margin-top: 8px;
}

.swiper-slide .subtitle .slide-tagline-break {
  display: block;
}

.swiper-slide .subtitle .slide-tagline-break + .slide-tagline-break {
  margin-top: 4px;
}

/* Hero typography, stated rather than inherited.
   `* { font-family: Manrope }` above sets the font on every element directly, which beats
   inheritance from .subtitle — so a kicker left as a bare text node picked up the display
   face while a wrapped one did not. That made the typeface depend on whether the copy
   happened to need a line break. The display face is now reserved for .title-slide, and
   everything supporting it is stated explicitly here. */
.swiper-slide .subtitle .slide-kicker-line {
  display: block;
  font-family: 'Manrope', sans-serif;
}

.swiper-slide .subtitle .slide-kicker-line + .slide-kicker-line {
  margin-top: 5px;
}

.slide-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(12px, 2vh, 20px);
  padding: 10px 22px;
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  border-radius: 999px;
  color: white;
  font-family: inherit;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.slide-cta-btn:hover {
  background: rgb(148, 34, 94);
  border-color: rgb(148, 34, 94);
  color: white;
}

/* ---- Hero collage ----
   Layers are addressed by role inside the slide's stage, never by id, and each slide
   layout carries one size token per role. The stage is the swiper's own box (100vw wide
   by 56vw tall), so a width or horizontal offset in % covers exactly the distance the
   vw value it replaced did. Vertical offsets stay in vw/vh: they were authored against
   the viewport, and a % there would silently mean "of the stage's height" instead.

   Phone first. Below 992px each slide shows a single image — on a 350px-tall hero the
   garnish layers only crowd the copy — and the collage is the wide-viewport
   enhancement. Garnishes are display:none until then, which also keeps their
   lazy-loaded sources off phones entirely. */

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-layer {
  position: absolute;
  height: auto;
}

.hero-layer--hero { width: var(--layer-hero); }
.hero-layer--garnish-a { width: var(--layer-garnish-a); }
.hero-layer--garnish-b { width: var(--layer-garnish-b); }
.hero-layer--garnish-c { width: var(--layer-garnish-c); }

.hero-layer--garnish-a,
.hero-layer--garnish-b,
.hero-layer--garnish-c {
  display: none;
}

/* Slide 1 — pizzas */
.hero-slide--pizzas {
  --layer-hero: max(343px, 94.4%);
  --layer-garnish-a: min(18%, 240px);
}

.hero-slide--pizzas .hero-layer--hero {
  top: calc(clamp(5px, 2vh, 20px) + 128px);
  left: calc(clamp(-30px, 4vw, 40px) - 120px);
}

.hero-slide--pizzas .hero-layer--garnish-a {
  bottom: 2vw;
  right: -2%;
}

/* Slide 2 — pastas */
.hero-slide--pastas {
  --layer-hero: min(60%, 250px);
  --layer-garnish-a: min(13%, 180px);
  --layer-garnish-b: min(18%, 240px);
  --layer-garnish-c: min(16%, 210px);
}

.hero-slide--pastas .hero-layer--hero {
  bottom: -40px;
  left: -6%;
}

.hero-slide--pastas .hero-layer--garnish-a {
  top: 4vw;
  left: 22%;
}

.hero-slide--pastas .hero-layer--garnish-b {
  bottom: -2vw;
  right: 18%;
}

.hero-slide--pastas .hero-layer--garnish-c {
  bottom: -0.5vw;
  right: -1%;
}

/* Slide 3 — meats */
.hero-slide--meats {
  /* 54% never wins below 768px (54% of a 430px phone is still under 240px), so every
     phone got the 240px floor regardless of width — the steak read small and tucked
     into the corner. Raised the floor, not the preferred %, so tablet/desktop sizing
     (min-width: 768px, below) is untouched. */
  --layer-hero: clamp(325px, 54%, 560px);
  --layer-garnish-a: min(14%, 180px);
  --layer-garnish-b: min(11%, 140px);
}

.hero-slide--meats .hero-layer--hero {
  bottom: clamp(-96px, -12vh, -26px);
  left: clamp(-288px, -20%, -66px);
  rotate: 30deg;
}

.hero-slide--meats .hero-layer--garnish-a {
  top: 3vw;
  left: 12%;
}

.hero-slide--meats .hero-layer--garnish-b {
  bottom: 5vw;
  right: 4%;
}

/* Slide 3's copy sits closest to its hero layer, so its CTA needs the extra room. */
.hero-slide--meats .slide-cta-btn {
  margin-top: clamp(18px, 3vh, 30px);
}

/* Slide 4 — occasions (single layer, no collage) */
.hero-slide--occasions {
  --layer-hero: min(62%, 265px);
}

.hero-slide--occasions .hero-layer--hero {
  bottom: -30px;
  left: -10%;
  /* Feathered edge — this is a photograph, not a cut-out like every other layer. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 15px, black calc(100% - 15px), transparent 100%);
  mask-composite: intersect;
}

/* Slide 5 — desserts */
.hero-slide--desserts {
  --layer-hero: clamp(220px, 31%, 420px);
  --layer-garnish-a: clamp(150px, 18%, 250px);
}

.hero-slide--desserts .hero-layer--hero {
  bottom: clamp(100px, 18vh, 160px);
  left: clamp(0px, 1%, 10px);
  transform: rotate(-6deg);
  z-index: 2;
}

.hero-slide--desserts .hero-layer--garnish-a {
  bottom: clamp(10px, 2vh, 26px);
  right: clamp(48px, 11%, 140px);
  transform: rotate(5deg);
  z-index: 1;
}

/* ---- Hero: tablet and up ----
   vw-only sizing so a resize never lets a layer cross into the copy. */
@media (min-width: 768px) {
  .swiper-slide .subtitle {
    margin-left: 44vw;
    margin-right: clamp(15px, 5vw, 13vw);
    margin-top: clamp(80px, 13vh, 17vh);
  }

  .hero-slide--pizzas {
    --layer-hero: min(52%, 660px);
  }

  .hero-slide--pizzas .hero-layer--hero {
    top: 3vw;
    left: -2%;
  }

  .hero-slide--pastas {
    --layer-hero: min(22%, 270px);
  }

  .hero-slide--pastas .hero-layer--hero {
    bottom: 1vh;
    left: -1.5%;
  }

  .hero-slide--meats {
    --layer-hero: min(48%, 580px);
  }

  .hero-slide--meats .hero-layer--hero {
    bottom: -14vw;
    left: -10%;
  }

  .hero-slide--occasions {
    --layer-hero: min(43.9%, 589px);
  }

  .hero-slide--occasions .hero-layer--hero {
    bottom: calc(1.5vh - 190px);
    left: 8%;
  }
}

/* ---- Hero: the collage ----
   Garnish layers earn their place only once the stage is wide enough to hold them
   without touching the copy. */
@media (min-width: 992px) {
  .hero-layer--garnish-a,
  .hero-layer--garnish-b,
  .hero-layer--garnish-c {
    display: block;
  }
}

@media (min-width: 1100px) {
  .hero-slide--occasions {
    --layer-hero: min(33.7%, 506px);
  }

  .hero-slide--occasions .hero-layer--hero {
    bottom: calc(1.5vh - 270px);
    left: 10%;
  }
}

/* ---- Fundadora ---- */
.fundadora-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 2.5rem auto 1.5rem;
  max-width: 580px;
  flex-wrap: wrap;
}

.fundadora-photo-wrap {
  flex-shrink: 0;
  width: 130px;
  height: 165px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary, #a0005a);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.fundadora-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.fundadora-quote {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-family: var(--font-script, 'Dancing Script', cursive);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #fff;
  font-style: italic;
  text-align: left;
}

.fundadora-quote p {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.fundadora-quote cite {
  font-size: 0.85rem;
  opacity: 0.75;
  font-style: normal;
  letter-spacing: 0.03em;
}

/* ---- Action Band ---- */
.color2-container {
  background-color: var(--secondary-alpha);
}

.action-band {
  background-color: var(--secondary-alpha);
  padding: 37px 20px 43px;
}

.action-band-context {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 20px;
  font-size: 1rem;
}

.action-loc-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.action-sep {
  opacity: 0.4;
}

.action-loc-phone {
  font-size: 1.05rem;
  font-weight: 600;
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.action-loc-phone:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* Copy-to-clipboard is a desktop-only convenience; mobile just taps to call. */
.action-loc-phone-copy {
  display: none;
}

@media (min-width: 992px) {
  .action-loc-phone-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    transition: color 0.15s;
  }

  .action-loc-phone-copy:hover {
    color: white;
  }

  .action-loc-phone-copy.copied {
    color: #4caf50;
  }
}

.action-delivery-badge {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 10px;
  border-radius: 20px;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

/* Each card sits in a slot so the whole row shares one geometry. */
.action-slot {
  display: flex;
  flex-direction: column;
}

.action-slot > .action-icon-card {
  flex: 1;
}

/* Four identical slots. Nothing is reserved for a case that applies to two of three
   stores; the second number now lives in #callModal instead. */

#action-delivery-card .action-icon-card {
  width: 100%;
}

.action-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: white;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  background: rgba(255, 255, 255, 0.05);
}

.action-icon-card:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.action-icon-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* WhatsApp action uses a Font Awesome glyph instead of an <img>, sized to match visually. */
i.action-icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #25D366;
}

.action-icon-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 0.6 (.footer-links a) x 0.9 here = ~0.54 effective vs #0a0a0a — 6.0:1, comfortably
   AA (was 0.75, compounding to 4.48:1, just under the 4.5:1 floor). */
#footer-takeaway-phone {
  opacity: 0.9;
  /* The label may wrap; the number stays whole (at 360px its digit groups split over
     three lines). */
  white-space: nowrap;
}

/* Second line in the call modal — quieter than the primary call button. */
.modal-call-alt {
  /* Block-level so it stacks under the primary call button instead of sitting beside it. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.modal-call-alt:hover {
  color: #fff;
  text-decoration: underline;
}

/* Narrow tablets: taller action band without overlapping swiper */
@media (min-width: 768px) and (max-width: 899px) {
  .action-band {
    margin-top: 0 !important;
    position: relative;
    min-height: 340px;
    padding-top: 72px !important;
    padding-bottom: 44px;
  }

  .action-band::before {
    content: none;
  }
}

/* Wider browser in-between sizes: keep a smaller top cap to align with pasta seam */
@media (min-width: 900px) and (max-width: 1199px) {
  .action-band {
    margin-top: 0;
    position: static;
    min-height: 280px;
    padding-top: 50px;
    padding-bottom: 43px;
  }

  .action-band::before {
    content: none;
  }
}

@media (max-width: 767px) {
  .hero-section--src .action-band {
    /* Fill more of the remaining hero area on mobile; target seam near ~200px from viewport bottom */
    min-height: clamp(140px, calc(68dvh - 400px), 260px);
  }

  .action-band {
    padding: 26px 18px 40px;
  }

  .action-band-context {
    gap: 6px 10px;
    margin-bottom: 14px;
  }

  .action-cards {
    gap: 8px;
  }

  .action-icon-card {
    padding: 12px 8px;
  }

  .action-icon-img {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
  }

  .action-icon-label {
    font-size: 0.65rem;
  }
}

/* iPhone 14 Pro-sized viewport: push action band slightly lower */
@media (max-width: 430px) and (min-height: 800px) {
  .hero-section {
    --hero-swiper-top-pad: clamp(10px, 3.2dvh, 26px);
    --hero-swiper-top-offset: 48px;
  }

  .hero-section--src .action-band {
    margin-top: 0;
    min-height: clamp(180px, calc(68dvh - 380px), 280px);
    padding-bottom: 48px;
  }
}

/* ---- Section Titles ---- */
.title {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  text-align: center;
  margin-bottom: 50px;
}

.title-notmain {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  text-align: center;
}

/* ---- Especialidades ---- */
.especialidades {
  margin-top: 40px;
  margin-bottom: 20px;
  position: relative;
  overflow: visible;
}

.especialidades-card img {
  width: clamp(80px, 50%, 200px);
  height: auto;
  margin-bottom: 15px;
}

.especialidades-card {
  margin-bottom: 30px;
}

/* ---- Decorative bleed images ---- */
.decor-img {
  position: absolute;
  height: auto;
  z-index: 5;
  object-fit: contain;
  pointer-events: none;
}

#pizzaside1 {
  width: clamp(100px, 28vw, 320px);
  left: -100px;
  bottom: -60px;
}

/* ---- Ementa / Do Forno para Si ---- */
.ementa {
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  overflow: visible;
}

.card {
  background-color: transparent;
  border: none;
}

.card-title {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.card-text {
  font-weight: 100;
  font-size: 0.8rem;
  opacity: 0.85;
}

.card-img-top {
  width: 70%;
  object-fit: cover;
}

/* Menu CTA Button */
.btn-menu-cta {
  font-size: 0.95rem;
  padding: 10px 28px;
  letter-spacing: 0.08em;
}

/* ---- Buttons ---- */
.btn-custom {
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
  background-color: white;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.2s, color 0.2s;
}

.btn-custom:hover {
  background-color: var(--secondary-color);
  color: white;
}

/* ---- Reservas Section ---- */
.reservas {
  padding: clamp(20px, 5vw, 50px) clamp(15px, 3vw, 50px);
}

.reservas-left {
  margin-bottom: 30px;
}

.reserve-phones {
  margin-top: 20px;
}

.reserve-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.reserve-location-name {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  font-family: 'Florence', 'Prata', Georgia, serif;
}

/* Form controls */
.form-control:focus {
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  box-shadow: none;
  color: white;
}

.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  border-radius: 0;
  padding-left: 0;
  font-size: 0.85rem;
}

.form-control option {
  color: var(--main-color);
  background-color: white;
}

input::placeholder,
select::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.btn-custom,
.form-control {
  border-radius: var(--radius-sm);
}

.ui-datepicker-title {
  color: var(--secondary-color) !important;
}

/* ---- Historia / Brand Section ---- */
.historia-inner {
  max-width: 900px;
  padding-top: 10px;
  padding-bottom: 50px;
}

.historia {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.brand-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
  text-align: center;
}

.brand-pillar-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
  opacity: 0.85;
  color: var(--secondary-color);
}

.brand-pillar-title {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.brand-pillar-text {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.8;
  margin-bottom: 0;
}

.brand-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.brand-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.brand-cta-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: white;
}

.brand-cta-btn--primary {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.brand-cta-btn--primary:hover {
  background: rgb(148, 34, 94);
  border-color: rgb(148, 34, 94);
}

@media (max-width: 767px) {
  .historia-inner {
    padding-top: 0;
    padding-bottom: 28px;
  }

  .brand-pillars {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 24px;
    text-align: left;
  }

  .brand-pillar {
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
  }

  .brand-pillar-icon {
    font-size: 1.35rem;
    margin-bottom: 0;
    margin-top: 2px;
    grid-column: 1;
    grid-row: 1;
  }

  .brand-pillar-title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 5px;
    font-size: 0.9rem;
    align-self: center;
  }

  .brand-pillar-text {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 0;
  }

  .brand-cta {
    flex-wrap: nowrap;
  }

  .brand-cta-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 12px;
    font-size: 0.75rem;
  }
}

/* ---- Quick Actions Strip ("Mais pedidos") ---- */
.quick-actions-section {
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 0;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.07);
  gap: 1px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--main-color);
  text-decoration: none;
  color: white;
  transition: background 0.2s;
}

.quick-action-card:hover {
  background: rgba(128, 24, 74, 0.28);
  color: white;
}

.quick-action-icon {
  font-size: 1.25rem;
  color: var(--secondary-color);
  opacity: 0.85;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.quick-action-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quick-action-label {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.quick-action-sub {
  font-size: 0.71rem;
  opacity: 0.5;
  font-weight: 300;
}

.quick-action-arrow {
  opacity: 0.25;
  font-size: 0.7rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Grupos / Occasions Section ---- */
.grupos-section {
  padding: var(--section-gap) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.grupos-intro {
  font-size: 0.9rem;
  opacity: 0.8;
  font-weight: 400;
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.grupos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grupo-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grupo-icon {
  font-size: 1.9rem;
  color: var(--secondary-color);
  opacity: 0.85;
  margin-bottom: 18px;
}

.grupo-title {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.grupo-text {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 0;
  flex: 1;
}

.grupo-cta {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

.grupo-cta:hover {
  color: white;
  border-color: white;
}

@media (max-width: 767px) {
  .grupos-section {
    padding: 28px 0 20px;
  }

  .grupos-intro {
    margin-bottom: 18px;
    font-size: 0.8rem;
  }

  .grupos-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .grupo-card {
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 0;
    padding: 16px;
    text-align: left;
    align-items: start;
  }

  .grupo-icon {
    font-size: 1.35rem;
    margin-bottom: 0;
    margin-top: 2px;
    grid-column: 1;
    grid-row: 1;
  }

  .grupo-title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 5px;
    font-size: 0.9rem;
    align-self: center;
  }

  .grupo-text {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    padding-left: 0;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .grupo-cta {
    grid-column: 2;
    grid-row: 3;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* ---- Map iframe ---- */
.map-frame {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---- Location Tabs & Map ---- */
.location-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.location-tab-btn {
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  transition: all 0.2s;
}

.location-tab-btn:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}

.location-tab-btn.active {
  border-color: var(--secondary-color);
  background-color: var(--secondary-color);
  color: white;
}

.location-info-card {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.location-card-title {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.location-card-phone a {
  color: white;
  font-size: 1rem;
  font-weight: 300;
}

.location-card-phone a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.delivery-badge {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 0;
}

/* ---- Pasta Divider ---- */
.pasta-divider {
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.pasta-divider-img {
  position: absolute;
  height: auto;
  right: -40px;
  top: -130px;
  width: 150px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@media (max-width: 767px) {
  .pasta-divider-img {
    width: 62px;
    right: -15px;
    top: -115px;
  }
}

/* ---- Basil/Garlic Divider ---- */
.mushroom-divider-img {
  position: absolute;
  left: 80px;
  bottom: 20px;
  width: 100px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

.basil-divider {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: visible;
  pointer-events: none;
}

.basil-divider-img {
  position: absolute;
  height: auto;
  left: -45px;
  bottom: -40px;
  width: 168px;
  max-width: 24vw;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
}

@media (max-width: 767px) {
  .basil-divider {
    height: 125px;
  }
  .basil-divider-img {
    width: 108px;
    left: -25px;
    bottom: -15px;
  }
}

/* ---- Location Hub (Commit 5) ---- */
.loc-hub-section {
  padding: 50px 0 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.loc-hub-intro {
  font-size: 0.9rem;
  opacity: 0.8;
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.loc-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.loc-tab {
  /* display/text-decoration are load-bearing now that this is an <a>, not a <button>
     (Brief 5 Task 2) — a bare inline anchor would not centre the icon and label the
     same way a button's default box did. */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 24px;
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s;
}

.loc-tab:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}

.loc-tab.active {
  border-color: var(--secondary-color);
  background: var(--secondary-color);
  color: white;
}

.loc-hub-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 28px;
  align-items: stretch;
}

.loc-store-card {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  padding: 28px 26px;
}

/* The three standalone location pages (build-location-pages.js) — moved out of inline
   style= attributes there so this is the one place their layout lives. */
.loc-page-main {
  max-width: 720px;
  padding: 40px 24px 80px;
}

.loc-page-title {
  text-align: left;
  margin-bottom: 8px;
}

.loc-page-intro {
  opacity: 0.75;
  margin-bottom: 20px;
}

.loc-page-paragraph {
  opacity: 0.85;
  margin-bottom: 32px;
  max-width: 56ch;
}

.loc-store-name {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  line-height: 1.3;
}

.loc-store-name a {
  color: inherit;
  text-decoration: none;
}

.loc-store-name a:hover {
  text-decoration: underline;
}

.loc-store-details {
  margin-bottom: 22px;
}

.loc-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.loc-detail-row i {
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  text-align: center;
  opacity: 0.65;
}

.loc-detail-row a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.loc-detail-row a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.loc-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.loc-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: white;
}

.loc-btn--call {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.loc-btn--call:hover {
  background: rgb(148, 34, 94);
  border-color: rgb(148, 34, 94);
}

.loc-uber-row {
  margin-top: 4px;
}

.loc-btn--uber {
  width: 100%;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}

/* Brief 5 Task 2: each location page used to dead-end — a heading, a card, and a
   livroreclamacoes.pt link, with no way to reach either of the other two stores except
   back through the home page. This is that path. */
.loc-other-stores {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.loc-other-stores-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.75;
  margin-bottom: 12px;
}

.loc-other-stores-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 0;
  margin: 0;
}

.loc-other-stores-list a {
  color: var(--cream, #f9f1ea);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.85;
}

.loc-other-stores-list a:hover {
  opacity: 1;
}

.loc-page-footer {
  margin-top: 32px;
  padding: 20px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.loc-page-footer .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.8rem;
}

.loc-page-footer .footer-legal-links a {
  color: rgba(255, 255, 255, 0.6);
}

.loc-page-footer .footer-legal-links a:hover {
  color: #fff;
}

/* No extra opacity here: it used to compound onto .footer-copy's own color alpha
   (0.25 x 0.5 = 0.125 effective, 1.36:1) — the base rule's fixed contrast is enough. */
.loc-page-footer .footer-copy {
  font-size: 0.75rem;
  margin: 0;
}

.loc-map-wrap {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  min-height: 420px;
}

.loc-map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 991px) {
  .loc-hub-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .loc-map-wrap {
    height: 400px;
    min-height: unset;
  }
}

@media (max-width: 767px) {
  .loc-hub-section {
    padding: 28px 0 19px;
  }

  .loc-hub-section .title {
    margin-bottom: 18px;
  }

  /* Tabs: always one row, equal widths */
  .loc-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: unset;
  }

  .loc-tab {
    padding: 9px 6px;
    font-size: 0.73rem;
    letter-spacing: 0.02em;
    justify-content: center;
    text-align: center;
  }

  /* Store card: less padding so text has more room */
  .loc-store-card {
    padding: 20px 16px;
  }

  .loc-store-name {
    font-size: 1.05rem;
    margin-bottom: 12px;
  }

  .loc-store-details {
    margin-bottom: 14px;
  }

  /* Action buttons: equal 3-col grid, icon above label */
  .loc-action-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }

  .loc-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 6px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: normal;
    min-height: 64px;
  }

  .loc-btn i {
    font-size: 1.1rem;
    width: auto;
    margin: 0;
  }

  /* Uber Eats button: stays full width, back to horizontal */
  .loc-btn--uber {
    flex-direction: row;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .loc-btn--uber i {
    font-size: 0.9rem;
  }

  /* Map: taller on mobile */
  .loc-map-wrap {
    height: 300px;
    min-height: unset;
  }
}

.location-detected-text {
  font-size: 0.78rem;
  opacity: 0.65;
  font-style: italic;
}

/* ---- Social Banner ---- */
.socialbanner {
  background-color: var(--secondary-color);
  margin-top: -4px;
  padding: 18px clamp(10px, 5vw, 60px);
}

.socialicon {
  color: white !important;
  text-decoration: none !important;
  margin-right: 8px;
  font-size: 20px;
  margin-top: 8px;
  display: inline-block;
  transition: opacity 0.2s;
}

.socialicon:hover {
  opacity: 0.7;
  color: white !important;
}

/* ---- FAQ page: factual answers for visitors, search and answer engines ---- */
.faq-body {
  min-height: 100vh;
  background: #140b0e;
  color: #f9f1ea;
}

.faq-page {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(48px, 9vw, 100px) 0 72px;
}

.faq-back,
.faq-cta a {
  color: #f4a0bc;
  text-underline-offset: 0.18em;
}

.faq-kicker {
  margin: 56px 0 10px;
  color: #f4a0bc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.faq-page h1 {
  margin: 0;
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: clamp(2.1rem, 7vw, 3.8rem);
  line-height: 1.05;
}

.faq-intro {
  max-width: 62ch;
  margin: 22px 0 36px;
  color: rgba(249, 241, 234, 0.82);
  line-height: 1.65;
}

.faq-page details {
  border-top: 1px solid rgba(249, 241, 234, 0.22);
  padding: 20px 0;
}

.faq-page details:last-child {
  border-bottom: 1px solid rgba(249, 241, 234, 0.22);
}

.faq-page summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}

.faq-page details p {
  max-width: 66ch;
  margin: 13px 24px 0 0;
  color: rgba(249, 241, 234, 0.8);
  line-height: 1.65;
}

.faq-cta {
  margin-top: 36px;
}

/* ---- Footer ---- */
.footer {
  background-color: #0a0a0a;
  padding: 52px 0 0;
  color: rgba(255, 255, 255, 0.75);
}

.footer-brand {
  text-align: center;
  margin-bottom: 44px;
}

.footer-logo {
  display: block;
  margin: 0 auto 12px;
  opacity: 0.85;
}

/* .footer's own color is already rgba(255,255,255,0.75); this opacity compounds on top
   of it (0.75 x 0.75 = ~0.56 effective vs #0a0a0a, 6.5:1) — was 0.45 (~0.34 effective,
   3:1, below the 4.5:1 AA floor). */
.footer-tagline {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.footer-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.35 was 3.14:1 vs #0a0a0a, under the 4.5:1 floor — 11.2px bold is nowhere near
     WCAG's large-text threshold (14pt/18.66px bold+), so the small-text ratio applies. */
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.footer-locations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-locations li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer-loc-btn {
  background: none;
  border: none;
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 4px 0 2px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.footer-loc-btn:hover {
  color: white;
}

.footer-loc-btn.active {
  color: white;
  border-bottom: 1px solid var(--secondary-color);
}

/* 0.4 was 3.77:1 vs #0a0a0a, under the 4.5:1 floor. */
.footer-phone {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  white-space: nowrap;
}

.footer-phone:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
  /* The mark sits beside the words, not against them. A plain space between an <i> and its
     label collapses to nothing here, so "Reservas" rendered welded to its own icon. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The icons across this column line up whatever glyph each link uses, so the labels start
   on one edge instead of stepping in and out with the width of the mark. */
.footer-links a > .fa-solid,
.footer-links a > .fa-brands {
  width: 1em;
  flex: none;
  text-align: center;
}

.footer-links a:hover {
  color: white;
}

.footer-legal-links {
  margin-top: 20px;
}

/* 0.35 was 3.14:1 vs #0a0a0a, under the 4.5:1 floor. */
.footer-legal-links a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-legal-links a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  transition: border-color 0.2s, color 0.2s;
}

/* display:flex above would otherwise beat the hidden attribute (the YouTube link until a
   channel exists). */
.footer-social-link[hidden] {
  display: none;
}

.footer-social-link:hover {
  border-color: white;
  color: white;
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-legal-id {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

/* 0.3 was 2.61:1 vs #0a0a0a, under the 4.5:1 floor. */
.footer-legal-id p {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  margin: 0;
}

/* 0.25 was 2.13:1 vs #0a0a0a, under the 4.5:1 floor. */
.footer-copy {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.48);
  margin: 0;
}

@media (max-width: 767px) {
  .footer {
    padding-top: 36px;
  }

  .footer-brand {
    margin-bottom: 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px 24px;
    padding-bottom: 28px;
  }

  .footer-col:nth-child(3) {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }

  .footer-col:nth-child(3) .footer-col-title {
    display: none;
  }

  .footer-legal-links {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}

/* ---- Locations Modal ---- */
.loc-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-modal-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background-color 0.2s, border-color 0.2s;
}

.loc-modal-btn:hover {
  background: rgba(128, 24, 74, 0.3);
  border-color: var(--secondary-color);
}

.loc-modal-btn.active {
  border-color: var(--secondary-color);
  background: rgba(128, 24, 74, 0.25);
}

.loc-modal-name {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.1rem;
  color: white;
}

.loc-modal-addr {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* ---- Reservation Modal ---- */
.reserva-modal-content {
  background-color: var(--main-color);
  border: 1px solid rgba(128, 24, 74, 0.5);
  border-radius: var(--radius-md);
}

.modal-header .modal-title {
  display: flex;
  align-items: center;
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.3rem;
}

.modal-subtitle {
  opacity: 0.8;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.nearest-store-card {
  background: rgba(128, 24, 74, 0.3);
  border: 1px solid rgba(128, 24, 74, 0.5);
  padding: 20px;
}

.nearest-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.modal-store-name {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.4rem;
}

.btn-call {
  background-color: var(--secondary-color);
  border: none;
  color: white;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  display: inline-block;
  transition: background-color 0.2s;
}

.btn-call:hover {
  background-color: rgb(100, 18, 57);
  color: white;
}

.modal-divider {
  font-size: 0.75rem;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
}

.modal-divider::before,
.modal-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.modal-divider::before { left: 0; }
.modal-divider::after { right: 0; }

.modal-all-locations {
  text-align: left;
}

.modal-loc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

.modal-loc-name {
  opacity: 0.8;
  font-weight: 300;
}

.modal-loc-phone {
  color: white;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.modal-loc-phone:hover {
  color: rgba(255, 255, 255, 0.7);
}

.modal-footer-note {
  font-size: 0.75rem;
  opacity: 0.55;
}

.modal-groups-note {
  font-size: 0.8rem;
  opacity: 0.6;
  font-weight: 300;
  line-height: 1.6;
  margin: 10px 0 0;
  padding: 0 8px;
}

/* ============================================================
   Location Picker Overlay
   ============================================================ */
.location-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.location-picker-overlay.picker-hidden {
  display: none;
}

.location-picker-overlay.picker-exit {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.picker-inner {
  max-width: 440px;
  width: 100%;
  text-align: center;
}

.picker-logo {
  width: 150px;
  margin-bottom: 20px;
}

.picker-title {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 8px;
}

/* Names the default that was applied the instant this overlay opened (Brief 6 finding
   4) — closing or ignoring the picker used to leave that default in place with no
   indication it was ever a guess rather than a choice. Empty until JS fills it in, so it
   never renders as a stray empty line before then. */
.picker-default-notice {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 0 0 20px;
}

.picker-default-notice:empty {
  display: none;
}

.picker-loading {
  font-size: 0.85rem;
  opacity: 0.6;
  padding: 24px 0;
}

.picker-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.5;
  margin-bottom: 10px;
  margin-top: 24px;
}

/* Hidden by default; JS sets display:block to reveal */
.picker-step {
  display: none;
}

.picker-nearest-card {
  background: rgba(128, 24, 74, 0.3);
  border: 1px solid rgba(128, 24, 74, 0.6);
  padding: 20px;
}

.picker-near-name {
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.4rem;
}

.picker-near-dist {
  font-size: 0.88rem;
  opacity: 0.65;
  margin-top: 4px;
}

.picker-select-btn {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 32px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.picker-select-btn:hover {
  background-color: rgb(100, 18, 57);
  color: white;
}

.picker-list {
  display: flex;
  flex-direction: column;
}

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

.picker-list-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.picker-list-name {
  font-size: 0.9rem;
}

.picker-list-dist {
  font-size: 0.75rem;
  opacity: 0.55;
}

.picker-select-btn-sm {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  padding: 5px 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}

.picker-select-btn-sm:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  color: white;
}

.picker-fallback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.picker-location-btn {
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: white;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  padding: 14px 20px;
  text-align: left;
  letter-spacing: 0.04em;
  transition: background-color 0.2s, border-color 0.2s;
}

.picker-location-btn:hover {
  background: rgba(128, 24, 74, 0.3);
  border-color: var(--secondary-color);
  color: white;
}

/* ---- Mobile Sticky Bottom Bar ---- */
.mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-bar {
    display: flex;
    position: fixed;
    /* 2px past the bottom edge, with 2px more padding so the buttons stay where they were. At
       125% or 150% display scaling the screen is a fraction of a pixel tall, and a bar that
       stopped exactly at the edge could be rounded up by one, leaving a hairline of page below. */
    bottom: -2px;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--main-color);
    border-top: 1px solid rgba(128, 24, 74, 0.5);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
  }

  .mobile-bar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 4px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
  }

  .mobile-bar-btn:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-bar-btn i {
    font-size: 1.1rem;
    color: inherit;
  }

  .mobile-bar-btn span {
    color: inherit;
  }

  .mobile-bar-btn:active {
    background: rgba(128, 24, 74, 0.3);
    color: white;
  }

  /* Room for the bar at the end of the page, so the footer's last lines scroll clear of it. The
     bar is 63px, plus the home-indicator strip it grows into on newer iPhones: a flat 60px left
     the last 3px under it on every phone, and the last 37px on those. */
  body {
    padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Cookie Banner ---- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(20, 4, 12, 0.97);
  border-top: 1px solid rgba(128, 24, 74, 0.5);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* On a phone the banner sits on top of the mobile bar, so Ligar and Ementa stay usable while it
   is up. It has to come after the rule above: it used to live in the mobile block further up,
   lost to this later bottom: 0, and the banner covered the bar until the visitor answered it. */
@media (max-width: 767px) {
  .cookie-banner {
    bottom: calc(63px + env(safe-area-inset-bottom, 0px));
  }
}

/* The banner's wording: the full text from a tablet up, one line on a phone (the same promise
   and both policy links), so on a phone the banner leaves the page it sits on visible. */
.cookie-text-short { display: none; }
@media (max-width: 767px) {
  .cookie-text-long { display: none; }
  .cookie-text-short { display: inline; }
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* No flex-shrink: 0 — that stopped this container from ever being squeezed to the
     banner's actual width, so its own flex-wrap never triggered and the three buttons'
     combined width just overflowed past the viewport edge on mobile instead of wrapping. */
}

.cookie-text {
  flex: 1;
  font-size: 0.78rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.5;
}

.cookie-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

.cookie-link:hover {
  color: white;
}

.btn-cookie-accept,
.btn-cookie-reject,
.btn-cookie-manage {
  border-radius: var(--radius-sm);
  padding: 8px 22px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.btn-cookie-accept {
  background-color: var(--secondary-color);
  color: white;
  border: none;
}

.btn-cookie-accept:hover {
  background-color: rgb(100, 18, 57);
}

.btn-cookie-reject,
.btn-cookie-manage {
  background: none;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-cookie-reject:hover,
.btn-cookie-manage:hover {
  border-color: white;
}

.cookie-manage-panel[hidden] {
  display: none;
}

.cookie-manage-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}

.cookie-category label {
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cookie-category p {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 2px 0 0 24px;
}

/* ---- Map consent overlay (Google Maps embed gated behind a click) ---- */
.loc-map-wrap {
  position: relative;
}

.map-consent-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
  background: rgba(20, 4, 12, 0.9);
  border-radius: var(--radius-md, 12px);
}

.map-consent-overlay[hidden] {
  display: none;
}

.map-consent-overlay p {
  font-size: 0.82rem;
  opacity: 0.8;
  margin: 0;
  max-width: 320px;
}

.map-consent-overlay a {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

/* ============================================================
   Mobile — up to 767px
   ============================================================ */
@media (max-width: 767px) {
  /* Keep logo from overlapping toggler */
  .navlogo img {
    width: 28vw;
    max-width: 100px;
  }

  /* Hero swiper: capped height to prevent overflow on wide/short phones */
  .swiper {
    height: clamp(200px, 55vw, 260px);
  }

  /* Hide decorative bleed images on mobile — they overflow and overlap content */
  #pizzaside1 {
    display: none;
  }






  /* Methods bar equal columns on small screens */
  .color-container {
    overflow: hidden;
  }

  .methods-card {
    padding: 0 5px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Ementa cards smaller on mobile */
  .card-img-top {
    width: 80%;
  }

  /* Reservas stack vertically — already handled by Bootstrap col-lg-6 */
  .reservas {
    padding: 30px 15px;
  }

  /* Modal full-width on mobile */
  .modal-dialog {
    margin: 10px;
  }

  .modal-loc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}




/* ============================================================
   Tablet / Desktop — 768px and up
   ============================================================ */
@media (min-width: 768px) {
  .navlogo img {
    max-width: 160px;
    width: 18vw;
  }

  .color2-container {
    padding-left: 15vw;
    padding-right: 15vw;
  }

  /* Nav underline animation */
  .nav-link::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background-color: #fff;
    transition: width 0.3s;
  }

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

  .swiper {
    height: 60vh;
    min-height: 350px;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 1.8rem;
  }

  #pizzaside1 {
    display: block;
  }

  .socialbanner {
    padding-left: 60px;
    padding-right: 60px;
  }

  .reservas {
    padding: 40px 50px;
  }

  .reservas-left {
    margin-bottom: 0;
  }

}

/* ============================================================
   Wider desktop (≥1100px): scale table down and push it lower
   ============================================================ */

/* ============================================================
   Page Loader
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #310419;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.3s ease;
}

/* Same subtle texture as body::before so loader matches site background */
.page-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('./assets/background.png');
  /* 504 KB -> 8 KB. The plain url above stays as the line a browser without image-set()
     understands; everything since Safari 17 takes the WebP and never fetches the PNG. */
  background-image: image-set(
    url('./assets/background.webp') type('image/webp'),
    url('./assets/background.png') type('image/png'));
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.07;
  z-index: 0;
}

.page-loader.loader-hidden {
  opacity: 0;
  pointer-events: none;
}

/* "Saltar intro", bottom centre: the natural reach of either thumb, and the only control on
   the screen. Outside the loader in the markup (see index.html), so it is fixed to the
   viewport and stacked above the loader, not inside it.
   Straight on the footage, with no pill and no light patch behind it, and deliberately quiet:
   cream text with a thin dark edge, resting at 75% so it does not compete with the food. Over
   the palest frames (flour, a chef's coat) that makes it harder to read than a boxed label;
   tests/loader-composition.spec.ts records by how much.
   Hidden, not just transparent, until it fades in: an invisible button that still takes taps
   is a trap for a thumb resting near the edge. */
.loader-skip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom) + 10px);
  z-index: 10000;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  height: 48px;            /* the tap target: do not reduce */
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--cream);
  font: 600 13.5px/1 'Manrope', sans-serif;
  letter-spacing: 0.03em;
  /* Dense at the letter's edge and soft beyond: over dark footage the edge disappears into the
     clip, so it costs nothing there, and over a pale frame it is what keeps the label findable. */
  text-shadow:
    0 0 1px rgba(20, 4, 11, 0.95), 0 0 1px rgba(20, 4, 11, 0.95),
    0 0 2px rgba(20, 4, 11, 0.9), 0 0 4px rgba(20, 4, 11, 0.6), 0 1px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  animation: loader-skip-in 0.4s ease 1.2s forwards;
}
.loader-skip svg {
  flex: none;
  filter: drop-shadow(0 0 0.75px rgba(20, 4, 11, 0.95)) drop-shadow(0 0 1.5px rgba(20, 4, 11, 0.9)) drop-shadow(0 0 4px rgba(20, 4, 11, 0.5));
}
/* With a greeting up, the way out is there as soon as the line is legible. */
.loader-skip.is-early { animation-delay: 0.8s; }
.loader-skip:hover { text-decoration: underline; text-underline-offset: 3px; }
.loader-skip:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
@keyframes loader-skip-in { to { opacity: 0.75; visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .loader-skip { animation: none; opacity: 0.75; visibility: visible; }
}

.loader-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loader-video.is-ready {
  opacity: 1;
}

.loader-overlay {
  display: none;
}

.loader-sun {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 2;
  width: 200px;
  height: 200px;
  opacity: 0;
  animation: loader-sun-in 0.8s ease forwards, loader-sun-spin 2.5s linear infinite;
  transition: opacity 0.4s ease;
}

@keyframes loader-sun-in {
  to { opacity: 0.85; }
}

@keyframes loader-sun-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* The colour mark, bottom left, straight on the footage (index.html says why there is nothing
   behind it). Fully opaque at rest: the sun's fade stops at 0.85, and a logo does not need to
   be see-through. */
.loader-flag {
  position: absolute;
  left: max(20px, env(safe-area-inset-left) + 8px);
  bottom: max(24px, env(safe-area-inset-bottom) + 12px);
  width: 26px;
  height: auto;
  z-index: 3;
  opacity: 0;
  animation: loader-in-full 0.8s ease 0.4s forwards;
}

@media (max-width: 768px) {
  .loader-sun { top: 62%; width: 130px; height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-sun { animation: loader-sun-in 0.8s ease forwards; }
  .loader-video { transition: none; }
  .page-loader { transition: opacity 0.3s ease; }
}

/* ============================================================
   Shared modals (data/modal.js) — used by index.html and menu/menu.html
   Framework-free on purpose: the menu page carries no Bootstrap, and search traffic
   lands there first.
   ============================================================ */
.dmodal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dmodal[hidden] { display: none; }

body.dmodal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.dmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.dmodal-panel {
  position: relative;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  width: 100%;
  max-width: 420px;
  padding: 52px 24px 22px;
  border-radius: var(--radius-lg, 20px);
  background: var(--wine-800, #310419);
  border: 1px solid rgba(249, 241, 234, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}

.dmodal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.dmodal-close:hover { background: rgba(255, 255, 255, 0.2); }

.dmodal-title {
  /* Sits below .dmodal-close, which is absolutely positioned in the panel's top-right
     corner. "Ligar para encomendar" is long enough to run under it otherwise. */
  margin: 0 0 4px;
  line-height: 1.2;
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
}

/* Which store you are about to ring — a deep-linked visitor may not know. */
.dmodal-store {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

/* Reservation-specific copy. The only thing that should distinguish that modal from the
   call modal — the chrome is otherwise identical. */
.dmodal-note {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}

/* Outline icons inherit the surrounding colour and sit on the text baseline. Sized in em
   so they track whatever they sit beside. */
.dmodal-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.12em;
}

.dmodal-title .dmodal-icon { width: 0.85em; height: 0.85em; }
.dmodal-copy .dmodal-icon { width: 20px; height: 20px; }

.dmodal-rows { display: flex; flex-direction: column; gap: 10px; }

.dmodal-row { display: flex; align-items: stretch; gap: 8px; }

.dmodal-call {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
  background: var(--secondary-color, rgb(128, 24, 74));
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.dmodal-call:hover { background: rgb(148, 34, 94); color: #fff; }

/* tel: does nothing on a desktop, so the number has to be copyable there. */
.dmodal-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.dmodal-copy:hover { background: rgba(255, 255, 255, 0.12); }
.dmodal-copy.is-copied { background: rgba(255, 255, 255, 0.25); }

@media (hover: none) {
  /* Touch devices dial directly; a copy button would just crowd the row. The call button
     is flex:1 so it takes the freed width rather than leaving a gap where the button was. */
  .dmodal-copy { display: none; }
}

.dmodal-hours {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Task 1.3 — "are you open now" answered wherever hours are shown, not just stated as a
   schedule. Colour is a secondary signal, not the only one: the text itself always says
   "Aberto"/"Fechado" outright, so this reads fine without colour vision too. */
.open-status {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85em;
}

.dmodal-open-status.open-status {
  display: block;
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.open-status--open {
  color: #7cd992;
}

.open-status--closed {
  color: #f2a4a4;
}

.dmodal .loc-modal-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- The intro's two states ---------------------------------------------------------------
   One composition, not two layouts. Most days (no season): the clip, the sun at 62%, and the
   footer - the colour mark and "Saltar intro", straight on the footage. On a season's days a
   dark band comes down from the top to carry the greeting, and nothing else moves: the sun
   keeps its place and size and the footer is identical, which is what makes the line feel like
   a guest rather than a rebuild. */

/* The greeting, and the band that carries it. The band is only created when there is a
   greeting (index.html); with nothing to carry it would only be a filter over the food.
   It is much lighter than the brief's (0.80 at the top, in the brand's maroon), which sat too
   heavily over the clip, and it is lightest at the very top, where there is nothing to carry.
   It is strongest behind the two lines of the greeting (about 44-68% of its height), and the
   greeting's own thin dark edge does the rest over a bright frame. The minimum height keeps
   the second line inside it on short screens. */
.loader-greeting-scrim {
  position: absolute; left: 0; right: 0; top: 0;
  height: max(36%, calc(15% + 170px));
  background: linear-gradient(180deg,
    rgba(24, 12, 16, 0.34) 0%, rgba(24, 12, 16, 0.46) 34%, rgba(24, 12, 16, 0.52) 44%,
    rgba(24, 12, 16, 0.52) 68%, rgba(24, 12, 16, 0.22) 84%, rgba(24, 12, 16, 0) 100%);
  pointer-events: none; z-index: 2;
  opacity: 0;
  animation: loader-in-full 0.9s ease 0.2s forwards;
}
/* Florence is the restaurant's display face, the one on the sign, which is what makes one line
   read as the restaurant speaking rather than as a banner. It starts 0.2s in: the clip is
   about four seconds, and the line has to be read inside them. */
.loader-greeting {
  position: absolute; left: 0; right: 0; top: 15%;
  z-index: 3;
  margin: 0;
  padding: 0 30px;
  text-align: center;
  font-family: 'Florence', 'Prata', Georgia, serif;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.12;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 0 1px rgba(20, 4, 11, 0.8), 0 0 3px rgba(20, 4, 11, 0.65), 0 0 8px rgba(20, 4, 11, 0.4), 0 2px 16px rgba(0, 0, 0, 0.45);
  opacity: 0;
  animation: loader-in-full 0.9s ease 0.2s forwards;
}
/* Fully opaque at rest. The greeting used to borrow the sun's fade, which stops at 0.85 and
   took the line's contrast down with it. */
@keyframes loader-in-full { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .loader-greeting, .loader-greeting-scrim, .loader-flag { animation: none; opacity: 1; }
}

/* ---- Call dialog, shop closed: when it reopens, and what to do instead (data/modal.js) ---- */
.dmodal-closed[hidden],
.dmodal-rows-label[hidden],
.dmodal-open-status[hidden] { display: none; }
.dmodal-closed { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.dmodal-closed-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(242, 164, 164, 0.14);
  border: 1px solid rgba(242, 164, 164, 0.45);
  color: #fbe6e6;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}
.dmodal-alts { display: flex; flex-direction: column; gap: 8px; }
.dmodal-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.dmodal-alt:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.dmodal-rows-label {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Store pages: "Aberto agora" arrives after load. On a phone it wrapped onto a new line and
   pushed the store card down; there it now has its own line, reserved from the start. */
@media (max-width: 767px) {
  .loc-detail-row .open-status { display: block; min-height: 1.45em; margin-top: 2px; }
}

/* Cookie banner on a phone: Rejeitar and Aceitar side by side, the same size - refusing is as
   easy as accepting - and Preferências full width under them. Three buttons wrapping freely
   left "Aceitar tudo" alone on a row, off to one side. */
@media (max-width: 767px) {
  .cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 100%; width: 100%; }
  .cookie-banner-actions .btn-cookie-reject { order: 1; }
  .cookie-banner-actions .btn-cookie-accept { order: 2; }
  .cookie-banner-actions .btn-cookie-manage { order: 3; grid-column: 1 / -1; }
  .cookie-banner-actions button { width: 100%; min-height: 44px; padding-inline: 8px; text-align: center; justify-content: center; }
}

/* Store pages: about the store, and its own questions (build-location-pages.js storeAboutHtml). */
.loc-about { margin: 28px 0 8px; max-width: 68ch; }
.loc-about p { margin: 0 0 12px; line-height: 1.6; }
.loc-about a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.loc-about-title { margin: 24px 0 10px; font-size: 1.15rem; font-weight: 700; }
.loc-faq details { border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 12px 0; }
.loc-faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.loc-faq summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.loc-faq details p { margin: 8px 0 0; }