:root {
    --bg: #F2EBDC;
    --bg-2: #ECE4D2;
    --bg-card: #FBF6EC;
    --bg-dark: #2F3528;
    --bg-dark-2: #1F2319;
    --ink: #1B1B17;
    --ink-2: #3A3830;
    --muted: #76705F;
    --line: #D9CFB9;
    --olive: #6E7E45;
    --olive-2: #5B6A38;
    --olive-soft: #A9B07A;
    --accent: #8C9B5A;
    --red: #A23D2A;
    --radius: 14px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

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

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

a {
    color: inherit;
    text-decoration: none
}

/* utility */
.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px
}

.serif {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: -0.01em
}

.script {
    font-family: 'Caveat', cursive
}

.logo {
    max-height: 60px;
}

.logo-sm {
    max-height: 35px;
}

.error-input {
    border-color: red !important;
}

.none-data {
    width: 100%;
    display: flex;
    justify-content: center;
}

.none-data > span {
    border: 1px dashed #E03F4F;
    background: rgba(224, 63, 79, .4);
    color: #E03F4F;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
}

.d-none {
    display: none !important;
}

button[disabled] {
    cursor: not-allowed;
    opacity: .5;
}

/* ---------- HEADER ---------- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(242, 235, 220, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}

header.scrolled {
    border-color: var(--line)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    gap: 24px;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1
}

.logo .brand {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink)
}

.logo .brand em {
    font-style: normal;
    color: var(--olive)
}

.logo .sub {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: 0.42em;
    color: var(--muted);
    margin-top: 4px
}

.main-nav {
    display: flex;
    gap: 30px
}

.main-nav a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    transition: color .15s;
    position: relative;
    padding: 6px 0;
    white-space: nowrap
}

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

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--olive)
}

.actions {
    display: flex;
    align-items: center;
    gap: 16px
}

.login {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 500;
    padding: 8px 4px;
    white-space: nowrap
}

.login:hover {
    color: var(--olive)
}

.login .iconcircle {
    width: 30px;
    height: 30px;
    border: 1.4px solid var(--ink-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.cart-btn {
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 10px 22px 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    transition: background .15s;
    white-space: nowrap
}

.cart-btn:hover {
    background: #000
}

.cart-btn .count {
    background: var(--olive);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0
}

.burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    align-items: center;
    justify-content: center
}

.burger svg {
    width: 18px;
    height: 18px
}

/* ---------- HERO ---------- */
.hero {
    padding: 48px 0 32px;
    position: relative;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 48px;
    align-items: center;
    min-height: 560px;
    position: relative
}

.hero-copy {
    padding-right: 24px;
    position: relative;
    z-index: 2
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 24px
}

.hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 8px
}

.hero h1 .accent {
    color: var(--olive);
    font-style: italic;
    font-weight: 500
}

.hero h1 .script-line {
    display: block;
    font-family: 'Caveat', cursive;
    font-style: normal;
    color: var(--accent);
    font-size: 0.78em;
    margin-top: 8px;
    font-weight: 500;
    letter-spacing: 0
}

.hero p.lead {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 430px;
    margin: 28px 0 32px
}

.cta-row {
    display: flex;
    gap: 14px;
    margin-bottom: 48px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    transition: transform .15s, background .15s, color .15s, border-color .15s;
}

.btn-primary {
    background: var(--olive);
    color: #fff;
    border: 1px solid var(--olive)
}

.btn-primary:hover {
    background: var(--olive-2);
    border-color: var(--olive-2)
}

.btn-primary .arrow {
    width: 18px;
    height: 18px
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.4px solid var(--ink)
}

.btn-ghost:hover {
    background: var(--ink);
    color: #fff
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.4px solid rgba(255, 255, 255, 0.6)
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--ink)
}

/* hero features */
.feat-row {
    display: flex;
    gap: 36px;
    flex-wrap: wrap
}

.feat {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.feat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2)
}

.feat-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.3
}

.feat-text .t {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px
}

.feat-text .d {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45
}

/* hero image */
.hero-art {
    position: relative;
    height: 100%;
    min-height: 520px
}

.pizza-stage {
    position: absolute;
    inset: -30px -80px -30px 0;
    background-image: url('https://images.unsplash.com/photo-1574071318508-1cdbab80d002?auto=format&fit=crop&w=1400&q=80');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.pizza-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 18%);
}

.olive-deco {
    position: absolute;
    left: -14px;
    top: 60px;
    width: 120px;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none
}

.olive-deco svg {
    width: 100%;
    height: auto
}

