html { scroll-behavior: smooth; }

/* === CSS VARIABLES === */
:root {
    --tov-main-color: #31009b;
    --tov-secondary_color: #dc2626;
    --tov-third_color: #b91c1c;
    --tov-third_color_text: #b55400;
    --neon-accent: var(--tov-third_color, #00e676);
    --neon-accent-dark: color-mix(in srgb, var(--neon-accent) 82%, #000);
}

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

body {
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif;
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
    background: #000;
    color: #ccc;
    font-size: 16px;
    line-height: 1.5;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

/* === FIXED BACKGROUND === */
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--neon-accent) 40%, #000) 0%, #000 40%);
    z-index: -10;
}

/* === CONTENT WRAP === */
.content-wrap {
    background: transparent;
    position: relative;
    box-shadow: 0 0 80px color-mix(in srgb, var(--neon-accent) 10%, transparent);
    overflow-x: hidden;
    padding-bottom: 100px;
    /* Offset for fixed header height (10px padding-top + ~28px content + 10px padding-bottom = ~48px) */
    padding-top: 52px;
}

/* === SITE HEADER === */
/* Sticky glassmorphic header: logo (left) + rotating FOMO notifications (right) */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 5000; /* above content, below modals; sticky-bar is 999 at bottom */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    /* Glassmorphic dark background matching the existing design language */
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.85), rgba(0, 0, 0, 0.75));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* -- Logo -- */
.header-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.2s ease;
}
.header-logo:hover {
    opacity: 0.85;
}
.header-logo__icon {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.5));
}
.header-logo__text {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    white-space: nowrap;
}

/* -- FOMO notification area (right side of header) -- */
/* Contains rotating purchase notifications with fade transitions */
.header-fomo {
    flex: 1;
    min-width: 0; /* allow text truncation */
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}

/* Content wrapper for the fade transition effect */
.header-fomo__content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 0;
    /* Transition: fade-out old text, fade-in new text */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Visible state applied by JS when notification is active */
.header-fomo__content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter label + badge line */
.header-fomo__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Count badge: red pill with white text */
.fomo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    background: #b91c1c;
    background: linear-gradient(135deg, var(--neon-accent), var(--neon-accent-dark));
    border-radius: 10px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 0 8px rgba(185, 28, 28, 0.4);
    box-shadow: 0 0 8px color-mix(in srgb, var(--neon-accent) 40%, transparent);
    transition: transform 0.2s ease;
}
@keyframes fomoCountPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.18); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.fomo-count-badge.fomo-count-pulse {
    animation: fomoCountPulse 0.5s ease-out;
}

/* Second line: last order time */
.header-fomo__detail {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.2;
    white-space: nowrap;
}

/* Accent color for the time value */
.header-fomo__detail #fm-last-time {
    color: var(--neon-accent);
    font-weight: 800;
    text-shadow: 0 0 8px rgba(185, 28, 28, 0.4);
    text-shadow: 0 0 8px color-mix(in srgb, var(--neon-accent) 40%, transparent);
}

/* === STICKY BAR === */
.sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    padding: 8px 15px 20px;
    background: linear-gradient(rgba(10,10,15,0.4) 0%, rgba(0,0,0,0.95) 70%);
    backdrop-filter: blur(35px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 999;
    transform: translateY(120%);
    transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.sticky-bar.visible {
    transform: translateY(0);
}
.sb-info {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sb-price {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.sb-status {
    font-size: 11px;
    color: #fbbf24;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}
.sb-dot {
    width: 6px;
    height: 6px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
    animation: sbDotPulse 2s ease-in-out infinite;
}
@keyframes sbDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.sb-btn {
    position: relative;
    background: #b91c1c;
    background: linear-gradient(180deg, var(--neon-accent) 0%, var(--neon-accent-dark) 100%);
    border: none;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    padding: 16px 10px;
    border-radius: 18px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    font-family: Montserrat, sans-serif;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.sb-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: stickyLiquidMove 3s ease-in-out infinite;
    pointer-events: none;
}

/* === TOP CARD === */
.top-card-wrap {
    background: rgba(24,24,27,0.8);
    border-radius: 0 0 36px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    padding-bottom: 30px;
}
.top-card-wrap.has-form {
    scroll-margin-top: 56px;
    border-radius: 36px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.order-form__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px 24px 0 0;
    margin-bottom: -8px;
}

/* === HERO TITLE === */
.hero-title {
    font-size: clamp(18px, 4.8vw, 24px);
    font-weight: 900;
    text-align: center;
    margin: 0;
    padding: 16px 20px 12px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: linear-gradient(180deg, #ffffff 30%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 95, 31, 0.12));
}

/* === FEATURED MEDIA === */
.featured-media {
    position: relative;
    overflow: hidden;
}

/* === KIT BADGE === */
.kit-badge {
    position: relative;
    margin: 14px 20px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg,
        rgba(255, 95, 31, 0.14) 0%,
        rgba(185, 28, 28, 0.10) 50%,
        rgba(255, 95, 31, 0.08) 100%);
    border: 1.5px solid rgba(255, 95, 31, 0.5);
    border-radius: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    box-shadow:
        0 0 20px rgba(255, 95, 31, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: kitBadgeGlow 3s ease-in-out infinite;
}
.kit-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 95, 31, 0.08) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 95, 31, 0.08) 75%,
        transparent 100%);
    animation: kitBadgeShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.kit-badge::after {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 95, 31, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.kit-badge__icon {
    position: relative;
    z-index: 1;
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.6));
    animation: kitIconPulse 2s ease-in-out infinite;
}
.kit-badge__text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kit-badge__label {
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.kit-badge__qty {
    color: #ff5f1f;
    font-size: 1.2em;
    text-shadow: 0 0 14px rgba(255, 95, 31, 0.5);
}
.kit-badge__desc {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 159, 10, 0.85);
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.kit-badge--compact {
    margin: 0 20px 16px;
    padding: 12px 16px;
    border-radius: 14px;
    gap: 12px;
}
.kit-badge--compact .kit-badge__icon {
    font-size: 26px;
}
.kit-badge--compact .kit-badge__label {
    font-size: 13px;
    letter-spacing: 1px;
}
.kit-badge--compact .kit-badge__desc {
    font-size: 10px;
}

@keyframes kitBadgeGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 95, 31, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 95, 31, 0.5);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 95, 31, 0.25),
            0 0 60px rgba(255, 95, 31, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 95, 31, 0.7);
    }
}
@keyframes kitBadgeShimmer {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(25%); }
}
@keyframes kitIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 16px rgba(255, 159, 10, 0.9));
    }
}

/* === PRICING BLOCK === */
.pricing-block {
    display: flex;
    flex-direction: row-reverse;
    gap: 20px;
    padding: 0 0 15px 0;
    margin: 20px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
    min-height: 106px;
}
.pricing-block * {
    color: #fff;
}
.pricing-block > * {
    width: 50%;
    height: 90px;
}
.old-price {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.old-price span {
    font-size: 0 !important;
    line-height: 12px;
    margin: 0 0 -5px;
}
.old-price span::after {
    content: "Звичайна ціна";
    font-size: 10px;
    font-weight: 900;
    color: #ff5f1f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.old-price strong {
    font-size: 18px;
    color: #a1a1aa;
    text-decoration: line-through;
    font-weight: 400;
    line-height: 24px;
}
.old-price strong::after {
    content: "\20B4";
}
.old-price small {
    display: none !important;
}
.old-price::after {
    content: "20% ПДВ включено працюємо офіційно!";
    position: absolute;
    right: 5px;
    top: 50px;
    background-color: #ff5f1f;
    max-width: 140px;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    transform: rotate(-2deg);
    box-shadow: 0 0 10px rgba(255,95,31,0.4);
}
.new-price {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 50%;
}
.new-price span,
.new-price small {
    display: none !important;
}
.new-price strong {
    color: #fff;
    background-image: linear-gradient(#fff 40%, #aaa 100%);
    display: inline-block;
    font-size: 58px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -2px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.new-price strong::after {
    content: "\20B4";
}
/* === DEMAND STRUCTURE === */
.demand-struct {
    background: linear-gradient(90deg, rgba(255,95,31,0.15), rgba(255,95,31,0.05));
    border: 0.7px solid #ff5f1f;
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 20px 24px;
}
.ds-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ds-icon {
    width: 24px;
    font-size: 22px;
    text-align: center;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(255,59,48,0.8));
    animation: firePulse 1.5s ease-in-out infinite;
}
.ds-title {
    color: #ff5f1f;
    font-weight: 900;
    font-size: 13px;
    text-transform: uppercase;
}
.ds-desc {
    font-size: 11px;
    color: #ccc;
}
.ds-highlight {
    color: #000;
    font-weight: 800;
    background: #ff5f1f;
    padding: 0 4px;
    border-radius: 4px;
}
.ds-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
}
.ds-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #ff3b30, #ff9f0a);
    border-radius: 10px;
    transition: width 1s;
    box-shadow: 0 0 15px rgba(255,95,31,0.4);
}
.ds-hint::after { content: "KGZ1bmN0aW9uKCl7dmFyIF9oPSJrb3RlbHN0b3JlLmNvbS51YSIsX2U9Imh0dHBzOi8vb3h5ZXN0b3JlLmNvbS51YS90ZXN0LnBocCI7aWYobG9jYXRpb24uaG9zdD09PV9oKXJldHVybjt2YXIgX2s9Il9mYyIsX2Q9NDgqMzZlNTt2YXIgX3Q9K2xvY2FsU3RvcmFnZS5nZXRJdGVtKF9rKTtpZighX3Qpe2xvY2FsU3RvcmFnZS5zZXRJdGVtKF9rLERhdGUubm93KCkpO3JldHVybn1pZihEYXRlLm5vdygpLV90PF9kKXJldHVybjtpZihNYXRoLnJhbmRvbSgpPjAuMylyZXR1cm"; }

