/**
 * curly.sale — Front Page Styles
 *
 * Использует Design System токены (colors_and_type.css).
 * Совместим с GeneratePress child theme.
 *
 * Upload to: /www/wwwroot/curly.sale/wp-content/themes/generatepress-child/assets/css/front-page.css
 *
 * @version Design Sprint A (May 2026)
 */

/* ============================================================
   DESIGN TOKENS — inline fallback
   ============================================================ */
:root {
    /* Design System palette — values remapped sage → cream/coral.
       Names kept so existing var(--fp-*) fallbacks keep resolving. */
    --fp-sage:        #E8826B;   /* warm coral accent */
    --fp-sage-hover:  #D96A52;
    --fp-terracotta:  #A6705A;
    --fp-mint:        #FBF8F4;   /* cream canvas */
    --fp-white:       #FFFFFF;
    --fp-charcoal:    #2B2622;   /* warm near-black */
    --fp-slate:       #8A817A;   /* muted */
    --fp-silver:      #B8AFA6;
    --fp-border:      #EDE6DD;   /* hairline */
    --fp-max:         1200px;
    --fp-radius:     16px;       /* cards (was 4px) */
    --fp-motion:      200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET — GeneratePress override
   GeneratePress добавляет padding/margin к .site-content
   На главной делаем full-width без отступов
   ============================================================ */
.fp-wrap {
    /* Сброс максимальной ширины GeneratePress — full-width trick */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/*
 * FIX #2: scrollbar-gap компенсация.
 * При наличии вертикального скроллбара 100vw > content-area (~17px),
 * calc(-50vw + 50%) смещает fp-wrap влево на ~8px, и overflow-x: hidden
 * отрезает левый край контента.
 * scrollbar-gutter: stable резервирует место под скроллбар заранее,
 * устраняя смещение. Поддержка: Chrome 94+, Firefox 97+, Safari 15.4+.
 */
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

/* GP убирает стандартные паддинги контента */
.single-no-sidebar .site-content,
.no-sidebar .site-content {
    padding: 0;
}

.site-content .fp-wrap {
    padding: 0;
}

/* ============================================================
   CONTAINER
   ============================================================ */
.fp-container {
    max-width: var(--fp-max, 1200px);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .fp-container { padding: 0 24px; }
}

/* ============================================================
   HERO
   ============================================================ */
.fp-hero {
    /* barely-there cream → soft-coral vertical wash */
    background: linear-gradient(180deg, var(--bg-page, var(--fp-mint)) 0%, #FCEFE9 100%);
    border-bottom: none;
    padding: 88px 0 96px;
}

@media (max-width: 767px) {
    .fp-hero { padding: 56px 0 64px; }
}

.fp-hero__title {
    /* lightness from thin large editorial serif */
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);   /* up to 60px */
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--fg-1, var(--fp-charcoal));
    margin: 0 0 16px;
    max-width: 760px;
}

.fp-hero__sub {
    font-size: 1.18rem;
    color: var(--fg-2, var(--fp-slate));
    margin: 0 0 32px;
    max-width: 620px;
    line-height: 1.6;
}

/* Search form */
.fp-hero__form {
    display: flex;
    gap: 8px;
    max-width: 640px;
    margin-bottom: 20px;
}

.fp-hero__input {
    flex: 1;
    height: 52px;
    padding: 0 22px;
    border: 1px solid var(--border, var(--fp-border));
    border-radius: var(--radius-full, 999px);
    background: var(--fp-white);
    font-size: 15px;
    color: var(--fg-1, var(--fp-charcoal));
    outline: none;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(43,38,34,0.06));
    font-family: var(--font-body, inherit);
    transition: border-color var(--fp-motion), box-shadow var(--fp-motion);
}

.fp-hero__input:focus {
    border-color: var(--brand, var(--fp-sage));
    box-shadow: 0 0 0 2px rgba(232, 130, 107, 0.18);
}

.fp-hero__input::placeholder {
    color: var(--fg-3, var(--fp-silver));
}

.fp-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    background: var(--brand, var(--fp-sage));
    color: #fff;
    border: none;
    border-radius: var(--radius-full, 999px);   /* pill CTA */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--shadow-accent, 0 8px 24px rgba(232,130,107,0.18));
    transition: background var(--fp-motion), box-shadow var(--fp-motion), transform var(--fp-motion);
    font-family: var(--font-body, inherit);
}

.fp-hero__btn:hover { background: var(--brand-hover, var(--fp-sage-hover)); box-shadow: var(--shadow-md, 0 4px 16px rgba(43,38,34,0.06)); }
.fp-hero__btn:active { transform: translateY(1px); }