.stamp {
    position: absolute;
    left: -40px;
    top: 60px;
    z-index: 3;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    background: rgba(242, 235, 220, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(2px);
}

.stamp .inner {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1;
    position: relative;
    z-index: 2
}

.stamp svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--ink-2)
}

.stamp text {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.32em;
    fill: var(--ink-2);
    font-weight: 500
}

/* ---------- CATEGORIES BAR ---------- */
.cats {
    margin: 24px 0 56px
}

.cats-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 8px;
    box-shadow: 0 1px 0 var(--line);
}

.cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--ink-2);
    transition: background .15s, color .15s;
    position: relative;
}

.cat:hover {
    color: var(--olive)
}

.cat svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.4
}

.cat .name {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600
}

.cat.active {
    color: var(--olive)
}

.cat.active::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 6px;
    height: 1.5px;
    background: var(--olive);
}

/* ---------- MENU SECTION ---------- */
.menu-section {
    padding: 8px 0 80px
}

.menu-grid {
    display: grid;
    grid-template-columns:300px 1fr;
    gap: 48px;
    align-items: start
}

.menu-intro .eyebrow {
    margin-bottom: 18px
}

.menu-intro h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 46px;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.015em
}

.menu-intro h2 .script {
    display: block;
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-size: 0.85em;
    margin-top: 4px;
    font-weight: 500;
    font-style: normal
}

.menu-intro .divider {
    width: 36px;
    height: 1.5px;
    background: var(--olive);
    margin: 26px 0
}

.menu-intro p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 260px
}

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

.card {
    background: var(--bg-card);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px rgba(40, 30, 15, .25)
}

.card-image {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease
}

.card:hover .card-image img {
    transform: scale(1.04)
}

.badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--olive);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

.heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: color .15s, background .15s;
}

.heart:hover {
    background: #fff;
    color: var(--red)
}

.heart svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
    fill: none;
    stroke: currentColor
}

.heart.active {
    color: var(--red)
}

.heart.active svg {
    fill: currentColor
}

.card-body {
    padding: 20px 22px 22px
}

.card-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em
}

.card-body .desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    min-height: 60px
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px
}

.price {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--ink)
}

.add {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--olive);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}

.add:hover {
    background: var(--olive-2);
    transform: rotate(90deg)
}

.add svg {
    width: 18px;
    height: 18px;
    stroke-width: 2
}

.menu-pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 28px
}

.dot {
    width: 24px;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
    cursor: pointer;
    transition: background .15s
}

.dot.active {
    background: var(--olive)
}

/* ---------- DELIVERY BANNER ---------- */
.delivery {
    padding: 0 0 80px
}

.del-card {
    background: var(--bg-dark);
    color: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns:1.1fr 0.9fr 1fr;
    align-items: stretch;
    min-height: 340px;
    position: relative;
}

.del-content {
    padding: 48px 48px 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.del-content .eyebrow {
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 18px
}

.del-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -0.015em
}

.del-content h2 .script {
    display: block;
    font-family: 'Caveat', cursive;
    color: var(--olive-soft);
    font-size: 0.92em;
    margin-top: 4px;
    font-style: normal
}

.del-content .btn {
    margin-top: 30px;
    align-self: flex-start
}

.del-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 48px 16px 48px 0;
}

.del-stat {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.del-stat-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.del-stat-ic svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.3
}

.del-stat .t {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 5px
}

.del-stat .d {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4
}

.del-art {
    position: relative;
    overflow: hidden;
    background-image: url('https://images.unsplash.com/photo-1571066811602-716837d681de?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
}

.del-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(47, 53, 40, 0.55) 25%, transparent 60%);
}

/* ---------- BENEFITS ---------- */
.benefits {
    padding: 8px 0 56px
}

.ben-head {
    text-align: center;
    margin-bottom: 36px
}

.ben-head .eyebrow {
    margin-bottom: 14px
}

.ben-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink)
}

.ben-head h2 .script {
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-style: normal;
    font-size: 1.05em
}

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

.ben-item {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    transition: transform .25s, box-shadow .25s;
}

.ben-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(40, 30, 15, .2)
}

.ben-ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(110, 126, 69, 0.12);
    color: var(--olive-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ben-ic svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.4
}

.ben-item .t {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 21px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15
}

.ben-item .d {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55
}

/* ---------- HOW TO ORDER ---------- */
.how {
    padding: 0 0 72px
}

.how-head {
    text-align: center;
    margin-bottom: 40px
}

.how-head .eyebrow {
    margin-bottom: 14px
}

.how-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink)
}

.how-head h2 .script {
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-style: normal;
    font-size: 1.05em
}

.how-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    position: relative
}

