@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


:root {

  --red: #d71920;
  --red-dark: #a90f15;

  --black: #0d0d0d;
  --ink: #171717;

  --muted: #747474;

  --line: #e7e7e7;

  --surface: #f7f7f5;

  --white: #ffffff;

  --radius: 18px;

  --shadow:
    0 18px 50px rgba(0, 0, 0, .10);

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  color: var(--ink);

  background:
    var(--white);

  font-family:
    Inter,
    Arial,
    sans-serif;

}


button,
a {
  font: inherit;
}


button {
  cursor: pointer;
}


a {

  color: inherit;

  text-decoration: none;

}


/* =========================================
   HEADER
========================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding:
    16px
    5vw;

  background:
    rgba(255, 255, 255, .94);

  backdrop-filter:
    blur(16px);

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

}


.brand {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 1.25rem;

  font-weight: 900;

  letter-spacing: -.04em;

}


.brand-mark {
  font-size: 1.35rem;
}


.main-nav {

  display: flex;

  gap: 30px;

  font-size: .82rem;

  font-weight: 700;

  text-transform: uppercase;

}


.main-nav a:hover {
  color: var(--red);
}


.cart-button {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  border: 0;

  border-radius: 10px;

  padding:
    12px
    16px;

  color: white;

  background:
    var(--red);

  font-weight: 800;

}


.cart-count {

  min-width: 22px;

  height: 22px;

  display: inline-grid;

  place-items: center;

  padding:
    0
    5px;

  border-radius: 50%;

  background:
    rgba(0, 0, 0, .24);

  font-size: .72rem;

}


/* =========================================
   BUTTONS
========================================= */

.button {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  min-height: 48px;

  padding:
    0
    20px;

  border: 0;

  border-radius: 10px;

  font-size: .78rem;

  font-weight: 900;

  letter-spacing: .02em;

}


.button-primary {

  color: white;

  background:
    var(--red);

}


.button-primary:hover {
  background:
    var(--red-dark);
}


.button-secondary {

  color: white;

  background:
    rgba(255, 255, 255, .08);

  border:
    1px solid
    rgba(255, 255, 255, .15);

}


/* =========================================
   MENU
========================================= */

.menu-section {

  padding:
    92px
    5vw;

  background:
    var(--white);

}


.section-heading {

  max-width: 700px;

  margin:
    0
    auto
    30px;

  text-align:
    center;

}


.eyebrow {

  margin:
    0
    0
    12px;

  color:
    var(--red);

  font-size:
    .75rem;

  font-weight:
    900;

  letter-spacing:
    .16em;

}


.section-heading h2,
.info-section h2 {

  margin:
    0;

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

  letter-spacing:
    -.06em;

}


.section-heading p:last-child {

  color:
    var(--muted);

  line-height:
    1.6;

}


/* =========================================
   CATEGORY FILTER
========================================= */

.category-tabs {

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    34px;

}


.category-tab {

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

  background:
    white;

  border-radius:
    999px;

  padding:
    10px
    16px;

  font-size:
    .78rem;

  font-weight:
    800;

}


.category-tab.active,
.category-tab:hover {

  color:
    white;

  background:
    var(--red);

  border-color:
    var(--red);

}


/* =========================================
   PIZZA GRID
========================================= */

.pizza-grid {

  max-width:
    1280px;

  margin:
    0
    auto;

  display:
    grid;

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

  gap:
    18px;

}


.pizza-card {

  overflow:
    hidden;

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

  border-radius:
    var(--radius);

  background:
    white;

  transition:
    transform .2s ease,
    box-shadow .2s ease;

}


.pizza-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);

}


.pizza-image {

  position:
    relative;

  height:
    190px;

  overflow:
    hidden;

  background:
    #1a1a1a;

}


.pizza-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

}


.pizza-body {
  padding: 18px;
}


.pizza-top {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

}


.pizza-name {

  margin:
    0;

  font-size:
    1rem;

}


.pizza-price {

  color:
    var(--red);

  font-weight:
    900;

  white-space:
    nowrap;

}


.pizza-description {

  min-height:
    42px;

  margin:
    8px
    0
    16px;

  color:
    var(--muted);

  font-size:
    .78rem;

  line-height:
    1.5;

}


.pizza-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

}


.details-button {

  border:
    0;

  padding:
    0;

  color:
    var(--muted);

  background:
    transparent;

  font-size:
    .75rem;

  font-weight:
    800;

}


.add-button {

  width:
    36px;

  height:
    36px;

  border:
    0;

  border-radius:
    10px;

  color:
    white;

  background:
    var(--red);

  font-size:
    1.25rem;

  font-weight:
    800;

}


/* =========================================
   PROMO
========================================= */

.promo-strip {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  margin:
    0
    5vw
    80px;

  padding:
    24px
    30px;

  color:
    white;

  border-radius:
    16px;

  background:
    var(--black);

}


.promo-strip strong {

  display:
    block;

  font-size:
    1rem;

}


.promo-strip span {

  display:
    block;

  margin-top:
    5px;

  color:
    #aaa;

  font-size:
    .8rem;

}


/* =========================================
   INFO
========================================= */

.info-section {

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    60px;

  padding:
    90px
    10vw;

  background:
    var(--surface);

}


.info-section > p {

  max-width:
    620px;

  margin:
    0;

  color:
    var(--muted);

  line-height:
    1.8;

}


/* =========================================
   FOOTER
========================================= */

.site-footer {

  display:
    grid;

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

  gap:
    30px;

  padding:
    55px
    7vw;

  color:
    #aaa;

  background:
    var(--black);

  font-size:
    .78rem;

  line-height:
    1.6;

}


.site-footer strong {
  color: white;
}


.site-footer p {

  margin:
    8px
    0
    0;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

  .pizza-grid {

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

  }


  .main-nav {
    display: none;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .site-header {

    padding:
      13px
      18px;

  }


  .cart-button span:nth-child(2) {
    display: none;
  }


  .menu-section {

    padding:
      70px
      18px;

  }


  .pizza-grid {

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

    gap:
      12px;

  }


  .pizza-image {
    height: 220px;
  }


  .pizza-body {
    padding: 13px;
  }


  .pizza-description {
    min-height: auto;
  }


  .promo-strip {

    margin:
      0
      18px
      60px;

    padding:
      22px;

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .info-section {

    grid-template-columns:
      1fr;

    padding:
      70px
      24px;

    gap:
      20px;

  }


  .site-footer {

    grid-template-columns:
      1fr
      1fr;

    padding:
      45px
      24px;

  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .pizza-grid {

    grid-template-columns:
      1fr;

  }


  .pizza-image {
    height: 180px;
  }


  .site-footer {

    grid-template-columns:
      1fr;

  }

}