{"content": "\n
\n

\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0430: core/base.html

\n \n
\n
\n
\n {% load static %}\n{% load safe_compress %}\n<!DOCTYPE html>\n<html lang="ru">\n\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>{% block title %}\u0412\u0435\u0439\u043f \u0448\u043e\u043f \u0432 \u041c\u0438\u043d\u0441\u043a\u0435 | \u041a\u0443\u043f\u0438\u0442\u044c \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0433\u0430\u0440\u0435\u0442\u044b \u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438{% endblock %}</title>\n <meta name="description"\n content="\u041a\u0443\u043f\u0438\u0442\u044c \u0432\u0435\u0439\u043f\u044b, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0433\u0430\u0440\u0435\u0442\u044b \u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 \u0432 \u041c\u0438\u043d\u0441\u043a\u0435. \u0428\u0438\u0440\u043e\u043a\u0438\u0439 \u0430\u0441\u0441\u043e\u0440\u0442\u0438\u043c\u0435\u043d\u0442, \u043d\u0438\u0437\u043a\u0438\u0435 \u0446\u0435\u043d\u044b. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0446\u0438\u044f \u0438 \u043d\u043e\u0432\u0438\u043d\u043a\u0438 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u0435\u0434\u0435\u043b\u044e.">\n <meta name="keywords"\n content="\u0432\u0435\u0439\u043f, \u0432\u0435\u0439\u043f \u0448\u043e\u043f, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0433\u0430\u0440\u0435\u0442\u044b, \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0432\u0435\u0439\u043f\u0430, \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043a\u0438, \u043f\u043e\u0434\u044b, \u0441\u043d\u044e\u0441, \u0438\u043d\u0433\u0430\u043b\u044f\u0442\u043e\u0440\u044b, \u041c\u0438\u043d\u0441\u043a, \u0411\u0435\u043b\u0430\u0440\u0443\u0441\u044c">\n <!-- Favicon - \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 -->\n <link rel="icon" type="image/x-icon" href="/favicon.ico">\n <link rel="icon" type="image/png" sizes="32x32" href="{% static 'core/images/favicon.png' %}">\n <link rel="apple-touch-icon" sizes="180x180" href="{% static 'core/images/favicon.png' %}">\n <link rel="shortcut icon" href="/favicon.ico">\n <link rel="canonical" href="https://smoketeamby.shop/" />\n\n <!-- Critical CSS - inline \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 -->\n <style>\n {\n % include 'core/critical-css.html' %\n }\n </style>\n\n <!-- \u0421\u0436\u0430\u0442\u044b\u0435 CSS \u0444\u0430\u0439\u043b\u044b -->\n {% compress css %}\n <link rel="stylesheet" type="text/css" href="{% static 'core/css/styles.css' %}">\n <link rel="stylesheet" type="text/css" href="{% static 'core/css/product-cards.css' %}">\n <link rel="stylesheet" type="text/css" href="{% static 'core/css/scroll-to-top.css' %}">\n {% endcompress %}\n\n <!-- \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c SmartSpinner \u0441 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u043e\u043c -->\n <script src="{% static 'core/js/smart-spinner.js' %}" defer></script>\n <script src="https://unpkg.com/htmx.org@1.9.10" defer></script>\n <!-- \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 CSS \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e -->\n <link rel="preload" href="{% static 'core/css/tailwind.output.css' %}" as="style"\n onload="this.onload=null;this.rel='stylesheet'">\n <noscript>\n <link rel="stylesheet" href="{% static 'core/css/tailwind.output.css' %}">\n </noscript>\n\n <link rel="preload" href="{% static 'core/css/loader.css' %}" as="style"\n onload="this.onload=null;this.rel='stylesheet'">\n <noscript>\n <link rel="stylesheet" href="{% static 'core/css/loader.css' %}">\n </noscript>\n\n <link rel="preload" href="{% static 'core/css/product-detail.css' %}" as="style"\n onload="this.onload=null;this.rel='stylesheet'">\n <noscript>\n <link rel="stylesheet" href="{% static 'core/css/product-detail.css' %}">\n </noscript>\n\n <link rel="preload" href="{% static 'core/css/lazy-animations.css' %}" as="style"\n onload="this.onload=null;this.rel='stylesheet'">\n <noscript>\n <link rel="stylesheet" href="{% static 'core/css/lazy-animations.css' %}">\n </noscript>\n\n <!-- Font Awesome \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e -->\n <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" as="style"\n onload="this.onload=null;this.rel='stylesheet'">\n <noscript>\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">\n </noscript>\n {% block extra_css %}{% endblock %}\n <script type="application/ld+json">\n {\n "@context": "https://schema.org",\n "@type": "LocalBusiness",\n "name": "Vape Shop \u041c\u0438\u043d\u0441\u043a",\n "description": "\u0412\u0435\u0439\u043f \u0448\u043e\u043f \u0432 \u041c\u0438\u043d\u0441\u043a\u0435 \u0441 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u0430\u0441\u0441\u043e\u0440\u0442\u0438\u043c\u0435\u043d\u0442\u043e\u043c \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0445 \u0441\u0438\u0433\u0430\u0440\u0435\u0442 \u0438 \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0435\u0439.",\n "image": "https://smoketeamby.shop/images/logo.png",\n "url": "https://smoketeamby.shop/",\n "priceRange": "BYN",\n "address": {\n "@type": "PostalAddress",\n "streetAddress": "\u0443\u043b. \u041f\u0440\u0438\u0442\u044b\u0446\u043a\u043e\u0433\u043e, 1",\n "addressLocality": "\u041c\u0438\u043d\u0441\u043a",\n "postalCode": "220000",\n "addressCountry": "BY"\n },\n "telephone": "",\n "openingHoursSpecification": [\n {\n "@type": "OpeningHoursSpecification",\n "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],\n "opens": "10:00",\n "closes": "18:00"\n },\n {\n "@type": "OpeningHoursSpecification",\n "dayOfWeek": ["Saturday", "Sunday"],\n "opens": "11:00",\n "closes": "16:00"\n }\n ]\n }\n </script>\n {% block extra_head %}{% endblock %}\n</head>\n\n<body class="bg-main text-white">\n <!-- \u0412\u0435\u0439\u043f-\u0441\u043f\u0438\u043d\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 JavaScript -->\n\n <header class="fixed w-full bg-main/95 backdrop-blur-sm shadow-md z-50 transition-all duration-300 h-14 md:h-16">\n <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">\n <div class="flex justify-between items-center h-14 md:h-16">\n <!-- Logo -->\n <div class="flex-shrink-0">\n <a href="{% url 'core:product_list' %}" class="flex items-center group">\n <img class="h-8 md:h-12 w-auto filter drop-shadow transition-transform duration-300 group-hover:scale-105"\n src="{% static 'core/images/logo.png' %}" alt="Vape Shop" loading="eager"\n fetchpriority="high">\n </a>\n </div>\n\n <!-- Desktop Navigation -->\n <nav class="hidden md:flex space-x-8">\n <a href="{% url 'core:product_list' %}"\n class="text-white hover:text-accent-smoke px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-secondary/50">\u0413\u043b\u0430\u0432\u043d\u0430\u044f</a>\n <a href="{% url 'core:catalog' %}"\n class="text-white hover:text-accent-smoke px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-secondary/50">\u041a\u0430\u0442\u0430\u043b\u043e\u0433</a>\n <a href="{% url 'core:blog_list' %}"\n class="text-white hover:text-accent-smoke px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-secondary/50">\u0411\u043b\u043e\u0433</a>\n <a href="{% url 'core:about' %}"\n class="text-white hover:text-accent-smoke px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-secondary/50">\u041e\n \u043d\u0430\u0441</a>\n <a href="{% url 'core:contacts' %}"\n class="text-white hover:text-accent-smoke px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-secondary/50">\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b</a>\n </nav>\n\n <!-- Search, Cart and Mobile Menu Button -->\n <div class="flex items-center space-x-4">\n <!-- Search -->\n <div class="hidden md:flex items-center">\n <div class="relative group">\n <form action="{% url 'core:search' %}" method="GET" class="m-0">\n <input type="text" name="q"\n class="w-64 pl-10 pr-10 py-2 rounded-lg bg-secondary/50 border border-accent-smoke/30 focus:outline-none focus:border-accent-light text-white placeholder-gray-400 transition-all duration-300 group-hover:bg-secondary/70"\n placeholder="\u041f\u043e\u0438\u0441\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432...">\n <div\n class="absolute left-3 top-2.5 text-accent-smoke/70 group-hover:text-accent-smoke transition-colors">\n <i class="fas fa-magnifying-glass"></i>\n </div>\n <button type="submit"\n class="absolute right-3 top-2.5 text-accent-smoke/70 hover:text-white transition-colors">\n <i class="fas fa-arrow-right-long"></i>\n </button>\n <button type="button"\n class="clear-search absolute right-10 top-2.5 text-accent-smoke/70 hover:text-white transition-colors hidden">\n <i class="fas fa-xmark"></i>\n </button>\n </form>\n </div>\n </div>\n\n <!-- Cart (hidden on mobile) -->\n <a href="#cart"\n class="hidden md:flex relative p-2 text-white hover:text-accent-smoke transition-all duration-300 group">\n <span class="sr-only">\u041a\u043e\u0440\u0437\u0438\u043d\u0430</span>\n <i class="fas fa-cart-shopping text-xl group-hover:scale-110 transition-transform"></i>\n <span\n class="cart-count absolute -top-1 -right-1 items-center justify-center w-5 h-5 text-xs font-bold text-main bg-accent-smoke rounded-full transform transition-all group-hover:scale-110"\n style="display: none;">0</span>\n </a>\n </div>\n </div>\n </div>\n\n <!-- Mobile Menu -->\n <div class="md:hidden hidden bg-secondary/95 backdrop-blur-sm transition-all duration-300 ease-in-out"\n id="mobile-menu">\n <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">\n <!-- Mobile Menu Header with Close Button -->\n <div class="flex justify-between items-center px-3 py-2 border-b border-accent-smoke/20 mb-2">\n <span class="text-white font-medium">\u041c\u0435\u043d\u044e</span>\n <button type="button"\n class="close-mobile-menu p-2 rounded-md text-white hover:text-accent-smoke hover:bg-main/50 focus:outline-none focus:ring-2 focus:ring-accent-smoke transition-all duration-300"\n aria-label="\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043c\u0435\u043d\u044e">\n <i class="fas fa-xmark text-lg"></i>\n </button>\n </div>\n\n\n\n <a href="{% url 'core:product_list' %}"\n class="mobile-menu-link block px-3 py-3 rounded-md text-base font-medium text-white hover:text-accent-smoke hover:bg-main/50 transition-all duration-300 border-l-2 border-transparent hover:border-accent-smoke">\n <i class="fas fa-home w-5 mr-3"></i>\u0413\u043b\u0430\u0432\u043d\u0430\u044f\n </a>\n <a href="{% url 'core:catalog' %}"\n class="mobile-menu-link block px-3 py-3 rounded-md text-base font-medium text-white hover:text-accent-smoke hover:bg-main/50 transition-all duration-300 border-l-2 border-transparent hover:border-accent-smoke">\n <i class="fas fa-list w-5 mr-3"></i>\u041a\u0430\u0442\u0430\u043b\u043e\u0433\n </a>\n <a href="{% url 'core:blog_list' %}"\n class="mobile-menu-link block px-3 py-3 rounded-md text-base font-medium text-white hover:text-accent-smoke hover:bg-main/50 transition-all duration-300 border-l-2 border-transparent hover:border-accent-smoke">\n <i class="fas fa-newspaper w-5 mr-3"></i>\u0411\u043b\u043e\u0433\n </a>\n <a href="{% url 'core:about' %}"\n class="mobile-menu-link block px-3 py-3 rounded-md text-base font-medium text-white hover:text-accent-smoke hover:bg-main/50 transition-all duration-300 border-l-2 border-transparent hover:border-accent-smoke">\n <i class="fas fa-info-circle w-5 mr-3"></i>\u041e \u043d\u0430\u0441\n </a>\n <a href="{% url 'core:contacts' %}"\n class="mobile-menu-link block px-3 py-3 rounded-md text-base font-medium text-white hover:text-accent-smoke hover:bg-main/50 transition-all duration-300 border-l-2 border-transparent hover:border-accent-smoke">\n <i class="fas fa-phone w-5 mr-3"></i>\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u044b\n </a>\n </div>\n </div>\n </header>\n\n <!-- Spacer to prevent content from hiding under fixed header -->\n <div class="h-14 md:h-16"></div>\n\n {% block hero %}{% endblock %}\n\n <main class="container mx-auto px-4 py-8">\n {% block content %}\n {% endblock %}\n </main>\n\n <!-- Footer Section -->\n <footer class="bg-contrast text-white py-4 text-center mt-8">\n <p>&copy; 2025 Smoke Team By. \u0412\u0441\u0435 \u043f\u0440\u0430\u0432\u0430 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b.</p>\n </footer>\n\n <!-- Cart Modal -->\n <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">\n <div\n class="fixed inset-y-0 right-0 w-full md:w-96 bg-secondary shadow-xl transform transition-transform duration-300 ease-in-out translate-x-full">\n <div class="flex flex-col h-full">\n <div class="p-4 border-b border-accent-smoke/20">\n <div class="flex justify-between items-center">\n <h2 class="text-xl font-bold text-white">\u041a\u043e\u0440\u0437\u0438\u043d\u0430</h2>\n <button id="close-cart" class="text-accent-smoke hover:text-white">\n <i class="fas fa-xmark"></i>\n </button>\n </div>\n </div>\n\n <!-- Cart Items -->\n <div id="cart-items" class="flex-1 overflow-y-auto p-4 space-y-4">\n <!-- Items will be added here dynamically -->\n </div>\n\n <!-- Cart Footer -->\n <div class="p-4 border-t border-accent-smoke/20">\n <div class="flex justify-between items-center mb-4">\n <span class="text-white text-lg">\u0418\u0442\u043e\u0433\u043e:</span>\n <span id="cart-total" class="text-accent-smoke text-xl font-bold">0.00 BYN</span>\n </div>\n <button id="checkout-btn"\n class="w-full bg-accent-smoke text-main py-3 px-4 rounded-lg font-semibold transition-all hover:bg-accent-light hover:shadow-md transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed">\n \u041e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0437\u0430\u043a\u0430\u0437\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Age Verification Modal -->\n <div id="age-verification-modal"\n class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">\n <div\n class="bg-main/90 backdrop-blur-sm p-6 rounded-lg shadow-lg w-full max-w-md text-center border border-accent-smoke/20">\n <h2 class="text-3xl font-bold mb-4 text-accent-smoke">18+</h2>\n <p class="text-white/90 mb-6 text-sm leading-relaxed">\n \u042d\u0442\u043e\u0442 \u0441\u0430\u0439\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043b\u0438\u0446, \u0434\u043e\u0441\u0442\u0438\u0433\u0448\u0438\u0445 18 \u043b\u0435\u0442. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u043e\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0443 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0438 \u0411\u0435\u043b\u0430\u0440\u0443\u0441\u044c\n (\u041f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u2116 31 \u043e\u0442 15 \u044f\u043d\u0432\u0430\u0440\u044f 2009 \u0433\u043e\u0434\u0430 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u0442 15 \u0430\u043f\u0440\u0435\u043b\u044f 2020 \u0433\u043e\u0434\u0430), \u043f\u0440\u043e\u0434\u0430\u0436\u0430\n \u043d\u0438\u043a\u043e\u0442\u0438\u043d\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u0442\u043e\u0432\u0430\u0440\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0436\u0438\u0434\u043a\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u043a\u0443\u0440\u0435\u043d\u0438\u044f, \u043b\u0438\u0446\u0430\u043c \u0434\u043e 18 \u043b\u0435\u0442 \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u0430.\n \u041c\u044b \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u043c \u0440\u043e\u0437\u043d\u0438\u0447\u043d\u0443\u044e \u0442\u043e\u0440\u0433\u043e\u0432\u043b\u044e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439, \u0432\u044b\u0434\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0417\u0430\u043a\u043e\u043d\u0430 \u2116 213-\u0417 \u043e\u0442\n 14 \u043e\u043a\u0442\u044f\u0431\u0440\u044f 2022 \u0433\u043e\u0434\u0430, \u0438 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u043c \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0434\u0430\u0436\u0443.\n </p>\n <div class="flex flex-col space-y-3 mt-4">\n <button id="age-verify-yes"\n class="w-full bg-accent-smoke text-main py-2 px-4 rounded-lg font-semibold transition-all hover:bg-accent-light">\n \u041c\u043d\u0435 \u0435\u0441\u0442\u044c 18 \u043b\u0435\u0442\n </button>\n <button id="age-verify-no"\n class="w-full bg-red-500/50 text-white py-2 px-4 rounded-lg font-semibold transition-all hover:bg-red-500/70">\n \u041c\u043d\u0435 \u043d\u0435\u0442 18 \u043b\u0435\u0442\n </button>\n </div>\n </div>\n </div>\n\n <!-- Under 18 Message Modal -->\n <div id="under-18-message" class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center hidden">\n <div\n class="bg-main/90 backdrop-blur-sm p-8 rounded-lg shadow-lg w-full max-w-md text-center border border-accent-smoke/20">\n <i class="fas fa-exclamation-circle text-4xl text-accent-smoke mb-4"></i>\n <h2 class="text-2xl font-bold mb-4 text-accent-smoke">\u0414\u043e\u0441\u0442\u0443\u043f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d</h2>\n <p class="text-white/90 mb-6 text-sm leading-relaxed">\n \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u043e\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0443 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0438 \u0411\u0435\u043b\u0430\u0440\u0443\u0441\u044c, \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0430\u0439\u0442\u0443 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0434\u043b\u044f \u043b\u0438\u0446 \u043c\u043b\u0430\u0434\u0448\u0435 18 \u043b\u0435\u0442.\n </p>\n <p class="text-white/80 mb-6 text-sm">\n \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0430, \u0441\u0432\u044f\u0436\u0438\u0442\u0435\u0441\u044c \u0441 \u043d\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b.\n </p>\n <a href="{% url 'core:contacts' %}"\n class="inline-block bg-accent-smoke text-main px-6 py-2 rounded-lg font-semibold transition-all hover:bg-accent-light hover:shadow-lg transform hover:-translate-y-1">\n \u041d\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u044b\n </a>\n </div>\n </div>\n\n <!-- Mobile Bottom Navigation -->\n <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-secondary/95 backdrop-blur-sm border-t border-accent-smoke/20 z-40"\n id="mobile-bottom-nav">\n <div class="flex justify-around items-center py-2">\n <a href="{% url 'core:product_list' %}"\n class="bottom-nav-item nav-item-home flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300">\n <i class="fas fa-home text-lg mb-1"></i>\n <span class="text-xs">\u0413\u043b\u0430\u0432\u043d\u0430\u044f</span>\n </a>\n <a href="{% url 'core:catalog' %}"\n class="bottom-nav-item nav-item-catalog flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300">\n <i class="fas fa-list text-lg mb-1"></i>\n <span class="text-xs">\u041a\u0430\u0442\u0430\u043b\u043e\u0433</span>\n </a>\n\n <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 (\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430) -->\n <button type="button" id="mobile-filters-btn"\n class="nav-item-filters flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300 relative opacity-0 scale-0 transform-gpu"\n style="transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">\n <div class="relative">\n <i class="fas fa-filter text-lg mb-1"></i>\n <span\n class="filter-badge absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full min-w-4 h-4 flex items-center justify-center font-bold scale-0 transition-transform duration-200">0</span>\n </div>\n <span class="text-xs">\u0424\u0438\u043b\u044c\u0442\u0440\u044b</span>\n </button>\n\n <button type="button"\n class="mobile-search-toggle nav-item-search flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300">\n <i class="fas fa-magnifying-glass text-lg mb-1"></i>\n <span class="text-xs">\u041f\u043e\u0438\u0441\u043a</span>\n </button>\n <a href="#cart"\n class="bottom-nav-item nav-item-cart flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300 relative">\n <i class="fas fa-cart-shopping text-lg mb-1"></i>\n <span class="text-xs">\u041a\u043e\u0440\u0437\u0438\u043d\u0430</span>\n <span\n class="cart-count absolute -top-1 -right-1 items-center justify-center w-4 h-4 text-xs font-bold text-main bg-accent-smoke rounded-full"\n style="display: none;">0</span>\n </a>\n <button type="button"\n class="mobile-menu-toggle nav-item-menu flex flex-col items-center p-2 text-white hover:text-accent-smoke transition-all duration-300">\n <i class="fas fa-bars text-lg mb-1"></i>\n <span class="text-xs">\u041c\u0435\u043d\u044e</span>\n </button>\n </div>\n </nav>\n\n <!-- Mobile Search Overlay -->\n <div id="mobile-search-overlay" class="md:hidden fixed inset-0 bg-black/50 z-50 hidden">\n <!-- \u0417\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u043e\u0438\u0441\u043a\u0430 -->\n <div class="absolute inset-0" onclick="window.MobileNav?.closeMobileSearch()"></div>\n\n <!-- \u041f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u043d\u0438\u0437\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 -->\n <div class="absolute bottom-0 left-0 right-0 bg-secondary/95 backdrop-blur-sm border-t border-accent-smoke/20">\n <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u0438\u0441\u043a\u0430 -->\n <div class="flex items-center justify-between p-4 border-b border-accent-smoke/10">\n <h3 class="text-white font-medium">\u041f\u043e\u0438\u0441\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432</h3>\n <button type="button"\n class="close-mobile-search p-2 text-white hover:text-accent-smoke transition-colors rounded-full hover:bg-main/30">\n <i class="fas fa-xmark text-lg"></i>\n </button>\n </div>\n\n <!-- \u041f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 -->\n <div class="p-4 pb-safe">\n <form action="{% url 'core:search' %}" method="GET" class="relative">\n <div class="relative group">\n <input type="text" name="q"\n class="w-full pl-4 pr-16 py-4 text-lg rounded-xl bg-main/50 border border-accent-smoke/30 focus:outline-none focus:border-accent-smoke focus:ring-2 focus:ring-accent-smoke/20 text-white placeholder-gray-400 transition-all duration-300"\n placeholder="\u041d\u0430\u0439\u0442\u0438 \u0442\u043e\u0432\u0430\u0440..." id="mobile-search-input" autocomplete="off"\n autocapitalize="off">\n\n <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 -->\n <button type="submit"\n class="absolute right-2 top-1/2 -translate-y-1/2 bg-accent-smoke text-main px-4 py-2 rounded-lg font-medium hover:bg-accent-smoke/90 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-accent-smoke/50">\n <i class="fas fa-arrow-right"></i>\n </button>\n </div>\n\n <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430 -->\n <div class="mt-3 flex justify-center">\n <button type="submit"\n class="bg-accent-smoke/10 text-accent-smoke px-6 py-2 rounded-lg font-medium hover:bg-accent-smoke/20 transition-all duration-200 border border-accent-smoke/30">\n <i class="fas fa-search mr-2"></i>\u041d\u0430\u0439\u0442\u0438\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Add bottom padding to prevent content from hiding behind bottom nav -->\n <div class="md:hidden h-16"></div>\n\n <!-- Scripts Section -->\n\n <!-- \u0421\u0436\u0430\u0442\u044b\u0435 JavaScript \u0444\u0430\u0439\u043b\u044b -->\n {% compress js %}\n <script type="text/javascript" src="{% static 'core/js/modules/SearchHandler.js' %}"></script>\n <script type="text/javascript" src="{% static 'core/js/modules/ImageHandler.js' %}"></script>\n <script type="text/javascript" src="{% static 'core/js/modules/MobileNav.js' %}"></script>\n <script type="text/javascript" src="{% static 'core/js/modules/MobileNavFilters.js' %}"></script>\n <script type="text/javascript" src="{% static 'core/js/modules/lazy-loader.js' %}"></script>\n {% endcompress %}\n\n <!-- \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 HTML (\u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c\u0438) -->\n <script src="{% static 'core/js/global-functions.js' %}"></script>\n\n <!-- \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b (\u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f) -->\n <script type="module" src="{% static 'core/js/main.js' %}?v=1.1"></script>\n <script type="module" src="{% static 'core/js/modules/AgeVerification.js' %}"></script>\n\n <!-- Service Worker Registration -->\n <script src="{% static 'core/js/sw-register.js' %}"></script>\n\n {% block scripts %}{% endblock %}\n\n <script>\n // \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c lazy-loading \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u0435\u0437 explicit \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\n document.addEventListener('DOMContentLoaded', () => {\n document.querySelectorAll('img:not([loading])').forEach(img => {\n img.setAttribute('loading', 'lazy');\n });\n });\n </script>\n</body>\n\n</html>\n
\n
\n"}