/* View Transitions были отключены: root-crossfade снимал элементы с
   backdrop-filter и text-shadow в растр, на полупрозрачной фазе перехода
   они выглядели как «разорванные» светлые блоки поверх фона. Flicker
   между страницами гасим тем, что ниже: чёрный html, одинаковый video
   poster, единая версия style.css, scrollbar-gutter: stable. */

@font-face {
font-family: 'Unbounded';
src: url('../fonts/Unbounded-Regular.woff2') format('woff2'), url('../fonts/Unbounded-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Unbounded';
src: url('../fonts/Unbounded-Medium.woff2') format('woff2'), url('../fonts/Unbounded-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Unbounded';
src: url('../fonts/Unbounded-SemiBold.woff2') format('woff2'), url('../fonts/Unbounded-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Unbounded';
src: url('../fonts/Unbounded-Bold.woff2') format('woff2'), url('../fonts/Unbounded-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Unbounded';
src: url('../fonts/Unbounded-ExtraBold.woff2') format('woff2'), url('../fonts/Unbounded-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: block;
}

/* Hard FOUT gate — elements that use the pixel brand font are invisible until
   JS confirms the font is ready (see script.js / inline-scripts.js).
   Fallback timeout in JS reveals them anyway after ~1.5s. */
.title-line,
.footer-logo,
.mobile-nav-logo,
.error-brand {
    opacity: 0;
    transition: opacity 0.2s ease;
}
html.fonts-ready .title-line,
html.fonts-ready .footer-logo,
html.fonts-ready .mobile-nav-logo,
html.fonts-ready .error-brand {
    opacity: 1;
}
@font-face {
font-family: 'Puerrito Brand';
src: url('../fonts/PuerritoBrand.woff2') format('woff2'), url('../fonts/PuerritoBrand.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Codec Pro';
src: url('../fonts/CodecPro-Light.woff2') format('woff2'), url('../fonts/CodecPro-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Codec Pro';
src: url('../fonts/CodecPro-Regular.woff2') format('woff2'), url('../fonts/CodecPro-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Codec Pro';
src: url('../fonts/CodecPro-Bold.woff2') format('woff2'), url('../fonts/CodecPro-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Codec Pro';
src: url('../fonts/CodecPro-ExtraBold.woff2') format('woff2'), url('../fonts/CodecPro-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Codec Pro';
src: url('../fonts/CodecPro-Heavy.woff2') format('woff2'), url('../fonts/CodecPro-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
:root {
--color-primary: #e20505;
--color-secondary: #921616;
--color-accent: #520c0c;
--color-highlight: #ff4444;
--color-gold: #ff6b35;
--bg-dark: #000000;
--bg-medium: #111111;
--bg-light: #222222;
--bg-card: rgba(20, 20, 20, 0.95);

--text-primary: #ffffff;
--text-secondary: #eeeeee;
--text-muted: #bbbbbb;
--text-muted-contrast: #d4d4d4;
--text-accent: #ff6b35;

--gradient-primary: linear-gradient(273deg, 
    rgba(226, 5, 5, 0.9) 0%,
    rgba(146, 22, 22, 0.9) 62%,
    rgba(82, 12, 12, 0.9) 100%
);

--gradient-secondary: linear-gradient(273deg,
    rgba(255, 107, 53, 0.9) 0%,
    rgba(226, 5, 5, 0.9) 50%,
    rgba(146, 22, 22, 0.9) 100%
);

--gradient-dark: linear-gradient(135deg,
    #000000,
    #111111,
    #222222
);

/* Brand backdrop for every non-homepage view (catalog, privacy, 404):
   black base with two soft brand-color glows — red wash above-left,
   orange wash below-right. Layered radials so it reads as ambient light
   rather than a flat sweep. */
--gradient-page:
    radial-gradient(circle at 20% 0%, rgba(226, 5, 5, 0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 95%, rgba(255, 107, 53, 0.4) 0%, transparent 50%),
    #0a0303;

/* Two container shapes used across the homepage: "pill" for interactive
   controls (nav bar, CTA button), "card" for content panels (brand block,
   side nav, section panels, modals). Everything in each family shares the
   same radius so they read as one visual language instead of ad-hoc
   per-component values. */
--radius-pill: 15px;
--radius-card: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
scrollbar-gutter: stable;
}
html {
background: #000;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000000;
z-index: -1000;
pointer-events: none;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid #4a90e2 !important;
outline: -webkit-focus-ring-color auto 5px !important;
}
a {
text-decoration: none;
}
.cinematic-bars {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 5;
pointer-events: none;
}
.cinematic-bars::before,
.cinematic-bars::after {
content: '';
position: absolute;
left: 0;
width: 100%;
background: #000000;
z-index: 6;
}
/* Fixed px, not vh — the header (logo + nav, 54px tall) and footer (56px
   tall) are a constant pixel height regardless of viewport, but vh scales
   with it. On a tall screen 10vh towered way past their actual content,
   leaving a big dead black strip below/above it. Sized to hug each with a
   small fixed margin instead. */
.cinematic-bars::before {
top: 0;
height: 70px;
}
/* No extra margin here, unlike ::before — the footer (z-index: 90) already
   draws its own opaque background over this exact area, so any extra height
   here would just peek out above the footer as an unblurred seam. Match the
   footer's own height (56px) exactly so it's fully hidden behind it, same
   as catalog.html/privacy.html where this band is dropped entirely because
   the footer already covers it. */
.cinematic-bars::after {
bottom: 0;
height: 56px;
}
.video-placeholder {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
background: linear-gradient(273deg,
rgba(226, 5, 5, 0.9) 0%,
rgba(146, 22, 22, 0.9) 62%,
rgba(82, 12, 12, 0.9) 100%
);
display: block;
}
#video-bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
object-fit: cover;
background: #000000;
filter: brightness(0.7) contrast(1.2) sepia(0.1);
display: block;
pointer-events: none;
}
.header-logo {
position: fixed;
top: 0;
left: 0;
right: 0;
max-width: 1700px;
margin: 0 auto;
padding: 10px 20px 0;
z-index: 101;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
text-decoration: none;
font-family: 'Unbounded', 'Arial Black', Arial, sans-serif;
}
.header-logo > * {
pointer-events: auto;
}
.header-logo-img {
height: 44px;
width: auto;
display: block;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
transition: transform 0.25s ease;
}
.header-logo:hover .header-logo-img {
transform: translateY(-2px);
}
.header-logo-text {
font-size: 18px;
color: var(--color-primary);
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.header-logo:hover .header-logo-text {
transform: translateY(-2px);
opacity: 0.9;
}
.nav-panel {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 42px;
z-index: 100;
}
.nav-panel:has(.nav-catalog) {
width: 300px;
}
.nav-panel:has(.nav-journal) {
width: 400px;
}
.nav-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--bg-card);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
padding: 0;
font: inherit;
font-weight: 600;
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
position: relative;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
}
.nav-item:hover {
color: var(--text-primary);
background: rgba(226, 5, 5, 0.1);
}
.nav-item.active {
color: var(--text-primary);
background: var(--gradient-primary);
}
.nav-item::after {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 3px;
background: var(--gradient-secondary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-item:hover::after {
transform: scaleX(1);
}
.side-nav {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 14px;
z-index: 100;
background: var(--bg-card);
padding: 16px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.nav-dot {
width: 12px;
height: 12px;
border: none;
padding: 0;
font: inherit;
border-radius: 50%;
background: var(--bg-light);
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease;
position: relative;
}
.nav-dot::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 2px solid transparent;
transition: border-color 0.25s ease;
}
.nav-dot.active {
background: var(--gradient-primary);
transform: scale(1.2);
}
.nav-dot.active::after {
border-color: var(--color-accent);
}
.nav-dot:hover {
background: var(--color-accent);
}
.content-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.content-wrapper::-webkit-scrollbar {
display: none;
}
.content {
position: relative;
width: 100%;
/* Fallback when JS hasn't run yet — script.js sets inline height from actual section count. */
height: calc(var(--section-count, 3) * 100vh);
}
.section {
position: relative;
height: 100vh;
width: 100vw;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;
text-align: center;
}
.main-content {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.main-content > .tea-text { order: 1; }
.main-content > .order-button { order: 3; }
.tea-text {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
.text-block {
display: flex;
flex-direction: column;
gap: 50px;
}
.main-title {
display: flex;
flex-direction: column;
gap: 25px;
}
.title-line {
font-family: 'Unbounded', 'Arial Black', Arial, sans-serif;
font-size: clamp(56px, 7.5vw, 92px);
font-weight: 500;
line-height: 0.94;
letter-spacing: -0.025em;
text-transform: uppercase;
text-align: left;
color: var(--text-primary);
}
.title-line-2 {
display: block;
margin-top: 10px;
}
.hero-subtitle {
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
color: var(--text-secondary);
opacity: 0.85;
}
.order-button {
background: var(--gradient-primary);
border: none;
border-radius: var(--radius-pill);
width: 320px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
cursor: pointer;
transition: transform 0.25s ease;
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
position: relative;
overflow: hidden;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-decoration: none;
align-self: center;
}
.order-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--gradient-secondary);
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.order-button:hover::before {
left: 0;
}
.order-button span,
.order-button .arrow-icon {
position: relative;
z-index: 2;
}
.order-button:hover {
transform: translateY(-3px);
}
.order-button:hover .arrow-icon {
transform: translateX(10px);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.secondary-btn {
background: var(--bg-card);
border: 1px solid var(--color-accent);
margin-top: 40px;
}
.secondary-btn:hover {
background: var(--gradient-primary);
border-color: transparent;
}
.section-content {
background: var(--bg-card);
padding: 50px;
border-radius: var(--radius-card);
max-width: 1000px;
width: 90%;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
}
#about-content,
#contacts-content {
max-width: 1000px;
width: 90%;
box-sizing: border-box;
padding: 40px 50px;
min-height: 460px;
}
@media (min-width: 769px) {
#about-content,
#contacts-content {
display: flex;
flex-direction: column;
align-items: center;
min-height: 460px;
height: auto;
overflow: visible;
}
#about-content .order-button.secondary-btn,
#contacts-content .order-button.secondary-btn {
    flex-shrink: 0;
    width: 320px;
    height: 70px;
    font-size: 24px;
    margin-top: 40px;
}

#contacts-content {
    padding: 28px 40px;
}

.contacts-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contacts-content .order-button.secondary-btn {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#contacts-content h2 {
    font-size: 34px;
    margin-bottom: 14px;
}

#contacts-content .contacts-grid {
    gap: 12px 20px;
    margin-bottom: 10px;
}

#contacts-content .contact-card {
    padding: 8px;
}

#contacts-content .contact-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-bottom: 6px;
}

#contacts-content .contact-content h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

#contacts-content .contact-list {
    margin: 0 0 6px 0;
}

#contacts-content .contact-list li {
    font-size: 15px;
    margin-bottom: 2px;
    padding: 1px 0;
}

#contacts-content .contact-link a {
    font-size: 16px;
}

#contacts-content .contact-note {
    font-size: 14px;
    margin-top: 2px;
}

#contacts-content .marketplace-links {
    gap: 6px;
    margin-top: 6px;
}

#contacts-content .marketplace-item {
    height: 36px;
    padding: 8px 14px;
    font-size: 15px;
}

#contacts-content .work-days {
    font-size: 15px;
}

#contacts-content .work-time {
    font-size: 16px;
}
}
#about-content h2,
#contacts-content h2 {
font-size: 42px;
margin-bottom: 24px;
font-weight: 700;
color: var(--text-primary);
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
width: 100%;
}
#about-content p,
#contacts-content p {
font-size: 22px;
margin-bottom: 20px;
font-weight: 300;
line-height: 1.6;
color: var(--text-secondary);
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
width: 100%;
}
#about-content p:first-of-type,
#contacts-content p:first-of-type {
color: var(--text-primary);
font-weight: 400;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px 32px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
.about-grid .about-block {
width: 100%;
min-width: 0;
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#contacts-content h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#contacts-content .about-block h3 {
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.about-block-accent {
width: 40px;
height: 4px;
background: var(--gradient-secondary);
border-radius: 2px;
margin: 8px auto 14px;
display: block;
}
#about-content .about-block h3,
#about-content .about-block p {
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
}
#about-content .about-block p {
margin-bottom: 0;
color: var(--text-secondary);
}
.contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px 24px !important;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 5px !important;
}
.contact-card {
background: var(--bg-medium);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px !important;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.contact-card:hover {
transform: translateY(-5px);
border-color: var(--color-accent);
box-shadow: 0 10px 20px rgba(226, 5, 5, 0.1);
}
.contact-icon {
font-size: 20px !important;
margin-bottom: 8px !important;
width: 38px !important;
height: 38px !important;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-primary);
border-radius: 50%;
}
.contact-content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-content h3 {
font-size: 17px !important;
margin-bottom: 6px !important;
color: var(--text-primary);
font-weight: 600;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
width: 100%;
}
.contact-list {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
text-align: center;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
width: 100%;
}
.contact-list li {
margin-bottom: 4px !important;
color: var(--text-secondary);
font-size: 15px !important;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 2px 0 !important;
width: 100%;
}
.delivery-item {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
text-align: center;
}
.delivery-city {
font-weight: 600;
color: var(--text-primary);
text-align: center;
}
.delivery-details {
color: var(--text-secondary);
text-align: center;
}
.contact-list li::before {
content: '•';
color: var(--color-accent);
margin-right: 0.4em;
flex-shrink: 0;
}
.contact-list li strong {
color: var(--text-primary);
font-weight: 600;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
}
.contact-link {
margin: 15px 0;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
}
.contact-link a {
color: var(--text-accent);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
word-break: break-all;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
}
.contact-link a:hover {
color: var(--color-highlight);
text-decoration: underline;
}
.marketplace-links {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
width: 100%;
align-items: center;
}
.marketplace-item {
background: rgba(255, 255, 255, 0.05);
padding: 8px 14px !important;
border-radius: 6px;
color: var(--text-secondary);
font-size: 15px !important;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
min-width: 100px;
display: flex;
align-items: center;
justify-content: center;
height: 36px !important;
}
.marketplace-item:hover {
background: rgba(226, 5, 5, 0.1);
color: var(--text-primary);
transform: translateY(-2px);
}
.work-hours {
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
width: 100%;
}
.work-days {
color: var(--text-primary);
font-weight: 600;
font-size: 15px !important;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
}
.work-time {
color: var(--text-accent);
font-size: 16px !important;
font-weight: 700;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
}
.contact-note {
margin-top: 4px !important;
color: var(--text-muted-contrast);
font-size: 14px !important;
font-style: italic;
line-height: 1.4;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
text-align: center;
width: 100%;
}
.contact-info {
margin-top: 10px;
width: 100%;
display: flex;
justify-content: center;
}
.site-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
padding: 10px 0;
z-index: 90;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.footer-left, .footer-center, .footer-right {
flex: 1;
}
.footer-left {
font-family: 'Puerrito Brand', 'Arial Black', Arial, sans-serif;
text-align: left;
font-size: 12px;
color: var(--text-secondary);
}
.footer-center {
text-align: center;
}
.footer-logo {
font-family: 'Puerrito Brand', 'Arial Black', Arial, sans-serif;
font-size: 16px;
color: var(--color-primary);
font-weight: bold;
letter-spacing: 1px;
}
.footer-right {
text-align: right;
font-size: 12px;
color: var(--text-secondary);
}
.footer-divider {
margin: 0 10px;
color: var(--color-accent);
}
.footer-divider:last-child {
display: none;
}
.footer-social {
margin-top: 4px;
display: flex;
justify-content: center;
gap: 12px;
}
.footer-social a {
color: var(--text-secondary);
font-size: 15px;
transition: color 0.3s ease;
display: inline-flex;
align-items: center;
}
.footer-social .svg-icon {
width: 16px;
height: 16px;
}
.svg-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
flex-shrink: 0;
}
.footer-social a:hover {
color: var(--color-primary);
}
.mobile-nav-container {
display: none;
}
@media (max-width: 768px) {
html {
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 100% !important;
width: 100% !important;
position: relative !important;
-webkit-overflow-scrolling: touch !important;
}
body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    position: relative !important;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch !important;
}