.how-step {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 32px 28px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .25s, box-shadow .25s;
}

.how-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -22px rgba(40, 30, 15, .22)
}

.how-num {
    position: absolute;
    top: -22px;
    left: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--olive);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 24px;
    box-shadow: 0 6px 18px -6px rgba(110, 126, 69, .5);
}

.how-step .ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--bg-2);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.how-step .ic svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.4
}

.how-step h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15
}

.how-step p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55
}

.how-arrow {
    position: absolute;
    top: 50%;
    font-size: 22px;
    color: var(--olive-soft);
    font-family: 'Cormorant Garamond', serif;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ---------- LOCATOR ---------- */
.locator {
    padding: 8px 0 56px
}

.locator-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns:1.05fr 1.4fr;
    gap: 40px;
    align-items: center;
}

.locator-head .eyebrow {
    margin-bottom: 14px
}

.locator-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink)
}

.locator-head h2 .script {
    display: block;
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-size: 0.9em;
    font-style: normal;
    margin-top: 2px
}

.locator-head p {
    font-size: 14px;
    color: var(--muted);
    margin-top: 14px;
    max-width: 340px
}

.locator-form {
    display: grid;
    gap: 10px;
    align-items: end
}

.locator-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.locator-form label {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600
}

.locator-form input {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

.locator-form input:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: 0 0 0 3px rgba(110, 126, 69, .15)
}

.locator-form .row-2 {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns:1fr auto;
    gap: 10px;
    margin-top: 4px
}

.locator-form .geo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 13px 18px;
    border: 1px dashed var(--olive);
    border-radius: 10px;
    color: var(--olive);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    grid-column: 1/-1;
}

.locator-form .geo:hover {
    background: rgba(110, 126, 69, .07)
}

.locator-form button.find {
    background: var(--olive);
    color: #fff;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.locator-form button.find:hover {
    background: var(--olive-2)
}

.locator-form .form-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.locator-form .form-buttons a.btn {
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

.locator-form .btn-reset-form {
    display: none;
}

/* ---------- LOCATIONS ---------- */
.locations {
    padding: 0 0 80px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 32px;
    flex-wrap: wrap
}

.section-head .left .eyebrow {
    margin-bottom: 12px
}

.section-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink)
}

.section-head h2 .script {
    display: block;
    font-family: 'Caveat', cursive;
    color: var(--accent);
    font-size: 0.85em;
    font-style: normal;
    margin-top: 2px
}

.section-head .right {
    font-size: 13.5px;
    color: var(--muted);
    max-width: 340px;
    line-height: 1.55
}

.loc-carousel {
    position: relative
}

.loc-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 22px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 6px 2px 18px;
    --vis: 3;
    grid-auto-columns: calc((100% - (var(--vis) - 1) * 22px) / var(--vis));
}

.loc-grid.loc-grid-none {
    display: block;
}

.loc-grid::-webkit-scrollbar {
    display: none
}

.loc-grid .loc-card {
    scroll-snap-align: start;
    min-width: 0
}

.car-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    box-shadow: 0 8px 22px -10px rgba(40, 30, 15, .3);
    z-index: 3;
    transition: background .15s, color .15s, transform .15s;
}

.car-btn:hover {
    background: var(--olive);
    color: #fff;
    border-color: var(--olive)
}

.car-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8
}

.car-prev {
    left: -22px
}

.car-next {
    right: -22px
}

.car-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: #fff;
    color: var(--ink)
}

.loc-card {
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    position: relative;
}

.loc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px -22px rgba(40, 30, 15, .28)
}

.loc-image {
    position: relative;
    aspect-ratio: 5/3;
    overflow: hidden
}

.loc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease
}

.loc-card:hover .loc-image img {
    transform: scale(1.05)
}

.loc-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%)
}

.loc-image .city {
    position: absolute;
    left: 18px;
    bottom: 14px;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.01em;
    z-index: 2
}

.loc-image .pin {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.loc-image .pin svg {
    width: 12px;
    height: 12px
}

.loc-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.loc-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line)
}

.loc-row:last-of-type {
    border-bottom: none
}

.loc-row .ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    flex-shrink: 0
}

.loc-row .ic svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5
}

.loc-row .info {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45
}

.loc-row .info a {
    color: var(--ink);
    font-weight: 500
}

.loc-row .info a:hover {
    color: var(--olive)
}

.loc-row .info small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-top: 2px
}

.loc-foot {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    align-items: center
}

.loc-foot .order {
    flex: 1;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 13px 20px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s;
}

.loc-foot .order:hover {
    background: var(--olive)
}

.loc-foot .map {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}