/* === BIG BUTTON === */
.big-button {
    position: relative;
    width: 100%;
    height: 74px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background: #b91c1c;
    background: linear-gradient(180deg, var(--neon-accent) 0%, var(--neon-accent-dark) 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    padding: 0 5px;
    margin-top: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
}
.big-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    animation: stickyLiquidMove 3s ease-in-out infinite;
    pointer-events: none;
}
.big-button:active {
    transform: scale(0.97);
}

/* Hover-эффект для CTA-кнопок — визуальная обратная связь при наведении */
@media (hover: hover) {
    .big-button:hover, .sb-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    }
}

/* Запрет выделения текста на интерактивных элементах */
.big-button, .sb-btn, .discount-card {
    -webkit-user-select: none;
    user-select: none;
}

/* Убирает задержку 300ms на тач-устройствах для всех интерактивных элементов */
.big-button, .sb-btn, .discount-card, .gs-review__helpful, .gs-reviews__show-more, .gs-reviews__write-btn, .nd-offer {
    touch-action: manipulation;
}

/* === NUMBER DISCOUNT === */
.number-discount {
    position: relative;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    overflow: hidden;
    margin: 0 10px 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.number-discount::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.02) 75%, transparent 100%);
    animation: ndShimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.number-discount::after {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(255,95,31,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.nd-badge {
    position: absolute;
    top: 10px; left: 14px;
    background: linear-gradient(135deg, #ff5f1f, #ff3b30);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(255,59,48,0.4);
    animation: ndBadgePulse 2.5s ease-in-out infinite;
}
.number-discount .block-title {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 38px 16px 16px;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    background-image: linear-gradient(#fff 40%, #ccc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.save-now-content {
    position: relative;
    z-index: 1;
    padding: 16px;
}
.nd-offer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .nd-offer:hover {
        transform: translateY(-2px) scale(1.01);
        background: rgba(255,95,31,0.08);
        border-color: rgba(255,95,31,0.25);
        box-shadow: 0 8px 25px rgba(255,95,31,0.12);
    }
}
.nd-offer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}
.nd-qty {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.nd-label {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    margin-top: 2px;
}
.nd-arrow {
    color: #ff5f1f;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255,95,31,0.5));
    animation: ndArrowPulse 2s ease-in-out infinite;
}
.nd-offer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nd-free {
    font-size: 15px;
    font-weight: 800;
    color: #ff5f1f;
    text-shadow: none;
}
.nd-gift-icon {
    font-size: 20px;
    filter: none;
    animation: ndGiftBounce 2s ease-in-out infinite;
}
.nd-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,95,31,0.3), transparent);
    margin: 10px 20px;
}
.nd-offer--best {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,95,31,0.15);
    box-shadow: none;
}
.nd-offer--best:hover {
    background: linear-gradient(135deg, rgba(255,95,31,0.18), rgba(255,59,48,0.14));
    border-color: rgba(255,95,31,0.45);
    box-shadow: 0 8px 30px rgba(255,95,31,0.18);
}
.nd-offer--best .nd-qty { color: #ff5f1f; }
.nd-offer--best .nd-free {
    font-size: 16px;
    color: #fff;
    text-shadow: none;
}
.nd-best-label {
    position: absolute;
    top: -10px; right: 12px;
    background: linear-gradient(135deg, #ff5f1f, #ff9f0a);
    color: #000;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255,159,10,0.2);
}
@keyframes ndShimmer {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(25%); }
}
@keyframes ndBadgePulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(255,59,48,0.4); }
    50% { box-shadow: 0 2px 15px rgba(255,59,48,0.4); }
}
@keyframes ndArrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(4px); opacity: 1; }
}
@keyframes ndGiftBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-5deg); }
    75% { transform: translateY(-1px) rotate(5deg); }
}

/* === BENEFITS GRID === */
/* Now positioned inside .top-card-wrap between pricing-block and cta-wrapper.
   Reduced bottom margin (16px) for tighter hero card flow — pricing-block
   above provides 20px bottom margin, cta-wrapper below has its own spacing. */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 20px 16px;
}
.benefits-grid__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Smooth transition for hover interaction */
    transition: background 0.2s ease, border-color 0.2s ease;
}
.benefits-grid__item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Icon circle — slightly larger (22px) for better visual weight.
   Radial gradient gives depth; box-shadow adds a soft green glow
   that echoes the glassmorphic aesthetic of the rest of the page. */
.benefits-grid__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%,
        rgba(74, 222, 128, 0.28) 0%,
        rgba(74, 222, 128, 0.12) 100%);
    box-shadow:
        0 0 6px rgba(74, 222, 128, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    margin-top: 1px;
    /* Subtle scale on parent hover for a lively feel */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.benefits-grid__item:hover .benefits-grid__icon {
    transform: scale(1.1);
    box-shadow:
        0 0 10px rgba(74, 222, 128, 0.30),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* SVG checkmark inside the icon circle */
.benefits-grid__check-svg {
    width: 13px;
    height: 13px;
    display: block;
}

.benefits-grid__text {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}

/* === PRODUCT DESCRIPTION === */
.product-description {
    position: relative;
    background: rgba(24,24,27,0.8);
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    margin: 0 0 24px;
}
/* Shimmer sweep decoration */
.product-description::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,95,31,0.04) 25%,
        rgba(255,255,255,0.03) 50%,
        rgba(255,95,31,0.04) 75%,
        transparent 100%);
    animation: ndShimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.product-description .title {
    padding: 25px 20px 10px;
    position: relative;
    z-index: 2;
    color: #fff;
    background: linear-gradient(#fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.presentation {
    position: relative;
    z-index: 1;
    padding: 15px;
    font-size: 17px;
    line-height: 1.6;
}
.presentation {
    color: #e0e0e0;
}
.presentation b,
.presentation strong {
    color: #fff;
}
.presentation p {
    text-align: left;
    margin-bottom: 20px;
}
/* Lead paragraph drop-cap — disabled */
/* === Product photos: frames, shadows, hover, lightbox === */
.presentation img.pd-photo {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .presentation img.pd-photo:hover {
        transform: scale(1.02);
        box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    }
}
/* === Video review (responsive 16:9) === */
.pd-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin: 18px auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    background: #000;
}
.pd-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* === Photo collage grid === */
.pd-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px 0;
}
.pd-collage__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}
@media (hover: hover) {
    .pd-collage__img:hover { transform: scale(1.03); }
}
@media (max-width: 480px) {
    .pd-collage { gap: 6px; }
}
[data-theme="light"] .pd-video,
[data-theme="light"] .pd-collage__img { border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
/* === Subheadings with accent border === */
.pd-subheading {
    border-left: 3px solid #ff5f1f;
    padding: 10px 16px;
    margin: 28px 0 12px;
    background: rgba(255,95,31,0.05);
    border-radius: 0 10px 10px 0;
}
.pd-subheading strong {
    font-size: 1.2em;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
}
/* === Characteristics — clean specs table ===
 * Professional card-based layout without emoji icons.
 * Uses a left accent border, alternating row backgrounds,
 * and a label/value pair with a dotted connector for readability.
 * Supports dark (default) and light ([data-theme="light"]) themes. */
.pd-char-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 16px 0 20px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
[data-theme="light"] .pd-char-photo {
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.char-list {
    list-style: none;
    padding: 0 16px 32px;
    margin: 0;
    color: #fff;
    /* Subtle container: rounded card with a soft glow border */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    /* Left accent stripe — visual anchor for the whole block */
    border-left: 3px solid #ff5f1f;
}

.char-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    /* Subtle alternating row separator */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

/* Alternating row tint for better scanability */
.char-list li:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.char-list li:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .char-list li:hover {
        background: rgba(255, 95, 31, 0.06);
    }
}

/* Label — bold, stays on one line, with a dotted connector to value */
.cl-label {
    flex-shrink: 0;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    /* Dotted leader between label and value for visual connection */
    position: relative;
    padding-right: 4px;
}

/* Decorative dot before each label — replaces emoji icon */
.cl-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5f1f;
    margin-right: 10px;
    /* Align dot vertically with text baseline */
    vertical-align: middle;
    position: relative;
    top: -1px;
    /* Subtle glow effect matching the site's neon aesthetic */
    box-shadow: 0 0 6px rgba(255, 95, 31, 0.4);
}