body.mobile-mode {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

body::before {
    position: fixed !important;
     top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
    z-index: -1000 !important;
}

.nav-panel {
    display: none !important;
}

.side-nav {
    display: none !important;
}

#video-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
    filter: brightness(0.6) contrast(1.1) !important;
    background: #000000 !important;
}

.video-placeholder {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -2 !important;
}

.cinematic-bars::before,
.cinematic-bars::after {
    height: 5vh !important;
}

.content-wrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    z-index: 1 !important;
}

.content {
    position: relative !important;
    transform: none !important;
    transition: none !important;
    height: auto !important; 
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
}

.section {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 70px) !important;
    scroll-snap-align: none !important;
    height: auto !important;
    padding: 90px 15px 50px !important;
    display: flex !important;
     flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    scroll-margin-top: 70px !important;
}

#main {
    padding-top: 140px !important;
    /* auto, not calc(100vh + Npx) — mobile sections aren't scroll-snapped
       full screens (scroll-snap is disabled on mobile, see .section above),
       just stacked blocks with margins between them. Forcing this section
       taller than the viewport made justify-content:center spread its
       (much shorter) content out with big dead gaps above/below — this lets
       it hug its own content + padding instead. */
    min-height: auto !important;
}

.main-content {
    max-width: 100% !important;
    padding: 0 15px !important;
    gap: 15px !important;
    margin-top: 0 !important;
    padding-bottom: 30px !important;
}