.loc-foot .map:hover {
    background: var(--ink);
    color: #fff
}

.loc-foot .map svg {
    width: 16px;
    height: 16px
}

/* ---------- REVIEWS ---------- */
.reviews {
    padding: 0 0 80px
}

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

.rev-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    border: 1px solid transparent;
    transition: border-color .2s, transform .25s;
}

.rev-card:hover {
    border-color: var(--olive-soft);
    transform: translateY(-3px)
}

.rev-stars {
    display: flex;
    gap: 3px;
    color: var(--olive)
}

.rev-stars svg {
    width: 16px;
    height: 16px;
    fill: currentColor
}

.rev-quote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink);
    font-style: italic;
    letter-spacing: -0.005em;
    flex: 1
}

.rev-quote::before {
    content: '“';
    position: absolute;
    top: 18px;
    right: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    color: var(--olive-soft);
    opacity: .35;
    line-height: 1
}

.rev-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.rev-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--olive-soft);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 18px
}

.rev-meta .name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink)
}

.rev-meta .when {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.04em
}

.rev-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    background: var(--bg-card);
    border-radius: 14px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}

.rev-summary strong {
    color: var(--ink);
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600
}

.rev-summary .sep {
    width: 1px;
    height: 24px;
    background: var(--line)
}

.rev-summary .src {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-2)
}

/* ---------- TRUST STRIP ---------- */
.trust {
    padding: 8px 0 80px
}

.trust-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 32px
}

.trust-item {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.trust-ic {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2)
}

.trust-ic svg {
    width: 36px;
    height: 36px;
    stroke-width: 1.3
}

.trust-item .t {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 5px
}

.trust-item .d {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45
}

/* ---------- FOOTER ---------- */
footer {
    background: var(--bg-dark-2);
    color: #D8D2C0;
    padding: 48px 0 28px
}

.foot-grid {
    display: grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start
}

.foot-logo .brand {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 30px;
    color: #fff;
    letter-spacing: -0.02em
}

.foot-logo .brand em {
    font-style: normal;
    color: var(--olive-soft)
}

.foot-logo .sub {
    font-size: 9.5px;
    letter-spacing: 0.42em;
    color: rgba(216, 210, 192, 0.55);
    margin-top: 4px;
    font-weight: 500
}

.foot-logo p {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(216, 210, 192, 0.6);
    line-height: 1.55;
    max-width: 280px
}

.foot-col h4 {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
    font-weight: 600
}

.foot-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px
}

.foot-col a,
.foot-col span {
    font-size: 13.5px;
    color: rgba(216, 210, 192, 0.7);
    transition: color .15s
}

.foot-col a:hover {
    color: #fff
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 14px
}

.soc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(216, 210, 192, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D8D2C0;
    transition: background .15s, color .15s;
}

.soc:hover {
    background: var(--olive);
    border-color: var(--olive);
    color: #fff
}

.soc svg {
    width: 16px;
    height: 16px
}

.foot-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(216, 210, 192, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(216, 210, 192, 0.5);
}

.foot-foodeliver {
    margin-top: 35px;
}

.foot-foodeliver a {
    display: inline-block;
    opacity: .8;
    transition: .4s;
}

.foot-foodeliver a:hover {
    opacity: 1;
}

.foot-foodeliver img {
    max-height: 35px;
}

.foot-foodeliver span {
    color: rgba(216, 210, 192, 0.7);
    font-size: 12px;
    display: block;
    max-width: 400px;
}

