/* MissFresh Promo Page — styles.css */
/* Палитра: #FFFBF5 (фон), #4C8C64 (акцент), #1A1A2E (текст), #D4A855 (золотой) */

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #FFFBF5;
    color: #1A1A2E;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    word-wrap: break-word;
}

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

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

/* === LOGO === */
.logo { display: block; margin: 0 auto; }

/* === SECTIONS === */
.section {
    padding: 2.5rem 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section__title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #1A1A2E;
}

.section__desc {
    font-size: 0.95rem;
    text-align: center;
    color: #555;
    margin-bottom: 1.5rem;
}

.section__header {
    margin-bottom: 2rem;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.3;
}

.btn__icon { flex-shrink: 0; }

.btn--primary {
    background-color: #4C8C64;
    color: #fff;
    padding: 0.875rem 2rem;
}
.btn--primary:hover { background-color: #3d7353; }

.btn--outline {
    background: transparent;
    color: #1A1A2E;
    border: 2px solid #c5c0b8;
    padding: 0.75rem 1.5rem;
}
.btn--outline:hover {
    border-color: #4C8C64;
    color: #4C8C64;
}

.btn--large { padding: 1rem 2.5rem; font-size: 1.05rem; }
.btn--small { padding: 0.5rem 1.25rem; font-size: 0.875rem; }

.btn--marketplace {
    background: transparent;
    color: #1A1A2E;
    border: 2px solid #c5c0b8;
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
    border-radius: 50px;
}
.btn--marketplace:hover {
    border-color: #4C8C64;
    color: #4C8C64;
}

/* Social buttons */
.btn--social {
    background: transparent;
    color: #1A1A2E;
    border: 2px solid #c5c0b8;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    border-radius: 50px;
}
.btn--social:hover { border-color: #4C8C64; color: #4C8C64; }
.btn--telegram:hover { border-color: #0088cc; color: #0088cc; }
.btn--vk:hover { border-color: #4C75A3; color: #4C75A3; }
.btn--instagram:hover { border-color: #E4405F; color: #E4405F; }

/* ================================ */
/* === HERO === */
/* ================================ */

.hero {
    text-align: center;
    overflow: hidden;
}

.hero__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1A1A2E;
}

.hero__subtitle {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* Mobile hero */
.hero--mobile {
    padding: 1.5rem 1rem 1.25rem;
}

.hero--mobile .hero__logo {
    margin-bottom: 1rem;
}

.hero--mobile .hero__title {
    font-size: 1.4rem;
}

.hero--mobile .hero__image {
    margin: 0 -1rem 1.25rem;
}

.hero--mobile .hero__img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

/* Desktop hero */
.hero--desktop {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 1rem;
    text-align: left;
}

.hero--desktop .hero__content {
    flex: 1;
}

.hero--desktop .hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.hero--desktop .hero__subtitle {
    font-size: 1.15rem;
    margin-bottom: 2rem;
}

.hero--desktop .hero__image {
    flex: 1;
    max-width: 500px;
}

.hero--desktop .hero__img {
    border-radius: 16px;
    width: 100%;
}

.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.logo--desktop { margin: 0 0 0.75rem; width: 96px !important; height: 96px !important; }

/* ================================ */
/* === SOCIAL BUTTONS (mobile) === */
/* ================================ */

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ================================ */
/* === SUPPORT CARD === */
/* ================================ */

.section--support {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.support-card {
    background: #f0ebe3;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.support-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.support-card__text {
    color: #555;
    margin-bottom: 1.25rem;
}

/* ================================ */
/* === LOYALTY CARD === */
/* ================================ */

.loyalty-card {
    background: linear-gradient(135deg, #f0ebe3 0%, #e8e0d4 100%);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
}

.loyalty-card__badge {
    display: inline-block;
    background: #D4A855;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.loyalty-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.loyalty-card__text {
    color: #555;
    margin-bottom: 1.25rem;
}

.loyalty-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.loyalty-form__input {
    padding: 0.875rem 1.25rem;
    border: 2px solid #c5c0b8;
    border-radius: 50px;
    font-size: 1rem;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.loyalty-form__input:focus {
    border-color: #4C8C64;
}

.loyalty-form__btn {
    width: 100%;
}

/* ================================ */
/* === PRODUCT CARDS === */
/* ================================ */

.products-grid--mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.products-grid--desktop.products-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.products-grid--desktop.products-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.product-card__image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: #f5f1eb;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.product-card__aroma {
    font-size: 0.8rem;
    color: #D4A855;
    font-style: italic;
    margin-bottom: 0.25rem;
}

.product-card__volume {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.product-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A1A2E;
    margin-bottom: 0.75rem;
}

.product-card__price::after {
    content: ' \20BD'; /* Знак рубля в заголовке карточки допустим */
    font-weight: 400;
}

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

.marketplace-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.marketplace-buttons--desktop {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

.marketplace-buttons--desktop .btn--marketplace {
    width: auto;
    min-width: 200px;
}

/* ================================ */
/* === SOCIAL ICONS (desktop) === */
/* ================================ */

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #c5c0b8;
    color: #1A1A2E;
    transition: all 0.2s;
}

.social-icon:hover {
    border-color: #4C8C64;
    color: #4C8C64;
}

/* ================================ */
/* === BENEFITS (desktop) === */
/* ================================ */

.section--benefits { padding-top: 1rem !important; padding-bottom: 2rem !important; }
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.benefit__icon {
    margin-bottom: 1rem;
}

.benefit__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.benefit__text {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.5;
}

/* ================================ */
/* === ABOUT === */
/* ================================ */

.section--about {
    background: #f0ebe3;
    border-radius: 16px;
    max-width: 1000px;
}

.about-text {
    text-align: center;
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.about-facts {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.about-fact {
    text-align: center;
}

.about-fact__number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #4C8C64;
    line-height: 1.2;
}

.about-fact__label {
    font-size: 0.875rem;
    color: #555;
}

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

.footer {
    text-align: center;
    padding: 2rem 1.25rem;
    color: #888;
    font-size: 0.85rem;
}

.footer__email {
    margin-bottom: 0.25rem;
    color: #555;
}

.footer--desktop .footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    border-top: 1px solid #e0dbd3;
}

.footer--desktop .footer__contacts p {
    margin: 0.125rem 0;
}

.logo--footer { margin: 0; }

/* ================================ */
/* === RESPONSIVE === */
/* ================================ */

/* Tablets */
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .products-grid--desktop.products-grid--4,
    .products-grid--desktop.products-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .hero--desktop {
        flex-direction: column;
        text-align: center;
    }

    .hero--desktop .hero__title {
        font-size: 2rem;
    }

    .hero__actions {
        justify-content: center;
    }

    .marketplace-buttons--desktop {
        flex-direction: column;
    }

    .marketplace-buttons--desktop .btn--marketplace {
        width: 100%;
    }

    .about-facts {
        gap: 1.5rem;
    }

    .footer--desktop .footer__inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .logo--footer { margin: 0 auto; }
}

/* Mobile overrides */
.is-mobile .section {
    padding: 2rem 1rem;
}

.is-mobile .section__title {
    font-size: 1.25rem;
}

.is-mobile .btn--social {
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
}

.is-mobile .btn--marketplace {
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

/* Small mobile */
@media (max-width: 380px) {
    .products-grid--mobile {
        grid-template-columns: 1fr;
    }

    .hero__title {
        font-size: 1.25rem;
    }

    .section__title {
        font-size: 1.15rem;
    }
}


/* === MF-PROMO-2026-05-12: карусель + кнопки Ozon/WB === */
.mf-grid { gap: 20px; }
.mf-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,26,46,0.06);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    padding: 0 !important;
}
.mf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,26,46,0.12); }

/* Слайдер */
.mf-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #f5f0e8;
    margin: 0 0 12px;
}
.mf-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.mf-track::-webkit-scrollbar { display: none; }
.mf-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.mf-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    background: rgba(255,255,255,0.75);
    padding: 6px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mf-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(26,26,46,0.25);
    transition: background .15s, transform .15s, width .15s;
    text-decoration: none;
}
.mf-dot:hover { background: rgba(26,26,46,0.55); transform: scale(1.15); }
.mf-dot.is-active { background: #1a1a2e; width: 18px; border-radius: 4px; }

/* Тексты */
.mf-title { margin: 0 16px; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; color: #1a1a2e; }
.mf-aroma { margin: 4px 16px 0; font-size: 13px; font-style: italic; color: #d4a855; text-align: center; }
.mf-volume { margin: 4px 16px 0; font-size: 13px; color: #6b6b7a; text-align: center; }
.mf-price { margin: 6px 16px 12px; font-size: 22px; font-weight: 700; text-align: center; color: #1a1a2e; }
.mf-rub { font-weight: 600; font-size: 18px; }

/* CTA */
.mf-ctas { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; margin-top: auto; }
.mf-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #fff !important;
    border: 1px solid transparent;
    transition: background-color .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
    text-align: center;
}
.mf-cta:hover { transform: translateY(-1px); color: #fff !important; }
.mf-cta--ozon { background: #005bff; border-color: #005bff; box-shadow: 0 2px 10px rgba(0,91,255,0.18); }
.mf-cta--ozon:hover { background: #0049cc; box-shadow: 0 4px 14px rgba(0,91,255,0.28); }
.mf-cta--wb { background: #cb11ab; border-color: #cb11ab; box-shadow: 0 2px 10px rgba(203,17,171,0.18); }
.mf-cta--wb:hover { background: #a40f8d; box-shadow: 0 4px 14px rgba(203,17,171,0.28); }
.mf-cta--lg { padding: 14px 26px; font-size: 15px; min-height: 48px; }
.mf-cta--lg .mf-mark--ozon { width: 60px; height: 15px; }
.mf-cta--lg .mf-mark--wb { width: 22px; height: 22px; }
.mf-mark { display: inline-block; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.mf-mark--ozon {
    width: 48px; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1500 430 800 200' fill='%23fff'><path d='M1980.15 441.5C1916.85 441.5 1865.55 478.1 1865.55 523.3C1865.55 568.5 1916.85 605.1 1980.15 605.1C2043.45 605.1 2094.75 568.5 2094.75 523.3C2094.75 478.1 2043.45 441.5 1980.15 441.5ZM1980.15 567C1936.45 567 1903.75 544 1903.75 523.4C1903.75 502.8 1936.45 479.8 1980.15 479.8C2023.85 479.8 2056.55 502.8 2056.55 523.4C2056.55 544 2023.95 567 1980.15 567Z'/><path d='M1604.25 441.5C1559.05 441.5 1522.45 478.1 1522.35 523.3C1522.35 568.5 1558.95 605.1 1604.15 605.2C1649.35 605.2 1685.95 568.6 1686.05 523.4C1686.05 478.1 1649.45 441.5 1604.25 441.5ZM1647.85 523.3C1647.85 547.4 1628.35 566.9 1604.25 567C1580.15 567 1560.55 547.5 1560.55 523.4C1560.55 499.3 1580.05 479.7 1604.15 479.7C1628.25 479.7 1647.85 499.2 1647.85 523.3Z'/><path d='M1835.65 563.3H1770.75L1853.55 454C1856.25 450.4 1853.75 445.2 1849.15 445.2H1730.15C1718.35 445.2 1708.25 456 1710.75 468.2C1712.55 477.2 1720.95 483.3 1730.15 483.3H1783.45L1700.55 592.7C1697.85 596.3 1700.35 601.4 1704.85 601.4H1834.95C1844.15 601.4 1852.55 595.3 1854.35 586.3C1856.85 574 1847.45 563.3 1835.65 563.3Z'/><path d='M2272.45 464.3V596C2272.45 597.2 2272.05 598.4 2271.25 599.4C2269.35 601.8 2265.85 602.2 2263.45 600.3L2160.25 518.4V582.4C2160.25 593.2 2151.35 601.8 2140.55 601.5C2130.15 601.2 2122.05 592.3 2122.05 581.9V450.7C2122.05 449.4 2122.45 448.2 2123.25 447.2C2125.15 444.9 2128.65 444.5 2130.95 446.4L2234.15 528.3V464.8C2234.15 454.4 2242.25 445.6 2252.55 445.2C2263.45 444.8 2272.45 453.5 2272.45 464.3Z'/></svg>");
}
.mf-mark--wb {
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path fill='%23fff' fill-rule='evenodd' d='M761,352.9c-35.8,0-68.2,10.8-95.8,29.4V213h-76.4v312c0,94.9,77.2,171.3,171.7,171.3c94.5,0,172.6-75.9,172.6-172.2C933.2,427.9,856.8,352.9,761,352.9z M414.3,547.1L344.4,365h-53.5l-70.3,182.1L150.2,365H66.9l123,320.2h53.5l73.8-190.7l74.2,190.7h53.5L567.5,365h-82.9L414.3,547.1z M760.6,620c-51.8,0-95.4-41.4-95.4-95.4c0-54,41-94.9,95.8-94.9c54.8,0,95.8,42.7,95.8,94.9C856.8,576.9,813.2,620,760.6,620z'/></svg>");
}
@media (prefers-reduced-motion: reduce) {
    .mf-track { scroll-behavior: auto; }
    .mf-card, .mf-cta, .mf-dot { transition: none; }
}

/* === Init script для каруселей (см. конец desktop.php / mobile.php) === */

/* Компактный ряд иконок-кружочков (mobile «Подпишитесь» — доп. соцсети) */
.social-icons--compact {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.social-icons--compact .social-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f0e8;
    color: #1a1a2e;
    text-decoration: none;
    transition: transform .15s, background .15s;
}
.social-icons--compact .social-icon:hover {
    background: #1a1a2e;
    color: #f5f0e8;
    transform: scale(1.05);
}