.tea-text {
    gap: 15px !important;
    width: 100% !important;
}

.text-block {
    gap: 15px !important;
    width: 100% !important;
}

.main-title {
    gap: 15px !important;
    width: 100% !important;
}

.title-line {
    font-size: 44px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.02em !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 10px !important;
}

.title-line-2 {
    margin-top: 15px !important;
}

.hero-subtitle {
    font-size: 15px !important;
    letter-spacing: 1.5px !important;
    text-align: left !important;
    width: 100% !important;
}

.order-button {
    width: 280px !important;
    height: 60px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.section-content {
    padding: 25px 20px !important;
    width: 95% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    border-radius: var(--radius-card) !important;
    min-height: 0 !important;
}

#contacts-content {
    display: block !important;
    overflow: visible !important;
    padding: 25px 20px !important;
}

.contacts-inner {
    transform: none !important;
}

#contacts-content .order-button.secondary-btn {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

#about-content h2,
#contacts-content h2 {
    font-size: 32px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
}

#about-content p,
#contacts-content p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    width: 100% !important;
}

.about-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 20px !important;
}

.about-grid .about-block:nth-child(1) { order: 1; }
.about-grid .about-block:nth-child(2) { order: 3; }
.about-grid .about-block:nth-child(3) { order: 2; }
.about-grid .about-block:nth-child(4) { order: 4; }