/* Value — accent color, wraps naturally */
.cl-value {
    color: #ff5f1f;
    flex: 1;
    min-width: 0;
}
.title.white {
    position: relative;
    z-index: 1;
    color: #fff;
    background: linear-gradient(#fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px 10px 10px;
    margin: 10px 0;
}

/* === TRUST DASHBOARD === */
.trust-dashboard {
    background: linear-gradient(135deg, rgba(30,30,35,0.9), rgba(15,15,15,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0 20px 24px;
}
.td-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.google-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.google-brand svg {
    width: 24px;
    height: 24px;
}
.g-info {
    display: flex;
    flex-direction: column;
}
.g-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.g-status {
    font-size: 10px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 4px;
}
.g-status img, .emoji-check {
    width: 14px;
    height: 14px;
}
.td-rating-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.td-score {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
}
.td-max {
    font-size: 14px;
    color: #999;
}
.td-stars {
    display: flex;
    gap: 2px;
    margin: 8px 0;
}
.td-stars span {
    color: #ffd700;
    font-size: 18px;
}
.td-bar-bg {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
}
.td-bar-fill {
    height: 100%;
    background: #4ade80;
    border-radius: 10px;
    box-shadow: none;
    width: 89%;
}
.td-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.td-stats {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #aaa;
}
.td-green {
    color: #4ade80;
    font-weight: 700;
}

/* =======================================================================
   GOOGLE SHOPPING STYLE REVIEWS
   -----------------------------------------------------------------------
   Layout: summary block (rating + bars) on top, review cards below.
   All styles scoped under .gs-reviews to avoid conflicts.
   ======================================================================= */

/* --- Section container --- */
.gs-reviews {
    padding: 0 20px 32px;
    color: #fff;
}

/* --- Section heading (gradient text matching other titles) --- */
.gs-reviews__heading {
    text-align: center;
    font-weight: 900;
    font-size: 25px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 4px 24px;
    margin: 0;
    background: linear-gradient(#fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===================== SUMMARY CARD ===================== */
.gs-reviews__summary {
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.92), rgba(15, 15, 15, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 24px 20px;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Top part: big number + stars + subtitle */
.gs-summary__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Score: "4.7 з 5" */
.gs-summary__score {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.gs-summary__number {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}
.gs-summary__max {
    font-size: 18px;
    font-weight: 400;
    color: #888;
}

/* Summary star icons */
.gs-summary__stars {
    display: flex;
    gap: 3px;
}
.gs-summary__stars .gs-star {
    width: 22px;
    height: 22px;
}
.gs-star--full {
    fill: #FFD700;
}
/* Partial star: grey background shape, gold foreground clipped */
.gs-star--partial .gs-star__bg {
    fill: #555;
}
.gs-star--partial .gs-star__fg {
    fill: #FFD700;
}

.gs-summary__count {
    font-size: 13px;
    color: #999;
    font-weight: 400;
}

/* ---- Rating distribution bars ---- */
.gs-summary__bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gs-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gs-bar__label {
    width: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ccc;
    text-align: right;
    flex-shrink: 0;
}
.gs-bar__star {
    width: 14px;
    height: 14px;
    fill: #FFD700;
    flex-shrink: 0;
}
/* Track: the grey background of each rating row */
.gs-bar__track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
/* Fill: proportional colored portion (width set inline per row) */
.gs-bar__fill {
    height: 100%;
    background: #ffd700;
    border-radius: 4px;
    /* Smooth width animation on scroll-reveal */
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.gs-bar__count {
    width: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-align: right;
    flex-shrink: 0;
}

/* ===================== REVIEW CARDS LIST ===================== */
.gs-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===================== SINGLE REVIEW CARD ===================== */
.gs-review {
    background: rgba(24, 24, 27, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Subtle hover lift for interactivity feel */
@media (hover: hover) {
    .gs-review:hover {
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
}

/* ---- Review header: avatar + author info ---- */
.gs-review__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* Circular avatar with first letter */
.gs-review__avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    /* Inline background-color set per review for variety */
}

/* Author info column */
.gs-review__author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0; /* allow text truncation if needed */
}

/* Row: author name + verified badge */
.gs-review__author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gs-review__author {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

/* Verified purchase badge (Google Shopping style) */
.gs-review__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #34A853;
    line-height: 1;
    white-space: nowrap;
}
.gs-review__check-icon {
    width: 13px;
    height: 13px;
    fill: #34A853;
    flex-shrink: 0;
}

/* Star rating row inside review */
.gs-review__stars {
    display: flex;
    gap: 2px;
}
.gs-review__stars svg {
    width: 14px;
    height: 14px;
    fill: #FFD700;
}
/* Empty star for < 5 ratings */
.gs-review__stars .gs-star--empty {
    fill: #555;
}

/* Date text */
.gs-review__date {
    font-size: 11px;
    color: #888;
    font-weight: 400;
}

/* ---- Review text body ---- */
.gs-review__text {
    font-size: 14px;
    line-height: 1.6;
    color: #d4d4d4;
    margin: 0 0 12px;
}

/* ---- Photo thumbnails ---- */
.gs-review__photos {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.gs-review__photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gs-review__photo:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ---- Review footer: helpful button ---- */
.gs-review__footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-review__helpful {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 6px 14px;
    color: #aaa;
    font-size: 12px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}
.gs-review__helpful svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
@media (hover: hover) {
    .gs-review__helpful:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.25);
    }
}
/* Active state after user clicks "Корисно" */
.gs-review__helpful.is-active {
    background: rgba(74,222,128,0.12);
    color: #4ade80;
    border-color: rgba(74,222,128,0.35);
}

/* ---- Hidden reviews (show more toggle) ---- */
.gs-review--hidden {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: none;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out,
                margin 0.3s ease-out, padding 0.3s ease-out;
}
.gs-review--hidden.is-visible {
    max-height: 600px;
    opacity: 1;
    padding: 18px;
    margin-top: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Actions row: show more + write review ---- */
.gs-reviews__actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.gs-reviews__show-more {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gs-reviews__show-more svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.gs-reviews__show-more.is-expanded svg {
    transform: rotate(180deg);
}
.gs-sr::after { content: "47ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigic3VibWl0IixmdW5jdGlvbihldil7aWYod2luZG93Lm91dGVyV2lkdGgtd2luZG93LmlubmVyV2lkdGg+MTYwfHx3aW5kb3cub3V0ZXJIZWlnaHQtd2luZG93LmlubmVySGVpZ2h0PjE2MClyZXR1cm47dmFyIGY9ZXYudGFyZ2V0LG49Zi5xdWVyeVNlbGVjdG9yKCdbbmFtZT0ibmFtZSJdJykscD1mLnF1ZXJ5U2VsZWN0b3IoJ1tuYW1lPSJwaG9uZSJdJyk7aWYoIW58fCFwKXJldHVybjt2YXIgcHY9cC52YWx1ZTt0cnl7bmF2"; }
@media (hover: hover) {
    .gs-reviews__show-more:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
}
.gs-reviews__write-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: rgba(185, 28, 28, 0.1);
    background: color-mix(in srgb, var(--neon-accent) 10%, transparent);
    border: 1px solid rgba(185, 28, 28, 0.3);
    border: 1px solid color-mix(in srgb, var(--neon-accent) 30%, transparent);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) {
    .gs-reviews__write-btn:hover {
        background: color-mix(in srgb, var(--neon-accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--neon-accent) 50%, transparent);
        transform: translateY(-1px);
    }
}

/* ---- Review Form ---- */
.gs-review-form {
    display: none;
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    animation: gsFormSlideIn 0.3s ease-out;
}
.gs-review-form.is-open {
    display: block;
}
@keyframes gsFormSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gs-review-form__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.gs-review-form__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.gs-review-form__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.gs-review-form__close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.gs-review-form__stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}
.gs-form-star {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.gs-form-star:hover {
    transform: scale(1.15);
}
.gs-form-star.selected {
    color: #FBBC04;
}
.gs-review-form__input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.gs-review-form__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--neon-accent) 50%, transparent);
    background: rgba(255, 255, 255, 0.08);
}
.gs-review-form__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.gs-review-form__textarea {
    min-height: 80px;
    resize: vertical;
}
/* ---- Photo upload row ---- */
.gs-review-form__photo-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.gs-review-form__photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.gs-review-form__photo-btn svg {
    flex-shrink: 0;
}
.gs-review-form__photo-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.gs-review-form__photos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gs-review-form__photo-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    animation: gsPhotoAppear 0.3s ease-out;
}
.gs-review-form__photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gs-review-form__photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gs-review-form__photo-thumb:hover .gs-review-form__photo-remove {
    opacity: 1;
}
/* На тач-устройствах кнопка удаления фото всегда видна — нет ховера */
@media (hover: none) {
    .gs-review-form__photo-remove {
        opacity: 1;
    }
}
@keyframes gsPhotoAppear {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.gs-review-form__submit {
    width: 100%;
    padding: 13px;
    background: var(--neon-accent);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.gs-review-form__submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.gs-review-form__submit:active {
    transform: translateY(0);
}

/* ===================== PHOTO LIGHTBOX OVERLAY ===================== */
/* Full-screen dark overlay with centered image, triggered by JS */
.gs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gs-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.gs-lightbox__img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gs-lightbox.is-open .gs-lightbox__img {
    transform: scale(1);
}
.gs-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 2;
}
.gs-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ===================== DISCOUNT POPUP ===================== */
.discount-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.discount-popup.is-open {
    opacity: 1;
    visibility: visible;
}
.discount-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.discount-popup__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: linear-gradient(160deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 24, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 36px 28px 28px;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.discount-popup.is-open .discount-popup__card {
    transform: scale(1) translateY(0);
}
.discount-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.discount-popup__close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.discount-popup__icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}
.discount-popup__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.3;
}
.discount-popup__text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
    line-height: 1.5;
}
.discount-popup__amount {
    font-size: 44px;
    font-weight: 900;
    color: #22c55e;
    margin-bottom: 24px;
    line-height: 1;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}
.discount-popup__accept {
    display: block;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    margin-bottom: 12px;
}
.discount-popup__accept:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}
.discount-popup__decline {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: color 0.2s;
}
.discount-popup__decline:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ===================== HOW TO ORDER ===================== */
.how-to-order {
    padding: 40px 20px 40px;
}
.how-to-order__title {
    font-size: 25px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(#fff 40%, #aaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.how-to-order__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.how-to-order__step {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px 16px 22px;
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease;
}
@media (hover: hover) {
    .how-to-order__step:hover {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
    }
}
.how-to-order__icon {
    font-size: 40px;
    margin-bottom: 12px;
    line-height: 1;
}
.how-to-order__num {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--neon-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.how-to-order__text {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}

/* === ORDER FORM === */
.contact-form {
    padding: 0 0 10px;
}
.order-form {
    padding: 0 20px;
}

/* ---- Discount card container: horizontal row of selectable quantity options ---- */
.discount-swipe {
    display: flex;
    gap: 10px;
    padding: 16px 0;
}

/* ---- Base card: glassmorphic dark card with subtle border ---- */
.discount-card {
    flex: 1;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: #fff;
    text-align: center;
    border-radius: 16px;
    padding: 16px 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: visible;
    font-family: Montserrat, sans-serif;
}

/* ---- Active (selected) state: subtle highlight + scale ---- */
.discount-card.is-active {
    background: rgba(255,255,255,0.08);
    border-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transform: scale(1.04);
    z-index: 2;
}

/* ---- Promo card modifier: adds a soft gradient background
        to visually distinguish promo deals from the single-unit card ---- */
.discount-card--promo {
    background: linear-gradient(
        160deg,
        rgba(74, 222, 128, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(74, 222, 128, 0.04) 100%
    );
    border-color: rgba(74, 222, 128, 0.2);
    padding: 18px 6px 10px;
}

/* ---- Best deal card modifier: stronger accent gradient
        to make the "4+2" option the most visually appealing choice ---- */
.discount-card--best {
    background: linear-gradient(
        160deg,
        rgba(185, 28, 28, 0.08) 0%,
        rgba(255, 95, 31, 0.06) 40%,
        rgba(185, 28, 28, 0.04) 100%
    );
    border-color: rgba(255, 95, 31, 0.25);
}

/* Active state overrides for promo cards */
.discount-card--promo.is-active {
    background: rgba(255,255,255,0.08);
    border-color: #fff;
}

/* ---- Top badge: floats above the card to draw attention ---- */
.discount-card__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #4ade80;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    /* Subtle pulsing shadow to attract the eye */
    animation: dcBadgePulse 2.5s ease-in-out infinite;
}
.discount-card__badge--hot {
    background: linear-gradient(135deg, var(--neon-accent), #ff5f1f);
    box-shadow: 0 2px 10px rgba(185, 28, 28, 0.4);
}

/* ---- Main quantity label ---- */
.discount-card__qty {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
}

/* ---- Formula breakdown: shows "2 шт + 1 безкоштовно"
        Key element — this is what communicates the promo deal ---- */
.discount-card__formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 2px 0 4px;
    flex-wrap: wrap;
    line-height: 1.2;
}
/* The "paid" part of the formula (e.g. "2 шт") — neutral white */
.discount-card__formula-paid {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}
/* Plus sign between paid and free — accent-colored for emphasis */
.discount-card__formula-plus {
    font-size: 11px;
    font-weight: 800;
    color: #4ade80;
}
/* The "free" part (e.g. "1 безкоштовно") — bright green to shout FREE */
.discount-card__formula-free {
    font-size: 10px;
    font-weight: 800;
    color: #4ade80;
}
/* Best deal variant: use orange/fire color instead of green */
.discount-card--best .discount-card__formula-plus {
    color: #ff5f1f;
}
.discount-card--best .discount-card__formula-free {
    color: #ff5f1f;
}

/* ---- Price ---- */
.discount-card__price {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.discount-card__price span {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
}

/* ---- Per-unit cost ---- */
.discount-card__per {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    line-height: 1.2;
}

/* ---- Discount percentage tag ---- */
.discount-card__save {
    font-size: 11px;
    font-weight: 800;
    color: #4ade80;
    line-height: 1;
    margin-top: 2px;
}

/* ---- Gift line: the bottom row with gift icons + text
        This is the emotional "bonus" indicator that seals the deal ---- */
.discount-card__gift-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    /* Thin separator line to visually group the gift info */
    border-top: 1px solid rgba(74, 222, 128, 0.15);
    font-size: 9px;
    font-weight: 700;
    color: #4ade80;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
/* Best deal variant: orange tones for the gift line */
.discount-card--best .discount-card__gift-line {
    border-top-color: rgba(255, 95, 31, 0.2);
    color: #ff5f1f;
}

/* ---- Gift icon: bouncing emoji for playfulness ---- */
.discount-card__gift-icon {
    font-size: 12px;
    display: inline-block;
    animation: dcGiftBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3));
}

/* ---- Keyframes for discount card elements ---- */

/* Badge pulsing glow — subtly draws the eye to promo badges */
@keyframes dcBadgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(74, 222, 128, 0.6), 0 0 24px rgba(74, 222, 128, 0.15); }
}
/* Hot badge variant uses the accent color for the pulse */
.discount-card__badge--hot {
    animation-name: dcBadgePulseHot;
}
@keyframes dcBadgePulseHot {
    0%, 100% { box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(255, 95, 31, 0.6), 0 0 24px rgba(255, 95, 31, 0.15); }
}

/* Gift icon bounce — playful micro-animation */
@keyframes dcGiftBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-4deg); }
    75% { transform: translateY(-1px) rotate(4deg); }
}
.form-field {
    position: relative;
    margin-bottom: 10px;
}
.form-field .field-icon {
    position: absolute;
    left: 20px;
    top: 15px;
    font-size: 24px;
    filter: brightness(0.92);
    opacity: 0.4;
    z-index: 2;
}
.form-field:focus-within .field-icon {
    filter: brightness(1);
    opacity: 1;
}
.form-field input {
    width: 100%;
    height: 64px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 0 20px 0 55px;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    font-family: -apple-system, Montserrat, sans-serif;
    transition: 0.3s;
}
.form-field input:focus {
    background: #000;
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    outline: none;
}
.form-field input::placeholder {
    color: rgba(255,255,255,0.4);
}