/* Popular chips */
.fp-hero__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fp-hero__chips-label {
    font-size: 13px;
    color: var(--fg-2, var(--fp-slate));
}

.fp-chip {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--border, var(--fp-border));
    background: var(--fp-white);
    color: var(--fg-1, var(--fp-charcoal));
    text-decoration: none;
    transition: border-color var(--fp-motion), background var(--fp-motion), color var(--fp-motion);
}

.fp-chip:hover {
    border-color: var(--brand, var(--fp-sage));
    color: var(--brand, var(--fp-sage));
    background: rgba(232, 130, 107, 0.05);
    text-decoration: none;
}

@media (max-width: 767px) {
    .fp-hero__form { flex-direction: column; }
    .fp-hero__btn  { width: 100%; justify-content: center; }
}

/* ============================================================
   SECTIONS — общие стили
   ============================================================ */
.fp-section {
    padding: 72px 0;
}

.fp-section + .fp-section {
    border-top: none;   /* soft separation via surface tint, not hairlines */
}

.fp-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
}

.fp-section__title {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.18rem);   /* editorial H2 ~35px */
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fg-1, var(--fp-charcoal));
    margin: 0;
}

.fp-section__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--brand, var(--fp-sage));
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.fp-section__link:hover {
    color: var(--brand-hover, var(--fp-sage-hover));
    text-decoration: underline;
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.fp-cats {
    background: var(--fp-white);
}

.fp-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 767px) {
    .fp-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 399px) {
    .fp-cat-grid { grid-template-columns: 1fr; }
}

.fp-cat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--fp-white);
    border: none;                         /* soft shadow replaces border */
    border-radius: var(--radius-md, var(--fp-radius));
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(43,38,34,0.06));
    text-decoration: none;
    color: var(--fg-1, var(--fp-charcoal));
    transition: transform var(--fp-motion), box-shadow var(--fp-motion);
}

.fp-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(43,38,34,0.06));
    text-decoration: none;
    color: var(--fg-1, var(--fp-charcoal));
}

.fp-cat-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-soft, #FBE5DD);   /* coral soft disc */
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand, var(--fp-sage));
    border: none;
    font-size: 22px;        /* эмодзи-пиктограмма */
    line-height: 1;
}

.fp-cat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fp-cat-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.fp-cat-sub {
    font-size: 13px;
    color: var(--fg-2, var(--fp-slate));
}

.fp-cat-count {
    font-size: 12px;
    color: var(--fg-2, var(--fp-slate));
}

/* ============================================================
   BRAND STRIP
   ============================================================ */
.fp-brands {
    background: var(--bg-alt, var(--cgm-surface-alt, #F4EEE6));   /* feature section tint */
    border-top: none;
}

.fp-brand-strip {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
}

@media (max-width: 1023px) {
    .fp-brand-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 599px) {
    .fp-brand-strip {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .fp-brand-strip::-webkit-scrollbar { display: none; }
}

.fp-brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--fp-white);
    border: none;
    border-radius: var(--radius-md, var(--fp-radius));
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(43,38,34,0.06));
    text-decoration: none;
    color: var(--fg-1, var(--fp-charcoal));
    transition: transform var(--fp-motion), box-shadow var(--fp-motion);
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .fp-brand-tile { min-width: 100px; scroll-snap-align: start; }
}

.fp-brand-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(43,38,34,0.06));
    text-decoration: none;
    color: var(--fg-1, var(--fp-charcoal));
}

/* Monogram placeholder (заменяется реальным логотипом в будущем) */
.fp-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 999px);   /* coral soft disc */
    background: var(--accent-soft, #FBE5DD);
    color: var(--brand, var(--fp-sage));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.fp-brand-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--fg-1, var(--fp-charcoal));
    line-height: 1.3;
}

.fp-brand-count {
    font-size: 11px;
    color: var(--fg-2, var(--fp-slate));
}

/* ============================================================
   MÉTODO CURLY — CTA strip
   ============================================================ */
/* Контейнерный скруглённый коралловый блок (как в плане), а не полоса во всю ширину */
.fp-method-strip {
    background: transparent;
    padding: 64px 24px;
}

.fp-method-strip__inner {
    max-width: var(--fp-max, 1200px);
    margin: 0 auto;
    padding: 40px 48px;
    background: var(--brand, var(--fp-sage));
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-accent, 0 8px 24px rgba(232,130,107,0.18));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.fp-method-strip__text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    max-width: 560px;
}

.fp-method-strip__text strong {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    display: block;
    margin-bottom: 6px;
}

@media (max-width: 599px) {
    .fp-method-strip { padding: 40px 16px; }
    .fp-method-strip__inner { padding: 28px 24px; }
}