#about-content .about-block h3 {
    font-size: 18px !important;
    color: var(--text-primary) !important;
}

.about-block {
    margin-bottom: 22px !important;
}

.about-block-accent {
    width: 40px !important;
    height: 4px !important;
    background: var(--gradient-secondary) !important;
    margin: 6px auto 10px !important;
    display: block !important;
}

#about-content .about-block p {
    color: var(--text-secondary) !important;
    margin-bottom: 0 !important;
}

.contacts-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 16px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.contact-card {
    padding: 12px !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.contact-content h3 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
     width: 100% !important;
    color: var(--text-primary) !important;
}

.contact-list {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
     flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px !important;
}

.contact-list li {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    padding: 5px 0 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    color: var(--text-secondary) !important;
}

.delivery-item {
     display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    text-align: center !important;
}

.delivery-city {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-align: center !important;
}

.delivery-details {
    color: var(--text-secondary) !important;
    text-align: center !important;
}

.contact-list li::before {
    content: '•' !important;
    color: var(--color-accent) !important;
    margin-right: 0.4em !important;
    flex-shrink: 0 !important;
}

.contact-link {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 10px 0 !important;
}

.contact-link a {
    font-size: 14px !important;
    text-align: center !important;
    display: inline-block !important;
    word-break: break-word !important;
    color: var(--text-accent) !important;
}

.contact-note {
    font-size: 13px !important;
    margin-top: 8px !important;
    text-align: center !important;
    width: 100% !important;
    color: var(--text-muted-contrast) !important;
}

.marketplace-links {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
     margin-top: 10px !important;
}

