/* Completo reuses Premium components at a deliberately denser, less immersive tier. */
body[data-package="completo"] .preview-shell {
  position: relative;
}

body[data-package="completo"] .completo-site {
  --cafe-ink: #2A2320;
  --cafe-soft: #6B5D4F;
  --cafe-accent: #8A5A34;
  --cafe-stone: #E6D5BF;
  --cafe-cream: #DBC7AB;
  --cafe-paper: #F8F0E4;
  --cafe-line: #C8AE8D;
  overflow: clip;
  color: var(--cafe-ink);
  background: var(--cafe-stone);
}

.completo-site__header {
  min-height: 64px;
  border-bottom-color: var(--cafe-line);
  background: rgba(230, 213, 191, 0.97);
}

.completo-site__header .premium-site__brand {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.completo-hero {
  width: 92%;
  min-height: clamp(430px, 55vh, 620px);
  margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
  border-radius: 2px;
  overflow: hidden;
}

.completo-hero .premium-hero__image {
  object-position: center 55%;
}

.completo-hero .premium-hero__overlay {
  background: linear-gradient(90deg, rgba(24, 18, 15, 0.84) 0%, rgba(24, 18, 15, 0.72) 56%, rgba(24, 18, 15, 0.16) 82%);
}

.completo-hero .premium-hero__content {
  width: 88%;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  color: #FFFDF8;
}

.completo-hero h2 {
  max-width: 11ch;
  color: #FFFDF8;
  font-size: clamp(3.2rem, 7.5vw, 6.2rem);
  line-height: 0.9;
}

.completo-hero .premium-hero__content > p {
  color: #FFFDF8;
}

.completo-menu {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.completo-menu .premium-heading {
  max-width: 12ch;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}

.completo-menu .premium-section__intro {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.completo-menu .menu-category {
  padding-block: clamp(2rem, 3.5vw, 3.2rem);
}

.completo-menu .menu-category__head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.completo-menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.7vw, 1.55rem);
  row-gap: clamp(2rem, 3vw, 2.75rem);
}

.completo-menu-grid .menu-item h4 {
  font-size: clamp(1.02rem, 1.55vw, 1.24rem);
}

.completo-menu-grid .menu-item p {
  font-size: 0.72rem;
}

.completo-menu-grid .menu-item__body {
  padding-top: 0.8rem;
}

.completo-featured,
.completo-gallery {
  padding-block: clamp(4rem, 7vw, 6rem);
}

.completo-featured {
  background: var(--cafe-stone);
}

.completo-section-intro {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.completo-section-intro .premium-heading {
  font-size: clamp(2.25rem, 4.5vw, 4rem);
}

.completo-dish-grid {
  gap: clamp(1rem, 2vw, 1.7rem);
}

.completo-dish-grid .dish-card h3 {
  font-size: clamp(1.18rem, 2vw, 1.55rem);
}

.completo-promo {
  width: 90%;
  min-height: clamp(310px, 34vw, 440px);
  margin: 0 auto;
  border-radius: 2px;
}

.completo-promo::after {
  background: linear-gradient(90deg, rgba(24, 18, 15, 0.86) 0%, rgba(24, 18, 15, 0.72) 55%, rgba(24, 18, 15, 0.1) 80%);
}

.completo-promo .promo-banner__content {
  width: min(48%, 470px);
  color: #FFFDF8;
}

.completo-promo h2 {
  color: #FFFDF8;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
}

.completo-promo .promo-banner__content > p {
  color: #FFFDF8;
}

.completo-gallery {
  background: var(--cafe-cream);
  color: var(--cafe-ink);
}

.completo-gallery .premium-section__intro > p {
  color: var(--cafe-soft);
}

.completo-gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.8rem, 1.5vw, 1.3rem);
}

.completo-gallery-grid .gallery-item {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 4 / 3;
}

.completo-gallery-grid .gallery-item img {
  transition-duration: 300ms;
}

.completo-gallery-grid .gallery-item figcaption {
  padding: 2rem 0.75rem 0.65rem;
}

.completo-campaign {
  padding-block: clamp(1.7rem, 3vw, 2.5rem);
  background: var(--cafe-stone);
}

.completo-campaign h2 {
  font-size: clamp(1.8rem, 3.3vw, 3rem);
}

.completo-footer {
  padding-top: clamp(3rem, 6vw, 5rem);
  background: var(--cafe-ink);
  color: var(--cafe-stone);
}

.completo-site a:focus-visible,
.completo-site button:focus-visible {
  outline: 3px solid #FFFDF8;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--cafe-accent);
}

@media (max-width: 900px) {
  .completo-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .completo-hero {
    width: calc(100% - 1.4rem);
    min-height: 460px;
    margin-top: 0.7rem;
  }

  .completo-hero .premium-hero__image {
    object-position: 58% center;
  }

  .completo-hero .premium-hero__overlay {
    background: linear-gradient(0deg, rgba(24, 18, 15, 0.88) 0%, rgba(24, 18, 15, 0.72) 62%, rgba(24, 18, 15, 0.12) 90%);
  }

  .completo-menu .menu-category__head {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .completo-menu .menu-category__head p {
    grid-column: auto;
  }

  .completo-menu-grid {
    grid-template-columns: 1fr;
  }

  .completo-dish-grid {
    gap: 2rem;
  }

  .completo-promo {
    width: calc(100% - 1.4rem);
    min-height: 440px;
  }

  .completo-promo .promo-banner__content {
    width: auto;
  }

  .completo-promo::after {
    background: linear-gradient(0deg, rgba(24, 18, 15, 0.9) 0%, rgba(24, 18, 15, 0.74) 62%, rgba(24, 18, 15, 0.12) 90%);
  }

  .completo-gallery-grid {
    grid-template-columns: 1fr;
  }

  .completo-gallery-grid .gallery-item,
  .completo-gallery-grid .gallery-item--wide,
  .completo-gallery-grid .gallery-item--portrait {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .completo-gallery-grid .gallery-item:hover img {
    transform: none;
  }
}