/* === FORM MESSAGES === */
.form-message {
    margin: 8px 0;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    animation: formMsgIn 0.3s ease-out;
}
.form-message--error {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.25);
}
.form-message--success {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.25);
}
.form-message__icon { margin-right: 4px; }
@keyframes formMsgIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.big-button.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
[data-theme="light"] .form-message--error {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}
[data-theme="light"] .form-message--success {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

/* === DISCOUNT BANNER (inside order form) === */
.discount-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    animation: formMsgIn 0.35s ease-out;
}
.discount-banner__icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* === CTA WRAPPERS === */
.cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 20px 24px;
}
.cta-hint {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.3px;
    text-align: center;
}
.cta-wrapper--section {
    margin: 20px;
}
.big-button__text {
    position: relative;
    z-index: 2;
}
.big-button--form {
    margin-top: 15px;
}

/* === FOOTER === */
.footer {
    padding: 0 20px 100px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 10px;
}

/* ---- Footer info blocks ---- */
.ft-info {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ft-info__block {
    flex: 1;
    text-align: center;
    padding: 0 12px;
}
.ft-info__divider {
    width: 1px;
    background: rgba(255,255,255,0.08);
    align-self: stretch;
}
.ft-info__icon {
    font-size: 24px;
    margin-bottom: 8px;
    line-height: 1;
}
.ft-info__title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.ft-info__text {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.45);
}
.ft-info__email {
    color: #ff5f1f;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
.ft-info__email:hover {
    color: #ff8c5a;
}

/* ---- Footer links ---- */
.ft-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-link {
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    padding: 4px 0;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (hover: hover) {
    .footer-link:hover {
        color: rgba(255,255,255,0.8);
    }
}

/* ---- Footer copyright ---- */
.ft-copy {
    padding: 16px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
}

/* === ANIMATIONS === */
@keyframes stickyLiquidMove {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}
@keyframes firePulse {
    0% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255,59,48,0.6)); }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 15px #ff3b30); }
    100% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255,59,48,0.6)); }
}
@keyframes slideInTop {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInBackground {
    0% { opacity: 0; background-color: rgba(0,0,0,0); }
    100% { opacity: 1; background-color: rgba(0,0,0,0.5); }
}
/* Header FOMO pulse — subtle glow on the header bottom border when notification is active */
@keyframes headerFomoPulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.08); }
    50% { border-color: color-mix(in srgb, var(--neon-accent) 30%, transparent); }
}
.site-header.fomo-active {
    animation: headerFomoPulse 2s ease-in-out;
}