.marketplace-item {
    padding: 8px 12px !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 80% !important;
    max-width: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    margin: 0 auto !important;
    color: var(--text-secondary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.work-hours {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.work-days {
    font-size: 13px !important;
    text-align: center !important;
    color: var(--text-primary) !important;
}

.work-time {
    font-size: 14px !important;
    text-align: center !important;
    color: var(--text-accent) !important;
}

.site-footer {
    position: relative !important;
    padding: 14px 15px !important;
    margin-top: 28px !important;
    width: 100% !important;
}

.footer-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
}

.footer-left,
.footer-center,
.footer-right {
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
}

.footer-left {
    font-size: 11px !important;
    order: 3 !important;
    color: var(--text-secondary) !important;
}

.footer-center {
    order: 1 !important;
}

.footer-logo {
    font-size: 15px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    color: var(--color-primary) !important;
}

.footer-social {
    margin-top: 6px !important;
    justify-content: center !important;
    width: 100% !important;
}

.footer-social a {
    font-size: 16px !important;
    margin: 0 8px !important;
    color: var(--text-secondary) !important;
}

.footer-right {
    font-size: 11px !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    color: var(--text-secondary) !important;
}

.footer-divider {
    display: none !important;
}

.secondary-btn {
    margin-top: 25px !important;
}

button,
a.order-button,
.contact-card,
.marketplace-item {
    min-height: 44px !important;
    min-width: 44px !important;
    cursor: pointer !important;
}

.mobile-nav-container {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
    justify-content: space-between;
    height: 58px;
}

.mobile-nav-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-nav-logo {
    font-family: 'Puerrito Brand', 'Arial Black', Arial, sans-serif;
    font-size: 16px;
    color: var(--color-primary);
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.mobile-nav-menu {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* A 4th button (Журнал) needs a tighter fit than the 3-button pages —
   otherwise the row overflows the same way the comment below warns about. */
.mobile-nav-menu:has(.mobile-nav-btn:nth-child(4)) {
    gap: 5px;
}

.mobile-nav-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 6px !important;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Codec Pro', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 64px;
    height: 46px;
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
    line-height: 1 !important;
}

.mobile-nav-btn i,
.mobile-nav-btn svg,
.mobile-nav-btn .icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.mobile-nav-btn span {
    display: block !important;
    text-align: center !important;
    font-size: 12px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    width: 100%;
}

.mobile-nav-btn.active,
.mobile-nav-btn:active {
    background: var(--gradient-primary);
    color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
    .mobile-nav-btn:hover {
        background: rgba(226, 5, 5, 0.1);
        color: var(--text-primary);
    }
}

.mobile-order-btn {
    background: var(--gradient-primary);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 11px;
    font-family: 'Codec Pro', sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: all 0.3s ease;
    height: 34px;
}

.mobile-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(226, 5, 5, 0.3);
}

.mobile-order-btn i,
.mobile-order-btn .svg-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

@media (max-width: 480px) {
    .mobile-nav-container {
        padding: 6px 10px;
        height: 52px;
    }

    /* Logo + 3 nav buttons + order button were a few px wider than the
       viewport at this breakpoint, pushing the order button's right edge
       past the screen edge — tighten the gap and a couple of the widest
       contributors to bring the total back under the available width. */
    .mobile-nav-content {
        gap: 6px;
    }

    .mobile-nav-logo {
        font-size: 14px;
    }

    .mobile-nav-btn {
        padding: 0 4px !important;
        min-width: 54px;
        height: 44px;
    }

    .mobile-nav-menu:has(.mobile-nav-btn:nth-child(4)) .mobile-nav-btn {
        min-width: 47px;
        padding: 0 2px !important;
    }

    .mobile-nav-btn i,
    .mobile-nav-btn svg,
    .mobile-nav-btn .icon {
        font-size: 16px;
    }

    .mobile-nav-btn span {
        font-size: 11px;
    }

    .mobile-order-btn {
        padding: 5px 7px;
        font-size: 10px;
        height: 30px;
    }
}

@media (max-width: 360px) {
    .mobile-nav-content {
        gap: 4px;
    }

    .mobile-nav-logo {
        font-size: 13px;
    }

    .mobile-nav-btn {
        padding: 0 2px !important;
        min-width: 44px;
        height: 40px;
    }

    .mobile-nav-menu:has(.mobile-nav-btn:nth-child(4)) .mobile-nav-btn {
        min-width: 38px;
    }

    .mobile-order-btn {
        padding: 4px 4px;
        font-size: 9px;
    }

    .mobile-nav-btn i,
    .mobile-nav-btn svg,
    .mobile-nav-btn .icon {
        font-size: 14px;
    }

    .mobile-nav-btn span {
        font-size: 10px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .order-button:hover,
    .contact-card:hover,
    .marketplace-item:hover {
        transform: none !important;
    }

    .order-button::before {
        display: none !important;
    }
}
}
@media (max-width: 480px) {
.section {
padding: 80px 12px 40px !important;
}
#main {
    padding-top: 130px !important;
    min-height: auto !important;
}

.title-line {
    font-size: 34px !important;
}

.hero-subtitle {
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
}

.section-content {
    padding: 20px 15px !important;
}

#about-content h2,
#contacts-content h2 {
    font-size: 28px !important;
}

#about-content p,
#contacts-content p {
    font-size: 15px !important;
}

#about-content .about-block h3 {
    font-size: 16px !important;
    color: var(--text-primary) !important;
}

.about-block {
    margin-bottom: 20px !important;
}

.about-block-accent {
    width: 35px !important;
    height: 3px !important;
    margin: 5px auto 8px !important;
}

.contacts-grid {
    gap: 16px !important;
}

.contact-card {
    padding: 12px !important;
}

.contact-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
}

.contact-content h3 {
    font-size: 14px !important;
}

.contact-list li {
    font-size: 14px !important;
}

.marketplace-item {
    padding: 6px 10px !important;
    font-size: 11px !important;
    height: 34px !important;
    width: 85% !important;
}

.site-footer {
    padding: 15px 12px !important;
}

.contact-list li::before {
    margin-right: 0.35em !important;
}
}
@media (max-width: 360px) {
.title-line {
font-size: 30px !important;
}
.hero-subtitle {
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

.section-content {
    padding: 18px 12px !important;
}

#about-content h2,
#contacts-content h2 {
    font-size: 24px !important;
}

#about-content p,
#contacts-content p {
    font-size: 14px !important;
}