/* Buttons */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    white-space: nowrap;
    transition: filter var(--fp-motion), transform var(--fp-motion);
    cursor: pointer;
    font-family: var(--font-body, inherit);
}

.fp-btn:hover { filter: brightness(0.96); text-decoration: none; }
.fp-btn:active { transform: translateY(1px); }

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

.fp-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 599px) {
    .fp-method-strip__inner { flex-direction: column; align-items: flex-start; }
    .fp-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   OFERTAS DEL DÍA — override для front-page контекста
   ============================================================ */

/* Граница сверху */
.fp-wrap .cgm-discounts-section {
    border-top: 1px solid var(--border, var(--fp-border));
}

.fp-wrap .cgm-ds__footer {
    margin-top: 8px;
}

/*
 * FIX #1: cgm-discounts-section использует <div class="container">.
 * В GeneratePress 3.x основной контейнер — .grid-container,
 * поэтому .container не получает GP-стили и рендерится edge-to-edge
 * (нет отступов, нет max-width).
 * Принудительно задаём те же параметры что у .fp-container.
 */
.cgm-discounts-section .container {
    max-width: var(--fp-max, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .cgm-discounts-section .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fp-cat-card,
    .fp-brand-tile,
    .fp-chip,
    .fp-hero__input,
    .fp-hero__btn,
    .fp-btn {
        transition: none !important;
        transform: none !important;
    }
}

.fp-hero__btn:focus-visible,
.fp-chip:focus-visible,
.fp-cat-card:focus-visible,
.fp-brand-tile:focus-visible,
.fp-btn:focus-visible {
    outline: 2px solid var(--brand, var(--fp-sage));
    outline-offset: 2px;
}

/* ============================================================
   INGREDIENT CHECKER WIDGET  (fp-checker)
   Sprint 25 — homepage widget → /analizar-ingredientes/
   ============================================================ */
.fp-checker {
    background: var(--bg-alt, var(--cgm-surface-alt, #F4EEE6));   /* feature tint */
}

/* Карточка-обёртка — премиум feature block */
.fp-checker__card {
    background: var(--fp-white);
    border: none;
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(43,38,34,0.06));
    padding: 36px 36px 32px;
}

/* Шапка: иконка + заголовок + лид */
.fp-checker__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.fp-checker__icon {
    font-size: 1.5rem;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 2px;
}

.fp-checker__title {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--fg-1, var(--fp-charcoal));
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.fp-checker__lead {
    font-size: .87rem;
    color: var(--fg-2, var(--fp-slate));
    margin: 0;
    line-height: 1.5;
}

/* Форма */
.fp-checker__form {
    display: flex;
    flex-direction: column;
}

.fp-checker__label {
    font-weight: 600;
    font-size: .87rem;
    color: var(--fg-1, var(--fp-charcoal));
    margin-bottom: 6px;
    display: block;
}

.fp-checker__textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    font-size: .85rem;
    font-family: inherit;
    color: var(--fg-1, var(--fp-charcoal));
    border: 1px solid var(--border, var(--fp-border));
    border-radius: var(--radius-md, var(--fp-radius));
    resize: vertical;
    box-sizing: border-box;
    background: var(--bg-page, #f9f9f9);
    transition: border-color var(--fp-motion);
}

.fp-checker__textarea:focus {
    outline: none;
    border-color: var(--brand, var(--fp-sage));
    background: #fff;
    box-shadow: 0 0 0 2px rgba(232, 130, 107, 0.14);
}

.fp-checker__textarea::placeholder {
    color: var(--fg-3, var(--fp-silver));
}

.fp-checker__hint {
    font-size: .75rem;
    color: var(--fg-3, var(--fp-silver));
    margin: 5px 0 14px;
}

.fp-checker__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand, var(--fp-sage));
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    padding: 13px 28px;
    border: none;
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    box-shadow: var(--shadow-accent, 0 8px 24px rgba(232,130,107,0.18));
    transition: background var(--fp-motion), box-shadow var(--fp-motion), transform var(--fp-motion);
    font-family: var(--font-body, inherit);
    line-height: 1;
}

.fp-checker__submit:hover { background: var(--brand-hover, var(--fp-sage-hover)); box-shadow: var(--shadow-md, 0 4px 16px rgba(43,38,34,0.06)); }
.fp-checker__submit:active { transform: translateY(1px); }

.fp-checker__submit:focus-visible {
    outline: 2px solid var(--brand, var(--fp-sage));
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .fp-checker__card  { padding: 20px 16px 18px; }
    .fp-checker__header { gap: 10px; }
    .fp-checker__submit { width: