body { font-family: 'Inter', sans-serif; }
        .font-heading { font-family: 'Lora', serif; }

        .nav-link {
            padding: 6px 16px; border-radius: 8px;
            transition: background-color 0.25s ease, color 0.25s ease;
            color: #2d2d2d; font-weight: 500; font-size: 14px; white-space: nowrap;
        }
        .nav-link:hover, .nav-link.active { background-color: #3a7d44; color: #fff; }

        .top-link {
            color: rgba(255,255,255,0.85); font-size: 13px;
            transition: color 0.2s ease; text-decoration: none;
        }
        .top-link:hover { color: #fff; text-decoration: underline; }
        .top-link::after { content: '·'; margin: 0 8px; color: rgba(255,255,255,0.35); }
        .top-link:last-child::after { content: ''; margin: 0; }

        .messenger-icon {
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .messenger-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

        .header-icon {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease;
            color: #6b7280; cursor: pointer; position: relative;
        }
        .header-icon:hover { background-color: #f3f4f6; color: #3a7d44; }

        .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
        .hero-slide.active { opacity: 1; }

        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #f0f0f0;
        }
        .product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
        .product-card img { transition: transform 0.5s ease; }
        .product-card:hover img { transform: scale(1.05); }

        .category-card { border-radius: 12px; overflow: hidden; position: relative; transition: transform 0.3s ease; }
        .category-card:hover { transform: translateY(-3px); }
        .category-card img { transition: transform 0.5s ease; }
        .category-card:hover img { transform: scale(1.08); }
        .category-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%, transparent 100%); }

        .occasion-card { border-radius: 12px; overflow: hidden; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .occasion-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        .occasion-card img { transition: transform 0.5s ease; }
        .occasion-card:hover img { transform: scale(1.06); }

        .badge-sale, .badge-hit, .badge-new, .badge-special {
            position: absolute; top: 10px; left: 10px;
            font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; z-index: 2;
        }
        .badge-sale { background: #e84393; color: white; }
        .badge-hit { background: #3a7d44; color: white; }
        .badge-new { background: #2563eb; color: #fff; }
        .badge-special { background: #f59e0b; color: #fff; }

        .heart-btn {
            position: absolute; top: 10px; right: 10px; z-index: 3;
            width: 30px; height: 30px; border-radius: 50%;
            background: white; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: all 0.2s ease;
            cursor: pointer; border: none;
        }
        .heart-btn:hover { transform: scale(1.1); }
        .heart-btn.liked { background: #e84393; }
        .heart-btn.liked svg { fill: white; stroke: white; }

        .nav-scroll::-webkit-scrollbar { display: none; }
        .nav-scroll { -ms-overflow-style: none; scrollbar-width: none; }
        html { scroll-behavior: smooth; }

        /* Галерея */
        .thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color 0.2s; flex-shrink: 0; }
        .thumb.active { border-color: #3a7d44; }
        .thumb img { width: 100%; height: 100%; object-fit: cover; }
        .main-image { border-radius: 16px; overflow: hidden; background: #f3f4f6; aspect-ratio: 1; }
        .main-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }

        /* Размеры */
        .size-btn { padding: 8px 20px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 13px; font-weight: 500; color: #374151; background: white; cursor: pointer; transition: all 0.2s; text-align: center; }
        .size-btn:hover { border-color: #3a7d44; color: #3a7d44; }
        .size-btn.active { border-color: #3a7d44; background: #e8f5e9; color: #3a7d44; }
        .size-btn .size-price { display: block; font-size: 11px; color: #9ca3af; margin-top: 2px; }
        .size-btn.active .size-price { color: #3a7d44; }
        
        /* CSS для msGallery */
        #msGallery {
         width: 100%;
        }
        #msGallery .fotorama {
         width: 100% !important;
        }
        #msGallery .fotorama__stage {
         min-height: 600px;
        }
        #msGallery .fotorama__img {
         object-fit: contain;
        }

        /* Табы */
        .tab-btn { padding: 10px 0; font-size: 14px; font-weight: 500; color: #9ca3af; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
        .tab-btn:hover { color: #374151; }
        .tab-btn.active { color: #3a7d44; border-bottom-color: #3a7d44; }
        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* Дропдаун «Повод» */
        .nav-dropdown { position: relative; }
        .nav-dropdown-menu {
            position: absolute; top: 100%; left: 0;
            background: white; border: 1px solid #e5e7eb; border-radius: 12px;
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
            padding: 20px 24px; min-width: 480px;
            opacity: 0; visibility: hidden; transform: translateY(4px);
            transition: all 0.2s ease; z-index: 100;
            display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
        }
        .nav-dropdown:hover .nav-dropdown-menu,
        .nav-dropdown.open .nav-dropdown-menu {
            opacity: 1; visibility: visible; transform: translateY(0);
        }
        .nav-dropdown-col h4 {
            font-size: 11px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 8px;
        }
        .nav-dropdown-col a {
            display: block; padding: 5px 0; font-size: 13px; color: #374151;
            transition: color 0.15s;
        }
        .nav-dropdown-col a:hover { color: #3a7d44; }

        /* Корзина */
        .cart-item { transition: opacity 0.3s, transform 0.3s; }
        .cart-item.removing { opacity: 0; transform: translateX(-20px); }

        .addon-card { border: 2px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; background: white; }
        .addon-card:hover { border-color: #3a7d44; }
        .addon-card.selected { border-color: #3a7d44; background: #e8f5e9; }
        .addon-card .addon-check { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
        .addon-card.selected .addon-check { border-color: #3a7d44; background: #3a7d44; }
        .addon-check svg { width: 12px; height: 12px; opacity: 0; }
        .addon-card.selected .addon-check svg { opacity: 1; }

        .pay-option { border: 2px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: all 0.2s; background: white; display: flex; align-items: center; gap: 10px; }
        .pay-option:hover { border-color: #3a7d44; }
        .pay-option.selected { border-color: #3a7d44; background: #e8f5e9; }
        .pay-option .pay-radio { width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
        .pay-option.selected .pay-radio { border-color: #3a7d44; }
        .pay-option.selected .pay-radio::after { content: ''; width: 8px; height: 8px; background: #3a7d44; border-radius: 50%; }


        .toast {
            position: fixed; bottom: 24px; right: 24px;
            background: #3a7d44; color: white;
            padding: 12px 20px; border-radius: 10px;
            font-size: 13px; font-weight: 500;
            box-shadow: 0 6px 20px rgba(58,125,68,0.3);
            transform: translateY(120px); opacity: 0;
            transition: all 0.3s ease; z-index: 9999;
        }
        .toast.show { transform: translateY(0); opacity: 1; }

        .modal-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
        }
        .modal-backdrop.open { opacity: 1; pointer-events: auto; }
        .modal-content {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            background: white; border-radius: 16px; padding: 32px;
            z-index: 1001; max-width: 400px; width: 90%;
            opacity: 0; pointer-events: none; transition: all 0.3s ease;
        }
        .modal-content.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

        .mobile-menu { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
        .mobile-menu.open { transform: translateX(0); }

        @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
        .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

        .reviews-track { display: flex; gap: 16px; transition: transform 0.4s ease; }
        .review-card { min-width: 100%; }
        @media(min-width:768px) { .review-card { min-width: calc(33.333% - 11px); } }

        .faq-item { border-bottom: 1px solid #f0f0f0; }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 20px; }
        .faq-item.open .faq-answer { max-height: 200px; padding: 0 20px 16px 20px; }
        .faq-item.open .faq-chevron { transform: rotate(180deg); }
        .faq-chevron { transition: transform 0.3s ease; }

        .float-tg {
            position: fixed; bottom: 24px; left: 24px; z-index: 900;
            width: 52px; height: 52px; border-radius: 50%;
            background: #0088cc; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 14px rgba(0,136,204,0.4);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }
        .float-tg:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,136,204,0.5); }

        .counter-value { font-variant-numeric: tabular-nums; }

        .pay-icon { opacity: 0.5; transition: opacity 0.2s; filter: grayscale(100%); }
        .pay-icon:hover { opacity: 0.8; filter: grayscale(0%); }

        /* Hero списки преимуществ */
        .hero-perk {
            display: flex; align-items: center; gap: 8px;
            background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
            padding: 6px 14px; border-radius: 8px;
            font-size: 13px; color: white; font-weight: 400;
            border: 1px solid rgba(255,255,255,0.15);
        }
        .hero-perk svg { flex-shrink: 0; }
        
        /* Компактные фильтры */
        .filter-section{border-bottom:1px solid #f3f4f6;padding-bottom:12px;margin-bottom:12px}
        .filter-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
        .filter-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin-bottom:6px;cursor:pointer;display:flex;align-items:center;user-select:none}
        .filter-title svg{transition:transform .2s;flex-shrink:0}
        .filter-title.collapsed svg{transform:rotate(-90deg)}
        .filter-body{overflow:hidden;transition:max-height .3s ease}
        .filter-body.collapsed{max-height:0!important}
        .filter-check{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:12px;color:#374151;transition:color .15s}
        .filter-check:hover{color:#3a7d44}
        .filter-check input{display:none}
        .filter-check .box{width:14px;height:14px;border:2px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
        .filter-check input:checked+.box{background:#3a7d44;border-color:#3a7d44}
        .filter-check .count{font-size:10px;color:#9ca3af;margin-left:auto}
        .color-dot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;position:relative}
        .color-dot:hover{transform:scale(1.15)}
        .color-dot.active{border-color:#3a7d7e;box-shadow:0 0 0 2px #e8f5e9}
        .color-dot.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:10px;font-weight:700}
        .price-input{width:100%;padding:5px 8px;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;text-align:center;color:#374151;outline:none;transition:border-color .15s}
        .price-input:focus{border-color:#3a7d44}

        .filter-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:#e8f5e9;color:#3a7d44;border-radius:20px;font-size:12px;font-weight:500}
        .filter-tag button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;color:#3a7d44;opacity:.6;transition:opacity .15s}
        .filter-tag button:hover{opacity:1}

        .sort-select{appearance:none;background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;padding:7px 32px 7px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;color:#374151;outline:none;cursor:pointer;transition:border-color .15s}
        .sort-select:focus{border-color:#3a7d44}

        .page-btn{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:#374151;cursor:pointer;transition:all .15s;background:white}
        .page-btn:hover{border-color:#3a7d44;color:#3a7d44}
        .page-btn.active{background:#3a7d44;color:white;border-color:#3a7d44}
        .page-btn:disabled{opacity:.4;cursor:not-allowed}
        .page-btn.dots{border:none;width:auto;font-size:14px}

        .promo-banner{border-radius:12px;overflow:hidden;position:relative;min-height:220px;display:block}
        .promo-banner img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
        .promo-banner .promo-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(58,125,68,.88) 0%,rgba(45,98,53,.92) 100%)}
        .promo-banner .promo-content{position:relative;z-index:1;padding:24px;display:flex;flex-direction:column;justify-content:center;height:100%}

        .faq-item{border-bottom:1px solid #f0f0f0}
        .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 20px}
        .faq-item.open .faq-answer{max-height:200px;padding:0 20px 16px 20px}
        .faq-item.open .faq-chevron{transform:rotate(180deg)}
        .faq-chevron{transition:transform .3s ease}

        /* Жесткое переопределение бейджа скидки, чтобы внешний CSS не мешал */
        .badge-sale{
            position:absolute !important;
            bottom:12px !important;
            left:12px !important;
            top:auto !important;
            right:auto !important;
            font-size:11px !important;
            font-weight:600 !important;
            padding:4px 10px !important;
            border-radius:6px !important;
            z-index:2 !important;
            background:#e84393 !important;
            color:white !important;
            height:auto !important;
            width:fit-content !important;
            max-width:90% !important;
            line-height:1.2 !important;
            transform:none !important;
        }
        
        /* Бейджи в карточке товара */
        .product-badges span {
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 6px;
        }
        .product-badges .badge-new,
        .product-badges .badge-hit,
        .product-badges .badge-special {
        position: static !important;
        }
        
        /* Состав букета, список */
        .composition-list p{
        display:flex;
        justify-content:space-between;
        gap:20px;
        padding:10px 0;
        border-bottom:1px solid #f1f5f9;
        }

        .composition-list p:last-child{
        border-bottom:none;
        }