#about-content .about-block h3 {
    font-size: 15px !important;
    color: var(--text-primary) !important;
}

.about-block-accent {
    width: 30px !important;
    height: 3px !important;
}

.contact-list li {
    font-size: 13px !important;
}

.marketplace-item {
    font-size: 11px !important;
    padding: 7px 10px !important;
    height: 36px !important;
}
}
@media (max-height: 700px) and (max-width: 768px) {
.section {
min-height: auto !important;
padding: 80px 15px 40px !important;
}
#main {
    padding-top: 130px !important;
    min-height: calc(100vh - 50px) !important;
}

.main-content {
    gap: 15px !important;
    padding-bottom: 20px !important;
}

.tea-text {
    gap: 15px !important;
}
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 768px) {
.section {
min-height: auto !important;
padding: 70px 15px 30px !important;
}
#main {
    padding-top: 110px !important;
    min-height: calc(100vh - 40px) !important;
}

.title-line {
    font-size: 28px !important;
}

.section-content {
    padding: 20px !important;
}

.marketplace-item {
    padding: 6px 10px !important;
    height: 35px !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg-card: rgba(10, 10, 10, 0.95);
--bg-medium: #0a0a0a;
}
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
#main .main-content {
animation: fadeInUp 0.5s ease forwards;
}
.section-content,
#about-content,
#contacts-content {
animation: none;
}
#about-content p,
#contacts-content p,
.contact-list li,
.contact-note,
.hero-subtitle {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
@supports (-webkit-touch-callout: none) {
.section {
min-height: -webkit-fill-available !important;
}
.content-wrapper {
    min-height: -webkit-fill-available !important;
}

.order-button,
.secondary-btn {
    cursor: pointer !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.hidden {
display: none !important;
}

/* Footer links as buttons */
.footer-link {
background: transparent;
border: none;
padding: 0;
font: inherit;
color: var(--text-secondary);
text-decoration: none;
cursor: pointer;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
transition: color 0.25s ease;
}
.footer-link:hover {
color: var(--color-primary);
text-decoration: underline;
}
.footer-link-btn {
font-size: inherit;
}

/* Feedback modal */
.feedback-modal {
position: fixed;
inset: 0;
z-index: 2500;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.feedback-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
}
.feedback-modal-content {
position: relative;
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-card);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
color: var(--text-primary);
animation: fadeInUp 0.3s ease;
}
.feedback-modal-body {
padding: 56px 32px 24px;
}
@keyframes sheetUp {
from { transform: translateY(48px); opacity: 0.4; }
to { transform: translateY(0); opacity: 1; }
}
.tea-modal-grip {
display: none;
position: sticky;
top: 0;
z-index: 5;
justify-content: center;
padding: 10px 0 6px;
margin-bottom: -20px;
pointer-events: none;
}
.tea-modal-grip::before {
content: '';
width: 44px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@media (max-width: 744px) {
.feedback-modal { align-items: flex-end; padding: 12px; }
.feedback-modal-content {
    max-height: 90vh;
    max-height: 90dvh;
    animation: sheetUp 0.3s ease;
    touch-action: pan-y;
}
.tea-modal-grip { display: flex; }
}
.feedback-modal-close {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
background: rgba(0, 0, 0, 0.45);
border: none;
color: var(--text-primary);
font-size: 22px;
line-height: 1;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.feedback-modal-close:hover {
background: rgba(226, 5, 5, 0.55);
}
.feedback-modal-back {
position: absolute;
top: 12px;
left: 14px;
z-index: 2;
background: rgba(0, 0, 0, 0.45);
border: none;
color: var(--text-primary);
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: translateZ(0);
transition: background 0.2s ease;
}
.feedback-modal-back svg {
width: 19px;
height: 19px;
}
.feedback-modal-back:hover {
background: rgba(226, 5, 5, 0.55);
}
.feedback-modal-content h4 {
font-size: 20px;
margin: 10px 0 6px;
}
.feedback-lead {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 18px;
line-height: 1.5;
}
.feedback-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.feedback-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--text-secondary);
}
.feedback-field input,
.feedback-field textarea {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 10px 12px;
color: var(--text-primary);
font: inherit;
font-size: 15px;
transition: border-color 0.2s ease, background 0.2s ease;
resize: vertical;
}
.feedback-field input:focus,
.feedback-field textarea:focus {
border-color: var(--color-primary);
background: rgba(0, 0, 0, 0.5);
outline: none;
}
.feedback-field textarea {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.feedback-field textarea::-webkit-scrollbar {
width: 9px;
}
.feedback-field textarea::-webkit-scrollbar-track {
background: transparent;
margin-block: 8px;
}
.feedback-field textarea::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.22);
border-radius: 8px;
border: 2.5px solid #0a0a0a;
background-clip: padding-box;
}
.feedback-field textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.38);
}
.feedback-recaptcha {
display: flex;
justify-content: center;
}
.feedback-consent {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.45;
cursor: pointer;
}
.feedback-consent input {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
position: relative;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 5px;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.feedback-consent input:hover {
border-color: rgba(255, 255, 255, 0.3);
}
.feedback-consent input:checked {
background: var(--gradient-primary);
box-shadow: 0 0 0 1px var(--color-primary) inset;
}
.feedback-consent input:checked::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 9px;
border: solid var(--text-primary);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.feedback-consent input:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}
.feedback-consent a {
color: var(--color-gold);
text-decoration: none;
}
.feedback-consent a:hover {
text-decoration: underline;
}
/* Honeypot — visually hidden but still a real, focusable-by-default form
   field in the DOM, so naive bots/scrapers that auto-fill every <input>
   they find still catch it. position:absolute off-screen (not
   display:none) deliberately, since some bots skip display:none fields. */
