/*
* Брендовые шрифты.
*
* Unbounded — для заголовков и акцентных элементов (кикеры, бейджи, лого).
* Manrope — для основного текста и интерфейса.
*
* @import работает "из коробки", но для продакшена быстрее вынести
* это в + в
* HTML-страницы (см. https://fonts.google.com/specimen/Unbounded
* и https://fonts.google.com/specimen/Manrope — там же готовый код).
*/
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');
button, a, input {
-webkit-tap-highlight-color: transparent; /* Убирает синюю рамку при нажатии на iOS/Android */
user-select: none; /* Запрещает выделение текста на элементе */
-webkit-user-select: none;
}
/* ============================================================
БАЗОВЫЕ НАСТРОЙКИ
============================================================ */
:root {
/*
* Бренд-палитра.
*/
--orange: #F24705; /* основной цвет */
--orange-dark: #D93600; /* вторичный цвет / тень плашки / hover-состояния */
--orange-light: #FFF4EB; /* карточки, светлые подложки */
--white: #FFFFFF;
--text: #241512;
/*
* Оттенки текста ниже не входят в переданную палитру напрямую —
* это тёплые полупрозрачные варианты основного текстового цвета
* (вместо нейтрально-серых), чтобы весь текст был в одной
* цветовой гамме с брендом. Если нужны точные HEX — скажи,
* заменю на конкретные значения.
*/
--text-secondary: rgba(36, 21, 18, 0.65);
--text-light: rgba(36, 21, 18, 0.45);
--border: #EEEEEE;
--background-light: #FFF4EB;
/*
* Статусные цвета (успех/ошибка) оставлены как есть — это
* универсальные сигнальные цвета, обычно их не завязывают
* на цвет бренда. Скажи, если их тоже нужно перекрасить.
*/
--success: #239B56;
--error: #D93025;
--shadow-small:
0 4px 20px rgba(0, 0, 0, 0.06);
--shadow-medium:
0 12px 40px rgba(0, 0, 0, 0.12);
--shadow-large:
0 20px 70px rgba(0, 0, 0, 0.20);
--radius-small: 10px;
--radius-medium: 16px;
--radius-large: 20px;
--radius-xl: 28px;
--container-width: 1240px;
--header-height: 72px;
--transition:
0.2s ease;
/*
* Шрифты.
*/
--font-heading:
"Unbounded",
sans-serif;
--font-body:
"Manrope",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;
}
/* ============================================================
RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
var(--font-body);
color: var(--text);
background:
var(--orange);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body.modal-open {
overflow: hidden;
}
button,
input,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
/*
* Заголовки — акцентным шрифтом бренда.
*/
h1,
h2,
h3 {
font-family: var(--font-heading);
}
.container {
width: min(
calc(100% - 32px),
var(--container-width)
);
margin-inline: auto;
}
/* ============================================================
HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background:
rgba(242, 71, 5, 0.96);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
}
.header-inner {
min-height: var(--header-height);
width: min(
calc(100% - 24px),
var(--container-width)
);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--white);
font-family: var(--font-heading);
font-weight: 900;
letter-spacing: -0.04em;
}
.logo-icon {
font-size: 25px;
line-height: 1;
}
.logo-text {
font-size: 19px;
}
.logo-text span {
/*
* Светлый тёплый оттенок, подобранный под новый --orange (#F24705)
* для контраста на оранжевой шапке — в исходной палитре отдельного
* значения для этого акцента не было, поправь на глаз при желании.
*/
color: #FFD9C2;
}
.header-actions {
display: flex;
align-items: center;
}
.header-cart-button {
border: 0;
min-height: 44px;
padding:
8px 12px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 999px;
background: var(--white);
color: var(--text);
font-weight: 700;
transition:
transform var(--transition),
box-shadow var(--transition);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.08);
}
.header-cart-button:hover {
transform: translateY(-1px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.12);
}
.header-cart-button:active {
transform: translateY(0);
}
.cart-icon {
font-size: 18px;
}
.cart-count {
min-width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 999px;
background: var(--orange);
color: var(--white);
font-size: 12px;
font-weight: 800;
}
/* ============================================================
HERO
============================================================ */
.hero {
overflow: hidden;
color: var(--white);
}
.hero-content {
position: relative;
min-height: 440px;
padding:
70px 0
70px;
display: flex;
align-items: center;
}
.hero-text {
position: relative;
z-index: 2;
max-width: 700px;
}
.hero-label {
display: inline-flex;
align-items: center;
padding:
7px 12px;
margin-bottom: 18px;
border:
1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background:
rgba(255, 255, 255, 0.10);
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
}
.hero h1 {
margin-bottom: 18px;
font-size:
clamp(42px, 9vw, 76px);
line-height: 0.98;
letter-spacing: -0.055em;
}
.hero p {
max-width: 550px;
margin-bottom: 28px;
color:
rgba(255, 255, 255, 0.86);
font-size:
clamp(16px, 2vw, 20px);
}
.hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding:
0 24px;
border-radius: 999px;
background: var(--white);
color: var(--orange);
font-weight: 800;
transition:
transform var(--transition),
box-shadow var(--transition);
}
.hero-button:hover {
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15);
}
.hero-decoration {
position: absolute;
right: -45px;
bottom: 5px;
font-size:
clamp(150px, 30vw, 360px);
line-height: 1;
opacity: 0.17;
transform:
rotate(-10deg);
pointer-events: none;
}
/* ============================================================
MENU
============================================================ */
.menu-section {
position: relative;
background: var(--background-light);
padding:
60px 0
80px;
}
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 25px;
}
.section-kicker {
display: block;
margin-bottom: 5px;
color: var(--orange);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.section-heading h2,
.delivery-info h2,
.cta-card h2 {
margin-bottom: 0;
font-size:
clamp(28px, 5vw, 42px);
line-height: 1.05;
letter-spacing: -0.04em;
}
/* ============================================================
CATEGORY NAVIGATION
============================================================ */
.category-nav {
position: sticky;
top: var(--header-height);
z-index: 50;
display: flex;
gap: 8px;
margin:
0 -16px
35px;
padding:
12px 16px;
overflow-x: auto;
background:
rgba(255, 248, 243, 0.94);
backdrop-filter:
blur(12px);
-webkit-backdrop-filter:
blur(12px);
scrollbar-width: none;
}
.category-nav::-webkit-scrollbar {
display: none;
}
.category-button {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding:
0 17px;
border:
1px solid #E9E9E9;
border-radius: 999px;
background: var(--white);
color: var(--text);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition:
background var(--transition),
color var(--transition),
border-color var(--transition);
}
.category-button:hover {
border-color:
var(--orange);
color:
var(--orange);
}
.category-button.active {
border-color:
var(--orange);
background:
var(--orange);
color:
var(--white);
}
/* ============================================================
CATEGORY
============================================================ */
.category-section {
scroll-margin-top:
calc(var(--header-height) + 70px);
margin-bottom: 70px;
}
.category-section:last-child {
margin-bottom: 0;
}
.category-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 22px;
}
.category-number {
display: inline-block;
color: var(--orange);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.05em;
}
.category-header h2 {
margin:
0 0 5px;
font-size:
clamp(26px, 4vw, 36px);
line-height: 1;
letter-spacing: -0.04em;
}
.category-header p {
margin: 0;
color:
var(--text-secondary);
font-size: 14px;
}
/* ============================================================
PRODUCT GRID
============================================================ */
.products-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.product-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-radius:
var(--radius-medium);
background:
var(--white);
box-shadow:
var(--shadow-small);
transition:
transform var(--transition),
box-shadow var(--transition);
}
.product-card:hover {
transform:
translateY(-3px);
box-shadow:
var(--shadow-medium);
}
.product-image {
position: relative;
aspect-ratio: 1 / 0.88;
overflow: hidden;
background:
var(--white);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition:
transform 0.35s ease;
}
.product-card:hover
.product-image img {
transform:
scale(1.035);
}
.product-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
}
.product-badge {
position: absolute;
top: 10px;
left: 10px;
padding:
5px 9px;
border-radius: 999px;
background: var(--orange);
/*
* "Тень плашки" вторичным цветом бренда (#D93600 -> 217, 54, 0).
*/
box-shadow:
0 4px 10px
rgba(217, 54, 0, 0.35);
color: var(--white);
font-family: var(--font-heading);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.unavailable-label {
position: absolute;
inset: auto 10px 10px 10px;
padding:
7px 10px;
border-radius: 8px;
background:
rgba(20, 20, 20, 0.82);
color: var(--white);
font-size: 11px;
font-weight: 700;
text-align: center;
}
.product-content {
flex: 1;
display: flex;
flex-direction: column;
padding:
15px;
}
.product-title {
margin-bottom: 6px;
font-size: 16px;
line-height: 1.2;
letter-spacing: -0.025em;
}
.product-description {
display: -webkit-box;
overflow: hidden;
margin-bottom: 8px;
color:
var(--text-secondary);
font-size: 12px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.product-weight {
margin-bottom: 12px;
color:
var(--text-light);
font-size: 11px;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.product-price {
flex: 0 0 auto;
font-size: 16px;
letter-spacing: -0.025em;
}
.add-to-cart-button {
min-height: 38px;
padding:
0 10px;
border: 0;
border-radius: 9px;
background:
var(--orange);
color:
var(--white);
font-size: 11px;
font-weight: 800;
transition:
background var(--transition),
transform var(--transition);
}
.add-to-cart-button:hover {
background:
var(--orange-dark);
transform:
translateY(-1px);
}
.add-to-cart-button:active {
transform:
translateY(0);
}
.add-to-cart-button:disabled {
background:
#D6D6D6;
color:
#777;
}
.product-unavailable {
opacity: 0.75;
}
.no-products {
grid-column: 1 / -1;
padding:
40px 20px;
border-radius:
var(--radius-medium);
background:
var(--white);
color:
var(--text-secondary);
text-align: center;
}
/* ============================================================
DELIVERY
============================================================ */
.delivery-section {
padding:
70px 0;
background:
var(--orange);
}
.delivery-card {
display: grid;
gap: 30px;
padding:
25px;
border-radius:
var(--radius-xl);
background:
var(--white);
box-shadow:
var(--shadow-medium);
}
.delivery-info h2 {
margin:
0 0 15px;
}
.delivery-info > p {
margin-bottom: 25px;
color:
var(--text-secondary);
}
.delivery-features {
display: grid;
gap: 13px;
}
.delivery-feature {
display: flex;
align-items: center;
gap: 12px;
}
.delivery-feature > span {
width: 42px;
height: 42px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background:
var(--orange-light);
font-size: 20px;
}
.delivery-feature strong,
.delivery-feature small {
display: block;
}
.delivery-feature strong {
font-size: 14px;
}
.delivery-feature small {
color:
var(--text-secondary);
font-size: 12px;
}
/* ============================================================
MAP
============================================================ */
.map-container {
min-height: 300px;
overflow: hidden;
border-radius:
var(--radius-medium);
}
.map-placeholder {
position: relative;
width: 100%;
min-height: 300px;
overflow: hidden;
background:
#F3EEE8;
}
.map-grid {
position: absolute;
inset: -100px;
background-image:
linear-gradient(
35deg,
transparent 47%,
rgba(150, 130, 110, 0.16) 48%,
rgba(150, 130, 110, 0.16) 50%,
transparent 51%
),
linear-gradient(
145deg,
transparent 47%,
rgba(150, 130, 110, 0.12) 48%,
rgba(150, 130, 110, 0.12) 50%,
transparent 51%
);
background-size:
90px 90px;
transform:
rotate(2deg);
}
.map-placeholder::before,
.map-placeholder::after {
content: "";
position: absolute;
background:
rgba(255, 255, 255, 0.8);
border-radius:
999px;
}
.map-placeholder::before {
width: 130%;
height: 25px;
top: 38%;
left: -15%;
transform:
rotate(-12deg);
}
.map-placeholder::after {
width: 130%;
height: 18px;
top: 65%;
left: -10%;
transform:
rotate(8deg);
}
.map-pin {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50% 50% 50% 0;
background:
var(--orange);
box-shadow:
0 8px 20px
rgba(242, 71, 5, 0.35);
transform:
translate(-50%, -50%)
rotate(-45deg);
}
.map-pin span {
font-size: 25px;
transform:
rotate(45deg);
}
.map-label {
position: absolute;
left: 50%;
bottom: 25px;
z-index: 3;
padding:
7px 12px;
border-radius: 999px;
background:
var(--white);
color:
var(--text);
font-size: 12px;
font-weight: 800;
transform:
translateX(-50%);
box-shadow:
var(--shadow-small);
}
/* ============================================================
CTA
============================================================ */
.cta-section {
padding:
50px 0;
background:
var(--background-light);
}
.cta-card {
display: flex;
flex-direction: column;
gap: 25px;
padding:
25px;
border-radius:
var(--radius-xl);
background:
var(--text);
color:
var(--white);
}
.cta-emoji {
display: block;
margin-bottom: 10px;
font-size: 28px;
}
.cta-card h2 {
margin-bottom: 10px;
}
.cta-card p {
margin: 0;
color:
rgba(255, 255, 255, 0.7);
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding:
0 22px;
border-radius: 999px;
background:
var(--white);
color:
var(--orange);
font-weight: 800;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
padding:
40px 0 0;
background:
var(--orange);
color:
var(--white);
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 25px;
padding-bottom: 35px;
}
.footer-brand p {
margin:
8px 0 0;
color:
rgba(255, 255, 255, 0.7);
font-size: 13px;
}
.footer-contacts {
display: flex;
flex-direction: column;
gap: 5px;
}
.footer-contacts a {
font-size: 18px;
font-weight: 800;
}
.footer-contacts span {
color:
rgba(255, 255, 255, 0.7);
font-size: 13px;
}
.footer-bottom {
padding:
16px;
border-top:
1px solid
rgba(255, 255, 255, 0.15);
color:
rgba(255, 255, 255, 0.55);
font-size: 11px;
text-align: center;
}
/* ============================================================
FLOATING CART
============================================================ */
.floating-cart {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 90;
display: flex;
align-items: center;
gap: 9px;
min-height: 58px;
padding:
7px 10px 7px 8px;
border: 0;
border-radius: 999px;
background:
var(--white);
color:
var(--text);
box-shadow:
var(--shadow-large);
}
.floating-cart-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
var(--orange-light);
font-size: 19px;
}
.floating-cart-info {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.floating-cart-info strong {
font-size: 13px;
}
.floating-cart-info small {
margin-top: 3px;
color:
var(--text-secondary);
font-size: 11px;
}
.floating-cart-count {
min-width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
var(--orange);
color:
var(--white);
font-size: 11px;
font-weight: 900;
}
/* ============================================================
MODAL OVERLAY
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
/*
* Тёплый оверлей на основе брендового тёмного цвета (#241512),
* а не нейтрального чёрного — чтобы даже затемнение было "в цвете".
*/
background:
rgba(36, 21, 18, 0.48);
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}
.overlay-visible {
opacity: 1;
visibility: visible;
}
/* ============================================================
CART MODAL
============================================================ */
.cart-modal,
.checkout-modal {
position: fixed;
inset:
auto 0 0;
z-index: 210;
width: 100%;
max-height:
92vh;
overflow-y: auto;
border-radius:
24px 24px 0 0;
background:
var(--white);
box-shadow:
var(--shadow-large);
transform:
translateY(110%);
visibility: hidden;
transition:
transform 0.3s ease,
visibility 0.3s ease;
}
.cart-modal.modal-visible,
.checkout-modal.modal-visible {
transform:
translateY(0);
visibility: visible;
}
.cart-modal-header,
.checkout-modal-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding:
22px 20px;
border-bottom:
1px solid var(--border);
background:
rgba(255, 255, 255, 0.96);
backdrop-filter:
blur(10px);
}
.cart-modal-header h2,
.checkout-modal-header h2 {
margin: 0;
font-size: 28px;
line-height: 1;
}
.modal-close-button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: 0;
border-radius: 50%;
background:
#F4F4F4;
color:
var(--text);
font-size: 26px;
line-height: 1;
transition:
background var(--transition);
}
.modal-close-button:hover {
background:
#EAEAEA;
}
/* ============================================================
CART ITEMS
============================================================ */
.cart-items {
padding:
10px 20px;
}
.cart-item {
position: relative;
display: flex;
gap: 12px;
padding:
15px 0;
border-bottom:
1px solid var(--border);
}
.cart-item-image {
width: 76px;
height: 76px;
flex: 0 0 76px;
overflow: hidden;
border-radius: 12px;
background:
#FAFAFA;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cart-item-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.cart-item-main {
flex: 1;
min-width: 0;
padding-right: 22px;
}
.cart-item-main h3 {
margin-bottom: 4px;
font-size: 14px;
line-height: 1.2;
}
.cart-item-main > strong {
display: block;
margin-bottom: 10px;
font-size: 13px;
}
.cart-item-controls {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 32px;
padding:
3px 6px;
border-radius: 999px;
background:
#F5F5F5;
font-size: 13px;
font-weight: 800;
}
.quantity-button {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background:
var(--white);
color:
var(--text);
font-size: 18px;
line-height: 1;
}
.remove-cart-item {
position: absolute;
top: 12px;
right: 0;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color:
#A0A0A0;
font-size: 22px;
}
/* ============================================================
EMPTY CART
============================================================ */
.empty-cart {
padding:
45px 25px;
text-align: center;
}
.empty-cart[hidden],
.cart-summary[hidden] {
display: none;
}
.empty-cart-icon {
margin-bottom: 10px;
font-size: 48px;
}
.empty-cart h3 {
margin-bottom: 6px;
font-size: 20px;
}
.empty-cart p {
margin-bottom: 20px;
color:
var(--text-secondary);
font-size: 13px;
}
.white-button {
min-height: 44px;
padding:
0 18px;
border: 1px solid var(--border);
border-radius: 10px;
background:
var(--white);
font-weight: 800;
}
.orange-text-button {
color:
var(--orange);
}
/* ============================================================
CART SUMMARY
============================================================ */
.cart-summary {
padding:
18px 20px 25px;
border-top:
1px solid var(--border);
}
.summary-row,
.summary-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.summary-row {
margin-bottom: 10px;
color:
var(--text-secondary);
font-size: 13px;
}
.summary-row strong {
color:
var(--text);
}
.summary-total {
padding-top: 13px;
margin-top: 13px;
border-top:
1px solid var(--border);
font-size: 18px;
}
.summary-total strong {
font-size: 21px;
}
.checkout-button,
.submit-order-button {
width: 100%;
min-height: 54px;
margin-top: 18px;
border: 0;
border-radius: 13px;
background:
var(--orange);
color:
var(--white);
font-size: 15px;
font-weight: 900;
transition:
background var(--transition),
transform var(--transition);
}
.checkout-button:hover,
.submit-order-button:hover {
background:
var(--orange-dark);
}
.checkout-button:active,
.submit-order-button:active {
transform:
translateY(1px);
}
/* ============================================================
CHECKOUT FORM
============================================================ */
.checkout-form {
padding:
20px;
}
.form-group {
margin-bottom: 17px;
}
.form-group label,
.promo-group > label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 800;
}
.form-group input,
.form-group textarea,
.promo-input-row input {
width: 100%;
border:
1px solid #DFDFDF;
border-radius: 11px;
outline: none;
background:
var(--white);
color:
var(--text);
padding:
12px 13px;
transition:
border-color var(--transition),
box-shadow var(--transition);
}
.form-group input {
min-height: 46px;
}
.form-group textarea {
min-height: 80px;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.promo-input-row input:focus {
border-color:
var(--orange);
box-shadow:
0 0 0 3px
rgba(242, 71, 5, 0.1);
}
.form-row {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 12px;
}
/* ============================================================
PROMO
============================================================ */
.promo-group {
margin:
8px 0 20px;
}
.promo-input-row {
display: flex;
gap: 8px;
}
.promo-input-row input {
min-width: 0;
}
.promo-button {
flex: 0 0 auto;
min-height: 46px;
padding:
0 13px;
border: 0;
border-radius: 11px;
background:
var(--text);
color:
var(--white);
font-size: 12px;
font-weight: 800;
}
.promo-message {
display: block;
min-height: 17px;
margin-top: 5px;
font-size: 11px;
}
.promo-message.error {
color: var(--error);
}
.promo-message.success {
color: var(--success);
}
/* ============================================================
PAYMENT
============================================================ */
.payment-fieldset {
padding: 0;
margin:
0 0 20px;
border: 0;
}
.payment-fieldset legend {
margin-bottom: 9px;
font-size: 13px;
font-weight: 800;
}
.radio-card {
display: flex;
align-items: center;
gap: 10px;
padding:
12px;
margin-bottom: 8px;
border:
1px solid var(--border);
border-radius: 11px;
cursor: pointer;
}
.radio-card:has(input:checked) {
border-color:
var(--orange);
background:
var(--orange-light);
}
.radio-card input {
accent-color:
var(--orange);
}
.radio-card-content strong,
.radio-card-content small {
display: block;
}
.radio-card-content strong {
font-size: 13px;
}
.radio-card-content small {
color:
var(--text-secondary);
font-size: 11px;
}
.checkout-total {
display: flex;
align-items: center;
justify-content: space-between;
padding:
15px;
border-radius: 12px;
background:
#F7F7F7;
}
.checkout-total span {
color:
var(--text-secondary);
font-size: 13px;
}
.checkout-total strong {
font-size: 22px;
}
.form-note {
margin:
12px 0 0;
color:
var(--text-light);
font-size: 10px;
line-height: 1.4;
text-align: center;
}
/* ============================================================
TOAST
============================================================ */
.toast {
position: fixed;
left: 50%;
bottom: 90px;
z-index: 500;
max-width:
calc(100% - 32px);
padding:
12px 17px;
border-radius: 999px;
background:
var(--text);
color:
var(--white);
box-shadow:
var(--shadow-medium);
font-size: 13px;
font-weight: 700;
text-align: center;
opacity: 0;
visibility: hidden;
transform:
translate(-50%, 15px);
transition:
opacity 0.25s ease,
transform 0.25s ease,
visibility 0.25s ease;
}
.toast-visible {
opacity: 1;
visibility: visible;
transform:
translate(-50%, 0);
}
/* ============================================================
TABLET
============================================================ */
@media (min-width: 600px) {
.container {
width: min(
calc(100% - 48px),
var(--container-width)
);
}
.header-inner {
width: min(
calc(100% - 48px),
var(--container-width)
);
}
.products-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
}
.product-content {
padding: 17px;
}
.product-title {
font-size: 17px;
}
.product-description {
font-size: 13px;
}
.add-to-cart-button {
min-height: 40px;
padding:
0 13px;
font-size: 12px;
}
.delivery-card {
padding: 35px;
}
.delivery-features {
grid-template-columns:
repeat(3, 1fr);
}
.cta-card {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 35px;
}
.footer-inner {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
}
/* ============================================================
DESKTOP
============================================================ */
@media (min-width: 900px) {
:root {
--header-height: 78px;
}
.header-cart-button {
padding:
8px 15px;
}
.hero-content {
min-height: 500px;
padding:
90px 0;
}
.hero-decoration {
right: 2%;
}
.menu-section {
padding:
85px 0
100px;
}
.category-nav {
margin-left: 0;
margin-right: 0;
}
.products-grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
}
.product-card {
border-radius:
var(--radius-large);
}
.product-image {
aspect-ratio: 1 / 0.9;
}
.product-content {
padding: 18px;
}
.delivery-section {
padding:
90px 0;
}
.delivery-card {
grid-template-columns:
0.9fr 1.1fr;
align-items: stretch;
padding: 45px;
}
.delivery-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.map-container,
.map-placeholder {
min-height: 400px;
}
.cta-section {
padding:
80px 0;
}
.cart-modal,
.checkout-modal {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: min(500px, 100%);
max-height: 100vh;
border-radius: 0;
transform:
translateX(110%);
}
.cart-modal.modal-visible,
.checkout-modal.modal-visible {
transform:
translateX(0);
}
.floating-cart {
display: none;
}
.toast {
bottom: 30px;
}
}
/* ============================================================
LARGE DESKTOP
============================================================ */
@media (min-width: 1200px) {
.products-grid {
gap: 20px;
}
.product-image {
aspect-ratio: 1 / 0.85;
}
.product-content {
padding: 20px;
}
.product-title {
font-size: 18px;
}
.product-description {
font-size: 13px;
}
}
/* ============================================================
ACCESSIBILITY
============================================================ */
:focus-visible {
outline:
3px solid
rgba(242, 71, 5, 0.4);
outline-offset:
3px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration:
0.01ms !important;
animation-duration:
0.01ms !important;
animation-iteration-count:
1 !important;
}
}
/* ============================================================
VERY SMALL SCREENS
============================================================ */
@media (max-width: 370px) {
.container {
width:
calc(100% - 24px);
}
.cart-button-text {
display: none;
}
.products-grid {
gap: 9px;
}
.product-content {
padding: 12px;
}
.product-title {
font-size: 14px;
}
.product-description {
font-size: 11px;
}
.product-price {
font-size: 14px;
}
.add-to-cart-button {
padding:
0 8px;
font-size: 10px;
}
.hero-content {
min-height: 400px;
}
.hero h1 {
font-size: 39px;
}
}