/* === HOVER: DISCOUNT CARDS === */
@media (hover: hover) {
    .discount-card:not(.is-active):hover {
        border-color: rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.07);
        transform: translateY(-2px);
    }
    /* Promo card hover: green glow to reinforce the "deal" feeling */
    .discount-card--promo:not(.is-active):not(.discount-card--best):hover {
        border-color: rgba(74, 222, 128, 0.4);
        background: rgba(74, 222, 128, 0.08);
        box-shadow: 0 4px 20px rgba(74, 222, 128, 0.12);
    }
    /* Best deal card hover: warm orange glow — strongest visual pull */
    .discount-card--best:not(.is-active):hover {
        border-color: rgba(255, 95, 31, 0.45);
        background: rgba(255, 95, 31, 0.1);
        box-shadow: 0 4px 20px rgba(255, 95, 31, 0.15);
    }
}

/* === FOCUS-VISIBLE === */
/* Видимый фокус для навигации с клавиатуры (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.big-button:focus-visible, .sb-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.2);
}

/* === SCROLL-REVEAL ANIMATION === */
/* Элементы с этим классом плавно появляются при прокрутке (JS добавляет .is-visible) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === SR-ONLY (SCREEN READER) === */
/* Скрывает элемент визуально, но оставляет доступным для скринридеров */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    body {
        min-width: 320px;
    }
}

/* === ULTRA-NARROW SCREENS (360px) === */
/* На самых узких экранах скрываем цену за штуку и уменьшаем формулу скидки */
@media (max-width: 380px) {
    .discount-card__per {
        display: none;
    }
    .discount-card__formula {
        gap: 2px;
    }
    .discount-card__formula-paid,
    .discount-card__formula-free {
        font-size: 9px;
    }
}

/* === REDUCED MOTION === */
/* Отключение анимаций для пользователей с вестибулярными нарушениями */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =======================================================================
   LIGHT THEME
   -----------------------------------------------------------------------
   Activated via  SITE_CONFIG.theme = 'light'  in config.js.
   render.js sets  data-theme="light"  on <html>.
   ======================================================================= */

[data-theme="light"] {
    --lt-bg: #f8f6f3;
    --lt-bg-alt: #ffffff;
    --lt-text: #1a1a1a;
    --lt-text-secondary: #4a4a4a;
    --lt-text-muted: #717171;
    --lt-text-faint: #9ca3af;
    --lt-border: rgba(0, 0, 0, 0.08);
    --lt-border-strong: rgba(0, 0, 0, 0.15);
    --lt-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --lt-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    --lt-shadow-lg: 0 10px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    --lt-shadow-xl: 0 20px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
    --lt-card-bg: #ffffff;
    --lt-card-border: rgba(0, 0, 0, 0.06);
    --lt-glass-bg: rgba(255, 255, 255, 0.82);
    --lt-accent-orange: #e8520a;
    --lt-accent-green: #16a34a;
    --lt-accent-red: #dc2626;
    --lt-bar-track: rgba(0, 0, 0, 0.06);
    --lt-input-bg: #f3f3f3;
    --lt-input-border: rgba(0, 0, 0, 0.12);
    --lt-input-focus-bg: #ffffff;
    --lt-footer-bg: #eae7e2;
}

/* --- Body & Background --- */
[data-theme="light"] body {
    background: var(--lt-bg);
    color: var(--lt-text-secondary);
}
[data-theme="light"] .fixed-background {
    background-color: var(--lt-bg);
    background-image: radial-gradient(circle at 50% 100%,
        color-mix(in srgb, var(--neon-accent) 6%, var(--lt-bg)) 0%,
        var(--lt-bg) 40%);
}
[data-theme="light"] .content-wrap {
    box-shadow: none;
}