.feedback-honey {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.feedback-error {
background: rgba(226, 5, 5, 0.15);
border: 1px solid rgba(226, 5, 5, 0.4);
color: #ffcccc;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
}
.feedback-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.feedback-submit {
background: var(--gradient-primary);
border: none;
border-radius: 12px;
color: var(--text-primary);
font: inherit;
font-weight: 600;
font-size: 16px;
padding: 12px 28px;
width: 100%;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
}
.feedback-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(226, 5, 5, 0.35);
}
.feedback-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.feedback-tg {
color: var(--text-secondary);
font-size: 13px;
text-decoration: none;
}
.feedback-tg:hover {
color: var(--color-gold);
text-decoration: underline;
}
.feedback-success {
text-align: center;
padding: 10px 0;
}
.feedback-success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--gradient-primary);
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.feedback-success p {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}
.feedback-fallback-note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 12px !important;
color: var(--text-muted-contrast) !important;
}
.feedback-fallback-note a {
color: var(--color-gold);
text-decoration: none;
}
.feedback-fallback-note a:hover {
text-decoration: underline;
}

/* Cookie banner */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1500;
background: rgba(0, 0, 0, 0.92);
border-top: 1px solid rgba(226, 5, 5, 0.35);
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
backdrop-filter: blur(10px);
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
animation: fadeInUp 0.4s ease;
}
.cookie-text {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
max-width: 800px;
}
.cookie-text a {
color: var(--color-gold);
text-decoration: underline;
}
.cookie-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.cookie-accept,
.cookie-decline {
background: var(--gradient-primary);
border: none;
color: var(--text-primary);
padding: 10px 22px;
border-radius: 10px;
font: inherit;
font-weight: 600;
font-size: 14px;
cursor: pointer;
font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cookie-accept:hover {
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(226, 5, 5, 0.3);
}
.cookie-decline {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--text-secondary);
}
.cookie-decline:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}

@media (max-width: 768px) {
.header-logo {
    display: none !important;
}
.cookie-banner {
    flex-direction: column;
    padding: 14px 18px;
    gap: 10px;
}
.cookie-text {
    font-size: 13px;
    text-align: center;
}
.cookie-actions {
    width: 100%;
    justify-content: center;
}
.feedback-modal-content {
    max-height: calc(100vh - 30px);
}
.feedback-modal-body {
    padding: 62px 20px 20px;
}
}
#about-content .about-block h3,
#about-content .about-block p,
.about-block-accent {
visibility: visible !important;
opacity: 1 !important;
display: block !important;
}
#about-content .about-block h3 {
color: #ffffff !important;
}
.about-block-accent {
background: linear-gradient(273deg,
rgba(255, 107, 53, 0.9) 0%,
rgba(226, 5, 5, 0.9) 50%,
rgba(146, 22, 22, 0.9) 100%
) !important;
}

/* ==========================================================================
   Contacts v2 — redesigned staggered layout with background image.
   Scoped to .contacts-v2 so older .contacts-grid/.contact-card rules above
   don't leak in. When #contacts-content also has .contacts-v2 (see
   index.html), these rules override the earlier padding/min-height on
   #contacts-content specifically.
   ========================================================================== */
/* No wrapper card, no backdrop-filter, no background image — just the
   plain section with the 3 blocks below sitting on the page's own
   background. Background image (once the user sends one) goes on
   .contacts-v2-inner or directly on the blocks later, not on a boxed
   outer container. */
#contacts-content.contacts-v2 {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}
/* Compact on purpose — this section lives inside a 100vh scroll-snap slot
   (see .section) with no internal scroll, so total height has to clear
   comfortably under one screen at common desktop viewport heights. Every
   size below is smaller than the "About" section's equivalent on purpose:
   About sets the budget this section has to fit in. */
.contacts-v2 .contacts-v2-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 20px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contacts-v2 .contacts-v2-inner > h2 {
    text-align: center;
    margin-bottom: 10px !important;
    color: var(--text-primary) !important;
}
.contacts-v2 .contacts-v2-lead {
    max-width: 560px;
    text-align: center;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    margin: 0 auto 22px !important;
}
.contacts-v2 .contacts-v2-blocks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 860px;
    margin-bottom: 16px;
}
.contacts-v2 .contacts-v2-block {
    background: rgba(15, 15, 15, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 16px 24px;
    max-width: 560px;
    align-self: flex-start;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.contacts-v2 .contacts-v2-block:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 107, 53, 0.4);
}
/* The stagger — alternating blocks anchor to opposite edges of the wrap so
   they descend as a lesenka (staircase), matching the reference. The shift
   comes from margin auto on opposite sides rather than translateX so it
   stays inside the container without overflow. */
.contacts-v2 .contacts-v2-block--left {
    margin-right: auto;
    margin-left: 0;
}
.contacts-v2 .contacts-v2-block--right {
    margin-left: auto;
    margin-right: 0;
}
#contacts-content.contacts-v2 .contacts-v2-block-body {
    min-width: 0;
}
/* Reading direction follows which edge the card leans toward — a
   left-anchored card reads left-to-right from its own left edge, a
   right-anchored one mirrors that from its right edge, so the text always
   "grows" away from the edge the card is pinned to. */