/* ---------- MOBILE MENU ---------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    padding: 24px 32px;
}

.mobile-menu.open {
    transform: translateX(0)
}

.mm-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px
}

.mm-close {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center
}

.mm-nav {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.mm-nav a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--ink);
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.mm-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .hero h1 {
        font-size: 54px
    }

    .section-head h2, .del-content h2, .locator-head h2 {
        font-size: 38px
    }

    .ben-head h2, .how-head h2 {
        font-size: 38px
    }

    .ben-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .del-content {
        padding: 40px
    }

    .del-card {
        grid-template-columns:1fr 0.95fr 0.8fr
    }

    .stamp {
        width: 120px;
        height: 120px
    }

    .stamp .inner {
        font-size: 16px
    }

    .locator-card {
        grid-template-columns:1fr;
        gap: 24px
    }

    .loc-grid {
        --vis: 2;
        grid-auto-columns: calc((100% - 22px) / 2)
    }

    .car-prev {
        left: -12px
    }

    .car-next {
        right: -12px
    }

    .rev-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .rev-grid .rev-card:nth-child(3) {
        grid-column: 1/-1
    }
}

@media (max-width: 1080px) {
    .main-nav, .login {
        display: none
    }

    .burger {
        display: flex
    }
}

@media (max-width: 860px) {
    .wrap {
        padding: 0 22px
    }

    .cart-btn {
        padding: 10px 16px 10px 14px
    }

    .cart-btn .label {
        display: none
    }

    .hero {
        padding: 20px 0 24px
    }

    .hero-grid {
        grid-template-columns:1fr;
        gap: 32px;
        min-height: 0
    }

    .hero-copy {
        padding-right: 0;
        order: 2
    }

    .hero-art {
        order: 1;
        min-height: 0;
        height: auto;
        aspect-ratio: 1/0.85;
        border-radius: 14px;
        overflow: hidden;
        position: relative
    }

    .pizza-stage {
        inset: 0;
        border-radius: 14px
    }

    .pizza-stage::after {
        display: none
    }

    .olive-deco {
        display: none
    }

    .stamp {
        left: auto;
        right: 14px;
        top: 14px;
        width: 96px;
        height: 96px
    }

    .stamp .inner {
        font-size: 14px
    }

    .stamp text {
        letter-spacing: 0.28em
    }

    .hero h1 {
        font-size: 42px
    }

    .hero p.lead {
        font-size: 15px;
        margin: 20px 0 24px
    }

    .cta-row {
        margin-bottom: 32px;
        gap: 10px
    }

    .btn {
        padding: 14px 22px;
        font-size: 11px;
        letter-spacing: 0.16em
    }

    .feat-row {
        flex-direction: column;
        gap: 18px
    }

    .cats {
        margin: 8px 0 40px
    }

    .cats-card {
        grid-template-columns:none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(110px, 1fr);
        overflow-x: auto;
        scrollbar-width: none;
        padding: 14px;
    }

    .cats-card::-webkit-scrollbar {
        display: none
    }

    .cat {
        padding: 10px 6px
    }

    .cat .name {
        font-size: 10px
    }

    .locator {
        padding: 0 0 40px
    }

    .locator-card {
        padding: 28px 22px
    }

    .locator-head h2 {
        font-size: 32px
    }

    .locator-form .geo {
        order: -1
    }

    .locations {
        padding: 0 0 48px
    }

    .section-head h2 {
        font-size: 32px
    }

    .section-head {
        margin-bottom: 24px
    }

    .section-head .right {
        font-size: 13px
    }

    .loc-grid {
        --vis: 1;
        grid-auto-columns: 88%;
        padding-left: 4px;
        padding-right: 24px
    }

    .car-btn {
        top: 38%;
        width: 42px;
        height: 42px
    }

    .car-prev {
        left: -6px
    }

    .car-next {
        right: -6px
    }

    .ben-grid {
        grid-template-columns:1fr;
        gap: 14px
    }

    .ben-head h2, .how-head h2 {
        font-size: 30px
    }

    .how-grid {
        grid-template-columns:1fr;
        gap: 32px
    }

    .how {
        padding: 0 0 48px
    }

    .benefits {
        padding: 0 0 40px
    }

    .reviews {
        padding: 0 0 48px
    }

    .rev-grid {
        grid-template-columns:1fr;
        gap: 14px
    }

    .rev-grid .rev-card:nth-child(3) {
        grid-column: auto
    }

    .rev-card {
        padding: 24px 22px
    }

    .rev-quote {
        font-size: 19px
    }

    .delivery {
        padding: 0 0 56px
    }

    .del-card {
        grid-template-columns:1fr;
        min-height: 0
    }

    .del-content {
        padding: 36px 28px 24px;
        order: 1
    }

    .del-stats {
        padding: 8px 28px 28px;
        order: 2;
        gap: 18px
    }

    .del-art {
        order: 3;
        height: 200px
    }

    .del-art::before {
        display: none
    }

    .del-content h2 {
        font-size: 34px
    }

    .trust {
        padding: 0 0 56px
    }

    .trust-grid {
        grid-template-columns:1fr 1fr;
        gap: 24px
    }

    footer {
        padding: 40px 0 24px
    }

    .foot-grid {
        grid-template-columns:1fr 1fr;
        gap: 32px
    }

    .foot-logo {
        grid-column: 1/-1
    }

    .foot-bottom {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
        font-size: 11.5px
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 36px
    }

    .hero h1 .script-line {
        font-size: 0.72em
    }

    .menu-intro h2, .del-content h2 {
        font-size: 30px
    }

    .cta-row .btn {
        flex: 1;
        justify-content: center;
        min-width: 0
    }

    .trust-grid {
        grid-template-columns:1fr
    }

    .foot-grid {
        grid-template-columns:1fr
    }
}