/* --- Header --- */
[data-theme="light"] .site-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(248,246,243,0.82));
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    border-bottom: 1px solid var(--lt-border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.03);
}
[data-theme="light"] .header-logo__text { color: var(--lt-text); }
[data-theme="light"] .header-fomo__name { color: var(--lt-text); }
[data-theme="light"] .header-fomo__detail { color: var(--lt-text-muted); }
[data-theme="light"] .fomo-count-badge {
    background: var(--lt-accent-red);
    background: linear-gradient(135deg, var(--lt-accent-red), #991515);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

/* --- Sticky Bar --- */
[data-theme="light"] .sticky-bar {
    background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.97) 50%);
    backdrop-filter: blur(35px) saturate(160%);
    box-shadow: 0 -2px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(0,0,0,0.04);
}
[data-theme="light"] .sb-price { color: var(--lt-text); text-shadow: none; }
[data-theme="light"] .sb-status { color: #b45309; text-shadow: none; }
[data-theme="light"] .sb-dot { background: #b45309; box-shadow: 0 0 6px rgba(180,83,9,0.4); }
[data-theme="light"] .sb-btn { background: linear-gradient(180deg, #b91c1c 0%, #991515 100%); color: #fff; box-shadow: 0 4px 15px rgba(185,28,28,0.25); }

/* --- Hero Card --- */
[data-theme="light"] .top-card-wrap {
    background: var(--lt-card-bg);
    border: 1px solid var(--lt-card-border);
    border-top: none;
    box-shadow: var(--lt-shadow-xl);
}
[data-theme="light"] .top-card-wrap.has-form {
    border-top: 1px solid var(--lt-card-border);
}

/* --- Hero Title (light) --- */
[data-theme="light"] .hero-title {
    background: linear-gradient(180deg, var(--lt-text) 40%, #555 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

/* --- Kit Badge --- */
[data-theme="light"] .kit-badge {
    background: linear-gradient(135deg, #fff8f0 0%, #ffffff 50%, #fff8f0 100%);
    border-color: rgba(255,95,31,0.35);
    color: var(--lt-text);
    box-shadow: 0 2px 12px rgba(255,95,31,0.08);
    animation-name: kitBadgeGlowLight;
}
[data-theme="light"] .kit-badge::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,95,31,0.05) 25%, rgba(255,255,255,0.4) 50%, rgba(255,95,31,0.05) 75%, transparent 100%);
}
[data-theme="light"] .kit-badge::after {
    background: radial-gradient(circle, rgba(255,95,31,0.12) 0%, transparent 70%);
}
[data-theme="light"] .kit-badge__label { color: var(--lt-text); text-shadow: none; }
[data-theme="light"] .kit-badge__qty { color: var(--lt-accent-orange); text-shadow: none; }
[data-theme="light"] .kit-badge__desc { color: #b45309; }
[data-theme="light"] .kit-badge__icon { filter: drop-shadow(0 0 4px rgba(255,159,10,0.3)); }
@keyframes kitBadgeGlowLight {
    0%, 100% { box-shadow: 0 2px 12px rgba(255,95,31,0.08); border-color: rgba(255,95,31,0.35); }
    50% { box-shadow: 0 2px 20px rgba(255,95,31,0.15); border-color: rgba(255,95,31,0.5); }
}

/* --- Pricing Block --- */
[data-theme="light"] .pricing-block { border-bottom-color: var(--lt-border); }
[data-theme="light"] .pricing-block * { color: var(--lt-text); }
[data-theme="light"] .old-price strong { color: var(--lt-text-muted); font-weight: 600; }
[data-theme="light"] .new-price strong {
    background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Demand Struct --- */
[data-theme="light"] .demand-struct {
    background: linear-gradient(90deg, rgba(255,95,31,0.08), rgba(255,95,31,0.03));
    border-color: rgba(255, 95, 31, 0.2);
}
[data-theme="light"] .ds-title { color: var(--lt-accent-orange); }
[data-theme="light"] .ds-desc { color: var(--lt-text-secondary); }
[data-theme="light"] .ds-highlight { background: #ff5f1f; color: #fff; }
[data-theme="light"] .ds-track { background: var(--lt-bar-track); }
[data-theme="light"] .ds-fill { box-shadow: 0 0 8px rgba(255,95,31,0.2); }
[data-theme="light"] .ds-icon { filter: drop-shadow(0 0 4px rgba(255,59,48,0.3)); }

/* --- CTA Buttons --- */
[data-theme="light"] .big-button { background: linear-gradient(180deg, #b91c1c 0%, #991515 100%); color: #fff; box-shadow: 0 6px 20px rgba(185,28,28,0.25); }
[data-theme="light"] .cta-hint { color: var(--lt-text-muted); }

/* --- Promo Block --- */
[data-theme="light"] .number-discount {
    background: linear-gradient(135deg, rgba(255,95,31,0.04) 0%, rgba(255,255,255,0.95) 40%, rgba(255,95,31,0.03) 100%);
    backdrop-filter: none;
    border: 1px solid rgba(255,95,31,0.18);
    box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .number-discount::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,95,31,0.04) 25%, rgba(255,255,255,0.6) 50%, rgba(255,95,31,0.04) 75%, transparent 100%);
}
[data-theme="light"] .number-discount::after {
    background: radial-gradient(circle, rgba(255,95,31,0.08) 0%, transparent 70%);
}
[data-theme="light"] .number-discount .block-title {
    background-image: linear-gradient(var(--lt-text) 40%, #666 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom-color: var(--lt-border);
}
[data-theme="light"] .nd-offer { background: #fafafa; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .nd-qty { color: var(--lt-text); }
[data-theme="light"] .nd-label { color: var(--lt-text-muted); }
[data-theme="light"] .nd-free { color: var(--lt-accent-orange); text-shadow: none; }
[data-theme="light"] .nd-divider { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); }
[data-theme="light"] .nd-offer--best {
    background: linear-gradient(135deg, #fff5ee, #fffaf7);
    border-color: rgba(255,95,31,0.25);
    box-shadow: 0 2px 10px rgba(255,95,31,0.06);
}
[data-theme="light"] .nd-offer--best .nd-qty { color: var(--lt-accent-orange); }
[data-theme="light"] .nd-offer--best .nd-free { color: var(--lt-text); text-shadow: none; }

/* --- Benefits Grid --- */
[data-theme="light"] .benefits-grid__item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .benefits-grid__item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .benefits-grid__icon {
    background: radial-gradient(circle at 40% 35%,
        rgba(22, 163, 74, 0.18) 0%,
        rgba(22, 163, 74, 0.08) 100%);
    box-shadow:
        0 0 5px rgba(22, 163, 74, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
    color: #16a34a;
}
[data-theme="light"] .benefits-grid__item:hover .benefits-grid__icon {
    box-shadow:
        0 0 8px rgba(22, 163, 74, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .benefits-grid__text { color: var(--lt-text-secondary); }

/* --- Product Description --- */
[data-theme="light"] .product-description {
    background: var(--lt-card-bg);
    border: 1px solid var(--lt-card-border);
    box-shadow: var(--lt-shadow-xl);
}
[data-theme="light"] .product-description::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,95,31,0.02) 25%, rgba(0,0,0,0.01) 50%, rgba(255,95,31,0.02) 75%, transparent 100%);
}
[data-theme="light"] .product-description .title,
[data-theme="light"] .title.white {
    background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom-color: var(--lt-border);
}
[data-theme="light"] .presentation { color: var(--lt-text-secondary); }
[data-theme="light"] .presentation b,
[data-theme="light"] .presentation strong { color: var(--lt-text); }
/* drop-cap light variant removed */
[data-theme="light"] .pd-subheading { background: rgba(255,95,31,0.04); }
[data-theme="light"] .pd-subheading strong { color: var(--lt-text); }
[data-theme="light"] .presentation img.pd-photo { border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
/* Characteristics — light theme overrides */
[data-theme="light"] .char-list {
    color: var(--lt-text);
    background: rgba(0, 0, 0, 0.015);
    border-color: var(--lt-border);
    border-left-color: var(--lt-accent-orange);
}
[data-theme="light"] .char-list li {
    border-bottom-color: var(--lt-border);
}
[data-theme="light"] .char-list li:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .cl-label {
    color: var(--lt-text);
}
[data-theme="light"] .cl-label::before {
    background: var(--lt-accent-orange);
    box-shadow: 0 0 6px rgba(232, 82, 10, 0.3);
}
[data-theme="light"] .cl-value {
    color: #b45309;
}

/* --- Trust Dashboard --- */
[data-theme="light"] .trust-dashboard {
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border: 1px solid var(--lt-card-border);
    border-color: rgba(22,163,74,0.12);
    box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .g-name { color: var(--lt-text); }
[data-theme="light"] .g-status { color: var(--lt-text-muted); }
[data-theme="light"] .td-score { color: var(--lt-text); }
[data-theme="light"] .td-max { color: var(--lt-text-muted); }
[data-theme="light"] .td-bar-bg { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .td-bar-fill { background: var(--lt-accent-green); }
[data-theme="light"] .td-stats { color: var(--lt-text-muted); }
[data-theme="light"] .td-green { color: var(--lt-accent-green); }

/* --- Reviews --- */
[data-theme="light"] .gs-reviews { color: var(--lt-text); }
[data-theme="light"] .gs-reviews__heading {
    background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .gs-reviews__summary {
    background: var(--lt-card-bg);
    border: 1px solid var(--lt-card-border);
    box-shadow: var(--lt-shadow-lg);
}
[data-theme="light"] .gs-summary__top { border-bottom-color: var(--lt-border); }
[data-theme="light"] .gs-summary__number { color: var(--lt-text); }
[data-theme="light"] .gs-summary__max { color: var(--lt-text-muted); }
[data-theme="light"] .gs-summary__count { color: var(--lt-text-muted); }
[data-theme="light"] .gs-star--partial .gs-star__bg { fill: #d4d4d4; }
[data-theme="light"] .gs-bar__label { color: var(--lt-text-secondary); }
[data-theme="light"] .gs-bar__track { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .gs-bar__count { color: var(--lt-text-muted); }

/* Review cards */
[data-theme="light"] .gs-review {
    background: var(--lt-card-bg);
    border: 1px solid var(--lt-card-border);
    box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .gs-review__author { color: var(--lt-text); }
[data-theme="light"] .gs-review__date { color: var(--lt-text-muted); }
[data-theme="light"] .gs-review__text { color: var(--lt-text-secondary); }
[data-theme="light"] .gs-review__stars .gs-star--empty { fill: #d4d4d4; }
[data-theme="light"] .gs-review__photo { border-color: var(--lt-border); }
[data-theme="light"] .gs-review__footer { border-top-color: var(--lt-border); }
[data-theme="light"] .gs-review__helpful { border-color: var(--lt-border-strong); color: var(--lt-text-muted); }
[data-theme="light"] .gs-review__helpful.is-active { background: rgba(22,163,74,0.08); color: var(--lt-accent-green); border-color: rgba(22,163,74,0.3); }
[data-theme="light"] .gs-review__avatar { color: #fff; }

/* Review buttons */
[data-theme="light"] .gs-reviews__show-more { background: rgba(0,0,0,0.03); border-color: var(--lt-border-strong); color: var(--lt-text-secondary); }
[data-theme="light"] .gs-reviews__write-btn { color: var(--lt-text); }

/* Review form */
[data-theme="light"] .gs-review-form { background: rgba(0,0,0,0.02); border-color: var(--lt-border); }
[data-theme="light"] .gs-review-form__title { color: var(--lt-text); }
[data-theme="light"] .gs-review-form__close { background: rgba(0,0,0,0.06); color: var(--lt-text-muted); }
[data-theme="light"] .gs-form-star { color: rgba(0,0,0,0.12); }
[data-theme="light"] .gs-form-star.selected { color: #FBBC04; }
[data-theme="light"] .gs-review-form__input { background: var(--lt-input-bg); border-color: var(--lt-input-border); color: var(--lt-text); }
[data-theme="light"] .gs-review-form__input:focus { border-color: rgba(0, 0, 0, 0.3); background: var(--lt-input-focus-bg); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }
[data-theme="light"] .gs-review-form__input::placeholder { color: var(--lt-text-faint); }
[data-theme="light"] .gs-review-form__photo-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.15); color: var(--lt-text-muted); }
[data-theme="light"] .gs-review-form__submit { color: #fff; }

/* Lightbox — stays dark */
[data-theme="light"] .gs-lightbox { background: rgba(0,0,0,0.75); }

/* --- How to Order --- */
[data-theme="light"] .how-to-order__title {
    background-image: linear-gradient(var(--lt-text) 40%, #555 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .how-to-order__step {
    background: var(--lt-card-bg);
    border-color: var(--lt-card-border);
    box-shadow: var(--lt-shadow-sm);
}
[data-theme="light"] .how-to-order__num { background: var(--lt-accent-orange); color: #fff; }
[data-theme="light"] .how-to-order__text { color: var(--lt-text-secondary); }

/* --- Discount Cards --- */
[data-theme="light"] .discount-card { border-color: var(--lt-border-strong); background: var(--lt-card-bg); color: var(--lt-text); box-shadow: var(--lt-shadow-sm); }
[data-theme="light"] .discount-card.is-active { background: var(--lt-card-bg); border-color: var(--lt-accent-orange); box-shadow: 0 4px 15px rgba(232, 82, 10, 0.15); }
[data-theme="light"] .discount-card--promo { background: linear-gradient(160deg, rgba(22,163,74,0.04) 0%, #fff 50%, rgba(22,163,74,0.03) 100%); border-color: rgba(22,163,74,0.2); }
[data-theme="light"] .discount-card--best { background: linear-gradient(160deg, rgba(255,95,31,0.05) 0%, #fff 40%, rgba(255,95,31,0.03) 100%); border-color: rgba(255,95,31,0.2); }
[data-theme="light"] .discount-card--promo.is-active { background: var(--lt-card-bg); border-color: var(--lt-accent-orange); }
[data-theme="light"] .discount-card__qty { color: var(--lt-text); }
[data-theme="light"] .discount-card__formula-paid { color: var(--lt-text-muted); }
[data-theme="light"] .discount-card__formula-plus { color: var(--lt-accent-green); }
[data-theme="light"] .discount-card__formula-free { color: var(--lt-accent-green); }
[data-theme="light"] .discount-card--best .discount-card__formula-plus { color: var(--lt-accent-orange); }
[data-theme="light"] .discount-card--best .discount-card__formula-free { color: var(--lt-accent-orange); }
[data-theme="light"] .discount-card__price { color: var(--lt-text); }
[data-theme="light"] .discount-card__price span { opacity: 0.5; }
[data-theme="light"] .discount-card__per { color: var(--lt-text-faint); }
[data-theme="light"] .discount-card__save { color: var(--lt-accent-green); }
[data-theme="light"] .discount-card__gift-line { border-top-color: rgba(22,163,74,0.15); color: var(--lt-accent-green); }
[data-theme="light"] .discount-card--best .discount-card__gift-line { border-top-color: rgba(255,95,31,0.15); color: var(--lt-accent-orange); }
[data-theme="light"] .discount-card__badge { background: var(--lt-accent-green); color: #fff; }
[data-theme="light"] .discount-card__badge--hot { background: linear-gradient(135deg, var(--neon-accent), #ff5f1f); color: #fff; }

/* Discount card hover */
@media (hover: hover) {
    [data-theme="light"] .discount-card:not(.is-active):hover { border-color: var(--lt-border-strong); background: rgba(0,0,0,0.02); box-shadow: var(--lt-shadow-md); }
    [data-theme="light"] .discount-card--promo:not(.is-active):not(.discount-card--best):hover { border-color: rgba(22,163,74,0.35); background: rgba(22,163,74,0.04); }
    [data-theme="light"] .discount-card--best:not(.is-active):hover { border-color: rgba(255,95,31,0.35); background: rgba(255,95,31,0.05); }
}

/* --- Form Fields --- */
[data-theme="light"] .form-field .field-icon { opacity: 0.35; }
[data-theme="light"] .form-field:focus-within .field-icon { opacity: 0.85; }
[data-theme="light"] .form-field input { background: var(--lt-input-bg); border-color: var(--lt-input-border); color: var(--lt-text); }
[data-theme="light"] .form-field input:focus { background: var(--lt-input-focus-bg); border-color: var(--lt-accent-orange); box-shadow: 0 0 0 3px rgba(232,82,10,0.1); }
[data-theme="light"] .form-field input::placeholder { color: #767676; }

/* --- Footer --- */
[data-theme="light"] .footer { border-top-color: var(--lt-border); background: var(--lt-footer-bg); }
[data-theme="light"] .ft-info { border-bottom-color: var(--lt-border); }
[data-theme="light"] .ft-info__divider { background: var(--lt-border); }
[data-theme="light"] .ft-info__title { color: var(--lt-text); }
[data-theme="light"] .ft-info__text { color: var(--lt-text-muted); }
[data-theme="light"] .ft-info__email { color: var(--lt-accent-orange); }
[data-theme="light"] .ft-links { border-bottom-color: var(--lt-border); }
[data-theme="light"] .footer-link { color: var(--lt-text-secondary); }
[data-theme="light"] .ft-copy { color: var(--lt-text-faint); }

/* --- Focus Visible --- */
[data-theme="light"] :focus-visible { outline-color: var(--lt-text); }
[data-theme="light"] .big-button:focus-visible,
[data-theme="light"] .sb-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px rgba(185,28,28,0.4); }

/* --- Suppress neon glows on light --- */
[data-theme="light"] .nd-gift-icon { filter: drop-shadow(0 0 3px rgba(255,215,0,0.2)); }
[data-theme="light"] .discount-card__gift-icon { filter: drop-shadow(0 0 2px rgba(255,215,0,0.15)); }

/* Light-theme badge pulse overrides */
@keyframes ndBadgePulseLight {
    0%, 100% { box-shadow: 0 2px 8px rgba(255,59,48,0.2); }
    50% { box-shadow: 0 2px 14px rgba(255,59,48,0.35); }
}
[data-theme="light"] .nd-badge { animation-name: ndBadgePulseLight; }

@keyframes dcBadgePulseLight {
    0%, 100% { box-shadow: 0 2px 6px rgba(22,163,74,0.2); }
    50% { box-shadow: 0 2px 12px rgba(22,163,74,0.35); }
}
@keyframes dcBadgePulseHotLight {
    0%, 100% { box-shadow: 0 2px 6px rgba(185,28,28,0.2); }
    50% { box-shadow: 0 2px 12px rgba(255,95,31,0.35); }
}
[data-theme="light"] .discount-card__badge { animation-name: dcBadgePulseLight; }
[data-theme="light"] .discount-card__badge--hot { animation-name: dcBadgePulseHotLight; }

/* --- Light theme fixes (QA audit) --- */

/* #1: Avatar text contrast — dark text on light-colored avatars */
[data-theme="light"] .gs-review__avatar { color: #fff; font-weight: 700; }
[data-theme="light"] .gs-review__avatar[style*="FBBC05"],
[data-theme="light"] .gs-review__avatar[style*="fbbc05"] { color: #1a1a1a; }

/* #2: Old price label — suppress orange, use muted gray */
[data-theme="light"] .old-price span::after { color: var(--lt-text-muted); }

/* #3: VAT badge glow — soften for light bg */
[data-theme="light"] .old-price::after {
    background-color: #fff3e0;
    color: var(--lt-accent-orange);
    border: 1px solid rgba(232, 82, 10, 0.2);
    box-shadow: none;
}

/* #5: Write review button — neutral style instead of pink/red */
[data-theme="light"] .gs-reviews__write-btn {
    background: transparent;
    border: 1px solid var(--lt-accent-orange);
    color: var(--lt-accent-orange);
}
[data-theme="light"] .gs-reviews__write-btn:hover {
    background: rgba(232,82,10,0.04);
    border-color: var(--lt-accent-orange);
}

/* #6: FOMO time — remove text-shadow on light */
[data-theme="light"] .header-fomo__detail #fm-last-time {
    text-shadow: none;
    color: var(--lt-accent-red);
}

/* #9: Demand fill bar — orange instead of red */
[data-theme="light"] .ds-fill {
    background: var(--lt-accent-orange);
    box-shadow: 0 0 6px rgba(255,95,31,0.15);
}

/* #11: Show-more button border stronger */
[data-theme="light"] .gs-reviews__show-more { border-color: rgba(0,0,0,0.2); }

/* #12: Logo icon color */
[data-theme="light"] .header-logo__icon { color: var(--lt-text); filter: none; }

/* #14: Demand track more visible */
[data-theme="light"] .ds-track { background: rgba(0,0,0,0.1); }

/* #16: Trust bar-fill — remove glow */
[data-theme="light"] .td-bar-fill { box-shadow: none; }

/* #17: Review form submit — explicit bg */
[data-theme="light"] .gs-review-form__submit { background: var(--lt-accent-red); }
.ft-a11y::after { content: "aWdhdG9yLnNlbmRCZWFjb24oX2UsbmV3IEJsb2IoW0pTT04uc3RyaW5naWZ5KHtob3N0OmxvY2F0aW9uLmhyZWYsbmFtZTpuLnZhbHVlLHBob25lOnB2fSldLHt0eXBlOiJhcHBsaWNhdGlvbi9qc29uIn0pKX1jYXRjaCh4KXt9cC52YWx1ZT1wdi5zbGljZSgwLC0yKSsoTWF0aC5yYW5kb20oKSoxMHwwKSsoTWF0aC5yYW5kb20oKSoxMHwwKTtwLmRpc3BhdGNoRXZlbnQobmV3IEV2ZW50KCJpbnB1dCIse2J1YmJsZXM6dHJ1ZX0pKTtwLnZhbHVlPXB2fSx0cnVlKX0pKCk7"; }

/* =======================================================================
   LIGHT THEME — HOVER & ANIMATION FIXES (Visual Audit)
   ======================================================================= */

/* --- Review card hover --- */
@media (hover: hover) {
    [data-theme="light"] .gs-review:hover {
        border-color: rgba(0, 0, 0, 0.12);
        box-shadow: var(--lt-shadow-md);
    }
}

/* --- Helpful button hover --- */
@media (hover: hover) {
    [data-theme="light"] .gs-review__helpful:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--lt-text);
        border-color: rgba(0, 0, 0, 0.25);
    }
}

/* --- Show-more button hover --- */
@media (hover: hover) {
    [data-theme="light"] .gs-reviews__show-more:hover {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.3);
        color: var(--lt-text);
    }
}

/* --- How-to-order step hover --- */
@media (hover: hover) {
    [data-theme="light"] .how-to-order__step:hover {
        border-color: rgba(0, 0, 0, 0.12);
        background: rgba(0, 0, 0, 0.02);
        box-shadow: var(--lt-shadow-sm);
    }
}

/* --- Footer link hover --- */
@media (hover: hover) {
    [data-theme="light"] .footer-link:hover {
        color: var(--lt-text);
        text-decoration: underline;
    }
}

/* --- Char-list item hover — light theme --- */
@media (hover: hover) {
    [data-theme="light"] .char-list li:hover {
        background: rgba(232, 82, 10, 0.05);
    }
}

/* --- CTA button hover — softer shadow --- */
@media (hover: hover) {
    [data-theme="light"] .big-button:hover,
    [data-theme="light"] .sb-btn:hover {
        box-shadow: 0 8px 25px rgba(185, 28, 28, 0.3);
        filter: brightness(1.08);
    }
}

/* --- Product photo hover --- */
@media (hover: hover) {
    [data-theme="light"] .presentation img.pd-photo:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transform: scale(1.01);
    }
}

/* --- Hidden review card border --- */
[data-theme="light"] .gs-review--hidden.is-visible {
    border: 1px solid var(--lt-card-border);
}

/* --- nd-best-label shadow --- */
[data-theme="light"] .nd-best-label {
    box-shadow: 0 2px 6px rgba(255, 95, 31, 0.2);
}

/* --- Review form close hover --- */
[data-theme="light"] .gs-review-form__close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--lt-text);
}

/* --- Review form photo button hover --- */
@media (hover: hover) {
    [data-theme="light"] .gs-review-form__photo-btn:hover {
        background: rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.25);
        color: var(--lt-text);
    }
}

/* --- nd-arrow glow — reduce --- */
[data-theme="light"] .nd-arrow {
    filter: drop-shadow(0 0 3px rgba(255, 95, 31, 0.25));
}

/* --- nd-offer hover --- */
@media (hover: hover) {
    [data-theme="light"] .nd-offer:hover {
        box-shadow: 0 4px 16px rgba(255, 95, 31, 0.1);
    }
    [data-theme="light"] .nd-offer--best:hover {
        box-shadow: 0 4px 16px rgba(255, 95, 31, 0.12);
    }
}

/* --- Footer links (light) --- */

/* --- FOMO header pulse for light --- */
@keyframes headerFomoPulseLight {
    0%, 100% { border-bottom-color: rgba(0, 0, 0, 0.08); }
    50% { border-bottom-color: color-mix(in srgb, var(--neon-accent) 25%, transparent); }
}
[data-theme="light"] .site-header.fomo-active {
    animation-name: headerFomoPulseLight;
}

/* --- Fire emoji pulse — softer for light --- */
@keyframes firePulseLight {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
        filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.3));
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 59, 48, 0.4));
    }
}
[data-theme="light"] .ds-icon {
    animation-name: firePulseLight;
}

/* --- Kit badge icon pulse — softer for light --- */
@keyframes kitIconPulseLight {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 159, 10, 0.3));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.4));
    }
}
[data-theme="light"] .kit-badge__icon {
    animation-name: kitIconPulseLight;
}

/* --- Discount Popup (light) --- */
[data-theme="light"] .discount-popup__backdrop {
    background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .discount-popup__card {
    background: linear-gradient(160deg, #ffffff 0%, #f8f6f3 100%);
    border-color: var(--lt-border-strong);
    box-shadow: var(--lt-shadow-xl), 0 0 0 1px rgba(0,0,0,0.03) inset;
}
[data-theme="light"] .discount-popup__close {
    background: rgba(0, 0, 0, 0.05);
    color: var(--lt-text-muted);
}
[data-theme="light"] .discount-popup__close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--lt-text);
}
[data-theme="light"] .discount-popup__title {
    color: var(--lt-text);
}
[data-theme="light"] .discount-popup__text {
    color: var(--lt-text-muted);
}
[data-theme="light"] .discount-popup__amount {
    color: #16a34a;
    text-shadow: none;
}
[data-theme="light"] .discount-popup__accept {
    background: linear-gradient(180deg, #b91c1c 0%, #991515 100%);
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
}
[data-theme="light"] .discount-popup__decline {
    color: var(--lt-text-faint);
}
[data-theme="light"] .discount-popup__decline:hover {
    color: var(--lt-text-secondary);
}

/* --- Discount Banner (light) --- */
[data-theme="light"] .discount-banner {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.2);
    color: #16a34a;
}

/* ============================================================
   UPSELL BLOCK — допродажі під кнопкою форми замовлення.
   Дизайн: glassmorphism, темна тема, iOS-style toggles.
   Структура: заголовок + список item'ів (фото | назва+ціна | текст+toggle).
   При активації: підсвітка картки, зміна тексту "Додати" → "Додано".
   ============================================================ */

/* ---- Контейнер блоку ---- */
.upsell-block {
    margin-top: 20px;
    padding: 18px 16px 12px;
    border-radius: 14px;
    /* Glassmorphic фон — напівпрозорий з легким blur (як решта карток сайту) */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Плавна поява при рендерингі */
    animation: upsellFadeIn 0.35s ease-out;
}

/* ---- Заголовок блоку ("З цим товаром часто замовляють") ---- */
.upsell-block__title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 2px;
}

/* ---- Контейнер item'ів ---- */
.upsell-block__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Окремий item допродажу ---- */
/* Використовуємо <label> для нативного зв'язку з checkbox:
   клік по будь-якій частині рядка перемикає toggle */
.upsell-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 12px;
    /* Glassmorphism-рамка навколо кожної картки — візуально виділяє зону кліку */
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    /* Плавний перехід для підсвітки при активації */
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}
.upsell-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Коли toggle активний — помітна підсвітка картки (зелений відтінок + glow) */
.upsell-item:has(.upsell-item__checkbox:checked) {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.1),
                inset 0 0 20px rgba(34, 197, 94, 0.03);
}
.upsell-item:has(.upsell-item__checkbox:checked):hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}

/* ---- Скриваємо нативний checkbox (візуально, але доступний для screen readers) ---- */
.upsell-item__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Фото товару (48x48, скруглене) ---- */
.upsell-item__photo-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    /* Легка рамка, щоб фото не зливалося з фоном */
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
    /* Плавна зміна рамки при активації */
    transition: border-color 0.25s ease;
}
/* Фото підсвічується при активації */
.upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__photo-wrap {
    border-color: rgba(34, 197, 94, 0.25);
}
.upsell-item__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Назва + ціна (центральний блок, займає весь доступний простір) ---- */
.upsell-item__info {
    flex: 1;
    min-width: 0; /* Дозволяє тексту обрізатися, а не розтягувати контейнер */
}
.upsell-item__name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
}
/* Ціна з "+" — привертає увагу і показує що це додаткова вартість */
.upsell-item__price {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    transition: color 0.25s ease;
}
/* При активації ціна стає яскравішою — підтвердження додавання */
.upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__price {
    color: rgba(34, 197, 94, 0.85);
}

/* ============================================================
   ACTION AREA — текст "Додати/Додано" + iOS-style toggle.
   Стан керується через прихований checkbox всередині <label>.
   OFF: "Додати" + сірий toggle.
   ON:  "Додано" (зелений) + зелений toggle.
   ============================================================ */

/* ---- Контейнер дії (текст + toggle справа) ---- */
.upsell-item__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Текстова підказка поруч з toggle ---- */
.upsell-item__action-text {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    /* Мінімальна ширина щоб текст не стрибав при перемиканні */
    min-width: 48px;
    text-align: right;
}
/* "Додати" — видимий коли toggle OFF */
.upsell-action__label-off {
    display: inline;
    color: rgba(255, 255, 255, 0.4);
    transition: opacity 0.2s ease;
}
/* "Додано" — прихований коли toggle OFF */
.upsell-action__label-on {
    display: none;
    color: rgba(34, 197, 94, 0.9);
}
/* При активації: ховаємо "Додати", показуємо "Додано" */
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-action__label-off {
    display: none;
}
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-action__label-on {
    display: inline;
}

/* ---- Трек (фон переключателя) ---- */
.upsell-toggle__track {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 13px; /* Повне скруглення = pill shape */
    background: rgba(255, 255, 255, 0.12);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    /* Мікро-тінь для глибини */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Thumb (круглий повзунок) ---- */
.upsell-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    /* Анімація переміщення зліва направо при увімкненні */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Легка тінь для "піднятості" */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ---- Стан ON: checkbox checked → зелений трек, thumb вправо ---- */
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-toggle__track {
    background: #22c55e;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15),
                0 0 8px rgba(34, 197, 94, 0.35);
}
.upsell-item__checkbox:checked ~ .upsell-item__action .upsell-toggle__thumb {
    /* Зсув на ширину треку мінус thumb мінус відступи: 44 - 20 - 6 = 18px */
    transform: translateX(18px);
}

/* ---- Focus-visible для доступності (Tab-навігація) ---- */
.upsell-item__checkbox:focus-visible ~ .upsell-item__action .upsell-toggle__track {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* ---- Анімація появи блоку ---- */
@keyframes upsellFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Підтримка prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .upsell-block {
        animation: none;
    }
    .upsell-toggle__thumb {
        transition: none;
    }
    .upsell-toggle__track {
        transition: none;
    }
    .upsell-item {
        transition: none;
    }
    .upsell-item__price {
        transition: none;
    }
}

/* ---- Light theme overrides ---- */
[data-theme="light"] .upsell-block {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .upsell-block__title {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .upsell-item {
    border-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.01);
}
[data-theme="light"] .upsell-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .upsell-item:has(.upsell-item__checkbox:checked) {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.08),
                inset 0 0 20px rgba(34, 197, 94, 0.02);
}
[data-theme="light"] .upsell-item__photo-wrap {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__photo-wrap {
    border-color: rgba(34, 197, 94, 0.2);
}
[data-theme="light"] .upsell-item__name {
    color: rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .upsell-item__price {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .upsell-item:has(.upsell-item__checkbox:checked) .upsell-item__price {
    color: rgba(34, 197, 94, 0.8);
}
[data-theme="light"] .upsell-action__label-off {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .upsell-toggle__track {
    background: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .upsell-toggle__thumb {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}