.contacts-v2 .contacts-v2-block--left .contacts-v2-block-body,
.contacts-v2 .contacts-v2-block--left .contacts-v2-block-body h3,
.contacts-v2 .contacts-v2-block--left .contacts-v2-block-body p {
    text-align: left !important;
}
.contacts-v2 .contacts-v2-block--right .contacts-v2-block-body,
.contacts-v2 .contacts-v2-block--right .contacts-v2-block-body h3,
.contacts-v2 .contacts-v2-block--right .contacts-v2-block-body p {
    text-align: right !important;
}
/* Brand display font, same treatment as .footer-logo elsewhere on the
   page — bold, uppercase, tracked-out letterforms. Sized up noticeably
   from the old 19px Sofia Sans title. */
#contacts-content.contacts-v2 .contacts-v2-block-body h3 {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
    font-family: 'Unbounded', 'Arial Black', Arial, sans-serif !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
#contacts-content.contacts-v2 .contacts-v2-block-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif !important;
    margin: 0 !important;
}
#contacts-content.contacts-v2 .contacts-v2-block-body strong {
    color: var(--text-primary) !important;
    font-weight: 600;
}
#contacts-content.contacts-v2 .contacts-v2-block-body a {
    color: var(--color-gold);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
#contacts-content.contacts-v2 .contacts-v2-block-body a:hover { text-decoration: underline; }

.contacts-v2 .order-button.secondary-btn {
    align-self: center;
    margin: 4px auto 0 !important;
}

@media (max-width: 900px) {
    .contacts-v2 .contacts-v2-block { max-width: 100%; align-self: stretch; }
    .contacts-v2 .contacts-v2-block--left,
    .contacts-v2 .contacts-v2-block--right {
        margin-left: 0;
        margin-right: 0;
    }
    /* No room to stagger at full width — keep the reading direction
       consistent (left) instead of right-aligning text against the left
       screen edge, which would read as a mistake rather than a layout. */
    .contacts-v2 .contacts-v2-block--right .contacts-v2-block-body,
    .contacts-v2 .contacts-v2-block--right .contacts-v2-block-body h3,
    .contacts-v2 .contacts-v2-block--right .contacts-v2-block-body p {
        text-align: left !important;
    }
}
@media (max-width: 640px) {
    .contacts-v2 .contacts-v2-inner { padding: 16px 20px 0; }
    .contacts-v2 .contacts-v2-block { padding: 14px 18px; }
    #contacts-content.contacts-v2 .contacts-v2-block-body h3 { font-size: 21px !important; }
}

/* ==========================================================================
   "Перейти в каталог" v2 — replaces the old big red pill (.secondary-btn)
   with a button that matches the new card aesthetic introduced in the
   Contacts redesign: dark translucent fill, thin border, brand display
   font in caps, same hover lift + accent-orange border used on the
   .contacts-v2-block cards. Used on the hero, About and Contacts CTAs.
   ========================================================================== */
.order-button.v2-btn {
    width: auto !important;
    height: 52px !important;
    padding: 0 32px;
    gap: 12px;
    background: rgba(15, 15, 15, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: 'Unbounded', 'Arial Black', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 16px !important;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.order-button.v2-btn::before { display: none; }
.order-button.v2-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 107, 53, 0.5) !important;
    background: rgba(226, 5, 5, 0.14) !important;
}
.order-button.v2-btn .arrow-icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
    .order-button.v2-btn { height: 46px !important; padding: 0 24px; font-size: 14px !important; }
}
#main .order-button.v2-btn {
    align-self: flex-start;
}

/* ==========================================================================
   About v2 — only borrows the Contacts section's compact single-screen
   rhythm (padding scale, transparent card shell). Content is a swipeable
   photo slider: real product shots as full-bleed slide backgrounds, tea
   name + province/harvest badge overlaid — a different visual language
   from the Contacts blocks on purpose (photography, not text cards).
   ========================================================================== */
#about-content.about-v2 {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}
.about-v2 .about-v2-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-v2 .about-v2-inner > h2 {
    margin: 0 0 14px !important;
    font-size: 28px;
    color: var(--text-primary) !important;
    text-align: center;
}

/* --- Photo cards --- */
.about-grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.about-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
    padding: 22px;
    border-radius: var(--radius-card);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 20%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.95) 80%, rgba(0, 0, 0, 1) 100%), var(--card-photo);
    background-size: cover;
    background-position: center;
    background-color: #111;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
    text-decoration: none;
    text-align: left;
}
.about-card > * {
    position: relative;
    z-index: 1;
}
.about-card-eyebrow {
    display: block;
    font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left !important;
    margin-bottom: 8px;
}
.about-card-title {
    margin: 0 0 10px;
    font-family: 'Unbounded', 'Arial Black', Arial, sans-serif;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left !important;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
#about-content .about-card-text {
    margin: 0 0 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    text-align: left !important;
    width: auto !important;
    color: rgba(255, 255, 255, 0.82) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.about-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.about-card-link:hover {
    color: var(--color-gold);
    gap: 10px;
}

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 640px) {
    .about-v2 .about-v2-inner { padding: 16px 16px 0; }
    .about-card { min-height: 340px; padding: 22px; }
    .about-card-title { font-size: clamp(22px, 7vw, 28px); }
    #about-content .about-card-text { font-size: 14px !important; }
}